/* ============================================================================
 * Квиз-визуализатор кухни на посадке /kitchen (блок #kv).
 * Разметка — app2/views/kitchen/_visualizer.php, логика — /js/kitchen-visualizer.js.
 * Файл статический, вебпак-сборок не касается; версия к URL добавляется
 * автоматически (AssetManager appendTimestamp = true в config/web.php).
 * Картинки блока лежат в web/img/kv/.
 * ========================================================================== */

/* ============ нейтрализация боевых стилей (bootstrap + front.css) ============ */
/* макет свёрстан при line-height: normal; на сайте у body 1.42857 — иначе всё разъезжается */
#kv, .kv-modal { line-height: normal; }
/* bootstrap задаёт h1–h6 вес 500 — в макете заголовки идут жирными */
#kv h2, #kv h3 { font-weight: 700; }
/* bootstrap делает <label> жирным и вешает margin-bottom: 5px */
#kv label, .kv-modal label { font-weight: normal; max-width: none; }
#kv label.kv-drop { margin: 0; }
/* bootstrap красит ссылки в синий #337ab7 */
#kv a, .kv-modal a { color: #ed6c44; }

/* ============ посадка блока в ленту каталога ============ */
/* .catalog-item задаёт padding через !important — перебиваем своим,
   ступени breakpoint'ов те же, что у карточек кухонь.
   Верхний отступ ужат (65→38 и далее по лестнице): над бейджем «Бесплатно»
   было слишком много воздуха. Нижний оставлен как был. */
#kv.catalog-item { padding: 38px 65px 45px !important; }
@media (min-width: 992px) and (max-width: 1199px) {
    #kv.catalog-item { padding: 32px 45px 40px !important; }
}
@media (min-width: 769px) and (max-width: 991px) {
    #kv.catalog-item { padding: 26px 30px 32px !important; }
}
@media (max-width: 768px) {
    #kv.catalog-item { padding: 18px 18px 26px !important; }
}

/* ============ БЛОК-КВИЗ ============ */
#kv {
    position: relative; overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 2px 3px rgba(76,71,67,.07), 0 22px 60px -34px rgba(76,55,40,.45);
    background: #ffffff;
}

