/* ПАНАВИР® — скидки sale.panavir.com, 06.11.2026. Система — DESIGN.md (Golos Text, радиусы, ритм 8 px, три веса);
   токены, шапка, кнопки, подвал и cookie — дословно с Нормафлора (runs/normaflor/site/styles.css, нота «Тёмно-синий квадрат»).
   Новое только: выбор площадки (строки как «Где купить»), карточки продуктов (как «Другие продукты», с кнопкой промокода),
   и окно промокода. «В аптеках» убран (владелец 06.11.2026: «убери этот блок вообще»). Без color-mix — старые iPhone (R ios16, 30.10.2026). */

@font-face { font-family: "Golos Text"; src: url(assets/fonts/golos-cyrillic.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url(assets/fonts/golos-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --canvas: #F5F8FC;
  --surface: #FFFFFF;
  --sage: #C9DFF4;
  --sage-soft: #E4EEF9;
  --folder: #ECF2FA;
  --accent: #1F5F96;
  --accent-deep: #154B7A;
  --accent-hover: #0E3A60;
  --accent-bright: #1A6FBF;
  --btn-tone: #356FA0;      /* = color-mix(accent 90 %, #fff), как кнопки Нормафлора 31.10.2026, готовым hex */
  --ink: #13263A;
  --ink-muted: #4A5B6E;
  --gold: #E4B33F;
  --line: rgba(19, 38, 58, .09);
  --line-accent: rgba(21, 75, 122, .12);
  --radius-panel: 32px;
  --radius-card: 24px;
  --radius-field: 12px;
  --shadow: 0 1px 2px rgba(19, 38, 58, .04), 0 8px 32px rgba(21, 75, 122, .08);
  --shadow-float: 0 1px 2px rgba(19, 38, 58, .04), 0 12px 48px rgba(21, 75, 122, .12);
  --wrap: 1200px;
  --gut: 20px;
  --sec: 56px;
  --head-gap: 28px;
  --header-h: 64px;
}
@media (min-width: 768px) { :root { --gut: 32px; --sec: 64px; --head-gap: 32px; } }
@media (min-width: 1280px) { :root { --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.6 "Golos Text", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sec) 0 0; }
.h2 { font-size: 26px; line-height: 1.2; }
@media (min-width: 768px) { .h2 { font-size: 32px; } }
@media (min-width: 1280px) { .h2 { font-size: 36px; } }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: var(--head-gap); }
/* подпись группы — под заголовком, слева, «таблетка» с иконкой в тон сайта (владелец 06.11.2026: «мб это как-то оформить») */
.sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.sec-head__note { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--sage-soft);
  font: 500 15px/1.3 "Golos Text", sans-serif; color: var(--accent-deep); }
.sec-head__note svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Кнопки (как на Нормафлоре) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 16px 28px; border: 0; border-radius: 999px; background: var(--btn-tone);
  color: #fff; font: 600 17px/1 "Golos Text", sans-serif; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s, background .2s; }
.btn:hover { background: var(--accent); }
.btn:active { transform: scale(.98); }
.btn__arrow { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.btn__arrow svg { width: 16px; height: 16px; }
.btn--compact { min-height: 48px; padding: 12px 20px; font-size: 16px; }
.btn--ghost { background: var(--sage-soft); color: var(--accent-deep); box-shadow: none; }
.btn--ghost:hover { background: var(--sage); }

/* ---------- Шапка: знак ПАНАВИР® и метка «Скидки» с чертой слева (R-02, R-119); навигации нет ---------- */
.header { position: absolute; inset: 0 0 auto; z-index: 5; }
.header__in { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.header__logo { display: flex; flex: none; align-items: center; min-height: 48px; }
.header__logo img { height: 16px; width: auto; }
.header__tag { margin-left: auto; display: inline-flex;   /* к правому краю, как на всех сайтах (владелец 06.11.2026) */ align-items: center; padding-left: 12px; border-left: 1px solid rgba(19, 38, 58, .18); font: 600 13px/1.2 "Golos Text", sans-serif; color: var(--accent-deep); white-space: nowrap; }
@media (min-width: 768px) { .header__logo img { height: 20px; } .header__tag { font-size: 14px; } }
@media (min-width: 1024px) { :root { --header-h: 80px; } .header__logo img { height: 22px; } .header__tag { padding-left: 14px; } }

/* ---------- Первый экран: текст + карточка выбора площадки. Телефон — одна колонка; от 1024 — 13 / 11 как у героев серии ---------- */
.hero { padding: calc(var(--header-h) + 8px) 0 0; background: linear-gradient(180deg, var(--sage-soft) 0%, var(--canvas) 420px); }
.hero__grid { display: grid; gap: 24px; }
.hero__kicker { font: 600 15px/1.3 "Golos Text", sans-serif; color: var(--accent-bright); }
.hero__title { margin-top: 10px; font-size: min(32px, calc((100vw - 2 * var(--gut)) / 10.4)); line-height: 1.14; letter-spacing: -.025em; }
.hero__sub { margin-top: 14px; font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--ink-muted); max-width: 38ch; }
@media (min-width: 768px) {
  .hero { padding-top: calc(var(--header-h) + 16px); }
  .hero__title { font-size: 44px; line-height: 1.1; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); align-items: center; gap: 48px; padding-block: 24px 8px; }   /* только по вертикали: «padding: 24px 0» обнулял поля .wrap — текст уезжал влево от шапки (владелец 06.11.2026) */
  .hero__title { font-size: 52px; line-height: 1.08; }
  .hero__sub { font-size: 21px; max-width: 32ch; }
}

