/* ============================================================
   ШАПКА МАГАЗИНА — одна строка
   Разметку кладёт tools/chemistry-shop-header.py, поведение —
   geizer-chemistry/shop-head.js. Файл подключается ПОСЛЕДНИМ,
   после shared/*-cohesion.css: иначе общесайтовая шапка (прозрачный
   фон, логотип 44px, скрытая кнопка меню) перебивает магазинную.

   РЕШЕНИЕ ВЛАДЕЛЬЦА 11.09.2026: «это отдельная страница от франшизы и
   оборудования, тут будут свои кнопки в шапке; не стоит оставлять что
   есть; кнопку "Стать партнёром" оставить можно».

   Что изменилось против прежней двухэтажной шапки:
     • второй строки разделов больше нет. Её восемь ссылок разошлись:
       Каталог — логотип и первый пункт меню, Новинки и Geizer Coin —
       меню, Корзина — иконка справа, Оплата/Доставка/Возврат — там же
       в меню и в правовом блоке страницы, Оборудование — меню;
     • поиск переехал из тела страницы (лежал ниже баннера и плиток) в
       шапку: на витрине сюда переносится тот же самый узел, а не копия,
       на остальных страницах стоит форма, уводящая на витрину с ?q=;
     • вход в кабинет франчайзи из магазина убран — покупка идёт без
       аккаунта, и дверь с чужим ключом только мешала. «Стать
       партнёром» остаётся (решение владельца);
     • меню сайта, язык и телефон уходят за одну кнопку на ЛЮБОЙ
       ширине, а не только на телефоне.

   Клиренс под шапку. Шапка position:fixed, места в потоке не занимает.
   Раньше отступ давала строка разделов (margin-top:82px), теперь —
   сами страницы: .pdp/.cartp и баннер витрины (в конце файла). Высота
   шапки живёт в --shophead, чтобы не разъезжаться.
   ============================================================ */

/* Высота строки и ширина её содержимого.
   76, а не 64: знак владельца двухэтажный — машина, GEIZER и подпись
   MARKETPLACE, — и мельче 56 px подпись перестаёт читаться.

   Ширина колонки — ровно та же, что у блоков страницы: 1240 (--max в
   styles.css) с полем 28 по краям, как у .chem-hero-banner
   (width: min(var(--max), calc(100% - 56px))). Сначала здесь стояло
   1100, и на широком экране знак с иконками оказывался внутри баннера,
   на 70 px от его краёв — шапка читалась как отдельная плашка, а не как
   строка над страницей. Теперь левый край знака совпадает с левым краем
   баннера и сетки, правый край кнопки меню — с их правым
   (решение владельца 11.09.2026: «расположение иконок по ширине блоков»).

   На телефоне поле меньше: там в строке три кнопки по 44 px и поиск, и
   28 px по краям забирают у поиска почти столько же, сколько он имеет. */
:root { --shophead: 76px; --shopline: 1240px; --shopgutter: 28px; }
/* На узком экране блоки страницы стоят с полем 18 (styles.css: у
   баннера там width: min(100% - 36px, --max)) — шапка держит то же. */
@media (max-width: 640px) { :root { --shopgutter: 18px; } }

/* ---------- сама строка ---------- */
/* Стекло, а не плита. На Главной шапка прозрачная, и магазин, где она
   была залита глухим синим, читался как другой сайт. Здесь тот же
   приём: полупрозрачный фон с размытием, тонкая линия снизу и чуть
   больше плотности после прокрутки — чтобы товар не просвечивал сквозь
   надписи. Насыщенность поднимаем: без неё размытое изображение под
   стеклом сереет. */
.site-header[data-page="chemistry"] {
  height: var(--shophead) !important;
  padding-inline: max(var(--shopgutter), calc((100% - var(--shopline)) / 2)) !important;
  gap: 12px !important;
  background: linear-gradient(180deg, rgba(7, 24, 51, .72), rgba(6, 20, 44, .58)) !important;
  border-bottom: 1px solid rgba(120, 190, 255, .14);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  z-index: 80;
}
.site-header[data-page="chemistry"].is-scrolled {
  background: linear-gradient(180deg, rgba(7, 24, 51, .92), rgba(6, 20, 44, .86)) !important;
  border-bottom-color: rgba(120, 190, 255, .2);
  box-shadow: 0 14px 34px rgba(2, 10, 24, .42);
}
/* Браузеру без backdrop-filter (старый Firefox с выключенным флагом)
   отдаём плотный фон: полупрозрачная шапка без размытия — это текст
   поверх фотографии. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-header[data-page="chemistry"] { background: rgba(6, 21, 46, .96) !important; }
}
/* Шапку магазина не прячем при прокрутке вниз: в ней поиск и корзина,
   и они нужны в любой момент, а не только у верха страницы. */
