/* =========================================
   ГЛОБАЛЬНЫЕ СТИЛИ САЙТА VERS
   ========================================= */

/* 1. Загружаем шрифт Inter напрямую от Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');



/* 2. Глобальные шрифты и принудительный БЕЛЫЙ ФОН для всех контейнеров */
body, html, main, #wrapper, #content-wrapper, .container {
  background-color: #ffffff !important;
}

body, html, h1, h2, h3, h4, h5, h6, 
p, a, span, div, button, input, select, textarea {
  font-family: 'Inter', sans-serif !important;
}


/* =========================================
   VERS: ХЕДЕР-ТРАНСФОРМЕР (FIXED ВЕРСИЯ - ИСПРАВЛЕНО)
   ========================================= */

header#header, .header.js-sticky-header, #header .header-top {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

div#vers-custom-header .header__banner, 
div#vers-custom-header .header-top, 
div#vers-custom-header #_mobile_user_info, 
div#vers-custom-header #_mobile_cart, 
div#vers-custom-header .search__mobile {
  display: none !important;
}

/* Базовое состояние */
div#vers-custom-header.vers-header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 20px 40px; 
  background-color: #ffffff; 
  border-radius: 0; 
  border-bottom: 1px solid rgba(0,0,0,0.05); 
  box-sizing: border-box;
  z-index: 100000;
  
  /* Жесткая фиксация */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* Состояние при скролле (парящая плашка) */
div#vers-custom-header.vers-header-container.vers-scrolled {
  width: calc(100% - 40px) !important; 
  top: 20px !important; /* Отступ от верхнего края экрана */
  padding: 15px 25px; 
  border-radius: 16px !important; 
  border-bottom: none !important;
  border: 1px solid rgba(0,0,0,0.03) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  /* Центрирование фиксированной плашки */
  left: 20px !important;
  right: 20px !important;
}

/* СТИЛИ ЭЛЕМЕНТОВ ВНУТРИ ХЕДЕРА */
div#vers-custom-header.vers-header-container .vers-logo-wrapper { justify-self: start; }
div#vers-custom-header.vers-header-container .vers-logo-wrapper img { max-height: 40px; width: auto; }
div#vers-custom-header.vers-header-container .vers-menu-wrapper { justify-self: center; position: relative; }
div#vers-custom-header.vers-header-container .vers-right-wrapper { justify-self: end; display: flex; align-items: center; gap: 5px; }

/* 1. Настраиваем родительский список (жестко задаем отступы между ссылками через gap) */
div#vers-custom-header.vers-header-container .vers-desktop-menu ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important; /* Это отступ между пунктами меню */
  margin: 0 !important; 
  padding: 0 !important; 
  list-style: none !important;
}

div#vers-custom-header.vers-header-container .vers-desktop-menu li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Настраиваем саму ссылку (Добавлены отступы для маковской плашки) */
div#vers-custom-header.vers-header-container .vers-desktop-menu a {
  position: relative !important; 
  display: inline-block !important; 
  color: #1a1a1a !important; 
  font-weight: 500 !important; 
  font-size: 15px !important; 
  text-decoration: none !important; 
  white-space: nowrap !important;
  padding: 10px 16px !important; /* Отступы для стеклянной плашки */
  margin: 0 !important; 
  background-color: transparent !important; 
  transition: color 0.3s ease !important; 
  width: max-content !important; 
  z-index: 1 !important;
}

/* 3. Цвет текста при наведении и на активной странице */
div#vers-custom-header.vers-header-container .vers-desktop-menu a:hover,
div#vers-custom-header.vers-header-container .vers-desktop-menu a:active,
div#vers-custom-header.vers-header-container .vers-desktop-menu li.current > a,
div#vers-custom-header.vers-header-container .vers-desktop-menu a.current,
div#vers-custom-header.vers-header-container .vers-desktop-menu a.active {
  color: #52c1a2 !important; 
}

/* 4. Скрываем старый мусор от темы PrestaShop */
div#vers-custom-header.vers-header-container .vers-desktop-menu a::after {
  display: none !important;
}

/* 5. АНИМАЦИЯ MAC OS (СТЕКЛЯННАЯ ПЛАШКА) */
div#vers-custom-header.vers-header-container .vers-desktop-menu a::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important; /* Растягивает плашку по размеру ссылки */
  background: rgba(82, 193, 162, 0.1) !important; /* Полупрозрачный мятный */
  border-radius: 12px !important; 
  z-index: -1 !important; 
  
  /* Начальное состояние (скрыто, уменьшено, сдвинуто) */
  opacity: 0 !important;
  transform: scale(0.8) translateY(6px) !important;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; 
  display: block !important; 
}

/* 6. Появление плашки при наведении */
div#vers-custom-header.vers-header-container .vers-desktop-menu a:hover::before,
div#vers-custom-header.vers-header-container .vers-desktop-menu li.current > a::before,
div#vers-custom-header.vers-header-container .vers-desktop-menu a.current::before,
div#vers-custom-header.vers-header-container .vers-desktop-menu a.active::before {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* --- ВОССТАНОВЛЕННАЯ ПРАВАЯ ЧАСТЬ ХЕДЕРА --- */
div#vers-custom-header.vers-header-container .vers-right-wrapper { justify-self: end; display: flex; align-items: center; gap: 5px; }
div#vers-custom-header.vers-header-container .vers-right-wrapper .user-info .hidden-sm-down,
div#vers-custom-header.vers-header-container .vers-right-wrapper .blockcart .hidden-sm-down,
div#vers-custom-header.vers-header-container .vers-right-wrapper .cart-products-count-text { display: none; }
div#vers-custom-header.vers-header-container .vers-selectors-group { display: flex; align-items: center; gap: 5px; }
div#vers-custom-header.vers-header-container .vers-right-wrapper .material-icons { color: #1a1a1a; font-size: 24px; line-height: 1; }
div#vers-custom-header.vers-header-container .vers-cart-container { position: relative; display: flex; align-items: center; }

div#vers-custom-header.vers-header-container .vers-custom-mobile-btn { display: none; }
div#vers-custom-header.vers-header-container .vers-custom-dropdown { display: none; visibility: hidden; opacity: 0; }

div#vers-custom-header.vers-header-container .vers-burger {
  position: relative; width: 24px; height: 18px; background: transparent; cursor: pointer; display: block; margin: 0; pointer-events: none;
}
div#vers-custom-header.vers-header-container .vers-burger span {
  display: block; position: absolute; height: 2px; width: 100%; background: #1a1a1a; border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out;
}
div#vers-custom-header.vers-header-container .vers-burger span:nth-child(1) { top: 0px; }
div#vers-custom-header.vers-header-container .vers-burger span:nth-child(2) { top: 8px; }
div#vers-custom-header.vers-header-container .vers-burger span:nth-child(3) { top: 16px; }

div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-burger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-burger span:nth-child(2) { opacity: 0; width: 0; }
div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-burger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

@media (max-width: 1200px) {
  div#vers-custom-header.vers-header-container { display: flex; align-items: center; padding: 16px 20px; }
  div#vers-custom-header.vers-header-container.vers-scrolled { width: calc(100% - 20px); margin-top: 15px; padding: 16px 10px; }
  
  div#vers-custom-header.vers-header-container .vers-logo-wrapper { order: 1; margin-right: auto; }
  /* Скрываем иконку планеты, а также селекторы языка и валюты (PS 9.1), оставляя логин */
div#vers-custom-header.vers-header-container .vers-selectors-group > i.material-icons,
div#vers-custom-header.vers-header-container .vers-selectors-group #_desktop_language_selector,
div#vers-custom-header.vers-header-container .vers-selectors-group #_desktop_currency_selector,
div#vers-custom-header.vers-header-container .vers-selectors-group .language-selector,
div#vers-custom-header.vers-header-container .vers-selectors-group .currency-selector,
div#vers-custom-header.vers-header-container .vers-selectors-group .language-selector-wrapper,
div#vers-custom-header.vers-header-container .vers-selectors-group .currency-selector-wrapper {
  display: none !important;
}
  div#vers-custom-header.vers-header-container .vers-right-wrapper { order: 2; display: flex; visibility: visible; opacity: 1; gap: 5px; }
  div#vers-custom-header.vers-header-container .vers-menu-wrapper { order: 3; margin-left: 15px; }
  div#vers-custom-header.vers-header-container .vers-desktop-menu, 
  div#vers-custom-header.vers-header-container #_mobile_top_menu { display: none; }

  div#vers-custom-header.vers-header-container .vers-custom-mobile-btn {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background-color: transparent; cursor: pointer; box-sizing: border-box; transition: background 0.2s;
  }
  div#vers-custom-header.vers-header-container .vers-custom-mobile-btn:hover,
  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-mobile-btn { background-color: #f4f5f6; }

  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-dropdown {
    display: flex; visibility: visible; opacity: 1; flex-direction: column;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #ffffff; padding: 90px 24px 30px 24px; border-radius: 0; box-shadow: none; z-index: -1; overflow-y: auto; box-sizing: border-box;
  }
  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-dropdown a.vers-mobile-link {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 18px 16px; color: #1a1a1a; font-weight: 500; font-size: 16px; text-decoration: none; border-radius: 8px; background-color: transparent; border-bottom: 1px solid #f0f0f0; transition: all 0.2s ease; width: 100%; box-sizing: border-box; box-shadow: none;
  }
  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-dropdown a.vers-mobile-link:hover,
  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-dropdown a.vers-mobile-link:active { background-color: #f4f5f6; border-bottom-color: transparent; }
  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-dropdown a.vers-mobile-link:nth-last-child(2) { border-bottom: none; }
  div#vers-custom-header.vers-header-container .vers-menu-wrapper.is-open .vers-custom-dropdown a.vers-mobile-signin {
    margin-top: auto; background-color: #0b7a5e !important; color: #ffffff !important; justify-content: center; text-align: center; border-bottom: none; padding: 16px 24px; font-weight: 600;
  }
}

/* =========================================
   NEW HEADER TOGGLES (ТУМБЛЕРЫ ЯЗЫК/ВАЛЮТА)
   ========================================= */

.vers-switchers-premium.toggle-mode {
    display: flex;
    align-items: center;
    gap: 12px !important;
}

.btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-color-mode-switch {
    display: inline-block;
    margin: 0;
    position: relative;
}

/* Фон тумблера (Светлый под белый хедер) */
.btn-color-mode-switch > label.btn-color-mode-switch-inner {
    margin: 0;
    width: 80px;  /* Компактный размер */
    height: 32px; 
    background-color: #f1f5f9; /* Светло-серый фон */
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    display: block;
    cursor: pointer;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

/* Текст НЕактивной стороны (справа) */
.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
    content: attr(data-on);
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    top: 7px;
    right: 10px;
    color: #64748b; 
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

/* ПОЛЗУНОК (Активная сторона) */
.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
    content: attr(data-off);
    width: 38px; 
    height: 26px;
    background: #52c1a2; /* ТВОЙ ФИРМЕННЫЙ ЗЕЛЕНЫЙ ЦВЕТ */
    border-radius: 18px;
    position: absolute;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 2px;
    top: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(82, 193, 162, 0.4); 
    color: #ffffff; 
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.btn-color-mode-switch input[type="checkbox"] {
    cursor: pointer;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 2;
    margin: 0;
}

/* ============ СОСТОЯНИЕ ВКЛ (CHECKED) ============ */
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
    content: attr(data-on);
    left: 38px; /* Сдвиг ползунка */
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
    content: attr(data-off);
    right: auto;
    left: 12px;
}

/* Скрываем тумблеры на мобильных (так как там свое меню) */
@media (max-width: 1200px) {
    div#vers-custom-header.vers-header-container .vers-switchers-premium {
        display: none !important;
    }
}

.header-block__action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: #1a1a1a !important; padding: 5px !important; transition: color 0.2s; }
.header-block__action-btn:hover { color: #52c1a2 !important; }
.header-block__icon { font-size: 26px !important; line-height: 1 !important; }
.vers-cart-badge { position: absolute !important; top: -2px !important; right: -6px !important; background-color: #52c1a2 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; height: 18px !important; min-width: 18px !important; padding: 0 4px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }

/* =========================================
   VERS: УБИРАЕМ МОРГАНИЕ СТАРЫХ СЕЛЕКТОРОВ ПРИ ЗАГРУЗКЕ СТРАНИЦЫ
   ========================================= */
   
/* Прячем ТОЛЬКО сами выпадающие списки и их старые обертки, а не родительские блоки */
#vers-native-selectors select,
#vers-native-selectors .language-selector-wrapper,
#vers-native-selectors .currency-selector-wrapper,
#vers-native-selectors .vers-lang-wrapper,
#vers-native-selectors .vers-custom-select-wrapper {
    display: none !important;
}

/* Железобетонно показываем новые тумблеры */
.vers-premium-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================
   VERS: ИСПРАВЛЕНИЕ ТУМБЛЕРОВ В МОБИЛЬНОМ МЕНЮ
   ========================================= */

@media (max-width: 1200px) {
    /* 1. Прячем ТОЛЬКО сами тумблеры, оставляя системные иконки логина и корзины */
    div#vers-custom-header.vers-header-container #vers-native-selectors .vers-premium-toggle {
        display: none !important;
    }

    /* Гарантируем, что правая панель с иконками всегда видима на мобильных */
    div#vers-custom-header.vers-header-container .vers-right-wrapper {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
    }

    div#vers-custom-header.vers-header-container .user-info,
    div#vers-custom-header.vers-header-container .blockcart {
        display: block !important;
    }
    
    /* 2. Фиксируем мобильные тумблеры в самом низу экрана */
    .vers-mobile-toggles-wrapper {
        position: fixed !important;
        bottom: 50px !important; /* Отступ от нижнего края экрана (можешь менять) */
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        z-index: 100000 !important; /* Поверх всего меню */
        
        /* Скрываем их, пока меню закрыто */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: all 0.3s ease !important;
    }

    /* 3. Показываем тумблеры ТОЛЬКО когда меню открыто (по классу .is-open) */
    .vers-menu-wrapper.is-open .vers-mobile-toggles-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Прячем мобильный дубликат на больших экранах ПК */
@media (min-width: 1201px) {
    .vers-mobile-toggles-wrapper {
        display: none !important;
    }
}


/* =========================================
   VERS: СКРЫВАЕМ СТАНДАРТНЫЕ ВЫПАДАЮЩИЕ МЕНЮ И СТРЕЛКИ
   ========================================= */
div#vers-custom-header .vers-desktop-menu .js-sub-menu,
div#vers-custom-header .vers-desktop-menu .submenu,
div#vers-custom-header .vers-desktop-menu .ps-mainmenu__tree-dropdown-toggle {
    display: none !important;
}

/* УБИВАЕМ СИСТЕМНУЮ СИНЮЮ РАМКУ ВОКРУГ ССЫЛОК МЕНЮ ПРИ КЛИКЕ/ФОКУСЕ */
div#vers-custom-header.vers-header-container .vers-desktop-menu a:focus,
div#vers-custom-header.vers-header-container .vers-desktop-menu a:active,
div#vers-custom-header.vers-header-container .vers-desktop-menu a {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   VERS: ПРЕМИАЛЬНЫЙ СВЕТЛЫЙ FOOTER (MEEDIO STYLE)
   ========================================= */

.vers-footer-wrapper {
  background-color: #ffffff;
  color: #4a5568; 
  font-family: 'Inter', sans-serif !important;
  margin-top: 60px;
  border-top: 1px solid #f0f0f0; 
}

.vers-footer-main {
  padding: 60px 40px 20px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 1. СЕТКА ВЕРХНЕЙ ЧАСТИ */
.vers-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

.vers-footer-logo {
  max-height: 40px;
  margin-bottom: 24px;
  display: block;
}

/* =========================================
   ИКОНКИ SVG СОЦСЕТЕЙ С ТУЛТИПАМИ И НЕОМОРФИЗМОМ
   ========================================= */
.vers-socials {
  display: inline-flex;
  list-style: none;
  gap: 15px;
}

.vers-socials .icon {
  position: relative;
  background: #ffffff;
  border-radius: 10px; 
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: #4a5568; /* Базовый цвет иконок - серый */
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Эффект Neumorphism */
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
             -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0);
}

.vers-socials .icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.5s ease, fill 0.5s ease;
}

.vers-socials .tooltip {
  position: absolute;
  top: 0;
  font-size: 13px;
  background: #fff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  white-space: nowrap;
  z-index: 10;
}

.vers-socials .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Появление тултипа */
.vers-socials .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vers-socials .icon:hover span,
.vers-socials .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

/* Базовый ховер на кнопку (вдавливание + сдвиг вниз, БЕЗ изменения фона кнопки) */
.vers-socials .icon:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
              inset -4px -4px 6px -1px rgba(255,255,255,0.7),
              -0.5px -0.5px 0px rgba(255,255,255,1),
              0.5px 0.5px 0px rgba(0,0,0,0.15),
              0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  transform: translateY(4px);
  /* ФОН КНОПКИ ОСТАЕТСЯ БЕЛЫМ, НЕ ДОБАВЛЯЕМ background-color */
}

/* Анимация SVG (уменьшение) */
.vers-socials .icon:hover svg {
  transform: scale(0.9);
}

/* =========================================
   ИСПРАВЛЕНИЕ: ТОЛЬКО ИКОНКА ОКРАШИВАЕТСЯ В ЦВЕТ БРЕНДА
   ========================================= */

