/* ============================================================
   Landing styles — v12 · Карточка-лендинг (интернет-магазин)
   Вид карточки товара сверху + продающие блоки ниже.
   Акцент — из конфига (--primary). Нейтралы фиксированные.
   ============================================================ */
:root{
  --primary:#2f5be9; --accent:#2f5be9; --dark:#12151b;   /* перекрываются из конфига */
  --acc:var(--primary);
  --acc-d:color-mix(in srgb, var(--primary) 82%, #000);
  --acc-soft:color-mix(in srgb, var(--primary) 8%, #fff);

  --bg:#f4f5f7; --surf:#ffffff; --ink:#1b1f27; --ink2:#414755; --muted:#868d99;
  --line:#e6e8ec; --line-2:#eef0f3;
  --star:#f5a623; --ok:#12a150; --sale:#e5484d;

  --radius:10px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(20,22,30,.04);
  --shadow:0 6px 20px -10px rgba(20,22,30,.14);
  --maxw:1120px;
}
*{box-sizing:border-box}
/* [hidden] має перемагати display у класах (.buybox__sum{display:grid} тощо) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html{height:100%; overflow-x:clip}
body{
  margin:0; font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; font-size:15px; -webkit-font-smoothing:antialiased;
  min-height:100%; display:flex; flex-direction:column;   /* підвал притиснутий до низу на коротких сторінках */
  overflow-x:clip;   /* жоден блок не має «зсувати» сторінку вбік; clip зберігає sticky-шапку */
}
/* Запас під липку кнопку — усередині темного підвалу (без світлої смуги під ним) */
@media(max-width:859px){ body:has(.sticky-buy) .site-footer{padding-bottom:86px} }
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.2; font-weight:700; letter-spacing:-.01em}

.container{max-width:var(--maxw); margin:0 auto; padding:0 16px; min-width:0}
.container--narrow{max-width:760px}
.text-center{text-align:center}