/* Скидочная картинка (владелец 06.11.2026, вариант 1 — купон со знаком %): один кадр 4:3 в скруглении панели, без рамки —
   фон кадра того же светло-голубого тона, что и первый экран. До 1024 — над заголовком (как первые экраны серии). */
.art { overflow: hidden; border-radius: var(--radius-panel); background: var(--sage-soft); box-shadow: var(--shadow); }
.art__img { width: 100%; height: auto; aspect-ratio: 1600 / 1194; object-fit: cover; }
@media (max-width: 1023px) { .art { order: -1; } }

/* Выбор площадки — вариант C (владелец 06.11.2026): плитки в мягком цвете площадок; сроки кода не показываем (только promo.json).
   Цвета — светлые тона знаков WB (#F6E9FB, рамка/кнопка #9B16B8 — один фиолетовый WB на всех экранах, R-276/R-279, белый текст 6.5:1) и Ozon (#E6EFFF, рамка/кнопка #005BFF, 4.9:1);
   других мест у этих цветов на странице нет. Телефон — одна под другой, от 560 — рядом. */
.mpbar { padding-top: 32px; }
.mpbar__title { margin-bottom: 16px; font: 600 20px/1.25 "Golos Text", sans-serif; }
.mpt-grid { display: grid; gap: 12px; }
.mpt { --tone: #F6E9FB; --mark: #9B16B8; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top pick"; align-items: center; column-gap: 12px;
  padding: 16px 16px 16px 18px; border: 2px solid transparent; border-radius: var(--radius-card); background: var(--tone); text-align: left; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.mpt--oz { --tone: #E6EFFF; --mark: #005BFF; }
.mpt__top { grid-area: top; display: flex; align-items: center; gap: 12px; }
.mpt__top img { width: 44px; height: 44px; border-radius: 12px; }
.mpt__name { font: 600 20px/1.2 "Golos Text", sans-serif; color: var(--ink); }
.mpt__pick { grid-area: pick; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--surface);
  font: 600 15px/1 "Golos Text", sans-serif; color: var(--ink); box-shadow: 0 1px 2px rgba(19, 38, 58, .06); white-space: nowrap; }
.mpt__pick svg { display: none; width: 16px; height: 16px; }
.mpt__on { display: none; }
.mpt[aria-checked="true"] { border-color: var(--mark); }
.mpt[aria-checked="true"] .mpt__pick { background: var(--mark); color: #fff; }
.mpt[aria-checked="true"] .mpt__pick svg, .mpt[aria-checked="true"] .mpt__on { display: inline; }
.mpt[aria-checked="true"] .mpt__off { display: none; }
@media (hover: hover) { .mpt[aria-checked="false"]:hover { box-shadow: 0 0 0 4px rgba(19, 38, 58, .05); } }
@media (min-width: 560px) { .mpt-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .mpbar { padding-top: 40px; }
  .mpbar__title { font-size: 22px; }
  .mpt-grid { gap: 16px; }
  .mpt { min-height: 104px; padding: 20px 24px; }
  .mpt__top { gap: 14px; }
  .mpt__top img { width: 56px; height: 56px; border-radius: 14px; }
  .mpt__name { font-size: 24px; }
  .mpt__pick { padding: 10px 18px; }
}

/* ---------- Карточки продуктов. Телефон: строка — кадр 112 слева, имя, подпись, «Получить промокод»; от 768 — сетка,
   кадр сверху (как «Другие продукты»: белая рамка 12, углы 24/12). «Подробнее» — ссылка на сайт продукта, не кнопка ---------- */
.group + .group { padding-top: var(--sec); }
.cards { display: grid; gap: 12px; }
.pcard { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow); }
/* телефон: кадр на всю высоту карточки — рамка 12 со всех сторон одинаковая при любом числе строк текста
   (владелец 06.11.2026: «не очень красиво, что отступы у картинок разные») */
.pcard__photo { grid-row: 1 / span 2; align-self: stretch; overflow: hidden; min-height: 112px; border-radius: var(--radius-field); background: var(--sage-soft); }
.pcard__photo picture { display: contents; }
.pcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.pcard__photo--cut img { object-fit: contain; padding: 8%; }        /* вырезки Форвета (PNG без фона) — на голубой подложке */
.pcard__text { display: grid; gap: 2px; align-self: end; }
.pcard__name { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ink); }
.pcard__caption { font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.pcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; align-self: start; margin-top: 10px; }
.pcard__get { min-height: 40px; padding: 8px 16px; font-size: 15px; box-shadow: none; }
.pcard__more { display: inline-flex; align-items: center; gap: 4px; padding-block: 10px; font: 500 14px/1.2 "Golos Text", sans-serif; color: var(--accent-deep); text-decoration: none; }
.pcard__more svg { width: 14px; height: 14px; }
.pcard__more:hover { text-decoration: underline; }
/* 320–399: рядом с кадром кнопке не хватает ширины — фото и текст строкой, кнопка и «Подробнее» под ними во всю ширину */
@media (max-width: 399px) {
  .pcard { grid-template-columns: 88px minmax(0, 1fr); }
  .pcard__photo { grid-row: 1; min-height: 88px; }
  .pcard__text { align-self: center; }
  .pcard__acts { grid-column: 1 / -1; margin-top: 12px; justify-content: space-between; }
  .pcard__get { flex: 1; }
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cards, .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; padding: 12px 12px 20px; }
  .pcard__photo { grid-row: auto; align-self: start; min-height: 0; aspect-ratio: 1230 / 984; }
  .pcard__text { align-self: start; margin-top: 14px; padding: 0 8px; }
  .pcard__name { font-size: 18px; }
  .pcard__caption { font-size: 15px; }
  .pcard__acts { align-self: end; margin-top: 16px; padding: 0 8px; gap: 4px 16px; }
  .pcard__get { min-height: 44px; padding: 10px 20px; font-size: 16px; }
}
/* Пять карточек БиоПокров®: от 1024 — пять в ряд, иначе пятая висела бы одна */
@media (min-width: 1024px) and (max-width: 1279px) { .cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* пять узких — кнопка не влезает */
@media (min-width: 1280px) { .cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .cards--5 .pcard__name { font-size: 17px; } .cards--5 .pcard__photo { aspect-ratio: 4 / 5; } }
.cards--2 .pcard__photo { background: var(--sage-soft); }
@media (min-width: 1024px) { .cards--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 1023px) { }

/* Телефон до 768 — вариант A «витрина 2 в ряд» (владелец 06.11.2026, razbor/cards-variants.png): квадратный кадр сверху,
   имя, подпись, одна кнопка «Промокод» во всю ширину внизу (кнопки в ряду на одной линии), под ней «О продукте ↗»
   (ссылка на сайт продукта). Нечётная последняя карточка (пятая БиоПокрова) — на всю ширину строкой: кадр слева, текст и кнопка справа */
.pcard__get-s, .pcard__more-s { display: none; }
@media (max-width: 767px) {
  .cards, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: start; padding: 8px 8px 12px; }
  .pcard__photo { grid-row: auto; align-self: start; min-height: 0; aspect-ratio: 1; border-radius: 16px; }
  .pcard__text { align-self: start; padding: 10px 4px 12px; }
  .pcard__name, .pcard__caption { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }   /* «стоматологический» на 320 */
  .pcard__name { font-size: 15px; line-height: 1.3; }
  .pcard__caption { margin-top: 2px; font-size: 13px; line-height: 1.35; }
  .pcard__acts { grid-column: auto; display: block; margin: 0; }
  .pcard__get { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 15px; }
  .pcard__get-l { display: none; }
  .pcard__get-s { display: inline; }
  /* «Подробнее» — «О продукте ↗» по центру под кнопкой (владелец 06.11.2026, вариант 2 razbor/more-variants.png:
     круглый значок «стильно, но непонятно, что это переход на сайт») */
  .pcard { padding-bottom: 4px; }
  .pcard__more { display: flex; justify-content: center; gap: 5px; margin-top: 2px; padding-block: 12px 10px; font-size: 13px; }
  .pcard__more-t { display: none; }
  .pcard__more-s { display: inline; }
  .pcard:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; column-gap: 12px; }
  .pcard:last-child:nth-child(odd) .pcard__photo { grid-row: 1 / span 2; }
  .pcard:last-child:nth-child(odd) .pcard__text { align-self: center; padding-top: 4px; }
  .pcard:last-child:nth-child(odd) .pcard__acts { grid-column: 2; }
}