/* Facebook */
.vers-socials .facebook:hover svg { fill: #1877f2 !important; }
.vers-socials .facebook:hover .tooltip,
.vers-socials .facebook:hover .tooltip::before {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

/* YouTube (Красный #ff0000) */
.vers-socials .youtube:hover svg { fill: #ff0000 !important; }
.vers-socials .youtube:hover .tooltip,
.vers-socials .youtube:hover .tooltip::before {
  background-color: #ff0000 !important;
  color: #ffffff !important;
}

/* Telegram (Голубой #24A1DE) */
.vers-socials .telegram:hover svg { fill: #24A1DE !important; }
.vers-socials .telegram:hover .tooltip,
.vers-socials .telegram:hover .tooltip::before {
  background-color: #24A1DE !important;
  color: #ffffff !important;
}

/* Instagram */
.vers-socials .instagram:hover svg { fill: #e4405f !important; }
.vers-socials .instagram:hover .tooltip,
.vers-socials .instagram:hover .tooltip::before {
  background-color: #e4405f !important;
  color: #ffffff !important;
}
/* ========================================= */

.vers-footer-title {
  color: #1a202c; 
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.vers-links-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vers-links-col li {
  margin-bottom: 14px;
}

.vers-links-col a {
  color: #718096 !important; 
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: inline-block !important; /* Разрешает ссылке двигаться вверх */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Делает движение плавным */
}

.vers-links-col a:hover {
  color: #52c1a2 !important; 
  transform: translateY(-3px) !important; /* Приподнимает текст на 3px */
}

/* 2. БЕЙДЖИ И ГАРАНТИИ */
.vers-footer-badges-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid #f0f0f0;
}
.vers-badges-text {
  color: #718096;
  font-size: 14px;
}
.vers-badges-list {
  display: flex;
  gap: 24px;
}
.vers-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a0aec0;
  font-size: 13px;
}
.vers-badge-item i {
  font-size: 18px;
}

/* 3. САМЫЙ НИЗ (КОПИРАЙТ) */
.vers-footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
  color: #718096;
}
.vers-footer-legal {
  display: flex;
  gap: 20px;
}
.vers-footer-legal a {
  color: #1a202c;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.vers-footer-legal a:hover {
  color: #52c1a2;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ПОДВАЛА
   ========================================= */
@media (max-width: 1024px) {
  .vers-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .vers-brand-col { grid-column: span 3; }
  .vers-footer-badges-row { flex-direction: column; gap: 20px; align-items: flex-start; }
  .vers-badges-list { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .vers-footer-main { padding: 40px 20px 20px 20px; }
  .vers-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .vers-brand-col { grid-column: span 2; }
  .vers-footer-bottom-row { flex-direction: column; gap: 15px; align-items: flex-start; }
}

/* 1. Убираем фон левой колонки */
#left-column {
  background-color: transparent !important;
  padding: 0px 0 !important;
  border-right: none !important; 
  min-height: 100vh;
}

/* 2. ЗАГОЛОВКИ */
#left-column .block-categories .h6,
#left-column .block-categories .category-top-menu > li:first-child > a,
#left-column h6,
#left-column .h6 { display: none !important; }

.vers-sidebar-header {
  display: block !important;
  padding: 0 20px 30px 20px !important; 
}

.vers-sidebar-title {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  color: #000000 !important; 
  font-size: 18px !important; 
  font-weight: 700 !important; 
  text-transform: uppercase !important; 
  letter-spacing: 1.5px !important; 
  margin: 0 !important;
  padding-left: 4px !important; 
  line-height: 1 !important;
}

/* 3. СПИСОК КАТЕГОРИЙ И КНОПКИ (С НОВЫМ ОТСТУПОМ И СКРУГЛЕНИЕМ) */
.vers-category-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.vers-category-item {
  margin: 0 0 4px 0 !important;
}
.vers-category-item > a {
  display: flex !important;
  align-items: center !important;
  padding: 16px 20px !important;
  margin-right: 20px !important; /* Отступ от правого края для легкости */
  border-radius: 12px !important; /* Скругляем углы */
  text-decoration: none !important;
  color: #6a747b !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  background-color: transparent !important;
  border-left: 4px solid transparent !important; /* Невидимая полоска слева */
}

/* =========================================
   БАЗОВАЯ ИКОНКА (СОВРЕМЕННЫЙ SVG MASK)
   ========================================= */
.vers-cat-icon {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 16px !important;
  background-color: #6a747b !important; /* Базовый серый цвет */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.vers-cat-icon::before { display: none !important; }

/* 4. HOVER (НЕАКТИВНЫЙ): АНИМАЦИЯ */
.vers-category-item > a:not(.active):not(.current):hover {
  background-color: #f4f6f8 !important; 
  color: #6a747b !important; 
}
.vers-category-item > a:not(.active):not(.current):hover .vers-cat-icon {
  background-color: #6a747b !important; 
  transform: scale(1.15) !important;
}

/* 5. ACTIVE (ВЫБРАННАЯ КАТЕГОРИЯ И МОМЕНТ КЛИКА) */
.vers-category-item.active > a,
.vers-category-item.current > a,
.vers-category-item > a.active,
.vers-category-item > a.current,
.vers-category-item > a:active,
.vers-category-item > a:focus {
  background-color: #ffffff !important; 
  color: #52c1a2 !important; 
  border-left: 4px solid #52c1a2 !important; /* Зеленая полоса слева */
  box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; 
}

/* Важно: возвращаем перекрашивание иконок в зеленый для активных пунктов */
.vers-category-item.active > a .vers-cat-icon,
.vers-category-item.current > a .vers-cat-icon,
.vers-category-item > a.active .vers-cat-icon,
.vers-category-item > a.current .vers-cat-icon,
.vers-category-item > a:active .vers-cat-icon,
.vers-category-item > a:focus .vers-cat-icon {
  background-color: #52c1a2 !important; 
}

/* =========================================
   ТОПОВЫЕ ИКОНКИ ДЛЯ КАТЕГОРИЙ И INFO
   ========================================= */
.vers-category-item a[href*="touch"] .vers-cat-icon,
.vers-category-item a[href*="Touch"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E") !important;
}

.vers-category-item a[href*="parts"] .vers-cat-icon,
.vers-category-item a[href*="Parts"] .vers-cat-icon,
.vers-category-item a[href*="accessories"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}

.vers-category-item a[href*="user-guide"] .vers-cat-icon,
.vers-category-item a[href*="guide"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
}

.vers-category-item a[href*="delivery"] .vers-cat-icon,
.vers-category-item a[href*="payment"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
}

.vers-category-item a[href*="contact"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}
/* =========================================
   VERS: КАРТОЧКИ CMS (САЛАТОВЫЕ ИКОНКИ + ДЛИННАЯ СТРЕЛКА)
   ========================================= */

/* 1. СЕТКА КАРТОЧЕК: 1 колонка */
#cms #content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  display: grid !important; 
  grid-template-columns: 1fr !important;
  gap: 20px !important; 
}

#cms #content ul li { margin: 0 !important; }

/* 2. ОСНОВНОЙ БЛОК КАРТОЧКИ */
#cms #content ul li a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 112px !important; 
  padding: 24px 30px !important; 
  background-color: #ffffff !important;
  border-radius: 16px !important; 
  
  /* Текст всегда остается черным */
  color: #1a1c1e !important; 
  font-weight: 600 !important;
  font-size: 18px !important; 
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; 
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  
  /* Длинная элегантная стрелка (Темно-зеленая #327c62) без текста */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23327c62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") !important;
  background-position: right 30px center !important; 
  background-repeat: no-repeat !important;
  background-size: 24px 24px !important;
}

/* ЭФФЕКТЫ ПРИ НАВЕДЕНИИ НА КАРТОЧКУ (ФИКС ПУЛЬСАЦИИ) */
/* Ловим ховер на неподвижном <li>, чтобы карточка не "убегала" от курсора */
#cms #content ul li:hover a {
  transform: translateY(-4px) !important; 
  box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important; 
  border-color: rgba(82, 193, 162, 0.4) !important; 
  color: #1a1c1e !important; 
  
  /* Стрелка плавно отпрыгивает к правому краю */
  background-position: right 20px center !important; 
}

/* Обязательно "убиваем" старый ховер напрямую на ссылке, если он где-то остался */
#cms #content ul li a:hover {
  transform: none;
}

/* 3. БЛОК ДЛЯ ИКОНКИ (ПОСТОЯННО СВЕТЛО-САЛАТОВЫЙ КВАДРАТ) */
#cms #content ul li a::before {
  content: '' !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  background-color: #edf7f4 !important; 
  border-radius: 12px !important;
  margin-right: 24px !important;
  transition: all 0.3s ease !important;
}

/* 4. САМА ИКОНКА (ПОСТОЯННО ТЕМНО-САЛАТОВАЯ) */
#cms #content ul li a::after {
  content: '' !important;
  position: absolute !important;
  left: 48px !important; 
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  background-color: #327c62 !important; 
  transition: all 0.3s ease !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;

  /* Дефолтная иконка (Документ) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") !important;
}

/* =========================================
   5. ИНДИВИДУАЛЬНЫЕ ИКОНКИ ДЛЯ РАЗДЕЛОВ
   ========================================= */

/* User Guide (Открытая книга) */
#cms #content ul li a[href*="guide"]::after,
#cms #content ul li a[href*="instrukcii"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
}

/* Soft (Окно с кодом) */
#cms #content ul li a[href*="soft"]::after,
#cms #content ul li a[href*="software"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpolyline points='10 9 7 12 10 15'/%3E%3Cpolyline points='14 9 17 12 14 15'/%3E%3C/svg%3E") !important;
}

/* Delivery (Грузовик) */
#cms #content ul li a[href*="oplata"]::after,
#cms #content ul li a[href*="payment"]::after,
#cms #content ul li a[href*="delivery"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
}

/* Distributors (Глобус) */
#cms #content ul li a[href*="distributors"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}

/* Service conditions, Legal Notice, Terms (Щит) */
#cms #content ul li a[href*="condition"]::after,
#cms #content ul li a[href*="legal"]::after,
#cms #content ul li a[href*="term"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E") !important;
}

/* Archive (Коробка) */
#cms #content ul li a[href*="archive"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") !important;
}

/* Contacts (Конверт) */
#cms #content ul li a[href*="contact"]::after,
#cms #content ul li a[href*="kontakty"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
}

/* About us / Getting started (Квадраты) */
#cms #content ul li a[href*="about"]::after,
#cms #content ul li a[href*="start"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='14' rx='2' ry='2'/%3E%3Crect x='7' y='7' width='14' height='14' rx='2' ry='2'/%3E%3C/svg%3E") !important;
}



/* =========================================
   VERS: КАРТОЧКИ ТОВАРОВ (ЕДИНЫЙ СТИЛЬ)
   ========================================= */

/* 1. СЕТКА ДЛЯ ТОВАРОВ */
#js-product-list .products,
section.featured-products .products,
.featured-products .products,
.product-accessories .products,
.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 20px 0 !important;
}

.products .product-miniature,
.products .product-miniature.js-product-miniature {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
}

/* 2. ГЛАВНЫЙ КОНТЕЙНЕР КАРТОЧКИ (Синхронизация теней и рамок) */
.vers-card-exact {
    background: #ffffff !important;
    border-radius: 24px !important; /* Увеличили скругление как у категорий */
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    
    /* Идеальное совпадение теней и рамок с гайдами */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; 
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* --- АНИМАЦИЯ ПРИ НАВЕДЕНИИ --- */
.vers-card-exact:hover {
    transform: translateY(-4px) !important; /* Легкое всплытие */
    border-color: rgba(82, 193, 162, 0.4) !important; /* Фирменная полупрозрачная мятная рамка */
    box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important; /* Мягкое углубление тени */
}

/* 3. БЛОК С КАРТИНКОЙ */
.vers-card-image-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: #f4f6f8 !important; 
    overflow: hidden !important; 
}

.vers-card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    mix-blend-mode: multiply !important; 
}

/* Эффект Zoom картинки */
.vers-card-exact:hover .vers-card-image-wrap img {
    transform: scale(1.08) !important; 
}

/* 4. ТЕКСТОВАЯ ЧАСТЬ (ОЧИЩЕННАЯ) */
.vers-card-body,
.product-miniature .product-description {
    padding: 24px 30px !important; 
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: transparent !important;
}

/* Заголовок товара */
.vers-card-title,
.product-miniature .product-title {
    margin: 0 0 12px 0 !important;
}

.vers-card-title a,
.product-miniature .product-title a {
    font-family: 'Inter', sans-serif !important;
    color: #1a1c1e !important; /* Строгий темно-серый/черный цвет */
    font-size: 18px !important; 
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    
    /* ГЛАВНОЕ: ЖЕСТКО УБИВАЕМ ГРЯЗНУЮ ТЕНЬ И СВЕЧЕНИЕ */
    text-shadow: none !important; 
    box-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
    
    transition: color 0.2s ease !important; 
}

/* Ховер на заголовок (чистый мятный цвет БЕЗ теней) */
.vers-card-exact:hover .vers-card-title a,
.product-miniature:hover .product-title a {
    color: #52c1a2 !important; 
    text-shadow: none !important; /* Гарантируем, что тень не появится при наведении */
}

/* Описание товара */
.vers-card-desc,
.product-miniature .product-description-short {
    font-family: 'Inter', sans-serif !important;
    color: #7d8491 !important; 
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 0 0 24px 0 !important;
    text-shadow: none !important;
}

/* 5. ПОДВАЛ (ЦЕНА И КНОПКА) */
.vers-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: auto !important; 
}

.vers-card-price {
    font-family: 'Inter', sans-serif !important;
    color: #1a1c1e !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

.vers-card-footer form {
    margin: 0 !important;
    padding: 0 !important;
}

/* Кнопка Buy Now */
.vers-btn-buy {
    background-color: #f4f6f8 !important; /* Светло-серый фон как у иконок */
    color: #1a1c1e !important;
    border: none !important;
    border-radius: 12px !important; /* Скругление в стиле UI */
    padding: 10px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover кнопки в стиле иконок User Guide */
.vers-btn-buy:hover {
    background-color: rgba(82, 193, 162, 0.1) !important; /* Легкая мятная подложка */
    color: #52c1a2 !important; /* Мятный текст */
    transform: translateY(-2px) !important;
}

/* =========================================
   VERS: КАРТОЧКИ ПОДКАТЕГОРИЙ + ВАТЕРМАРКИ
   (УНИФИЦИРОВАННЫЙ СТИЛЬ)
   ========================================= */

/* 1. СЕТКА ГРЯДКИ */
.vers-subcategories-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 30px !important;
  margin-bottom: 80px !important;
}

/* 2. КОНТЕЙНЕР КАРТОЧКИ (Слой для ватермарки + Видимая рамка) */
.vers-neu-card {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
  
  /* ИЗМЕНЕНО: Аккуратная светло-серая рамка, как на макете */
  border: 1px solid #e2e8f0 !important; 
  
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-decoration: none !important;
}

/* Эффект всплытия всей карточки */
.vers-neu-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(82, 193, 162, 0.3) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
}

/* 3. ОБЩИЙ СТИЛЬ ДЛЯ ВАТЕРМАРКИ (::after) */
.vers-neu-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -10% !important;
  right: -5% !important;
  width: 320px !important;
  height: 320px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.05 !important; /* Легкая прозрачность "облака" */
  z-index: -1 !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

/* Анимация ватермарки при наведении */
.vers-neu-card:hover::after {
  transform: scale(1.1) rotate(-3deg) !important;
  opacity: 0.18 !important;
}

/* 4. ТЕКСТОВОЕ НАПОЛНЕНИЕ (Шрифты и цвета) */
.vers-braun-label {
  color: #52c1a2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-family: 'Inter', sans-serif !important;
  margin-bottom: 24px !important;
  display: block !important;
}

h3.vers-neu-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1a1c1e !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.2 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  text-transform: none !important;
}

p.vers-neu-desc {
  font-family: 'Inter', sans-serif !important;
  color: #7d8491 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* 5. МАЛЕНЬКАЯ ИКОНКА (Зеленая плашка) */
.vers-neu-icon-panel {
  width: 64px !important;
  height: 64px !important;
  background-color: #f4f6f8 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 30px !important;
  transition: all 0.3s ease !important;
}

/* Сама иконка (SVG маска) внутри плашки */
.vers-neu-card .vers-neu-icon-panel i {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #1a4d3c !important; /* Темный оттенок для контраста */
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  color: transparent !important; /* Прячем текст material-icons */
  transition: background-color 0.3s ease !important;
}

.vers-neu-card:hover .vers-neu-icon-panel {
  background-color: rgba(82, 193, 162, 0.1) !important;
}

.vers-neu-card:hover .vers-neu-icon-panel i {
  background-color: #52c1a2 !important; /* Зеленеет при наведении */
}

/* 6. ПРИВЯЗКА SVG (БРОНЕБОЙНЫЙ ПРИОРИТЕТ) */

/* --- TOUCH PROBES (Прицел) --- */
body .vers-subcategories-grid .vers-neu-card[href*="touch"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="Touch"] .vers-neu-icon-panel i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E") !important;
}
body .vers-subcategories-grid .vers-neu-card[href*="touch"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="Touch"]::after {
  background-image: url('/img/products/sensor-bg.png') !important;
}

/* --- TOOL SETTERS (Кастомный датчик) --- */
body .vers-subcategories-grid .vers-neu-card[href*="setter"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="Setter"] .vers-neu-icon-panel i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
}
body .vers-subcategories-grid .vers-neu-card[href*="setter"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="Setter"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
}

/* --- ELECTRONICS (Микрочип) --- */
body .vers-subcategories-grid .vers-neu-card[href*="electronic"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="Electronic"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="elektronika"] .vers-neu-icon-panel i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
}
body .vers-subcategories-grid .vers-neu-card[href*="electronic"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="Electronic"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="elektronika"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
}

/* --- PARTS (Шестеренка) --- */
body .vers-subcategories-grid .vers-neu-card[href*="part"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="Part"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="accessories"] .vers-neu-icon-panel i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}
body .vers-subcategories-grid .vers-neu-card[href*="part"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="Part"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="accessories"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}

/* ---  KITS (3D-коробка) --- */
/* Маленькая иконка в квадратике */
body .vers-subcategories-grid .vers-neu-card[href*="kits"] .vers-neu-icon-panel i,
body .vers-subcategories-grid .vers-neu-card[href*="Kits"] .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") !important;
}

/* Большая ватермарка на фоне (сразу красим в мятный #52c1a2) */
body .vers-subcategories-grid .vers-neu-card[href*="kits"]::after,
body .vers-subcategories-grid .vers-neu-card[href*="Kits"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") !important;
}

/* 7. АДАПТИВНОСТЬ ПОД МОБИЛКИ */
@media (max-width: 768px) {
  .vers-subcategories-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 15px !important;
  }
  .vers-neu-card {
    padding: 24px !important;
  }
  h3.vers-neu-title {
    font-size: 22px !important;
  }
  .vers-neu-card::after {
    width: 150px !important;
    height: 150px !important;
  }
}

/* =========================================
   ПРЯЧЕМ ТОВАРЫ НА ГЛАВНОЙ СТРАНИЦЕ КАТЕГОРИИ PRODUCTS (ID 18)
   ========================================= */
body.category-id-18 #products,
body.category-id-18 #js-product-list,
body.category-id-18 .products-selection,
body.category-id-18 .pagination {
  display: none !important;
}

/* =========================================
   VERS: СКРЫВАЕМ СТРЕЛКИ НА СЛАЙДЕРЕ (ЕСЛИ ОДИН СЛАЙД)
   ========================================= */

#carousel .carousel-control-prev,
#carousel .carousel-control-next,
.carousel .carousel-control-prev,
.carousel .carousel-control-next,
.slick-arrow,
.owl-nav {
  display: none !important;
}

/* Также убираем точки-индикаторы внизу (если они вдруг тоже остались) */
#carousel .carousel-indicators,
.carousel .carousel-indicators,
.slick-dots,
.owl-dots {
  display: none !important;
}

/* =========================================
   VERS: ЭТАЛОННАЯ КАРТОЧКА СЛАЙДЕРА (APPLE STYLE)
   ========================================= */

/* 1. Скрываем стандартный мусор темы */
.carousel-caption h2, 
.carousel-caption p, 
#carousel .carousel-item .caption h2,
#carousel .carousel-item .caption p {
    display: none !important;
}

/* 2. Контейнер позиционирования (Жесткая фиксация для всех устройств) */
#carousel .carousel-item .caption, 
.carousel-caption {
    all: unset !important;
    position: absolute !important;
    
    /* === НАСТРОЙКА ПОЗИЦИИ ПО ВЕРТИКАЛИ === */
    top: 30% !important; /* Сейчас стоит ровно по центру. Хочешь выше? Ставь 30% или 40% */
    transform: translateY(-50%) !important; /* Компенсирует высоту самого текстового блока для идеальной центровки */
    
    /* УБИВАЕМ ВРЕДНЫЕ СТИЛИ BOOTSTRAP */
    bottom: auto !important; 
    
    /* === НАСТРОЙКА ПОЗИЦИИ ПО ГОРИЗОНТАЛИ === */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    
    /* Флекс-настройки для внутреннего контента */
    display: flex !important;
    flex-direction: column !important; /* Текст и кнопки друг под другом */
    align-items: center !important; /* Центрируем контент по горизонтали. Для выравнивания влево ставь flex-start */
    justify-content: center !important;
    
    padding: 0 20px !important; /* Чтобы на мобильных текст не прилипал к краям экрана */
    box-sizing: border-box !important;
    z-index: 99 !important;
}

