/* ============================================================
   wowprice — базовий шар теми: токени, каркас, компоненти.

   Це і є «загальна розмітка» замість Bootstrap. Свій шар, а не чужий
   фреймворк, з двох причин: правило «тільки свої ассети» (чужий CDN
   відключать — сторінка розсиплеться), і 200 КБ заради контейнера,
   сітки й кнопок на COD-трафіку не окупаються.

   Перенесено з prototype/assets/css/common.css: розмітка прототипу
   й шаблонів теми навмисно на однакових класах, щоб верстка не
   переписувалась двічі.

   Порядок підключення: common.css → pages.css → landing.css → <слаг>.css.
   ============================================================ */

/* ---------- Токени ----------
   Сірий фон, білі картки з тінню, жовтий акцент.
   Жовтий + синій — і продавальне поєднання, і національні кольори.

   ⚠️ Жовтий вимагає ТЕМНОГО тексту. Заміряно:
      #1a1400 на #f7b500 → 10.11 (ok)
      #ffffff на #f7b500 → 1.82  (нечитабельно)
   Тому --on-accent завжди near-black, ніколи не білий.                     */
:root {
    --brand: #1e3a8a;
    /* глибокий синій: посилання, вторинні кнопки */
    --brand-600: #1b3378;
    --brand-100: #e2e8f5;
    --accent: #f7b500;
    /* жовтий: головні заклики до дії */
    --accent-600: #e0a300;
    --accent-100: #fef3c7;
    --on-accent: #1a1400;
    --danger: #dc2626;
    --ok: #15803d;
    --info: #1d4ed8;

    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #eef0f3;
    --border: #e2e5ea;
    --text: #16191f;
    --muted: #626b7a;
    --subtle: #8b95a5;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .05);
    --shadow-lg: 0 8px 32px rgba(16, 24, 40, .12);
    --maxw: 1140px;

    /* Жолоб — один на весь сайт: бічні відступи контейнера й проміжки
       в сітках. Ідея з Bootstrap (--bs-gutter-x), але без від'ємних
       марджинів у рядках: вони там існують від часів, коли не було gap.
       Медіазапити, а не clamp(): clamp не розуміють старі мобільні
       браузери, і сторінка лишається взагалі без відступів.            */
    --gutter: 24px;

    /* Вертикальний ритм секцій — окремим токеном від бічного жолоба:
       по вертикалі є куди дихати, по горизонталі кожен піксель забирає
       ширину в фото й ціни.                                              */
    --section-y: 28px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
    --brand: #93c5fd;
    --brand-600: #bfdbfe;
    --brand-100: #1a2744;
    --accent: #fbbf24;
    --accent-600: #f59e0b;
    --accent-100: #2a2000;
    --on-accent: #1a1400;
    --danger: #f87171;
    --ok: #4ade80;
    --info: #93c5fd;

    --bg: #12161b;
    --surface: #1a1f26;
    --surface-2: #222932;
    --border: #2e3742;
    --text: #e6edf3;
    --muted: #93a4b8;
    --subtle: #6e7d8c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
}

/* ---------- Reset ---------- */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 .5em;
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

h2 {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
}

h3 {
    font-size: 1.15rem;
}

p {
    margin: 0 0 1em;
}

/* ---------- Каркас ---------- */
/* Довгі властивості, а не padding-inline: логічні властивості не розуміють
   браузери старші за Chrome 87 / Safari 14.1, і на такому телефоні відступи
   зникають зовсім — сторінка з платного трафіку такого не пробачає.       */
.wpr-container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Базова секція тримає тільки вертикальний ритм: бічні поля дає контейнер,
   один раз і однаково для всього. Якщо додати їх ще й тут, на телефоні
   вийде подвійний відступ, і блоки почнуть різнитись між собою залежно
   від того, у що їх загорнули.                                          */
/* Тільки padding-top/bottom, НЕ скорочений запис.
   Класи wpr-container і wpr-section часто висять на одному елементі
   (<main class="wpr-container wpr-section">), а скорочений padding задає
   всі чотири сторони — і мовчки обнуляє бічні поля контейнера, бо ця
   правило нижче у файлі. Саме через це сторінка лежала впритул до країв
   екрана, і в стилях це видно лише закресленим рядком у DevTools.        */
