/* «Спросите Ольгу»: кнопка на товаре и в каталоге, форма вопроса и
   благодарность. Отдельный файл: Caddy отдаёт статику с кэшем на 30 дней,
   правка старых файлов до вернувшегося покупателя не доедет. Поля, ошибки
   и ловушка формы берут классы оформления из sections.css, цвета из
   переменных сайта (main.css), новых цветов нет. */

/* Кнопка вторичная, контурная: главное действие на странице товара это
   покупка, вопрос идёт следом. */
.vopros-blok { margin: 0 0 18px; }
.vopros-knopka {
    background: transparent;
    color: var(--primary-dark);
    border-color: var(--primary-color);
}
.vopros-knopka:hover { background: rgba(166, 124, 82, .08); }
.vopros-blok__srok { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }

/* В CTA-секции каталога текст белый на градиенте (.catalog-section__cta). */
.shop-section--cta .vopros-blok { margin: 8px 0 0; }
.shop-section--cta .vopros-knopka { color: #fff; border-color: rgba(255, 255, 255, .85); }
.shop-section--cta .vopros-knopka:hover { background: rgba(255, 255, 255, .12); }
.shop-section--cta .vopros-blok__srok { color: inherit; }

@media (max-width: 520px) {
    .vopros-knopka { display: block; width: 100%; }
}

/* Форма и благодарность. Под сплошной шапкой магазина отступ как у
   корзины, оформления и отказа. */
.stranica-magazina .vopros-page { padding-top: 120px; }
.vopros-page .container { max-width: 640px; }
.vopros-srok { color: var(--text-secondary); margin: 0 0 24px; line-height: 1.6; }
.vopros-tovar {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    background: rgba(166, 124, 82, .07);
}
.vopros-hint { display: block; margin-top: 6px; font-size: .85rem; color: var(--text-secondary); }
.vopros-page textarea { resize: vertical; min-height: 140px; }
/* sections.css подсвечивает только input и select. */
.vopros-page .checkout-field--bad textarea { border-color: #c0392b; }

/* Подбор по описанию над каталогом (волна 2, components/podbor.html).
   Поле в тон поиска витрины (.shop-search), карточки той же сеткой
   .shop-grid, подпись из словаря под карточкой. Скрытые строки блока
   показывает podbor.js. */
.podbor { margin: 0 0 32px; }
/* .btn задаёт display и перебивает атрибут hidden у кнопок вопроса. */
.podbor [hidden] { display: none !important; }
.podbor__nadpis { display: block; margin: 0 0 8px; font-weight: 600; color: var(--text-primary); }
.podbor__stroka { display: flex; gap: 12px; align-items: center; }
.podbor__pole {
    flex: 1; min-width: 0;
    font-size: 15px; color: var(--text-primary); background: var(--bg-white);
    border: 1px solid var(--border-color); border-radius: 20px; padding: 12px 18px;
}
.podbor__knopka { flex-shrink: 0; }
.podbor__zhdite,
.podbor__soobshchenie { margin: 16px 0 0; color: var(--text-secondary); }
.podbor__zdorove {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    background: rgba(166, 124, 82, .07);
}
.podbor__setka { margin-top: 20px; }
.podbor__karta { display: flex; flex-direction: column; }
.podbor__karta .shop-card { flex: 1; }
.podbor__podpis { margin: 8px 4px 0; font-size: 14px; color: var(--primary-dark); }
.podbor .vopros-knopka { margin-top: 16px; }

@media (max-width: 520px) {
    .podbor__stroka { flex-direction: column; align-items: stretch; }
}