/* ============================================================
   AG PEPTIDES — дизайн-система
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root{
  /* тёмная тема (по умолчанию) */
  --bg:            #070C0A;
  --bg-1:          #0B1310;
  --bg-2:          #101B16;
  --bg-3:          #16241D;
  --surface:       rgba(255,255,255,.035);
  --surface-2:     rgba(255,255,255,.06);
  --line:          rgba(255,255,255,.09);
  --line-2:        rgba(255,255,255,.16);

  --text:          #EAF2ED;
  --text-2:        #9DB3A8;
  --text-3:        #678074;

  --brand:         #16A46A;
  --brand-2:       #0E7A4E;
  --brand-soft:    rgba(22,164,106,.14);
  --brand-glow:    rgba(22,164,106,.35);
  --accent:        #D9B44A;
  --accent-soft:   rgba(217,180,74,.14);
  --danger:        #E2574C;
  --danger-soft:   rgba(226,87,76,.14);
  --info:          #4C9AE2;

  --radius-s:      10px;
  --radius:        16px;
  --radius-l:      22px;
  --radius-xl:     30px;

  --shadow-s:      0 2px 8px rgba(0,0,0,.28);
  --shadow:        0 12px 32px -8px rgba(0,0,0,.5);
  --shadow-l:      0 32px 70px -20px rgba(0,0,0,.7);

  --ease:          cubic-bezier(.22,1,.36,1);
  --ease-io:       cubic-bezier(.65,.05,.36,1);
  --dur:           .42s;

  --head:          'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-h:         72px;
  --maxw:          1280px;
}

[data-theme="light"]{
  --bg:            #FFFFFF;
  --bg-1:          #FFFFFF;
  --bg-2:          #F4F7F5;
  --bg-3:          #E8F0EA;
  --surface:       rgba(11,19,16,.03);
  --surface-2:     rgba(11,19,16,.055);
  --line:          rgba(11,19,16,.10);
  --line-2:        rgba(11,19,16,.18);

  --text:          #0B1310;
  --text-2:        #4E635A;
  --text-3:        #7B8F85;

  --brand:         #12A063;
  --brand-2:       #0C7A49;
  --brand-soft:    rgba(18,160,99,.09);
  --brand-glow:    rgba(18,160,99,.20);
  --accent:        #B98D18;
  --accent-soft:   rgba(185,141,24,.11);

  --shadow-s:      0 2px 8px rgba(11,19,16,.07);
  --shadow:        0 12px 32px -10px rgba(11,19,16,.16);
  --shadow-l:      0 32px 70px -22px rgba(11,19,16,.24);
}

/* ---------- 2. База ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Длинное слово («Бактериостатическая»), e-mail или код на узком экране переносится, а не вылезает. */
  overflow-wrap:break-word;
  /* clip — Safari 16+, Chrome 90+; в старых — hidden (через body он переходит на окно). */
  overflow-x:hidden; overflow-x:clip;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.no-scroll{ overflow:hidden; }
/* Страницу рисует JavaScript. Пока #app пуст, подвал оказался бы вверху экрана и потом «прыгнул» вниз
   (сдвиг макета при каждой загрузке) — держим под содержимое высоту экрана. svh — без «прыжков»
   от появления и скрытия адресной строки на телефонах. */
#app{ min-height:calc(100vh - var(--nav-h)); }
@supports (height:100svh){ #app{ min-height:calc(100svh - var(--nav-h)); } }
h1,h2,h3,h4{ font-family:var(--head); font-weight:800; line-height:1.12; letter-spacing:-.025em; margin:0; }
h1{ font-size:clamp(2.2rem,6vw,4.5rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.15rem,2vw,1.5rem); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--brand); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-1); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
/* iPhone в альбомной ориентации: страница заходит под вырез камеры (viewport-fit=cover) — отступаем от него. */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(clamp(16px,4vw,32px), env(safe-area-inset-left));
    padding-right:max(clamp(16px,4vw,32px), env(safe-area-inset-right));
  }
}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- 3. Утилиты ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font:600 14px/1.3 var(--head); color:var(--brand);
}
.eyebrow svg{ display:none; }
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }
/* padding-block, а не padding: …0 — иначе обнуляются боковые отступы .wrap (раздел «Как заказать» прилипал к краю). */
.sec{ padding-block:clamp(64px,9vw,120px); }
.sec-head{ max-width:660px; margin-bottom:clamp(32px,5vw,56px); }
.sec-head h1{ font-size:clamp(1.7rem,3.6vw,2.9rem); margin:16px 0 14px; }   /* заголовок каталога — h1 того же размера, что h2 разделов */
.sec-head h2{ margin:16px 0 14px; }
.sec-head p{ color:var(--text-2); font-size:clamp(15px,1.6vw,18px); }
/* Основной текст страницы от сервера для роботов без JS (nginx SSI): мелькает, пока витрина не запустилась,
   потом #app перерисовывается целиком. Оформление — простое, но читаемое. */
.seo-static{ padding-block:34px 60px; color:var(--text-2); line-height:1.6; }
.seo-static h1{ font-size:clamp(1.7rem,3.6vw,2.9rem); margin:0 0 14px; color:var(--text); }
.seo-static h2{ font-size:1.3rem; margin:24px 0 10px; color:var(--text); }
.seo-static h3{ font-size:1.05rem; margin:14px 0 6px; color:var(--text); }
.seo-static p, .seo-static ul, .seo-static dl, .seo-static nav{ margin:0 0 12px; }
.seo-static ul{ padding-left:20px; }
.seo-static a{ color:var(--brand); }
.seo-static dt{ font-weight:600; color:var(--text); }
.seo-static dd{ margin:0 0 6px; }


/* инлайновые иконки внутри текста — размер по кеглю */
p svg, span svg, i svg, b svg, small svg,
.eyebrow svg, .status svg, .opt-r svg, .mini-badge svg, .kpi i svg{
  display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.14em;
}
.eyebrow svg, .tick svg, .stars svg, .acc-q i svg, .tr i svg{ display:block; }
.eyebrow{ white-space:nowrap; }
.ord-chev svg{ width:16px; height:16px; }

/* ---------- 4. Кнопки ---------- */
.btn{
  --bh:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--bh); padding:0 26px; border-radius:99px;
  font:700 15px/1 var(--head); letter-spacing:-.01em; white-space:nowrap;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn svg{ width:18px; height:18px; flex:none; }

