:root{
  --blue:#0F4C9A; --blue-deep:#0A356E; --blue-soft:#E7F0FA;
  --green:#2A9D4B; --green-deep:#1F7A39; --green-soft:#E8F5EC;
  --leaf:#8FCB9B; --ink:#10222E; --ink-soft:#4A6070;
  --line:#D6E2E9; --line-soft:#EAF1F5;
  --paper:#FFFFFF; --wash:#F4F8FA; --amber:#F0A93B; --warn:#B4462A;
  --wrap:1220px; --radius:14px;
  --shadow:0 1px 2px rgba(16,34,46,.06), 0 8px 24px rgba(16,34,46,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--wash); color:var(--ink);
  font:16px/1.65 "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; line-height:1.18; margin:0 0 .5em; color:var(--ink); letter-spacing:-.01em}
h1{font-size:clamp(30px,4.4vw,50px)}
h2{font-size:clamp(23px,2.7vw,33px)}
h3{font-size:clamp(18px,1.6vw,21px)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.15em}
li{margin:.25em 0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--green); outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mute{color:var(--ink-soft)}

/* ---------------------------------------------------------- шапка сайта --- */
.util-bar{background:var(--blue-deep); color:#dce9f7; font-size:13px}
.util-bar .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; min-height:38px; flex-wrap:wrap}
.util-points{display:flex; gap:20px; margin:0; padding:0; list-style:none; flex-wrap:wrap}
.util-points li{margin:0; white-space:nowrap}
.util-bar a{color:#fff; text-decoration:underline}

.site-head{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; gap:20px; min-height:74px}
.brandmark{display:flex; align-items:center; gap:9px; font-family:"Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight:700; font-size:26px; letter-spacing:-.02em; text-decoration:none}
.brandmark:hover{text-decoration:none}
.brandmark .bm-fresh{color:var(--blue)}
.brandmark .bm-mint{color:var(--green)}
.brandmark svg{width:22px; height:22px; flex:none}
.nav-main{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap}
.nav-main a{color:var(--ink); font-size:15px; font-weight:600}
.nav-main a[aria-current]{color:var(--blue); box-shadow:inset 0 -2px 0 var(--green)}
.head-cta{display:flex; gap:10px; align-items:center}
/* Селектор с родителем нарочно: .ghost-button ниже по каскаду ставит
   display:inline-flex и одиночный .nav-toggle{display:none} перебивает. */
.head-cta .nav-toggle{display:none}

/* ------------------------------------------------------------- кнопки ----- */
.buy-button,.ghost-button,.blue-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px/1 "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif; padding:13px 20px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; text-align:center; text-decoration:none;
}
.buy-button{background:var(--green); color:#fff; box-shadow:0 1px 0 var(--green-deep)}
.buy-button:hover{background:var(--green-deep); color:#fff; text-decoration:none}
.blue-button{background:var(--blue); color:#fff}
.blue-button:hover{background:var(--blue-deep); color:#fff; text-decoration:none}
.ghost-button{background:var(--paper); color:var(--blue); border-color:var(--line)}
.ghost-button:hover{border-color:var(--blue); text-decoration:none}
.buy-button.is-small,.ghost-button.is-small{padding:10px 14px; font-size:14px}
.buy-button.is-wide{width:100%}

/* ------------------------------------------------------------- секции ----- */
.page-section{padding:64px 0}
.page-section.on-paper{background:var(--paper); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.page-section.on-mint{background:var(--green-soft)}
.section-head{display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin-bottom:30px; max-width:760px}
.section-index{font:700 12px/1 "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--green)}
.section-head p{margin:6px 0 0; color:var(--ink-soft); font-size:17px}
.section-foot{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* -------------------------------------------------------------- герой ----- */
.hero-panel{position:relative; background:var(--paper); overflow:hidden}
.hero-panel::before{
  content:""; position:absolute; inset:0 0 0 47%;
  background:linear-gradient(118deg,var(--blue) 0%,var(--blue) 34%,#0d7a86 62%,var(--green) 100%);
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);
}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:54px; align-items:center; padding:56px 0 62px}
/* Текст не должен заезжать на диагональ: колонка кончается там, где начинается
   скос, и длинная строка обрезается по ширине, а не наползает на синее. */
.hero-copy{min-width:0; max-width:37em; padding-right:12px}
.hero-copy h1{max-width:13em}
.hero-eyebrow{font:700 12px/1 "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin:0 0 14px}
.hero-copy h1{margin-bottom:16px}
.hero-lede{font-size:19px; color:var(--ink-soft); max-width:29em; margin-bottom:24px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap; margin:0; padding:0; list-style:none}
.hero-chips li{
  margin:0; background:var(--green-soft); color:var(--blue-deep); border:1px solid #cfe6d7;
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600;
}
.hero-figure{position:relative; min-width:0}
/* Пакшот в герое квадратный, а карточка должна остаться горизонтальной:
   ограничиваем высоту и вписываем кадр, иначе тюбик растягивает блок на весь
   экран. */
.hero-figure img{
  width:100%; max-height:430px; object-fit:cover; background:var(--paper);
  border-radius:18px; box-shadow:0 18px 44px rgba(10,53,110,.28);
}
.hero-badge{
  position:absolute; left:-14px; bottom:-16px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); min-width:172px;
}
.hero-badge strong{display:block; font:700 21px/1.2 "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color:var(--blue)}
.hero-badge span{font-size:13px; color:var(--ink-soft)}

/* --------------------------------------------------- быстрая покупка ------ */
.quickbuy-rail{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.quickbuy-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0; box-shadow:var(--shadow);
}
.quickbuy-card .qb-photo{background:var(--green-soft); border-radius:10px; padding:10px}
.quickbuy-card .qb-photo img{width:100%; aspect-ratio:4/3; object-fit:contain; mix-blend-mode:multiply}
.quickbuy-card h3{font-size:16px; margin:0}
.quickbuy-card .qb-meta{font-size:13px; color:var(--ink-soft); margin:0}
.quickbuy-card .price-row{margin-top:auto}

/* ------------------------------------------------------ карточка товара --- */
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:20px}
.product-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; min-width:0; box-shadow:var(--shadow);
}
.product-card-photo{background:var(--green-soft); padding:16px}
.product-card-photo img{width:100%; aspect-ratio:1/1; object-fit:contain; mix-blend-mode:multiply}
.product-card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-width:0}
.product-card-body h3{font-size:17px; margin:0}
.product-card-body h3 a{color:var(--ink)}
.card-spec{margin:0; font-size:13.5px; color:var(--ink-soft)}
.card-actions{display:flex; gap:8px; margin-top:auto; padding-top:4px}
.card-actions .buy-button{flex:1 1 auto}
.price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price-main{font:700 21px/1 "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color:var(--ink)}
.unit-chip{
  background:var(--blue-soft); color:var(--blue-deep); border-radius:999px;
  padding:4px 10px; font-size:12.5px; font-weight:700; white-space:nowrap;
}
.stars{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:var(--ink-soft); font-weight:600}
.stars svg{width:15px; height:15px; fill:var(--amber)}
.stock-none{font-size:13px; color:var(--warn); font-weight:600}

/* --------------------------------------------------------- полки-плитки --- */
.shelf-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.shelf-tile{
  position:relative; display:flex; flex-direction:column; gap:8px; min-width:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; text-decoration:none; color:var(--ink);
}
.shelf-tile:hover{border-color:var(--green); text-decoration:none}
.shelf-tile h3{font-size:17px; margin:0}
.shelf-tile .tile-count{font-size:13px; color:var(--ink-soft)}
.shelf-tile .tile-from{margin-top:auto; font-weight:700; color:var(--blue)}
.shelf-rail{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 24px; padding:0; list-style:none}
.shelf-rail li{margin:0}
.shelf-rail a{
  display:inline-block; background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; font-size:14px; font-weight:600; color:var(--ink);
}
.shelf-rail a[aria-current]{background:var(--blue); border-color:var(--blue); color:#fff}

/* ------------------------------------------------------- широкая полоса --- */
.band-photo{position:relative; overflow:hidden; background:var(--blue-deep)}
.band-photo img{width:100%; height:clamp(220px,32vw,380px); object-fit:cover; opacity:.92}
.band-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 0;
  background:linear-gradient(180deg,rgba(10,53,110,0) 0%,rgba(10,53,110,.82) 70%);
  color:#fff; font-size:15px;
}
.band-caption .wrap{display:flex; gap:16px; justify-content:space-between; align-items:flex-end; flex-wrap:wrap}
.band-caption strong{font-family:"Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size:20px; display:block}

/* --------------------------------------------------------- калькулятор ---- */
.kitcalc{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:28px; align-items:start}
.kitcalc-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.kitcalc-form label{display:block; font-weight:600; font-size:14px; margin:0 0 6px}
.kitcalc-form input,.kitcalc-form select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px;
  font:15px "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif; margin-bottom:16px; background:var(--paper); color:var(--ink);
}
.kitcalc-out{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:8px 20px 20px; box-shadow:var(--shadow)}
.kitcalc-lines{list-style:none; margin:0; padding:0}
.kitcalc-lines li{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:15px}
.kitcalc-lines li b{white-space:nowrap}
.kitcalc-total{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 0 4px; font-family:"Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif}
.kitcalc-total span{font-size:14px; color:var(--ink-soft)}
.kitcalc-total b{font-size:26px}
.kitcalc-notes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:26px}
.kitcalc-notes h3{font-size:15px; margin:0 0 4px}
.kitcalc-notes p{font-size:14px; color:var(--ink-soft); margin:0}

/* ------------------------------------------------------------- галерея ---- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.gallery-item{margin:0; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; min-width:0}
.gallery-item img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gallery-item.is-contain img{object-fit:contain; background:var(--green-soft); mix-blend-mode:multiply}
.gallery-item figcaption{padding:10px 12px; font-size:13px; color:var(--ink-soft)}

/* -------------------------------------------------------------- таблицы --- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}
table.data-table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
table.data-table th,table.data-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.data-table thead th{background:var(--blue-soft); color:var(--blue-deep); font-size:13px; text-transform:uppercase; letter-spacing:.06em}
table.data-table tbody tr:last-child td{border-bottom:0}
table.data-table tbody tr:nth-child(even){background:#fbfdfe}
table.data-table td.is-num{white-space:nowrap; font-variant-numeric:tabular-nums}

/* ------------------------------------------------- качество, команда ------ */
.split-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.note-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; min-width:0}
.note-card h3{margin:0 0 8px; font-size:18px}
.note-card p{margin:0; color:var(--ink-soft)}
.note-card.on-blue{background:var(--blue-soft); border-color:#cddff2}
.team-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.team-card{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--green); border-radius:var(--radius); padding:20px; min-width:0}
.team-card h3{font-size:16px; margin:0 0 8px}
.team-card p{margin:0; font-size:14.5px; color:var(--ink-soft)}
.story-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
.story-grid .story-figure img{border-radius:var(--radius); border:1px solid var(--line)}
.story-text p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- отзывы ---- */
.review-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.review-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-width:0; display:flex; flex-direction:column; gap:10px}
.review-card blockquote{margin:0; font-size:15px}
.review-card .review-head{display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:13px; color:var(--ink-soft)}
.review-card h3{font-size:16px; margin:0}
.review-card .review-item{margin-top:auto; font-size:13px}
.review-stars{display:inline-flex; gap:2px}
.review-stars svg{width:15px; height:15px; fill:var(--amber)}
.review-stars svg.is-off{fill:#d8dfe4}

/* ------------------------------------------------------------- журнал ----- */
.journal-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.journal-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; min-width:0}
.journal-card img{width:100%; aspect-ratio:16/10; object-fit:cover}
.journal-card .journal-body{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto}
.journal-card h3{font-size:19px; margin:0}
.journal-card p{margin:0; font-size:14.5px; color:var(--ink-soft)}
.journal-card .journal-meta{margin-top:auto; font-size:13px; color:var(--ink-soft)}

/* -------------------------------------------------------- текст статьи ---- */
.article-head{padding:44px 0 10px; background:var(--paper); border-bottom:1px solid var(--line-soft)}
.article-head h1{max-width:20em}
.article-meta{color:var(--ink-soft); font-size:14px}
.article-body{max-width:760px; font-size:17.5px}
.article-body h2{margin-top:1.7em}
.article-body h3{margin-top:1.4em}
.article-body blockquote{
  margin:1.6em 0; padding:16px 22px; border-left:4px solid var(--green);
  background:var(--green-soft); border-radius:0 12px 12px 0; font-size:17px;
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body .table-scroll{margin:1.6em 0}
.article-body table.data-table{min-width:480px; font-size:15.5px}
.article-figure{margin:1.8em 0}
/* Вертикальный пакшот в колонке шириной 760px вырастает в полтора экрана и
   съедает статью, поэтому высота кадра ограничена, а сам он вписывается. */
.article-figure img{
  border-radius:var(--radius); border:1px solid var(--line);
  width:100%; max-height:460px; object-fit:contain; background:var(--green-soft);
}
.article-hero-figure{margin:0}
.article-hero-figure img{width:100%; max-height:420px; object-fit:cover; border:0; border-radius:0; background:none}
.article-figure figcaption{font-size:13.5px; color:var(--ink-soft); padding-top:8px}
.article-toc{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:0 0 30px}
.article-toc h2{font-size:15px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}
.article-toc ol{margin:0; padding-left:1.2em; font-size:15px}
.inline-product{
  display:grid; grid-template-columns:minmax(0,132px) minmax(0,1fr); gap:18px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:1.8em 0;
}
.inline-product img{width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--green-soft); border-radius:10px; mix-blend-mode:multiply}
.inline-product h3{margin:0 0 4px; font-size:17px}
.inline-product p{margin:0 0 10px; font-size:14px; color:var(--ink-soft)}
.inline-product .inline-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* -------------------------------------------------------- страница товара - */
.pdp-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:start; padding:34px 0 10px}
.pdp-gallery{min-width:0}
.pdp-hero-photo{background:var(--green-soft); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.pdp-hero-photo img{width:100%; max-height:520px; object-fit:contain; mix-blend-mode:multiply}
.pdp-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.pdp-thumbs img{width:84px; height:84px; object-fit:contain; background:var(--green-soft); border:1px solid var(--line); border-radius:9px; padding:6px}
.pdp-buy{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); min-width:0}
.pdp-buy .price-row{margin:6px 0 14px}
.pdp-buy .price-main{font-size:32px}
.pdp-facts{list-style:none; margin:16px 0 0; padding:0; font-size:14.5px}
.pdp-facts li{padding:9px 0; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:14px}
.pdp-facts li span{color:var(--ink-soft)}
.pdp-facts li b{text-align:right}
.pdp-trust{margin:14px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--ink-soft)}
.pdp-trust li{padding-left:22px; position:relative; margin:6px 0}
.pdp-trust li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}
.drugfacts{border:2px solid var(--ink); border-radius:6px; padding:16px 18px; background:var(--paper); font-size:14.5px; margin:26px 0}
.drugfacts h2{font-size:19px; margin:0 0 10px; border-bottom:2px solid var(--ink); padding-bottom:6px}
.drugfacts dl{margin:0; display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:6px 16px}
.drugfacts dt{font-weight:700}
.drugfacts dd{margin:0; color:var(--ink-soft)}
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background:var(--paper); border-top:1px solid var(--line); padding:10px 16px;
  box-shadow:0 -6px 20px rgba(16,34,46,.1);
}
.buybar-inner{display:flex; align-items:center; gap:14px; max-width:var(--wrap); margin:0 auto}
.buybar .buybar-price{font:700 19px/1 "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif}
.buybar .buy-button{margin-left:auto}

/* ----------------------------------------------------------- служебное ---- */
.breadcrumbs{font-size:13.5px; color:var(--ink-soft); padding:14px 0 0}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.breadcrumbs li::after{content:"/"; padding-left:8px; color:var(--line)}
.breadcrumbs li:last-child::after{content:""}
.eeat-note{background:var(--blue-soft); border:1px solid #cddff2; border-radius:var(--radius); padding:20px 22px; font-size:15px}
.eeat-note h2{font-size:17px; margin:0 0 8px}
.eeat-note p:last-child{margin-bottom:0}
.sources-list{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.sources-list h2{font-size:19px; margin:0 0 10px}
.sources-list ol{margin:0; padding-left:1.2em; font-size:14.5px; color:var(--ink-soft)}
.sources-list li{margin:.5em 0}
.faq-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.faq-item{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-width:0}
.faq-item h3{font-size:16.5px; margin:0 0 8px}
.faq-item p{margin:0; font-size:15px; color:var(--ink-soft)}
.legal-body{max-width:760px}
.legal-body h2{margin-top:1.6em}
.cta-band{background:linear-gradient(112deg,var(--blue) 0%,#0d7a86 58%,var(--green) 100%); color:#fff; padding:44px 0}
.cta-band h2{color:#fff; margin:0 0 8px}
.cta-band p{color:#dcecf5; margin:0 0 18px; max-width:52em}
.cta-band .buy-button{background:#fff; color:var(--blue-deep); box-shadow:none}
.cta-band .buy-button:hover{background:#eef6ff; color:var(--blue-deep)}
.cta-band .ghost-button{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}

/* ------------------------------------------------------------- подвал ----- */
.site-foot{background:var(--blue-deep); color:#c9dcee; padding:52px 0 26px; font-size:14.5px}
.site-foot h2{color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 12px}
.site-foot a{color:#eaf3fb}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:30px}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin:6px 0}
.foot-brand p{color:#b7cee3; max-width:34em}
.social-row{display:flex; gap:12px; margin:16px 0 0; padding:0; list-style:none}
.social-row a{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:9px}
.social-row svg{width:17px; height:17px; fill:#eaf3fb}
.pay-marks{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0; padding:0; list-style:none}
.pay-marks li{margin:0; background:#fff; border-radius:6px; padding:5px 8px; display:flex; align-items:center}
.pay-marks svg{height:18px; width:auto}
.foot-legal{border-top:1px solid rgba(255,255,255,.16); margin-top:34px; padding-top:20px; display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; font-size:13px; color:#a9c3da}
.foot-legal p{margin:0; max-width:60em}

/* -------------------------------------------------------------- 404 ------- */
.notfound{padding:80px 0; text-align:center}
.notfound .buy-button{margin-top:14px}

/* ------------------------------------------------------------ адаптив ----- */
@media (max-width:1080px){
  .quickbuy-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf-grid,.team-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-grid,.journal-grid,.kitcalc-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr); padding:40px 0 46px}
  /* Диагональ уезжает под кадр наверх: внизу под ней оказывался текст лида,
     и последние строки читались тёмным по синему. */
  .hero-panel::before{inset:0 0 auto 0; height:clamp(300px,64vw,460px); clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
  .hero-figure{order:-1}
  .hero-badge{position:static; margin-top:14px; min-width:0}
  .pdp-grid,.story-grid,.kitcalc{grid-template-columns:minmax(0,1fr)}
  .nav-main{display:none}
  .nav-main.is-open{display:flex; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:16px 24px; flex-direction:column; gap:14px}
  /* :not(.nav-toggle) обязателен: кнопка меню сама .ghost-button, и общее
     правило ниже по каскаду прятало единственный вход в навигацию. */
  .head-cta .ghost-button:not(.nav-toggle){display:none}
  .head-cta .nav-toggle{display:inline-flex; margin-left:auto}
  .util-points{display:none}
  .site-head{position:relative}
  .buybar{display:block}
  body.has-buybar{padding-bottom:74px}
}
@media (max-width:640px){
  .page-section{padding:44px 0}
  .wrap{padding:0 18px}
  .quickbuy-rail,.shelf-grid,.team-grid,.split-grid,.faq-list,
  .review-grid,.journal-grid,.kitcalc-notes,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* auto-fill с минимумом 0 нарезает бесконечное число колонок нулевой
     ширины, и карточки схлопываются в вертикальные линии. На узком экране
     колонка ровно одна. */
  .product-grid{grid-template-columns:minmax(0,1fr)}
  .hero-figure img{min-height:0}
  .article-body{font-size:17px}
  .inline-product{grid-template-columns:minmax(0,1fr)}
  .drugfacts dl{grid-template-columns:minmax(0,1fr)}
  .drugfacts dd{padding-bottom:6px}
}
@media print{
  .site-head,.util-bar,.buybar,.cta-band{display:none}
}