/* Space Care — магазин засобів гігієни. Дизайн-система 2026. */
:root{
  --bg:#F2F7F9; --bg-2:#E8F2F5; --card:#fff; --ink:#0A2632; --ink-2:#1B4353;
  --muted:#5C7C8B; --line:#E0EBF0; --line-2:#CFE0E7;
  --teal:#12A5A2; --teal-d:#0A7F7D; --teal-l:#E4F7F6; --teal-x:#F3FCFB;
  --navy:#0E3345; --coral:#FF6A57; --amber:#F5A524; --green:#1FA971;
  --r-s:10px; --r:14px; --r-l:20px; --r-xl:28px; --r-pill:100px;
  --sh:0 1px 2px rgba(10,38,50,.04),0 6px 20px rgba(10,38,50,.05);
  --sh-l:0 4px 12px rgba(10,38,50,.06),0 18px 48px rgba(10,38,50,.09);
  --sh-t:0 10px 30px rgba(18,165,162,.18);
  --max:1240px; --ease:cubic-bezier(.22,1,.36,1);
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:var(--r-s)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--teal);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ---------- прогрес прокрутки ---------- */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--teal),#4FD1C5);transition:width .1s linear}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--teal);color:#fff;font-weight:600;font-size:15px;padding:13px 26px;
  border-radius:var(--r-pill);min-height:48px;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .25s}
.btn:hover{background:var(--teal-d);transform:translateY(-2px);box-shadow:var(--sh-t)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn-g{background:var(--card);color:var(--ink);border:1.5px solid var(--line-2)}
.btn-g:hover{background:var(--card);border-color:var(--teal);color:var(--teal-d);box-shadow:var(--sh)}
.btn-lg{padding:16px 32px;font-size:16px;min-height:56px}
.btn-sm{padding:9px 16px;font-size:13.5px;min-height:40px}

/* ---------- шапка ---------- */
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hd.stuck{border-color:var(--line);box-shadow:0 2px 20px rgba(10,38,50,.05)}
.hd-in{display:flex;align-items:center;gap:18px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--navy);flex-shrink:0}
.logo svg{width:32px;height:32px;transition:transform .4s var(--ease)}
.logo:hover svg{transform:rotate(-8deg) scale(1.08)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{font-size:14.5px;font-weight:500;color:var(--muted);padding:9px 13px;
  border-radius:var(--r-pill);position:relative;transition:color .18s,background .18s}
.nav a:hover{color:var(--teal-d);background:var(--teal-x)}
.nav a.on{color:var(--teal-d);background:var(--teal-l);font-weight:600}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.hd-tel{font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap;padding:0 4px}
.ico-btn{width:46px;height:46px;border-radius:var(--r);background:var(--teal-x);
  display:flex;align-items:center;justify-content:center;color:var(--teal-d);
  position:relative;transition:background .18s,color .18s,transform .2s var(--ease)}
.ico-btn:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
.cart-badge{position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--coral);color:#fff;font-size:11.5px;font-weight:700;
  display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(255,106,87,.4)}
.cart-badge.on{display:flex;animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.burger{display:none;width:46px;height:46px;border-radius:var(--r);border:1px solid var(--line-2);
  align-items:center;justify-content:center;color:var(--navy)}

/* ---------- пошук ---------- */
.srch{position:relative;flex:1;min-width:220px;max-width:320px}
.srch input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:var(--r-pill);
  background:#fff;padding:0 16px 0 42px;font:inherit;font-size:14.5px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.srch input::placeholder{color:#9BB3BF}
.srch input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-l)}
.srch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9BB3BF;pointer-events:none}
.srch-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);
  font-size:18px;display:none;width:24px;height:24px;border-radius:50%}
.srch.has .srch-x{display:block}
.srch-res{position:absolute;top:56px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--sh-l);max-height:420px;overflow-y:auto;padding:8px;
  display:none;z-index:110}
.srch-res.on{display:block}
.sr-i{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:var(--r);transition:background .15s}
.sr-i:hover{background:var(--teal-x)}
.sr-i img{width:42px;height:42px;object-fit:contain;border-radius:var(--r-s);background:var(--teal-x);flex-shrink:0}
.sr-i b{display:block;font-size:13.8px;font-weight:600;line-height:1.3}
.sr-i span{font-size:12.5px;color:var(--muted)}
.sr-p{margin-left:auto;font-weight:700;font-size:13.5px;color:var(--teal-d);white-space:nowrap}
.sr-none{padding:22px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- мобільне меню ---------- */
.mnav{position:fixed;inset:0;background:var(--bg);z-index:130;transform:translateY(-100%);
  transition:transform .38s var(--ease);display:flex;flex-direction:column;padding:16px 20px 30px;overflow-y:auto}
.mnav.on{transform:translateY(0)}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:54px;margin-bottom:14px}
.mnav a.ml{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;
  font-size:16px;font-weight:600;min-height:54px}
.mnav a.ml span{color:var(--teal);font-size:18px}
.mnav .mfoot{margin-top:auto;padding-top:22px;color:var(--muted);font-size:14px}

/* ---------- герой з паралаксом ---------- */
.hero{position:relative;padding:70px 0 84px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-20% -10%;z-index:-2;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.b1{width:520px;height:520px;background:#9FE6E2;top:-8%;left:-6%}
.b2{width:440px;height:440px;background:#BFE3F2;top:22%;right:-8%}
.b3{width:340px;height:340px;background:#FFD9CF;bottom:-14%;left:32%;opacity:.42}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 15px 7px 9px;font-size:13px;font-weight:600;color:var(--teal-d);
  box-shadow:var(--sh);margin-bottom:20px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 4px var(--teal-l);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--teal-l)}50%{box-shadow:0 0 0 8px rgba(18,165,162,.12)}}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:800;
  margin-bottom:20px;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--teal),#3FC9BE 60%,#6ED3CB);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-2);max-width:50ch;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap}
.hf{display:flex;flex-direction:column}
.hf b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.hf span{font-size:13px;color:var(--muted)}
/* колаж товарів із паралаксом */
.hero-art{position:relative;height:440px}
.ha{position:absolute;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-l);
  padding:16px;will-change:transform;transition:box-shadow .3s}
.ha img{width:100%;height:100%;object-fit:contain}
.ha1{width:47%;height:60%;top:0;left:2%}
.ha2{width:42%;height:48%;top:14%;right:0}
.ha3{width:38%;height:42%;bottom:2%;left:22%}
.ha-tag{position:absolute;background:#fff;border-radius:var(--r-pill);padding:9px 15px;
  box-shadow:var(--sh-l);font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;
  white-space:nowrap;will-change:transform}
.ht1{top:6%;right:2%;color:var(--teal-d)}
.ht2{bottom:14%;right:6%;color:var(--navy)}

/* ---------- стрічка довіри ---------- */
.ribbon{background:var(--navy);color:#CFE6ED;padding:13px 0;overflow:hidden;white-space:nowrap}
.ribbon-track{display:flex;width:max-content;animation:slide 38s linear infinite;will-change:transform}
.ribbon-grp{display:flex;gap:44px;padding-right:44px}
.ribbon span{font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:9px}
.ribbon b{color:#fff;font-weight:600}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ribbon:hover .ribbon-track{animation-play-state:paused}

/* ---------- секції ---------- */
section{position:relative}
.sec{padding:64px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.03em;font-weight:800;line-height:1.1}
.sec-h p{color:var(--muted);font-size:15.5px;margin-top:7px;max-width:56ch}
.sec-h .more{font-weight:600;color:var(--teal-d);font-size:15px;display:inline-flex;align-items:center;gap:7px}
.sec-h .more:hover span{transform:translateX(4px)}
.sec-h .more span{transition:transform .22s var(--ease)}

/* ---------- плитки категорій (курсор-підсвітка) ---------- */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px 20px 22px;overflow:hidden;transition:transform .3s var(--ease),border-color .25s,box-shadow .3s}
.cat::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(200px circle at var(--cx,50%) var(--cy,50%),rgba(18,165,162,.13),transparent 70%)}
.cat:hover{transform:translateY(-5px);border-color:var(--teal);box-shadow:var(--sh-l)}
.cat:hover::before{opacity:1}
.cat-ico{width:52px;height:52px;border-radius:var(--r);background:var(--teal-l);display:flex;
  align-items:center;justify-content:center;color:var(--teal-d);margin-bottom:14px;
  transition:transform .35s var(--ease)}
.cat:hover .cat-ico{transform:scale(1.1) rotate(-6deg)}
.cat b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;position:relative}
.cat span{font-size:13px;color:var(--muted);position:relative}

/* ---------- сітка товарів ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
  transform-style:preserve-3d;will-change:transform}
.pc:hover{border-color:var(--line-2);box-shadow:var(--sh-l)}
.pc-img{position:relative;aspect-ratio:1;background:linear-gradient(160deg,var(--teal-x),#fff);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.pc-img img{max-height:100%;width:auto;object-fit:contain;transition:transform .45s var(--ease)}
.pc:hover .pc-img img{transform:scale(1.07) translateY(-4px)}
.pc-img.noimg::after{content:attr(data-letter);font-size:52px;font-weight:800;color:var(--teal);opacity:.22}
.pc-badge{position:absolute;top:12px;left:12px;background:var(--coral);color:#fff;font-size:11.5px;
  font-weight:700;padding:5px 11px;border-radius:var(--r-pill);letter-spacing:.02em;z-index:2}
.pc-badge.hit{background:var(--amber)}
.pc-b{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
.pc-brand{font-size:11.5px;font-weight:700;color:var(--teal-d);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:5px}
.pc-name{font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em;margin-bottom:6px}
.pc-name a::after{content:'';position:absolute;inset:0;z-index:1}
.pc-note{font-size:12.5px;color:var(--muted);line-height:1.4;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{margin-top:auto;display:flex;align-items:center;gap:10px}
.pc-price{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.pc-price span{font-size:13px;font-weight:600;color:var(--muted)}
.pc-btn{margin-left:auto;background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:13.5px;
  padding:10px 15px;border-radius:var(--r-pill);min-height:42px;z-index:2;position:relative;
  transition:background .2s,color .2s,transform .2s var(--ease)}
.pc-btn:hover{background:var(--teal);color:#fff;transform:scale(1.05)}
.pc-btn:disabled{background:var(--green);color:#fff}

/* ---------- фільтри ---------- */
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;
  margin-bottom:24px;position:sticky;top:82px;z-index:40;box-shadow:var(--sh)}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.frow+.frow{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.flabel{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;min-width:74px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:8px 16px;
  font-size:13.8px;font-weight:600;color:var(--ink-2);min-height:40px;
  transition:all .2s var(--ease)}
.chip:hover{border-color:var(--teal);color:var(--teal-d)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:var(--sh-t)}
.fcount{margin-left:auto;font-size:13.5px;color:var(--muted);font-weight:500}

/* ---------- сторінка товару ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--teal-d)}
.crumbs i{font-style:normal;opacity:.5}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:14px 0 20px;align-items:start}
.pd-media{position:sticky;top:96px}
.pd-img{background:linear-gradient(160deg,var(--teal-x),#fff);border:1px solid var(--line);
  border-radius:var(--r-xl);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  padding:44px;overflow:hidden;position:relative;cursor:zoom-in}
.pd-img img{max-height:100%;width:auto;object-fit:contain;transition:transform .35s var(--ease);will-change:transform}
.pd-img.zoom img{transform:scale(2);transition:transform .12s linear}
.pd-img.noimg::after{content:attr(data-letter);font-size:130px;font-weight:800;color:var(--teal);opacity:.2}
.pd-hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px}
.pd-info h1{font-size:clamp(25px,3.4vw,36px);line-height:1.14;letter-spacing:-.03em;font-weight:800;margin-bottom:12px}
.pd-brand{font-size:12px;font-weight:700;color:var(--teal-d);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.pd-lead{font-size:16.5px;color:var(--ink-2);margin-bottom:22px}
.pd-buy{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;
  box-shadow:var(--sh);margin-bottom:22px}
.pd-price{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1}
.pd-price span{font-size:17px;font-weight:600;color:var(--muted)}
.pd-stock{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--green);margin-top:9px}
.pd-stock i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.pd-supply{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.45}
.pd-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pd-actions .btn{flex:1;min-width:180px}
.pd-feats{list-style:none;margin-bottom:24px}
.pd-feats li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.pd-feats li:last-child{border-bottom:none}
.pd-feats svg{flex-shrink:0;margin-top:3px;color:var(--teal)}
.pd-body{font-size:15.5px;color:var(--ink-2);line-height:1.68}
.pd-body h2{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:30px 0 12px}
.pd-body p{margin-bottom:13px}
.specs{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:8px}
.specs tr{border-bottom:1px solid var(--line)}
.specs td{padding:11px 0}
.specs td:first-child{color:var(--muted);width:44%}
.specs td:last-child{font-weight:600;text-align:right}
.faq-i{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:9px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;font-size:15px;font-weight:600;text-align:left;min-height:54px}
.faq-q i{font-style:normal;font-size:20px;color:var(--teal);transition:transform .28s var(--ease);flex-shrink:0}
.faq-i.on .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.faq-a p{padding:0 18px 16px;font-size:14.8px;color:var(--ink-2);line-height:1.6}

/* головна кнопка героя: підбір важливіший за перехід у каталог */
.btn-pick{box-shadow:var(--sh-t)}
.btn-pick:hover{box-shadow:0 14px 36px rgba(18,165,162,.28)}

/* шапка липка й заввишки 71px — інакше вона накриває верх секції,
   до якої веде якір */
section[id]{scroll-margin-top:88px}

/* ---------- підбір (квіз) ---------- */
.quiz{background:linear-gradient(140deg,var(--navy),#134A63);color:#fff;
  border-radius:var(--r-xl);padding:38px 40px;position:relative;overflow:hidden}
.quiz::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,165,162,.45),transparent 70%);
  top:-130px;right:-70px;pointer-events:none}
.quiz p{margin:0}

.q-top{display:grid;grid-template-columns:minmax(0,330px) 1fr;gap:46px;
  align-items:stretch;position:relative}
.q-intro{display:flex;flex-direction:column}
.q-step{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#3FD0CD;margin-bottom:10px;position:relative}
.quiz h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.15;
  margin-bottom:10px;position:relative;text-wrap:balance}
