/* static/css/product-detail.css */
/*
 * Стили детальной страницы продукта (templates/product.html).
 * Префикс .pd- (product-detail).
 *
 * v3 — обновления:
 *   - Mobile order: заголовок → картинка → описание → теги → цена
 *   - Теги: первая строка + аккордеон "+N развернуть"
 *   - Цена: левая часть (label + 5490₽) — правая часть (183₽/день · 30 дней) + кнопка
 *   - FAQ удалён из этого файла (теперь в components.css как .faq-accordion)
 */

/* ═══════════════════════════════════════════════════════
   1. STICKY ВИЗУАЛ
   ═══════════════════════════════════════════════════════ */

.pd-visual-sticky {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-stage-min-height {
    min-height: 360px;
}

/* ═══════════════════════════════════════════════════════
   2. MOBILE REORDERING — заголовок → картинка → описание → теги → цена
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .pd-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .pd-hero-grid > .pd-hero-visual { order: 2; }
    .pd-hero-grid > .pd-hero-content { order: 1; }

    .pd-hero-content {
        display: flex;
        flex-direction: column;
    }

    /*
     * НОВЫЙ порядок на мобильнике:
     *   1. pd-hero-title-block (заголовок + lead)
     *   2. pd-hero-visual (через скрытие/показ — см. ниже)
     *   3. pd-hero-desc-block (полное описание + теги)
     *   4. pd-preorder
     *   5. pd-price-card
     */
    .pd-hero-content > .pd-hero-title-block { order: 1; }
    .pd-hero-content > .pd-hero-desc-block { order: 3; }
    .pd-hero-content > .pd-preorder { order: 4; }
    .pd-hero-content > .pd-price-card { order: 5; }

    .pd-visual-sticky {
        position: static;
    }
}

/*
 * Картинка между заголовком и описанием на мобильнике.
 * На десктопе картинка слева в отдельной колонке.
 * Дублирование через CSS — НЕ через лишний HTML.
 * Мобильная картинка показывается только на mobile.
 */
.pd-hero-visual--mobile {
    display: none;
}

@media (max-width: 1023px) {
    /* Скрываем десктопную (левую колонку) */
    .pd-hero-visual--desktop {
        display: none;
    }

    /* Показываем мобильную (между заголовком и описанием) */
    .pd-hero-visual--mobile {
        display: flex;
        justify-content: center;
        margin: 1rem 0 1.5rem;
        order: 2;
    }
}

/* ═══════════════════════════════════════════════════════
   3. ЗАГОЛОВОК + LEAD + ОПИСАНИЕ
   ═══════════════════════════════════════════════════════ */

.pd-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
    margin-top: 0.75rem;
}

.pd-lead {
    font-family: 'Manrope', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-text);
    margin-top: 1rem;
    margin-bottom: 0;
}

.pd-description {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9375rem;
    color: var(--color-muted);
    line-height: 1.7;
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════
   4. ТЕГИ — аккордеон (первая строка + "+N")
   ═══════════════════════════════════════════════════════ */

/*
 * why: пользователь хочет видеть теги (важно для SEO),
 * но не хочет чтобы они занимали много места.
 * JS модуль tags-expander.js скрывает теги во 2-й строке
 * и добавляет кнопку "+N развернуть".
 */

.pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.875rem;
    align-items: center;
}

.pd-tags .goal-tag.is-hidden {
    display: none;
}

/* Если контейнер развёрнут — показываем все */
.pd-tags.is-expanded .goal-tag.is-hidden {
    display: inline-flex;
}

/* Кнопка раскрытия */
.pd-tags__toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: rgba(229, 231, 235, 0.6);
    color: var(--color-text);
    border: 1px solid rgba(229, 231, 235, 0.85);
    border-radius: 9999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pd-tags__toggle:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════
   5. PREORDER BANNER
   ═══════════════════════════════════════════════════════ */

.pd-preorder {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.pd-preorder__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #B45309;
    margin-top: 0.125rem;
}

.pd-preorder__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.pd-preorder__text {
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   6. PRICE CARD
   ═══════════════════════════════════════════════════════ */

.pd-price-card {
    border-radius: 1.5rem;
    border: 1px solid rgba(229, 231, 235, 0.85);
    background: #fff;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 16px -6px rgba(17, 24, 39, 0.06);
}

/*
 * Главный ряд: слева (стоимость + цена + daily), справа (кнопка).
 * Кнопка центрирована по вертикали через align-items: center.
 * flex: 1 на кнопке заполняет всю правую часть.
 */
.pd-price-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Левый блок: label + цена + daily — без лишних margin */
.pd-price-left {
    flex-shrink: 0;
}

.pd-price-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-muted);
    margin: 0 0 0.25rem 0;
    line-height: 1;
}

.pd-price-value-group {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0;
    line-height: 1;
}

.pd-price-value {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.125rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.pd-price-currency {
    font-size: 1rem;
    color: var(--color-muted);
}

.pd-price-daily-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: var(--color-primary-light);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 0.25rem;
}

.pd-price-ask {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-muted);
    line-height: 1;
}

/* Правый блок: кнопка занимает всё оставшееся место */
.pd-price-cta {
    flex: 1;
    display: flex;
    align-items: center;
}

.pd-price-cta .btn-primary {
    width: 100%;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════
   7. TRUST BAR
   ═══════════════════════════════════════════════════════ */

.pd-trust-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(229, 231, 235, 0.7);
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.pd-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-trust-item__icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
}