/* ---------- Окно промокода. Телефон — лист снизу, от 768 — карточка по центру. <dialog> с запасным классом .is-open ---------- */
.promo { width: 100%; max-width: 100%; max-height: 100dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.promo::backdrop { background: rgba(19, 38, 58, .42); }
.promo__in { position: relative; display: grid; gap: 18px; padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom, 0px)); }
.promo__grip { justify-self: center; width: 40px; height: 4px; margin: -8px 0 -6px; border-radius: 4px; background: rgba(19, 38, 58, .16); }
.promo__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--canvas); cursor: pointer; }
.promo__close svg { width: 20px; height: 20px; color: var(--ink-muted); }
.promo__close:hover { background: var(--sage-soft); }
.promo__in:focus { outline: none; }
.promo__close:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 999px; }
.promo__prod { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding-right: 48px; }
.promo__pic { overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius-field); background: var(--sage-soft); }
.promo__pic img { width: 100%; height: 100%; object-fit: cover; }
.promo__pic.pcard__photo--cut img { object-fit: contain; padding: 8%; }
.promo__name { font-weight: 600; font-size: 19px; line-height: 1.25; }
/* Окно, вариант A (владелец 06.11.2026: «как-то блекло продукт выглядит»): кадр продукта крупно сверху во всю ширину листа 5:4,
   название под ним; крестик — поверх кадра на полупрозрачном белом. Страница «Спасибо» — по-прежнему строкой (.thx__prod). */