.btn-p{ background:var(--brand); color:#fff; }
.btn-p:hover{ background:var(--brand-2); }

.btn-g{ background:var(--surface); color:var(--text); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.btn-g:hover{ background:var(--surface-2); border-color:var(--line-2); }

.btn-o{ border:1px solid var(--brand); color:var(--brand); }
.btn-o:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }

.btn-ghost{ color:var(--text-2); }
.btn-ghost:hover{ color:var(--text); background:var(--surface); }

.btn-d{ background:var(--danger-soft); color:var(--danger); border:1px solid rgba(226,87,76,.28); }
.btn-d:hover{ background:var(--danger); color:#fff; }

.btn-sm{ --bh:40px; padding:0 16px; font-size:13.5px; }
.btn-lg{ --bh:60px; padding:0 34px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.42; pointer-events:none; }

/* пульс-волна при клике */

/* ---------- 5. Хедер ---------- */
.topbar{
  background:var(--brand-2); color:#fff; font-size:13px; height:34px; display:flex; align-items:center;
}
.topbar-in{ display:flex; justify-content:space-between; gap:16px; white-space:nowrap; overflow:hidden; }
@media (max-width:640px){ .topbar-in{ justify-content:center; } .topbar-more{ display:none; } }

.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--bg); background:color-mix(in srgb,var(--bg) 72%, transparent);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease), height .35s var(--ease);
}
.nav.stuck{ border-bottom-color:var(--line); height:62px; box-shadow:var(--shadow-s); }
.nav .wrap{ display:flex; align-items:center; gap:clamp(12px,2.5vw,34px); }

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo-mark{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(140deg,var(--brand),var(--brand-2) 70%,#062b1c);
  display:grid; place-items:center; color:#fff;
  font:800 14px/1 var(--head); letter-spacing:-.04em;
  box-shadow:0 6px 18px -6px var(--brand-glow);
  transition:transform .5s var(--ease);
}
.logo-txt b{ display:block; font:800 15.5px/1.1 var(--head); letter-spacing:.02em; }
.logo-txt i{ display:block; font:600 8.5px/1.4 var(--head); letter-spacing:.24em; color:var(--text-3); font-style:normal; }

.menu{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.menu a{
  position:relative; padding:9px 13px; border-radius:10px;
  font:600 14.5px/1 var(--head); color:var(--text-2);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.menu a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.menu a:hover{ color:var(--text); background:var(--surface); }
.menu a:hover::after,.menu a.on::after{ transform:scaleX(1); }
.menu a.on{ color:var(--text); }

.nav-act{ display:flex; align-items:center; gap:8px; flex:none; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; color:var(--text-2);
  border:1px solid var(--line); background:var(--surface);
  transition:all .28s var(--ease);
}
.icon-btn:hover{ color:var(--text); border-color:var(--line-2); background:var(--surface-2); transform:translateY(-2px); }
.icon-btn svg{ width:19px; height:19px; }
.badge-n{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  border-radius:99px; background:var(--brand); color:#fff;
  font:800 11px/20px var(--head); text-align:center;
  border:2px solid var(--bg); transform:scale(0); transition:transform .4s var(--ease);
}
.badge-n.show{ transform:scale(1); }
.badge-n.bump{ animation:bump .5s var(--ease); }
@keyframes bump{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.45)} }

.burger{ display:none; }

/* мобильное меню */
.mmenu{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:var(--bg-1); padding:22px; gap:6px;
  transform:translateX(100%); transition:transform .5s var(--ease); overflow-y:auto;
}
.mmenu.open{ transform:none; }
.mmenu-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.mmenu a{
  padding:17px 18px; border-radius:14px; font:700 18px/1 var(--head);
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateX(24px);
}
.mmenu.open a{ animation:slideIn .5s var(--ease) forwards; }
.mmenu.open a:nth-child(1){animation-delay:.05s} .mmenu.open a:nth-child(2){animation-delay:.09s}
.mmenu.open a:nth-child(3){animation-delay:.13s} .mmenu.open a:nth-child(4){animation-delay:.17s}
.mmenu.open a:nth-child(5){animation-delay:.21s} .mmenu.open a:nth-child(6){animation-delay:.25s}
.mmenu.open a:nth-child(7){animation-delay:.29s} .mmenu.open a:nth-child(8){animation-delay:.33s}
@keyframes slideIn{ to{ opacity:1; transform:none; } }

/* ---------- 6. Hero ---------- */
.hero{ position:relative; padding:clamp(40px,6vw,80px) 0 clamp(8px,2vw,24px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(2.2rem,6vw,3.5rem); margin:22px 0 20px; }
.hero-sub{ font-size:clamp(15.5px,1.8vw,19px); color:var(--text-2); max-width:520px; margin-bottom:32px; }
.hero-sub:has(+ .hero-note){ margin-bottom:14px; }
.hero-note{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text); margin-bottom:28px; }
.hero-note svg{ flex:none; width:20px; height:20px; color:var(--brand); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,44px); }
.hstat b{ display:block; font:800 clamp(24px,3vw,34px)/1 var(--head); color:var(--text); letter-spacing:-.03em; }
.hstat span{ font-size:13px; color:var(--text-3); }

.hero-card{
  position:relative; border-radius:var(--radius-xl); padding:clamp(24px,3vw,34px);
  background:var(--bg-1); border:1px solid var(--line); overflow:hidden;
}
.hero-card > *{ position:relative; }
.hero-vial{ display:grid; place-items:center; margin-bottom:20px; }
.hero-vial svg{ width:min(190px,42vw); filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); animation:bob 5.5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
.hero-feats li{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-top:1px solid var(--line); font-size:14.5px; color:var(--text-2);
}
.hero-feats li:first-child{ border-top:0; }
.tick{ width:22px; height:22px; border-radius:7px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:none; }
.tick svg{ width:13px; height:13px; }
.ruo{ margin-top:14px; font-size:12.5px; line-height:1.45; color:var(--text-3); text-align:center; }

.trust-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:18px 28px;
  margin-top:clamp(36px,5vw,52px); padding-top:24px; border-top:1px solid var(--line);
}
.trust{ display:flex; gap:12px; align-items:flex-start; }
.trust-ic{ color:var(--brand); flex:none; padding-top:2px; }
.trust-ic svg{ width:20px; height:20px; display:block; }
.trust b{ display:block; font:700 15px/1.3 var(--head); margin-bottom:3px; }
.trust span{ font-size:13.5px; line-height:1.45; color:var(--text-2); }

/* ---------- 7. Экономия / сравнение ---------- */
.save-band{
  border-radius:var(--radius-l); padding:clamp(24px,4vw,44px);
  background:linear-gradient(135deg,var(--brand-soft),transparent 60%),var(--bg-1);
  border:1px solid var(--brand-glow); position:relative; overflow:hidden;
}
.save-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:24px; }
.save-i b{ display:block; font:800 clamp(26px,3.4vw,40px)/1 var(--head); color:var(--brand); letter-spacing:-.03em; }
.save-i span{ font-size:13.5px; color:var(--text-2); }