.wpr-section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.wpr-section--tight {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* А ось блок із власним фоном відступ зсередини мати мусить — інакше текст
   ляже впритул до краю плашки. Це і є той випадок, коли padding з усіх боків
   правильний: wpr-section--card, а не базова секція.                     */
.wpr-section--card {
    padding: var(--section-y) var(--gutter);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* Ширший екран — ширший жолоб. Один блок замість правок у кожному місці. */
@media (min-width: 721px) {
    :root {
        --gutter: 28px;
        --section-y: 40px;
    }

    .wpr-section--tight {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

.wpr-muted {
    color: var(--muted);
}

.wpr-text {
    color: var(--text);
}

.wpr-subtle {
    color: var(--subtle);
    font-size: .875rem;
}

.wpr-center {
    text-align: center;
}

.wpr-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wpr-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.wpr-row--gutter {
    gap: var(--gutter);
}

.wpr-spacer {
    flex: 1;
}

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

.wpr-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.wpr-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 47%), 1fr));
}

.wpr-grid--4 {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 47%), 1fr));
}

@media (min-width: 1081px) {
    :root {
        --gutter: 32px;
    }
}

/* ---------- Код товару ----------
   Одразу під назвою й помітно: покупець диктує його оператору по телефону,
   а оператор шукає товар у CRM саме за ним. Кнопка копіює в буфер — на
   телефоні виділити текст пальцем без промаху майже неможливо.            */
.wpr-sku {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .95rem;
}

.wpr-sku b {
    color: var(--text);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.wpr-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.wpr-copy:hover {
    border-color: var(--accent-600);
    color: var(--text);
}

/* Підтвердження — тим самим жовтим, що й кнопка замовлення: це «прийнято». */
.wpr-copy.is-done {
    background: var(--accent);
    border-color: var(--accent-600);
    color: var(--on-accent);
}

/* ---------- Шапка ---------- */
.wpr-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.wpr-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
}

.wpr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text);
}

.wpr-brand:hover {
    text-decoration: none;
}

.wpr-brand__mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* Логотип: висота фіксована, ширина за пропорцією. width/height в атрибутах
   разом із цим правилом тримають місце під картинку до її завантаження —
   інакше шапка стрибає, і перший тап іде повз. */
.wpr-brand__logo {
    height: 80px !important;
    width: auto;
    border-radius: 9px;
    margin: 10px 0;
}

.wpr-brand__name {
    font-size: 1.06rem;
}

/* Навігація на мобільному — горизонтальний скрол замість переносу:
   рядок меню не має з'їдати пів-екрана над контентом. */
.wpr-nav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.wpr-nav::-webkit-scrollbar {
    display: none;
}

.wpr-nav a {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 500;
}

.wpr-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.wpr-nav a.is-active {
    background: var(--brand-100);
    color: var(--brand-600);
}

.wpr-header__side {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpr-phone {
    font-weight: 600;
    font-size: .92rem;
    color: var(--text);
    white-space: nowrap;
}

.wpr-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
}

.wpr-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Телефон у шапці показуємо лише там, де є місце */
.wpr-phone {
    display: none;
}

@media (min-width: 861px) {
    .wpr-header__inner {
        gap: 20px;
        min-height: 62px;
    }

    .wpr-phone {
        display: inline;
    }

    .wpr-nav {
        gap: 4px;
        overflow: visible;
    }

    .wpr-nav a {
        padding: 6px 11px;
        font-size: .92rem;
    }
}

/* ---------- Підвал ---------- */
.wpr-footer {
    margin-top: 48px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.wpr-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 32px;
    padding-bottom: 24px;
}

.wpr-footer__brand {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.wpr-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.wpr-footer__cols h4 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--subtle);
    margin-bottom: 8px;
}

.wpr-footer__cols a,
.wpr-footer__cols span {
    display: block;
    font-size: .9rem;
    margin-bottom: 5px;
    color: var(--muted);
}

.wpr-footer__cols a:hover {
    color: var(--brand);
}

.wpr-footer__bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 20px;
    border-top: 1px solid var(--border);
    font-size: .85rem;
    color: var(--text);
}

@media (min-width: 721px) {
    .wpr-footer__inner {
        grid-template-columns: 1fr 2fr;
    }
}

.wpr-link-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: .85rem;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}

.wpr-link-btn:hover {
    color: var(--danger);
}

/* ---------- Кнопки ---------- */
/* Головна кнопка — жовта з темним текстом (див. замір контрасту в токенах).
   Мінімальна висота 44px: нижче цього палець на мобільному промахується. */
.wpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--accent);
    color: var(--on-accent);
    transition: background .15s, transform .05s;
}

.wpr-btn:hover {
    background: var(--accent-600);
    text-decoration: none;
    color: var(--on-accent);
}

.wpr-btn:active {
    transform: translateY(1px);
}

.wpr-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Псевдонім: історичні виклики .wpr-btn--accent лишаються робочими */
.wpr-btn--accent {
    background: var(--accent);
    color: var(--on-accent);
}

.wpr-btn--accent:hover {
    background: var(--accent-600);
    color: var(--on-accent);
}

.wpr-btn--dark {
    background: var(--brand);
    color: #fff;
}

.wpr-btn--dark:hover {
    background: var(--brand-600);
    color: #fff;
}

.wpr-btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
    font-weight: 600;
}

.wpr-btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--brand);
}

.wpr-btn--danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.wpr-btn--danger:hover {
    background: var(--danger);
    color: #fff;
}

.wpr-btn--lg {
    padding: 16px 28px;
    font-size: 1.05rem;
    width: 100%;
    min-height: 52px;
}

.wpr-btn--sm {
    padding: 6px 12px;
    font-size: .82rem;
    min-height: 34px;
}

/* ---------- Картки ---------- */
.wpr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.wpr-card__body {
    padding: 16px;
}

.wpr-card__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpr-card__head h3 {
    margin: 0;
    font-size: 1rem;
}

/* ---------- Мініатюра товару (емодзі замість фото — zero-dep) ---------- */
.wpr-thumb {
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: linear-gradient(140deg, color-mix(in srgb, var(--thumb-accent) 22%, var(--surface)),
            color-mix(in srgb, var(--thumb-accent) 7%, var(--surface)));
    border: 1px solid var(--border);
    line-height: 1;
    user-select: none;
}

.wpr-thumb--sm {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    flex: 0 0 48px;
}

.wpr-thumb--md {
    aspect-ratio: 4/3;
    font-size: 3.4rem;
}

.wpr-thumb--lg {
    aspect-ratio: 1/1;
    font-size: 6rem;
}

/* ---------- Картка товару ---------- */
.wpr-product {
    display: flex;
    flex-direction: column;
}

.wpr-product .wpr-thumb {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.wpr-product__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wpr-product__title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.wpr-product__title:hover {
    color: var(--brand);
    text-decoration: none;
}

.wpr-product__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.wpr-price {
    font-size: 1.25rem;
    font-weight: 800;
}

.wpr-price--old {
    font-size: .9rem;
    font-weight: 500;
    color: var(--subtle);
    text-decoration: line-through;
}

/* ---------- Бейджі ---------- */

/* Кількість штук у замовленні — теж бейдж, а не рядок дрібним сірим:
   покупець множить оффер лічильником, і «усього 4 шт» — головна цифра
   в підсумку. Спільний селектор, а не копія правил: інакше форма бейджа
   почала б жити у двох місцях і розійшлась би на першій же правці. */
.wpr-badge,
.wpr-summary__units {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}

.wpr-badge--sale {
    background: var(--danger);
    color: #fff;
    border-color: transparent;
}

.wpr-badge--ok {
    background: color-mix(in srgb, var(--ok) 15%, var(--surface));
    color: var(--ok);
    border-color: transparent;
}

.wpr-badge--warn {
    background: var(--accent-100);
    color: #8a5a00;
    border-color: transparent;
}

.wpr-badge--info {
    background: color-mix(in srgb, var(--info) 14%, var(--surface));
    color: var(--info);
    border-color: transparent;
}

.wpr-badge--red {
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    color: var(--danger);
    border-color: transparent;
}

.wpr-badge--off {
    opacity: .65;
}

[data-theme="dark"] .wpr-badge--warn {
    color: var(--accent);
    background: var(--accent-100);
}

/* ---------- Форми ---------- */
.wpr-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wpr-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--muted);
}

.wpr-input,
.wpr-select,
.wpr-textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
}

.wpr-input:focus,
.wpr-select:focus,
.wpr-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.wpr-input--err {
    border-color: var(--danger);
}

.wpr-input--sm {
    padding: 6px 9px;
    font-size: .85rem;
}

.wpr-err {
    color: var(--danger);
    font-size: .8rem;
}

.wpr-hint {
    color: var(--subtle);
    font-size: .8rem;
}