/* 3. Сама карточка (Теперь полностью прозрачная) */
.vers-glass-card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important; 
    max-width: 800px !important; 
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Текст и кнопки по центру */
    text-align: center !important;
}

/* 4. Стили текста (Apple Typography) */
.vers-card-title {
    color: #ffffff !important; 
    /* Плавный размер: минимум 32px, оптимально 4.5% от ширины экрана, максимум 56px */
    font-size: clamp(32px, 4.5vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 0 12px 0 !important; 
    display: block !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; 
}

.vers-card-subtitle {
    color: #ffffff !important;
    /* Плавный размер: минимум 18px, оптимально 2vw, максимум 26px */
    font-size: clamp(18px, 2vw, 26px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 0 0 25px 0 !important; 
    display: block !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

/* 5. Контейнер для двух кнопок */
.vers-buttons-group {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 6. Кнопки (Круглые "пилюли" в стиле Apple) */
.vers-card-btn-primary {
    background-color: #52c1a2 !important; /* Твой фирменный цвет */
    color: #ffffff !important;
    padding: 12px 26px !important;
    border-radius: 50px !important; /* Идеальный овал */
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid #52c1a2 !important;
}

.vers-card-btn-primary:hover {
    background-color: #45a88d !important;
    border-color: #45a88d !important;
    transform: scale(1.03) !important;
}

/* Второстепенная контурная кнопка */
.vers-card-btn-secondary {
    background-color: transparent !important;
    color: #52c1a2 !important;
    padding: 12px 26px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid #52c1a2 !important;
    backdrop-filter: blur(5px) !important; /* Легкое размытие под кнопкой */
}

.vers-card-btn-secondary:hover {
    background-color: #52c1a2 !important;
    color: #ffffff !important;
    transform: scale(1.03) !important;
}

/* 7. Адаптив для мобильных устройств */
/* =========================================
   ФИКС МОБИЛЬНОГО СЛАЙДЕРА (CHROME & SAFARI)
   ========================================= */
@media (max-width: 768px) {
    /* Поднимаем контейнер еще выше (20% от верха) */
    #carousel .carousel-item .caption, 
    .carousel-caption { 
        top: 20% !important; 
        transform: none !important; /* Убираем центрирование по оси Y, чтобы не было наплыва */
        padding: 0 15px !important;
    }
    
    /* Заголовок: делаем компактным и добавляем четкую тень для контраста */
    .vers-card-title { 
        font-size: 26px !important; 
        line-height: 1.1 !important;
        margin-bottom: 6px !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.6) !important; /* Усиливаем тень для читаемости */
    }
    
    /* Подзаголовок: сужаем область, чтобы он не разлетался */
    .vers-card-subtitle { 
        font-size: 15px !important; 
        margin-bottom: 18px !important; 
        max-width: 240px !important; 
        line-height: 1.3 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    }
    
    /* Кнопки: делаем в ряд, но чуть мельче */
    .vers-buttons-group { 
        flex-direction: row !important; 
        justify-content: center !important;
        gap: 8px !important; 
    }
    
    .vers-card-btn-primary, .vers-card-btn-secondary { 
        padding: 8px 16px !important; 
        font-size: 12px !important; 
        white-space: nowrap !important;
    }
}

a.vers-mobile-signin {
    display: none !important;
}


/* =========================================
   НАСТРОЙКА ВЫСОТЫ И ЗАПОЛНЕНИЯ ФОНА СЛАЙДЕРА (DESKTOP)
   ========================================= */

/* 1. Задаем жесткую высоту самому слайдеру на ПК (можешь менять 600px на свое усмотрение) */
#carousel,
#carousel .carousel-inner,
#carousel .carousel-item {
    height: 600px !important; 
    width: 100% !important;
    overflow: hidden !important; /* Прячем всё, что вывалится за края */
}

/* 2. Если картинка обернута в ссылку (a), она тоже должна тянуться на всю высоту */
#carousel .carousel-item > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* 3. Заставляем картинку работать как фон (cover) внутри заданных 600px */
#carousel .carousel-item img,
.carousel .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center 70% !important; 
}

/* =========================================
   СКРЫВАЕМ БОКОВОЕ МЕНЮ НА МОБИЛЬНЫХ
   ========================================= */
@media (max-width: 768px) {
    #left-column {
        display: none !important; /* Полностью убираем левую колонку */
    }
    
    /* Растягиваем основной контент с карточками на всю ширину, если тема этого не сделала сама */
    #content-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* =========================================
   АДАПТАЦИЯ КАРТОЧЕК ПОДКАТЕГОРИЙ (МОБИЛЬНАЯ ВЕРСИЯ)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Настраиваем сетку: строго 1 колонка по ширине экрана */
    .vers-subcategories-grid {
        grid-template-columns: 1fr !important; /* Одна колонка на всю ширину */
        gap: 20px !important; /* Уменьшаем расстояние между карточками */
        padding: 0 15px !important; /* Даем небольшие отступы по бокам экрана */
        box-sizing: border-box !important;
    }

    /* 2. Делаем саму карточку компактнее */
    .vers-neu-card {
        width: 100% !important; /* Занимает 100% ширины родителя */
        box-sizing: border-box !important; /* Запрещаем паддингам увеличивать ширину карточки */
        padding: 24px !important; /* Уменьшаем внутренние отступы (было 40px) */
        border-radius: 24px !important; /* Чуть уменьшаем скругление, чтобы смотрелось аккуратнее */
    }

    /* 3. Немного уменьшаем заголовки и отступы внутри карточки */
    .vers-neu-icon-panel {
        margin-bottom: 20px !important;
    }
    
    h3.vers-neu-title {
        font-size: 22px !important; /* Делаем шрифт заголовка чуть меньше */
    }
}

/* =========================================
   ИКОНКИ ДЛЯ НОВЫХ РАЗДЕЛОВ (PRODUCTS И RESOURCES)
   ========================================= */

/* 1. TOOL SETTERS: Отрисовано по твоему фото (фреза опускается на датчик) */
.vers-category-item a[href*="setter"] .vers-cat-icon,
.vers-category-item a[href*="Setter"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
}

/* 2. ELECTRONICS (Иконка микрочипа/электроники) */
.vers-category-item a[href*="electronic"] .vers-cat-icon,
.vers-category-item a[href*="Electronic"] .vers-cat-icon,
.vers-category-item a[href*="elektronika"] .vers-cat-icon  { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
}

/* 3. KITS (Иконка 3D-коробки / Комплекта) */
.vers-category-item a[href*="kits"] .vers-cat-icon,
.vers-category-item a[href*="Kits"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") !important;
}

/* SOFT: Иконка монитора с кодом (в стиле software) */
.vers-category-item a[href*="soft"] .vers-cat-icon,
.vers-category-item a[href*="Soft"] .vers-cat-icon,
.vers-category-item a[href*="software"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpolyline points='10 9 7 12 10 15'/%3E%3Cpolyline points='14 9 17 12 14 15'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpolyline points='10 9 7 12 10 15'/%3E%3Cpolyline points='14 9 17 12 14 15'/%3E%3C/svg%3E") !important;
}

/* 4. SERVICE CONDITIONS (Иконка документа с правилами/условиями) */
.vers-category-item a[href*="condition"] .vers-cat-icon,
.vers-category-item a[href*="service"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E") !important;
}

/* 5. ARCHIVE (Иконка архивной коробки) */
.vers-category-item a[href*="archive"] .vers-cat-icon,
.vers-category-item a[href*="Archive"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") !important;
}

/* 6. DISTRIBUTORS (Иконка партнеров) */
.vers-category-item a[href*="distributors"] .vers-cat-icon,
.vers-category-item a[href*="distribyutory"] .vers-cat-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* 1. Руководство (User Guide / Руководство) */
.vers-category-item a[href*="guide"] .vers-cat-icon,
.vers-category-item a[href*="instrukcii"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
}

/* 2. Оплата и доставка (Payment & Delivery / Оплата и доставка) */
.vers-category-item a[href*="delivery"] .vers-cat-icon,
.vers-category-item a[href*="payment"] .vers-cat-icon,
.vers-category-item a[href*="oplata"] .vers-cat-icon,
.vers-category-item a[href*="dostavka"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
}

/* 3. Контакты (Contact / Контакты) */
.vers-category-item a[href*="contact"] .vers-cat-icon,
.vers-category-item a[href*="kontakty"] .vers-cat-icon { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}

/* =========================================
   ПРИВЯЗКА ИКОНОК К БОЛЬШИМ КАРТОЧКАМ (NEU CARDS)
   ========================================= */

/* 1. Базовая настройка иконки внутри карточки (превращаем старый шрифт в маску) */
.vers-neu-card .vers-neu-icon-panel i {
    display: inline-block !important;
    width: 32px !important;  /* Размер иконки для карточки */
    height: 32px !important;
    background-color: #1a4d3c !important; /* Тот самый темно-зеленый цвет из твоего дизайна */
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    color: transparent !important; /* Прячем старый текст material-icons */
}

/* 2. Иконка для Touch Probes (Прицел/Мишень) */
.vers-neu-card[href*="touch"] .vers-neu-icon-panel i,
.vers-neu-card[href*="Touch"] .vers-neu-icon-panel i,
.vers-neu-card[href*="probe"] .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E") !important;
}

/* 3. Иконка для Tool Setters (Твоя новая кастомная по фото) */
.vers-neu-card[href*="setter"] .vers-neu-icon-panel i,
.vers-neu-card[href*="Setter"] .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='7'/%3E%3Cpath d='M10 7h4v1.5a2 2 0 0 1-4 0V7z'/%3E%3Crect x='8' y='13' width='8' height='2' rx='1'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3Crect x='6' y='18' width='12' height='5' rx='1'/%3E%3Cline x1='6' y1='20' x2='18' y2='20'/%3E%3C/svg%3E") !important;
}

/* 4. Иконка для Electronics (Микрочип) */
.vers-category-item a[href*="electronic"] .vers-cat-icon,
.vers-category-item a[href*="Electronic"] .vers-cat-icon,
.vers-category-item a[href*="elektronika"] .vers-cat-icon  { 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E") !important;
}

/* 5. Иконка для Parts (Шестеренка - оставляем классическую SVG маску) */
.vers-neu-card[href*="part"] .vers-neu-icon-panel i,
.vers-neu-card[href*="Part"] .vers-neu-icon-panel i,
.vers-neu-card[href*="accessories"] .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}

/* =========================================
   ИКОНКИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ (ПРИВЯЗКА ПО ПОРЯДКУ)
   ========================================= */

/* 1. ПЕРВАЯ карточка: 0.001mm Repeatability (Прицел / Точность) */
.vers-subcategories-grid .vers-neu-card:nth-child(1) .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E") !important;
}

/* 2. ВТОРАЯ карточка: Worldwide Delivery (Глобус) */
.vers-subcategories-grid .vers-neu-card:nth-child(2) .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}

/* 3. ТРЕТЬЯ карточка: About Us (Иконка: Команда/Люди) */
.vers-subcategories-grid .vers-neu-card:nth-child(3) .vers-neu-icon-panel i,
.vers-subcategories-grid .vers-neu-card[href*="4-about-us"] .vers-neu-icon-panel i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
}

/* =========================================
   ДЕЛАЕМ КАРТОЧКУ КЛИКАБЕЛЬНОЙ ЦЕЛИКОМ (БЕЗ СКРИПТОВ)
   ========================================= */

/* Убираем системное подчеркивание ссылок в заголовке */
.vers-neu-card a {
    text-decoration: none !important;
    color: inherit !important;
}

/* Растягиваем ссылку поверх всей карточки */
.vers-neu-card a::before {
    content: '';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
}

/* =========================================
   VERS: ОТСТУПЫ, ХЛЕБНЫЕ КРОШКИ И УДАЛЕНИЕ СЕРОГО ФОНА
   ========================================= */

/* 1. ОТСТУПЫ ДЛЯ ВСЕХ СТРАНИЦ (Вытаскиваем контент из-под хедера) */
#wrapper {
  padding-top: 110px !important; 
}

/* 2. ИСПРАВЛЕНИЕ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ (Чтобы не было щели над слайдером) */
body#index #wrapper {
  padding-top: 0 !important; 
}

body#index .ps-imageslider {
  margin-top: 85px !important; /* Сдвигаем только слайдер ровно под хедер */
  position: relative;
  z-index: 1;
}

/* 3. УБИВАЕМ СЕРЫЙ ФОН НА КРОШКАХ ОКОНЧАТЕЛЬНО */
nav.breadcrumb,
.breadcrumb,
.breadcrumb-wrapper,
.breadcrumb .container,
#wrapper .breadcrumb {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 4. КРАСИВЫЙ СТИЛЬ ДЛЯ ХЛЕБНЫХ КРОШЕК */
.breadcrumb {
  padding: 0 0 20px 0 !important; 
  margin: 0 !important;
}
.breadcrumb ol {
  padding: 0 !important; margin: 0 !important; list-style: none !important;
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important;
}
.breadcrumb li {
  display: inline-flex !important; align-items: center !important;
  font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important;
}
.breadcrumb li a {
  color: #a0aec0 !important; text-decoration: none !important; transition: color 0.2s ease !important;
}
.breadcrumb li a:hover {
  color: #52c1a2 !important; 
}
.breadcrumb li:last-child span {
  color: #1a1c1e !important; font-weight: 600 !important;
}
.breadcrumb li::before { display: none !important; }
.breadcrumb li::after {
  content: '/' !important; color: #d2d6dc !important; margin-left: 12px !important; font-weight: 400 !important;
}
.breadcrumb li:last-child::after { display: none !important; }

/* =========================================
   VERS: ПОЛНОЕ УНИЧТОЖЕНИЕ СЕРОГО ФОНА ВОКРУГ КРОШЕК
   ========================================= */
.breadcrumb-wrapper,
.breadcrumb-container,
#wrapper > .breadcrumb,
#wrapper > nav[data-depth] {
  background-color: #ffffff !important;
  background: none !important;
}

/* =========================================
   VERS: IOS SWITCH (ФИНАЛ С АНИМАЦИЕЙ И СЕРЫМ ТРЕКОМ)
   ========================================= */

/* 1. ЗАГОЛОВОК (Убираем рамки и фоны) */
body#product fieldset.product-variant {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border: none !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
    background: transparent !important;
}

body#product fieldset.product-variant .product-variant__label,
body#product fieldset.product-variant .control-label,
body#product fieldset.product-variant legend {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1a1c1e !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* =========================================
   2. ТРЕК ПЕРЕКЛЮЧАТЕЛЯ (ОБЩАЯ СЕРАЯ ПОДЛОЖКА)
   ========================================= */
body#product fieldset.product-variant .product-variant__radios,
body#product fieldset.product-variant div[role="radiogroup"] {
    display: flex !important; /* МЕНЯЕМ inline-flex на просто flex */
    width: 100% !important; /* РАСТЯГИВАЕМ НА ВСЮ ШИРИНУ */
    max-width: 100% !important; /* Ограничитель, чтобы на огромных мониторах кнопка не стала метровой */
    flex-direction: row !important;
    background-color: #f1f5f9 !important; 
    border-radius: 9px !important; 
    padding: 4px !important; 
    margin: 0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Обертки кнопок: заставляем их ДЕЛИТЬ МЕСТО ПОРОВНУ */
body#product fieldset.product-variant .product-variant__radio,
body#product fieldset.product-variant .form-check {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important; 
    flex: 1 !important; /* МАГИЯ: Делит ширину трека поровну (50/50 или 33/33/33) */
    background: transparent !important;
    border: none !important;
}

/* 3. СКРЫВАЕМ МУСОР PRESTASHOP (Оставляем как было) */
body#product fieldset.product-variant input[type="radio"],
body#product fieldset.product-variant .form-check-input,
body#product fieldset.product-variant .custom-radio {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

body#product fieldset.product-variant .radio-label,
body#product fieldset.product-variant .form-check-label {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. САМИ КНОПКИ (Растягиваем внутри оберток) */
body#product fieldset.product-variant label {
    position: relative !important;
    z-index: 1 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important; /* Кнопка занимает всю выделенную ей долю (50% или 33%) */
    padding: 10px 5px !important; /* Чуть уменьшил боковой отступ, чтобы длинное слово "Влагозащитный" влезало */
    background-color: transparent !important; 
    border: none !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Текст кнопок */
body#product fieldset.product-variant label .radio-label,
body#product fieldset.product-variant label span {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important; 
    transition: color 0.3s ease !important;
    white-space: nowrap !important; /* Запрещаем тексту переноситься на 2 строки */
}

body#product fieldset.product-variant label:hover span,
body#product fieldset.product-variant label:hover .radio-label {
    color: #1a1c1e !important;
}

/* =========================================
   5. АНИМАЦИЯ ПОЛЗУНКА (МАГИЯ CSS)
   ========================================= */

/* Создаем невидимый мятный ползунок внутри каждой кнопки */
body#product fieldset.product-variant label::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #52c1a2 !important; /* Твой мятный цвет активной кнопки */
    border-radius: 9px !important;
    z-index: -1 !important; /* Прячем под текст */
    
    /* Состояние ДО клика (Сжат и прозрачен) */
    opacity: 0 !important;
    transform: scaleX(0.7) !important;
    
    /* Плавная упругая анимация */
    transition: transform 0.4s cubic-bezier(0.47, 1.64, 0.41, 0.8), opacity 0.3s ease !important;
}

/* Состояние ПОСЛЕ клика (Мятный фон вырастает и становится ярким) */
body#product fieldset.product-variant .form-check:has(input[type="radio"]:checked) label::before,
body#product fieldset.product-variant label:has(input[type="radio"]:checked)::before {
    opacity: 1 !important;
    transform: scaleX(1) !important; /* Расширяется на всю ширину кнопки */
    box-shadow: 0 2px 8px rgba(82, 193, 162, 0.4) !important;
}

/* Красим текст активной кнопки в белый */
body#product fieldset.product-variant .form-check:has(input[type="radio"]:checked) label .radio-label,
body#product fieldset.product-variant .form-check:has(input[type="radio"]:checked) label span,
body#product fieldset.product-variant label:has(input[type="radio"]:checked) .radio-label,
body#product fieldset.product-variant label:has(input[type="radio"]:checked) span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* =========================================
   VERS: ПОЛНОЕ УНИЧТОЖЕНИЕ СИНЕЙ ПЛАШКИ О КОРЗИНЕ
   ========================================= */
body#product #notifications .alert-info,
body#product .alert.alert-info,
body#product .product-additional-info .alert-info {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =========================================
   VERS: ЛИПКАЯ ПАНЕЛЬ ПОКУПКИ И ЕЁ ЭЛЕМЕНТЫ (DJI СТИЛЬ)
   ========================================= */

/* 1. Невидимый отступ внизу страницы */
body#product { 
    padding-bottom: 100px !important; 
}

/* 2. Главный контейнер (Липкая панель) */
.product__add-to-cart-container {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; height: 85px !important;
    background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px) !important;
    border-top: 1px solid #e2e8f0 !important; box-shadow: 0 -10px 30px rgba(0,0,0,0.04) !important;
    z-index: 9999 !important; display: flex !important; align-items: center !important;
    padding: 0 5% !important; margin: 0 !important; box-sizing: border-box !important; gap: 20px !important;
}

