:root{--navy:#05152e;--card:#0b2852;--line:#225185;--blue:#0d82f7;--cyan:#45bbff;--green:#31d889;--white:#f5f8ff;--muted:#9cb1ce;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:Inter,Arial,sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}img{display:block;max-width:100%;height:auto}.grid-bg{background-image:linear-gradient(rgba(66,184,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(66,184,255,.045) 1px,transparent 1px);background-size:52px 52px}.section{width:min(var(--max),calc(100% - 56px));margin:auto;padding:48px 0}.header{height:82px;padding:0 max(28px,calc((100vw - var(--max))/2 + 28px));display:flex;align-items:center;gap:32px;border-bottom:1px solid rgba(112,166,226,.16);position:sticky;top:0;z-index:50;background:rgba(5,21,46,.88);backdrop-filter:blur(20px)}.brand img{width:145px;height:48px;object-fit:contain}.phone{font-weight:900}.menu-button{display:none}.eyebrow{display:block;color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.hero-punch{margin:12px 0 0;max-width:600px;font-size:clamp(17px,2vw,22px);font-weight:800;line-height:1.32;letter-spacing:-.01em;color:#eaf2ff}
.hero-punch b{color:#fff}
.hero-punch em{font-style:normal;color:var(--cyan)}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:16px 20px;color:#fff;background:transparent;font-weight:800;cursor:pointer;transition:.25s}.button:hover{transform:translateY(-2px)}.button.primary{border-color:transparent;background:linear-gradient(110deg,#087cff,#31a9ff);box-shadow:0 15px 40px rgba(7,124,255,.25)}.chem-hero{min-height:min(calc(100vh - 82px),760px);padding:70px max(28px,calc((100vw - var(--max))/2 + 28px));display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px}
/* Между чипами и плашкой статистики было ~117px пустоты — большую часть
   даёт нижний паддинг героя, унаследованный от версии с более длинным
   абзацем. Отдельное правило той же специфичности и позже по файлу почему-то
   не перебивало исходное (воспроизводимо, не нашёл причины) — !important
   не по любви к нему, а потому что каскад here вёл себя не по спеке. */
.chem-hero{padding-bottom:24px!important}.hero-copy h1{font-size:clamp(52px,6.3vw,91px);line-height:.93;letter-spacing:-.06em;margin:20px 0}.hero-copy h1 em{color:rgba(111,196,255,.6);font-style:normal}.hero-copy>p{max-width:620px;color:var(--muted);font-size:19px}.hero-actions{display:flex;gap:12px;margin:32px 0}.hero-trust{display:flex;gap:8px;flex-wrap:wrap}.hero-trust span{padding:7px 10px;border:1px solid #285587;border-radius:999px;color:#9eb3cf;font-size:10px}.hero-visual{position:relative;min-height:620px;display:grid;place-items:center}.hero-visual>img{position:absolute;z-index:1;right:-8%;bottom:0;width:90%;height:74%;object-fit:contain;filter:drop-shadow(0 35px 50px rgba(0,0,0,.45))}.hero-ring{position:absolute;width:480px;height:480px;border:1px solid rgba(69,187,255,.25);border-radius:50%;box-shadow:inset 0 0 100px rgba(0,122,255,.08),0 0 120px rgba(0,122,255,.08)}.hero-ring:before,.hero-ring:after{content:"";position:absolute;inset:15%;border:inherit;border-radius:inherit}.hero-ring:after{inset:31%}.hero-pack,.packshot{position:absolute;z-index:2;width:145px;height:205px;padding:32px 16px 16px;border-radius:16px 16px 24px 24px;color:#fff;box-shadow:0 28px 45px rgba(0,0,0,.34);transform:rotate(-5deg);overflow:hidden}.hero-pack:before,.packshot:before{content:"";position:absolute;left:29px;top:-4px;width:72px;height:28px;border:9px solid rgba(255,255,255,.24);border-bottom:0;border-radius:12px 12px 0 0}.hero-pack:after,.packshot:after{content:"";position:absolute;inset:66px 12px 15px;border-radius:12px;background:rgba(245,249,255,.92);box-shadow:inset 0 0 0 1px rgba(10,51,99,.12)}.hero-pack span,.hero-pack b,.hero-pack small{position:relative;z-index:1;display:block}.hero-pack span{font-size:10px;font-weight:900;letter-spacing:.12em}.hero-pack b{margin-top:40px;color:#09234a;font-size:19px;line-height:1}.hero-pack small{margin-top:24px;color:#2587df;font-weight:900}.pack-blue{left:7%;bottom:18%;background:linear-gradient(150deg,#073c80,#087df2)}.pack-cyan{right:2%;top:14%;background:linear-gradient(150deg,#06678a,#25c9e9);transform:rotate(7deg) scale(.83)}.bubble{position:absolute;z-index:3;border-radius:50%;background:radial-gradient(circle at 30% 25%,#9beaff,#1da9f5 45%,#0566d3);box-shadow:inset -10px -12px 20px rgba(0,42,117,.25),0 18px 35px rgba(0,85,190,.22);animation:bubble 5s ease-in-out infinite}.bubble-a{width:70px;height:70px;left:3%;top:22%}.bubble-b{width:34px;height:34px;right:12%;bottom:15%;animation-delay:-2s}.bubble-c{width:18px;height:18px;left:34%;top:11%;animation-delay:-3s}.chem-stats{padding:24px 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:24px;background:#09234a}.chem-stats article{display:flex;gap:16px;align-items:center;padding:16px 24px;border-right:1px solid var(--line)}.chem-stats article:last-child{border:0}.chem-stats strong{font-size:44px;line-height:1}.chem-stats strong small{font-size:18px;color:var(--cyan)}.chem-stats span{color:#9cb1ce;font-size:12px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:24px}.section-heading h2,.usage h2,.quality h2{margin:11px 0 0;font-size:clamp(42px,5vw,67px);line-height:.98;letter-spacing:-.05em}.section-heading>p{max-width:420px;color:var(--muted)}.filter-row{display:flex;gap:8px;overflow:auto;margin-bottom:20px;padding-bottom:5px;scrollbar-width:none}.filter{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:#081f43;color:#a8bdd9;font-weight:800;cursor:pointer}.filter span{margin-left:6px;color:var(--cyan)}.filter.active{background:#f4f8ff;color:#09234a;border-color:#f4f8ff}.filter.active span{color:#087ff2}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product-card{display:flex;min-width:0;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,#0c2a56,#071c3c);overflow:hidden;transition:.35s}.product-card:hover{transform:translateY(-5px);border-color:#3b8bdd;box-shadow:0 25px 55px rgba(0,0,0,.28)}.product-card.selected{border-color:#2ccf8a;box-shadow:0 0 0 1px #2ccf8a}.product-card[hidden]{display:none}.product-media{position:relative;height:275px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#eaf7ff,#b9d6ed 62%,#91b6d5);overflow:hidden}.product-media:after{content:"";position:absolute;left:8%;right:8%;bottom:-34%;height:62%;border:1px solid rgba(0,109,215,.35);border-radius:50%}.packshot{position:relative;width:148px;height:210px;transform:rotate(-3deg);background:linear-gradient(145deg,var(--pack-dark),var(--pack-color));transition:.45s}.product-card:hover .packshot{transform:rotate(2deg) scale(1.04)}.pack-label{position:absolute;z-index:2;inset:70px 13px 15px;padding:12px;color:#09234a}.pack-label span,.pack-label b,.pack-label small{display:block}.pack-label span{font-size:9px;font-weight:900;letter-spacing:.12em}.pack-label b{margin-top:8px;font-size:16px;line-height:1}.pack-label small{position:absolute;bottom:10px;color:var(--pack-color);font-weight:900}.product-chip{position:absolute;z-index:3;left:14px;top:14px;padding:7px 9px;border-radius:999px;background:rgba(5,24,52,.88);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.details-button{position:absolute;z-index:3;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#09234a;font-size:22px;cursor:pointer;transition:.25s}.details-button:hover{transform:rotate(90deg)}.product-body{display:flex;flex:1;flex-direction:column;padding:20px}.product-category{color:var(--cyan);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.15em}.product-body h3{font-size:24px;line-height:1.05;margin:7px 0}.product-body p{min-height:43px;margin:0;color:#9bb0cc;font-size:12px}.product-meta{display:flex;gap:7px;margin:16px 0}.product-meta span{padding:5px 8px;border:1px solid #285789;border-radius:999px;color:#b3c5dc;font-size:9px}.product-buy{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #244c7a}.product-buy small,.product-buy strong{display:block}.product-buy small{color:#7892b3;font-size:9px}.product-buy strong{font-size:17px}.add-product{border:0;border-radius:999px;padding:10px 12px;background:#0c80f5;color:#fff;font-weight:800;cursor:pointer}.product-card.selected .add-product{background:#26c987}.usage{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.usage-copy>p{color:var(--muted);font-size:17px}.usage-copy ul{padding:0;list-style:none}.usage-copy li{margin:12px 0;color:#b4c5da}.usage-copy li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:12px;border:1px solid var(--green);border-radius:50%;color:var(--green)}.usage-calculator{padding:32px;border:1px solid #2b5d93;border-radius:24px;background:linear-gradient(150deg,#0e3061,#081f43)}.usage-calculator label{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:24px;color:#b5c6db}.usage-calculator output{color:var(--cyan);font-size:24px;font-weight:900}.usage-calculator input{grid-column:1/-1;width:100%;accent-color:#168af8}.usage-result{padding:24px;margin:4px 0 20px;border-radius:16px;background:#061a38}.usage-result span,.usage-result small{display:block;color:#89a1c0;font-size:11px}.usage-result strong{display:block;margin:4px 0;font-size:46px;letter-spacing:-.05em}.usage-calculator .button{width:100%}.quality{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.quality-photo{position:relative;min-height:530px;border:1px solid var(--line);border-radius:24px;overflow:hidden}.quality-photo img{width:100%;height:530px;object-fit:cover}.quality-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,15,34,.75),transparent 55%)}.quality-photo span{position:absolute;z-index:2;left:22px;bottom:20px;font-weight:800}.quality>div>p{color:var(--muted);font-size:17px}.quality-points{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.quality-points article{padding:16px;border:1px solid var(--line);border-radius:12px}.quality-points b,.quality-points span{display:block}.quality-points b{color:var(--cyan)}.quality-points span{font-size:10px}.selection-bar{position:fixed;z-index:90;left:50%;bottom:18px;transform:translateX(-50%);width:min(780px,calc(100% - 28px));display:grid;grid-template-columns:auto 1fr auto auto auto;gap:20px;align-items:center;padding:12px 12px 12px 20px;border:1px solid #3486d4;border-radius:16px;background:rgba(6,29,62,.95);box-shadow:0 25px 80px rgba(0,0,0,.5);backdrop-filter:blur(18px)}.selection-bar[hidden]{display:none}.selection-bar span{display:block;color:#87a0c0;font-size:9px}.selection-names{overflow:hidden;color:#b7c8de;font-size:11px;white-space:nowrap;text-overflow:ellipsis}.selection-bar .button{padding:11px 16px;font-size:11px}.selection-clear{border:0;background:transparent;color:#9fb3cf;font-size:24px;cursor:pointer}dialog{width:min(850px,calc(100% - 32px));max-width:none;padding:32px;border:1px solid #32659b;border-radius:24px;background:#0a2853;color:#fff;box-shadow:0 35px 110px #000}dialog::backdrop{background:rgba(0,8,20,.8);backdrop-filter:blur(7px)}.dialog-close{position:absolute;z-index:3;right:17px;top:14px;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.product-dialog{display:none;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center}.product-dialog[open]{display:grid}.dialog-pack{min-height:410px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle,#eaf7ff,#a9cbe4)}.dialog-pack .packshot{position:relative}.product-dialog h2,.order-dialog h2{font-size:43px;line-height:1;margin:12px 0}.product-dialog p,.order-dialog>p{color:var(--muted)}.product-dialog dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.product-dialog dl div{padding:12px;border:1px solid #315d91;border-radius:12px}.product-dialog dt{color:#7993b4;font-size:9px}.product-dialog dd{margin:3px 0 0;font-weight:800}.order-dialog{width:min(560px,calc(100% - 32px))}.order-list{margin:16px 0;padding:10px 12px;border:1px solid #315d91;border-radius:12px;color:#b6c8de;font-size:11px}.order-list:empty{display:none}form{display:grid;gap:12px}form[hidden]{display:none}form label{color:#a9bdd6;font-size:11px}form input:not([type=checkbox]){display:block;width:100%;margin-top:5px;padding:12px;border:1px solid #315d91;border-radius:12px;background:#061a38;color:#fff;outline:none}form input:focus{border-color:#168cf8}.consent{display:flex;gap:8px;align-items:center}.success{text-align:center;padding:32px 0}.success strong{color:var(--green);font-size:26px}.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}@keyframes bubble{50%{transform:translateY(-16px) scale(.94)}}@media(max-width:980px){.chem-hero{grid-template-columns:1fr;padding-top:110px}.hero-visual{min-height:520px}.chem-stats{grid-template-columns:1fr 1fr}.chem-stats article:nth-child(2){border-right:0}.chem-stats article:nth-child(-n+2){border-bottom:1px solid var(--line)}.product-grid{grid-template-columns:1fr 1fr}.usage,.quality{grid-template-columns:1fr;gap:32px}.global-footer{} }.menu-button{background:transparent;border:0;width:40px;height:40px}.menu-button span{display:block;height:2px;background:#fff;margin:7px}@media(max-width:720px){.section{width:min(100% - 36px,var(--max));padding:32px 0}.chem-hero{padding:70px 16px 32px;min-height:auto}.hero-copy h1{font-size:48px}.hero-copy>p{font-size:16px}.hero-actions{flex-direction:column}.hero-visual{min-height:450px}.hero-visual>img{width:110%;right:-12%}.hero-ring{width:330px;height:330px}.hero-pack{transform:scale(.72) rotate(-5deg)}.pack-blue{left:-5%;bottom:12%}.pack-cyan{right:-10%;top:7%;transform:scale(.62) rotate(7deg)}.chem-stats{width:calc(100% - 28px);padding:8px}.chem-stats article{padding:16px 11px}.chem-stats strong{font-size:34px}.chem-stats span{font-size:9px}.section-heading{display:block}.product-grid{grid-template-columns:1fr}.product-body p{min-height:0}.quality-photo,.quality-photo img{height:390px;min-height:390px}.quality-points{grid-template-columns:1fr}.selection-bar{grid-template-columns:1fr auto}.selection-names{display:none}.selection-bar .button{grid-column:1/-1}.selection-clear{position:absolute;right:8px;top:4px}.product-dialog[open]{display:block}.dialog-pack{min-height:270px;margin-bottom:24px}.product-dialog dl{grid-template-columns:1fr}.product-dialog h2,.order-dialog h2{font-size:35px}.header{height:70px;padding:0 16px}.header .phone{display:none}.brand img{width:125px}}

/* ============================================================
   ШКАЛА ОТСТУПОВ (21.09.2026)
   В магазине рядом стояли 13, 14, 15, 17, 18, 22, 26, 28, 34, 35 px —
   каждое число когда-то подбиралось на глаз под свой блок, а вместе
   они читались как сбитый ритм: одинаковые по смыслу плашки отходили
   друг от друга по-разному. Свели всё к одной шкале
   8 / 12 / 16 / 20 / 24 / 32 / 40 / 48, выбирая ближайший шаг, а при
   равном расстоянии — меньший (страница должна стать плотнее, а не
   воздушнее). Мельче 12 px не трогали: там внутренности чипов, меток
   и счётчиков, где шаг в 2 px — это уже размер элемента, а не ритм.
   Радиусы свели к трём: 12 (поля, кнопки-квадраты, миниатюры),
   16 (карточки и плашки), 24 (крупные панели), 999px — пилюли.
   Крупные промежутки: 48 px между секциями на десктопе, 32 px на
   телефоне. Отступы сверху под прибитую шапку (96…122 px) к шкале не
   приводили — это не ритм, а высота самой шапки.
   ============================================================ */

/* ============================================================
   chem-shop · КАТАЛОГ КАК В МАГАЗИНЕ (86 позиций Shine Systems)
   Дописано в конец файла: правила ниже перебивают старые блоки
   .product-card / .product-media / .dialog-pack просто порядком
   следования. Переменные — из :root страницы, локальные токены
   живут на самой секции.
   ============================================================ */
.catalog-section{
  /* Светлая плашка под снимок. Прайсовые PNG — вырезы на прозрачном фоне,
     и объекты в них разные: белые канистры и чёрные курки-распылители.
     Прямо на navy первые светятся ореолом, вторые пропадают. Плашка
     возвращает студийный фон, на котором их снимали, — края видно всегда. */
  --plate:#e8f0f9;
  --plate-edge:#c7dbef;
  --plate-ink:#0a2547;     /* 13:1 к --plate: артикул на плашке читаем */
  --plate-soft:#4a688c;    /* 5:1 к --plate: вторичные подписи */
  --plate-grid:rgba(10,60,120,.10);
  --plate-size:104px;      /* сторона плашки; снимок внутри всегда ровно 80×80 */
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Поиск и счётчик ---------- */
.catalog-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.catalog-search{position:relative;flex:1 1 320px;max-width:440px;display:flex;align-items:center}
.catalog-search-ic{position:absolute;left:15px;width:18px;height:18px;fill:none;stroke:#7f9bc0;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
/* 16px обязателен: Safari на iPhone увеличивает всю страницу, когда*/
/* касаются поля с меньшим шрифтом, и вернуть масштаб человек уже не может. */
#catalog-q{width:100%;padding:12px 40px;border:1px solid var(--line);border-radius:12px;background:#081f43;color:#fff;font-size:16px;outline:none}
#catalog-q::placeholder{color:#7f97b8}
#catalog-q:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(69,187,255,.18)}
#catalog-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.catalog-search-clear{position:absolute;right:9px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#a7bcd8;font-size:20px;line-height:1;cursor:pointer}
.catalog-search-clear:hover{background:#123a6d;color:#fff}
.catalog-search-clear[hidden]{display:none}
.catalog-count{margin:0;color:#93aac9;font-size:12.5px}

/* Ряды чипов над сеткой заменены панелью слева — её правила в конце файла,
   в блоке chem22. */

/* ---------- Сетка ----------
   auto-fill вместо жёстких трёх колонок: 3 на 1440, 2 на 768, 1 на 390 —
   без отдельных медиазапросов. min(340px,100%) страхует экраны уже 340 px. */
#product-grid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px}

/* ---------- Карточка ---------- */
.pc{
  display:grid;grid-template-columns:var(--plate-size) minmax(0,1fr);
  grid-template-areas:"plate body" "acts acts";
  gap:12px 16px;padding:16px;border-radius:16px;align-content:start;
  background:linear-gradient(160deg,#0c2a56,#081f42);
  border:1px solid var(--line);
  /* Ровная высота: 86 карточек с «пляшущим» низом читаются как каша.
     Она же нужна content-visibility ниже, чтобы прокрутку не дёргало. */
  min-height:198px;
  /* Главная экономия на телефоне: браузер не считает раскладку и не красит
     карточки за экраном. 86 штук — как раз тот случай, когда это заметно. */
  content-visibility:auto;contain-intrinsic-size:auto 198px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
  /* Вся карточка теперь тоже ведёт на товар (script.js, onGridClick) —
     курсор должен обещать это до клика, а не только над «Подробнее». */
  cursor:pointer
}
/* .pc задаёт display:grid и перебивает старое .product-card[hidden] —
   возвращаем скрытие явно, иначе фильтр перестанет прятать карточки. */
.pc[hidden]{display:none}
.pc:hover{transform:translateY(-2px);border-color:#3b8bdd;box-shadow:0 14px 32px -12px rgba(0,0,0,.55)}

/* ---------- Плашка со снимком 80×80 ---------- */
.pc-plate{
  grid-area:plate;position:relative;width:var(--plate-size);height:var(--plate-size);
  display:grid;place-items:center;border-radius:12px;overflow:hidden;
  /* Сетка 8 px — та же графика, что у .grid-bg страницы. Она задаёт масштаб:
     рядом с ней снимок 80 px читается как «столько и есть», а не как
     уменьшенная большая картинка. */
  background:
    linear-gradient(var(--plate-grid) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(90deg,var(--plate-grid) 1px,transparent 1px) 0 0/8px 8px,
    radial-gradient(circle at 50% 28%,#fff,var(--plate) 68%,var(--plate-edge));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 6px 16px -9px rgba(0,0,0,.6)
}
.pc-plate img{
  /* Ровно 80×80 и ни пикселем больше: источник — растр 80×80 из прайса,
     любое увеличение даёт мыло. 12 px воздуха до края плашки — это поле
     кадра, из-за него снимок выглядит поставленным, а не обрезанным. */
  width:80px;height:80px;object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(10,40,80,.22))
}
/* Нет фото — вместо битой картинки индексная плашка: артикул читаемо,
   буква назначения фоном. Геометрия та же, ряд не рвётся. */
.pc-plate.is-blank{background:
  linear-gradient(var(--plate-grid) 1px,transparent 1px) 0 0/8px 8px,
  linear-gradient(90deg,var(--plate-grid) 1px,transparent 1px) 0 0/8px 8px,
  linear-gradient(155deg,#eff5fc,#d5e4f2)}
.pc-blank-letter{position:absolute;font-size:62px;font-weight:900;line-height:1;letter-spacing:-.06em;color:rgba(10,60,120,.14);user-select:none}
.pc-blank-sku{position:relative;padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.75);color:var(--plate-ink);font-size:12px;font-weight:900}

/* ---------- Текст карточки ---------- */
.pc-body{grid-area:body;min-width:0}
.pc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc-kind{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
/* Новинка помечена, потому что у неё в прайсе ещё не заведена цена: менеджер
   должен видеть, что по ней нужен отдельный расчёт. */
.pc-new{padding:2px 7px;border-radius:6px;background:rgba(255,216,115,.16);color:#ffd873;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.pc-brand{margin-left:auto;flex:0 0 auto;color:#8ba2c2;font-size:10px;font-weight:800;letter-spacing:.05em}
.pc-title{margin:7px 0 5px;font-size:17px;line-height:1.2;letter-spacing:-.01em}
/* ЗВЁЗДЫ РЕЙТИНГА (17.09.2026, дизайн — агент-дизайнер + скилл make-interfaces-feel-better).
   Одна векторная звезда на весь магазин: плитка, карточки подборок, страница
   товара, форма отзыва, экран «Заказ принят». Не шрифтовой «★» — он разный в
   Windows, macOS и Android. Закрашенная — золотой градиент, пустая — контур с
   заливкой 20%, одного размера, чтобы при закраске ничего не прыгало. */
:root{
  --gz-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 1.6 21 21'%3E%3Cpath d='M12.78 4.4L14.94 8.93 19.92 9.59Q21.7 9.83 20.4 11.07L16.76 14.52 17.67 19.46Q18 21.23 16.42 20.37L12 17.98 7.58 20.37Q6 21.23 6.33 19.46L7.24 14.52 3.6 11.07Q2.3 9.83 4.08 9.59L9.06 8.93 11.22 4.4Q12 2.78 12.78 4.4Z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gz-star-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 1.6 21 21'%3E%3Cpath d='M12.78 4.4L14.94 8.93 19.92 9.59Q21.7 9.83 20.4 11.07L16.76 14.52 17.67 19.46Q18 21.23 16.42 20.37L12 17.98 7.58 20.37Q6 21.23 6.33 19.46L7.24 14.52 3.6 11.07Q2.3 9.83 4.08 9.59L9.06 8.93 11.22 4.4Q12 2.78 12.78 4.4Z' fill-opacity='.2' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gz-gold:linear-gradient(180deg,#ffe597,#ffc940 48%,#f0a31c);
  --gz-star-off:rgba(214,228,248,.5)}

/* Строка из пяти звёзд: --s звезда, --g шаг, --r средняя 0…5. Дробная
   закраска: снизу пустые, сверху золотые, золотой слой обрезан по --r×20%. */
.pc-stars,.pdp-stars{--s:12px;--g:2px;position:relative;display:inline-block;flex:none;
  width:calc((var(--s) + var(--g)) * 5);height:var(--s);margin:0 calc(var(--g) / -2);
  vertical-align:-1px;overflow:hidden;font-size:0;color:transparent;letter-spacing:0;background:none}
.pc-stars::before,.pc-stars::after,.pdp-stars::before,.pdp-stars::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:var(--gz-star-off);-webkit-mask-image:var(--gz-star-o);mask-image:var(--gz-star-o);
  -webkit-mask-size:calc(var(--s) + var(--g)) var(--s);mask-size:calc(var(--s) + var(--g)) var(--s);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.pc-stars::after,.pdp-stars::after{width:calc(var(--r,0) * 20%);background:var(--gz-gold);
  -webkit-mask-image:var(--gz-star);mask-image:var(--gz-star)}
/* Страница, собранная до этой правки (у .pdp-stars нет --r): старые символы,
   чтобы у товара с оценкой не показать пять пустых звёзд. */
.pdp-stars:not([style*="--r"]){width:auto;height:auto;margin:0;overflow:visible;font-size:inherit;color:#ffc400;letter-spacing:.1em}
.pdp-stars:not([style*="--r"])::before,.pdp-stars:not([style*="--r"])::after{content:none}

/* Строка оценки под названием — в плитке витрины и в карточках подборок.
   Не на снимке: владелец 17.09.2026 — «чтобы карточку товара не закрывала».
   Строка есть у каждой карточки (без оценок — «нет отзывов»), поэтому высота
   у всех одинаковая и ряды не разъезжаются. */
.pc-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 7px;min-height:16px;
  color:#c9d8ee;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
  text-decoration:none;white-space:nowrap}
.pc-rate .pc-stars{--s:13px}
.pc-rate b{color:#fff;font-weight:700;font-size:12.5px}
.pc-rate-n{color:#9fb6d6;font-weight:500}
a.pc-rate:hover b{color:#ffd873}
a.pc-rate:focus-visible{outline:2px solid #45bbff;outline-offset:3px;border-radius:4px}
/* Нет оценок — тише: контур звёзд бледнее, подпись мельче. */
.pc-rate.is-empty{color:#8fa6c6}
.pc-rate.is-empty .pc-rate-n{font-size:11.5px;color:#8fa6c6}
.pc-rate.is-empty .pc-stars{--gz-star-off:rgba(214,228,248,.42)}
.gzp-card .pc-rate{margin:5px 0 2px}
/* Телефон (карточка около 165 px): все пять звёзд, чуть мельче. */
@media (max-width:640px){
  .pc-rate{gap:5px;font-size:11px}
  .pc-rate .pc-stars{--s:11px;--g:1.5px}
  .pc-rate b{font-size:11.5px}
}

/* Звёзды-кнопки: строка под названием, форма отзыва, экран «Заказ принят».
   Наведение закрашивает до курсора: золото проявляется (прозрачность и
   масштаб 0,5 → 1), звезда под курсором чуть больше, за ней мягкое золотое
   свечение; нажатие — 0,9; выбранная один раз «подпрыгивает». Наведение —
   только при мыши, чтобы на телефоне звезда не залипала. */
.star-pick button,.co-rate-stars button{--s:18px;--k:1;position:relative;width:calc(var(--s) + 12px);height:calc(var(--s) + 12px);
  padding:0;border:0;border-radius:999px;cursor:pointer;font-size:0;line-height:0;color:transparent;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background:radial-gradient(closest-side,rgba(255,196,0,.3),rgba(255,196,0,0)) 50% 50%/0 0 no-repeat;
  transition:background-size .25s cubic-bezier(.23,1,.32,1)}
.star-pick button::before,.star-pick button::after,.co-rate-stars button::before,.co-rate-stars button::after{content:"";
  position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:var(--gz-star-off);-webkit-mask-image:var(--gz-star-o);mask-image:var(--gz-star-o);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transform:scale(var(--k));transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .15s ease-out}
.star-pick button::after,.co-rate-stars button::after{background:var(--gz-gold);
  -webkit-mask-image:var(--gz-star);mask-image:var(--gz-star);opacity:0;transform:scale(calc(var(--k) * .5))}
.star-pick button.is-on::after,.co-rate-stars button.is-on::after{opacity:1;transform:scale(var(--k))}
@media (hover:hover) and (pointer:fine){
  .star-pick button:hover,.co-rate-stars button:hover{--k:1.18;background-size:100% 100%}}
.star-pick button:active,.co-rate-stars button:active{--k:.9}
.star-pick button:focus-visible,.co-rate-stars button:focus-visible{outline:2px solid #45bbff;outline-offset:0;background-size:100% 100%}
.star-pick button[aria-pressed="true"]::after,.co-rate-stars button[aria-pressed="true"]::after{animation:gz-star-pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes gz-star-pop{0%{transform:scale(.6)}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  .star-pick button,.co-rate-stars button,.star-pick button::before,.star-pick button::after,
  .co-rate-stars button::before,.co-rate-stars button::after{transition:none;animation:none}
  .star-pick button,.co-rate-stars button{--k:1 !important}
}
/* Оценка с Яндекса: подпись источника в той же плашке, через тонкую черту —
   чужие отзывы не должны читаться как отзывы нашего магазина. */
.pc-rate-src{margin-left:2px;padding-left:6px;border-left:1px solid rgba(201,216,238,.35);color:#c9d8ee;font-weight:600;letter-spacing:.2px}
.pc-lead{margin:0;color:#a8bcd8;font-size:12.5px;line-height:1.45;
  /* Описания приходят разной длины. Обрезаем до двух строк, чтобы ряд стоял
     ровно; полный текст живёт в карточке товара, ничего не теряется. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* У «бедных» позиций (микрофибра, инструмент) нет ни pH, ни разбавления —
   ряд чипов почти пустой. Отдаём освободившуюся строку описанию. */
.pc.is-lean .pc-lead{-webkit-line-clamp:3}
.pc-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc-specs span{padding:4px 8px;border:1px solid #2a5b8f;border-radius:8px;color:#bacbe0;font-size:11px;white-space:nowrap}
/* Артикул — единственный чип, который есть у всех: по нему заказывают,
   по нему же ищут. Поэтому он выделен и стоит первым. */
.pc-specs .is-sku{border-color:rgba(69,187,255,.35);background:rgba(69,187,255,.12);color:#c7e6ff;font-weight:800}
/* «Нет в наличии» в плитке (21.09.2026, script.js): отметку ставит бренд в
   кабинете, и покупатель должен прочитать её до того, как нажмёт «В корзину».
   Пометки «есть» в плитке нет намеренно — зелёная строка у каждой карточки
   подряд ничего не сообщает; состояние целиком видно на странице товара. */
.pc-oos{display:flex;align-items:center;gap:6px;margin:8px 0 0;color:#ff9f86;font-size:11.5px;font-weight:700}
.pc-oos::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
/* «Отгрузка от N шт» (21.09.2026, script.js): условие отгрузки бренда, и
   читает его покупатель там же, где «нет в наличии», — до нажатия на
   «В заказ». Тёплый жёлтый, а не красный: это не отказ, а правило. */
.pc-minlot{margin:8px 0 0;color:#ffd873;font-size:11.5px;font-weight:700}
/* Доставка в регион покупателя (30.09.2026, marketplace/region.js).
   Стоит в том же стеке условий и первой: «могу ли я это взять» важнее,
   чем «сколько штук» и «есть ли на складе». Товар с пометкой «не везут»
   глушит две строки ниже — script.js их просто не рисует.

   ЦВЕТ. «Не везут» — тот же коралл, что у «нет в наличии»: смысл один,
   взять нельзя, а два разных красных рядом читались бы как случайность.
   Различает их знак: у наличия залитая точка, у региона перечёркнутый
   круг. Это работает и в чёрно-белой распечатке КП, и у людей с
   нарушением цветовосприятия.

   «Доставка не указана» — приглушённо-синее, а не жёлтое. В первые
   недели это состояние будет почти у всего каталога, пока бренды не
   заполнят регионы; жёлтая строка на каждой второй плитке превратила бы
   каталог в аварийное табло и обесценила бы предупреждение по соседству. */
.pc-geo{display:flex;align-items:center;gap:6px;margin:8px 0 0;
  font-size:11.5px;font-weight:700}
.pc-geo::before{content:'⊘';flex:0 0 auto;font-weight:400;line-height:1}
.pc-geo.is-no{color:#ff9f86}
.pc-geo.is-unknown{color:#9fbadb;font-weight:600}
.pc-geo.is-unknown::before{content:'○'}
/* Цена в карточке. Оптовая крупно, розничная зачёркнутой рядом — та же
   логика, что на странице товара. Цифры табличные: в сетке из трёх колонок
   разнобой по ширине цифр заметен сразу. */
.pc-price{display:flex;align-items:baseline;gap:9px;margin-top:11px;font-variant-numeric:tabular-nums}
/* nowrap: у позиций дороже ста тысяч знак рубля срывался на вторую строку,
   и цена читалась как «237 578» отдельно и «₽» отдельно. */
.pc-price b{font-size:19px;font-weight:900;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.pc-price s{color:#8ba2c2;font-size:13px;white-space:nowrap}
/* Цена за литр или килограмм. Стоит прямо под ценой канистры, потому что
   сравнивают прайсы именно по ней: расход у мойки считается в миллилитрах
   на машину. Мельче и приглушённее основной цены — это уточнение, а не
   вторая цена, и путать их нельзя. */
.pc-unit{color:#9fbadb;font-size:12px;font-weight:800;font-style:normal;white-space:nowrap}

/* ---------- Действия ---------- */
.pc-acts{grid-area:acts;display:flex;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid #23497a}
/* «Подробнее» теперь ссылка на страницу товара, а не кнопка модалки —
   поэтому нужны inline-flex и выравнивание: у <a> нет своей высоты. */
.pc-more{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0a2450;color:#dce7f7;font-size:12px;font-weight:800;cursor:pointer}
.pc-more:hover{border-color:var(--cyan);color:#fff}
.pc-add{flex:1 1 auto;padding:10px 12px;border:0;border-radius:12px;background:#0c80f5;color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.pc-add:hover{background:#2b95ff}
/* «В запросе» — тёмный текст на зелёном: белый на #31d98a даёт 2:1 и
   не проходит по контрасту, хотя выглядит бодро. */
.pc.selected .pc-add{background:var(--green);color:#04281a}

/* ---------- Пустой результат и «показать ещё» ---------- */
.catalog-empty{margin:24px 0 0;padding:24px;border:1px dashed #2c5c92;border-radius:16px;color:#b6c8de;font-size:14px;text-align:center;line-height:1.6}
.catalog-empty[hidden]{display:none}
.catalog-empty b{color:#fff}
.linkish{padding:0;border:0;background:none;color:var(--cyan);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.catalog-more{display:flex;justify-content:center;margin-top:24px}
.catalog-more[hidden]{display:none}
#catalog-more-btn{min-width:240px}

/* ---------- пагинация каталога ----------
   Пришла на смену «Показать ещё»: страницы вместо накопительной подгрузки —
   к конкретной позиции можно вернуться по прямой ссылке на страницу выдачи,
   а не долистывать всё заново. Рисует script.js (renderPagination), сама
   разметка — только контейнер с id, чтобы работать без разметки под каждый
   язык отдельно. */
.catalog-pages{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}
.catalog-pages[hidden]{display:none}
.cp-numbers{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.cp-nav,.cp-page{
  min-width:40px;height:40px;padding:0 6px;border-radius:999px;
  border:1px solid var(--line);background:rgba(11,40,82,.4);color:#cfe0f7;
  font-weight:800;font-size:15px;cursor:pointer;transition:.18s;
  display:inline-flex;align-items:center;justify-content:center
}
.cp-nav{font-size:20px}
.cp-nav:hover,.cp-page:hover{border-color:var(--cyan);color:#fff}
.cp-page.is-on{border-color:transparent;background:linear-gradient(110deg,#087cff,#31a9ff);color:#fff}
.cp-nav:disabled{opacity:.35;cursor:default;pointer-events:none}
/* На телефоне листалку жмут пальцем, а не курсором: 36 px — меньше
   подушечки, и промах листает на соседнюю страницу выдачи, откуда до
   нужной позиции уже не доберёшься. 21.09.2026 */
@media (max-width:560px){.cp-nav,.cp-page{min-width:40px;height:40px;font-size:14px}.cp-nav{font-size:18px}}

/* ---------- Карточка товара в модалке ----------
   Старая .dialog-pack была высотой 410 px под нарисованную канистру.
   Реального снимка там 80 px, поэтому столько места не нужно. */
.product-dialog{grid-template-columns:190px minmax(0,1fr);gap:32px;align-items:start;max-height:min(88vh,860px);overflow:auto;overscroll-behavior:contain}
.dialog-side{display:grid;justify-items:center;gap:10px}
.dialog-pack{min-height:0;padding:0;background:none}
.pc-plate.is-big{--plate-size:150px;border-radius:16px}
.pc-plate.is-big .pc-blank-letter{font-size:84px}
.dialog-status{padding:5px 10px;border:1px solid #2f6ba4;border-radius:999px;color:#a9c3e2;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.dialog-status[hidden]{display:none}
#dialog-description[hidden]{display:none}
#dialog-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin:20px 0 0}
#dialog-specs:empty{display:none}
#dialog-specs div{padding:11px 12px;border:1px solid #315d91;border-radius:12px}
#dialog-specs dt{color:#93aac9;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#dialog-specs dd{margin:4px 0 0;font-weight:800;font-size:14px}
.pd-note{margin-top:12px;padding:12px 16px;border-left:2px solid rgba(69,187,255,.55);border-radius:0 12px 12px 0;background:rgba(8,32,68,.7)}
.pd-note b{display:block;margin-bottom:5px;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.pd-note p{margin:0;color:#c2d3e8;font-size:13px;line-height:1.55}
.pd-note.is-warn{border-left-color:#f0a33a}
.pd-note.is-warn b{color:#ffbf63}
.product-dialog .dialog-add{margin-top:20px}

/* ---------- Панель выбора ----------
   В разметке этот блок без класса (.selection-names в CSS ни к чему не
   крепился). С шестью товарами это не мешало, а с двадцатью строка
   растягивает панель на пол-экрана. Правим по id. */
#selection-names{min-width:0;overflow:hidden;color:#b7c8de;font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.order-list{max-height:120px;overflow:auto}

/* ---------- Клавиатура ----------
   Видимого фокуса на странице не было вовсе: по 86 карточкам, поиску и
   фильтрам без него не пройти. */
.catalog-section :focus-visible,.selection-bar :focus-visible,dialog :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.facet>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Адаптив ---------- */
@media(max-width:980px){
  .product-dialog[open]{grid-template-columns:1fr}
  .dialog-side{justify-items:start}
}
@media(max-width:720px){
  .catalog-tools{gap:10px}
  .catalog-search{max-width:none;flex:1 1 100%}
  #selection-names{display:none}
  .product-dialog[open]{display:block}
  .dialog-side{grid-auto-flow:column;justify-content:start;align-items:center;margin-bottom:20px}
}
@media(max-width:430px){
  .catalog-section{--plate-size:96px}
  .pc{padding:12px;gap:12px}
  .pc-title{font-size:16px}
  .pc-acts{flex-wrap:wrap}
  .pc-more,.pc-add{flex:1 1 130px}
}
@media(prefers-reduced-motion:reduce){
  .pc,.pc-more,.pc-add,#catalog-q{transition:none}
  .pc:hover{transform:none}
}
/* chem-shop · горизонтальная прокрутка на телефоне.
   Замер на 390 px: страница 398 px, лишние 8 даёт снимок в первом экране —
   у него нет ограничения по ширине контейнера. Правило общее для картинок
   страницы: ни одна не должна вылезать за свою колонку. */
.chem-hero img,.hero-visual img{max-width:100%;height:auto}
/* chem7 · Фотография в первом экране съезжала на дно блока.
   Правило выше — общая защита от горизонтальной прокрутки на телефоне —
   имеет ту же специфичность (0,1,1), что и .hero-visual>img из основного
   блока, но идёт ниже по файлу, поэтому перебивало height:74% на height:auto.
   Снимок схлопывался с 459 px до 212 px и, оставаясь прижатым к bottom:0,
   падал вниз и налезал на канистру.
   Возвращаем заданную высоту через повышенную специфичность (0,2,1).
   max-width:100% выше НЕ трогаем — на нём держится защита от прокрутки. */
.chem-hero .hero-visual>img{height:74%}
/* chem7 · На 375 px «самообслуживания» не влезало в строку и рвалось
   посреди слова: «самообслужив / ания». Слово длинное, переносов нет,
   поэтому кегль привязан к ширине экрана. Замер на 375 px: доступно 339 px,
   слово при 36 px занимает 324 px, при 38 px — уже 344 и рвётся. 9.2vw даёт
   34,5 px на 375 px и 38,6 px на 420 px — влезает на всей вилке. */
@media(max-width:420px){.chem-hero .hero-copy h1{font-size:min(48px,9.2vw)}}

/* ============================================================
   chem-shop · снимки без плашки и без сетки (решение владельца)
   У 18 снимков фон был вклеен светло-серым градиентом — вырезан
   скриптом tools/chemistry-06-cutout.ps1, оригиналы лежат в
   assets/products-src. Теперь все 65 — вырезы с прозрачностью,
   поэтому подложка не нужна: вместо неё мягкое свечение, у него
   нет краёв, и оно не читается как рамка.
   ============================================================ */
.pc-plate{
  background:radial-gradient(circle at 50% 56%,rgba(190,225,255,.16),rgba(190,225,255,.05) 55%,transparent 72%);
  box-shadow:none;border-radius:0
}
/* Тень под самим предметом, а не под плашкой: она сажает вырез на карточку
   и удерживает белые канистры, которые иначе висят в воздухе. */
.pc-plate img{filter:drop-shadow(0 6px 10px rgba(0,10,28,.55))}

/* Позиции без фото — единственный случай, где рамка нужна: показывать нечего,
   и без неё артикул висит в пустоте. Сетки здесь тоже нет. */
.pc-plate.is-blank{
  background:linear-gradient(160deg,rgba(120,180,255,.10),rgba(120,180,255,.03));
  border:1px solid rgba(120,180,255,.22);border-radius:12px}
.pc-plate.is-blank .pc-blank-letter{color:rgba(150,200,255,.16)}
.pc-plate.is-blank .pc-blank-sku{background:rgba(8,32,68,.85);color:#cfe3fb}

/* ============================================================
   chem-shop · настоящие снимки производителя (chem6)

   Прайсовые картинки были 80×80 — для карточки магазина этого мало.
   Снимки взяты из каталога Shine Systems скриптом
   tools/chemistry-07-shine-photos.py: 51 позиция, кадр 1:1.

   Фон у них не вырезан, а доведён до чистого белого — и это не
   упрощение. Товар и фон здесь одного цвета: заливка, настроенная
   так, чтобы убрать серый градиент по краю кадра, прорывается через
   контур и выедает бок белой канистры (проверено на ActiveBase и
   PreWash). Добеливание тем же путём безопасно. Поэтому плитка под
   снимком светлая: это тот самый студийный фон, на котором снимали.
   ============================================================ */
.catalog-section{--plate-size:132px}
/* Между плашкой статистики и каталогом было ~105px пустоты — общий
   .section рассчитан на крупные секции лендинга, а тут между двумя уже
   насыщенными блоками смотрелся как дыра в вёрстке. С 21.09.2026 сам
   .section держит 48px, и своё значение тут почти совпало — оставляем
   его, чтобы каталог по-прежнему подходил к статистике чуть ближе. */
.catalog-section{padding-top:40px}
.pc-plate{
  background:var(--plate-bg,#fff);border-radius:12px;padding:0;
  box-shadow:0 1px 0 rgba(255,255,255,.4),0 12px 24px -16px rgba(0,8,24,.8)
}
/* Снимок отдаём в его настоящем размере и только ограничиваем сверху.
   У 20 позиций в прайсе есть лишь 80×80, а у части снимков поставщика —
   265 px: растянуть их до плитки значит показать мыло. Маленький, но
   резкий кадр честнее. Поле 4% уже заложено в файл, отступ не нужен. */
.pc-plate img{width:auto;height:auto;max-width:100%;max-height:100%;filter:none}
/* Тень под предметом больше не нужна: она сажала вырез на тёмную карточку,
   а на белой плитке читается как грязь по контуру. */

.pc-plate.is-blank{
  background:linear-gradient(158deg,#eef4fb,#dae7f4);border:0;
  box-shadow:inset 0 0 0 1px rgba(10,60,120,.1),0 12px 24px -16px rgba(0,8,24,.7)}
.pc-plate.is-blank .pc-blank-letter{color:rgba(10,60,120,.13)}
.pc-plate.is-blank .pc-blank-sku{background:rgba(255,255,255,.82);color:#0a2547}

/* ---------- Карточка товара ----------
   Было: две колонки во всю высоту модалки. Снимок 80 px стоял в колонке
   190 px, под ним оставалось 700 px пустоты, а кнопка «Запросить цену»
   уезжала за нижний край — до главного действия надо было прокрутить.
   Ещё характеристики шли сеткой одинаковых боксов, и «Разбавление»
   фразой в 60 знаков растягивало ряд: рядом стояли три почти пустых
   бокса по 210 px в высоту.

   Стало: снимок, название и кнопка стоят наверху и не двигаются,
   длинные тексты листаются под ними. */
.product-dialog[open]{
  display:grid;grid-template-columns:none;grid-template-rows:auto minmax(0,1fr);
  gap:0;align-items:stretch;padding:24px 24px 24px;
  max-height:min(88vh,880px);overflow:hidden
}
.pd-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.pd-intro{min-width:0}
.dialog-side{display:grid;justify-items:center;gap:10px}
/* Сторону плитки ставит скрипт в --plate-size: она равна настоящему
   размеру снимка, но не больше 300 px. Так у позиции с кадром 265 px
   не остаётся белого поля вокруг предмета. */
.pc-plate.is-big{border-radius:16px;box-shadow:0 18px 38px -22px rgba(0,8,24,.95)}
.product-dialog h2{margin:10px 0 0;font-size:clamp(30px,3.4vw,40px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
/* Фокус при открытии уводим на заголовок — скринридер читает название
   товара. Рамку вокруг него не рисуем: это не кнопка, и обводка на
   полэкрана читается как брак вёрстки. */
#dialog-name:focus,#dialog-name:focus-visible{outline:none}
#dialog-description{margin:12px 0 0;color:#adc1dc;font-size:14.5px;line-height:1.55;max-width:60ch}
/* Чипы вместо сетки боксов: flex тянет каждый по содержимому и не
   выравнивает высоту по самому длинному. */
#dialog-specs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;grid-template-columns:none}
#dialog-specs div{padding:9px 12px;border:1px solid #2f5c8f;border-radius:12px;background:rgba(8,30,64,.55)}
#dialog-specs dd{white-space:nowrap}
.product-dialog .dialog-add{margin-top:20px}

.pd-body{
  margin-top:20px;padding:20px 4px 0 0;border-top:1px solid #23497a;
  overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#2a5b8f transparent
}
.pd-body:empty{display:none}
.pd-body .pd-note:first-child{margin-top:0}

/* Экран низкий (ноутбук 768 px, телефон лежа) — внутренняя прокрутка
   съедает верх карточки. Тогда листаем модалку целиком. */
@media(max-height:760px){
  .product-dialog[open]{grid-template-rows:auto auto;overflow:auto}
  .pd-body{overflow:visible}
}
@media(max-width:760px){
  .product-dialog[open]{display:grid;grid-template-rows:auto auto;overflow:auto;padding:20px 16px}
  .pd-top{grid-template-columns:1fr;gap:16px}
  /* Снимок и метка «новинка» встают в строку: вертикаль на телефоне дороже. */
  .dialog-side{grid-auto-flow:column;justify-content:start;justify-items:start;align-items:center;gap:12px;margin:0}
  .pd-body{overflow:visible}
}

/* ============================================================
   chem-shop · канистры в первом экране (chem6)
   Прежние .hero-pack были нарисованы на CSS: прямоугольник с
   псевдоэлементами вместо горлышка и этикетки. Рядом с фотографией
   машины это читалось как заглушка. Теперь это снимки вектора
   (tools/canister-builder.html) с прозрачным фоном, поэтому нужны
   только положение, размер и тень.
   ============================================================ */
.hero-can{position:absolute;z-index:2;display:block;line-height:0;
  filter:drop-shadow(0 26px 34px rgba(0,10,30,.5))}
.hero-can img{width:auto;height:clamp(206px,23vw,290px)}
.hero-can.can-blue{left:4%;bottom:15%;transform:rotate(-5deg)}
.hero-can.can-cyan{right:1%;top:11%;transform:rotate(7deg)}
.hero-can.can-cyan img{height:clamp(168px,18.5vw,232px)}
@media(max-width:720px){
  .hero-can.can-blue{left:-2%;bottom:11%}
  .hero-can.can-cyan{right:-4%;top:6%}
  .hero-can img{height:clamp(150px,36vw,206px)}
  .hero-can.can-cyan img{height:clamp(120px,29vw,168px)}
}

/* ============================================================
   chem-shop · линейки (chem6)
   Знаки — файлы производителя, собраны скриптом
   tools/chemistry-08-brand-logos.py. Оба белые на прозрачном,
   поэтому лежат прямо на тёмной карточке без подложки.
   ============================================================ */
.pc-brand-mark{
  margin-left:auto;flex:0 0 auto;width:auto;height:16px;
  /* Леттеринг белый и на navy бьёт ярче названия товара, которое здесь
     главное. Приглушаем до уровня вторичной подписи. */
  opacity:.72
}
.pc:hover .pc-brand-mark{opacity:.95}

/* Знак в карточке товара: рядом с назначением, чипа «Бренд» ниже больше нет.
   Отступ справа — под кнопку закрытия: она висит абсолютом в том же углу и
   наезжала на знак. */
.pd-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:48px}
.pd-brand{display:flex;flex:0 0 auto}
.pd-brand img{width:auto;height:22px;opacity:.85}

/* ===== Страницу таскало вбок на телефоне =====
   Замер на экране 375 px: страница была шириной 508 px, то есть уезжала
   на 133 px вправо. Причина — первый экран. Он грид, и на телефоне колонка
   задана как 1fr. А «1fr» на самом деле означает minmax(auto,1fr): колонка
   не имеет права стать уже своего содержимого. Содержимое оказалось шире
   экрана, колонка растянулась до 437 px и вытолкнула всё за край.
   minmax(0,1fr) снимает этот нижний предел — колонка садится в 339 px.

   Остаток в 23 px давали декоративные картинки первого экрана: они лежат
   абсолютом и по задумке чуть выходят за рамку. На широком экране это
   красиво, на телефоне — лишняя прокрутка. Подрезаем по горизонтали:
   clip, а не hidden, чтобы не создавать лишний контейнер прокрутки. */
@media(max-width:1200px){
  .chem-hero{overflow-x:clip}
}
@media(max-width:980px){
  .chem-hero{grid-template-columns:minmax(0,1fr)}
}
/* ============================================================
   chem-hero · один широкоформатный кадр (21.08.2026)
   Раньше первый экран собирался из фотографии машины, двух векторных
   канистр, декоративного кольца и трёх «пузырей» — четыре запроса и
   абсолютное позиционирование, которое приходилось чинить на каждой
   ширине. Теперь это одна картинка с прозрачным фоном, пропорция 1,78.
   Кадр широкий, поэтому он стоит НЕ в правой колонке, а во всю ширину
   экрана под текстом: в колонке шириной в половину экрана широкий кадр
   получался низким и мелким. Отрицательные поля вытягивают его за
   боковые отступы секции — до самых краёв окна.
   Старые правила .hero-can / .hero-ring / .bubble остались выше по файлу,
   но элементов с такими классами на странице больше нет.
   ============================================================ */
/* place-items:center у .hero-visual (базовое правило выше) центрирует кадр
   внутри колонки. Кадр шире колонки, поэтому «лишнее» уходило поровну влево и
   вправо — влево прямо на текст: на 1920 наезд был 126 px. Прижимаем к левому
   краю колонки, тогда весь избыток уходит вправо, к краю окна. */
.chem-hero .hero-visual{min-height:0;display:block;place-items:start}
.chem-hero .hero-visual>img.chem-hero-pack{
  position:static;display:block;justify-self:start;width:100%;max-width:none;height:auto;
  filter:drop-shadow(0 26px 44px rgba(0,10,30,.5));
}
/* Широкий экран: текст и кадр стоят рядом, на одном уровне. Кадр шире своей
   колонки — вытянут до правого края окна за боковой отступ секции, иначе
   при пропорции 1,78 он получается низким. Заголовок ужат ровно настолько,
   чтобы «самообслуживания» помещалось в колонку одной строкой. */
@media(min-width:981px){
  .chem-hero{
    grid-template-columns:minmax(0,48%) minmax(0,52%);
    align-items:center;gap:40px;
    padding-top:48px;padding-bottom:48px;
  }
  .chem-hero .hero-copy h1{font-size:clamp(36px,3.4vw,48px);letter-spacing:-.045em}
  .chem-hero .hero-copy>p,.chem-hero .hero-punch{max-width:100%}
  /* Кадр НЕ вылезает за колонку. Вылет к краю окна давал две беды: на широких
     мониторах правая канистра уезжала за границу экрана и обрезалась, а сам
     кадр начинал спорить с заголовком по весу. Теперь правый край картинки
     совпадает с правым краем текстового блока. */
  .chem-hero .hero-visual>img.chem-hero-pack{
    /* Небольшой, ЖЁСТКО ОГРАНИЧЕННЫЙ вылет вправо: кадр становится крупнее,
       но не уходит за край окна и не обрезается, как было при вылете на всю
       ширину бокового отступа. */
    --bleed:clamp(0px, (100vw - var(--max))/2 - 24px, 64px);
    width:calc(100% + var(--bleed));
  }
}
@media(max-width:980px){ .chem-hero{padding-top:96px} .chem-hero .hero-visual{margin-top:12px} }
@media(max-width:720px){
  .chem-hero{padding-top:104px;padding-bottom:12px}
  .chem-hero .hero-actions{margin:20px 0}
  .chem-hero .hero-visual{margin-top:4px}
  .chem-hero .hero-visual>img.chem-hero-pack{width:88%;margin-inline:auto}
}

/* ============================================================
   АКТИВНАЯ ПЕНА · текстовый раздел под главный запрос страницы.
   Своих цветов не заводит — всё из :root страницы, поэтому блок
   не разъедется, если поменяется тема.
   ============================================================ */
.foam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.foam-grid article{padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,#0c2a56,#071c3c)}
.foam-grid b{display:block;margin-bottom:11px;color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.foam-grid p{margin:0;color:#b4c5da;font-size:15px}
.foam a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.foam a:hover{color:#8fd6ff}
.foam-foot{max-width:820px;margin:24px 0 0;color:var(--muted);font-size:15px}
@media(max-width:980px){.foam-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.foam-grid{grid-template-columns:1fr}.foam-grid article{padding:20px}}
/* ============================================================
   ИНДЕКС КАТАЛОГА · статический список страниц товаров.
   Сетку каталога рисует JS, и в исходном HTML хаба не было ни одной
   ссылки на 40 страниц товаров — краулер, не исполняющий JS, их не
   обходил, и весь каталог висел на одном sitemap.xml. Блок нарочно
   неброский: это указатель в конце каталога, а не вторая витрина.
   Собирает tools/chemistry-12-static-index.py — руками не правят.
   ============================================================ */
.catalog-index{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.catalog-index h2{margin:0;font-size:22px;letter-spacing:-.02em}
.catalog-index>p{max-width:640px;margin:8px 0 16px;color:var(--muted);font-size:14px}
.catalog-index ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 24px;margin:0;padding:0;list-style:none}
.catalog-index li{font-size:13.5px;line-height:1.45}
.catalog-index a{color:#cfe0f4;border-bottom:1px solid transparent}
.catalog-index a:hover{color:#fff;border-bottom-color:var(--cyan)}
.catalog-index a span{color:#7f97b8}
/* «от 1 590 ₽» — цена не переносится: рубль, оторванный от числа и
   уехавший на следующую строку, читается как опечатка. */
.catalog-index a b{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:980px){.catalog-index ul{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.catalog-index ul{grid-template-columns:1fr;gap:10px}}
/* ============================================================
   chem-shop · ПАНЕЛЬ ФИЛЬТРОВ СЛЕВА (chem22 · 26.08.2026)

   Было: два ряда чипов над сеткой — пятнадцать назначений и
   четыре «линейки». На десктопе это четыре строки кнопок до
   первого товара, и выбрать можно ровно одно значение в ряду.
   Стало: панель слева, как в любом каталоге, где товаров больше
   полусотни, с множественным выбором и сортировкой.

   Ширина панели 260 px. Сетке остаётся ~940 px, то есть две
   карточки в ряд вместо трёх. Это не потеря: карточка здесь
   горизонтальная (снимок слева, текст справа), и в трети от
   940 px текстовой колонке остаётся 133 px — там не помещается
   ни название, ни строка характеристик.
   ============================================================ */
.cat-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.cat-main{min-width:0}
.cat-main .catalog-count{margin:0 0 12px}

/* Панель липкая: список фильтров должен оставаться под рукой на любой
   странице каталога, иначе за ним нужно возвращаться наверх. Отступ сверху —
   под высоту шапки (82 px), она тоже липкая и перекрыла бы заголовок панели. */
.cat-side{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;
  background:rgba(9,35,74,.55)}
.cat-side-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #1d4576}
.cat-side-head b{font-size:14px;letter-spacing:-.01em}
.cat-reset{margin-left:auto;padding:4px 2px;border:0;background:transparent;color:var(--cyan);font-size:12px;font-weight:800;cursor:pointer}
.cat-reset:hover{text-decoration:underline}
.cat-reset[hidden]{display:none}
.cat-side-close{display:none}
/* Своя прокрутка внутри панели: граней шесть, на невысоком ноутбуке они не
   помещаются в экран, а липкий блок выше экрана не прокручивается. */
/* Высота: экран минус липкая шапка (96), минус заголовок панели (52) и
   небольшой воздух снизу. На ноутбуке 900 px в панель помещаются бренды,
   назначения и фасовка целиком, цена уезжает под прокрутку. */
.cat-side-scroll{max-height:calc(100vh - 168px);overflow:auto;padding:2px 16px 10px;
  scrollbar-width:thin;scrollbar-color:#2a5b8f transparent}
/* Системная полоса прокрутки в Chrome на Windows рисуется светло-серой и на
   тёмной панели выглядит как случайная деталь. Свой вариант — той же линией,
   что и рамки вокруг. */
.cat-side-scroll::-webkit-scrollbar{width:6px}
.cat-side-scroll::-webkit-scrollbar-track{background:transparent}
.cat-side-scroll::-webkit-scrollbar-thumb{background:#2a5b8f;border-radius:999px}
.cat-side-scroll::-webkit-scrollbar-thumb:hover{background:#3a7ec0}
.cat-side-foot{display:none}

/* ---------- Грань ---------- */
.facet{padding:12px 0;border-bottom:1px solid #17396a}
.facet:last-child{border-bottom:0}
.facet>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;
  list-style:none;cursor:pointer;color:#cfe0f4;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary:after{content:"";flex:0 0 auto;width:7px;height:7px;margin-bottom:3px;
  border-right:2px solid #6d8db3;border-bottom:2px solid #6d8db3;transform:rotate(45deg);transition:transform .2s}
.facet[open]>summary:after{transform:rotate(-135deg);margin-bottom:-2px}
.facet-body{padding-top:10px}

/* ---------- Бренд ----------
   Знаком, а не строкой: производителя узнают по знаку быстрее, чем читают
   имя. Знаки белые на прозрачном, поэтому лежат прямо на тёмной плитке.
   Погашенный вариант (в текущей выдаче таких товаров нет) не прячем — иначе
   список скачет под курсором и кажется, что бренд из каталога исчез. */
.brand-tiles{display:grid;gap:8px}
.btile{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;
  padding:10px 12px;border:1px solid #2a5b8f;border-radius:12px;background:#081f43;cursor:pointer;transition:.2s}
.btile img{width:auto;height:20px;opacity:.78}
/* Имя бренда: один шрифт и один кегль на все три плитки — иначе колонка
   собиралась из трёх чужих начертаний (см. buildFacets в script.js).
   Размер и цвет как у строк «Назначение» и «Фасовка» ниже. */
.btile-t{flex:1 1 auto;min-width:0;color:#c2d4ea;font-size:13px;font-weight:600;line-height:1.3;
  text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btile:hover .btile-t{color:#e8f2ff}
.btile.is-on .btile-t{color:#fff}
.btile-n{color:#7f97b8;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.btile:hover{border-color:var(--cyan)}
.btile:hover img{opacity:1}
.btile.is-on{border-color:var(--cyan);background:rgba(69,187,255,.13);box-shadow:inset 0 0 0 1px rgba(69,187,255,.3)}
.btile.is-on img{opacity:1}
.btile.is-on .btile-n{color:var(--cyan)}
.btile.is-off{opacity:.35;pointer-events:none}

/* ---------- Чекбокс ----------
   Родной квадратик в тёмной теме на Windows рисуется белым и выбивается из
   палитры, поэтому прячем его и рисуем свой. input остаётся в разметке и
   держит на себе фокус и клавиатуру. */
.fchk{display:flex;align-items:center;gap:9px;padding:6px 2px;color:#c2d4ea;font-size:13px;line-height:1.3;cursor:pointer}
.fchk input{position:absolute;width:1px;height:1px;opacity:0}
.fchk-box{position:relative;flex:0 0 auto;width:17px;height:17px;border:1px solid #35679e;border-radius:5px;background:#081f43;transition:.15s}
.fchk input:checked+.fchk-box{border-color:var(--cyan);background:var(--cyan)}
.fchk input:checked+.fchk-box:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #05152e;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fchk input:focus-visible+.fchk-box{outline:2px solid var(--cyan);outline-offset:2px}
.fchk-t{flex:1 1 auto;min-width:0}
.fchk-n{flex:0 0 auto;color:#7f97b8;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.fchk:hover{color:#fff}
.fchk.is-off{opacity:.4;pointer-events:none}
.facet-flags{padding-top:12px}

/* ---------- Цена ---------- */
.facet-price{display:flex;align-items:center;gap:8px}
.facet-price label{flex:1 1 0;min-width:0}
.facet-price i{flex:0 0 auto;color:#6d8db3;font-style:normal}
/* 16px — по той же причине, что и у поиска выше: Safari на iPhone увеличивает
   страницу при касании поля с мелким шрифтом и обратно её не отпускает.
   Человек вводит цену и остаётся на раздутой странице. 21.09.2026 */
.facet-price input{width:100%;padding:9px 10px;border:1px solid #2a5b8f;border-radius:12px;background:#081f43;
  color:#fff;font-size:16px;outline:none;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.facet-price input::-webkit-outer-spin-button,.facet-price input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.facet-price input:focus{border-color:var(--cyan)}
.facet-price input::placeholder{color:#6a86a8;font-size:12.5px}

/* ---------- Сортировка ----------
   Родная стрелка у select в тёмной теме почти не видна, рисуем свою.
   option оставляем со своим фоном: на Windows системный список иначе
   открывается белым по белому. */
.catalog-sort{position:relative;flex:0 0 auto}
/* 16px: список сортировки на iPhone открывается через фокус на поле, и на
   мелком шрифте страница успевает увеличиться до того, как всплывёт
   выбор, — после выбора она такой и остаётся. 21.09.2026 */
.catalog-sort select{appearance:none;-webkit-appearance:none;padding:12px 40px 12px 16px;border:1px solid var(--line);
  border-radius:12px;background:#081f43;color:#dbe8fa;font-size:16px;font-weight:700;cursor:pointer;outline:none}
.catalog-sort select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(69,187,255,.18)}
.catalog-sort option{background:#0b2852;color:#fff}
.catalog-sort:after{content:"";position:absolute;right:16px;top:calc(50% - 6px);width:7px;height:7px;
  border-right:2px solid #7f9bc0;border-bottom:2px solid #7f9bc0;transform:rotate(45deg);pointer-events:none}

/* ---------- Выбранное плашками ----------
   Нужны прежде всего на телефоне: панель там закрыта, и без плашек человек
   не видит, чем сузил выдачу, — короткий список читается как пустой каталог. */
.cat-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.cat-chips[hidden]{display:none}
.cchip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 12px;border:1px solid #2f6aa5;
  border-radius:999px;background:rgba(69,187,255,.12);color:#dbe8fa;font-size:12px;font-weight:700;cursor:pointer}
.cchip i{font-style:normal;font-size:15px;line-height:1;color:#9fc3e6}
.cchip:hover{border-color:var(--cyan);color:#fff}

/* ---------- Кнопка «Фильтры» ---------- */
.cat-side-open{display:none;align-items:center;gap:9px;padding:12px 16px;border:1px solid var(--line);
  border-radius:12px;background:#081f43;color:#dbe8fa;font-size:13px;font-weight:800;cursor:pointer}
.cat-side-open svg{width:18px;height:18px;fill:none;stroke:#7f9bc0;stroke-width:1.9;stroke-linecap:round}
.cat-side-open-n{min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;border-radius:999px;
  background:var(--cyan);color:#05152e;font-size:11px;font-weight:900}
.cat-side-open-n[hidden]{display:none}

/* ---------- Телефон и планшет ----------
   Панель уезжает в выдвижной лист. Разметка та же: вторая копия фильтров
   означала бы два состояния, которые обязательно разойдутся. */
@media(max-width:980px){
  .cat-layout{grid-template-columns:minmax(0,1fr)}
  .cat-side-open{display:inline-flex}
  .cat-side{position:fixed;z-index:120;left:0;top:0;bottom:0;width:min(340px,88vw);display:flex;flex-direction:column;
    border-width:0 1px 0 0;border-radius:0 16px 16px 0;background:#08234b;transform:translateX(-102%);transition:transform .28s ease}
  .cat-side.is-open{transform:none;box-shadow:0 0 90px rgba(0,0,0,.6)}
  .cat-side-close{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;
    background:transparent;color:#cfe0f4;font-size:26px;line-height:1;cursor:pointer}
  /* Высоту списка задаёт единственное место — блок «Фильтры: без второй
     прокрутки» ниже по файлу. Здесь её больше не трогаем: два правила на
     один и тот же ключ в одном брейкпоинте расходятся молча. 21.09.2026 */
  .cat-side-scroll{flex:1 1 auto}
  .cat-side-foot{display:block;padding:12px 16px;border-top:1px solid #1d4576}
  .cat-side-foot .button{width:100%;padding:12px 16px}
  body.side-open{overflow:hidden}
  .cat-side-veil{position:fixed;z-index:110;inset:0;border:0;padding:0;background:rgba(2,10,24,.62)}
}
@media(max-width:720px){
  .catalog-tools{gap:8px}
  .cat-side-open{flex:0 0 auto;padding:12px 12px}
  .catalog-sort{flex:1 1 100%;order:3}
  .catalog-sort select{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .cat-side{transition:none}
  .btile,.fchk-box,.facet>summary:after{transition:none}
}
/* ---------- Переключатель фасовки в карточке (chem23) ----------
   Карточка теперь одна на товар, а фасовки лежат в ней пилюлями. Раньше
   ActiveBase занимал четыре карточки подряд с одинаковым описанием.
   Ряд с переносом, а не с прокруткой: фасовок самое большее четыре, и
   горизонтальная прокрутка внутри карточки — это ловушка для пальца. */
.pc-vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc-var{padding:5px 10px;border:1px solid #2a5b8f;border-radius:8px;background:#081f43;
  color:#bacbe0;font-size:11.5px;font-weight:700;line-height:1.25;cursor:pointer;
  white-space:nowrap;font-variant-numeric:tabular-nums;transition:.18s}
.pc-var:hover{border-color:var(--cyan);color:#fff}
.pc-var.is-on{border-color:transparent;background:#f4f8ff;color:#09234a}
@media(prefers-reduced-motion:reduce){.pc-var{transition:none}}

/* Приписка под ценовым фильтром: часть каталога без цены в прайсе, и под
   любым диапазоном эти позиции выпадают. Молча — значит человек решит, что
   их нет вовсе. */
.facet-nprice{margin:9px 0 0;color:#7f96b6;font-size:11.5px;line-height:1.35}
.facet-nprice[hidden]{display:none}
/* ============================================================
   chem-brands + chem-faq (chem24 · 26.08.2026)

   Бренды: марок в каталоге три, а видно их было только внутри
   фильтра. Карточка — знак производителя, число позиций и одна
   честная строка о том, что именно у него берут. Кнопка не
   ссылка: она включает грань «Бренд» и прокручивает к сетке.
   Отдельного адреса у фильтра нет намеренно — три копии одного
   каталога в индексе не нужны.

   Вопросы: нативный <details>. Свой аккордеон здесь незачем —
   этот работает с клавиатуры и без JS, а поисковый робот видит
   текст ответа в разметке независимо от того, раскрыт он или нет.
   ============================================================ */
.chem-brands .section-heading{margin-bottom:24px}
.cb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cb-card{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);
  border-radius:16px;background:linear-gradient(160deg,#0c2a56,#081f42)}
/* Знаки белые на прозрачном и разной ширины — выравниваем по левому краю,
   высота одна: ряд из трёх логотипов разного кегля читается как небрежность. */
.cb-mark{width:auto;height:22px;opacity:.85;align-self:flex-start}
.cb-n{margin:0;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.cb-card p:not(.cb-n){margin:0;color:#a8bcd8;font-size:14px;line-height:1.55}
.cb-go{margin-top:auto;align-self:flex-start;padding:10px 0;border:0;background:transparent;
  color:#dbe8fa;font-size:13px;font-weight:800;cursor:pointer;border-bottom:1px solid #2f6aa5}
.cb-go:hover{color:#fff;border-bottom-color:var(--cyan)}
.cb-go span{color:var(--cyan)}

.chem-faq .section-heading{margin-bottom:24px}
.cf-list{display:grid;gap:10px}
.cf-item{border:1px solid var(--line);border-radius:16px;background:rgba(9,35,74,.55);overflow:hidden}
.cf-item summary{display:flex;align-items:baseline;gap:12px;padding:16px 20px;list-style:none;cursor:pointer;
  font-size:16px;font-weight:800;line-height:1.35}
.cf-item summary::-webkit-details-marker{display:none}
/* Свой маркер: нативный треугольник на тёмном почти не виден, а плюс-минус
   сразу говорит, что блок раскрывается. */
.cf-item summary:before{content:"+";flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:8px;color:var(--cyan);font-size:15px;font-weight:900;line-height:1}
.cf-item[open] summary:before{content:"–"}
.cf-item summary span{flex:1 1 auto;min-width:0}
.cf-item summary:hover{color:#fff}
.cf-item summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.cf-item p{margin:0;padding:0 20px 20px 62px;color:#a8bcd8;font-size:14.5px;line-height:1.6;max-width:78ch}

@media(max-width:980px){
  .cb-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .cb-grid{grid-template-columns:1fr}
  .cb-card{padding:20px}
  .cf-item summary{padding:16px;font-size:15px;gap:11px}
  /* На телефоне отступ под маркер съедает треть строки — ответ выравниваем
     по краю карточки, а не под текст вопроса. */
  .cf-item p{padding:0 16px 16px;font-size:14px}
}

/* === Шапка страницы: один баннер ==========================================
   01.09.2026 по решению владельца прежний первый экран убран целиком —
   плашка, заголовок, два абзаца, две кнопки и картинка справа. Вместо них
   один готовый кадр во всю ширину.

   H1 остаётся в разметке и скрывается визуально: надпись на баннере
   нарисована, поиск её не прочитает, а «автохимия для автомоек
   самообслуживания» — главная ключевая фраза страницы. Приём стандартный:
   элемент остаётся в потоке для читалок с экрана, но не занимает места.
   display:none и visibility:hidden тут не годятся — они убирают заголовок
   и из озвучки тоже.

   Пропорции кадра 3:1 заданы через aspect-ratio, чтобы при загрузке
   страница не дёргалась: место под баннер занимается сразу.
   ========================================================================= */
/* Кадр стоит не во всю ширину экрана, а в тех же полях, что и остальные
   блоки страницы, — это превью, а не шапка. Ширина взята той же формулой,
   что у .section, поэтому левый и правый края совпадают с каталогом ниже.

   Отступ сверху нужен потому, что шапка сайта фиксированная и лежит поверх
   страницы: без него кадр уезжал бы под логотип. */
.chem-hero-banner {
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto;
  padding: 116px 0 0;
}

.chem-hero-frame {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
}

.chem-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2172 / 724;
  object-fit: cover;
}

/* Переход к странице размытием. Два слоя сразу: backdrop-filter размывает
   низ самой картинки, а градиент поверх уводит её в цвет фона. Оба под
   маской, чтобы эффект нарастал сверху вниз, а не резал кадр полосой.
   pointer-events:none — слой декоративный и не должен ловить курсор. */
.chem-hero-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 78%);
  mask-image: linear-gradient(to bottom, transparent, #000 78%);
  background: linear-gradient(to bottom, transparent, var(--navy));
  pointer-events: none;
}

.chem-hero-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* На телефоне кадр 3:1 при ширине экрана 390 px сжимался в полоску высотой
   125 px — надпись в нём становилась нечитаемой. Берём более высокий кроп
   3:2 со сдвигом влево: в видимую часть попадает и надпись, и первая
   канистра. Поля и скругление тоже уменьшаем — на узком экране крупный
   радиус смотрится тяжело. */
@media (max-width: 720px) {
  .chem-hero-banner {
    width: min(100% - 36px, var(--max));
    padding-top: 96px;
  }
  .chem-hero-frame {
    border-radius: 16px;
  }
  .chem-hero-frame img {
    aspect-ratio: 3 / 2;
    object-position: 8% center;
  }
}


/* === Количество и заказ ====================================================
   Счётчик встаёт на место кнопки «В заказ», когда позиция уже отмечена:
   количество нужно почти всегда, а отдельное поле рядом с кнопкой занимало
   бы место у всех пятидесяти пяти карточек ради тех, кто им воспользуется.
   ========================================================================= */
.pc-count{display:flex;align-items:stretch;flex:1;min-width:0;
  border:1px solid #2ccf8a;border-radius:999px;overflow:hidden;
  background:rgba(44,207,138,.1)}
.pc-step{flex:none;width:34px;border:0;background:transparent;color:#2ccf8a;
  font-size:18px;font-weight:800;line-height:1;cursor:pointer;
  transition:.2s}
.pc-step:hover,.pc-step:focus-visible{background:rgba(44,207,138,.18)}
.pc-qty{flex:1;min-width:0;width:100%;border:0;background:transparent;
  color:#fff;text-align:center;font:inherit;font-weight:800;font-size:14px;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.pc-qty:focus{outline:none;background:rgba(44,207,138,.12)}
/* Стрелочки браузера в узком поле налезают на цифру и не нужны:
   для этого рядом стоят свои кнопки. */
.pc-qty::-webkit-outer-spin-button,
.pc-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Сумма рядом со счётчиком выбранного: «6 позиций» само по себе
   ничего не говорит о том, на сколько человек набрал. */
#selection-sum{white-space:nowrap;font-size:15px;font-weight:900;
  font-variant-numeric:tabular-nums}

/* Окно заказа. Полей больше, чем в запросе цены, поэтому раскладываем
   в две колонки — иначе форма уезжает за экран и до кнопки надо листать. */
#checkout-dialog{width:min(640px,calc(100% - 32px))}
#checkout-dialog form{grid-template-columns:1fr 1fr;gap:12px 12px}
#checkout-dialog form label:first-of-type,
#checkout-dialog form label:nth-of-type(7),
#checkout-dialog form label:nth-of-type(8),
#checkout-dialog form .consent,
#checkout-dialog form button{grid-column:1/-1}
.co-row{display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid #23497a;font-size:12px}
.co-row:last-child{border-bottom:0}
.co-row i{font-style:normal;color:#7f97b8}
.co-row b{white-space:nowrap;font-variant-numeric:tabular-nums}
.co-total{margin:12px 0 4px;text-align:right;font-size:17px;font-weight:900;
  font-variant-numeric:tabular-nums}
#co-list{max-height:190px;overflow:auto}

@media(max-width:720px){
  #checkout-dialog form{grid-template-columns:1fr}
  #checkout-dialog form label{grid-column:1/-1}
}


/* === Плашка выбранного: компактная строка ==================================
   Была сетка на фиксированное число колонок — с добавлением суммы шестой
   элемент уехал на вторую строку, и плашка стала вдвое выше при половине
   пустого места. Гибкая строка не зависит от числа элементов.
   ========================================================================= */
.selection-bar{
  display:flex; align-items:center; gap:12px;
  /* По ширине содержимого (24.09.2026, владелец: «плашку не такую
     длинную»). Была фиксированная ширина до 880 px, и пустое место между
     суммой и кнопками растягивалось вместе с экраном. */
  width:fit-content; max-width:min(880px, calc(100% - 24px));
  bottom:16px; padding:7px 7px 7px 20px;
  /* Синее стекло полукруглой плашкой — как панель покупки товара
     (токены --gz-glass-* в shop-head.css, 15.09.2026). */
  border:1px solid var(--gz-glass-line, rgba(140,200,255,.32));
  border-radius:999px;
  background:var(--gz-glass-bg, rgba(10,36,76,.9));
  -webkit-backdrop-filter:var(--gz-glass-blur, blur(18px)); backdrop-filter:var(--gz-glass-blur, blur(18px));
  box-shadow:var(--gz-glass-shadow, 0 22px 50px -18px rgba(0,6,20,.85));
}
.selection-bar .button{border-radius:999px}
/* Количество и сумма — две части одного факта, держим вместе. */
.selection-bar > div:first-child{
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
}
/* «В запросе» появлялось только вместе с плашкой, а плашка и так видна
   лишь когда что-то выбрано. Слово занимало целую строку и не добавляло
   ничего. */
.selection-bar > div:first-child > span{display:none}
.selection-bar > div:first-child strong{font-size:14px;font-weight:800}
.selection-bar > div:first-child b{font-size:16px}
#selection-sum{font-size:15px;color:#8fd6ff}

.selection-names{flex:1 1 auto;min-width:0;font-size:12px}
/* Названия — не распорка: плашка короткая, названия обрезаются троеточием. */
#selection-names{flex:0 1 auto;max-width:240px}

.selection-bar .button{flex:none;padding:9px 16px;font-size:12px}
.selection-clear{flex:none;width:30px;height:30px;line-height:1;
  border-radius:50%;font-size:20px;display:grid;place-items:center;
  transition:.2s}
.selection-clear:hover{background:rgba(255,255,255,.08);color:#fff}

@media(max-width:720px){
  /* На телефоне в строку не влезает: разбиваем на две — сверху что
     набрали, снизу действия. Крестик уводим к счётчику, чтобы кнопки
     занимали всю ширину. */
  .selection-bar{flex-wrap:wrap; gap:8px 10px; padding:10px 12px; border-radius:24px}
  .selection-bar > div:first-child{flex:1 1 auto; order:1}
  /* Крестик «сбросить выбранное» — 30 px у самого края плашки: палец
     задевает его, целясь в кнопку рядом, и набранный заказ пропадает
     целиком. На телефоне отдаём ему полноценную цель. 21.09.2026 */
  .selection-clear{order:2; position:static; width:44px; height:44px}
  .selection-names{flex:1 1 100%; order:3; display:block;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  .selection-bar .button{flex:1 1 0; order:4; text-align:center}
  /* Три кнопки в одной строке по 12 px на 390 px не живут: «Открыть
     корзину» обрезалось на полуслове, а главное действие выглядело как
     одно из трёх равных. Главное — во всю ширину, корзина строкой ниже
     и мельче. «Скачать КП» на телефоне убираем совсем: он открывается
     через window.open, и встроенный блокировщик гасит его молча —
     человек жмёт, а не происходит ничего. 21.09.2026 */
  .selection-bar .open-kp{display:none}
  .selection-bar .open-checkout{flex:1 1 100%; order:4; font-size:14px; padding:11px 16px}
  /* «Открыть корзину» осталась единственной кнопкой плашки (22.09.2026,
     «Оформить заказ» убрана), а 12 px и узкие поля достались ей от
     прежней роли второй строки. Теперь это главное действие — и
     набрано оно должно быть как главное. 23.09.2026 */
  .selection-bar .cart-link{flex:1 1 100%; order:5; font-size:15px;
    padding:12px 16px; min-height:44px; display:flex; align-items:center;
    justify-content:center}
}


/* === Счётчик: компактный, а не во всю ширину ===============================
   Растянутый на всю карточку счётчик разносил плюс и минус по краям —
   до второй кнопки надо было вести курсор через полкарточки, а цифра
   висела посреди пустоты. Фиксированная ширина держит их рядом.
   ========================================================================= */
.pc-count{flex:0 0 auto;width:112px;margin-left:auto}
.pc-step{width:32px;font-size:17px}
/* 16px, а не 14: на iPhone касание поля с мелким шрифтом увеличивает всю
   страницу, и человек правит количество уже на съехавшей вёрстке. 21.09.2026 */
.pc-qty{font-size:16px}
.pc-acts{gap:8px}

@media(max-width:720px){
  /* На узком экране места ещё меньше: «Подробнее» ужимаем, счётчик
     оставляем прежним — по нему целятся пальцем. */
  .pc-count{width:104px}
}


/* === Ровный низ карточки ===================================================
   Высоту верхней строки задаёт снимок, а текст в ней прижат кверху —
   и до кнопок оставался разный зазор: у товара с длинным описанием
   и четырьмя фасовками почти ноль, у короткого — половина карточки.

   Прижимаем цену к низу её строки: расстояние до кнопок становится
   одинаковым, а разница по высоте уходит наверх, между описанием
   и ценой, где глаз её не считывает как сбой.
   ========================================================================= */
.pc-body{display:flex; flex-direction:column; height:100%}
.pc-price{margin-top:auto; padding-top:11px}
/* Чипы характеристик и фасовок больше не растягиваются по остатку:
   вертикальный запас теперь распределяет цена. */
.pc-specs, .pc-vars{flex:0 0 auto}
.pc-lead{flex:0 0 auto}


/* === Фильтры: без второй прокрутки и компактнее ============================
   Правки поверх правил выше — они идут позже и потому побеждают.
   ========================================================================= */

/* Своя полоса прокрутки внутри прокручивающейся страницы: колесо мыши
   работало то в панели, то в странице, в зависимости от положения
   курсора. Панель прилипшая (sticky), так что расти по содержимому
   ей ничто не мешает. */
.cat-side-scroll{max-height:none; overflow:visible; padding-bottom:12px}

/* Бренды были плитками в 48 px с логотипами — три штуки занимали
   полпанели, и «Назначение» оказывалось за краем экрана. Логотип
   в фильтре не нужен: выбирают по названию, а знак виден в карточке. */
.brand-tiles{gap:4px}
.btile{min-height:0; padding:7px 11px; border-radius:9px; gap:8px}
.btile img{height:14px; opacity:.85}
.btile-t{font-size:12.5px}   /* как .fchk на этой же ширине */
.btile-n{font-size:11px}

/* Отступы между группами тоже сокращаем: их пять, и по 12 px сверху
   и снизу набегает лишний экран. */
.facet{padding:9px 0}

@media(max-width:980px){
  /* На узком экране панель выезжает поверх содержимого и там прокрутка
     нужна — иначе низ списка не достать. Считаем от dvh, а не от vh:
     vh на iPhone меряет экран так, будто панель браузера свёрнута, список
     получался выше видимой части и уводил кнопку «Показать N товаров» под
     адресную строку — выбранные фильтры нечем было применить. 21.09.2026 */
  .cat-side-scroll{max-height:calc(100dvh - 168px); overflow:auto}
  /* Строка-галочка в выехавшей шторке — цель для пальца, а не для курсора:
     на 24 px промах ставит соседнюю грань, и человек видит не ту выдачу,
     которую просил. Подпись 10.5 px в шторке на вытянутой руке не читается.
     Правила сильнее общих ниже по файлу: те сжимают панель под мышь на
     десктопе, и трогать их незачем. 21.09.2026 */
  .cat-side .fchk{padding:9px 2px; font-size:12.5px}
  .cat-side .facet>summary{padding:6px 0; font-size:12.5px}
}


/* === Фильтры: второй заход ================================================
   После первого сжатия панель всё равно оставалась длиннее экрана: в ней
   девять назначений и шесть фасовок, а каждая строка занимала 29 px —
   почти как кнопка, хотя это галочка с коротким словом.

   Уменьшаем то, что повторяется много раз (строка списка), а не заголовки:
   заголовков пять, строк — пятнадцать, и весь лишний рост даёт именно они.
   ========================================================================= */

/* Строка списка: 29 → 24 px. Квадратик галочки 17 → 15 px — палец
   попадает по всей строке, а не по квадратику, так что на нажатие
   это не влияет. */
.fchk{padding:3px 2px; gap:8px; font-size:12.5px}
.fchk-box{width:15px; height:15px; border-radius:4px}
.fchk input:checked+.fchk-box:after{left:4px; top:1px; width:5px; height:9px}
.fchk-n{font-size:10.5px}

/* Плитка бренда: 32 → 27 px. */
.btile{padding:5px 10px; border-radius:8px}
.btile img{height:13px}

/* Воздух вокруг групп и внутри панели. */
.facet{padding:7px 0}
.facet-body{padding-top:6px}
.facet-flags{padding-top:9px}
.facet>summary{padding:3px 0; font-size:10.5px}
.cat-side-head{padding:11px 12px}
.cat-side-scroll{padding:2px 12px 9px}
.facet-price input{padding:7px 9px}
.facet-nprice{margin-top:7px; font-size:11px}

/* Панель уже на 24 px — они уходят карточкам товара, а не пустому
   полю справа от коротких слов вроде «Воск» и «Канистра». */
@media(min-width:981px){
  .cat-layout{grid-template-columns:236px minmax(0,1fr); gap:20px}
}

/* Прилипшая панель выше экрана — ловушка: она замирает у верхнего края,
   и до нижних граней не добраться ни колесом, ни прокруткой страницы.
   Своя полоса прокрутки эту ловушку и закрывала, но мешала в обычном
   случае. Поэтому: панель прилипает только там, где помещается целиком
   (715 px + шапка + воздух), а на низком экране едет вместе со страницей. */
@media(max-height:830px) and (min-width:981px){
  .cat-side{position:static}
}

/* Знак производителя как ссылка на его страницу. Подчёркивания нет: знак
   и так читается как логотип, а подчёркнутая картинка выглядит поломкой.
   Что это ссылка, показывает курсор и подсветка при наведении. */
/* Прижать вправо нужно саму ссылку, а не картинку внутри неё. Знак
   прижимался правилом margin-left:auto на .pc-brand-mark, но с тех пор
   как он стал ссылкой на страницу поставщика, в ряду стоит ссылка —
   а у неё этого правила не было, и знак уехал к заголовку. */
.pc-brand-link{display:inline-flex; line-height:0; border-radius:4px;
  margin-left:auto; flex:0 0 auto;
  transition:opacity .15s, outline-color .15s;
  outline:1px solid transparent; outline-offset:3px}
/* Логотип, загруженный поставщиком в кабинете. Ширина у него своя — от
   узкого квадрата до длинного леттеринга, — поэтому ограничиваем её, а
   не задаём: иначе один бренд займёт полкарточки, а другой превратится
   в точку. Прозрачность не приглушаем: чужой знак может быть тёмным на
   прозрачном фоне, и .72 сделали бы его нечитаемым. */
.pc-brand-mark.is-own{max-width:96px; object-fit:contain;
  object-position:right center; opacity:.92}
.pc:hover .pc-brand-mark.is-own{opacity:1}
/* Тот же логотип в шапке страницы товара: там знак крупнее, но ширину
   всё равно ограничиваем — длинная вывеска сдвинула бы заголовок. */
.pdp-mark.is-own{max-width:120px; object-fit:contain}
.pc-brand-link:hover{opacity:.75; outline-color:rgba(120,190,255,.5)}
.pc-brand-link:focus-visible{outline:2px solid var(--cyan,#45bbff)}


/* Бесконечное движение при системной просьбе «меньше анимации».
   В файле уже есть три таких блока, но все они гасят только transition,
   а пузыри в первом экране крутятся через animation и не выключались.
   Человеку с вестибулярными нарушениями непрерывное движение в поле
   зрения мешает читать страницу. */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none !important; }
}

/* Фокус в поле количества был снят outline:none без замены: при вводе
   с клавиатуры не видно, в какой ячейке стоишь. */
.pc-qty:focus-visible { outline: 2px solid #45bbff; outline-offset: 1px; }


/* ============================================================
   Правовой блок магазина автохимии: продавец, оплата, доставка,
   возврат, ссылки на оферту и политику. Нужен банку-эквайеру:
   он проверяет сам сайт, а не только документы.
   ============================================================ */
.shop-legal { border-top: 1px solid #1d4677; padding-top: 32px; }
.shop-legal h2 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); }
.shop-legal-lead { max-width: 70ch; margin: 0 0 24px; color: #a9c3e2; font-size: 15px; line-height: 1.6; }
.shop-legal-lead b { color: #eaf3ff; }
.shop-legal a { color: #45bbff; }

.shop-legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px;
}
.shop-legal-card {
  padding: 16px 16px 16px;
  border: 1px solid #2a5b8f;
  border-radius: 12px;
  background: #081f43;
}
.shop-legal-card > b { display: block; margin-bottom: 10px; font-size: 16px; color: #eaf3ff; }
.shop-legal-card ul { margin: 0; padding-left: 16px; color: #a9c3e2; font-size: 13.5px; line-height: 1.55; }
.shop-legal-card li { margin-bottom: 6px; }
.shop-legal-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.shop-legal-more:hover { text-decoration: underline; }

.shop-legal-seller {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #2a5b8f;
  border-radius: 12px;
  background: linear-gradient(160deg, #0b2a55, #081f43);
}
.shop-legal-seller > b { display: block; margin-bottom: 8px; color: #eaf3ff; font-size: 15px; }
.shop-legal-seller p { margin: 0 0 8px; color: #a9c3e2; font-size: 13.5px; line-height: 1.6; }
.shop-legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.shop-legal-links a { font-weight: 600; }

/* Короткая строка на карточке товара — рядом с кнопкой заказа. */
/* «Открыть корзину» на карточке товара (владелец 22.09.2026: «убери
   кнопку оформить заказ, выдели также открыть корзину цветом»).
   Вторая по силе после «В корзину»: цветная рамка и цветной текст, но
   без заливки — заливка у главного действия одна. */
.pdp-tocart.button {
  border: 1px solid rgba(69, 187, 255, .55);
  background: rgba(20, 90, 170, .22);
  color: #8fd4ff;
  font-weight: 700;
}
.pdp-tocart[hidden] { display: none !important; }
.pdp-tocart.button:hover {
  border-color: #45bbff;
  background: rgba(20, 90, 170, .38);
  color: #d8f0ff;
}

/* Кто продавец (22.09.2026, агентская модель). Стоит под коробкой
   покупки: это часть условий сделки, а не справка в конце страницы. */
.pdp-seller {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(120, 170, 230, .18);
  border-radius: 14px;
  background: rgba(10, 32, 68, .4);
}
.pdp-seller > b {
  display: block;
  margin-bottom: 4px;
  color: #8fb0d8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pdp-seller-name { margin: 0; color: #eaf3ff; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.pdp-seller-req { margin: 4px 0 0; color: #9fb6d6; font-size: 12.5px; line-height: 1.5; }
.pdp-seller-note { margin: 8px 0 0; color: #7f97b8; font-size: 12px; line-height: 1.5; }

.pdp-legal { margin: 10px 0 0; color: #7f97b8; font-size: 12px; line-height: 1.5; }
.pdp-legal a { color: #8fb0d8; }


/* Принятие оферты у кнопки оплаты. Раньше договор купли-продажи был
   вторым пунктом внутри галочки про персональные данные — покупатель
   его не видел, а банку при подключении эквайринга важно, чтобы условия
   сделки стояли на виду в момент оплаты. */
.pay-offer {
  margin: 4px 0 12px;
  color: #8fb0d8;
  font-size: 12.5px;
  line-height: 1.5;
}
.pay-offer a { color: #45bbff; }




/* ============================================================
   КАТЕГОРИИ ТОВАРОВ — круглые плитки под баннером
   Разметку собирает tools/chemistry-categories-block.py,
   картинки — tools/chemistry-category-tiles.py.

   Плитка это кнопка: включает грань «Назначение» и уводит к сетке.
   Ссылкой не делаем — отдельный адрес под каждый вид означал бы
   шесть копий каталога в индексе.
   ============================================================ */
.chem-cats { padding: 32px 0 0; }
.chem-cats-h {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 900;
  letter-spacing: -.01em;
}
.chem-cats-row {
  display: grid;
  /* auto-fit, а не жёсткие шесть колонок: плитку без товаров на витрине
     сборщик не рисует (так ушли «Запчасти» — их со витрины сняли), и
     пустая колонка в конце ряда выглядела бы поломкой. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.chem-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.chem-cat-pic {
  position: relative;
  display: block;
  /* Кружок не тянем на всю колонку: пять кругов по 236 px забирали
     полэкрана до первого товара. Верхняя граница — 124 px, дальше
     колонка просто шире картинки, и ряд дышит. */
  width: min(100%, 124px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  /* Ободок рисуем тенью, а не рамкой: рамка съедает пиксель у круга
     и на нецелом масштабе даёт зазубрину по краю. */
  box-shadow: 0 0 0 1px rgba(112,166,226,.30), 0 10px 26px rgba(2,10,24,.45);
  transition: box-shadow .2s ease, transform .2s ease;
}
.chem-cat-pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.chem-cat-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.chem-cat-n { color: var(--muted); font-size: 12px; }
.chem-cat:hover .chem-cat-pic,
.chem-cat:focus-visible .chem-cat-pic {
  box-shadow: 0 0 0 2px var(--cyan), 0 14px 32px rgba(2,10,24,.6);
  transform: translateY(-3px);
}
.chem-cat:hover .chem-cat-pic img { transform: scale(1.07); }
.chem-cat:focus-visible { outline: none; }
.chem-cat:hover .chem-cat-name { color: #fff; }
/* Выбранный вид подсвечиваем — иначе после нажатия непонятно, что
   именно включилось: сетка ниже, а плитки остались как были. */
.chem-cat.is-on .chem-cat-pic { box-shadow: 0 0 0 2px var(--cyan), 0 14px 32px rgba(2,10,24,.6); }
.chem-cat.is-on .chem-cat-name { color: var(--cyan); }

@media (max-width: 980px) {
  .chem-cats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
}
@media (max-width: 560px) {
  .chem-cats { padding: 32px 0 0; }
  .chem-cats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .chem-cat-name { font-size: 12.5px; }
  .chem-cat-n { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .chem-cat-pic, .chem-cat-pic img { transition: none; }
  .chem-cat:hover .chem-cat-pic { transform: none; }
  .chem-cat:hover .chem-cat-pic img { transform: none; }
}


/* Кнопки карточки: «Подробнее» и «В корзину» тянулись во всю ширину
   (flex:1 1 130px) и на широкой карточке расходились по краям — между
   ними оставалась пустая середина. Прижимаем к содержимому и к левому
   краю: пара читается как пара, а не как две панели по углам. */
.pc-acts { gap: 8px; padding-top: 10px; justify-content: flex-start; }
.pc-more, .pc-add { flex: 0 0 auto; }
.pc-add { padding-left: 16px; padding-right: 16px; }
/* Счётчик количества раньше сам прижимался к правому краю (margin-left:auto).
   Теперь правый край занимает сердце «отложить», и счётчик, оставшись с
   этим отступом, повисал в середине строки. Ставим его сразу за
   «Подробнее» — там же, где стоит «В корзину», которую он заменяет. */
.pc-count { margin-left: 0; }
@media (max-width: 560px) {
  /* На узкой карточке наоборот: пусть делят строку поровну, иначе
     «В корзину» уезжает под «Подробнее» и строка ломается. */
  .pc-more, .pc-add { flex: 1 1 130px; }
}


/* ============================================================
   КАРТОЧКА КАТАЛОГА v2 · 15.09.2026 — вертикальная, как на маркетплейсах
   Владелец: «почти не видно, что на картинке и что за товар — картинки
   нужны больше, как у Ozon». Снимок квадратом во всю ширину карточки,
   плашка цвета края кадра (--plate-bg), на снимке «Новинка» и сердце;
   ниже цена крупно, название, назначение с брендом, чипы и фасовки;
   «В корзину» во всю ширину. Разметку пишет script.js (cardInner).
   Стоит после прежних правил горизонтальной карточки и перебивает их.
   ============================================================ */
#product-grid{grid-template-columns:repeat(auto-fill,minmax(min(214px,100%),1fr));gap:12px}
.pc{display:flex;flex-direction:column;gap:0;padding:10px;min-height:0;border-radius:16px;
  contain-intrinsic-size:auto 560px}
.pc-media{position:relative;margin:0 0 10px}
/* Рамка 3:4, как у маркетплейсов: под неё делают карточки-постеры, и
   вертикальная канистра встаёт в рамку по высоте. */
.pc-media .pc-plate{width:100%;height:auto;aspect-ratio:3/4;border-radius:12px}
.pc-media .pc-plate img{width:auto;height:auto;max-width:92%;max-height:92%;object-fit:contain}
/* Постер со своим фоном — во всю рамку: класс is-fill ставит shop-head.js,
   стиль общий для всех рамок магазина — в shop-head.css. */
.pc-media .pc-plate.is-blank .pc-blank-letter{font-size:96px}
.pc-badge{position:absolute;left:8px;top:8px;z-index:2;padding:4px 9px;border-radius:999px;
  font-size:11px;font-weight:900;line-height:1.2;letter-spacing:.02em;pointer-events:none}
/* «Новинка» — дымчатое тёмно-синее стекло (владелец 15.09.2026: светлое
   стекло сливалось с белым снимком и мутнело на тёмном постере; проект
   креативного агента, 7 вариантов на пяти фонах). Одна плашка на весь
   магазин: карточка каталога (.pc-badge.is-new) и лента «Новинки»
   (.gzp-badge — в promo.css только её место на снимке).
   Белый текст на синем стекле: контраст ≥5,2 на белом, сером и цветном
   снимке (замер по пикселям). Стекло — размытие с приглушением того, что
   под плашкой, голубой отлив сверху и светлая нить края. Ширина ~76px —
   не шире половины телефонной карточки.
   Движение: золотая точка «дышит» (только transform и opacity), по стеклу
   раз в 9 с проходит слабый блик; при «уменьшить движение» всё стоит. */
:is(.pc-badge.is-new, .pc-badge.is-sale, .pc-badge.is-hit, .gzp-badge){display:inline-flex;align-items:center;gap:4px;overflow:hidden;
  padding:4px 8px 4px 6px;border:0;border-radius:999px;
  background:linear-gradient(180deg,rgba(69,187,255,.22),rgba(69,187,255,0) 60%),rgba(10,37,71,.66);
  -webkit-backdrop-filter:blur(8px) saturate(180%) brightness(.82);backdrop-filter:blur(8px) saturate(180%) brightness(.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(180,228,255,.42),
    0 2px 6px rgba(0,8,24,.18),0 6px 14px -4px rgba(0,8,24,.28);
  color:#fff;font-size:11px;font-weight:900;line-height:1.2;letter-spacing:-.01em;text-transform:none}
/* Браузер без размытия: стекло плотнее, чтобы текст читался и над белым. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(.pc-badge.is-new, .pc-badge.is-sale, .pc-badge.is-hit, .gzp-badge){background:linear-gradient(180deg,rgba(69,187,255,.2),rgba(69,187,255,0) 60%),rgba(10,37,71,.86)}}
/* Точка — золото бренда; ореол неподвижный, дышит масштабом и прозрачностью. */
:is(.pc-badge.is-new, .pc-badge.is-sale, .pc-badge.is-hit, .gzp-badge)::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:#ffd873;box-shadow:0 0 0 2px rgba(255,216,115,.2),0 0 6px rgba(255,216,115,.8);
  animation:gz-badge-dot 2.8s ease-in-out infinite}
/* Блик — слабая полоса по стеклу. */
:is(.pc-badge.is-new, .pc-badge.is-sale, .pc-badge.is-hit, .gzp-badge)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-120%) skewX(-18deg);animation:gz-badge-sheen 9s ease-in-out 1.5s infinite;pointer-events:none}
@keyframes gz-badge-dot{0%,100%{opacity:.72;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
@keyframes gz-badge-sheen{0%,80%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){
  :is(.pc-badge.is-new, .pc-badge.is-sale, .pc-badge.is-hit, .gzp-badge)::before{animation:none;opacity:1;transform:none}
  :is(.pc-badge.is-new, .pc-badge.is-sale, .pc-badge.is-hit, .gzp-badge)::after{animation:none;display:none}}
/* «Акция» («−X %») и «Хит» (15.09.2026) — то же стекло, что у «Новинки»
   (правила выше общие), другим отливом: акция — тёплое красно-коралловое,
   хит — золото бренда. Основа стекла тёмная, как синяя у «Новинки», поэтому
   белый текст держит контраст ≥5 и на белом снимке, и на тёмном постере
   (расчёт смешения с белым под brightness(.82)). Плашка на снимке одна —
   какую ставить, решает script.js (badgeMarkup). */
.pc-badge.is-sale{
  background:linear-gradient(180deg,rgba(255,128,102,.34),rgba(255,128,102,0) 60%),rgba(122,22,26,.68);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,196,180,.5),
    0 2px 6px rgba(40,0,0,.18),0 6px 14px -4px rgba(40,0,0,.3)}
.pc-badge.is-sale::before{background:#ffd0c2;box-shadow:0 0 0 2px rgba(255,208,194,.22),0 0 6px rgba(255,140,110,.85)}
.pc-badge.is-hit{
  background:linear-gradient(180deg,rgba(255,216,115,.36),rgba(255,216,115,0) 60%),rgba(92,60,0,.7);
  box-shadow:inset 0 0 0 1px rgba(255,236,180,.2),inset 0 1px 0 rgba(255,230,160,.55),
    0 2px 6px rgba(24,14,0,.18),0 6px 14px -4px rgba(24,14,0,.3)}
.pc-badge.is-hit::before{background:#fff3c4;box-shadow:0 0 0 2px rgba(255,243,196,.22),0 0 6px rgba(255,216,115,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pc-badge.is-sale{background:linear-gradient(180deg,rgba(255,128,102,.3),rgba(255,128,102,0) 60%),rgba(122,22,26,.9)}
  .pc-badge.is-hit{background:linear-gradient(180deg,rgba(255,216,115,.3),rgba(255,216,115,0) 60%),rgba(92,60,0,.9)}}
/* Сердце в углу снимка: белый круг читается на любом фоне кадра. */
.pc-media .pc-fav{position:absolute;right:8px;top:8px;z-index:2;display:grid;place-items:center;
  width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#0a2547;box-shadow:0 4px 12px rgba(0,8,24,.25)}
.pc-media .pc-fav svg{width:19px;height:19px}
.pc-media .pc-fav:hover{background:#fff;color:#e0245e}
.pc-media .pc-fav[aria-pressed="true"]{color:#e0245e}
.pc-media .pc-fav[aria-pressed="true"] svg{fill:currentColor}
.pc-body{display:flex;flex-direction:column;flex:1 1 auto;height:auto;padding:0 4px;min-width:0}
.pc-body .pc-price{margin-top:0;padding-top:0;flex-wrap:wrap;gap:4px 8px}
.pc-body .pc-price b{font-size:21px}
/* Строка предложения под ценой (script.js, offerMarkup): «На 25 % дешевле за
   кг, чем 5 л». Одна строка у каждой карточки, пустая тоже — ряд ровный. */
.pc-body .pc-offer{margin:2px 0 0;min-height:1.35em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:#ffd873;font-size:11.5px;font-weight:700;line-height:1.35}
.pc-body .pc-offer .pc-offer-s{display:none}
/* Цена во время акции (script.js, priceMarkup): зачёркнутая и «−X %» —
   только присланные сервером. Строка не переносится: вторая строка цены
   у одной карточки делала ряд неровным; цена за литр в этом состоянии не
   печатается вовсе. То, что не влезло (донги на en/vi длиннее рублей:
   «1.647.000 ₫» срезался посередине числа), уходит целиком на вторую
   строку, а её прячет высота в одну строку цены (21px × 1.5; на телефоне
   17px × 1.5 — те же кегли, что у .pc-price b в этом блоке). Порядок
   сохраняется: процент никогда не стоит без зачёркнутой. */
.pc-body .pc-price.has-was{row-gap:40px;max-height:calc(21px * 1.5);overflow:hidden}
.pc-body .pc-price.has-was b{line-height:1.5}
.pc-body .pc-price.has-was s{flex:none;font-size:12.5px}
.pc-body .pc-pct{flex:none;padding:2px 6px;border-radius:999px;background:rgba(255,112,88,.16);color:#ff9f86;
  font-size:11px;font-style:normal;font-weight:900;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Части строки под ценой: срок акции тёплым, как плашка акции (контраст
   #ff9f86 на тёмной карточке ≈7), подсказка и монеты — золотом строки. */
.pc-body .pc-offer .pc-offer-till{color:#ff9f86}
.pc-body .pc-offer .pc-offer-sep{font-style:normal;font-weight:400;color:#7f97b8}
@media(max-width:560px){
  .pc-body .pc-offer .pc-offer-l{display:none}
  .pc-body .pc-offer .pc-offer-s{display:inline}
  .pc-body .pc-offer{font-size:11px}
  /* Телефонная карточка 165 px: монеты уступают место, срок — никогда. */
  .pc-body .pc-offer .pc-offer-c{display:none}
  /* «−X %» рядом с ценой не влезал на 33 px и срезался (замер 15.09.2026,
     390 px); тот же процент стоит на плашке снимка — здесь он лишний. */
  .pc-body .pc-price.has-was .pc-pct{display:none}
  .pc-body .pc-price.has-was{max-height:calc(17px * 1.5)}
}
/* Ровные карточки. Название и описание всегда занимают по две строки,
   фасовки — одну. Разная высота этих блоков растягивала ряд по самой
   высокой карточке, и у соседей над кнопкой оставалась пустота: на ПК до
   67 px, на телефоне до 127 px (замер 15.09.2026, четыре фасовки в столбик). */
/* Перенос в любом месте слова: названия приходят от поставщиков из кабинета,
   и одно «ГИДРОФОБНЫЙ-КОНСЕРВАНТ-КОНЦЕНТРАТ» без пробелов шире колонки
   растянет всю сетку карточек. Обрезка по двум строкам такое слово не
   удержит — она режет по высоте, а не по ширине. 21.09.2026 */
.pc-title{margin:5px 0 4px;font-size:15px;line-height:1.25;min-height:2.5em;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pc-body .pc-head{align-items:center;flex-wrap:nowrap;gap:6px;margin-bottom:2px}
/* Назначение в одну строку: в узкой карточке «БЕСКОНТАКТНЫЙ ШАМПУНЬ»
   переносилось на две и уталкивало знак бренда отдельной строкой ниже. */
.pc-body .pc-kind{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.08em}
.pc-body .pc-brand-mark{height:13px;margin-left:auto}
.pc-body .pc-lead{margin-top:4px;font-size:12.5px;-webkit-line-clamp:2;min-height:2.9em}
.pc-body .pc-specs{margin-top:8px;gap:5px}
/* Чип артикула: 10.5 px — по нему заказывают и по нему же ищут, а на
   телефоне это единственный оставшийся чип. Ниже 11.5 px цифры артикула
   сливаются и их переписывают с ошибкой. 21.09.2026 */
.pc-body .pc-specs span{padding:3px 7px;font-size:11.5px}
/* Все фасовки видны сразу: перенос вместо скрытого бокового списка. */
.pc-body .pc-vars{margin-top:8px;flex-wrap:wrap;overflow:visible;padding-right:0}
.pc-body .pc-var{flex:0 1 auto;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.pc .pc-acts{margin-top:auto;padding:10px 4px 2px;border-top:0;gap:6px}
.pc-acts .pc-add{flex:1 1 auto;width:100%;padding:11px 12px;border-radius:12px;font-size:13px}
.pc-acts .pc-count{flex:1 1 auto;width:auto;height:42px;margin:0}
.pc-acts .pc-more.is-modal{flex:0 0 auto}
/* «Распродажа» (15.09.2026). Над сеткой — приглашение, а не выбранный
   фильтр: тёплый край, как у плашки акции, число позиций вместо крестика.
   В панели — строка рядом с «Только новинки»; обе появляются, только если
   сервер прислал sale_count > 0. [hidden] нужен явно: .fchk — flex. */
.cchip.is-sale-cta{border-color:rgba(255,128,102,.55);color:#ffd9cf}
.cchip.is-sale-cta b{font-size:11px;font-weight:800;color:#ff9f86;font-variant-numeric:tabular-nums}
.cchip.is-sale-cta:hover{border-color:#ff9f86;color:#fff}
.fchk[hidden]{display:none}
/* Окно заказа: цены сменились, пока оно было открыто (order.php → 409). */
.co-warn{margin:10px 0 6px;padding:10px 12px;border:1px solid rgba(255,179,71,.5);border-radius:12px;
  background:rgba(255,179,71,.1);color:#ffd9a3;font-size:13.5px;font-weight:700;line-height:1.45}
.co-warn[hidden]{display:none}
@media(max-width:560px){
  /* Две колонки на телефоне, как в приложениях маркетплейсов. */
  #product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pc{padding:8px;border-radius:16px}
  .pc-body .pc-price b{font-size:17px}
  .pc-title{font-size:13.5px}
  /* Назначение 9 px читалось как серая полоска: именно по нему на телефоне
     отличают шампунь от воска — описание здесь уже скрыто. 21.09.2026 */
  .pc-body .pc-kind{font-size:11.5px;letter-spacing:.04em}
  .pc-body .pc-brand-mark{height:11px}
  .pc-body .pc-lead{display:none}
  .pc-body .pc-specs span:not(.is-sku){display:none}
  .pc-acts .pc-add{padding:10px 8px;font-size:12.5px}
  /* Сердце «отложить» стоит в углу снимка, а нажатие на саму карточку
     открывает товар: промах мимо 32 px уводит со страницы выдачи, и человек
     возвращается прокруткой с начала. Значок оставляем прежним — крупный
     белый круг спорил бы со снимком, — а цель добираем прозрачным полем
     вокруг, как у точек карусели. 21.09.2026 */
  .pc-media .pc-fav{width:44px;height:44px;right:2px;top:2px;background:none;box-shadow:none}
  .pc-media .pc-fav::before{content:"";position:absolute;left:50%;top:50%;
    width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;
    background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,8,24,.25)}
  .pc-media .pc-fav svg{position:relative}
  .pc-media .pc-fav:hover{background:none}
  .pc-media .pc-fav:hover::before{background:#fff}
}

/* ============================================================
   КОНТРАСТ ТЕКСТА НА КНОПКАХ И В МЕЛОЧАХ
   Проверка 11.09.2026 по WCAG: посчитали ~140 пар «текст на своём
   фоне» во всех листах магазина. Провалы ниже — реальные, каждый
   с посчитанным отношением.
   ============================================================ */

/* Главная кнопка («Заказать», «Оформить заказ», «Отправить заказ»,
   «Запросить цену»): белым по светлому концу градиента #31a9ff было
   2.55:1 при нужных 3:1 — на ярком экране надпись выцветала. Сводим
   градиент темнее, к тому же синему, каким набран бренд: 5.59 на
   тёмном конце и 3.78 на светлом. */
.button.primary,
.cp-page.is-on {
  background: linear-gradient(110deg, #0866c9, #0d82f7);
}
.button.primary { box-shadow: 0 15px 40px rgba(8,102,201,.28); }

/* «В корзину» на карточке: белым по #0c80f5 было 3.87:1, а надпись
   набрана 12 px жирным — для неё порог 4.5. */
.pc-add { background: #0a6fd8; }
.pc-add:hover { background: #0d82f7; }

/* Разделитель «/» в хлебных крошках карточки товара: приглушённый
   цвет ещё и на 45% прозрачности давал 2.64:1. */
.pdp-crumbs span { opacity: .72; }

/* Плейсхолдер в полях цены — 4.34:1. Заодно уходит разнобой: в поиске
   по каталогу плейсхолдер уже светлее. */
.facet-price input::placeholder { color: #7f97b8; }

/* Рамка невыбранной галочки в фильтрах: 2.78:1 при нужных 3:1 для
   нетекстовых элементов управления. */
.fchk-box { border-color: #4b7db5; }


/* ============================================================
   ПЛАВАЮЩИЕ ПАНЕЛИ И ВИДЖЕТЫ В НИЖНЕМ УГЛУ
   Проверка 11.09.2026: посчитали геометрию всех плавающих слоёв.
   ============================================================ */

/* Плашка выбранного стоит по центру и до сих пор ничего не резервировала
   справа. Кнопка обратного звонка (shared/callback-widget.js) висит в
   правом нижнем углу: 42 px, отступ 22 px, слой 70. У плашки слой 90 —
   значит она ложится СВЕРХУ и закрывает звонок. Арифметика: правый край
   плашки равен vw/2 + 440, левый край кнопки — vw − 64; они сходятся на
   любом окне уже примерно 1008 px. На телефоне плашка идёт во всю
   ширину и накрывает и звонок, и кнопку «наверх».
   Ниже 1080 px перестаём центрировать и честно оставляем справа место
   под виджет — ровно так же, как это уже сделано у полосы корзины
   (right:84px в cart.js). */
@media (max-width: 1080px) {
  .selection-bar {
    left: 12px;
    right: auto;
    transform: none;
    width: fit-content;
    max-width: calc(100% - 96px);
  }
}
/* На телефоне плашка — две строки во всю ширину (правило выше, 720 px):
   короткой её делать некуда, а кнопке нужна вся ширина под палец. */
@media (max-width: 720px) {
  .selection-bar { right: 84px; width: auto; max-width: none; }
  #selection-names { max-width: none; }
}

/* Слой полосы «В корзине» правится не здесь, а в cart.js: свои стили
   она дописывает тегом <style> уже во время работы, то есть после
   этого листа, и правило отсюда до неё не доходит. */




/* ============================================================
   КАРУСЕЛЬ БАННЕРОВ
   Разметку собирает tools/chemistry-hero-carousel.py,
   переключение — hero.js, кадры — chemistry-hero-slides.py.

   Без JS виден первый слайд и он полноценный: остальные скрыты,
   стрелки и точки не показываются вовсе (их включает класс is-live,
   который ставит скрипт). Так робот и человек с отключёнными
   скриптами получают ровно прежний баннер.
   ============================================================ */
.hero-carousel { position: relative; }

.hero-track { position: relative; }

.hero-slide {
  position: relative;
  display: none;
  border-radius: 24px;
  overflow: hidden;
}
.hero-slide.is-on { display: block; }
.hero-slide img { width: 100%; height: auto; display: block; }

/* Плавная смена. Анимируем прозрачность, а не положение: сдвиг тяжёлой
   картинки 2172 px даёт рывки на слабом телефоне. */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-on { animation: heroIn .45s ease; }
}
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }

/* Тень под текстом. Рисуем здесь, а не впечатываем в снимок: на кадре с
   белой пеной даже плотная впечатанная тень оставляет фон светлым, а
   подбирать плотность, пересобирая по шесть файлов на слайд, невозможно. */
.hero-slide-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 0 clamp(22px, 5vw, 74px);
  background: linear-gradient(90deg,
    rgba(4, 16, 36, .93) 0%,
    rgba(4, 16, 36, .80) 34%,
    rgba(4, 16, 36, .34) 58%,
    rgba(4, 16, 36, 0) 78%);
}
.hero-slide-text .hero-eyebrow {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-slide-text strong {
  max-width: 15ch;
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero-slide-text p {
  margin: 0;
  max-width: 42ch;
  color: #cfe0f7;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
}
.hero-slide-text .button { margin-top: 6px; }
/* Подпись первого слайда — только на телефоне (см. index.html) */
.hero-slide-text--m { display: none; }
@media (max-width: 720px) { .hero-slide-text--m { display: flex; } }

/* Стрелки и точки показываются, только когда карусель ожила. */
.hero-nav, .hero-dots { display: none; }
.hero-carousel.is-live .hero-nav { display: grid; }
.hero-carousel.is-live .hero-dots { display: flex; }

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(120, 190, 255, .32);
  background: rgba(6, 20, 40, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #eaf3ff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.hero-nav:hover { border-color: var(--cyan); background: rgba(6, 20, 40, .85); }
.hero-nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hero-nav.prev { left: 14px; }
.hero-nav.next { right: 14px; }

/* Стрелки появляются при наведении на баннер — тот же приём, что у
   снимка на странице товара (.pdp-shot-nav). Постоянно висящие стрелки
   спорят с рекламной картинкой за внимание, а нужны они ровно в тот
   момент, когда человек уже решил полистать. Там, где наведения нет
   (телефон, планшет), их не показываем вовсе: там свайп и точки. */
@media (hover: hover) and (pointer: fine) {
  .hero-carousel.is-live .hero-nav {
    opacity: 0;
    transition: opacity .18s ease, border-color .16s ease, background .16s ease;
  }
  .hero-carousel:hover .hero-nav,
  .hero-carousel:focus-within .hero-nav { opacity: 1; }
}
@media (hover: none) {
  .hero-carousel.is-live .hero-nav { display: none; }
}

/* Точки без плашки: тёмная таблетка под ними читалась как элемент
   интерфейса и спорила с самим баннером. Сами точки полупрозрачные,
   выбранная — плотная. */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  gap: 9px;
  padding: 0;
  background: none;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(234, 243, 255, .34);
  /* Тень вместо плашки: на светлом кадре белая точка иначе пропадает. */
  box-shadow: 0 1px 4px rgba(2, 10, 24, .55);
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.hero-dot:hover { background: rgba(234, 243, 255, .7); }
.hero-dot[aria-selected="true"] {
  background: rgba(69, 187, 255, .95);
  transform: scale(1.3);
}
.hero-dot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 720px) {
  /* На телефоне стрелки съедают текст слайда — оставляем точки и свайп. */
  .hero-carousel.is-live .hero-nav { display: none; }

  /* Текст уходит ИЗ-ПОД снимка вниз, а не лежит поверх него.
     Причина в пропорции: баннер 3:1, и на 360-412 px это полоса высотой
     около 120 px. Заголовок с кнопкой в неё не помещаются — кнопка
     вылезала за нижний край снимка. Под снимком места сколько нужно,
     и читается такой слайд лучше: буквы не спорят с пеной. */
  .hero-slide { border-radius: 16px; overflow: visible; }
  .hero-slide img { border-radius: 16px; }
  .hero-slide-text {
    position: static;
    padding: 12px 2px 2px;
    background: none;
    gap: 8px;
  }
  /* Все слайды в одной клетке сетки: высота карусели — по самому высокому
     слайду и не меняется при смене (аудит 26.09.2026: карусель росла со 170
     до 351 px и сдвигала страницу, CLS 0,17). Скрытые — visibility, не display. */
  .hero-track { display: grid; }
  .hero-slide { display: block; grid-area: 1 / 1; visibility: hidden; }
  .hero-slide.is-on { visibility: visible; }
  .hero-slide-text strong { max-width: none; font-size: 21px; }
  .hero-slide-text p { max-width: none; font-size: 13.5px; }

  /* Текст теперь идёт ПОД снимком, и точки поверх слайда легли бы на
     буквы. Опускаем их под весь блок — обычной строкой в потоке. */
  .hero-dots {
    position: static;
    transform: none;
    margin: 12px auto 0;
    width: fit-content;
    /* Зазор между точками убираем: области нажатия (40 px, ниже) иначе
       налезали бы друг на друга и палец попадал бы к соседу. 21.09.2026 */
    gap: 0;
  }
  /* Точка 9 px — цель меньше подушечки пальца: промах листал не туда или
     не листал вовсе. Саму точку не увеличиваем — она спорила бы с кадром:
     рисуем её псевдоэлементом, а кнопке отдаём 40×40 под нажатие.
     21.09.2026 */
  .hero-dot {
    position: relative;
    width: 40px;
    height: 40px;
    background: none;
    box-shadow: none;
  }
  .hero-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: rgba(234, 243, 255, .28);
    /* Тень вместо плашки: на светлом кадре белая точка иначе пропадает. */
    box-shadow: 0 1px 4px rgba(2, 10, 24, .55);
    transition: background .16s ease, transform .16s ease;
  }
  .hero-dot:hover { background: none; }
  .hero-dot:hover::before { background: rgba(234, 243, 255, .7); }
  /* Увеличение выбранной точки переносим на псевдоэлемент: масштаб самой
     кнопки растянул бы и область нажатия на соседей. */
  .hero-dot[aria-selected="true"] { background: none; transform: none; }
  .hero-dot[aria-selected="true"]::before { background: rgba(69, 187, 255, .95); transform: scale(1.3); }
}


/* Строка про Geizer Coin в корзине и на экране «заказ принят» переехала
   в marketplace/shop-head.css — туда же, где живёт сама монета:
   этот файл подключается раньше, и правила про монету из него всё равно
   перебивались бы. */


/* ============================================================
   ШАПКА МАГАЗИНА
   Переехала целиком в marketplace/shop-head.css: он подключается
   ПОСЛЕ shared/*-cohesion.css, а этот файл — до них, и общесайтовая
   шапка перебивала магазинную. Там же клиренс под шапку для .pdp и
   .cartp: он обязан стоять позже product.css и cart.css.
   ============================================================ */


/* ============================================================
   ПОЛЯ ФОРМ МАГАЗИНА · 21.09.2026
   Последний шаг перед заявкой — форма заказа. Её поля не задавали
   себе размер шрифта и наследовали 11 px от подписи, а Safari на
   iPhone увеличивает всю страницу, когда касаются поля мельче
   16 px, и назад её уже не вернуть: человек дозаполняет заказ на
   раздутой вёрстке, где не видно ни согласия, ни кнопки отправки.
   Поиск по каталогу лечили этим же (#catalog-q выше), здесь то же
   средство для остальных полей. Правила вне медиазапроса: на
   десктопе 16 px в поле — норма, а не жертва.
   Кабинета это не касается: у него свои поля в account.css, и они
   сильнее по весу.
   ============================================================ */
form label{font-size:12.5px}
form input:not([type=checkbox]),
form select,
form textarea{font-size:16px}

/* Абзац «Коротко» для ответов ИИ здесь стоял с 21.09.2026 и снят
   22.09.2026 по решению владельца: витрина — это полка с товаром, и
   первым экраном там не должен быть абзац в двести слов. Стиль убран
   вместе с ним, чтобы в файле не осталось правила без хозяина. Сам
   абзац и причина снятия — в tools/ai-short-answers.py (словарь СНЯТО);
   на остальных страницах такие абзацы работают и остаются. */

/* ── Заголовок баннера на переводах (21.09.2026) ───────────────────────
   На русской витрине надпись «ПРОФЕССИОНАЛЬНАЯ АВТОХИМИЯ» нарисована
   прямо в картинке, поэтому <h1> там спрятан от глаза и оставлен для
   поиска. Вьетнамец и англичанин эту надпись не прочтут, и картинку у
   них заменили на кадр без текста — значит заголовок должен стать
   настоящим: кладём его поверх кадра, как на слайдах карусели.
   Выбор по <html lang> — русскую страницу правило не трогает. */
html[lang="en"] .chem-hero-banner,
html[lang="vi"] .chem-hero-banner { position: relative; }
html[lang="en"] .chem-hero-frame::after,
html[lang="vi"] .chem-hero-frame::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(transparent, rgba(3, 18, 42, .82));
  pointer-events: none;
}
html[lang="en"] .chem-hero-h1,
html[lang="vi"] .chem-hero-h1 {
  position: absolute; clip: auto; clip-path: none; overflow: visible;
  width: auto; height: auto; margin: 0; z-index: 2;
  left: clamp(16px, 4vw, 56px); right: clamp(16px, 4vw, 56px);
  bottom: clamp(16px, 4.5vw, 52px);
  max-width: 18ch;
  font-size: clamp(21px, 4vw, 44px); line-height: 1.08;
  color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
  text-wrap: balance;
}

/* ── Покупка под рукой: липкая полоса на телефоне (23.09.2026) ────────
   Проверка на 390 px: карточка товара — девять экранов, и кнопка
   «В корзину» остаётся на первом. Человек дочитывает описание,
   применение и отзывы — а положить товар уже нечем: надо мотать назад
   наверх. На маркетплейсах этого не бывает: цена и кнопка едут с
   человеком.

   Делаем копию блока покупки, а не двигаем исходный: исходный нужен на
   своём месте, когда человек до него доскроллил, и два разных
   поведения у одного узла закончились бы прыжками вёрстки.
   Показываем только когда настоящий блок ушёл вверх (класс на <body>
   ставит product.js). */
/* Плашка, а не полоса во всю ширину (23.09.2026, владелец: «не делай
   эту полосу такой длинной»). Полоса от края до края читается как
   вторая шапка и закрывает страницу; плавающая плашка занимает ровно
   столько, сколько нужно цене и кнопке, и оставляет контент видимым.
   Справа — запас под кнопку обратного звонка, которая сидит в том же
   углу. */
.pdp-dock {
  position: fixed;
  left: 12px;
  right: 74px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(140, 200, 255, .28);
  border-radius: 999px;
  background: rgba(7, 26, 56, .95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -14px rgba(2, 10, 26, .7);
}
.pdp-dock-price { display: grid; gap: 2px; min-width: 0; }
.pdp-dock-price b { color: #fff; font-size: 17px; line-height: 1.1; }
.pdp-dock-price span { color: #9fb6d6; font-size: 11.5px; }
.pdp-dock .button {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  body.pdp-dock-on .pdp-dock { display: flex; }
  /* Подвал не должен прятаться под полосой. */
  body.pdp-dock-on .global-footer { padding-bottom: 76px; }
}
/* Видимый фокус с клавиатуры по всему магазину (аудит 26.09.2026: тёмная рамка на тёмном фоне не видна, у поиска её не было) */
.shop-h a:focus-visible, .shop-h button:focus-visible, .shop-h input:focus-visible,
main a:focus-visible, main button:focus-visible, main input:focus-visible, main select:focus-visible, main textarea:focus-visible,
.gz-acc-go:focus-visible, .gz-acc-second:focus-visible, .shop-h__skip:focus-visible { outline: 2px solid #45bbff !important; outline-offset: 2px; }

/* Читаемый текст на телефоне не мельче 12 px (аудит 26.09.2026). Значки и надписи капсом не трогаем. */
@media (max-width: 720px) {
  body .gzp-card-brand, body .pc-rate-n, body .chem-cat-n, body .pc-offer-s, body .pdp-price-tag { font-size: 12px; }
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}
.co-currency-note{font-size:13px;line-height:1.5;color:var(--muted);padding:12px;border:1px solid var(--line);border-radius:12px}


/* Compact mobile procurement flow: all content remains available in document order. */
@media (max-width:720px) {
  body .chem-hero-banner { padding-top:88px; }
  body .chem-hero-frame img { aspect-ratio:3 / 1; object-fit:contain; object-position:center; }
  body .hero-slide-text { padding-top:9px; gap:5px; }
  body .hero-slide-text strong { font-size:19px; line-height:1.2; }
  body .hero-slide-text p { margin:0; font-size:13px; line-height:1.5; }
  body .hero-slide-text .button { margin-top:3px; padding:11px 16px; min-height:44px; }
  body .hero-dots { margin-top:4px; }
  body .gzp-terms { margin-top:12px; }
  body .gzp-terms-list { gap:8px; }
  body .gzp-term { padding:10px; gap:9px; }
  body .gzp-term-ico--pic { flex-basis:40px; width:40px; height:40px; }
  body .chem-cats { padding-top:18px; }
  body .chem-cats-h { margin-bottom:12px; }
  body .chem-cats-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; overflow:visible; padding:2px 2px 10px; }
  body .chem-cat { flex:0 0 88px; }
  body .chem-cat-pic { width:68px; }
  body .chem-cat-name { font-size:13px; line-height:1.35;overflow-wrap:anywhere; }
  body .gzp-rail-sec.section { padding-top:20px; }
  body .gzp-rail-sec .gzp-side { --gzp-side-pad:12px; }
  body .gzp-rail-sec .gzp-side-media { height:116px; }
  body .gzp-rail-sec .gzp-card-pic { aspect-ratio:1; }
}

.co-field-error{display:block;color:#ffb5b5;font-size:13px;line-height:1.4;margin-top:6px}

/* Marketplace visual system · procurement-first, scoped to catalogue routes.
   Existing checkout/PDP/keyboard contracts and real product imagery are retained. */
body:has(main .catalog-section) {
  --shop-surface:#0c2444;
  --shop-surface-raised:#112d50;
  --shop-stroke:rgba(160,194,229,.23);
  --shop-text:#f2f6fc;
  --shop-secondary:#bdcce0;
  --shop-gold:#e9ca83;
  color:var(--shop-text);
  -webkit-font-smoothing:antialiased;
}
body:has(main .catalog-section) main { text-rendering:optimizeLegibility; }
body:has(main .catalog-section) :is(.section-heading h2,.chem-cats-h,.gzp-side h2) {
  letter-spacing:-.035em;
  font-weight:750;
  line-height:1.15;
}
body:has(main .catalog-section) .section-heading { margin-bottom:24px; }
body:has(main .catalog-section) .section-heading .eyebrow {
  font-size:12px;
  letter-spacing:.1em;
  margin-bottom:9px;
}
body:has(main .catalog-section) .button.primary {
  background:#50bce9;
  color:#071c32;
  border-color:transparent;
  box-shadow:none;
  font-weight:750;
  min-height:44px;
}
body:has(main .catalog-section) .button.primary:hover { background:#76d1f6; transform:none; }
body:has(main .catalog-section) .chem-hero-banner { padding-top:104px; }
body:has(main .catalog-section) .hero-slide { border-radius:20px; border:1px solid var(--shop-stroke); }
body:has(main .catalog-section) .hero-slide-text { gap:12px; }
body:has(main .catalog-section) .hero-slide-text strong { font-weight:750; letter-spacing:-.04em; }
body:has(main .catalog-section) .hero-slide-text p { color:#d0ddec; line-height:1.6; }
body:has(main .catalog-section) .hero-slide-text .hero-eyebrow { color:#c3dcf2; font-size:12px; letter-spacing:.1em; }
body:has(main .catalog-section) .gzp-term {
  background:rgba(7,25,48,.48);
  border-color:var(--shop-stroke);
  border-radius:12px;
  padding:16px;
}
body:has(main .catalog-section) .gzp-term-txt > span { color:var(--shop-secondary); font-size:13px; }
body:has(main .catalog-section) .chem-cat-name { color:#dae5f2; line-height:1.4; }
body:has(main .catalog-section) .chem-cat-pic { box-shadow:none; }
body:has(main .catalog-section) .gzp-side {
  background:var(--shop-surface);
  border-color:var(--shop-stroke);
  border-radius:20px;
}
body:has(main .catalog-section) .gzp-card {
  background:var(--shop-surface);
  border-color:var(--shop-stroke);
  box-shadow:none;
}
body:has(main .catalog-section) .gzp-card:hover { transform:none; border-color:rgba(115,188,237,.6); }
body:has(main .catalog-section) .gzp-card-brand { color:var(--shop-secondary); font-size:12px; letter-spacing:.035em; }
body:has(main .catalog-section) .gzp-card-price i { color:var(--shop-secondary); font-size:12px; }
.catalog-section { --line:rgba(160,194,229,.2); scroll-margin-top:112px; }
.catalog-section .section-heading h2 { font-size:clamp(28px,3vw,42px); }
.catalog-section .catalog-tools { gap:12px; margin-bottom:24px; align-items:center; }
.catalog-section .catalog-search { max-width:none; flex:1 1 360px; }
.catalog-section #catalog-q {
  min-height:52px;
  padding-left:46px;
  border-color:rgba(164,197,230,.35);
  background:#0b203e;
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.catalog-section #catalog-q::placeholder { color:#a6bad2; }
.catalog-section #catalog-q:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(69,187,255,.12); }
.catalog-section .catalog-search-ic { left:17px; stroke:#9ac5e7; }
.catalog-section :is(.catalog-sort select,.cat-side-open) {
  min-height:48px;
  border-radius:12px;
  border-color:rgba(164,197,230,.28);
  background:#0c2444;
  color:#e3edf8;
  font-size:16px;
}
.catalog-section .cat-side { background:linear-gradient(150deg,rgba(17,45,76,.97),rgba(8,28,51,.98)); border-color:var(--line); border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.catalog-section .cat-side-head { padding:16px; border-bottom-color:var(--line); }
.catalog-section .cat-side-head b { font-size:15px; }
.catalog-section .cat-side-scroll { padding:8px 16px 16px; }
.catalog-section :is(.btile,.fchk) { min-height:44px; }
.catalog-section .btile { background:#102b4a; border-color:rgba(164,197,230,.22); }
.catalog-section :is(.btile-t,.fchk) { font-size:14px; color:#c9d8e9; }
.catalog-section :is(.fchk-n,.btile-n,.catalog-count) { color:#afc2d9; font-size:13px; }
.catalog-section .facet-price input { min-height:44px; background:#0a203b; }
.catalog-section .facet-h { font-size:12px; letter-spacing:.07em; }
.catalog-section #product-grid { gap:20px 18px; align-items:stretch; }
.catalog-section .pc {
  min-width:0;
  padding:12px;
  border-color:var(--shop-stroke,rgba(160,194,229,.19));
  background:#102b49;
  box-shadow:none;
  border-radius:14px;
  transition:border-color .18s ease,background-color .18s ease;
}
.catalog-section .pc:hover { transform:none; border-color:rgba(115,188,237,.6); box-shadow:none; background:#12304f; }
.catalog-section .pc:focus-within { border-color:#8acdf0; }
.catalog-section .pc-media { margin-bottom:12px; }
.catalog-section .pc-media .pc-plate { aspect-ratio:4/5; border-radius:10px; }
.catalog-section .pc-body { padding:0 2px; gap:4px; }
.catalog-section .pc-body .pc-price { align-items:baseline; min-height:32px; row-gap:4px; }
.catalog-section .pc-body .pc-price.has-was { max-height:none; overflow:visible; row-gap:4px; }
.catalog-section .pc-title { font-size:16px; line-height:1.35; min-height:2.7em; margin:9px 0 6px; font-weight:650; }
.catalog-section .pc-body .pc-kind { color:#bdcce0; font-size:12px; letter-spacing:0; text-transform:none; font-weight:500; }
.catalog-section .pc-body .pc-price b { font-size:23px; letter-spacing:-.025em; font-weight:750; font-variant-numeric:tabular-nums; }
.catalog-section .pc-body .pc-lead { color:#bdcde1; font-size:13px; line-height:1.55; }
.catalog-section :is(.pc-oos,.pc-stock,.pc-minlot,.pc-geo,.pc-ship) { font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.catalog-section .pc-body .pc-specs { gap:5px; }
.catalog-section .pc-body .pc-specs .is-sku { white-space:normal; overflow-wrap:anywhere; }
.catalog-section .pc-body .pc-vars { gap:6px; padding-bottom:4px; margin-top:10px; }
.catalog-section .pc-body .pc-var { min-height:44px; padding:9px 10px; border-radius:9px; font-size:13px; background:#102c4d; border-color:rgba(164,197,230,.3); }
.catalog-section .pc-body .pc-var.is-on { background:#d6ebf9; color:#09233e; border-color:transparent; }
.catalog-section .pc-acts { gap:8px; padding:14px 2px 2px; margin-top:auto; }
.catalog-section .pc-acts .pc-add { min-height:44px; border-radius:12px; background:#50bce9; color:#082039; border-color:transparent; font-weight:750; font-size:14px; box-shadow:none; }
.catalog-section .pc-acts .pc-add:hover { background:#78d0f4; }
.catalog-section .pc-acts .pc-add[aria-pressed="true"] { background:#b9e2cf; color:#103a2b; }
.catalog-section .pc-acts .pc-count { min-height:44px; border-radius:12px; border-color:rgba(164,197,230,.28); background:#0a203c; }
.catalog-section .pc-step { width:44px; color:#bed3e7; }
.catalog-section :is(.pc-var,.pc-add,.pc-more):focus-visible { outline:2px solid #a0dfff; outline-offset:3px; }
body:has(main .catalog-section) #order-dialog {
  width:min(600px,calc(100% - 32px)); max-height:calc(100dvh - 32px);
  padding:28px; border:1px solid var(--shop-stroke); border-radius:20px;
  background:var(--shop-surface); color:var(--shop-text); overflow-y:auto;
  overscroll-behavior:contain; box-shadow:0 24px 80px rgba(0,8,20,.45);
}
body:has(main .catalog-section) #order-dialog .dialog-close { width:44px; height:44px; right:8px; top:8px; border-radius:10px; }
body:has(main .catalog-section) #order-dialog h2 { margin:12px 32px 10px 0; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
body:has(main .catalog-section) #order-dialog > p { font-size:14px; line-height:1.55; color:var(--shop-secondary); }
body:has(main .catalog-section) #order-dialog .order-list { margin:14px 0; font-size:13px; line-height:1.5; border-color:var(--shop-stroke); }
body:has(main .catalog-section) #order-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body:has(main .catalog-section) #order-form > :is(label:nth-of-type(3),label:has(textarea),.consent,button,.crm-error,.pay-offer) { grid-column:1 / -1; }
body:has(main .catalog-section) #order-form label { font-size:13px; line-height:1.45; color:var(--shop-secondary); }
body:has(main .catalog-section) #order-form input:not([type=checkbox]) { min-height:44px; font-size:16px; padding:10px 12px; border-radius:10px; border-color:var(--shop-stroke); background:#0a203b; }
body:has(main .catalog-section) #order-form textarea { min-height:88px; max-height:220px; line-height:1.5; }
body:has(main .catalog-section) #order-form .consent { min-height:44px; align-items:flex-start; padding:8px 0; }
body:has(main .catalog-section) #order-form .consent input { flex:none; width:18px; height:18px; margin:1px 3px 0 0; accent-color:var(--cyan); }
body:has(main .catalog-section) #order-form .consent a { text-decoration:underline; text-underline-offset:3px; }
.catalog-section .pc-badge.is-sale { background:#2d2b26; color:#f7dfaa; box-shadow:inset 0 0 0 1px rgba(233,202,131,.3); }
.catalog-section .pc-badge.is-sale::before { background:#e9ca83; box-shadow:none; }
body:has(main .catalog-section) :is(.pc-badge,.gzp-badge)::after { animation:none; background:none; }
body:has(main .catalog-section) :is(.pc-badge,.gzp-badge)::before { animation:none; box-shadow:none; }
body:has(main .catalog-section) .global-footer .footer-shell { border-top:1px solid rgba(164,197,230,.2); padding-top:36px; }
body:has(main .catalog-section) .global-footer :is(.footer-nav a,.footer-contact a) { font-size:14px; line-height:1.7; }
body:has(main .catalog-section) .global-footer .footer-tagline { width:auto; max-width:250px; font-size:12px; line-height:1.45; letter-spacing:.02em; }
@media (min-width:981px) {
  .catalog-section .cat-layout { grid-template-columns:244px minmax(0,1fr); gap:24px; }
}
@media (max-width:720px) {
  body:has(main .catalog-section) .chem-hero-banner { padding-top:88px; }
  body:has(main .catalog-section) .hero-slide-text { padding:12px 2px 0; gap:7px; }
  body:has(main .catalog-section) .hero-slide-text strong { font-size:24px; line-height:1.15; }
  body:has(main .catalog-section) .hero-slide-text p { font-size:13px; line-height:1.45; }
  body:has(main .catalog-section) .hero-dots { margin-top:0; }
  body:has(main .catalog-section) .gzp-terms { margin-top:12px; }
  body:has(main .catalog-section) .gzp-term { padding:12px; }
  body:has(main .catalog-section) .gzp-term-txt b { font-size:14px; }
  body:has(main .catalog-section) .chem-cats { padding-top:20px; padding-bottom:16px; }
  body:has(main .catalog-section) .chem-cat { flex-basis:80px; }
  body:has(main .catalog-section) .chem-cat-pic { width:60px; }
  body:has(main .catalog-section) #novinki { padding-top:8px; }
  body:has(main .catalog-section) #novinki .gzp-rail-wrap { gap:12px; }
  body:has(main .catalog-section) #novinki .gzp-side { display:grid; grid-template-columns:minmax(0,1fr) 100px; column-gap:12px; row-gap:6px; padding:12px; border-radius:16px; }
  body:has(main .catalog-section) #novinki .gzp-side > :is(.eyebrow,h2,p) { grid-column:1; }
  body:has(main .catalog-section) #novinki .gzp-side h2 { font-size:20px; line-height:1.2; }
  body:has(main .catalog-section) #novinki .gzp-side p { font-size:12px; line-height:1.45; }
  body:has(main .catalog-section) #novinki .gzp-side-media { grid-column:2; grid-row:1 / 4; align-self:stretch; min-height:116px; height:auto; margin:0; padding:8px; border-radius:10px; }
  body:has(main .catalog-section) #novinki .gzp-side-btn { min-height:44px; padding:9px 8px; font-size:12px; width:100%; text-align:center; }
  body:has(main .catalog-section) #novinki .gzp-rail { grid-auto-columns:minmax(228px,72%); gap:10px; }
  body:has(main .catalog-section) #novinki .gzp-card { padding:10px; gap:5px; border-radius:16px; }
  body:has(main .catalog-section) #novinki .gzp-card-link { display:grid; grid-template-columns:68px minmax(0,1fr); gap:4px 10px; align-items:start; }
  body:has(main .catalog-section) #novinki .gzp-card-pic { grid-row:1 / 3; aspect-ratio:3 / 4; margin:0; }
  body:has(main .catalog-section) #novinki .gzp-card-brand { font-size:12px; padding-right:30px; }
  body:has(main .catalog-section) #novinki .gzp-card-title { font-size:14px; min-height:2.7em; line-height:1.35; padding-right:24px; }
  body:has(main .catalog-section) #novinki .gzp-card-meta { font-size:12px; }
  body:has(main .catalog-section) #novinki .gzp-card-price { margin-top:2px; }
  body:has(main .catalog-section) #novinki .gzp-add { min-height:44px; padding:8px 12px; }
  .catalog-section.section { padding-top:28px; }
  body:has(main .catalog-section) .catalog-section .section-heading { margin-bottom:18px; }
  .catalog-section .section-heading h2 { font-size:28px; }
  .catalog-section .catalog-tools { gap:10px; margin-bottom:16px; }
  .catalog-section .catalog-search { flex-basis:100%; }
  .catalog-section #catalog-q { min-height:50px; }
  .catalog-section #product-grid { gap:12px; }
  .catalog-section .pc { padding:9px; border-radius:16px; }
  .catalog-section .pc-media { margin-bottom:10px; }
  .catalog-section .pc-body { padding:0; gap:3px; }
  .catalog-section .pc-title { font-size:14px; line-height:1.4; min-height:2.8em; }
  .catalog-section .pc-body .pc-price { min-height:28px; gap:3px 6px; }
  .catalog-section .pc-body .pc-price b { font-size:19px; }
  .catalog-section .pc-body .pc-unit { font-size:11px; white-space:normal; }
  .catalog-section .pc-body .pc-kind { font-size:12px; }
  .catalog-section :is(.pc-minlot,.pc-geo,.pc-oos) { font-size:12px; }
  .catalog-section .pc-acts { padding:12px 0 0; }
  .catalog-section .pc-count .pc-qty { padding:0; font-size:14px; }
  .catalog-section .pc-acts .pc-add { font-size:13px; padding:10px 7px; }
  .catalog-section .pc-body .pc-var { min-height:44px; padding:8px; font-size:12px; }
  body:has(main .catalog-section) #order-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); padding:22px 18px; border-radius:16px; }
  body:has(main .catalog-section) #order-dialog h2 { font-size:26px; }
  body:has(main .catalog-section) #order-form { grid-template-columns:minmax(0,1fr); gap:10px; }
  body:has(main .catalog-section) #order-form textarea { min-height:80px; }
}
@media (max-width:359px) {
  body:has(main .catalog-section) #novinki .gzp-side { grid-template-columns:minmax(0,1fr) 88px; gap:6px 9px; }
  body:has(main .catalog-section) #novinki .gzp-side h2 { font-size:18px; }
  .catalog-section #product-grid { gap:8px; }
  .catalog-section .pc { padding:7px; }
}

@media (prefers-reduced-motion:reduce) {
  body:has(main .catalog-section) :is(.pc,.hero-slide,.hero-track,.gzp-card,.reveal) { transition:none; animation:none; }
  body:has(main .catalog-section) .reveal { opacity:1; transform:none; }
}

/* Short mobile basket glass: one facts line, one action line; preserve DOM order. */
@media (max-width:720px) {
  body:has(main .catalog-section) .selection-bar:not([hidden]) {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 44px;
    grid-template-rows:20px 44px;
    gap:4px 6px;
    left:12px;
    right:auto;
    width:min(360px,calc(100vw - 96px));
    max-width:360px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    padding:7px 9px;
    border-radius:22px;
    transform:none;
    align-items:center;
  }
  body:has(main .catalog-section) .selection-bar > div:first-child {
    grid-column:1;
    grid-row:1;
    min-width:0;
    gap:4px;
  }
  body:has(main .catalog-section) .selection-bar > div:first-child strong { font-size:13px; line-height:20px; }
  body:has(main .catalog-section) .selection-bar > div:first-child b { font-size:14px; }
  body:has(main .catalog-section) #selection-sum {
    grid-column:2 / 4;
    grid-row:1;
    justify-self:end;
    min-width:0;
    font-size:14px;
    line-height:20px;
    font-variant-numeric:tabular-nums;
  }
  body:has(main .catalog-section) .selection-bar .cart-link {
    grid-column:1 / 3;
    grid-row:2;
    min-width:0;
    min-height:44px;
    padding:9px 10px;
    font-size:13px;
    line-height:1.25;
  }
  body:has(main .catalog-section) .selection-bar .selection-clear {
    grid-column:3;
    grid-row:2;
    position:static;
    width:44px;
    height:44px;
    min-height:44px;
    margin:0;
    border-radius:50%;
    font-size:22px;
  }
}

/* ============================================================
   PREMIUM v2 · «дороже и лаконичнее» (21.10.2026)
   Слой поверх всего, что выше: меньше цвета и рамок, больше воздуха,
   один акцент на кнопке. Блок самодостаточный — чтобы откатить,
   достаточно удалить его целиком.
   ============================================================ */
:root{
  --pm-bg:#030d1f;
  --pm-surface:#071935;
  --pm-surface-2:#0a2042;
  --pm-hair:rgba(160,200,255,.09);
  --pm-hair-2:rgba(160,200,255,.16);
  --pm-text:#eef4ff;
  --pm-soft:#8ea4c4;
  --pm-accent:#1f8bff;
}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(31,139,255,.16),transparent 60%),
    radial-gradient(900px 500px at -10% 30%,rgba(69,187,255,.07),transparent 60%),
    var(--pm-bg) fixed;
}
.grid-bg{background-image:none}

/* Заголовки секций: спокойнее и плотнее, без крика */
.section-heading h2,.usage h2,.quality h2,.gzp-rail-sec h2,.gzp-season h2,.gzp-journal h2,.gzp-brands h2,.chem-faq h2,.chem-cats h2{
  font-weight:800;letter-spacing:-.035em}
.eyebrow{color:#7fc4ff;letter-spacing:.22em;font-weight:800}

/* ---------- Карточка товара ---------- */
.catalog-section .pc,.pc{
  padding:10px 10px 12px;border-radius:20px;gap:0;
  background:var(--pm-surface);
  border:1px solid var(--pm-hair);
  box-shadow:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s,background .35s}
.catalog-section .pc:hover,.pc:hover{
  transform:translateY(-4px);background:var(--pm-surface-2);
  border-color:var(--pm-hair-2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(31,139,255,.12)}
.pc.selected{border-color:rgba(49,216,137,.55);box-shadow:0 0 0 1px rgba(49,216,137,.35)}

/* Снимок — на светлой студийной подложке, квадрат, без теней и сеток */
.pc-media{margin:0 0 14px}
.pc-media .pc-plate{
  aspect-ratio:1/1;border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#eef3f9);
  box-shadow:inset 0 0 0 1px rgba(10,40,80,.04)}
.pc-media .pc-plate img{max-width:78%;max-height:78%;filter:none;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pc:hover .pc-media .pc-plate img{transform:scale(1.04)}

.pc-body{display:flex;flex-direction:column;padding:0 6px}
.pc-head{order:0;margin:0 0 4px;min-height:14px}
.pc-head .pc-brand,.pc-head [class*=brand]{margin-left:0;color:var(--pm-soft);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.pc-title{margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.005em;
  color:var(--pm-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc-title a:hover{color:#fff}
.pc-rate{margin:0 0 6px;font-size:11.5px}
.pc-rate .pc-stars{--s:11px}
.pc-price{margin:4px 0 0;gap:8px}
.pc-price b{font-size:20px;font-weight:800;letter-spacing:-.025em}
.pc-unit{color:var(--pm-soft);font-weight:600;font-size:11.5px}

/* Фасовки — тихие сегменты, выбранная подсвечена тонко */
.pc-vars{gap:4px;margin-top:12px}
.pc-var{padding:5px 9px;border:1px solid var(--pm-hair-2);border-radius:999px;background:transparent;
  color:#b9c9df;font-size:11px;font-weight:600}
.pc-var:hover{border-color:rgba(127,196,255,.5);color:#fff}
.pc-var.is-on{background:var(--pm-text);border-color:var(--pm-text);color:#06152e}

/* Действия — одна кнопка, без разделительной линии */
.pc-acts{padding:14px 6px 0;border-top:0;gap:6px}
.pc-add{height:42px;border-radius:12px;background:var(--pm-accent);font-size:13px;font-weight:700;letter-spacing:.01em;
  transition:background .25s,transform .25s}
.pc-add:hover{background:#3d9cff}
.pc-more{height:42px;border-radius:12px;background:transparent;border:1px solid var(--pm-hair-2);color:#cfdcf0;font-weight:600}
.pc.selected .pc-add{background:var(--green);color:#04281a}

/* Лента «Новинки» и сезон — тот же язык, что у каталога */
.gzp-card{border-radius:20px;background:var(--pm-surface);border:1px solid var(--pm-hair);box-shadow:none}
.gzp-card:hover{background:var(--pm-surface-2);border-color:var(--pm-hair-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.gzp-card-pic{border-radius:14px;background:linear-gradient(180deg,#ffffff,#eef3f9)!important}
.gzp-card-brand{color:var(--pm-soft);letter-spacing:.12em}
.gzp-card-title{font-weight:600}
.gzp-card-price b{font-weight:800;letter-spacing:-.025em}

/* Фильтры каталога — легче */
.catalog-section aside,.catalog-section [class*=filters]{border-color:var(--pm-hair)}

@media(max-width:720px){
  .pc-title{font-size:14px}
  .pc-price b{font-size:18px}
  .pc-add{height:40px}
}
@media(prefers-reduced-motion:reduce){
  .pc,.pc-media .pc-plate img{transition:none}
  .pc:hover{transform:none}
  .pc:hover .pc-media .pc-plate img{transform:none}
}
/* Лаконично и в лентах: без «нет отзывов» и без строки артикула */
.pc-rate.is-empty,.gzp-card .pc-rate.is-empty{display:none}
.gzp-card-meta,.gzp-card-spec{display:none}
/* Премиум-слой для каталога: та же специфичность, что у блока выше,
   кнопка и цели нажатия 44 px — как были (фирменный CTA #50bce9). */
.catalog-section .pc{padding:10px 10px 12px;border-radius:20px;background:var(--pm-surface);border-color:var(--pm-hair);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s,background-color .25s,box-shadow .35s}
.catalog-section .pc:hover{transform:translateY(-3px);background:var(--pm-surface-2);border-color:var(--pm-hair-2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.catalog-section .pc-media{margin-bottom:14px}
.catalog-section .pc-media .pc-plate{aspect-ratio:1/1;border-radius:14px}
.catalog-section .pc-body{padding:0 6px;gap:0}
.catalog-section .pc-head{margin:0 0 6px}
.catalog-section .pc-head .pc-brand-mark{height:12px;width:auto;opacity:.75}
.catalog-section .pc-title{font-size:15px;line-height:1.35;min-height:2.7em;margin:0 0 10px;font-weight:600;color:var(--pm-text)}
.catalog-section .pc-body .pc-price{min-height:0}
.catalog-section .pc-body .pc-price b{font-size:21px;font-weight:800}
.catalog-section .pc-body .pc-vars{gap:6px;margin-top:12px;padding-bottom:0}
.catalog-section .pc-body .pc-var{min-height:34px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:transparent;border-color:var(--pm-hair-2);color:#c3d2e6}
.catalog-section .pc-body .pc-var:hover{border-color:rgba(127,196,255,.55);color:#fff}
.catalog-section .pc-body .pc-var.is-on{background:var(--pm-text);color:#06152e}
.catalog-section .pc-acts{padding:14px 6px 2px}
@media (pointer:coarse){.catalog-section .pc-body .pc-var{min-height:44px}}
/* Плитка v3: описание, цена со скидкой, бонус Coin (21.10.2026) */
.catalog-section .pc-body .pc-lead{margin:-4px 0 10px;color:var(--pm-soft);font-size:12.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.catalog-section .pc-body .pc-price{flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.catalog-section .pc-body .pc-price.has-was b{color:#ffd27a}
.catalog-section .pc-body .pc-price s{color:#7f95b4;font-size:13px;font-weight:600}
.catalog-section .pc-body .pc-pct{padding:2px 7px;border-radius:999px;background:rgba(255,120,90,.16);color:#ff9d84;
  font-size:11.5px;font-weight:800;font-style:normal}
.pc-coin{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:8px 0 0;padding:4px 10px 4px 5px;
  border-radius:999px;background:linear-gradient(90deg,rgba(255,206,84,.16),rgba(255,206,84,.05));
  box-shadow:inset 0 0 0 1px rgba(255,206,84,.25);color:#e9d7a8;font-size:11.5px;font-weight:600;white-space:nowrap}
.pc-coin img{width:16px;height:16px}
.pc-coin b{color:#ffd76a;font-weight:800}
.catalog-section .pc .pc-offer-c{display:none}

/* ---------- Плашка «Новинка» (21.10.2026) ----------
   Фирменный градиент, звёздочка вместо точки, мягкое свечение. */
html body :is(.pc-badge.is-new,.gzp-badge){
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 9px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#5fe0ff 0%,#1f8bff 55%,#6a5cff 100%);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:none;line-height:1;
  box-shadow:0 6px 16px -6px rgba(31,139,255,.85),inset 0 1px 0 rgba(255,255,255,.35);backdrop-filter:none}
html body :is(.pc-badge.is-new,.gzp-badge)::before{content:"✦";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  font-size:10px;color:#fff;opacity:1;animation:none;transform:none}
html body :is(.pc-badge.is-new,.gzp-badge)::after{display:none}