/** Shopify CDN: Minification failed

Line 56:0 All "@import" rules must come first

**/
/* ==========================================================================
   NFO redesign — базовый слой токенов
   Снято с nfo.ru (04.09.2026). Подключается первым, до секционных стилей.
   ========================================================================== */

:root {
  /* --- Типографика ------------------------------------------------------ */
  --nfo-font: "Golos Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* --- Палитра --------------------------------------------------------- */
  --nfo-ink:          #222228; /* заголовки */
  --nfo-body:         #555558; /* основной текст */
  --nfo-muted:        #8B8B90; /* подписи, даты */
  --nfo-brand:        #00263E; /* кнопки, тёмно-синий блок */
  --nfo-brand-hover:  #003656;
  --nfo-accent:       #516AEB; /* акцентный синий (проценты, ссылки) */
  --nfo-sale:         #F5334F; /* бейдж скидки */
  --nfo-ok:          #16A34A; /* «в наличии» */
  --nfo-line:         #D7D8DA; /* бордеры инпутов */
  --nfo-line-soft:    #EDEDEF; /* разделители */
  --nfo-surface:      #F4F5F6; /* серые плитки/подложки */
  --nfo-white:        #FFFFFF;

  /* --- Сетка ------------------------------------------------------------ */
  --nfo-container:    1360px;
  --nfo-gutter:       32px;
  --nfo-gutter-m:     16px;

  /* --- Формы ------------------------------------------------------------ */
  --nfo-radius:       6px;
  --nfo-radius-lg:    12px;
  --nfo-radius-card:  16px;
  --nfo-control-h:    44px;

  /* --- Тени ------------------------------------------------------------- */
  --nfo-shadow-1:     0 2px 8px rgba(34, 34, 40, .06);
  --nfo-shadow-2:     0 8px 24px rgba(34, 34, 40, .10);

  /* --- Анимации --------------------------------------------------------- */
  --nfo-ease:         cubic-bezier(.25, .46, .45, .94);
  --nfo-dur:          .25s;

  /* --- Высоты хедера (нужны баннеру для отрицательного отступа) --------- */
  --nfo-header-h:     88px;
  --nfo-header-h-m:   64px;
}

/* Шрифт: Golos Text 400/500/600/700 — как на nfo.ru.
   Если тема уже подключает шрифты через Shopify font_picker, этот @import
   можно перенести в layout/theme.liquid тегом <link rel=preload>. */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap");

/* --- Контейнер ---------------------------------------------------------- */
.nfo-container {
  width: 100%;
  max-width: var(--nfo-container);
  margin-inline: auto;
  padding-inline: var(--nfo-gutter);
  box-sizing: border-box;
}
@media (max-width: 749px) {
  .nfo-container { padding-inline: var(--nfo-gutter-m); }
}

/* --- Типографические классы -------------------------------------------- */
.nfo-h1 { font: 500 48px/56px var(--nfo-font); color: var(--nfo-ink); margin: 0; letter-spacing: 0; }
.nfo-h2 { font: 500 24px/32px var(--nfo-font); color: var(--nfo-ink); margin: 0; }
.nfo-h3 { font: 500 18px/26px var(--nfo-font); color: var(--nfo-ink); margin: 0; }
.nfo-text { font: 400 16px/24px var(--nfo-font); color: var(--nfo-body); margin: 0; }
.nfo-small { font: 400 13px/18px var(--nfo-font); color: var(--nfo-muted); margin: 0; }

@media (max-width: 989px) { .nfo-h1 { font-size: 36px; line-height: 44px; } }
@media (max-width: 749px) { .nfo-h1 { font-size: 28px; line-height: 34px; } .nfo-h2 { font-size: 20px; line-height: 28px; } }

/* --- Кнопки ------------------------------------------------------------- */
.nfo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--nfo-control-h);
  padding: 1px 20px;
  border: 1px solid transparent;
  border-radius: var(--nfo-radius);
  font: 500 15px/20px var(--nfo-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nfo-dur) var(--nfo-ease),
              color var(--nfo-dur) var(--nfo-ease),
              border-color var(--nfo-dur) var(--nfo-ease);
}
.nfo-btn--primary { background: var(--nfo-brand); color: var(--nfo-white); }
.nfo-btn--primary:hover { background: var(--nfo-brand-hover); color: var(--nfo-white); }

.nfo-btn--white { background: var(--nfo-white); color: var(--nfo-brand); }
.nfo-btn--white:hover { background: #F0F2F4; }

.nfo-btn--outline { background: transparent; color: var(--nfo-ink); border-color: var(--nfo-line); }
.nfo-btn--outline:hover { border-color: var(--nfo-ink); }

.nfo-btn--outline-white { background: transparent; color: var(--nfo-white); border-color: rgba(255,255,255,.6); }
.nfo-btn--outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --- Круглые кнопки навигации карусели (стрелки как на nfo.ru) ---------- */
.nfo-nav-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nfo-line);
  border-radius: 50%;
  background: var(--nfo-white);
  color: var(--nfo-ink);
  cursor: pointer;
  transition: border-color var(--nfo-dur) var(--nfo-ease), opacity var(--nfo-dur);
}
.nfo-nav-btn:hover { border-color: var(--nfo-ink); }
.nfo-nav-btn[disabled] { opacity: .4; cursor: default; }
.nfo-nav-btn svg { width: 16px; height: 16px; }

/* --- Инверсия для тёмных подложек -------------------------------------- */
.nfo-theme-dark { --nfo-ink: #FFFFFF; --nfo-body: rgba(255,255,255,.82); --nfo-muted: rgba(255,255,255,.64); }

/* --- Утилиты ------------------------------------------------------------ */
.nfo-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}