.promo .promo__prod { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-right: 0; }
.promo .promo__pic { aspect-ratio: 5 / 4; margin: 0 -8px; border-radius: 24px; }
.promo .promo__pic.pcard__photo--cut img { padding: 6% 18%; }
/* крестик — внутри угла снимка, отступ 12 сверху и справа одинаковый (владелец 06.11.2026, снимок: «у края, чтоб радиусы были ок»);
   снимок начинается на 38 px от верха листа (20 отступ + полоска + 18 зазор) */
.promo .promo__close { top: 50px; right: calc(var(--gut) + 4px); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(19, 38, 58, .12); }
.promo__caption { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
/* Переключатель площадки в окне и на «Спасибо» — как плитки «Где покупаете?» на главной (владелец 06.11.2026, снимок:
   «ближе по стилю как на главной»): две плитки в тоне площадки, логотип в цвет; у выбранной — рамка цвета
   площадки и круг с галочкой на углу (справа в строке рядом с «Wildberries» не помещается). */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg__btn { --tone: #F6E9FB; --mark: #9B16B8; position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 8px 12px 8px 10px;
  border: 2px solid transparent; border-radius: 16px; background: var(--tone); font: 600 16px/1.2 "Golos Text", sans-serif; color: var(--ink);
  text-align: left; cursor: pointer; transition: border-color .16s; }
.seg__btn[data-mp="ozon"] { --tone: #E6EFFF; --mark: #005BFF; }
.seg__btn img { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.seg__ok { display: none; position: absolute; top: -8px; right: -8px; box-sizing: border-box; width: 24px; height: 24px; padding: 4px;
  border: 2px solid var(--surface); border-radius: 999px; background: var(--mark); color: #fff; }
.seg__btn[aria-checked="true"] { border-color: var(--mark); }
.seg__btn[aria-checked="true"] .seg__ok { display: block; }
.seg__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* узкое место («Спасибо» на телефоне, окно на 320): «Wildberries» целиком — логотип и шрифт меньше */
@media (max-width: 399px) {
  .seg__btn { gap: 8px; padding: 8px; font-size: 14px; }
  .seg__btn img { width: 26px; height: 26px; border-radius: 8px; }
}
.code { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--sage-soft); }
.code__label { font: 500 14px/1.3 "Golos Text", sans-serif; color: var(--ink-muted); }
.code__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
/* код в одну строку: 12 знаков Ozon при 22 px ≈ 190 px — влезает рядом с «Скопировать» от 320 */
.code__value { white-space: nowrap; font: 600 22px/1.15 "Golos Text", sans-serif; letter-spacing: .04em; color: var(--accent-deep); user-select: all; }
.code__copy { min-height: 44px; padding: 10px 16px; gap: 8px; font-size: 15px; box-shadow: none; }
/* до 480 код Ozon (12 знаков) и «Скопировать» рядом не помещаются — кнопка под кодом во всю ширину */
@media (max-width: 479px) { .code__row { grid-template-columns: minmax(0, 1fr); } .code__value { font-size: 26px; } .code__copy { width: 100%; } }
.code__copy svg { width: 18px; height: 18px; }
.code__copy.is-done { background: var(--accent-deep); }
.code--none .code__value { font-size: 18px; letter-spacing: 0; color: var(--ink); }
.promo__how { display: grid; gap: 8px; counter-reset: s; font-size: 15px; line-height: 1.45; color: var(--ink); }
.promo__how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: s; }
.promo__how li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--sage-soft);
  font: 600 14px/1 "Golos Text", sans-serif; color: var(--accent-deep); }