.q-lead{color:#B9D6E1;font-size:15.5px;max-width:42ch}
.q-dis{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  color:#8FBECE;font-size:13px;max-width:42ch}

.q-groups{display:flex;flex-direction:column;gap:20px}
.q-gl{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#8FBECE;margin-bottom:11px}
.q-opts{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.q-opt{display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.18);color:#fff;
  border-radius:var(--r-pill);padding:11px 20px;font-size:14.5px;font-weight:600;
  min-height:46px;cursor:pointer;text-decoration:none;
  transition:background .22s var(--ease),border-color .22s var(--ease),
  transform .22s var(--ease)}
.q-opt:hover{text-decoration:none}
.q-opt:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);
  transform:translateY(-2px)}
.q-opt:focus-visible{outline:2px solid #3FD0CD;outline-offset:3px}
.q-opt.on{background:var(--teal);border-color:var(--teal)}

/* вставка з відповіддю */
.q-res{margin-top:26px;position:relative;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-l);padding:24px 26px}
.q-ph{color:#8FBECE;font-size:14.5px;display:flex;align-items:center;gap:10px}
.q-ph span{width:22px;height:22px;border-radius:50%;flex:0 0 22px;
  border:1.5px dashed rgba(255,255,255,.3)}
.q-body{display:none}
.q-res.on .q-body{display:block;animation:fadeup .45s var(--ease)}
.q-res.on .q-ph{display:none}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.q-d{color:#D3E7EE;font-size:15.5px;line-height:1.6;margin-bottom:18px;max-width:64ch}

.q-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-bottom:20px}
.q-prods:empty{display:none}
.q-prod{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px;
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.q-prod:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.q-prod-b{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#8FBECE}
.q-prod-n{color:#fff;font-size:15px;font-weight:600;line-height:1.35;text-decoration:none}
.q-prod-n:hover{text-decoration:underline}
.q-prod-f{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.q-prod-p{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.q-prod-add{background:var(--teal);border:0;color:#fff;border-radius:var(--r-pill);
  padding:9px 16px;font-size:13.5px;font-weight:600;min-height:38px;white-space:nowrap;
  cursor:pointer;transition:filter .2s var(--ease),transform .2s var(--ease)}
.q-prod-add:hover{filter:brightness(1.12);transform:translateY(-1px)}
.q-prod-add:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:1000px){
  .q-top{grid-template-columns:1fr;gap:24px;align-items:start}
  .q-intro{display:block}
  .q-lead,.q-dis{max-width:60ch}
  .q-dis{margin-top:14px}
  .q-prods{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pc-note{font-size:13.5px;line-height:1.45}
  .quiz{padding:28px 22px}
  .q-res{padding:20px 18px}
  .q-prods{grid-template-columns:1fr}
  .q-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .q-opt{padding:10px 12px;font-size:13px;line-height:1.28;min-height:46px;
    border-radius:var(--r-s);text-align:center;display:flex;align-items:center;
    justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .q-res.on .q-body{animation:none}
  .q-opt,.q-prod,.q-prod-add{transition:none}
}

/* ---------- довіра / переваги ---------- */
.tr{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tr-i{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px 22px;
  transition:transform .3s var(--ease),box-shadow .3s}
.tr-i:hover{transform:translateY(-4px);box-shadow:var(--sh-l)}
.tr-i .ic{width:46px;height:46px;border-radius:var(--r-s);background:var(--teal-l);color:var(--teal-d);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.tr-i b{display:block;font-size:16px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.tr-i p{font-size:14px;color:var(--muted);line-height:1.5}

/* ---------- стаття / текстові сторінки ---------- */
.doc{max-width:760px;margin:0 auto;padding:26px 0 20px}
.doc h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.03em;font-weight:800;line-height:1.1;margin-bottom:14px}
.doc .intro{font-size:17.5px;color:var(--ink-2);margin-bottom:26px}
.doc h2{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:34px 0 12px}
.doc h3{font-size:17px;font-weight:600;margin:22px 0 8px}
.doc p{margin-bottom:13px;font-size:15.8px;color:var(--ink-2);line-height:1.68}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin:7px 0;font-size:15.8px;color:var(--ink-2)}
.doc li::marker{color:var(--teal)}
.doc a{color:var(--teal-d);text-decoration:underline;text-underline-offset:2px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:16px 0}
.doc th,.doc td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.doc th{background:var(--teal-x);font-weight:700}
.callout{background:#fff;border:1.5px solid var(--teal-l);border-left:4px solid var(--teal);
  border-radius:var(--r);padding:16px 20px;margin:18px 0}
.callout p:last-child{margin-bottom:0}

/* «продовжити покупки» — тиха дія під головною кнопкою */
.dr-cont{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:10px;min-height:44px;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:14px;font-weight:600;border-radius:var(--r-pill);
  transition:color .18s,background .18s}
.dr-cont:hover{color:var(--teal-d);background:var(--teal-x)}
.dr-cont:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.dr-cont span{transition:transform .22s var(--ease)}
.dr-cont:hover span{transform:translateX(-3px)}

/* ---------- пошук на телефоні ---------- */
/* правило .srch{display:none!important} ховає і поле в мобільному меню.
   Повертаємо його: на телефоні пошук потрібен найбільше. */
.mnav .srch{display:block!important;flex:none;max-width:none;min-width:0;margin-bottom:6px}
.mnav .srch input{height:50px}
.mnav .srch-res{position:static;box-shadow:none;margin-top:8px;max-height:50vh}

/* ---------- перемикач мови ---------- */
.lng{position:relative}
.lng-b{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 12px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);
  color:var(--ink-2);font-size:13.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;
  transition:border-color .18s,color .18s}
.lng-b:hover{border-color:var(--teal);color:var(--teal-d)}
.lng-b:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.lng-c{font-size:10px;transition:transform .2s var(--ease)}
.lng.on .lng-c{transform:rotate(180deg)}
.lng-m{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;z-index:120;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-l);padding:6px;display:none}
.lng.on .lng-m{display:block;animation:fadeup .22s var(--ease)}
.lng-m a{display:block;padding:10px 12px;border-radius:var(--r-s);color:var(--ink-2);
  font-size:14.5px;text-decoration:none;transition:background .16s,color .16s}
.lng-m a:hover{background:var(--teal-x);color:var(--teal-d)}
.lng-m a.on{color:var(--teal-d);font-weight:700;background:var(--teal-l)}
.mlng{margin:16px 0 4px}
.mlng:empty{display:none}
.mlng .lng-b{width:100%;justify-content:center;min-height:46px}
.mlng .lng-m{right:auto;left:0;width:100%}
@media (max-width:860px){
  .lng{order:-1}
}

/* ---------- підвал ---------- */
.ft{background:var(--navy);color:#B9D6E1;margin-top:70px;padding:60px 0 26px;
  position:relative;overflow:hidden}
.ft::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  top:-260px;left:-120px;
  background:radial-gradient(circle,rgba(18,165,162,.22),transparent 70%);pointer-events:none}

.ft-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,2.65fr);
  gap:52px;position:relative}

/* ліворуч: хто ми і як звʼязатися */
.ft-logo{font-weight:800;font-size:21px;color:#fff;margin-bottom:14px;
  display:flex;align-items:center;gap:10px}
.ft-about{color:#9EC2D0;font-size:14px;line-height:1.62;max-width:42ch;margin:0}
.ft-tel{display:inline-block;color:#fff;font-weight:700;font-size:19px;
  margin-top:16px;letter-spacing:-.01em;text-decoration:none}
.ft-tel:hover{color:var(--teal)}
.ft-geo{color:#7FA6B7;font-size:13px;margin-top:6px}
.ft-soc{display:flex;gap:10px;margin-top:20px}
.ft-soc a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#CFE6ED;
  transition:background .2s,border-color .2s,transform .25s var(--ease)}
.ft-soc a:hover{background:var(--teal);border-color:var(--teal);color:#fff;
  transform:translateY(-3px)}

/* праворуч: три колонки посилань */
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.ft h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:15px}
.ft-col a{display:block;color:#9EC2D0;font-size:14px;margin:9px 0;
  text-decoration:none;transition:color .18s}
.ft-col a:hover{color:#fff}
.ft-pick{color:#5FD9CE!important;font-weight:600}
.ft-pick:hover{color:#fff!important}
.ft-pick span{display:inline-block;transition:transform .22s var(--ease)}
.ft-pick:hover span{transform:translateX(3px)}

/* низ: проєкти тихим рядком, копірайт і студія в один рядок */
.ft-bot{margin-top:44px;padding-top:20px;position:relative;
  border-top:1px solid rgba(255,255,255,.13)}
.ft-proj{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  font-size:13px;margin:0 0 14px}
.ft-proj>span{color:#7FA6B7;font-weight:600}
.ft-proj a{display:inline;color:#9EC2D0;text-decoration:none;transition:color .18s}
.ft-proj a:hover{color:#fff;text-decoration:underline}
.ft-proj i{color:#4E7488;font-style:normal}
.ft-legal{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:6px 20px;font-size:12.8px;color:#7FA6B7}
.ft-made a{display:inline;color:#5FD9CE;font-weight:600;text-decoration:none;
  white-space:nowrap}
.ft-made a:hover{color:#fff}

@media (max-width:980px){
  .ft-top{grid-template-columns:1fr;gap:38px}
  .ft-about{max-width:60ch}
}
@media (max-width:640px){
  .ft{padding:44px 0 22px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:26px 20px}
  .ft-col a{margin:8px 0}
  .ft-legal{flex-direction:column;gap:6px}
}

/* ---------- кошик ---------- */
.ovl{position:fixed;inset:0;background:rgba(10,38,50,.5);z-index:140;opacity:0;visibility:hidden;
  transition:opacity .28s,visibility .28s;backdrop-filter:blur(2px)}
.ovl.on{opacity:1;visibility:visible}
.drw{position:fixed;top:0;right:0;height:100%;width:440px;max-width:94vw;background:var(--bg);
  z-index:150;transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;box-shadow:-14px 0 50px rgba(10,38,50,.2)}
.drw.on{transform:translateX(0)}
.dr-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  background:#fff;border-bottom:1px solid var(--line)}
.dr-h h3{font-size:18.5px;font-weight:700;letter-spacing:-.02em}
.dr-x{width:40px;height:40px;border-radius:var(--r-s);background:var(--bg);font-size:20px;color:var(--muted)}
.dr-x:hover{background:var(--teal-l);color:var(--teal-d)}
.ship{background:#fff;border-bottom:1px solid var(--line);padding:13px 22px}
.ship-t{font-size:13px;color:var(--muted);margin-bottom:7px}
.ship-t b{color:var(--teal-d)}
.ship-bar{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.ship-bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal),#4FD1C5);transition:width .5s var(--ease)}
.dr-b{flex:1;overflow-y:auto;padding:16px 18px}
.ci{display:flex;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:12px;margin-bottom:11px;animation:fadeup .3s var(--ease)}
.ci-img{width:62px;height:62px;border-radius:var(--r-s);background:var(--teal-x);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px}
.ci-img img{max-height:54px;width:auto;object-fit:contain}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:13.8px;font-weight:600;line-height:1.32}
.ci-price{font-size:13px;color:var(--muted);margin-top:3px}
.ci-ctrl{display:flex;align-items:center;gap:11px;margin-top:9px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:40px;height:40px;font-size:17px;color:var(--teal-d);transition:background .15s}
.qty button:hover{background:var(--teal-l)}
.qty span{min-width:28px;text-align:center;font-size:13.5px;font-weight:700}
.ci-rm{margin-left:auto;color:#C2425A;font-size:13.5px;min-height:40px;display:inline-flex;align-items:center;padding:0 2px}
.ci-rm:hover{text-decoration:underline}
.dr-empty{text-align:center;color:var(--muted);padding:56px 22px;font-size:15px;line-height:1.7}
.dr-f{background:#fff;border-top:1px solid var(--line);padding:18px 22px 22px}
.dr-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.dr-tot span{font-size:15px;color:var(--muted)}
.dr-tot b{font-size:25px;font-weight:800;letter-spacing:-.02em}
.dr-f .btn{width:100%}
.co-form{display:none;margin-top:14px}
.co-form input,.co-form textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;font:inherit;font-size:14.5px;margin-bottom:9px;background:#fff;min-height:46px}
.co-form input:focus,.co-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
.co-form textarea{min-height:70px;resize:vertical}
.co-ok{display:none;text-align:center;padding:26px 10px}
.co-ok .ok-ic{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:30px;
  animation:pop .5s var(--ease)}
.co-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:10px}

/* ---------- «летюча» точка в кошик ---------- */
.fly{position:fixed;width:16px;height:16px;border-radius:50%;background:var(--teal);z-index:200;
  pointer-events:none;box-shadow:0 0 0 5px var(--teal-l)}

/* ---------- мобільна панель ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s var(--ease)}
body.has-cart .mbar{transform:translateY(0)}
.mbar .btn{flex:1}

/* ---------- поява при прокрутці ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media(max-width:1080px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .tr{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1.4fr 1fr 1fr}
  .hero-grid{gap:34px}
}
@media(max-width:900px){
  .nav,.hd-tel,.srch{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{height:300px;order:-1;margin-bottom:8px}
  .hero{padding:40px 0 56px}
  .pd{grid-template-columns:1fr;gap:26px}
  .pd-media{position:static}
  .pd-img{padding:30px}
  .filters{position:static}
  .mbar{display:flex}
  body.has-cart{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  body.has-cart{padding-bottom:76px}
}
@media(max-width:680px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cats{grid-template-columns:repeat(2,1fr);gap:10px}
  .tr{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr;gap:26px}
  .sec{padding:44px 0}
  .quiz{padding:26px 22px}
  .pc-b{padding:13px 13px 14px}
  .pc-name{font-size:14px}
  .pc-price{font-size:17px}
  .pc-btn{padding:9px 12px;font-size:12.8px}
  .hero-facts{gap:18px}
  .flabel{min-width:100%;margin-bottom:2px}
  .doc table{font-size:13.5px}
  .doc th,.doc td{padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .blob,.ha,.ha-tag{transform:none!important}
}

/* ========== трек-паралакс: прокрутка вниз рухає стрічку вбік ========== */
.track{position:relative;height:300vh;background:linear-gradient(180deg,var(--bg) 0%,#E4F0F4 12%,#E4F0F4 88%,var(--bg) 100%)}
.track-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;padding:70px 0 40px;isolation:isolate}
.tk-kinetic{position:absolute;top:46%;left:0;right:0;transform:translateY(-50%);z-index:-1;
  overflow:hidden;white-space:nowrap;pointer-events:none;opacity:.075}
.tk-kin-row{display:inline-flex;font-family:var(--f);font-weight:800;font-size:clamp(90px,17vw,230px);
  letter-spacing:-.04em;color:var(--navy);will-change:transform}
.tk-kin-row span{padding-right:.35em}
.tk-kin-row i{font-style:normal;color:var(--teal)}
.tk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:56px;
  margin-bottom:30px;flex-wrap:wrap}
.tk-eyebrow{display:block;font-family:var(--f);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-d);margin-bottom:10px}
.tk-head h2{font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:800;max-width:20ch}
.tk-meter{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--f);
  flex-shrink:0;min-width:150px}
.tk-meter b{font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1}
.tk-meter span{font-size:17px;font-weight:600;color:var(--muted)}
.tk-bar{width:100%;height:4px;border-radius:var(--r-pill);background:var(--line-2);margin-top:12px;overflow:hidden}
.tk-bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal),#4FD1C5)}
.tk-rail{display:flex;gap:22px;padding-left:max(20px,calc((100vw - var(--max))/2 + 20px));
  will-change:transform}
.tk-card{flex:0 0 420px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:30px 30px 26px;box-shadow:var(--sh);display:flex;flex-direction:column;min-height:290px}
.tk-num{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--teal);margin-bottom:14px;
  font-variant-numeric:tabular-nums}
.tk-card h3{font-size:25px;font-weight:800;letter-spacing:-.025em;margin-bottom:10px}
.tk-card p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
.tk-hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:22px;letter-spacing:.04em}

/* ========== блок клініки ========== */
.cl-grid{background:linear-gradient(140deg,var(--navy),#134A63);border-radius:var(--r-xl);
  padding:40px 42px;color:#fff;position:relative;overflow:hidden}
.cl-grid::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,165,162,.4),transparent 70%);top:-160px;right:-100px}
.cl-main{position:relative}
.cl-grid h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.03em;font-weight:800;margin-bottom:14px}
.cl-grid p{color:#BDD8E3;font-size:16px;max-width:62ch;margin-bottom:12px}
.cl-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 18px}
.cl-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-l);padding:20px 21px;display:flex;flex-direction:column;gap:7px;
  transition:background .25s,border-color .25s,transform .3s var(--ease)}
.cl-card:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);transform:translateY(-4px)}
.cl-card b{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#fff}
.cl-card span{font-size:14px;color:#B5D2DE;line-height:1.5;flex:1}
.cl-card em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--teal);
  display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.cl-card svg{color:var(--teal);margin-bottom:2px}
.cl-more a{color:#fff;font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px}
.cl-more a:hover{border-color:var(--teal)}

/* ========== партнерський рядок і кредит студії ========== */
.ft-part{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 0 0;
  margin-top:30px;border-top:1px solid rgba(255,255,255,.13);font-size:13.5px}
.ft-part>span{color:#7FA6B7;font-weight:600}
.ft-part a{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 15px;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);color:#CFE6ED;
  transition:border-color .2s,background .2s}
.ft-part a:hover{border-color:var(--teal);background:rgba(18,165,162,.16);color:#fff}
.ft-made a{color:var(--teal);font-weight:600}
.ft-made a:hover{color:#fff}

/* ========== CTA-блок у статтях ========== */
.cta-box{background:#fff;border:1.5px solid var(--teal-l);border-radius:var(--r-l);
  padding:24px 26px;margin:32px 0 8px}
.cta-box b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.cta-box p{color:var(--muted);font-size:15px;margin-bottom:16px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.pg-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.pg-nav a{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:14px;
  color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s}
.pg-nav a:hover{border-color:var(--teal);color:var(--teal-d)}

/* ========== список статей ========== */
.post-list{display:grid;gap:13px;margin:22px 0 8px;padding:0;list-style:none}
.post-list li{margin:0;display:block}
.post-list a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);
  background:#fff;text-decoration:none;color:var(--ink);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s}
.post-list a:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--sh-l)}
.post-list b{display:block;font-size:18.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.post-list span{display:block;font-size:15px;color:var(--muted);line-height:1.55}
.post-list em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:9px;
  letter-spacing:.03em}
.doc .pub{font-size:12.5px;color:var(--muted);margin:-8px 0 22px;padding-bottom:16px;
  border-bottom:1px solid var(--line);letter-spacing:.03em}

@media(max-width:1080px){
  .cl-links{grid-template-columns:1fr}
  .tk-card{flex:0 0 320px}
}
@media(max-width:900px){
  /* на мобільному вимикаємо скрол-джекінг: звичайний вертикальний блок */
  .track{height:auto;background:#E4F0F4;padding:48px 0}
  .track-sticky{position:static;height:auto;overflow:visible}
  .tk-kinetic{display:none}
  .tk-meter{display:none}
  .tk-hint{display:none}
  .tk-rail{flex-direction:column;padding-left:0;padding:0 20px;transform:none!important;gap:14px}
  .tk-card{flex:none;min-height:0;padding:24px 24px 22px}
  .tk-head{padding:0 20px}
  .cl-grid{padding:28px 24px}
}
@media(prefers-reduced-motion:reduce){
  .track{height:auto}
  .track-sticky{position:static;height:auto}
  .tk-rail{flex-wrap:wrap;transform:none!important}
  .tk-kin-row{transform:none!important}
}
.faq-h{margin:0;font-size:inherit;font-weight:inherit}
.faq-h .faq-q{width:100%}

/* ── кнопки всередині текстових блоків: контраст важливіший за стиль посилання ── */
.doc a.btn,.doc a.btn:hover{color:#fff;text-decoration:none;border-bottom:none}
.doc a.btn-g,.doc a.btn-g:hover{color:var(--ink)}
.doc a.chip,.doc a.chip:hover{text-decoration:none;color:var(--ink-2)}
.doc a.chip:hover{color:var(--teal-d)}
.cta-box a.btn{text-decoration:none}
/* трохи темніший бірюзовий — контраст із білим 4.6:1 */
:root{--teal:#0E9490;--teal-d:#08706E}
.pc-btn{color:#06615F}
.tk-card a.btn-g{color:var(--ink)}
/* --muted світлий на 4.46:1 — трохи темнішаємо до 4.7:1 */
:root{--muted:#54737F}
/* білий текст на бірюзовому має давати ≥4.5:1 — беремо #0A7B78 (5.10:1) */
:root{--teal:#0A7B78;--teal-d:#066360}
.pc-btn{color:#066360}
/* світлий бірюзовий для тексту на темному тлі (7.4:1) */
.ft-made a,.cl-card em,.mnav a.ml span{color:#5FD9CE}
.ft-made a:hover{color:#fff}
/* явний колір тла під градієнтами — щоб контраст був передбачуваним */
.quiz{background-color:var(--navy)}
.cl-grid{background-color:var(--navy)}
.ft{background-color:var(--navy)}
/* факти в герої: тепер текстові, а не цифрові */
.hero-facts{gap:22px}
.hf{max-width:230px}
.hf b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin-bottom:3px}
.hf span{font-size:13px;line-height:1.45}
@media(max-width:680px){.hf{max-width:none;flex:1 1 100%}.hero-facts{gap:14px}}

/* ── заглушка для товарів без фото: фірмова плитка замість голої літери ── */
.pc-img.noimg,.pd-img.noimg{background:linear-gradient(150deg,#E8F6F5 0%,#F7FCFB 55%,#EEF6F9 100%);
  position:relative}
.pc-img.noimg::before,.pd-img.noimg::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 22% 26%,rgba(10,123,120,.09) 0 2px,transparent 2px),
                   radial-gradient(circle at 72% 68%,rgba(10,123,120,.07) 0 2px,transparent 2px);
  background-size:44px 44px}
.pc-img.noimg::after,.pd-img.noimg::after{content:attr(data-letter);position:relative;
  font-weight:800;letter-spacing:-.04em;color:var(--teal-d);opacity:.5;
  display:flex;align-items:center;justify-content:center}
.pc-img.noimg{flex-direction:column;gap:8px}
.noimg-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--f);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-d);opacity:.75;z-index:2}
.pd-img.noimg .noimg-cap{bottom:26px;font-size:12.5px}

/* Шапка магазину: меню ховається раніше, ніж починає вилазити (fix 14.08) */
@media(max-width:1120px){.nav a{font-size:14px}.hd-in{gap:12px}.hd-r{gap:6px}}
@media(max-width:1080px){.nav,.hd-tel,.srch{display:none!important}.burger{display:flex!important}}

/* відгуки покупців */
.rv-top{display:flex;align-items:center;gap:12px;margin:6px 0 16px}
.rv-avg{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1}
.rv-s{color:var(--amber);letter-spacing:.08em;font-size:14px}
.rv-s-b{font-size:19px}
.rv-n{font-size:13.5px;color:var(--muted)}
.rv-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.rv-i{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:15px 17px}
.rv-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rv-h b{font-size:15px;font-weight:700}
.rv-h time{font-size:12.5px;color:var(--muted);margin-left:auto}
.rv-i p{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0}
.rv-note{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:520px){.rv-h time{margin-left:0;width:100%}}

/* попередження про упаковку та подібні уточнення */
.pd-note{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:10px;padding-left:11px;border-left:2px solid var(--line-2)}

/* спосіб отримання у формі замовлення */
.co-dlv{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.co-dlv label{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;transition:border-color .2s,background .2s}
.co-dlv label:has(input:checked){border-color:var(--teal);background:var(--teal-x)}
.co-dlv input[type=radio]{width:18px;height:18px;min-width:18px;flex:0 0 18px;margin:2px 0 0;padding:0;accent-color:var(--teal);appearance:auto}
.co-dlv span{display:flex;flex-direction:column;gap:2px;font-size:14.5px;min-width:0;flex:1}
.co-dlv i{font-style:normal;font-size:12.5px;color:var(--muted)}
.co-pick{font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--teal-x);border-radius:var(--r-s);padding:11px 13px;margin-bottom:12px}
.co-pick a{color:var(--teal-d);font-weight:600}

/* офіційна ціна виробника поруч із нашою */
.pd-rrp{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45}
.pd-rrp b{color:var(--ink-2);font-weight:700}
.pd-rrp span{font-size:11.5px;opacity:.75}

/* підказка про збільшення по наведенню — тільки для миші:
   на телефоні курсора немає, і рядок збиває з пантелику */
@media (max-width:640px){.pd-hint{display:none}}

/* ── футер: карта, рейтинг, маршрут ──────────────────────────────────
   Карта нижче першого екрана й вантажиться ліниво — на LCP не впливає.
   Пропорція через aspect-ratio: місце зарезервоване до завантаження,
   макет не смикається.

   Праворуч одна картка, а не дві: рейтинг зверху, адреса посередині,
   кнопка внизу. Дві окремі картки тягнулись на висоту карти й лишали
   порожнечу між собою.

   Кольори всередині картки задані явно. Футер темний, і без цього
   текст успадковує світлий колір — на білому тлі його не видно. */
.ft-map{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;
  margin:30px 0 6px;align-items:stretch}
.ft-map-box{border-radius:var(--r);overflow:hidden;background:#dfe9ee;
  aspect-ratio:16/10}
.ft-map-box iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)}

.ft-info{background:var(--card);border-radius:var(--r);padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh)}

.ft-rev{display:flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line)}
.ft-rev-num{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--ink)}
.ft-rev-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft-rev-stars{color:var(--amber);font-size:13px;letter-spacing:.08em}
.ft-rev-sub{color:var(--muted);font-size:13px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ft-rev-go{margin-left:auto;color:var(--teal-d);font-weight:700;font-size:18px;
  transition:transform .2s}
.ft-rev:hover .ft-rev-go{transform:translateX(3px)}

.ft-addr b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}
.ft-addr p{margin:0 0 3px;color:var(--muted);font-size:13.5px;line-height:1.55}

.ft-route{margin-top:auto;display:flex;align-items:center;justify-content:center;
  gap:7px;min-height:48px;padding:0 18px;border-radius:var(--r-s);
  background:var(--teal);color:#fff;font-weight:600;font-size:15px;
  text-decoration:none;transition:background .2s}
.ft-route:hover{background:var(--teal-d)}

@media (max-width:760px){
  .ft-map{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .ft-map-box{aspect-ratio:3/2}
  .ft-info{padding:16px 16px 18px}
  .ft-rev-num{font-size:30px}
}

/* ── перший екран: чипи ситуацій, що падають ─────────────────────────
   Не прикраса: це живі посилання на підбір, тобто входи в каталог
   опиняються над згином, а не через два екрани прокрутки.

   Без фізичного рушія — шість елементів і keyframes. Падають лише
   на десктопі: на телефоні перший екран і так щільний. При
   prefers-reduced-motion анімації немає, чипи просто стоять на місці. */
.hero-drop{display:none}
@media (min-width:1000px){
  .hero-drop{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;
    max-width:1200px;margin:-6px auto 0;padding:0 24px 22px}
  .hero-drop a{display:inline-flex;align-items:center;min-height:38px;
    padding:0 15px;border-radius:var(--r-pill);background:var(--card);
    border:1px solid var(--line);color:var(--ink-2);font-size:14px;
    font-weight:500;text-decoration:none;box-shadow:var(--sh);
    transition:border-color .2s,color .2s,transform .2s;
    animation:heroDrop .78s cubic-bezier(.22,.9,.3,1) backwards;
    animation-delay:calc(var(--i) * .11s + .45s)}
  .hero-drop a:hover{border-color:var(--teal);color:var(--teal-d);
    transform:translateY(-2px)}
}
@keyframes heroDrop{
  0%{transform:translateY(-140px) rotate(-7deg);opacity:0}
  55%{opacity:1}
  70%{transform:translateY(7px) rotate(1.5deg)}
  85%{transform:translateY(-3px) rotate(-.5deg)}
  100%{transform:translateY(0) rotate(0);opacity:1}
}

/* кошик відповідає на додавання */
.ico-btn.cart.bump{animation:cartBump .52s cubic-bezier(.34,1.5,.64,1)}
.ico-btn.cart.bump .cart-badge{animation:badgePop .52s cubic-bezier(.34,1.6,.64,1)}
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.16)}
  60%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes badgePop{0%{transform:scale(1)}40%{transform:scale(1.35)}
  100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .hero-drop a{animation:none}
  .ico-btn.cart.bump,.ico-btn.cart.bump .cart-badge{animation:none}
}

/* ── блок «що саме брати» в статті ───────────────────────────────────
   Картка та сама, що в каталозі: інакше довелось би підтримувати два
   компоненти, які з часом розійдуться. */
.art-buy{margin:34px 0 8px}
.art-buy h2{margin-bottom:4px}
.art-buy-t{color:var(--muted);font-size:14.5px;margin:0 0 18px;max-width:60ch}
.art-buy .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.art-buy .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.art-buy .grid{grid-template-columns:1fr}}
.art-none{margin:30px 0 8px;padding:18px 20px;background:var(--bg-2);
  border-radius:var(--r);border:1px solid var(--line)}
.art-none b{display:block;margin-bottom:4px;color:var(--ink)}
.art-none p{margin:0 0 12px;color:var(--muted);font-size:14.5px}

/* ── три кроки замовлення ─────────────────────────────────────────────
   Не прикраса: без них форма виглядає як нескінченне простирадло
   полів. Видно, де людина зараз і що лишилось. */
.co-steps{display:flex;gap:6px;list-style:none;margin:0 0 14px;padding:0;
  counter-reset:cs}
.co-steps li{flex:1;display:flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--muted);counter-increment:cs;min-width:0}
.co-steps li::before{content:counter(cs);display:flex;align-items:center;
  justify-content:center;width:20px;height:20px;min-width:20px;border-radius:50%;
  background:var(--line);color:var(--muted);font-size:11.5px;font-weight:700}
.co-steps li.on{color:var(--ink);font-weight:600}
.co-steps li.on::before{background:var(--teal);color:#fff}
.co-steps li.done::before{content:"✓";background:var(--teal-x);color:var(--teal-d)}
.co-ok .co-steps{margin-bottom:18px}
/* рядок, що розгортає коментар */
.co-more{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:4px 0 10px;color:var(--teal-d);font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer}
.co-more span{font-size:15px;line-height:1}
.co-more:hover{text-decoration:underline}
.co-more:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-s)}