.site-header[data-page="chemistry"].header-hidden { transform: none !important; }

/* ---------- логотип с подписью раздела ---------- */
/* Локап магазина: фирменный знак и подпись MARKETPLACE под ним —
   как в макете владельца, но знак векторный, а подпись живой текст.
   Растровый локап целиком в строке шапки мылил: подпись в нём занимает
   десятую долю высоты, то есть четыре пикселя. */
.site-header[data-page="chemistry"] .site-logo {
  order: 1;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto !important;
}
/* Знак магазина — макет владельца целиком (машина, GEIZER,
   MARKETPLACE), векторизованный. 40 px в строке 64: по 12 px воздуха
   сверху и снизу.
   !important: header-cohesion.css задаёт всем логотипам сайта 44px
   тем же способом, а этот файл подключается позже. */
.site-header[data-page="chemistry"] .site-logo img {
  height: 56px !important;
  width: auto !important;
  clip-path: none !important;
}
.site-header[data-page="chemistry"] .site-logo:hover img { opacity: .88; }

/* Подпись для незрячих. В каталоге такое правило есть в styles.css, но
   шапка магазина стоит и на страницах, которые его не грузят (правила
   Geizer Coin), — и подпись поля поиска там вылезала словами слева от
   поля. Правило дублируем здесь: шапка обязана быть самодостаточной. */