/* ---------- 8. Шаги ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:clamp(14px,2vw,22px); list-style:none; margin:0; padding:0; }
.step{
  position:relative; padding:clamp(24px,3vw,32px); border-radius:var(--radius-l);
  background:var(--bg-1); border:1px solid var(--line); overflow:hidden;
  transition:all .4s var(--ease);
}
.step-n{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%; margin-bottom:16px;
  font:700 15px/1 var(--head); color:var(--brand); border:1.5px solid var(--brand-glow);
}
.step h3{ margin-bottom:8px; }
.step p{ color:var(--text-2); font-size:15px; }
.step-ic{ width:48px; height:48px; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin-bottom:18px; }
.step-ic svg{ width:23px; height:23px; }
.step h3{ margin-bottom:9px; }
.step p{ color:var(--text-2); font-size:14.5px; }

/* ---------- 9. Каталог ---------- */
.cat-bar{
  position:sticky; top:var(--nav-h); z-index:40; margin-bottom:26px;
  padding:14px 0; background:var(--bg); background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line);
}
.cat-tools{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.search{
  position:relative; flex:1 1 260px; min-width:0;
}
.search input{
  width:100%; height:46px; padding:0 44px 0 44px; border-radius:99px;
  background:var(--surface); border:1px solid var(--line); outline:none;
  font-size:14.5px; transition:all .3s var(--ease);
}
.search input:focus{ border-color:var(--brand); background:var(--bg-1); box-shadow:0 0 0 4px var(--brand-soft); }
.search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-3); }
.search .clr{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; display:none; place-items:center; color:var(--text-3); }
.search input:not(:placeholder-shown) ~ .clr{ display:grid; }
.search .clr:hover{ background:var(--surface-2); color:var(--text); }

.sel{
  height:46px; padding:0 38px 0 16px; border-radius:99px; cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB3A8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px;
  border:1px solid var(--line); appearance:none; font-size:14px; outline:none;
  transition:all .3s var(--ease);
}
.sel:focus,.sel:hover{ border-color:var(--line-2); }

.chips{ display:flex; gap:9px; overflow-x:auto; padding:4px 0 6px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 17px; border-radius:99px; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line);
  font:600 13.5px/1 var(--head); color:var(--text-2);
  transition:all .3s var(--ease);
}
.chip svg{ width:15px; height:15px; }
.chip:hover{ border-color:var(--line-2); color:var(--text); transform:translateY(-2px); }
.chip.on{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 18px -6px var(--brand-glow); }

.grid-p{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr)); gap:clamp(14px,1.8vw,22px); }

.pcard{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--radius-l); background:var(--bg-1); border:1px solid var(--line);
  overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pcard:hover{ border-color:var(--line-2); box-shadow:var(--shadow); }
.pcard-media{
  position:relative; aspect-ratio:1/.82; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,var(--bg-3),var(--bg-1) 72%); overflow:hidden; cursor:pointer;
}
.pcard-media::after{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 50% 50%,var(--brand-soft),transparent 65%);
  transition:opacity .45s var(--ease);
}
.pcard:hover .pcard-media::after{ opacity:1; }
.pcard-media svg.art{ width:52%; transition:transform .55s var(--ease); position:relative; z-index:1; }


.tags{ position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.tag{ padding:5px 9px; border-radius:6px; font:700 11.5px/1 var(--head); }
.tag-hit{ background:var(--accent); color:#221a02; }
.tag-new{ background:var(--brand); color:#fff; }
.tag-save{ background:var(--danger); color:#fff; }

.fav{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:var(--text-2);
  background:var(--bg-1); background:color-mix(in srgb,var(--bg-1) 75%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); transition:all .3s var(--ease);
}
.fav:hover{ transform:scale(1.13); color:var(--danger); border-color:var(--danger); }
.fav svg{ width:17px; height:17px; }
.fav.on{ color:var(--danger); border-color:var(--danger); }
.fav.on svg{ fill:var(--danger); animation:pop .45s var(--ease); }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.4)} 100%{transform:scale(1)} }

.quick{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2; height:40px;
  border-radius:99px; background:var(--bg-1); background:color-mix(in srgb,var(--bg-1) 82%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:700 13px/1 var(--head);
  opacity:0; transform:translateY(12px); transition:all .4s var(--ease);
}
.pcard:hover .quick{ opacity:1; transform:none; }
.quick:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.quick svg{ width:15px; height:15px; }

.pcard-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; gap:8px; }
.pcard-title{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.pcard-title h3{ font-size:17px; letter-spacing:-.02em; }
.dose{ font:700 11.5px/1 var(--head); color:var(--brand); padding:4px 8px; border-radius:6px; background:var(--brand-soft); }
.pcard-tag{ font-size:13px; color:var(--text-2); line-height:1.45; flex:1; }

.pcard-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--text-3); }
.instock{ white-space:nowrap; }
.stars{ display:inline-flex; gap:2px; color:var(--accent); }
.stars svg{ width:12px; height:12px; fill:currentColor; }
.stars svg.off{ opacity:.25; }
.instock{ display:inline-flex; align-items:center; gap:6px; color:var(--brand); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 0 var(--brand-glow); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.low{ color:var(--accent); }
.low .dot{ background:var(--accent); }

.price-row{ display:flex; align-items:flex-end; gap:9px; margin-top:auto; padding-top:6px; flex-wrap:wrap; }
.price{ font:800 22px/1 var(--head); letter-spacing:-.03em; }
.price-old{ font-size:13.5px; color:var(--text-3); text-decoration:line-through; }
.price-per{ font-size:11.5px; color:var(--text-3); width:100%; }

.pcard-buy{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.pcard-buy .btn{ flex:1; }
.product-proof{ display:inline-flex; align-items:center; gap:5px; min-width:0; flex:1; color:var(--text-3); font-size:11.5px; line-height:1.25; }
.product-proof svg{ width:14px; height:14px; flex:none; }
.product-proof.is-verified{ color:var(--brand); }
.coa-pending{ border-style:dashed; }
.qty{
  display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:99px;
  background:var(--surface); height:40px; padding:0 3px; flex:none;
}
.qty button{ width:32px; height:34px; border-radius:99px; display:grid; place-items:center; color:var(--text-2); transition:all .22s var(--ease); }
.qty button:hover{ background:var(--brand); color:#fff; }
.qty span{ min-width:26px; text-align:center; font:700 14px/1 var(--head); }
.qty svg{ width:14px; height:14px; }

.empty{ text-align:center; padding:70px 20px; color:var(--text-2); grid-column:1/-1; }
.empty svg{ width:56px; height:56px; margin:0 auto 18px; color:var(--text-3); opacity:.5; }

/* скелетон */
.skel{ border-radius:var(--radius-l); overflow:hidden; background:var(--bg-1); border:1px solid var(--line); }
.skel-b{ background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%); background-size:400% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ---------- 10. Модалки / шторки ---------- */
.overlay{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(3,7,5,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.overlay.open{ opacity:1; pointer-events:auto; }

.modal{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-l); padding:clamp(24px,4vw,36px);
  transform:translateY(28px) scale(.96); opacity:0;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.overlay.open .modal{ transform:none; opacity:1; }
.modal.wide{ max-width:960px; }
.modal-x{ position:absolute; top:16px; right:16px; }
.modal-head{ margin-bottom:22px; padding-right:44px; }
.modal-head h3{ margin-bottom:7px; }
.modal-head p{ color:var(--text-2); font-size:14px; }

/* корзина-шторка */
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:101; width:min(430px,100%);
  background:var(--bg-1); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .5s var(--ease);
  box-shadow:var(--shadow-l);
}
.drawer.open{ transform:none; }
.drawer-head{ padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer-body{ flex:1; overflow-y:auto; padding:18px 22px; }
.drawer-foot{ padding:20px 22px; border-top:1px solid var(--line); background:var(--bg-2); }

.citem{ display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--line); animation:fadeUp .45s var(--ease); }
.citem:last-child{ border-bottom:0; }
.citem-img{ width:64px; height:64px; border-radius:14px; background:var(--bg-3); display:grid; place-items:center; flex:none; }
.citem-img svg{ width:60%; }
.citem-info{ flex:1; min-width:0; }
.citem-info b{ display:block; font:700 14.5px/1.3 var(--head); }
.citem-info span{ font-size:12px; color:var(--text-3); }
.citem-bot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:8px; flex-wrap:wrap; }
.citem-del{ color:var(--text-3); width:30px; height:30px; border-radius:8px; display:grid; place-items:center; transition:all .25s var(--ease); }
.citem-del:hover{ color:var(--danger); background:var(--danger-soft); }
.citem-del svg{ width:15px; height:15px; }

.sum-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:14px; color:var(--text-2); }
.sum-row.total{ border-top:1px solid var(--line); margin-top:9px; padding-top:14px; font:800 20px/1 var(--head); color:var(--text); }
.sum-row .save{ color:var(--brand); }

.progress-free{ margin-bottom:14px; }
.progress-free p{ font-size:12.5px; color:var(--text-2); margin-bottom:8px; }
.bar{ height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .7s var(--ease); }

/* ---------- 11. Тосты ---------- */
.toasts{ position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--radius);
  background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow-l);
  min-width:270px; max-width:min(380px,92vw); pointer-events:auto;
  animation:toastIn .5s var(--ease);
}
.toast.out{ animation:toastOut .4s var(--ease) forwards; }
@keyframes toastIn{ from{ transform:translateX(110%) scale(.9); opacity:0; } }
@keyframes toastOut{ to{ transform:translateX(110%) scale(.9); opacity:0; } }
.toast-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.toast.ok .toast-ic{ background:var(--brand-soft); color:var(--brand); }
.toast.err .toast-ic{ background:var(--danger-soft); color:var(--danger); }
.toast.info .toast-ic{ background:var(--accent-soft); color:var(--accent); }
.toast svg{ width:17px; height:17px; }
.toast b{ display:block; font:700 14px/1.3 var(--head); }
.toast span{ font-size:12.5px; color:var(--text-2); }