.wpr-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .88rem;
}

.wpr-switch input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

.wpr-switch__track {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    transition: background .15s;
    flex: 0 0 38px;
}

.wpr-switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.wpr-switch input:checked+.wpr-switch__track {
    background: var(--accent);
}

.wpr-switch input:checked+.wpr-switch__track::after {
    transform: translateX(16px);
}

/* ---------- Таблиця ---------- */
.wpr-table-wrap {
    overflow-x: auto;
}

.wpr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    min-width: 640px;
}

.wpr-table th {
    text-align: left;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--subtle);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

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

.wpr-table tr:last-child td {
    border-bottom: none;
}

.wpr-table tbody tr:hover {
    background: var(--surface-2);
}

/* ---------- Дрібне ---------- */
.wpr-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
}

.wpr-notice {
    border-left: 3px solid var(--accent);
    background: var(--accent-100);
    padding: 12px 14px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .9rem;
}

[data-theme="dark"] .wpr-notice {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.wpr-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

/* ============================================================
   Компоненти шаблону: форма замовлення, подарунок, вигоди, галерея.

   Живуть тут, а не в landing.css, бо однакові й на лендингу, і в картці
   товару, і на сторінці «дякуємо». Якщо десь потрібно інакше — це
   перевизначається в landing.css під .wpr-lp, а не копіюється туди цілком.

   Вигоди — справжній список <ul class="wpr-trust"><li>…</li></ul>:
   це перелік, і розмітка має про це говорити.
   ============================================================ */


.wpr-gift {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--accent-100);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--text)
}

/* Саме слово «Подарунок» — великим і чорним: це те, за що чіпляється око,
   а сам подарунок люди читають уже після нього. */
.wpr-gift b {
    font-size: 18px;
    font-weight: 800;
    color: var(--text)
}

.wpr-gift a {
    color: var(--brand);
    text-decoration: underline
}

/* Таймер дедлайну: [wpr_timer].
   Свідомо тихіший за подарунок — сірий, а не жовтий. Жовтого на першому
   екрані вже два блоки (ціна і подарунок), третій перетворює терміновість
   на шум. Терміновість тут несе сама цифра, що змінюється. */
.wpr-timer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--surface-2);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--muted)
}

/* [hidden] у стилі браузера — це display: none, і воно програє нашому
   display: flex за специфічністю. Без цього рядка блок, який скрипт
   ховає після завершення відліку, лишався б на сторінці порожнім. */
.wpr-timer[hidden] {
    display: none
}

/* Лічильник кількості. Кнопки, а не самі стрілки поля number: рідні
   стрілки на телефоні мають висоту близько 10 px, і влучити по них
   пальцем неможливо. */
.wpr-qty {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
}

.wpr-qty__btn {
    /* 44 px — нижня межа зручної цілі для пальця. */
    min-width: 44px;
    min-height: 50px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.wpr-qty__btn:hover {
    background: var(--brand-100);
}

.wpr-qty input[type=number] {
    width: 80px;
    min-height: 50px;
    padding: 13px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}

/* Підсумок замовлення: що саме людина замовляє, до полів імені й телефону. */
/* ---------- Підказка «те саме дешевше» ----------
   З'являється тільки коли ту саму кількість штук можна купити іншим оффером
   за меншу суму. Помітна, але не червона: це вигода покупця, а не помилка.
   Блок малює скрипт (див. order-form.js), у розмітці він порожній. */
/* ---------- Варіанти оффера в блоці ціни ----------
   Стоять одразу під ціною: до форми покупець доходить уже з рішенням,
   і дізнатись про вигідніший комплект має раніше, а не після неї. */
.wpr-offers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.wpr-offers__item {
    display: block;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding-top: 8px;
    padding-right: 14px;
    padding-bottom: 8px;
    padding-left: 14px;
    color: var(--text);
    text-decoration: none;
}

.wpr-offers__item:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.wpr-offers__item.is-best {
    border-color: var(--accent);
    background: var(--accent-100);
}

.wpr-offers__item b {
    display: block;
    font-size: .95rem;
    margin-bottom: 2px;
}

.wpr-offers__price {
    font-weight: 800;
    font-size: 1.1rem;
}

.wpr-offers__per,
.wpr-offers__best {
    display: block;
    font-size: .85rem;
    color: var(--muted);
}

.wpr-offers__best {
    font-weight: 700;
    color: var(--on-accent);
}

/* Чим варіанти відрізняються один від одного — під назвою в самій формі. */
.wpr-offer__meta {
    color: var(--muted);
}

/* [hidden] у стилі браузера — це display: none, і воно програє власному
   display нижче. Те саме вже ловили на таймері й на рядку «усього N шт». */
.wpr-deal[hidden] {
    display: none;
}

.wpr-deal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--accent-100);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
    margin-top: 0;
    margin-bottom: 14px;
    font-size: .95rem;
}

