/* ТІЛЬКИ МОБІЛЬНА ВЕРСІЯ: верстаємо під телефон 360–430 px. На комп'ютері сторінка показується
   колонкою шириною з телефон (--w) — окремого десктопного макета немає й не буде.
   СКЕЛЕТ. Усі тексти в [дужках] і сірі рамки-заглушки — місця під контент від замовника.
   Цифри (об'єм, навантаження, ціни) не вигадувати — тільки з підтвердженої специфікації. */
:root{
  --bg:#eef1f4; --paper:#fff; --line:#dde2e8;
  --ink:#1b2129; --muted:#6a7482;
  --accent:#1f6fd1; --accent-dark:#1757a6;
  --price:#d0342c;
  --ph:#f3f5f8; --ph-line:#b9c2cd;
  --w:480px;
  --bar:70px;   /* висота липкого бару; перший екран = висота телефона мінус бар */
  --hero-font:Montserrat,system-ui,sans-serif;
  --body:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* з 03.11.2026 увесь текст — Montserrat (замовник: «всюди цей шрифт») */
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;
     -webkit-font-smoothing:antialiased;padding-bottom:76px}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input,select{font:inherit}
.page{max-width:var(--w);margin:0 auto;background:var(--paper);overflow:hidden}
.block{padding:32px 18px;border-top:1px solid var(--line)}
/* Заголовки блоків — Montserrat 800, як на креативах (замовник, 03.11.2026, за зразком Gilroy зі старих креативів: Gilroy платний, Montserrat — найближчий безкоштовний з кирилицею). */
.block h2{font-family:var(--hero-font);font-weight:800;font-size:28px;line-height:1.05;margin:0 0 8px;text-align:center;text-transform:uppercase}
/* Підзаголовок — тонкий рядок під великим заголовком, як «для перенесення з боків» у «Зручних ручках» (замовник, 03.11.2026: «ці шрифти на всі блоки») */
.block .sub{color:var(--ink);font-family:var(--hero-font);font-weight:300;font-size:19px;line-height:1.2;text-align:center;margin:0 0 18px}
/* Світлий фон «Льон» для блоків без креативу на весь блок — варіант А з docs/light-bg-variants.html (замовник, 03.11.2026: креативи — чорний мармур
   і коричневий дуб, а для решти блоків чорне не підходить товару). Сусідні блоки чергують .ln1 (слонова кістка) і .ln2 (світлий пісок).
   Об'єм поки CSS: м'яке світло з верхнього кута й легка тінь під темним блоком згори; справжні деталі — з GPT за промтами §20 (ще не згенеровані).
   До того «Для чого», «Переваги» й «Оберіть кількість» були на темному мармурі (../images/marble-v1.webp, marble-75-v1.webp, градієнт bg-variants Д) — файли лишились у photos/. */
.ln1,.ln2,.ln3,.ln4{--ink:#2b2420;--muted:#7a6a5c;--ph:rgba(255,255,255,.6);--ph-line:#d6c7b3;--line:rgba(120,90,60,.14);--card:rgba(255,255,255,.82);--cardline:rgba(120,90,60,.12);--shadow:rgba(110,80,50,.10);
         color:var(--ink);border-top:0;box-shadow:inset 0 12px 16px -14px rgba(60,40,20,.35)}
/* з 10.11.2026 — фони з фотографій замовника (оригінали photos/src/foto-2026-11-10/f1..f3).
   Рельєф «штукатурка з заокругленими прямокутниками» (relief1/relief2-top/bot-v1) прибрано: замовник — «іграшкове, пластмасове».
   Основа всіх світлих блоків — стіна з f2: з фото знято лише зерно (грубу нерівність освітлення прибрано grainextract),
   зерно віддзеркалено 2×2, тож плитка 400×400 стикується без шва й лягає на блок будь-якої висоти; колір — та сама слонова кістка #f5ede6.
   Поверх стіни в деяких блоках — смуга зверху з плавним зникненням (альфа в самому файлі, як у hero-tail):
   .ln2 — м'яке денне світло з f1 (кімната розмита так, що предметів не впізнати, лишилось світло й тепло);
   .ln3 — прозорі площини з f3 (макро кута контейнера: матеріал, а не предмет).
   До того: CSS-градієнти «Льон» (#f6f1e9 / #ece2d4), ще раніше фото-фони з деревом і рослинами (прибрані 04.11.2026, «не той настрій»). */
/* Кожен світлий блок — фото замовника на весь блок (cover), а не плитка зі смугою:
   перший варіант (wall-v1 / light-top-v1 / planes-top-v1, затухання до фонового кольору) замовник забракував — «фонів не видно».
   Фото лише висвітлені під темний текст (eq brightness/contrast + теплий зсув), без розмиття там, де воно не потрібне.
   .ln1 стіна (f2) — картка ціни, відео, доставка · .ln2 прозорі площини (f3) — відгуки (там найбільше вільного фону: рамка лише 270 px по центру)
   · .ln3 сонячна кімната (f1, boxblur=3) — переваги · .ln4 кімната з ящиками (f5) — замовлення.
   Під .ln3 і .ln4 текст лягає на біле серпанкове покриття — без нього заголовок губиться на фото. */
