/* ==========================================================================
   PREMIUM.CSS — FortuneProm Industrial Storefront
   Версия: 5.0 — Ultra-Premium Edition
   Палитра: "Deep Blue Industrial" / "Cyber Steel"
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;600;800&display=swap");

:root {
  /* Core Palette */
  --fp-primary: #007bff;
  --fp-primary-glow: rgba(0, 123, 255, 0.4);
  --fp-secondary: #0f172a;
  --fp-accent: #38bdf8;
  --fp-dark: #0b1121;

  /* Backgrounds */
  --fp-bg: #f8fafc;
  --fp-bg-dark: #0b1121;
  --fp-bg-glass: rgba(255, 255, 255, 0.7);
  --fp-bg-glass-dark: rgba(15, 23, 42, 0.85);

  /* Texts */
  --fp-text: #1e293b;
  --fp-text-muted: #64748b;
  --fp-text-on-dark: #f1f5f9;

  /* Surfaces */
  --fp-card: #ffffff;
  --fp-border: rgba(0, 0, 0, 0.08);
  --fp-border-light: rgba(255, 255, 255, 0.1);

  /* Transitions */
  --fp-t-snappy: cubic-bezier(0.2, 1, 0.3, 1);
  --fp-t-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --fp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --fp-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --fp-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --fp-shadow-glow: 0 0 15px var(--fp-primary-glow);
}

html,
body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--fp-bg);
  color: var(--fp-text);
  line-height: 1.6;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  transition: color 0.2s ease;
}

/* ==========================================================================
   GLOBAL 100/100 UI/UX OVERHAUL (Typography & Interaction)
   ========================================================================== */

