:root {
  --ink: #111214;
  --navy: #14161a;
  --yellow: #ffd21f;
  --yellow-d: #f2b900;
  --red: #e5322d;
  --grey: #f2f2f0;
  --line: #e2e2de;
  --muted: #6d7078;
  --w: 600px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #e9e9e6;
  background-image: radial-gradient(#c9c9c4 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.page { max-width: var(--w); margin: 0 auto; background: #fff; box-shadow: 0 0 40px rgba(0,0,0,.12); overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }

/* header */
.head { background: var(--navy); color: #fff; text-align: center; padding: 28px 20px 24px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
h1 { font-size: clamp(28px, 8vw, 40px); font-weight: 900; line-height: 1.05; text-transform: uppercase; margin-top: 8px; letter-spacing: -.01em; }
h1 span { display: block; color: var(--yellow); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chips li { font-size: 12px; font-weight: 600; border: 1px solid #3a3d44; border-radius: 999px; padding: 7px 12px; color: #e8e8e4; }

/* hero */
.hero { position: relative; background: #fff; }
.ribbon { position: absolute; top: 0; left: 0; width: 120px; height: 120px; overflow: hidden; pointer-events: none; }
.ribbon b { position: absolute; top: 24px; left: -38px; width: 170px; text-align: center; transform: rotate(-45deg); background: var(--red); color: #fff; font-weight: 800; font-size: 15px; padding: 5px 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* price bar */
.pricebar { display: grid; grid-template-columns: 1fr 1fr; }
.pb-old, .pb-new { padding: 14px 10px 16px; text-align: center; }
.pb-old { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pb-new { background: linear-gradient(180deg, #f6a21a, var(--red)); color: #fff; }
.pricebar span { display: block; font-size: 13px; font-weight: 600; }
.pricebar s { font-size: 34px; font-weight: 800; color: #55585f; text-decoration-thickness: 3px; line-height: 1.15; }
.pricebar strong { font-size: 38px; font-weight: 900; line-height: 1.1; }
.pricebar small { font-size: 18px; font-weight: 700; }
.pricebar.sm { border-radius: 12px; overflow: hidden; margin-top: 14px; }
.pricebar.sm s { font-size: 26px; } .pricebar.sm strong { font-size: 30px; }

/* promo */
.promo { background: var(--navy); color: #fff; text-align: center; padding: 22px 18px 26px; }
.promo.dark { background: #1b1e23; }
.promo-lbl { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.timer { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.timer div { background: #23262c; border: 1px solid #353941; border-radius: 10px; min-width: 70px; padding: 8px 6px; }
.timer b { display: block; font-size: 30px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; line-height: 1.1; }
.timer span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #b8bbc2; }
.fine { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.promo .fine { color: #a5a8b0; }

/* button */
.btn {
  display: block; width: 100%; text-align: center; border: 0; cursor: pointer;
  background: var(--yellow); color: var(--ink); font: inherit; font-weight: 800; font-size: 17px; letter-spacing: .02em;
  padding: 17px 20px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 4px 0 var(--yellow-d); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-d); }
.btn:hover { background: #ffdc4a; }

/* blocks */
.block { padding: 34px 20px 36px; }
.block.grey { background: var(--grey); }
h2 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase; }
.rule { display: block; width: 64px; height: 5px; background: var(--yellow); margin: 14px 0 20px; border-radius: 2px; }
.block p { margin-top: 14px; font-size: 16px; color: #2c2e33; }
.pic { border-radius: 10px; margin: 18px 0 0; }

/* cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card { background: #fff; border-radius: 12px; padding: 16px 14px 18px; border: 1px solid var(--line); }
.card svg { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--yellow); border-radius: 10px; padding: 8px; }
.card h3 { font-size: 14px; font-weight: 800; margin: 12px 0 4px; line-height: 1.25; }
.card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }

/* uses */
.uses { list-style: none; display: grid; gap: 10px; }
.uses li { background: #fff; border-left: 5px solid var(--yellow); border-radius: 6px; padding: 12px 14px; }
.uses b { display: block; font-size: 15px; }
.uses span { font-size: 14px; color: var(--muted); }
.block.grey .pic:first-of-type { margin-top: 20px; }

/* specs */
.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs th, .specs td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 38%; color: var(--muted); font-weight: 600; }
.specs td { font-weight: 600; }

/* steps */
.steps { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; background: var(--grey); border-radius: 12px; padding: 14px; }
.steps li::before { content: counter(s); grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-weight: 900; font-size: 20px; display: grid; place-items: center; }
.steps b { font-size: 16px; }
.steps span { font-size: 14px; color: var(--muted); }

/* order form */
.order { background: linear-gradient(180deg, #1c1f24, #101114); color: #fff; padding: 32px 20px 36px; text-align: center; }
.order h2 { margin: 6px 0 4px; }
.order .timer { margin: 16px 0 0; }
form { display: grid; gap: 14px; margin-top: 22px; text-align: left; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #c8cacf; }
select, input { width: 100%; font: inherit; font-size: 16px; padding: 15px 14px; border-radius: 10px; border: 2px solid transparent; background: #fff; color: var(--ink); appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input:focus, select:focus { outline: none; border-color: var(--yellow); }
input.bad { border-color: var(--red); }
.err { min-height: 18px; color: #ff8a84; font-size: 13px; font-weight: 600; margin: -4px 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #c8cacf; }
.total b { font-size: 30px; color: var(--yellow); font-weight: 900; }
.order .fine { color: #8b8e96; text-align: center; margin-top: 0; }
.ok { margin-top: 22px; background: #11301f; border: 1px solid #1f6b3f; border-radius: 12px; padding: 18px; text-align: left; }
.ok b { display: block; font-size: 18px; margin-bottom: 4px; }
.ok span { color: #bfe9cf; font-size: 14px; }

/* conditions */
.conds { padding: 22px 20px; background: var(--grey); }
.conds ul { list-style: none; display: grid; gap: 10px; }
.conds li { font-size: 14px; color: #2c2e33; }
.conds b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

.foot { background: var(--navy); color: #9b9ea6; font-size: 12px; text-align: center; padding: 30px 20px 96px; display: grid; gap: 22px; }
.f-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #8b8e96; margin-bottom: 10px; }
.f-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pay { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; }
.pay svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pay.wm { font-size: 15px; letter-spacing: -.01em; padding: 9px 16px; }
.carrier { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; padding: 10px 16px; border-radius: 10px; color: #fff; }
.carrier i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block; }
.carrier.np { background: #da291c; }
.carrier.up { background: #ffd21f; color: #111; }
.seals { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.seals li { background: #1b1e23; border: 1px solid #2b2f36; border-radius: 12px; padding: 14px 12px; display: grid; gap: 2px; }
.seals svg { width: 32px; height: 32px; fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.seals b { color: #fff; font-size: 13px; line-height: 1.25; }
.seals span { color: #8b8e96; font-size: 11.5px; line-height: 1.35; }
.f-links { display: grid; gap: 8px; }
.foot a { color: #cfd1d6; text-underline-offset: 3px; }
.copy { color: #6d7078; }

/* документи (модальне вікно) */
html.lock { overflow: hidden; }
dialog.doc { border: 0; padding: 0; background: transparent; width: 100%; max-width: 680px; max-height: 100dvh; margin: auto; }
dialog.doc::backdrop { background: rgba(8, 9, 11, .72); backdrop-filter: blur(3px); }
.doc-box { background: #fff; color: var(--ink); display: flex; flex-direction: column; max-height: 100dvh; border-radius: 0; }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); background: var(--navy); color: #fff; }
.doc-head h2 { font-size: 18px; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.doc-x { border: 0; background: #2a2d33; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; flex: none; }
.doc-body { padding: 18px; overflow-y: auto; font-size: 14.5px; line-height: 1.6; color: #25272c; overscroll-behavior: contain; }
.doc-body .upd { color: var(--muted); font-size: 12.5px; margin-bottom: 4px; }
.doc-body h3 { font-size: 15.5px; margin: 20px 0 6px; font-weight: 800; }
.doc-body p { margin: 6px 0; }
.doc-body ul { padding-left: 20px; display: grid; gap: 5px; margin: 6px 0; }
.doc-body mark { background: #fff2b3; padding: 0 3px; border-radius: 3px; }
.doc-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: #fff; }
@media (min-width: 700px) {
  dialog.doc { max-height: 88dvh; }
  .doc-box { border-radius: 16px; overflow: hidden; max-height: 88dvh; }
}

/* sticky */
.sticky { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%); width: 100%; max-width: var(--w); background: rgba(17,18,20,.97); display: flex; align-items: center; gap: 14px; padding: 10px 16px; z-index: 50; transition: transform .25s; backdrop-filter: blur(6px); }
.sticky.show { transform: translate(-50%, 0); }
.sticky span { color: #fff; line-height: 1.1; white-space: nowrap; }
.sticky small { display: block; font-size: 11px; color: #a5a8b0; }
.sticky b { font-size: 22px; font-weight: 900; color: var(--yellow); }
.sticky .btn { padding: 13px 16px; font-size: 15px; }

@media (min-width: 640px) {
  body { padding: 24px 0; }
  .page { border-radius: 14px; }
}

/* логотипи оплати */
.logos { gap: 8px; }
.lg { background: #fff; border-radius: 10px; width: 62px; height: 44px; display: grid; place-items: center; }
.lg svg { width: 56px; height: 22px; }
.lg img { width: 46px; height: 24px; object-fit: contain; }
.lg.carrier-lg { width: 160px; height: 62px; padding: 12px 18px; }
.lg.carrier-lg img { width: 100%; height: 100%; }
/* медалі гарантій */
.medals { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.medal { display: grid; justify-items: center; align-content: start; gap: 2px; position: relative; padding-top: 2px; }
.medal svg { width: 74px; height: 74px; fill: none; stroke: #cfd1d6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: radial-gradient(circle at 50% 35%, #2a2e35, #181b20); border-radius: 50%; }
.medal.gold svg { stroke: var(--yellow); background: radial-gradient(circle at 50% 35%, #3b3210, #1b1707); }
.medal svg circle:nth-child(2) { stroke-width: 1; opacity: .6; }
.medal b { color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .02em; margin-top: 4px; }
.medal.gold b { color: var(--yellow); }
.medal span { color: #8b8e96; font-size: 10.5px; line-height: 1.3; text-align: center; }
@media (max-width: 420px) { .medals { grid-template-columns: repeat(2, 1fr); row-gap: 14px; } }

/* медалі зверху */
.topmedals { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px; }
.topmedals li { display: grid; justify-items: center; gap: 6px; }
.tm { position: relative; width: 62px; height: 62px; display: grid; place-items: center; }
.tm svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #2b2f36; stroke: #6d7078; stroke-width: 1; }
.tm::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid #6d7078; }
.tm i { position: relative; font-style: normal; font-weight: 900; font-size: 20px; color: #fff; }
.tm.gold svg { fill: var(--yellow); stroke: #b88a00; }
.tm.gold::after { border-color: #111; }
.tm.gold i { color: #111; }
.topmedals b { font-size: 11px; font-weight: 700; line-height: 1.25; color: #d9dbe0; }

/* велика печатка на фото */
.seal-big { position: absolute; right: 12px; bottom: 12px; width: 104px; height: 104px; display: grid; place-items: center; transform: rotate(-8deg); filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.seal-big svg, .g-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--yellow); stroke: #b88a00; stroke-width: 1; }
.seal-big span, .g-seal span { position: relative; text-align: center; font-size: 9.5px; font-weight: 800; line-height: 1.15; text-transform: uppercase; color: #111; letter-spacing: .02em; }
.seal-big span b, .g-seal span b { display: block; font-size: 25px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.seal-big::after, .g-seal::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed #111; opacity: .55; }

/* блок гарантії */
.guarantee { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; background: var(--navy); color: #fff; }
.g-seal { position: relative; width: 112px; height: 112px; display: grid; place-items: center; transform: rotate(-6deg); }
.g-seal span { font-size: 10.5px; } .g-seal span b { font-size: 28px; }
.guarantee h2 { font-size: 20px; margin-bottom: 10px; }
.guarantee ul { list-style: none; display: grid; gap: 7px; }
.guarantee li { position: relative; padding-left: 24px; font-size: 13.5px; color: #d6d8dd; line-height: 1.4; }
.guarantee li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--yellow); font-weight: 900; }

/* стара ціна: чітко «було», з діагональним перекреслюванням */
.pb-old { display: grid; align-content: center; justify-items: center; gap: 2px; }
.pb-old span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8a8d94; }
.oldp { position: relative; display: inline-block; font-style: normal; font-size: 32px; font-weight: 700; color: #9a9da4; line-height: 1.15; padding: 0 6px; }
.oldp small { font-size: 16px; font-weight: 700; }
.oldp::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 4px; background: var(--red); border-radius: 2px; transform: rotate(-9deg); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.pricebar.sm .oldp { font-size: 26px; }
.pb-new span { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; }

/* печатка на фото: збоку, не закриває текст */
.seal-big { left: auto; right: 6px; top: 60%; bottom: auto; width: 92px; height: 92px; }
.seal-big span { font-size: 8.5px; } .seal-big span b { font-size: 22px; }

.card svg { width: 58px; height: 58px; padding: 9px; stroke-width: 2.1; border-radius: 14px; }
.card svg text { fill: #111; stroke: none; font-weight: 800; font-family: "Montserrat", Arial, sans-serif; }
.card svg { width: 64px; height: 64px; padding: 6px; }
.card svg text { font-size: 12.5px; }

.card svg.ic { width: 60px; height: 60px; padding: 13px; fill: #111; stroke: none; background: var(--yellow); border-radius: 16px; }

.hand-tag { position: absolute; left: 6px; bottom: 0; height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px 0 7px; background: var(--yellow); color: #111; font-size: 11px; font-weight: 800; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; }
.hand-tag svg { width: 16px; height: 16px; fill: #111; }


/* прибирає залишок напису на фото */
.ing-cover { position: absolute; left: 14%; bottom: 0; width: 11%; height: 7.5%; background: #fff; }

/* відгуки */
.reviews { background: #fff; }
.rev-head { background: #2f6df6; color: #fff; text-align: center; padding: 26px 20px 22px; }
.rev-head h2 { color: #fff; }
.rev-score { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.rev-score b { font-size: 38px; font-weight: 900; line-height: 1; }
.stars { color: var(--yellow); font-size: 22px; letter-spacing: 2px; }
.rev-bar { height: 8px; max-width: 240px; margin: 12px auto 10px; background: rgba(255,255,255,.28); border-radius: 99px; overflow: hidden; }
.rev-bar i { display: block; height: 100%; background: var(--yellow); border-radius: 99px; }
.rev-sub { font-size: 12.5px; opacity: .95; line-height: 1.45; }
.rev-list { max-height: 560px; overflow-y: auto; padding: 14px 14px 6px; display: grid; gap: 18px; background: #fff; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.rev-list:focus { outline: none; }
.rev { display: grid; grid-template-columns: 38px 1fr; gap: 10px; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 16px; display: grid; place-items: center; }
.rev-bubble { background: #f0f2f5; border-radius: 16px; padding: 8px 12px 10px; display: inline-block; max-width: 100%; }
.rev-bubble b { font-size: 13px; display: block; }
.rev-bubble p { margin: 2px 0 0 !important; font-size: 14.5px !important; line-height: 1.4; color: #1c1e21 !important; }
.rev-photos { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.rev-ph { border: 0; padding: 0; background: #eee; border-radius: 12px; overflow: hidden; flex: none; width: 112px; height: 150px; cursor: zoom-in; }
.rev-ph img { width: 100%; height: 100%; object-fit: cover; }
.rev-meta { display: flex; gap: 6px; margin: 6px 0 0 4px; font-size: 12px; color: #65676b; }
.rev-hint { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0 18px !important; margin: 0 !important; }
dialog.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; margin: auto; overflow: visible; }
dialog.lb::backdrop { background: rgba(0,0,0,.85); }
dialog.lb img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; border-radius: 10px; }
.lb-x { position: absolute; top: -14px; right: -6px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }

.rev-head { background: linear-gradient(180deg, #22b04f, #178a3c); }

/* ===== українські написи поверх фото ===== */
.hero { overflow: hidden; }
.hl { position: absolute; left: 69%; width: 27.5%; height: 5.3%; display: grid; place-items: center; border-radius: 999px; font-weight: 800; font-size: clamp(8px, 2.6vw, 13px); color: #fff; background: linear-gradient(180deg, #ffb13c, #f2711c); border: 1.5px solid #ffe3b0; box-shadow: 0 2px 5px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; }
.hl1 { top: 13%; } .hl2 { top: 19.6%; } .hl3 { top: 26.3%; }
.hl-strip { position: absolute; left: 24%; right: 0; bottom: 0; height: 5.2%; background: #fff; }
.hl-strip span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: clamp(7px, 2.2vw, 11px); font-weight: 700; color: #222; white-space: nowrap; }
.hl-strip span:first-child { transform: translate(-50%, -50%); }
.loc { position: relative; margin: 18px 0 0; border-radius: 10px; overflow: hidden; line-height: 0; }
.loc img { width: 100%; height: auto; display: block; }
.ov-top { position: absolute; left: 0; right: 0; top: 0; height: 16.5%; display: grid; place-items: center; padding: 0 4%; text-align: center; line-height: 1.15; font-weight: 900; text-transform: uppercase; font-size: clamp(11px, 3.8vw, 19px); letter-spacing: .01em; color: #fff; background: linear-gradient(180deg, #0a1030 78%, rgba(10,16,48,0)); }
.ov-lab { position: absolute; height: 4.8%; display: grid; place-items: center; background: #05080c; color: #fff; font-weight: 800; font-size: clamp(8px, 2.5vw, 13px); line-height: 1; border-radius: 4px; text-transform: uppercase; letter-spacing: .02em; }

/* ===== відео-гіфки ===== */
.gifs .gif { position: relative; border-radius: 14px; overflow: hidden; margin-top: 14px; background: #000; line-height: 0; }
.gifs video { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; pointer-events: none; }
.gifs .gif span { position: absolute; left: 12px; bottom: 12px; line-height: 1.2; background: rgba(17,18,20,.82); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; backdrop-filter: blur(4px); }

/* ===== режими ===== */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.mode.wide { grid-column: 1 / -1; }
.mode .tile { width: 100%; border-radius: 10px; background-repeat: no-repeat; background-color: #000; }
.mode b { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; }
.modes + p { margin-top: 18px; }

/* ===== crop-картинки ===== */
.pic.crop { width: 100%; background-repeat: no-repeat; background-color: #111; }
.sub { font-size: 16px; font-weight: 800; margin: 22px 0 10px; text-transform: uppercase; letter-spacing: .02em; }
.chg { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 8px; font-size: 12.5px; font-weight: 700; }

/* ===== акція 2+1 ===== */
.deal-strip { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 13px 14px; border-radius: 12px; text-decoration: none; color: #111; background: repeating-linear-gradient(135deg, #ffd21f 0 14px, #ffc400 14px 28px); font-size: 14px; line-height: 1.3; text-align: left; box-shadow: 0 4px 0 #c99700; animation: dealpulse 2.2s ease-in-out infinite; }
.deal-strip svg { width: 30px; height: 30px; flex: none; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deal-strip b { font-weight: 900; text-transform: uppercase; }
@keyframes dealpulse { 50% { transform: scale(1.025); } }

fieldset.offers { border: 0; display: grid; gap: 12px; margin: 0; padding: 0; }
fieldset.offers legend { font-size: 13px; font-weight: 700; color: #c8cacf; margin-bottom: 10px; padding: 0; }
.offer { position: relative; display: block; cursor: pointer; }
.offer input { position: absolute; opacity: 0; pointer-events: none; }
.o-body { display: grid; gap: 4px; background: #1d2026; border: 2px solid #343840; border-radius: 14px; padding: 14px 16px 14px 46px; position: relative; color: #fff; transition: border-color .15s, background .15s, transform .15s; }
.o-body::before { content: ""; position: absolute; left: 14px; top: 17px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #6d7078; background: transparent; box-sizing: border-box; }
.o-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.o-main b { font-size: 17px; font-weight: 800; }
.o-main em { font-style: normal; font-size: 20px; font-weight: 900; color: var(--yellow); }
.o-sub { font-size: 12px; color: #9a9da4; }
.offer.on .o-body { border-color: var(--yellow); background: #262417; }
.offer.on .o-body::before { border-color: var(--yellow); background: radial-gradient(circle, var(--yellow) 0 45%, transparent 50%); }
.offer.best { margin-top: 10px; }
.offer.best .o-body { padding-top: 22px; border-color: #ffb800; background: linear-gradient(180deg, #2c2509, #1f1b08); box-shadow: 0 0 0 3px rgba(255,210,31,.18), 0 10px 30px rgba(255,184,0,.18); }
.offer.best .o-body::before { top: 26px; }
.offer.best .o-main b { font-size: 22px; }
.o-price { display: flex; align-items: baseline; gap: 10px; }
.o-price s { font-size: 14px; color: #8f8a73; text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.o-price em { font-style: normal; font-size: 28px; font-weight: 900; color: var(--yellow); line-height: 1; }
.o-flag { position: absolute; z-index: 2; left: 14px; top: -12px; background: var(--red); color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(229,50,45,.5); }
.o-gift { display: inline-block; justify-self: start; margin-top: 6px; background: var(--yellow); color: #111; font-weight: 900; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; text-transform: uppercase; letter-spacing: .02em; }
.o-save { font-size: 12.5px; font-weight: 700; color: #7be09c; margin-top: 2px; }
.offer.best.on .o-body { transform: scale(1.012); }

/* ===== питання й відповіді ===== */
.faq-list { display: grid; gap: 10px; }
.faq details { background: #f4f4f1; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 16px; font-weight: 700; font-size: 15px; line-height: 1.35; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #111; display: grid; place-items: center; font-weight: 900; font-size: 18px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] { background: #fff; border-color: var(--yellow); }
.faq details p { padding: 0 16px 16px; margin: 0 !important; font-size: 14.5px !important; color: #3a3d44 !important; }

.hl-title { position: absolute; left: 44%; right: 2%; top: 2.6%; height: 7.4%; display: grid; place-items: center; text-align: center; padding: 0 8px; border-radius: 10px; background: linear-gradient(180deg, #2f86f0, #1550b8); color: #fff; font-weight: 900; font-size: clamp(9px, 3vw, 15px); text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; border: 1.5px solid #bcd8ff; box-shadow: 0 2px 6px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.4); }


/* ===== ліхтар із зумом: накладки українських написів ===== */
.hero.sq { overflow: hidden; }
.logo-cover { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(180deg, #f6f6f6, #ececec); color: #151618; gap: 2px; padding: 0 4px; }
.logo-cover b { font-size: clamp(10px, 3.2vw, 17px); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.logo-cover i { font-style: normal; font-size: clamp(7px, 2.1vw, 11px); font-weight: 700; color: #c47a00; letter-spacing: .08em; text-transform: uppercase; }
.seal-r { left: auto !important; right: 8px !important; top: 58% !important; }
.ov-title { position: absolute; display: flex; align-items: center; padding-left: 3%; background: linear-gradient(90deg, rgba(8,12,28,.96) 78%, rgba(8,12,28,0)); color: #ffc61a; font-weight: 900; font-style: italic; font-size: clamp(14px, 5.6vw, 28px); text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.ov-sub { position: absolute; display: flex; align-items: center; padding-left: 2%; background: linear-gradient(90deg, rgba(8,12,28,.9) 80%, rgba(8,12,28,0)); color: #fff; font-weight: 700; font-size: clamp(10px, 3.5vw, 18px); line-height: 1; }
.ov-chip { position: absolute; display: flex; align-items: center; padding: 0 4%; border-radius: 999px; background: linear-gradient(180deg, #ffa931, #f2711c); color: #fff; font-weight: 800; font-size: clamp(8px, 2.7vw, 14px); box-shadow: 0 2px 5px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.35); white-space: nowrap; }
.ov-chip::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #fff; margin-right: .6em; flex: none; }
.ov-gray { position: absolute; display: grid; place-items: center; background: #6f6f72; color: #fff; font-weight: 800; font-size: clamp(7px, 2.2vw, 12px); border-radius: 6px; line-height: 1; white-space: nowrap; }
.ov-panel { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(180deg, #2b2b2e 82%, rgba(43,43,46,0)); color: #fff; }
.ov-panel b { font-size: clamp(14px, 6vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.ov-panel i { font-style: normal; font-weight: 700; font-size: clamp(10px, 3.6vw, 18px); color: #ffd21f; margin-top: .25em; }
.ov-panel.soft { background: linear-gradient(180deg, rgba(6,6,8,.95) 78%, rgba(6,6,8,0)); }
.ov-panel.blue { background: linear-gradient(180deg, #343a5c 82%, rgba(52,58,92,0)); align-items: flex-start; text-align: left; padding-left: 7%; }
.ov-panel.blue i { color: #dfe4ff; font-weight: 600; }
.ov-arrow { position: absolute; transform: translate(-50%, -50%) rotate(-42deg); width: 24%; padding: 1.6% 2%; background: linear-gradient(180deg, #ff7a2f, #e2490b); color: #fff; font-size: clamp(7px, 2.2vw, 12px); font-weight: 700; line-height: 1.1; text-align: center; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ov-arrow b { display: block; font-size: 1.35em; font-weight: 900; text-transform: uppercase; }
.chg.two { grid-template-columns: 1fr 1fr; }
.chg.three { grid-template-columns: repeat(3, 1fr); }
.views { margin-top: 18px; }
.views .pic { margin-top: 0; }
.ov-lab, .ov-chip, .ov-gray, .ov-title, .ov-sub { z-index: 1; }

.ov-lab.tiny { font-size: clamp(6.5px, 2vw, 11px); line-height: 1.1; padding: 0 3px; text-align: center; }
.ov-panel.soft { background: #060608; border-radius: 0; }
.ov-panel b { font-size: clamp(13px, 5vw, 26px); }
.ov-panel i { font-size: clamp(9px, 3vw, 15px); line-height: 1.15; margin-top: .3em; max-width: 90%; }
.ov-panel.soft { background: linear-gradient(180deg, #060608 90%, rgba(6,6,8,0)); }
.ov-sub { background: linear-gradient(90deg, rgba(8,12,28,.92) 94%, rgba(8,12,28,0)); }
.ov-title { background: linear-gradient(90deg, rgba(8,12,28,.96) 90%, rgba(8,12,28,0)); }


/* стрічка фото покупців */
.rev-strip { background: #f4f6f4; padding: 12px 0 10px; border-bottom: 1px solid #e3e6e3; }
.rev-strip-t { padding: 0 14px 8px; font-size: 13px; font-weight: 700; color: #3a3d44; margin: 0 !important; }
.rev-strip-t b { background: #22b04f; color: #fff; border-radius: 99px; padding: 1px 8px; margin-left: 4px; font-size: 12px; }
.rev-strip-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 4px; scroll-snap-type: x proximity; }
.rev-ph.sm { width: 92px; height: 92px; scroll-snap-align: start; border-radius: 12px; }

.mode small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 1px; line-height: 1.3; }
.block > .sub:first-of-type { margin-top: 4px; }
.modes + .sub { margin-top: 20px; }


/* ===== міні-UPS: накладки, анімація, блок «важливо» ===== */
.ov-green { position: absolute; display: grid; place-items: center; background: #b7efd0; color: #0b5a2e; border: 2px solid #0d8f4a; border-radius: 8px; font-weight: 800; font-size: clamp(8px, 2.6vw, 14px); line-height: 1; text-align: center; white-space: nowrap; }
.ov-green.wide { background: #0d8f4a; color: #fff; border-color: #0b6d39; }
.ov-white { position: absolute; display: grid; place-items: center; background: #fff; color: #111; font-weight: 900; font-style: italic; font-size: clamp(11px, 4.3vw, 24px); line-height: 1; text-transform: uppercase; text-align: center; letter-spacing: -.01em; }
.ov-white.red { color: #d3201a; font-style: normal; text-transform: none; font-weight: 800; font-size: clamp(8px, 2.6vw, 13px); }
.ov-black { position: absolute; display: grid; place-items: center; background: #050505; color: #fff; font-weight: 900; font-size: clamp(10px, 3.6vw, 20px); text-align: center; }
.ov-title2 { position: absolute; display: flex; align-items: flex-start; padding: 1% 0 0 1%; background: linear-gradient(90deg, #0f4bd6 85%, rgba(15,75,214,0)); color: #fff; font-size: clamp(14px, 6vw, 30px); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.ov-redtag { position: absolute; display: grid; place-items: center; background: #fff; color: #d3201a; border: 2px solid #d3201a; border-radius: 6px; font-weight: 800; font-size: clamp(8px, 2.6vw, 13px); }
.ov-cyan { position: absolute; display: flex; align-items: center; padding-left: 4%; background: linear-gradient(90deg, #17d8ff, #27f0a4); color: #04283a; border-radius: 99px; font-weight: 800; font-size: clamp(8px, 3vw, 15px); white-space: nowrap; }
.ov-banner { position: absolute; display: grid; place-items: center; background: #e5231b; color: #fff; font-weight: 800; font-size: clamp(7px, 2.5vw, 13px); text-align: center; padding: 0 2%; }
.ov-list { position: absolute; display: grid; align-content: space-between; color: #fff; z-index: 1; }
.ov-list i { font-style: normal; font-weight: 700; font-size: clamp(8px, 2.7vw, 14px); display: flex; align-items: center; gap: .5em; background: rgba(15,75,214,.9); border-radius: 6px; padding: 2px 6px; }
.ov-list i::before { content: "✓"; color: #3ddc84; font-weight: 900; }
.ov-bluepanel { position: absolute; display: flex; align-items: center; justify-content: flex-end; text-align: right; padding: 0 3%; background: linear-gradient(180deg, #a9c8f3, #c9ddf7); color: #0c2f66; font-weight: 700; font-size: clamp(8px, 2.7vw, 14px); line-height: 1.2; }
.ov-bluepanel b { font-size: clamp(12px, 4.8vw, 26px); font-weight: 900; text-transform: uppercase; }
.ov-bluepanel.red { background: #d3201a; color: #fff; justify-content: center; text-align: center; font-weight: 800; }
.notice { background: #fff6d6; border: 2px solid var(--yellow); border-left-width: 8px; border-radius: 12px; padding: 14px 16px; color: #3a2c00; }
.notice b { display: block; font-size: 16px; font-weight: 900; margin-bottom: 4px; text-transform: uppercase; }
.notice p { margin: 0 !important; font-size: 14.5px !important; color: #3a2c00 !important; }
.check { list-style: none; display: grid; gap: 10px; counter-reset: c; margin-bottom: 4px; }
.check li { counter-increment: c; position: relative; background: var(--grey); border-radius: 12px; padding: 12px 14px 12px 52px; }
.check li::before { content: counter(c); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-weight: 900; display: grid; place-items: center; }
.check b { display: block; font-size: 15px; }
.check span { font-size: 13.5px; color: var(--muted); }

/* анімація «як це працює» */
.gif.diag { background: #14161a; }
.dg { width: 100%; height: auto; display: block; }
.dg .dt { fill: #cfd1d6; font: 700 12px Montserrat, Arial, sans-serif; text-anchor: middle; }
.dg .cap { fill: #7be09c; font: 800 12.5px Montserrat, Arial, sans-serif; }
.dg .capB { fill: #ffd21f; }
.dg .led { fill: #3ddc84; }
.dg .wire { stroke: #3a3f48; stroke-width: 6; fill: none; stroke-linecap: round; }
.dg .flow { stroke-width: 6; fill: none; stroke-linecap: round; stroke-dasharray: 5 11; animation: flow 1s linear infinite; }
.dg .gA { stroke: #3ddc84; } .dg .gB { stroke: #ffd21f; }
.dg .pA { animation: phA 8s infinite; }
.dg .pB { animation: phB 8s infinite; }
.dg .flow.pA { animation: phA 8s infinite, flow 1s linear infinite; }
.dg .flow.pB { animation: phB 8s infinite, flow 1s linear infinite; }
.dg .wf path { animation: wifi 1.6s ease-in-out infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
@keyframes phA { 0%, 42% { opacity: 1; } 46%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes phB { 0%, 46% { opacity: 0; } 50%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes wifi { 50% { opacity: .35; } }
.gifs .gif.diag span { position: static; display: block; background: none; backdrop-filter: none; color: #9a9da4; padding: 8px 12px 12px; border-radius: 0; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; }
@media (prefers-reduced-motion: reduce) { .dg * { animation: none !important; } .dg .pB { opacity: 0 !important; } }

.ticks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.ticks li { position: relative; background: var(--grey); border-radius: 10px; padding: 10px 10px 10px 32px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.ticks li::before { content: "✓"; position: absolute; left: 11px; top: 10px; color: #178a3c; font-weight: 900; }


/* блок «подарунок» */
.giftbox { display: grid; grid-template-columns: 38% 1fr; gap: 14px; align-items: center; background: linear-gradient(135deg, #2c2509, #14161a); color: #fff; border: 2px solid var(--yellow); border-radius: 16px; padding: 12px; }
.giftbox img { width: 100%; height: auto; border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.gb-t { display: block; font-size: 15px; font-weight: 900; color: var(--yellow); text-transform: uppercase; line-height: 1.2; margin-bottom: 6px; }
.giftbox p { margin: 0 !important; font-size: 13px !important; color: #e3e5ea !important; line-height: 1.45; }
.o-main b { white-space: nowrap; }
.o-price { flex-wrap: wrap; justify-content: flex-end; gap: 0 10px; }
.o-price em { font-size: 26px; white-space: nowrap; }


/* плед: накладка на головне фото й анімація */
.ov-warm { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 3.5% 3%; background: linear-gradient(135deg, #f3eee6 78%, rgba(243,238,230,0)); color: #1c2a4a; }
.ov-warm b { font-size: clamp(15px, 6.4vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
.ov-warm i { font-style: normal; font-weight: 700; font-size: clamp(10px, 3.6vw, 17px); margin-top: .5em; padding-top: .45em; border-top: 3px solid #f2711c; display: inline-block; align-self: flex-start; }
.dg.bk .led { fill: #f2711c; animation: ledb 1.4s ease-in-out infinite; }
.dg.bk .led:nth-of-type(2) { animation-delay: .2s; } .dg.bk .led:nth-of-type(3) { animation-delay: .4s; }
.dg .gY { stroke: #ffd21f; }
.dg .blanket { fill: #6b6e76; animation: warm 6s ease-in-out infinite; }
.dg .heat path { animation: rise 6s ease-in-out infinite; transform-box: fill-box; }
.dg .heat { animation: heatb 6s ease-in-out infinite; }
@keyframes warm { 0%, 12% { fill: #6b6e76; } 55%, 85% { fill: #b4633f; } 100% { fill: #6b6e76; } }
@keyframes heatb { 0%, 18% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { 0% { transform: translateY(8px); } 100% { transform: translateY(-10px); } }
@keyframes ledb { 50% { opacity: .35; } }


/* плед: накладка на головне фото й анімація */
.dims { border-radius: 12px; overflow: hidden; margin-top: 0; }
.dims svg { width: 100%; height: auto; display: block; }
.dims .dm { font: 800 14px Montserrat, Arial, sans-serif; fill: #111; }
.ov-warm { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 3.5% 3%; background: linear-gradient(135deg, #f3eee6 78%, rgba(243,238,230,0)); color: #1c2a4a; }
.ov-warm b { font-size: clamp(15px, 6.4vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
.ov-warm i { font-style: normal; font-weight: 700; font-size: clamp(10px, 3.6vw, 17px); margin-top: .5em; padding-top: .45em; border-top: 3px solid #f2711c; display: inline-block; align-self: flex-start; }
.dg.bk .led { fill: #f2711c; animation: ledb 1.4s ease-in-out infinite; }
.dg.bk .led:nth-of-type(2) { animation-delay: .2s; } .dg.bk .led:nth-of-type(3) { animation-delay: .4s; }
.dg .gY { stroke: #ffd21f; }
.dg .blanket { fill: #6b6e76; animation: warm 6s ease-in-out infinite; }
.dg .heat path { animation: rise 6s ease-in-out infinite; transform-box: fill-box; }
.dg .heat { animation: heatb 6s ease-in-out infinite; }
@keyframes warm { 0%, 12% { fill: #6b6e76; } 55%, 85% { fill: #b4633f; } 100% { fill: #6b6e76; } }
@keyframes heatb { 0%, 18% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { 0% { transform: translateY(8px); } 100% { transform: translateY(-10px); } }
@keyframes ledb { 50% { opacity: .35; } }


/* плед: накладка на головне фото й анімація */
.dims { border-radius: 12px; overflow: hidden; margin-top: 0; }
.dims svg { width: 100%; height: auto; display: block; }
.dims .dm { font: 800 14px Montserrat, Arial, sans-serif; fill: #111; }
.ov-warm { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 3.5% 3%; background: linear-gradient(135deg, #f3eee6 78%, rgba(243,238,230,0)); color: #1c2a4a; }
.ov-warm b { font-size: clamp(15px, 6.4vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
.ov-warm i { font-style: normal; font-weight: 700; font-size: clamp(10px, 3.6vw, 17px); margin-top: .5em; padding-top: .45em; border-top: 3px solid #f2711c; display: inline-block; align-self: flex-start; }
.dg.bk .led { fill: #f2711c; animation: ledb 1.4s ease-in-out infinite; }
.dg.bk .led:nth-of-type(2) { animation-delay: .2s; } .dg.bk .led:nth-of-type(3) { animation-delay: .4s; }
.dg .gY { stroke: #ffd21f; }
.dg .blanket { fill: #6b6e76; animation: warm 6s ease-in-out infinite; }
.dg .heat path { animation: rise 6s ease-in-out infinite; transform-box: fill-box; }
.dg .heat { animation: heatb 6s ease-in-out infinite; }
@keyframes warm { 0%, 12% { fill: #6b6e76; } 55%, 85% { fill: #b4633f; } 100% { fill: #6b6e76; } }
@keyframes heatb { 0%, 18% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { 0% { transform: translateY(8px); } 100% { transform: translateY(-10px); } }
@keyframes ledb { 50% { opacity: .35; } }


/* плед: накладка на головне фото й анімація */
.dims { border-radius: 12px; overflow: hidden; margin-top: 0; }
.dims svg { width: 100%; height: auto; display: block; }
.dims .dm { font: 800 14px Montserrat, Arial, sans-serif; fill: #111; }
.ov-warm { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 3.5% 3%; background: linear-gradient(135deg, #f3eee6 78%, rgba(243,238,230,0)); color: #1c2a4a; }
.ov-warm b { font-size: clamp(15px, 6.4vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
.ov-warm i { font-style: normal; font-weight: 700; font-size: clamp(10px, 3.6vw, 17px); margin-top: .5em; padding-top: .45em; border-top: 3px solid #f2711c; display: inline-block; align-self: flex-start; }
.dg.bk .led { fill: #f2711c; animation: ledb 1.4s ease-in-out infinite; }
.dg.bk .led:nth-of-type(2) { animation-delay: .2s; } .dg.bk .led:nth-of-type(3) { animation-delay: .4s; }
.dg .gY { stroke: #ffd21f; }
.dg .blanket { fill: #6b6e76; animation: warm 6s ease-in-out infinite; }
.dg .heat path { animation: rise 6s ease-in-out infinite; transform-box: fill-box; }
.dg .heat { animation: heatb 6s ease-in-out infinite; }
@keyframes warm { 0%, 12% { fill: #6b6e76; } 55%, 85% { fill: #b4633f; } 100% { fill: #6b6e76; } }
@keyframes heatb { 0%, 18% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { 0% { transform: translateY(8px); } 100% { transform: translateY(-10px); } }
@keyframes ledb { 50% { opacity: .35; } }


/* плед: накладка на головне фото й анімація */
.dims { border-radius: 12px; overflow: hidden; margin-top: 0; }
.dims svg { width: 100%; height: auto; display: block; }
.dims .dm { font: 800 14px Montserrat, Arial, sans-serif; fill: #111; }
.ov-warm { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 3.5% 3%; background: linear-gradient(135deg, #f3eee6 78%, rgba(243,238,230,0)); color: #1c2a4a; }
.ov-warm b { font-size: clamp(15px, 6.4vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
.ov-warm i { font-style: normal; font-weight: 700; font-size: clamp(10px, 3.6vw, 17px); margin-top: .5em; padding-top: .45em; border-top: 3px solid #f2711c; display: inline-block; align-self: flex-start; }
.dg.bk .led { fill: #f2711c; animation: ledb 1.4s ease-in-out infinite; }
.dg.bk .led:nth-of-type(2) { animation-delay: .2s; } .dg.bk .led:nth-of-type(3) { animation-delay: .4s; }
.dg .gY { stroke: #ffd21f; }
.dg .blanket { fill: #6b6e76; animation: warm 6s ease-in-out infinite; }
.dg .heat path { animation: rise 6s ease-in-out infinite; transform-box: fill-box; }
.dg .heat { animation: heatb 6s ease-in-out infinite; }
@keyframes warm { 0%, 12% { fill: #6b6e76; } 55%, 85% { fill: #b4633f; } 100% { fill: #6b6e76; } }
@keyframes heatb { 0%, 18% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise { 0% { transform: translateY(8px); } 100% { transform: translateY(-10px); } }
@keyframes ledb { 50% { opacity: .35; } }







/* === sync:css:start === */
.block.more { background: #fff; }
.mgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mcard { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; background: var(--grey); border: 1px solid var(--line); border-radius: 14px; padding: 10px; text-decoration: none; color: var(--ink); }
.mcard img { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; background: #fff; }
.mc-b { display: grid; gap: 3px; }
.mc-b b { font-size: 15px; line-height: 1.2; }
.mc-b small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.mc-p { display: flex; align-items: baseline; gap: 8px; }
.mc-p s { font-size: 12px; color: #8a8d94; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.mc-p em { font-style: normal; font-size: 18px; font-weight: 900; }
.mc-go { justify-self: start; margin-top: 4px; font-size: 12px; font-weight: 800; background: var(--ink); color: var(--yellow); padding: 6px 12px; border-radius: 99px; }
.block.more h2 { margin-bottom: 0; }
.block.more .rule { margin-bottom: 16px; }

/* сторінка «Дякуємо» */
.thx { text-align: center; padding: 34px 20px 10px; }
.thx .tick { width: 72px; height: 72px; border-radius: 50%; background: #178a3c; display: grid; place-items: center; margin: 0 auto 14px; }
.thx .tick svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.thx h1 { font-size: 26px; text-transform: uppercase; }
.thx h1 span { display: inline; color: inherit; }
.thx p { color: #3a3d44; margin-top: 8px; }
.tsum { margin: 18px 20px 0; background: var(--grey); border-radius: 14px; padding: 6px 16px; }
.tsum div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tsum div:last-child { border-bottom: 0; }
.tsum span { color: var(--muted); } .tsum b { text-align: right; }
.tup { padding: 30px 20px 36px; }
.tup h2 { font-size: 22px; }
.tup .sub-t { color: var(--muted); font-size: 14px; margin: 8px 0 16px; }
.tcard { display: grid; grid-template-columns: 112px 1fr; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 12px; }
.tcard img { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; }
.tc-b { display: grid; gap: 4px; align-content: start; }
.tc-b b { font-size: 15px; line-height: 1.2; } .tc-b small { font-size: 12px; color: var(--muted); }
.btn.sm { padding: 10px 12px; font-size: 13px; margin-top: 4px; box-shadow: 0 3px 0 var(--yellow-d); }
.btn.sm.done { background: #178a3c; color: #fff; box-shadow: none; }
.tc-link { font-size: 12px; color: var(--muted); text-align: center; }
.tnote { margin: 0 20px; background: #e7f6ec; border: 1px solid #b9e3c7; color: #14532d; border-radius: 12px; padding: 12px 14px; font-size: 14px; }

/* десктоп: фон і картка по центру */
:root { --bgimg: url(img/p3.webp); }
@media (min-width: 900px) {
  body { background: #0c0d10; background-image: none; padding: 0; min-height: 100vh; position: relative; }
  body::before { content: ""; position: fixed; inset: -60px; z-index: -2; background: var(--bgimg) center / cover no-repeat; filter: blur(46px) brightness(.5) saturate(1.3); transform: scale(1.1); }
  body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 0, rgba(255,210,31,.14), transparent 60%), linear-gradient(180deg, rgba(8,9,11,.35), rgba(8,9,11,.7)); }
  .page { margin: 32px auto; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
  .sticky { display: flex; max-width: 600px; border-radius: 14px 14px 0 0; }
  .sticky.show { transform: translate(-50%, 0); }
}
/* швидкий скрол: не рендеримо секції поза екраном */
.page > section.block, .page > section.reviews, .page > section.order { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.page > section.order { contain-intrinsic-size: auto 900px; }
img[width][height] { height: auto; }

/* UX: тап-зони, дрібний текст */
.foot .f-links { display: grid; gap: 0; justify-items: center; }
.foot .f-links a { display: block; padding: 12px 16px; line-height: 18px; min-height: 42px; }
.foot .copy { padding-bottom: 4px; }
.timer span { font-size: 11.5px; }
.kicker { font-size: 12.5px; }
.hl { font-size: clamp(10.5px, 3vw, 13px); }
.hl-title { font-size: clamp(10.5px, 3.1vw, 15px); }
.sticky small { font-size: 12px; }
/* === sync:css:end === */