/* 3. Грузовик доставки (Выравниваем по левому краю) */
body#product .product-availability,
body#product .product-availability.badge,
#product #product-availability {
    display: flex !important; align-items: center !important;
    margin: 0 auto 0 0 !important; /* ВАЖНО: auto выталкивает кнопки вправо */
    padding: 0 !important; background: transparent !important; border: none !important;
    font-family: 'Inter', sans-serif !important; font-size: 14px !important;
    font-weight: 500 !important; color: #4a5568 !important; text-transform: none !important;
}

body#product .product-availability i, #product #product-availability i {
    display: inline-block !important; width: 20px !important; height: 20px !important;
    margin-right: 12px !important; color: transparent !important; background-color: #585b5a !important; 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important; mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important; mask-position: center !important;
}
#product #product-availability.text-danger i, #product #product-availability.text-warning i { background-color: #e53e3e !important; }

/* 4. ЦЕНА НА ДЕСКТОПЕ (Типографика в стиле DJI) */
body#product .vers-sticky-price-clone {
    position: fixed !important;
    bottom: 30px !important; 
    right: calc(5% + 353px) !important; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; 
    font-size: 22px !important; 
    font-weight: 400 !important; 
    letter-spacing: -0.5px !important; /* Та самая магия DJI: слегка сжимаем цифры */
    color: #1a1c1e !important; 
    z-index: 10005 !important; 
    pointer-events: none !important; 
    white-space: nowrap !important; 
    margin: 0 !important; 
    display: block !important; 
    line-height: 1 !important;
}

/* 5. Кнопка "В корзину" */
body#product .product-actions .add-to-cart,
body#product button.product__add-to-cart-button,
body#product .product-add-to-cart .add-to-cart {
    background-color: #52c1a2 !important; border-color: #52c1a2 !important; color: #ffffff !important;
    font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 400 !important;
    border-radius: 50px !important; height: 54px !important; padding: 0 40px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.3s ease !important; box-shadow: 0 8px 20px rgba(82, 193, 162, 0.25) !important;
    text-transform: none !important;
}
body#product .product-actions .add-to-cart:hover,
body#product button.product__add-to-cart-button:hover,
body#product .product-add-to-cart .add-to-cart:hover {
    background-color: #45a88d !important; border-color: #45a88d !important; transform: translateY(-2px) !important;
}

/* =========================================
   VERS: ТВОЙ ИДЕАЛЬНЫЙ СЧЕТЧИК (ДЛЯ ВСЕХ УСТРОЙСТВ)
   ========================================= */
body#product .product-actions__quantity > .input-group,
body#product .product-actions__quantity > div,
body#product .bootstrap-touchspin {
    background: #ffffff !important; border: 2px solid #e2e8f0 !important; border-radius: 50px !important;
    overflow: hidden !important; display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: space-between !important;
    height: 54px !important; width: 130px !important; padding: 0 4px !important; box-shadow: none !important; transition: all 0.3s ease !important;
}
body#product .product-actions__quantity > .input-group:hover,
body#product .bootstrap-touchspin:hover { border-color: #cbd5e0 !important; }

body#product .product-actions__quantity input.form-control,
body#product .bootstrap-touchspin input.form-control {
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: #1a1c1e !important; font-family: 'Inter', sans-serif !important; font-weight: 400 !important;
    font-size: 16px !important; text-align: center !important; height: 100% !important; width: 40px !important; padding: 0 !important; margin: 0 !important;
}

body#product .product-actions__quantity button,
body#product .bootstrap-touchspin .btn,
body#product .bootstrap-touchspin .btn-touchspin {
    background: transparent !important; border: none !important; color: #718096 !important;
    width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;
    border-radius: 50% !important; transition: all 0.2s ease !important; z-index: 2 !important;
}
body#product .product-actions__quantity button:hover,
body#product .bootstrap-touchspin .btn:hover { background-color: rgba(82, 193, 162, 0.1) !important; color: #52c1a2 !important; }
body#product .product-actions__quantity button i,
body#product .bootstrap-touchspin .btn i { font-size: 18px !important; line-height: 1 !important; }

/* =========================================
   6. МОБИЛЬНАЯ АДАПТАЦИЯ (DJI STYLE - АБСОЛЮТНАЯ ФИКСАЦИЯ)
   ========================================= */
@media (max-width: 768px) {
    body#product { padding-bottom: 160px !important; }

    body#product .product__add-to-cart-container {
        height: 145px !important; padding: 0 !important; position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important; display: block !important; z-index: 9999 !important;
    }

    body#product .vers-sticky-price-clone {
        position: fixed !important; top: auto !important; bottom: 105px !important; 
        left: 20px !important; right: auto !important; z-index: 10005 !important; margin: 0 !important;
    }

    body#product #product-availability,
    body#product .js-product-availability,
    body#product .product-availability,
    body#product .product__availability {
        position: fixed !important; top: auto !important; bottom: 75px !important; 
        left: 20px !important; width: auto !important; margin: 0 !important; z-index: 10005 !important;
    }

    body#product .product__actions-qty-add {
        position: fixed !important; top: auto !important; bottom: 15px !important; 
        left: 20px !important; right: 20px !important; width: calc(100% - 40px) !important;
        margin: 0 !important; display: flex !important; flex-direction: row !important; 
        flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; z-index: 10005 !important;
    }

    body#product .product-actions__quantity,
    body#product .product__quantity {
        width: 120px !important; min-width: 120px !important; flex: 0 0 120px !important; margin: 0 !important; height: 54px !important;
    }

    body#product .product__add-to-cart,
    body#product .product-add-to-cart .add {
        flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; display: flex !important; height: 54px !important;
    }

    body#product button.product__add-to-cart-button,
    body#product .product-actions .add-to-cart {
        width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50px !important;
    }
}

/* =========================================
   VERS: СЕРВЕРНАЯ СИНХРОНИЗАЦИЯ ЦЕНЫ (БЕЗ JS)
   ========================================= */

/* 1. Прячем старую, "мертвую" цену, если она осталась в кнопках */
.vers-sticky-price {
    display: none !important;
}

/* 2. Наш новый "умный" клон. Выдергиваем его из верха и фиксируем внизу */
.vers-sticky-price-clone {
    position: fixed !important;
    bottom: 25px !important; 
    right: calc(5% + 360px) !important; /* УВЕЛИЧИЛИ ОТСТУП: теперь цена точно слева от счетчика */
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    z-index: 10000 !important;
    letter-spacing: -0.5px !important;
    pointer-events: none !important; 
    white-space: nowrap !important;
}

/* 3. Мобильная адаптация */
@media (max-width: 768px) {
    .vers-sticky-price-clone {
        right: auto !important;
        left: 20px !important; /* На мобилке просто прижимаем к левому краю */
        bottom: 25px !important;
        font-size: 20px !important;
    }
}

/* =========================================
   VERS: ГАЛЕРЕЯ HUMMINGBIRD (APPLE STYLE - ФИНАЛ)
   ========================================= */

/* 1. ГЛАВНЫЙ СЛАЙДЕР (Меняем фон на белый, чтобы скрыть разницу фонов фоток) */
body#product .product__carousel {
    background-color: #ffffff !important; /* БЕЛЫЙ ФОН */
    border-radius: 24px !important;
    padding: 30px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important; /* ДОБАВИТЬ ЭТУ СТРОКУ */
    padding: 30px !important; /* ДОБАВИТЬ ЭТУ СТРОКУ (защитный зазор от краев) */
    max-width: 880px !important; /* Ограничиваем ширину контейнера (можешь менять цифру) */
    margin: 0 auto !important; /* Центрируем суженную карточку по центру колонки */
}

/* 2. ГЛАВНОЕ ФОТО */
body#product .product__carousel .carousel-item img {
    mix-blend-mode: normal !important; /* Отключаем растворение, так как фон контейнера теперь белый */
    object-fit: contain !important; 
    background: transparent !important;
    transition: transform 0.4s ease !important;
    max-height: 500px !important; 
}

/* Легкий зум при наведении на главное фото */
body#product .product__carousel:hover .carousel-item img {
    transform: scale(1.05) !important;
}

/* Скрываем лупу и флажки */
body#product .product__zoom,
body#product .product-flags {
    display: none !important;
}


/* =========================================
   VERS: DJI ULTIMATE INTERFACE (PRO STYLE - ФИНАЛ)
   ========================================= */

/* 1. ГЛАВНЫЙ КОНТЕЙНЕР КАРУСЕЛИ */
.dji-style-gallery .product__carousel {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* 2. СТРЕЛКИ НАВИГАЦИИ (APPLE STYLE) */
body#product .dji-style-gallery .dji-nav-arrow.carousel-control-prev,
body#product .dji-style-gallery .dji-nav-arrow.carousel-control-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    width: 36px !important; /* Аккуратный, компактный размер */
    height: 36px !important;
    background: #f5f5f7 !important; /* Фирменный светло-серый фон Apple */
    border-radius: 50% !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(0,0,0,0.04) !important; /* Едва заметная окантовка */
    box-shadow: none !important; /* Убиваем тени для чистоты */
    z-index: 100 !important;
}

body#product .dji-style-gallery:hover .dji-nav-arrow { 
    opacity: 1 !important; 
}

/* Ховер: чуть темнеет, как в iOS */
body#product .dji-style-gallery .dji-nav-arrow:hover { 
    background: #e5e5ea !important; 
}

/* === ПРИЖИМАЕМ К РАМКАМ === */
/* Сейчас стоит 10px для легкого "воздуха". Если хочешь ВПРИТЫК к линии — ставь 0 !important */
body#product .dji-style-gallery .carousel-control-prev.dji-nav-arrow { left: 1px !important; }
body#product .dji-style-gallery .carousel-control-next.dji-nav-arrow { right: 1px !important; }

/* Убиваем системные иконки */
body#product .dji-style-gallery .dji-nav-arrow span {
    display: none !important;
}

/* Рисуем тонкие "яблочные" шевроны (SVG) */
body#product .dji-style-gallery .dji-nav-arrow::after {
    content: '' !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Левая стрелка */
body#product .dji-style-gallery .carousel-control-prev.dji-nav-arrow::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    margin-right: 2px !important; 
}

/* Правая стрелка */
body#product .dji-style-gallery .carousel-control-next.dji-nav-arrow::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    margin-left: 2px !important;
}


/* 3. УМНЫЕ ТОЧКИ (APPLE STYLE - КРУГЛЫЕ, БЕЗ ВЫТЯГИВАНИЯ) */
.dji-indicators-container { position: absolute !important; bottom: 15px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10 !important; }
.dji-indicators-track { display: flex !important; gap: 8px !important; padding: 10px !important; align-items: center !important; }
.dji-indicator-item { position: relative !important; background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important; }

/* Неактивная точка */
.dji-dot { display: block !important; width: 6px !important; height: 6px !important; background: #d1d1d6 !important; border-radius: 50% !important; transition: all 0.3s ease !important; }

/* Активная точка (Чуть темнее и капельку больше) */
.dji-indicator-item.active .dji-dot { background: #86868b !important; transform: scale(1.2) !important; width: 6px !important; }

/* 4. ВСПЛЫВАЮЩЕЕ ПРЕВЬЮ ТОЧЕК */
.dji-preview-popup {
    position: absolute !important; bottom: 25px !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important;
    width: 65px !important; height: 65px !important; background: #ffffff !important; border-radius: 10px !important; padding: 3px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; pointer-events: none !important;
}
.dji-preview-popup img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 7px !important; }
.dji-indicator-item:hover .dji-preview-popup { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; }



/* =========================================
   5. НЕОНОВЫЙ 3D ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМОВ (CYAN CUBE)
   ========================================= */

.switch-3d-cyan {
  --w: 110px;
  --h: 40px;
  --knob-size: 20px;
  --offset: 10px;

  /* --- COLORS --- */
  --cyan: #52c1a2; /* The only accent color now */
  --white-glow: #000000;
  --bg-off: #f1f5f9; /* Dark Gray-ish */
  --bg-on: #f1f5f9; /* Dark Blue-ish */


  /* Calculations */
  --half-size: calc(var(--knob-size) / 2);

  position: relative !important;
  display: inline-block !important;
  width: var(--w) !important;
  height: var(--h) !important;
  cursor: pointer !important;
}

.switch-3d-cyan .switch-input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

/* The Track */
.switch-3d-cyan .switch-track {
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--bg-off) !important;
  border-radius: var(--h) !important;
  border: 1px solid #52c1a2 !important;
  transition: all 0.5s ease !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
}

/* --- TEXT SETTINGS --- */
.switch-3d-cyan .track-text {
  position: absolute !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--white-glow) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.switch-3d-cyan .text-3d { left: 40px !important; opacity: 1 !important; }
.switch-3d-cyan .text-2d { left: 15px !important; opacity: 0 !important; transform: translateX(-10px) !important; }

/* The Knob Wrapper */
.switch-3d-cyan .switch-knob {
  position: absolute !important;
  top: var(--offset) !important;
  left: var(--offset) !important;
  width: var(--knob-size) !important;
  height: var(--knob-size) !important;
  perspective: 1200px !important;
  pointer-events: none !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 2 !important;
}

/* The Cube - ALWAYS SPINNING */
.switch-3d-cyan .cube {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  animation: spin-cube 3s infinite linear !important;
}

/* Cube Faces */
.switch-3d-cyan .face {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(82, 193, 162, 0.1) !important;
  border: 1px solid var(--cyan) !important;
  box-shadow: 0 0 4px var(--cyan), inset 0 0 4px var(--cyan) !important;
  opacity: 0.8 !important;
  backface-visibility: visible !important;
  transition: all 0.5s ease !important;
}

.switch-3d-cyan .front  { transform: translateZ(var(--half-size)) !important; }
.switch-3d-cyan .back   { transform: rotateY(180deg) translateZ(var(--half-size)) !important; }
.switch-3d-cyan .right  { transform: rotateY(90deg) translateZ(var(--half-size)) !important; }
.switch-3d-cyan .left   { transform: rotateY(-90deg) translateZ(var(--half-size)) !important; }
.switch-3d-cyan .top    { transform: rotateX(90deg) translateZ(var(--half-size)) !important; }
.switch-3d-cyan .bottom { transform: rotateX(-90deg) translateZ(var(--half-size)) !important; }

/* --- CHECKED STATE --- */
.switch-input:checked ~ .switch-track .switch-knob {
  transform: translateX(calc(var(--w) - var(--knob-size) - (var(--offset) * 2))) !important;
}

.switch-input:checked ~ .switch-track .text-3d { opacity: 0 !important; transform: translateX(10px) !important; }
.switch-input:checked ~ .switch-track .text-2d { opacity: 1 !important; transform: translateX(0) !important; }

.switch-input:checked ~ .switch-track {
  background-color: var(--bg-on) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 10px rgba(82, 193, 162, 0.3) !important;
}

.switch-input:checked ~ .switch-track .face {
  background: rgba(82, 193, 162, 0.15) !important;
  box-shadow: 0 0 8px var(--cyan), inset 0 0 8px var(--cyan) !important;
}

@keyframes spin-cube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 7. СКРЫВАЕМ ПОЛОСУ ЗАГРУЗКИ 3D */
model-viewer::part(default-progress-bar) { display: none !important; }

/* =========================================
   АБСОЛЮТНОЕ ЦЕНТРИРОВАНИЕ СТРЕЛОК (БЕЗ ПРЫЖКОВ)
   ========================================= */

/* 1. Жестко фиксируем высоту родителя, чтобы стрелки знали ее до загрузки фото */
#dji-photo-layer {
    position: relative !important; 
    height: 500px !important; 
    width: 100% !important;
}

/* ФИКС ДЛЯ МОБИЛОК (Убираем белую дыру внизу) */
@media (max-width: 768px) {
    #dji-photo-layer {
        height: 390px !important; 
    }
    body#product .product__carousel .carousel-item img {
        max-height: 350px !important; 
    }
}

/* =========================================
   УБИРАЕМ ЧЕРНУЮ РАМКУ ФОКУСА У 3D ПЛЕЕРА
   ========================================= */
#dji-3d-layer,
#dji-3d-layer iframe,
#dji-3d-layer canvas,
#dji-3d-layer model-viewer {
    border: none !important;
    outline: none !important;
}

#dji-3d-layer:focus,
#dji-3d-layer:focus-visible,
#dji-3d-layer *:focus,
#dji-3d-layer *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   VERS: ИСПРАВЛЕНИЕ 3D-ВРАЩЕНИЯ НА МОБИЛЬНЫХ
   ========================================= */
#dji-3d-layer, 
#dji-3d-layer iframe, 
#dji-3d-layer canvas, 
#dji-3d-layer model-viewer,
model-viewer {
    /* 1. Убиваем синее выделение при тапе и долгом нажатии */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    
    /* 2. Запрещаем браузеру скроллить страницу при свайпе по модели (отдаем приоритет вращению) */
    touch-action: pan-y !important; 
    outline: none !important;
}

/* =========================================
   VERS: КНОПКИ СЛАЙДЕРА ОДИНАКОВОГО РАЗМЕРА
   ========================================= */

/* 1. На компьютере: задаем единую ширину для обеих кнопок */
@media (min-width: 769px) {
    .vers-card-btn-primary, 
    .vers-card-btn-secondary {
        min-width: 230px !important; /* Делаем ширину по самому длинному слову */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* 2. На телефоне: заставляем их делить место ровно поровну (50% / 50%) */
@media (max-width: 768px) {
    .vers-buttons-group {
        width: 100% !important;
        max-width: 400px !important; /* Ограничитель, чтобы на планшетах не растянулись на весь экран */
    }
    
    .vers-card-btn-primary, 
    .vers-card-btn-secondary {
        flex: 1 !important; /* Магия: делят свободное место поровну */
        width: 50% !important;
        padding: 14px 10px !important; /* Уменьшаем боковые отступы, чтобы текст влез на узком экране */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* =========================================
   VERS: ПРЕМИАЛЬНАЯ КАРТОЧКА С УПРАВЛЕНИЕМ ЧЕРЕЗ ID СТРАНИЦ
   Чтобы добавить новую страницу, просто допиши её ID в скобки через запятую
   ========================================= */

/* 1. Главный контейнер карточки на выбранных страницах */
:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 50px 60px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    border: 1px solid #e2e8f0 !important;
    margin: 20px auto 60px auto !important;
    max-width: 900px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Эффект ховера для этих же страниц */
:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card:hover {
    transform: none !important;
    border-color: rgba(82, 193, 162, 0.3) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* 2. Заголовки H2 и H3 внутри карточек */
:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card h2,
:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card h3 {
    font-family: 'Inter', sans-serif !important;
    color: #1a1c1e !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    border-bottom: none !important;
}

:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card h2 { 
    font-size: 32px !important; 
}
:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card h3 { 
    font-size: 22px !important; 
    margin-top: 40px !important; 
    margin-bottom: 15px !important;
}

/* 3. Основной текст (абзацы) */
:is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
    margin-bottom: 20px !important;
}

/* 4. Адаптация под мобильные телефоны */
@media (max-width: 768px) {
    :is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card {
        padding: 30px 20px !important;
        border-radius: 20px !important;
    }
    :is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card h2 { font-size: 26px !important; }
    :is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card h3 { font-size: 20px !important; }
    :is(body.cms-id-4, body.cms-id-40, body.cms-id-15, body.cms-id-16, body.cms-id-45, body.cms-id-1, body.cms-id-5, body.cms-id-46) .vers-premium-text-card p { font-size: 15px !important; }
}

/* =========================================
   1. Скрываем ТОЛЬКО блок "Подробнее о товаре" (Product Details)
   ========================================= */
.js-product-details,
#product_details {
    display: none !important;
}

/* =========================================
   2. Убираем ВСЕ серые полоски вокруг оставшегося описания
   ========================================= */
#product_accordion,
#product_accordion .accordion-item,
#product_accordion .accordion-button {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Убиваем псевдоэлементы линий, если они заданы классом accordion-flush */
#product_accordion .accordion-item::before,
#product_accordion .accordion-item::after {
    display: none !important;
}

/* Скрываем стрелочку у описания, если она осталась */
#product_accordion .accordion-button::after {
    display: none !important;
}

/* =========================================
   VERS: ОБЪЕДИНЕННАЯ ОЧИСТКА И ФОРМА УВЕДОМЛЕНИЙ
   ========================================= */

/* 1. ЧИСТКА ОПИСАНИЯ: Убираем вкладку "Details", стрелки и все линии */
.js-product-details,
#product_details,
#product_accordion .accordion-button::after,
#product_accordion .accordion-item::before,
#product_accordion .accordion-item::after {
    display: none !important;
}