/* 1. Typography */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6,
.title, .ref-section__title, .ref-hero__title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* 2. Premium Card Styles (global upgrade) */
.product_item, .article_item, .news_item {
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.product_item:hover, .article_item:hover, .news_item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 3. Premium Buttons Baseline */
.button, .btn, .fn_callback, .form__button {
  border-radius: 10px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

.button:hover, .btn:hover, .fn_callback:hover, .form__button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Inputs and Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, .form-control {
  border-radius: 10px !important;
  border: 2px solid rgba(0, 0, 0, 0.06) !important;
  background: #f8fafc !important;
  padding: 12px 16px !important;
  transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1) !important;
  font-family: "Inter", sans-serif !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, textarea:focus, .form-control:focus {
  border-color: var(--fp-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1) !important;
  outline: none !important;
}

/* 5. Scrollbar Modernization */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* 6. Ultimate $1M Ambient Space Lighting (Animated) */
body::before {
  content: "";
  position: fixed;
  top: -50vh; left: -50vw;
  width: 200vw; height: 200vh;
  background: radial-gradient(circle at 15% 30%, rgba(0, 123, 255, 0.04) 0%, transparent 30%),
              radial-gradient(circle at 85% 70%, rgba(56, 189, 248, 0.04) 0%, transparent 30%);
  z-index: -1;
  pointer-events: none;
  animation: ambient-drift 30s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes ambient-drift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(5%, -5%); }
}

html.dark-theme body::before {
  background: radial-gradient(circle at 20% 20%, rgba(0, 123, 255, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(56, 189, 248, 0.08) 0%, transparent 40%);
}

/* ==========================================================================
   TICKER SYSTEM — Единая система бегущих строк
   Палитра: Deep Blue Industrial — утончённый, гармоничный стиль
   ========================================================================== */

/* --- Общие переменные тикеров --- */
:root {
  --ticker-speed: 35s;
  --ticker-speed-fast: 28s;
  --ticker-font: 11px;
  --ticker-weight: 600;
  --ticker-spacing: 0.14em;
  --ticker-pad-y: 10px;
  --ticker-gap: 32px;
}

/* --- Миксин-база для всех тикеров --- */
.ref-top-ticker,
.ref-sale-ticker,
.ref-bottom-ticker {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}

/* Fade-маска: плавное затухание по краям */
.ref-top-ticker::before,
.ref-top-ticker::after,
.ref-sale-ticker::before,
.ref-sale-ticker::after,
.ref-bottom-ticker::before,
.ref-bottom-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.ref-top-ticker::before,
.ref-sale-ticker::before,
.ref-bottom-ticker::before {
  left: 0;
}

.ref-top-ticker::after,
.ref-sale-ticker::after,
.ref-bottom-ticker::after {
  right: 0;
}

/* --- Общие стили трека --- */
.ref-top-ticker__track,
.ref-sale-ticker__track,
.ref-bottom-ticker__track {
  display: inline-flex;
  will-change: transform;
}

/* --- Общие стили элементов трека --- */
.ref-top-ticker__track span,
.ref-sale-ticker__track span,
.ref-bottom-ticker__track span {
  display: inline-block;
  padding: var(--ticker-pad-y) 0;
  font-size: var(--ticker-font);
  font-weight: var(--ticker-weight);
  text-transform: uppercase;
  letter-spacing: var(--ticker-spacing);
  padding-right: var(--ticker-gap);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

/* --- Единая анимация --- */
@keyframes refTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   1. TOP TICKER — главная бегущая строка после слайдера
   ========================================================================== */

.ref-top-ticker {
  background: linear-gradient(90deg, #0c1b3a 0%, #102040 50%, #0c1b3a 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.08);
  border-bottom: 1px solid rgba(56, 189, 248, 0.08);
}

.ref-top-ticker::before { background: linear-gradient(90deg, #0c1b3a, transparent); }
.ref-top-ticker::after  { background: linear-gradient(270deg, #0c1b3a, transparent); }

.ref-top-ticker__track {
  animation: refTickerScroll var(--ticker-speed) linear infinite;
}

.ref-top-ticker__track span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
}

/* Разделители «•» подсвечиваются акцентным голубым */
.ref-top-ticker__track span::after {
  content: '';
  display: none;
}

.ref-top-ticker:hover .ref-top-ticker__track {
  animation-play-state: paused;
}

.ref-top-ticker:hover .ref-top-ticker__track span {
  color: rgba(255, 255, 255, 0.75);
}

html.dark-theme .ref-top-ticker {
  background: linear-gradient(90deg, #020617 0%, #0b1121 50%, #020617 100%);
}
html.dark-theme .ref-top-ticker::before { background: linear-gradient(90deg, #020617, transparent); }
html.dark-theme .ref-top-ticker::after  { background: linear-gradient(270deg, #020617, transparent); }

/* ==========================================================================
   2. SALE TICKER — разделитель секций (распродажа / хиты / новинки)
   ========================================================================== */

.ref-sale-ticker {
  background: linear-gradient(90deg, #0f172a 0%, #162040 50%, #0f172a 100%);
  margin-top: 32px;
  margin-bottom: 12px;
  border-top: 1px solid rgba(0, 123, 255, 0.1);
  border-bottom: 1px solid rgba(0, 123, 255, 0.1);
}

.ref-sale-ticker::before { background: linear-gradient(90deg, #0f172a, transparent); }
.ref-sale-ticker::after  { background: linear-gradient(270deg, #0f172a, transparent); }

.ref-sale-ticker__track {
  animation: refTickerScroll var(--ticker-speed-fast) linear infinite;
}

.ref-sale-ticker__track span {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10.5px;
  font-weight: 600;
}

.ref-sale-ticker:hover .ref-sale-ticker__track {
  animation-play-state: paused;
}

.ref-sale-ticker:hover .ref-sale-ticker__track span {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Модификатор: Акционные товары (мягкий акцент) --- */
.ref-sale-ticker--discount {
  border-top-color: rgba(0, 123, 255, 0.15);
  border-bottom-color: rgba(0, 123, 255, 0.15);
}
.ref-sale-ticker--discount .ref-sale-ticker__track span {
  color: rgba(56, 189, 248, 0.4);
}
.ref-sale-ticker--discount:hover .ref-sale-ticker__track span {
  color: rgba(56, 189, 248, 0.7);
}

/* --- Модификатор: Хиты продаж --- */
.ref-sale-ticker--hits {
  background: linear-gradient(90deg, #0b1121 0%, #141e38 50%, #0b1121 100%);
  border-top-color: rgba(56, 189, 248, 0.06);
  border-bottom-color: rgba(56, 189, 248, 0.06);
}
.ref-sale-ticker--hits::before { background: linear-gradient(90deg, #0b1121, transparent); }
.ref-sale-ticker--hits::after  { background: linear-gradient(270deg, #0b1121, transparent); }
.ref-sale-ticker--hits .ref-sale-ticker__track span {
  color: rgba(255, 255, 255, 0.3);
}
.ref-sale-ticker--hits:hover .ref-sale-ticker__track span {
  color: rgba(255, 255, 255, 0.55);
}

/* --- Модификатор: Новинки --- */
.ref-sale-ticker--new {
  background: linear-gradient(90deg, #0c1a2e 0%, #132240 50%, #0c1a2e 100%);
  border-top-color: rgba(56, 189, 248, 0.08);
  border-bottom-color: rgba(56, 189, 248, 0.08);
}
.ref-sale-ticker--new::before { background: linear-gradient(90deg, #0c1a2e, transparent); }
.ref-sale-ticker--new::after  { background: linear-gradient(270deg, #0c1a2e, transparent); }
.ref-sale-ticker--new .ref-sale-ticker__track span {
  color: rgba(56, 189, 248, 0.35);
}
.ref-sale-ticker--new:hover .ref-sale-ticker__track span {
  color: rgba(56, 189, 248, 0.65);
}

/* Тёмная тема для всех sale-тикеров */
html.dark-theme .ref-sale-ticker {
  background: linear-gradient(90deg, #020617 0%, #0b1121 50%, #020617 100%);
}
html.dark-theme .ref-sale-ticker::before { background: linear-gradient(90deg, #020617, transparent); }
html.dark-theme .ref-sale-ticker::after  { background: linear-gradient(270deg, #020617, transparent); }
html.dark-theme .ref-sale-ticker--hits {
  background: linear-gradient(90deg, #010410 0%, #060c1e 50%, #010410 100%);
}
html.dark-theme .ref-sale-ticker--hits::before { background: linear-gradient(90deg, #010410, transparent); }
html.dark-theme .ref-sale-ticker--hits::after  { background: linear-gradient(270deg, #010410, transparent); }
html.dark-theme .ref-sale-ticker--new {
  background: linear-gradient(90deg, #010816 0%, #081428 50%, #010816 100%);
}
html.dark-theme .ref-sale-ticker--new::before { background: linear-gradient(90deg, #010816, transparent); }
html.dark-theme .ref-sale-ticker--new::after  { background: linear-gradient(270deg, #010816, transparent); }

/* ==========================================================================
   2. СКРОЛЛБАР
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: var(--fp-primary, #08f);
  border-radius: 6px;
  border: 2px solid #0f172a;
}

::-webkit-scrollbar-thumb:hover {
  background: #06c;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--fp-primary) #0f172a;
}

/* ==========================================================================
   3. ШАПКА — ВЕРХНЯЯ ПАНЕЛЬ
   ========================================================================== */

.header__top {
  background: #0b1121 !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.account__link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.2s ease !important;
}

.account__link:hover {
  color: #fff !important;
}

/* --- Контакты и Колбэк в шапке (Единый стиль) --- */
.ref-top-contacts {
  display: flex !important;
  gap: 20px !important;
  margin-right: 20px !important;
  white-space: nowrap !important;
}

.ref-top-contact,
.ref-top-callback {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  transition: all 0.3s var(--fp-t-snappy) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.ref-top-contact:hover,
.ref-top-callback:hover {
  color: #fff !important;
}

.ref-top-contact__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-primary);
  transition: all 0.3s var(--fp-t-snappy);
}

.ref-top-contact:hover .ref-top-contact__icon,
.ref-top-callback:hover .ref-top-contact__icon {
  background: #fff;
  border-color: #fff;
  color: var(--fp-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ref-top-contact__icon svg {
  width: 13px;
  height: 13px;
}

.ref-top-text {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: inherit !important;
}

.ref-phone .ref-top-text {
  font-size: 13px !important;
  font-weight: 800 !important;
}

.ref-top-callback {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-right: 20px !important;
}

/* --- Переключатель языков/валют --- */
.switcher {
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-left: 20px !important;
}

.switcher__name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   4. ШАПКА — ЦЕНТРАЛЬНАЯ ПАНЕЛЬ (лого, меню)
   ========================================================================== */

.header__center {
  background: #fff !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 110;
}

.header__menu a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  transition: color 0.2s ease !important;
}

.header__menu a:hover {
  color: var(--fp-primary) !important;
}

/* Профессиональный дизайн выпадающего меню в шапке */
.menu_group--header .menu_eventer {
  position: relative !important;
}

.menu_group--header .menu_eventer:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 9998;
}

.menu_group--header .menu_eventer .menu_group__list--2 {
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  min-width: 240px !important;
  z-index: 9999 !important;
  margin-top: 5px !important;
}

.menu_group--header .menu_eventer .menu_group__list--2 .menu_group__link {
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: all 0.25s ease !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.menu_group--header .menu_eventer .menu_group__list--2 .menu_group__link:hover {
  background: #f1f5f9 !important;
  color: var(--fp-primary) !important;
  padding-left: 20px !important;
}

.header-contact--phone a,
.header-contact--email a {
  color: #2d3748 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   5. ШАПКА — НИЖНЯЯ ПАНЕЛЬ (каталог, поиск, инфо)
   ========================================================================== */

.header__bottom,
.fn_header__sticky {
  background: var(--fp-bg-glass-dark) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 64px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 100;
  width: 100% !important;
  display: block !important;
}

.header__bottom_panel {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.fn_header__sticky.is-sticky {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* --- Кнопка каталога --- */
.catalog_button {
  max-width: 240px !important;
  flex: 1 0 240px !important;
}

.catalog_button__heading {
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  height: 38px !important;
}

.catalog_icon {
  font-size: 16px !important;
}

/* --- Поиск --- */
.search {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  margin: 9px 14px !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.search:focus-within {
  border-color: var(--fp-primary) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.search__input {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.search__input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
  font-weight: 500 !important;
}

.search__button {
  background: var(--fp-primary) !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  width: 38px !important;
  height: 30px !important;
}

.search__button:hover {
  background: #06c !important;
}

/* --- Информеры (корзина, сравнение, избранное) --- */
.header_informers__item {
  min-width: 48px !important;
  padding: 0 8px !important;
}

.header_informers svg {
  width: 22px !important;
  height: 22px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.2s ease !important;
}

.header_informers__item:hover svg {
  color: #fff !important;
}

/* Счётчики на иконках */
.header_informers__item .cart_counter,
.header_informers__item .compare_counter,
.header_informers__item .wishlist_counter {
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-color: #0f172a !important;
  font-size: 9px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 14px !important;
  right: 5px !important;
  top: 8px !important;
}

/* ==========================================================================
   6. HERO-СЛАЙДЕР
   ========================================================================== */

.ref-slider-wrap {
  position: relative;
  margin: 24px 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  height: 540px;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.ref-slider {
  height: 100%;
  position: relative;
}

.ref-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
  display: flex;
  align-items: center;
  padding: 0 72px;
  z-index: 1;
  pointer-events: none;
}

.ref-slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s linear 0s;
  z-index: 2;
  pointer-events: auto;
}

/* Hyper-Cinematic Entrance Animations */
.ref-slide .ref-hero__img {
  transform: scale(1.1) translateX(30px);
  filter: blur(10px) brightness(1.2);
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.ref-slide.active .ref-hero__img {
  transform: scale(1) translateX(0);
  filter: blur(0px) brightness(1);
  opacity: 1;
}

.ref-slide .ref-hero__content > * {
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.ref-slide.active .ref-hero__content > * {
  transform: translateY(0);
  opacity: 1;
}

.ref-slide.active .ref-hero__content > .ref-hero__title { transition-delay: 0.1s; }
.ref-slide.active .ref-hero__content > .ref-hero__subtitle { transition-delay: 0.2s; }
.ref-slide.active .ref-hero__content > .ref-hero__btn { transition-delay: 0.3s; }

.ref-hero {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 40px;
}

.ref-hero__content {
  flex: 1;
}

.ref-hero__title {
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 16px;
  text-transform: uppercase;
  color: var(--fp-dark);
  letter-spacing: -0.03em;
}

.ref-hero__subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 28px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ref-hero__btn {
  background: var(--fp-primary);
  color: #fff;
  padding: 16px 40px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  transition: all 0.35s cubic-bezier(0.2, 1, .3, 1);
  border: none;
  position: relative;
  overflow: hidden;
}

.ref-hero__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.5s ease;
}

.ref-hero__btn:hover::before {
  left: 100%;
}

.ref-hero__btn:hover {
  background: #0066cc;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 136, 255, 0.3);
}

.ref-hero__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-hero__img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* --- Индикатор прогресса --- */
.ref-slider-controls {
  position: absolute;
  bottom: 28px;
  left: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.ref-slider-number,
.ref-slider-total {
  font-size: 13px;
  font-weight: 800;
  color: var(--fp-dark);
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ref-progress-wrap {
  width: 72px;
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.ref-progress-bar {
  height: 100%;
  background: var(--fp-primary);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* --- Кнопки слайдера --- */
.ref-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  z-index: 10;
  transition: all 0.3s var(--fp-t-snappy);
  padding: 0;
  color: #0f172a;
}

.ref-slider-btn svg {
  width: 18px;
  height: 18px;
}

.ref-slider-btn--prev {
  left: 16px;
}

.ref-slider-btn--next {
  right: 16px;
}

.ref-slider-btn:hover {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 136, 255, 0.25);
}

.ref-slider-btn:hover svg {
  stroke: #fff;
}

/* ==========================================================================
   7. НАВИГАЦИЯ ПО КАТЕГОРИЯМ (track)
   ========================================================================== */

.ref-cats-wrap {
  margin: 20px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.ref-cats-wrap::-webkit-scrollbar {
  display: none;
}

.ref-cats {
  display: flex;
  gap: 12px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.ref-cat-card {
  min-width: 180px;
  flex: 0 0 auto;
  height: 120px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--fp-dark);
  transition: all 0.3s cubic-bezier(0.2, 1, .3, 1);
}

.ref-cat-card:hover,
.ref-cat-card.is-active {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 136, 255, 0.1);
  border-color: var(--fp-primary);
  background: linear-gradient(135deg, #fff 0%, rgba(0, 123, 255, 0.02) 100%);
}

.ref-cat-card__title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 6px;
  color: #0f172a;
}

.ref-cat-card__btn {
  font-size: 10px;
  font-weight: 700;
  color: var(--fp-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ref-cat-card__img {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.ref-cat-card:hover .ref-cat-card__img {
  opacity: 0.75;
  transform: scale(1.08);
}

/* ==========================================================================
   8. ПРОМО-БАННЕР С БЕГУЩЕЙ СТРОКОЙ
   ========================================================================== */

.ref-promo-wrapper {
  position: relative;
  margin: 48px 0 !important;
  z-index: 5;
}

.ref-promo-ticker-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -50%) rotate(-2deg);
  background: var(--fp-primary);
  padding: 10px 0;
  overflow: hidden;
  z-index: 0;
  display: flex;
  white-space: nowrap;
  pointer-events: none;
}

.ref-promo-ticker-track {
  display: flex;
  width: max-content;
  animation: refTickerScroll 32s linear infinite;
  will-change: transform;
}

.ref-promo-ticker-track span {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  padding-right: 28px;
  letter-spacing: 0.12em;
}

.ref-promo {
  background: #0f172a !important;
  border-radius: 14px !important;
  padding: 40px 48px !important;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  z-index: 1;
  gap: 32px;
}

.ref-promo__decor {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 136, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ref-promo__text {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.ref-promo__title {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.3;
}

.ref-promo__subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0;
  line-height: 1.6;
}

.ref-promo__btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: var(--fp-primary) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px !important;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: none;
}

.ref-promo__btn:hover {
  background: #06c !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 136, 255, 0.25);
  color: #fff !important;
}

/* ==========================================================================
   9. СЕКЦИИ ТОВАРОВ
   ========================================================================== */

.ref-section {
  margin: 36px 0;
}

.ref-section__header {
  margin-bottom: 8px;
}

.ref-section__title {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fp-dark);
  margin-bottom: 0;
  letter-spacing: -0.02em;
}

/* --- Кнопки прокрутки --- */
.ref-scroll-btns {
  gap: 6px;
}

.ref-scroll-btn {
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  padding: 0;
  outline: none;
}

.ref-scroll-btn--black {
  background: #0f172a;
}

.ref-scroll-btn--black:hover {
  background: var(--fp-primary);
  transform: scale(1.08);
}

/* --- Карусель (track) --- */
.ref-product-slider {
  position: relative;
  overflow: visible;
}

.ref-product-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  align-items: stretch !important;
  padding-bottom: 12px;
  scrollbar-width: none;
  gap: 0;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ref-product-track::-webkit-scrollbar {
  display: none;
}

.ref-product-slide {
  display: flex !important;
  flex-direction: column !important;
  min-width: 280px;
  flex: 0 0 280px;
}

.ref-product-slide .product_preview {
  flex: 1 1 auto !important;
}

/* ==========================================================================
   10. КАРТОЧКИ ТОВАРОВ
   ========================================================================== */

.product_preview {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100%;
  padding: 20px !important;
  background: var(--fp-card) !important;
  border-radius: 16px !important;
  border: 1px solid var(--fp-border) !important;
  box-shadow: var(--fp-shadow-sm) !important;
  transition: all 0.4s var(--fp-t-snappy) !important;
  position: relative;
  margin-bottom: 24px;
  overflow: hidden;
  will-change: transform, box-shadow;
}

.product_preview:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--fp-shadow-lg) !important;
  border-color: var(--fp-primary-glow) !important;
  z-index: 10;
}

/* Эффект свечения при ховере */
.product_preview::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(0, 123, 255, 0.05), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.product_preview:hover::after {
  opacity: 1;
}

/* --- Изображение --- */
.product_preview__top {
  position: relative;
  margin-bottom: 12px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  border-radius: 8px;
  overflow: hidden;
}

.product_preview__image {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product_preview__image a {
  width: 100%;
  height: 100%;
}

.product_preview__image img,
.preview_img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  transition: transform 0.5s cubic-bezier(0.2, 1, .3, 1);
  color: transparent !important; /* Скрываем красный alt-текст при битой картинке (404) */
}

.product_preview:hover .product_preview__image img,
.product_preview:hover .preview_img {
  transform: scale(1.06);
}

/* --- Заглушка (Нет фото) --- */
.product_preview__no_image,
.product-page__no_image,
.purchase__no_image {
  background: transparent !important;
  width: 100%;
  height: 100%;
}

.fp-no-image-stub {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  color: #64748b !important;
  min-height: 110px;
  box-sizing: border-box;
}

.fp-no-image-stub svg {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 8px !important;
  opacity: 0.6 !important;
  stroke: #475569 !important;
}

.fp-no-image-stub span {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  opacity: 0.7 !important;
  text-align: center !important;
  max-width: 100px;
  line-height: 1.3 !important;
  user-select: none;
}

/* --- Wishlist сердечко --- */
.product_preview__wishlist-pos {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5;
}

.product_preview__wishlist {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.product_preview__wishlist:hover {
  color: #ef4444 !important;
  transform: scale(1.1);
}

.product_preview__wishlist.selected {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.product_preview__wishlist i {
  font-size: 14px !important;
}

/* --- Тело карточки --- */
.product_preview__body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* --- Мета (наличие, артикул) --- */
.product_preview__meta {
  margin-bottom: 8px;
  min-height: 22px;
  height: 22px;
}

.product_preview__sku {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Название --- */
.product_preview__name {
  display: -webkit-box;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  margin-bottom: 8px;
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  transition: color 0.2s ease;
}

.product_preview__name:hover {
  color: var(--fp-primary) !important;
}

/* --- Цена --- */
.product_preview__footer {
  margin-top: auto !important;
  padding-top: 8px;
}

.product_preview__price-row {
  margin-bottom: 10px;
  min-height: 28px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.ref-price-from {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.fn_price {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em;
}

.currency {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.price_request {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--fp-primary) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Сравнительная цена (зачёркнутая) --- */
.product_preview__compare_price,
.compare_price {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

/* --- Кнопка купить (Unified Primary Style) --- */
.product_preview__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--fp-primary) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  height: 40px !important;
  width: 100% !important;
  transition: all 0.3s cubic-bezier(0.2, 1, .3, 1) !important;
  border-radius: 8px !important;
  text-transform: uppercase;
  font-size: 10.5px !important;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: auto;
  padding: 0 12px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.product_preview__btn:hover {
  background: #0066cc !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 136, 255, 0.25);
}

/* Кнопка "Запросить КП" */
.ref-btn-request {
  background: var(--fp-secondary) !important;
  color: #fff !important;
  border: none !important;
}

.ref-btn-request:hover {
  background: var(--fp-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 136, 255, 0.3);
}

/* Кнопка "Под заказ" */
.product_preview__btn--order {
  background: #475569 !important;
}

.product_preview__btn--order:hover {
  background: var(--fp-primary) !important;
}

/* ==========================================================================
   11. БЕЙДЖИ (стикеры)
   ========================================================================== */

.ref-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.ref-badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ref-badge--top {
  background: rgba(0, 123, 255, 0.85);
}

.ref-badge--promo {
  background: rgba(220, 38, 38, 0.85);
}

.ref-badge--new {
  background: rgba(5, 150, 105, 0.85);
}

/* ==========================================================================
   12. ИНДИКАТОР НАЛИЧИЯ (пульс)
   ========================================================================== */

.ref-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  color: #059669;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.ref-stock-pulse {
  width: 5px;
  height: 5px;
  background: #059669;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.ref-stock-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid #059669;
  border-radius: 50%;
  animation: refPulse 2s ease-out infinite;
  opacity: 0;
}

@keyframes refPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ==========================================================================
   13. CTA-СЕКЦИЯ С БЕГУЩЕЙ СТРОКОЙ
   ========================================================================== */

.ref-cta-wrapper {
  position: relative;
  margin: 48px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 32px 0;
}

/* --- Global Bottom Ticker (Footer Marquee) --- */
.ref-bottom-ticker {
  background: linear-gradient(90deg, #080e1e 0%, #0f172a 50%, #080e1e 100%);
  padding: 10px 0;
  border-top: 1px solid rgba(56, 189, 248, 0.04);
}

.ref-bottom-ticker::before { background: linear-gradient(90deg, #080e1e, transparent); }
.ref-bottom-ticker::after  { background: linear-gradient(270deg, #080e1e, transparent); }

.ref-bottom-ticker__track {
  display: flex;
  width: max-content;
  animation: refTickerScroll 45s linear infinite;
}

.ref-bottom-ticker__track span {
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.4s ease;
}

.ref-bottom-ticker:hover .ref-bottom-ticker__track {
  animation-play-state: paused;
}

.ref-bottom-ticker:hover .ref-bottom-ticker__track span {
  color: rgba(255, 255, 255, 0.45);
}

/* Mobile adaptation for bottom ticker */
@media (max-width: 480px) {
  .ref-bottom-ticker {
    padding: 7px 0;
  }

  .ref-bottom-ticker__track span {
    font-size: 9px;
    padding-right: 24px;
  }

  .ref-top-ticker::before,
  .ref-top-ticker::after,
  .ref-sale-ticker::before,
  .ref-sale-ticker::after,
  .ref-bottom-ticker::before,
  .ref-bottom-ticker::after {
    width: 30px;
  }
}

.ref-cta {
  background: var(--fp-primary) !important;
  border-radius: 14px !important;
  margin: 0 !important;
  position: relative;
  padding: 48px 0 !important;
  box-shadow: 0 12px 36px rgba(0, 136, 255, 0.2);
  width: 100%;
  z-index: 1;
}

.ref-cta__title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.ref-cta__text {
  font-size: 13px;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.ref-cta__btn {
  background: #fff;
  color: var(--fp-secondary);
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.35s var(--fp-t-snappy);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  position: relative;
  overflow: hidden;
}

.ref-cta__btn:hover {
  background: var(--fp-secondary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   14. OFFCANVAS-ПАНЕЛИ & КАТАЛОГ-НАВИГАЦИЯ
   ========================================================================== */

/* ─── 14.1 Overlay ─── */
.ref-offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ref-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ─── 14.2 Offcanvas контейнер ─── */
.ref-offcanvas-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 380px;
  max-width: 88vw;
  background: #fff;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.12);
}

.ref-offcanvas-menu--right {
  left: auto;
  right: 0;
  transform: translateX(100%);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
}

.ref-offcanvas-menu.is-open {
  transform: translateX(0);
}

/* ─── 14.3 Шапка панели ─── */
.ref-offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, #0b1121 0%, #162036 100%);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 136, 255, 0.15);
}

.ref-offcanvas-title {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ref-offcanvas-title::before {
  content: "";
  width: 3px;
  height: 18px;
  background: var(--fp-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.ref-offcanvas-close {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-offcanvas-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ─── 14.4 Тело панели ─── */
.ref-offcanvas-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.ref-offcanvas-body::-webkit-scrollbar {
  width: 4px;
}

.ref-offcanvas-body::-webkit-scrollbar-track {
  background: transparent;
}

.ref-offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* ==========================================================================
   14.5 КАТАЛОГ — МНОГОУРОВНЕВОЕ ДЕРЕВО КАТЕГОРИЙ
   ========================================================================== */

/* ─── Offcanvas дерево: базовый сброс ─── */
#refOffcanvasMenu .ref-cat-level {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Аккордеон: подкатегории скрыты по умолчанию ─── */
#refOffcanvasMenu .ref-cat-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#refOffcanvasMenu .ref-cat-item.is-expanded>.ref-cat-children {
  max-height: 2000px;
}

/* ─── Список ─── */
.ref-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Элемент категории ─── */
.ref-cat-item {
  position: relative;
  margin: 0;
}

/* ─── Ссылка категории (все уровни) ─── */
#refOffcanvasMenu .ref-cat-link,
.ref-cat-link.categories_menu__link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 24px;
  font-size: 13px;
  font-weight: 600;
  color: #334155 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.22s ease;
  position: relative;
  line-height: 1.35;
}

/* Индикатор слева при hover */
#refOffcanvasMenu .ref-cat-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--fp-primary);
  border-radius: 0 2px 2px 0;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#refOffcanvasMenu .ref-cat-link:hover::before {
  height: 60%;
}

#refOffcanvasMenu .ref-cat-link:hover {
  background: rgba(0, 136, 255, 0.03) !important;
  color: var(--fp-primary) !important;
  padding-left: 28px;
}

/* ─── Активная (текущая) категория ─── */
.ref-cat-item.is-current>.ref-cat-link {
  color: var(--fp-primary) !important;
  background: rgba(0, 136, 255, 0.06) !important;
  font-weight: 700;
}

.ref-cat-item.is-current>.ref-cat-link::before {
  height: 70%;
}

/* ─── Иконка категории ─── */
.ref-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0, 136, 255, 0.06);
  color: var(--fp-primary);
  transition: all 0.2s ease;
  overflow: hidden;
}

.ref-cat-icon img,
.ref-cat-icon svg {
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}

.ref-cat-icon svg path {
  fill: currentColor !important;
}

.ref-cat-icon--default {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.08);
}

.ref-cat-link:hover .ref-cat-icon {
  background: rgba(0, 136, 255, 0.12);
  color: var(--fp-primary);
  transform: scale(1.05);
}

/* ─── Название категории ─── */
.ref-cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Счётчик подкатегорий ─── */
.ref-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(0, 136, 255, 0.08);
  color: var(--fp-primary);
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ref-cat-link:hover .ref-cat-count {
  background: rgba(0, 136, 255, 0.15);
}

/* ─── Стрелка аккордеона ─── */
.ref-cat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  color: #94a3b8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.ref-cat-arrow svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-cat-arrow:hover {
  background: rgba(0, 136, 255, 0.08);
  color: var(--fp-primary);
}

/* Раскрытое состояние — поворот стрелки */
.ref-cat-item.is-expanded>.ref-cat-link .ref-cat-arrow svg {
  transform: rotate(90deg);
}

.ref-cat-item.is-expanded>.ref-cat-link .ref-cat-arrow {
  color: var(--fp-primary);
  background: rgba(0, 136, 255, 0.08);
}

/* ==========================================================================
   14.6 АККОРДЕОН — ПОДКАТЕГОРИИ
   ========================================================================== */

/* ─── Контейнер подкатегорий ─── */
#refOffcanvasMenu .ref-cat-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#refOffcanvasMenu .ref-cat-item.is-expanded>.ref-cat-children {
  max-height: 2000px;
}

/* ─── Уровень 2 — подкатегории ─── */
.ref-cat-level--2 .ref-cat-list {
  background: rgba(0, 0, 0, 0.015);
  border-left: 2px solid rgba(0, 136, 255, 0.12);
  margin-left: 24px;
}

#refOffcanvasMenu .ref-cat-level--2 .ref-cat-link {
  padding: 11px 16px 11px 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

#refOffcanvasMenu .ref-cat-level--2 .ref-cat-link::before {
  left: -2px;
  width: 2px;
  background: var(--fp-primary);
}

#refOffcanvasMenu .ref-cat-level--2 .ref-cat-link:hover {
  background: rgba(0, 136, 255, 0.04) !important;
  color: var(--fp-primary) !important;
  padding-left: 24px;
}

/* ─── Уровень 3 — Под-подкатегории (с превью) ─── */
.ref-cat-level--3 .ref-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 8px 8px 12px;
  margin-left: 16px;
  border-left: 2px solid rgba(0, 136, 255, 0.08);
}

.ref-cat-level--3 .ref-cat-item {
  flex: 0 0 calc(50% - 2px);
  max-width: calc(50% - 2px);
}

#refOffcanvasMenu .ref-cat-level--3 .ref-cat-link {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b !important;
  border-bottom: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  gap: 8px;
}

#refOffcanvasMenu .ref-cat-level--3 .ref-cat-link::before {
  display: none;
}

#refOffcanvasMenu .ref-cat-level--3 .ref-cat-link:hover {
  background: rgba(0, 136, 255, 0.06) !important;
  color: var(--fp-primary) !important;
  padding-left: 10px;
}

/* ─── Превью-миниатюра (уровень 3) ─── */
.ref-cat-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(0, 136, 255, 0.04);
  overflow: hidden;
}

.ref-cat-thumb img {
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}

.ref-cat-thumb-placeholder {
  color: #cbd5e1;
}

/* ─── Разделитель после основных категорий (для карточки корзины) ─── */
.ref-cart-body {
  padding: 16px;
}

/* ==========================================================================
   14.7 БОКОВОЙ КАТАЛОГ (десктоп — страница категории)
   ========================================================================== */

.filter__catalog_link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  position: relative;
}

.filter__catalog_link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--fp-primary);
  border-radius: 0 2px 2px 0;
  transition: height 0.25s ease;
}

.filter__catalog_link:hover {
  padding-left: 20px !important;
  color: var(--fp-primary) !important;
}

.filter__catalog_link:hover::before {
  height: 60%;
}

/* ==========================================================================
   15. GRIZZLY FAB
   ========================================================================== */

/* OLD FLOATING FAB — перенесён в header_informers, см. ref-grizzly-header */

/* ==========================================================================
   16. ПЕРЕКЛЮЧАТЕЛЬ ТЕМ
   ========================================================================== */

/* --- Inline Header Icon Button (тема + лапка) --- */
.ref-header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.2s ease;
  opacity: 0.7;
  position: relative;
}

.ref-header-icon-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* Переключение иконок темы */
.ref-header-icon-btn .dark-moon {
  display: block;
}

.ref-header-icon-btn .light-sun {
  display: none;
}

html.dark-theme .ref-header-icon-btn .dark-moon {
  display: none;
}

html.dark-theme .ref-header-icon-btn .light-sun {
  display: block;
}

/* --- Grizzly Header Dropdown --- */
.ref-grizzly-header {
  position: relative;
}

.ref-grizzly-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 220px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1);
}

.ref-grizzly-header.is-open .ref-grizzly-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ref-grizzly-dropdown__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

.ref-grizzly-dropdown__item:hover {
  background: #f8fafc !important;
  transform: translateY(-1px) !important;
}

.ref-grizzly-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  background: rgba(100, 116, 139, 0.08) !important;
  color: #64748b !important;
  transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

.ref-grizzly-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

.ref-grizzly-dropdown__item:hover .ref-grizzly-icon {
  transform: scale(1.08) !important;
}

/* Hover Colors based on modifiers */
.ref-grizzly-dropdown__item--wa:hover .ref-grizzly-icon {
  background: rgba(37, 211, 102, 0.15) !important;
  color: #25D366 !important;
}
.ref-grizzly-dropdown__item--wa:hover {
  color: #25D366 !important;
}

.ref-grizzly-dropdown__item--phone:hover .ref-grizzly-icon {
  background: rgba(0, 136, 255, 0.15) !important;
  color: var(--fp-primary) !important;
}
.ref-grizzly-dropdown__item--phone:hover {
  color: var(--fp-primary) !important;
}

.ref-grizzly-dropdown__item--email:hover .ref-grizzly-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
}
.ref-grizzly-dropdown__item--email:hover {
  color: #f59e0b !important;
}

/* Dark theme dropdown */
html.dark-theme .ref-grizzly-dropdown {
  background: #1e293b;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

html.dark-theme .ref-grizzly-dropdown__item {
  color: #cbd5e1 !important;
}

html.dark-theme .ref-grizzly-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.dark-theme .ref-grizzly-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
}

/* --- Top Bar Socials --- */
.ref-top-socials {
  gap: 8px;
  margin: 0 24px;
}

.ref-top-social {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  text-decoration: none;
}

.ref-top-social i,
.ref-top-social svg {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.ref-top-social:hover {
  background: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ref-top-social:hover i,
.ref-top-social:hover svg {
  transform: scale(1.1);
}

/* Platform specific hover colors */
.ref-top-social--wa:hover {
  color: #25D366;
}

.ref-top-social--tg:hover {
  color: #229ED9;
}

.ref-top-social--ig:hover {
  color: #E4405F;
}

.ref-top-social--fb:hover {
  color: #1877F2;
}

.ref-top-social--yt:hover {
  color: #FF0000;
}

.ref-top-social--tt:hover {
  color: #000000;
}

@media (max-width: 991px) {
  .ref-top-socials {
    display: none !important;
  }
}

/* ==========================================================================
   17. МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ
   ========================================================================== */

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 991px) {
  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  body {
    padding-bottom: 62px !important;
  }
}

.mobile-bottom-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-size: 9px;
  font-weight: 600;
  gap: 3px;
  transition: color 0.2s ease;
  text-align: center;
  line-height: 1.2;
  padding: 6px 2px;
}

.mobile-bottom-nav__link span {
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mobile-bottom-nav__link.active,
.mobile-bottom-nav__link:hover {
  color: #fff;
}

.mobile-bottom-nav__link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ==========================================================================
   18. ФУТЕР
   ========================================================================== */

.footer {
  background-color: #0b1121 !important;
  padding-top: 56px !important;
  padding-bottom: 24px !important;
}

.footer__title {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  background: transparent !important;
  margin-bottom: 16px !important;
}

.footer__title_arrow svg {
  color: rgba(255, 255, 255, 0.3) !important;
}

.footer__content {
  color: rgba(255, 255, 255, 0.4) !important;
}

.footer__menu_item {
  margin-bottom: 4px !important;
}

.footer__menu_link {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

.footer__menu_link:hover {
  color: #fff !important;
}

.footer .callback {
  color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.footer .callback:hover {
  color: #fff !important;
  border-color: var(--fp-primary) !important;
  background: var(--fp-primary) !important;
}

.footer__contact_item {
  margin-bottom: 6px !important;
}

.footer__contact_item a {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

.footer__contact_item a:hover {
  color: #fff !important;
}

.footer__contact_item svg {
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  opacity: 0.6;
  width: 14px !important;
  height: 14px !important;
}

.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 36px;
  padding-top: 16px;
}

.footer__copyright,
.footer__copyright a,
.copyright {
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 12px !important;
}

.footer__copyright a:hover {
  color: var(--fp-primary) !important;
}

/* Подписка */
.subscribe__title {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 13px !important;
}

.form__input_subscribe {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

.form__button--subscribe {
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* --- Соцсети в футере --- */
.footer__social .social__link {
  color: rgba(255, 255, 255, 0.3) !important;
  transition: color 0.2s ease !important;
}

.footer__social .social__link:hover {
  color: #fff !important;
}

/* --- Ссылка "Смотреть все" --- */
.footer__view_all {
  color: var(--fp-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   19. СЕТКА И МАКЕТ
   ========================================================================== */

.products_list,
.product_list {
  display: flex !important;
  flex-wrap: wrap !important;
}

.products_list>[class*="col-"],
.product_list>[class*="col-"] {
  display: block !important;
}

/* ─── Layout Normal (1240px) ─── */
[data-layout="normal"] .container,
[data-layout="normal"] .fn_ajax_content,
[data-layout="normal"] .ref-section,
[data-layout="normal"] .ref-hero {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: max-width 0.4s ease !important;
}

/* ─── Layout Wide (1440px) ─── */
[data-layout="wide"] .container,
[data-layout="wide"] .fn_ajax_content,
[data-layout="wide"] .ref-section,
[data-layout="wide"] .ref-hero {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: max-width 0.4s ease !important;
}

/* ─── Layout Full (100%) ─── */
[data-layout="full"] .container,
[data-layout="full"] .fn_ajax_content,
[data-layout="full"] .ref-section,
[data-layout="full"] .ref-hero {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  transition: max-width 0.4s ease !important;
}

/* --- Кнопки раскладки --- */
.ref-layout-options {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ref-layout-option {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.3;
  color: #fff;
  transition: all 0.2s ease;
  background: transparent;
}

.ref-layout-option:hover {
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.06);
}

.ref-layout-option.active {
  opacity: 1;
  background: rgba(0, 136, 255, 0.15);
  color: var(--fp-primary);
}

.ref-layout-option svg {
  pointer-events: none;
}

/* --- Кнопки масштаба (Zoom) --- */
.ref-zoom-widget {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 2px;
}

.ref-zoom-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  color: inherit;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
}

.ref-zoom-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.ref-zoom-val {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  opacity: 0.8;
  min-width: 38px;
  text-align: center;
  cursor: pointer;
}
.ref-zoom-val:hover {
  opacity: 1;
  color: var(--fp-primary);
}

/* ==========================================================================
   20. САЙДБАР, ФИЛЬТРЫ, КАТЕГОРИИ, ТОВАР — Профессиональная доработка
   ========================================================================== */

/* --- Хлебные крошки --- */
.breadcrumb,
.breadcrumbs {
  padding: 14px 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: #64748b !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-size: 12px !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--fp-primary) !important;
}

.breadcrumb__delimiter,
.breadcrumbs .breadcrumbs__item+.breadcrumbs__item::before {
  color: #cbd5e1 !important;
  margin: 0 6px !important;
  font-size: 9px !important;
}

.breadcrumbs .breadcrumbs__item {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 400 !important;
}

.breadcrumbs .breadcrumbs__item:last-child {
  color: #334155 !important;
  font-weight: 600 !important;
}

.breadcrumb__current {
  color: #334155 !important;
  font-weight: 600 !important;
}

.breadcrumbs svg {
  width: 14px !important;
  height: 14px !important;
  color: #94a3b8 !important;
}

/* --- Заголовок H1 --- */
.h1,
h1 {
  font-family: "Outfit", "Inter", sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}

/* --- Сайдбар --- */
.sidebar {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm) !important;
}

/* --- Фильтры — заголовки --- */
.filter__header,
.fn_filter .filter__header {
  padding: 14px 18px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  margin: 0 !important;
  transition: background 0.2s ease;
}

.filter__header:hover {
  background: rgba(0, 136, 255, 0.02) !important;
}

.filter__header svg,
.filter__header .arrow {
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  transition: transform 0.3s ease !important;
}

/* --- Фильтры — содержимое --- */
.filter__content {
  padding: 10px 18px 16px !important;
}

.filter__content label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  padding: 5px 0 !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

.filter__content label:hover {
  color: #0f172a !important;
}

.filter__content input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--fp-primary) !important;
  border-radius: 3px !important;
  flex-shrink: 0;
}

/* --- Ценовой слайдер --- */
.noUi-target {
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  border-radius: 4px !important;
  height: 4px !important;
  box-shadow: none !important;
}

.noUi-connect {
  background: var(--fp-primary) !important;
  border-radius: 4px !important;
}

.noUi-handle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid var(--fp-primary) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  top: -7px !important;
  cursor: grab !important;
}

.noUi-handle:active {
  cursor: grabbing !important;
}

.noUi-handle::before,
.noUi-handle::after {
  display: none !important;
}

/* --- Сортировка --- */
.products_container__sort {
  padding: 10px 0 !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.sort__item {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

.sort__item:hover {
  color: var(--fp-primary) !important;
  background: rgba(0, 136, 255, 0.04) !important;
}

.sort__item.selected,
.sort__item.active {
  color: var(--fp-primary) !important;
  background: rgba(0, 136, 255, 0.06) !important;
  border-color: rgba(0, 136, 255, 0.12) !important;
  font-weight: 700 !important;
}

/* --- Контейнер товаров --- */
.products_container__boxed {
  background: transparent !important;
  padding: 0 !important;
}

/* --- Описание категории --- */
.block__description {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 16px !important;
}

.block__description p {
  margin-bottom: 8px !important;
}

/* --- Пагинация --- */
.pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 24px 0 !important;
}

.pagination a,
.pagination span {
  min-width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
}

.pagination a:hover {
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
  background: rgba(0, 136, 255, 0.04) !important;
}

.pagination .active,
.pagination .current {
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-color: var(--fp-primary) !important;
  pointer-events: none;
}

/* --- Блок преимуществ --- */
.section_advantages {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--fp-shadow-sm) !important;
  padding: 24px 16px !important;
  margin: 32px 0 !important;
}

.advantages__item {
  text-align: center !important;
  padding: 12px 8px !important;
}

.advantages__preview {
  flex-direction: column !important;
  gap: 10px !important;
  justify-content: center !important;
}

.advantages__icon {
  width: 52px !important;
  height: 52px !important;
  background: rgba(0, 136, 255, 0.06) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.advantages__icon svg,
.advantages__icon img {
  width: 28px !important;
  height: 28px !important;
  color: var(--fp-primary) !important;
}

.advantages__title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   СТРАНИЦА ТОВАРА — Ultra-Premium Product Detail
   ========================================================================== */

/* --- Галерея --- */
.product-page__images-wrap,
.fn_product_images {
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* --- Контейнер деталей --- */
.details_boxed {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.boxed--stretch.details_boxed {
  padding: 0 !important;
}

.details_boxed__item {
  background: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 24px 28px !important;
  box-shadow: none !important;
  transition: none !important;
  margin: 0 !important;
}

.details_boxed__item:first-child {
  border-radius: 18px 18px 0 0 !important;
}

.details_boxed__item:last-child {
  border-bottom: none !important;
  border-radius: 0 0 18px 18px !important;
}

.details_boxed__item:only-child {
  border-radius: 18px !important;
}

.details_boxed__item:hover {
  box-shadow: none !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.details_boxed__item--inner {
  padding: 0 !important;
}

/* Обёртка всей колонки */
.product-page__details .block--border {
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  background: #fff !important;
}

/* ==========================================================================
   РЕЙТИНГ, БРЕНД, КОММЕНТАРИИ
   ========================================================================== */

.details_boxed__item--one {
  padding: 20px 28px !important;
}

.details_boxed__rating {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

.rating_starOff {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 18px;
  background: linear-gradient(to right, #e2e8f0, #e2e8f0) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Ctext y='15' font-size='16' fill='black'%3E★★★★★%3C/text%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Ctext y='15' font-size='16' fill='black'%3E★★★★★%3C/text%3E%3C/svg%3E");
}

.rating_starOn {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

.rating_text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

.rating i,
.rating svg,
.product__rating {
  color: #fbbf24 !important;
  font-size: 16px !important;
}

/* --- Ссылка на отзывы --- */
.details_boxed__anchor_comments {
  margin: 4px 0 0 !important;
}

.details_boxed__anchor_comments a,
.anchor_comments__link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fp-primary) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(0, 123, 255, 0.3);
  transition: all 0.25s ease;
  line-height: 1.2;
  padding-bottom: 1px;
}

.details_boxed__anchor_comments a:hover,
.anchor_comments__link:hover {
  color: #0066cc !important;
  border-bottom-color: #0066cc;
  border-bottom-style: solid;
}

/* ==========================================================================
   НАЛИЧИЕ — Статусные бейджи
   ========================================================================== */

.details_boxed__available {
  margin-top: 8px !important;
}

.available__no_stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.12)) !important;
  color: #dc2626 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.available__no_stock::before {
  content: '✕';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.12);
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}

.available__in_stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.12)) !important;
  color: #059669 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.available__in_stock::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.15);
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ==========================================================================
   ЦЕНА, СКИДКА, КОЛИЧЕСТВО
   ========================================================================== */

.details_boxed__offer {
  position: relative;
}

.details_boxed__price_amount {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 8px 0 20px !important;
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
}

/* Скидочный бейдж */
.details_boxed_pct {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #fff !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  animation: fp-badge-pulse 3s ease-in-out infinite;
  line-height: 1;
}

@keyframes fp-badge-pulse {

  0%,
  100% {
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
  }

  50% {
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
  }
}

/* Цены — строка */
.details_boxed__prices {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}

/* Старая цена */
.details_boxed__old_price {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px;
  font-size: 15px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  position: relative !important;
  order: -1;
}

.details_boxed__old_price::after {
  border-bottom: 2px solid #ef4444 !important;
  transform: rotate(-8deg) !important;
  opacity: 0.7;
}

.details_boxed__old_price .currency {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
}

/* Текущая цена */
.details_boxed__price,
.details_price .price,
.product_price .price {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

.details_boxed__price.price--red {
  color: #dc2626 !important;
}

.details_boxed__price .currency {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-left: 4px;
  align-self: flex-start !important;
  margin-top: 4px;
}

/* --- Количество (переделанный счетчик) --- */
.details_boxed__amount {
  margin: 0 !important;
}

.amount {
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  height: 48px !important;
  max-width: 130px !important;
  opacity: 1 !important;
  transition: border-color 0.2s ease !important;
}

.amount:hover,
.amount:focus-within {
  border-color: var(--fp-primary) !important;
}

.amount__plus,
.amount__minus {
  width: 40px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none;
  background: transparent !important;
  border: none !important;
}

.amount__plus:hover,
.amount__minus:hover {
  background: rgba(0, 123, 255, 0.06) !important;
  color: var(--fp-primary) !important;
}

.amount__input {
  width: 50px !important;
  height: 48px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border: none !important;
  background: transparent !important;
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  -moz-appearance: textfield;
  appearance: textfield;
  font-family: 'Inter', sans-serif !important;
}

.amount__input::-webkit-outer-spin-button,
.amount__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   КНОПКИ ДЕЙСТВИЯ — CTA
   ========================================================================== */

.details_boxed__buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding-top: 4px;
}

.fn_is_preorder,
.fn_is_stock,
.fn_not_preorder {
  flex: 1 1 auto;
}

/* --- Главная кнопка «Добавить в корзину» --- */
.product-page__button,
.fn_is_stock_product,
.fn_button_cart_product,
.product-page__buy-btn {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0 36px !important;
  height: 56px !important;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 1, .3, 1) !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Shimmer-блик при наведении */
.product-page__button::before,
.button--blick::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(105deg,
      transparent 20%,
      rgba(255, 255, 255, 0.12) 40%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.12) 60%,
      transparent 80%) !important;
  z-index: -1 !important;
  transition: left 0.6s ease !important;
}

.product-page__button:hover::before,
.button--blick:hover::before {
  left: 100% !important;
}

.product-page__button:hover,
.fn_is_stock_product:hover,
.fn_button_cart_product:hover {
  background: linear-gradient(135deg, var(--fp-primary) 0%, #0066cc 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0, 123, 255, 0.3) !important;
}

.product-page__button:active {
  transform: translateY(-1px) scale(0.98) !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}

/* --- Кнопка «Предзаказ» (outline-стиль) --- */
.product-page__button--preloader {
  background: transparent !important;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
}

.product-page__button--preloader:hover {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2) !important;
}

/* --- Кнопка «Нет на складе» --- */
.product-page__out_stock {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  cursor: not-allowed !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   ВТОРИЧНЫЕ КНОПКИ (Ракетка, Избранное, Сравнение)
   ========================================================================== */

.details_boxed__other {
  display: flex !important;
  gap: 8px !important;
}

.details_boxed__other .fast_order_button,
.product-page__compare,
.product-page__wishlist {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  background: #fff !important;
  color: #94a3b8 !important;
  transition: all 0.3s cubic-bezier(0.2, 1, .3, 1) !important;
  text-decoration: none !important;
  cursor: pointer;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  position: relative;
}

.details_boxed__other .fast_order_button:hover,
.product-page__compare:hover,
.product-page__wishlist:hover {
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
  background: rgba(0, 123, 255, 0.04) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.12) !important;
}

/* Тултип-подсказка на hover */
.product-page__compare::after,
.product-page__wishlist::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease;
  z-index: 20;
}

.product-page__compare:hover::after,
.product-page__wishlist:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.product-page__compare i {
  font-size: 20px !important;
}

.product-page__wishlist i {
  font-size: 22px !important;
}

.product-page__wishlist i::before {
  font-size: 22px !important;
}

/* Иконка «Ракетка» (fast order) */
.details_boxed__other .fast_order_button::before {
  font-size: 22px !important;
}

/* Состояние «Выбрано» */
.product-page__wishlist.selected {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
}

.product-page__compare.selected {
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
  background: rgba(0, 123, 255, 0.04) !important;
}

/* ==========================================================================
   АККОРДЕОН — ДОСТАВКА И ОПЛАТА (внутри details_boxed)
   ========================================================================== */

/* Убираем лишние рамки у вложенных item внутри --inner */
.details_boxed__item--inner {
  padding: 0 !important;
}

.details_boxed__item--inner>.details_boxed__item {
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.details_boxed__item--inner>.details_boxed__item:last-child {
  border-bottom: none !important;
}

/* Заголовок аккордеона */
.details_boxed__item--inner .accordion__header {
  padding: 18px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  cursor: pointer;
  transition: color 0.2s ease;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.details_boxed__item--inner .accordion__header:hover {
  color: var(--fp-primary) !important;
}

/* Стрелка */
.details_boxed__item--inner .accordion__arrow {
  font-size: 10px !important;
  color: #94a3b8 !important;
  transition: transform 0.35s cubic-bezier(0.2, 1, .3, 1), color 0.2s ease !important;
  margin-left: auto;
}

.details_boxed__item--inner .accordion__title.active .accordion__arrow {
  transform: rotate(180deg);
  color: var(--fp-primary) !important;
}

/* Контент аккордеона */
.details_boxed__item--inner .accordion__content {
  padding: 0 28px 20px !important;
  font-size: 13px !important;
  line-height: 1.8;
  color: #64748b !important;
}

.details_boxed__item--inner .accordion__content ul,
.details_boxed__item--inner .accordion__content ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.details_boxed__item--inner .accordion__content ul li,
.details_boxed__item--inner .accordion__content ol li {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #475569;
}

.details_boxed__item--inner .accordion__content ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fp-primary);
  flex-shrink: 0;
  opacity: 0.5;
}

.details_boxed__item--inner .accordion__content ul li:last-child,
.details_boxed__item--inner .accordion__content ol li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   БЛОК «ПОДЕЛИТЬСЯ» — соц. кнопки
   ========================================================================== */

.details_boxed__share {
  padding: 18px 28px !important;
}

.details_boxed__share .share {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 12px !important;
}

.share__text {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-right: 4px !important;
  white-space: nowrap;
}

/* jsSocials переопределения */
.fn_share.jssocials,
.share__icons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.jssocials-shares {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 0 !important;
}

.jssocials-share {
  margin: 0 !important;
  padding: 0 !important;
}

.jssocials-share-link {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
  opacity: 0.6;
  line-height: 1 !important;
}

.jssocials-share-link:hover {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.jssocials-share-link i,
.jssocials-share-link .fa {
  font-size: 13px !important;
  line-height: 1 !important;
}

.jssocials-share-logo {
  font-size: 13px !important;
}

.jssocials-share-count-box {
  display: none !important;
}

.jssocials-share-label {
  display: none !important;
}

/* ==========================================================================
   ТАБЫ — «Описание / Характеристики / Отзывы»
   ========================================================================== */

.product-page__tabs {
  margin-top: 32px !important;
}

.product-page__tabs .block--border {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --- Навигация табов (pill-стиль) --- */
.product-page__tabs .tabs__navigation {
  display: flex !important;
  gap: 6px !important;
  border-bottom: none !important;
  background: #f1f5f9 !important;
  border-radius: 14px !important;
  padding: 5px !important;
  margin-bottom: 0 !important;
}

.product-page__tabs .tabs__link,
#fn_products_tab .tabs__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  white-space: nowrap;
  border: none !important;
  background: transparent !important;
  position: relative !important;
  outline: none !important;
  box-shadow: none !important;
}

.product-page__tabs .tabs__link:hover,
#fn_products_tab .tabs__link:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

.product-page__tabs .tabs__link.selected,
#fn_products_tab .tabs__link.selected {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}

.product-page__tabs .tabs__link.selected::after,
#fn_products_tab .tabs__link.selected::after,
.product-page__tabs .tabs__link::after,
#fn_products_tab .tabs__link::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* --- Контент табов --- */
.product-page__tabs .tabs__content {
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin-top: 12px !important;
  overflow: hidden;
}

.product-page__tabs .tab {
  padding: 32px !important;
  background: #fff !important;
}

/* --- Мобильные табы --- */
.product-page__tabs .mobile_tab_navigation {
  margin: 0 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product-page__tabs .mobile_tab_navigation::after {
  display: none !important;
}

.product-page__tabs .mobile_tab_title {
  padding: 18px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: transparent !important;
  width: 100%;
  justify-content: space-between !important;
}

.product-page__tabs .mobile_tab_title svg {
  color: var(--fp-primary) !important;
}

.product-page__tabs .mobile_tab__content {
  padding: 24px !important;
}

/* ==========================================================================
   ТИПОГРАФИКА ОПИСАНИЯ ТОВАРА
   ========================================================================== */

.product_description .block__description,
.product_description .block__description--style {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
  font-weight: 400 !important;
}

.product_description h2,
.product_description h3 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  color: #0f172a !important;
  margin: 28px 0 14px !important;
  line-height: 1.3 !important;
}

.product_description h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.product_description h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

.product_description p {
  margin-bottom: 14px !important;
}

.product_description ul,
.product_description ol {
  padding-left: 20px !important;
  margin-bottom: 16px !important;
}

.product_description li {
  margin-bottom: 6px !important;
  color: #475569 !important;
}

.product_description strong,
.product_description b {
  color: #1e293b !important;
  font-weight: 700 !important;
}

.product_description a {
  color: var(--fp-primary) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0, 123, 255, 0.2);
  transition: border-color 0.2s ease;
}

.product_description a:hover {
  border-bottom-color: var(--fp-primary);
}

/* --- Таблицы в описании --- */
.product_description .block__description--style table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin: 20px 0 !important;
}

.product_description .block__description--style th {
  background: #0f172a !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 12px 16px !important;
  border: none !important;
}

.product_description .block__description--style td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: #475569;
}

.product_description .block__description--style tbody tr:nth-child(2n) {
  background: #f8fafc !important;
}

/* ==========================================================================
   ХАРАКТЕРИСТИКИ ТОВАРА
   ========================================================================== */

.features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.features__item {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.features__item:last-child {
  border-bottom: none !important;
}

.features__wrap {
  padding: 14px 0 !important;
  gap: 12px;
}

.features__name {
  flex: 0 0 45% !important;
  max-width: 45% !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  position: relative;
}

.features__name span {
  background: #fff !important;
  position: relative;
  z-index: 1;
  padding-right: 8px;
}

/* Пунктирная линия между названием и значением */
.features__name::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
  z-index: 0;
}

.features__value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #fff;
  position: relative;
  z-index: 1;
  padding-left: 8px;
}

.features__value a {
  color: var(--fp-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.features__value a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   БЛОК «ПОДЕЛИТЬСЯ» — соц. иконки
   ========================================================================== */

.share {
  gap: 12px !important;
}

.share__text span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.share__icons a,
.jssocials-share a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  opacity: 0.8;
}

.share__icons a:hover,
.jssocials-share a:hover {
  opacity: 1;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   НАВИГАЦИЯ «ПРЕД / СЛЕД» ТОВАР
   ========================================================================== */

.pager {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 !important;
  gap: 12px !important;
}

.pager li {
  flex: 1 !important;
}

.pager a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  min-height: 56px;
}

.pager a:hover {
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.08) !important;
  transform: translateY(-2px);
}

.pager a svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.pager a:hover svg {
  color: var(--fp-primary) !important;
}

.pager a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* ==========================================================================
   ЗАГОЛОВОК ТОВАРА + АРТИКУЛ
   ========================================================================== */

.block__header--boxed {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 18px !important;
  padding: 20px 28px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
}

.block__heading {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.product-page__sku {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  background: #f1f5f9 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-page__sku .sku_nubmer {
  color: #334155 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   ГАЛЕРЕЯ ТОВАРА — ПОЛИРОВКА
   ========================================================================== */

.product-page__gallery .block--boxed {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  padding: 0 !important;
}

.product-page__image {
  background: #fafbfc !important;
  min-height: 400px;
}

.product-page__image img {
  mix-blend-mode: multiply !important;
  object-fit: contain !important;
}

.product-page__no_image {
  background: #f8fafc !important;
  min-height: 400px !important;
  border-radius: 18px !important;
  color: #cbd5e1 !important;
}

.product-page__no_image svg {
  width: 120px !important;
  height: 120px !important;
  opacity: 0.4;
}

/* Миниатюры */
.product-page__images {
  padding: 12px !important;
  gap: 8px;
}

.product-page__images-item {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s ease !important;
  cursor: pointer;
}

.product-page__images-item:hover,
.product-page__images .swiper-slide-thumb-active {
  border-color: var(--fp-primary) !important;
}

/* --- Стикеры на фото --- */
.stickers_product-page {
  position: absolute;
  top: 16px !important;
  left: 16px !important;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sticker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
}

.sticker--hit {
  background: linear-gradient(135deg, var(--fp-primary), #0066cc) !important;
}

.sticker--discount {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
}

/* ==========================================================================
   ФОРМА КОММЕНТАРИЕВ / ОТЗЫВОВ
   ========================================================================== */

.product-page__tabs .form--boxed {
  background: #f8fafc !important;
  border-radius: 16px !important;
  padding: 28px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.product-page__tabs .form__title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-page__tabs .form__title svg {
  color: var(--fp-primary) !important;
}

.product-page__tabs .form__input,
.product-page__tabs .form__textarea {
  background: #fff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  transition: border-color 0.2s ease !important;
  width: 100%;
}

.product-page__tabs .form__input:focus,
.product-page__tabs .form__textarea:focus {
  border-color: var(--fp-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.08) !important;
}

.product-page__tabs .form__button {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

.product-page__tabs .form__button:hover {
  background: linear-gradient(135deg, var(--fp-primary), #0066cc) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.25) !important;
}

/* --- Комментарии --- */
.comment__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 20px 0 !important;
}

.comment__item:last-child {
  border-bottom: none !important;
}

.comment__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.comment__date span {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.comment__body {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  margin-top: 8px !important;
}

.admin_note .comment__inner {
  background: rgba(0, 123, 255, 0.03) !important;
  border-left: 3px solid var(--fp-primary) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
  margin-left: 20px !important;
}

/* --- Просмотренные товары (сайдбар) --- */
.browsed .product_preview {
  border-radius: 10px !important;
  padding: 12px !important;
}

/* ==========================================================================
   РЕКОМЕНДУЕМЫЕ И СВЯЗАННЫЕ ТОВАРЫ / БЛОССЫ
   ========================================================================== */

.fn_product .block--boxed.block--border {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 20px !important;
  overflow: hidden;
}

.fn_product .block__header .block__title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 20px !important;
}

/* ==========================================================================
   ПУСТОЕ ИЗОБРАЖЕНИЕ (NO IMAGE)
   ========================================================================== */

.product-page__no_image {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  min-height: 400px !important;
  border-radius: 0 !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  gap: 16px;
}

.product-page__no_image svg {
  width: 80px !important;
  height: 80px !important;
  opacity: 0.25;
  color: #94a3b8 !important;
}

/* Текст вместо картинки (alt) */
.product-page__image a img[alt]::after {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

/* ==========================================================================
   ПУСТЫЕ СОСТОЯНИЯ
   ========================================================================== */

.boxed--notify,
.boxed.boxed--middle.boxed--notify {
  padding: 24px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   КОММЕНТАРИИ — АВАТАРКИ
   ========================================================================== */

.comment__icon {
  flex-shrink: 0;
}

.comment__icon svg {
  width: 36px !important;
  height: 36px !important;
  color: #94a3b8 !important;
  background: #f1f5f9;
  border-radius: 50%;
  padding: 6px;
}

.comment__inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.comment__boxed {
  flex: 1;
  min-width: 0;
}

/* --- Кнопка фильтра (мобильная) --- */
.switch_mobile_filter {
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
}

/* --- Улучшение «Написать в WhatsApp» --- */
.ref-wa-float {
  position: fixed;
  right: 24px;
  bottom: 90px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: all 0.3s ease;
}

.ref-wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  color: #fff !important;
}

/* --- Выбранные фильтры --- */
.selected_features__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0, 136, 255, 0.06) !important;
  border: 1px solid rgba(0, 136, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fp-primary) !important;
  margin: 2px !important;
}

.selected_features__item .fn_remove_feature {
  color: var(--fp-primary) !important;
  font-size: 14px !important;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.selected_features__item .fn_remove_feature:hover {
  opacity: 1;
}

/* --- Сетка товаров (страница категории) --- */
.products_list .f_col,
.products_list [class*="col-"] {
  display: flex !important;
}

.products_list .product_preview {
  width: 100% !important;
}

/* ==========================================================================
   20.5 ТЁМНАЯ ТЕМА — Полная профессиональная реализация
   Поверхности:  L0 #0b1121 (фон)
                 L1 #141c2e (карточки, блоки)
                 L2 #1c2640 (поднятые элементы, ховеры)
                 L3 #243049 (акцентные контейнеры)
   ========================================================================== */

html.dark-theme {
  --fp-surface: #141c2e;
  --fp-bg: #0b1121;
  --fp-text: #c8d1dc;
  --fp-text-secondary: #7a8ba3;
  --fp-border: #1e2a40;
  --okay-bg: #0b1121;
  --okay-boxed-color: #141c2e;
  --okay-body-text: #c8d1dc;
  --okay-body-heading: #e8ecf1;
  --okay-border-color: #1e2a40;
  --okay-shadow-color: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html.dark-theme body {
  background-color: #0b1121 !important;
  color: #c8d1dc;
}

/* ─── Header: верхняя панель ─── */
html.dark-theme .header__top {
  background: #060b16 !important;
  border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── Header: центральная панель (лого, меню) ─── */
html.dark-theme .header__center {
  background: #0f1623 !important;
  border-bottom-color: #1e2a40 !important;
}

html.dark-theme .header__center a,
html.dark-theme .header__menu a {
  color: #94a3b8 !important;
}

html.dark-theme .header__menu a:hover {
  color: #fff !important;
}

html.dark-theme .header-contact--phone a,
html.dark-theme .header-contact--email a,
html.dark-theme .header-contact--time {
  color: #94a3b8 !important;
}

html.dark-theme .header-contact--phone a:hover {
  color: #fff !important;
}

html.dark-theme .header-contact__inner .header-contact__item--visible::after {
  color: #475569 !important;
}

html.dark-theme .logo__link img,
html.dark-theme .logo__link svg {
  filter: brightness(0) invert(1);
}

/* Если у SVG есть цветные элементы — сохраняем синий акцент */
html.dark-theme .logo__link svg path[fill="#0088ff"],
html.dark-theme .logo__link svg path[fill="#08f"],
html.dark-theme .logo__link svg path[fill="#0088FF"],
html.dark-theme .logo__link svg [style*="fill:#0088ff"],
html.dark-theme .logo__link svg [style*="fill: #0088ff"] {
  filter: none;
}

html.dark-theme .header__logo {
  opacity: 0.95;
}

/* ─── Hero-слайдер ─── */
html.dark-theme .ref-slider-wrap {
  background: #141c2e;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

html.dark-theme .ref-hero__title {
  color: #f0f4f8;
}

html.dark-theme .ref-hero__subtitle {
  color: #64748b;
}

html.dark-theme .ref-hero__btn {
  background: #fff !important;
  color: #0f172a !important;
}

html.dark-theme .ref-hero__btn:hover {
  background: var(--fp-primary) !important;
  color: #fff !important;
}

html.dark-theme .ref-slider-btn {
  background: rgba(20, 28, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html.dark-theme .ref-slider-btn svg {
  stroke: rgba(255, 255, 255, 0.7);
}

html.dark-theme .ref-slider-btn:hover {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
}

html.dark-theme .ref-slider-btn:hover svg {
  stroke: #fff;
}

html.dark-theme .ref-slider-number,
html.dark-theme .ref-slider-total {
  color: #94a3b8;
}

html.dark-theme .ref-progress-wrap {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .ref-hero__img {
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
}

/* ─── Категории (track) ─── */
html.dark-theme .ref-cat-card {
  background: #141c2e;
  border-color: #1e2a40;
}

html.dark-theme .ref-cat-card:hover,
html.dark-theme .ref-cat-card.is-active {
  border-color: var(--fp-primary);
  background: #1c2640;
  box-shadow: 0 4px 20px rgba(0, 136, 255, 0.08);
}

html.dark-theme .ref-cat-card__title {
  color: #e2e8f0;
}

html.dark-theme .ref-cat-card__btn {
  color: #60a5fa;
}

html.dark-theme .ref-cat-card__img {
  opacity: 0.35;
  filter: brightness(1.3);
}

html.dark-theme .ref-cat-card:hover .ref-cat-card__img {
  opacity: 0.6;
}

/* ─── Секции товаров ─── */
html.dark-theme .ref-section__title {
  color: #e8ecf1;
}

html.dark-theme .ref-scroll-btn--black {
  background: #1c2640;
  border: 1px solid #2a3654;
}

html.dark-theme .ref-scroll-btn--black:hover {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
}

/* ─── Карточки товаров ─── */
html.dark-theme .product_preview {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme .product_preview:hover {
  border-color: rgba(0, 136, 255, 0.2) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme .product_preview__top {
  background: #0f1623;
  border-radius: 8px;
}

html.dark-theme .product_preview__image img,
html.dark-theme .preview_img {
  mix-blend-mode: normal !important;
  filter: brightness(0.95) contrast(1.05);
}

html.dark-theme .product_preview__name {
  color: #d0d8e4 !important;
}

html.dark-theme .product_preview__name:hover {
  color: #60a5fa !important;
}

html.dark-theme .product_preview__sku {
  color: #4a5b73;
}

html.dark-theme .fn_price {
  color: #f0f4f8 !important;
}

html.dark-theme .currency {
  color: #7a8ba3 !important;
}

html.dark-theme .ref-price-from {
  color: #4a5b73 !important;
}

html.dark-theme .price_request {
  color: #60a5fa !important;
}

html.dark-theme .compare_price {
  color: #4a5b73 !important;
}

html.dark-theme .product_preview__btn {
  background: var(--fp-primary) !important;
  border: none !important;
  color: #fff !important;
}

html.dark-theme .product_preview__btn:hover {
  background: #0066cc !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 136, 255, 0.3);
}

html.dark-theme .product_preview__btn--order {
  background: #1c2640 !important;
  border: 1px solid #2a3654 !important;
  color: #7a8ba3 !important;
}

html.dark-theme .product_preview__btn--order:hover {
  background: var(--fp-primary) !important;
  color: #fff !important;
}

html.dark-theme .ref-btn-request {
  background: transparent !important;
  border-color: var(--fp-primary) !important;
  color: #60a5fa !important;
}

html.dark-theme .ref-btn-request:hover {
  background: var(--fp-primary) !important;
  color: #fff !important;
}

/* ─── Wishlist сердечко ─── */
html.dark-theme .product_preview__wishlist {
  background: rgba(15, 22, 35, 0.9) !important;
  color: #4a5b73 !important;
  border: 1px solid #1e2a40 !important;
}

html.dark-theme .product_preview__wishlist:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ─── Бейджи ─── */
html.dark-theme .ref-badge--top {
  background: #1d4ed8;
}

html.dark-theme .ref-badge--promo {
  background: #b91c1c;
}

html.dark-theme .ref-badge--new {
  background: #047857;
}

/* ─── Наличие (пульс) ─── */
html.dark-theme .ref-stock-badge {
  color: #34d399;
}

html.dark-theme .ref-stock-pulse {
  background: #34d399;
}

html.dark-theme .ref-stock-pulse::after {
  border-color: #34d399;
}

/* ─── Промо-баннер ─── */
html.dark-theme .ref-promo {
  background: #111827 !important;
  border: 1px solid #1e2a40;
}

html.dark-theme .ref-promo__decor {
  background: radial-gradient(circle, rgba(0, 136, 255, 0.06) 0%, transparent 70%);
}

/* ─── CTA-секция ─── */
html.dark-theme .ref-cta {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

html.dark-theme .ref-cta__text {
  color: rgba(255, 255, 255, 0.55);
}

/* ─── Футер ─── */
html.dark-theme .footer {
  background: #060b16 !important;
  border-top: 1px solid #1e2a40 !important;
}

html.dark-theme .footer__copyright {
  border-top-color: #141c2e;
}

/* ─── Offcanvas (Dark Theme) ─── */
html.dark-theme .ref-offcanvas-menu {
  background: #0f1623;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.3);
}

html.dark-theme .ref-offcanvas-header {
  background: linear-gradient(135deg, #060b16 0%, #0f1623 100%);
  border-bottom-color: rgba(0, 136, 255, 0.1);
}

html.dark-theme .ref-offcanvas-close {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .ref-offcanvas-body {
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

html.dark-theme .ref-offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Категории (Dark Theme) ─── */
html.dark-theme #refOffcanvasMenu .ref-cat-link {
  color: #94a3b8 !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark-theme #refOffcanvasMenu .ref-cat-link:hover {
  background: rgba(0, 136, 255, 0.04) !important;
  color: #60a5fa !important;
}

html.dark-theme .ref-cat-item.is-current>.ref-cat-link {
  color: #60a5fa !important;
  background: rgba(0, 136, 255, 0.06) !important;
}

html.dark-theme .ref-cat-icon {
  background: rgba(0, 136, 255, 0.06);
  color: #60a5fa;
}

html.dark-theme .ref-cat-icon--default {
  background: rgba(148, 163, 184, 0.06);
  color: #4a5b73;
}

html.dark-theme .ref-cat-link:hover .ref-cat-icon {
  background: rgba(0, 136, 255, 0.12);
  color: #60a5fa;
}

html.dark-theme .ref-cat-count {
  background: rgba(0, 136, 255, 0.08);
  color: #60a5fa;
}

html.dark-theme .ref-cat-arrow {
  color: #4a5b73;
}

html.dark-theme .ref-cat-arrow:hover {
  background: rgba(0, 136, 255, 0.06);
  color: #60a5fa;
}

html.dark-theme .ref-cat-item.is-expanded>.ref-cat-link .ref-cat-arrow {
  color: #60a5fa;
  background: rgba(0, 136, 255, 0.06);
}

/* Уровень 2 (Dark) */
html.dark-theme .ref-cat-level--2 .ref-cat-list {
  background: rgba(0, 0, 0, 0.1);
  border-left-color: rgba(0, 136, 255, 0.08);
}

html.dark-theme #refOffcanvasMenu .ref-cat-level--2 .ref-cat-link {
  color: #7a8ba3 !important;
  border-bottom-color: rgba(255, 255, 255, 0.02) !important;
}

/* Уровень 3 (Dark) */
html.dark-theme #refOffcanvasMenu .ref-cat-level--3 .ref-cat-link {
  color: #64748b !important;
  background: rgba(255, 255, 255, 0.02);
}

html.dark-theme #refOffcanvasMenu .ref-cat-level--3 .ref-cat-link:hover {
  background: rgba(0, 136, 255, 0.06) !important;
  color: #60a5fa !important;
}

html.dark-theme .ref-cat-thumb {
  background: rgba(0, 136, 255, 0.04);
}

html.dark-theme .ref-cat-thumb-placeholder {
  color: #2a3654;
}

/* ─── Переключатель тем ─── */
html.dark-theme .ref-theme-toggle {
  background: #1c2640;
  border-color: #2a3654;
  color: #e2e8f0;
}

html.dark-theme .ref-theme-toggle:hover {
  border-color: var(--fp-primary);
}

/* ─── FAB ─── */
html.dark-theme .ref-grizzly-trigger {
  background: #141c2e;
  border-color: rgba(0, 136, 255, 0.2);
}

/* ─── Общие блоки CMS ─── */
html.dark-theme .products_container__boxed,
html.dark-theme .details_boxed,
html.dark-theme .details_boxed__item {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  color: #c8d1dc !important;
}

html.dark-theme .breadcrumb a {
  color: #64748b !important;
}

html.dark-theme .breadcrumb a:hover {
  color: #fff !important;
}

html.dark-theme .comment__boxed {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
}

html.dark-theme .comment__name {
  color: #e2e8f0 !important;
}

html.dark-theme .comment__body {
  color: #94a3b8 !important;
}

/* Формы */
html.dark-theme input[type="text"],
html.dark-theme input[type="email"],
html.dark-theme input[type="tel"],
html.dark-theme input[type="password"],
html.dark-theme textarea,
html.dark-theme select {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  color: #c8d1dc !important;
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
  color: #4a5b73 !important;
}

/* Пагинация */
html.dark-theme .pagination a,
html.dark-theme .pagination span {
  color: #7a8ba3 !important;
  border-color: #1e2a40 !important;
  background: #141c2e !important;
}

html.dark-theme .pagination .active {
  background: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
  color: #fff !important;
}

/* Фильтры и сайдбар */
html.dark-theme .sidebar,
html.dark-theme .filter,
html.dark-theme .fn_filter {
  background: #141c2e !important;
}

html.dark-theme .filter__catalog_link {
  color: #94a3b8 !important;
  border-bottom-color: #1e2a40 !important;
}

html.dark-theme .filter__catalog_link:hover {
  color: #60a5fa !important;
}

/* Switcher (языки/валюты) dropdown */
html.dark-theme .switcher__hidden {
  background: #1c2640 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .switcher__link {
  color: #94a3b8 !important;
}

html.dark-theme .switcher__link:hover {
  color: #fff !important;
}

/* Попапы */
html.dark-theme .popup_bg,
html.dark-theme .popup_confirm__title {
  background: #141c2e !important;
  color: #c8d1dc !important;
}

/* Скроллбар тёмной темы */
html.dark-theme ::-webkit-scrollbar-track {
  background: #060b16;
}

html.dark-theme ::-webkit-scrollbar-thumb {
  border-color: #060b16;
}

html.dark-theme {
  scrollbar-color: var(--fp-primary) #060b16;
}

/* ─── Доп. покрытие белых элементов из theme.css ─── */

/* Карточки — border-bottom из theme.css */
html.dark-theme .product_preview__bottom {
  border-top-color: #1e2a40 !important;
}

/* Цены через CSS-переменные — theme.css читает --okay-body-text */
html.dark-theme .product_preview__prices .price {
  color: #f0f4f8 !important;
}

html.dark-theme .product_preview__prices .price .currency {
  color: #7a8ba3 !important;
}

html.dark-theme .product_preview__prices .old_price {
  color: #4a5b73 !important;
}

/* Кнопки корзины в карточке (из theme.css) */
html.dark-theme .fn_button_cart,
html.dark-theme .product_preview__buy_button,
html.dark-theme .buy_button {
  background: #1c2640 !important;
  color: #e2e8f0 !important;
  border-color: #2a3654 !important;
}

html.dark-theme .fn_button_cart:hover,
html.dark-theme .product_preview__buy_button:hover,
html.dark-theme .buy_button:hover {
  background: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
  color: #fff !important;
}

/* Попап корзины */
html.dark-theme .fn_pop_up_cart_wrap,
html.dark-theme #fn_pop_up_cart,
html.dark-theme .pop_up_cart {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  color: #c8d1dc !important;
}

html.dark-theme .pop_up_cart__item {
  border-bottom-color: #1e2a40 !important;
}

/* Каталог — выпадающее меню */
html.dark-theme .catalog_menu,
html.dark-theme .catalog_dropdown__menu,
html.dark-theme .subcategory {
  background: #0f1623 !important;
  border-color: #1e2a40 !important;
}

html.dark-theme .catalog_menu a,
html.dark-theme .catalog_dropdown__menu a,
html.dark-theme .categories_menu__link {
  color: #94a3b8 !important;
}

html.dark-theme .catalog_menu a:hover,
html.dark-theme .catalog_dropdown__menu a:hover,
html.dark-theme .categories_menu__link:hover {
  color: #fff !important;
  background: rgba(0, 136, 255, 0.04) !important;
}

/* Main content area */
html.dark-theme main,
html.dark-theme .main,
html.dark-theme #main_content,
html.dark-theme .fn_ajax_content {
  background: transparent !important;
}

/* Контейнеры с boxed фоном */
html.dark-theme .products_container,
html.dark-theme .block,
html.dark-theme .tab-content,
html.dark-theme .page__body {
  background: transparent !important;
  color: #c8d1dc !important;
}

/* Ссылки */
html.dark-theme a {
  color: #60a5fa;
}

html.dark-theme a:hover {
  color: #93bbfc;
}

/* Заголовки */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4 {
  color: #e8ecf1 !important;
}

/* Контент страницы */
html.dark-theme .page__body p,
html.dark-theme .page__body li,
html.dark-theme .page__body td,
html.dark-theme .page__body th {
  color: #c8d1dc !important;
}

html.dark-theme table,
html.dark-theme td,
html.dark-theme th {
  border-color: #1e2a40 !important;
}

html.dark-theme th {
  background: #1c2640 !important;
}

/* Уведомления */
html.dark-theme .alert {
  background: #1c2640 !important;
  border-color: #2a3654 !important;
  color: #c8d1dc !important;
}

/* Callback форма */
html.dark-theme .popup__body,
html.dark-theme .popup__wrapper,
html.dark-theme .fn_callback {
  background: #141c2e !important;
}

html.dark-theme .popup__title {
  color: #e8ecf1 !important;
}

/* Мобильное меню */
html.dark-theme .fn_mobile_menu,
html.dark-theme .mobile_menu__content {
  background: #0f1623 !important;
  color: #c8d1dc !important;
}

/* Сравнение */
html.dark-theme .comparison__head,
html.dark-theme .comparison__row {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
}

html.dark-theme .comparison__cell {
  color: #c8d1dc !important;
}

/* Блог — статьи */
html.dark-theme .post_preview,
html.dark-theme .post_preview__header,
html.dark-theme .post__body {
  background: #141c2e !important;
  color: #c8d1dc !important;
}

/* Hover переменные theme.css */
html.dark-theme .product_preview:hover {
  background: #1c2640 !important;
}

/* Tabs */
html.dark-theme .tab__item {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  color: #94a3b8 !important;
}

html.dark-theme .tab__item.active,
html.dark-theme .tab__item:hover {
  background: #1c2640 !important;
  color: #e2e8f0 !important;
}

/* Stickers */
html.dark-theme .sticker_image {
  filter: brightness(0.9);
}

/* Footer: принудительно скрытые категории */
html.dark-theme .footer__content .footer__menu_item.closed {
  display: none !important;
}

/* ─── Доработка: Dark Theme для новых секций ─── */

html.dark-theme .sidebar {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
}

html.dark-theme .filter__header {
  color: #e2e8f0 !important;
  border-bottom-color: #1e2a40 !important;
}

html.dark-theme .filter__header:hover {
  background: rgba(0, 136, 255, 0.03) !important;
}

html.dark-theme .filter__content label {
  color: #94a3b8 !important;
}

html.dark-theme .filter__content label:hover {
  color: #e2e8f0 !important;
}

html.dark-theme .noUi-target {
  background: #1e2a40 !important;
}

html.dark-theme .noUi-handle {
  background: #1c2640 !important;
  border-color: var(--fp-primary) !important;
}

html.dark-theme .h1,
html.dark-theme h1 {
  color: #e8ecf1 !important;
}

html.dark-theme .breadcrumb a {
  color: #64748b !important;
}

html.dark-theme .breadcrumb a:hover {
  color: #fff !important;
}

html.dark-theme .breadcrumb__current {
  color: #94a3b8 !important;
}

html.dark-theme .breadcrumb__delimiter {
  color: #334155 !important;
}

html.dark-theme .block__description {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  color: #94a3b8 !important;
}

html.dark-theme .sort__item {
  color: #64748b !important;
}

html.dark-theme .sort__item:hover {
  color: #60a5fa !important;
  background: rgba(0, 136, 255, 0.04) !important;
}

html.dark-theme .sort__item.selected,
html.dark-theme .sort__item.active {
  color: #60a5fa !important;
  background: rgba(0, 136, 255, 0.06) !important;
  border-color: rgba(0, 136, 255, 0.12) !important;
}

html.dark-theme .section_advantages {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
}

html.dark-theme .advantages__icon {
  background: rgba(0, 136, 255, 0.08) !important;
}

html.dark-theme .advantages__title {
  color: #94a3b8 !important;
}

html.dark-theme .details_price .price,
html.dark-theme .product_price .price {
  color: #f0f4f8 !important;
}

html.dark-theme .tab-content {
  background: #141c2e !important;
  border-color: #1e2a40 !important;
  color: #c8d1dc !important;
}

html.dark-theme .selected_features__item {
  background: rgba(0, 136, 255, 0.06) !important;
  border-color: rgba(0, 136, 255, 0.12) !important;
  color: #60a5fa !important;
}

html.dark-theme .products_container__sort {
  border-bottom-color: #1e2a40 !important;
}

/* ==========================================================================
   21. АДАПТИВНЫЕ ПРАВКИ — Профессиональная мобильная версия
   ========================================================================== */

/* ══════════════════════════════════════
   TABLET (≤991px)
   ══════════════════════════════════════ */
@media (max-width: 991px) {

  /* --- Шапка --- */
  .header__top {
    padding: 4px 0 !important;
  }

  .ref-top-contacts {
    display: none !important;
  }

  .header__center {
    padding: 8px 0 !important;
  }

  .header__bottom,
  .fn_header__sticky {
    min-height: 52px !important;
  }

  .catalog_button {
    max-width: 120px !important;
    flex: 0 0 auto !important;
  }

  .catalog_button__heading {
    height: 34px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
  }

  .search {
    margin: 7px 8px !important;
  }

  .search__input {
    font-size: 12px !important;
  }

  .search__button {
    width: 32px !important;
    height: 28px !important;
  }

  .header_informers__item {
    min-width: 36px !important;
    padding: 0 4px !important;
  }

  .header_informers svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* --- Слайдер --- */
  .ref-slider-wrap {
    height: auto;
    min-height: 280px;
    border-radius: 12px;
    margin: 12px 0;
  }

  .ref-slider {
    height: auto;
    min-height: 280px;
  }

  .ref-slide {
    position: relative;
    inset: auto;
    padding: 24px 20px 20px;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .ref-slide.active {
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ref-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .ref-hero__content {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ref-hero__title {
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .ref-hero__subtitle {
    font-size: 10px;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }

  .ref-hero__btn {
    padding: 11px 22px;
    font-size: 10.5px;
  }

  .ref-hero__image {
    display: flex;
    flex: none;
    width: 100%;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
  }

  .ref-hero__img {
    max-height: 140px;
    max-width: 80%;
    object-fit: contain;
  }

  .ref-slider-controls {
    position: relative;
    left: auto;
    bottom: auto;
    padding: 0 20px 16px;
  }

  .ref-slider-btn {
    display: flex !important;
    top: auto;
    bottom: 70px;
    transform: none;
    width: 36px;
    height: 36px;
  }

  .ref-slider-btn svg {
    width: 14px;
    height: 14px;
  }

  .ref-slider-btn--prev {
    left: 10px;
  }

  .ref-slider-btn--next {
    right: 10px;
  }

  /* --- Категории трек --- */
  .ref-cat-card {
    min-width: 140px;
    height: 90px;
    padding: 12px;
  }

  .ref-cat-card__title {
    font-size: 11px;
  }

  .ref-cat-card__btn {
    font-size: 9px;
  }

  .ref-cat-card__img {
    width: 75px;
    height: 75px;
  }

  /* --- Промо / CTA --- */
  .ref-promo-wrapper,
  .ref-cta-wrapper {
    margin: 20px 0 !important;
    padding: 12px 0;
  }

  .ref-promo {
    padding: 20px 16px !important;
    flex-direction: column;
    text-align: center;
    gap: 12px;
    border-radius: 10px !important;
  }

  .ref-promo__title {
    font-size: 16px !important;
  }

  .ref-promo__subtitle {
    font-size: 12px !important;
  }

  .ref-promo__btn {
    padding: 12px 24px !important;
    font-size: 10.5px !important;
  }

  .ref-cta__inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .ref-cta__title {
    font-size: 17px !important;
  }

  .ref-cta__text {
    font-size: 12px;
  }

  .ref-cta__btn {
    padding: 12px 24px;
    font-size: 10.5px;
  }

  .ref-promo-ticker-track span,
  .ref-cta-ticker-track span {
    font-size: 13px;
  }

  /* --- Секции --- */
  .ref-section {
    margin: 20px 0;
  }

  .ref-section__header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .ref-section__header > .d-flex:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100%;
  }

  .ref-section__header .badge {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }

  .ref-scroll-btns {
    margin-bottom: 0 !important;
  }

  .ref-section__title {
    font-size: 15px;
    line-height: 1.2;
  }

  .ref-section__title svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* --- Scroll-кнопки --- */
  .ref-scroll-btn {
    width: 30px;
    height: 30px;
  }

  /* --- Карточки товаров (мобильная сетка) --- */
  .product_preview {
    padding: 10px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }

  .product_preview__top {
    height: 130px;
    margin-bottom: 8px;
  }

  .product_preview__image {
    padding: 6px;
  }

  .product_preview:hover {
    transform: none;
  }

  .product_preview__meta {
    min-height: 18px;
    height: 18px;
    margin-bottom: 4px;
  }

  .ref-stock-badge {
    font-size: 7.5px;
    gap: 3px;
  }

  .ref-stock-badge span {
    display: none;
  }

  .ref-stock-pulse {
    width: 6px;
    height: 6px;
  }

  .product_preview__name {
    font-size: 11.5px !important;
    min-height: 32px;
    max-height: 32px;
    margin-bottom: 6px;
    line-height: 1.3 !important;
  }

  .fn_price {
    font-size: 14px !important;
  }

  .currency {
    font-size: 10px;
  }

  .ref-price-from {
    font-size: 8px;
  }

  .price_request {
    font-size: 9px !important;
  }

  .product_preview__btn {
    height: 34px !important;
    font-size: 8.5px !important;
    border-radius: 6px !important;
    letter-spacing: 0.03em;
    padding: 0 6px !important;
  }

  .product_preview__price-row {
    margin-bottom: 6px;
    min-height: 22px;
  }

  .ref-badges {
    top: 6px;
    left: 6px;
  }

  .ref-badge {
    padding: 3px 6px;
    font-size: 7px;
  }

  .product_preview__wishlist-pos {
    top: 6px !important;
    right: 6px !important;
  }

  .product_preview__wishlist {
    width: 26px !important;
    height: 26px !important;
  }

  .product_preview__wishlist i {
    font-size: 11px !important;
  }

  /* --- Секция товаров в слайдере --- */
  .ref-product-slide {
    min-width: 170px !important;
    flex: 0 0 170px !important;
  }

  .ref-product-track {
    padding-bottom: 6px;
  }

  /* --- Сетка категории (2 колонки) --- */
  .products_list .col-6,
  .products_list .col-md-4,
  .products_list .col-lg-3,
  .products_list [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* --- FAB / Theme toggle --- */
  .ref-grizzly-fab {
    right: 14px;
    bottom: 72px;
  }

  .ref-grizzly-trigger {
    width: 48px;
    height: 48px;
  }

  .ref-theme-toggle {
    left: 14px;
    bottom: 72px;
    width: 40px;
    height: 40px;
  }

  /* --- Футер --- */
  .footer {
    padding-top: 32px !important;
    padding-bottom: 80px !important;
  }

  .footer__title {
    font-size: 11px !important;
    padding: 14px 0 !important;
  }

  .footer__menu_link {
    font-size: 12px !important;
  }

  .footer__copyright {
    margin-top: 24px;
    padding-top: 12px;
  }

  /* --- Страница товара --- */
  .h1,
  h1 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }

  .details_boxed,
  .details_boxed__item {
    padding: 14px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  .details_price .price,
  .product_price .price {
    font-size: 22px !important;
  }

  .fn_is_stock_product,
  .fn_button_cart_product {
    padding: 12px 20px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }

  /* --- Хлебные крошки --- */
  .breadcrumb {
    padding: 10px 0 !important;
    font-size: 11px !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  /* --- Табы --- */
  .tab__item {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .tab-content {
    padding: 16px !important;
    border-radius: 0 10px 10px 10px !important;
  }

  /* --- Преимущества --- */
  .section_advantages {
    padding: 16px 8px !important;
    margin: 20px 0 !important;
    border-radius: 10px !important;
  }

  .advantages__item {
    padding: 8px 4px !important;
  }

  .advantages__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .advantages__icon svg,
  .advantages__icon img {
    width: 22px !important;
    height: 22px !important;
  }

  .advantages__title {
    font-size: 10px !important;
  }

  /* --- Пагинация --- */
  .pagination {
    gap: 3px !important;
    padding: 16px 0 !important;
  }

  .pagination a,
  .pagination span {
    min-width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* --- Описание --- */
  .block__description {
    padding: 14px 16px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  /* --- Соц. сети (страница товара) --- */
  .social-btn,
  .product__social a,
  .fn_share a {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* --- WhatsApp кнопка --- */
  .ref-wa-float {
    bottom: 72px;
    right: 14px;
    padding: 8px 14px;
    font-size: 11px;
  }

  /* --- Фильтр: фиксированная сайдбар панель --- */
  .sidebar {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* --- Кнопка показать фильтры --- */
  .switch_mobile_filter {
    padding: 7px 14px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* --- Сортировка --- */
  .products_container__sort {
    padding: 8px 0 !important;
    margin-bottom: 4px !important;
  }

  .sort__item {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}

/* ══════════════════════════════════════
   MOBILE (≤576px)
   ══════════════════════════════════════ */
@media (max-width: 576px) {

  /* --- Шапка --- */
  .header__center {
    padding: 6px 0 !important;
  }

  .header__bottom,
  .fn_header__sticky {
    min-height: 48px !important;
  }

  .catalog_button {
    max-width: 100px !important;
  }

  .catalog_button__heading {
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
  }

  .catalog_icon {
    font-size: 13px !important;
    margin-right: 4px !important;
  }

  .search {
    margin: 5px 6px !important;
    border-radius: 6px !important;
  }

  .search__input {
    font-size: 11px !important;
  }

  .search__button {
    width: 28px !important;
    height: 26px !important;
    border-radius: 5px !important;
  }

  .header_informers__item {
    min-width: 32px !important;
    padding: 0 3px !important;
  }

  .header_informers svg {
    width: 18px !important;
    height: 18px !important;
  }

  .header_informers__item .cart_counter,
  .header_informers__item .compare_counter,
  .header_informers__item .wishlist_counter {
    width: 15px !important;
    height: 15px !important;
    font-size: 8px !important;
    line-height: 12px !important;
  }

  /* --- Слайдер --- */
  .ref-slider-wrap {
    height: auto;
    min-height: 220px;
    border-radius: 10px;
    margin: 8px 0;
  }

  .ref-slider {
    height: auto;
    min-height: 220px;
  }

  .ref-slide {
    padding: 18px 14px 14px;
  }

  .ref-hero {
    gap: 12px;
  }

  .ref-hero__title {
    font-size: 18px;
    line-height: 1.1;
    margin-bottom: 6px;
  }

  .ref-hero__subtitle {
    font-size: 9px;
    margin-bottom: 10px;
    letter-spacing: 0.06em;
  }

  .ref-hero__btn {
    padding: 9px 18px;
    font-size: 9.5px;
    border-radius: 7px;
  }

  .ref-hero__image {
    max-height: 120px;
  }

  .ref-hero__img {
    max-height: 110px;
    max-width: 70%;
  }

  .ref-slider-controls {
    padding: 0 14px 12px;
    gap: 8px;
  }

  .ref-slider-number,
  .ref-slider-total {
    font-size: 11px;
  }

  .ref-progress-wrap {
    width: 48px;
  }

  .ref-slider-btn {
    bottom: 60px;
    width: 30px;
    height: 30px;
  }

  .ref-slider-btn svg {
    width: 12px;
    height: 12px;
  }

  .ref-slider-btn--prev {
    left: 6px;
  }

  .ref-slider-btn--next {
    right: 6px;
  }

  /* --- Категории --- */
  .ref-cats-wrap {
    margin: 10px 0 4px;
    padding-bottom: 4px;
  }

  .ref-cat-card {
    min-width: 120px;
    height: 78px;
    padding: 10px;
    border-radius: 8px;
  }

  .ref-cat-card__title {
    font-size: 10px;
    margin-bottom: 3px;
  }

  .ref-cat-card__btn {
    font-size: 8px;
  }

  .ref-cat-card__img {
    width: 60px;
    height: 60px;
  }

  /* --- Промо / CTA --- */
  .ref-promo-wrapper,
  .ref-cta-wrapper {
    margin: 20px 0 !important;
    padding: 16px 0;
  }

  .ref-promo {
    padding: 18px 14px !important;
    border-radius: 10px !important;
    gap: 10px;
  }

  .ref-promo__title {
    font-size: 14px !important;
  }

  .ref-promo__subtitle {
    font-size: 11px !important;
  }

  .ref-promo__btn {
    padding: 10px 20px !important;
    font-size: 10px !important;
  }

  .ref-cta {
    border-radius: 10px !important;
    padding: 28px 14px !important;
  }

  .ref-cta__title {
    font-size: 15px !important;
  }

  .ref-cta__text {
    font-size: 11px;
  }

  .ref-cta__btn {
    padding: 10px 20px;
    font-size: 10px;
  }

  .ref-promo-ticker-track span,
  .ref-cta-ticker-track span {
    font-size: 12px;
  }

  /* --- Секции --- */
  .ref-section {
    margin: 16px 0;
  }

  .ref-section__title {
    font-size: 15px;
  }

  .ref-section__header {
    margin-bottom: 6px;
  }

  /* --- Карточки товаров --- */
  .product_preview {
    padding: 8px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
  }

  .product_preview__top {
    height: 110px;
    margin-bottom: 6px;
    border-radius: 6px;
  }

  .product_preview__image {
    padding: 4px;
  }

  .product_preview__name {
    font-size: 10.5px !important;
    min-height: 28px;
    max-height: 28px;
    margin-bottom: 4px;
  }

  .product_preview__meta {
    min-height: 14px;
    height: 14px;
    margin-bottom: 2px;
  }

  .product_preview__sku {
    font-size: 8px;
  }

  .ref-stock-badge {
    font-size: 7px;
  }

  .fn_price {
    font-size: 13px !important;
  }

  .currency {
    font-size: 9px;
  }

  .ref-price-from {
    font-size: 7px;
  }

  .price_request {
    font-size: 8px !important;
  }

  .product_preview__price-row {
    margin-bottom: 4px;
    min-height: 18px;
  }

  .product_preview__footer {
    padding-top: 4px;
  }

  .product_preview__btn {
    height: 30px !important;
    font-size: 7.5px !important;
    border-radius: 5px !important;
    letter-spacing: 0.02em;
    padding: 0 4px !important;
  }

  .ref-badge {
    padding: 2px 5px;
    font-size: 6.5px;
    border-radius: 3px;
  }

  .product_preview__wishlist {
    width: 24px !important;
    height: 24px !important;
  }

  .product_preview__wishlist i {
    font-size: 10px !important;
  }

  /* --- Слайд в карусели --- */
  .ref-product-slide {
    min-width: 160px !important;
    flex: 0 0 160px !important;
  }

  /* --- Сетка (2 колонки на телефоне) --- */
  .products_list .col-6,
  .products_list .col-md-4,
  .products_list .col-lg-3,
  .products_list [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .products_list {
    margin-left: -3px !important;
    margin-right: -3px !important;
  }

  /* --- Контейнер --- */
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* --- Страница товара --- */
  .h1,
  h1 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .details_boxed,
  .details_boxed__item {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .details_price .price,
  .product_price .price {
    font-size: 20px !important;
  }

  .fn_is_stock_product,
  .fn_button_cart_product {
    padding: 12px 16px !important;
    font-size: 11px !important;
    width: 100% !important;
  }

  /* --- Хлебные крошки --- */
  .breadcrumb {
    padding: 8px 0 !important;
    font-size: 10px !important;
  }

  /* --- Табы --- */
  .tab__item {
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  .tab-content {
    padding: 12px !important;
    font-size: 13px !important;
  }

  /* --- Преимущества --- */
  .section_advantages {
    padding: 12px 4px !important;
    margin: 14px 0 !important;
  }

  .advantages__item {
    padding: 6px 3px !important;
  }

  .advantages__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .advantages__icon svg,
  .advantages__icon img {
    width: 18px !important;
    height: 18px !important;
  }

  .advantages__title {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  /* --- Пагинация --- */
  .pagination {
    gap: 2px !important;
    padding: 12px 0 !important;
  }

  .pagination a,
  .pagination span {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
  }

  /* --- Описание --- */
  .block__description {
    padding: 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* --- Футер --- */
  .footer {
    padding-top: 24px !important;
    padding-bottom: 80px !important;
  }

  .footer__title {
    font-size: 10px !important;
  }

  .footer__menu_link {
    font-size: 11.5px !important;
  }

  .footer__copyright,
  .footer__copyright a,
  .copyright {
    font-size: 10px !important;
  }

  /* --- Соц. сети --- */
  .social-btn,
  .product__social a,
  .fn_share a {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* --- FAB --- */
  .ref-grizzly-trigger {
    width: 44px;
    height: 44px;
  }

  .ref-grizzly-item {
    width: 38px;
    height: 38px;
  }

  .ref-theme-toggle {
    width: 36px;
    height: 36px;
  }

  /* --- Сортировка --- */
  .sort__item {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  /* --- WhatsApp --- */
  .ref-wa-float {
    padding: 7px 12px;
    font-size: 10px;
    bottom: 68px;
  }
}

/* ══════════════════════════════════════
   EXTRA SMALL (≤400px)
   ══════════════════════════════════════ */
@media (max-width: 400px) {
  .ref-slider-wrap {
    height: 210px;
  }

  .ref-hero__title {
    font-size: 18px;
  }

  .ref-hero__btn {
    padding: 8px 14px;
    font-size: 9px;
  }

  .ref-slider-controls {
    bottom: 8px;
    left: 10px;
  }

  .product_preview__top {
    height: 95px;
  }

  .product_preview__name {
    font-size: 10px !important;
    min-height: 26px;
    max-height: 26px;
  }

  .fn_price {
    font-size: 12px !important;
  }

  .product_preview__btn {
    height: 28px !important;
    font-size: 7px !important;
  }

  .ref-cat-card {
    min-width: 105px;
    height: 68px;
    padding: 8px;
    border-radius: 6px;
  }

  .ref-cat-card__title {
    font-size: 9px;
  }

  .ref-cat-card__img {
    width: 50px;
    height: 50px;
  }

  .h1,
  h1 {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   MOBILE MENU — КАТЕГОРИИ (ref-mobile-cat-*)
   ========================================================================== */

.ref-mobile-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ref-mobile-cat-item {
  position: relative;
}

.ref-mobile-cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.ref-mobile-cat-link.selected {
  color: var(--fp-primary);
  font-weight: 700;
}

.ref-mobile-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(0, 136, 255, 0.06);
  overflow: hidden;
}

.ref-mobile-cat-icon img {
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
}

.ref-mobile-cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-mobile-cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(0, 136, 255, 0.08);
  color: var(--fp-primary);
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Вложенные подкатегории (мобильное) */
.ref-mobile-cat-sub {
  display: none;
}

.ref-mobile-cat-item.has-children.is-open>.ref-mobile-cat-sub {
  display: block;
}

.ref-mobile-cat-sub .ref-mobile-cat-list {
  padding-left: 16px;
  border-left: 2px solid rgba(0, 136, 255, 0.1);
  margin-left: 12px;
}

.ref-mobile-cat-sub .ref-mobile-cat-link {
  font-size: 12px;
  padding: 8px 12px;
}

/* ==========================================================================
   OFFCANVAS — АДАПТИВНЫЕ ПРАВИЛА
   ========================================================================== */

@media (max-width: 480px) {
  .ref-offcanvas-menu {
    width: 100vw;
    max-width: 100vw;
  }

  .ref-offcanvas-header {
    padding: 14px 16px;
  }

  #refOffcanvasMenu .ref-cat-link {
    padding: 12px 16px 12px 20px;
    font-size: 12.5px;
  }

  .ref-cat-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .ref-cat-icon img,
  .ref-cat-icon svg {
    max-width: 16px;
    max-height: 16px;
  }

  .ref-cat-level--3 .ref-cat-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .ref-offcanvas-menu {
    width: 340px;
  }
}

@media (min-width: 769px) {
  .ref-offcanvas-menu {
    width: 380px;
  }
}

/* --- Top Ticker: мобильная адаптация --- */
@media (max-width: 480px) {
  .ref-top-ticker__track span {
    font-size: 9px !important;
    padding: 6px 0 !important;
    letter-spacing: 0.08em !important;
    padding-right: 24px !important;
  }
}