.promo__go { width: 100%; }
.promo [hidden] { display: none !important; }   /* .btn и .gate задают display — hidden не должен им проигрывать */

/* Почта до показа кода: поле как кнопки (высота 56, скругление полей 12), галочка своя — квадрат 22 с галкой accent-deep */
.gate { display: grid; gap: 12px; }
.gate__title { font-weight: 600; font-size: 17px; line-height: 1.35; }
.gate__input { width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid rgba(19, 38, 58, .18); border-radius: var(--radius-field); background: var(--surface);
  font: 500 17px/1.3 "Golos Text", sans-serif; color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.gate__input::placeholder { color: var(--ink-muted); opacity: .8; }
.gate__input:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 4px rgba(21, 75, 122, .12); }
.gate__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gate__check { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--ink-muted); cursor: pointer; }
.gate__check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.gate__box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid rgba(19, 38, 58, .3); border-radius: 6px; background: var(--surface); transition: background .15s, border-color .15s; }
.gate__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.gate__check input:checked + .gate__box { background: var(--accent-deep); border-color: var(--accent-deep); }
.gate__check input:checked + .gate__box svg { opacity: 1; }
.gate__check input:focus-visible + .gate__box { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.gate__check a { color: var(--accent-deep); }
.gate__err { font: 500 14px/1.4 "Golos Text", sans-serif; color: #B3261E; }
.gate__btn { width: 100%; }
.gate__btn[disabled] { opacity: .7; cursor: default; }
.code--locked .code__value { color: var(--ink-muted); opacity: .55; letter-spacing: .12em; }
body.has-promo { overflow: hidden; }
@media (min-width: 768px) {
  .promo { width: min(520px, calc(100vw - 64px)); margin: auto; border-radius: var(--radius-panel); }
  .promo__in { padding: 28px; gap: 20px; }
  .promo__grip { display: none; }
  .promo__close { top: 16px; right: 16px; }
  .promo .promo__close { top: 40px; right: 32px; }   /* снимок от 28 сверху и 20 справа — тот же отступ 12 */
  .promo .promo__prod { grid-template-columns: minmax(0, 1fr); }
  .promo__prod { grid-template-columns: 88px minmax(0, 1fr); }
  .code__value { font-size: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .promo[open] { animation: promo-up .32s cubic-bezier(.2, 0, 0, 1) both; }
  .promo[open]::backdrop { animation: promo-fade .32s ease both; }
  @media (min-width: 768px) { .promo[open] { animation-name: promo-in; } }
}
@keyframes promo-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes promo-in { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes promo-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Подвал (как на Нормафлоре, R-68, R-90, R-106) ---------- */
.footer { margin-top: var(--sec); padding: 32px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: var(--surface);
  box-shadow: 0 -12px 32px -20px rgba(21, 75, 122, .18); color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.footer__inner { display: grid; gap: 20px; justify-items: start; }
.footer__top { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.footer__logo { height: 18px; width: auto; }
.footer__up { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 14px/1 "Golos Text", sans-serif; color: var(--ink-muted); text-decoration: none; }
.footer__up svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer__up:hover { color: var(--accent-deep); }
.footer__list { justify-self: stretch; display: grid; }
.footer__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line-accent); }
.footer__list li:first-child { border-top: 0; padding-top: 0; }
.footer__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--sage-soft); color: var(--accent-deep); }
.footer__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.footer__txt { display: grid; gap: 4px; min-height: 40px; align-content: center; justify-items: start; }
.footer__phone { font: 600 17px/1.3 "Golos Text", sans-serif; color: var(--ink); text-decoration: none; }
.footer__phone:hover { color: var(--accent-deep); }
.footer__hours { max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.footer__link { display: inline-block; font-size: 16px; line-height: 1.45; color: var(--accent-deep); text-decoration: none; cursor: pointer; }
.footer__link:hover { color: var(--accent-hover); text-decoration: underline; }
.footer__phone, .footer__link, .footer__policy { padding-block: 11px; margin-block: -11px; }
.footer__about > summary { list-style: none; }
.footer__about > summary::-webkit-details-marker { display: none; }
.footer__about > summary::after { content: "+"; margin-left: 8px; font-weight: 600; color: var(--ink-muted); }
.footer__about[open] > summary::after { content: "×"; }
.footer__about-body { margin-top: 12px; max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.footer__legal { justify-self: stretch; display: grid; gap: 6px; justify-items: start; padding-top: 4px; }
.footer__policy { font-size: 14px; line-height: 1.5; color: var(--ink-muted); text-decoration: none; }
.footer__policy:hover { color: var(--accent-deep); text-decoration: underline; }
.footer__copy { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.footer__nowrap { display: inline-block; }
.footer__docs { display: grid; justify-items: start; }
.footer__docs .footer__policy { padding-block: 12px; margin-block: 0; }
.footer__docs .footer__policy:first-child { margin-top: -12px; }
@media (min-width: 768px) {
  .footer__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .footer__list li:nth-child(-n+3) { border-top: 0; padding-top: 0; }
  .footer__docs { display: flex; flex-wrap: wrap; column-gap: 24px; }
  .footer__docs .footer__policy { margin-block: -12px; }
}
@media (min-width: 1024px) { .footer { padding: 40px 0; } }

/* ---------- Cookie (как на сайтах серии, R-144, R-148) ---------- */
:root { --cookie-h: 48px; }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -8px 30px -10px rgba(19, 38, 58, .25);
  transform: translateY(16px); opacity: 0; transition: opacity .32s, transform .32s; }
.cookie[hidden] { display: none; }
.cookie.is-in { transform: none; opacity: 1; }
.cookie.is-out { transform: translateY(8px); opacity: 0; transition-duration: .16s, .16s; }
.cookie__text { font-size: 12px; line-height: 1.35; color: var(--ink); text-wrap: wrap; }
.cookie__link { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cookie__ok { position: relative; min-width: 40px; min-height: 32px; padding: 6px 8px; border: 0; font-size: 14px; -webkit-appearance: none; appearance: none; }
.cookie__ok::before { content: ""; position: absolute; inset: -6px -4px; }
body:has(.cookie:not([hidden])) .footer { padding-bottom: calc(var(--cookie-h) + 40px); }
@media (min-width: 640px) { .cookie__text { font-size: 13px; } }
@media (min-width: 1024px) {
  .cookie { left: auto; right: 20px; bottom: 20px; width: min(600px, calc(100vw - 40px)); min-height: 64px; column-gap: 16px; padding: 12px 20px; border-radius: var(--radius-card); }
  .cookie__text { font-size: 14px; line-height: 1.4; }
  .cookie__ok { min-width: 64px; min-height: 40px; padding: 8px 16px; font-size: 15px; }
  .cookie__ok::before { inset: 0; }
}

/* ---------- Наведение — как на всех сайтах 31.10.2026: кнопки scale 1.05 + тень, карточки scale 1.02 + тень apple.com/store ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1); }
  .btn:hover { transform: scale(1.05); box-shadow: 0 10px 24px -8px rgba(19, 38, 58, 0.32); }
  .btn:active { transform: scale(0.98); box-shadow: none; }
  .pcard { transition: transform 300ms cubic-bezier(0, 0, 0.5, 1), box-shadow 300ms cubic-bezier(0, 0, 0.5, 1); }
  .pcard:hover { transform: scale(1.02); box-shadow: 2px 4px 16px rgba(19, 38, 58, 0.16); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Страница «Спасибо» (spasibo.html, владелец 06.11.2026): белая карточка по центру, внутри — то же, что было в окне ---------- */
.thx { padding-bottom: 8px; }
.thx [hidden] { display: none !important; }
.thx__card { display: grid; gap: 18px; max-width: 560px; margin: 16px auto 0; padding: 24px var(--gut); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-float); }
.thx__title { margin-top: -10px; font-size: 32px; line-height: 1.12; letter-spacing: -.025em; }
/* «Спасибо» — продукт как в окне, вариант A (владелец 06.11.2026: «верни как было, большой вариант А мы выбирали») */
.thx__back { justify-self: center; padding: 10px 4px; font: 500 15px/1.2 "Golos Text", sans-serif; color: var(--accent-deep); text-decoration: none; }
.thx__back:hover { text-decoration: underline; }
@media (min-width: 768px) { .thx__card { margin-top: 32px; padding: 32px; gap: 20px; } .thx__title { font-size: 40px; } }
.code__rule { padding-top: 10px; border-top: 1px solid var(--line-accent); font-size: 14px; line-height: 1.4; color: var(--ink-muted); }

/* Оборот упаковки (Нормафлор, Интим): ролик 5:4 поверх картинки, видим только пока играет */
.pcard__photo, .promo__pic { position: relative; }
.spin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .12s; }
.spin.is-on { opacity: 1; }
.spin[hidden] { display: none; }

/* «Спасибо», новый порядок (владелец 06.11.2026: «тут сразу промокод, пачку уже видел»): код сразу под заголовком,
   «Покупаете на другой площадке?» и переключатель под ним, продукт — маленькой строкой внизу */
.thx__other { margin-bottom: -8px; font: 500 14px/1.4 "Golos Text", sans-serif; color: var(--ink-muted); }
.thx .code__value { font-size: 30px; }
.thx__prod { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--canvas); }
.thx__pic { position: relative; overflow: hidden; width: 56px; height: 56px; border-radius: 12px; background: var(--sage-soft); }
.thx__pic img { width: 100%; height: 100%; object-fit: cover; }
.thx__pic.pcard__photo--cut img { object-fit: contain; padding: 6%; }
.thx__for { font-size: 13px; line-height: 1.3; color: var(--ink-muted); }
.thx__name { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
@media (min-width: 768px) { .thx .code__value { font-size: 36px; } }

/* Плитки площадок на узком телефоне (владелец 06.11.2026, снимок: «Выбрано» наезжало на «Wildberries»): название не уходит
   под кнопку; до 400 вместо надписи — круг 44: выбранная — залит цветом площадки с галочкой, невыбранная — пустой */
.mpt__top { min-width: 0; }
.mpt__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 399px) {
  .mpt { padding: 14px 14px 14px 16px; }
  .mpt__name { font-size: 19px; }
  .mpt__pick { justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 2px solid rgba(19, 38, 58, .18); }
  .mpt__on, .mpt__off { display: none !important; }
  .mpt[aria-checked="true"] .mpt__pick { border-color: var(--mark); }
  .mpt[aria-checked="true"] .mpt__pick svg { width: 20px; height: 20px; }
}
/* «отправили на почту» — плашка со значком письма на круглой плитке (владелец 06.11.2026: «более заметно, может тоже иконка») */
.thx__mailed { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--sage-soft);
  font: 600 15px/1.35 "Golos Text", sans-serif; color: var(--accent-deep); }
/* значок — скруглённый квадрат 36, как плитки и логотипы площадок (владелец 06.11.2026: примерил круг, 28 и 48 — выбрал этот) */
.thx__mailed-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--accent); }   /* белая плитка, синий значок — тише (владелец 06.11.2026: «переборщили с цветностью иконок») */
.thx__mailed-ico svg { width: 20px; height: 20px; }