/* sections + reveal */
.block{padding:26px 0; position:relative}
.js .block{transform:translateY(14px); transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.js .block.is-in{transform:none}
@media (prefers-reduced-motion:reduce){.js .block{transform:none; transition:none}}

.panel{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px}
.section-eyebrow,.press__eyebrow{display:block; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; color:var(--acc); margin-bottom:8px}
.section-title{font-size:clamp(20px,2.6vw,24px); font-weight:700; margin:0 2px 14px; letter-spacing:-.01em}
.section-title--light{color:#fff}
.section-sub{color:var(--muted); margin:-6px 2px 16px; font-size:14.5px}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:inherit; font-weight:700; font-size:15.5px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius); padding:15px 22px; line-height:1.2;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn--primary{background:var(--acc); color:#fff; box-shadow:0 6px 16px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.btn--primary:hover{background:var(--acc-d)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:var(--surf); color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--acc); color:var(--acc)}
.btn--lg{padding:17px 26px; font-size:16px}
.btn--block{width:100%}
.btn:disabled,.btn.is-loading{opacity:.7; cursor:not-allowed; transform:none!important}
.btn.is-loading{color:transparent!important; position:relative; pointer-events:none}
.btn.is-loading::after{content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
.block-cta{margin-top:20px; text-align:center}

/* ---- Utility bar (верхня службова смуга магазину) ---- */
.util{background:var(--dark); color:#c9ced8; font-size:12.5px}
.util__in{max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:38px; flex-wrap:wrap}
.util a:hover{color:#fff}
.util__links{display:flex; gap:18px; flex-wrap:wrap}
.util__hours{color:var(--ok)}
.util__phone{font-weight:700; color:#fff}
.util__msgr{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#fff; padding:8px 0}
.util__msgr svg{width:16px; height:16px}
.util__note{color:#c9ced8}

/* ---- Promo bar (акція) ---- */
.promo{background:var(--acc); color:#fff; text-align:center; font-size:13px; font-weight:600; padding:9px 16px}
.promo b{color:#ffe08a}
.promo a{color:#fff; text-decoration:underline}

/* ---- Header (лого + пошук + кошик) ---- */
.shop-header{background:var(--surf); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.shop-header__in{max-width:var(--maxw); margin:0 auto; padding:0 16px; height:64px; display:flex; align-items:center; gap:16px}
.shop-logo{font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:9px; white-space:nowrap}
.shop-logo img{height:32px; width:auto}
.shop-logo b{color:var(--acc)}
.shop-search{flex:1; display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:0 12px; height:42px; color:var(--muted); min-width:0}
.shop-search svg{width:18px; height:18px; flex:none}
.shop-search input{border:0; background:transparent; outline:none; flex:1; font:inherit; font-size:14px; color:var(--ink); min-width:0}
.shop-header__ico{display:flex; align-items:center; gap:12px; margin-left:auto}
.iconbtn{position:relative; width:42px; height:42px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surf); display:flex; align-items:center; justify-content:center; color:var(--ink2); cursor:pointer; flex:none}
.iconbtn svg{width:20px; height:20px}
.iconbtn:hover{border-color:var(--acc); color:var(--acc)}
.iconbtn .dot{position:absolute; top:-6px; right:-6px; background:var(--acc); color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px}
@media(max-width:640px){.shop-search{display:none}}

/* ---- Nav (категорії) ---- */
.shop-nav{background:var(--surf); border-bottom:1px solid var(--line)}
.shop-nav__in{max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; gap:22px; height:44px; align-items:center; overflow-x:auto; font-size:14px; font-weight:600; color:var(--ink2)}
.shop-nav a{white-space:nowrap}
.shop-nav a:hover{color:var(--acc)}
.shop-nav a.is-current{color:var(--acc)}

/* ---- Breadcrumbs: завжди один рядок, довга назва обрізається трикрапкою ----
   grid minmax(0,1fr) на обгортці — щоб рядок не «розпирав» сторінку у flex-body */
.crumbs-wrap{display:grid; grid-template-columns:minmax(0,1fr)}
.crumbs{font-size:12.5px; color:var(--muted); padding:14px 0 4px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crumbs a:hover{color:var(--acc)}
.crumbs span{color:var(--ink2)}

/* ---- Мобільна оптимізація шапки (TikTok-трафік: товар і ціна — одразу) ---- */
@media(max-width:640px){
  .util__links--docs{display:none}            /* юр-документи лишаються у підвалі */
  .util__in{justify-content:space-between; min-height:34px; flex-wrap:nowrap}
  .util{font-size:12px}
  .shop-header__in{height:56px; gap:10px}
  .shop-logo{font-size:19px}
  .iconbtn{width:38px; height:38px}
  .shop-nav__in{height:40px; gap:16px; font-size:13.5px}
  .crumbs{font-size:11.5px; padding:10px 0 2px}
  .tabbar{top:56px}
  .product{padding-top:10px}
}

/* ---- Anchor tabs (пігулки) ---- */
.tabbar{position:sticky; top:64px; z-index:35; margin-bottom:16px}
.tabbar__in{display:flex; gap:6px; overflow-x:auto; background:var(--surf); border:1px solid var(--line); border-radius:12px; padding:6px}
.tabbar a{white-space:nowrap; padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600; color:var(--ink2)}
.tabbar a:hover{color:var(--acc)}
.tabbar a.is-active{background:var(--acc); color:#fff}

/* ---- Product card (hero) ---- */
.product{padding-top:16px}
.product__grid{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:860px){.product__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:34px; align-items:start}}

/* карусель: нативний свайп (scroll-snap) + стрілки + лічильник */
.gallery__stage{position:relative; background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.gallery__viewport{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none}
.gallery__viewport::-webkit-scrollbar{display:none}
.gallery__slide{flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center}
.gallery__slide img{width:100%; height:100%; object-fit:contain; padding:14px; cursor:zoom-in}
.badge-sale{position:absolute; top:14px; left:14px; background:var(--sale); color:#fff; font-weight:700; font-size:13px; padding:5px 11px; border-radius:8px; z-index:3}
.badge-hit{position:absolute; top:14px; right:14px; background:#fff5e6; color:#a86400; font-weight:700; font-size:12px; padding:5px 11px; border-radius:8px; border:1px solid #ffe0a6; z-index:3}
.gallery__arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:var(--shadow-sm); transition:background .15s, opacity .15s}
.gallery__arrow svg{width:20px; height:20px}
.gallery__arrow:hover{background:#fff; border-color:var(--acc); color:var(--acc)}
.gallery__arrow--prev{left:10px} .gallery__arrow--next{right:10px}
.gallery__arrow[disabled]{opacity:.35; cursor:default}
.gallery__counter{position:absolute; right:12px; bottom:12px; z-index:3; background:rgba(20,22,30,.72); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; font-variant-numeric:tabular-nums}
.gallery__thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.gallery__thumb{width:68px; height:68px; flex:none; background:var(--surf); border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; padding:0; transition:border-color .15s}
.gallery__thumb img{width:100%; height:100%; object-fit:contain; padding:5px}
.gallery__thumb.is-active{border-color:var(--acc); box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 18%,transparent)}
@media(max-width:640px){.gallery__arrow{width:34px; height:34px} .gallery__thumb{width:58px; height:58px}}
@media (prefers-reduced-motion:reduce){.gallery__viewport{scroll-behavior:auto}}

.pinfo__title{font-size:clamp(21px,2.6vw,27px); font-weight:700; line-height:1.2; overflow-wrap:anywhere}
.pinfo__meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 4px; font-size:13px; color:var(--muted)}
.pinfo__meta .stars{color:var(--star); letter-spacing:1px}
.pinfo__meta .rev{color:var(--ink2); font-weight:600}
.pinfo__meta .rev:hover{color:var(--acc)}
.pinfo__stock{display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-weight:600}
.pinfo__stock::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none}
.pinfo__meta .sku{color:var(--muted)}

/* ---- Buybox (форма прямо в карточке) ---- */
.buybox{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; margin-top:18px}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.buybox__price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.price-now{font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.price-old{color:var(--muted); text-decoration:line-through; font-size:19px}
.price-save{background:color-mix(in srgb,var(--sale) 10%,#fff); color:var(--sale); font-weight:700; font-size:13px; padding:3px 9px; border-radius:7px}
.buybox__scarcity{margin-top:10px; font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:8px}
.buybox__scarcity b{color:var(--sale)}
.buybox__scarcity .bar{flex:1; height:6px; background:var(--line-2); border-radius:6px; overflow:hidden}
.buybox__scarcity .bar i{display:block; height:100%; background:var(--sale)}

.opt{margin-top:16px}
.opt__l{font-size:13px; color:var(--muted); margin-bottom:8px}
.opt__l b{color:var(--ink); font-weight:600}
/* варианты-чипсы (radio) */
.of-variants{display:flex; gap:9px; flex-wrap:wrap}
.of-variant{position:relative; border:1.5px solid var(--line); background:var(--surf); border-radius:9px; padding:9px 14px; cursor:pointer; color:var(--ink2); display:flex; flex-direction:column; min-width:78px; transition:border-color .12s, background .12s}
.of-variant input{position:absolute; opacity:0; pointer-events:none}
.of-variant .ofv-label{font-size:14px; font-weight:700}
.of-variant .ofv-price{font-size:12px; color:var(--muted); font-weight:600; margin-top:2px}
.of-variant .ofv-old{display:none}
/* Бейдж на чипсі: коротким текстом («−30%», «ХІТ»). Довгий — обрізається, щоб не ламати сітку. */
.of-variant .ofv-badge{position:absolute; top:-9px; right:-4px; max-width:calc(100% + 8px); box-sizing:border-box; background:var(--ok); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.of-variant:hover{border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.of-variant:has(input:checked){border-color:var(--acc); color:var(--acc); background:var(--acc-soft)}
.of-variant.is-popular .ofv-badge{background:var(--acc)}

/* подарунок у комплекті */
.gift{display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border-radius:var(--radius); background:linear-gradient(0deg, color-mix(in srgb,var(--ok) 6%,#fff), color-mix(in srgb,var(--ok) 6%,#fff)); border:1px dashed color-mix(in srgb,var(--ok) 45%,#fff)}
.gift__ic{width:40px; height:40px; flex:none; border-radius:10px; background:color-mix(in srgb,var(--ok) 12%,#fff); color:var(--ok); display:flex; align-items:center; justify-content:center}
.gift__ic svg{width:22px; height:22px}
.gift__img{width:44px; height:44px; flex:none; border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--line)}
.gift__img img{width:100%; height:100%; object-fit:contain; padding:3px}
.gift__txt{min-width:0}
.gift__label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ok)}
.gift__name{display:block; font-size:14.5px; font-weight:700; margin:1px 0}
.gift__price{font-size:12.5px; color:var(--muted)}
.gift__price s{margin-right:6px}
.gift__price em{font-style:normal; font-weight:700; color:var(--ok)}

/* підсумок: товар + додаткові товари */
.buybox__sum{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); display:grid; gap:6px}
.buybox__sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px; color:var(--ink2)}
.buybox__sum-row b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.buybox__sum-row--dis b{color:var(--sale)}
/* додані товари у формі — з кнопкою «прибрати» (тач-таргет 40px) */
/* minmax(0,1fr) + min-width:0 — інакше grid/flex не дають рядку стиснутись на вузьких екранах */
.buybox__ups{display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:10px 0 2px; border-top:1px dashed var(--line)}
.ups-row{display:flex; align-items:center; gap:10px; font-size:13.5px; min-width:0}
.ups-name{flex:1; min-width:0; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ups-price{font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.ups-del{flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surf); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .12s, color .12s, background .12s}
.ups-del svg{width:16px; height:16px}
.ups-del:hover,.ups-del:active{border-color:var(--sale); color:var(--sale); background:color-mix(in srgb,var(--sale) 7%,#fff)}
.buybox__sum-row--total{font-size:15px; padding-top:6px; border-top:1px solid var(--line)}
.buybox__sum-row--total b{font-size:20px; font-weight:800; color:var(--acc)}

.of-fields{display:grid; gap:10px; margin-top:16px}
.of-field input{width:100%; font-size:16px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surf); color:var(--ink); font-family:inherit; transition:border-color .15s, box-shadow .15s}
.of-field input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent)}
.buybox button[type="submit"]{margin-top:14px}
.of-consent{font-size:12px; color:var(--muted); margin:11px 0 0; text-align:center; line-height:1.5}
.of-consent a{color:var(--muted); text-decoration:underline}
.of-hint{font-size:12.5px; color:var(--muted); text-align:center; margin-top:10px}
.of-result{margin-top:12px; padding:14px; border-radius:var(--radius); font-weight:600; text-align:center}
.of-result.is-ok{background:color-mix(in srgb,var(--ok) 12%,#fff); color:#0c7a4f}
.of-result.is-err{background:color-mix(in srgb,var(--sale) 10%,#fff); color:#b42318}
.of-check{margin:12px 0; padding:14px 16px; border-radius:var(--radius); background:var(--acc-soft); border:1px solid color-mix(in srgb,var(--acc) 20%,var(--line)); text-align:center; line-height:1.7}
.of-check b{font-weight:800}
.of-edit{background:none; border:0; color:var(--acc); font-weight:700; text-decoration:underline; cursor:pointer; font-size:14px; font-family:inherit; padding:4px}
.order-form.is-done .of-variants,.order-form.is-done .of-fields,.order-form.is-done .opt,.order-form.is-done button[type="submit"],.order-form.is-done .of-consent{display:none}

/* perks под карточкой */
.perks{display:grid; gap:12px; margin-top:18px}
.perk{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--ink2)}
.perk svg{width:22px; height:22px; color:var(--acc); flex:none}
.perk b{font-weight:600}

/* sticky buy (mobile) */
.sticky-buy{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surf); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.06); display:flex; align-items:center; gap:12px; padding:10px 16px; transform:translateY(110%); transition:transform .25s ease}
.sticky-buy.is-visible{transform:none}
.sticky-buy__p b{font-size:20px; font-weight:800}
.sticky-buy__p s{font-size:13px; color:var(--muted); margin-left:6px}
.sticky-buy .btn{flex:1; padding:14px}
@media(min-width:860px){.sticky-buy{display:none}}
@media (prefers-reduced-motion:reduce){.sticky-buy{transition:none}}

/* ---- Description (текст + фото) ---- */
.description .desc-row{display:grid; grid-template-columns:1fr; gap:16px; align-items:center; margin-bottom:16px}
.description .desc-row:last-child{margin-bottom:0}
@media(min-width:640px){
  .description .desc-row{grid-template-columns:1fr 1fr}
  .description .desc-row.is-right .desc-row__media{order:2}
  .description .desc-row--noimg{grid-template-columns:1fr}
}
.desc-row__media img{width:100%; border-radius:var(--radius-lg); border:1px solid var(--line)}
.desc-row__text h3{font-size:17px; font-weight:700; margin-bottom:7px}
.desc-row__text p{color:var(--ink2); margin:0}

/* ---- Package (комплектація) ---- */
.package__in{display:grid; grid-template-columns:1fr; gap:18px; align-items:center}
@media(min-width:640px){.package__in--img{grid-template-columns:260px 1fr; gap:24px}}
.package__media img{width:100%; border-radius:12px; background:var(--bg)}
.package__list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.package__list li{position:relative; padding-left:30px; font-size:14.5px; color:var(--ink2); font-weight:500}
.package__list li::before{content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center}

/* ---- Offer CTA (повторний офер) ---- */
.offer-cta__in{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 20px; text-align:center; box-shadow:var(--shadow)}
.offer-cta__title{font-size:clamp(19px,2.4vw,23px); font-weight:800; margin-bottom:6px}
.offer-cta__sub{color:var(--muted); font-size:14px; margin:0 0 14px}
.offer-cta__price{display:flex; align-items:baseline; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
.offer-cta__now{font-size:34px; font-weight:800; letter-spacing:-.02em}
.offer-cta__price s{color:var(--muted); font-size:18px}
.offer-cta__save{background:color-mix(in srgb,var(--sale) 10%,#fff); color:var(--sale); font-weight:700; font-size:13px; padding:3px 9px; border-radius:7px}
.offer-cta .timer{margin:0 0 16px}

/* ---- Review shots (відгуки скриншотами) ---- */
.shots-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:640px){.shots-grid{grid-template-columns:repeat(4,1fr)}}
.shot{padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background:var(--surf)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}

/* ---- Notice (банер-повідомлення) ---- */
.notice{display:flex; align-items:center; gap:12px; border-radius:var(--radius-lg); padding:14px 16px; font-size:14px; font-weight:500; border:1px solid}
.notice svg{width:22px; height:22px; flex:none}
.notice--info{background:var(--acc-soft); border-color:color-mix(in srgb,var(--acc) 22%,var(--line)); color:color-mix(in srgb,var(--acc) 75%,#000)}
.notice--warn{background:#fff8e6; border-color:#ffe0a6; color:#8a5a00}
.notice--ok{background:color-mix(in srgb,var(--ok) 8%,#fff); border-color:color-mix(in srgb,var(--ok) 25%,#fff); color:#0c7a4f}

/* ---- Specs (характеристики) ---- */
.specs-table{width:100%; border-collapse:collapse; font-size:14.5px}
.specs-table tr{border-bottom:1px solid var(--line)}
.specs-table tr:last-child{border:0}
.specs-table td{padding:12px 0; vertical-align:top}
.specs-table td:first-child{color:var(--muted); width:46%; padding-right:14px}
.specs-table td:last-child{font-weight:600}

/* ---- Advantages ---- */
.adv-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:640px){.adv-grid{grid-template-columns:repeat(3,1fr)}}
.adv-item{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; display:flex; gap:13px; align-items:flex-start}
.adv-item__num{flex:none; width:38px; height:38px; border-radius:11px; background:var(--acc-soft); color:var(--acc); font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center}
.adv-item__body h3{font-size:15.5px; font-weight:700; margin-bottom:4px}
.adv-item__body p{font-size:13.5px; color:var(--ink2); margin:0}

/* ---- How to use ---- */
.howto-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:640px){.howto-grid{grid-template-columns:repeat(3,1fr)}}
.howto-item{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.howto-item__media{position:relative}
.howto-item__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.howto-item__num{position:absolute; top:10px; left:10px; width:28px; height:28px; border-radius:50%; background:var(--acc); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px}
.howto-item h3{font-size:15.5px; font-weight:700; margin:14px 14px 4px}
.howto-item p{font-size:13.5px; color:var(--ink2); margin:0 14px 14px}

/* ---- Reviews ---- */
.reviews-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:640px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
.review-card{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px}
.review-card__head{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.review-card__avatar{width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--line-2)}
.review-card__name{font-weight:700; font-size:14px; display:flex; align-items:center; gap:7px}
.review-card__verified{font-size:11px; color:var(--ok)}
.review-card__stars{color:var(--star); font-size:13px; letter-spacing:1px}
.review-card__date{margin-left:auto; font-size:12px; color:var(--muted)}
.review-card__text{font-size:13.5px; color:var(--ink2); margin:0}
.review-card__photo{margin-top:10px; border-radius:10px; display:block; width:100%; height:auto}

/* ---- Process / steps ---- */
.process-track{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:640px){.process-track{grid-template-columns:repeat(4,1fr)}}
.process-step{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; text-align:center}
.process-step__icon{width:44px; height:44px; margin:0 auto 10px; border-radius:12px; background:var(--acc-soft); color:var(--acc); font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center}
.process-step h3{font-size:15px; font-weight:700; margin-bottom:4px}
.process-step p{font-size:13px; color:var(--ink2); margin:0}

/* ---- FAQ ---- */
.faq-list{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:4px 18px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border:0}
.faq-item summary{cursor:pointer; padding:15px 0; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; color:var(--acc); font-weight:700; font-size:20px; line-height:1; flex:none}
.faq-item[open] summary::after{content:"−"}
.faq-item__a{padding:0 0 15px; color:var(--ink2); font-size:14px}

/* ---- Trust bar ---- */
.trust .trust-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 20px}
.trust-bar__item{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink2)}
.trust-bar__icon{font-size:19px; color:var(--acc)}

/* ---- Press ---- */
.press__row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 30px; opacity:.75}
.press__logo{height:30px; width:auto; filter:grayscale(1)}
.press__name{font-weight:800; font-size:17px; color:var(--muted)}

/* ---- Before / after ---- */
.ba-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:640px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
.ba__pair{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ba__col{position:relative}
.ba__col img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px}
.ba__tag{position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; color:#fff}
.ba__tag--before{background:#8a9099}
.ba__tag--after{background:var(--ok)}
.ba figcaption{text-align:center; font-size:13.5px; color:var(--ink2); margin-top:8px}

/* ---- Stat ---- */
.stat .container{display:flex; flex-direction:column; align-items:center}
.stat__circle,.stat__ring{width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.stat__circle{border:6px solid var(--acc-soft); box-shadow:inset 0 0 0 2px var(--acc)}
.stat__ring{background:conic-gradient(var(--acc) calc(var(--pct)*1%), var(--line-2) 0)}
.stat__ring .stat__value{width:118px; height:118px; background:var(--surf); border-radius:50%; display:flex; align-items:center; justify-content:center}
.stat__value{font-size:34px; font-weight:800; color:var(--ink)}
.stat__plain{font-size:64px; font-weight:800; color:var(--acc); letter-spacing:-.03em; margin-bottom:8px}
.stat__title{font-size:17px; font-weight:700}
.stat__text{color:var(--ink2); font-size:14px; text-align:center; margin:6px 0 0}

/* ---- Symptoms ---- */
.symptoms-grid{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:640px){.symptoms-grid{grid-template-columns:repeat(2,1fr)}}
.symptom{display:flex; align-items:center; gap:11px; background:var(--surf); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; font-size:14px; font-weight:500}
.symptom__icon{flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff}
.symptom__icon--cross{background:var(--sale)}
.symptom__icon--check{background:var(--ok)}
.symptoms--custom .symptom__icon{background:var(--acc-soft); color:var(--acc)}
.symptoms-note{text-align:center; font-weight:700; margin:16px 0 0; color:var(--ink)}

/* ---- Composition ---- */
.composition-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:640px){.composition-grid{grid-template-columns:repeat(3,1fr)}}
.ingredient{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; text-align:center}
.ingredient__img{width:80px; height:80px; margin:0 auto 12px; border-radius:50%; overflow:hidden; background:var(--line-2)}
.ingredient__img img{width:100%; height:100%; object-fit:cover}
.ingredient h3{font-size:15.5px; font-weight:700; margin-bottom:5px}
.ingredient p{font-size:13.5px; color:var(--ink2); margin:0}

/* ---- Result timeline ---- */
.timeline{display:grid; gap:0}
.tl-item{display:grid; grid-template-columns:44px 1fr; gap:14px; padding-bottom:20px; position:relative}
.tl-item::before{content:""; position:absolute; left:21px; top:34px; bottom:0; width:2px; background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-item__dot{width:44px; height:44px; border-radius:50%; background:var(--dot,var(--acc)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; z-index:1}
.tl-item__time{grid-column:2; font-size:12px; font-weight:700; color:var(--acc); text-transform:uppercase; letter-spacing:.04em}
.tl-item__body{grid-column:2}
.tl-item__body h3{font-size:16px; font-weight:700; margin:2px 0 4px}
.tl-item__body p{font-size:13.5px; color:var(--ink2); margin:0}

/* ---- Expert ---- */
.expert-card{display:grid; grid-template-columns:1fr; gap:16px; background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px}
@media(min-width:640px){.expert-card{grid-template-columns:120px 1fr; align-items:center}}
.expert-card__photo img{width:120px; height:120px; border-radius:50%; object-fit:cover; margin:0 auto}
.expert-card__quotemark{font-size:44px; color:var(--acc); line-height:.6; font-family:Georgia,serif}
.expert-quote{font-size:16px; color:var(--ink); font-style:italic; margin:6px 0 12px}
.expert-meta b{font-weight:700} .expert-meta span{display:block; font-size:13px; color:var(--muted)}

/* ---- Timer ---- */
.timer-block{padding:26px 0}
.timer-block--dark .container{background:var(--dark); color:#fff; border-radius:var(--radius-lg); padding:26px 18px}
.timer-block--light .container{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 18px}
.timer-block__sub{color:inherit; opacity:.8; font-size:14px; margin:-6px 0 14px}
.timer{display:flex; gap:9px; justify-content:center; align-items:center; margin:14px 0 18px}
.timer__unit{background:color-mix(in srgb,var(--acc) 12%,transparent); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); border-radius:12px; padding:11px 12px; min-width:62px; text-align:center}
.timer-block--light .timer__unit{background:var(--acc-soft); border-color:color-mix(in srgb,var(--acc) 20%,var(--line))}
.timer__unit b{font-size:26px; font-weight:800; display:block; font-variant-numeric:tabular-nums; color:var(--acc)}
.timer-block--dark .timer__unit b{color:#fff}
.timer__unit span{font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; font-weight:700}
.timer__sep{font-size:22px; font-weight:800; opacity:.4; font-style:normal}

/* ---- Stock ---- */
.stock{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px}
.stock__head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.stock__title{font-weight:700; font-size:15px}
.stock__count{font-size:14px; font-weight:700}
.stock__num{color:var(--sale); font-size:17px}
.stock__bar{height:8px; background:var(--line-2); border-radius:8px; overflow:hidden}
.stock__fill{display:block; height:100%; background:linear-gradient(90deg,var(--sale),color-mix(in srgb,var(--sale) 70%,#f59e0b)); border-radius:8px; transition:width .6s}

/* ---- Gallery ---- */
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-cell{padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background:var(--surf); aspect-ratio:1/1}
.gallery-cell img{width:100%; height:100%; object-fit:cover}
.gallery-item__cap{font-size:12.5px; color:var(--muted); text-align:center; margin-top:6px}

/* ---- Certificates ---- */
.certs-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:640px){.certs-grid{grid-template-columns:repeat(4,1fr)}}
.cert__img{padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background:var(--surf)}
.cert__img img{width:100%; height:100%; object-fit:cover}
.cert figcaption{font-size:12.5px; color:var(--ink2); text-align:center; margin-top:7px}

/* ---- Related (з цим товаром купують) ---- */
.related-rail{display:grid; grid-auto-flow:column; grid-auto-columns:170px; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity}
@media(min-width:860px){.related-rail{grid-auto-columns:1fr; grid-auto-flow:row; grid-template-columns:repeat(4,1fr)}}
.pcard{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; scroll-snap-align:start; display:flex; flex-direction:column}
.pcard__img{background:var(--bg); border-radius:10px; aspect-ratio:1/1; overflow:hidden; margin-bottom:10px}
.pcard__img img{width:100%; height:100%; object-fit:contain; padding:8px}
.pcard__t{font-size:13.5px; font-weight:600; line-height:1.35; min-height:2.7em}
.pcard__pr{display:flex; align-items:baseline; gap:8px; margin:8px 0 10px}
.pcard__pr b{font-size:16px; font-weight:800}
.pcard__pr s{font-size:12.5px; color:var(--muted)}
.pcard .btn{width:100%; padding:10px; font-size:13.5px; margin-top:auto}
/* кнопка «додати до замовлення» */
.pcard__add .pcard__add-off{display:none}
.pcard__add.is-added{background:color-mix(in srgb,var(--ok) 10%,#fff); border-color:color-mix(in srgb,var(--ok) 45%,#fff); color:#0c7a4f}
.pcard__add.is-added .pcard__add-on{display:none}
.pcard__add.is-added .pcard__add-off{display:inline}

/* ---- Text block ---- */
.textblock__body{color:var(--ink2); font-size:15px}
.final-cta{background:var(--acc); color:#fff; border-radius:var(--radius-lg); padding:26px 22px; text-align:center}
.final-cta h2{font-size:22px; font-weight:800; margin-bottom:8px}
.final-cta .btn{background:#fff; color:var(--acc); margin-top:8px}

/* ---- Pricing (комплекты как карточки) ---- */
.pricing__grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:640px){.pricing__grid{grid-template-columns:repeat(3,1fr)}}
.price-card{background:var(--surf); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:20px; text-align:center; position:relative}
.price-card.is-popular{border-color:var(--acc); box-shadow:var(--shadow)}
.price-card__badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--acc); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap}
.price-card__qty{font-size:16px; font-weight:700; margin-bottom:8px}
.price-card__old{color:var(--muted); text-decoration:line-through; font-size:14px}
.price-card__now{font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.price-card__save{color:var(--ok); font-weight:700; font-size:13px; margin:4px 0 14px}
.pricing__note{text-align:center; color:var(--muted); font-size:13.5px; margin:16px 0 0}

/* ---- Footer (колонки магазину) ---- */
.site-footer{background:var(--dark); color:#aeb4c0; margin-top:auto; padding-top:12px; font-size:13.5px}
.footer-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:30px 0 22px}
@media(min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer h4{color:#fff; font-size:14px; margin-bottom:12px; font-weight:600}
.site-footer a{display:block; padding:4px 0; color:#c9ced8}
.site-footer a:hover{color:#fff}
.footer-logo{font-weight:800; font-size:20px; color:#fff; margin-bottom:8px}
.footer-logo b{color:var(--acc)}
.footer-about{color:#aeb4c0}
.footer-pay{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.footer-pay span{background:#1c2029; border:1px solid #2a2f3a; border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:#c9ced8}
.footer-disclaimer{color:#6d7480; font-size:11.5px; line-height:1.6; padding:0 0 18px; max-width:860px}
.footer-bot{border-top:1px solid #23272f; padding:14px 0; font-size:12.5px; color:#6d7480; text-align:center}

/* ---- Thanks page ---- */
.thanks-page{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:40px 16px}
.thanks-card{background:var(--surf); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:36px 28px; max-width:460px; text-align:center}
.thanks-icon{width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-size:32px; display:flex; align-items:center; justify-content:center; font-weight:800}
.thanks-card h1{font-size:24px; margin-bottom:10px}
.thanks-card p{color:var(--ink2); margin:0 0 16px}
.thanks-data{background:var(--bg); border-radius:var(--radius); padding:14px; margin:16px 0; text-align:left}
.thanks-data__title{font-size:13px; color:var(--muted); margin-bottom:8px}
.thanks-hint{font-size:13px; color:var(--muted)}

/* ---- Doc page (юридичні документи) ---- */
.doc-page{padding:6px 0 34px}
.doc-tobuy{margin-left:auto; padding:9px 16px; font-size:13.5px}
.doc-panel{margin-top:10px}
.doc-title{font-size:clamp(21px,2.6vw,26px); margin-bottom:16px}
.doc-body{color:var(--ink2); font-size:15px; line-height:1.75; overflow-wrap:break-word}
.doc-company{margin:22px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
.doc-company a{color:var(--acc)}
.doc-backbtn{margin-top:16px; margin-bottom:34px}

/* ---- Prelander: одна кнопка по центру ---- */
.pre-only{min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px}
.pre-only__btn{min-width:min(320px,86vw); padding:19px 34px; font-size:17px}

/* ---- Lightbox ---- */
.lightbox{position:fixed; inset:0; background:rgba(10,12,18,.9); display:none; align-items:center; justify-content:center; z-index:100; padding:20px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%; max-height:90vh; border-radius:10px}
.lightbox__close{position:absolute; top:16px; right:16px; background:rgba(255,255,255,.15); color:#fff; border:0; width:44px; height:44px; border-radius:50%; font-size:20px; cursor:pointer}