#product_accordion,
#product_accordion .accordion-item,
#product_accordion .accordion-button {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}


/* =========================================
   VERS: ЦВЕТ И ФОРМА КНОПКИ В КАРТОЧКЕ УВЕДОМЛЕНИЙ
   ========================================= */

/* 1. Основное состояние кнопки */
.ps-emailalerts button.btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;     
    color: #ffffff !important;            
    transition: all 0.3s ease !important; 
    
    /* ЗАКРУГЛЯЕМ КРАЯ КНОПКИ ЗДЕСЬ */
    border-radius: 50px !important; 
}

/* 2. Состояние при наведении мышки */
.ps-emailalerts button.btn-primary:hover,
.ps-emailalerts button.btn-primary:focus {
    background-color: #45a88d !important; 
    border-color: #45a88d !important;
}

/* =========================================
   VERS: ЯДЕРНОЕ УДАЛЕНИЕ "TAX INCLUDED"
   ========================================= */
body#product div.product_tax-infos,
body#product span.product_tax-label {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    pointer-events: none !important;
}

/* 1. Убиваем внешнюю рамку-контейнер */
body#product .js-product-variants .product-variant-radios {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 12px !important; /* Аккуратный отступ между кнопками */
}

/* 2. Делаем строгий Flat-дизайн для самих кнопок */
body#product .js-product-variants label {
    border: 1px solid #e5e5e5 !important; /* Тонкая строгая рамка */
    background: #ffffff !important;
    box-shadow: none !important; /* Никаких теней */
    color: #555555 !important;
    margin: 0 !important; /* Убираем лишние отступы Uiverse */
}

/* 3. Убираем динамический текст в заголовке (оставляем только "Jack:") */
body#product .product-variants .control-label .radio-label {
    display: none !important;
}

/* =========================================
   VERS: ПРЕМИУМ ТИПОГРАФИКА ЗАГОЛОВКА, ЦЕНЫ И ОПЦИЙ
   ========================================= */

/* =========================================
   VERS: КАРТОЧКА ТОЛЬКО ДЛЯ НАЗВАНИЯ
   ========================================= */

/* 1. КАРТОЧКА И ТЕКСТ ТОЛЬКО ДЛЯ ЗАГОЛОВКА */
body#product h1.product__name {
    /* Оформление самой карточки */
    background-color: #fdfcfc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 25px 30px !important; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 20px !important; 
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Типографика DJI Style */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #333333 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
}

/* 2. ЦЕНА БЕЗ КАРТОЧКИ (чистый фон) */
body#product .product__prices {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 10px !important; /* Легкий отступ сбоку, чтобы цена визуально выровнялась с текстом заголовка */
    margin-bottom: 25px !important;
}

body#product .product__prices .current-price {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. ОСТАВЛЯЕМ "USD" ПЕРЕД ЦЕНОЙ */
body#product .product__prices .current-price span[itemprop="price"]::before {
    content: 'USD ';
    font-size: 0.7em !important;
    color: #86868b !important;
    font-weight: 500 !important;
    margin-right: 6px !important;
    position: relative !important;
    top: -2px !important;
}

/* =========================================
   VERS: УБИРАЕМ ДУБЛЬ ВЫБРАННОЙ ОПЦИИ (Magnetic/Waterproof)
   ========================================= */
body#product .js-product-variants .product-variant__legend .selected-value,
body#product .js-product-variants .product-variant__legend .product-variant__selected,
body#product .js-product-variants .control-label .radio-label,
body#product .selected-value.product-variant__selected {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
}

/* =========================================
   VERS: КНОПКИ ССЫЛОК В ОПИСАНИИ (ВМЕСТО ТЕКСТА)
   ========================================= */
body#product .vers-desc-links {
    display: flex !important; 
    gap: 15px !important; 
    margin-bottom: 50px !important; 
    flex-wrap: wrap !important;
}

body#product .vers-desc-btn {
    display: inline-flex !important; 
    align-items: center !important; 
    padding: 16px 24px !important;
    background: #ffffff !important; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 16px !important;
    text-decoration: none !important; 
    color: #1a1c1e !important;
    font-family: 'Inter', sans-serif !important; 
    font-size: 16px !important; 
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; 
    transition: all 0.3s ease !important;
}

body#product .vers-desc-btn i {
    margin-right: 12px !important; 
    color: #52c1a2 !important; 
    font-size: 24px !important; 
    transition: transform 0.3s ease !important;
}

body#product .vers-desc-btn:hover {
    transform: translateY(-3px) !important; 
    border-color: #52c1a2 !important;
    box-shadow: 0 10px 25px rgba(82, 193, 162, 0.15) !important; 
    color: #52c1a2 !important;
}

body#product .vers-desc-btn:hover i {
    transform: scale(1.1) !important;
}

/* =========================================
   VERS: ИДЕАЛЬНОЕ ОПИСАНИЕ И СПЕЦИФИКАЦИИ (ЕДИНЫЙ БЛОК ПО ЦЕНТРУ)
   ========================================= */

/* 1. УБИВАЕМ СИСТЕМНЫЕ ЭЛЕМЕНТЫ ТЕМЫ И ПРАВУЮ КОЛОНКУ */
body#product #product_accordion .accordion-header,
body#product #product_description_heading,
body#product .product__bottom-right {
    display: none !important;
    width: 0 !important;
}

body#product #product_accordion .accordion-body {
    padding-top: 0 !important;
}

/* 1.1 ВЗЛОМ СЕТКИ: РАСТЯГИВАЕМ ЛЕВУЮ КОЛОНКУ НА 100% ЭКРАНА */
body#product .product__bottom-left,
body#product .product__bottom > .col-lg-6, 
body#product .product__bottom > .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important; /* МАГИЯ ЗДЕСЬ: пробиваем Grid-сетку твоей темы */
    margin-top: 50px !important;
    padding: 0 !important;
}

/* 2. ЕДИНЫЕ ЗАГОЛОВКИ (Description и Specifications) */
body#product .vers-spec-title {
    color: #0b9e69 !important; 
    font-family: 'Inter', sans-serif !important; 
    font-size: 36px !important; 
    font-weight: 600 !important;
    margin: 0 auto 35px auto !important; /* ЦЕНТРИРУЕМ */
    letter-spacing: -0.02em !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: center !important; /* Текст строго по центру */
    grid-column: 1 / -1 !important; 
}

/* 3. КНОПКИ ССЫЛОК (По центру экрана) */
body#product .vers-desc-links {
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 20px !important; 
    margin: 0 auto 50px auto !important; /* ЦЕНТРИРУЕМ БЛОК */
    width: 100% !important;
    max-width: 100% !important; /* Сделали чуть шире для простора */
    justify-content: center !important;
}

body#product .vers-desc-btn {
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    width: 100% !important; 
    padding: 18px 24px !important;
    background: #ffffff !important; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 16px !important;
    text-decoration: none !important; 
    color: #1a1c1e !important;
    font-family: 'Inter', sans-serif !important; 
    font-size: 16px !important; 
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; 
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

body#product .vers-desc-btn i {
    margin-right: 12px !important; 
    color: #52c1a2 !important; 
    font-size: 24px !important; 
    transition: transform 0.3s ease !important;
}

body#product .vers-desc-btn:hover {
    transform: translateY(-3px) !important; 
    border-color: #52c1a2 !important;
    box-shadow: 0 10px 25px rgba(82, 193, 162, 0.15) !important; 
    color: #1a1c1e !important;
}
body#product .vers-desc-btn:hover i {
    transform: scale(1.1) !important;
}

/* 4. СЕТКА СПЕЦИФИКАЦИЙ (По центру экрана) */
body#product .vers-spec-grid {
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 20px !important; 
    margin: 0 auto 50px auto !important; /* ЦЕНТРИРУЕМ БЛОК */
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
}

/* Карточка спецификации */
body#product .vers-spec-item {
    display: flex !important; 
    align-items: stretch !important; 
    background: #ffffff !important;
    border-radius: 16px !important; 
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    overflow: hidden !important; 
}

/* Левая часть (Иконка + Название) */
body#product .spec-left {
    display: flex !important; 
    align-items: center !important; 
    padding: 16px 20px !important; 
    flex: 1 !important; 
    gap: 16px !important; 
    background: #ffffff !important;
}

body#product .spec-left i {
    color: #1a1c1e !important; 
    font-size: 26px !important; 
    opacity: 0.8 !important;
}

body#product .spec-label {
    font-family: 'Inter', sans-serif !important; 
    font-size: 15px !important; 
    font-weight: 500 !important; 
    color: #1a1c1e !important; 
    line-height: 1.3 !important;
}

/* Правая часть (Значение + Зеленая полоса) */
body#product .spec-right {
    background: #f8fafc !important; 
    padding: 16px 24px !important; 
    min-width: 220px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-start !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 4px solid #52c1a2 !important; 
}

body#product .spec-value {
    font-family: 'Inter', sans-serif !important; 
    font-size: 15px !important; 
    font-weight: 700 !important; 
    color: #1a1c1e !important;
}

/* 5. АДАПТИВ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
@media (max-width: 992px) {
    body#product .vers-spec-grid,
    body#product .vers-desc-links { 
        grid-template-columns: 1fr !important; 
        padding: 0 20px !important; /* Добавили отступы, чтобы не прилипало к краям телефона */
        box-sizing: border-box !important;
    }
}
@media (max-width: 576px) {
    body#product .vers-spec-item { 
        flex-direction: column !important; 
        border-radius: 16px !important; 
    }
    body#product .spec-right { 
        border-left: none !important; 
        border-top: 1px solid #e2e8f0 !important; 
        border-right: none !important; 
        border-bottom: 4px solid #52c1a2 !important; 
        justify-content: center !important; 
        text-align: center !important; 
    }
}

/* =========================================
   VERS: СТРАНИЦА ЛОГИНА (ШАГ 1 - КАРТОЧКА)
   ========================================= */

/* 1. Ограничиваем ширину и ставим строго по центру */
body#authentication #main,
body#login #main {
    max-width: 480px !important;
    margin: 50px auto 100px !important; 
}

/* 2. Делаем фирменную белую карточку */
body#authentication #content,
body#login #content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
}

/* 3. Центрируем и делаем красивым заголовок "Sign in" */
body#authentication .page-header h1,
body#login .page-header h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    border: none !important;
}

/* =========================================
   VERS: СТРАНИЦА ЛОГИНА (ШАГ 2 - МЕНЯЕМ СИНИЙ НА ЗЕЛЕНЫЙ)
   ========================================= */

/* 1. Кнопка с глазком (Show password) */
body#authentication .input-group-btn .btn,
body#authentication .input-group-append .btn,
body#login .input-group-btn .btn,
body#login .input-group-append .btn {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    color: #ffffff !important;
}
body#authentication .input-group-btn .btn:hover,
body#authentication .input-group-append .btn:hover,
body#login .input-group-btn .btn:hover,
body#login .input-group-append .btn:hover {
    background-color: #0b9e69 !important; /* Чуть темнее при наведении */
    border-color: #0b9e69 !important;
}

/* 3. Главная кнопка "Sign in" */
body#authentication .btn-primary,
body#login .btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}
body#authentication .btn-primary:hover,
body#login .btn-primary:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
}

/* =========================================
   VERS: ТЕРМОЯДЕРНЫЙ УДАР ПО СИНЕМУ ЦВЕТУ
   ========================================= */

/* 1. Ссылка "Forgot your password?" */
.forgot-password a,
a[href*="password-recovery"] {
    color: #52c1a2 !important;
    text-decoration: none !important;
}

.forgot-password a:hover,
a[href*="password-recovery"]:hover {
    color: #0b9e69 !important;
    text-decoration: underline !important;
}

/* 2. Кнопка "Create your account" */
.no-account a,
[data-link-action="display-register-form"],
a[href*="registration"] {
    background-color: #ffffff !important; 
    background-image: none !important; /* На случай, если тема рисует синий градиентом */
    border: 2px solid #52c1a2 !important; 
    color: #52c1a2 !important; 
    border-radius: 12px !important;
    padding: 12px 24px !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.no-account a:hover,
[data-link-action="display-register-form"]:hover,
a[href*="registration"]:hover {
    background-color: #52c1a2 !important; 
    color: #ffffff !important; 
    border-color: #52c1a2 !important;
}

/* =========================================
   VERS: РЕГИСТРАЦИЯ (ШАГ 1 - ТОЛЬКО КАРТОЧКА)
   ========================================= */

/* 1. Ограничиваем ширину и ставим строго по центру */
body#registration #main {
    max-width: 540px !important;
    margin: 50px auto 100px !important; 
}

/* 2. Делаем фирменную белую карточку */
body#registration #content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
}

/* 3. Центрируем и делаем красивым заголовок "Create an account" */
body#registration .page-header h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    border: none !important;
}

/* =========================================
   VERS: РЕГИСТРАЦИЯ (ШАГ 2 - ТОЛЬКО ЦВЕТА)
   ========================================= */

/* 1. Кнопка с глазком (Show password) */
body#registration .input-group-btn .btn,
body#registration .input-group-append .btn {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    color: #ffffff !important;
}
body#registration .input-group-btn .btn:hover,
body#registration .input-group-append .btn:hover {
    background-color: #0b9e69 !important; /* Чуть темнее при наведении */
    border-color: #0b9e69 !important;
}

/* 2. Радиокнопки и чекбоксы (когда ставим галочку/точку) */
body#registration input[type="radio"]:checked + span,
body#registration input[type="checkbox"]:checked + span,
body#registration .custom-checkbox input[type="checkbox"]:checked + span,
body#registration .custom-radio input[type="radio"]:checked + span {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}

/* 3. Все ссылки (Политика конфиденциальности, Войти вместо регистрации) */
body#registration a {
    color: #52c1a2 !important;
}
body#registration a:hover {
    color: #0b9e69 !important;
}

/* 4. Главная кнопка "Save" (Сохранить) */
body#registration .btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}
body#registration .btn-primary:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
}

/* 5. Мятная рамка поля при клике (убиваем дефолтное синее свечение) */
body#registration .form-control:focus {
    border-color: #52c1a2 !important;
    box-shadow: 0 0 0 2px rgba(82, 193, 162, 0.25) !important;
    outline: none !important;
}

/* =========================================
   VERS: ВОССТАНОВЛЕНИЕ ПАРОЛЯ (БРОНЕБОЙНЫЙ ВАРИАНТ)
   ========================================= */

/* 1. Ограничиваем ширину и ставим по центру */
body#password-recovery #main,
body#password #main,
.page-password-recovery #main {
    max-width: 480px !important;
    margin: 40px auto 80px !important;
}

/* 2. Делаем фирменную белую карточку */
body#password-recovery #content,
body#password #content,
.page-password-recovery #content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
}

/* 3. Заголовок "Forgot your password?" */
body#password-recovery .page-header h1,
body#password .page-header h1,
.page-password-recovery .page-header h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    border: none !important;
}

/* 4. Текст-подсказка (Please enter the email...) */
body#password-recovery #content p,
body#password #content p,
.page-password-recovery #content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #86868b !important;
    text-align: center !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
}

/* 5. Название поля (Email address) */
body#password-recovery .form-control-label,
body#password .form-control-label,
.page-password-recovery .form-control-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #333333 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* 6. Поле ввода */
body#password-recovery .form-control,
body#password .form-control,
.page-password-recovery .form-control {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #1a1c1e !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}
body#password-recovery .form-control:focus,
body#password .form-control:focus,
.page-password-recovery .form-control:focus {
    border-color: #52c1a2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(82, 193, 162, 0.15) !important;
    outline: none !important;
}

/* 7. Синяя кнопка "Send reset link" */
body#password-recovery .btn-primary,
body#password .btn-primary,
.page-password-recovery .btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    border-radius: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 14px 24px !important;
    width: 100% !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    box-shadow: 0 4px 15px rgba(82, 193, 162, 0.2) !important;
    color: #ffffff !important;
}
body#password-recovery .btn-primary:hover,
body#password .btn-primary:hover,
.page-password-recovery .btn-primary:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(82, 193, 162, 0.35) !important;
}

/* 8. Ссылка "Back to login" */
body#password-recovery .page-footer,
body#password .page-footer,
.page-password-recovery .page-footer {
    text-align: center !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important; 
}
body#password-recovery a,
body#password a,
.page-password-recovery a {
    color: #52c1a2 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}
body#password-recovery a:hover,
body#password a:hover,
.page-password-recovery a:hover {
    color: #52c1a2 !important;
}

/* =========================================
   VERS: УБИРАЕМ ЛИШНИЕ ПОЛОСКИ СНИЗУ
   ========================================= */

/* 1. Скрываем системный тег hr */
body#password-recovery hr,
body#password hr,
.page-password-recovery hr {
    display: none !important;
}

/* 2. Убираем рамку с подвала страницы */
body#password-recovery .page-footer,
body#password .page-footer,
.page-password-recovery .page-footer {
    border-top: none !important; 
}

/* =========================================
   VERS: КОРЗИНА (ШАГ 1 - ТОЛЬКО ЦВЕТА)
   ========================================= */

/* 1. Правая кнопка "Checkout" (Сплошная) */
body#cart .cart-summary .btn-primary,
body#cart .checkout .btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    color: #ffffff !important;
}
body#cart .cart-summary .btn-primary:hover,
body#cart .checkout .btn-primary:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
}

/* 2. Левая кнопка "Continue shopping" (Контурная) */
body#cart .cart-grid-body a.label,
body#cart .cart-container a.label,
body#cart .cart-grid a {
    color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

/* Эффект при наведении: заливается мятным, текст белый */
body#cart .cart-grid-body a.label:hover,
body#cart .cart-container a.label:hover,
body#cart .cart-grid a:hover {
    background-color: #52c1a2 !important; 
    color: #ffffff !important; 
    border-color: #52c1a2 !important;
}

/* Страховка: если левая кнопка использует класс btn-outline-primary */
body#cart .btn-outline-primary {
    color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}
body#cart .btn-outline-primary:hover {
    background-color: #52c1a2 !important;
    color: #ffffff !important;
}

/* =========================================
   VERS: КАРТОЧКА ДЛЯ ORDER SUMMARY (ПРАВАЯ КОЛОНКА)
   ========================================= */

/* 1. Оборачиваем блок Order summary в карточку */
body#cart .cart-summary {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 30px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
}