/* ── номер замовлення й кнопка стеження ───────────────────────────── */
.co-num{font-size:13.5px;color:var(--muted);margin-top:6px;
  font-variant-numeric:tabular-nums}
.co-tg{display:inline-flex;align-items:center;justify-content:center;
  width:100%;margin-top:16px}

/* ── чим добрати до безкоштовної доставки ─────────────────────────────
   Живе всередині смуги доставки, тому відступ зверху, а не картка:
   друга картка поруч із кошиком перетягувала б увагу на себе. */
.ship-add{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.sa-t{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.sa{display:flex;align-items:center;gap:10px;padding:6px 0}
.sa-l{display:flex;align-items:center;gap:9px;min-width:0;flex:1;
  color:var(--ink);text-decoration:none}
.sa-l img{width:34px;height:34px;object-fit:contain;border-radius:var(--r-s);
  background:var(--bg-2);flex:0 0 34px}
.sa-n{font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sa-l:hover .sa-n{color:var(--teal-d)}
.sa-c{display:flex;flex-direction:column;gap:2px;min-width:0}
/* ціну не ховаємо на вузькому екрані: людина має бачити, скільки
   коштує те, що їй пропонують додати, до того як натисне */
.sa-p{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sa-b{flex:0 0 auto;border:1px solid var(--teal);background:#fff;color:var(--teal-d);
  border-radius:var(--r-pill);padding:7px 13px;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:background .18s,color .18s;min-height:34px}
.sa-b:hover{background:var(--teal);color:#fff}
.sa-b:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ── «або подзвоніть» під кнопками картки ─────────────────────────── */
.pd-call{font-size:13px;color:var(--muted);margin:10px 0 0}
.pd-call a{color:var(--teal-d);font-weight:600;white-space:nowrap}

/* ── плитки задач над каталогом ───────────────────────────────────────
   Над фільтрами, а не під сіткою: під сіткою їх побачить той, хто вже
   доскролив, тобто той, кому вони найменше потрібні. */
.tasks{margin:0 0 26px}
.tasks-t{font-size:13px;color:var(--muted);margin-bottom:10px}
.tasks-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:10px}
.tt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);text-decoration:none;min-height:50px;
  transition:border-color .18s,background .18s,transform .18s var(--ease)}
.tt:hover{border-color:var(--teal);background:var(--teal-x);transform:translateY(-1px)}
.tt:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tt-n{font-size:14px;font-weight:600;line-height:1.25}
.tt-a{color:var(--teal-d);flex:0 0 auto;transition:transform .18s var(--ease)}
.tt:hover .tt-a{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.tt,.tt-a{transition:none}
  .tt:hover{transform:none}.tt:hover .tt-a{transform:none}}
.tasks-more{display:none}
/* На телефоні десять плиток відсувають сітку товарів майже на екран
   униз. Показуємо чотири й посилання на повний підбір — решта задач
   там, і це те саме джерело. */
@media (max-width:520px){.tasks-g{grid-template-columns:1fr 1fr}
  .tt{padding:11px 12px;min-height:46px}.tt-n{font-size:13px}
  .tasks-g .tt:nth-child(n+5){display:none}
  .tasks-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
    color:var(--teal-d);font-size:13.5px;font-weight:600;text-decoration:none}
  .tasks-more:hover{text-decoration:underline}}

/* ── перегляд фото товару ─────────────────────────────────────────── */
.pd-img img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:120;background:rgba(10,38,50,.93);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .18s var(--ease);cursor:zoom-out}
.zoom.on{opacity:1}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--r);background:#fff}
.zoom-x{position:absolute;top:14px;right:14px;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer}
.zoom-x:hover{background:rgba(255,255,255,.24)}
.zoom-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.zoom{transition:none}}

/* ── набір цілком у підборі за ситуацією ──────────────────────────── */
.q-all{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 20px;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--teal-x)}
.q-all-t{font-size:14px;font-weight:700;color:var(--ink)}
.q-all-b{border:0;border-radius:var(--r-pill);background:var(--teal);color:#fff;
  font:inherit;font-size:14px;font-weight:700;padding:11px 20px;cursor:pointer;
  min-height:44px;transition:background .18s}
.q-all-b:hover{background:var(--teal-d)}
.q-all-b:disabled{background:var(--teal-d);cursor:default}
.q-all-b:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px}
@media (max-width:420px){.q-all{flex-direction:column;align-items:stretch;text-align:center}
  .q-all-b{width:100%}}

/* ── фільтри каталогу: згорнуті на телефоні ───────────────────────────
   На 375 перший товар починався на 918-му пікселі при висоті екрана 812:
   людина, яка прийшла по товари, спершу бачила все, крім них.
   Фільтри потрібні тим, хто вже знає, що шукає, — тобто меншості. */
.f-sum{display:none}
.filters>summary{list-style:none}
.filters>summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  .f-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;
    cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);
    padding:2px 0;min-height:30px}
  .f-sum::after{content:"";width:9px;height:9px;flex:0 0 9px;margin-left:auto;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
  .f-sum-n{font-size:13px;font-weight:500;color:var(--muted);margin-left:0}
  .filters[open] .f-sum::after{transform:rotate(-135deg) translateY(-2px)}
  .filters[open] .frow{margin-top:12px}
  .filters:not([open]){padding-top:13px;padding-bottom:13px}
  .fcount{display:none}
}
@media (prefers-reduced-motion:reduce){.f-sum::after{transition:none}}

/* ── відступи, знайдені вимірюванням 15.10.2026 ──────────────────────
   Опис ситуації в підборі: `.quiz p{margin:0}` важче за `.q-d`,
   тому задуманий відступ до карток ніколи не працював. */
.quiz .q-d{margin-bottom:16px}
/* Набір на темній секції — у тій самій стилістиці, що й картки товарів,
   а не світлою плитою. */
