/* Електросушарка — вітрина в одну колонку 480 px: фото, чекліст, темний блок ціни й форми.
   Основа — вёрстка нашого лендингу точилки, кольори теплі: графіт + помаранчевий. */
:root {
  --ink: #1b1f27;
  --ink-2: #262c38;
  --ink-3: #343c4b;
  --line-dark: #4b5563;
  --accent: #f97316;
  --accent-soft: #fdba74;
  --accent-bg: #fff7ed;
  --accent-line: #fed7aa;
  --muted: #4b5563;
  --ok: #21c65f;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #e5e7eb; color: var(--ink); font: 400 17px/1.45 'Nunito Sans', Arial, sans-serif; -webkit-text-size-adjust: 100%; }
.page { max-width: 480px; margin: 0 auto; background: #fff; overflow: hidden; }
.shot { display: block; width: 100%; height: auto; }
h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* верхня смуга: умови покупки */
.proof { display: grid; grid-template-columns: 1fr 1fr; min-height: 62px; background: var(--ink); color: #fff; font: 800 12px/1.2 'Nunito Sans', Arial, sans-serif; text-transform: uppercase; }
.proof__item { display: flex; flex-wrap: wrap; align-content: center; gap: 3px 7px; min-width: 0; padding: 10px 12px; border-left: 1px solid rgba(255, 255, 255, .18); }
.proof__item:first-child { border-left: 0; }
.proof__item > span { white-space: nowrap; }
.proof__item b { padding: 2px 6px; border-radius: 5px; background: var(--accent); color: var(--ink); }
.proof__item small { flex: 0 0 100%; color: #9ca3af; font-size: 9px; font-weight: 600; line-height: 1.3; text-transform: none; }

/* заголовок над першим фото */
.hero { padding: 22px 20px 16px; text-align: center; }
.hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.hero p { margin: 0; color: var(--muted); font-size: 18px; font-weight: 600; line-height: 1.35; }

/* чекліст із зеленими галочками */
.checks { margin: 0; padding: 4px 18px; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.checks li + li { border-top: 1px solid #e5e7eb; }
.checks svg { flex: 0 0 24px; width: 24px; height: 24px; fill: var(--ok); }
.checks p { margin: 0; }

/* темний блок: ціни, кнопка, форма, таймер */
.offer { padding: 26px 20px 22px; background: var(--ink); color: #fff; }
.offer__title { margin-bottom: 18px; text-align: center; }
.sale { width: max-content; margin: 0 auto 18px; padding: 6px 14px; border-radius: 999px; background: #ef4444; font-size: 20px; font-weight: 900; line-height: 1.2; }
.sale span { font-size: 14px; font-weight: 700; text-transform: uppercase; }
.prices { display: flex; justify-content: center; gap: 30px; margin-bottom: 22px; text-align: center; }
.price p { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.price s, .price b { display: block; font-size: 38px; font-weight: 800; line-height: 1; white-space: nowrap; }
.price--old s { color: #9ca3af; font-size: 30px; padding-top: 6px; }
.price--new b { color: var(--accent-soft); }

.cta { position: relative; display: block; width: 100%; margin: 0; padding: 18px 52px; border: 0; border-radius: 10px; background: var(--accent); color: var(--ink); font: 900 21px/1.15 'Nunito Sans', Arial, sans-serif; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(249, 115, 22, .35); }
.cta:active { transform: translateY(1px); }
.cta__ping { position: absolute; left: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #ffedd5; opacity: .75; animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; pointer-events: none; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.cta[disabled] { background: #9ca3af; color: #fff; cursor: wait; box-shadow: none; }
.cta[disabled] .cta__ping { display: none; }

.timer { margin: 16px 0 0; font-size: 16px; font-weight: 700; text-align: center; }
.js-timer { display: inline-block; min-width: 6.2em; margin-left: 4px; padding: 4px 8px; border-radius: 6px; background: #ef4444; font-variant-numeric: tabular-nums; line-height: 1; }

/* підписи між фото */
.feature { padding: 28px 20px 18px; text-align: center; }
.feature p { margin: 0; color: #374151; }
.feature b { color: var(--ink); white-space: nowrap; }

/* 230 Вт у порівнянні з праскою й феном */
.energy { padding: 28px 20px 26px; background: var(--accent-bg); border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line); text-align: center; }
.energy p { margin: 0 0 18px; color: #374151; }
.bars { display: grid; gap: 12px; text-align: left; }
.bar { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.bar i { display: block; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #d1d5db var(--w), transparent var(--w)); }
.bar b { min-width: 76px; text-align: right; color: #6b7280; white-space: nowrap; }
.bar--our i { background: linear-gradient(90deg, var(--accent) var(--w), #e5e7eb var(--w)); }
.bar--our b { color: var(--accent); }

.specs { padding: 28px 20px 22px; background: #f9fafb; }
.specs dl { margin: 12px 0 0; }
.specs dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #e5e7eb; }
.specs dt { color: #6b7280; }
.specs dd { margin: 0; font-weight: 700; text-align: right; }

.steps { padding: 28px 20px 12px; }
.steps ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; min-height: 34px; padding: 4px 0 18px 50px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--accent-soft); font-weight: 800; }

/* питання й відповіді */
.faq { padding: 28px 20px 20px; }
.faq h2 { margin-bottom: 14px; }
.faq details { border-bottom: 1px solid #e5e7eb; }
.faq summary { position: relative; padding: 15px 34px 15px 0; font-size: 18px; font-weight: 800; line-height: 1.3; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 11px; color: var(--accent); font-size: 26px; font-weight: 800; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 16px; color: #374151; }

/* блоки допів у стрічці: фото, заголовок, кнопка «додати» (прокручує до форми й позначає доп) */
.addon { background: var(--accent-bg); border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line); }
.addon__body { padding: 22px 20px 26px; text-align: center; }
.addon__body p { margin: 0 0 18px; color: #374151; }
.addon__body p b { color: var(--ink); white-space: nowrap; }
.addon__body p s { color: #9ca3af; white-space: nowrap; }
.addon__btn { display: inline-block; padding: 15px 28px; border-radius: 10px; background: var(--ink); color: var(--accent-soft); font: 800 17px/1.1 'Nunito Sans', Arial, sans-serif; text-transform: uppercase; text-decoration: none; }
.addon__btn:active { transform: translateY(1px); }

/* «Часто беруть разом» перед формою */
.together { padding: 26px 14px 24px; text-align: center; }
.together__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.together__grid--4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.together__note { margin: 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.tile { display: grid; align-content: start; gap: 4px; padding: 8px 6px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 2px 8px rgba(17, 24, 39, .07); }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #fff; }
.tile b { display: grid; align-content: center; min-height: 2.4em; font-size: 14px; line-height: 1.2; }
.tile span { font-size: 15px; font-weight: 800; }
.tile s { color: #9ca3af; font-size: 12px; font-weight: 600; }

/* форма */
#orderForm { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 16px; font-weight: 600; }
.field input { width: 100%; padding: 15px 12px; border: 1px solid var(--line-dark); border-radius: 10px; background-color: var(--ink-2); color: #fff; font: 600 18px/1.2 'Nunito Sans', Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.field input::placeholder { color: #6b7280; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#orderForm .cta { margin-top: 6px; }
.consent { margin: 0; color: #9ca3af; font-size: 13px; text-align: center; }
.consent a { color: #d1d5db; }

/* картки у формі: справжні radio/checkbox, стиль через :checked (працює й без JS) */
.pick { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pick legend { margin-bottom: 10px; padding: 0; font-size: 16px; font-weight: 700; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.opt__card { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; min-height: 62px; padding: 14px; border: 2px solid var(--line-dark); border-radius: 12px; background: var(--ink-2); transition: border-color .15s, background-color .15s; }
.opt input:checked + .opt__card { border-color: var(--accent); background: var(--ink-3); }
.opt input:focus-visible + .opt__card { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt__mark { position: relative; width: 22px; height: 22px; border: 2px solid #9ca3af; border-radius: 50%; }
.opt__text { display: grid; gap: 2px; min-width: 0; }
.opt__name { font-size: 17px; font-weight: 800; line-height: 1.2; }
.opt__sub { color: #9ca3af; font-size: 13px; font-weight: 600; line-height: 1.25; }
.opt__price { display: grid; justify-items: end; text-align: right; }
.opt__price b { color: var(--accent-soft); font-size: 21px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.opt__price s { color: #9ca3af; font-size: 14px; white-space: nowrap; }
.opt__img { width: 52px; height: 52px; border-radius: 8px; background: #fff; object-fit: cover; }
/* основний товар: фото замість кружечка, картка завжди обрана */
.opt--main { cursor: default; }
.opt--main .opt__card { grid-template-columns: 64px 1fr auto; }
.opt--main .opt__img { width: 64px; height: 64px; }
/* допи: фото, квадратна галочка, ціна під назвою */
.opt--addon .opt__card { grid-template-columns: 22px 52px 1fr; grid-template-areas: "mark img text" "mark img price"; row-gap: 4px; }
.opt--addon .opt__mark { grid-area: mark; border-radius: 6px; }
.opt--addon input:checked + .opt__card .opt__mark { border: 0; background: var(--accent); }
.opt--addon input:checked + .opt__card .opt__mark::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.opt--addon .opt__img { grid-area: img; }
.opt--addon .opt__text { grid-area: text; }
.opt--addon .opt__price { grid-area: price; display: flex; align-items: baseline; gap: 8px; justify-items: start; text-align: left; }
.opt--addon .opt__price b { font-size: 19px; }
.pick__note { margin: -2px 0 0; color: #9ca3af; font-size: 13px; text-align: center; }
.opt.is-flash .opt__card { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 35% { box-shadow: 0 0 0 4px rgba(249, 115, 22, .75); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-dark); font-size: 18px; font-weight: 700; }
.total b { color: var(--accent-soft); font-size: 28px; font-weight: 800; white-space: nowrap; }

.foot { padding: 26px 20px 96px; background: #f4f4f5; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
.foot p { margin: 0 0 10px; }
.foot nav { margin: 6px 0 12px; line-height: 2; }
.foot a { color: var(--ink); }
.foot__copy { color: #9ca3af; }

/* липка кнопка внизу: з'являється після першого блоку ціни, ховається біля форми */
.sticky { position: fixed; left: 50%; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 480px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); transform: translateX(-50%); }
.sticky__price { display: grid; line-height: 1.05; }
.sticky__price s { color: #9ca3af; font-size: 14px; font-weight: 600; }
.sticky__price b { color: var(--accent-soft); font-size: 24px; font-weight: 900; white-space: nowrap; }
.sticky__cta { flex: 1; padding: 14px 10px; border-radius: 10px; background: var(--accent); color: var(--ink); font-size: 18px; font-weight: 900; text-align: center; text-transform: uppercase; text-decoration: none; }

@media (max-width: 380px) {
  h2 { font-size: 23px; }
  .hero h1 { font-size: 26px; }
  .checks li { font-size: 17px; }
  .prices { gap: 18px; }
  .price s, .price b { font-size: 32px; }
  .price--old s { font-size: 26px; }
  .cta { font-size: 18px; padding-left: 46px; padding-right: 46px; }
  .opt__card { gap: 10px; padding: 12px; }
  .opt__name { font-size: 15px; }
  .opt__price b { font-size: 19px; }
  .opt--addon .opt__card { grid-template-columns: 22px 44px 1fr; }
  .opt--addon .opt__img { width: 44px; height: 44px; }
  .opt--main .opt__card { grid-template-columns: 52px 1fr auto; }
  .opt--main .opt__img { width: 52px; height: 52px; }
  .tile b { font-size: 13px; }
  .addon__btn { font-size: 16px; padding: 14px 22px; }
  .bar { grid-template-columns: 66px 1fr auto; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta__ping { animation: none; }
  .opt.is-flash .opt__card { animation: none; }
}