/* ART\FACT — онлайн-подбор ухода. Мобайл-фёрст, бренд-система 2026.
   Тап-зоны не меньше 44px, вопрос помещается в экран 375×812 без прокрутки на всех экранах,
   кроме мультивыбора на 320px.

   ВИЗУАЛЬНЫЙ СЛОЙ ЗАДАН БРЕНДБУКОМ, а не вкусом. Сверено с живым сайтом
   art-fact-products.com 30.09.2026 и с правилами бренд-системы:
     — TT Commons Pro подключён общей таблицей стилей темы;
     — скругления НУЛЕВЫЕ: на сайте border-radius:0 у всего;
     — заголовки и служебные подписи капслоком, трекинг ~0.14em на мелком кегле;
     — палитра только бренда, белый фон основной, серый #E6E6E6 на разделители;
     — никаких градиентов, теней, стекла и декоративных кружков;
     — блоки НЕ обводим тонкой рамкой: разделяем воздухом и одной линией;
     — логотип — оригинальный ассет ART\FACT, wordmark руками не набираем.
   Цвета взяты с сайта пипеткой: текст rgb(17,17,17), вторичный rgb(117,117,117),
   линии rgb(230,230,230), плашки rgb(243,243,243). */
.checkskin{
  --ink:#111; --dim:#757575; --line:#E6E6E6; --bg:#fff; --soft:#F3F3F3;
  /* бренд-палитра: используем только её */
  --acid:#D6DF24; --bad:#EF4050; --orange:#F37021; --warn:#FFC20E; --ok:#007D63;
  --pad:20px;
  --trk:.14em;          /* трекинг капслока — с сайта: 1.68px на 12px */
}
.checkskin *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.checkskin{margin:0;padding:0;background:var(--bg);color:var(--ink)}
.checkskin{font:16px/1.4 "TT Commons Pro","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* Служебная подпись: капслок, мелкий кегль, трекинг. Один класс на весь продукт,
   чтобы подписи не разъезжались по размерам — бренд разрешает не больше пяти кеглей. */
.checkskin .eyebrow,.checkskin .block>h2,.checkskin .concl-full>h2,.checkskin .notices>h2,.checkskin .item .slot,.checkskin .repeat .slot,.checkskin .plan-t,.checkskin .concl dt{
  font-size:11.5px;line-height:1.1;letter-spacing:var(--trk);text-transform:uppercase;
  font-weight:600;color:var(--dim)}
/* Запас снизу считаем от НАСТОЯЩЕЙ высоты липкого футера: её измеряет app.js и кладёт
   в --foot-h. Раньше запас был константой, и на 320×568 футер вырастал до 95px при
   отступе 88px — последний вариант уходил под кнопку «Дальше» на 5 экранах из 15,
   а скрытыми оказывались «Ничего конкретного» и «Ничего из перечисленного».
   112px оставлено запасным значением на случай, если скрипт не успел измерить. */
.checkskin .wrap{max-width:560px;margin:0 auto;padding:0 var(--pad) calc(var(--foot-h, 112px) + 16px);
      min-height:100vh;display:flex;flex-direction:column}
/* На результате в футере стоит кнопка печати и строка команд по 44px — запас снизу больше. */
.checkskin.resultview .wrap{padding-bottom:24px}

/* шапка с прогрессом */
.checkskin .top{position:sticky;top:0;background:var(--bg);padding:10px 0 8px;z-index:5}
.checkskin .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.checkskin .back{appearance:none;border:0;background:none;color:var(--ink);font-size:12px;font-weight:600;
       letter-spacing:var(--trk);text-transform:uppercase;padding:12px 12px 12px 0;cursor:pointer;min-height:48px}
.checkskin .back[hidden]{visibility:hidden;display:block}
.checkskin .step{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px;letter-spacing:var(--trk);font-weight:600}
/* Полоса прогресса — единственное место, где кислотный цвет бренда работает функционально:
   он и есть «сколько пройдено». Трек серый #E6E6E6, заливка кислотная. */
.checkskin .bar{height:3px;background:var(--line);margin-top:8px}
.checkskin .bar>i{display:block;height:3px;background:var(--acid);transition:width .25s ease}

/* вопрос */
.checkskin .q{flex:1;padding-top:14px}
/* Заголовок вопроса: ExtraBold капслоком, плотный интерлиньяж — так набраны заголовки
   на сайте (48px/48px, uppercase, 700+). Кегль меньше, потому что это не обложка. */
.checkskin .q h1{font-size:21px;line-height:1.05;font-weight:800;letter-spacing:0;text-transform:uppercase;margin:0 0 8px}
.checkskin .q .help{color:var(--dim);font-size:13.5px;line-height:1.35;margin:0 0 14px}
/* Варианты — строки, разделённые одной линией, а не коробки со скруглением.
   Правило бренда: блоки не обводим тонкой рамкой. Тап-зона держится padding,
   а не рамкой, поэтому геометрия проверок не меняется. */
.checkskin .opts{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;
      border-top:1px solid var(--line)}
/* На экране с семью вариантами каждый пиксель между строками стоит экрана: там зазор меньше,
   тап-зона остаётся 52px. */
.checkskin .opts:has(> li:nth-child(7)){gap:5px}
.checkskin .opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:13px 10px 13px 0;
     border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg);cursor:pointer;
     font-size:15.5px;line-height:1.3;text-align:left;width:100%;position:relative}
.checkskin .opt:active{background:var(--soft)}
/* Выбранное: кислотная метка слева во всю высоту строки и полужирный текст.
   Плашка вместо рамки — на сайте выделение делают заливкой, а не обводкой. */
.checkskin .opt[aria-pressed="true"],.checkskin .opt.sel{font-weight:600;background:var(--soft)}
.checkskin .opt.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acid)}
.checkskin .opt.sel{padding-left:11px}
.checkskin .opt .mark{flex:0 0 18px;height:18px;margin-top:0;border:1.5px solid var(--ink);border-radius:50%;position:relative}
.checkskin .opt.multi .mark{border-radius:0}
.checkskin .opt.sel .mark{border-color:var(--ink);background:var(--ink)}
.checkskin .opt.sel .mark:after{content:"";position:absolute;left:50%;top:46%;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.checkskin .opt small{display:block;color:var(--dim);font-size:13px;margin-top:3px}
/* Поле возраста: одна линия снизу вместо коробки. */
.checkskin .numfield{width:100%;font:800 28px/1 "TT Commons Pro",sans-serif;padding:14px 0;border:0;
          border-bottom:2px solid var(--ink);border-radius:0;min-height:56px;background:none;color:var(--ink)}
.checkskin .numfield:focus{outline:none;border-bottom-color:var(--acid)}
.checkskin .opt.off{opacity:.42}
.checkskin .opt.shake{animation:shake .28s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.checkskin .sep{border:0;border-top:1px solid var(--line);margin:18px 0}
.checkskin .q section+section{margin-top:0}
.checkskin .q h1{margin-top:0}
.checkskin .count{color:var(--ink);white-space:nowrap}
.checkskin .count.full{color:var(--warn)}

/* низ */
.checkskin .foot{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 32%);
      padding:14px var(--pad) max(14px,env(safe-area-inset-bottom))}
.checkskin .foot .in{max-width:560px;margin:0 auto}
@media (max-width:899px){
  .checkskin:not(.inquiz):not(.resultview) .foot{bottom:var(--cover-foot-offset,0px)}
}
/* На странице результата футер не липкий. В тесте он держит кнопку «Далее» и это правильно,
   а на результате он отъедал 120 px снизу постоянно: врачебная плашка высотой 161 px была
   видна на 25 px, переключатель режима уезжал за экран. Печать и команды живут в конце
   страницы, где им и место: результат всё равно читается прокруткой. */
.checkskin.resultview .foot{position:static;background:none;padding-top:20px;border-top:1px solid var(--line)}
/* Кнопка: прямоугольник без скругления, капслок с трекингом — так набраны действия на сайте. */
.checkskin .btn{display:block;width:100%;min-height:52px;border:0;border-radius:0;background:var(--ink);color:#fff;
     font:600 13px/1 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);text-transform:uppercase;cursor:pointer}