.wpr-summary {
    background: var(--surface-2);
    border-radius: 10px;
    padding-top: 12px;
    padding-right: 14px;
    padding-bottom: 12px;
    padding-left: 14px;
    margin-bottom: 16px;
}

.wpr-summary__title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.wpr-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: 16px;
}

.wpr-summary__row b {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    /* Цифри однакової ширини: сума міняється від кожного натискання
       на лічильник, і без цього рядок смикався б. */
    font-variant-numeric: tabular-nums;
}

.wpr-summary__units {
    margin: 6px 0 0;
}

.wpr-summary__units[hidden] {
    display: none;
}

/* Липка панель замовлення — тільки на телефоні.

   Mobile-first: за замовчуванням вона є, на широкому екрані ховається.
   Навпаки робити не можна — правило з display: none в базовому шарі
   лишилось би чинним на всіх браузерах, які не зрозуміли медіазапит. */
.wpr-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .10);
    transition: transform .18s ease-out;
}

/* Смуга жестів на iPhone перекриває нижні 34 px. Довге властивість вище
   лишається запасним значенням: старий браузер не зрозуміє env() і просто
   збереже 10 px, а не втратить відступ узагалі. */
.wpr-sticky {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Форма на екрані — панель їде вниз. pointer-events, бо доки вона
   з'їжджає, її кнопка ще ловила б тапи по формі під нею. */
.wpr-sticky.is-hidden {
    transform: translateY(115%);
    pointer-events: none;
}

.wpr-sticky__price {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

/* Кнопка займає решту рядка: промахнутись по ній пальцем важче,
   ніж по написові «Замовити» шириною в шість букв. */
.wpr-sticky__btn {
    flex: 1 1 auto;
    /* Елемент flex не стискається менше свого вмісту, і довга ціна
       виштовхнула б кнопку за край екрана. */
    min-width: 0;
    min-height: 48px;
    font-size: 1rem;
}

/* Панель перекриває низ сторінки — інакше під нею назавжди лишається
   схований підвал і останній рядок тексту. */
.wpr-has-sticky {
    padding-bottom: 76px;
}

@media (min-width: 721px) {

    .wpr-sticky {
        display: none;
    }

    .wpr-has-sticky {
        padding-bottom: 0;
    }
}

.wpr-timer__value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    /* Цифри однакової ширини: інакше рядок смикається щосекунди, і око
       чіпляється саме за смикання, а не за те, що часу лишилось мало. */
    font-variant-numeric: tabular-nums
}

.wpr-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 50px 25px
}

.wpr-form label {
    display: block;
    font-weight: 600;
    margin: 0 0 4px;
    font-size: 15px
}

.wpr-form input[type=text],
.wpr-form input[type=tel] {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 17px;
    margin-bottom: 14px;
    min-height: 50px
}

/* Телефон: код країни — нерухома частина поля злева, набирають тільки
   те, що після нього. Рамка одна на обидві частини, щоб це читалось як
   одне поле, а не як підпис поруч із полем. */
.wpr-tel {
    display: flex;
    align-items: stretch;
    margin-bottom: 14px
}

.wpr-tel__code {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #f3f4f6;
    color: var(--muted);
    font-size: 17px;
    white-space: nowrap
}

.wpr-form .wpr-tel input[type=tel] {
    margin-bottom: 0;
    border-radius: 0 10px 10px 0;
    letter-spacing: .02em
}

/* Фокус видно по всьому полю, а не по його правій половині. */
.wpr-tel:focus-within .wpr-tel__code {
    border-color: var(--accent)
}

.wpr-offer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer
}

.wpr-offer:has(input:checked) {
    border-color: var(--accent);
    background: #fffbeb
}

.wpr-offer input {
    margin-top: 4px
}

.wpr-offer span {
    display: block;
    font-size: 15px;
    color: var(--muted)
}