/* ---------- 12. Формы ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font:600 13px/1 var(--head); color:var(--text-2); margin-bottom:8px; }
.field .req{ color:var(--danger); }
.inp,textarea.inp,select.inp{
  width:100%; height:50px; padding:0 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); outline:none;
  font-size:15px; transition:all .3s var(--ease);
}
textarea.inp{ height:auto; min-height:100px; padding:14px 16px; resize:vertical; line-height:1.55; }
.inp::placeholder{ color:var(--text-3); }
.inp:focus{ border-color:var(--brand); background:var(--bg-1); box-shadow:0 0 0 4px var(--brand-soft); }
.inp.bad{ border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.err-msg{ font-size:12px; color:var(--danger); margin-top:6px; display:none; }
.inp.bad ~ .err-msg{ display:block; animation:shakeX .4s; }
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.row2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }

.opt{
  display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:16px;
  border:1.5px solid var(--line); background:var(--surface); cursor:pointer; margin-bottom:9px;
  transition:all .3s var(--ease); position:relative;
}
.opt:hover{ border-color:var(--line-2); background:var(--surface-2); }
.opt.on{ border-color:var(--brand); background:var(--brand-soft); }
.opt input{ position:absolute; opacity:0; }
.opt-ic{ width:42px; height:42px; border-radius:11px; background:var(--bg-3); display:grid; place-items:center; flex:none; color:var(--text-2); }
.opt.on .opt-ic{ background:var(--brand); color:#fff; }
.opt-ic svg{ width:20px; height:20px; }
.opt-txt{ flex:1; min-width:0; }
.opt-txt b{ display:block; font:700 14.5px/1.3 var(--head); }
.opt-txt span{ font-size:12.5px; color:var(--text-3); }
.opt-r{ font:700 14px/1 var(--head); color:var(--brand); white-space:nowrap; }
.mini-badge{ font:800 9.5px/1 var(--head); letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent); }

.check{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--text-2); cursor:pointer; margin-bottom:14px; }
.check input{ appearance:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); flex:none; margin-top:1px; cursor:pointer; transition:all .25s var(--ease); position:relative; }
.check input:checked{ background:var(--brand); border-color:var(--brand); }
.check input:checked::after{ content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg); }

/* ---------- 13. Стэпер оформления ---------- */
.stepper{ display:flex; align-items:center; gap:6px; margin-bottom:30px; }
.st{ flex:1; display:flex; flex-direction:column; gap:8px; }
.st-bar{ height:4px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.st-bar i{ display:block; height:100%; width:0; background:var(--brand); transition:width .6s var(--ease); }
.st.done .st-bar i,.st.on .st-bar i{ width:100%; }
.st span{ font:700 11.5px/1 var(--head); color:var(--text-3); letter-spacing:.04em; }
.st.on span,.st.done span{ color:var(--brand); }

/* ---------- 14. Личный кабинет ---------- */
.acc{ display:grid; grid-template-columns:262px minmax(0,1fr); gap:clamp(16px,2.4vw,30px); align-items:start; }
.acc-side{ position:sticky; top:calc(var(--nav-h) + 18px); border-radius:var(--radius-l); background:var(--bg-1); border:1px solid var(--line); padding:20px; }
.acc-user{ display:flex; gap:12px; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.avatar{
  width:48px; height:48px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#fff;
  font:800 18px/1 var(--head);
}
.acc-user b{ display:block; font:700 15px/1.3 var(--head); }
.acc-user span{ font-size:12px; color:var(--text-3); }
.acc-nav a{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
  font:600 14px/1 var(--head); color:var(--text-2); margin-bottom:3px;
  transition:all .28s var(--ease);
}
.acc-nav a svg{ width:17px; height:17px; }
.acc-nav a:hover{ background:var(--surface); color:var(--text); }
.acc-nav a.on{ background:var(--brand-soft); color:var(--brand); }
.acc-nav .cnt{ margin-left:auto; font-size:11.5px; background:var(--surface-2); padding:2px 7px; border-radius:99px; }

.panel{ border-radius:var(--radius-l); background:var(--bg-1); border:1px solid var(--line); padding:clamp(20px,3vw,30px); }
.panel + .panel{ margin-top:16px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.panel-head h3{ font-size:19px; }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(155px,100%),1fr)); gap:13px; }
.kpi{ padding:18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); transition:all .35s var(--ease); }
.kpi:hover{ transform:translateY(-3px); border-color:var(--brand-glow); }
.kpi span{ font-size:12.5px; color:var(--text-3); display:block; margin-bottom:7px; }
.kpi b{ font:800 25px/1 var(--head); letter-spacing:-.03em; }
.kpi i{ font-style:normal; font-size:12px; color:var(--brand); display:block; margin-top:5px; }