/* 2. Убиваем внутренние рамки темы (чтобы не было эффекта "коробка в коробке") */
body#cart .cart-summary .card,
body#cart .cart-summary .card-block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. Убираем лишнюю линию под заголовком Order summary и делаем отступ */
body#cart .cart-summary .cart-title,
body#cart .cart-summary h3 {
    border-bottom: none !important;
    margin-bottom: 20px !important;
}

/* =========================================
   VERS: МОДАЛЬНОЕ ОКНО (УДАР ПО ПЛОЩАДЯМ)
   ========================================= */

/* 1. Правая/Верхняя кнопка (сплошная: Proceed to checkout) */
body #blockcart-modal .btn-primary,
body .modal .btn-primary,
body .cart-content-btn .btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
body #blockcart-modal .btn-primary:hover,
body .modal .btn-primary:hover,
body .cart-content-btn .btn-primary:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
}

/* 2. Левая/Нижняя кнопка (контурная: Continue shopping) */
body #blockcart-modal .btn-secondary,
body .modal .btn-secondary,
body #blockcart-modal .btn-outline-primary,
body .modal .btn-outline-primary,
body #blockcart-modal button[data-dismiss="modal"],
body .modal button[data-dismiss="modal"] {
    background-color: transparent !important;
    border-color: #52c1a2 !important;
    color: #52c1a2 !important;
    border-radius: 8px !important;
}
body #blockcart-modal .btn-secondary:hover,
body .modal .btn-secondary:hover,
body #blockcart-modal .btn-outline-primary:hover,
body .modal .btn-outline-primary:hover,
body #blockcart-modal button[data-dismiss="modal"]:hover,
body .modal button[data-dismiss="modal"]:hover {
    background-color: #52c1a2 !important;
    color: #ffffff !important;
    border-color: #52c1a2 !important;
}

/* 3. Галочка добавления */
body #blockcart-modal .material-icons,
body .modal .material-icons {
    color: #52c1a2 !important;
}

/* =========================================
   VERS: ОФОРМЛЕНИЕ ЗАКАЗА (ШАГ 1 - ТОЛЬКО ЦВЕТА)
   ========================================= */

/* 1. Ссылка "Sign in" и другие текстовые ссылки внутри шагов */
body#checkout .checkout-step a {
    color: #52c1a2 !important;
    transition: color 0.3s ease !important;
}
body#checkout .checkout-step a:hover {
    color: #0b9e69 !important;
}

/* 2. Радиокнопки (Mr. / Mrs.) и чекбоксы в мятный цвет */
body#checkout input[type="radio"]:checked + span,
body#checkout input[type="checkbox"]:checked + span,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span,
body#checkout .custom-radio input[type="radio"]:checked + span {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}

/* 3. Главные кнопки (Исключаем кнопку глазика пароля!) */
body#checkout .btn-primary:not([data-action="show-password"]),
body#checkout .continue {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    color: #ffffff !important;
}
body#checkout .btn-primary:not([data-action="show-password"]):hover,
body#checkout .continue:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
}

/* Возвращаем глазику пароля прозрачность и иконку */
body#checkout button[data-action="show-password"] {
    background: transparent !important;
    color: #86868b !important;
    border: none !important;
    box-shadow: none !important;
}
body#checkout button[data-action="show-password"]:hover {
    color: #52c1a2 !important;
}
body#checkout button[data-action="show-password"] i {
    display: block !important;
}

/* 4. Рамка полей ввода при клике (убиваем синее свечение) */
body#checkout .form-control:focus {
    border-color: #52c1a2 !important;
    box-shadow: 0 0 0 2px rgba(82, 193, 162, 0.25) !important;
    outline: none !important;
}

/* =========================================
   VERS: ОФОРМЛЕНИЕ ЗАКАЗА (ПРАВАЯ КОЛОНКА - ТОВАРЫ)
   ========================================= */

/* 1. Убиваем кнопку-аккордеон "Show details" */
body#checkout .cart-summary-products .accordion-header,
body#checkout button[data-bs-target="#cart-summary-product-list"] {
    display: none !important;
}

/* 2. Принудительно разворачиваем сам список товаров */
body#checkout #cart-summary-product-list {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

/* =========================================
   VERS: ОФОРМЛЕНИЕ ЗАКАЗА (ПРАВАЯ КАРТОЧКА)
   ========================================= */

/* 1. Убиваем дефолтные фоны и рамки аккордеона темы */
body#checkout .checkout_summary-accordion,
body#checkout .checkout_summary-accordion-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. Оборачиваем весь блок Order summary в фирменную карточку */
body#checkout .cart-summary {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 30px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
    margin-bottom: 30px !important;
}

/* 3. Делаем внутренние разделительные линии (hr) более мягкими и премиальными */
body#checkout .cart-summary hr {
    background-color: #e2e8f0 !important;
    opacity: 0.5 !important;
    margin: 15px 0 !important;
}

/* 4. Убираем рамку под главным заголовком, если она дублируется */
body#checkout .cart-summary .cart-summary-top {
    border-bottom: none !important;
}

/* =========================================
   VERS: КАСТОМНЫЕ RADIO КНОПКИ (NEOMORPHISM) - ИСПРАВЛЕНО
   ========================================= */

/* 1. Прячем стандартный кружок */
body#checkout .form-check-input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* 2. Настраиваем текст ТОЛЬКО для радио-кнопок */
body#checkout .form-check-input[type="radio"] + .form-check-label {
    position: relative !important;
    padding-left: 32px !important; /* Место под твою кнопку 32px + отступ */
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 25px !important; 
    margin-right: 1px !important;
}

/* 3. Внешний круг (ямка) - ТОЛЬКО для радио-кнопок */
body#checkout .form-check-input[type="radio"] + .form-check-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 25px !important;
    height: 25px !important;
    background: #e0e0e0 !important;
    border-radius: 50% !important;
    box-shadow: inset -1px -2px 7px #ffffff, inset 1px 2px 4px #b0b0b0 !important;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
}

/* 4. Внутренний кружок - ТОЛЬКО для радио-кнопок */
body#checkout .form-check-input[type="radio"] + .form-check-label::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0) !important;
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
    border-radius: 50% !important;
    transition: all 0.3s ease-in-out !important;
}

/* 5. Анимация при выборе */
body#checkout .form-check-input[type="radio"]:checked + .form-check-label::after {
    background: #52c1a2 !important;
    transform: translateY(-50%) scale(1) !important;
    outline: 3px solid #f2f3f4 !important;
}

/* =========================================
   VERS: ФИКС АРТЕФАКТА НА КНОПКЕ "CONTINUE TO SHIPPING"
   ========================================= */

body#checkout button[name="confirm-addresses"] .material-icons,
body#checkout button[name="confirm-addresses"] i {
    display: none !important;
}

/* =========================================
   VERS: ФИКС БАГА НА КНОПКЕ "PROCEED TO PAYMENT"
   (Точечное удаление иконки без изменения верстки)
   ========================================= */

body#checkout button[name="confirmDeliveryOption"] .material-icons,
body#checkout button[name="confirmDeliveryOption"] i {
    display: none !important;
}

/* =========================================
   VERS: ФИКС БАГА НА КНОПКАХ (БЕЗ УЩЕРБА ДЛЯ ГЛАЗИКА)
   ========================================= */

/* 1. Убиваем белый артефакт ТОЛЬКО на кнопках продолжения/сохранения */
body#checkout button[type="submit"].btn-primary .material-icons,
body#checkout button[type="submit"].btn-primary i,
body#checkout button[name="confirmDeliveryOption"] i {
    display: none !important;
}

/* 2. Принудительно спасаем глазик пароля (возвращаем прозрачный фон и саму иконку) */
body#checkout button[data-action="show-password"],
body#checkout .input-group-btn button.btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body#checkout button[data-action="show-password"] i,
body#checkout .input-group-btn button.btn i {
    display: block !important;
    color: #86868b !important;
}

/* =========================================
   VERS: ФИКС БАГА НА КНОПКЕ "BACK TO ADDRESSES"
   ========================================= */

body#checkout button.js-back i,
body#checkout button.js-back .material-icons,
body#checkout button.btn-outline-primary i,
body#checkout button.btn-outline-primary .material-icons {
    display: none !important;
}

/* =========================================
   ШАГ 1: РАЗБИВАЕМ БЛОК (БРОНЕБОЙНЫЙ ВАРИАНТ)
   ========================================= */

/* Уничтожаем общий фон */
div.delivery-options_list,
div.delivery-options {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Превращаем каждую строку в карточку */
div.js-delivery-option {
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

/* Убиваем линию между пунктами */
div.js-delivery-option::after,
div.js-delivery-option::before {
    display: none !important;
}

/* Расставляем контент горизонтально */
label.delivery-option_label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 25px !important;
    width: 100% !important;
    margin: 0 !important;
}

div.delivery-option_left,
div.delivery_option_left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

div.delivery-option_content,
div.delivery_option_content {
    flex: 1 !important;
    text-align: right !important;
    padding-right: 20px !important;
}

div.delivery-option_price,
div.delivery_option_price {
    font-weight: 700 !important;
    min-width: 60px !important;
    text-align: right !important;
}



/* =========================================
   VERS: ЛИЧНЫЙ КАБИНЕТ (ПОЛНАЯ СБОРКА: МЕНЮ + КАРТОЧКИ + КНОПКИ)
   ========================================= */

/* --- 1. ЛЕВОЕ МЕНЮ (МЕНЮ КАБИНЕТА) --- */
.account-menu__link:not([href*="mylogout"]) {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 16px 20px 16px 25px !important;
    margin-bottom: 8px !important;
    color: #86868b !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: transparent !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
    border: none !important;
}
.account-menu__link:not([href*="mylogout"]) i.account-menu__icon {
    color: #86868b !important;
    font-size: 20px !important;
    margin-right: 18px !important;
    transition: color 0.2s ease !important;
}
.account-menu__link:not([href*="mylogout"]):hover {
    background: #f8fafc !important;
    color: #52c1a2 !important;
}
.account-menu__link:not([href*="mylogout"]):hover i.account-menu__icon {
    color: #52c1a2 !important;
}

/* Активное состояние меню */
body#identity .account-menu__link[href*="identity"],
body#addresses .account-menu__link[href*="addresses"],
body#address .account-menu__link[href*="addresses"],
body#history .account-menu__link[href*="order-history"],
body#order-detail .account-menu__link[href*="order-history"],
body#order-slip .account-menu__link[href*="credit-slip"],
body#module-ps_emailalerts-account .account-menu__link[href*="emailalerts"],
body#module-psgdpr-gdpr .account-menu__link[href*="psgdpr"] {
    background-color: #ffffff !important;
    color: #52c1a2 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}
body#identity .account-menu__link[href*="identity"] i.account-menu__icon,
body#addresses .account-menu__link[href*="addresses"] i.account-menu__icon,
body#address .account-menu__link[href*="addresses"] i.account-menu__icon,
body#history .account-menu__link[href*="order-history"] i.account-menu__icon,
body#order-detail .account-menu__link[href*="order-history"] i.account-menu__icon,
body#order-slip .account-menu__link[href*="credit-slip"] i.account-menu__icon,
body#module-ps_emailalerts-account .account-menu__link[href*="emailalerts"] i.account-menu__icon,
body#module-psgdpr-gdpr .account-menu__link[href*="psgdpr"] i.account-menu__icon {
    color: #52c1a2 !important;
}

/* Магическая полоска меню */
body#identity .account-menu__link[href*="identity"]::before,
body#addresses .account-menu__link[href*="addresses"]::before,
body#address .account-menu__link[href*="addresses"]::before,
body#history .account-menu__link[href*="order-history"]::before,
body#order-detail .account-menu__link[href*="order-history"]::before,
body#order-slip .account-menu__link[href*="credit-slip"]::before,
body#module-ps_emailalerts-account .account-menu__link[href*="emailalerts"]::before,
body#module-psgdpr-gdpr .account-menu__link[href*="psgdpr"]::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    background-color: #52c1a2 !important;
    border-radius: 16px 0 0 16px !important;
}

/* Выход (Красный) */
.account-menu__link[href*="mylogout"] {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px 16px 25px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #ef4444 !important;
    margin-top: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 16px !important;
    text-decoration: none !important;
}
.account-menu__link[href*="mylogout"] i.account-menu__icon {
    color: #ef4444 !important;
    font-size: 20px !important;
    margin-right: 18px !important;
}
.account-menu__link[href*="mylogout"]:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}
.account-menu__link[href*="mylogout"]::before { display: none !important; }

/* Скрываем Wishlist */
.account-menu__link[href*="wishlist"] { display: none !important; }


/* --- 2. КАРТОЧКИ КОНТЕНТА (ПРАВАЯ ЧАСТЬ) --- */
body#identity #content, body#addresses #content, body#address #content,
body#history #content, body#order-detail #content, body#order-slip #content,
body#module-ps_emailalerts-account #content, body#module-psgdpr-gdpr #content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px 50px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
    margin-bottom: 40px !important;
}
body#identity .page-header, body#addresses .page-header, body#address .page-header,
body#history .page-header, body#order-detail .page-header, body#order-slip .page-header,
body#module-ps_emailalerts-account .page-header, body#module-psgdpr-gdpr .page-header {
    border: none !important; margin-bottom: 25px !important; padding-bottom: 0 !important; background: transparent !important;
}
@media (max-width: 768px) {
    body#identity #content, body#addresses #content, body#address #content,
    body#history #content, body#order-detail #content, body#order-slip #content,
    body#module-ps_emailalerts-account #content, body#module-psgdpr-gdpr #content {
        padding: 25px 20px !important; border-radius: 16px !important;
    }
}


/* --- 3. ФИРМЕННЫЙ ЗЕЛЕНЫЙ ЦВЕТ ДЛЯ КНОПОК И ФОРМ --- */
body#identity #content .btn-primary, body#addresses #content .btn-primary,
body#address #content .btn-primary, body#history #content .btn-primary,
body#module-psgdpr-gdpr #content .btn-primary, body#identity #content button[type="submit"],
body#addresses #content button[type="submit"], body#address #content button[type="submit"],
body#identity #content button[data-action="show-password"] {
    background-color: #52c1a2 !important; border-color: #52c1a2 !important; color: #ffffff !important; transition: all 0.2s ease !important;
}
body#identity #content .btn-primary:hover, body#addresses #content .btn-primary:hover,
body#address #content .btn-primary:hover, body#history #content .btn-primary:hover,
body#module-psgdpr-gdpr #content .btn-primary:hover, body#identity #content button[type="submit"]:hover,
body#addresses #content button[type="submit"]:hover, body#address #content button[type="submit"]:hover,
body#identity #content button[data-action="show-password"]:hover {
    background-color: #0b9e69 !important; border-color: #0b9e69 !important;
}
body#identity #content .btn-primary i, body#addresses #content .btn-primary i,
body#address #content .btn-primary i, body#identity #content button[data-action="show-password"] i,
body#identity #content button[data-action="show-password"] svg {
    color: #ffffff !important; fill: #ffffff !important;
}
body#history #content a.btn:not(.btn-primary), body#history #content button.btn:not(.btn-primary),
body#order-detail #content a.btn:not(.btn-primary), body#module-psgdpr-gdpr #content a.btn:not(.btn-primary) {
    background-color: transparent !important; border-color: #52c1a2 !important; color: #52c1a2 !important; transition: all 0.2s ease !important;
}
body#history #content a.btn:not(.btn-primary):hover, body#history #content button.btn:not(.btn-primary):hover,
body#order-detail #content a.btn:not(.btn-primary):hover, body#module-psgdpr-gdpr #content a.btn:not(.btn-primary):hover {
    background-color: #52c1a2 !important; color: #ffffff !important;
}
body#history #content a.btn:not(.btn-primary) i, body#module-psgdpr-gdpr #content a.btn:not(.btn-primary) i {
    color: inherit !important;
}
body#identity #content a:not(.btn), body#addresses #content a:not(.btn),
body#address #content a:not(.btn), body#history #content a:not(.btn),
body#module-psgdpr-gdpr #content a:not(.btn) {
    color: #52c1a2 !important; text-decoration: none !important; transition: color 0.2s ease !important;
}
body#identity #content a:not(.btn):hover, body#addresses #content a:not(.btn):hover,
body#address #content a:not(.btn):hover, body#history #content a:not(.btn):hover,
body#module-psgdpr-gdpr #content a:not(.btn):hover {
    color: #0b9e69 !important;
}
body#identity #content input[type="radio"], body#identity #content input[type="checkbox"],
body#address #content input[type="radio"], body#address #content input[type="checkbox"] {
    accent-color: #52c1a2 !important;
}
body#identity #content .custom-radio input[type="radio"]:checked + span,
body#identity #content .custom-checkbox input[type="checkbox"]:checked + span,
body#address #content .custom-radio input[type="radio"]:checked + span,
body#address #content .custom-checkbox input[type="checkbox"]:checked + span {
    background-color: #52c1a2 !important; border-color: #52c1a2 !important;
}
body#identity #content .form-control:focus, body#address #content .form-control:focus {
    border-color: #52c1a2 !important; box-shadow: 0 0 0 2px rgba(82, 193, 162, 0.25) !important;
}

/* =========================================
   VERS: РАДИОКНОПКИ И ЧЕКБОКСЫ (ДЛЯ ОФОРМЛЕНИЯ ЗАКАЗА И РЕГИСТРАЦИИ)
   ========================================= */

/* 1. Родные радиокнопки и чекбоксы браузера */
body#checkout input[type="radio"],
body#checkout input[type="checkbox"],
body#authentication input[type="radio"],
body#authentication input[type="checkbox"] {
    accent-color: #52c1a2 !important;
}

/* 2. Кастомные кружочки и квадратики темы PrestaShop */
body#checkout .custom-radio input[type="radio"]:checked + span,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span,
body#authentication .custom-radio input[type="radio"]:checked + span,
body#authentication .custom-checkbox input[type="checkbox"]:checked + span {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}

/* 3. Легкое мятное свечение при фокусе (когда переключаешь табом) */
body#checkout .custom-radio input[type="radio"]:focus + span,
body#checkout .custom-checkbox input[type="checkbox"]:focus + span,
body#authentication .custom-radio input[type="radio"]:focus + span,
body#authentication .custom-checkbox input[type="checkbox"]:focus + span {
    box-shadow: 0 0 0 2px rgba(82, 193, 162, 0.25) !important;
}

/* =========================================
   VERS: ФИРМЕННЫЕ РАДИОКНОПКИ И ЧЕКБОКСЫ BOOTSTRAP
   ========================================= */

/* Жестко перекрашиваем активные кружочки и галочки в мятный */
.form-check-input:checked {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
}

/* Меняем синее свечение вокруг кружочка при клике на фирменное */
.form-check-input:focus {
    border-color: #52c1a2 !important;
    box-shadow: 0 0 0 4px rgba(82, 193, 162, 0.25) !important;
    outline: none !important;
}

/* =========================================
   VERS: УБИРАЕМ ЧЕРНУЮ РАМКУ ФОКУСА В КАРТОЧКЕ ТОВАРА
   ========================================= */

/* Запрещаем браузеру рисовать контур вокруг структурных блоков (div, form, section) */
body#product div:focus,
body#product div:focus-visible,
body#product div:focus-within,
body#product form:focus,
body#product form:focus-visible,
body#product form:focus-within,
body#product section:focus,
body#product section:focus-visible,
body#product section:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* На всякий случай жестко глушим outline именно для блока информации о товаре */
body#product .product-information,
body#product .product-actions,
body#product .product-variants {
    outline: none !important;
}