/* Подарунок у варіанті — жовтою плашкою, як блок біля ціни: інакше він
   читається як опис комплектації, а не як те, що дають понад товар.
   Inline-flex, а не блок на всю ширину: рядок короткий, і розтягнута
   плашка виглядала б як друга кнопка. */
.wpr-offer .wpr-offer__gift {
    /* Блок, а не inline: решта рядків варіанта теж блокові, і плашка має
       стояти під назвою, а не тягнутись за нею в той самий рядок.
       fit-content — щоб жовтий фон був по тексту, а не на всю ширину. */
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-100);
    color: var(--text);
    font-size: 14px
}

.wpr-offer__gift b {
    font-weight: 700
}

/* Месенджери — не дрібні галочки, а кнопки-перемикачі: на телефоні
   в звичайний чекбокс 13×13 палець не потрапляє, і поле лишається
   незаповненим саме там, де воно рятує «не додзвонились». */
.wpr-msgr {
    display: flex;
    gap: 10px;
    margin: 2px 0 16px;
    flex-wrap: wrap
}

.wpr-msgr label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 12px 16px;
    min-height: 48px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s
}

.wpr-msgr label:hover {
    border-color: var(--accent-600)
}

/* Сам чекбокс ховаємо, але не через display:none — так поле лишається
   доступним із клавіатури й для читалок, а роль перемикача бере на себе
   сама кнопка. */
.wpr-msgr input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none
}

/* Обведення при переході табом — інакше з клавіатури не видно, де ти. */
.wpr-msgr label:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

/* Обране — жовтим: той самий сигнал «це прийнято», що й на кнопці замовлення. */
.wpr-msgr label:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent-600);
    color: var(--on-accent)
}

/* Запасний варіант для браузерів без :has() — там працює клас від скрипта. */
.wpr-msgr label.is-checked {
    background: var(--accent);
    border-color: var(--accent-600);
    color: var(--on-accent)
}

.wpr-hp {
    position: absolute;
    left: -9999px
}

.wpr-err {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px
}

/* Речення під заголовком вітрини: куди людина потрапила і що тут продають.

   Виділяємо плашкою зі світлим тлом і жовтою рискою збоку — тим самим жовтим,
   що й у кнопок дії. Просто сірий рядок під заголовком око пропускає разом із
   рештою дрібного тексту, а це єдине речення на сторінці, яке пояснює магазин.
   Ширину тримаємо в межах рядка, що читається за один погляд: на широкому
   екрані текст через увесь монітор не читають узагалі. */
.wpr-intro {
    max-width: 68ch;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 17px;
    line-height: 1.55
}

/* Назва магазину в цьому реченні — єдине, що виділяємо: далі по тексту жирне
   починає сперечатися з заголовком над ним. */
.wpr-intro__brand {
    font-weight: 700
}

/* Вигоди — ряд «пігулок» із жовтою галочкою. Кнопковий вигляд читається
   як набір гарантій; рядком тексту вони зливаються з підписами полів.
   Галочку малюємо псевдоелементом: ні картинки, ні шрифту іконок — зайвий
   запит на першому екрані дорожчий за символ. */
.wpr-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 20px;
    padding: 0;
    list-style: none
}

/* Жирним чорним, а не зеленим: колір уже несе жовтий кружечок із галочкою,
   а три акцентні кольори в одному блоці змагаються між собою. */
.wpr-trust b {
    color: var(--text);
    font-weight: 700
}

/* Ряд розпірками по всій ширині — коли блок стоїть окремо, над формою.
   На вузькому екрані переноситься: у рядок 360px три пункти не влазять. */
/* .wpr-trust--row {
    justify-content: space-between
} */

.wpr-trust>li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text)
}

.wpr-trust>li::before {
    content: "✓";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800
}

/* Код товару — така сама плашка, але спокійніша: його шукають очима вже
   після рішення, коли збираються дзвонити. */
.wpr-trust>li.wpr-trust--code {
    color: var(--muted);
    font-size: 14px
}

.wpr-trust>li.wpr-trust--code::before {
    content: "#";
    background: var(--surface-2);
    color: var(--muted)
}

.wpr-trust>li.wpr-trust--code b {
    color: var(--text);
    font-weight: 600
}

/* ---------- Галерея фото (шорткод [wpr_gallery]) ----------
   Гортання — на scroll-snap: рідна інерція на мобільному, нуль JS.
   Пропорція задається змінною --wpr-ratio, щоб макет не стрибав, поки
   вантажиться фото: висота відома до завантаження.                        */