.tier{
  padding:20px; border-radius:var(--radius); position:relative; overflow:hidden;
  background:linear-gradient(130deg,var(--brand-2),var(--brand) 55%,#0a5c3a); color:#fff;
}
.tier::after{ content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.09); top:-70px; right:-40px; }
.tier b{ font:800 20px/1 var(--head); display:block; margin-bottom:5px; }
.tier p{ font-size:13px; opacity:.85; margin-bottom:14px; }
.tier .bar{ background:rgba(255,255,255,.22); }
.tier .bar i{ background:#fff; }

.ord{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; transition:all .35s var(--ease); }
.ord:hover{ border-color:var(--line-2); }
.ord-top{ display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; flex-wrap:wrap; background:var(--surface); }
.ord-top b{ font:700 15px/1 var(--head); }
.ord-top .when{ font-size:12.5px; color:var(--text-3); }
.ord-sum{ margin-left:auto; font:800 16px/1 var(--head); }
.ord-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.ord.open .ord-body{ max-height:1200px; }
.ord-inner{ padding:18px; border-top:1px solid var(--line); }
.ord-chev{ transition:transform .4s var(--ease); color:var(--text-3); }
.ord.open .ord-chev{ transform:rotate(180deg); }

.status{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; font:700 11.5px/1 var(--head); }
.s-new{ background:var(--accent-soft); color:var(--accent); }
.s-paid{ background:rgba(76,154,226,.14); color:var(--info); }
.s-ship{ background:rgba(76,154,226,.14); color:var(--info); }
.s-done{ background:var(--brand-soft); color:var(--brand); }
.s-cancel{ background:var(--danger-soft); color:var(--danger); }

.track{ display:flex; gap:0; margin:18px 0; }
.tr{ flex:1; position:relative; text-align:center; }
.tr::before{ content:''; position:absolute; top:11px; left:-50%; width:100%; height:2px; background:var(--line); }
.tr:first-child::before{ display:none; }
.tr.done::before{ background:var(--brand); }
.tr i{ position:relative; z-index:1; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; margin:0 auto 8px; background:var(--bg-2); border:2px solid var(--line); }
.tr.done i{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tr.now i{ box-shadow:0 0 0 5px var(--brand-soft); }
.tr i svg{ width:12px; height:12px; }
.tr span{ display:block; padding:0 2px; font-size:11.5px; line-height:1.25; color:var(--text-3); overflow-wrap:anywhere; }
@media (max-width:400px){ .tr span{ font-size:10.5px; } }
.tr.done span{ color:var(--text-2); }

.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ text-align:left; padding:11px 12px; font:700 12px/1 var(--head); letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:13px 12px; border-bottom:1px solid var(--line); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .25s var(--ease); }
.tbl tbody tr:hover{ background:var(--surface); }
.tbl-scroll{ overflow-x:auto; margin:0 -12px; padding:0 12px; }
/* админка: строка заказа и под ней — контакты, доставка, адрес, комментарий */
.tbl tr.has-det td{ border-bottom:0; padding-bottom:6px; }
.tbl tr.ord-det td{ padding-top:0; font-size:12.5px; color:var(--text-2); line-height:1.6; }

/* ---------- 15. Сертификаты ---------- */
.coa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr)); gap:14px; }
.coa{
  padding:20px; border-radius:var(--radius); background:var(--bg-1); border:1px solid var(--line);
  cursor:pointer; transition:all .4s var(--ease); position:relative; overflow:hidden;
}
.coa::after{ content:''; position:absolute; inset:0; background:linear-gradient(130deg,var(--brand-soft),transparent 60%); opacity:0; transition:opacity .4s var(--ease); }
.coa:hover{ transform:translateY(-5px); border-color:var(--brand-glow); box-shadow:var(--shadow); }
.coa:hover::after{ opacity:1; }
.coa > *{ position:relative; }
.coa b{ display:block; font:700 15.5px/1.3 var(--head); margin-bottom:4px; }
.coa .batch{ font-size:11.5px; color:var(--text-3); font-family:ui-monospace,Menlo,monospace; margin-bottom:14px; }
.coa-nums{ display:flex; gap:16px; }
.coa-nums div span{ display:block; font-size:11px; color:var(--text-3); }
.coa-nums div b{ font:800 17px/1 var(--head); color:var(--brand); margin:0; }

/* ---------- 16. Аккордеон ---------- */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 0; text-align:left; font:700 16.5px/1.4 var(--head);
  transition:color .3s var(--ease);
}
.acc-q:hover{ color:var(--brand); }
.acc-q i{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; transition:all .4s var(--ease); }
.acc-item.open .acc-q i{ background:var(--brand); border-color:var(--brand); color:#fff; transform:rotate(45deg); }
.acc-q svg{ width:12px; height:12px; }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.acc-item.open .acc-a{ max-height:600px; }
.acc-a p{ padding-bottom:22px; color:var(--text-2); font-size:15px; max-width:80ch; }

/* ---------- 17. Отзывы ---------- */
.rev-track{ display:flex; gap:16px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rev-track::-webkit-scrollbar{ display:none; }
.rev{
  flex:none; width:min(360px,84vw); scroll-snap-align:start;
  padding:24px; border-radius:var(--radius-l); background:var(--bg-1); border:1px solid var(--line);
  transition:all .4s var(--ease);
}
.rev:hover{ border-color:var(--brand-glow); transform:translateY(-4px); }
.rev p{ font-size:14.5px; color:var(--text-2); line-height:1.65; margin:14px 0 18px; }
.rev-who{ display:flex; align-items:center; gap:11px; }
.rev-av{ width:38px; height:38px; border-radius:11px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font:800 14px/1 var(--head); }
.rev-who b{ display:block; font:700 14px/1.3 var(--head); }
.rev-who span{ font-size:12px; color:var(--text-3); }

/* ---------- 18. Наука ---------- */
.sci{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(16px,2.2vw,26px); }
.sci-card{ padding:clamp(24px,3vw,32px); border-radius:var(--radius-l); background:var(--bg-1); border:1px solid var(--line); transition:all .4s var(--ease); }
.sci-card:hover{ border-color:var(--brand-glow); transform:translateY(-5px); }
.sci-card h3{ margin-bottom:12px; }
.sci-card p{ color:var(--text-2); font-size:14.5px; }
.chain{ display:flex; flex-wrap:wrap; gap:5px; margin-top:18px; }
.aa{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font:800 12px/1 var(--head);
  transition:all .3s var(--ease);
}
.aa:hover{ background:var(--brand); color:#fff; transform:translateY(-4px) scale(1.12); }

/* ---------- 19. Футер ---------- */
.footer{ background:var(--bg-1); border-top:1px solid var(--line); padding:clamp(48px,6vw,76px) 0 28px; margin-top:clamp(48px,7vw,90px); }
.f-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,4vw,44px); margin-bottom:44px; }
.f-col h4{ font:700 14px/1.2 var(--head); color:var(--text); margin-bottom:16px; }
.f-col li{ margin-bottom:11px; }
.f-col a{ font-size:14px; color:var(--text-2); transition:color .25s var(--ease); }
.f-col a:hover{ color:var(--brand); }
.f-about p{ font-size:14px; color:var(--text-2); margin:16px 0 20px; max-width:38ch; }
.pay-icons{ display:flex; flex-wrap:wrap; gap:7px; }
.pay-ic{
  height:32px; padding:0 11px; border-radius:8px; background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; font:700 10.5px/1 var(--head); color:var(--text-2); letter-spacing:.03em;
  transition:all .28s var(--ease);
}
.pay-ic:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.f-bot{ padding-top:26px; border-top:1px solid var(--line); display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; }
.f-bot p{ font-size:12px; color:var(--text-3); max-width:76ch; line-height:1.7; }
.f-bot .f-req{ flex-basis:100%; }   /* реквизиты продавца — отдельной строкой */

/* ---------- 20. Мобильная нижняя панель ---------- */
.mbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--bg-1); background:color-mix(in srgb,var(--bg-1) 92%,transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.mbar-in{ display:flex; }
.mbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 0; color:var(--text-3); font:600 10.5px/1 var(--head); position:relative; transition:color .25s var(--ease); }
.mbar a svg{ width:21px; height:21px; }
.mbar a.on{ color:var(--brand); }
.mbar .badge-n{ top:0; right:22%; }