.ln1{background:url(../images/bg-wall-v2.webp) 50% 50%/cover no-repeat,#f1ebe3}
.ln2{background:url(../images/bg-planes-v2.webp) 50% 22%/cover no-repeat,#f1ebe3}
.ln3{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16)),url(../images/bg-light-v2.webp) 50% 50%/cover no-repeat,#f1ebe3}
/* .ln4 — фото f5 смугою зверху блоку (не cover: у замовленні фон закритий картками й формою,
   cover показував випадковий шматок). Градієнт зводить фото в колір блоку, тож різкої межі немає. */
.ln4{background:linear-gradient(180deg,rgba(255,255,255,.50) 0,rgba(255,255,255,.64) 44%,#f1ebe3 76%),url(../images/bg-room-v2.webp) 50% 0/100% auto no-repeat,#f1ebe3}
/* прозорі фігури з пластику (§24б, вирізані з photos/src/gen-2026-11/vol-24b-2.webp) — заходять за межу блоку, звідси глибина; не на тексті, не клікаються */
.acc{position:absolute;z-index:3;pointer-events:none;height:auto;filter:drop-shadow(0 10px 14px rgba(80,55,30,.16))}
.has-acc{position:relative}
/* Фото-фони з GPT за промтами §20 (замовник, 03.11.2026; оригінали photos/src/gen-2026-11/bg-20a/b/v.webp, 1024×1536).
   Щоб фон підходив блокам будь-якої висоти, з кожного фото вирізано лише деталі — верх (тінь листя / жалюзі) і низ (дубова полиця, льон з евкаліптом),
   з плавним зникненням у бік середини; середина — суцільний колір стіни, знятий з фото. Шматки — на всю ширину блоку.
   .bgA — тінь гілки праворуч угорі + дубова полиця (20а); .bgB — тінь листя ліворуч угорі + дуб і складений льон з евкаліптом праворуч (20б); .bgV — лише м'яка тінь жалюзі вгорі (20в).
   Нижній відступ у .bgA/.bgB — висота дуба (11,2% / 15,7% ширини) + 22 px, щоб картки й кнопки не закривали полицю. */
/* .bgA (дубова полиця, тінь гілки) і .bgB (дуб, льон з евкаліптом) прибрано 04.11.2026 — замовник: «дерев'яні вставки й тканина з рослинами — не той настрій». Файли bg20a/bg20b лишились у photos/. */
.bgV{background:url(../images/bg20v-top-v1.webp) 50% 0/100% auto no-repeat,#eee6df}
/* відео — без заголовка, лише рамка з відео (замовник, 04.11.2026) */
.vidb{padding-top:24px;padding-bottom:24px}
.vidb video.loop{display:block;width:100%;height:auto;border-radius:12px}

/* заглушка під картинку: замінюється на <img src="photos/…"> */
.ph{background:var(--ph);border:2px dashed var(--ph-line);border-radius:12px;color:var(--muted);
    display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;padding:12px}
.ph.sq{aspect-ratio:1/1}.ph.wide{aspect-ratio:4/3}.ph.tall{aspect-ratio:4/5}

/* Кнопки (10.11.2026, замовник): скрізь сині, об'ємні — градієнт, нижній борт,
   тінь і відблиск згори; на натиск кнопка «вдавлюється». */
.btn{position:relative;overflow:hidden;display:block;width:100%;border:0;border-radius:999px;
     background:linear-gradient(180deg,#3a8ae8,var(--accent));color:#fff;
     font-weight:700;font-size:18px;padding:16px 20px;cursor:pointer;text-align:center;text-decoration:none;
     box-shadow:0 4px 0 var(--accent-dark),0 12px 22px -8px rgba(31,111,209,.55),inset 0 1px 0 rgba(255,255,255,.35);
     transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(3px);
            box-shadow:0 1px 0 var(--accent-dark),0 6px 12px -6px rgba(31,111,209,.5),inset 0 1px 0 rgba(255,255,255,.25)}
/* Блик: раз на 4,5 с пробігає зліва направо. Рухаємо transform, а не left —
   інакше кожен кадр тягне перерахунок розкладки й прокрутка підвисає. */
.btn::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:22%;pointer-events:none;
            background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
            transform:translateX(-220%) skewX(-18deg);animation:btnSweep 4.5s ease-in-out infinite}
@keyframes btnSweep{
  0%,62%{transform:translateX(-220%) skewX(-18deg)}
  100%  {transform:translateX(560%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.btn::after{animation:none;opacity:0}}

/* рядок під великими кнопками */
.warr{margin:10px 0 0;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted)}
.pcard .warr{color:rgba(255,255,255,.74)}

/* ── 1. герой: темний мармур і дубова стільниця (../images/hero-marble-v2.webp, 1024×1536: фото §15а + кружечок зі збільшеним колесом праворуч унизу за промтом §15ж, 02.11.2026; без кружечка — hero-marble-v1, воно лишилось у картці «1 контейнер»;
   попереднє фото в кімнаті — hero-room-v1.webp, лишається в теці) ──
   Фото на всю ширину, притиснуте донизу (ящик ніколи не обрізається з боків). Простір над ним — колір верхнього краю фото
   (#23211e, середнє по верхніх 20 рядках), верх фото плавно розчиняється в нього (mask).
   Інфо-плашки лежать зверху на стіні: заголовок → ряд плашок; «Нова Пошта» і «Прозорий» — у нижніх кутах.
   З 03.11.2026 на сторінці hero-marble-v3 = hero-marble-v1, зменшене до 90% з полями по боках і зверху (замовник: відступ, щоб ящик не був близько до країв).
   Верх кришки на v3 — на ≈42% висоти, низ коліс — на ≈84% — плашки мають закінчуватися вище, нижні плашки лягають на стільницю. */
/* з 04.11.2026 перший екран — готовий креатив на всю ширину у своїй пропорції 3:4, без підгонки під висоту екрана й без HTML-плашок */
.hero.hero4{height:auto;min-height:0;background:#1d1b19}
.hero.hero4 img{display:block;width:100%;height:auto}
.hero{position:relative;overflow:hidden;container-type:inline-size;
      height:calc(100svh - var(--bar) - env(safe-area-inset-bottom));min-height:540px;
      background:#23211e;font-family:var(--hero-font)}
.hero .room{position:absolute;left:0;bottom:0;width:100%;height:auto;
            -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
.hero .info{position:relative;z-index:1}
/* білий і помаранчевий — як на старих креативах замовника */
.hero h1{margin:5.5cqw 0 0;text-align:center;color:#fff;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.5);
         font-size:11.2cqw;line-height:1.02;font-weight:800;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:#ef7d1a}
/* як «Зручні ручки» (03.11.2026): «КОНТЕЙНЕР» великим 800, «для зберігання» тонким 300 */
.hero h1{text-transform:uppercase}
.hero h1 em{display:block;margin-top:1.6cqw;font-size:.72em;font-weight:300;text-transform:none}

.hero .badges{display:flex;align-items:center;justify-content:space-between;gap:2.2cqw;margin:5cqw 4.5cqw 0}
.hero .vol{flex:none;background:#ef7d1a;color:#fff;border-radius:3.5cqw;
           padding:2.4cqw 3.6cqw 2.8cqw;text-align:center;box-shadow:0 1.5cqw 4cqw rgba(160,70,0,.25)}
.hero .vol b{display:block;font-size:14cqw;line-height:.9;font-weight:800}
.hero .vol span{font-size:4.3cqw;font-weight:700}
.hero .pill{background:#17834a;color:#fff;border-radius:999px;
            display:flex;align-items:center;gap:2.2cqw;padding:1.6cqw 2.6cqw 1.6cqw 1.6cqw;
            font-size:3.4cqw;line-height:1.1;font-weight:700;box-shadow:0 1.5cqw 4cqw rgba(0,70,30,.25)}
.hero .pill i{flex:none;width:7.5cqw;height:7.5cqw;border-radius:50%;background:#fff;display:grid;place-items:center}
.hero .pill svg{width:4.6cqw;height:4.6cqw}
.hero .dims{flex:none;background:rgba(255,255,255,.88);border-radius:3cqw;
            padding:2cqw 2.6cqw;color:#1d2a3a;font-size:3.3cqw;line-height:1.35;font-weight:600;
            box-shadow:0 1cqw 3cqw rgba(20,40,70,.12)}
.hero .dims small{display:block;font-size:2.9cqw;font-weight:700;line-height:1.15;margin-bottom:1cqw;
                  padding-bottom:1cqw;border-bottom:1px solid #d4dbe4;text-align:center}

/* Нижні кути банера: ліворуч «Нова Пошта / Укрпошта», праворуч «Прозорий». 03.11.2026 замовник повернув hero-marble-v1 без кружечка з колесом
   (hero-marble-v2 лишилось у photos/) і плашку «Прозорий» на старе місце. */
/* Червона на прохання замовника (30.10.2026). */
.hero .ship{position:absolute;left:4.5cqw;bottom:2.5cqw;z-index:2;background:#e1241b;color:#fff;border-radius:999px;
            display:flex;align-items:center;gap:2.4cqw;padding:1.8cqw 5cqw 1.8cqw 1.8cqw;line-height:1.1;
            box-shadow:0 1.5cqw 4cqw rgba(10,30,70,.3)}
.hero .ship i{flex:none;width:9cqw;height:9cqw;border-radius:50%;background:#fff;display:grid;place-items:center}
.hero .ship svg{width:5.8cqw;height:5.8cqw}
.hero .ship small{display:block;font-size:3.2cqw;font-weight:600;opacity:.92}
.hero .ship b{display:block;font-size:4.3cqw;font-weight:800;letter-spacing:.01em}
.hero .color{position:absolute;right:4.5cqw;bottom:3.6cqw;z-index:2;display:flex;align-items:center;gap:1.8cqw;background:#fff;
             border-radius:999px;padding:1.4cqw 3.6cqw 1.4cqw 1.4cqw;font-size:4.2cqw;font-weight:700;color:#1d2a3a;
             box-shadow:0 1cqw 3cqw rgba(20,40,70,.15)}
.hero .color i{width:6cqw;height:6cqw;border-radius:50%;border:1px solid #9fb2c8;
               background:repeating-conic-gradient(#e6eef8 0 25%,#fff 0 50%) 0 0/2.4cqw 2.4cqw}

/* ── 2. картка ціни — з 04.11.2026 у стилі першого креативу, але окремою карткою (замовник: «оформити в стилі хед-креативу, щоб не було прямим продовженням»):
   темна заокруглена картка на мармурі (marble-v1, притемнений) з тінню, відступ від країв і світлий фон блоку навколо — тому не зливається з креативом над нею.
   Помаранчевий тонкий розріджений підпис і великий білий шрифт — як «прозорий / ЯЩИК» на креативі. Попередній вигляд — docs/blocks-removed-2026-11-03.html ── */
/* 10.11.2026 (замовник: «щоб плавно переходило в блок з ціною»): видимої межі між
   креативом і карткою ціни більше немає. Верх блоку підхоплює колір стільниці
   з фото (#7c4621 — середнє нижніх рядків hero-v4.jpg) і за ~180 px розчиняється
   в льоні; внутрішню тінь зверху прибрано — саме вона й малювала лінію стику. */
.pcard{padding:18px 14px 26px;box-shadow:none}
.pcard::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1200/260;pointer-events:none;
  background:url(../images/hero-tail-v1.webp) 50% 0/100% 100% no-repeat}
.pcard .pc{position:relative;overflow:hidden;border-radius:22px;padding:24px 20px 22px;text-align:center;color:#fff;
           background:linear-gradient(180deg,rgba(22,19,17,.45),rgba(22,19,17,.82)),#1d1b19 url(../images/marble-v1.webp) 50% 35%/cover no-repeat;
           box-shadow:0 18px 38px rgba(45,28,12,.32),0 3px 8px rgba(45,28,12,.18),inset 0 1px 0 rgba(255,255,255,.14)}
.pcard .lbl{font:400 13px/1.3 var(--hero-font);letter-spacing:.12em;color:#f0a35e;white-space:nowrap}
.pcard .now{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:6px 0 14px;color:#fff;font:800 54px/1 var(--hero-font)}
.pcard .now .old{color:rgba(255,255,255,.5);font-size:22px;font-weight:500;text-decoration-thickness:2px}
/* «Беріть більше — платіть менше»: тонкі лінії згори й знизу замість кольорової плашки, ярлик знижки помаранчевий */
.pcard .pair{margin:0 0 18px;padding:12px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.pcard .pair .pt{display:block;font:700 min(14px,calc((100vw - 76px) / 20.5))/1.25 var(--hero-font);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pcard .pair .pd{display:inline-block;margin-top:8px;background:linear-gradient(180deg,#f59a45,#e2711a);color:#fff;border-radius:999px;padding:4px 14px;font:800 14px/1.3 var(--hero-font);
                 box-shadow:0 4px 10px rgba(239,125,26,.35),inset 0 1px 0 rgba(255,255,255,.35)}
/* Залишок на складі (10.11.2026, замовник; замінив рядок «Беріть більше — платіть
   менше» з ярликом знижки — стара розмітка лишилась у CSS вище). Число править
   руками в розмітці; воно ненадовго пригасає, щоб його помітили. */
.pcard .stock{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
              font:700 15px/1.3 var(--hero-font);letter-spacing:.02em}
.stockn{display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 9px;border-radius:9px;
        background:#fff;color:#14223a;font:800 20px/1 var(--hero-font);
        box-shadow:0 4px 10px rgba(0,0,0,.32),inset 0 -2px 3px rgba(0,0,0,.12);
        animation:stockFade 3.2s ease-in-out infinite}
@keyframes stockFade{0%,72%,100%{opacity:1} 86%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.stockn{animation:none}}
/* три умови — в один ряд, як значки на креативі */
.pcard .ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcard .ticks li{display:grid;justify-items:center;gap:6px;font-size:12.5px;line-height:1.25;color:rgba(255,255,255,.88)}
.pcard .ticks li::before{content:"✓";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:15px;
                         background:radial-gradient(circle at 32% 28%,#ffb46a,#ef7d1a 55%,#b9550c);box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 -2px 4px rgba(0,0,0,.2)}
/* 10.11.2026: кнопка картки теж синя (замовник: «кнопки сині там, де не сині») */
.pcard .btn{margin-top:20px}
.btn.cta{margin-top:16px}

/* ── 3. для чого: колаж 2×2 на всю ширину колонки, ../images/uses-v6.webp (1024×1536, WebP 85%, 02.11.2026): чотири фотореалістичні сцени з photos/src/uses-cells/*-real.webp (промти §16а–16г), кожна вписана в рівну чверть 505×761 px; у сцені «балкон і гараж» прибрано 80 px зелені згори й розтягнуто порожню нижню полицю, щоб ящик у гаражі був вище за плашку.
   Попередня версія — uses-v5.webp:
   v5 зібрана з оригіналу uses-gen-v6 (як uses-v3/v4): у GPT клітинки вийшли нерівні (вертикаль угорі x 503–507, унизу 507–511,
   горизонталь y 749–753), тому кожну клітинку вирізали без білих смуг і вписали в рівну чверть 505×761 px (масштаб ±2%,
   верхні клітинки підрізані з боків, нижні — згори, щоб не забрати місце під плашкою). Між чвертями — смуга 14 px (замовник, 02.11.2026: «товстіша й рівно на чотири»).
   Біла «скляна» плашка з бежевою смужкою (варіант А, замовник 02.11.2026; синю смужку замінили на бежеву) — компактна, щоб не заходити на контейнери. ── */
/* з 04.11.2026 — сітка 2×2 з чотирьох готових креативів замовника (підписи на самих фото); 10 px від країв екрана, як колаж до того */
.uses-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}   /* з 04.11.2026 — ті самі 18 px від країв, що й в інших блоках (до того виступала на 8 px) */
/* .mk — «Від дитячої до гаража» на темному мармурі, як картка ціни (замовник, 04.11.2026) */
.mk{border-top:0;color:#fff;background:linear-gradient(180deg,rgba(22,19,17,.5),rgba(22,19,17,.82)),#1d1b19 url(../images/marble-v1.webp) 50% 30%/cover no-repeat}
.mk h2,.mk .sub{color:#fff}
.uses-grid img{display:block;width:100%;height:auto}

/* ── 4. переваги: рядками вниз, іконка ліворуч ── */
.block h2 + .perks{margin-top:14px}
.perks{display:grid;gap:10px;grid-auto-rows:1fr}   /* усі картки однакової висоти, тож і фото однакового розміру (замовник, 05.11.2026) */
/* на світлому .ln: білі картки з м'якою тінню; значок зелений, як на плашці «На 4 колесах» на першому екрані (замовник, 03.11.2026: «повністю не заливати, тільки значок»).
   З 04.11.2026 — варіант В з docs/perks-photo-variants.html (замовник): у кожній картці маленький креатив на праві ≈44% картки, що плавно розчиняється в неї зліва;
   значок і текст ліворуч, текст не ширший за 56%, щоб не заходити на фото. Фото поки тимчасові вирізки (perk-strong-v1 — зі stack-v1, perk-clear-v1 — з clear-v1,
   perk-wheel-v1 — з zoom-wheel-v1); справжні креативи — з порожнім лівим краєм, щоб текст лягав на чисте. */
.perk{position:relative;overflow:hidden;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;min-height:92px;background:var(--card);border:1px solid var(--cardline);border-radius:14px;padding:16px 14px;
      box-shadow:0 8px 20px var(--shadow)}
.perk > i{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;
          /* об'ємна «кнопка» замість плаского кола (замовник, 04.11.2026: «зараз виглядає дешево»): світло зліва вгорі, тінь знизу, відблиск */
          background:radial-gradient(circle at 32% 26%,#5fd394 0%,#22a25e 38%,#17834a 62%,#0c5530 100%);
          box-shadow:0 7px 14px rgba(23,131,74,.32),0 2px 4px rgba(0,0,0,.18),inset 0 -4px 7px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.45)}
.perk > i::after{content:"";position:absolute;left:11px;top:6px;width:20px;height:10px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.perk svg{position:relative;width:26px;height:26px;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.3))}
.perk .tx{position:relative;z-index:1;max-width:56%}
.perk h3{margin:0;font-size:18px;line-height:1.2}
.perk p{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.3}
.perk .ph{display:block;border:0;border-radius:0;padding:0;   /* без пунктиру й заокруглення від загального .ph-заглушки (замовник, 04.11.2026) */
          position:absolute;right:0;top:0;bottom:0;width:44%;background:transparent 50% 50%/cover no-repeat;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}

/* ── 5–9. фото-блоки в стилі старих креативів (GPT за промтами §15, 02.11.2026; усі 1024×1536, WebP 85%) ──
   Тексту на фото немає: заголовок білим і помаранчевим кладемо HTML на порожню мармурову стіну вгорі кадру.
   Фон блоку (--mb) — колір верхнього краю фото; фото підтягнуте під підпис на --pull (у cqw) і зверху розчиняється у фон.
   --pull підібраний так, щоб підпис закінчувався вище за верх ящика (і розмірних ліній). */
.feat{padding:0;border-top:0;background:var(--mb,#211f1d);container-type:inline-size;font-family:var(--hero-font);overflow:hidden}   /* overflow: з підписом 28px фото підтягується вище за верх блоку — обрізаємо, там і так розчинення в --mb */
.feat .cap{position:relative;z-index:1;padding:8cqw 5cqw 0;text-align:center;text-shadow:0 .3cqw 1.6cqw rgba(0,0,0,.6)}
/* заголовки й підзаголовки фото-блоків — того самого розміру, що й на світлих блоках: 28px / 19px (замовник, 03.11.2026: «всі заголовки таким розміром»; до того 11cqw ≈ 40–47px) */
.feat .cap h2{margin:0;color:#fff;font-size:28px;line-height:1.05;font-weight:800}
.feat .cap h2 em{font-style:normal;color:#ef7d1a}
/* .duo — як у «Зручних ручках»: перше слово великим жирним, решта меншим тонким малими літерами (замовник, 03.11.2026) */
.feat .cap h2.duo span{display:block;margin-top:8px;font-size:19px;line-height:1.2;font-weight:300;text-transform:none}
.feat .cap p{margin:8px 0 0;color:#fff;font-size:19px;line-height:1.2;font-weight:300}
/* --cut (cqw) обрізає порожню стільницю внизу фото; фото 1024×1536 = 150cqw заввишки */
.feat .pic{position:relative;margin-top:calc(var(--pull,0cqw) * -1);height:calc(150cqw - var(--cut,0cqw));overflow:hidden}
.feat .pic img{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%);mask-image:linear-gradient(180deg,transparent 0,#000 9%)}
.feat .after{padding:0 18px 28px}
/* ── 8. зручні ручки (.shot): світле фото handle-v1 на всю ширину; підпис темним HTML унизу ліворуч на порожній стінці ящика, як у старому креативі (§18) ── */
.shot{position:relative;padding:0;border-top:0;container-type:inline-size;font-family:var(--hero-font)}   /* border-top:0 — без світлої лінії між фото-блоками (замовник, 04.11.2026) */
.shot img{display:block;width:100%;height:auto}
/* заголовок лише для читачів екрана й пошуку: на готових креативах текст уже є на фото */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.shot .cap{position:absolute;left:6cqw;right:24cqw;bottom:16cqw}
.shot h2{margin:0;color:var(--ink);font-size:28px;line-height:1.05;text-align:left;text-transform:uppercase;font-weight:800}
.shot p{margin:8px 0 0;color:var(--ink);font-size:19px;line-height:1.2;font-weight:300}   /* тонкий, як на креативі */
/* Розмірні лінії: SVG у координатах фото (px 1024×1536), кути ящика виміряні по фото (блок 5, clear-v1). */
.dimsvg{position:absolute;left:0;top:0;width:100%;height:150cqw;font-family:var(--hero-font)}
/* з 03.11.2026 — як на креативі «Оптимальный размер»: помаранчевий пунктир крапками зі стрілками на кінцях і помаранчевий підпис без плашки (темна обвідка — щоб читався на мармурі й на ящику) */
.dimsvg .dl{stroke:#ef7d1a;stroke-width:7;stroke-linecap:round;stroke-dasharray:0 15;fill:none;marker-start:url(#dimArr);marker-end:url(#dimArr)}
.dimsvg text{fill:#ef7d1a;font-size:46px;font-weight:800;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(20,16,12,.55);stroke-width:8px;stroke-linejoin:round}

/* ── 11. ціна й вибір: список кнопок у стовпчик — варіант В з docs/qty-list-variants.html (замовник, 03.11.2026; лічильник, що був до того, —
   docs/qty-stepper-removed-2026-11-03.html). Темне тло й білий/помаранчевий текст, як у фото-блоків. Мініатюра — вирізка з фото на мармурі:
   1 шт — single-v2, 2–4 шт — nest2-v1…nest4-v1 (вкладені, той самий кадр, §19). Рядок «економія» прибрано (замовник, 03.11.2026). ── */
/* фон — світлий .ln1 (з 03.11.2026; до того темний мармур); з 03.11.2026 у цьому ж блоці форма, блок у самому низу */
.price .btn{margin-top:16px}
.qlist{display:grid;gap:10px}
.qopt{display:flex;align-items:center;gap:12px;width:100%;margin:0;text-align:left;cursor:pointer;font:inherit;color:var(--ink);
      border:2px solid var(--cardline);border-radius:16px;background:var(--card);box-shadow:0 8px 20px var(--shadow);padding:8px 14px 8px 8px}
.qopt .th{flex:none;width:76px;height:76px;border-radius:12px;background:#2a2622 url(../images/single-v2.webp) no-repeat 50% 71%/170%}   /* ящик ≈ 61 px по центру, з відступом */
/* 2–4 шт — вкладені один в один у тому самому кадрі, що й single (§19, оригінали photos/src/gen-2026-11/nest2–4.webp, поля як у single-v2: S 0.86) */
.qopt .th[data-q="2"]{background-image:url(../images/nest2-v1.webp)}
.qopt .th[data-q="3"]{background-image:url(../images/nest3-v1.webp)}
.qopt .th[data-q="4"]{background-image:url(../images/nest4-v1.webp)}
.qopt .tx{flex:1;min-width:0}
.qopt .tx b{display:block;font:800 16px/1.2 var(--hero-font);white-space:nowrap}
.qopt .tx span{display:block;margin-top:3px;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
.qopt .pr{text-align:right;line-height:1.2}
.qopt .pr b{display:block;color:#ef7d1a;font:800 22px/1.1 var(--hero-font);white-space:nowrap}
.qopt .pr s{color:var(--muted);font-size:13px}
.qopt .off{display:inline-block;margin-bottom:4px;background:#ef7d1a;color:#fff;border-radius:999px;padding:2px 8px;font:800 11px/1.3 var(--hero-font)}
.qopt.on{border-color:#ef7d1a;background:#fffaf3;box-shadow:0 0 0 3px rgba(239,125,26,.2),0 8px 20px var(--shadow)}
.qopt:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Помітка «Купують найчастіше» на 4 шт — на верхній рамці кнопки (замовник, 03.11.2026: «4 контейнери купують найбільше»); зелена, як значки в «Перевагах» */
.qopt{position:relative}
.qopt.hit{margin-top:8px}
.qopt .hit{position:absolute;left:12px;top:-11px;background:#17834a;color:#fff;border-radius:999px;padding:3px 10px;font:800 11px/1.3 var(--hero-font);text-transform:uppercase;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ── 14. відгуки ── */
/* з 06.11.2026 (замовник, за скриншотом): під заголовком зелений рядок «👍 N задоволених відгуків», нижче — сіра заокруглена рамка з одним довгим
   скриншотом відгуків (тягнеться донизу), гортається вбік помаранчевими стрілками по краях рамки або свайпом. Висота вікна = висота поточного слайда.
   Стрілки — того самого помаранчевого об'єму, що значки «Доставки»; центр стрілки на краю рамки й рівно посередині її висоти, тож вона виходить на відступ блоку (18 px), не за екран.
   Попередній вигляд (дві заглушки одна під одною) — docs/blocks-removed-2026-11-03.html */
/* рядок «[N] задоволених відгуків» (.rcount) прибрано 09.11.2026, замовник; розмітка й CSS — docs/blocks-removed-2026-11-03.html */
.block h2 + .rv{margin-top:14px}
.rv{position:relative;max-width:270px;margin-inline:auto;   /* 10.11.2026: скриншоти були на всю ширину блоку (~315 px) і тягли блок на ~960 px заввишки */
     background:#e7e1da;border-radius:16px;padding:12px;box-shadow:inset 0 1px 3px rgba(80,55,30,.08)}
.rv-win{overflow:hidden;border-radius:10px;transition:height .35s ease}
/* слайди лежать один на одному; скрипт зсуває поточний на 0, сусіда — на ±100%, тож гортання йде по колу без «зворотного ходу» */
.rv-track{position:relative;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.rv-slide{position:absolute;left:0;top:0;width:100%}
.rv-slide img{width:100%;border-radius:10px;background:#fff}
.ph.rlong{aspect-ratio:1/2;background:#fff}   /* заглушка під довгий вертикальний скриншот */
.rv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;   /* рівно посередині рамки по висоті (замовник, 06.11.2026; до того top:190px) */
width:34px;height:34px;border:0;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;
        background:radial-gradient(circle at 32% 28%,#7cb8f7,var(--accent) 55%,#14467f);
        box-shadow:0 5px 12px rgba(20,70,127,.32),0 2px 4px rgba(0,0,0,.14),inset 0 -3px 6px rgba(0,0,0,.2)}
.rv-nav svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.rv-nav.prev{left:-17px}
.rv-nav.next{right:-17px}
.rv-nav:active{transform:translateY(-50%) scale(.94)}


/* ── 12. доставка ── */
/* «Доставка й оплата» (замовник, 04.11.2026): 4 кроки в ряд, між значками — стрілка; значки помаранчеві матові (рівний колір, лише м'яка тінь під ними, без відблисків) */
.dlv{padding-top:28px;padding-bottom:30px}   /* без смуги й фігур — тихий проміжок між відгуками й замовленням (замовник, 05.11.2026: «перевантажений фон»); з 10.11.2026 просто стіна .ln1 */
.steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.steps li{position:relative;display:grid;justify-items:center;align-content:start;gap:9px;text-align:center;font-size:13px;line-height:1.25;font-weight:600}
/* з 04.11.2026 — того самого кольору й об'єму, що галочки в картці ціни (замовник): світліше зліва вгорі, темніше знизу, легка внутрішня тінь */
.steps li i{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
            background:radial-gradient(circle at 32% 28%,#ffb46a,#ef7d1a 55%,#b9550c);
            box-shadow:0 6px 14px rgba(160,80,15,.3),0 2px 4px rgba(0,0,0,.14),inset 0 -3px 6px rgba(0,0,0,.2)}
.steps li i svg{width:23px;height:23px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* стрілка від попереднього значка до цього: лінія + наконечник, по центру між кружечками */
.steps li+li::before{content:"";position:absolute;top:22px;right:calc(50% + 29px);width:calc(100% - 52px);height:2px;border-radius:2px;background:rgba(43,36,32,.35)}
.steps li+li::after{content:"";position:absolute;top:18px;right:calc(50% + 27px);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(43,36,32,.35)}

/* ── 16. форма ── */
.form .total{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ph);border-radius:10px;padding:12px}
.form .total span{font-size:14px;color:var(--muted);line-height:1.25}
.form .total small{display:block;font-size:12px}
.form .total b{flex:none;color:var(--price);font-size:22px}
.form .total b span{font-size:inherit;color:inherit}   /* сума не дрібна, як підпис ліворуч */
.form .fnote{margin:0;text-align:center;color:var(--muted);font-size:13px}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.form input{border:1px solid var(--ph-line);border-radius:10px;padding:14px;font-size:17px;color:var(--ink);width:100%}
.form input:focus{outline:2px solid var(--accent);border-color:transparent}
.form .err{color:var(--price);font-size:14px;min-height:1em;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* вибір пошти (.carrier) прибрано 06.11.2026, замовник; CSS і розмітка — docs/blocks-removed-2026-11-03.html */
/* Форма — у тому самому блоці, що й кнопки кількості (замовник, 03.11.2026: «об'єднуємо в один блок»); лічильник −/+ прибрано — кількість обирають кнопками вище.
   Лічильник і підсумок під заголовком «Оформити замовлення» — docs/qty-form-merged-2026-11-03.html */
.form{margin-top:8px}
.form .fhead{margin:18px 0 2px;text-align:center;text-transform:uppercase;font:800 18px/1.2 var(--hero-font);color:var(--ink)}
#orderSummary{display:block;margin-bottom:2px;color:var(--ink);font-size:15px;font-weight:800}
.fstep output{min-width:80px;text-align:center;font-size:18px;font-weight:800}

/* ── 18. підвал ── */
/* ── Брендування Homely Store (10.11.2026) ──
   Шапка й підвал за зразком акустичних панелей (homely-paneli-sayt), але в нашій
   палітрі: синій акцент, Montserrat, світле тло. Телефон не показуємо — звʼязок
   лише через форму, так само як на панелях. */
/* 10.11.2026: шапку з логотипом і кнопкою прибрано (замовник передумав).
   .logo і .mark лишаються — ними підписаний підвал. */
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;
      font:700 16px/1 var(--hero-font);letter-spacing:.01em}
.logo span{font-weight:400;color:var(--muted)}
/* значок — спрощений контейнер із кришкою */
.mark{flex:0 0 26px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
      background:linear-gradient(180deg,#3a8ae8,var(--accent));
      box-shadow:0 3px 8px rgba(31,111,209,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.mark svg{width:16px;height:16px;display:block}
footer{padding:24px 18px;text-align:center;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
footer a{margin:0 8px}
footer .logo{justify-content:center;margin-bottom:10px}
footer .fline{font-size:13.5px}
footer .fcr{margin-top:8px;font-size:13px}
footer .flinks{margin-top:10px}

/* ── 19. липкий бар ── */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:10;background:#fff;border-top:1px solid var(--line);
        box-shadow:0 -4px 16px rgba(0,0,0,.08);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.sticky .in{max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:12px}
.sticky .sum{flex:1;line-height:1.2}
.sticky .sum small{display:block;color:var(--muted);font-size:13px}
.sticky .sum b{color:var(--price);font-size:22px}
.sticky .btn{width:auto;padding:12px 26px;font-size:17px}