.checkskin .btn[disabled]{background:#CFCFCF;cursor:default}
.checkskin .btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink);margin-top:10px}
/* Пустая подсказка не должна занимать место: её верхний отступ держал 10px футера
   даже тогда, когда текста нет. */
.checkskin .hint{color:var(--dim);font-size:13px;text-align:center;margin:10px 0 0}
.checkskin .hint:empty{display:none}

/* Строка команд под результатом. Раньше это были три текстовые ссылки высотой 15px в одну строку,
   и клик по «Ссылка» затирал две другие. Теперь три равных кнопки по 44px, которые никуда не деваются,
   а ссылка открывается отдельным полем под ними. */
.checkskin .hint.actions{display:flex;flex-wrap:wrap;gap:8px;text-align:left}
.checkskin .act{flex:1 1 0;min-width:92px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
     text-align:center;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);
     font:600 11.5px/1.2 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);text-transform:uppercase;
     padding:6px 8px;cursor:pointer;text-decoration:none}
.checkskin .act:active{background:var(--soft)}
.checkskin .act[hidden]{display:none}
.checkskin .linkbox{flex:1 0 100%;display:flex;flex-direction:column;gap:6px}
.checkskin .linkbox[hidden]{display:none}
.checkskin .linkurl{width:100%;min-height:44px;border:1px solid var(--line);border-radius:0;padding:10px 12px;
         font:inherit;font-size:13px;color:var(--ink);background:var(--soft)}
.checkskin .linkurl:focus{outline:none;border-color:var(--ink)}
.checkskin .linkmsg{font-size:12.5px;color:var(--dim);text-align:center}
/* Ссылка-кнопка в тексте: «Показать прошлый подбор» на обложке, «Пройти тест» на странице по ссылке. */
.checkskin .ghostlink{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border:1px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink);
  font:600 12px/1 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);text-transform:uppercase;
  cursor:pointer;text-decoration:none}
.checkskin .ghostlink:active{background:var(--soft)}

/* Обложка. Композиция с сайта: крупный капслочный заголовок в две строки,
   плотный интерлиньяж, фотография во всю ширину без рамки и без скругления. */
.checkskin .cover h1{font-size:40px;line-height:.95;font-weight:800;text-transform:uppercase;letter-spacing:0;
          margin:26px 0 14px}
.checkskin .cover p{color:var(--dim);margin:0 0 10px;font-size:15px}
/* height:auto обязателен: у <img> есть атрибуты width/height, и без него браузер берёт
   высоту из атрибута, а aspect-ratio игнорирует — картинка уезжала на 750px.
   Кадрируем к 4:3 и сдвигаем к верху: лица и банки в композиции выше центра. */
.checkskin .cover .hero{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
             object-position:50% 22%;margin:20px 0 4px}
/* Шаги «как это работает» — нумерация капслоком, без маркеров списка. */
.checkskin .cover ol{list-style:none;padding:0;margin:22px 0;counter-reset:st}
.checkskin .cover ol li{counter-increment:st;margin-bottom:14px;padding-left:34px;position:relative;font-size:15px;line-height:1.35}
.checkskin .cover ol li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:2px;
  font:600 11.5px/1 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);color:var(--dim)}

/* результат */
.checkskin .res-head{padding:22px 0 10px;border-bottom:1px solid var(--line)}
.checkskin .res-head h1{font-size:34px;line-height:.95;font-weight:800;text-transform:uppercase;letter-spacing:0;margin:0 0 8px}
.checkskin .res-head .sub{color:var(--dim);font-size:15px;margin:0}
.checkskin .vmnote{margin:16px 0 0;font-size:13px;color:#767676;line-height:1.35}
/* Переключатель режима. Перенос разрешён на ЛЮБОЙ ширине, а не только до 360px.
   Дефект 29.09: подписи стали длиннее («· 8 средств» вместо «· 8»), при nowrap и flex:1
   вторая кнопка уезжала за правый край на 89px на 375, 390 и 412px — и не доставалась
   прокруткой, потому что страница по горизонтали не скроллится. То есть основной
   элемент выбора на самых частых телефонах был не нажимаем целиком.
   Не переносится теперь только само число со словом и сумма — их держим одним куском. */
.checkskin .viewmode{display:flex;gap:8px;margin:16px 0 2px;flex-wrap:wrap}
.checkskin .viewmode button{white-space:normal}
.checkskin .vm{flex:1 1 calc(50% - 4px);min-width:0;min-height:44px;border:1px solid var(--line);
    background:var(--bg);border-radius:0;
    font-size:13px;color:var(--dim);cursor:pointer;padding:10px 12px}
.checkskin .vmn{white-space:nowrap}
/* Выбранный режим — чёрная плашка, а не обводка: на сайте активное состояние заливают. */
.checkskin .vm.on{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600}
.checkskin .vm.on .vmsum{color:rgba(255,255,255,.72)}
.checkskin.minmode .row-wrap.optional{display:none}
.checkskin.minmode .plan-l li.optional{opacity:.35;text-decoration:line-through}
.checkskin.minmode .block:not(:has(> .row-wrap:not(.optional))),
.checkskin.minmode .plan-row:not(:has(.plan-s:not(.optional))){display:none}
.checkskin.minmode .plan-s.optional{opacity:.35;text-decoration:line-through}
/* Карта плана. Шаги идут строкой через стрелку: нумерованный список давал пять строк
   на нанесение и 370 px над первым товаром. Стрелка рисуется через ::before у всех,
   кроме первого шага в строке, — при переносе она остаётся слева и не висит в конце. */
/* Карта плана без коробки: сверху и снизу по линии, внутри — строки. */
.checkskin .plan{margin:16px 0 6px;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
      border-radius:0;padding:4px 0}
.checkskin .plan-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.checkskin .plan-row:last-child{border-bottom:0}
.checkskin .plan-t{flex:0 0 92px;padding-top:3px}
.checkskin .plan-l{margin:0;font-size:14px;line-height:1.42}
.checkskin .plan-s+.plan-s::before{content:"→\00a0";color:var(--dim)}   /* пробел перед стрелкой в разметке даёт перенос, неразрывный после неё держит стрелку со словом */
.checkskin .plan-s{white-space:normal}
/* Повторное нанесение видно в сетке, звёздочка объясняет совпадение товара. */
.checkskin .shop-card__repeat-note{display:block;margin:0;color:var(--dim);font-size:13px;line-height:1.3}
.checkskin .shop-card__title sup{margin-left:2px;font-size:.75em;line-height:0}
/* Короткий вердикт над схемой; полный разбор ответов — под карточками. */
.checkskin .verdict{margin:4px 0 0;font-size:15px;color:var(--dim);line-height:1.35}
.checkskin .verdict b{color:var(--ink);font-weight:600}
.checkskin .concl-full{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.checkskin .concl-full>h2,.checkskin .notices>h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0}
.checkskin .notices{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line)}
/* Плашки. На «худшем случае» их двенадцать подряд — при прежних отступах это три экрана
   телефона одних предупреждений. Отступ между соседними плашками сведён к одному. */
/* Плашка: серая заливка и одна вертикальная линия слева. Рамку по периметру бренд
   не разрешает, и она тут не нужна — заливки достаточно, чтобы отделить. */
.checkskin .notice{border:0;border-left:3px solid var(--ink);border-radius:0;padding:12px 14px;margin:10px 0;
        font-size:14.5px;line-height:1.4;background:var(--soft)}
.checkskin .notice+.notice{margin-top:8px}
.checkskin .notice.alarm{border-left-color:var(--bad);font-size:15px;padding:16px;margin:18px 0}
.checkskin .block{margin:28px 0 0}
.checkskin .block>h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 4px;
          padding-bottom:8px;border-bottom:1px solid var(--line)}
