/* css/product-page.css */
.product-page-main { padding-bottom: 5rem; }

.product-hero {
    padding: 3rem 0;
    max-width: 1200px; 
    margin: 0 auto;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.3fr 1fr; 
    gap: 4rem;
    padding: 0 20px;
}

.hero-info { display: flex; flex-direction: column; justify-content: flex-start; }

.hero-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.breadcrumb {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}

.breadcrumb-link { color: inherit; text-decoration: none; transition: 0.2s; }
.breadcrumb-link:hover { color: var(--magenta); }

.product-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1; 
    margin-bottom: 1rem;
    color: var(--brand-dark);
}

.tagline {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--magenta);
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* Список фактов */
.key-facts-block h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}
.key-facts-list { 
    list-style: none !important; /* Жестко отключаем маркеры у списка */
    padding: 0; 
    margin-bottom: 2rem; 
}
.key-facts-list li {
    list-style: none !important; /* Жестко отключаем маркеры у списка */
    position: relative;
    /* Немного увеличим отступ слева, чтобы иконка дышала */
    padding-left: 2rem; 
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
    color: var(--brand-dark);
}

.key-facts-list li::before {
    content: ""; /* Убираем текстовую стрелку ↗ */
    position: absolute;
    left: 0;
    top: 0.15rem; /* Сдвигаем вниз для центровки относительно строки текста */
    
    /* Задаем размеры иконки */
    width: 1.3rem;
    height: 1.3rem;
    
    /* Заливаем иконку цветом мадженты */
    background-color: var(--magenta);
    
    /* Накладываем трафарет промотера */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20V8h14M16 5l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20V8h14M16 5l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Карточка "Документация" */
.details-link-card {
    display: block;
    background: var(--bg-light); 
    border: 1px solid var(--platinum); 
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.details-link-card:hover {
    background: var(--white);
    border-color: var(--magenta);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.details-label { color: var(--brand-dark); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.details-action { color: var(--magenta); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; }

/* Визуальный блок и цены */
.protein-model-box {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--platinum);
    height: 300px; 
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    overflow: hidden;
}
.model-img { max-width: 100%; max-height: 100%; object-fit: cover; }

.price-selection-card {
    background: var(--white);
    border: 1px solid var(--platinum); 
    padding: 2rem;
    box-shadow: var(--shadow-md); 
    border-radius: 16px; 
}
.price-selection-card h3 { font-size: 1.1rem; margin-bottom: 1.5rem;}
/* Общие стили строки фасовки */
.price-row {
    display: flex;
    align-items: center; /* Центрируем цену по вертикали относительно двух строк текста */
    justify-content: space-between;
    padding: 12px 15px;
    gap: 15px;
    min-height: 54px; /* Фиксируем высоту, чтобы кнопки не "прыгали" */
}

/* Обертка для текста (Количество + Кат.номер) */
.variant-info-wrapper {
    display: block;
    line-height: 1.2;
    font-size: 0.9rem;
    color: var(--brand-dark);
    flex-grow: 1;
}

/* Стилизация самого каталожного номера */
.variant-info-wrapper small {
    display: block; /* Перенос на новую строку */
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--platinum); /* Мягкий серый цвет */
    font-weight: 400;
    text-transform: none; /* Если вдруг родитель в верхнем регистре */
}

.price-row.selectable {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.2rem; 
    border: 1px solid var(--platinum); 
    border-radius: 8px; 
    margin-bottom: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease; 
    background: #fafafa;
}
.price-row.selectable:hover { border-color: var(--platinum); background: var(--white); }
.price-row.selectable.active {
    border: 2px solid var(--magenta); 
    background: var(--white); 
    box-shadow: var(--shadow-magenta-glow); 
}
.price-row span { font-weight: 600; font-size: 0.95rem; color: var(--text-main); }
.price-row strong { white-space: nowrap; font-size: 1rem; color: var(--brand-dark); }

#add-to-cart-btn {
    width: 100%; /* Растягиваем по ширине колонки фасовок */
    margin-top: 1rem;
}

/* Апселл (Сопутствующие товары) */
.integrated-upsell { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--platinum); }
.upsell-mini-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.upsell-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.upsell-card {
    display: flex; flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--platinum);
    border-radius: 12px;
    text-decoration: none;
    background: var(--white);
    transition: all 0.3s ease;
}
.upsell-card:hover { border-color: var(--magenta); box-shadow: var(--shadow-md); }
.upsell-card-cat { font-size: 0.6rem; font-weight: 800; color: var(--magenta); text-transform: uppercase; margin-bottom: 0.5rem; }
.upsell-card-name {  font-size: 1rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 1rem; line-height: 1.3; }
.upsell-card-action { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); margin-top: auto;}