/* «Спасибо», вариант A «купон» (владелец 06.11.2026: «очень сложный, громоздкий блок» → razbor/thx-variants.png): одна колонка
   на всех ширинах — благодарность, код купоном (вся рамка — кнопка «скопировать»), строка условий, переход, другая площадка ссылкой */
.thx__card { max-width: 480px; }
/* Купон площадки (владелец 06.11.2026, вариант C razbor/thx-brand.png без шапки): скруглённый квадрат, как логотипы WB/Ozon;
   сверху светлым — код и белая плитка копирования, снизу полосой цвета площадки — «Перейти на …». Кнопок-«таблеток» на странице нет. */
.thx__title { margin-top: 0; margin-bottom: -8px; }
.thx__rule { font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.mcp { overflow: hidden; border-radius: 20px; background: var(--mk-tone); }
.mcp__copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 76px; margin: 0; padding: 14px 14px 14px 18px;
  border: 0; background: none; text-align: left; cursor: pointer; }
.mcp__code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 30px/1.1 "Golos Text", sans-serif; letter-spacing: .05em; color: var(--mk-deep); }
.mcp__tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--surface); color: var(--mk-deep);
  box-shadow: 0 2px 8px rgba(19, 38, 58, .08); transition: background .16s, color .16s; }
.mcp__tile svg { width: 22px; height: 22px; }
.mcp__copy:hover .mcp__tile { box-shadow: 0 0 0 2px var(--mk) inset; }
.mcp__copy.is-done .mcp__tile { background: var(--mk); color: #fff; }
.mcp__copy:focus-visible { outline: 2px solid var(--mk-deep); outline-offset: -4px; border-radius: 20px 20px 0 0; }
.mcp--long .mcp__code { font-size: clamp(17px, 5.6vw, 26px); letter-spacing: .02em; }   /* 12 знаков Ozon — целиком и на 320 */
.mcp--none { cursor: default; }
.mcp--none .mcp__code { font-size: 18px; letter-spacing: 0; color: var(--ink-muted); }
.mcp--none .mcp__tile { display: none; }
.mcp__go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 16px; background: var(--mk); color: #fff;
  font: 600 17px/1 "Golos Text", sans-serif; text-decoration: none; transition: background .16s; }