.kv-head { text-align: center; max-width: 760px; margin: 0 auto 34px; position: relative; z-index: 1; }
.kv-title {
    font-family: roboto_medium, Roboto, Arial, sans-serif;
    font-size: 34px; line-height: 1.2; margin: 0 0 12px;
    color: #332e29; letter-spacing: -.3px;
}
.kv-sub { font-size: 16.5px; line-height: 27px; color: #7d746c; margin: 0; }
.kv-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
    color: #c15a2a;
    border: 1px solid #f7ded0; background: linear-gradient(180deg,#fff8f3,#fdeee5);
    border-radius: 20px; padding: 6px 15px; margin-bottom: 16px;
    box-shadow: 0 2px 8px -4px rgba(193,90,42,.35);
}
/* на экране результата шапку блока прячем — заголовок даёт сам результат */
#kv.stage-result .kv-head { display: none; }
.kv-badge i { width: 6px; height: 6px; border-radius: 50%; background: #ed6c44; display: inline-block; }

/* ---------- прогресс ---------- */
.kv-bar { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
/* кнопки «Назад» больше нет (решение владельца — шаг назад не предусмотрен).
   Десктоп: полоска остаётся по центру — боковые отступы равны месту, которое
   занимала кнопка (95px), плюс gap полоски (18px). Мобила: во всю ширину. */
.kv-bar-mid { flex: 1 1 auto; margin: 0 113px; }
@media (max-width: 768px) { .kv-bar-mid { margin: 0; } }
.kv-step-num {
    font-size: 13px; color: #a2978e; letter-spacing: .5px; margin-bottom: 8px;
    display: flex; justify-content: flex-start; align-items: center;
}
.kv-step-num b { font-family: roboto_medium, Roboto, Arial, sans-serif; color: #ed6c44; font-weight: normal; }
.kv-step-num > span { flex: 0 0 auto; }
/* стрелки шагов: тап-зона 32×32, видимый шеврон ~12px, без рамок и заливки */
.kv-nav {
    flex: 0 0 auto; width: 32px; height: 32px; margin: -9px -4px; padding: 0;
    border: 0; background: none; -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #ed6c44; cursor: pointer;
}
.kv-nav:first-child { margin-left: -10px; }
.kv-nav svg { display: block; }
/* hover'а нет намеренно: на телефоне наведения не существует, вёрстка одна на все устройства.
   Поэтому недоступность крайнего шага видна сразу, без наведения: стрелка остаётся
   на месте и всегда видима, но горит заметно бледнее активной и кликается вхолостую. */
.kv-nav[aria-disabled="true"] { color: #ddd2ca; cursor: default; }
.kv-nav:focus { outline: none; }
.kv-nav:focus-visible { outline: 2px solid #ed6c44; outline-offset: -7px; border-radius: 50%; }
.kv-track { height: 6px; border-radius: 6px; background: #f1e7e0; overflow: hidden; }
.kv-track-fill {
    height: 100%; width: 25%; border-radius: 6px;
    background: linear-gradient(90deg,#f79c62,#ed6c44 55%,#e2531f);
    box-shadow: 0 0 12px -2px rgba(237,108,68,.7);
    transition: width .45s cubic-bezier(.4,.9,.3,1);
}

/* ---------- шаги ---------- */
.kv-step { display: none; }
.kv-step.is-active { display: block; animation: kvStepIn .4s cubic-bezier(.2,.8,.3,1); }
/* уходящий шаг не пропадает мгновенно: короткий выдох, display: none — только по его окончании */
.kv-step.is-leaving { display: block; pointer-events: none; animation: kvStepOut .17s ease-in forwards; }
@keyframes kvStepIn  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes kvStepOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-8px) } }
/* на время смены высота контейнера фиксируется и плавно переезжает к высоте нового шага;
   clip вместо hidden — чтобы не обрезать мобильную мозаику с отрицательными полями */
.kv-steps.is-morph { transition: height .25s cubic-bezier(.2,.8,.3,1); overflow-x: visible; overflow-y: clip; }
.kv-q {
    font-family: roboto_medium, Roboto, Arial, sans-serif;
    font-size: 26px; line-height: 1.25; color: #332e29; margin: 0 0 6px;
}
.kv-q-sub { font-size: 14.5px; color: #a2978e; margin: 0 0 22px; }

/* ---------- сетка фото-карточек ---------- */
.kv-grid { display: grid; gap: 18px; }
.kv-grid-3 { grid-template-columns: repeat(3, 1fr); }

.kv-card {
    position: relative; display: block; padding: 0; border: 0; background: #efe8e3;
    border-radius: 14px; overflow: hidden; cursor: pointer; width: 100%;
    aspect-ratio: 3 / 2;
    box-shadow: 0 2px 6px rgba(76,55,40,.10), 0 16px 30px -22px rgba(76,55,40,.55);
    transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
    font-family: robotoregular, Roboto, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.kv-card:focus { outline: none; }
.kv-card img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.8,.3,1), filter .3s ease;
    filter: saturate(1.06) contrast(1.03);
}
.kv-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(28,22,18,.66) 0%, rgba(28,22,18,.20) 22%, rgba(28,22,18,0) 44%);
    transition: opacity .25s ease;
}
/* только для мыши: на тач-экране hover залипает после тапа */
@media (hover: hover) {
    .kv-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(76,55,40,.14), 0 26px 46px -24px rgba(76,55,40,.6); }
    .kv-card:hover img { transform: scale(1.07); }
}
.kv-card-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 14px 16px 14px; text-align: left;
    font-family: roboto_medium, Roboto, Arial, sans-serif;
    font-size: 18px; color: #fff; letter-spacing: .2px;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.kv-card-cap small {
    display: block; font-family: robotoregular, Roboto, Arial, sans-serif;
    font-size: 12.5px; line-height: 17px; color: rgba(255,255,255,.82);
    margin-top: 3px; text-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.kv-check {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    background: #ed6c44; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(226,83,31,.55);
    opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .28s cubic-bezier(.3,1.6,.5,1);
}
.kv-card.sel { transform: translateY(-3px); }
.kv-card.sel::before {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border: 3px solid #ed6c44; border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(237,108,68,.18) inset;
}
.kv-card.sel .kv-check { opacity: 1; transform: scale(1); }

/* ---------- карточка «удивите меня» ---------- */
.kv-surprise {
    position: relative; overflow: hidden; width: 100%; margin-top: 18px;
    display: flex; align-items: center; gap: 18px; text-align: left;
    padding: 20px 24px; cursor: pointer;
    border: 1px solid #f6d3bd; border-radius: 14px;
    background: linear-gradient(115deg, #fff6ef 0%, #ffe9da 42%, #ffdcc6 78%, #ffd0b4 100%);
    box-shadow: 0 2px 6px rgba(200,120,70,.10), 0 18px 34px -24px rgba(200,110,60,.75);
    font-family: robotoregular, Roboto, Arial, sans-serif;
    transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, border-color .2s;
}
.kv-surprise:focus { outline: none; }
@media (hover: hover) {
    .kv-surprise:hover { transform: translateY(-3px); border-color: #f0b591; box-shadow: 0 6px 14px rgba(200,120,70,.16), 0 26px 44px -24px rgba(200,110,60,.85); }
}
.kv-surprise::after {
    content: ''; position: absolute; top: -60%; left: -30%; width: 40%; height: 220%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
    transform: rotate(8deg); animation: kvSweep 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes kvSweep { 0% { left: -35%; } 55%, 100% { left: 115%; } }
.kv-spark {
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(140deg,#ffb27c,#ed6c44);
    display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: 0 8px 18px -6px rgba(226,83,31,.7);
}
.kv-surprise-txt { flex: 1 1 auto; }
.kv-surprise-t, .kv-surprise-d { display: block; }
.kv-surprise-t {
    font-family: roboto_medium, Roboto, Arial, sans-serif; font-size: 19px; color: #8c3f18;
    margin-bottom: 3px;
}
.kv-surprise-d { font-size: 14px; line-height: 20px; color: #a9663f; }
.kv-surprise-go {
    flex: none; font-size: 14px; color: #c2551f;
    font-family: roboto_medium, Roboto, Arial, sans-serif;
    display: inline-flex; align-items: center; gap: 6px;
}
.kv-surprise.sel { border-color: #ed6c44; box-shadow: 0 0 0 3px rgba(237,108,68,.25), 0 18px 34px -22px rgba(200,110,60,.8); }

/* ---------- dev-варианты формы плашки «удивите меня» (временный переключатель) ---------- */
/* B: компактная плашка по центру, без стрелки и бегущего блика */
#kv.wowB .kv-surprise { width: fit-content; max-width: 92%; margin: 18px auto 0; padding: 9px 22px; gap: 13px; border-radius: 999px; box-shadow: 0 2px 8px rgba(200,120,70,.13); }
#kv.wowB .kv-surprise::after { display: none; }
#kv.wowB .kv-spark { width: 38px; height: 38px; }
#kv.wowB .kv-spark svg { width: 19px; height: 19px; }
#kv.wowB .kv-surprise-t { font-size: 15.5px; margin-bottom: 1px; }
#kv.wowB .kv-surprise-d { font-size: 12.5px; line-height: 17px; }
#kv.wowB .kv-surprise-go { display: none; }
/* B2: белая карточка */
#kv.wowB.b2 .kv-surprise { background: #fff; border: 1px solid #eee3da; box-shadow: 0 2px 10px rgba(120,90,70,.10); }
#kv.wowB.b2 .kv-spark { background: linear-gradient(140deg, #ffd9bd, #f7a276); box-shadow: none; }
#kv.wowB.b2 .kv-surprise-t { color: #4c4743; }
#kv.wowB.b2 .kv-surprise-d { color: #8d837b; }
@media (hover: hover) {
    #kv.wowB.b2 .kv-surprise:hover { border-color: #f0c9b6; box-shadow: 0 6px 16px rgba(120,90,70,.14); }
}
/* B: на мобиле плашка ниже */
@media (max-width: 640px) {
    #kv.wowB .kv-surprise { padding: 7px 16px; gap: 10px; }
    #kv.wowB .kv-spark { width: 30px; height: 30px; }
    #kv.wowB .kv-spark svg { width: 15px; height: 15px; }
    #kv.wowB .kv-surprise-t { font-size: 14.5px; margin-bottom: 1px; }
    #kv.wowB .kv-surprise-d { font-size: 12px; line-height: 15px; }
}

/* ---------- шаг 3: формы кухни ---------- */
/* Плитка шага 3 — та же .kv-card, что фото-кухни на шагах 1–2, и сетка та же
   (.kv-grid-3: три колонки на десктопе, две на мобиле), и пропорция та же —
   своих правил ни для сетки, ни для размера плитки здесь НЕТ (блок 2q).
   Отличий ровно два — они ниже: как вписана картинка и что подстрочник виден
   и на мобиле. */
/* Изометрия должна попадать в кадр целиком — значит contain, а кремовые поля там,
   где пропорция плитки (3:2 на десктопе, 5:4 на мобиле) не совпала с пропорцией
   картинки (7:5), добирает фон плитки. Фон в точности равен краю самих картинок
   (они пересажены на плоский #f0ebe0, см. layout-gen/make.py), поэтому стыка не видно.
   Кадр чуть приподнят (object-position), чтобы плашка подписи ложилась на пустой
   низ, а не на комнату.
   filter шагов 1–2 (saturate/contrast) снят: это не фотография. */
.kv-step[data-step="4"] .kv-card img {
    object-fit: contain; object-position: center 42%; background: #f0ebe0; filter: none;
}
/* Пояснение к форме — вторая строка плашки, и живёт она по общим правилам
   плиток: видна на десктопе, скрыта на мобиле (решение владельца 18.08 —
   два текста на маленькой плитке забивали саму изометрию). Отдельного
   правила шагу 3 для этого не нужно вообще. */

/* ---------- шаг 4: запуск + необязательное фото ---------- */
.kv-cta-main { margin: 26px 0 2px; }
.kv-cta-main .kv-go { min-width: 380px; height: 66px; font-size: 22px; }


.kv-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 285px; text-align: center; padding: 30px 24px; cursor: pointer; overflow: hidden;
    border: 2px dashed #e7d8ca; border-radius: 18px;
    background: linear-gradient(180deg,#fffdfb,#fbf5ef);
    transition: border-color .2s, background .2s, transform .2s;
}
@media (hover: hover) {
    .kv-drop:hover { border-color: #f0b591; background: #fff9f5; }
}
.kv-drop.dragover { border-color: #ed6c44; background: #fdf1ea; transform: scale(1.006); }
.kv-drop.has-file { border-style: solid; border-color: #e4d8ce; padding: 0; background: #fff; }
.kv-drop input[type=file] { display: none; }
.kv-drop-icon {
    width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px;
    background: linear-gradient(140deg,#fff1e7,#ffe0cd); color: #e2701f;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 -3px 8px rgba(226,112,31,.10);
}
.kv-drop-name { font-family: roboto_medium, Roboto, Arial, sans-serif; font-size: 19px; color: #3d3831; margin-bottom: 7px; }
.kv-drop-hint { font-size: 14px; line-height: 21px; color: #a2978e; max-width: 420px; }
.kv-drop-btn {
    display: inline-block; margin-top: 16px; border: 1px solid #ed6c44; color: #d9531e;
    background: #fff; border-radius: 24px; padding: 10px 22px; font-size: 15px;
    font-family: roboto_medium, Roboto, Arial, sans-serif;
    transition: background .15s, color .15s;
}
@media (hover: hover) {
    .kv-drop:hover .kv-drop-btn { background: #ed6c44; color: #fff; }
}
.kv-preview { display: none; position: absolute; inset: 0; }
.kv-drop.has-file .kv-preview { display: block; }
.kv-drop.has-file .kv-drop-body { display: none; }
.kv-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-preview-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(30,24,20,.85), rgba(30,24,20,0));
    color: #fff; font-size: 13px; padding: 26px 14px 11px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.kv-preview-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-preview-del { color: #ffd0bd; cursor: pointer; text-decoration: underline; flex: none; }

.kv-hook {
    margin-top: 22px; display: flex; gap: 12px; align-items: flex-start;
    background: #fbf7f4; border: 1px solid #f0e7e0; border-radius: 12px;
    padding: 14px 16px; font-size: 13.5px; line-height: 21px; color: #8d837b;
}
.kv-hook svg { flex: none; color: #c7b4a4; margin-top: 2px; }
.kv-hook a { cursor: pointer; text-decoration: underline; }
.kv-hook input[type=file] { display: none; }
.kv-hook .kv-hook-file { color: #6a9a55; }

.kv-cta { margin-top: 28px; text-align: center; }
.kv-go {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 340px; height: 60px; padding: 0 34px; border: 0; cursor: pointer;
    border-radius: 34px; color: #fff; font-size: 20px;
    font-family: roboto_medium, Roboto, Arial, sans-serif;
    background: linear-gradient(135deg,#f79358 0%,#ed6c44 45%,#e04d18 100%);
    box-shadow: 0 10px 26px -8px rgba(224,77,24,.65), 0 2px 4px rgba(224,77,24,.25);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover: hover) {
    .kv-go:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px -10px rgba(224,77,24,.72); }
}
.kv-go:active { transform: translateY(0); }
.kv-go:focus { outline: none; }

/* ---------- генерация ---------- */
@keyframes kvShine { to { transform: translateX(100%); } }
.kv-progress { height: 6px; background: #f1e7e0; border-radius: 6px; overflow: hidden; margin-top: 26px; }
.kv-progress-bar {
    height: 100%; width: 0; border-radius: 6px;
    background: linear-gradient(90deg,#f79c62,#ed6c44 60%,#e2531f);
    transition: width .35s linear;
}
.kv-phrase {
    text-align: center; margin-top: 18px; font-size: 17px; color: #7d746c;
    min-height: 26px; transition: opacity .3s ease;
}

/* ---------- результат ---------- */
.kv-result { display: none; }
.kv-result-head { text-align: center; margin-bottom: 24px; }
/* вторая фраза подзаголовка — про видео-презентацию после замера. Отдельной
   строкой и в тёплой пилюле: обещание должно зацепить, но не перекричать
   сам результат, поэтому цвет приглушённый, а иконка — тонкая SVG-камера. */
.kv-teaser {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
    border: 1px solid #f6e2d6; background: linear-gradient(180deg,#fffaf6,#fdf3ec);
    border-radius: 22px; padding: 8px 16px 8px 13px;
    font-size: 14px; line-height: 20px; color: #99674c; text-align: left;
}
.kv-teaser svg { flex: none; color: #ed6c44; }
.kv-result-head .kv-title { font-size: 27px; margin-bottom: 4px; }
.kv-shot-wrap { max-width: 940px; margin: 0 auto; }
.kv-shot {
    position: relative; border-radius: 16px; overflow: hidden;
    background: #ece5e0; line-height: 0; aspect-ratio: 3 / 2;
    box-shadow: 0 4px 12px rgba(76,55,40,.14), 0 28px 54px -26px rgba(76,55,40,.7);
}
.kv-shot img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    display: block; -webkit-user-drag: none; user-select: none;
    filter: blur(5px) brightness(.96); transform: scale(1.03);
    transition: opacity .6s ease;
}
/* поверх картинки не лежит ничего: ни замка, ни нижней плашки (18.08).
   Про полное качество говорит спокойная строка ПОД кадром. */
.kv-shot-note { margin: 13px 0 0; text-align: center; font-size: 13.5px; line-height: 20px; color: #a2978e; }
/* подписей под кадром может не быть вовсе — пустой ряд не должен занимать место */
.kv-result-facts:empty { display: none; }
.kv-result-actions { text-align: center; margin-top: 20px; }
.kv-result-facts {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.kv-fact {
    font-size: 13px; color: #8d837b; background: #faf6f3; border: 1px solid #f0e7e0;
    border-radius: 18px; padding: 6px 14px;
}

/* ---------- 2s: плашка-предпросмотр и генерация внутри кадра ---------- */
.kv-shot-veil {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    background: linear-gradient(to top, rgba(35,30,27,.72), rgba(35,30,27,0));
    color: rgba(255,255,255,.94); font-size: 13.5px; line-height: 19px;
    text-align: center; pointer-events: none; padding: 34px 14px 12px;
}
.kv-genlay {
    position: absolute; inset: 0; z-index: 3; display: none;
    background: linear-gradient(180deg,#f4ece7,#eee3db);
}
.kv-genlay::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 80%);
    transform: translateX(-100%); animation: kvShine 1.6s infinite;
}
.kv-genlay-inner {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(420px, 78%); z-index: 1; line-height: normal;
}
/* генерация = временное состояние результата: кадр пуст, обвес невидим,
   но МЕСТО зарезервировано (visibility) — при появлении кухни ничего не прыгает */
.kv-result.is-gen .kv-genlay { display: block; }
.kv-result.is-gen .kv-shot img { opacity: 0; }
.kv-result.is-gen .kv-shot-veil,
.kv-result.is-gen .kv-sub,
.kv-result.is-gen .kv-shot-note,
.kv-result.is-gen .kv-result-facts,
.kv-result.is-gen .kv-result-actions { visibility: hidden; }


/* финал: Пенза + акция вместо бейджей и списка плюсов */
.kv-perks .kv-teaser { margin-top: 14px; }

/* в состоянии результата карточка добирает высоту шагов за счёт паддинга */
@media (min-width: 992px) {
    #kv.stage-result.catalog-item { padding-bottom: 39px !important; }
}

/* невалидная почта */
.kv-input.err { border-color: #e2531f; background: #fff6f3; }

@media (max-width: 767px) {
    /* подзаголовок финала на мобиле двухстрочный — резервируем высоту шапки,
       чтобы кадр стоял на одном месте на результате и финале */
    .kv-result-head { min-height: 72px; }
    .kv-shot-veil { padding: 26px 12px 10px; font-size: 12px; line-height: 17px; }
    .kv-genlay-inner { width: 82%; }
}

/* ============ модалка ============ */
.kv-modal {
    display: none; position: fixed; inset: 0; z-index: 3000;
    background: rgba(43,38,34,.6); overflow-y: auto; padding: 30px 15px;
}
.kv-modal.open { display: block; }
.kv-modal-dialog {
    max-width: 460px; margin: 40px auto; background: #fff;
    border-radius: 14px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.35);
    animation: kvStepIn .3s ease;
}
.kv-modal-header {
    background: linear-gradient(135deg,#f79358,#e2531f); padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.kv-modal-title { font-size: 17px; font-family: roboto_medium, Roboto, Arial, sans-serif; color: #fff; }
.kv-modal-close { font-size: 24px; line-height: 1; color: #fff; cursor: pointer; opacity: .85; }
@media (hover: hover) {
    .kv-modal-close:hover { opacity: 1; }
}
.kv-modal-body { padding: 26px 26px 28px; }
.kv-modal-lead { font-size: 14.5px; line-height: 22px; color: #7d746c; margin: 0 0 20px; text-align: center; }
.kv-form-group { margin-bottom: 18px; }
.kv-input {
    width: 100%; height: 46px; padding: 6px 14px;
    border: 1px solid #ece7e3; border-radius: 8px; font-size: 15px; color: #4c4743;
    background: #fdfbfa; font-family: robotoregular, Roboto, Arial, sans-serif;
    transition: border-color .15s, background .15s;
}
.kv-input:focus, .kv-input:active { border-color: #f0b591; background: #fff; outline: none; }
.kv-agree { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 18px; color: #8d837b; margin-bottom: 18px; }
.kv-agree input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; accent-color: #ed6c44; }
.kv-modal .kv-go { width: 100%; min-width: 0; height: 54px; font-size: 18px; }
.kv-personal { font-size: 11.5px; line-height: 17px; color: #a89e96; margin-top: 14px; text-align: center; }

/* ============ мобильный ============ */
@media (max-width: 767px) {
    #kv { border-radius: 12px; }
    .kv-title { font-size: 23px; }
    .kv-sub { font-size: 14.5px; line-height: 22px; }
    .kv-head { margin-bottom: 22px; }
    .kv-bar { gap: 10px; margin-bottom: 16px; }
    .kv-step-num { font-size: 12px; margin-bottom: 6px; }
    .kv-q { font-size: 20px; }
    .kv-q-sub { font-size: 13.5px; margin-bottom: 16px; }
    .kv-grid { gap: 11px; }
    .kv-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .kv-card { border-radius: 12px; aspect-ratio: 4 / 3; }
    .kv-card.sel::before { border-radius: 12px; }
    .kv-card-cap { font-size: 14.5px; padding: 10px 11px; }
    .kv-card-cap small { display: none; }
    .kv-check { width: 25px; height: 25px; top: 8px; right: 8px; }
    .kv-check svg { width: 13px; height: 13px; }
    .kv-surprise { margin-top: 12px; padding: 14px 15px; gap: 12px; border-radius: 12px; }
    .kv-spark { width: 42px; height: 42px; }
    .kv-spark svg { width: 21px; height: 21px; }
    .kv-surprise-t { font-size: 16px; }
    .kv-surprise-d { font-size: 12.5px; line-height: 17px; }
    .kv-surprise-go { display: none; }
    .kv-drop { min-height: 235px; padding: 22px 16px; border-radius: 16px; }
    .kv-drop-icon { width: 58px; height: 58px; margin: 0 auto 12px; }
    .kv-drop-icon svg { width: 28px; height: 28px; }
    .kv-drop-name { font-size: 16.5px; }
    .kv-drop-hint { font-size: 13px; line-height: 19px; }
    .kv-drop-btn { font-size: 14px; padding: 9px 18px; margin-top: 13px; }
    .kv-hook { font-size: 12.5px; line-height: 19px; padding: 12px 13px; gap: 9px; }
    .kv-go { min-width: 0; width: 100%; height: auto; min-height: 58px; font-size: 16.5px;
        padding: 12px 16px; line-height: 21px; border-radius: 16px; }
    .kv-cta { margin-top: 22px; }
    .kv-cta-main { margin: 24px 0 0; }
    .kv-cta-main .kv-go { min-width: 0; width: 100%; height: auto; min-height: 62px; font-size: 18px; }
    .kv-phrase { font-size: 15px; }
    .kv-result-head .kv-title { font-size: 20px; }
    .kv-shot-note { margin-top: 10px; font-size: 12.5px; line-height: 18px; }
    .kv-modal-dialog { margin: 10px auto; }
    .kv-modal-body { padding: 20px 18px 22px; }
}
/* ---------- мобильная фото-мозаика (шаги 1, 2 и 3) ---------- */
@media (max-width: 768px) {
    /* отрицательные поля равны боковому padding #kv на мобиле (18px) */
    .kv-step[data-step="1"] .kv-grid,
    .kv-step[data-step="2"] .kv-grid,
    .kv-step[data-step="4"] .kv-grid {
        gap: 4px; margin-left: -18px; margin-right: -18px;
    }
    .kv-step[data-step="1"] .kv-card,
    .kv-step[data-step="2"] .kv-card,
    .kv-step[data-step="4"] .kv-card {
        border-radius: 0; aspect-ratio: 5 / 4; box-shadow: none;
    }
    /* рамка и галочка выбора — внутри плитки, подскок выключен ради ровных швов */
    .kv-step[data-step="1"] .kv-card.sel,
    .kv-step[data-step="2"] .kv-card.sel,
    .kv-step[data-step="4"] .kv-card.sel { transform: none; }
    .kv-step[data-step="1"] .kv-card.sel::before,
    .kv-step[data-step="2"] .kv-card.sel::before,
    .kv-step[data-step="4"] .kv-card.sel::before { border-radius: 0; }
    .kv-step[data-step="1"] .kv-card-cap,
    .kv-step[data-step="2"] .kv-card-cap,
    .kv-step[data-step="4"] .kv-card-cap { font-size: 15.5px; }
}

/* ---------- финальный экран: заявка отправлена ---------- */
.kv-done { display: none; }
/* обещание выполнено: здесь кадр показывается без блюра */
.kv-shot-clear img { filter: none; transform: none; }
.kv-perks { margin-top: 32px; padding-top: 28px; border-top: 1px solid #f3ebe4; text-align: center; }

/* ---------- мобильный: кадр результата в край карточки ---------- */
/* отрицательные поля равны боковому padding #kv на мобиле (18px) — так же,
   как у фото-мозаики шагов 1–3 (блок 2f) */
@media (max-width: 768px) {
    .kv-shot { margin-left: -18px; margin-right: -18px; border-radius: 0; }
}
@media (max-width: 767px) {
    .kv-teaser { margin-top: 11px; font-size: 12.5px; line-height: 18px; padding: 7px 13px 7px 11px; gap: 7px; }
    .kv-perks { margin-top: 20px; padding-top: 18px; }
}

/* ---------- 2u: кнопка «Скачать» на финальном экране ---------- */
.kv-done-actions { text-align: center; margin-top: 16px; }
.kv-dl {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 44px; padding: 0 22px; cursor: pointer;
    border: 1px solid #f0c3aa; border-radius: 24px; background: #fff;
    color: #d9531e; font-family: roboto_medium, Roboto, Arial, sans-serif;
    font-size: 15.5px; line-height: 1;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.kv-dl svg { flex: none; }
.kv-dl:focus { outline: none; }
@media (hover: hover) {
    .kv-dl:hover { border-color: #d9531e; background: #fff7f3; box-shadow: 0 6px 14px -8px rgba(224,77,24,.55); }
}

/* ---------- 2u: экран лимита визуализаций ---------- */
.kv-limit { display: none; }
/* кадр-иллюстрация: тот же .kv-shot (геометрия совпадает с результатом и
   финалом), но под сильным блюром и светлой вуалью — экран про заявку, а не
   про картинку, поэтому поверх кадра ничего не лежит */
.kv-shot-soft { box-shadow: 0 3px 10px rgba(76,55,40,.10), 0 18px 38px -26px rgba(76,55,40,.55); }
.kv-shot-soft img { filter: blur(9px) saturate(.88); transform: scale(1.06); }
.kv-shot-soft::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(255,251,247,.34), rgba(255,251,247,.58));
}
/* кнопки на лимите нет строки под кадром — воздухом добираем ту же высоту
   блока, что у результата и шагов (≈904 на десктопе) */
.kv-limit .kv-result-actions { margin-top: 53px; }

/* упрощённый финал (заявка с экрана лимита): отдавать нечего, поэтому
   без «Скачать», но кадр ОСТАЁТСЯ — тот же заблюренный, что на экране лимита
   (правка владельца: пусть высота не дёргает ленту) */
.kv-done.is-plain .kv-done-actions { display: none; }
.kv-done.is-plain .kv-shot img { filter: blur(9px) saturate(.88); transform: scale(1.06); }
.kv-done.is-plain .kv-shot::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(255,251,247,.34), rgba(255,251,247,.58));
}

/* кнопка «Скачать» прибавила финалу ~60px — возвращаем их, поджав воздух
   вокруг разделителя (было 32/28) */
.kv-perks { margin-top: 18px; padding-top: 20px; }

@media (max-width: 767px) {
    .kv-done-actions { margin-top: 14px; }
    .kv-dl { display: flex; width: 100%; height: 50px; font-size: 15.5px; }
    .kv-limit .kv-result-actions { margin-top: 30px; }
    .kv-perks { margin-top: 18px; padding-top: 18px; }
}

/* ---------- 2v: подсказка формы (ответ бэкенда) ---------- */
.kv-form-note {
    margin: -4px 0 14px; padding: 10px 13px;
    border: 1px solid #f6d8ca; border-radius: 12px; background: #fff6f3;
    font-size: 13.5px; line-height: 19px; color: #b8461a; text-align: center;
}
.kv-form-note[hidden] { display: none; }

/* ---------- 2w: пример-пара «было → стало» (шаги 4 и 5) ---------- */
/* Главный аргумент обоих последних шагов: две миниатюры 4:3 со стрелкой.
   Ширину держит сама пара (flex-basis), поэтому виджет одинаково собран и на
   десктопе, и на телефоне — просто ужимается.
   ПРАВКА 19.08: пара ШАГА 4 выросла вдвое (было 440 на всю пару, стало 960 —
   по ~448 px на картинку при 1010 px контента). Мелкие миниатюры владелец не
   читал как доказательство. Укрупнение заскоплено на шаг 4: на шаге 5 такая
   пара выдавила бы дропзону фото (шаг вырастал с 640 до 832 px), а вердикт
   владельца был только про шаг 4. */
.kv-pair {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin: 0 auto 16px; max-width: 440px;
}
.kv-pair-item { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; }
.kv-pair-item img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 10px; border: 1px solid #efe6dd;
    box-shadow: 0 2px 6px rgba(76,55,40,.07);
}
.kv-pair-item figcaption { margin-top: 6px; font-size: 12px; line-height: 16px; color: #a2978e; }
.kv-pair-arrow { flex: 0 0 auto; display: flex; color: #e79a72; }
.kv-pair-arrow svg { width: 22px; height: 22px; }

/* шаг 4: пара во всю ширину контента — главный аргумент шага (правка 19.08) */
.kv-attach .kv-pair { max-width: 960px; gap: 18px; }
.kv-attach .kv-pair-item figcaption { margin-top: 7px; font-size: 13px; line-height: 17px; }
.kv-attach .kv-pair-arrow svg { width: 26px; height: 26px; }

/* ---------- 2w: шаг 4 — дропзона эскиза ---------- */
/* Дропзона та же .kv-drop, но НАМНОГО компактнее дропзоны фото: владелец
   сказал прямо — «это не настолько важно». На десктопе это тонкая полоса
   ~100 px: слева заголовок с подстрочником, справа кнопка; иконки-карандашика
   нет. Внутренний .kv-drop-body из колонки становится строкой, на мобиле
   возвращается вертикальным, но ужатым. */
.kv-attach .kv-drop {
    min-height: 100px; padding: 15px 24px; border-radius: 14px;
}
.kv-attach .kv-drop-body {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; width: 100%; text-align: left;
}
.kv-attach .kv-drop-txt { min-width: 0; }
/* базовое «.kv-drop.has-file .kv-drop-body { display: none }» слабее наших
   селекторов со скоупом по шагу — гасим тело явно, иначе оно продолжает
   занимать высоту под превью */
.kv-attach .kv-drop.has-file .kv-drop-body { display: none; }
.kv-attach .kv-drop-name { font-size: 16.5px; margin-bottom: 3px; }
.kv-attach .kv-drop-hint { font-size: 13px; line-height: 18px; max-width: none; }
.kv-attach .kv-drop-btn { flex: none; margin-top: 0; padding: 9px 20px; font-size: 14.5px; }
/* Превью эскиза — contain, а не cover: у фото помещения кроп безобиден, а
   эскиз режется так, что человек не узнаёт собственный листок. */
.kv-attach .kv-preview { background: linear-gradient(180deg,#fffdfb,#f8f1ea); }
.kv-attach .kv-preview img { object-fit: contain; }

/* Заполненная дропзона на десктопе остаётся такой же полосой, только вместо
   «заголовок + кнопка» в ней «миниатюра + имя файла + убрать». Полноширинное
   превью с тёмной плашкой поверх (как у фото помещения) в полосе 1010×100
   давало крошечную картинку посреди пустоты — при contain иначе и не выйдет.
   Высота от загрузки файла на десктопе не меняется совсем. */
@media (min-width: 768px) {
    .kv-attach .kv-drop.has-file { padding: 12px 16px; border-color: #e4d8ce; }
    .kv-attach .kv-drop.has-file .kv-preview {
        position: static; display: flex; align-items: center; gap: 16px;
        width: 100%; background: none;
    }
    .kv-attach .kv-drop.has-file .kv-preview img {
        flex: 0 0 auto; width: 130px; height: 76px;
        border-radius: 8px; border: 1px solid #efe6dd; background: #fdfaf7;
    }
    .kv-attach .kv-drop.has-file .kv-preview-bar {
        position: static; flex: 1 1 auto; min-width: 0; padding: 0;
        background: none; color: #6b625b; font-size: 14.5px;
    }
    .kv-attach .kv-drop.has-file .kv-preview-del { color: #d9531e; }
    /* PDF: миниатюры нет, подложку не рисуем — остаётся одно имя файла */
    .kv-attach .kv-drop.no-thumb .kv-preview { background: none; }
}

@media (max-width: 767px) {
    .kv-pair { gap: 9px; margin-bottom: 16px; }
    .kv-pair-item figcaption { margin-top: 5px; font-size: 11.5px; line-height: 15px; }
    .kv-pair-arrow svg { width: 18px; height: 18px; }
    /* ---- ПРАВКА 19.08 (вечер, вердикт владельца по мобиле) ----
       «Картинки пары укрупнить, НЕ увеличивая общую высоту шага». Высота была
       439 px при соседних шагах 573/577 — то есть запас по экрану есть, но
       владелец растить её запретил, поэтому каждый прибавленный пиксель
       картинки отыгран внутри самого шага.

       ШИРИНА. Пара уходит В КРАЙ карточки теми же -18 px, что фото-мозаика
       шагов 1–3 (блок 2f): контент 327 px → пара 363 px, +36 px на двоих.
       Радиус, рамка и тень у миниатюр на мобиле сняты — на срезе у края
       карточки они читаются как брак, а мозаика рядом уже без них.

       СТРЕЛКА. В потоке её лента съедала 32 px ширины (16 px svg + два
       зазора по 8). Снимаем с потока: белый кружок 24 px на шве между
       кадрами, зазор 10 px. Ширина картинки = (363 − 10) / 2 = 176.5
       вместо 147.5 — +20 % по стороне и +45 % по площади.
       Кружок висит по центру картинок, а не всей пары, поэтому снизу
       вычитается высота подписи: margin-top 5 + line-height 15 = 20 px.

       ВЫСОТА. Картинка 4:3 выросла со 110.6 до 132.4 (+22). Отыграно
       дропзоной (150 → 118, владелец просил «ниже блок загрузки») и двумя
       зазорами: пара→дропзона 24 → 18. Итог по замеру ниже прежних 439. */
    .kv-attach .kv-pair {
        position: relative; max-width: none; gap: 10px;
        margin: 0 -18px 18px;
    }
    .kv-attach .kv-pair-item img {
        border-radius: 0; border: 0; box-shadow: none;
    }
    .kv-attach .kv-pair-item figcaption { margin-top: 5px; font-size: 11.5px; line-height: 15px; }
    .kv-attach .kv-pair-arrow {
        position: absolute; left: 50%; top: 0; bottom: 20px; z-index: 2;
        transform: translateX(-50%); align-items: center;
    }
    .kv-attach .kv-pair-arrow svg {
        width: 13px; height: 13px; padding: 5px; box-sizing: content-box;
        background: #fff; border-radius: 50%; border: 1px solid #f3e2d7;
        box-shadow: 0 1px 5px rgba(76,55,40,.16);
    }
    .kv-attach .kv-drop { min-height: 118px; padding: 13px 14px; }
    .kv-attach .kv-drop-body { display: block; text-align: center; }
    .kv-attach .kv-drop-name { font-size: 15px; margin-bottom: 2px; }
    .kv-attach .kv-drop-hint { font-size: 12px; line-height: 16px; }
    .kv-attach .kv-drop-btn { margin-top: 9px; padding: 7px 17px; font-size: 13px; }
    /* с файлом дропзона становится превью — ему нужен размер, но и он ужат,
       чтобы шаг с приложенным эскизом не перерос прежние 457 px */
    .kv-attach .kv-drop.has-file { min-height: 150px; }
}

/* PDF-эскиз: миниатюры нет, но карточка занята — светлая подложка и имя файла */
.kv-drop.no-thumb .kv-preview { background: linear-gradient(180deg,#fffdfb,#f8f1ea); }
.kv-drop.no-thumb .kv-preview img { display: none; }

/* ---------- 2y: шаг 6 — пожелания ---------- */
/* Поле необязательное, поэтому оно и выглядит спокойно: серая строка-подпись,
   ряд чипов-подсказок и невысокая (3 строки) textarea. Чипы — не выбор, а
   быстрый ввод: тап дописывает слово в поле через запятую, повторный тап
   убирает его оттуда же, поэтому подсветка чипа всегда равна содержимому
   поля, а не отдельному состоянию. */
/* Блок собран карточкой — та же мягкая рамка, что у дропзон шагов 4–5.
   Без неё поле висело в пустоте посреди широкого шага и читалось случайным. */
.kv-wish {
    max-width: 680px; margin: 0 auto;
    border: 1px solid #f0e6dd; border-radius: 16px;
    background: linear-gradient(180deg,#fffdfb,#fdf8f4);
    padding: 24px 26px;
}
.kv-wish-head {
    text-align: center; font-size: 14.5px; line-height: 20px;
    color: #a2978e; margin-bottom: 12px;
}
.kv-wish-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 13px; }
.kv-wchip {
    -webkit-appearance: none; appearance: none;
    border: 1px solid #eee3da; border-radius: 999px; background: #fff;
    padding: 7px 15px; font-size: 13.5px; line-height: 18px; color: #6b625b;
    font-family: robotoregular, Roboto, Arial, sans-serif; cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.kv-wchip:focus { outline: none; }
.kv-wchip.is-on { border-color: #f0c3aa; background: #fff6f1; color: #d9531e; }
.kv-wish-input {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid #eee3da; border-radius: 12px; background: #fffdfb;
    padding: 11px 14px; font-size: 15px; line-height: 22px; color: #4c4743;
    font-family: robotoregular, Roboto, Arial, sans-serif;
    transition: border-color .2s, background .2s;
}
.kv-wish-input:focus { outline: none; border-color: #f0c3aa; background: #fff; }
.kv-wish-input::placeholder { color: #bfb3aa; }
@media (hover: hover) {
    .kv-wchip:hover { border-color: #f0c3aa; color: #d9531e; }
}

/* ---------- 2y: ровная линия высот на десктопе ---------- */
/* СТОЯЧЕЕ ПРАВИЛО КВИЗА (владелец, 19.08): на десктопе все шаги стоят в одну
   высоту — 607 px, как карточные шаги 1–3. Блок ниже приводит к этой линии
   три «нетипичных» шага. Мобайл правилом не затронут: там высоты контентные,
   и подгонять их нечем и незачем.

   ШАГИ 4 и 5 (близнецы) без правки дают 633 px, то есть +26 к линии. Сняты
   они по чуть-чуть с четырёх мест сразу, чтобы нигде не было видно, что
   элемент «сплющили»:
     • пара 960 → 940 по ширине  → кадр 336.75 → 329.25 (−7.5);
     • воздух пара→дропзона 16 → 12 (−4);
     • полоса-дропзона 100 → 88 (−12; её собственный контент занимает 70,
       запас остаётся);
     • зазор перед пилюлей 18 → 16 (−2; правило пилюли задано через #kv,
       поэтому перебиваем его тоже с #kv).
   Итог 607.75 — линия сходится.

   ШАГ 6 наоборот короче линии на 235 px: текстовое поле физически не может
   стоить столько же, сколько мозаика фото. Добираем воздухом — ровно так же,
   как это делал прежний «финальный» шаг (блок 2s добирал его дропзоной и
   отступом до кнопки). Поле остаётся ровно на 3 строки, как просил владелец;
   кнопка встаёт в самый низ шага. Если воздух покажется пустым, лечится он
   либо более высоким полем, либо контентом — но не растяжкой поля. */
@media (min-width: 769px) {
    .kv-attach .kv-pair { max-width: 940px; margin-bottom: 12px; }
    .kv-attach .kv-drop { min-height: 88px; }
    /* с приложенным файлом полоса не должна расти: миниатюра 76 px, поля по
       4 px и рамка 2 px дают ровно те же 88 (было 100, и шаг прибавлял 16) */
    .kv-attach .kv-drop.has-file { padding: 4px 16px; }
    #kv .kv-attach .kv-surprise { margin-top: 16px; }
    .kv-step[data-step="6"] .kv-sum { margin-top: 0px; margin-bottom: 20px; }
    .kv-step[data-step="6"] .kv-wish-input { min-height: 90px; }
    .kv-step[data-step="6"] .kv-cta-main { margin: 22px 0 2px; }
}

@media (max-width: 767px) {
    /* карточка уходит в край блока теми же −18 px, что фото-мозаика и
       пример-пара: без этой ширины шесть чипов в две строки не встают */
    .kv-wish {
        margin: 0 -18px; padding: 18px 14px; border-radius: 0;
        border-left: 0; border-right: 0;
    }
    .kv-wish-head { font-size: 13.5px; line-height: 19px; margin-bottom: 12px; }
    /* ряд чипов шире карточки на её же поля: подпись и поле остаются с
       отступом 14 px, а чипам этих 28 px как раз не хватало на две строки */
    /* Оставляем по 6-7 px до кромки блока: вплотную к краю чипы
       читались бы обрезанными, а 28 px полей карточки им не хватало */
    .kv-wish-chips { gap: 6px; margin: 0 -12px 12px; }
    /* 12 px и высота 36 px — читаемо и удобно пальцу; две строки держит не
       кегль, а порядок чипов (см. WISH_ORDER в билдере) */
    .kv-wchip { padding: 8px 7px; font-size: 12px; line-height: 18px; }
    /* 16px — чтобы iOS не зумил страницу при фокусе в поле */
    .kv-wish-input { font-size: 16px; line-height: 22px; padding: 12px 12px;
                     min-height: 121.5px; border-radius: 14px; }
}

/* Узкие экраны (360 и уже). Шесть подписей при кегле 12 px — это 574 px
   чистого текста, а две строки дают 660 px: поля чипа и зазоры приходится
   ужимать до предела, иначе появляется третья строка. Ужимаем именно их, а
   не кегль: читаемость важнее, и уменьшать её владелец как раз запретил. */
@media (max-width: 374px) {
    .kv-wish-chips { gap: 4px; margin-left: -14px; margin-right: -14px; }
    .kv-wchip { padding: 8px 4px; }
    .kv-wish-input { min-height: 111px; }
}

/* ---------- 2zc: резюме «Ваш выбор» — карточки-превью, только десктоп ---------- */
/* Это ИТОГ выбора, а не управление: карточки не кликаются (возврат на шаг с
   финала владельцу не нужен), поэтому они простые div'ы — указателя-руки нет,
   подсветки под мышью нет, обработчиков нет. Сверху вниз: кадр → этап →
   значение, поэтому даже «На вкус дизайнера» понятно, к чему относится.
   Кадр 152×114 — та же пропорция 4:3, что у плиток самих шагов.
   На мобиле резюме нет вообще: ни разметки в потоке, ни собранных карточек
   (см. renderSummary), ни собственного CSS. */
.kv-sum { display: none; }

@media (min-width: 768px) {
    .kv-sum { display: block; max-width: 760px; margin: 0 auto; }
    .kv-sum-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
    .kv-sum-card { width: 152px; }
    .kv-sum-ph {
        height: 114px; border-radius: 12px; overflow: hidden;
        border: 1px solid #f0e6dd; background: #f7f1ea; color: #e0854f;
        display: flex; align-items: center; justify-content: center;
    }
    .kv-sum-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* изометрия нарисована с полями и на своём фоне — её вписываем целиком */
    .kv-sum-ph.is-iso { background: #f0ebe0; }
    .kv-sum-ph.is-iso img { object-fit: contain; }
    /* «на вкус дизайнера» — мягкая заливка с искрой вместо кадра */
    .kv-sum-ph.is-any { background: linear-gradient(150deg,#fdf4ed,#f6ebe0); }
    .kv-sum-ph svg { display: block; }
    /* подпись этапа набрана мелко и вразрядку — она служебная, читается
       вторым планом, а первым остаётся само значение */
    .kv-sum-step {
        margin-top: 10px; text-align: center;
        font-family: robotoregular, Roboto, Arial, sans-serif;
        font-size: 10.5px; line-height: 13px; letter-spacing: .09em;
        text-transform: uppercase; color: #bcafa4;
    }
    /* ряд чипов уже карточки: иначе жадный перенос давал 4 + 2, а ровные
       3 + 3 читаются как единый блок и рифмуются с мобильной раскладкой */
    .kv-wish-chips { max-width: 520px; margin-left: auto; margin-right: auto; }
    .kv-sum-val {
        margin-top: 3px; text-align: center;
        font-family: roboto_medium, Roboto, Arial, sans-serif;
        font-size: 14px; line-height: 19px; color: #4c4743;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}

/* ---------- 2zd: пилюля дропзоны в состоянии «Готово — дальше» ---------- */
/* Форма и размеры те же, что у обычной пилюли, — меняются только цвета:
   иначе при появлении файла блок бы дёрнулся. Тема на странице включена
   белая (#kv.wowB.b2), от неё и переопределяем. */
#kv.wowB.b2 .kv-surprise.is-ready {
    border-color: transparent;
    background: linear-gradient(135deg,#f79358 0%,#ed6c44 45%,#e04d18 100%);
    animation: kvReadyPulse 2.5s ease-in-out infinite;
}
#kv.wowB.b2 .kv-surprise.is-ready .kv-surprise-t { color: #fff; }
#kv.wowB.b2 .kv-surprise.is-ready .kv-surprise-d { color: rgba(255,255,255,.88); }
#kv.wowB.b2 .kv-surprise.is-ready .kv-surprise-go { color: #fff; }
#kv.wowB.b2 .kv-surprise.is-ready .kv-spark {
    background: rgba(255,255,255,.24); color: #fff; box-shadow: none;
}
/* пульсирует только тень: ни размер, ни положение пилюли не меняются */
@keyframes kvReadyPulse {
    0%, 100% { box-shadow: 0 4px 14px -4px rgba(224,77,24,.45), 0 0 0 0 rgba(224,77,24,.28); }
    50%      { box-shadow: 0 10px 26px -6px rgba(224,77,24,.62), 0 0 0 11px rgba(224,77,24,0); }
}
/* уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    #kv.wowB.b2 .kv-surprise.is-ready { animation: none;
        box-shadow: 0 8px 22px -6px rgba(224,77,24,.55); }
}
@media (hover: hover) {
    #kv.wowB.b2 .kv-surprise.is-ready:hover { border-color: transparent; filter: brightness(1.05); }
}