/* Структура і порядок блоків повторюють vizok.tbcmarket.site — він уже відпрацював.
   Нове тут лише вибір розцвітки і бандл «друга −20%». */
:root{
  --bg:#f4f2ee; --paper:#fff; --line:#e4e0d8;
  --ink:#1d2228; --muted:#6b7480;
  --accent:#2f7d4f; --accent-dark:#245f3c;
  --price:#c6362c; --warm:#fdf6e8;
  --display:Oswald,"Arial Narrow",sans-serif;
  --body:"Roboto Condensed",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
/* .sum .save і .sum .old мають display:block — без цього правила атрибут hidden
   на них не спрацьовує, і при 1 шт видно «економія 0 ₴» та закреслену ціну. */
[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}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font-family:inherit}
.page{max-width:560px;margin:0 auto;background:var(--paper);overflow:hidden}
.wrap{padding-inline:18px}
h2{font:600 27px/1.1 var(--display);text-transform:uppercase;margin:0 0 4px;letter-spacing:-.005em}
.sub{color:var(--muted);font-size:15.5px;margin:0 0 16px}
/* Зелена риска між блоками прибрана; відступ лишається, щоб блоки не злипалися. */
.sep{display:none}

/* ── герой ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:#fff}
.hero img{width:100%}
.hero .badge{position:absolute;left:14px;top:14px;background:var(--price);color:#fff;
  font:700 13px/1 var(--display);letter-spacing:.06em;padding:8px 11px;border-radius:3px}

/* ── ціна ──────────────────────────────────────────────────────────────── */
/* Осінній фон: теплий градієнт + два листки (SVG інлайном, без зайвого запиту). */
.price-offer{position:relative;text-align:center;padding:22px 18px 26px;
  border-block:1px solid #e3b878;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 56C6 30 22 8 56 6c2 30-14 50-40 50z' fill='%23c8631f' fill-opacity='.30'/%3E%3Cpath d='M10 54C22 38 34 24 52 10' stroke='%23fff6e3' stroke-opacity='.7' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat left -10px bottom -14px/84px 84px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M56 8C58 34 42 56 8 58 6 28 22 10 56 8z' fill='%23b8860b' fill-opacity='.32'/%3E%3Cpath d='M54 10C42 26 30 40 12 54' stroke='%23fff6e3' stroke-opacity='.7' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right -12px top -12px/78px 78px,
    linear-gradient(180deg,#fdeccd 0%,#f9d9a4 100%)}
.price-offer .off{display:inline-block;background:var(--price);color:#fff;border-radius:3px;
  font:700 24px/1 var(--display);letter-spacing:.06em;padding:12px 24px;margin-bottom:14px}
/* Дві ціни поруч: стара — сіра й перекреслена, нова — велика на білому. Різниця читається з одного погляду. */
.price-offer .cmp{display:flex;align-items:stretch;justify-content:center;gap:10px;margin:0 auto 14px;max-width:440px}
.price-offer .cmp>div{flex:1;border-radius:6px;padding:11px 8px 12px;display:flex;flex-direction:column;
  justify-content:center;gap:5px}
.price-offer .cmp small{font:600 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.price-offer .was{background:rgba(255,255,255,.45);border:1px dashed #c9ab7c;color:#7a7060}
.price-offer .was b{position:relative;align-self:center;font:500 34px/1 var(--display);color:#8a8070;
  text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--price)}
.price-offer .now-box{background:#fff;border:2px solid var(--price);box-shadow:0 4px 14px rgba(198,54,44,.22);
  color:var(--price)}
.price-offer .now{font:700 60px/1 var(--display);color:var(--price)}
.price-offer .now span:last-child{font-size:34px}
.price-offer .save{display:inline-block;background:var(--accent);color:#fff;border-radius:30px;
  font:600 19px/1 var(--display);letter-spacing:.03em;padding:11px 20px}
.price-offer .save b{font-size:23px}

/* ── CTA + залишок ─────────────────────────────────────────────────────── */
.cta-block{padding:20px 18px 24px;text-align:center}
.stock{font-size:15px;color:var(--muted);margin:0 0 12px}
.stock b{color:var(--ink)}
.btn{display:block;width:100%;border:0;border-radius:4px;background:var(--accent);color:#fff;
  font:600 19px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;
  padding:18px 14px;cursor:pointer;text-align:center;text-decoration:none;
  box-shadow:0 3px 0 var(--accent-dark)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-dark)}
.note{font-size:13.5px;color:var(--muted);margin:11px 0 0}

/* ── блоки переваг ─────────────────────────────────────────────────────── */
.block{padding-bottom:0}
.block img{border-radius:4px;background:#fff}
.block.center h2,.block.center .sub{text-align:center}
/* Заголовок блоку стоїть на однаковій відстані від картинки вище і картинки нижче:
   зверху 34 px до рядка заголовка, знизу 34 px від підзаголовка (видимо ≈32 px з обох боків). */
.block.center h2{margin-top:34px}
.block.center .sub{margin-bottom:34px}
.block img + img{margin-top:0}
/* Картинки й блок вибору — на всю ширину сторінки, без бічних полів (.wrap дає 18px). */
.block > img,.picker{margin-inline:-18px;width:calc(100% + 36px);max-width:none}
.block > img{border-radius:0}
.picker{border-inline:0;border-radius:0}
.facts{list-style:none;margin:14px 0 0;padding:0}
.facts li{position:relative;padding-left:26px;margin-bottom:9px;font-size:16px}
.facts li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg)}

/* ── вибір розцвітки + кількість ───────────────────────────────────────── */
/* Осінній градієнт, як у блоці ціни; кожна розцвітка має свій колір картки. */
.picker{background:linear-gradient(180deg,#fff3da 0%,#fbe0b0 100%);border:0;
  border-block:1px solid #e3b878;border-radius:0;padding:20px 16px 22px;margin-top:6px}
.block.center h2 + .picker{margin-top:22px}
.lbl{font:600 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  color:#7a5a2c;margin-bottom:11px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.swatches .sw{position:relative;border:2px solid transparent;background:var(--tint,#fff);
  border-radius:12px;padding:6px 6px 9px;cursor:pointer;display:block;
  transition:transform .15s,box-shadow .15s,border-color .15s;font-family:inherit}
.swatches .sw:active{transform:scale(.97)}
.swatches .sw[aria-pressed="true"]{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(47,125,79,.30)}
.swatches .sw[aria-pressed="true"]::after{content:"✓";position:absolute;top:-9px;right:-7px;
  width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;
  font:700 15px/25px var(--display);text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.swatches img{border-radius:8px;background:#fff}
.swatches .nm{display:block;margin-top:7px;font:600 12.5px/1.15 var(--display);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* Велике фото обраної розцвітки: блок розгортається по кліку на свотч і згортається повторним кліком. */
.preview{display:grid;grid-template-rows:0fr;margin-top:0;
  transition:grid-template-rows .4s ease,margin-top .4s ease}
.preview.open{grid-template-rows:1fr;margin-top:16px}
.preview>div{overflow:hidden;min-height:0}
.preview .pv{background:var(--tint,#fff);border-radius:14px;padding:12px;text-align:center}
.preview img{width:100%;max-width:380px;margin:0 auto;border-radius:10px;background:#fff;aspect-ratio:1/1}
.preview img.fade{animation:pvIn .35s ease}
@keyframes pvIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.preview,.preview img.fade{transition:none;animation:none}}
.picked{text-align:center;font-size:17px;margin:14px 0 0}
.picked b{font-weight:700;color:var(--accent-dark)}
.qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.stepper{display:flex;align-items:center;gap:0;border:2px solid var(--accent);border-radius:30px;
  background:#fff;overflow:hidden}
.stepper button{width:50px;height:46px;border:0;background:#fff;font-size:26px;line-height:1;
  color:var(--accent-dark);font-weight:600;cursor:pointer}
.stepper button:active:not(:disabled){background:#e8f5ec}
.stepper button:disabled{color:#c8ccd2;cursor:default}
.stepper .n{min-width:42px;text-align:center;font:700 22px var(--display)}
.promo{display:flex;gap:10px;align-items:center;background:linear-gradient(90deg,#e6f4ea,#fff7de);
  border:1.5px dashed var(--accent);border-radius:10px;padding:12px 14px;margin-top:16px;font-size:15px}
.promo>span{font-size:26px;line-height:1}
.sum{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;
  padding-top:15px;border-top:1px solid #e3b878}
.sum .l{font:600 20px var(--display);letter-spacing:.06em;text-transform:uppercase}
.sum .save{display:block;font-family:var(--body);font-size:16px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--accent)}
.sum .r b{font:700 38px/1 var(--display);color:var(--price)}
.sum .r .old{display:block;text-align:right;font-size:14px;color:var(--muted);
  text-decoration:line-through}

/* ── доставка ──────────────────────────────────────────────────────────── */
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:17px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font:600 16px var(--display)}
.steps b{display:block;font-size:16.5px}
.steps span{color:var(--muted);font-size:14.5px}

/* ── форма ─────────────────────────────────────────────────────────────── */
.form-sec{background:var(--warm);border-top:1px solid var(--line);padding:26px 18px 30px;margin-top:30px}
.form-sec h2{text-align:center}
.form-sec .sub{text-align:center}
.fields{display:grid;gap:10px;margin-bottom:14px}
.fields input{width:100%;height:52px;padding:0 14px;border:1px solid var(--line);border-radius:5px;
  background:#fff;font-size:16px;font-family:inherit;color:var(--ink)}
.fields input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.f-sum{text-align:center;font-size:16px;margin:0 0 14px}
.f-sum b{font:700 25px var(--display);color:var(--price);vertical-align:-2px}
.err{display:none;background:#fdecea;border:1px solid #f3c2bd;color:#9a2a20;border-radius:5px;
  padding:10px 12px;font-size:14.5px;margin-bottom:12px}

/* ── відгуки ───────────────────────────────────────────────────────────── */
.fields textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:#fff;
  font-size:16px;font-family:inherit;color:var(--ink);resize:vertical;min-height:110px}
.fields textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
.btn-ghost{background:#fff;color:var(--accent-dark);border:2px solid var(--accent);box-shadow:none}
.btn-ghost:active{transform:none;background:#e8f5ec}
#reviews-list{margin-bottom:16px;text-align:left}
.rv-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px 16px;margin-bottom:12px}
/* Фото відгуку — квадратна мініатюра зліва (як свотчі), текст справа. */
.rv-card.has-photo{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start}
.rv-photo{width:112px;height:112px;object-fit:cover;object-position:40% 55%;border-radius:10px}
.rv-body{min-width:0}
@media (max-width:400px){
  .rv-card.has-photo{grid-template-columns:92px 1fr;gap:12px}
  .rv-photo{width:92px;height:92px}
}
.rv-card header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.rv-card header span,.rv-card header time{color:var(--muted);font-size:14px}
.rv-card header time{margin-left:auto}
.rv-stars{color:#e8a317;font-size:18px;letter-spacing:2px;margin:3px 0 4px}
.rv-card p{margin:0;font-size:16px}
.rv-shot{border-radius:10px;margin-bottom:12px;border:1px solid var(--line)}
.rv-form{margin-top:18px;text-align:left;background:linear-gradient(180deg,#fff3da,#fbe6bf);
  border:1px solid #e3b878;border-radius:10px;padding:16px}
.rv-form .lbl{color:#7a5a2c}
/* Весь розділ відгуків — одна рамка, щоб читався як єдиний блок. */
#reviews-sec{border:2px solid #e3b878;border-radius:16px;padding:0 14px 16px;margin-top:34px;
  background:linear-gradient(180deg,#fffaf0 0%,#fff1d6 100%);box-shadow:0 6px 18px rgba(176,120,40,.14)}
#reviews-sec h2{margin-top:22px;margin-bottom:18px}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.rv-attach-wrap{margin:-2px 0 14px}
.rv-attach{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border:2px dashed var(--accent);
  border-radius:8px;background:rgba(255,255,255,.7);color:var(--accent-dark);cursor:pointer;
  font:600 16px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.rv-attach span{font-size:22px}
.rv-attach:hover{background:#fff}
.rv-attach-wrap:focus-within .rv-attach{outline:2px solid var(--accent);outline-offset:2px}
.rv-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rv-previews:empty{display:none}
.rv-pv{position:relative;width:84px;height:84px}
.rv-pv img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.rv-pv button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:0;
  background:#1d2228;color:#fff;font-size:16px;line-height:26px;cursor:pointer;padding:0}
.rv-hint{margin:8px 0 0;font-size:13px;color:#7a5a2c}
.rv-ok{background:#e8f5ec;border:1px solid #b9dcc5;color:var(--accent-dark);border-radius:8px;padding:12px 14px;
  margin:14px 0 0;font-size:16px}

/* ── підвал ────────────────────────────────────────────────────────────── */
footer{background:#1d2228;color:#9aa4b0;font-size:13px;text-align:center;padding:24px 18px 28px}
footer .links{margin-top:9px;display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap}
footer a{text-decoration:underline;text-underline-offset:3px}

/* ── липкий бар ────────────────────────────────────────────────────────── */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);padding:9px 14px;display:flex;align-items:center;gap:12px;
  max-width:560px;margin:0 auto;transform:translateY(120%);transition:transform .25s;
  backdrop-filter:blur(6px)}
.sticky.show{transform:none}
.sticky .p{flex:1;min-width:0}
.sticky .p b{display:block;font:700 21px/1 var(--display);color:var(--price)}
.sticky .p small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sticky .btn{width:auto;padding:14px 20px;font-size:16px}
.sticky{flex-wrap:wrap;row-gap:8px}
.sticky .nudge{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-2px 0 0;padding:7px 8px 7px 12px;border-radius:12px;background:#e8f5ec;border:1px solid #cfe5d8;color:#124a31;font:600 14px/1.2 var(--display);letter-spacing:.02em}
.sticky .nudge .nb{flex:none;border:0;border-radius:30px;padding:7px 14px;background:linear-gradient(180deg,#34a06c,#1f7a50);color:#fff;
  font:700 13.5px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #0f4630}
.sticky .nudge .nb:active{transform:translateY(2px);box-shadow:0 1px 0 #0f4630}
/* підсвічування «+» під картками після переходу з підказки */
.swatches.attn .mini{animation:attn 0.8s ease-in-out 3}
@keyframes attn{0%,100%{box-shadow:inset 0 1px 2px rgba(31,42,38,.08),0 0 0 0 rgba(52,160,108,0)}
  50%{box-shadow:inset 0 1px 2px rgba(31,42,38,.08),0 0 0 6px rgba(52,160,108,.45)}}
@media (prefers-reduced-motion:reduce){.swatches.attn .mini{animation:none;outline:3px solid rgba(52,160,108,.6)}}
body{padding-bottom:0}
@media (max-width:380px){
  h2{font-size:24px}
  .price-offer .now{font-size:50px}
  .price-offer .now span:last-child{font-size:29px}
  .price-offer .was b{font-size:28px}
}

/* ══ ДИЗАЙН v3 «Практичний комфорт» ═══════════════════════════════════════════
   Спокійний, чистий, міський. Без золотого тексту, світіння й глянцю.
   Основа — теплий нейтральний, темний зелено-графітовий для форми, смарагд — тільки для дій.
   Обʼєм дають м'які тіні, заокруглені картки і «натискна» кнопка; весь шар можна видалити. */
:root{
  --bg:#ebe5d9; --paper:#fffdf9; --line:#e6ddcc; --ink:#1f2a26; --muted:#667069;
  --accent:#1f7a50; --accent-dark:#124a31; --price:#b8361f; --warm:#f6f0e4; --deep:#16251f;
  --soft:0 1px 2px rgba(31,42,38,.08),0 12px 24px -14px rgba(31,42,38,.30);
  --pressed:inset 0 2px 4px rgba(31,42,38,.12);
}
body{background:var(--bg)}
.page{background:var(--paper);box-shadow:0 30px 70px -30px rgba(31,42,38,.45)}
.deco{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(31,42,38,.30))}

/* кнопки: один колір (смарагд), форма-«пігулка», м'яка анімація */
.btn{position:relative;overflow:hidden;border-radius:60px;
  background:linear-gradient(180deg,#34a06c 0%,#1f7a50 55%,#176143 100%);text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.30),inset 0 -3px 6px rgba(0,0,0,.18),0 5px 0 #0f4630,0 16px 22px -10px rgba(15,70,48,.6);
  animation:btnGlow 2.8s ease-in-out infinite;transition:transform .15s,filter .2s}
.btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:30%;transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:btnShine 3.6s ease-in-out infinite}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn:active{transform:translateY(4px);animation:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.18),0 1px 0 #0f4630,0 6px 10px -6px rgba(15,70,48,.6)}
@keyframes btnGlow{
  0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.30),inset 0 -3px 6px rgba(0,0,0,.18),0 5px 0 #0f4630,0 16px 22px -10px rgba(15,70,48,.6),0 0 0 0 rgba(52,160,108,.5)}
  55%{box-shadow:inset 0 2px 0 rgba(255,255,255,.30),inset 0 -3px 6px rgba(0,0,0,.18),0 5px 0 #0f4630,0 16px 22px -10px rgba(15,70,48,.6),0 0 0 13px rgba(52,160,108,0)}}
@keyframes btnShine{0%,55%{left:-45%}100%{left:130%}}
.btn-ghost{background:#fff;color:var(--accent-dark);text-shadow:none;border:2px solid var(--accent);animation:none;
  box-shadow:0 5px 0 #c4ded0,0 14px 20px -12px rgba(15,70,48,.4)}
.btn-ghost::after{display:none}
.btn-ghost:active{box-shadow:0 1px 0 #c4ded0}
.sticky{background:rgba(255,253,249,.96);box-shadow:0 -10px 24px -14px rgba(31,42,38,.4)}
@media (prefers-reduced-motion:reduce){.btn,.btn::after{animation:none;transition:none}}

/* ярлики й ціна */
.hero .badge{border-radius:30px;background:var(--price);font-size:15px;padding:9px 16px;letter-spacing:.08em;
  box-shadow:0 8px 16px -8px rgba(184,54,31,.75)}
.price-offer{background:linear-gradient(180deg,#f8f3e8 0%,#efe6d4 100%);border-block:1px solid var(--line);box-shadow:none;
  padding:26px 18px 28px;overflow:hidden}
.price-offer .off{border-radius:30px;background:var(--price);text-shadow:none;padding:12px 28px;
  box-shadow:0 10px 18px -8px rgba(184,54,31,.7)}
.price-offer .was{border-radius:18px;border:1px solid var(--line);background:#fff;color:#8a8579;box-shadow:var(--pressed)}
.price-offer .was b{color:#8a8579;text-decoration-color:var(--price)}
.price-offer .now-box{border-radius:18px;border:2px solid var(--price);background:#fff;box-shadow:var(--soft)}
.price-offer .save{background:var(--accent);text-shadow:none;border-radius:40px;box-shadow:0 10px 16px -8px rgba(15,70,48,.7)}

/* картинки на всю ширину — без тіней і рамок */
.block > img{box-shadow:none}

/* вибір розцвітки */
.picker{background:var(--warm);border-block:1px solid var(--line);box-shadow:none}
.lbl{color:#6b6256}
.swatches .sw{border-radius:18px;box-shadow:var(--soft)}
.swatches .sw:active{box-shadow:var(--pressed)}
.swatches .sw[aria-pressed="true"]{box-shadow:0 14px 22px -10px rgba(15,70,48,.55)}
.swatches img{border-radius:12px}
.preview .pv{border-radius:18px;box-shadow:var(--pressed)}
.preview img{border-radius:14px;box-shadow:0 12px 22px -14px rgba(31,42,38,.5)}
.picked b{color:var(--accent-dark)}
.stepper{box-shadow:none}
.promo{background:#fff;border:1px solid #cfe5d8;border-radius:16px;box-shadow:var(--soft);gap:12px}
.promo>span.pct{flex:none;background:var(--accent);color:#fff;border-radius:30px;padding:7px 11px;font:700 16px/1 var(--display);letter-spacing:.03em}
.sum{border-top:1px solid var(--line)}

/* доставка: кроки-картки */
.steps li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 16px 16px 70px;margin-bottom:12px;
  box-shadow:var(--soft);text-align:left}
.steps li::before{left:16px;top:16px;width:38px;height:38px;box-shadow:0 6px 10px -4px rgba(15,70,48,.55)}

/* відгуки */
#reviews-sec{border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--soft);padding:0 14px 18px;margin-top:34px}
.rv-card{background:var(--warm);border:1px solid var(--line);border-radius:18px;box-shadow:none}
.rv-photo{border-radius:12px;box-shadow:0 8px 14px -8px rgba(31,42,38,.5)}
.rv-form{background:var(--warm);border:1px solid var(--line);border-radius:18px;box-shadow:none}
.rv-form .lbl,.rv-hint{color:#6b6256}
.rv-form .fields input,.rv-form .fields textarea{border:1px solid var(--line)}
.rv-rate{margin-bottom:14px;text-align:center}
.rv-rate .rate-lbl{font:600 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#6b6256;margin-bottom:8px}
.stars{display:flex;justify-content:center;gap:6px}
.stars button{border:0;background:none;cursor:pointer;padding:0 2px;font-size:44px;line-height:1;color:#d6cbb8;
  transition:transform .12s,color .12s;-webkit-tap-highlight-color:transparent}
.stars button.on{color:#f5b301;text-shadow:0 3px 6px rgba(160,100,0,.35)}
.stars button:hover{transform:scale(1.12)}
.stars button:active{transform:scale(.95)}
.stars button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.rv-rate .rate-note{min-height:20px;margin-top:6px;font-size:14px;color:#6b6256}
.rv-attach{border-radius:14px}

/* форма замовлення: темний зелено-графітовий блок, світлі поля */
.form-sec{position:relative;overflow:hidden;background:var(--deep);border-top:0;color:#f3efe6;box-shadow:none;padding:36px 18px 36px}
.form-sec h2{color:#fff}
.form-sec .sub{color:#b9c6be}
.fields input,.fields textarea{border-radius:14px;border:1px solid transparent;background:#fff;box-shadow:none}
.fields input{height:54px}
.fields input:focus,.fields textarea:focus{outline:0;box-shadow:0 0 0 3px rgba(52,160,108,.45)}
.form-sec .f-sum{color:#e4ddcd}
.form-sec .f-sum b{color:#ffcf8a}
.form-sec .note{color:#a9b6ae}
.form-sec .note a{color:#d9e4dd}
footer{background:#0f1915;color:#8fa098;box-shadow:none}

/* ── «Замість важких пакетів»: заголовок і картинка в одній картці з рамкою і тінню.
   Оранжева риска під текстом — того ж кольору, що плашка «30 л» на картинці. */
.block.card1{margin:34px 0;padding:22px 14px 14px;background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:0 1px 2px rgba(31,42,38,.08),0 26px 40px -24px rgba(31,42,38,.5)}
.block.card1 h2{margin-top:0}
.block.card1 .sub{margin-bottom:0;padding:0 6px}
.block.card1 .sub::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:#e7852b;margin:16px auto 16px}
.block.card1 > img{margin-inline:0;width:100%;border-radius:20px}

/* ── «Три деталі»: заголовок і дві картинки як один блок. Фон блоку переходить із білого у колір
   верху картинки (#e2bb9d), верх першої картинки розчиняється в ньому, а друга плавно «виростає» з низу першої. */
.block.unite{margin-inline:-18px;padding-inline:18px;
  background:linear-gradient(180deg,var(--paper) 0,#e2bb9d 120px,#e2bb9d 100%)}
.block.unite > img:first-of-type{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 80px);
  mask-image:linear-gradient(180deg,transparent 0,#000 80px)}
.block.unite .bridge{height:56px;margin-inline:-18px;background:linear-gradient(180deg,#d38e64,#edd2bc)}

/* ── блок ціни: темна сцена на боке з листя, скляні картки, цінник «світиться» ── */
.deco.soft{filter:blur(3px) drop-shadow(0 14px 12px rgba(0,0,0,.4))}
.price-offer{position:relative;overflow:hidden;color:#fff4df;border-block:0;padding:34px 18px 26px;
  background:radial-gradient(420px 260px at 50% 36%,rgba(255,176,64,.40),rgba(255,176,64,0) 70%),
             linear-gradient(180deg,rgba(28,14,7,.78) 0%,rgba(28,14,7,.55) 45%,rgba(28,14,7,.86) 100%),
             url("../images/design-bg-bokeh.webp") center/cover,#2b180d}
.price-offer .off{border-radius:10px;font-size:24px;padding:11px 28px;margin-bottom:16px;
  background:linear-gradient(180deg,#e0523f,#a82b1c);text-shadow:0 1px 1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #6f1a10,0 14px 20px -6px rgba(0,0,0,.6)}
.price-offer .cmp{position:relative;z-index:2;max-width:none;gap:12px;margin-bottom:16px}
.price-offer .was,.price-offer .now-box{border-radius:22px}
.price-offer .was{border:1px solid rgba(255,214,150,.45);background:linear-gradient(160deg,rgba(255,244,223,.22),rgba(255,244,223,.07));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 20px rgba(0,0,0,.18),0 18px 30px -12px rgba(0,0,0,.7);color:#f3d9a8}
.price-offer .was small{color:#f3d9a8}
.price-offer .was b{color:#d9c3a0;text-decoration-color:#ff7a5c}
.price-offer .now-box{background:linear-gradient(160deg,#fffaf0,#ffe9bd);border:1px solid #fff0cc;color:var(--price);
  box-shadow:inset 0 2px 0 #fff,inset 0 -8px 16px rgba(200,120,20,.22),0 0 0 3px rgba(232,166,60,.45),0 22px 34px -10px rgba(0,0,0,.75),0 0 40px rgba(255,176,64,.4)}
.price-offer .now-box small{color:#8a5a14}
.price-offer .now{text-shadow:0 2px 0 rgba(255,255,255,.7)}
.price-offer .save{position:relative;z-index:2;background:linear-gradient(180deg,#46a56e,#2a6e45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #1d5a38,0 12px 18px -8px rgba(0,0,0,.6)}
.price-offer .cta-block{position:relative;z-index:2;padding:20px 0 0}
.price-offer .stock{color:#ead6b3}
.price-offer .stock b{color:#fff}
.price-offer .note{color:#e9d3ad}

/* ── форма: той самий фон, що в блоці ціни (боке з листя, янтарне світло). Верх «виринає» з білої сторінки,
   низ розчиняється в підвалі того самого коричневого тону — обидва переходи без різкого краю. ── */
.form-sec{margin-top:0;padding:96px 18px 90px;color:#fff4df;
  background:radial-gradient(420px 260px at 50% 30%,rgba(255,176,64,.34),rgba(255,176,64,0) 70%),
             linear-gradient(180deg,rgba(28,14,7,.82) 0%,rgba(28,14,7,.58) 45%,rgba(28,14,7,.9) 100%),
             url("../images/design-bg-bokeh.webp") center/cover,#2b180d}
.form-sec::before,.form-sec::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.form-sec::before{top:0;height:84px;background:linear-gradient(180deg,var(--paper) 0%,rgba(255,253,249,0) 100%)}
.form-sec::after{bottom:0;height:70px;background:linear-gradient(180deg,rgba(23,13,6,0) 0%,#170d06 100%)}
.form-sec > :not(.deco){position:relative;z-index:2}
/* той самий м'який край унизу блоку ціни: темна сцена виходить у білу сторінку без різкої лінії */
.price-offer{padding-bottom:84px}
.price-offer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,253,249,0) 0%,var(--paper) 100%)}
.form-sec h2{color:#fff4df;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.form-sec .sub{color:#ead6b3}
.form-sec .f-sum{color:#f3e3c4}
.form-sec .note{color:#e9d3ad}
.form-sec .note a{color:#fff4df}
footer{background:#170d06;color:#b9a68a}

/* ── вибір розцвітки: сцена кольору обраної сумки, глибина шарами ─────────── */
@property --c1{syntax:"<color>";inherits:true;initial-value:#eef4fa}
@property --c2{syntax:"<color>";inherits:true;initial-value:#c3d7ea}
@property --c3{syntax:"<color>";inherits:true;initial-value:#3f6f9c}
.picker{--c1:#eef4fa;--c2:#c3d7ea;--c3:#3f6f9c;padding:24px 16px 28px;border-block:1px solid rgba(31,42,38,.08);
  transition:--c1 .6s ease,--c2 .6s ease,--c3 .6s ease;
  background:radial-gradient(130% 60% at 50% 0%,var(--c2) 0%,rgba(255,255,255,0) 74%),
             linear-gradient(180deg,var(--c1) 0%,#f6f0e4 60%,#eee6d4 100%)}
/* Заголовок лежить усередині блоку вибору — на тому самому кольоровому фоні, що й свотчі. */
.block.center .picker > h2{margin:0 0 20px;padding-top:6px}
.block.center .picker{margin-top:0}
.picker{padding-top:30px}
.swatches{gap:12px}
.swatches .sw{background:linear-gradient(165deg,#fff 0%,var(--tint) 78%);border:2px solid rgba(255,255,255,.95);
  border-radius:20px;padding:8px 6px 10px;
  box-shadow:inset 0 1px 0 #fff,0 12px 20px -12px rgba(31,42,38,.5)}
.swatches img{background:transparent;mix-blend-mode:multiply;border-radius:0}
.swatches .sw[aria-pressed="true"]{border-color:var(--c3);transform:translateY(-4px);
  box-shadow:inset 0 1px 0 #fff,0 20px 28px -12px var(--c3)}
.swatches .sw[aria-pressed="true"]::after{background:var(--c3)}
.swatches .nm{color:var(--ink)}
.preview.open{margin-top:18px}
.preview .pv{position:relative;border-radius:28px;padding:22px 14px 50px;
  background:radial-gradient(55% 40% at 50% 86%,rgba(31,42,38,.20),rgba(31,42,38,0) 70%),
             radial-gradient(80% 70% at 50% 32%,#fff 0%,rgba(255,255,255,0) 72%),
             linear-gradient(180deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55),
             inset 0 -50px 70px -40px rgba(31,42,38,.26),0 30px 44px -26px var(--c3)}
.preview img{width:100%;max-width:400px;border-radius:0;background:transparent;mix-blend-mode:multiply;box-shadow:none}
.buy{position:relative;z-index:2;margin-top:18px;background:#fff;border-radius:24px;padding:4px 16px 18px;
  box-shadow:0 1px 2px rgba(31,42,38,.08),0 26px 40px -24px rgba(31,42,38,.55)}
.preview.open + .buy{margin-top:-30px}
.buy .promo{background:var(--warm);border-color:#e6ddcc;box-shadow:none}
.buy .picked{margin-top:16px}

/* ══ Єдина осіння сцена на всю сторінку ═══════════════════════════════════════
   Фон — один фіксований шар (боке з листя, янтарне світло, коричневе затемнення) за ВСІМ сайтом: і за колонкою,
   і по боках. Початок (ціна), середина (main) і кінець (форма) стоять на ньому без власних фонів, тому
   кольори збігаються автоматично, а переходи між блоками безшовні. Світлі секції — картки на цій сцені. ══ */
html{background:#2b180d}
html::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(900px 560px at 50% 18%,rgba(255,176,64,.30),rgba(255,176,64,0) 70%),
             linear-gradient(180deg,rgba(28,14,7,.74) 0%,rgba(28,14,7,.52) 45%,rgba(28,14,7,.88) 100%),
             url("../images/design-bg-bokeh.webp") center/cover,#2b180d}
body{background:transparent}
.page{background:rgba(22,11,5,.34);box-shadow:0 0 0 1px rgba(255,214,150,.16),0 40px 90px -20px rgba(0,0,0,.6)}
@media (min-width:900px){
  body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;background-repeat:no-repeat}
  body::before{inset:0;filter:blur(3px);
    background-image:url("../images/design-leaf-maple-red.webp"),url("../images/design-leaf-plane.webp");
    background-size:230px auto,200px auto;background-position:left 5% top 10%,right 6% bottom 8%}
  body::after{inset:0;
    background-image:url("../images/design-leaf-oak.webp"),url("../images/design-leaf-maple-crimson.webp");
    background-size:120px auto,150px auto;background-position:right 9% top 20%,left 8% bottom 14%}
}

/* початок: баннер розчиняється в сцену, блок ціни без власного фону */
.hero{background:transparent}
.hero > img{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent 100%)}
.price-offer{margin-top:0;padding:24px 18px 38px;background:none;-webkit-mask-image:none;mask-image:none}
.price-offer::after{display:none}

/* кінець: форма на тій самій сцені, підвал продовжує її */
.form-sec{margin-top:0;padding:50px 18px 56px;background:none;-webkit-mask-image:none;mask-image:none}
.form-sec::before,.form-sec::after{display:none}
footer{background:rgba(15,8,3,.62);color:#c9b79a}

/* середина (main): світлі секції — картки на сцені */
.block.center > h2,.block.center > .sub{color:#fff4df}
.block.card1 > h2,.block.unite > h2,#reviews-sec > h2{color:var(--ink)}
.block.card1 > .sub,.block.unite > .sub{color:var(--muted)}
.block.center.dark-head > h2{color:#fff4df;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.block.center.dark-head > .sub{color:#ead6b3}

.block.center .picker{margin:34px 0;width:auto;border-radius:28px;padding:26px 16px 28px;
  border:1px solid rgba(255,255,255,.75);-webkit-mask-image:none;mask-image:none;
  box-shadow:0 1px 2px rgba(31,42,38,.12),0 30px 46px -24px rgba(0,0,0,.75)}
.picker > h2{color:var(--ink)}

.block.unite{margin:34px 0;margin-inline:0;padding:26px 18px 0;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0,#e2bb9d 120px,#e2bb9d 100%);
  box-shadow:0 1px 2px rgba(31,42,38,.12),0 30px 46px -24px rgba(0,0,0,.75)}
.block.unite > h2{margin-top:0}
.block.unite > img:last-of-type{-webkit-mask-image:none;mask-image:none}

/* Кнопка «Замовити» між підписом «Сума» і ціною: займає вільне місце, не ламає рядок на вузьких екранах */
.buy .sum{align-items:center;gap:10px}
.buy .sum .l{flex:none}
.buy .sum .sum-btn{flex:0 1 150px;min-width:0;width:auto;padding:13px 8px;font-size:15px;letter-spacing:.04em}
.buy .sum .r{flex:none}
.buy .sum .sum-btn{min-width:96px}
.buy .sum.stack{flex-wrap:wrap;row-gap:12px}
.buy .sum.stack .l{order:1;flex:1 1 auto}
.buy .sum.stack .r{order:2;text-align:right}
.buy .sum.stack .sum-btn{order:3;flex:1 0 100%;padding:14px 8px;font-size:16px}
@media (max-width:400px){
  .buy .sum{gap:8px}
  .buy .sum .l{font-size:18px}
  .buy .sum .save{font-size:13px}
  .buy .sum .r b{font-size:28px}
  .buy .sum .r .old{font-size:13px}
  .buy .sum .sum-btn{font-size:13.5px;padding:12px 4px;letter-spacing:.01em;min-width:76px}
}

/* Кілька сумок: під кожною карткою розцвітки — власний лічильник */
.swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.swatches .cell{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
@media (max-width:420px){
  .swatches .mini button{width:22px;height:22px;font-size:16px}
  .mini .n{min-width:14px;font-size:15px}
  .swatches .sw{padding:6px 4px 8px}
}
.mini{display:flex;align-items:center;justify-content:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:2px;
  box-shadow:inset 0 1px 2px rgba(31,42,38,.08)}
.swatches .mini button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--accent-dark);
  font:700 18px/1 var(--display);padding:0;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.swatches .mini button:active:not(:disabled){background:#e8f5ec}
.swatches .mini button:disabled{color:#c4c8c6;cursor:default}
.mini .n{min-width:18px;text-align:center;font:700 16px var(--display)}
.swatches .sw.cur:not([aria-pressed="true"]){border-color:rgba(31,42,38,.45);transform:translateY(-2px);box-shadow:0 14px 20px -12px rgba(31,42,38,.55)}
.hint-multi{margin:6px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}

/* Відгуки: картки як у прикладі — аватар, імʼя, вік і місто, зірки, текст, фото; у нашому стилі */
.rv-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:-4px 0 18px;padding:12px 14px;border-radius:18px;
  background:var(--warm);border:1px solid var(--line)}
.rv-sum-stars{color:#f5b301;font-size:26px;letter-spacing:3px;line-height:1}
.rv-sum-text b{font:700 30px/1 var(--display);color:var(--ink)}
.rv-sum-text span{font:600 16px var(--display);color:var(--muted);margin-left:2px}
.rv-sum-note{flex:1 0 100%;text-align:center;font-size:13.5px;color:var(--muted)}
#reviews-list{display:grid;gap:14px}
#reviews-sec{background:linear-gradient(180deg,#f7e6c4 0%,#efd29c 100%);border-color:#e7c98d}
#reviews-sec .rv-summary{background:rgba(255,255,255,.55);border-color:#e0c386}
.rv-sum-stars{display:flex;gap:3px;font-size:28px;line-height:1}
.rv-sum-stars i{font-style:normal;background:linear-gradient(90deg,#f5b301 var(--f),#d9c9a3 var(--f));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.rv-shot{width:100%;height:auto;display:block;border:0;border-radius:0;margin:0;filter:drop-shadow(0 10px 14px rgba(120,80,20,.28))}
.rv2{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;text-align:left;
  box-shadow:0 1px 2px rgba(31,42,38,.08),0 16px 26px -18px rgba(31,42,38,.45)}
.rv2 header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rv2 .av{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line),0 6px 10px -4px rgba(31,42,38,.4)}
.rv2 .who{min-width:0}
.rv2 .who b{display:block;font:600 18px/1.15 var(--display);letter-spacing:.01em}
.rv2 .who span{display:block;color:var(--muted);font-size:14px;margin-top:1px}
.rv2 .rv-stars{color:#f5b301;font-size:18px;letter-spacing:2px;margin:3px 0 0}
.rv2 p{margin:0;font-size:16px;line-height:1.45}
.rv-photos{display:grid;gap:8px;margin-top:12px}
.rv-photos.n1{grid-template-columns:minmax(0,56%)}
.rv-photos.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rv-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;box-shadow:0 8px 14px -8px rgba(31,42,38,.5)}
.rv-cta{margin:18px 0 12px}

/* «Складається»: картка з картинкою і короткими пунктами під нею */
/* без підзаголовка: оранжева риска стоїть під самим заголовком, текст по центру з рівними відступами */
.fold h2{text-align:center;padding:6px 6px 0}
.fold h2::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:#e7852b;margin:16px auto 16px}
.fold .fold-facts{margin:16px 6px 6px;text-align:left}
.fold .fold-facts li{margin-bottom:10px;font-size:16px;line-height:1.4}

/* «Доставка й оплата»: одна картка — заголовок, три значки-переваги і кроки з іконками */
.delivery .steps{margin:0;text-align:left}
.delivery .steps li{display:flex;gap:14px;align-items:flex-start;padding:14px;margin-bottom:10px;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:none}
.delivery .steps li:last-child{margin-bottom:0}
.delivery .steps li::before{display:none}
.delivery .steps .ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(180deg,#34a06c,#1f7a50);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 12px -6px rgba(15,70,48,.6)}
.delivery .steps .ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.delivery .steps b{display:block;font-size:16.5px}
.delivery .steps span{color:var(--muted);font-size:14.5px}
#reviews-sec{box-shadow:0 1px 2px rgba(31,42,38,.12),0 30px 46px -24px rgba(0,0,0,.75)}
.steps li{box-shadow:0 1px 2px rgba(31,42,38,.12),0 18px 30px -18px rgba(0,0,0,.7)}
.block.card1{box-shadow:0 1px 2px rgba(31,42,38,.12),0 30px 46px -24px rgba(0,0,0,.75)}

/* ── Відгуки: скриншоти лежать просто на осінній сцені ─────────────────────
   Жодної картки-підкладки під ними. Секція прозора, працюють тільки бічні
   відступи, проміжок між скриншотами і власна тінь кожного. */
#reviews-sec{background:none;border:0;border-radius:0;box-shadow:none;padding:0 16px 10px;margin-top:42px}
#reviews-sec > h2{color:#fff4df;text-shadow:0 2px 0 rgba(0,0,0,.35)}
#reviews-sec .rv-summary{background:rgba(255,251,242,.93);border:1px solid rgba(255,226,175,.7);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.65)}
#reviews-list{display:grid;gap:18px;margin-bottom:0}
.rv-shot{border-radius:18px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
/* «Залишити відгук» — та сама смарагдова «пігулка», лише вужча за головну CTA */
#rv-open{width:auto;margin:24px auto 0;padding:16px 32px;font-size:17px}

/* ── Поле «Оберіть колір» у формі замовлення ───────────────────────────────
   Виглядає як решта полів; стрілка — своя, бо нативна в кожному браузері інша. */
.fields select{width:100%;height:54px;padding:0 44px 0 14px;border:1px solid transparent;border-radius:14px;
  background:#fff;font-size:16px;font-family:inherit;color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px}
.fields select:focus{outline:0;box-shadow:0 0 0 3px rgba(52,160,108,.45)}
.fields select:invalid{color:#8a8579}            /* поки стоїть «Оберіть колір» — сірим, як плейсхолдер */
.f-hint{margin:-4px 0 14px;font-size:14px;line-height:1.35;color:#ead6b3;text-align:center}