.site-header[data-page="chemistry"] .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- поиск ---------- */
.site-header[data-page="chemistry"] .catalog-search {
  order: 2;
  position: relative;
  flex: 1 1 220px;
  /* Уже, чем было: широкое поле растаскивало логотип и иконки по краям
     строки. 520 хватает под «Название или артикул» и подсказку. */
  max-width: 520px;
  display: flex;
  align-items: center;
  /* Заготовка — <form>, а формам на страницах магазина заданы свои
     отступы и рамка: без обнуления строка поиска в шапке оказывается
     на 5px выше поля и съезжает по вертикали. */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.site-header[data-page="chemistry"] .catalog-search input {
  width: 100%;
  height: 40px;
  /* 16px — не прихоть: на iOS поле меньше 16px при фокусе зумит всю
     страницу, и человек оказывается в шапке, увеличенной вдвое. */
  font-size: 16px;
  padding: 0 38px 0 38px;
  border: 1px solid rgba(120, 190, 255, .22);
  border-radius: 12px;
  background: #0b2852;
  color: #fff;
  outline: none;
  min-width: 0;
}
.site-header[data-page="chemistry"] .catalog-search input::placeholder { color: #8aa4c6; }
.site-header[data-page="chemistry"] .catalog-search input:focus {
  border-color: var(--cyan, #45bbff);
  box-shadow: 0 0 0 3px rgba(69, 187, 255, .18);
}
.site-header[data-page="chemistry"] .catalog-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
}
.site-header[data-page="chemistry"] .catalog-search-ic {
  position: absolute;
  left: 12px;
  width: 17px; height: 17px;
  fill: none; stroke: #8aa4c6; stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
.site-header[data-page="chemistry"] .catalog-search-clear {
  position: absolute;
  right: 6px;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #a7bcd8;
  font-size: 19px; line-height: 1;
  cursor: pointer;
}
.site-header[data-page="chemistry"] .catalog-search-clear:hover { background: #123a6d; color: #fff; }
.site-header[data-page="chemistry"] .catalog-search-clear[hidden] { display: none; }
/* Поле уехало в шапку — на его месте в теле витрины остаётся только
   сортировка. Пустой контейнер убираем, иначе он держит отступ. */
.catalog-tools:empty { display: none; }

/* ---------- кнопки справа ---------- */
/* «Стать партнёром» остаётся по решению владельца, но в магазине это не
   главное действие: главное — корзина. Поэтому золотую заливку с
   Главной здесь снимаем и оставляем тихий контур. Один акцент на
   строку, и он у корзины. */
.site-header[data-page="chemistry"] .hub-join {
  order: 3;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  border: 1px solid rgba(120, 190, 255, .32) !important;
  color: #cfe2fb !important;
  font-size: 13px;
  box-shadow: none !important;
}
.site-header[data-page="chemistry"] .hub-join:hover {
  border-color: var(--cyan, #45bbff) !important;
  color: #fff !important;
}
/* Поиск толкает правый блок к правому краю: без этого строка
   обрывалась за 200 px до края, и шапка казалась сдвинутой влево. */
.site-header[data-page="chemistry"] .catalog-search { margin-inline-end: auto; }

/* Кабинет покупателя. Это и есть «вход» магазина: не учётная запись с
   паролем, а свои заказы и свой баланс Geizer Coin по номеру телефона и
   номеру заказа (см. api/account.php). Кнопка тихая — покупать можно и
   без неё, и мешать корзине она не должна. */
.shop-acc {
  order: 4;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(120, 190, 255, .22);
  border-radius: 12px;
  color: #cfe2fb;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.shop-acc svg { width: 19px; height: 19px; flex: 0 0 auto; }
.shop-acc:hover { border-color: var(--cyan, #45bbff); color: #fff; }
.shop-acc:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.shop-acc.is-here { border-color: rgba(69, 187, 255, .5); color: var(--cyan, #45bbff); }
@media (max-width: 980px) {
  /* Сначала прячем слово, потом всю кнопку: в меню пункт «Кабинет»
     остаётся на любой ширине. */
  .shop-acc span { display: none; }
  .shop-acc { padding: 0 10px; }
}
@media (max-width: 720px) {
  .shop-acc { display: none; }
}

/* Один размер, один зазор, одна рамка. Было 36 / 40 / 42 px высотой, и
   к общему gap ещё прибавлялись собственные margin из cart.js и
   fav.js — строка выглядела собранной из разных наборов. */
.site-header[data-page="chemistry"] .gz-head-fav,
.site-header[data-page="chemistry"] .gz-head-cart {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-left: 0 !important;
  border-color: rgba(120, 190, 255, .22) !important;
  transition: border-color .16s ease, background .16s ease;
}
.site-header[data-page="chemistry"] .gz-head-fav { order: 5; }
.site-header[data-page="chemistry"] .gz-head-cart { order: 6; }
.site-header[data-page="chemistry"] .nav-toggle {
  order: 7;
  display: block !important;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  margin-left: 0;
  border-color: rgba(120, 190, 255, .22);
  background: transparent;
  transition: border-color .16s ease, background .16s ease;
}
.site-header[data-page="chemistry"] .nav-toggle:hover,
.site-header[data-page="chemistry"] .gz-head-fav:hover,
.site-header[data-page="chemistry"] .gz-head-cart:hover {
  border-color: var(--cyan, #45bbff);
  background: rgba(69, 187, 255, .08);
}
.site-header[data-page="chemistry"] .nav-toggle:focus-visible,
.site-header[data-page="chemistry"] .gz-head-fav:focus-visible,
.site-header[data-page="chemistry"] .gz-head-cart:focus-visible,
.site-header[data-page="chemistry"] .hub-join:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  /* Бургеру в navigation.css задан минимум 44×44 — правило
     доступности. Подтягиваем к нему и корзину с сердцем: корзину
     нажимают чаще всего, а она была самой мелкой. */
  .site-header[data-page="chemistry"] .gz-head-fav,
  .site-header[data-page="chemistry"] .gz-head-cart {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .site-header[data-page="chemistry"] .gz-head-fav svg,
  .site-header[data-page="chemistry"] .gz-head-cart svg { width: 21px !important; height: 21px !important; }
}
/* Телефон остаётся в разметке — из него header-login.js берёт номер для
   меню, — но в строке магазина ему места нет. */
.site-header[data-page="chemistry"] .phone { display: none !important; }
.site-header[data-page="chemistry"] .context-chip { display: none !important; }
/* Кнопки франшизы в магазине не показываем (см. shared/header-login.js);
   правило — страховка на случай, если скрипт однажды их поставит. */
.site-header[data-page="chemistry"] .hub-calc,
.site-header[data-page="chemistry"] .hub-login { display: none !important; }

@media (max-width: 1180px) {
  .site-header[data-page="chemistry"] .hub-join { display: none; }
}
@media (max-width: 720px) {
  .site-header[data-page="chemistry"] .site-logo img { height: 44px !important; }
}
@media (max-width: 430px) {
  /* На телефоне знак уступает место поиску: он и так узнаётся, а поле
     при трёх кнопках по 44 px (правило доступности) остаётся у́же ста
     пикселей. Каждый снятый пиксель знака идёт полю. */
  .site-header[data-page="chemistry"] .site-logo img { height: 36px !important; }
  .site-header[data-page="chemistry"] { gap: 6px !important; }
}
@media (max-width: 820px) {
  :root { --shophead: 64px; }
  .site-header[data-page="chemistry"] {
    height: var(--shophead) !important;
    /* Поле берём из --shopgutter, а не числом: иначе шапка на телефоне
       стоит по своим краям, а баннер и сетка — по своим, и логотип
       оказывается на шесть пикселей левее блока под ним. */
    padding-inline: var(--shopgutter) !important;
    gap: 8px !important;
  }
  .site-header[data-page="chemistry"] .catalog-search input { height: 36px; padding: 0 34px; }
  .site-header[data-page="chemistry"] .catalog-search-ic { left: 10px; width: 15px; height: 15px; }
  .site-header[data-page="chemistry"] .nav-toggle { flex: 0 0 38px; margin-left: 0; }
}
@media (max-width: 380px) {
  /* Порядок сжатия на самом узком экране: сначала воздух, потом подпись
     логотипа (уже скрыта), иконки не трогаем никогда — иначе корзина
     уедет за край, как это было в коммите 23cd390f. */
  /* Самые узкие телефоны (320 px). Здесь в строку не влезает всё сразу:
     знак 70 + поиск + три кнопки по 44 + поля = 339 при ширине 305, и
     кнопка меню уезжала за край — ровно то, что уже случалось в
     коммите 23cd390f. Поэтому тут alignment с блоками уступает: поле
     12, кнопки 38, знак ещё мельче. Иконки при этом остаются крупнее
     пальца, а за край не уходит ничего. */
  :root { --shopgutter: 12px; }
  .site-header[data-page="chemistry"] { gap: 6px !important; }
  .site-header[data-page="chemistry"] .site-logo img { height: 32px !important; }
  .site-header[data-page="chemistry"] .gz-head-fav,
  .site-header[data-page="chemistry"] .gz-head-cart,
  .site-header[data-page="chemistry"] .nav-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }
  .site-header[data-page="chemistry"] .catalog-search { min-width: 0; }
  .site-header[data-page="chemistry"] .catalog-search input { padding: 0 30px; }
}

/* ---------- выдвижное меню на любой ширине ----------
   В shared/navigation.css вся шторка объявлена внутри
   @media (max-width: 820px): на широком экране кнопка меню скрыта, а
   .hub-nav — горизонтальный ряд ссылок. В магазине меню нужно на всех
   ширинах, поэтому те же правила повторены здесь без медиазапроса и
   только для страниц с data-page="chemistry". */
.site-header[data-page="chemistry"] .hub-nav {
  position: fixed;
  top: var(--shophead);
  left: auto;
  /* Тот же отступ, что у шапки: иначе панель висит правее кнопки,
     которой открыта. */
  right: clamp(12px, 2.2vw, 28px);
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - var(--shophead) - 16px);
  overflow-y: auto;
  /* Иначе длинный пункт («Оборудование для мойки») растягивает сетку и
     под панелью появляется горизонтальная полоса прокрутки. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 75;
  padding: 14px;
  /* Две колонки нужны ровно для последней строки — язык слева, соцсети
     справа. Всё остальное растянуто на обе; dense разрешает сетке
     положить язык в уже начатую строку, хотя в разметке он идёт после
     соцсетей (порядок задаёт navigation.js, и менять его там ради
     магазина неправильно). */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-flow: row dense;
  gap: 4px;
  align-content: start;
  border: 1px solid rgba(120, 190, 255, .18);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  /* То же стекло, что у шапки: панель — её продолжение, а не отдельная
     плита поверх страницы. */
  background: linear-gradient(180deg, rgba(8, 27, 57, .92), rgba(6, 20, 44, .94));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 34px 80px rgba(0, 4, 14, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-header[data-page="chemistry"] .hub-nav > * { grid-column: 1 / -1; min-width: 0; }
.site-header[data-page="chemistry"].nav-open .hub-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.site-header[data-page="chemistry"] .nav-scrim,
.site-header[data-page="chemistry"] ~ .nav-scrim { inset: var(--shophead) 0 0; }

/* Мега-панели «Продукты» и «Блог» в магазине не открываем: их
   содержимое — разделы сайта, и они разложены простыми ссылками в
   блоке .shop-menu выше. Две системы меню в одной шторке — верный
   способ получить панель поверх панели. */
.site-header[data-page="chemistry"] .hub-nav .hub-node,
.site-header[data-page="chemistry"] .hub-nav .hub-market,
.site-header[data-page="chemistry"] .hub-nav .hub-home,
/* «Отзывы» и «Контакты» сайта стоят мелкими ссылками в нижнем блоке
   меню — те же адреса крупными кнопками были бы третьим повтором. */
.site-header[data-page="chemistry"] .hub-nav .hub-contacts,
.site-header[data-page="chemistry"] .hub-nav .hub-reviews { display: none !important; }
/* Низ панели: язык и соцсети в одной строке, как подвал у панели —
   раньше они шли двумя отдельными этажами и съедали 60 px. */
.site-header[data-page="chemistry"] .hub-nav .hub-social {
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
  grid-column: 2 !important;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 190, 255, .12);
}
.site-header[data-page="chemistry"] .hub-nav .hub-lang {
  justify-content: flex-start;
  gap: 4px;
  grid-column: 1 !important;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 190, 255, .12);
}
/* Телефон и «Стать партнёром» пунктами меню. В header-cohesion.css они
   показаны только до 1100px — там меню существует лишь на телефоне. В
   магазине меню одно на всех ширинах, значит и пункты нужны всегда. */
.site-header[data-page="chemistry"] .hub-nav .hub-phone-m,
.site-header[data-page="chemistry"] .hub-nav .hub-join-m {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.2;
}
.site-header[data-page="chemistry"] .hub-nav .hub-phone-m {
  font-weight: 700;
  color: #eaf2ff;
  border: 1px solid rgba(77, 145, 214, .32);
  background: rgba(8, 33, 70, .75);
}
.site-header[data-page="chemistry"] .hub-nav .hub-phone-m svg {
  width: 18px; height: 18px; flex: none; color: #ffc400;
}
.site-header[data-page="chemistry"] .hub-nav .hub-join-m {
  font-weight: 800;
  color: #14233f;
  background: linear-gradient(180deg, #ffe14a, #ffc400);
}
/* В строке кнопка уже есть — в меню она дубль и только мешает. */
@media (min-width: 1181px) {
  .site-header[data-page="chemistry"] .hub-nav .hub-join-m { display: none !important; }
}

/* ---------- блок магазина внутри меню ----------
   Три яруса вместо одного списка. Раньше все четырнадцать пунктов шли
   одинаковыми полосами: меню занимало полтора экрана телефона и
   прокручивалось, а главное в нём ничем не отличалось от служебного.
   Теперь шесть главных мест — плитками в два столбца (видно разом,
   попадает большой палец), условия — строкой, остальной сайт — мелкими
   ссылками в две колонки внизу. */
.shop-menu[hidden] { display: none; }
.shop-menu {
  display: grid;
  gap: 12px;
  margin-bottom: 10px;
}
.shop-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shop-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(120, 190, 255, .14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 54, 102, .62), rgba(11, 33, 68, .62));
  color: #eaf3ff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
/* Значок в подложке: без неё шесть контурных картинок висят в воздухе и
   плитки читаются как просто текст. */
.shop-tile svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(69, 187, 255, .12);
  color: #7fcaff;
}
.shop-tile:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(27, 70, 128, .8), rgba(14, 42, 84, .8));
  border-color: rgba(120, 190, 255, .38);
  color: #fff;
  box-shadow: 0 8px 20px rgba(2, 10, 24, .45);
}
.shop-tile:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.shop-tile.is-here {
  /* Двойная линия, а не чуть более светлая рамка: текущий раздел
     должен читаться сразу, иначе плитки все одинаковые. */
  border-color: rgba(69, 187, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(69, 187, 255, .32);
  background: linear-gradient(180deg, rgba(14, 62, 116, .85), rgba(10, 40, 82, .85));
  color: #fff;
}
.shop-tile.is-here svg { background: rgba(69, 187, 255, .22); color: var(--cyan, #45bbff); }

/* Заголовок группы с волоском вправо: разделяет ярусы, не занимая
   отдельной строки-разделителя. */
.shop-menu-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  color: #7f99bd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.shop-menu-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 190, 255, .22), rgba(120, 190, 255, 0));
}
.shop-menu-row { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-menu-row a {
  padding: 7px 11px;
  border: 1px solid rgba(77, 145, 214, .16);
  border-radius: 999px;
  background: rgba(8, 31, 67, .7);
  color: #c3d7f0;
  font-size: 12.5px;
}
.shop-menu-row a:hover { color: #fff; border-color: rgba(120, 190, 255, .38); }
.shop-menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.shop-menu-cols a {
  padding: 6px 2px;
  color: #b9cfea;
  font-size: 13px;
}
.shop-menu-cols a:hover { color: #fff; }

/* ============================================================
   МОНЕТА GEIZER COIN
   Стили лежат здесь, потому что этот файл подключён на всех страницах
   магазина — и в корзине, и в кабинете, и на странице правил. Заводить
   ради двух правил четвёртый css значило бы четвёртый запрос.

   Собственное золото приносит сама картинка. В CSS рядом с ней только
   приглушённый ореол: яркое золото #ffc400 на сайте занято кнопкой
   «Стать партнёром», и второй золотой акцент спорил бы с ней.
   ============================================================ */
.gz-coin {
  display: inline-block;
  vertical-align: -.18em;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  /* Объём вместо свечения: холодная тень даёт край на тёмном фоне,
     тёплая почти не видна и просто «нагревает» металл. */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45))
          drop-shadow(0 0 10px rgba(217, 184, 92, .18));
}

/* Крупная монета: экран «заказ принят» и страница правил. */
.gz-coin-hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 0 auto 10px;
}
.gz-coin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              rgba(217, 184, 92, .16), rgba(217, 184, 92, 0) 62%);
}
.gz-coin-hero img {
  position: relative;
  width: 96px;
  height: 96px;
  /* Наклон — статика, а не движение: при reduced-motion остаётся. */
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 18px rgba(4, 14, 32, .55));
}
@keyframes gz-coin-in {
  from { opacity: 0; transform: rotate(-8deg) translateY(8px) scale(.92); }
  to   { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1); }
}
.success:not([hidden]) .gz-coin-hero img {
  animation: gz-coin-in .32s cubic-bezier(.22, .61, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .success:not([hidden]) .gz-coin-hero img { animation: none; }
}

/* На странице правил монета крупнее и стоит слева от заголовка. */
.coin-hero-page {
  width: 168px;
  height: 168px;
  margin: 0 0 4px -8px;
}
.coin-hero-page img { width: 128px; height: 128px; }
@media (max-width: 640px) {
  .coin-hero-page { width: 120px; height: 120px; margin-left: -6px; }
  .coin-hero-page img { width: 92px; height: 92px; }
}

/* Блок на экране «заказ принят». */
.co-coins {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(120, 190, 255, .16);
  text-align: center;
}
.co-coins-main { margin: 0; color: #eaf3ff; font-size: 15px; font-weight: 600; line-height: 1.5; }
.co-coins-more { margin: 8px auto 0; max-width: 46ch; color: #9fb6d6; font-size: 12.5px; line-height: 1.55; }

/* Строка в корзине: монета, число, ссылка на правила. */
.cart-coins {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  color: #9fb6d6;
  font-size: 13.5px;
  line-height: 1.55;
}
.cart-coins a { color: var(--cyan, #45bbff); }
@media (max-width: 480px) {
  .cart-coins { font-size: 13px; }
}

/* Строка в окне оформления — только текст: на шаге заполнения формы
   ни картинки, ни ссылки наружу. */
.co-pre-coins {
  margin: 6px 0 0;
  color: #9fb6d6;
  font-size: 12.5px;
  line-height: 1.5;
}
.co-pre-coins[hidden] { display: none; }

/* ---------- клиренс под шапку ----------
   Раньше его давала строка разделов. Теперь — страницы: правило стоит
   позже product.css и cart.css, поэтому перебивает их собственные
   padding-top. Числа привязаны к --shophead. */
.pdp, .cartp { padding-top: calc(var(--shophead) + 26px) !important; }
.chem-hero-banner { padding-top: calc(var(--shophead) + 22px) !important; }
/* Липкая колонка фильтров стояла под двухэтажной шапкой (96px). */
.cat-side { top: calc(var(--shophead) + 14px); }
/* Прыжок по кругу категории не должен прятать заголовок под шапку. */
[id], .cat-anchor { scroll-margin-top: calc(var(--shophead) + 14px); }
@media (max-width: 820px) {
  .pdp, .cartp { padding-top: calc(var(--shophead) + 18px) !important; }
  .chem-hero-banner { padding-top: calc(var(--shophead) + 16px) !important; }
}