/* Ширину галереї обмежуємо: у широкій колонці квадратне фото при
   aspect-ratio 1/1 виростає мало не на весь екран і виштовхує ціну
   з кнопкою за перший згин. Понад ~560px товар зрозумілішим не стає. */
/* На телефоні галерея на всю ширину, на десктопі — не більш як 45% екрана
   й не ширше 560px. Причина: у широкій колонці квадратне фото при
   aspect-ratio 1/1 виростає мало не на весь екран і виштовхує ціну
   з кнопкою за перший згин. Понад ці межі товар зрозумілішим не стає. */
.wpr-gallery {
    /* min-width: 0 — інакше колонка не може стиснутись вужче за вміст
       горизонтального скролера всередині, і на телефоні з'являється
       прокрутка всієї сторінки вбік. Це типова пастка flex/grid:
       у елемента за замовчуванням min-width: auto. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 861px) {
    .wpr-gallery {
        max-width: min(560px, 45vw)
    }
}

.wpr-gallery__track {
    min-width: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--radius, 12px)
}

.wpr-gallery__track::-webkit-scrollbar {
    display: none
}

.wpr-gallery__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    overflow: hidden;
    /* Запасна висота для браузерів без aspect-ratio: без неї плитка
       схлопується в нуль, і фото просто немає. */
    min-height: 280px;
    /* Друга межа — по висоті вікна: на невисокому екрані фото не має
       займати весь видимий простір. */
    max-height: min(70vh, 520px);
    aspect-ratio: var(--wpr-ratio, 1/1)
}

.wpr-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.wpr-gallery__thumbs {
    min-width: 0;
    display: flex;
    gap: 8px;
    /* Прокрутка вбік і жорстка висота: при двадцяти фото стрічка інакше
       переноситься рядками й з'їдає екран під самою галереєю. */
    height: 64px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity
}

.wpr-gallery__thumbs::-webkit-scrollbar {
    display: none
}

.wpr-gallery__thumb {
    flex: 0 0 64px;
    height: 64px;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    scroll-snap-align: start;
    /* 44px — мінімум для пальця; 64 з запасом. */
    min-width: 64px
}

.wpr-gallery__thumb.is-active {
    border-color: var(--accent)
}

.wpr-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* ---------- Підказки міста (Нова Пошта) ----------
   Свій список, а не <datalist>: у datalist не можна показати «м. Дрогобич,
   Дрогобицька міськрада, Львівська обл.» окремим рядком і не можна тримати
   Ref поруч із назвою, а без Ref відділення не завантажити.               */
.wpr-suggest {
    position: relative
}

.wpr-suggest__list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    margin: -10px 0 0;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg)
}

.wpr-suggest__item {
    padding: 12px 14px;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 1px solid var(--border)
}

.wpr-suggest__item:last-child {
    border-bottom: 0
}

.wpr-suggest__item:hover {
    background: var(--accent-100)
}

.wpr-form select,
.wpr-form textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 17px;
    font-family: inherit;
    margin-bottom: 14px;
    min-height: 50px;
    background: var(--surface);
    color: var(--text)
}

.wpr-form select[disabled] {
    color: var(--subtle)
}

/* ---------- «Що буде далі» ----------
   Завершальний блок під формою. Головна невизначеність COD-покупця не
   в товарі, а в тому, що станеться після натискання кнопки — три кроки
   закривають це швидше за будь-який текст.                               */
.wpr-steps {
    margin-top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}

.wpr-steps__title {
    margin: 0 0 12px;
    font-weight: 800;
    font-size: 1.05rem;
}

.wpr-steps ol {
    counter-reset: wpr-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wpr-steps li {
    counter-increment: wpr-step;
    position: relative;
    padding-left: 40px;
    margin-bottom: 14px;
}

.wpr-steps li:last-child {
    margin-bottom: 0;
}

/* Номер кроку — жовтим кружечком, тим самим сигналом, що й галочки вигод. */
.wpr-steps li::before {
    content: counter(wpr-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    font-weight: 800;
    font-size: .9rem;
}

.wpr-steps li b {
    display: block;
    font-weight: 700;
}

.wpr-steps li span {
    color: var(--muted);
    font-size: .93rem;
}

.wpr-steps__note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
}