/* Карточка товара. Фотография слева — настоящая, с сайта бренда, 3:4, без рамки
   и без скругления (правило: изображения не обводим). Она и делает страницу похожей
   на магазин, а не на распечатку. Сетка «фото + текст» не даёт карточке вырасти:
   88px фото = 117px высоты, а текстовая часть и так выше. */
/* Фотография обтекается текстом, а не стоит в колонке. Две отвергнутые попытки, обе
   замерены: сетка с grid-row:1/99 давала 98 неявных строк и карточку в 1 758 px;
   флекс в две колонки сжимал текст до 233 px, и карточка росла с 380 до 440 px,
   страница с 7,6 до 8,4 экрана. Обтекание возвращает тексту полную ширину сразу
   под фотографией. Кнопка покупки идёт с clear — ей нужна вся ширина. */
.checkskin .item{padding:16px 0;border-bottom:1px solid var(--line)}
.checkskin .item:last-child{border-bottom:0}
.checkskin .item::after{content:"";display:table;clear:both}
.checkskin .item .shot{float:left;width:84px;aspect-ratio:3/4;object-fit:contain;background:var(--soft);
            display:block;margin:2px 14px 8px 0}
.checkskin .item .buyrow{clear:left}
.checkskin .item .name{font-size:16px;font-weight:600;margin:3px 0 4px;line-height:1.22}
/* Тап-зона названия поднята до 44px вертикальным padding на строчной ссылке: у inline-элемента
   такой отступ не меняет высоту строки и не выталкивает объём на отдельную строчку, но кликается.
   Подчёркивание рисуем text-decoration, а не рамкой, — иначе линия уезжает вниз вместе с padding. */
.checkskin .item .name a{color:var(--ink);display:inline;padding:12px 0;
  text-decoration:underline;text-decoration-color:#d5d5d5;text-underline-offset:3px}
.checkskin .item .name a:active{text-decoration-color:var(--ink)}
.checkskin .item .why{color:var(--ink);font-size:14px;margin:0 0 5px;line-height:1.35}
.checkskin .item .actives{color:var(--dim);font-size:12.5px;margin:0 0 8px;line-height:1.3}
/* Покупка — единственное коммерческое действие на карточке. Она вышла из ряда служебных чипов
   «утро»/«ежедневно» в отдельную строку и стала кнопкой 44px: раньше это был серый чип 110×25. */
.checkskin .buyrow{margin:10px 0 0;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.checkskin .buy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
     border:0;border-radius:0;background:var(--ink);color:#fff;
     font:600 11.5px/1 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);text-transform:uppercase;
     text-decoration:none}