.pd-trust-item__icon--rating { color: #F59E0B; fill: #F59E0B; }
.pd-trust-item__icon--check { color: var(--color-success); }
.pd-trust-item__icon--shipping { color: var(--color-primary); }

.pd-trust-item__strong {
    color: var(--color-text);
    font-weight: 700;
    margin-right: 0.25rem;
}

.pd-trust-item__link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.pd-trust-item__link:hover {
    color: var(--color-text);
}

@media (max-width: 480px) {
    .pd-trust-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }
}

/* ═══════════════════════════════════════════════════════
   8. META ROWS
   ═══════════════════════════════════════════════════════ */

.pd-price-meta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(229, 231, 235, 0.7);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pd-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-meta-row__icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.pd-meta-row__icon--primary { color: var(--color-primary); }
.pd-meta-row__icon--muted { color: var(--color-muted); }

.pd-meta-row__text {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.pd-meta-row__strong {
    color: var(--color-text);
    font-weight: 700;
}

.pd-meta-row__mono {
    font-family: monospace;
}

/* ═══════════════════════════════════════════════════════
   9. BENEFITS — компактный список с галочками
   ═══════════════════════════════════════════════════════ */

.pd-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .pd-benefits-list {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem 2rem;
    }
}

.pd-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.pd-benefit-item__check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pd-benefit-item__check-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-success);
    stroke-width: 3;
}

.pd-benefit-item__text {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════
   10. TECH FACTS — горизонтальный пояс
   ═══════════════════════════════════════════════════════ */

.pd-tech-facts-bar {
    background: linear-gradient(
        135deg,
        rgba(13, 148, 136, 0.04) 0%,
        rgba(139, 92, 246, 0.04) 100%
    );
    border-top: 1px solid rgba(13, 148, 136, 0.08);
    border-bottom: 1px solid rgba(13, 148, 136, 0.08);
    padding: 1.75rem 0;
}

.pd-tech-facts-bar__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .pd-tech-facts-bar__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .pd-tech-facts-bar__inner {
        padding: 0 2rem;
    }
}

.pd-tech-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.pd-tech-fact__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgba(13, 148, 136, 0.1);
    border: 1px solid rgba(13, 148, 136, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.pd-tech-fact__icon i {
    width: 1.125rem;
    height: 1.125rem;
}

.pd-tech-fact__body {
    flex: 1;
    min-width: 0;
}

.pd-tech-fact__title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.pd-tech-fact__desc {
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════
   11. COMPOSITION
   ═══════════════════════════════════════════════════════ */

.pd-composition-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .pd-composition-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.5rem;
    }
}

.pd-composition-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.85);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pd-composition-item:hover {
    border-color: rgba(13, 148, 136, 0.2);
    box-shadow: 0 4px 12px -4px rgba(13, 148, 136, 0.08);
}

.pd-composition-item__num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pd-composition-item__body {
    flex: 1;
    min-width: 0;
}

.pd-composition-item__name {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
    margin: 0 0 0.25rem 0;
}

.pd-composition-item__note {
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   12. MINI-REVIEWS
   ═══════════════════════════════════════════════════════ */

.pd-mini-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pd-mini-reviews {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pd-mini-review {
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.85);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pd-mini-review:hover {
    border-color: rgba(13, 148, 136, 0.2);
    box-shadow: 0 4px 14px -4px rgba(13, 148, 136, 0.08);
}

.pd-mini-review__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pd-mini-review__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(229, 231, 235, 0.85);
}

.pd-mini-review__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pd-mini-review__info {
    flex: 1;
    min-width: 0;
}

.pd-mini-review__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.pd-mini-review__stars {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
}

.pd-mini-review__star {
    width: 0.875rem;
    height: 0.875rem;
}

.pd-mini-review__star--filled {
    color: #F59E0B;
    fill: #F59E0B;
}

.pd-mini-review__star--empty {
    color: #E5E7EB;
    fill: transparent;
}

.pd-mini-review__text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-mini-review__footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(229, 231, 235, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-muted);
}

.pd-mini-review__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pd-mini-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-success);
    font-weight: 600;
}

.pd-mini-review__verified i {
    width: 0.75rem;
    height: 0.75rem;
}

.pd-mini-reviews-cta {
    margin-top: 1.5rem;
    text-align: center;
}

.pd-mini-reviews-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background: var(--color-primary-light);
    border: 1px solid rgba(13, 148, 136, 0.15);
    transition: all 0.2s;
}

.pd-mini-reviews-cta a:hover {
    background: rgba(13, 148, 136, 0.15);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════
   13. IDEAL-FOR + CAUTION
   ═══════════════════════════════════════════════════════ */

.pd-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 64rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pd-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.pd-info-section__title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0.75rem 0 1rem 0;
}

.pd-ideal-list,
.pd-caution-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pd-ideal-item,
.pd-caution-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.pd-ideal-item__icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pd-caution-item__icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #D97706;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pd-ideal-item__text,
.pd-caution-item__text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.55;
}

.pd-disclaimer-footnote {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(229, 231, 235, 0.7);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.pd-disclaimer-footnote i {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════
   14. КОНТЕЙНЕРЫ + ВСПОМ.
   ═══════════════════════════════════════════════════════ */

.pd-section-narrow {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.pd-section-wide {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.pd-section-content {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.pd-subsection-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════
   15. ВИДЕО метки
   ═══════════════════════════════════════════════════════ */

.pd-video-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.pd-video-group-label__icon {
    width: 1rem;
    height: 1rem;
}

.pd-video-group-label__icon--purple { color: var(--color-secondary); }
.pd-video-group-label__icon--amber { color: #D97706; }
.pd-video-group-label__icon--primary { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════
   16. BUYBAR ASK
   ═══════════════════════════════════════════════════════ */

.pd-buybar-ask {
    font-size: 15px;
}