/* =========================================
   VERS: ИДЕАЛЬНЫЙ ВЫБОР ДОСТАВКИ (МОМЕНТАЛЬНЫЙ)
   ========================================= */

/* 1. Превращаем строки в карточки и убиваем дефолтный фон */
div.delivery-options_list, div.delivery-options {
    background: transparent !important; border: none !important;
}
div.js-delivery-option {
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    /* Оставляем плавность только для наведения */
    transition: box-shadow 0.2s ease, background-color 0.2s ease !important;
}
div.js-delivery-option::after, div.js-delivery-option::before { display: none !important; }

/* 2. Настройка контента внутри карточки */
label.delivery-option_label {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: space-between !important; padding: 18px 25px !important;
    width: 100% !important; margin: 0 !important; cursor: pointer !important;
    border: none !important;
}
div.delivery-option_left, div.delivery_option_left {
    display: flex !important; align-items: center !important; gap: 15px !important; flex: 1 !important;
}
div.delivery-option_content, div.delivery_option_content {
    flex: 1 !important; text-align: right !important; padding-right: 20px !important;
}
div.delivery-option_price, div.delivery_option_price {
    font-weight: 700 !important; min-width: 60px !important; text-align: right !important;
}

/* 3. Жестко ПРЯЧЕМ дефолтные кружочки (чтобы не мешали карточке) */
div.js-delivery-option input[type="radio"],
div.js-delivery-option .custom-radio,
div.js-delivery-option .delivery-option_check {
    position: absolute !important; opacity: 0 !important;
    width: 1px !important; height: 1px !important; z-index: -10 !important;
}

/* 4. Легкий ховер (наведение мышки) */
div.js-delivery-option:hover {
    border-color: #cbd5e0 !important;
}

/* 5. АКТИВНОЕ СОСТОЯНИЕ КАРТОЧКИ (ТОЛЬКО ЧЕРЕЗ КЛИК ДЛЯ СКОРОСТИ) */
div.js-delivery-option:has(input[type="radio"]:checked) {
    border-color: #52c1a2 !important;
    box-shadow: 0 4px 15px rgba(82, 193, 162, 0.12) !important;
    transition: 0s !important; /* УБИВАЕМ ЛЮБОЙ ЛАГ РАМКИ */
}

/* 6. Красим текст активной карточки в мятный */
div.js-delivery-option:has(input[type="radio"]:checked) .delivery-option_carrier,
div.js-delivery-option:has(input[type="radio"]:checked) .delivery_option_price,
div.js-delivery-option:has(input[type="radio"]:checked) .delivery-option_price {
    color: #52c1a2 !important;
    transition: 0s !important; /* УБИВАЕМ ЛАГ ТЕКСТА */
}

/* =========================================
   VERS: УМНЫЙ МУЛЬТИЯЗЫЧНЫЙ ПЕРЕВОД "BUY NOW"
   ========================================= */

/* 1. Прячем захардкоженный английский текст для всех */
button.vers-btn-buy {
    font-size: 0 !important; 
}

/* 2. Настраиваем шрифт для нашего нового "поверхностного" текста */
button.vers-btn-buy::after {
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* 3. ЕСЛИ ВКЛЮЧЕН АНГЛИЙСКИЙ ЯЗЫК */
html[lang="en"] button.vers-btn-buy::after,
html[lang="en-US"] button.vers-btn-buy::after {
    content: 'Buy Now' !important;
}

/* 4. ЕСЛИ ВКЛЮЧЕН РУССКИЙ ЯЗЫК */
html[lang="ru"] button.vers-btn-buy::after,
html[lang="ru-RU"] button.vers-btn-buy::after {
    content: 'В корзину' !important;
}

/* =========================================
   VERS: СКРЫВАЕМ СИСТЕМНУЮ НАДПИСЬ "LIST OF PAGES IN..."
   ========================================= */
body#cms #content > p:first-child:has(+ ul) {
    display: none !important;
}

/* =========================================
   VERS: СКРЫВАЕМ СОРТИРОВКУ И КОЛИЧЕСТВО ТОВАРОВ
   ========================================= */
#js-product-list-top {
    display: none !important;
}

/* =========================================
   VERS: ПРЕМИУМ ТАБЛИЦЫ И ОПИСАНИЕ ТОВАРА
   ========================================= */

/* 1. Делаем общий текст описания чище и воздушнее */
.product-description, .rte {
    font-family: 'Inter', sans-serif !important;
    color: #475569 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}

/* Красим заголовки внутри описания (Specification и т.д.) */
.product-description h1, .product-description h2, .product-description h3,
.rte h1, .rte h2, .rte h3 {
    color: #52c1a2 !important; /* Наш фирменный мятный */
    font-weight: 700 !important;
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    letter-spacing: -0.5px !important;
}

/* =========================================
   2. МАГИЯ ТАБЛИЦ: Убиваем рамки и делаем строки-карточки 
   ========================================= */
.product-description table, .rte table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Отступ между строками-карточками */
    border: none !important;
    background: transparent !important;
}

/* Прячем системные заголовки таблицы, если они есть */
.product-description thead, .rte thead {
    display: none !important; 
}

/* Превращаем каждую строку в парящую карточку */
.product-description table tr, .rte table tr {
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03) !important;
}

/* Эффект при наведении на строку */
.product-description table tr:hover, .rte table tr:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(82, 193, 162, 0.15) !important; /* Мятная тень */
}

/* Настраиваем ячейки (убираем вертикальные стыки) */
.product-description table td, .rte table td {
    padding: 18px 25px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
    background: #ffffff !important;
}

/* ЛЕВАЯ ячейка (Название параметра) */
.product-description table td:first-child, .rte table td:first-child {
    border-left: 1px solid #e2e8f0 !important;
    border-right: none !important; /* Стыкуем ячейки без шва */
    border-radius: 16px 0 0 16px !important; /* Скругляем только слева */
    font-weight: 600 !important;
    color: #1a1c1e !important;
    width: 50% !important;
}

/* ПРАВАЯ ячейка (Значение параметра) */
.product-description table td:last-child, .rte table td:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-radius: 0 16px 16px 0 !important; /* Скругляем только справа */
    color: #86868b !important;
    font-weight: 500 !important;
}

/* =========================================
   3. СПИСКИ И ФИЧИ (Как на скрине 3)
   ========================================= */
.product-description ul, .product-description ol,
.rte ul, .rte ol {
    padding-left: 20px !important;
    margin-bottom: 30px !important;
}

.product-description li, .rte li {
    margin-bottom: 15px !important;
    color: #1a1c1e !important;
    position: relative !important;
    padding-left: 5px !important;
}

/* Делаем точки списков фирменными */
.product-description ul li::marker, .rte ul li::marker {
    color: #52c1a2 !important;
    font-size: 1.2em !important;
}

/* Красивые ссылки в тексте (если есть) */
.product-description a, .rte a {
    color: #52c1a2 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.product-description a:hover, .rte a:hover {
    color: #0b9e69 !important;
}

/* =========================================
   VERS: ПРЕМИУМ СТАТЬИ И МАНУАЛЫ (CMS)
   ========================================= */

/* 1. Оборачиваем весь контент статьи в изолированную карточку */
.vers-manual-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 50px 60px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
    margin-bottom: 50px !important;
    /* Сразу задаем шрифты для всего внутри обертки */
    font-family: 'Inter', sans-serif !important;
    color: #475569 !important;
    line-height: 1.8 !important;
    font-size: 15.5px !important;
}

/* 2. Заголовки (теперь стилизуются только внутри карточки) */
.vers-manual-wrapper h1 {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    margin: 0 0 30px 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. Красивые подзаголовки (H2, H3) */
.vers-manual-wrapper h2, 
.vers-manual-wrapper h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    margin-top: 45px !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.5px !important;
}

.vers-manual-wrapper h2 { color: #52c1a2 !important; font-size: 24px !important; }
.vers-manual-wrapper h3 { color: #1a1c1e !important; font-size: 20px !important; }

/* 4. КАРТИНКИ: Автоматически делаем их стильными и центрируем */
.vers-manual-wrapper img {
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
    border: 1px solid #f1f5f9 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 30px auto !important; /* ЗАМЕНИЛ '0' НА 'auto' — ТЕПЕРЬ ОНИ САМИ ЦЕНТРИРУЮТСЯ */
    display: block !important;
}

/* 5. UI-БЛОКИ ДЛЯ ПРЕДУПРЕЖДЕНИЙ (Классы уникальные, их не трогаем) */
.vers-alert {
    display: flex !important;
    align-items: flex-start !important;
    padding: 20px 25px !important;
    border-radius: 16px !important;
    margin: 35px 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.vers-alert-danger {
    background-color: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    color: #991b1b !important;
}
.vers-alert-danger i {
    color: #dc2626 !important;
    font-size: 24px !important;
    margin-right: 15px !important;
    margin-top: 2px !important;
}

.vers-alert-info {
    background-color: #f0fdfa !important;
    border: 1px solid #ccfbf1 !important;
    color: #0f766e !important;
}
.vers-alert-info i {
    color: #14b8a6 !important;
    font-size: 24px !important;
    margin-right: 15px !important;
    margin-top: 2px !important;
}

/* 6. Адаптив для мобилок (сужаем отступы карточки) */
@media (max-width: 768px) {
    .vers-manual-wrapper {
        padding: 30px 20px !important;
        border-radius: 16px !important;
    }
}

/* =========================================
   VERS: ПРЕМИУМ СТРАНИЦА КОНТАКТОВ (MEEDIO STYLE) - ИСПРАВЛЕННЫЙ
   ========================================= */

/* 1. Сетка 2 колонки (Адаптирована под работу рядом с боковым меню) */
.vers-contact-premium .vers-contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important; /* Уменьшили отступ, чтобы форму не сжимало */
    align-items: start !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* 2. Левая колонка (Текст и карточки почты) */
.vers-contact-info {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.vers-contact-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 38px !important; /* Чуть уменьшили для компактности */
    font-weight: 800 !important;
    color: #1a1c1e !important;
    margin-bottom: 15px !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    border: none !important;
}

.vers-contact-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
    max-width: 95% !important;
}

/* Карточки почты (Сделали умную ширину) */
.vers-contact-emails {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
}

.vers-email-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.vers-email-card:hover {
    border-color: #52c1a2 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(82,193,162,0.08) !important;
    transform: translateY(-4px) !important;
}
.vers-email-card strong {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    color: #1a1c1e !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}
.vers-email-card a {
    font-family: 'Inter', sans-serif !important;
    color: #52c1a2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.vers-email-card a:hover { color: #0b9e69 !important; }

/* Прижимаем соцсети к низу */
.vers-contact-socials-wrapper {
    margin-top: auto !important; 
    padding-top: 10px !important;
}

/* 3. Правая колонка (Форма в карточке) */
.vers-contact-form-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 35px 25px !important; /* Сузили паддинги, чтобы полям ввода было просторно */
    box-shadow: 0 15px 40px rgba(0,0,0,0.05) !important;
}

.vers-form-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    margin-bottom: 25px !important;
    border: none !important;
}

/* =========================================
   4. МАГИЯ УСПЕШНОЙ ОТПРАВКИ (ИСЧЕЗНОВЕНИЕ)
   ========================================= */

/* Как только появляется зеленая плашка успеха, сетка становится 1-колоночной и центрируется */
.vers-contact-premium:has(.alert-success) .vers-contact-grid {
    grid-template-columns: 1fr !important; 
    max-width: 600px !important;
    margin: 40px auto !important; 
}

/* Намертво прячем всю левую часть (текст, почты, соцсети) */
.vers-contact-premium:has(.alert-success) .vers-contact-info {
    display: none !important;
}

/* Прячем заголовок формы "Write us a message" */
.vers-contact-premium:has(.alert-success) .vers-form-title {
    display: none !important;
}

/* Центрируем саму плашку успеха внутри карточки, делая ее красивым поп-апом */
.vers-contact-premium:has(.alert-success) .vers-contact-form-card {
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px !important;
}

.vers-contact-premium:has(.alert-success) .alert-success {
    margin: 0 !important;
    width: 100% !important;
}

/* 5. Адаптив для телефонов и планшетов */
@media (max-width: 1100px) {
    .vers-contact-premium .vers-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

/* =========================================
   4. КРАСИВЫЕ АЛЕРТЫ (ОШИБКА И УСПЕХ)
   ========================================= */

/* Общий стиль для плашек */
body#contact .alert,
body.page-contact .alert {
    border-radius: 12px !important;
    border: none !important;
    padding: 18px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* Зеленая плашка (Успех) - делаем сочной */
body#contact .alert-success,
body.page-contact .alert-success {
    background-color: #f0fdfa !important; 
    color: #0f766e !important; 
    box-shadow: inset 0 0 0 1px #52c1a2 !important; /* Твоя фирменная зеленая рамка */
}

/* Красная плашка (Ошибка) */
body#contact .alert-danger,
body.page-contact .alert-danger {
    background-color: #fef2f2 !important; 
    color: #991b1b !important; 
    box-shadow: inset 0 0 0 1px #f87171 !important; /* Мягкая красная рамка */
}

/* Убираем кривые иконки внутри плашек */
body#contact .alert i,
body.page-contact .alert i {
    display: none !important;
}

/* =========================================
   5. ОСТАЛЬНЫЕ СТИЛИ ФОРМЫ (Заголовки, поля, кнопка)
   ========================================= */

body#contact .page-header h1,
body.page-contact .page-header h1,
.contact-form h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    border: none !important;
    text-transform: none !important;
}

body#contact .form-control,
body.page-contact .form-control,
.contact-form .form-control {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px 16px !important;
    font-family: 'Inter', sans-serif !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    width: 100% !important;
}

body#contact .form-control:focus,
body.page-contact .form-control:focus,
.contact-form .form-control:focus {
    border-color: #52c1a2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(82, 193, 162, 0.15) !important;
}

body#contact .btn-primary,
body.page-contact .btn-primary,
.contact-form input[type="submit"],
.contact-form .btn-primary {
    background-color: #52c1a2 !important;
    border-color: #52c1a2 !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    padding: 16px 24px !important;
    width: 100% !important; 
    margin-top: 20px !important;
    box-shadow: 0 4px 15px rgba(82, 193, 162, 0.2) !important;
}

body#contact .btn-primary:hover,
body.page-contact .btn-primary:hover,
.contact-form .btn-primary:hover {
    background-color: #0b9e69 !important;
    border-color: #0b9e69 !important;
    transform: translateY(-2px) !important;
}


/* -----------------------------------------
   1. КАТАЛОГ / ГЛАВНАЯ (МАЛЕНЬКИЕ КАРТОЧКИ)
   ----------------------------------------- */
/* Настраиваем контейнер описания */
.product-miniature .vers-card-desc {
    margin-bottom: 24px !important; /* Отступ до цены */
}

/* Оставляем ТОЛЬКО ПЕРВЫЙ абзац и делаем его в 1 строчку */
.product-miniature .vers-card-desc p:first-child {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    
    color: #7d8491 !important; 
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ЖЕСТКО УБИВАЕМ всё остальное (вторые абзацы со словом "тест", картинки и т.д.) */
.product-miniature .vers-card-desc > *:not(p:first-child) {
    display: none !important;
}

/* -----------------------------------------
   2. СТРАНИЦА ТОВАРА (ПОКАЗЫВАЕМ АБСОЛЮТНО ВСЁ)
   ----------------------------------------- */
body#product .product__description-short {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    margin: 15px 0 30px 0 !important; 
    padding-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 100% !important;
}

body#product .product__description-short p {
    display: block !important;
    margin-bottom: 10px !important;
    color: #4a5568 !important; 
    line-height: 1.6 !important;
    font-size: 14.5px !important;
}

/* Картинки внутри описания под ценой */
body#product .product__description-short img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
}

/* =========================================
   VERS: ПРЕМИУМ-БЛОК ОПИСАНИЯ ТОВАРА (STORY)
   ========================================= */
.vers-product-story {
    font-family: 'Inter', sans-serif !important;
    color: #4a5568 !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
}

/* Вводный жирный текст */
.vers-story-lead {
    font-size: 16px !important;
    color: #1a1c1e !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

.vers-story-lead strong {
    color: #52c1a2 !important;
    font-weight: 700 !important;
}

/* Список возможностей (с мятными галочками) */
.vers-story-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 30px !important;
}

.vers-story-list li {
    position: relative !important;
    padding-left: 32px !important;
    margin-bottom: 12px !important;
    color: #1a1c1e !important;
    font-weight: 500 !important;
}

.vers-story-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: rgba(82, 193, 162, 0.15) !important;
    border-radius: 50% !important;
    /* Иконка галочки SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Две инфо-карточки внизу (Совместимость и Подключение) */
.vers-story-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    margin-top: 30px !important;
}

/* СТАТИЧНАЯ КАРТОЧКА (Без прыжков и ховеров) */
.vers-story-cards .story-card {
    background: #f8fafc !important; /* Мягкий серый фон */
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    cursor: default !important; /* Обычный курсор стрелочкой */
}