/* ---------- 21. Анимации появления ---------- */
/* Блоки видны сразу: выплывание при прокрутке убрано (класс reveal оставлен в разметке — он безвреден). */
.reveal{ opacity:1; transform:none; }
@keyframes fadeUp{ from{ opacity:0; } }
.view{ animation:viewIn .2s ease-out; }
@keyframes viewIn{ from{ opacity:0; } }

/* ---------- 22. Страница товара ---------- */
.pdp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,54px); align-items:start; }
.pdp-media{
  position:relative; border-radius:var(--radius-xl); aspect-ratio:1/.92; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,var(--bg-3),var(--bg-1) 74%);
  border:1px solid var(--line); overflow:hidden;
}
.pdp-media svg.art{ width:46%; animation:bob 6s ease-in-out infinite; filter:drop-shadow(0 24px 46px rgba(0,0,0,.45)); }
.pdp h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin:14px 0 12px; }
.pdp-price{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:22px 0; }
.pdp-price .price{ font-size:clamp(30px,4vw,42px); }
.specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:10px; margin:24px 0; }
.spec{ padding:13px 15px; border-radius:13px; background:var(--surface); border:1px solid var(--line); }
.spec span{ display:block; font-size:11.5px; color:var(--text-3); margin-bottom:4px; }
.spec b{ font:700 14px/1.3 var(--head); }
.pdp-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin:28px 0 20px; overflow-x:auto; scrollbar-width:none; }
.pdp-tabs::-webkit-scrollbar{ display:none; }
.pdp-tab{ padding:12px 16px; font:700 14px/1 var(--head); color:var(--text-3); border-bottom:2px solid transparent; white-space:nowrap; transition:all .3s var(--ease); }
.pdp-tab.on{ color:var(--brand); border-bottom-color:var(--brand); }
.pdp-tab:hover{ color:var(--text); }

/* ---------- 23. Прочее ---------- */
.note{ display:flex; gap:12px; padding:15px 17px; border-radius:14px; background:var(--accent-soft); border:1px solid rgba(217,180,74,.24); font-size:13.5px; color:var(--text-2); }
.note svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:1px; }
.note.brand{ background:var(--brand-soft); border-color:var(--brand-glow); }
.note.brand svg{ color:var(--brand); }

.qr-box{ width:190px; height:190px; margin:0 auto 18px; border-radius:20px; background:#fff; padding:14px; display:grid; place-items:center; }
.spin{ width:44px; height:44px; border:3px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.ok-mark{ width:78px; height:78px; margin:0 auto 20px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; animation:pop .6s var(--ease); }
.ok-mark svg{ width:38px; height:38px; }

.up{ position:fixed; right:20px; bottom:96px; z-index:55; width:46px; height:46px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line); color:var(--text-2); display:grid; place-items:center; opacity:0; pointer-events:none; transition:all .4s var(--ease); box-shadow:var(--shadow); }
.up.show{ opacity:1; pointer-events:auto; }
.up:hover{ background:var(--brand); color:#fff; transform:translateY(-3px); }

.tg-fab{
  position:fixed; right:20px; bottom:20px; z-index:55; height:52px; padding:0 20px; border-radius:99px;
  background:#229ED9; color:#fff; display:inline-flex; align-items:center; gap:10px;
  font:700 14px/1 var(--head); box-shadow:0 12px 30px -8px rgba(34,158,217,.55);
  transition:all .35s var(--ease);
}
.tg-fab:hover{ transform:translateY(-3px) scale(1.03); }
.tg-fab svg{ width:20px; height:20px; }
/* Кнопка «Написать» раскрывает карточку со всеми способами связи; открытая — крестик */
.tg-fab .cfab-close{ display:none; }
.tg-fab[aria-expanded="true"] .cfab-open{ display:none; }
.tg-fab[aria-expanded="true"] .cfab-close{ display:block; }
.tg-fab[aria-expanded="true"] span{ display:none; }
/* Двойной класс — перебить светлую тему ([data-theme="light"] .tg-fab), она ниже по файлу */
.tg-fab.tg-fab[aria-expanded="true"]{ width:52px; padding:0; justify-content:center; background:var(--bg-2); color:var(--text); border:1px solid var(--line-2); box-shadow:var(--shadow); }
.cfab-card{
  position:fixed; right:20px; bottom:86px; z-index:56; width:min(340px, calc(100vw - 28px));
  padding:22px 18px 18px; border-radius:var(--radius-l); background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--shadow-l); animation:cfab-in .28s var(--ease);
}
.cfab-card[hidden]{ display:none; }
@keyframes cfab-in{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.cfab-title{ font:700 18px/1.2 var(--head); text-align:center; margin-bottom:16px; color:var(--text); }
/* Telegram (менеджер, канал, чат) — три в ряд, телефон и почта — по два */
.cfab-grid{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px 4px; }
.cfab-grid > *{ grid-column:span 2; }
.cfab-grid > [data-contact]{ grid-column:span 3; }
.cfab-item{ font:inherit; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border-radius:var(--radius); text-align:center; color:var(--text); transition:background .2s; min-width:0; }
.cfab-item:hover, .cfab-item:focus-visible, .cfab-item[aria-expanded="true"]{ background:var(--surface-2); }
.cfab-reveal{ display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 10px 10px 14px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line); }
.cfab-reveal[hidden]{ display:none; }
.cfab-reveal a{ flex:1; min-width:0; font:600 15px/1.3 var(--head); color:var(--text); overflow-wrap:anywhere; }
.cfab-copy{ flex:none; width:36px; height:36px; border-radius:10px; border:1px solid var(--line-2); background:none; color:var(--text-2); display:grid; place-items:center; cursor:pointer; }
.cfab-copy:hover{ color:var(--brand); border-color:var(--brand); }
.cfab-copy svg{ width:18px; height:18px; }
.cfab-item b{ font:600 14px/1.2 var(--head); }
.cfab-item small{ font-size:12px; line-height:1.3; color:var(--text-2); overflow-wrap:anywhere; }
.cfab-ic{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; margin-bottom:2px; }
.cfab-ic svg{ width:24px; height:24px; }
.ic-tg{ background:#229ED9; }
.ic-phone{ background:var(--brand); }
.ic-mail{ background:var(--info); }
@keyframes ring{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.35);opacity:0} }

