@font-face { font-family:'Sora'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url(/fonts/sora-var.woff2) format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/fonts/figtree-var.woff2) format('woff2'); }

:root {
  --sr-slate:#4e7f99; --sr-slate-d:#3a6178; --sr-ink:#22333d; --sr-ink-2:#49606d;
  --sr-bronze:#8f7c55; --sr-bronze-d:#75643f; --sr-cream:#f7f6f2; --sr-sand:#efece4;
  --sr-line:#dfe5e8; --sr-white:#ffffff; --sr-good:#2e7d54;
  --sr-r:14px; --sr-shadow:0 2px 14px rgba(34,51,61,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Figtree',system-ui,sans-serif; font-weight:400;
  color:var(--sr-ink); background:var(--sr-cream); line-height:1.6; font-size:16.5px; }
h1,h2,h3 { font-family:'Sora',system-ui,sans-serif; font-weight:700; line-height:1.25;
  color:var(--sr-ink); margin:0 0 .5em; }
h1 { font-size:clamp(1.7rem,3.6vw,2.5rem); }
h2 { font-size:clamp(1.35rem,2.6vw,1.8rem); }
h3 { font-size:1.08rem; font-weight:600; }
a { color:var(--sr-slate-d); }
img { max-width:100%; height:auto; }
picture { display:contents; } /* обёртка webp не должна ломать flex/размеры (урок iwell) */
.sr-wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

/* ── Шапка ── */
.sr-topline { background:var(--sr-ink); color:#cfdbe2; font-size:.82rem; }
.sr-topline .sr-wrap { display:flex; justify-content:space-between; gap:16px; padding:6px 20px; }
.sr-topline span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-head { background:var(--sr-white); border-bottom:1px solid var(--sr-line); }
.sr-head .sr-wrap { display:flex; align-items:center; gap:18px; padding:14px 20px; flex-wrap:wrap; }
.sr-brand { display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.sr-brand img { width:46px; height:46px; border-radius:10px; }
.sr-brand b { font-family:'Sora'; font-weight:700; font-size:1.35rem; color:var(--sr-ink); letter-spacing:.01em; }
.sr-brand b em { font-style:normal; color:var(--sr-slate); }
.sr-nav { display:flex; gap:4px; flex-wrap:wrap; }
.sr-nav a { text-decoration:none; color:var(--sr-ink-2); font-weight:600; font-size:.92rem;
  padding:8px 12px; border-radius:9px; }
.sr-nav a:hover, .sr-nav a.on { background:var(--sr-cream); color:var(--sr-slate-d); }

/* ── Волна-разделитель ── */
.sr-wave { display:block; width:100%; height:34px; }

/* ── Герой ── */
.sr-hero { background:linear-gradient(160deg,var(--sr-slate) 0%,var(--sr-slate-d) 100%); color:#fff; }
.sr-hero .sr-wrap { padding:52px 20px 44px; max-width:820px; text-align:center; }
.sr-hero h1 { color:#fff; }
.sr-hero p { color:#dce9f0; font-size:1.08rem; max-width:44em; margin:0 auto 1.4em; }
.sr-hero .sr-star-row { color:var(--sr-bronze); letter-spacing:.45em; font-size:1.05rem; margin-bottom:10px; }
.sr-cta { display:inline-block; text-decoration:none; font-weight:600; border-radius:11px;
  padding:12px 22px; margin:0 6px 8px; }
.sr-cta.main { background:var(--sr-bronze); color:#fff; }
.sr-cta.main:hover { background:var(--sr-bronze-d); }
.sr-cta.ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.sr-cta.ghost:hover { border-color:#fff; }
.sr-banner { display:block; width:100%; aspect-ratio:5/1; object-fit:cover; object-position:center 35%; }

/* ── Секции ── */
.sr-sec { padding:44px 0; }
.sr-sec.alt { background:var(--sr-white); }
.sr-sec-head { max-width:640px; margin-bottom:26px; }
.sr-sec-head p { color:var(--sr-ink-2); margin:0; }
.sr-kick { font-family:'Sora'; font-weight:600; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sr-bronze-d); margin-bottom:6px; }

/* ── Чузер-таблица ── */
.sr-choose { width:100%; border-collapse:separate; border-spacing:0; background:var(--sr-white);
  border:1px solid var(--sr-line); border-radius:var(--sr-r); overflow:hidden; box-shadow:var(--sr-shadow); }
.sr-choose th, .sr-choose td { padding:13px 16px; text-align:left; font-size:.93rem;
  border-bottom:1px solid var(--sr-line); vertical-align:top; }
.sr-choose thead th { background:var(--sr-ink); color:#fff; font-family:'Sora'; font-weight:600; font-size:.9rem; }
.sr-choose thead th:first-child { background:var(--sr-ink); color:#9fb3bf; font-weight:400; }
.sr-choose tbody tr:last-child th, .sr-choose tbody tr:last-child td { border-bottom:0; }
.sr-choose tbody th { color:var(--sr-ink-2); font-weight:600; font-size:.85rem; width:15%; }
.sr-choose a { font-weight:600; }
.sr-choose-scroll { overflow-x:auto; }
.sr-choose-scroll table { min-width:640px; }

/* ── Сетка карточек ── */
.sr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.sr-card { background:var(--sr-white); border:1px solid var(--sr-line); border-radius:var(--sr-r);
  box-shadow:var(--sr-shadow); display:flex; flex-direction:column; overflow:hidden; }
.sr-card-ph { height:210px; display:flex; align-items:center; justify-content:center;
  background:#fff; padding:14px; border-bottom:1px solid var(--sr-line); }
.sr-card-ph img { max-height:100%; width:auto; object-fit:contain; }
.sr-card-body { padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; gap:6px; }
.sr-chip { align-self:flex-start; background:var(--sr-sand); color:var(--sr-bronze-d);
  font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:99px; letter-spacing:.02em; }
.sr-card-title { margin:0; font-size:1rem; }
.sr-card-title a { color:var(--sr-ink); text-decoration:none; }
.sr-card-title a:hover { color:var(--sr-slate-d); }
.sr-rate { font-size:.84rem; color:var(--sr-ink-2); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sr-rate small { color:#7c8d97; }
.sr-rate--none { color:#7c8d97; font-size:.84rem; }
.sr-stars { position:relative; display:inline-block; width:86px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cg fill='%23d7dde1'%3E%3Cpath d='M10 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9L1.4 7.3l6-.7z'/%3E%3Cpath d='M32 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M54 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M76 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M98 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; background-size:86px 15px; }
.sr-stars-on { position:absolute; inset:0; overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cg fill='%238f7c55'%3E%3Cpath d='M10 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9L1.4 7.3l6-.7z'/%3E%3Cpath d='M32 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M54 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M76 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M98 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; background-size:86px 15px; }
.sr-card-short { margin:0; font-size:.87rem; color:var(--sr-ink-2); }
.sr-card-meta { margin-top:auto; padding-top:10px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; }
.sr-price { font-family:'Sora'; font-weight:700; font-size:1.2rem; color:var(--sr-ink); }
.sr-card-btns { display:flex; gap:8px; }
.sr-btn { display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  font-family:'Figtree'; font-weight:600; font-size:.9rem; border-radius:10px;
  padding:9px 15px; border:0; }
.sr-btn.buy { background:var(--sr-slate); color:#fff; }
.sr-btn.buy:hover { background:var(--sr-slate-d); }
.sr-btn.more { background:var(--sr-sand); color:var(--sr-ink); }
.sr-btn.more:hover { background:#e5e0d3; }

/* ── Полоса рейтингов ── */
.sr-numbers { background:var(--sr-ink); color:#fff; }
.sr-numbers .sr-wrap { padding:40px 20px; }
.sr-numbers h2 { color:#fff; }
.sr-numbers .sr-sec-head p { color:#b7c6cf; }
.sr-num-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.sr-num { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--sr-r); padding:18px 20px; }
.sr-num b { font-family:'Sora'; font-weight:700; font-size:1.7rem; color:var(--sr-bronze); display:block; }
.sr-num span { font-size:.88rem; color:#cfdbe2; }
.sr-num small { display:block; margin-top:6px; font-size:.76rem; color:#8fa3ae; }

/* ── PDP ── */
.sr-crumbs { font-size:.82rem; color:#7c8d97; padding:16px 0 0; }
.sr-crumbs a { color:var(--sr-ink-2); text-decoration:none; }
.sr-crumbs a:hover { text-decoration:underline; }
.sr-product { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:34px;
  padding:22px 0 44px; align-items:start; }
.sr-product-media { background:var(--sr-white); border:1px solid var(--sr-line);
  border-radius:var(--sr-r); padding:22px; display:flex; align-items:center; justify-content:center;
  position:sticky; top:16px; }
.sr-product-media img { max-height:440px; width:auto; object-fit:contain; }
.sr-product-info h1 { font-size:clamp(1.3rem,2.4vw,1.7rem); }
.sr-avail { font-size:.86rem; font-weight:600; color:var(--sr-good); }
.sr-avail.pre { color:var(--sr-bronze-d); }
.sr-buy-price { font-family:'Sora'; font-weight:700; font-size:1.9rem; margin:10px 0 2px; }
.sr-buy-note { font-size:.8rem; color:#7c8d97; margin:8px 0 0; max-width:34em; }
.sr-checked { font-size:.78rem; color:#7c8d97; }
.sr-buy-box { background:var(--sr-white); border:1px solid var(--sr-line); border-radius:var(--sr-r);
  padding:18px 20px; margin:16px 0 22px; box-shadow:var(--sr-shadow); }
.sr-btn.big { font-size:1rem; padding:12px 26px; }
.sr-intro { color:var(--sr-ink-2); }

/* Слои защиты — фирменный блок PDP */
.sr-layers { margin:10px 0 26px; }
.sr-layer { border-radius:var(--sr-r); padding:16px 20px 16px 58px; position:relative;
  border:1px solid var(--sr-line); background:var(--sr-white); }
.sr-layer + .sr-layer { margin-top:-6px; }
.sr-layer:nth-child(1) { background:#fdfcf9; margin-right:26px; z-index:3; position:relative; }
.sr-layer:nth-child(2) { background:#f3f6f8; margin-left:13px; margin-right:13px; z-index:2; }
.sr-layer:nth-child(3) { background:#eef2f4; margin-left:26px; z-index:1; }
.sr-layer i { position:absolute; left:18px; top:16px; font-style:normal; font-family:'Sora';
  font-weight:700; font-size:.85rem; width:26px; height:26px; border-radius:50%;
  background:var(--sr-slate); color:#fff; display:flex; align-items:center; justify-content:center; }
.sr-layer h3 { margin:0 0 4px; }
.sr-layer p { margin:0; font-size:.92rem; color:var(--sr-ink-2); }

/* Ночной тест + уход */
.sr-night { background:var(--sr-ink); color:#dce9f0; border-radius:var(--sr-r); padding:22px 26px; margin:0 0 22px; }
.sr-night h2 { color:#fff; font-size:1.15rem; margin-bottom:.4em; }
.sr-night p { margin:0; font-size:.94rem; }
.sr-night .sr-star-row { color:var(--sr-bronze); letter-spacing:.4em; font-size:.9rem; margin-bottom:8px; }
.sr-care { background:var(--sr-sand); border-radius:var(--sr-r); padding:20px 24px; margin-bottom:22px; }
.sr-care h2 { font-size:1.15rem; }
.sr-care p { margin:0; font-size:.94rem; color:var(--sr-ink-2); }
.sr-care a { font-weight:600; }

/* ── Прозa сервисных страниц ── */
.sr-prose { max-width:46em; padding:10px 0 46px; }
.sr-prose h1 { margin-top:26px; }
.sr-prose h2 { margin-top:1.6em; }
.sr-prose li { margin:.35em 0; }
.sr-prose table { border-collapse:collapse; width:100%; margin:1em 0; font-size:.92rem; }
.sr-prose th, .sr-prose td { border:1px solid var(--sr-line); padding:9px 12px; text-align:left; }
.sr-prose th { background:var(--sr-white); font-family:'Sora'; font-weight:600; font-size:.85rem; }
.sr-addr { font-style:normal; background:var(--sr-white); border:1px solid var(--sr-line);
  border-left:3px solid var(--sr-slate); border-radius:var(--sr-r); padding:16px 20px;
  margin:1em 0; line-height:1.65; }

/* ── SEO-эссе главной ── */
.sr-essay { max-width:52em; }
.sr-essay h2 { margin-top:0; }
.sr-essay h3 { margin-top:1.5em; font-size:1.08rem; }
.sr-essay p { color:var(--sr-ink-2); }
.sr-essay p b { color:var(--sr-ink); }

/* ── Футер ── */
.sr-foot { background:var(--sr-ink); color:#b7c6cf; margin-top:30px; }
.sr-foot .sr-wrap { padding:38px 20px 30px; display:grid;
  grid-template-columns:2fr 1fr 1fr; gap:30px; }
.sr-foot h3 { color:#fff; font-size:.95rem; }
.sr-foot a { color:#cfdbe2; text-decoration:none; display:block; padding:3px 0; font-size:.9rem; }
.sr-foot a:hover { color:#fff; }
.sr-foot p { font-size:.88rem; margin:.4em 0; }
.sr-foot-bottom { border-top:1px solid rgba(255,255,255,.12); }
.sr-foot-bottom .sr-wrap { display:block; padding:14px 20px; font-size:.8rem; color:#8fa3ae; }

/* ── Мобайл ── */
@media (max-width:860px) {
  .sr-product { grid-template-columns:1fr; }
  .sr-product-media { position:static; }
  .sr-foot .sr-wrap { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .sr-topline span:last-child { display:none; }
  .sr-layer:nth-child(1) { margin-right:0; }
  .sr-layer:nth-child(2) { margin-left:0; margin-right:0; }
  .sr-layer:nth-child(3) { margin-left:0; }
  .sr-foot .sr-wrap { grid-template-columns:1fr; }
}