.q-res .q-all{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.q-res .q-all-t{color:#fff}
/* «Додати коментар» не торкається кнопки «Оформити»: дві цілі
   для пальця впритул — це промахи на телефоні. */
.co-more{margin-bottom:6px}

/* ════════════════════════════════════════════════════════════════════
   ТЕМА V2 — редизайн 15.10.2026
   Шар поверх базових стилів: спершу токени (усі компоненти v1
   перефарбовуються через них), далі нові компоненти теми.
   Один акцент #066360, один шрифт Inter, три радіуси 12 / 20 / 999,
   одна мʼяка тінь. Ритм: світлий → темний → світлий.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --brand:#066360; --brand-d:#044A48; --brand-l:#E3F0EF; --brand-x:#F2F8F8;
  --ink:#0A2632; --ink-2:#22404C; --muted:#4F6B73;
  --line:#DCE6E7; --line-2:#C9D7D9;
  --bg:#F5F8F8; --bg-2:#EAF1F1; --card:#fff;
  --dark:#0A2632; --dark-2:#12394A; --dark-line:#24505F;
  --on-dark:#EAF4F4; --on-dark-2:#A9C3C8;
  /* старі імена токенів → нові значення */
  --teal:#066360; --teal-d:#044A48; --teal-l:#E3F0EF; --teal-x:#F2F8F8; --navy:#0A2632;
  --r-s:12px; --r:12px; --r-l:20px; --r-xl:20px; --r-pill:999px;
  --sh:0 1px 2px rgba(10,38,50,.05),0 8px 24px rgba(10,38,50,.06);
  --sh-l:var(--sh); --sh-t:var(--sh);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --fs-h1:clamp(2.2rem,6vw,4.5rem); --fs-h2:clamp(1.6rem,4vw,2.6rem);
}
body{background:var(--bg);font-size:16px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-s)}
.sec-dark :focus-visible,.ft2 :focus-visible{outline-color:#fff}

/* без декору, що нічого не пояснює */
#prog,.blob,.hero-bg,.ribbon{display:none!important}
.rv{opacity:1!important;transform:none!important;transition:none!important}
.btn::after{display:none}

/* ── кнопки: 48 px, одна вага, без підстрибування ───────────────────── */
.btn{background:var(--brand);min-height:48px;font-weight:700;border-radius:var(--r-pill);
  transition:background .18s}
.btn:hover{background:var(--brand-d);transform:none;box-shadow:none}
.btn:active{transform:scale(.98)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-g{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-g:hover{background:#fff;border-color:var(--brand);color:var(--brand)}

/* ── шапка: суцільна, без скла; на телефоні не липне —
   на екрані лишається одна липка панель, нижня ─────────────────────── */
.hd{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
.hd.stuck{box-shadow:none}
@media (max-width:760px){.hd{position:relative}}
.logo{color:var(--ink)}
.logo:hover svg{transform:none}
.nav a.on{background:var(--brand-l);color:var(--brand)}

/* ── типографіка секцій ──────────────────────────────────────────────── */
.sec{padding:44px 0}
.sec-tight{padding:28px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sec-h h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.sec-h h2 em,.q-intro h2 em{font-style:normal;color:var(--brand)}
.sec-h .more{font-weight:700;color:var(--brand);min-height:48px;display:inline-flex;align-items:center;gap:6px}
.sec-dark{background:var(--dark);color:var(--on-dark)}
.sec-dark h2{color:#fff}
.sec-dark h2 em{color:#7FD3CB}

/* ── перший екран (H1) ───────────────────────────────────────────────── */
.h-hero{background:var(--bg);padding:18px 0 34px}
.h-txt{display:flex;flex-direction:column}
.h-txt .eyebrow{display:inline-flex;align-self:flex-start;font-size:13px;font-weight:700;color:var(--brand);
  background:var(--brand-l);border-radius:var(--r-pill);padding:7px 12px;letter-spacing:.01em}
.h-txt .eyebrow i{display:none}
.h-txt h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.04em;font-weight:800;color:var(--ink);margin-top:14px}
.h-txt h1 em{font-style:normal;color:var(--brand)}
.h-art{position:relative;height:clamp(230px,62vw,420px);margin-top:20px}
.h-a{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l)}
.h-a picture{display:contents}
.h-a img{width:100%;height:100%;object-fit:contain;padding:8%}
.h-a1{left:0;top:0;width:60%;height:100%}
.h-a2{right:0;top:0;width:36%;height:48%}
.h-a3{right:0;bottom:0;width:36%;height:48%}
.h-cta{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.h-link{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:700;color:var(--brand);font-size:16px}
.h-chips,.g-tasks{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.h-chip{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line-2);font-weight:600;font-size:14.5px;color:var(--ink)}
.h-chip:hover{border-color:var(--brand);color:var(--brand)}
@media (min-width:900px){
  .h-hero{padding:40px 0 56px}
  .h-txt{display:grid;grid-template-columns:1.1fr .9fr;column-gap:48px;
    grid-template-areas:"eye art" "h1 art" "cta art" "chips art";align-content:start}
  .h-txt .eyebrow{grid-area:eye}
  .h-txt h1{grid-area:h1}
  .h-art{grid-area:art;margin-top:0;height:460px;align-self:center}
  .h-cta{grid-area:cta}
  .h-chips{grid-area:chips}
}
/* легкий паралакс від прокрутки — тільки CSS; без підтримки або при
   «зменшити рух» картинки просто стоять */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .h-a2,.h-a3{animation:hdrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .h-a3{animation-name:hdrift2}
  }
}
@keyframes hdrift{to{transform:translateY(-28px)}}
@keyframes hdrift2{to{transform:translateY(-14px)}}

/* ── свайп-ряд (H3, «Схожі») ────────────────────────────────────────── */
.row-wrap{overflow:hidden}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding:0 20px;padding:2px 20px 10px;scrollbar-width:none;
  overscroll-behavior-x:contain}
.row::-webkit-scrollbar{display:none}
.row-i{scroll-snap-align:start;display:flex;min-width:0}
@media (min-width:700px){.row{grid-auto-columns:250px}}
@media (min-width:1280px){.row{padding-left:calc((100vw - var(--max))/2 + 20px);
  scroll-padding-left:calc((100vw - var(--max))/2 + 20px)}}
.pd2 .row{padding-left:0;padding-right:0;scroll-padding:0}

/* ── картка товару (C1) ──────────────────────────────────────────────── */
.pc{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:none;transform:none!important;transition:border-color .18s}
.pc:hover{border-color:var(--line-2);box-shadow:none}
.pc-ph{display:block;aspect-ratio:1/1;background:var(--bg-2)}
.pc-ph picture{display:contents}
.pc-ph img{width:100%;height:100%;object-fit:contain;padding:9%}
.pc-ph-none{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-size:48px;font-weight:800;color:var(--line-2)}
.pc-b{display:flex;flex-direction:column;gap:6px;padding:12px;flex:1}
.pc-brand{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pc-name{font-size:15px;line-height:1.3;font-weight:700;min-height:2.6em}
.pc-name a{color:var(--ink)}
.pc-name a::after{content:"";position:absolute;inset:0}
.pc{position:relative}
.pc-price{margin-top:auto;font-size:19px;font-weight:800;color:var(--ink)}
.pc-price span{font-size:13px;font-weight:600;color:var(--muted)}
.pc-btn{position:relative;z-index:1;width:100%;min-height:48px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-weight:700;font-size:15px;transition:background .18s}
.pc-btn:hover{background:var(--brand-d)}
.pc-btn:disabled{background:var(--brand-d)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}

/* ── bento «з чого складається догляд» (H4) ─────────────────────────── */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-auto-flow:dense}
.bt{position:relative;display:flex;flex-direction:column;gap:4px;min-height:176px;padding:16px;
  border-radius:var(--r-l);background:#fff;border:1px solid var(--line);overflow:hidden;color:var(--ink)}
.bt-t{font-size:21px;line-height:1.1;font-weight:800;letter-spacing:-.02em;position:relative;z-index:1}
.bt-n{font-size:13px;font-weight:600;color:var(--muted);position:relative;z-index:1}
.bt-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9FE0D8}
.bt-s{font-size:14.5px;line-height:1.45;color:inherit;opacity:.9;max-width:42ch}
.bt-go{margin-top:auto;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.bt-cat .bt-ph{position:absolute;right:-4%;bottom:-6%;width:58%;height:72%}
.bt-cat .bt-ph img{width:100%;height:100%;object-fit:contain}
.bt-cat:hover{border-color:var(--brand)}
.bt-set{grid-column:1/-1;min-height:200px;background:var(--brand);border-color:var(--brand);color:#fff}
.bt-set .bt-t{font-size:28px}
.bt-set:hover{background:var(--brand-d)}
.bt-pick{grid-column:1/-1;padding:0;background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
.bt-pick .map-ph img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.bt-pick-b{display:flex;flex-direction:column;gap:4px;padding:16px}
.bt-pick .bt-t{color:#fff}
.bt-pick .bt-go{color:#9FE0D8}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:16px}
  .bt-set{grid-column:span 2;grid-row:span 2}
  .bt-set .bt-t{font-size:40px}
  .bt-pick{grid-column:1/-1;flex-direction:row}
  .bt-pick .map-ph{flex:1 1 55%}
  .bt-pick .map-ph img{height:100%;aspect-ratio:auto}
  .bt-pick-b{flex:1 1 45%;justify-content:center;padding:28px}
}

/* ── задачі з фото (H5) ─────────────────────────────────────────────── */
.tks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.tk:hover{border-color:var(--brand)}
.tk-ph{display:block;aspect-ratio:4/3;background:var(--bg-2)}
.tk-ph img{width:100%;height:100%;object-fit:contain;padding:10%}
.tk-b{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px}
.tk-t{font-size:16px;font-weight:800;line-height:1.2;color:var(--ink)}
.tk-n{font-size:13.5px;font-weight:700;color:var(--brand)}
@media (min-width:900px){.tks{grid-template-columns:repeat(3,1fr);gap:16px}}

/* ── підбір на темному (квіз) ───────────────────────────────────────── */
.sec-dark .quiz{background:none;border:0;box-shadow:none;padding:0;color:var(--on-dark)}
.sec-dark .quiz::before,.sec-dark .quiz::after{display:none}
.sec-dark .q-intro h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em}
.sec-dark .q-lead{color:var(--on-dark)}
.sec-dark .q-dis{color:var(--on-dark-2)}
.sec-dark .q-opt{min-height:48px;background:var(--dark-2);border:1px solid var(--dark-line);color:#fff}
.sec-dark .q-opt.on,.sec-dark .q-opt:hover{background:var(--brand);border-color:var(--brand)}
.sec-dark .q-res{background:var(--dark-2);border:1px solid var(--dark-line)}
.sec-dark .q-prod{background:var(--dark);border:1px solid var(--dark-line)}
.sec-dark .q-prod-add{min-height:44px}
.sec-dark .q-res .q-all{background:var(--dark);border-color:var(--dark-line)}
.sec-dark .q-res .btn{background:#fff;color:var(--ink)}
.q-skel{height:132px;border-radius:var(--r);background:linear-gradient(90deg,var(--dark) 0,var(--dark-2) 50%,var(--dark) 100%);
  background-size:200% 100%;animation:skel 1.1s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ── клініка на темному ──────────────────────────────────────────────── */
.sec-dark .cl-grid{background:none;border:0;padding:0;box-shadow:none}
.sec-dark .cl-main h2{color:#fff;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em}
.sec-dark .cl-main p{color:var(--on-dark)}
.sec-dark .tk-eyebrow{color:#9FE0D8!important}
.sec-dark .cl-card{background:var(--dark-2);border:1px solid var(--dark-line);color:var(--on-dark)}
.sec-dark .cl-card b{color:#fff}
.sec-dark .cl-card span{color:var(--on-dark-2)}
.sec-dark .cl-card em{color:#9FE0D8}
.sec-dark .cl-more a{color:#9FE0D8}

/* ── каталог (C2–C3) ─────────────────────────────────────────────────── */
.g-page{padding-bottom:40px}
.g-head h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.035em;font-weight:800;margin-top:6px}
.g-head p{color:var(--muted);margin-top:8px;max-width:60ch}
.g-tasks{margin:16px 0 4px}
.g-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 16px}
.g-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:2px}
.g-cats::-webkit-scrollbar{display:none}
.g-cats .chip{min-height:44px;white-space:nowrap;flex:0 0 auto}
.g-sort{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.g-sort select{min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 14px;
  font:inherit;font-weight:600;color:var(--ink);background:#fff}
.g-tools .fcount{margin-left:auto;font-size:13.5px;color:var(--muted)}
.g-empty{text-align:center;padding:40px 16px;color:var(--muted)}
.g-sup{font-size:13.5px;color:var(--muted);margin-top:22px}
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;
  cursor:pointer;list-style:none;font-weight:800;font-size:17px;color:var(--ink)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"+";font-size:24px;font-weight:500;color:var(--brand);flex:0 0 auto}
.acc[open]>summary::after{content:"−"}
.acc-b{padding:0 0 18px}
.acc-sm>summary{font-size:15.5px;font-weight:700;min-height:52px}
.acc-seo{margin-top:28px}

/* ── картка товару (D) ───────────────────────────────────────────────── */
.pd2{padding-bottom:36px}
.pd2-grid{display:grid;gap:18px;margin-top:6px}
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  aspect-ratio:1/1;background:var(--bg-2);border-radius:var(--r-l);scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal-s{scroll-snap-align:center;display:flex;align-items:center;justify-content:center;min-width:0}
.gal-s picture{display:contents}
.gal-s img{width:100%;height:100%;object-fit:contain;padding:8%;cursor:zoom-in}
.gal-none span{font-size:56px;font-weight:800;color:var(--line-2)}
.gal-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.gal-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.gal-dots i.on{background:var(--brand)}
.pd2-info h1{font-size:clamp(1.65rem,5vw,2.5rem);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-top:4px}
.pd2-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:12px}
.pd2-price b{font-size:32px;font-weight:800;letter-spacing:-.02em}
.pd2-price>span{font-size:15px;font-weight:600;color:var(--muted)}
.pd2-price .pd-stock{margin-left:auto;align-self:center}
.btn-buy{width:100%;min-height:56px;font-size:17px;margin-top:14px}
.pd2-ask{margin-top:12px;font-size:14px;color:var(--muted)}
.pd2-ask a{color:var(--brand);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.pd2-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:14px}
.pd2-facts li{font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 13px;line-height:1.25}
.pd2-quiet{margin-top:14px}
.pd2-quiet p,.pd2-quiet .pd-rrp,.pd2-quiet .pd-note{font-size:13px;color:var(--muted);line-height:1.5;margin-top:6px;
  border:0;padding:0}
.pd2-more{margin-top:26px}
.pd2-more .pd-lead{font-size:16.5px;color:var(--ink-2);margin-bottom:10px}
.pd2-rv{margin-top:20px}
@media (min-width:900px){
  .pd2-grid{grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;margin-top:12px}
  .pd2-more{max-width:760px}
}

/* одна липка панель: на сторінці товару — «Додати в кошик», поки
   кнопка в потоці не видна; корзинна панель там не показується */
.mbar{display:none!important}
@media (max-width:760px){
  body.has-cart:not(.v2-product) .mbar:not(.mbar-buy){display:flex!important}
  body.v2-product .mbar-buy.show{display:flex!important}
  body.v2-product.has-cart .mbar-buy.show{display:flex!important}
}

/* ── кошик і оформлення (K) ──────────────────────────────────────────── */
.co-form input,.co-form textarea,.co-form select{min-height:48px}
.co-map img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-s);margin-bottom:10px}
.co-steps li::before{width:24px;height:24px;min-width:24px}
.co-ok .ok-ic{width:88px;height:88px;font-size:44px;background:var(--brand)}
.co-tg{min-height:56px}
.dr-f .btn{min-height:52px}

/* ── підвал (H6) ─────────────────────────────────────────────────────── */
.ft{display:none}
.ft2{background:var(--dark);color:var(--on-dark);padding:44px 0 28px;margin-top:20px}
.ft2 a{color:var(--on-dark)}
.ft2-top{display:grid;gap:20px}
.ft2-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff}
.ft2-mark{width:30px;height:30px;display:inline-flex}
.ft2-mark svg{width:30px;height:30px}
.ft2-brand p{color:var(--on-dark-2);margin-top:10px;max-width:46ch;font-size:14.5px}
.ft2-tel{display:inline-flex;align-items:center;min-height:48px;font-size:20px;font-weight:800;color:#fff!important;margin-top:6px}
.ft2-soc{display:flex;gap:10px}
.ft2-soc a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--r-pill);background:var(--dark-2)}
.ft2-map{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:var(--dark-2);border:1px solid var(--dark-line)}
.ft2-map .map-ph img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ft2-map-b{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;font-size:14px;color:var(--on-dark-2)}
.ft2-map-b b{color:#fff;font-size:17px}
.ft2-go{color:#9FE0D8;font-weight:700;margin-top:4px}
.ft2-rev{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-radius:var(--r-l);
  background:var(--dark-2);border:1px solid var(--dark-line);font-size:14px;color:var(--on-dark-2)!important}
.ft2-rev-num{font-size:34px;font-weight:800;color:#fff}
.ft2-stars{color:#F5C451;letter-spacing:2px}
.ft2-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.ft2-cols h4{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:6px}
.ft2-cols a{display:flex;align-items:center;min-height:40px;font-size:14.5px}
.ft2-cols a:hover{color:#fff}
.ft2-bot{border-top:1px solid var(--dark-line);margin-top:24px;padding-top:16px;font-size:13px;color:var(--on-dark-2)}
.ft2-bot p+p{margin-top:8px}
.ft2-bot a{color:var(--on-dark)}
@media (min-width:900px){
  .ft2-top{grid-template-columns:1.1fr 1fr .8fr;align-items:start;gap:28px}
  .ft2-cols{grid-template-columns:repeat(3,1fr)}
}

/* ── переходи між сторінками: фото товару «перелітає» з каталогу в картку ── */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.28s}

/* ── зменшити рух: вимикається все ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}

/* липка панель покупки на сторінці товару */
.mbar-buy .mb-t{min-width:0;flex:1}
.mbar-buy .mb-n{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar-buy b{font-size:18px}
.mbar-buy .btn{flex:0 0 auto;min-height:52px}

/* картинка не розпирає квадрат: висоту задає рамка, а не знімок
   (aspect-ratio інакше поступається вмісту — вузька щітка 132×687
   розтягувала картку на 1200 px) */
.pc-ph,.tk-ph{position:relative;overflow:hidden;display:block}
.pc-ph img,.tk-ph img{position:absolute;inset:0}
.gal{grid-template-rows:100%;overflow-y:hidden}
.gal-s{height:100%;position:relative;overflow:hidden}
.gal-s img{position:absolute;inset:0}
.ft2-facts{list-style:none;margin:6px 0 2px;padding:0}
.ft2-facts li{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-top:1px solid var(--dark-line)}
.ft2-facts b{color:#fff;font-size:14px}
.ft2-facts span{color:var(--on-dark-2);font-size:13.5px}

/* темні секції: текст біля краю не обрізається (у v1 .quiz мав overflow:hidden під декор) */
.sec-dark .quiz,.sec-dark .cl-grid{overflow:visible}
/* задачі: нижча картинка — коротша сторінка */
.tk-ph{aspect-ratio:3/2}
/* хто за магазином */
.cl2{display:grid;gap:20px}
.eyebrow-d{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9FE0D8;margin-bottom:10px}
.cl2-t h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em;font-weight:800;color:#fff}
.cl2-t h2 em{font-style:normal;color:#7FD3CB}
.cl2-t p{color:var(--on-dark);margin-top:12px;max-width:62ch}
.cl2-more{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin-top:6px;color:#9FE0D8;font-weight:700}
.cl2-ls{display:flex;flex-direction:column}
.cl2-l{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 36px 14px 0;
  border-top:1px solid var(--dark-line);color:var(--on-dark)}
.cl2-l:last-child{border-bottom:1px solid var(--dark-line)}
.cl2-l b{color:#fff;font-size:16px}
.cl2-l span{font-size:14px;color:var(--on-dark-2)}
.cl2-l i{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-style:normal;color:#9FE0D8;font-size:18px}
.cl2-l:hover b{color:#9FE0D8}
@media (min-width:900px){.cl2{grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}}
/* підвал: групи посилань — згортаються на телефоні */
.ft2-g>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-2);min-height:48px;display:flex;align-items:center;justify-content:space-between}
.ft2-g>summary::-webkit-details-marker{display:none}
.ft2-g>div{display:flex;flex-direction:column;padding-bottom:8px}
.ft2-cols a{min-height:44px}
@media (max-width:760px){
  .ft2-cols{grid-template-columns:1fr;gap:0}
  .ft2-g{border-top:1px solid var(--dark-line)}
  .ft2-g>summary::after{content:"+";font-size:20px;color:#9FE0D8}
  .ft2-g[open]>summary::after{content:"−"}
}
@media (min-width:761px){.ft2-g>summary{pointer-events:none}}
/* ритм на телефоні щільніший: головна вкладається в 6000 px (ТЗ, H) */
@media (max-width:760px){
  .sec{padding:34px 0}
  .h-hero{padding:16px 0 26px}
  .h-art{height:clamp(210px,56vw,360px)}
  .bt{min-height:148px}
  .bt-set{min-height:172px}
  .tk-b{padding:10px 12px 12px}
  .sec-h{margin-bottom:14px}
}
/* бейдж над заголовком — по ширині тексту, не на всю колонку */
.h-txt .eyebrow{justify-self:start;max-width:100%}
/* бренди на телефоні — одним рядом зі свайпом */
@media (max-width:760px){
  .sec-tight .frow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-right:-20px;padding-right:20px}
  .sec-tight .frow::-webkit-scrollbar{display:none}
  .sec-tight .frow .chip{flex:0 0 auto;min-height:44px}
}
/* «Оформити» завжди під пальцем: кнопка липне до низу кошика (K) */
@media (max-width:760px){
  .co-form button[type=submit]{position:sticky;bottom:10px;z-index:2;
    box-shadow:0 0 0 10px #fff,0 -14px 22px 4px rgba(255,255,255,.95)}
}

/* онлайн-оплата monobank (28.10.2026) */
.co-pay{margin-top:4px}
.co-paytest{margin:0 0 2px;padding:6px 10px;border-radius:var(--r-s);background:#fff3cd;color:#7a5a00;font-size:13px;font-weight:600}
.co-pay-btn{width:100%;margin-top:14px}
.co-pay-msg{color:#b23b2a}
/* dr-f-scroll 28.10.2026: на телефоні форма замовлення не вміщалась у висоту шухляди — кнопка «Оформити» була за краєм екрана без прокрутки. Підвал шухляди тепер прокручується сам. */
.drw .dr-f{max-height:calc(100% - 110px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;flex-shrink:1}

/* 28.10.2026: після оформлення список товарів порожній — не займає місця над підтвердженням */
.drw .dr-b:empty{display:none}


/* ═══════════════ ТЕМА v3 «КОЛІР» (28.10.2026) ═══════════════
   Шар поверх v2.css. Кожна категорія — свій колір; кнопки чорні;
   тло теплий білий; шрифт Rubik. Порядок правил: токени → загальне →
   головна → картки → каталог → товар → кошик → підвал. */
:root{
  --f:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --brand:#1A1A1A; --brand-d:#000; --brand-l:#FFF0C2; --brand-x:#FFF8E5;
  --ink:#1A1A1A; --ink-2:#333; --muted:#5C574E;
  --line:#EFE6D3; --line-2:#E2D6BE;
  --bg:#FFFBF2; --bg-2:#FFF4DC; --card:#fff;
  --dark:#1A1A1A; --dark-2:#262626; --dark-line:#3A3A3A;
  --on-dark:#FFFBF2; --on-dark-2:#CFC8B9;
  --teal:#1A1A1A; --teal-d:#000; --teal-l:#FFF0C2; --teal-x:#FFF8E5; --navy:#1A1A1A;
  --r-s:14px; --r:18px; --r-l:24px; --r-xl:30px;
  --sh:none; --sh-l:none; --sh-t:none;
  --c-brushes:#FFD84D; --c-pastes:#FF9466; --c-rinses:#6ED3CF; --c-care:#C3B1FF; --c-sets:#A6E36E;
  --t-brushes:#FFF0C2; --t-pastes:#FFE3D6; --t-rinses:#DDF4F2; --t-care:#EEE8FF; --t-sets:#E8F7DA;
}
body{font-family:var(--f);background:var(--bg);color:var(--ink)}
:focus-visible{outline-color:#1A1A1A}
h1,h2,h3{font-family:var(--f);letter-spacing:-.025em}
h1 em,h2 em{font-style:normal;color:inherit;background:linear-gradient(transparent 58%,var(--c-brushes) 58%)}
.sec-dark h2 em{color:inherit;background:linear-gradient(transparent 58%,#7A6400 58%)}
a{color:var(--ink)}

/* кнопки: чорна «пігулка» */
.btn,.btn-lg,.btn-buy{background:#1A1A1A!important;color:#fff!important;border-radius:999px;font-weight:600;border:0}
.btn:hover{background:#000!important}
.btn-g{background:#fff!important;color:#1A1A1A!important;border:2px solid #1A1A1A}

/* шапка */
.hd{background:rgba(255,251,242,.94);border-bottom:0}
.hd.stuck{border-bottom:1px solid var(--line)}
.logo{font-weight:800;letter-spacing:-.03em;color:#1A1A1A}
.logo svg,.logo .lg-mark{color:#1A1A1A}
.cart-btn,.hd-cart{background:#1A1A1A!important;color:#fff!important;border-radius:999px!important}
.cart-badge{background:var(--c-brushes)!important;color:#1A1A1A!important}
.nav a.on{color:#1A1A1A;box-shadow:inset 0 -3px 0 var(--c-brushes)}

/* ── головна ── */
.v3-home .k-hero-w{padding:8px 0 0}
.k-hero{position:relative;overflow:hidden;background:var(--c-brushes);border-radius:30px;padding:24px 22px 22px;min-height:420px;box-sizing:border-box;display:flex;flex-direction:column}
.k-eyebrow{font-size:12.5px;font-weight:600;max-width:62%}
.k-hero h1{margin:10px 0 0;max-width:64%;font-size:clamp(2.1rem,7.5vw,3.6rem);line-height:1.02;font-weight:800}
.k-hero-p{display:inline-block;margin-top:12px;max-width:58%;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.k-hero-art{position:absolute;right:34px;top:22px;width:62px;height:290px;transform:rotate(14deg);pointer-events:none}
.k-hero-art picture,.k-hero-art img{display:block;width:100%;height:100%;object-fit:contain}
.k-stk{position:absolute;right:14px;bottom:128px;width:94px;height:94px;border-radius:50%;background:#1A1A1A;color:var(--c-brushes);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-10deg);line-height:1}
.k-stk b{font-size:27px;font-weight:800}
.k-stk span{font-size:12px;font-weight:600;margin-top:3px}
.k-hero-cta{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.k-buy{align-self:flex-start;margin:0!important;height:54px!important;padding:0 24px!important;border-radius:999px!important;background:#1A1A1A!important;color:#fff!important;font-size:16px!important;font-weight:600!important;width:auto!important;border:0;position:relative;z-index:2}
.k-hero-l{font-size:14.5px;font-weight:600;text-decoration:none;border-bottom:2px solid #1A1A1A;padding-bottom:2px}
.k-sec{padding-top:34px}
.k-h2{margin:0 0 14px;font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.05;font-weight:800}
.k-pills{display:flex;flex-wrap:wrap;gap:8px}
.k-pill{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;border:2px solid #1A1A1A;background:#fff;font-weight:600;font-size:15px;text-decoration:none;color:#1A1A1A}
.k-pill:hover{background:#1A1A1A;color:#fff}
.k-pill-s{min-height:42px;font-size:14px;border-width:1.5px}
.k-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.k-cat{position:relative;overflow:hidden;height:156px;border-radius:24px;padding:16px;box-sizing:border-box;text-decoration:none;color:#1A1A1A;display:block}
.k-cat:last-child:nth-child(odd){grid-column:span 2;height:128px}
.k-cat-t{position:relative;z-index:1;display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1;max-width:62%}
.k-cat-n{position:relative;z-index:1;display:block;font-size:13px;font-weight:500;margin-top:4px}
.k-cat-ph{position:absolute;right:-4px;bottom:-12px;width:46%;height:92%}
.k-cat-ph img{width:100%;height:100%;object-fit:contain;object-position:bottom right}
.k-c-brushes{background:var(--c-brushes)} .k-c-pastes{background:var(--c-pastes)} .k-c-rinses{background:var(--c-rinses)}
.k-c-care{background:var(--c-care)} .k-c-sets{background:var(--c-sets)}
.k-c-brushes .k-cat-ph{transform:rotate(18deg);right:6px}
.k-why{border-radius:30px;background:#1A1A1A;color:#FFFBF2;padding:26px 22px}
.k-why h2{margin:0 0 6px;font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.05;font-weight:800;color:#FFFBF2}
.k-why-l{list-style:none;margin:0;padding:0}
.k-why-l li{display:flex;gap:12px;align-items:flex-start;margin-top:14px}
.k-why-l i{width:26px;height:26px;border-radius:50%;flex:none;display:block}
.k-why-l p{margin:0;font-size:15px;color:#E9E2D2}
.k-why-l b{color:#FFFBF2}
.k-d1{background:var(--c-brushes)} .k-d2{background:var(--c-pastes)} .k-d3{background:var(--c-rinses)} .k-d4{background:var(--c-care)}
.k-why-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.k-why-b{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;background:var(--c-brushes);color:#1A1A1A!important;font-weight:600;text-decoration:none}
.k-why-b2{background:transparent;color:#FFFBF2!important;border:2px solid #FFFBF2}

/* підбір: темний блок без зайвого */
.sec-dark{background:var(--bg)}
.sec-dark .quiz{background:#1A1A1A;border-radius:30px;padding:26px 18px;color:#FFFBF2}
@media (min-width:761px){.sec-dark .quiz{padding:40px}}
.sec-dark .quiz::before,.sec-dark .quiz::after{display:none}
.sec-dark .q-opt{border-radius:999px}
.sec-dark .q-opt.on,.sec-dark .q-opt:hover{background:var(--c-brushes)!important;color:#1A1A1A!important;border-color:var(--c-brushes)!important}
.sec-dark .q-res{border-radius:24px}
.sec-dark .q-res .btn,.sec-dark .q-prod-add{background:var(--c-brushes)!important;color:#1A1A1A!important;border-radius:999px}

/* ── картки товарів: тло фото — відтінок кольору категорії ── */
.pc{border:0;border-radius:24px;background:#fff;box-shadow:none}
.pc:hover{box-shadow:none;transform:none}
.pc-ph{border-radius:18px;margin:6px 6px 0;background:var(--t-brushes)}
.pc[data-cat="pastes"] .pc-ph{background:var(--t-pastes)}
.pc[data-cat="rinses"] .pc-ph{background:var(--t-rinses)}
.pc[data-cat="care"] .pc-ph{background:var(--t-care)}
.pc[data-cat="sets"] .pc-ph{background:var(--t-sets)}
.pc-brand{color:var(--muted);font-weight:600}
.pc-name a{color:#1A1A1A;font-weight:600}
.pc-price{font-weight:800;font-size:19px}
.pc-btn{background:#1A1A1A!important;color:#fff!important;border-radius:999px!important;min-height:44px;font-weight:600;border:0}
.pc-btn:disabled{background:var(--c-sets)!important;color:#1A1A1A!important;opacity:1}

/* ── каталог і категорії: шапка в кольорі категорії ── */
.g-head{border-radius:30px;padding:22px 20px;background:var(--bg-2);margin-bottom:18px}
.cat-brushes .g-head{background:var(--c-brushes)} .cat-pastes .g-head{background:var(--c-pastes)}
.cat-rinses .g-head{background:var(--c-rinses)} .cat-care .g-head{background:var(--c-care)}
.cat-sets .g-head{background:var(--c-sets)}
.g-head h1{font-weight:800}
.g-head p{color:#1A1A1A}
.g-cats .chip,.h-chip,.chip{border-radius:999px;border:1.5px solid #1A1A1A;background:#fff;color:#1A1A1A;font-weight:600}
.g-cats .chip.on,.chip.on{background:#1A1A1A;color:#fff}
.g-sort select{border-radius:999px;border:1.5px solid #1A1A1A}
.acc{border-color:var(--line)}

/* ── товар: галерея в кольорі категорії ── */
.gal-s{background:var(--t-brushes);border-radius:30px}
.cat-pastes .gal-s{background:var(--t-pastes)} .cat-rinses .gal-s{background:var(--t-rinses)}
.cat-care .gal-s{background:var(--t-care)} .cat-sets .gal-s{background:var(--t-sets)}
.pd2-info h1{font-weight:800}
.pd2-price b{font-weight:800}
.pd-stock i{background:#2E9E5B}
.pd2-facts li{border-radius:999px;background:#fff;border:1.5px solid var(--line-2)}
.pd2-ask a{color:#1A1A1A}

/* ── кошик ── */
.drw{background:var(--bg)}
.drw .co-form input,.drw .co-form textarea{border-radius:14px;border:1.5px solid var(--line-2);background:#fff}
.drw .co-form input:focus,.drw .co-form textarea:focus{border-color:#1A1A1A}
.co-dlv label,.co-pay label{border-radius:18px}
.co-dlv input:checked+span,.co-pay input:checked+span{color:#1A1A1A}
.co-steps li.on::before{background:#1A1A1A;color:#fff}
.co-steps li.done::before{background:var(--c-sets);color:#1A1A1A}
.co-dlv label:has(input:checked){border-color:#1A1A1A;background:var(--t-brushes)}
.co-dlv input[type=radio]{accent-color:#1A1A1A}

/* залишки бірюзового з v2 */
.sec-dark .q-ph{color:#CFC8B9}
.q-step{color:var(--c-brushes)}.q-gl{color:#CFC8B9} .q-lead{color:#E9E2D2} .q-dis{color:#BDB5A5}
.ft2-go,.bt-k,.eyebrow-d,.cl2-more,.ft-pick,.ft-made a,.ft2-bot a{color:var(--c-brushes)!important}
.ft2-g>summary::after{color:var(--c-brushes)}
.mnav a.ml span{color:#1A1A1A}
.logo stop,.ft2-mark stop{stop-color:#1A1A1A}
.ship-bar i{background:#1A1A1A}
.ok-ic{background:var(--c-sets)!important;color:#1A1A1A!important}
.mbar{background:#1A1A1A;color:#fff}
.mbar .btn{background:var(--c-brushes)!important;color:#1A1A1A!important}

/* ── підвал ── */
.ft2{background:#1A1A1A}
.ft2-map,.ft2-rev{border-radius:24px}
.ft2-tel{color:#FFFBF2}
@media (min-width:761px){
  .k-hero{min-height:460px;padding:40px}
  .k-hero h1{max-width:58%}
  .k-hero-art{right:16%;width:110px;height:420px}
  .k-stk{right:6%;bottom:60px;width:120px;height:120px}
  .k-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .k-cat,.k-cat:last-child:nth-child(odd){grid-column:auto;height:200px}
}
@media (prefers-reduced-motion: reduce){.k-hero-art,.k-stk{transition:none}}


/* ═══════════════ ТЕМА v3m «КОЛІР У РУСІ» (28.10.2026) ═══════════════
   Шар поверх v3. Анімації тільки на transform/opacity — без зсувів макета.
   prefers-reduced-motion вимикає все; без JS усе видно одразу. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ── перший екран: купа пігулок ── */
.km-hero{overflow:hidden;padding:6px 0 26px}
.km-pile{position:relative;height:168px;margin:0 -2px 6px}
.kp{--tx:calc(var(--x) * -1);position:absolute;left:var(--x);bottom:var(--y);display:inline-flex;align-items:center;height:36px;padding:0 15px;
  border-radius:999px;background:var(--c);color:var(--k);border:2px solid #1A1A1A;font-weight:700;font-size:14px;
  white-space:nowrap;text-decoration:none;transform:translateX(var(--tx)) rotate(var(--r));transform-origin:50% 100%;
  animation:kpDrop .9s cubic-bezier(.3,.9,.4,1.15) var(--d) backwards;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .2s}
.kp:hover,.kp:focus-visible{transform:translateX(var(--tx)) translateY(-6px) rotate(calc(var(--r) * -.4)) scale(1.06);box-shadow:0 6px 0 #1A1A1A;z-index:3}
.km-pile.again .kp{animation-name:kpDrop2}
@keyframes kpDrop{0%{transform:translateX(var(--tx)) translateY(-260px) rotate(calc(var(--r) * -2));opacity:0}
  12%{opacity:1}70%{transform:translateX(var(--tx)) translateY(5px) rotate(var(--r))}85%{transform:translateX(var(--tx)) translateY(-6px) rotate(var(--r))}
  100%{transform:translateX(var(--tx)) translateY(0) rotate(var(--r))}}
@keyframes kpDrop2{0%{transform:translateX(var(--tx)) translateY(-260px) rotate(calc(var(--r) * 2));opacity:0}
  12%{opacity:1}70%{transform:translateX(var(--tx)) translateY(5px) rotate(var(--r))}85%{transform:translateX(var(--tx)) translateY(-6px) rotate(var(--r))}
  100%{transform:translateX(var(--tx)) translateY(0) rotate(var(--r))}}
.km-h1{margin:6px 0 0;font-size:clamp(2.35rem,10.5vw,5.6rem);line-height:.98;font-weight:800;letter-spacing:-.04em;max-width:15ch}
.km-u{background:linear-gradient(transparent 62%,var(--c-brushes) 62%);background-size:0 100%;background-repeat:no-repeat;
  animation:kmMark 1s .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes kmMark{to{background-size:100% 100%}}
.km-sub{margin:14px 0 0;max-width:46ch;font-size:16px;color:var(--muted)}
.km-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.km-cta .btn{min-height:54px;padding:0 26px}
.km-out{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:600;text-decoration:none;color:#1A1A1A;border-bottom:2px solid #1A1A1A}
.k-hero-h{margin:10px 0 0;max-width:64%;font-size:clamp(1.9rem,7vw,3.2rem);line-height:1.02;font-weight:800;letter-spacing:-.03em}

/* бігучий рядок */
.km-tick{overflow:hidden;background:#1A1A1A;color:var(--c-brushes);height:42px;display:flex;align-items:center;margin-bottom:18px}
.km-tick-in{display:flex;white-space:nowrap;animation:kmTick 32s linear infinite}
.km-tick span{font-weight:600;font-size:14px;padding:0 16px}
.km-tick i{font-style:normal;color:#FFFBF2;opacity:.6}
@keyframes kmTick{to{transform:translateX(-50%)}}
.km-tick:hover .km-tick-in{animation-play-state:paused}

/* ── шапка: зрозуміло, що обираєш ── */
.hd{transition:box-shadow .25s,background .25s}
.hd.stuck{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(26,26,26,.06)}
.nav{gap:4px}
.nav a{position:relative;display:inline-flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:999px;
  color:#1A1A1A;font-weight:600;text-decoration:none;transition:background .2s,color .2s,transform .2s;box-shadow:none!important}
.nav a .nv-t{display:flex;align-items:center;gap:7px}
.nav a .nv-t::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);border:1.5px solid #1A1A1A;flex:none;transition:transform .25s}
.nav a .nv-s{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;
  font-size:12.5px;font-weight:500;background:#1A1A1A;color:#FFFBF2;padding:6px 10px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:30}
.nav a .nv-s::before{content:"";position:absolute;top:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-top:0;border-bottom-color:#1A1A1A}
.nav a:hover,.nav a:focus-visible{background:var(--c);transform:translateY(-1px)}
.nav a[href="/catalog/"]:hover,.nav a[href="/catalog/"]:focus-visible{color:#FFFBF2}
.nav a:hover .nv-t::before{transform:scale(1.25)}
.nav a:hover .nv-s,.nav a:focus-visible .nv-s{opacity:1;transform:translate(-50%,0)}
.nav a.on{background:#1A1A1A;color:#FFFBF2}
.nav a.on .nv-t::before{border-color:#FFFBF2}
.ico-btn.cart{background:#1A1A1A;color:#fff;border-radius:999px;transition:transform .2s}
.ico-btn.cart:hover{transform:scale(1.06)}
.cart-badge{background:var(--c-brushes)!important;color:#1A1A1A!important;border:2px solid #1A1A1A}
.burger{border-radius:999px;border:2px solid #1A1A1A;background:#fff}
/* мобільне меню: кожен розділ — свій колір і підпис */
.mnav{background:var(--bg)}
.mnav a.ml{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;padding:12px 16px;border-radius:18px;
  background:var(--c);color:#1A1A1A;border:2px solid #1A1A1A;text-decoration:none;transition:transform .15s}
.mnav a.ml[href="/catalog/"],.mnav a.ml[href="/catalog/"] *{color:#FFFBF2!important}
.mnav a.ml:active{transform:scale(.98)}
.mnav .ml-t{display:flex;flex-direction:column;font-size:18px;font-weight:700;line-height:1.2}
.mnav .ml-t small{font-size:12.5px;font-weight:500;opacity:.8;margin-top:2px}
.mnav a.ml span[aria-hidden]{color:inherit!important;font-size:20px}
.mnav.on a.ml{animation:mlIn .35s cubic-bezier(.2,.8,.2,1) both}
.mnav.on a.ml:nth-of-type(2){animation-delay:.04s}.mnav.on a.ml:nth-of-type(3){animation-delay:.08s}
.mnav.on a.ml:nth-of-type(4){animation-delay:.12s}.mnav.on a.ml:nth-of-type(5){animation-delay:.16s}
.mnav.on a.ml:nth-of-type(6){animation-delay:.2s}.mnav.on a.ml:nth-of-type(7){animation-delay:.24s}
@keyframes mlIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ── підвал: компактний ── */
.ft2{display:none}
.ft3{background:#1A1A1A;color:#E9E2D2;padding:30px 0 22px;margin-top:40px;font-size:14px}
.ft3 a{color:#FFFBF2;text-decoration:none}
.ft3-top{display:grid;gap:10px}
.ft3-logo{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.ft3-logo svg{width:32px;height:32px}
.ft3-logo stop{stop-color:#1A1A1A}
.ft3-logo rect{stroke:#FFFBF2;stroke-width:3}
.ft3-about{margin:0;max-width:46ch;color:#CFC8B9}
.ft3-call{display:flex;align-items:center;gap:10px;margin-top:4px}
.ft3-tel{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-right:auto}
.ft3-ic{width:44px;height:44px;border-radius:50%;background:#2A2A2A;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ft3-ic:hover{background:var(--c-brushes)}
.ft3-ic:hover svg{color:#1A1A1A}
.ft3-ic svg{width:20px;height:20px}
.ft3-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.ft3-facts li{display:flex;flex-direction:column;padding:10px 14px 10px 16px;border-radius:14px;background:#242424;border-left:5px solid var(--c)}
.ft3-facts b{color:#FFFBF2;font-size:14.5px}
.ft3-facts span{font-size:13px;color:#CFC8B9}
.ft3-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.ft3-btn{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;border-radius:999px;background:var(--c-brushes);color:#1A1A1A!important;font-weight:700}
.ft3-rate{font-size:13.5px;color:#CFC8B9!important}
.ft3-rate b{color:var(--c-brushes)}
.ft3-links{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:22px;padding-top:18px;border-top:1px solid #333}
.ft3-links div{display:flex;flex-direction:column;gap:2px}
.ft3-links b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9C958A;margin-bottom:4px}
.ft3-links a{padding:5px 0;font-size:14px;color:#E9E2D2;transition:color .15s}
.ft3-links a:hover{color:var(--c-brushes)}
.ft3-tasks{grid-column:1/-1}
.ft3-tasks span{display:flex;flex-wrap:wrap;gap:6px}
.ft3-tasks a{padding:6px 12px;border-radius:999px;border:1px solid #3A3A3A;font-size:13px}
.ft3-tasks a:hover{border-color:var(--c-brushes)}
.ft3-bot{margin-top:20px;padding-top:14px;border-top:1px solid #333;font-size:12.5px;color:#9C958A}
.ft3-bot p{margin:4px 0}
.ft3-bot a{color:#CFC8B9}
@media (min-width:761px){
  .ft3{padding:46px 0 26px}
  .ft3-top{grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
  .ft3-facts{grid-template-columns:repeat(3,1fr)}
  .ft3-links{grid-template-columns:1fr 1fr 2fr}
  .ft3-tasks{grid-column:auto}
  .km-pile{height:180px}
  .kp{--tx:calc(var(--xd) * -1);left:var(--xd);bottom:var(--yd);transform:translateX(var(--tx)) rotate(var(--rd));height:48px;padding:0 22px;font-size:18px}
  .kp:hover,.kp:focus-visible{transform:translateX(var(--tx)) translateY(-8px) rotate(calc(var(--rd) * -.4)) scale(1.06)}
  @keyframes kpDrop{0%{transform:translateX(var(--tx)) translateY(-340px) rotate(calc(var(--rd) * -2));opacity:0}12%{opacity:1}
    70%{transform:translateX(var(--tx)) translateY(6px) rotate(var(--rd))}85%{transform:translateX(var(--tx)) translateY(-8px) rotate(var(--rd))}100%{transform:translateX(var(--tx)) translateY(0) rotate(var(--rd))}}
  @keyframes kpDrop2{0%{transform:translateX(var(--tx)) translateY(-340px) rotate(calc(var(--rd) * 2));opacity:0}12%{opacity:1}
    70%{transform:translateX(var(--tx)) translateY(6px) rotate(var(--rd))}85%{transform:translateX(var(--tx)) translateY(-8px) rotate(var(--rd))}100%{transform:translateX(var(--tx)) translateY(0) rotate(var(--rd))}}
}

/* ── поява при прокрутці (клас ставить v3m.js лише тим, що нижче екрана) ── */
.rv-w{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd2,0s)}
.rv-w.rv-in{opacity:1;transform:none}

/* живі картки й плитки */
.pc{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pc:hover{transform:translateY(-4px)!important;box-shadow:0 10px 0 -2px var(--line-2)!important}
.pc-ph img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-ph img{transform:scale(1.06) rotate(-2deg)}
.pc-btn{transition:transform .15s,background .2s}
.pc-btn:active{transform:scale(.95)}
.k-cat{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.k-cat:hover{transform:translateY(-4px) rotate(-1deg)}
.k-cat-ph{transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.k-cat:hover .k-cat-ph{transform:translateY(-10px) rotate(-6deg)}
.k-c-brushes:hover .k-cat-ph{transform:translateY(-10px) rotate(10deg)}
.k-pill{transition:background .2s,color .2s,transform .2s}
.k-pill:hover{transform:translateY(-2px)}
.k-stk{animation:kmSpin 14s linear infinite}
@keyframes kmSpin{to{transform:rotate(350deg)}}
.k-hero-art{animation:kmBob 5s ease-in-out infinite}
@keyframes kmBob{0%,100%{transform:rotate(14deg) translateY(0)}50%{transform:rotate(11deg) translateY(-10px)}}
.k-why-l li{transition:transform .2s}
.k-why-l li:hover{transform:translateX(4px)}
.g-head{position:relative;overflow:hidden}
.g-head::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;
  border:2px solid rgba(26,26,26,.18);animation:kmFloat 7s ease-in-out infinite}
@keyframes kmFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,12px)}}
.gal-s img{animation:kmIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes kmIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.btn-buy{transition:transform .15s}
.btn-buy:active{transform:scale(.97)}

@media (prefers-reduced-motion: reduce){
  .kp,.km-u,.km-tick-in,.k-stk,.k-hero-art,.g-head::after,.gal-s img,.mnav.on a.ml{animation:none!important}
  .km-u{background-size:100% 100%}
  .rv-w{opacity:1!important;transform:none!important;transition:none!important}
  .pc,.pc-ph img,.k-cat,.k-cat-ph,.kp,.nav a{transition:none!important}
}

/* шапка: контейнер шапки обмежений --max (1240), тож компактний режим потрібен на БУДЬ-якій
   ширині вікна. Було «до 1600 px» — на ширших екранах (Safari Mac ~1800) шапка вилазила за
   контейнер на 220 px, а лого переносилось на два рядки (29.10.2026). */
.nav a{padding:8px 10px}
.nav{gap:2px;flex:0 1 auto;min-width:0}
.hd-tel{display:none}
.hd-r .srch{max-width:190px;min-width:0;flex:0 1 190px}
.logo{flex:none;white-space:nowrap}
.hd-r{flex:none}
.hd-in{min-width:0}
/* шапка непрозора: крізь неї просвічували пігулки «Що турбує?» */
.hd{background:#FFFBF2}
html[data-theme="dark"] .hd{background:#131313}
@media (max-width:1180px){.nav a .nv-t::before{display:none}}
/* на телефоні — девʼять пігулок без накладань; решта лише на компʼютері */
@media (max-width:760px){.kp:nth-child(n+10){display:none}}

/* ── 28.10.2026 (2) · правки за телефоном власника ── */
/* на сенсорних екранах :hover «залипає» після дотику — тінь під пігулкою, підняті картки.
   Ефекти наведення лише там, де є миша; на дотик — коротке натискання */
@media (hover:none){
  .kp:hover,.kp:focus-visible{transform:translateX(var(--tx)) rotate(var(--r));box-shadow:none}
  .kp:active{transform:translateX(var(--tx)) rotate(var(--r)) scale(.94)}
  .pc:hover{transform:none!important;box-shadow:none!important}
  .pc:hover .pc-ph img{transform:none}
  .k-cat:hover{transform:none}
  .k-cat:hover .k-cat-ph,.k-c-brushes:hover .k-cat-ph{transform:none}
  .k-cat:active{transform:scale(.97)}
  .k-pill:hover{transform:none}
  .nav a:hover{transform:none}
}
@media (hover:none) and (min-width:761px){
  .kp:hover,.kp:focus-visible{transform:translateX(var(--tx)) rotate(var(--rd))}
  .kp:active{transform:translateX(var(--tx)) rotate(var(--rd)) scale(.94)}
}
/* закрита шухляда кошика відкидала тінь на правий край — сторінка виглядала зсунутою */
.drw:not(.on){box-shadow:none;visibility:hidden;transition:transform .38s var(--ease),visibility 0s .38s}
.drw.on{visibility:visible}
.mnav:not(.on){visibility:hidden;transition:transform .38s var(--ease),visibility 0s .38s}
.mnav.on{visibility:visible}
html,body{overflow-x:clip}

/* кнопка «вгору» */
.totop{position:fixed;right:16px;bottom:calc(16px + var(--off,0px) + env(safe-area-inset-bottom,0px));z-index:90;
  width:52px;height:52px;border-radius:50%;border:2px solid #1A1A1A;background:var(--c-brushes);color:#1A1A1A;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 4px 0 #1A1A1A;
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.5,1),bottom .25s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:active{transform:translateY(3px);box-shadow:0 1px 0 #1A1A1A}
@media (hover:hover){.totop:hover{transform:translateY(-3px)}}

/* перемикач теми */
.thm{width:44px;height:44px;border-radius:50%;border:2px solid #1A1A1A;background:transparent;color:#1A1A1A;
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;margin-right:6px;transition:transform .3s}
.thm:active{transform:rotate(30deg) scale(.92)}
.thm .thm-sun{display:none}
html[data-theme="dark"] .thm .thm-sun{display:block}
html[data-theme="dark"] .thm .thm-moon{display:none}
.mnav-top{display:flex;align-items:center;gap:6px}
.mnav-top .logo{margin-right:auto}

/* ═══ ТЕМНА ТЕМА ═══ */
html[data-theme="dark"]{color-scheme:dark;
  --bg:#131313; --bg-2:#1C1C1C; --card:#1E1E1E; --ink:#F2EDE3; --ink-2:#E2DCD0; --muted:#B5AEA2;
  --line:#2C2C2C; --line-2:#3A3A3A; --navy:#F2EDE3; --brand:#F2EDE3; --teal:#F2EDE3; --teal-x:#242424; --teal-l:#2A2A2A}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .kp{color:var(--k)}
html[data-theme="dark"] .k-cat,html[data-theme="dark"] .k-cat *,html[data-theme="dark"] .k-hero a,html[data-theme="dark"] .mnav a.ml{color:#1A1A1A}
html[data-theme="dark"] .mnav a.ml[href="/catalog/"],html[data-theme="dark"] .mnav a.ml[href="/catalog/"] *{color:#FFFBF2!important}
html[data-theme="dark"] .hd{background:rgba(19,19,19,.92)}
html[data-theme="dark"] .logo,html[data-theme="dark"] .logo *{color:var(--ink)}
html[data-theme="dark"] .logo rect{stroke:#F2EDE3;stroke-width:3}
html[data-theme="dark"] .thm,html[data-theme="dark"] .burger{border-color:#F2EDE3;color:#F2EDE3;background:transparent}
html[data-theme="dark"] .ico-btn.cart{background:#F2EDE3;color:#131313}
html[data-theme="dark"] .nav a{color:var(--ink)}
html[data-theme="dark"] .nav a:hover,html[data-theme="dark"] .nav a:focus-visible{color:#1A1A1A}
html[data-theme="dark"] .nav a[href="/catalog/"]:hover{background:#F2EDE3;color:#131313}
html[data-theme="dark"] .nav a.on{background:#F2EDE3;color:#131313}
html[data-theme="dark"] .nav a .nv-s{background:#F2EDE3;color:#131313}
html[data-theme="dark"] .nav a .nv-s::before{border-bottom-color:#F2EDE3}
html[data-theme="dark"] .srch input{background:var(--card);color:var(--ink);border-color:var(--line-2)}
/* кнопки: на темному чорна кнопка губиться — жовта */
html[data-theme="dark"] .btn,html[data-theme="dark"] .btn-lg,html[data-theme="dark"] .btn-buy,
html[data-theme="dark"] .pc-btn,html[data-theme="dark"] .k-buy{background:var(--c-brushes)!important;color:#1A1A1A!important}
html[data-theme="dark"] .km-out{color:var(--ink);border-bottom-color:var(--ink)}
html[data-theme="dark"] .km-u,html[data-theme="dark"] h1 em,html[data-theme="dark"] h2 em{
  background-image:linear-gradient(transparent 84%,var(--c-brushes) 84%)}
html[data-theme="dark"] .km-tick{background:#000}
html[data-theme="dark"] .kp{border-color:#000}
html[data-theme="dark"] .kp[style*="--c:#1A1A1A"]{border-color:#F2EDE3}
/* кольорові плашки лишаються кольоровими — текст на них завжди темний */
.k-hero,.k-hero a,.g-head,.g-head h1,.g-head p,.k-cat{color:#1A1A1A}
html[data-theme="dark"] .k-hero .k-hero-l{border-bottom-color:#1A1A1A}
html[data-theme="dark"] .k-pill{background:var(--card);color:var(--ink);border-color:#F2EDE3}
html[data-theme="dark"] .k-pill:hover{background:#F2EDE3;color:#131313}
html[data-theme="dark"] .k-why,html[data-theme="dark"] .sec-dark .quiz{background:#1E1E1E;border:1px solid var(--line-2)}
html[data-theme="dark"] .pc{background:var(--card)}
html[data-theme="dark"] .pc-name a{color:var(--ink)}
html[data-theme="dark"] .g-cats .chip,html[data-theme="dark"] .chip,html[data-theme="dark"] .h-chip{background:var(--card);color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .g-cats .chip.on,html[data-theme="dark"] .chip.on{background:#F2EDE3;color:#131313}
html[data-theme="dark"] .g-sort select{background:var(--card);color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .pd2-facts li{background:var(--card);border-color:var(--line-2)}
html[data-theme="dark"] .specs th,html[data-theme="dark"] .specs td{border-color:var(--line)}
html[data-theme="dark"] .drw .co-form input,html[data-theme="dark"] .drw .co-form textarea{background:var(--card);color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .co-dlv label,html[data-theme="dark"] .co-pay label{border-color:var(--line-2)}
html[data-theme="dark"] .co-dlv label:has(input:checked){background:#2A2615;border-color:var(--c-brushes)}
html[data-theme="dark"] .co-dlv input[type=radio]{accent-color:var(--c-brushes)}
html[data-theme="dark"] .co-steps li.on::before{background:var(--c-brushes);color:#1A1A1A}
html[data-theme="dark"] .ship-bar i{background:var(--c-brushes)}
html[data-theme="dark"] .co-paytest{background:#3A3010;color:#FFE27A}
html[data-theme="dark"] .mnav a.ml[href="/catalog/"]{border-color:#F2EDE3}
html[data-theme="dark"] .mnav a.ml[href="/dostavka/"]{border-color:#F2EDE3}
html[data-theme="dark"] .ft3{background:#0C0C0C;border-top:1px solid var(--line)}
html[data-theme="dark"] .totop{border-color:#000;box-shadow:0 4px 0 #000}
html[data-theme="dark"] .acc>summary{color:var(--ink)}
html[data-theme="dark"] img{filter:none}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
html[data-theme="dark"] .k-hero .k-buy{background:#1A1A1A!important;color:#FFFBF2!important}
html[data-theme="dark"] .pd-brand,html[data-theme="dark"] .pc-brand{color:var(--muted)}
html[data-theme="dark"] .pd2-ask,html[data-theme="dark"] .pd2-ask a{color:var(--ink)}
html[data-theme="dark"] .mnav .ico-btn{background:var(--card);color:var(--ink)}
html[data-theme="dark"] .crumbs a,html[data-theme="dark"] .crumbs{color:var(--muted)}

/* ═══ 28.10.2026 (3) · за списком власника ═══ */
/* порядок товарів: перемикач-«пігулки» замість системного списку */
.g-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--card);border:2px solid #1A1A1A;gap:4px}
.g-seg button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);
  font:600 14px/1 var(--f);cursor:pointer;transition:background .2s,color .2s}
.g-seg button.on{background:#1A1A1A;color:#FFFBF2}
@media (hover:hover){.g-seg button:not(.on):hover{background:var(--c-brushes);color:#1A1A1A}}
html[data-theme="dark"] .g-seg{border-color:#F2EDE3}
html[data-theme="dark"] .g-seg button.on{background:var(--c-brushes);color:#1A1A1A}

/* посилання на статті блогу: видно, що це блог */
main a[href^="/blog/"]:not([class]){font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:#F4A6C8;color:var(--ink)}
main a[href^="/blog/"]:not([class])::before{content:"Блог";display:inline-block;margin-right:5px;padding:1px 7px;border-radius:999px;
  background:#F4A6C8;color:#1A1A1A;font-size:.72em;font-weight:700;line-height:1.5;vertical-align:.12em;text-decoration:none}

/* лого: у темній темі — жовтий квадрат і темний зуб */
html[data-theme="dark"] .logo rect,html[data-theme="dark"] .ft3-logo rect{stroke:none}
html[data-theme="dark"] .logo stop{stop-color:#FFD84D}
html[data-theme="dark"] .logo svg path{fill:#1A1A1A}
html[data-theme="dark"] .logo svg ellipse{stroke:#1A1A1A;stroke-opacity:.45}

/* блок «Магазин при стоматології» */
/* блок «Магазин при стоматології» v2: темна картка, факти рядками, фото-полароїд і стікер */
.kc2{position:relative;display:grid;gap:30px;padding:28px 20px 30px;border-radius:32px;background:#1A1A1A;color:#FFFBF2;overflow:hidden}
.kc2-eb{display:inline-block;padding:6px 12px;border-radius:999px;background:#FFD84D;color:#1A1A1A;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.kc2 h2{margin:14px 0 12px;font-size:clamp(1.9rem,7.4vw,3.3rem);line-height:1;font-weight:800;letter-spacing:-.035em;color:#FFFBF2}
.kc2 h2 em,html[data-theme="dark"] .kc2 h2 em{font-style:normal;color:#FFD84D;background:none!important;padding:0}
.kc2-t>p{margin:0;color:#D9D2C4;font-size:16px;line-height:1.5;max-width:46ch}
.kc2-f{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(255,251,242,.16)}
.kc2-f li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;padding:12px 0;border-bottom:1px solid rgba(255,251,242,.16)}
.kc2-f b{min-width:94px;text-align:center;padding:6px 12px;border-radius:999px;background:var(--c);color:#1A1A1A;font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.kc2-f span{font-size:14.5px;color:#EDE6D8;line-height:1.35}
.kc2-f a{color:#FFFBF2;font-size:13.5px;font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:1px solid rgba(255,251,242,.5)}
.kc2-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:24px}
.kc2-btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;background:#FFD84D;color:#1A1A1A!important;font-weight:700;text-decoration:none}
.kc2-out{color:#FFFBF2!important;font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding:2px 0}
.kc2-ph{position:relative;margin:6px 0 0;justify-self:center;width:min(84%,340px);order:-1}
.kc2-pol{background:#FFFBF2;padding:10px 10px 0;border-radius:18px;transform:rotate(-3deg);box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.kc2-pol img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#2A2A2A}
.kc2-pol figcaption{padding:10px 4px 12px;color:#1A1A1A;font-size:13px;font-weight:600;text-align:center}
.kc2-stk{position:absolute;right:-18px;top:-16px;width:98px;height:98px;border-radius:50%;background:#FF9466;color:#1A1A1A;border:2px solid #1A1A1A;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);font-size:12.5px;font-weight:600;line-height:1.05}
.kc2-stk b{font-size:23px;font-weight:800;letter-spacing:-.02em}
@media (hover:hover){.kc2:hover .kc2-pol{transform:rotate(0) scale(1.02)}}
@media (min-width:761px){.kc2{grid-template-columns:1.2fr .8fr;align-items:center;gap:44px;padding:52px 52px 52px 56px}
  .kc2-ph{order:0;width:min(100%,370px);margin:0}.kc2-t>p{font-size:17px}}
@media (prefers-reduced-motion:reduce){.kc2-pol{transition:none}}
html[data-theme="dark"] .kc2{background:#1E1E1E;border:2px solid #3A3A3A}

/* блок Telegram-бота */
.kb{display:grid;gap:16px;align-items:center;padding:24px 22px;border-radius:30px;background:#1679B8;color:#fff}
.kb-eb{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.18)}
.kb h2{margin:10px 0 6px;font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.05;font-weight:800;color:#fff}
.kb p{margin:0;font-size:15.5px;color:#fff;max-width:52ch}
.kb-a{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.kb-btn{display:inline-flex;align-items:center;min-height:54px;padding:0 28px;border-radius:999px;background:#FFFBF2;color:#0B5A85!important;font-weight:700;font-size:16px;text-decoration:none;border:2px solid #1A1A1A}
.kb-n{font-size:13px;color:#EAF7FF}
@media (min-width:761px){.kb{grid-template-columns:1fr auto;padding:36px}.kb-a{align-items:flex-end}}
html[data-theme="dark"] .kb{background:#1C6E99}

/* мобільне меню: телефон по центру — великий, щоб дзвонити одним дотиком */
.mnav .mfoot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.mnav .mfoot a[href^="tel:"]{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:999px;
  background:#1A1A1A;color:#FFFBF2!important;font-size:19px!important;text-decoration:none}
html[data-theme="dark"] .mnav .mfoot a[href^="tel:"]{background:var(--c-brushes);color:#1A1A1A!important}

/* ═══ підвал v3 ═══ */
.ft3{display:none}
.f4{margin-top:48px;padding:40px 0 24px;background:#FFF1CC;color:#1A1A1A;border-top:2px solid #1A1A1A}
.f4 a{color:#1A1A1A}
.f4-call{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.f4-eb{font-size:14px;font-weight:600;color:#4A443A}
.f4-tel{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;min-height:62px;padding:0 24px;
  border-radius:999px;background:#1A1A1A;color:#FFFBF2!important;font-size:21px;font-weight:800;letter-spacing:-.01em;text-decoration:none;box-shadow:0 5px 0 #FF9466}
.f4-tel:active{transform:translateY(3px);box-shadow:0 2px 0 #FF9466}
.f4-soc{display:flex;gap:10px;justify-content:center;width:100%;max-width:420px}
.f4-tg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;background:#1679B8;color:#fff!important;font-weight:700;text-decoration:none;border:2px solid #1A1A1A}
.f4-tg svg,.f4-ig svg{width:20px;height:20px}
.f4-ig{width:50px;height:50px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#FFFBF2;border:2px solid #1A1A1A}
.f4-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.f4-cat{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--c);border:2px solid #1A1A1A;font-weight:700;text-decoration:none;font-size:14.5px}
@media (hover:hover){.f4-cat:hover{transform:translateY(-2px) rotate(-1.5deg)}}
.f4-info{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.f4-info li{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:20px;background:#FFFBF2;border:2px solid #1A1A1A;text-align:left}
.f4-info b{font-size:16px}
.f4-info span{font-size:13.5px;color:#4A443A}
.f4-info a{margin-top:4px;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.f4-links{margin-top:22px;display:grid;gap:12px;text-align:center}
.f4-links p{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:14px}
.f4-links b{width:100%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6A6253}
.f4-links a{text-decoration:none;padding:4px 0}
@media (hover:hover){.f4-links a:hover{text-decoration:underline}}
/* напис бренду v2: знак + «Space Care» суцільним кольором, під «Care» — смуга кольорів категорій */
.f4-word{margin:30px 0 8px;display:flex;justify-content:center;align-items:center;gap:.2em;font-size:clamp(2.7rem,12.5vw,8.5rem);
  font-weight:800;letter-spacing:-.05em;line-height:1;color:#1A1A1A;user-select:none;white-space:nowrap}
.f4-mk{width:.86em;height:.86em;flex:none;transform:rotate(-6deg);transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.f4-mk .mk-bg{fill:#1A1A1A}.f4-mk .mk-orb{stroke:#fff;stroke-opacity:.42}.f4-mk .mk-tooth{fill:#fff}
.f4-wt em{font-style:normal;position:relative;display:inline-block}
.f4-wt em::after{content:"";position:absolute;left:.02em;right:.04em;bottom:-.02em;height:.14em;border-radius:99px;
  background:linear-gradient(90deg,#FFD84D 0 20%,#FF9466 20% 40%,#6ED3CF 40% 60%,#C3B1FF 60% 80%,#A6E36E 80%)}
@media (hover:hover){.f4-word:hover .f4-mk{transform:rotate(6deg) scale(1.05)}}
.f4-bot{margin-top:14px;padding-top:14px;border-top:1px solid rgba(26,26,26,.18);text-align:center;font-size:12.5px;color:#4A443A}
.f4-bot p{margin:4px 0}
@media (min-width:761px){
  .f4{padding:56px 0 28px}
  .f4-info{grid-template-columns:repeat(3,1fr)}
}
html[data-theme="dark"] .f4{background:#0D0D0D;color:var(--ink);border-top-color:var(--line-2)}
html[data-theme="dark"] .f4 a{color:var(--ink)}
html[data-theme="dark"] .f4-eb,html[data-theme="dark"] .f4-info span,html[data-theme="dark"] .f4-bot{color:var(--muted)}
html[data-theme="dark"] .f4-links b{color:#9C958A}
html[data-theme="dark"] .f4-tel{background:var(--c-brushes);color:#1A1A1A!important;box-shadow:0 5px 0 #FF9466}
html[data-theme="dark"] .f4-info li{background:#1A1A1A;border-color:var(--line-2)}
html[data-theme="dark"] .f4-ig{background:#1A1A1A;border-color:#F2EDE3}
html[data-theme="dark"] .f4-ig svg{color:#F2EDE3}
html[data-theme="dark"] .f4-cat{color:#1A1A1A!important}
html[data-theme="dark"] .f4-word{color:var(--ink)}
html[data-theme="dark"] .f4-mk .mk-bg{fill:#FFD84D}html[data-theme="dark"] .f4-mk .mk-orb{stroke:#1A1A1A}html[data-theme="dark"] .f4-mk .mk-tooth{fill:#1A1A1A}
html[data-theme="dark"] .f4-bot{border-top-color:var(--line)}
.f4-tg,.f4-tg *{color:#fff!important}
.f4-ig svg{color:#1A1A1A}
.f4-tel svg{flex:none}

/* ── контраст (аудит 28.10.2026, WebKit + Chromium, обидві теми) ── */
.kb{background:#12659C}
.kb-eb{background:#0B4A73;color:#fff}
.kb-n{color:#fff;opacity:1}
html[data-theme="dark"] .kb{background:#11577F}
html[data-theme="dark"] .kb-eb{background:#08324D}
.mbar-buy .mb-n{color:#D9D2C4}
html[data-theme="dark"] .skip{background:#FFD84D;color:#1A1A1A}
/* картки v2 з білим тлом — у темній темі темна картка */
html[data-theme="dark"] :is(.srch-res,.eyebrow,.ha,.cat,.pc,.filters,.chip,.pd-buy,.faq-i,.tr-i,.callout,.dr-h,.ship,.ci,.dr-f,
  .tk-card,.cta-box,.pg-nav a,.post-list a,.rv-i,.sa-b,.hd,.h-a,.h-chip,.bt,.tk,.pd2-facts li,.g-sort select){
  background:var(--card);color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] :is(.co-form input,.co-form textarea,.drw .co-form input,.drw .co-form textarea){
  background:#151515;color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .hd{background:rgba(19,19,19,.92)}
html[data-theme="dark"] :is(.post-list,.faq-i,.callout,.ci,.tr-i,.rv-i,.cta-box,.tk-card,.ship) :is(span,em,small,p,b,strong,h3,h4,summary){color:inherit}
html[data-theme="dark"] :is(.post-list span,.post-list em,.faq-i p,.rv-i p,.ci p,.ci span,.tr-i p){color:var(--muted)}
html[data-theme="dark"] .btn-g{background:transparent;color:var(--ink);border-color:var(--ink)}
/* посилання в тексті: у темній темі — жовті, з підкресленням */
html[data-theme="dark"] main :is(p,li,td,dd,span,.callout,.ci,.faq-i,.cta-box) a:not([class]),
html[data-theme="dark"] main .ci a,html[data-theme="dark"] main .callout a:not(.btn){color:#FFE07A;text-decoration-color:rgba(255,224,122,.5)}
/* шапка каталогу без категорії (загальний каталог, бренди) — тло темне, текст світлий */
html[data-theme="dark"] body:not([class*="cat-"]) .g-head,
html[data-theme="dark"] body:not([class*="cat-"]) .g-head :is(h1,p,span,a){color:var(--ink)}
html[data-theme="dark"] body:not([class*="cat-"]) .g-head p{color:var(--muted)}

/* ── телефон: фото й картки видно завжди (28.10.2026, скарга власника «на телефоні немає картинок») ──
   На сенсорних екранах поява при прокрутці лише зсуває блок, не ховає його: якщо скрипт
   не відпрацює (старий кеш, вбудований браузер Telegram/Instagram, енергозбереження),
   фото все одно на місці. Переходи між сторінками (view transitions) на телефоні вимкнено:
   у Safari іменовані картинки могли лишатись незамальованими після переходу. */
@media (hover:none){
  .rv-w{opacity:1!important}
  @view-transition{navigation:none}
  img{view-transition-name:none!important}
}

/* мобільне меню: плитки не стискаються (меню — flex-колонка на висоту екрана; плитка з довшим
   підписом стискалась, текст «Пасти» налазив на рамку) — 28.10.2026 */
.mnav a.ml{flex-shrink:0}
.mnav .ml-t{min-width:0}

/* ═══ підвал v4: мапа згори + QED (28.10.2026) ═══ */
.f4{display:none}
.f5{position:relative;margin-top:48px;background:#F6F3EC;color:#1A1A1A;border-top:1px dashed #CFC8B8;overflow:hidden}
.f5::before{content:"";position:absolute;inset:0 0 auto;height:64px;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(26,26,26,.18) calc(20% - 1px) 20%);
  -webkit-mask:repeating-linear-gradient(transparent 0 5px,#000 5px 10px);mask:repeating-linear-gradient(transparent 0 5px,#000 5px 10px)}
.f5-map{max-width:1100px;margin:0 auto;padding:46px 16px 8px;display:grid;gap:14px;justify-items:center}
.f5-mfig{margin:0;width:100%}
.f5-mfig img{display:block;width:100%;height:auto;-webkit-mask-image:url(/img/aerial-mask.png?v=1);mask-image:url(/img/aerial-mask.png?v=1);
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.f5-cap{display:grid;gap:3px;text-align:center;justify-items:center}
.f5-cap b{font-size:16px;font-weight:700}
.f5-cap span{font-size:14px;color:#6A6253}
.f5-cap code{font:12.5px ui-monospace,Menlo,monospace;color:#5E5749;letter-spacing:.04em}
.f5-cap a{margin-top:6px;font-weight:600;color:#1A1A1A;text-decoration:none;border-bottom:1.5px solid currentColor}
.f5-in{max-width:1200px;margin:0 auto;padding:34px 16px 0}
.f5-call{display:grid;justify-items:center;gap:12px;padding-bottom:28px;border-bottom:1px dashed #CFC8B8}
.f5-eb{font-size:13px;font-weight:700;color:#6A6253}
.f5-tel{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:min(100%,420px);min-height:60px;border-radius:999px;background:#1A1A1A;
  color:#FFFBF2!important;font-size:21px;font-weight:800;letter-spacing:-.01em;text-decoration:none;box-shadow:0 4px 0 #FF9466}
.f5-soc{display:flex;gap:10px;width:min(100%,420px)}
.f5-tg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;background:#1679B8;color:#fff!important;font-weight:700;text-decoration:none}
.f5-tg svg{width:20px;height:20px}
.f5-ig{width:50px;height:50px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid #1A1A1A;color:#1A1A1A}
.f5-ig svg{width:20px;height:20px}
.f5-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;padding:28px 0}
.f5-cols div{display:flex;flex-direction:column;gap:7px;min-width:0}
.f5-cols b{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5E5749;margin-bottom:4px}
.f5-cols a,.f5-cols span{font-size:14.5px;color:#1A1A1A;text-decoration:none;line-height:1.35}
.f5-cols span{color:#5E5749}
@media (hover:hover){.f5-cols a:hover{text-decoration:underline;text-underline-offset:3px}}
.f5-bot{display:grid;gap:4px;padding:18px 0 6px;border-top:1px dashed #CFC8B8;font-size:12.5px;color:#5E5749;text-align:center}
.f5-bot p{margin:0}.f5-bot a{color:inherit}
.f5-art{position:relative;margin-top:6px;line-height:0}
.f5-art img{display:block;width:100%;height:auto;min-height:190px;object-fit:cover;object-position:46% 100%}
.f5-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (min-width:761px){
  .f5-map{grid-template-columns:1.6fr 1fr;align-items:center;justify-items:start;padding-top:64px}
  .f5-cap{text-align:left;justify-items:start}
  .f5-in{display:grid;grid-template-columns:340px 1fr;gap:0 48px;padding-top:44px}
  .f5-call{justify-items:stretch;padding:0 40px 0 0;border-bottom:0;border-right:1px dashed #CFC8B8;align-content:start}
  .f5-cols{grid-template-columns:repeat(4,1fr);padding:0}
  .f5-bot{grid-column:1/-1;text-align:left;display:flex;justify-content:space-between;gap:16px;margin-top:34px}
}
html[data-theme="dark"] .f5{background:#111;color:var(--ink);border-top-color:#333}
html[data-theme="dark"] .f5::before{background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(242,237,227,.16) calc(20% - 1px) 20%)}
html[data-theme="dark"] .f5-cap span,html[data-theme="dark"] .f5-cols span{color:#B5AEA2}
html[data-theme="dark"] .f5-cap a,html[data-theme="dark"] .f5-cols a{color:var(--ink)}
html[data-theme="dark"] .f5-tel{background:#FFD84D;color:#1A1A1A!important}
html[data-theme="dark"] .f5-ig{border-color:#F2EDE3;color:#F2EDE3}
html[data-theme="dark"] .f5-call,html[data-theme="dark"] .f5-bot{border-color:#333}
html[data-theme="dark"] .f5-art img{filter:invert(1) brightness(.92)}
html[data-theme="dark"] .f5-mfig img{filter:brightness(.88) saturate(.9)}
html[data-theme="dark"] .f5-eb,html[data-theme="dark"] .f5-bot,html[data-theme="dark"] .f5-bot a,html[data-theme="dark"] .f5-cols b,html[data-theme="dark"] .f5-cap code{color:#B5AEA2}

/* ═══ кошик у стилі «Колір» (28.10.2026) ═══ */
.drw{background:#FFFBF2;border-left:2px solid #1A1A1A}
.drw .dr-h{background:#FFD84D;border-bottom:2px solid #1A1A1A;padding:16px 18px}
.drw .dr-h h3{font-size:24px;font-weight:800;letter-spacing:-.03em;color:#1A1A1A;display:flex;align-items:center;gap:8px}
.drw .dr-x{width:44px;height:44px;border-radius:50%;border:2px solid #1A1A1A;background:#FFFBF2;color:#1A1A1A;font-size:22px;line-height:1}
.drw .ship{background:#FFFBF2;border-bottom:1px dashed #CFC8B8;padding:14px 18px}
.drw .ship-t{color:#3D372D}
.drw .ship-bar{height:14px;border-radius:99px;background:#EFE7D6;border:2px solid #1A1A1A;overflow:hidden;margin-top:10px}
.drw .ship-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD84D 0 20%,#FF9466 20% 40%,#6ED3CF 40% 60%,#C3B1FF 60% 80%,#A6E36E 80%);background-size:100% 100%}
.drw .dr-b{background:#FFFBF2}
.drw .ci{background:#fff;border:2px solid #1A1A1A;border-radius:22px;box-shadow:0 3px 0 #1A1A1A}
.drw .ci-img{border-radius:16px;background:#FFE89A}
.drw .ci:nth-child(5n+2) .ci-img{background:#FFC9AE}.drw .ci:nth-child(5n+3) .ci-img{background:#BFEDEA}
.drw .ci:nth-child(5n+4) .ci-img{background:#E1D7FF}.drw .ci:nth-child(5n+5) .ci-img{background:#D3F0B5}
.drw .ci-name{font-weight:700;color:#1A1A1A}
.drw .ci-price{font-weight:700;color:#1A1A1A}
.drw .qty{border:2px solid #1A1A1A;border-radius:99px;background:#FFFBF2}
.drw .qty button{color:#1A1A1A;font-weight:800}
.drw .ci-rm{color:#6A6253;font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.drw .ci-rm:hover{color:#C94949}}
.drw .dr-f{background:#fff;border-top:2px solid #1A1A1A}
.drw .dr-tot b{font-size:28px;font-weight:800;letter-spacing:-.03em}
.drw #coCartBtn,.drw .co-form .btn{background:#1A1A1A!important;color:#FFFBF2!important;border-radius:99px;box-shadow:0 4px 0 #FF9466;border:0}
.drw #coCartBtn:active,.drw .co-form .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #FF9466}
.drw .co-steps li{border-radius:99px}
.drw .co-steps li.on{background:#FFD84D;color:#1A1A1A}
.drw .co-form input,.drw .co-form textarea,.drw .co-form select{border:2px solid #1A1A1A;border-radius:16px;background:#FFFBF2}
.drw .co-form input:focus,.drw .co-form textarea:focus{outline:3px solid #FFD84D;outline-offset:1px}
.drw .dr-empty{color:#3D372D}
html[data-theme="dark"] .drw{background:#161616;border-left-color:#3A3A3A}
html[data-theme="dark"] .drw .ship,html[data-theme="dark"] .drw .dr-b{background:#161616}
html[data-theme="dark"] .drw .ship-t,html[data-theme="dark"] .drw .dr-empty{color:var(--ink)}
html[data-theme="dark"] .drw .ship-bar{background:#2A2A2A;border-color:#3A3A3A}
html[data-theme="dark"] .drw .ci{background:#1E1E1E;border-color:#3A3A3A;box-shadow:0 3px 0 #000}
html[data-theme="dark"] .drw .ci-name,html[data-theme="dark"] .drw .ci-price,html[data-theme="dark"] .drw .qty button{color:var(--ink)}
html[data-theme="dark"] .drw .qty{background:#161616;border-color:#F2EDE3}
html[data-theme="dark"] .drw .ci-rm{color:#B5AEA2}
html[data-theme="dark"] .drw .dr-f{background:#1A1A1A;border-top-color:#3A3A3A}
html[data-theme="dark"] .drw #coCartBtn,html[data-theme="dark"] .drw .co-form .btn{background:#FFD84D!important;color:#1A1A1A!important}
html[data-theme="dark"] .drw .co-form input,html[data-theme="dark"] .drw .co-form textarea{background:#161616;border-color:#F2EDE3;color:var(--ink)}

/* мапа: мітка клініки — посилання на сайт стоматології (28.10.2026). Координати = мітка в aerial.py (1200×760):
   пігулка x 179..411, y 122..156; уся зона до даху клініки — y 290 */
.f5-mfig{position:relative}
.f5-cl{position:absolute;left:14.92%;top:16.05%;width:19.33%;height:22.1%;border-radius:18px;-webkit-tap-highlight-color:transparent}
.f5-clp{position:absolute;left:0;top:0;width:100%;height:20.2%;border-radius:999px;transition:box-shadow .2s,background .2s}
.f5-cl:focus-visible{outline:none}
.f5-cl:focus-visible .f5-clp{box-shadow:0 0 0 3px #FFD84D,0 0 0 5px #1A1A1A}
@media (hover:hover){.f5-cl:hover .f5-clp{box-shadow:0 0 0 3px #FFD84D,0 6px 14px rgba(0,0,0,.18)}}

/* підвал: картина «Відродження + догляд за зубами» замість гравюри (29.10.2026). Пил з гравюри вимкнено (canvas прибрано). */
.f5-art img.f5-paint{min-height:230px;max-height:560px;object-fit:cover;object-position:66% 70%;filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
html[data-theme="dark"] .f5-art img.f5-paint{filter:brightness(.84) saturate(.95)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .f5-art img.f5-paint{filter:brightness(.84) saturate(.95)}}

/* мапа в стилі Відродження (29.10.2026): картина + шар анімації поверх, 1200×515. Відсотки .f5-cl = мітка в aerial_ren.py */
.f5-mfig img{-webkit-mask-image:url(/img/aerial-ren-mask.png?v=1);mask-image:url(/img/aerial-ren-mask.png?v=1)}
.f5-mfig .f5-mimg{position:absolute;inset:0;width:100%;height:100%}
.f5-cl{top:23.69%;height:32.62%}

/* блок клініки: фото команди, полароїд 4:3 (29.10.2026) */
.kc2-pol img{aspect-ratio:4/3;object-position:50% 40%}
.kc2-ph{width:min(90%,420px)}
@media (min-width:760px){.kc2-ph{width:min(100%,430px)}}

/* фото фасаду (29.10.2026): тримати вивіску й двері в кадрі */
.kc2-pol img{object-position:50% 45%}

/* кошик: шкала до безкоштовної доставки доростає плавно; підписи під нею (29.10.2026) */
.drw .ship-bar i{transition:width .7s cubic-bezier(.22,1,.36,1);background-repeat:no-repeat;background-position:0 0}
.drw .ship-bar.full{box-shadow:0 0 0 3px rgba(166,227,110,.45)}
.drw .ship-sc{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:11.5px;color:#6A6253;font-weight:600}
html[data-theme="dark"] .drw .ship-sc{color:#B9B2A3}
@media (prefers-reduced-motion:reduce){.drw .ship-bar i{transition:none}}


/* ── ряд товарів у межах контейнера + стрілки (29.10.2026) ──
   Раніше ряд на ≥1280 тягнувся від краю до краю вікна з відступом через 100vw;
   у Safari після прокрутки картки стояли впритул до лівого краю вікна. */
@media (min-width:700px){
  .row-wrap{position:relative;width:min(calc(100% - 40px),calc(var(--max) - 40px));margin-inline:auto}
  .row,.pd2 .row{padding-left:0;padding-right:0;scroll-padding:0}
}
.rw-b{display:none}
@media (min-width:700px) and (hover:hover){
  .rw-b{display:flex;position:absolute;top:110px;z-index:3;width:46px;height:46px;border-radius:50%;
    align-items:center;justify-content:center;background:#1A1A1A;color:#FFFBF2;border:0;cursor:pointer;
    box-shadow:0 6px 18px rgba(26,26,26,.18);transition:opacity .2s,transform .2s}
  .rw-b:hover{transform:scale(1.06)}
  .rw-b:focus-visible{outline:3px solid var(--c-brushes,#FFD84D);outline-offset:2px}
  .rw-p{left:8px}.rw-n{right:8px}
  .rw-b[hidden]{display:none!important}
  html[data-theme="dark"] .rw-b{background:#F2EDE3;color:#131313}
}

/* немає на складі за обліком адмінки (29.10.2026) */
.pd-stock.out{color:#B4532A}
.pd-stock.out i{background:#FF9466}
html[data-theme="dark"] .pd-stock.out{color:#FFB08A}

/* кнопка «Адмінка» — лише власнику (29.10.2026) */
.adm-pill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;display:flex;gap:6px;flex-wrap:wrap}
.adm-pill a{background:#1A1A1A;color:#FFD84D;font:600 13px/16px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0;padding:10px 14px;border-radius:999px;
  text-decoration:none;box-shadow:0 4px 14px rgba(26,26,26,.25);border:1.5px solid #FFD84D}
.adm-pill a:hover{background:#FFD84D;color:#1A1A1A}
@media (max-width:760px){.adm-pill{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media print{.adm-pill{display:none}}

.adm-pill a{display:inline-block;min-width:112px;text-align:center;box-sizing:border-box}

/* ── блок «Лікування й діагностика поруч» (29.10.2026) ── */
.eco-hd{max-width:62ch;margin:0 0 22px}
.eco-k{display:inline-block;padding:6px 12px;border-radius:999px;background:#1A1A1A;color:#FFFBF2;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.eco-hd h2{margin:14px 0 10px;font-size:clamp(1.8rem,6.6vw,3rem);line-height:1.02;font-weight:800;letter-spacing:-.035em}
.eco-hd p{margin:0;font-size:16px;line-height:1.5;opacity:.85}
.eco-g{display:grid;gap:18px}
.eco-c{display:flex;flex-direction:column;border-radius:28px;background:var(--c);color:#1A1A1A;border:2px solid #1A1A1A;overflow:hidden}
.eco-pva{display:block;text-decoration:none;color:inherit}
.eco-pv{position:relative;padding:18px 18px 0;height:clamp(210px,58vw,290px);overflow:hidden}
.eco-br{width:86%;border-radius:12px 12px 0 0;background:#1A1A1A;border:2px solid #1A1A1A;border-bottom:0;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.eco-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#FFFBF2;border-bottom:2px solid #1A1A1A}
.eco-bar i{width:8px;height:8px;border-radius:50%;background:#1A1A1A;opacity:.85}
.eco-bar span{margin-left:8px;font-size:11.5px;font-weight:600;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eco-br img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.eco-ph{position:absolute;right:16px;top:58px;width:27%;max-width:118px;border-radius:18px;border:3px solid #1A1A1A;background:#1A1A1A;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.28);transform:rotate(4deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.eco-ph img{display:block;width:100%;height:auto;aspect-ratio:1/2;object-fit:cover;object-position:50% 0}
.eco-t{padding:20px 20px 22px;border-top:2px solid #1A1A1A;background:#FFFBF2;flex:1;display:flex;flex-direction:column}
.eco-eb{align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--c);border:1.5px solid #1A1A1A;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1A1A1A}
.eco-t h3{margin:12px 0 8px;font-size:clamp(1.35rem,5vw,1.7rem);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#1A1A1A}
.eco-t p{margin:0;font-size:15px;line-height:1.5;color:#3A3530}
.eco-f{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid rgba(26,26,26,.14)}
.eco-f li{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(26,26,26,.14);font-size:14.5px;line-height:1.35;color:#1A1A1A}
.eco-f b{font-size:12.5px;font-weight:700;color:#6B635A;text-transform:uppercase;letter-spacing:.03em}
.eco-f li:first-child b{color:#1A1A1A;font-size:15px;text-transform:none;letter-spacing:0}
.eco-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto;padding-top:18px}
.eco-go{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 22px;border-radius:999px;background:#1A1A1A;color:#FFFBF2!important;font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--c)}
.eco-tel{color:#1A1A1A!important;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding:2px 0;white-space:nowrap}
.eco-go:focus-visible,.eco-tel:focus-visible{outline:3px solid #1A1A1A;outline-offset:3px}
@media (hover:hover){.eco-c:hover .eco-ph{transform:rotate(0) translateY(-6px)}.eco-go:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--c)}}
@media (min-width:900px){.eco-g{grid-template-columns:1fr 1fr;gap:22px}.eco-pv{height:300px;padding:24px 24px 0}.eco-t{padding:24px 26px 26px}}
@media (prefers-reduced-motion:reduce){.eco-ph,.eco-go{transition:none}}
html[data-theme="dark"] .eco-c,html[data-theme="dark"] .eco-t{border-color:#000}
html[data-theme="dark"] .eco-k{background:#F2EDE3;color:#131313}
/* усередині тексту /klinika/ */
.doc .eco-in{margin:6px 0 34px}
.doc .eco-in .eco-hd h2{margin-top:12px}
.doc .eco-in ul.eco-f{margin:16px 0 0;padding:0}
.doc .eco-in .eco-f li{margin:0}
.doc .eco-in .eco-f li::before{content:none}
.doc .eco-in a,.doc .eco-in a:hover{text-decoration:none}
.doc .eco-in .eco-tel{border-bottom:2px solid currentColor}

/* ── підказки Нової Пошти у формі замовлення (29.10.2026) ── */
.np-sug{list-style:none;margin:-4px 0 10px;padding:4px;border:2px solid #1A1A1A;border-radius:14px;background:#fff;max-height:260px;overflow:auto;overscroll-behavior:contain}
.np-sug[hidden]{display:none!important}
.np-sug li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;cursor:pointer;color:#1A1A1A;font-size:15px;line-height:1.3;min-height:44px;justify-content:center}
.np-sug li span{font-size:13px;color:#6B635A}
.np-sug li.on,.np-sug li:hover{background:#FFD84D}
.np-sug li.np-h{cursor:default;min-height:0;font-size:13px;color:#6B635A;background:none!important}
html[data-theme="dark"] .np-sug{background:var(--card);border-color:var(--line-2)}
html[data-theme="dark"] .np-sug li{color:var(--ink)}
html[data-theme="dark"] .np-sug li span,html[data-theme="dark"] .np-sug li.np-h{color:#B9B1A5}
html[data-theme="dark"] .np-sug li.on,html[data-theme="dark"] .np-sug li:hover{background:#FFD84D;color:#1A1A1A}
html[data-theme="dark"] .np-sug li.on span,html[data-theme="dark"] .np-sug li:hover span{color:#3A3530}
/* світла кнопка (телефон у статтях, «Підбір» тощо): .btn:hover{background:#000!important} робив її чорною з чорним текстом */
.btn.btn-g:hover,.btn-g:hover{background:#FFD84D!important;color:#1A1A1A!important;border-color:#1A1A1A}
html[data-theme="dark"] .btn.btn-g:hover,html[data-theme="dark"] .btn-g:hover{background:#F2EDE3!important;color:#131313!important;border-color:#F2EDE3}