/* iOS увеличивает страницу при фокусе в поле со шрифтом меньше 16px — и вёрстка «съезжает».
   На сенсорных экранах и узких окнах поля — 16px. */
@media (pointer:coarse), (max-width:860px){
  /* !important: у .sel, select.inp, .search input свои размеры, и они перебивали бы правило. */
  input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size:16px !important; }
  /* Пальцу нужно ~40px: маленькие кнопки на сенсорных экранах — крупнее. */
  .back-btn{ min-height:40px; }
  .citem-del{ width:40px; height:40px; }
  .check{ padding:8px 0; margin-bottom:4px; }
  a.eyebrow{ padding-block:12px; margin-block:-12px; }
}

/* ---------- 24. Адаптив ---------- */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-card{ max-width:520px; }
  .f-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .acc{ grid-template-columns:minmax(0,1fr); }
  .acc-side{ position:static; }
  .acc-nav{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .acc-nav::-webkit-scrollbar{ display:none; }
  .acc-nav a{ white-space:nowrap; margin:0; }
  .pdp{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px){
  .menu{ display:none; }
  .nav-act{ margin-left:auto; }   /* меню скрыто — кнопки прижимает к краю само правило */
  .burger{ display:grid; }
  .mbar{ display:block; }
  body{ padding-bottom:74px; }
  .tg-fab{ bottom:84px; }
  .cfab-card{ bottom:150px; right:14px; }
  .up{ bottom:150px; }
  .cat-bar{ top:0; }
}
@media (max-width:640px){
  :root{ --nav-h:62px; }
  .grid-p{ grid-template-columns:repeat(auto-fill,minmax(min(158px,100%),1fr)); gap:10px; }
  .pcard-body{ padding:12px 13px 14px; }
  .pcard-title h3{ font-size:15px; }
  .price{ font-size:19px; }
  .pcard-tag{ display:none; }
  .quick{ display:none; }
  .f-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .row2{ grid-template-columns:minmax(0,1fr); }
  .toasts{ left:12px; right:12px; bottom:82px; }
  .toast{ min-width:0; max-width:none; }
  .drawer{ width:100%; }
  .modal{ padding:22px 18px; border-radius:24px; }
  .hero-stats{ gap:18px; }
  .logo-txt i{ display:none; }
  .steps{ grid-template-columns:minmax(0,1fr); }
  .up{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}
@media print{ .nav,.mbar,.tg-fab,.cfab-card,.up,.footer,.topbar{ display:none !important; } }

/* ---------- 25. Светлая тема: доводка ---------- */
[data-theme="light"] .pcard,
[data-theme="light"] .panel,
[data-theme="light"] .acc-side,
[data-theme="light"] .step,
[data-theme="light"] .sci-card,
[data-theme="light"] .rev,
[data-theme="light"] .coa,
[data-theme="light"] .hero-card{ box-shadow:0 1px 2px rgba(11,19,16,.04), 0 8px 24px -16px rgba(11,19,16,.14); }
[data-theme="light"] .footer{ background:var(--bg-2); }
[data-theme="light"] .band{ background:var(--bg-2); }
[data-theme="light"] .overlay{ background:rgba(20,32,26,.42); }
[data-theme="light"] .toast{ background:#fff; }
[data-theme="light"] .tag-hit{ background:#E9B93A; color:#2A1F00; }
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#C9D6CE; }

/* ---------- 26. Светлые тона: убираем тёмные пятна ---------- */
[data-theme="light"] .topbar{
  background:#EEF6F1;
  color:var(--brand-2); border-bottom:1px solid var(--line);
}
[data-theme="light"] .logo-mark{
  background:linear-gradient(140deg,#E4F3EB,#D3EBDF);
  color:var(--brand-2); box-shadow:inset 0 0 0 1px rgba(18,160,99,.18);
}
[data-theme="light"] .avatar{
  background:linear-gradient(140deg,#E4F3EB,#D3EBDF); color:var(--brand-2);
}
[data-theme="light"] .tier{
  background:linear-gradient(130deg,#EAF6F0,#DCF0E6 60%,#E9F4EF);
  color:var(--brand-2); border:1px solid var(--brand-glow);
}
[data-theme="light"] .tier::after{ background:rgba(18,160,99,.07); }
[data-theme="light"] .tier .bar{ background:rgba(18,160,99,.16); }
[data-theme="light"] .tier .bar i{ background:var(--brand); }
[data-theme="light"] .tag-new{ background:#DCF0E6; color:var(--brand-2); }
[data-theme="light"] .tag-hit{ background:#FBEFCC; color:#7A5C05; }
[data-theme="light"] .tag-save{ background:#FBE0DE; color:#96322A; }
[data-theme="light"] .pcard-media{ background:linear-gradient(165deg,#FBFDFC,#EFF6F2); }
[data-theme="light"] .pdp-media{ background:linear-gradient(165deg,#FBFDFC,#EDF5F0); }
[data-theme="light"] .citem-img{ background:#F1F7F3; }
[data-theme="light"] .ok-mark{ background:#DCF0E6; }
[data-theme="light"] .tg-fab{ background:#2FAEE4; box-shadow:0 10px 26px -10px rgba(47,174,228,.5); }
[data-theme="light"] [data-theme="light"] .hero-card{ background:#FFFFFF; }
[data-theme="light"] .save-band{ background:linear-gradient(135deg,#EDF7F2,#FFFFFF 65%); }
[data-theme="light"] .drawer-foot{ background:var(--bg-2); }
[data-theme="light"] .qr-box{ background:#F4F7F5; box-shadow:inset 0 0 0 1px var(--line); }
[data-theme="light"] .status.s-paid,[data-theme="light"] .status.s-ship{ background:rgba(76,154,226,.11); }

/* ---------- 27. Доводка мобильной вёрстки ---------- */
@media (max-width:860px){
  /* тему и профиль на мобиле дублирует нижняя панель — из шапки убираем */
  #theme-btn, #user-btn{ display:none; }
  .tg-fab{ width:52px; padding:0; justify-content:center; right:14px; }
  .tg-fab span{ display:none; }
}
@media (max-width:640px){
  .logo-mark{ width:34px; height:34px; border-radius:10px; font-size:12px; }
  .logo-txt b{ font-size:13.5px; }
  .icon-btn{ width:38px; height:38px; }
  .nav .wrap{ gap:10px; }
  /* фильтры каталога — в две колонки, а не столбиком */
  .cat-tools{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
  .cat-tools .search{ grid-column:1/-1; }
  .sel{ width:100%; padding-right:32px; font-size:13px; }
  .cat-bar{ padding:10px 0; }
  .sec-head h1, .sec-head h2{ font-size:1.55rem; }
  /* итоговые панели корзины и оформления — под контентом */
  .cart-layout{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:1080px){
  .cart-layout{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ============================================================
   28. Реальные фотографии товаров
   ============================================================ */
.pcard-media{ aspect-ratio:1/.95; }
.pcard-media img.art{
  position:relative; z-index:1; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 50%;
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.pcard:hover .pcard-media img.art{ transform:scale(1.03); }

.pdp-media{ aspect-ratio:1/1; }
.pdp-media img.art{
  width:100%; height:100%; object-fit:cover; border-radius:inherit;
  animation:none; filter:none; cursor:zoom-in;
}

/* iOS 14 и старше не знают aspect-ratio: блок фото без высоты схлопнулся бы — пусть высоту даёт само фото. */
@supports not (aspect-ratio:1/1){
  .pcard-media img.art, .pdp-media img.art{ height:auto; }
}

.citem-img{ overflow:hidden; }
.citem-img img.art{ width:100%; height:100%; object-fit:cover; }

.hero-vial{ width:100%; }
.hero-vial img.photo{
  /* height:auto обязателен: атрибут height="760" иначе перебивает aspect-ratio */
  width:100%; height:auto; aspect-ratio:1/.86; object-fit:cover; object-position:50% 45%;
  border-radius:var(--radius-l);
  border:1px solid var(--line); box-shadow:var(--shadow-l);
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* лайтбокс фото на карточке товара */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:5vmin;
  background:var(--bg-0); background:color-mix(in srgb,var(--bg-0) 82%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:min(900px,92vw); max-height:86vh; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-l); transform:scale(.92); transition:transform .45s var(--ease);
}
.lightbox.open img{ transform:none; }

/* ---------- Сертификаты анализа ---------- */
.cert-grid{
  display:grid; gap:18px; margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
}
.cert{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.cert:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:var(--brand-glow); }
.cert-shot{ position:relative; background:var(--bg-2); border-bottom:1px solid var(--line); overflow:hidden; }
.cert-shot img{
  display:block; width:100%; height:auto; aspect-ratio:56/60; object-fit:cover; object-position:50% 0;
  transition:transform .6s var(--ease);
}
.cert:hover .cert-shot img{ transform:scale(1.04); }
.cert-open{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 12px; font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(to top,rgba(12,32,24,.88),rgba(12,32,24,0));
  opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.cert-open svg{ width:15px; height:15px; }
.cert:hover .cert-open{ opacity:1; transform:none; }
.cert-body{ padding:15px 16px 17px; }
.cert-body > b{ display:block; font-size:15px; letter-spacing:-.01em; }
.cert-meth{
  display:flex; align-items:flex-start; gap:6px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--line); font-size:11.5px; line-height:1.45; color:var(--dim);
}
.cert-meth svg{ width:13px; height:13px; flex:none; margin-top:1px; color:var(--brand); }
.cert-note{
  margin-top:22px; padding:15px 18px; border-radius:var(--radius);
  background:var(--bg-2); border:1px solid var(--line);
  font-size:13.5px; line-height:1.6; color:var(--dim);
}
@media (max-width:520px){
  .cert-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cert-body{ padding:12px 12px 14px; }
  .cert-body > b{ font-size:13.5px; }
  .cert-meth{ display:none; }
  /* три колонки цифр не влезают в узкую карточку — переносим на две строки */
  .cert .coa-nums{ flex-wrap:wrap; gap:8px 14px; }
  .cert .coa-nums div b{ font-size:13.5px; }
}

/* в карточке сертификата цифры компактнее и не переносятся */
.cert .coa-nums{ gap:12px; margin-top:11px; }
.cert .coa-nums div b{ font-size:14.5px; white-space:nowrap; }
.cert .coa-nums div span{ font-size:10.5px; white-space:nowrap; }
.cert .batch{ font-size:12px; margin-top:3px; }

/* Таблица начислений в кабинете партнёра */
.tbl th{ font:700 12px/1 var(--head); color:var(--text-2); padding:10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:12px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
#prt-qr svg{ display:block; width:100%; height:auto; }

/* ---------- Безопасные зоны iPhone (вырез камеры, полоска «домой») ----------
   В конце файла: должны перебить обычные отступы плавающих кнопок и уведомлений. */
@supports (padding:max(0px)){
  .toasts{ right:max(22px, env(safe-area-inset-right)); }
  .up{ right:max(20px, env(safe-area-inset-right)); }
  .tg-fab, .cfab-card{ right:max(20px, env(safe-area-inset-right)); }
  @media (max-width:860px){
    .tg-fab, .cfab-card{ right:max(14px, env(safe-area-inset-right)); }
  }
  @media (max-width:640px){
    .toasts{ left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); }
  }
}

/* Самые узкие телефоны (Galaxy Fold, iPhone SE 1): строке корзины нужно место под количество и сумму. */
@media (max-width:360px){
  .citem{ gap:10px; }
  .citem-img{ width:48px; height:48px; border-radius:12px; }
}

/* Сумма в строке заказа не разрывается: «24 900 ₽» целиком, переносится название. */
.sum-row b{ white-space:nowrap; }
/* Поле и кнопка «Скопировать» в кабинете партнёра: на узком экране кнопка уходит под поле. */
.copy-row{ display:flex; gap:8px; flex-wrap:wrap; }
.copy-row .inp{ flex:1 1 180px; min-width:0; width:auto; }
.copy-row .btn{ flex:none; }
/* Ленты вкладок и фильтров, которые прокручиваются вбок: край тает — видно, что дальше есть ещё. */
.acc-nav.more, .chips.more{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
}
.acc-nav.more.end, .chips.more.end{ -webkit-mask-image:none; mask-image:none; }
.sum-row{ gap:12px; }
/* В кабинетах, корзине, оформлении, каталоге и на странице товара кнопка Telegram на телефоне закрывала суммы и кнопки —
   там она убрана: написать можно из меню. */
@media (max-width:860px){
  body[data-page=account] .tg-fab, body[data-page=partner] .tg-fab,
  body[data-page=cart] .tg-fab, body[data-page=checkout] .tg-fab,
  body[data-page=catalog] .tg-fab, body[data-page=product] .tg-fab{ display:none; }
}

/* Фото товара на компьютере остаётся на экране, пока читают описание, — без пустой колонки под ним. */
@media (min-width:1081px){
  .pdp > :first-child{ position:sticky; top:calc(var(--nav-h) + 20px); }
}

/* ---------- полоса «Наш Telegram-канал» на главной ---------- */
.tg-band{
  display:flex; align-items:center; gap:16px; padding:18px 22px; text-decoration:none; color:var(--text);
  border:1px solid var(--brand-glow); border-radius:var(--radius); background:var(--brand-soft);
}
.tg-band-ic{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#2AABEE; color:#fff; }
.tg-band-ic svg{ width:22px; height:22px; fill:currentColor; stroke:none; }
.tg-band-txt{ display:grid; gap:3px; min-width:0; margin-right:auto; }
.tg-band-txt b{ font:700 17px/1.3 var(--head); }
.tg-band-txt span{ color:var(--text-2); font-size:14px; line-height:1.5; }
@media (max-width:640px){
  .tg-band{ flex-wrap:wrap; padding:16px; }
  .tg-band-txt{ flex:1 1 0; }
  .tg-band .btn{ width:100%; justify-content:center; }
}