/* ============================================================
   nf-site.css — общий слой поверх design-tokens.css.
   Тут только то, чего нет в токенах и что иначе пришлось бы
   дублировать в 53 инлайновых <style>: доводка шапки и
   плавающих кнопок под светлую тему, чат-поплавок из
   feedback.js, компоненты страницы товара.
   Подключать ПОСЛЕ design-tokens.css и hero-s3.css.
   ============================================================ */

/* ---------- шапка ---------- */
/* design-tokens.css задаёт .site-head--solid{position:sticky} без top —
   без него sticky не липнет. */
.site-head--solid{ top:0 }
.site-head__logo{ white-space:nowrap }
/* Сплошная шапка в светлой теме: подложка и пилюли должны стать светлыми,
   иначе тёмная полоса висит над светлой страницей. */
html[data-theme="light"] .site-head--solid{
  background:rgba(255,255,255,.86); border-bottom-color:var(--nf-line); color:var(--nf-text);
}
html[data-theme="light"] .site-head--solid .pill{
  background:#fff; border-color:rgba(11,14,31,.20); color:var(--nf-text);
}
html[data-theme="light"] .site-head--solid .pill:hover{ background:#eef0f4 }
.site-head .pill:hover{ background:rgba(255,255,255,.12) }
.site-head .pill:focus-visible{ outline:2px solid var(--nf-blue-soft); outline-offset:2px }

/* ---------- плавающие кнопки ---------- */
/* Чат рисует feedback.js своим <style> (.nf-fb-fab), который попадает в <head>
   позже этого файла. Поэтому перебиваем через body.nf — специфичнее. */
body.nf .nf-fb-fab{
  left:24px; bottom:24px; width:56px; height:56px; border-radius:50%;
  background:rgba(11,14,31,.85); color:#fff; border:1px solid var(--nf-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--nf-shadow); font-size:22px;
}
body.nf .nf-fb-fab:hover{ transform:translateY(-2px) }
html[data-theme="light"] body.nf .nf-fb-fab{ background:#fff; color:var(--nf-text); border-color:rgba(11,14,31,.20) }
@media (max-width:640px){
  body.nf .nf-fb-fab{ left:14px; bottom:18px; width:50px; height:50px }
  .fab--cart{ right:14px; bottom:18px; width:50px; height:50px }
}

/* ---------- cookie-баннер ---------- */
.cookie__text{ flex:1 1 340px; min-width:240px; line-height:1.6 }
.cookie__btns{ display:flex; gap:8px; flex-wrap:wrap }
@media (max-width:640px){ .cookie__btns{ width:100% } .cookie__btns .btn{ flex:1 1 auto } }

/* ---------- страница товара ---------- */
.pg-head-sp{ height:0 }                      /* запас под sticky-шапку, если понадобится */
.crumbs a{ text-decoration:none }
/* Мобильная панель покупки: цена и «В корзину» всегда под рукой. */
.buybar{ display:none }
@media (max-width:760px){
  .buybar{
    display:flex; position:sticky; bottom:0; z-index:30; gap:12px; align-items:center;
    margin:20px -20px 0; padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:rgba(11,14,31,.92); border-top:1px solid var(--nf-line);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  html[data-theme="light"] .buybar{ background:rgba(255,255,255,.94) }
  .buybar__price{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums }
  .buybar .btn{ margin-left:auto; padding:13px 22px }
}
/* поплавки поднимаются над панелью покупки (класс ставит nf-site.js) */
@media (max-width:760px){
  body.nf-has-buybar .fab--cart{ bottom:96px }
  body.nf.nf-has-buybar .nf-fb-fab{ bottom:96px }
}

/* ---------- галерея «до / после» на главной ---------- */
.gallery-pair{ position:relative }
.gallery-pair__grid{ display:grid; grid-template-rows:1fr 1fr; height:100%; gap:2px }
.gallery-pair__half{ position:relative; overflow:hidden }
.gallery-pair__half img{ width:100%; height:100%; object-fit:cover; display:block }
.gallery-pair__cap{
  position:absolute; left:8px; top:8px; padding:4px 10px; border-radius:var(--nf-r-pill);
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--nf-overlay); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* подпись пары: сплошная плашка, а не градиент — белый текст на rgba(0,0,0,.75)
   держит 9:1 на любом кадре, у градиента в точке текста было ~2:1 */
.gallery-pair__title{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:12.5px; font-weight:700;
  background:rgba(0,0,0,.75); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff;
}

/* ---------- подвал ---------- */
.foot__copy{ margin-top:24px; font-size:13px; color:var(--nf-faint) }
html[data-theme="light"] .foot__copy{ color:var(--nf-muted) }  /* --nf-faint давал 3.04:1 */
/* на юридических страницах есть правило p{color:rgba(255,255,255,.78)} — оно
   специфичнее наследования от .foot и в светлой теме делало подвал невидимым */
.foot p, .foot li{ margin:0; color:var(--nf-muted); font-size:14px }
.foot__grid a{ text-decoration:underline; text-underline-offset:3px }

/* ---------- светлая тема: доводка компонентов из design-tokens.css ----------
   Токены рассчитаны на тёмную базу, часть цветов там задана «на белый текст».
   Ниже — только те места, где в светлой теме контраст падал ниже 4.5:1.
   Посчитано 03.09.2026: --nf-blue на белом 7.0:1, --nf-red на белом 4.86:1. */
html[data-theme="light"] .badge--blue{
  color:var(--nf-blue); border-color:rgba(42,72,214,.45); background:rgba(42,72,214,.08);
}
html[data-theme="light"] .badge--red{
  color:var(--nf-red); border-color:rgba(200,67,60,.45); background:rgba(200,67,60,.08);
}
html[data-theme="light"] .badge{ color:var(--nf-text) }
html[data-theme="light"] .trust__icon{ color:var(--nf-blue) }
html[data-theme="light"] .cookie{ background:rgba(255,255,255,.96) }
html[data-theme="light"] .cookie a{ color:var(--nf-blue) }
html[data-theme="light"] .fab{ background:#fff; color:var(--nf-text); border-color:rgba(11,14,31,.20) }
html[data-theme="light"] .pcard__media{
  background:radial-gradient(ellipse 80% 60% at 50% 70%,#e8edf5,#f4f6fa);
}
html[data-theme="light"] .overlay-pill{ color:#fff }

/* счётчик корзины прячется, пока корзина пуста */
.fab__count{ display:none }
.fab__count.show{ display:grid }