.checkskin .buy:active{background:#333}
/* Метки — цветные плашки по ширине содержимого: ровно то, что бренд называет
   «color plate, width fit-content». Пилюли со скруглением 99px и тонкой обводкой убраны.
   Цвета только из палитры: жёлтый на осторожность, красный на запрет, кислотный на маркетинг. */
.checkskin .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.checkskin .chip{font:600 10.5px/1 "TT Commons Pro",sans-serif;letter-spacing:.08em;text-transform:uppercase;
      border:0;border-radius:0;padding:5px 7px;background:var(--soft);color:var(--dim);white-space:nowrap}
.checkskin .chip.warn{background:var(--warn);color:var(--ink)}
.checkskin .chip.bad{background:var(--bad);color:#fff}
/* Маркетинговая отметка отличается от служебных и от ограничений и стоит последней:
   ряд, который читают как «что мне нельзя», не должен содержать рекламу.
   Кислотный — «шумный» цвет бренда, и здесь он честно маркирует рекламу как рекламу. */
.checkskin .chip.nov{background:var(--acid);color:var(--ink)}
.checkskin .alt{margin-top:10px}
.checkskin .alt summary{font:600 11.5px/1 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);text-transform:uppercase;
  color:var(--dim);cursor:pointer;padding:6px 0;min-height:44px;display:flex;align-items:center}
.checkskin .alt ul{list-style:none;margin:0;padding:0 0 4px}
.checkskin .alt li{font-size:14px;color:var(--dim);padding:7px 0;border-top:1px dashed var(--line)}
.checkskin .alt li b{color:var(--ink);font-weight:500;display:block}
/* 14px: у строчного элемента высота тап-зоны считается от шрифта, а не от line-height,
   и при 14px текста padding 12px давал 41px — не хватало трёх пикселей. */
.checkskin .alt li b a{color:var(--ink);display:inline;padding:14px 0;
  text-decoration:underline;text-decoration-color:#d5d5d5;text-underline-offset:3px}
.checkskin .small{color:var(--dim);font-size:13px}
.checkskin .legal{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}

@media print{
  .checkskin .foot,.checkskin .top,.checkskin .back,.checkskin .btn,.checkskin .no-print,.checkskin .buyrow{display:none!important}
  .checkskin{font-size:11pt}
  .checkskin .wrap{max-width:none;padding:0}
  .checkskin .item .name a,.checkskin .alt li b a{padding:0}   /* тап-зоны нужны пальцу, не бумаге */
  .checkskin .alt summary{display:none}
  /* Закрытый <details> в Chrome 131+ прячет содержимое через ::details-content{content-visibility:hidden},
     и display:block на списке этого не отменяет — в PDF печатался заголовок «РАВНОЦЕННЫЕ ЗАМЕНЫ»
     и под ним пусто, 15 раз подряд. Первое правило чинит современные браузеры, второе — прежние,
     где ::details-content не поддержан. Плюс страховка в render.js: раскрытие перед печатью. */
  .checkskin .alt::details-content{content-visibility:visible!important;block-size:auto!important}
  .checkskin .alt ul{display:block!important}
  .checkskin .alt:has(li):before{content:"Равноценные замены";display:block;font-size:9pt;letter-spacing:.06em;
              text-transform:uppercase;color:#6f6f6f;margin-top:6px}
  .checkskin .viewmode{display:none}
  .checkskin.minmode .row-wrap.optional{display:none}
  /* Раскрытые «равноценные замены» сделали карточки высокими: при break-inside:avoid
     они целиком переезжали на новую страницу и оставляли по половине листа пустым.
     Карточку разрешаем разрывать, но шапку — слот, название, «зачем» — держим вместе. */
  .checkskin .item{break-inside:auto}
  .checkskin .item .slot,.checkskin .item .name,.checkskin .item .why,.checkskin .item .actives{break-after:avoid;page-break-after:avoid}
  .checkskin .item .slot,.checkskin .item .name{break-inside:avoid}
  /* Заголовок «Равноценные замены» рисуется из ::before самого блока: если разрешить блоку
     разрываться, заголовок снова останется на странице один. Держим его вместе со списком. */
  .checkskin .alt{break-inside:avoid;page-break-inside:avoid}
  .checkskin .block{break-inside:auto}
  .checkskin .block>h2{border-bottom:1px solid #000;break-after:avoid;page-break-after:avoid}
  .checkskin .block>h2+.item{break-before:avoid;page-break-before:avoid}
  .checkskin .chip{border-color:#bbb}
  .checkskin a{color:inherit;text-decoration:none}
}

/* Невысокие экраны: iPhone SE и Safari с адресной строкой. Тап-зона не опускается ниже 44px. */
@media (max-height:760px){
  .checkskin .q{padding-top:10px}
  .checkskin .q h1{font-size:19.5px;line-height:1.2;margin:0 0 5px}
  .checkskin .q .help{font-size:13px;margin:0 0 10px}
  .checkskin .opts{gap:7px}
  .checkskin .opt{min-height:48px;padding:11px 13px;font-size:15px;line-height:1.28}
  .checkskin .sep{margin:13px 0}
  .checkskin .foot{padding:10px var(--pad) max(10px,env(safe-area-inset-bottom))}
  .checkskin .btn{min-height:48px;font-size:16px}
  .checkskin.resultview .wrap{padding-bottom:24px}
}
@media (max-height:690px){
  .checkskin .top{padding:6px 0 6px}
  .checkskin .top-row{min-height:40px}
  .checkskin .back{font-size:14px;padding:10px 10px 10px 0}
  .checkskin .q{padding-top:6px}
  .checkskin .q h1{font-size:18px;margin:0 0 4px}
  .checkskin .q .help{font-size:12.5px;margin:0 0 8px}
  .checkskin .opts{gap:6px}
  .checkskin .opt{min-height:44px;padding:9px 12px;font-size:14.5px}
  .checkskin .opt .mark{flex-basis:18px;height:18px}
  .checkskin .sep{margin:10px 0}
  .checkskin .btn{min-height:46px}
  .checkskin.resultview .wrap{padding-bottom:24px}
}

/* Пояснение раскрывается сразу под ссылкой «зачем?» внутри своего вопроса. */
.checkskin .ask-link{display:inline-flex;align-items:center;min-height:44px;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;
  color:var(--dim);font:600 12px/1 "TT Commons Pro",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.checkskin .ask{margin:4px 0 14px}
.checkskin .terms{font-size:13px;line-height:1.45;color:#555;background:#f6f6f6;border-radius:8px;padding:10px 12px;margin:0 0 10px}
.checkskin .why-ask{font-size:13px;line-height:1.45;color:#767676;margin:0 0 12px}
@media print{.checkskin details.ask{display:none}}

/* Цена рядом с названием и сумма схемы: человек решает, покупать ли, и должен видеть цифру. */
.checkskin .price{display:inline-block;margin-left:8px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;
        font-variant-numeric:tabular-nums}
/* Цены нет в номенклатуре — говорим это на карточке, а не только строкой «+1 без цены»
   в сумме. Пятнадцать SKU без РРЦ, среди них солнцезащитные, а SPF стоит в каждой схеме:
   строку «без цены» видят 84,7% анкет. Как только цены заполнят — метка исчезнет сама. */
.checkskin .price.nop{color:var(--dim);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.checkskin .vmsum{display:block;font-size:12px;color:#767676;margin-top:2px;font-weight:400}
.checkskin .viewmode button{flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 12px;min-height:52px}
.checkskin .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}  /* подпись только для экранного диктора */
/* Заключение по блокам. На узком экране подпись над значением, с 480px — в две колонки.
   Подписи берут общий класс служебного капслока (см. .eyebrow в шапке файла). */
.checkskin .concl{margin:14px 0 10px;display:grid;grid-template-columns:1fr;gap:0}
.checkskin .concl dt{margin-top:12px}
.checkskin .concl dd{margin:3px 0 0;font-size:16px;line-height:1.3;font-weight:600}
@media (min-width:480px){
  .checkskin .concl{grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline}
  .checkskin .concl dt{margin-top:8px}
  .checkskin .concl dd{margin-top:8px}
}
/* Длинный список вариантов (от восьми) поджимаем на любой ширине. Экран ограничений
   вырос до девяти пунктов 30.09, когда добавилась «аллергия на растения», и последний
   вариант «Ничего из перечисленного» уехал под футер даже на 375×812 — то есть там,
   где у проекта не было ни одного дефекта вёрстки. Тап-зона остаётся 44px:
   поджимаем внутренние отступы и межстрочный интервал, а не высоту строки. */
.checkskin .opts:has(> li:nth-child(8)) .opt{padding:8px 11px;line-height:1.25;min-height:46px}
.checkskin .opts:has(> li:nth-child(8)){gap:5px}
.checkskin .opts:has(> li:nth-child(8)) .opt small{margin-top:1px}
/* Девять и больше — поджимаем ещё: экран ограничений вырос до девяти пунктов,
   и на iPhone SE (375×667) последний вариант уходил под футер на 33px.
   Тап-зона ровно 44px — нижняя граница чек-листа, ниже не опускаемся. */
.checkskin .opts:has(> li:nth-child(9)) .opt{padding:7px 11px;min-height:44px;line-height:1.22}
.checkskin .opts:has(> li:nth-child(9)){gap:4px}
.checkskin .opts:has(> li:nth-child(9)) .opt .mark{flex-basis:18px;height:18px}


/* 320 px: две кнопки режима не влезают рядом (2×181 при контейнере 280) и дают горизонтальную
   прокрутку всей странице, 34 px. white-space:nowrap не даёт им сжаться, поэтому на узких
   экранах ставим их одна под другой: тап-зона 44 px сохраняется. */
@media (max-width:360px){
  .checkskin .viewmode{flex-wrap:wrap}
  .checkskin .vm{flex:1 1 100%}
  /* На 320px дело не в высоте экрана, а в переносах: длинная формулировка занимает три строки,
     вариант вырастает втрое, и последние пункты уезжают под футер. Замерено 29.09 на
     320×568: пять экранов из пятнадцати, причём скрытыми оказывались именно «Ничего
     конкретного» и «Ничего из перечисленного» — то есть ответ «у меня всё в порядке».
     Поджимаем горизонталь и кегль, чтобы строк было меньше. Тап-зона остаётся 44px. */
  .checkskin{--pad:14px}
  .checkskin .opt{padding:9px 11px;gap:9px;font-size:14px;line-height:1.26}
  .checkskin .opt small{font-size:12px;margin-top:2px}
  .checkskin .opt .mark{flex-basis:18px;height:18px}
  .checkskin .opts{gap:5px}
  .checkskin .opts:has(> li:nth-child(7)){gap:4px}
  .checkskin .q h1{font-size:17.5px;line-height:1.18}
  .checkskin .q .help{font-size:12px;margin-bottom:7px}
  /* «Ответьте, чтобы продолжить» повторяет неактивную кнопку и стоит 28px футера.
     На узком экране эти 28px решают, виден последний вариант или нет. Сообщение
     про возраст (data-kind="info") остаётся: оно несёт то, чего на экране нет. */
  .checkskin.inquiz .hint[data-kind="generic"]{display:none}
}

/* Экран, который не помещается: футер уходит в поток, кнопка встаёт после последнего
   варианта. Класс ставит app.js (syncFootFlow) — там же объяснено, почему это лучше,
   чем ещё один виток сжатия кегля. Виден обрез последнего варианта, и он же работает
   признаком «ниже есть ещё», поэтому подсказку-градиент на таких экранах не рисуем. */
.checkskin.footflow .foot{position:static;background:none;padding-top:12px}
.checkskin.footflow .wrap{padding-bottom:0}

.checkskin{box-sizing:border-box;min-height:calc(100vh - 52px)}
.checkskin .top{top:52px}
.checkskin .wrap{min-height:calc(100vh - 52px)}
body:has(.checkskin.inquiz) .site-footer,body:has(.checkskin) .footer-subscribe{display:none}
.checkskin .checkskin-total{margin:20px 0 12px;font-size:16px;font-weight:600}
.checkskin .checkskin-add-all{width:100%;min-height:52px;padding:12px;background:#111;color:#fff;font:600 13px/1.2 "TT Commons Pro",sans-serif;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.checkskin .checkskin-add-all:disabled{background:#cfcfcf;cursor:default}
.checkskin .checkskin-cart-status{min-height:20px;font-size:13px;color:#757575}
.checkskin .checkskin-cart-status a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.checkskin .afkit-purchase__price{display:none}
.checkskin .checkskin-email{margin:28px 0;padding:22px 0;border-top:1px solid #e6e6e6}
.checkskin .checkskin-email h2{font-size:20px;text-transform:uppercase}
.checkskin .checkskin-email form{display:flex;gap:8px;flex-wrap:wrap}
.checkskin .checkskin-email input{flex:1 1 190px;min-height:48px;padding:10px;border:1px solid #aaa;border-radius:0}
.checkskin .checkskin-email button{min-height:48px;padding:0 20px;background:#111;color:#fff;cursor:pointer}
.checkskin .checkskin-consents{flex-basis:100%;display:grid;gap:12px;margin:9px 0 12px}
.checkskin .checkskin-consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35;color:#111}
.checkskin .checkskin-consent input{flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:0;padding:0;accent-color:#111}
.checkskin .checkskin-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.checkskin .checkskin-email-status{font-size:13px;color:#757575}
.checkskin .checkskin-email button{border:0;border-radius:0;
  font:600 13px/1 "TT Commons Pro",sans-serif;letter-spacing:var(--trk);text-transform:uppercase}
@media (hover:hover){
  .checkskin .btn:hover:not(:disabled),.checkskin .checkskin-add-all:hover:not(:disabled),
  .checkskin .checkskin-email button:hover,.checkskin .buy:hover{background:#292929;color:#fff}
  .checkskin .opt:hover:not(.sel),.checkskin .vm:hover:not(.on){background:var(--soft)}
}
.checkskin button:focus-visible,.checkskin a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media print{.site-header,.site-footer,.footer-subscribe,.checkskin .checkskin-add-all,.checkskin .checkskin-email,.checkskin .checkskin-cart-status{display:none!important}}

/* Значок и текст сохраняют одну горизонтальную ось до и после выбора. */
.checkskin.inquiz .opt,
.checkskin.inquiz .opts:has(> li:nth-child(8)) .opt,
.checkskin.inquiz .opts:has(> li:nth-child(9)) .opt{padding-left:11px}

/* Десктопная композиция: тот же язык сайта — широкий модуль, крупный капслок,
   прямые чёрные кнопки, фотографии без рамок и одна линия между смысловыми блоками. */
@media (min-width:900px){
  .checkskin{--pad:clamp(32px,5vw,76px)}
  .checkskin .wrap{width:100%;max-width:1440px;padding:0 var(--pad) calc(var(--foot-h,96px) + 38px)}
  .checkskin.resultview .wrap{padding-bottom:62px}
  .checkskin:not(.inquiz):not(.resultview) .wrap{min-height:0;padding-bottom:24px}

  /* Обложка занимает всю полезную ширину под шапкой сайта. */
  .checkskin .cover{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    grid-template-rows:auto auto auto auto auto;column-gap:clamp(36px,5vw,80px);
    align-content:start;padding:clamp(36px,4vw,58px) 0 20px;min-height:0}
  .checkskin .cover h1{grid-column:1;grid-row:1;font-size:clamp(56px,5.5vw,78px)!important;
    line-height:.91!important;margin:0 0 26px;max-width:580px}
  .checkskin .cover>p:first-of-type{grid-column:1;grid-row:2;color:var(--ink);
    font-size:clamp(20px,1.85vw,26px);font-weight:600;line-height:1.12;
    max-width:440px;margin:0 0 30px;text-transform:uppercase}
  .checkskin .cover .hero{grid-column:2;grid-row:1/span 5;align-self:stretch;
    width:100%;height:550px;min-height:0;max-height:none;aspect-ratio:auto;
    margin:0;object-position:50% 40%}
  .checkskin .cover ol{grid-column:1;grid-row:3;align-self:end;margin:0 0 20px;
    border-top:1px solid var(--ink);max-width:500px}
  .checkskin .cover ol li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0;
    padding:14px 0;margin:0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.24}
  .checkskin .cover ol li::before{position:static;font-size:13px;line-height:1.25;color:var(--ink)}
  .checkskin .cover>p.small{grid-column:1;margin:0 0 10px;max-width:490px;
    font-size:14px;line-height:1.35}
  .checkskin:not(.inquiz):not(.resultview) .foot{position:relative;z-index:1;width:100%;
    max-width:1440px;margin:0 auto;padding:0 var(--pad) 52px;background:none}
  .checkskin:not(.inquiz):not(.resultview) .foot .in{width:calc((100% - clamp(36px,5vw,80px))* .44);
    max-width:520px;margin:0 auto 0 0}
  .checkskin:not(.inquiz):not(.resultview) .foot .btn{min-height:60px}

  /* Вопрос и варианты образуют две понятные колонки. */
  .checkskin .top{padding:26px 0 18px}
  .checkskin .top-row{min-height:44px}
  .checkskin .back{font-size:13px}
  .checkskin .step{font-size:13px}
  .checkskin .bar,.checkskin .bar>i{height:4px}
  .checkskin.inquiz .q{padding:clamp(32px,4vw,56px) 0 76px}
  .checkskin.inquiz .q section{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    column-gap:clamp(44px,6vw,96px);align-content:start}
  .checkskin.inquiz .q section h1{grid-column:1;grid-row:1;font-size:clamp(30px,2.65vw,40px)!important;
    line-height:1.03!important;margin:0 0 14px;max-width:590px}
  .checkskin.inquiz .q section .help{grid-column:1;grid-row:2;font-size:17px;
    line-height:1.35;margin:0;max-width:460px}
  .checkskin.inquiz .q section .opts{grid-column:2;grid-row:1/span 4}
  .checkskin.inquiz .q section .numfield{grid-column:2;grid-row:1;
    align-self:start;font-size:38px;min-height:70px;appearance:textfield;
    border:0!important;border-bottom:2px solid var(--ink)!important;
    box-shadow:none!important;border-radius:0!important;padding:14px 0!important}
  .checkskin.inquiz .q section .numfield:focus{outline:0!important;
    border-bottom-color:var(--acid)!important}
  .checkskin.inquiz .numfield::-webkit-outer-spin-button,
  .checkskin.inquiz .numfield::-webkit-inner-spin-button{appearance:none;margin:0}
  .checkskin.inquiz .q section .numfield + .help{grid-column:2;grid-row:2;
    margin-top:14px!important}
  .checkskin.inquiz .q .sep{margin:54px 0;border-color:var(--ink)}
  .checkskin.inquiz .opt,.checkskin.inquiz .opts:has(> li:nth-child(8)) .opt,
  .checkskin.inquiz .opts:has(> li:nth-child(9)) .opt{min-height:64px;padding:18px 14px 18px 15px;
    font-size:19px;line-height:1.25;gap:16px}
  .checkskin.inquiz .opts:has(> li:nth-child(7)),
  .checkskin.inquiz .opts:has(> li:nth-child(8)),
  .checkskin.inquiz .opts:has(> li:nth-child(9)){gap:0}
  .checkskin.inquiz .opt.sel{padding-left:15px}
  .checkskin.inquiz .opt small{font-size:15px;margin-top:5px}
  .checkskin.inquiz .opt .mark{flex-basis:21px;height:21px;margin-top:0}
  .checkskin.inquiz .q section .ask{grid-column:1;grid-row:3;max-width:560px;
    margin:4px 0 0;align-self:start}
  .checkskin.inquiz .terms,.checkskin.inquiz .why-ask{border-radius:0;font-size:15px}
  .checkskin.inquiz .foot{z-index:10;border-top:1px solid var(--line);background:#fff;
    padding:15px var(--pad)}
  .checkskin.inquiz .foot .in{display:flex;flex-direction:row-reverse;align-items:center;
    gap:24px;max-width:1288px}
  .checkskin.inquiz .foot .btn{width:min(340px,34%);min-height:58px;flex:0 0 auto}
  .checkskin.inquiz .foot .hint{margin:0 auto 0 0;text-align:left}

  /* Результат: характеристика кожи слева, выбор схемы и покупка справа. */
  .checkskin.resultview #screen{padding-top:clamp(50px,5vw,76px)}
  .checkskin .result-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);
    gap:clamp(46px,6vw,100px);align-items:start;padding-bottom:0;border-bottom:0}
  .checkskin .res-head{border:0;padding:0}
  .checkskin .res-head h1{font-size:clamp(62px,6vw,90px)!important;
    line-height:.9!important;margin:0 0 26px}
  .checkskin .verdict{font-size:clamp(20px,2vw,28px);font-weight:600;
    line-height:1.18;color:var(--ink);max-width:560px}
  .checkskin .vmnote{font-size:15px;margin:0 0 18px}
  .checkskin .viewmode{gap:8px;margin:0 0 24px}
  .checkskin .vm{min-height:76px;padding:14px 18px;font-size:16px;
    line-height:1.2;text-align:left}
  .checkskin .vmsum{font-size:14px;margin-top:6px}
  .checkskin .checkskin-total{font-size:21px;line-height:1.2;margin:0 0 15px}
  .checkskin .checkskin-add-all{min-height:58px;font-size:14px;letter-spacing:.12em}
  .checkskin .checkskin-cart-status{font-size:14px;margin:10px 0 0}
  .checkskin .checkskin-cart-status:empty{display:none}
  .checkskin .plan{margin:48px 0 0;padding:0}
  .checkskin .plan-row{padding:18px 0;gap:36px;align-items:baseline}
  .checkskin .plan-t{flex:0 0 180px;font-size:13px;color:var(--ink)}
  .checkskin .plan-l{font-size:18px;line-height:1.3}
  .checkskin .block{margin:64px 0 0}
  .checkskin .block>h2{font-size:clamp(38px,3.2vw,48px);font-weight:800;
    color:var(--ink);line-height:1;text-transform:uppercase;letter-spacing:0;
    padding:0 0 18px;margin:0 0 16px}
  .checkskin .block .row-wrap{min-width:0}
  .checkskin .item{padding:24px 0 30px}
  .checkskin .item .shot{width:150px;margin:0 26px 12px 0}
  .checkskin .item .slot{font-size:12px;margin:0 0 8px}
  .checkskin .item .name{font-size:22px;line-height:1.12;margin:0 0 12px}
  .checkskin .item .why{font-size:16px;line-height:1.3;margin:0 0 9px}
  .checkskin .item .actives{font-size:14px;line-height:1.3;margin:0 0 13px}
  .checkskin .item .price{font-size:18px}
  .checkskin .buyrow{margin-top:18px;align-items:center}
  .checkskin .afkit-purchase--card .afkit-purchase__add,
  .checkskin .afkit-purchase--card .afkit-purchase__details a,
  .checkskin .buy{min-height:46px;height:auto;max-width:none;width:auto;
    flex:0 0 auto;padding:10px 25px;border:0;background:var(--ink);color:#fff;
    font:600 13px/1.1 "TT Commons Pro",sans-serif;letter-spacing:.12em}
  .checkskin .afkit-purchase--card .afkit-purchase__add:disabled{background:var(--soft);color:var(--dim)}
  .checkskin .alt summary{font-size:12px}
  .checkskin .repeat{padding:23px 0;font-size:16px}
  .checkskin .repeat .slot{font-size:12px}
  .checkskin .concl-full,.checkskin .notices{margin-top:72px;padding-top:25px}
  .checkskin .concl-full>h2,.checkskin .notices>h2,
  .checkskin .checkskin-email h2{font-size:clamp(30px,2.7vw,40px);font-weight:800;
    color:var(--ink);line-height:1.05;letter-spacing:0;margin:0 0 22px}
  .checkskin .concl{grid-template-columns:220px minmax(0,1fr);max-width:850px;
    column-gap:32px;margin:0}
  .checkskin .concl dt{font-size:12px;margin-top:17px}
  .checkskin .concl dd{font-size:19px;font-weight:400;margin-top:14px}
  .checkskin .notice{max-width:950px;padding:20px 24px;font-size:17px}
  .checkskin .legal{font-size:14px;line-height:1.4;margin-top:54px;max-width:900px}
  .checkskin .checkskin-email{max-width:950px;margin:58px 0 0;padding:32px 0}
  .checkskin .checkskin-email p{font-size:17px;line-height:1.35}
  .checkskin .checkskin-email input[type=email]{min-height:58px;font-size:18px;padding:14px 18px}
  .checkskin .checkskin-email button{min-height:58px;padding:0 36px;font-size:14px}
  .checkskin .checkskin-consent{font-size:15px}
  .checkskin.resultview .foot{max-width:1440px;margin:0 auto;padding:28px var(--pad) 50px}
  .checkskin.resultview .foot .in{max-width:none}
  .checkskin.resultview .foot .btn{max-width:340px}
  .checkskin.resultview .hint.actions{max-width:700px;margin-top:22px}
}

@media (min-width:1100px){
  .checkskin .block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:42px}
  .checkskin .block>h2{grid-column:1/-1}
  .checkskin .block .item{display:grid;grid-template-columns:132px minmax(0,1fr);
    column-gap:20px;align-content:start}
  .checkskin .block .item::after{content:none}
  .checkskin .block .item .shot{grid-column:1;grid-row:1/span 7;float:none;
    width:132px;height:auto;margin:0;align-self:start}
  .checkskin .block .item>:not(.shot){grid-column:2;min-width:0}
  .checkskin .block .item .name{font-size:19px}
  .checkskin .block .item .why{font-size:15px}
}

@media (min-width:900px) and (max-width:1099px){
  .checkskin .result-intro{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:34px}
  .checkskin .cover .hero{min-height:520px}
  .checkskin .cover h1{font-size:56px}
}

@media (max-width:899px){
  .checkskin .result-intro{display:block}
  .checkskin.inquiz .q h1{font-size:clamp(26px,4vw,34px)!important;line-height:1.08!important}
}
@media (max-width:599px){
  .checkskin.inquiz .q h1{font-size:clamp(20px,5.8vw,25px)!important;
    line-height:1.1!important}
}

@media print{
  .checkskin .cover{display:block;min-height:0}
  .checkskin .wrap{max-width:none;padding:0;min-height:0}
  .checkskin .result-intro{display:block;border:0;padding:0}
  .checkskin .res-head h1{font-size:28pt!important;line-height:1!important}
  .checkskin .block{display:block}
  .checkskin .item{display:block}
  .checkskin .item .shot{float:left;width:84px;margin:2px 14px 8px 0}
}

/* Результат использует геометрию каталога: четыре товарные карточки в ряд,
   крупный серый кадр, название и строку покупки с ценой из КИТ. */
.checkskin.resultview .wrap{max-width:1440px;padding-right:18px;padding-left:18px}
.checkskin.resultview #screen{padding-top:32px}
.checkskin.resultview .res-head h1{font-size:clamp(34px,3.35vw,48px)!important;
  line-height:1.05!important;margin-bottom:10px}
.checkskin.resultview .verdict{font-size:18px;font-weight:600;line-height:1.2}
.checkskin.resultview .result-intro{gap:30px;grid-template-columns:minmax(0,1fr) minmax(360px,480px)}
.checkskin.resultview .vmnote{margin-bottom:10px}
.checkskin.resultview .viewmode{margin-bottom:14px}
.checkskin.resultview .vm{min-height:51px;padding:8px 12px;font-size:14px}
.checkskin.resultview .checkskin-total{font-size:18px;margin-bottom:10px}
.checkskin.resultview .checkskin-add-all{min-height:48px;border:1px solid var(--line);
  background:var(--line);color:var(--ink);font:700 16px/1 "TT Commons Pro",sans-serif;
  letter-spacing:0;text-transform:uppercase}
.checkskin.resultview .checkskin-promo-anchor{width:max-content;height:76px;margin-top:18px}
.checkskin.resultview .checkskin-promo{display:flex;position:relative;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:5px;width:100%;height:76px;
  padding:10px 13px;border:0;border-radius:0;background:var(--acid);color:var(--ink);
  text-align:left;cursor:pointer}
.checkskin.resultview .checkskin-promo__label{font-size:11px;font-weight:600;
  line-height:1.1;letter-spacing:.08em;text-transform:uppercase}
.checkskin.resultview .checkskin-promo__code{display:block;max-width:100%;
  border-bottom:1px solid currentColor;font:800 20px/1.1 "TT Commons Pro",sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkskin.resultview .checkskin-promo:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.checkskin.resultview .checkskin-promo__feedback{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.checkskin.resultview .checkskin-promo.is-floating{position:fixed;right:128px;
  bottom:max(14px,env(safe-area-inset-bottom));z-index:20;width:auto;
  height:50px;gap:2px;padding:6px 10px;align-items:flex-end;text-align:right}
.checkskin.resultview .checkskin-promo.is-floating .checkskin-promo__label{
  font-size:10px;line-height:1;letter-spacing:.06em}
.checkskin.resultview .checkskin-promo.is-floating .checkskin-promo__code{
  font-size:17px;line-height:1}
.checkskin.resultview .checkskin-promo__cart-action{display:none}
.checkskin.resultview .checkskin-promo.is-floating + .checkskin-promo__cart-action{
  display:flex;position:fixed;right:20px;bottom:max(14px,env(safe-area-inset-bottom));
  z-index:20;align-items:center;justify-content:center;width:108px;height:50px;
  padding:6px 8px;border:0;border-radius:0;background:var(--line);color:var(--ink);
  font:700 14px/1 "TT Commons Pro",sans-serif;text-transform:uppercase;cursor:pointer}
.checkskin.resultview .checkskin-promo__cart-action:disabled,
.checkskin.resultview .checkskin-promo.is-floating + .checkskin-promo__cart-action:disabled{
  background:#d2d2d2;color:#777;cursor:default}
@media (hover:hover){
  .checkskin.resultview .checkskin-add-all:hover:not(:disabled){background:var(--ink);color:#fff}
  .checkskin.resultview .checkskin-promo__cart-action:hover:not(:disabled){background:var(--ink);color:#fff}
}
.checkskin.resultview .plan{margin-top:32px}
.checkskin.resultview .plan-row{padding:13px 0}
.checkskin.resultview .block{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px 14px;margin-top:48px}
.checkskin.resultview .block>h2{grid-column:1/-1;margin:0 0 2px;padding:0 0 16px;
  font-size:clamp(26px,2.5vw,34px);line-height:1.08}
.checkskin.resultview .block .row-wrap{min-width:0;height:100%}
.checkskin.resultview .item.shop-card{display:flex;min-width:0;height:100%;padding:0;
  flex-direction:column;border:0;user-select:text;-webkit-user-select:text}
.checkskin.resultview .item::after{content:none}
.checkskin.resultview .item .shop-card__media-link{display:block;width:100%;height:auto}
.checkskin.resultview .item .shop-card__media{aspect-ratio:.9;background:#eaeaea}
.checkskin.resultview .item .shot{position:absolute;inset:0;display:block;float:none;
  width:100%!important;height:100%!important;max-width:none;margin:0!important;
  object-fit:contain;object-position:center;transform:scale(1.2)}
@media (hover:hover) and (pointer:fine){
  .checkskin.resultview .item:hover .shot{transform:scale(1.23)}
}
.checkskin.resultview .item .shop-card__badges{top:12px;right:12px}
.checkskin.resultview .item .slot{display:inline-flex;align-items:center;position:static;
  width:fit-content;min-height:24px;padding:0 10px;background:#fff;color:#000;
  font-size:12px;font-weight:700;letter-spacing:0;line-height:1;text-transform:uppercase}
.checkskin.resultview .item .shop-card__body{display:flex;min-width:0;padding:14px 0 18px;
  flex:1 1 auto;flex-direction:column;gap:8px}
.checkskin.resultview .item .name{display:flex;min-width:0;min-height:88px;margin:0;padding:0 0 14px;
  flex-direction:column;
  border-bottom:1px solid #000;font-size:16px;font-weight:700;line-height:1.18;
  text-transform:uppercase;overflow-wrap:anywhere}
.checkskin.resultview .item .shop-card__repeat-note{margin-top:auto;padding-top:8px;
  font-size:13px;font-weight:400;line-height:1.2;text-transform:none}
.checkskin.resultview .item .name a{display:inline;padding:0;color:#000;
  text-decoration:none}
.checkskin.resultview .item .name a:hover{text-decoration:underline;text-underline-offset:2px}
.checkskin.resultview .item .name .small{font-size:13px;font-weight:400;
  text-transform:none}
.checkskin.resultview .item .price[hidden]{display:none!important}
.checkskin.resultview .item .buyrow{display:block;clear:none;min-width:0;margin:0}
.checkskin.resultview .item .afkit-purchase--card{display:flex;width:100%;max-width:none;
  margin:0;padding:0 0 8px;border-bottom:1px solid #000}
.checkskin.resultview .item .afkit-purchase__controls{display:flex;width:100%;
  justify-content:space-between;gap:10px}
.checkskin.resultview .item .afkit-purchase__price{display:flex;min-width:0;flex:1 1 auto}
.checkskin.resultview .item .afkit-purchase--card .afkit-purchase__add,
.checkskin.resultview .item .afkit-purchase--card .afkit-purchase__details a,
.checkskin.resultview .item .buy{display:inline-flex;align-items:center;justify-content:center;
  width:53%;max-width:159px;height:31px;min-height:31px;padding:5px 10px;flex:0 0 53%;
  border:1px solid #e6e6e6;background:#e6e6e6;color:#000;
  font:700 16px/1 "TT Commons Pro",sans-serif;letter-spacing:0;text-align:center;
  text-transform:uppercase;text-decoration:none}
.checkskin.resultview .item .afkit-purchase--card .afkit-purchase__add:hover,
.checkskin.resultview .item .afkit-purchase--card .afkit-purchase__details a:hover,
.checkskin.resultview .item .buy:hover{border-color:#000;background:#000;color:#fff}
.checkskin.resultview .item .afkit-purchase--card .afkit-purchase__add:disabled{background:#e6e6e6;color:#777}
.checkskin.resultview .item .item-explanation{display:flex;min-width:0;
  flex-direction:column;gap:8px}
.checkskin.resultview .item .why{margin:0;font-size:13px;line-height:1.35}
.checkskin.resultview .item .why::before{content:"ПОЧЕМУ В ПОДБОРКЕ";display:block;
  margin:2px 0 5px;font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--dim)}
.checkskin.resultview .item .actives{margin:0;color:#111;font-size:12px;
  font-weight:600;line-height:1.3;text-transform:uppercase;overflow-wrap:anywhere}
.checkskin.resultview .item .chips{gap:4px}
.checkskin.resultview .item .chip{font-size:10px}
.checkskin.resultview .item .alt{margin:2px 0 0}
.checkskin.resultview .item .alt summary{font-size:11px}

@media (min-width:900px){
  .checkskin.resultview .item .name{min-height:110px}
  .checkskin.resultview .block:has(.shop-card__repeat-note) .item .name{min-height:154px}
}
@media (max-width:1279px){
  .checkskin.resultview .block{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .checkskin.resultview .result-intro{display:block}
  .checkskin.resultview .block{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkskin.resultview .item .name{min-height:0}
  .checkskin.resultview .block:has(.shop-card__repeat-note) .item .name{min-height:154px}
}
@media (max-width:599px){
  .checkskin.resultview .checkskin-promo-anchor{width:100%;height:68px;margin:16px 0 20px}
  .checkskin.resultview .checkskin-promo{height:68px}
  .checkskin.resultview .checkskin-promo.is-floating{right:122px;
    height:50px;max-width:calc(100vw - 136px)}
  .checkskin.resultview .checkskin-promo.is-floating + .checkskin-promo__cart-action{
    right:14px;width:108px}
  .checkskin.resultview .wrap{padding-right:14px;padding-left:14px}
  .checkskin.resultview .block{grid-template-columns:minmax(0,1fr);gap:22px}
  .checkskin.resultview .block>h2{margin-bottom:0}
  .checkskin.resultview .item .shop-card__media{aspect-ratio:1.15}
  .checkskin.resultview .item .shop-card__body{padding-top:12px}
  .checkskin.resultview .block:has(.shop-card__repeat-note) .item .name{min-height:0}
  .checkskin.resultview .item .afkit-purchase--card .afkit-purchase__add,
  .checkskin.resultview .item .afkit-purchase--card .afkit-purchase__details a,
  .checkskin.resultview .item .buy{height:44px;min-height:44px}
}

@media print{
  .checkskin.resultview .checkskin-promo.is-floating{position:static;width:100%}
  .checkskin.resultview .checkskin-promo__cart-action{display:none!important}
  .checkskin.resultview .wrap{max-width:none;padding:0}
  .checkskin.resultview .block{display:block;margin-top:20px}
  .checkskin.resultview .item.shop-card{display:block;break-inside:auto}
  .checkskin.resultview .item .shop-card__media-link{float:left;width:84px;margin:0 14px 8px 0}
  .checkskin.resultview .item .shop-card__media{aspect-ratio:3/4}
  .checkskin.resultview .item .shot{transform:none}
  .checkskin.resultview .item .shop-card__body{display:block;padding:0}
  .checkskin.resultview .item .name{min-height:0;padding-bottom:6px}
  .checkskin.resultview .item .price[hidden]{display:inline!important;font-size:12pt}
}

/* Финал результата: выбор схемы и сохранение подбора в ритме каталога. */
.checkskin.resultview .viewmode .vm{display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:68px;padding:10px 14px;text-align:center;
  font-size:18px;font-weight:700;line-height:1.15}
.checkskin.resultview .viewmode .vmsum{margin-top:5px;font-size:15px;text-align:center}

.checkskin.resultview .wrap{padding-bottom:0}
.checkskin.resultview .checkskin-email{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
  column-gap:clamp(24px,4vw,64px);row-gap:0;width:100%;max-width:none;
  margin:38px 0 0;padding:25px 0 20px;border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line)}
.checkskin.resultview .checkskin-email h2{grid-column:1;grid-row:1;
  margin:0 0 10px;font-size:clamp(25px,2.25vw,32px);line-height:1.05}
.checkskin.resultview .checkskin-email>p:not(.checkskin-email-status){grid-column:1;grid-row:2;
  align-self:start;margin:0;font-size:15px;line-height:1.3;color:var(--dim)}
.checkskin.resultview .checkskin-email form{display:grid;grid-column:2;grid-row:1/span 2;
  grid-template-columns:minmax(0,1fr) 200px;gap:10px;align-content:start}
.checkskin.resultview .checkskin-email input[type=email]{grid-column:1;grid-row:1;
  width:100%;min-width:0;min-height:52px;padding:12px 15px;font-size:16px}
.checkskin.resultview .checkskin-email button[type=submit]{grid-column:2;grid-row:1;
  width:100%;min-height:52px;padding:0 12px;font-size:13px}
.checkskin.resultview .checkskin-consents{grid-column:1/-1;grid-row:2;gap:0;
  margin:2px 0 0;padding:9px 12px;background:var(--soft)}
.checkskin.resultview .checkskin-consent{align-items:flex-start;gap:10px;
  padding:5px 0;font-size:13px;line-height:1.3}
.checkskin.resultview .checkskin-consent+.checkskin-consent{border-top:1px solid var(--line);
  padding-top:10px;margin-top:5px}
.checkskin.resultview .checkskin-consent input{margin-top:0}
.checkskin.resultview .checkskin-email-status{grid-column:2;grid-row:3;
  margin:8px 0 0;font-size:13px}
.checkskin.resultview .checkskin-email-status:empty{display:none}

.checkskin.resultview .foot{max-width:1440px;margin:0 auto;padding:16px 18px 48px;border:0}
.checkskin.resultview .foot .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;max-width:none}
.checkskin.resultview .foot .btn{width:100%;max-width:none;min-height:52px;margin:0;
  font-size:13px;letter-spacing:.08em}
.checkskin.resultview .hint.actions{display:contents;max-width:none;margin:0}
.checkskin.resultview .hint.actions .act{min-width:0;min-height:52px;
  padding:8px 12px;font-size:13px;letter-spacing:.08em}
.checkskin.resultview .hint.actions .linkbox{grid-column:1/-1;margin-top:2px}

@media (max-width:899px){
  .checkskin.resultview .checkskin-email{display:block;margin-top:30px;padding:23px 0 20px}
  .checkskin.resultview .checkskin-email h2{margin-bottom:8px}
  .checkskin.resultview .checkskin-email>p:not(.checkskin-email-status){margin-bottom:16px}
  .checkskin.resultview .foot{padding:14px var(--pad) 34px}
  .checkskin.resultview .foot .in{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (max-width:599px){
  .checkskin.resultview .viewmode .vm{min-height:72px;padding:9px 8px;font-size:16px}
  .checkskin.resultview .viewmode .vmsum{font-size:13px}
  .checkskin.resultview .checkskin-email form{grid-template-columns:minmax(0,1fr)}
  .checkskin.resultview .checkskin-email input[type=email]{grid-column:1;grid-row:1}
  .checkskin.resultview .checkskin-consents{grid-column:1;grid-row:2}
  .checkskin.resultview .checkskin-email button[type=submit]{grid-column:1;grid-row:3}
  .checkskin.resultview .foot{padding-right:14px;padding-left:14px}
  .checkskin.resultview .foot .in{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .checkskin.resultview .foot .btn,
  .checkskin.resultview .hint.actions .act{min-height:48px;font-size:12px}
}

/* Сводка ответов раскрывается по запросу; предупреждения остаются на виду. */
.checkskin.resultview .concl-full,.checkskin.resultview .notices{
  margin:38px 0 0;padding:16px 0 0;border-top:1px solid var(--ink)}
.checkskin.resultview .concl-full>summary,.checkskin.resultview .notices>h2{
  margin:0 0 14px;padding:0;font-size:clamp(19px,1.8vw,25px);
  font-weight:700;line-height:1.05;letter-spacing:0;color:var(--ink)}
.checkskin.resultview .concl-full>summary{display:flex;align-items:center;
  justify-content:space-between;gap:12px;min-height:44px;margin:0;cursor:pointer;
  list-style:none;text-transform:uppercase}
.checkskin.resultview .concl-full>summary::-webkit-details-marker{display:none}
.checkskin.resultview .concl-full>summary:focus-visible{outline:2px solid var(--ink);
  outline-offset:3px}
.checkskin.resultview .concl-full>summary::after{content:'+';font-size:28px;
  font-weight:400;line-height:1;flex:0 0 auto}
.checkskin.resultview .concl-full[open]>summary::after{content:'−'}
.checkskin.resultview .concl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 18px;max-width:none;margin:9px 0 0;border-top:1px solid var(--line)}
.checkskin.resultview .concl-item{min-width:0;padding:12px 6px 12px 0;
  border-bottom:1px solid var(--line)}
.checkskin.resultview .concl dt{margin:0 0 5px;font-size:11px;line-height:1.15}
.checkskin.resultview .concl dd{margin:0;font-size:16px;font-weight:600;line-height:1.2}
.checkskin.resultview .notices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 20px}
.checkskin.resultview .notices>h2{grid-column:1/-1}
.checkskin.resultview .notice,.checkskin.resultview .notice+.notice{
  max-width:none;margin:0;padding:11px 4px 12px 12px;border:0;
  border-left:2px solid var(--ink);border-bottom:1px solid var(--line);
  background:none;font-size:14px;line-height:1.3}
.checkskin.resultview .notice.alarm{grid-column:1/-1;margin:0 0 12px;
  padding:12px 14px;border-left:3px solid var(--bad);background:var(--soft);
  font-size:15px}
@media (max-width:899px){
  .checkskin.resultview .concl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkskin.resultview .notices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .checkskin.resultview .concl-full,.checkskin.resultview .notices{
    margin-top:26px;padding-top:13px}
  .checkskin.resultview .concl-full>summary,.checkskin.resultview .notices>h2{
    margin-bottom:10px;font-size:19px}
  .checkskin.resultview .concl-full>summary{margin-bottom:0}
  .checkskin.resultview .concl{gap:0 12px}
  .checkskin.resultview .concl-item{padding:10px 2px 10px 0}
  .checkskin.resultview .concl dt{font-size:10px}
  .checkskin.resultview .concl dd{font-size:14px;line-height:1.2}
  .checkskin.resultview .notices{grid-template-columns:minmax(0,1fr);gap:0}
  .checkskin.resultview .notice,.checkskin.resultview .notice+.notice{
    padding:9px 4px 10px 11px;font-size:13px;line-height:1.28}
  .checkskin.resultview .notice.alarm{font-size:14px}
}
@media print{
  .checkskin.resultview .concl-full>summary{display:none}
  .checkskin.resultview .concl-full::details-content{content-visibility:visible!important;
    block-size:auto!important}
  .checkskin.resultview .concl,
  .checkskin.resultview .notices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkskin.resultview .notice{break-inside:avoid}
}