/* ИКОНКА (Восклицательный знак в круглом мятном фоне) */
.vers-story-cards .story-card i {
    position: relative !important;
    display: block !important;
    min-width: 32px !important; 
    width: 32px !important;
    height: 32px !important;
    background-color: rgba(82, 193, 162, 0.15) !important; /* Тот самый нежный салатовый фон */
    border-radius: 50% !important; /* МАГИЯ ЗДЕСЬ: делаем фон идеально круглым */
    border: none !important; 
    box-shadow: none !important;
    
    /* Жирный, объемный восклицательный знак */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='4' x2='12' y2='14'/%3E%3Cline x1='12' y1='19' x2='12.01' y2='19'/%3E%3C/svg%3E") !important;
    background-size: 20px !important; /* Оптимальный размер знака внутри кружка */
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Убиваем зеленую точку от старой радиокнопки */
.vers-story-cards .story-card i::after {
    display: none !important;
}

@media (max-width: 768px) {
    .vers-story-cards {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   VERS: ПРЕМИУМ СТРАНИЦА КОНТАКТОВ (MEEDIO STYLE) - ИСПРАВЛЕННЫЙ
   ========================================= */

/* 1. Сетка 2 колонки (Адаптирована под работу рядом с боковым меню) */
.vers-contact-premium .vers-contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important; /* Уменьшили отступ, чтобы форму не сжимало */
    align-items: start !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* 2. Левая колонка (Текст и карточки почты) */
.vers-contact-info {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.vers-contact-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 38px !important; /* Чуть уменьшили для компактности */
    font-weight: 800 !important;
    color: #1a1c1e !important;
    margin-bottom: 15px !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    border: none !important;
}

.vers-contact-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
    max-width: 95% !important;
}

/* Карточки почты (Сделали умную ширину) */
.vers-contact-emails {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
}

.vers-email-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.vers-email-card:hover {
    border-color: #52c1a2 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(82,193,162,0.08) !important;
    transform: translateY(-4px) !important;
}
.vers-email-card strong {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    color: #1a1c1e !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}
.vers-email-card a {
    font-family: 'Inter', sans-serif !important;
    color: #52c1a2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.vers-email-card a:hover { color: #0b9e69 !important; }

/* Прижимаем соцсети к низу */
.vers-contact-socials-wrapper {
    margin-top: 20px !important; 
    padding-top: 0 !important;
}

/* 3. Правая колонка (Форма в карточке) */
.vers-contact-form-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 35px 25px !important; /* Сузили паддинги, чтобы полям ввода было просторно */
    box-shadow: 0 15px 40px rgba(0,0,0,0.05) !important;
}

.vers-form-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    margin-bottom: 25px !important;
    border: none !important;
}

/* =========================================
   4. МАГИЯ УСПЕШНОЙ ОТПРАВКИ (ИСЧЕЗНОВЕНИЕ)
   ========================================= */

/* Как только появляется зеленая плашка успеха, сетка становится 1-колоночной и центрируется */
.vers-contact-premium:has(.alert-success) .vers-contact-grid {
    grid-template-columns: 1fr !important; 
    max-width: 600px !important;
    margin: 40px auto !important; 
}

/* Намертво прячем всю левую часть (текст, почты, соцсети) */
.vers-contact-premium:has(.alert-success) .vers-contact-info {
    display: none !important;
}

/* Прячем заголовок формы "Write us a message" */
.vers-contact-premium:has(.alert-success) .vers-form-title {
    display: none !important;
}

/* Центрируем саму плашку успеха внутри карточки, делая ее красивым поп-апом */
.vers-contact-premium:has(.alert-success) .vers-contact-form-card {
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px !important;
}

.vers-contact-premium:has(.alert-success) .alert-success {
    margin: 0 !important;
    width: 100% !important;
}

/* 5. Адаптив для телефонов и планшетов */
@media (max-width: 1100px) {
    .vers-contact-premium .vers-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

/* =========================================
   VERS: ФИКС АРТЕФАКТОВ НА СОЦСЕТЯХ (БРОНЕБОЙНЫЙ ДЛЯ ВСЕХ СТРАНИЦ)
   ========================================= */

/* 1. Возвращаем горизонтальный ряд (перебиваем Grid/Block сетку CMS) */
#cms #content ul.vers-socials,
#content ul.vers-socials {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#cms #content ul.vers-socials li,
#content ul.vers-socials li {
    margin: 0 !important;
    display: block !important;
}

/* 2. Жестко убиваем зеленые фоны и иконки документов от CMS-стилей */
#cms #content ul.vers-socials li a::before,
#cms #content ul.vers-socials li a::after,
#content ul.vers-socials li a::before,
#content ul.vers-socials li a::after {
    display: none !important;
    content: none !important;
}

/* 3. Возвращаем кнопкам соцсетей их правильный неоморфный вид */
#cms #content ul.vers-socials li a,
#content ul.vers-socials li a {
    min-height: 48px !important; /* Убиваем гигантскую высоту 112px */
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important; /* Убиваем отступы текста */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    background-image: none !important; /* Убираем длинную стрелку */
    background-color: #ffffff !important;
    
    border: 1px solid rgba(0,0,0,0) !important;
    border-radius: 10px !important;
    box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15), -6px -6px 10px -1px rgba(255,255,255,0.7) !important;
}

/* 4. Центрируем саму SVG иконку */
#cms #content ul.vers-socials li a svg,
#content ul.vers-socials li a svg {
    margin: 0 !important;
    position: static !important;
}

/* Возвращаем эффект нажатия (Neumorphism) для соцсетей в контактах */
#cms #content ul.vers-socials li a:hover,
#content ul.vers-socials li a:hover {
    box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
                inset -4px -4px 6px -1px rgba(255,255,255,0.7),
                -0.5px -0.5px 0px rgba(255,255,255,1),
                0.5px 0.5px 0px rgba(0,0,0,0.15),
                0px 12px 10px -10px rgba(0,0,0,0.05) !important;
    transform: translateY(4px) !important;
}
    
/* =========================================
   VERS: ДАШБОРД (С КИБЕР-СВЕЧЕНИЕМ ПРИ НАВЕДЕНИИ)
   ========================================= */

.vers-rules-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    margin-top: 20px !important;
    margin-bottom: 60px !important;
}

/* 1. Главный контейнер карточки (Прозрачная база) */
.vers-rule-card {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    background: transparent !important; /* Родной фон убираем, он теперь в ::after */
    border: 1px solid transparent !important; /* Прозрачный зазор 2px для лазера */
    border-radius: 24px !important;
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
}

/* 2. Вращающийся лазерный луч (на самом дне) */
.vers-rule-card::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important; left: -50% !important;
    width: 200% !important; height: 200% !important;
    background: linear-gradient(90deg, transparent, #52c1a2, #0fb68e, transparent) !important;
    animation: vers_rotation 3000ms infinite linear !important;
    z-index: -2 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* 3. Внутренняя заливка карточки (Перекрывает луч везде, кроме рамки 2px) */
.vers-rule-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important; /* Идеально ложится внутрь рамки */
    background: #ffffff !important; /* Цвет для светлой темы */
    border-radius: 22px !important; /* Скругление чуть меньше внешнего */
    z-index: -1 !important;
    transition: background-color 0.3s ease !important;
}

/* Заливка карточки для Dark Mode (автоматическая поддержка) */
[data-bs-theme="dark"] .vers-rule-card::after {
    background: #1a1c1e !important;
}

/* 4. Поднимаем весь текст и иконки над фонами */
.vers-rule-card > * {
    position: relative !important;
    z-index: 2 !important;
}

/* --- МАГИЯ ПРИ НАВЕДЕНИИ МЫШИ --- */
.vers-rule-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(82, 193, 162, 0.15) !important; /* Мягкое мятное свечение вокруг */
}

/* Включаем вращающийся лазер */
.vers-rule-card:hover::before {
    opacity: 1 !important;
}

/* Включаем красивый мягкий неоновый блик внутри карточки */
.vers-rule-card:hover .vers-rule-icon::after {
    opacity: 0.25 !important;
}

/* 5. Иконка наверху карточки */
.vers-rule-icon {
    width: 64px !important;
    height: 64px !important;
    background-color: rgba(82, 193, 162, 0.1) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
    transition: all 0.3s ease !important;
    position: relative !important; 
}

/* Скрытый неоновый источник света под иконкой */
.vers-rule-icon::after {
    content: "" !important;
    position: absolute !important;
    width: 100px !important; height: 100px !important;
    background: #52c1a2 !important;
    filter: blur(25px) !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.vers-rule-card:hover .vers-rule-icon {
    transform: scale(1.05) !important;
    background-color: #52c1a2 !important;
}

/* 6. Заголовок и текст */
.vers-rule-card h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1c1e !important;
    margin: 0 0 15px 0 !important;
    border: none !important;
    text-transform: none !important;
}

.vers-rule-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin: 0 0 25px 0 !important;
}

/* 7. Списки с мятными галочками */
.vers-rule-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: auto 0 0 0 !important;
}

.vers-rule-card ul li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 12px !important;
    color: #1a1c1e !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    font-family: 'Inter', sans-serif !important;
}

.vers-rule-card ul li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c1a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Анимация вращения луча */
@keyframes vers_rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   VERS: ФИКС ИКОНОК В ДАШБОРДЕ (ОБХОД РЕДАКТОРА)
   ========================================= */

.vers-rule-card .vers-rule-icon i {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #52c1a2 !important; 
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    transition: background-color 0.3s ease !important;
}

/* Иконка становится белой при ховере */
.vers-rule-card:hover .vers-rule-icon i {
    background-color: #ffffff !important;
}

/* Маски */
.vers-rule-icon i.icon-truck { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'%3E%3C/polygon%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E") !important; }
.vers-rule-icon i.icon-card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E") !important; }
.vers-rule-icon i.icon-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E") !important; }
.vers-rule-icon i.icon-discount { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'%3E%3C/line%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E") !important; }


/* =========================================
   VERS: ФИКСАЦИЯ СТАТИЧНОГО ДИЗАЙНА КАРТОЧЕК ДОСТАВКИ (БЕЗ ХОВЕРА)
   ========================================= */

/* 1. Делаем мягкую тень и рамку постоянными, меняем курсор */
.vers-rule-card {
    border-color: rgba(82, 193, 162, 0.3) !important;
    box-shadow: 0 15px 35px rgba(82, 193, 162, 0.1) !important; /* Мягкая мятная тень навсегда */
    transform: none !important; /* Запрещаем карточке двигаться */
    cursor: default !important; /* Курсор-стрелка вместо указательного пальца */
}

/* Отключаем "прыжок" карточки при наведении мыши */
.vers-rule-card:hover {
    transform: none !important;
    box-shadow: 0 15px 35px rgba(82, 193, 162, 0.1) !important;
}

/* 2. Делаем квадраты иконок всегда полностью мятными */
.vers-rule-card .vers-rule-icon {
    background-color: #52c1a2 !important;
}

/* Отключаем увеличение иконки при наведении */
.vers-rule-card:hover .vers-rule-icon {
    transform: none !important;
}

/* 3. Делаем сами иконки (маски) всегда белыми */
.vers-rule-card .vers-rule-icon i {
    background-color: #ffffff !important; 
}

/* =========================================
   VERS: ИДЕАЛЬНО РОВНЫЕ ШИРОКИЕ КАРТОЧКИ (ФИКС КОНФЛИКТА)
   ========================================= */

body#product .vers-feature-list .vers-spec-item {
    display: flex !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    align-items: stretch !important;
}

/* Жестко перебиваем правило из строки 2693 */
body#product .vers-feature-list .spec-left {
    flex: 0 0 240px !important; 
    width: 240px !important;
    max-width: 240px !important;
    padding: 20px 25px !important;
    border-right: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Настраиваем правую серую часть */
body#product .vers-feature-list .spec-right {
    flex: 1 !important; 
    padding: 20px 25px !important;
    padding-right: 40px !important;
    background: rgba(100, 116, 139, 0.08) !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Убираем отступ у последней карточки */
body#product .vers-feature-list .vers-spec-item:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   VERS: АДАПТИВ ДЛЯ МОБИЛОК (ДВУХЭТАЖНЫЕ КАРТОЧКИ)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Делаем карточки вертикальными (один блок под другим) */
    body#product .vers-feature-list .vers-spec-item,
    body#product .vers-spec-grid .vers-spec-item {
        flex-direction: column !important;
    }

    /* 2. Верхний блок (Иконка + Название) */
    body#product .vers-feature-list .spec-left,
    body#product .vers-spec-grid .spec-left {
        flex: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important; /* Убиваем торчащую вертикальную линию */
        border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important; /* Делаем разделитель снизу */
        padding: 16px 20px !important;
        justify-content: flex-start !important; /* Иконка и текст ровно слева */
    }

    /* 3. Нижний серый блок (Описание) */
    body#product .vers-feature-list .spec-right,
    body#product .vers-spec-grid .spec-right {
        flex: auto !important;
        width: 100% !important;
        padding: 20px !important;
        padding-bottom: 24px !important; /* Чуть больше места снизу для зеленой полосы */
        justify-content: center !important;
        text-align: center !important; /* Центрируем текст, как на твоем идеальном скрине */
    }

    /* 4. Магия: Мятная полоса переезжает сбоку на самый низ */
    body#product .vers-spec-item::after {
        width: 100% !important;
        height: 5px !important; /* Делаем ее горизонтальной толщиной 5px */
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
    }
}

/* =========================================
   VERS: ИКОНКИ СОЦСЕТЕЙ (ОБХОД РЕДАКТОРА PRESTASHOP)
   ========================================= */

/* Создаем контейнер для маски иконки */
.cms-socials .icon::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #4a5568; /* Серый цвет по умолчанию */
    transition: transform 0.5s ease, background-color 0.5s ease !important;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Анимация (иконка слегка уменьшается при клике, как у тебя было) */
.cms-socials .icon:hover::before {
    transform: scale(0.9);
}

/* --- YOUTUBE --- */
.cms-socials .cms-yt::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}
.cms-socials .cms-yt:hover::before { background-color: #ff0000 !important; }
.cms-socials .cms-yt:hover .tooltip, 
.cms-socials .cms-yt:hover .tooltip::before { background-color: #ff0000 !important; color: #ffffff !important; }

/* --- TELEGRAM --- */
.cms-socials .cms-tg::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E");
}
.cms-socials .cms-tg:hover::before { background-color: #24A1DE !important; }
.cms-socials .cms-tg:hover .tooltip, 
.cms-socials .cms-tg:hover .tooltip::before { background-color: #24A1DE !important; color: #ffffff !important; }

/* --- INSTAGRAM --- */
.cms-socials .cms-ig::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2.163c3.204,0,3.584,0.012,4.85,0.07c3.252,0.148,4.771,1.691,4.919,4.919c0.058,1.265,0.07,1.645,0.07,4.849 c0,3.205-0.012,3.584-0.07,4.849c-0.149,3.225-1.664,4.771-4.919,4.919c-1.266,0.058-1.644,0.07-4.85,0.07 s-3.584-0.012-4.849-0.07c-3.26-0.149-4.771-1.699-4.919-4.92c-0.058-1.265-0.07-1.644-0.07-4.849c0-3.204,0.012-3.584,0.07-4.849 c0.149-3.227,1.664-4.771,4.919-4.919C8.416,2.175,8.796,2.163,12,2.163 M12,0C8.741,0,8.333,0.014,7.053,0.072 C2.695,0.272,0.272,2.69,0.073,7.052C0.014,8.333,0,8.741,0,12c0,3.259,0.014,3.668,0.072,4.948c0.2,4.358,2.618,6.78,6.98,6.979 C8.333,23.986,8.741,24,12,24c3.259,0,3.668-0.014,4.948-0.072c4.354-0.2,6.782-2.618,6.98-6.98C23.986,15.668,24,15.259,24,12 c0-3.259-0.014-3.668-0.072-4.948c-0.2-4.358-2.618-6.78-6.98-6.979C15.668,0.014,15.259,0,12,0L12,0z M12,5.838 c-3.403,0-6.162,2.759-6.162,6.162c0,3.404,2.759,6.163,6.162,6.163c3.404,0,6.162-2.759,6.162-6.163 C18.162,8.597,15.404,5.838,12,5.838L12,5.838z M12,16.065c-2.246,0-4.065-1.819-4.065-4.065c0-2.246,1.819-4.065,4.065-4.065 c2.246,0,4.065,1.819,4.065,4.065C16.065,14.246,14.246,16.065,12,16.065L12,16.065z M18.406,4.155c-0.784,0-1.422,0.638-1.422,1.422 c0,0.784,0.638,1.422,1.422,1.422c0.784,0,1.422-0.638,1.422-1.422C19.828,4.793,19.19,4.155,18.406,4.155L18.406,4.155z'/%3E%3C/svg%3E");
}
.cms-socials .cms-ig:hover::before { background-color: #e4405f !important; }
.cms-socials .cms-ig:hover .tooltip, 
.cms-socials .cms-ig:hover .tooltip::before { background-color: #e4405f !important; color: #ffffff !important; }

/* 1. МЕНЯЕМ ЦВЕТ ПРОЗРАЧНЫХ КНОПОК (btn-outline-primary) НА МЯТНЫЙ */
/* Применится к кнопкам "Add new address" и "Back to Personal Information" */
.btn-outline-primary {
    --bs-btn-color: #52c1a2 !important;
    --bs-btn-border-color: #52c1a2 !important;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-hover-bg: #52c1a2 !important;
    --bs-btn-hover-border-color: #52c1a2 !important;
    --bs-btn-focus-shadow-rgb: 82, 193, 162 !important; /* Мятный в формате RGB */
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: #52c1a2 !important;
    --bs-btn-active-border-color: #52c1a2 !important;
}

/* 2. МЕНЯЕМ СИНИЙ ТЕКСТ (ССЫЛКИ) НА МЯТНЫЙ */
/* Применится к ссылкам товаров в корзине "PR v10" и другим стандартным ссылкам */
:root, body {
    --bs-link-color: #52c1a2 !important;
    --bs-link-color-rgb: 82, 193, 162 !important; /* Мятный в формате RGB для прозрачности */
    --bs-link-hover-color: #43a388 !important; /* Чуть более темный мятный для эффекта при наведении мыши */
    --bs-link-hover-color-rgb: 67, 163, 136 !important;
}

/* На всякий случай жестко переопределяем цвет конкретно для ссылок в корзине, 
если тема их перебивает своими стилями */
.cart-summary-product__link {
    color: #52c1a2 !important;
}
.cart-summary-product__link:hover {
    color: #43a388 !important;
}

/* =========================================
   VERS: ЭФФЕКТ ПЕРЕЛИВАЮЩЕГОСЯ ТЕКСТА (ГОЛОГРАММА)
   ========================================= */

/* Анимация бегущего градиента */
@keyframes vers-hologram-shine {
    to {
        background-position: 200% center;
    }
}

/* Применяем эффект к тексту и бейджам в футере при наведении */
.vers-badges-text:hover,
.vers-badge-item:hover {
    /* Красивый градиент: Мятный -> Синий -> Фиолетовый -> Розовый -> Мятный */
    background-image: linear-gradient(
        90deg, 
        #52c1a2 0%, 
        #3b82f6 25%, 
        #8b5cf6 50%, 
        #ec4899 75%, 
        #52c1a2 100%
    ) !important;
    background-size: 200% auto !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: vers-hologram-shine 2.5s linear infinite !important;
    cursor: default;
}

/* Гарантируем, что иконка внутри бейджа тоже будет переливаться */
.vers-badge-item:hover i.material-icons {
    color: transparent !important; 
}

/* =========================================
   VERS: WOW-ЭФФЕКТ ДЛЯ ИКОНОК В ШАПКЕ (ПРОФИЛЬ И КОРЗИНА)
   ========================================= */

/* 1. Настраиваем область вокруг иконок */
div#vers-custom-header .vers-right-wrapper .user-info a,
div#vers-custom-header .vers-right-wrapper .blockcart a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 1 !important;
}

/* 2. Создаем спрятанную "Ауру" (нежный мятный круг под иконкой) */
div#vers-custom-header .vers-right-wrapper .user-info a::before,
div#vers-custom-header .vers-right-wrapper .blockcart a::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(82, 193, 162, 0.15) !important; /* Прозрачный мятный */
    border-radius: 50% !important;
    z-index: -1 !important;
    transform: scale(0) !important; /* Изначально круг сжат в точку */
    opacity: 0 !important;
    /* Упругая анимация пружинки (Bouncing) */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; 
}

/* 3. Плавность для самой иконки */
div#vers-custom-header .vers-right-wrapper .user-info a i,
div#vers-custom-header .vers-right-wrapper .blockcart a i {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* =========================================
   МАГИЯ ПРИ НАВЕДЕНИИ (HOVER)
   ========================================= */

/* Аура выстреливает */
div#vers-custom-header .vers-right-wrapper .user-info a:hover::before,
div#vers-custom-header .vers-right-wrapper .blockcart a:hover::before {
    transform: scale(1) !important; 
    opacity: 1 !important;
}

/* Иконка перекрашивается, светится и чуть увеличивается */
div#vers-custom-header .vers-right-wrapper .user-info a:hover i,
div#vers-custom-header .vers-right-wrapper .blockcart a:hover i {
    color: #52c1a2 !important; /* Твой фирменный цвет */
    text-shadow: 0 0 15px rgba(82, 193, 162, 0.5) !important; /* Неоновое свечение */
    transform: scale(1.15) !important;
}

/* Вся кнопка целиком слегка всплывает вверх */
div#vers-custom-header .vers-right-wrapper .user-info a:hover,
div#vers-custom-header .vers-right-wrapper .blockcart a:hover {
    transform: translateY(-3px) !important; 
}