/* Сторінка покупки сертифіката.

   Кольори й форми зняті з основного сайту на Тільді, щоб перехід за кнопкою
   не виглядав переходом на чужий ресурс: темний #1E272D, жовтий #FFD11E,
   помаранчевий #F79B0F, кнопки-пігулки.

   Шрифт — Montserrat: фірмовий Gilroy ліцензований під Тільду, а Montserrat
   найближчий вільний родич. Якщо власник має ліцензію на Gilroy — підміна
   робиться в одному місці, у --font. */

:root{
  --dark:#1E272D; --dark-2:#26323A; --dark-3:#2E3C45;
  --yellow:#FFD11E; --orange:#F79B0F;
  --ink:#242424; --muted:#6C777D; --line:#E4E7E9; --paper:#F5F5F5;
  --ok:#12855C; --bad:#C2410C;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:20px;
}
*,*::before,*::after{box-sizing:border-box}
/* Смуга «тестова копія». Навмисно впоперек і кольором, якого більше ніде
   немає: її завдання — впасти в око, а не вписатись у макет. */
.env-label{background:repeating-linear-gradient(135deg,#B3400C,#B3400C 12px,#8F3309 12px,#8F3309 24px);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:7px 12px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;
  color:var(--ink);background:#fff;overflow-x:hidden}
/* Довгі адреси пошти й посилання не мають розпирати сторінку вбік */
p,li,dd,label,.t,.terms li{overflow-wrap:anywhere}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(30px,5.4vw,58px);font-weight:800}
h2{font-size:clamp(24px,3.6vw,40px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 38px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  background:linear-gradient(180deg,var(--yellow),var(--orange));color:#1E272D;
  box-shadow:0 10px 30px rgba(247,155,15,.35);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(247,155,15,.45)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);
  box-shadow:none}
.btn.ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn.dark{background:var(--dark);color:#fff;box-shadow:none}
.btn.wide{width:100%}

/* ---------- шапка ---------- */
.top{background:var(--dark);border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex;align-items:center;gap:18px;height:72px}
.top img{height:46px;width:auto}
.top .name{color:#fff;font-weight:800;letter-spacing:.1em;font-size:13px;
  text-transform:uppercase;line-height:1.2}
.top .name span{display:block;color:var(--muted);font-weight:500;letter-spacing:.14em;
  font-size:10px}
.top .sp{flex:1}
.top a.phone{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.top a.phone:hover{color:var(--yellow)}

/* Соцмережі в шапці. Іконки, а не підписи: у шапці мало місця, а логотипи
   Instagram і TikTok упізнаються без слів. */
.social{display:flex;gap:8px;align-items:center}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:#fff;border:1px solid rgba(255,255,255,.22);transition:.14s}
.social a:hover{color:var(--dark);background:var(--yellow);border-color:var(--yellow)}
.social svg{width:19px;height:19px}

/* ---------- сторінка товару ----------
   Це не сайт, а один екран оформлення: спершу вітрина — що можна подарувати,
   далі бланк і оплата. Усе, що клієнт уже прочитав на основному сайті,
   тут не повторюється. */
.checkout{background:var(--paper);padding:0 0 0;min-height:70vh}

/* Вітрина на темному тлі, продовженням шапки. Фото із заїзду під нею потрібне
   не «для краси»: без нього перший екран складається з самих літер і сторінка
   читається як анкета, а не як подарунок. */
.stage{position:relative;background:var(--dark);color:#fff;overflow:hidden;
  padding:52px 0 56px;margin-bottom:44px}
.stage::before{content:"";position:absolute;inset:0;
  background:url("stage.b550c349298d.jpg") center/cover no-repeat;opacity:.34}
.stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,39,45,.72) 0%,rgba(30,39,45,.92) 46%,var(--dark) 100%)}
.stage .wrap{position:relative;z-index:1}
.stage h1{font-size:clamp(28px,4.4vw,44px);margin-bottom:12px;max-width:20ch}
.stage h1 em{font-style:normal;color:var(--yellow);white-space:nowrap}
.stage h1 .gift{display:inline-block;white-space:nowrap}
.stage .lead{color:#D6DCE0;font-size:17px;margin:0 0 34px;max-width:52ch}

/* ---------- поле «своя сума» просто у вітрині ----------
   «від 500 ₴» лишало людину з питанням, де ту суму вписати. Тепер підказані
   суми й поле з олівцем стоять у самому рядку. */
.amount-box{margin-top:12px}
.sums{display:flex;flex-wrap:wrap;gap:8px}
.sums .sum{cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;
  color:#C3CBD0;background:#1E272D;border:2px solid #3A4750;border-radius:999px;
  padding:8px 14px}
.sums .sum:hover{border-color:#5A6871;color:#fff}
.sums .sum.on{background:var(--yellow);border-color:var(--yellow);color:#12181C}
.own-sum{display:flex;align-items:center;gap:8px;margin-top:10px;
  border:2px solid #3A4750;border-radius:12px;padding:0 12px;background:#1E272D;
  max-width:260px}
.own-sum .pen{color:var(--yellow);font-size:15px}
.own-sum input{flex:1;background:none;border:0;color:#fff;font:inherit;
  font-size:15px;font-weight:700;padding:11px 0;outline:none;width:100%}

/* ---------- головна кнопка ----------
   По центру, а не праворуч: збоку вона зливалася з блоком контактів, і
   здавалась його частиною. */
.cta{margin:26px 0 6px;text-align:center}
.btn.big{font-size:17px;padding:17px 40px}
/* Рядок під кнопкою називає, що саме буде оплачено. Був сірим по темному
   фото й читався ледве — власник сказав, що зливається з фоном. Тепер на
   темній підкладці, а сума жовтим: це остання перевірка перед оплатою. */
/* Окремим рядком під кнопкою, а не поруч із нею: `inline-block` у
   центрованому блоці стає в той самий рядок, що й кнопка. */
.cta-sum{display:block;width:fit-content;margin:12px auto 0;padding:8px 16px;
  border-radius:999px;background:rgba(12,16,19,.55);color:#EDF1F3;
  font-size:14px;font-weight:700}
.cta-sum b{color:var(--yellow);font-weight:800}

/* Блок «що важливо знати» стоїть на білому, і кольори тут звичайні — темні.
   Раніше вони були світлими: смуга колись жила всередині темного першого
   екрана, потім переїхала на білий, а перекриття кольору лишилось — і три
   пункти про передачу сертифіката та доплату стали білим по білому. Власник
   побачив це 30.08.2026, тобто текст був невидимий довше, ніж хтось помітив.

   Тому тут узагалі немає перекриття кольору: `.assure` уже описаний під
   світлий фон, і чим менше місць, де той самий список фарбується двічі, тим
   менше шансів повторити це ще раз. */
.assure-band{padding:30px 0 4px}

/* ---------- форма накладкою ----------
   Вибір зроблено на сторінці; тут лишається тільки те, чого ми не знаємо.
   Так у полі зору одна справа, а не вся сторінка одразу. */
body.locked{overflow:hidden}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal .backdrop{position:absolute;inset:0;background:rgba(12,16,19,.72)}
.msheet{position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;
  background:var(--paper);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.mhead{display:flex;align-items:center;gap:12px;padding:20px 22px 0}
.mttl{font-size:19px;font-weight:800}
/* Обране окремим рядком, і «Змінити» — справжня кнопка. Дрібний підпис під
   заголовком власник просто не бачив (30.08.2026), а це найчастіша дія на
   цьому екрані після «оплатити». */
.mpick{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 22px 0;padding:12px 14px;border-radius:14px;
  background:#FFFBEC;border:1px solid #F0E3B8}
.mpick .mp-what{min-width:0;flex:1 1 auto}
.mpick .k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.mpick .v{display:block;font-size:15px;font-weight:800;line-height:1.3}
.mpick .edit{flex:none;cursor:pointer;font:inherit;font-size:13px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:#fff;border:2px solid var(--ink);
  border-radius:999px;padding:9px 18px}
.mpick .edit:hover{background:var(--ink);color:#fff}
.mclose{margin-left:auto;background:none;border:0;cursor:pointer;font-size:30px;
  line-height:1;color:var(--muted);padding:0 4px}
.mclose:hover{color:var(--ink)}
.msheet .form{border:0;box-shadow:none;background:transparent;padding:16px 22px 24px}
/* Коли браузер сам прокручує до помилкового поля, підпис має лишитись
   видимим: інакше людина бачить рамку без пояснення, до чого вона. */
.msheet .field{scroll-margin-top:46px}
@media (max-width:620px){
  .modal{padding:0;align-items:flex-end}
  .msheet{width:100%;max-height:100vh;height:100%;border-radius:0}
}

/* ---------- вітрина-рядками ----------
   Рядок = група позицій: заголовок, ціни через слеш, стрілка. Варіанти
   розкриваються на дотик. Розгорнуті картки на телефоні займали три-чотири
   екрани, і людина доходила до форми гортанням, а не рішенням. */
.menu{display:flex;flex-direction:column;gap:10px}
.line{position:relative;border-radius:16px;background:#222D34;
  border:2px solid #333F47;overflow:hidden;transition:border-color .15s}
.line.picked{border-color:var(--yellow)}
.line .head{display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 18px;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit}
.line .head:hover{background:#263138}
.line .head:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.line .t{display:block;color:#fff;font-size:17px;font-weight:800;line-height:1.25}
.line .t small{display:block;color:#9BA5AB;font-size:13px;font-weight:500;
  line-height:1.4;margin-top:4px;max-width:52ch}
/* Плашка сидить кутиком картки, а не поруч із назвою: у рядку й так
   заголовок, підпис і ціна, і четвертий напис перетворював його на кашу
   (власник, 30.08.2026). Кутик не займає рядка зовсім. */
.line .flag,.line .chosen-chip{position:absolute;top:0;right:0;z-index:2;
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#12181C;background:var(--yellow);
  padding:5px 12px 6px;border-radius:0 12px 0 12px}
.line .chosen-chip{display:none}
.line.picked .chosen-chip{display:block}
/* Щоб кутик не наліз на ціну, шапка рядка з плашкою починається нижче. */
.line.has-flag .head,.line.picked .head{padding-top:26px}
.line .p{margin-left:auto;color:var(--yellow);font-size:19px;font-weight:800;
  white-space:nowrap}
.line .chev{flex:none;width:10px;height:10px;border-right:2px solid #8C979E;
  border-bottom:2px solid #8C979E;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s}
.line.open .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.line .panel{display:none;padding:0 18px 16px}
.line.open .panel{display:block}
.line .strip{display:block;height:150px;border-radius:12px;margin-bottom:14px;
  background-size:cover;background-position:center}
.line .opt{display:block;cursor:pointer;border-radius:12px;padding:12px 14px;
  border:2px solid #333F47;background:#1E272D}
.line .opt + .opt{margin-top:10px}
.line .opt input{position:absolute;opacity:0;pointer-events:none}
.line .opt:hover{border-color:#4A5860}
.line .opt:has(input:checked),
.line .opt.on{border-color:var(--yellow);background:#2A343A}
.line .o{display:flex;align-items:center;gap:12px}
.line .on{color:#fff;font-size:15px;font-weight:700;line-height:1.3}
.line .on small{display:block;color:#9BA5AB;font-size:12.5px;font-weight:500;
  margin-top:3px;line-height:1.4}
.line .op{margin-left:auto;color:var(--yellow);font-size:17px;font-weight:800;
  white-space:nowrap}
.line .mark{flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#C3CBD0;border:1.5px solid #47535B;
  border-radius:999px;padding:6px 12px}
.line .opt:has(input:checked) .mark,
.line .opt.on .mark{background:var(--yellow);color:#12181C;
  border-color:var(--yellow)}
.line .inc{display:block;margin-top:10px;columns:2;column-gap:20px}
.line .inc span{display:block;position:relative;padding-left:15px;color:#AEB8BE;
  font-size:12.5px;line-height:1.5;break-inside:avoid}
.line .inc span::before{content:"";position:absolute;left:0;top:8px;width:5px;
  height:5px;border-radius:50%;background:var(--yellow)}
@media (max-width:620px){
  .line .head{padding:14px 15px;gap:10px}
  .line .t{font-size:15.5px}
  .line .p{font-size:16px}
  .line .panel{padding:0 15px 14px}
  .line .strip{height:120px}
  .line .inc{columns:1}
  /* Кнопку не ховаємо навіть на вузькому екрані: без неї рядок виглядає як
     текст, а не як вибір, і людина не розуміє, куди тиснути. */
  .line .mark{font-size:10px;padding:5px 9px;letter-spacing:.06em}
  .line .o{flex-wrap:wrap}
  .line .op{margin-left:auto}
}

/* ---------- вітрина-плитка ----------
   Плитка і є перемикачем: радіокнопка захована, підсвічується сама картка.
   Виділена позиція («плашка» в панелі) займає весь ряд і несе фото —
   так у вітрині є головна вітринa, а не три однакові прямокутники. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tile{display:block;cursor:pointer;position:relative}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile .card{display:flex;flex-direction:column;height:100%;overflow:hidden;
  border-radius:18px;background:#222D34;border:2px solid #333F47;
  transition:border-color .14s,background .14s,transform .14s}
.tile:hover .card{transform:translateY(-2px);border-color:#4A5860}
.tile input:checked+.card{border-color:var(--yellow);background:#2A343A}
.tile input:focus-visible+.card{outline:3px solid var(--yellow);outline-offset:3px}

.tile .pic{position:relative;display:block;flex:none;height:180px;
  background:#26323A center/cover no-repeat}
.tile .flag{position:absolute;left:12px;top:12px;background:var(--yellow);
  color:var(--dark);font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px}
/* Плашка без фото: тій самій пігулці немає на чому лежати, тому вона стає
   рядком над заголовком. */
.tile .flag.flat{position:static;display:inline-block;margin-bottom:9px}
.tile .body{display:block;padding:18px 18px 0;flex:1}
.tile .ttl{display:block;color:#fff;font-size:17px;font-weight:800;line-height:1.22}
.tile .sub{display:block;color:#9BA5AB;font-size:13px;line-height:1.45;margin-top:6px}
.tile .inc{display:block;margin-top:12px}
.tile .inc span{display:block;position:relative;padding-left:16px;color:#C3CBD0;
  font-size:12.5px;line-height:1.5}
.tile .inc span::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--orange)}
.tile .foot{display:flex;align-items:center;gap:12px;padding:16px 18px 18px}
.tile .price{color:var(--yellow);font-size:21px;font-weight:800;white-space:nowrap}
.tile .mark{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8A959B;border:1.5px solid #3E4A52;border-radius:999px;
  padding:6px 13px;transition:.14s}
.tile input:checked+.card .mark{background:var(--yellow);border-color:var(--yellow);
  color:var(--dark)}

/* Виділена позиція: на весь ряд, фото на всю картку, текст поверх. */
.tile.feat{grid-column:1 / -1}
.tile.feat .card{display:grid;grid-template-columns:40% minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;min-height:200px}
/* Виділена позиція без фото: без картинки ліва колонка була б порожньою */
.tile.feat.nopic .card{display:flex;flex-direction:column}
.tile.feat .pic{grid-row:1 / span 2;width:auto;height:auto}
/* Мʼякий перехід фото в картку, щоб стик не був різаний. Раніше градієнт
   був щільним — тоді текст лежав поверх фото; тепер він поруч, і затемнювати
   знімок немає за чим. */
.tile.feat .pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(34,45,52,0) 62%,rgba(34,45,52,.75))}
.tile.feat .flag{z-index:1}
.tile.feat .body{grid-column:2;grid-row:1;padding:20px 22px 0}
.tile.feat .ttl{font-size:22px}
.tile.feat .sub{font-size:14px;max-width:46ch}
.tile.feat .inc{columns:2;column-gap:22px}
.tile.feat .foot{grid-column:2;grid-row:2;padding:16px 22px 20px}
.tile.feat .price{font-size:25px}

/* «Сертифікат на суму» — без фото й пунктиром: це не пакет, а відкрита сума. */
.tile.own{grid-column:1 / -1}
.tile.own .card{flex-direction:row;align-items:center;background:transparent;
  border-style:dashed;border-color:#3E4A52}
.tile.own input:checked+.card{background:#2A343A;border-style:solid;
  border-color:var(--yellow)}
.tile.own .body{padding:16px 20px}
.tile.own .sub{max-width:58ch}
.tile.own .foot{padding:16px 20px;margin-left:auto}
.tile.own .price{font-size:17px;color:#C3CBD0}

.cols{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;
  align-items:start}
/* Бланк у тонкій рамці. Бант і стрічки пробували — виглядало дешево,
   і головне: святковість тут має давати сам бланк, а не оздоблення навколо. */
.wrapped{position:relative;margin:0;max-width:440px;padding:8px;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 2px 4px rgba(30,39,45,.05),0 14px 40px rgba(30,39,45,.1)}

.wrapped .sample{width:100%;height:auto;border-radius:8px;display:block}

.wrapped figcaption{margin-top:9px;text-align:center;font-size:13px;
  color:var(--muted)}

.terms{list-style:none;margin:26px 0 0;padding:0}
.terms li{position:relative;padding:9px 0 9px 28px;font-size:15px;color:#3C464C;
  border-bottom:1px solid #E8EAEB}
.terms li:last-child{border-bottom:0}
.terms li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--yellow)}
.terms b{color:var(--ink)}

.buy{position:sticky;top:20px}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:0 2px 4px rgba(30,39,45,.04),0 16px 44px rgba(30,39,45,.08)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field .hint{font-weight:500;color:var(--muted)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number]{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;font-family:var(--font);font-size:16px;background:#fff;color:var(--ink)}
.field input:focus{outline:2px solid var(--yellow);outline-offset:0;border-color:transparent}

/* Що саме куплено — рядком угорі форми. Вибір зроблено вище на вітрині,
   і форма має підтверджувати його, а не змушувати гортати назад. */
.chosen{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 15px;
  background:#FFFBEB;border:1px solid #F3E3A6;border-radius:14px;flex-wrap:wrap}
.chosen .lbl{font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8A6212}
.chosen .val{font-weight:800;font-size:15px;flex:1;min-width:0}
.chosen .edit{font-size:13px;font-weight:700;color:var(--orange);text-decoration:none;
  white-space:nowrap}
.chosen .edit:hover{text-decoration:underline}

.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#4A555B;
  font-weight:500}
.agree input{margin-top:2px;width:18px;height:18px;accent-color:var(--orange);flex:none}
.fine{font-size:12.5px;color:var(--muted);margin:14px 0 0;text-align:center}
.err{background:#FDEBE4;border:1px solid #F3B79B;color:#9A3412;border-radius:12px;
  padding:11px 14px;font-size:13.5px;margin-bottom:14px}
.field .err{margin:7px 0 0;padding:8px 12px}

/* ---------- бронювання ----------
   Дата й час — не поля вводу, а плитки: людина обирає з того, що є, і не
   може вписати годину, якої не існує. Заразом видно, де вільно, а де ні. */
.book{max-width:760px;margin:0 auto 56px}
.tour-pick .card{min-height:0}

.counter{display:flex;align-items:center;gap:10px}
.counter .step{width:40px;height:40px;border-radius:12px;cursor:pointer;
  border:2px solid var(--line);background:#fff;font-size:20px;font-weight:800;
  color:var(--ink);line-height:1}
.counter .step:hover{border-color:var(--orange);color:var(--orange)}
.counter output{min-width:38px;text-align:center;font-size:20px;font-weight:800}
.counter .hint{color:var(--muted);font-size:13px;font-weight:500}

.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;
  scroll-snap-type:x proximity}
.day{flex:none;width:74px;scroll-snap-align:start;cursor:pointer;
  border:2px solid var(--line);border-radius:14px;background:#fff;padding:9px 6px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:var(--font);transition:border-color .12s,background .12s}
.day:hover:not(:disabled){border-color:#CBD2D6}
.day.on{border-color:var(--yellow);background:#FFFBEB}
.day.off{opacity:.45;cursor:not-allowed}
.day .dow{font-size:11px;color:var(--muted);text-transform:uppercase}
.day .num{font-size:20px;font-weight:800;line-height:1.1}
.day .mon{font-size:11px;color:var(--muted)}
.day .left{font-size:10.5px;color:var(--muted);margin-top:2px;text-align:center}

.hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.hour{cursor:pointer;border:2px solid var(--line);border-radius:14px;background:#fff;
  padding:11px 12px;font-family:var(--font);text-align:left;transition:.12s}
.hour:hover:not(:disabled){border-color:#CBD2D6}
.hour.on{border-color:var(--yellow);background:#FFFBEB}
.hour.off{opacity:.5;cursor:not-allowed}
.hour .t{display:block;font-size:17px;font-weight:800}
.hour .f{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.guests{display:grid;gap:12px}
.guest{border:1px solid var(--line);border-radius:14px;padding:12px;
  background:#FCFCFC}
.guest .who{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.guest .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;background:var(--paper);color:var(--muted);
  font-size:12px;font-weight:800}
.guest .fit{display:grid;gap:8px;
  grid-template-columns:1.5fr .85fr .85fr 1.15fr 1.3fr}
.guest .fit input[type=number]{text-align:center}
.guest input,.guest select{min-width:0;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;font-family:var(--font);font-size:15px;background:#fff;
  color:var(--ink)}
.guest .who input{flex:1}
.guest input:focus,.guest select:focus{outline:2px solid var(--yellow);
  border-color:transparent}

@media (max-width:560px){
  .book{margin-bottom:36px}
  .day{width:66px}
  .hours{grid-template-columns:1fr 1fr}
  /* На телефоні шість полів у рядок неможливі — розкладаємо по двоє. */
  .guest .fit{grid-template-columns:1fr 1fr}
  .guest .fit select:first-child,.guest .fit input[name^=cert]{grid-column:1 / -1}
}

/* ---------- нові блоки сторінки ---------- */

/* Кількість людей і підказані суми — плитками, а не полем вводу: людина
   обирає з готового й не мусить вигадувати число. */
.counter{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.counter .step{width:38px;height:38px;border-radius:11px;cursor:pointer;
  border:2px solid var(--line);background:#fff;font-size:19px;font-weight:800;
  color:var(--ink);line-height:1}
.counter .step:hover{border-color:var(--orange);color:var(--orange)}
.counter output{min-width:34px;text-align:center;font-size:19px;font-weight:800}
.counter .hint{color:var(--muted);font-size:12.5px;font-weight:500}

.sums{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sum{cursor:pointer;border:2px solid var(--line);background:#fff;border-radius:12px;
  padding:9px 14px;font-family:var(--font);font-size:14.5px;font-weight:700;
  color:var(--ink);transition:.12s}
.sum:hover{border-color:#CBD2D6}
.sum.on{border-color:var(--yellow);background:#FFFBEB}

textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;font-family:var(--font);font-size:16px;resize:vertical;
  background:#fff;color:var(--ink);line-height:1.5}
textarea:focus{outline:2px solid var(--yellow);border-color:transparent}
.counter-mini{margin-top:6px;font-size:12px;color:var(--muted);text-align:right}

/* Вибір «мені / одержувачу» — ті самі рядки, що й у виборі туру */
.pick{display:flex;flex-direction:column;gap:8px}
.pick.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick label{display:block;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick.two{gap:10px}
.pick .row{display:flex;align-items:center;gap:12px;border:2px solid var(--line);
  border-radius:14px;padding:12px 15px;transition:.12s;height:100%}
.pick .t{flex:1;font-weight:700;font-size:13.5px}
.pick .t small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;
  margin-top:2px}
.pick input:checked+.row{border-color:var(--yellow);background:#FFFBEB}

/* Допродаж */
.addon{display:block;cursor:pointer;margin-bottom:8px}
.addon input{position:absolute;opacity:0;pointer-events:none}
.addon .row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;transition:.12s}
.addon .t{flex:1;font-weight:600;font-size:14.5px}
.addon .t small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;
  margin-top:2px}
.addon .p{font-weight:800;font-size:15px;white-space:nowrap;color:var(--muted)}
.addon input:checked+.row{border-color:var(--yellow);background:#FFFBEB}
.addon input:checked+.row .p{color:var(--ink)}
.field.addons{border:2px dashed #D8C98A;background:#FFFDF3;border-radius:16px;
  padding:14px 16px}
.field.addons .addon .row{padding:9px 12px;font-size:13.5px}
.field.addons .addon .t{font-size:13.5px}
.field.addons .addon .t small{font-size:12px}
.addons-loud{border:2px dashed var(--line);border-radius:16px;padding:14px 16px;
  background:#FCFCFC;margin-bottom:16px}
.side-addons{margin-top:20px}

/* Гарантії */
.assure{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.assure li{position:relative;padding-left:26px;font-size:14px;color:#3C464C}
.assure li::before{content:"";position:absolute;left:3px;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--yellow)}
.assure li.muted{color:var(--muted)}
.assure li.muted::before{background:var(--line)}
.assure-box{padding-top:16px;border-top:1px solid var(--line)}
.assure-strip{margin-top:18px;padding:16px 18px;border:1px solid var(--line);
  border-radius:16px;background:#fff}

/* Відгуки */
.reviews{margin:38px 0 0;padding:22px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff}
.rev-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rate{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rate .score{font-size:30px;font-weight:800;line-height:1}
.rate .stars{color:var(--orange);font-size:17px;letter-spacing:2px}
.rate .count{color:var(--muted);font-size:13.5px}
.rev-head .btn{margin-left:auto}
.rev-list{margin-top:18px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rev{margin:0;padding:15px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper)}
.rev-stars{color:var(--orange);font-size:13px;letter-spacing:1px}
.rev blockquote{margin:8px 0 0;font-size:14px;line-height:1.5;color:#3C464C}
.rev figcaption{margin-top:9px;font-size:12.5px;color:var(--muted);font-weight:600}
.reviews.wide{margin-top:0}
.before-form{padding-top:34px}

/* Живе прев'ю імені на бланку. Розміри й позицію ставить скрипт — від
   самого зображення, а не від рамки. */
.live-name{
  position:absolute;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#111;line-height:1;
  overflow:hidden;white-space:nowrap;pointer-events:none;
}

/* Липка панель оплати. Тільки телефон: на широкому екрані форма й так видно. */
.sticky-pay{display:none}

/* ---------- плаваюча кнопка допомоги ----------
   Питання виникає не там, де ми поставили посилання, а будь-де — найчастіше
   просто перед оплатою. Тому кнопка висить постійно, але з двома правилами:
   вона мала (не закриває вміст) і зникає, поки заповнюють форму. */
.helper{position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  transition:opacity .18s,transform .18s}
.helper.is-away{opacity:0;transform:translateY(14px);pointer-events:none}

.helper-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:0;border-radius:999px;padding:13px 19px;font-family:var(--font);
  font-size:14px;font-weight:800;color:var(--dark);
  background:linear-gradient(180deg,var(--yellow),var(--orange));
  box-shadow:0 8px 26px rgba(30,39,45,.28);transition:transform .12s}
.helper-btn svg{width:20px;height:20px;flex:none}
.helper-btn:hover{transform:translateY(-2px)}
.helper.is-open .helper-btn{background:var(--dark);color:#fff}

.helper-menu{width:270px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px;box-shadow:0 18px 50px rgba(30,39,45,.22)}
.helper-head{font-size:13px;font-weight:800;margin-bottom:10px}
.helper-item{display:block;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);text-decoration:none;margin-bottom:8px;
  transition:border-color .12s,background .12s}
.helper-item:hover{border-color:var(--orange);background:#FFFBEB}
.helper-item .k{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.helper-item .v{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.helper-note{font-size:12px;color:var(--muted);line-height:1.4}

@media (max-width:560px){
  .helper{right:12px;bottom:12px}
  .helper-btn{padding:12px 16px;font-size:13.5px}
  .helper-menu{width:min(270px,calc(100vw - 24px))}
}

/* ---------- підсумок і статуси ---------- */
.result{max-width:760px;margin:0 auto}
.badge-state{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;
  border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase}
.badge-state.ok{background:#DCF3E9;color:var(--ok)}
.badge-state.bad{background:#FCE7DC;color:var(--bad)}
.badge-state.wait{background:#FBF0D5;color:#8A6212}
.sheet{border:1px solid var(--line);border-radius:var(--r);padding:26px;margin:26px 0;
  background:#fff}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0}
.sheet dt{color:var(--muted);font-size:14px}
.sheet dd{margin:0;font-weight:700}
.preview{margin:22px 0}
.preview img{max-width:400px;width:100%;height:auto;margin:0 auto;border-radius:14px;
  border:1px solid var(--line);box-shadow:0 10px 40px rgba(30,39,45,.18)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- як скористатись ---------- */
.ways{margin:22px 0 0}
.ways p{color:var(--muted);margin:0 0 14px}
.ways ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ways li{display:flex;align-items:baseline;gap:12px;padding:11px 15px;
  border:1px solid var(--line);border-radius:12px;background:#fff}
.ways li span{flex:none;width:88px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ways li a{font-weight:700;color:var(--ink);text-decoration:none}
.ways li a:hover{color:var(--orange)}

/* ---------- контакти ----------
   Не всі готові платити карткою відразу: хтось хоче спершу спитати, який тур
   брати. Без цього блока такий клієнт просто закриває сторінку. */
.contacts{background:var(--dark);color:#fff;padding:52px 0 56px;margin-top:56px}
.contacts h2{font-size:clamp(22px,3vw,32px);margin-bottom:8px}
.contacts .sub{color:#9FAAB1;max-width:56ch;margin:0 0 26px}
.contacts .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cc{display:block;padding:16px 18px;border-radius:16px;background:#26323A;
  border:1px solid #33404A;text-decoration:none;transition:.14s}
.cc:hover{border-color:var(--yellow);background:#2A343A;transform:translateY(-2px)}
.cc .k{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow)}
.cc .v{display:block;color:#fff;font-weight:700;font-size:15px;margin-top:7px}
.cc .d{display:block;color:#8A959B;font-size:12.5px;margin-top:3px}

/* ---------- підвал ---------- */
footer{background:var(--dark);color:#9FAAB1;padding:44px 0;font-size:14px}
footer a{color:#D6DCE0}
footer .row{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
footer .sp{flex:1}

/* ---------- текстові сторінки ---------- */
.doc{max-width:780px}
.doc h2{font-size:26px;margin-top:34px}
.doc li{margin-bottom:8px}

@media (max-width:1040px){
  .contacts .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .cols{grid-template-columns:1fr;gap:32px}
  /* На телефоні спершу оплата: сертифікат клієнт уже бачив на основному сайті,
     а сюди прийшов купувати. Зразок і умови лишаються нижче. */
  .buy{position:static;order:-1}
  .wrapped{margin:0 auto}
  /* Виділена плитка на планшеті вже не має місця під фото збоку — фото стає
     смугою зверху, як у звичайної плитки. */
  .tile.feat .card{display:flex;flex-direction:column}
  .tile.feat .pic{height:132px;flex:none}
  .tile.feat .inc{columns:1}
}

@media (max-width:900px){
  .sticky-pay{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
    align-items:center;gap:12px;padding:10px 14px;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -8px 26px rgba(30,39,45,.14);
    transition:transform .18s;
  }
  .sticky-pay.is-away{transform:translateY(110%)}
  .sticky-pay .s-text{flex:1;min-width:0}
  .sticky-pay .s-what{display:block;font-size:12px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-pay .s-sum{display:block;font-size:18px;font-weight:800}
  .sticky-pay .btn{padding:13px 22px;font-size:13.5px}
  /* Кнопка допомоги піднімається над панеллю оплати, щоб вони не
     накладались. Саме над панеллю: на решті сторінок її немає, і піднімати
     кнопку в порожнє місце означає з'їдати екран без причини. */
  main.checkout ~ .helper{bottom:78px}
  /* Щоб панель не накрила останнє поле форми. */
  .checkout{padding-bottom:76px}
}

@media (max-width:560px){
  .wrap{padding:0 16px}
  .pick.two{grid-template-columns:1fr}
  .sums .sum{flex:1;min-width:calc(50% - 4px)}
  .grid2{grid-template-columns:1fr}
  section{padding:44px 0}
  .form{padding:18px}
  .stage{padding:34px 0 38px;margin-bottom:26px}
  .stage .lead{font-size:15.5px;margin-bottom:24px}
  .stage::before{opacity:.3}

  /* Плитки в один стовпчик: у 360px два стовпчики дають по чотири слова в рядок. */
  .tiles{grid-template-columns:1fr;gap:12px}
  .tile.feat .pic{height:150px}
  .tile .ttl,.tile.feat .ttl{font-size:16.5px}
  .tile.feat .sub{font-size:13px}
  .tile .price,.tile.feat .price{font-size:20px}
  .tile.own .card{flex-direction:column;align-items:stretch}
  .tile.own .foot{margin-left:0;padding-top:0}

  .contacts{padding:38px 0 42px;margin-top:38px}
  .contacts .cards{grid-template-columns:1fr;gap:10px}

  .chosen{padding:11px 13px;gap:8px}
  .chosen .val{font-size:14px}

  /* Шапка: логотип менший, підпис зайвий, телефон має право стиснутись,
     щоб на 360px нічого не вилазило за край. */
  .top .wrap{height:60px;gap:10px}
  .top img{height:38px}
  .top .name{font-size:12px;letter-spacing:.06em}
  .top .name span{display:none}
  .top a.phone{font-size:14px;white-space:nowrap}
  .social a{width:34px;height:34px}
  .social svg{width:17px;height:17px}

  .btn{padding:15px 24px;font-size:14px}
  .agree{font-size:12.5px}
  .wrapped{padding:7px}

  .ways li{flex-direction:column;gap:2px;padding:10px 14px}
  .ways li span{width:auto}
  footer{padding:32px 0;font-size:13px}
  footer .row{gap:10px}
  footer .sp{flex-basis:100%;height:0}
}

@media (max-width:380px){
  .top .name{display:none}
  .top a.phone{font-size:13px}
  .stage h1{font-size:26px}
}

/* ---------- подарункова коробка ----------

   Рішення власника 24.08.2026: до покупки сертифікат не показуємо взагалі.
   На його місці коробка — на першому екрані вона просто стоїть, у формі
   наповнюється в міру заповнення полів, на сторінці подяки відкривається.

   Одна розмітка на всі три випадки, стани перемикаються класами:
   .is-open — кришка злітає, .giftbox[data-fill] — рівень наповнення. */
.giftbox{width:100%;max-width:260px;margin:0 auto}
.giftbox svg{width:100%;height:auto;overflow:visible}
/* Тінь легка: на темному першому екрані вона майже не видна, а на
   білій сторінці розпакування щільна пляма читалась як другий предмет. */
.gb-shadow{fill:rgba(0,0,0,.10)}
.gb-body{fill:var(--yellow)}
.gb-lid-box{fill:var(--orange)}
.gb-band,.gb-lid-band{fill:var(--dark)}
.gb-loop{fill:var(--yellow)}
.gb-knot{fill:var(--orange)}
.gb-sparks circle{fill:var(--yellow);opacity:0}

/* Рівень наповнення. Росте знизу, тому опорна точка — низ коробки:
   від середини вміст «розповзався» в обидва боки й читався як помилка. */
/* Наповнення видно лише тоді, коли порожня частина інша на колір: світло-
   жовте по жовтому на коробці 72 px не читалось узагалі. Тому у формі
   коробка починається сірою й золотіє знизу вгору. */
.packing .gb-body{fill:#E8E2D2}
.gb-fill{fill:var(--yellow);transform-origin:110px 182px;transform:scaleY(0);
  transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.giftbox[data-fill="1"] .gb-fill{transform:scaleY(.25)}
.giftbox[data-fill="2"] .gb-fill{transform:scaleY(.5)}
.giftbox[data-fill="3"] .gb-fill{transform:scaleY(.75)}
.giftbox[data-fill="4"] .gb-fill{transform:scaleY(1)}

/* Коробка ледь дихає: нерухома вона зливається з рештою макета, а різкий
   рух на першому екрані читається як реклама. */
.gb-lid,.gb-base{transition:transform .7s cubic-bezier(.2,.9,.3,1)}
.giftbox.idle .gb-lid{animation:gb-breathe 3.4s ease-in-out infinite}
@keyframes gb-breathe{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(-1.2deg)}
}
/* Повне наповнення — коробка коротко підстрибує: людина щойно дописала
   останнє поле, і це єдиний момент, коли рух щось означає. */
.giftbox[data-fill="4"] .gb-lid{animation:gb-hop .6s ease-out 1}
@keyframes gb-hop{
  0%{transform:translateY(0)} 40%{transform:translateY(-12px)}
  70%{transform:translateY(2px)} 100%{transform:translateY(0)}
}

/* Розпакування. Кришка йде вгору й убік, іскри спалахують. */
.giftbox.is-open .gb-lid{transform:translate(26px,-92px) rotate(18deg);
  animation:none}
.giftbox.is-open .gb-base{transform:translateY(6px)}
.giftbox.is-open .gb-sparks circle{animation:gb-spark .9s ease-out forwards}
.giftbox.is-open .gb-sparks circle:nth-child(2){animation-delay:.06s}
.giftbox.is-open .gb-sparks circle:nth-child(3){animation-delay:.12s}
.giftbox.is-open .gb-sparks circle:nth-child(4){animation-delay:.18s}
.giftbox.is-open .gb-sparks circle:nth-child(5){animation-delay:.24s}
@keyframes gb-spark{
  0%{opacity:0;transform:translateY(14px) scale(.4)}
  40%{opacity:1}
  100%{opacity:0;transform:translateY(-26px) scale(1.15)}
}

/* ---------- перший екран: коробка поруч із заголовком ---------- */
.stage .hero{display:flex;align-items:center;gap:34px}
.stage .hero .htext{flex:1 1 auto;min-width:0}
.stage .hero .giftbox{flex:0 0 190px;max-width:190px}
@media (max-width:900px){
  .stage .hero{gap:14px}
  .stage .hero .giftbox{flex:0 0 88px;max-width:88px}
}

/* ---------- коробка у формі ---------- */
.packing{display:flex;align-items:center;gap:16px;padding:14px 16px;
  border:1px dashed var(--line);border-radius:16px;margin:0 0 18px;
  background:#FCFCFD}
.packing .giftbox{flex:0 0 72px;max-width:72px;margin:0}
.packing .pk{min-width:0}
.packing .pk b{display:block;font-size:15px}
.packing .pk span{color:var(--muted);font-size:13px}

/* ---------- сторінка розпакування ---------- */
.unwrap{text-align:center;padding:8px 0 4px}
.unwrap .giftbox{max-width:300px;cursor:pointer}
.unwrap .hint{color:var(--muted);font-size:14px;margin:10px 0 0}
.reveal{opacity:0;transform:translateY(18px) scale(.96);
  transition:opacity .55s ease .25s,transform .55s cubic-bezier(.2,.8,.3,1) .25s}
.reveal.shown{opacity:1;transform:none}
.reveal[hidden]{display:none}

/* Купони на знижку — те, що лежить у коробці поруч із сертифікатом. */
.coupons{margin:26px 0;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;background:#FFFBEC}
.coupons h3{margin:0 0 6px}
.coupons p{color:var(--muted);font-size:14px;margin:0 0 14px}
.coupons .codes{display:flex;flex-wrap:wrap;gap:10px}
.coupons .code{display:inline-flex;flex-direction:column;gap:2px;
  padding:12px 18px;border-radius:14px;background:var(--dark);color:#fff;
  font-weight:800;letter-spacing:.08em}
.coupons .code small{font-weight:600;letter-spacing:0;font-size:12px;
  color:var(--yellow);text-transform:none}
.coupons .code.used{background:var(--paper);color:var(--muted)}
.coupons .code.used small{color:var(--muted)}

/* Хто вимкнув анімації в системі — той не має отримати їх тут. Коробка при
   цьому лишається робочою: кришка просто зникає без польоту. */
@media (prefers-reduced-motion:reduce){
  .gb-lid,.gb-base,.gb-fill,.reveal{transition:none}
  .giftbox.idle .gb-lid,.giftbox[data-fill="4"] .gb-lid,
  .giftbox.is-open .gb-sparks circle{animation:none}
}

/* ---------- мальовані картинки на картках товару ----------

   Силует на теплому небі — та сама мова, що на бланку сертифіката. Анімація
   йде лише в розкритому рядку: чотири рухомі банери одночасно перетворюють
   вітрину на рекламний щит. */
.art{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:32/15;
  margin:0 auto 14px;border-radius:14px;background:#F79B0F}

/* Колесо крутиться навколо власного центра, а не навколо кутка малюнка:
   `fill-box` рахує початок координат від самої фігури, і це працює навіть
   тоді, коли мотоцикл усередині повернутої та зменшеної групи. */
.wheel{transform-box:fill-box;transform-origin:center;
  animation:art-spin 1.05s linear infinite}
@keyframes art-spin{to{transform:rotate(360deg)}}

/* Пісок трясе — мотоцикл підстрибує. Рух дрібний навмисно: великий читається
   як мультик, а не як їзда. */
.art-tour .rig{animation:art-bob-tour 1.05s ease-in-out infinite}
@keyframes art-bob-tour{
  0%,100%{transform:translate(118px,72px) scale(.66)}
  50%{transform:translate(118px,69px) scale(.66)}
}
.art-kids .kid{animation:art-slalom 5s ease-in-out infinite}
@keyframes art-slalom{
  0%,100%{transform:translate(100px,87px) scale(.48) rotate(-4deg)}
  50%{transform:translate(172px,85px) scale(.48) rotate(4deg)}
}

/* Пил з-під заднього колеса. Летить назад і вгору, як і має. */
.dust circle{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:art-dust 1.5s ease-out infinite}
.dust circle:nth-child(2){animation-delay:.3s}
.dust circle:nth-child(3){animation-delay:.6s}
@keyframes art-dust{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  25%{opacity:.75}
  100%{opacity:0;transform:translate(-34px,-18px) scale(1.5)}
}

/* Абонемент: заїзди «проявляються» один за одним. Кожен свій — інша точка
   кар'єру, інший нахил, інший розмір. */
.art-pass .ride{opacity:.45;animation:art-ride 5s ease-in-out infinite}
.art-pass .r2{animation-delay:.5s}
.art-pass .r3{animation-delay:1s}
.art-pass .r4{animation-delay:1.5s}
.art-pass .r5{animation-delay:2s}
@keyframes art-ride{0%,60%,100%{opacity:.45}15%,45%{opacity:1}}
/* Обраний пакет — стільки заїздів, скільки в ньому. Зайві гаснуть зовсім:
   інакше картинка обіцяє п'ять поїздок тому, хто взяв три. */
.line[data-rides="3"] .art-pass .r4,
.line[data-rides="3"] .art-pass .r5{opacity:.06;animation:none}

.art-money .note{transform-origin:162px 74px;
  animation:art-float 3.6s ease-in-out infinite}
@keyframes art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.art-money .sparks circle{transform-box:fill-box;transform-origin:center;
  animation:art-spark 2.4s ease-in-out infinite}
.art-money .sparks circle:nth-child(2){animation-delay:.5s}
.art-money .sparks circle:nth-child(3){animation-delay:1s}
.art-money .sparks circle:nth-child(4){animation-delay:1.5s}
@keyframes art-spark{
  0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .art *{animation:none !important}
  .art-pass .ride{opacity:1}
}

/* ---------- телефон: вітрина й нижня панель ----------

   Перевірено у вузькому вікні 30.08.2026. Тут більшість трафіку, тому це не
   «підчистити наостанок», а окремий прохід. */
@media (max-width:560px){
  /* Назва рядка з ціною в один рядок не вміщались: назва переносилась на два
     рядки, і ціна стояла впритул до неї. Тепер назва займає всю ширину, а
     ціна зі стрілкою йдуть під нею. */
  .line .head{flex-wrap:wrap;gap:6px 10px;padding:14px 16px}
  .line.has-flag .head,.line.picked .head{padding-top:30px}
  .line .t{flex:1 1 100%;font-size:16px}
  .line .p{margin-left:0;font-size:17px}
  .line .chev{margin-left:auto}
  /* Кутик плашки трохи менший — на вузькому екрані він з'їдав чверть рядка. */
  .line .flag,.line .chosen-chip{font-size:9.5px;padding:4px 10px 5px}

  /* Коробка в шапці поступається текстом: заголовок важливіший за прикрасу. */
  .stage .hero .giftbox{flex:0 0 76px;max-width:76px}

  /* Кнопка допомоги стоїть вище липкої панелі оплати. Вони обидві прибиті до
     низу, і на вузькому екрані накладались краями. */
  main.checkout ~ .helper{bottom:86px}

  /* Розпакування: коробка й кнопка мають вміститись на один екран разом.
     На 300 px коробка займала пів телефона, і кнопку доводилось шукати
     гортанням — тобто рівно тоді, коли людина найбільше хоче натиснути. */
  .unwrap .giftbox{max-width:200px}
  .unwrap .btn{padding:15px 22px;font-size:13.5px}
  .coupons{padding:18px}
  .coupons .code{flex:1 1 100%;align-items:center}
}


/* Дрібна кнопка біля підпису поля — «вставити приклад». Виглядає як дія, а
   не як частина підпису, але не важить як кнопка форми: головна дія на
   цьому екрані одна, і це «оплатити». */
.field label .chip{margin-left:8px;cursor:pointer;font:inherit;font-size:12px;
  font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:4px 11px;vertical-align:1px}
.field label .chip:hover{border-color:var(--orange);background:#FFFBEB}


/* Посилання «переслати подарунок» із кнопкою копіювання. На телефоні кнопка
   стає під полем: удвох в один рядок вони лишають від адреси третину. */
.copy-row{display:flex;gap:10px;align-items:stretch}
.copy-row input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;font:inherit;background:#fff}
.copy-row .btn{flex:none;padding:12px 22px;font-size:13px;white-space:nowrap}
.copy-row .btn.ok{background:var(--ok);color:#fff}
@media (max-width:560px){
  .copy-row{flex-direction:column}
  .copy-row .btn{width:100%}
}


/* Промокод: поле з кнопкою й відповідь під ними. Відповідь кольором, а не
   лише текстом — людина дивиться на суму, і зміну треба помітити боковим
   зором. */
.promo-row{display:flex;gap:10px;align-items:stretch}
.promo-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em}
.promo-row .btn{flex:none;padding:12px 20px;font-size:12.5px}
.promo-note{margin-top:8px;font-size:13.5px;font-weight:700}
.promo-note.ok{color:var(--ok)}
.promo-note.bad{color:var(--bad)}
@media (max-width:560px){
  .promo-row{flex-direction:column}
  .promo-row .btn{width:100%}
}