/* Кнопка Поделиться */
.share-btn-top {
    background: var(--white); border: none; color: var(--text-main); cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.share-btn-top:hover { color: var(--white); background: var(--magenta); }
.icon-share { width: 16px; height: 16px; }

@keyframes toastFade {
    0% { opacity: 0; transform: translate(-50%, 1rem); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    85% { opacity: 1; }
    100% { opacity: 0; }
}
/* Заставляем апселл на ПК занимать всю ширину под обеими колонками */
.integrated-upsell {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--platinum);
}

/* Выключенное состояние (если нет ссылки) */
.download-btn-dark[href="#"] {
    background: var(--platinum);
    color: #999 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Центрируем кнопки по вертикали */
.docs-columns {
    display: flex;
    gap: 20px;
    align-items: center; /* Заменили flex-start, чтобы кнопки не прыгали по высоте */
}
/* Отклик для ссылки "Читать онлайн" */
.magenta-link-btn:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}
.docs-columns {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.docs-col-left { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.docs-col-right { flex: 1.5; display: flex; flex-direction: column; gap: 10px; }
.docs-hint { font-size: 0.9rem; color: var(--text-main); margin: 0; }

/* Умный перенос каталожного номера в списке фасовок */
.variant-label-text {
    line-height: 1.3;
    display: block;
}

.cat-number-small {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

/* Фиксация цены */
.variant-price-text {
    white-space: nowrap;
    margin-left: 10px;
}
/* ----------------------------------
   АДАПТИВНОСТЬ СТРАНИЦЫ ПРОДУКТОВ
   ---------------------------------- */

   
@media (max-width: 768px) {
    /* 1. Магия CSS: "растворяем" контейнеры, чтобы управлять порядком всех элементов напрямую */
    .hero-info, .hero-visual { display: contents; }
    
    /* 2. Превращаем главный грид во flex-колонку */
    .hero-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem; 
    }

    /* 3. Расставляем элементы по местам сверху вниз (order) */
    .hero-header-actions { order: 1; }
    .product-title { order: 2; margin-bottom: 0; font-size: 2rem; }
    .tagline { order: 3; margin-bottom: 0; }
    
    /* --- ВИЗУАЛ И ЦЕНА ПОДНЯТЫ СЮДА --- */
    .protein-model-box { order: 4; height: 200px; padding: 1rem; margin-bottom: 0; }
    .price-selection-card { order: 5; padding: 1.25rem; margin-bottom: 0; }
    
    /* --- ФАКТЫ И ДОКИ УШЛИ ВНИЗ --- */

    .upsell-inline-grid { grid-template-columns: 1fr; }

    .key-facts-block { order: 6; }
    .technical-docs-menu { order: 7; margin-top: 1rem; width: 100%; box-sizing: border-box; } 
    .integrated-upsell { order: 8; margin-top: 1rem; }
    /* Схлопываем колонки документации друг под друга на мобилках */
    .docs-columns {
        flex-direction: column;
        gap: 20px;
    }
    .docs-col-left, .docs-col-right {
        width: 100%;
    }
}