.mcp__go svg { width: 18px; height: 18px; }
.mcp__go:hover { background: var(--mk-deep); }
.mcp__go:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.mcp__done { margin: -10px 0 -6px 2px; font: 600 14px/1.3 "Golos Text", sans-serif; color: var(--mk-deep); }
.mcp__done:empty { display: none; }
.thx__thanks { padding-top: 14px; border-top: 1px solid var(--line); font: 500 14px/1.4 "Golos Text", sans-serif; color: var(--ink-muted); }
@media (min-width: 768px) { .mcp__code { font-size: 34px; } .mcp--long .mcp__code { font-size: 28px; } .thx__card { padding: 36px 40px; } }
/* Цвет площадки (владелец 06.11.2026; «мб цвета чуть другие»): WB — фиолетово-маджентовый (белый на #9B16B8 ≈ 6.5:1),
   Ozon — синий логотипа (белый на #005BFF 4.9:1) */
.thx__card { --mk: #9B16B8; --mk-deep: #7E0F97; --mk-tone: #F6E9FB; }
.thx__card[data-cur="ozon"] { --mk: #005BFF; --mk-deep: #0047C7; --mk-tone: #E6EFFF; }
.thx__mp { color: var(--mk); }
.thx__mp, .mcp, .mcp__code, .mcp__go, .mcp__tile { transition: background-color .2s, color .2s; }
/* две ссылки под купоном: значки — плитки 28 той же формы, что логотип площадки («по стилю как лого», владелец 06.11.2026) */
.thx__links { display: grid; justify-items: start; gap: 2px; margin-top: -6px; }
.thx__link { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 7px 0; border: 0; background: none;
  font: 500 15px/1.3 "Golos Text", sans-serif; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.thx__link span, .thx__link { text-underline-offset: 3px; }
.thx__link:hover { text-decoration: underline; text-decoration-color: rgba(19, 38, 58, .35); }
.thx__link-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; }   /* как значок «отправили на почту» (владелец 06.11.2026) */
.thx__link-ico--tile { display: grid; place-items: center; background: var(--sage-soft); color: var(--accent); }   /* в цветах плашки «отправили на почту» (владелец 06.11.2026: жёлтый — «переборщили с цветностью») */
.thx__link-ico--tile svg { width: 20px; height: 20px; }
.pcard { cursor: pointer; }   /* вся карточка — «Получить промокод» (владелец 06.11.2026) */

/* «Спасибо» (владелец 06.11.2026, снимок: «код Ozon не лезет и совсем мелкая картинка Нормафлора»):
   код и «Скопировать» — всегда стопкой (12 знаков Ozon при 36 px не помещаются рядом с кнопкой);
   продукт — кадр 5:4 крупнее (112 → 144 px), название и подпись рядом */
.thx .code__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.thx .code__copy { justify-self: start; min-height: 48px; padding: 12px 22px; font-size: 16px; }
@media (max-width: 479px) { .thx .code__copy { justify-self: stretch; } }
.thx__prod { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 20px; }
.thx__pic { width: 112px; height: 90px; border-radius: 14px; }
.thx__name { font-size: 17px; }
.thx__cap { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
@media (min-width: 1024px) { .thx__prod { grid-template-columns: 144px minmax(0, 1fr); } .thx__pic { width: 144px; height: 115px; } .thx__name { font-size: 18px; } }
/* фокус у кнопок-таблеток — круглый, по форме (общее правило давало радиус 6 px) */
.mpt:focus-visible, .btn:focus-visible { border-radius: 999px; }
.seg__btn:focus-visible { border-radius: 16px; }
.mpt:focus-visible { border-radius: var(--radius-card); }