/* ============================================================
   wowprice — стилі лендинга (тимчасові, до етапу C).

   Живуть у темі, а не в плагіні: подання — справа теми (to-do.md §5).
   Чому окремим файлом, а не тегом <style> у самій сторінці: редактор
   WordPress вирізає <style> із вмісту запису при збереженні, і лендинг
   виявляється без стилів. Файл цієї проблеми не має взагалі.

   Префікс .wpr-lp — стилі не течуть на решту сайту.
   ============================================================ */

.wpr-lp {
  /* Токени (кольори, тіні, радіуси) — у common.css на :root.
       Дублювати їх тут не можна: два джерела правди для палітри
       розходяться на першій же правці. */
  color: var(--text);
  line-height: 1.55;
  font-size: 17px
}

.wpr-lp * {
  box-sizing: border-box
}

.wpr-lp h1,
.wpr-lp h2,
.wpr-lp h3 {
  line-height: 1.2;
  margin: 0 0 .5em
}

/* Перший екран: великим — обіцянка, під нею заголовком — сам товар.

   До 14.09.2026 обіцянка й була H1, а назва товару йшла звичайним рядком.
   Для покупця це правильний порядок, і він лишився; для пошуку — ні:
   головний заголовок сторінки не казав, що тут продають, і за назвою моделі
   сторінку було не знайти. Тому ролі помінялись у розмітці, а не на екрані —
   .wpr-hook дістав вигляд колишнього H1, а H1 переїхав на назву товару. */
.wpr-lp .wpr-hook {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .35em
}

.wpr-lp h2 {
  font-size: clamp(22px, 4vw, 30px);
  margin-top: 0
}

.wpr-lp p {
  margin: 0 0 1em
}

.wpr-lp section {
  padding: 32px 0;
  border-top: 1px solid var(--border)
}

.wpr-lp section:first-of-type {
  border-top: 0
}

.wpr-lp .wpr-two {
  display: grid;
  gap: var(--gutter)
}

@media(min-width:820px) {
  .wpr-lp .wpr-two {
    grid-template-columns: 1fr 1fr;
    align-items: start
  }
}

.wpr-lp .wpr-photo {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px
}

.wpr-lp .wpr-photo img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block
}

/* Назва товару під заголовком.
   Заголовок продає вигоду («Живий вогонь уздовж доріжки»), і сам по собі
   не відповідає на питання «що саме мені привезуть». Назву беремо з картки
   товару через data-wpr — міняється вона в адмінці, як і ціна. */
/* Назва товару — тепер це H1. Трохи більша за колишній рядок моделі, щоб
   читалась як заголовок, але не сперечалась з обіцянкою над нею. */
.wpr-lp .wpr-model {
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px
}

.wpr-lp .wpr-lead {
  font-size: 19px;
  color: var(--muted)
}

.wpr-lp .wpr-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 8px
}

.wpr-lp .wpr-price b {
  font-size: 34px
}

.wpr-lp .wpr-price s {
  color: var(--muted);
  font-size: 20px
}

/* Жовтим і кількість штук: на лендингу це та сама відповідь на питання
   «що саме я замовляю», що й знижка. Білого тексту на жовтому тут немає —
   тільки --on-accent (контраст 1.82 нечитабельний, landing-spec §5.4). */
.wpr-lp .wpr-badge,
.wpr-lp .wpr-summary__units {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 700;
  font-size: 15px
}

.wpr-lp .wpr-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  min-height: 56px;
  text-align: center;
  margin-top: 12px
}

.wpr-lp .wpr-btn:hover {
  background: var(--accent-600)
}

.wpr-lp .wpr-btn[disabled] {
  opacity: .6;
  cursor: default
}

.wpr-lp .wpr-grid {
  display: grid;
  gap: var(--gutter)
}

@media(min-width:640px) {
  .wpr-lp .wpr-grid {
    grid-template-columns: 1fr 1fr
  }
}

.wpr-lp .wpr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px
}

.wpr-lp .wpr-card h3 {
  margin: 0 0 6px;
  font-size: 18px
}

.wpr-lp .wpr-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px
}

.wpr-lp .wpr-emoji {
  font-size: 26px;
  display: block;
  margin-bottom: 6px
}

.wpr-lp table {
  width: 100%;
  border-collapse: collapse
}

.wpr-lp table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top
}

.wpr-lp table td:first-child {
  color: var(--muted);
  width: 48%
}

.wpr-lp details {
  border-bottom: 1px solid var(--border);
  padding: 12px 0
}

.wpr-lp details summary {
  cursor: pointer;
  font-weight: 600
}

.wpr-lp details p {
  margin: 8px 0 0;
  color: var(--muted)
}

.wpr-lp .wpr-stars {
  color: var(--accent-600);
  letter-spacing: 2px
}

@supports (aspect-ratio: 1/1) {
  .wpr-lp .wpr-gallery__item {
    min-height: 0
  }
}


/* ---------- Мобільні уточнення ----------
   Основний трафік COD — телефон, і перший екран вирішує все.            */
@media (max-width: 640px) {

  /* Секції ближче одна до одної: на телефоні зайва порожнеча — це
       зайвий свайп до кнопки. */
  .wpr-lp section {
    padding: 22px 0
  }

  /* Ціна й кнопка мають лишатись великими, а от обіцянку вгорі можна
       підтиснути: три її рядки з'їдають половину екрана. */
  .wpr-lp .wpr-hook {
    font-size: clamp(23px, 6.2vw, 30px)
  }

  .wpr-lp .wpr-price b {
    font-size: 30px
  }

  /* Кнопка на всю ширину і не менше 52px — палець, а не курсор. */
  .wpr-lp .wpr-btn {
    min-height: 54px;
    font-size: 18px
  }
}

/* Колонки не мають розповзатися ширше за екран. У flex і grid елемент за
   замовчуванням має min-width: auto, тобто не стискається вужче за свій
   вміст, — а вміст тут горизонтальний скролер галереї. Результат: на
   телефоні вся сторінка їздить вбік. */
.wpr-lp .wpr-two>* {
  min-width: 0
}