:root[data-theme="dark"],
:root.dark,
:root.dark-theme,
:root {
  --bg-main: #000000;
  --bg-surface: #0d0d0d;
  --bg-card: #141414;
  --text-main: #FFFFFF;
  --text-muted: #A0A0A0;
  --border-color: #222222;
  --text-primary: #FFFFFF;
  --link-color: #FFFFFF;
}
:root[data-theme="light"],
:root.light,
:root.light-theme {
  --bg-main: #FFFFFF;
  --bg-surface: #F5F5F7;
  --bg-card: #FFFFFF;
  --text-main: #111111;
  --text-muted: #555555;
  --border-color: #E5E5E5;
  --text-primary: #111111;
  --link-color: #111111;
}
body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}
a, a:visited, a:hover, a:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* ==========================================================================
   MUVIO - GLOBAL BASE STYLES & TYPOGRAPHY
   Original Native System Typography (-apple-system, BlinkMacSystemFont, "SF Pro Display", etc.)
   ========================================================================== */

/* Header Logo Image & Pure Vector SVG Styling */
.muvio-logo-svg {
    height: 28px !important;
    width: auto !important;
    display: block !important;
}
header .header-logo-img,
header .muvio-logo-svg,
.site-header-synced .header-logo-img,
.site-header-synced .muvio-logo-svg {
    height: 28px !important;
    width: auto !important;
    display: block !important;
}
.muvio-logo-mark {
    fill: #2E8B57 !important;
    transition: fill 0.2s ease;
}
.muvio-logo-letters {
    fill: #111827 !important;
    transition: fill 0.2s ease;
}
html.dark .muvio-logo-mark,
html.theme-dark .muvio-logo-mark,
.dark .muvio-logo-mark,
.theme-dark .muvio-logo-mark,
[data-theme="dark"] .muvio-logo-mark {
    fill: #FFFFFF !important;
}
html.dark .muvio-logo-letters,
html.theme-dark .muvio-logo-letters,
.dark .muvio-logo-letters,
.theme-dark .muvio-logo-letters,
[data-theme="dark"] .muvio-logo-letters {
    fill: #FFFFFF !important;
}

header img,
.header-logo-img {
    transition: opacity 0.2s ease;
}

html.dark header img,
html.dark .header-logo-img,
html.theme-dark header img,
html.theme-dark .header-logo-img,
body.dark header img,
body.dark .header-logo-img,
body.theme-dark header img,
body.theme-dark .header-logo-img,
.dark header img,
.dark .header-logo-img,
.theme-dark header img,
.theme-dark .header-logo-img,
[data-theme="dark"] header img,
[data-theme="dark"] .header-logo-img,
html.dark .header .logo img,
body.dark .header .logo img,
.dark-theme .header-logo img,
.dark-theme .header-logo-img {
    filter: brightness(0) invert(1) !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 1. Dynamic Header Logo */
html.dark .header-logo,
html.dark .logo-text,
html.dark a.logo,
html.theme-dark .header-logo,
html.theme-dark .logo-text,
html.theme-dark a.logo {
  color: #FFFFFF !important;
}
html.dark .logo img,
html.dark .header-logo img,
html.theme-dark .logo img,
html.theme-dark .header-logo img {
  filter: brightness(0) invert(1) !important;
}

/* В светлой теме (html:not(.dark)) */
html:not(.dark):not(.theme-dark) .header-logo,
html:not(.dark):not(.theme-dark) .logo-text,
html:not(.dark):not(.theme-dark) a.logo,
.header-logo,
.logo-text,
a.logo {
  color: #2E8B57 !important;
}
html:not(.dark):not(.theme-dark) .header-logo img,
html:not(.dark):not(.theme-dark) .header-logo-img,
html:not(.dark):not(.theme-dark) .logo img,
.header-logo img,
.logo img {
  filter: none !important;
}


/* 1. Base Document Canvas & All Text */
html,
body,
*,
p,
ul,
ol,
li,
input,
select,
textarea,
label,
table,
td,
th,
.font-sans,
[class*="font-sans"],
.font-brand,
[class*="font-brand"],
button,
.chamfer-btn,
.chamfer-badge,
[class*="chamfer-badge"],
.badge,
nav a,
.mobile-nav-link {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
}

/* 2. Headings (h1, h2, h3, .hero-title, catalog model names) */
h1,
h2,
h3,
.hero-title,
[id*="catalog"] h3,
.catalog-card-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Specific styling for H1 / Hero */
h1,
.hero-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

/* Specific styling for H2, H3 */
h2,
h3 {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Brand Name in header/preloader */
.header-logo-text,
.preloader-brand-title,
a[aria-label*="MUVIO"] span.font-brand {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

/* ТЁМНАЯ ТЕМА (dark) */
[data-theme="dark"],
body.dark-theme,
body.dark,
body.theme-dark,
html.dark,
html.theme-dark,
html.dark-theme {
    --bg-main: #000000;
    --bg-surface: #0d0d0d;
    --bg-card: #141414;
    --text-main: #FFFFFF !important;
    --text-muted: #A0A0A0 !important;
    --border-color: #222222;
    --bg-secondary: #0d0d0d;
    --border-subtle: #222222;
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
}

/* СВЕТЛАЯ ТЕМА (light) */
:root,
[data-theme="light"],
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) body,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) {
    --bg-main: #FFFFFF;
    --bg-surface: #F5F5F7;
    --bg-card: #FFFFFF;
    --text-main: #111111 !important;
    --text-muted: #555555 !important;
    --border-color: #E5E5E5;
    --bg-secondary: #F5F5F7;
    --border-subtle: #E5E5E5;
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
}

/* ==========================================================================
   HERO SECTION - THEME-SYNCHRONIZED (LIGHT THEME BASELINE)
   ========================================================================== */
#hero-section,
.hero-section,
.hero,
#hero {
    height: calc(100vh - 46px) !important;
    min-height: calc(100vh - 46px) !important;
    background-color: #0d120f !important;
    margin: 0 0 80px 0 !important;
    margin-bottom: 80px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
    position: relative !important;
    overflow: hidden !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
}

#hero-bg-day,
#hero-bg-night,
.hero-bg-day,
.hero-bg-night {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: right -150px center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    transition: opacity 0.6s ease-in-out !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    #hero-bg-day,
    #hero-bg-night,
    .hero-bg-day,
    .hero-bg-night {
        width: 100% !important;
        transform: none !important;
    }
}

html.dark #hero-bg-night,
html.theme-dark #hero-bg-night,
html.dark-theme #hero-bg-night,
[data-theme="dark"] #hero-bg-night { opacity: 1 !important; }

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-bg-night { opacity: 0 !important; }

/* Hero Night Layer / Headlight overlay disabled for clean crisp aima_hero */
#hero-section::after,
.hero-section::after,
.hero::after,
#hero::after,
body.dark .hero::after,
html.dark .hero::after,
[data-theme="dark"] .hero::after,
body.theme-dark .hero::after,
html.theme-dark .hero::after,
.dark .hero::after,
.theme-dark .hero::after,
body.dark .hero-section::after,
html.dark .hero-section::after,
[data-theme="dark"] .hero-section::after,
body.theme-dark .hero-section::after,
html.theme-dark .hero-section::after,
.dark .hero-section::after,
.theme-dark .hero-section::after,
body.dark #hero-section::after,
html.dark #hero-section::after,
[data-theme="dark"] #hero-section::after,
body.theme-dark #hero-section::after,
html.theme-dark #hero-section::after,
.dark #hero-section::after,
.theme-dark #hero-section::after,
body.dark #hero::after,
html.dark #hero::after,
[data-theme="dark"] #hero::after,
body.theme-dark #hero::after,
html.theme-dark #hero::after {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
}

.hero .hero-container,
.hero-section .hero-container,
#hero-section .hero-container,
.hero-container,
.hero-text-content {
    position: relative !important;
    z-index: 2 !important;
}

#hero-section .hero-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 48px !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    #hero-section .hero-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

#hero-section .hero-text-content {
    max-width: 460px !important;
}

/* ==================== 1. ФИКСАЦИЯ ШАПКИ ПРИ СКРОЛЛЕ (STICKY HEADER) ==================== */
header:not(.header-3tier),
.site-header-synced:not(.header-3tier),
.header:not(.header-3tier) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(228, 228, 231, 0.8) !important;
    box-sizing: border-box !important;
}

.header-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.header-actions,
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

.header-user-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
}

.lang-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.lang-btn {
    background: none !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    font-weight: 400 !important;
    color: #888888 !important;
    transition: all 0.2s ease !important;
}

.lang-btn.active,
.lang-btn.active-lang {
    font-weight: 700 !important;
    color: #111111 !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

html.dark .lang-btn.active,
html.theme-dark .lang-btn.active,
[data-theme="dark"] .lang-btn.active,
html.dark .lang-btn.active-lang,
html.theme-dark .lang-btn.active-lang,
[data-theme="dark"] .lang-btn.active-lang {
    color: #FFFFFF !important;
}

.lang-divider {
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 0.5 !important;
    user-select: none !important;
}

.theme-toggle-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

@media (max-width: 640px) {
    header:not(.header-3tier),
    .site-header-synced:not(.header-3tier),
    .header:not(.header-3tier),
    .header-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ==================== НАВИГАЦИОННОЕ МЕНЮ (СТРОГО ПО ЦЕНТРУ ШАПКИ) ==================== */
header:not(.header-3tier) nav,
.site-header-synced nav {
    display: flex;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    header:not(.header-3tier) nav,
    .site-header-synced nav {
        display: flex !important;
        align-items: center !important;
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    header:not(.header-3tier) nav,
    .site-header-synced nav {
        display: none !important;
    }
}

header nav a,
.site-header-synced nav a,
header .header-nav-link,
.site-header-synced .header-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* ==================== 2. ЧИТАЕМОСТЬ ТЕКСТА И ИКОНОК В СВЕТЛОЙ ТЕМЕ ==================== */
header nav a,
header .header-nav-link,
header a,
header button,
header #theme-toggle,
header #burger-btn,
header .header-user-name,
.site-header-synced nav a,
.site-header-synced .header-nav-link,
.site-header-synced a,
.site-header-synced button,
.site-header-synced #theme-toggle,
.site-header-synced #burger-btn,
.site-header-synced .header-user-name {
    color: #18181b !important;
    opacity: 1 !important;
}

header nav a svg,
header a svg,
header button svg,
header #theme-toggle svg,
header #burger-btn svg,
.site-header-synced nav a svg,
.site-header-synced a svg,
.site-header-synced button svg,
.site-header-synced #theme-toggle svg,
.site-header-synced #burger-btn svg {
    color: #18181b !important;
    stroke: #18181b !important;
    opacity: 1 !important;
}

header nav a:hover,
header .header-nav-link:hover,
.site-header-synced nav a:hover,
.site-header-synced .header-nav-link:hover {
    color: #1D5D3B !important;
}

/* ==================== ТЕМНАЯ ТЕМА: ШАПКА И КОНТРАСТ ==================== */
html.dark header:not(.header-3tier),
html.theme-dark header:not(.header-3tier),
.dark header:not(.header-3tier),
.theme-dark header:not(.header-3tier),
[data-theme="dark"] header:not(.header-3tier),
html.dark .site-header-synced:not(.header-3tier),
html.theme-dark .site-header-synced:not(.header-3tier),
.dark .site-header-synced:not(.header-3tier),
.theme-dark .site-header-synced:not(.header-3tier),
[data-theme="dark"] .site-header-synced:not(.header-3tier) {
    background: rgba(11, 14, 12, 0.92) !important;
    background-color: rgba(11, 14, 12, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(39, 39, 42, 0.8) !important;
}

html.dark header nav a,
html.dark header .header-nav-link,
html.dark header a,
html.dark header button,
html.dark header #theme-toggle,
html.dark header #burger-btn,
html.dark header .header-user-name,
html.dark .site-header-synced nav a,
html.dark .site-header-synced .header-nav-link,
html.dark .site-header-synced a,
html.dark .site-header-synced button,
html.dark .site-header-synced #theme-toggle,
html.dark .site-header-synced #burger-btn,
html.dark .site-header-synced .header-user-name,
html.theme-dark header nav a,
html.theme-dark header .header-nav-link,
html.theme-dark header a,
html.theme-dark header button,
html.theme-dark header #theme-toggle,
html.theme-dark header .header-user-name,
html.theme-dark .site-header-synced nav a,
html.theme-dark .site-header-synced .header-nav-link,
html.theme-dark .site-header-synced a,
html.theme-dark .site-header-synced button,
html.theme-dark .site-header-synced #theme-toggle,
html.theme-dark .site-header-synced .header-user-name,
.dark header a,
.dark header button,
.dark .site-header-synced a,
.dark .site-header-synced button,
[data-theme="dark"] header a,
[data-theme="dark"] header button,
[data-theme="dark"] .site-header-synced a,
[data-theme="dark"] .site-header-synced button {
    color: #f4f4f5 !important;
    opacity: 1 !important;
}

html.dark header nav a svg,
html.dark header a svg,
html.dark header button svg,
html.dark .site-header-synced a svg,
html.dark .site-header-synced button svg,
html.theme-dark header nav a svg,
html.theme-dark header a svg,
html.theme-dark header button svg,
html.theme-dark .site-header-synced a svg,
html.theme-dark .site-header-synced button svg,
.dark header a svg,
.dark header button svg,
.dark .site-header-synced a svg,
.dark .site-header-synced button svg,
[data-theme="dark"] header a svg,
[data-theme="dark"] header button svg {
    color: #f4f4f5 !important;
    stroke: #f4f4f5 !important;
    opacity: 1 !important;
}

/* Иконка солнца в темной теме - насыщенно-желтая */
html.dark #theme-toggle .sun-icon,
html.theme-dark #theme-toggle .sun-icon,
.dark #theme-toggle .sun-icon,
[data-theme="dark"] #theme-toggle .sun-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

html.dark header nav a:hover,
html.dark header .header-nav-link:hover,
html.dark .site-header-synced nav a:hover,
html.dark .site-header-synced .header-nav-link:hover,
html.theme-dark header nav a:hover,
html.theme-dark header .header-nav-link:hover,
html.theme-dark .site-header-synced nav a:hover,
html.theme-dark .site-header-synced .header-nav-link:hover {
    color: #2E8B57 !important;
}

/* ==================== ВЫПАДАЮЩЕЕ МЕГА-МЕНЮ «КАТАЛОГ» ==================== */
header,
.site-header-synced,
.header,
.header-container,
header nav,
.site-header-synced nav {
    overflow: visible !important;
}

.catalog-dropdown-wrap {
    position: relative !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 1. Плавное выпадение и мягкий сдвиг меню */
.catalog-mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    padding-top: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
    z-index: 1000 !important;
    width: 470px !important;
    box-sizing: border-box !important;
}

.catalog-dropdown-wrap:hover .catalog-mega-menu,
.group\/catalog:hover .catalog-mega-menu,
.catalog-mega-menu.open,
.catalog-dropdown-wrap.open .catalog-mega-menu,
.catalog-mega-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Светлая тема: чистый белый фон (#FFFFFF), тонкая рамка 1px solid rgba(0,0,0,0.06), мягкая глубокая тень */
.catalog-mega-menu-inner {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 4px 14px -2px rgba(15, 23, 42, 0.06) !important;
    padding: 16px 18px 14px !important;
    color: #111111 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Тёмная тема: глубокий графит (#080A0C / #111418), рамка 1px solid rgba(255,255,255,0.1), текст чисто белый (#FFFFFF) */
html.dark .catalog-mega-menu-inner,
html.theme-dark .catalog-mega-menu-inner,
body.dark .catalog-mega-menu-inner,
body.theme-dark .catalog-mega-menu-inner,
.dark .catalog-mega-menu-inner,
.theme-dark .catalog-mega-menu-inner,
[data-theme="dark"] .catalog-mega-menu-inner {
    background: #080A0C !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    color: #FFFFFF !important;
}

header nav .catalog-mega-menu a,
.site-header-synced nav .catalog-mega-menu a,
.catalog-mega-menu a {
    text-decoration: none !important;
}

/* Второстепенные заголовки блоков («ЕЛЕКТРОТРАНСПОРТ», «МАГАЗИН АКСЕСУАРІВ») - неяркий приглушенный сланцевый (#94A3B8) уменьшенным капсом */
.catalog-section-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #94A3B8 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html.dark .catalog-section-title,
html.theme-dark .catalog-section-title,
[data-theme="dark"] .catalog-section-title {
    color: #94A3B8 !important;
}

/* Заголовки категорий: Електроскутери, Електровелосипеди */
.catalog-category-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #111111 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html.dark .catalog-category-label,
html.theme-dark .catalog-category-label,
[data-theme="dark"] .catalog-category-label {
    color: #FFFFFF !important;
}

/* Ссылки брендов транспорта (Crosser, Aima, Ado, Like.Bike) */
.catalog-link-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: rgba(15, 23, 42, 0.02) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 4px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

.catalog-link-card:hover {
    background: rgba(29, 93, 59, 0.08) !important;
    border-color: rgba(29, 93, 59, 0.3) !important;
}

html.dark .catalog-link-card,
html.theme-dark .catalog-link-card,
[data-theme="dark"] .catalog-link-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .catalog-link-card:hover,
html.theme-dark .catalog-link-card:hover,
[data-theme="dark"] .catalog-link-card:hover {
    background: rgba(29, 93, 59, 0.15) !important;
    border-color: rgba(29, 93, 59, 0.4) !important;
}

.catalog-link-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    transition: color 0.15s ease !important;
}

html.dark .catalog-link-name,
html.theme-dark .catalog-link-name,
[data-theme="dark"] .catalog-link-name {
    color: #FFFFFF !important;
}

.catalog-link-card:hover .catalog-link-name {
    color: #2E8B57 !important;
}

.catalog-link-arrow {
    width: 14px !important;
    height: 14px !important;
    color: #94A3B8 !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.catalog-link-card:hover .catalog-link-arrow {
    transform: translateX(3px) !important;
    color: #2E8B57 !important;
}

/* Карточки аксессуаров (Шолом, Тримач для телефону, Колодки, Знімний АКБ) */
.catalog-accessory-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: rgba(15, 23, 42, 0.02) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

.catalog-accessory-card:hover {
    background: rgba(29, 93, 59, 0.08) !important;
    border-color: rgba(29, 93, 59, 0.3) !important;
}

html.dark .catalog-accessory-card,
html.theme-dark .catalog-accessory-card,
[data-theme="dark"] .catalog-accessory-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .catalog-accessory-card:hover,
html.theme-dark .catalog-accessory-card:hover,
[data-theme="dark"] .catalog-accessory-card:hover {
    background: rgba(29, 93, 59, 0.15) !important;
    border-color: rgba(29, 93, 59, 0.4) !important;
}

.catalog-accessory-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    transition: color 0.15s ease !important;
}

html.dark .catalog-accessory-name,
html.theme-dark .catalog-accessory-name,
[data-theme="dark"] .catalog-accessory-name {
    color: #FFFFFF !important;
}

.catalog-accessory-card:hover .catalog-accessory-name {
    color: #2E8B57 !important;
}

/* ==================== 2. СТУПЕНЧАТАЯ АНИМАЦИЯ (STAGGER REVEAL) ==================== */
.catalog-mega-menu .menu-item {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.catalog-dropdown-wrap:hover .catalog-mega-menu .menu-item,
.group\/catalog:hover .catalog-mega-menu .menu-item,
.catalog-mega-menu.open .menu-item,
.catalog-dropdown-wrap.open .catalog-mega-menu .menu-item,
.catalog-mega-menu:hover .menu-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Ступенчатые задержки по классам и по очереди */
.catalog-dropdown-wrap:hover .menu-item-1,
.group\/catalog:hover .menu-item-1,
.catalog-mega-menu.open .menu-item-1 { transition-delay: 0.03s !important; }

.catalog-dropdown-wrap:hover .menu-item-2,
.group\/catalog:hover .menu-item-2,
.catalog-mega-menu.open .menu-item-2 { transition-delay: 0.06s !important; }

.catalog-dropdown-wrap:hover .menu-item-3,
.group\/catalog:hover .menu-item-3,
.catalog-mega-menu.open .menu-item-3 { transition-delay: 0.09s !important; }

.catalog-dropdown-wrap:hover .menu-item-4,
.group\/catalog:hover .menu-item-4,
.catalog-mega-menu.open .menu-item-4 { transition-delay: 0.12s !important; }

.catalog-dropdown-wrap:hover .menu-item-5,
.group\/catalog:hover .menu-item-5,
.catalog-mega-menu.open .menu-item-5 { transition-delay: 0.15s !important; }

.catalog-dropdown-wrap:hover .menu-item-6,
.group\/catalog:hover .menu-item-6,
.catalog-mega-menu.open .menu-item-6 { transition-delay: 0.18s !important; }

.catalog-dropdown-wrap:hover .menu-item-7,
.group\/catalog:hover .menu-item-7,
.catalog-mega-menu.open .menu-item-7 { transition-delay: 0.21s !important; }

.catalog-dropdown-wrap:hover .menu-item-8,
.group\/catalog:hover .menu-item-8,
.catalog-mega-menu.open .menu-item-8 { transition-delay: 0.24s !important; }

.catalog-dropdown-wrap:hover .menu-item-9,
.group\/catalog:hover .menu-item-9,
.catalog-mega-menu.open .menu-item-9 { transition-delay: 0.27s !important; }

.catalog-dropdown-wrap:hover .menu-item-10,
.group\/catalog:hover .menu-item-10,
.catalog-mega-menu.open .menu-item-10 { transition-delay: 0.30s !important; }

.catalog-dropdown-wrap:hover .menu-item-11,
.group\/catalog:hover .menu-item-11,
.catalog-mega-menu.open .menu-item-11 { transition-delay: 0.33s !important; }

.catalog-dropdown-wrap:hover .menu-item-12,
.group\/catalog:hover .menu-item-12,
.catalog-mega-menu.open .menu-item-12 { transition-delay: 0.36s !important; }

.catalog-dropdown-wrap:hover .menu-item-13,
.group\/catalog:hover .menu-item-13,
.catalog-mega-menu.open .menu-item-13 { transition-delay: 0.39s !important; }

/* Поддержка :nth-child селекторов для каскада */
.catalog-dropdown-wrap:hover .catalog-mega-menu-inner .menu-item:nth-child(1),
.group\/catalog:hover .catalog-mega-menu-inner .menu-item:nth-child(1),
.catalog-menu.open .menu-item:nth-child(1),
.catalog-mega-menu.open .menu-item:nth-child(1) { transition-delay: 0.04s !important; }

.catalog-dropdown-wrap:hover .catalog-mega-menu-inner .menu-item:nth-child(2),
.group\/catalog:hover .catalog-mega-menu-inner .menu-item:nth-child(2),
.catalog-menu.open .menu-item:nth-child(2),
.catalog-mega-menu.open .menu-item:nth-child(2) { transition-delay: 0.08s !important; }

.catalog-dropdown-wrap:hover .catalog-mega-menu-inner .menu-item:nth-child(3),
.group\/catalog:hover .catalog-mega-menu-inner .menu-item:nth-child(3),
.catalog-menu.open .menu-item:nth-child(3),
.catalog-mega-menu.open .menu-item:nth-child(3) { transition-delay: 0.12s !important; }

.catalog-dropdown-wrap:hover .catalog-mega-menu-inner .menu-item:nth-child(4),
.group\/catalog:hover .catalog-mega-menu-inner .menu-item:nth-child(4),
.catalog-menu.open .menu-item:nth-child(4),
.catalog-mega-menu.open .menu-item:nth-child(4) { transition-delay: 0.16s !important; }

/* ==================== 3. ИКОНКА СМЕНЫ ТЕМЫ (ЛУНА / СОЛНЦЕ) ==================== */
.moon-icon {
    display: block !important;
}
.sun-icon {
    display: none !important;
}

html.dark .moon-icon,
html.theme-dark .moon-icon,
.dark .moon-icon,
.theme-dark .moon-icon,
[data-theme="dark"] .moon-icon {
    display: none !important;
}

html.dark .sun-icon,
html.theme-dark .sun-icon,
.dark .sun-icon,
.theme-dark .sun-icon,
[data-theme="dark"] .sun-icon {
    display: block !important;
}

#hero-section .hero-text-content h1,
#hero-section .hero-text-content p,
#hero-section p.hero-subtitle {
    color: #FFFFFF !important;
}

#hero-section::before,
.hero-section::before,
#hero::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ==================== HERO SECTION STRICT WHITE TEXT & STYLES ==================== */
#hero-section,
.hero-section {
    color: #FFFFFF !important;
}

#hero-section h1,
#hero-section h1 *,
.hero-section h1,
.hero-section h1 *,
#hero-section .hero-text-content h1,
#hero-section .hero-text-content h1 *,
.hero-text-content h1,
.hero-text-content h1 * {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
    filter: none !important;
}

#hero-section p,
#hero-section p *,
.hero-section p,
.hero-section p *,
#hero-section .hero-subtitle,
#hero-section .hero-subtitle *,
#hero-section .hero-text-content p,
#hero-section .hero-text-content p *,
.hero-text-content p,
.hero-text-content p * {
    color: #FFFFFF !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7) !important;
    filter: none !important;
}

#hero-section .hero-calc-btn {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#hero-section .hero-calc-btn:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   CATALOG SECTION - THEME-SYNCHRONIZED
   ========================================================================== */
#catalog {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
}

#catalog h1,
#catalog h2,
#catalog h3 {
    color: var(--text-main) !important;
}

/* ==========================================================================
   CATALOG FLEET CARDS - DAY / NIGHT HEADLIGHT CROSSFADE (CINEMATIC FLARE)
   ========================================================================== */
.fleet-card [class*="overflow-hidden"],
.tech-card [class*="overflow-hidden"],
.vehicle-card [class*="overflow-hidden"],
#catalog [class*="overflow-hidden"] {
    position: relative !important;
    overflow: hidden !important;
}

.fleet-card .img-day,
.tech-card .img-day,
.vehicle-card .img-day,
#catalog .img-day,
.img-day,
.scooter-img-day {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    transition: opacity 0.15s ease-in-out !important;
    will-change: opacity;
}

.fleet-card .img-night,
.tech-card .img-night,
.vehicle-card .img-night,
#catalog .img-night,
.img-night,
.scooter-img-night {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-in-out !important;
    will-change: opacity;
}

/* Dark Theme: Day photo crossfades out immediately */
html.dark .img-day,
html.dark .scooter-img-day,
html.theme-dark .img-day,
html.theme-dark .scooter-img-day,
.dark .img-day,
.dark .scooter-img-day,
.theme-dark .img-day,
.theme-dark .scooter-img-day,
[data-theme="dark"] .img-day,
[data-theme="dark"] .scooter-img-day {
    opacity: 0 !important;
}

/* Dark Theme: Night photo with glowing headlights crossfades in immediately */
html.dark .img-night,
html.dark .scooter-img-night,
html.theme-dark .img-night,
html.theme-dark .scooter-img-night,
.dark .img-night,
.dark .scooter-img-night,
.theme-dark .img-night,
.theme-dark .scooter-img-night,
[data-theme="dark"] .img-night,
[data-theme="dark"] .scooter-img-night {
    opacity: 1 !important;
}

/* Header Logo: Solid Monolithic #1D5D3B geometry */
.header-logo-wrap svg,
.header-logo-wrap svg path {
    color: #1D5D3B !important;
    fill: #1D5D3B !important;
    stroke: none !important;
    filter: none !important;
}

/* ==========================================================================
   LANGUAGE SWITCHER (UA | EN) - SMOOTH TRANSITION & WEIGHT TOGGLE
   ========================================================================== */
.lang-switch-btn,
#authLangUa,
#authLangEn {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease, font-weight 0.2s ease, opacity 0.2s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Inactive state: 400 normal weight, muted gray #888888 */
.lang-switch-btn:not(.active-lang):not(.active),
#authLangUa:not(.active-lang):not(.active),
#authLangEn:not(.active-lang):not(.active),
.lang-btn:not(.active-lang):not(.active) {
    font-weight: 400 !important;
    color: #888888 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

html.dark .lang-switch-btn:not(.active-lang):not(.active),
html.dark #authLangUa:not(.active-lang):not(.active),
html.dark #authLangEn:not(.active-lang):not(.active),
html.dark .lang-btn:not(.active-lang):not(.active),
html.theme-dark .lang-switch-btn:not(.active-lang):not(.active),
html.theme-dark #authLangUa:not(.active-lang):not(.active),
html.theme-dark #authLangEn:not(.active-lang):not(.active),
html.theme-dark .lang-btn:not(.active-lang):not(.active),
[data-theme="dark"] .lang-switch-btn:not(.active-lang):not(.active),
[data-theme="dark"] #authLangUa:not(.active-lang):not(.active),
[data-theme="dark"] #authLangEn:not(.active-lang):not(.active),
[data-theme="dark"] .lang-btn:not(.active-lang):not(.active) {
    color: #888888 !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Active state: 700 bold weight, high contrast, strictly NO underline */
.lang-switch-btn.active-lang,
.lang-switch-btn.active,
#authLangUa.active-lang,
#authLangUa.active,
#authLangEn.active-lang,
#authLangEn.active,
.lang-btn.active-lang,
.lang-btn.active {
    font-weight: 700 !important;
    color: #111111 !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

html.dark .lang-switch-btn.active-lang,
html.dark .lang-switch-btn.active,
html.dark #authLangUa.active-lang,
html.dark #authLangUa.active,
html.dark #authLangEn.active-lang,
html.dark #authLangEn.active,
html.dark .lang-btn.active-lang,
html.dark .lang-btn.active,
html.theme-dark .lang-switch-btn.active-lang,
html.theme-dark .lang-switch-btn.active,
html.theme-dark #authLangUa.active-lang,
html.theme-dark #authLangUa.active,
html.theme-dark #authLangEn.active-lang,
html.theme-dark #authLangEn.active,
html.theme-dark .lang-btn.active-lang,
html.theme-dark .lang-btn.active,
[data-theme="dark"] .lang-switch-btn.active-lang,
[data-theme="dark"] .lang-switch-btn.active,
[data-theme="dark"] #authLangUa.active-lang,
[data-theme="dark"] #authLangUa.active,
[data-theme="dark"] #authLangEn.active-lang,
[data-theme="dark"] #authLangEn.active,
[data-theme="dark"] .lang-btn.active-lang,
[data-theme="dark"] .lang-btn.active {
    color: #ffffff !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

.lang-switch-btn:hover,
#authLangUa:hover,
#authLangEn:hover {
    color: #1D5D3B !important;
    opacity: 1 !important;
}

html.dark .lang-switch-btn:hover,
html.dark #authLangUa:hover,
html.dark #authLangEn:hover,
html.theme-dark .lang-switch-btn:hover,
html.theme-dark #authLangUa:hover,
html.theme-dark #authLangEn:hover {
    color: #2E8B57 !important;
}

/* ==========================================================================
   MINIMALIST PRELOADER / SPLASH SCREEN (M-LOGO ONLY)
   ========================================================================== */
#page-preloader {
    background-color: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-preloader.hidden,
#page-preloader[data-hidden="true"],
#page-preloader.opacity-0,
#page-preloader.preloader-hidden,
#page-preloader.pointer-events-none {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}

#page-preloader .preloader-m-logo {
    color: #1D5D3B !important;
    fill: #1D5D3B !important;
}

html.dark #page-preloader,
html.theme-dark #page-preloader,
[data-theme="dark"] #page-preloader {
    background-color: #000000 !important;
}

html.dark #page-preloader .preloader-m-logo,
html.theme-dark #page-preloader .preloader-m-logo,
[data-theme="dark"] #page-preloader .preloader-m-logo {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: none !important;
    filter: none !important;
}

/* ==========================================================================
   ЛОГОТИП В ПОДВАЛЕ (FOOTER LOGO)
   ========================================================================== */
.footer-logo-img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    filter: var(--ft-logo-filter, brightness(0) invert(1)) !important;
    transition: opacity 0.2s ease !important;
}

.footer-logo:hover .footer-logo-img,
.footer-brand:hover .footer-logo-img {
    opacity: 0.85 !important;
}

.footer-logo-svg,
.footer-brand svg {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    transition: opacity 0.2s ease;
}

.footer-brand:hover .footer-logo-svg {
    opacity: 0.9;
}

.footer-logo-mark {
    fill: #2E8B57 !important;
    transition: fill 0.2s ease;
}

.footer-logo-letters {
    fill: #FFFFFF !important;
    transition: fill 0.2s ease;
}

/* ==========================================================================
   PROMO SHOWCASE SECTIONS (APPLE-STYLE Z-PATTERN) & VEHICLE ORIENTATION
   ========================================================================== */
.promo-section {
    margin-top: 100px !important;
    padding: 100px 0 !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    width: 100% !important;
}

.promo-section-alt {
    margin-top: 0 !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    width: 100% !important;
}

.promo-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 580px;
}

.promo-col-bike {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
}

.promo-col-bike-text {
    flex: 0 0 500px !important;
    max-width: 500px !important;
    padding-left: 32px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.promo-col-scooter-text {
    flex: 0 0 500px !important;
    max-width: 500px !important;
    padding-right: 32px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.promo-col-scooter {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
}

.promo-bike-img,
.bike-promo img,
.promo-bike-section img,
.promo-scooter-img,
img.promo-scooter-img,
.scooter-promo img,
.promo-scooter-section img {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    mask: none !important;
    -webkit-mask: none !important;
    box-shadow: none !important;
    drop-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    pointer-events: none;
}

.promo-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible !important;
}
.promo-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.promo-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible !important;
}
.promo-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1023px) {
    .promo-container {
        flex-direction: column !important;
        text-align: center !important;
        padding: 0 24px !important;
        gap: 36px !important;
        min-height: auto;
    }
    .promo-col-bike,
    .promo-col-scooter {
        width: 100% !important;
        justify-content: center !important;
    }
    .promo-col-bike-text,
    .promo-col-scooter-text {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .promo-fade-text {
        align-items: center !important;
        text-align: center !important;
    }
    .promo-bike-img {
        height: auto !important;
        max-height: 380px !important;
        width: 100% !important;
        max-width: 500px !important;
        margin-left: 0 !important;
        margin: 0 auto !important;
    }
    .promo-scooter-img,
    img.promo-scooter-img {
        height: auto !important;
        max-height: 380px !important;
        width: 100% !important;
        max-width: 500px !important;
        margin-right: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
    }
    .promo-slide-left,
    .promo-slide-right {
        justify-content: center !important;
    }
}

/* ==========================================================================
   1. STRICT LIGHT MODE HIGH CONTRAST TYPOGRAPHY & CATALOG ENGINE
   ========================================================================== */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) section:not(#hero-section):not(.hero) h1,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) h2:not(#hero-section *),
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) h3:not(#hero-section *),
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-title,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .section-title,
[data-theme="light"] section:not(#hero-section):not(.hero) h1,
[data-theme="light"] h2:not(#hero-section *),
[data-theme="light"] h3:not(#hero-section *),
[data-theme="light"] .catalog-title,
[data-theme="light"] .section-title {
    color: #111111 !important; /* Глибокий нейтральний темний колір */
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-subtitle,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) p:not(#hero-section *):not(.hero *),
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .section-desc,
[data-theme="light"] .catalog-subtitle,
[data-theme="light"] p:not(#hero-section *):not(.hero *),
[data-theme="light"] .section-desc {
    color: #555555 !important; /* Чіткий темно-сірий читабельний колір */
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .section-badge,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-badge,
[data-theme="light"] .section-badge,
[data-theme="light"] .catalog-badge {
    color: #047857 !important; /* Читаемый насыщенный зеленый для бейджа */
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .section-badge span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-badge span,
[data-theme="light"] .section-badge span,
[data-theme="light"] .catalog-badge span {
    color: #047857 !important;
}

/* ==========================================================================
   2. STRICT DARK MODE TYPOGRAPHY SEPARATION
   ========================================================================== */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark .catalog-title,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark .catalog-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .catalog-title,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark .catalog-title {
    color: #FFFFFF !important;
}

html.dark .catalog-subtitle,
html.dark p,
html.dark .section-desc,
html.theme-dark .catalog-subtitle,
html.theme-dark p,
html.theme-dark .section-desc,
[data-theme="dark"] .catalog-subtitle,
[data-theme="dark"] p,
[data-theme="dark"] .section-desc,
body.dark .catalog-subtitle,
body.dark p,
body.dark .section-desc {
    color: #A0A0A0 !important;
}

html.dark .section-badge,
html.dark .catalog-badge,
html.theme-dark .section-badge,
html.theme-dark .catalog-badge,
[data-theme="dark"] .section-badge,
[data-theme="dark"] .catalog-badge {
    color: #2E8B57 !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .section-badge span,
html.dark .catalog-badge span,
html.theme-dark .section-badge span,
html.theme-dark .catalog-badge span {
    color: #D4D4D8 !important;
}

/* ==========================================================================
   3. CATALOG SECTION, SHOWCASE & CARDS IN LIGHT MODE
   ========================================================================== */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) body,
[data-theme="light"] body {
    background-color: #F8FAFC !important;
    color: #111111 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) main#catalog,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogShowcaseView,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailView,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogDetailView,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailModal,
[data-theme="light"] #catalog,
[data-theme="light"] main#catalog,
[data-theme="light"] #catalogShowcaseView,
[data-theme="light"] #modelDetailView,
[data-theme="light"] #catalogDetailView,
[data-theme="light"] #modelDetailModal {
    background-color: #F8FAFC !important;
    color: #111111 !important;
    border-color: #E2E8F0 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog .border-x,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog .border-b,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog .border-t,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog [class*="border-white"],
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogShowcaseView [class*="border-white"],
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailView [class*="border-white"],
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailView [class*="divide-white"] {
    border-color: #E2E8F0 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog .text-white,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogShowcaseView .text-white,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailView .text-white,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogDetailView .text-white {
    color: #111111 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog .text-zinc-400,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalog .text-zinc-300,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogShowcaseView .text-zinc-400,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogShowcaseView .text-zinc-300,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailView .text-zinc-400,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #modelDetailView .text-zinc-300 {
    color: #555555 !important;
}

/* Model cards and showcase cards in Light Mode */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-card h3,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .model-title,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-card-title,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-showcase-card h3,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogGrid h3,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-card h3,
[data-theme="light"] .catalog-card h3,
[data-theme="light"] .model-title,
[data-theme="light"] .catalog-card-title,
[data-theme="light"] .vehicle-showcase-card h3,
[data-theme="light"] #catalogGrid h3,
[data-theme="light"] .vehicle-card h3 {
    color: #111111 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-card .price-badge,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .model-price,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-showcase-card .price-badge,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-card span[class*="rounded-full"],
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogGrid span[class*="rounded-full"],
[data-theme="light"] .catalog-card .price-badge,
[data-theme="light"] .model-price,
[data-theme="light"] .vehicle-showcase-card .price-badge,
[data-theme="light"] .vehicle-card span[class*="rounded-full"],
[data-theme="light"] #catalogGrid span[class*="rounded-full"],
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-showcase-card span[class*="border"] {
    color: #111111 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-card .price-badge span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-showcase-card .price-badge span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .vehicle-card span[class*="rounded-full"] span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #catalogGrid span[class*="rounded-full"] span {
    color: #111111 !important;
}

/* ==========================================================================
   4. FILTER TABS (LIGHT & DARK THEMES)
   ========================================================================= */
/* Inactive Tabs in Light Mode */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-all:not(.active),
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-scooter:not(.active),
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-bike:not(.active),
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-tab:not(.active),
[data-theme="light"] #tab-all:not(.active),
[data-theme="light"] #tab-scooter:not(.active),
[data-theme="light"] #tab-bike:not(.active),
[data-theme="light"] .catalog-tab:not(.active) {
    color: #111111 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-all:not(.active) span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-scooter:not(.active) span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-bike:not(.active) span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-tab:not(.active) span,
[data-theme="light"] #tab-all:not(.active) span,
[data-theme="light"] #tab-scooter:not(.active) span,
[data-theme="light"] #tab-bike:not(.active) span,
[data-theme="light"] .catalog-tab:not(.active) span {
    color: #111111 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-all:not(.active):hover,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-scooter:not(.active):hover,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-bike:not(.active):hover,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-tab:not(.active):hover,
[data-theme="light"] #tab-all:not(.active):hover,
[data-theme="light"] #tab-scooter:not(.active):hover,
[data-theme="light"] #tab-bike:not(.active):hover,
[data-theme="light"] .catalog-tab:not(.active):hover {
    color: #111111 !important;
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

/* Active Tab in Light Mode */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-all.active,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-scooter.active,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-bike.active,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-tab.active,
[data-theme="light"] #tab-all.active,
[data-theme="light"] #tab-scooter.active,
[data-theme="light"] #tab-bike.active,
[data-theme="light"] .catalog-tab.active {
    color: #FFFFFF !important;
    background-color: #111111 !important;
    border: 1px solid #111111 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-all.active span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-scooter.active span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #tab-bike.active span,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .catalog-tab.active span,
[data-theme="light"] #tab-all.active span,
[data-theme="light"] #tab-scooter.active span,
[data-theme="light"] #tab-bike.active span,
[data-theme="light"] .catalog-tab.active span {
    color: #FFFFFF !important;
}

/* Inactive Tabs in Dark Mode */
html.dark #tab-all:not(.active),
html.dark #tab-scooter:not(.active),
html.dark #tab-bike:not(.active),
html.theme-dark #tab-all:not(.active),
html.theme-dark #tab-scooter:not(.active),
html.theme-dark #tab-bike:not(.active),
[data-theme="dark"] #tab-all:not(.active),
[data-theme="dark"] #tab-scooter:not(.active),
[data-theme="dark"] #tab-bike:not(.active),
html.dark .catalog-tab:not(.active) {
    color: #94A3B8 !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark #tab-all:not(.active) span,
html.dark #tab-scooter:not(.active) span,
html.dark #tab-bike:not(.active) span,
html.theme-dark #tab-all:not(.active) span,
html.theme-dark #tab-scooter:not(.active) span,
html.theme-dark #tab-bike:not(.active) span,
html.dark .catalog-tab:not(.active) span {
    color: #94A3B8 !important;
}

html.dark #tab-all:not(.active):hover,
html.dark #tab-scooter:not(.active):hover,
html.dark #tab-bike:not(.active):hover,
html.dark .catalog-tab:not(.active):hover {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

html.dark #tab-all:not(.active):hover span,
html.dark #tab-scooter:not(.active):hover span,
html.dark #tab-bike:not(.active):hover span,
html.dark .catalog-tab:not(.active):hover span {
    color: #FFFFFF !important;
}

/* Active Tab in Dark Mode */
html.dark #tab-all.active,
html.dark #tab-scooter.active,
html.dark #tab-bike.active,
html.theme-dark #tab-all.active,
html.theme-dark #tab-scooter.active,
html.theme-dark #tab-bike.active,
[data-theme="dark"] #tab-all.active,
[data-theme="dark"] #tab-scooter.active,
[data-theme="dark"] #tab-bike.active,
html.dark .catalog-tab.active {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
}

html.dark #tab-all.active span,
html.dark #tab-scooter.active span,
html.dark #tab-bike.active span,
html.theme-dark #tab-all.active span,
html.theme-dark #tab-scooter.active span,
html.theme-dark #tab-bike.active span,
html.dark .catalog-tab.active span {
    color: #000000 !important;
}

/* ==========================================================================
   5. HERO PHOTO TEXT & BRAND GREEN ACTION BUTTON RETENTION
   ========================================================================== */
#hero-section h1,
#hero-section p,
#hero-section .hero-subtitle,
.hero-text-content h1,
.hero-text-content p,
.hero h1,
.hero p {
    color: #FFFFFF !important;
}

.bg-\[\#1D5D3B\] p,
.bg-\[\#1D5D3B\] h3,
.bg-\[\#1D5D3B\] span,
.muvio-btn-primary,
.muvio-btn-primary span,
.muvio-btn-primary i,
.chamfer-btn.bg-\[\#1D5D3B\],
[class*="bg-[#1D5D3B]"] p,
[class*="bg-[#1D5D3B]"] h3,
[class*="bg-[#1D5D3B]"] span,
a.bg-\[\#1D5D3B\],
a.bg-\[\#1D5D3B\] span,
a.bg-\[\#1D5D3B\],
a.bg-\[\#1D5D3B\] span,
button.bg-\[\#1D5D3B\],
button.bg-\[\#1D5D3B\] span {
    color: #FFFFFF !important;
}

/* ==========================================================================
   RENTAL CALCULATOR (TESLA STUDIO STYLE) - LIGHT & DARK THEME ENGINE
   ========================================================================== */

/* Calculator Section Canvas */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #calculator,
[data-theme="light"] #calculator {
    background-color: #F8FAFC !important;
    color: #111827 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #calculator .border-x,
[data-theme="light"] #calculator .border-x {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Step Headers: Crisp Graphite color #111827 !important */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #calculator label,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-step-label,
[data-theme="light"] #calculator label,
[data-theme="light"] .calc-step-label {
    color: #111827 !important;
    font-weight: 700 !important;
}

html:not(.dark):not(.theme-dark):not([data-theme="dark"]) #calculator .text-zinc-300,
[data-theme="light"] #calculator .text-zinc-300 {
    color: #111827 !important;
}

/* Tesla Container (Outer Box) */
html:not(.dark) .calc-tesla-container,
html:not(.theme-dark) .calc-tesla-container,
[data-theme="light"] .calc-tesla-container {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
}

/* Calculator Top Header Clearance */
#calculator,
.calculator-section {
    padding-top: 100px !important;
}

/* Vehicle Preview Box (Vertical Portrait 3:4) */
.calc-preview,
.calculator-image-box,
.calc-preview-box {
    width: 210px !important;
    height: 290px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    flex-shrink: 0 !important;
}

.calc-preview img,
.calculator-image-box img,
.calc-preview-box img,
#calcVehicleImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
}

@media (max-width: 640px) {
    .calc-preview,
    .calculator-image-box,
    .calc-preview-box {
        width: 210px !important;
        height: 280px !important;
        margin: 0 auto !important;
    }
}

html:not(.dark) .calc-preview,
html:not(.dark) .calculator-image-box,
html:not(.dark) .calc-preview-box,
html:not(.theme-dark) .calc-preview,
html:not(.theme-dark) .calculator-image-box,
html:not(.theme-dark) .calc-preview-box,
[data-theme="light"] .calc-preview,
[data-theme="light"] .calculator-image-box,
[data-theme="light"] .calc-preview-box {
    background: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Select Dropdown */
html:not(.dark) .calc-select-tesla,
html:not(.theme-dark) .calc-select-tesla,
[data-theme="light"] .calc-select-tesla {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Duration Pills */
html:not(.dark) .calc-pill-btn,
html:not(.theme-dark) .calc-pill-btn,
[data-theme="light"] .calc-pill-btn {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) .calc-pill-btn:hover,
html:not(.theme-dark) .calc-pill-btn:hover,
[data-theme="light"] .calc-pill-btn:hover {
    border-color: #1D5D3B !important;
    background: #F0FDF4 !important;
}
html:not(.dark) .calc-pill-btn.is-active,
html:not(.theme-dark) .calc-pill-btn.is-active,
[data-theme="light"] .calc-pill-btn.is-active {
    border-color: #1D5D3B !important;
    background: #ECFDF5 !important;
    color: #047857 !important;
    box-shadow: 0 0 0 1px #1D5D3B, 0 2px 4px rgba(29, 93, 59, 0.12) !important;
}

/* Addon Option Cards */
html:not(.dark) .calc-addon-card,
html:not(.theme-dark) .calc-addon-card,
[data-theme="light"] .calc-addon-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) .calc-addon-card:hover,
html:not(.theme-dark) .calc-addon-card:hover,
[data-theme="light"] .calc-addon-card:hover {
    border-color: #1D5D3B !important;
    background: #F0FDF4 !important;
}
html:not(.dark) .calc-addon-card.is-active,
html:not(.theme-dark) .calc-addon-card.is-active,
[data-theme="light"] .calc-addon-card.is-active {
    border-color: #1D5D3B !important;
    background: #ECFDF5 !important;
    box-shadow: 0 0 0 1px #1D5D3B, 0 2px 4px rgba(29, 93, 59, 0.12) !important;
}
html:not(.dark) .calc-addon-card .text-white,
html:not(.theme-dark) .calc-addon-card .text-white,
[data-theme="light"] .calc-addon-card .text-white {
    color: #111827 !important;
}
html:not(.dark) .calc-addon-card .text-zinc-400,
html:not(.theme-dark) .calc-addon-card .text-zinc-400,
[data-theme="light"] .calc-addon-card .text-zinc-400 {
    color: #4B5563 !important;
}

/* Segmented battery switch (40Ah | 60Ah) */
html:not(.dark) .tesla-segmented,
html:not(.theme-dark) .tesla-segmented,
[data-theme="light"] .tesla-segmented {
    background: #F3F4F6 !important;
    border: 1px solid #E5E7EB !important;
}
html:not(.dark) .tesla-segmented-btn,
html:not(.theme-dark) .tesla-segmented-btn,
[data-theme="light"] .tesla-segmented-btn {
    color: #4B5563 !important;
}
html:not(.dark) .tesla-segmented-btn.is-active,
html:not(.theme-dark) .tesla-segmented-btn.is-active,
[data-theme="light"] .tesla-segmented-btn.is-active {
    background: #FFFFFF !important;
    color: #111827 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Right Summary Card (Tesla Summary Card) in Light Mode */
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card,
[data-theme="light"] .calc-summary-card {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02) !important;
}
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card .border-b,
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card .border-t,
[data-theme="light"] .calc-summary-card .border-b,
[data-theme="light"] .calc-summary-card .border-t {
    border-color: #E5E7EB !important;
}
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card .w-14.h-14,
[data-theme="light"] .calc-summary-card .w-14.h-14 {
    background: #F9FAFB !important;
    border-color: #E5E7EB !important;
}
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card #resModelTitle,
[data-theme="light"] .calc-summary-card #resModelTitle {
    color: #111827 !important;
}
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card #resConfigSummary,
[data-theme="light"] .calc-summary-card #resConfigSummary {
    color: #6B7280 !important;
}
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card #resTotalPrice,
[data-theme="light"] .calc-summary-card #resTotalPrice {
    color: #111827 !important;
    font-weight: 800 !important;
}
html:not(.dark):not(.theme-dark):not([data-theme="dark"]) .calc-summary-card #resDeposit,
[data-theme="light"] .calc-summary-card #resDeposit {
    color: #111827 !important;
    font-weight: 700 !important;
}
html:not(.dark) .calc-summary-card .text-zinc-400,
html:not(.dark) .calc-summary-card .text-zinc-500,
html:not(.theme-dark) .calc-summary-card .text-zinc-400,
html:not(.theme-dark) .calc-summary-card .text-zinc-500,
[data-theme="light"] .calc-summary-card .text-zinc-400,
[data-theme="light"] .calc-summary-card .text-zinc-500 {
    color: #4B5563 !important;
}
html:not(.dark) .calc-summary-card #resBreakdownBox .text-zinc-300,
html:not(.theme-dark) .calc-summary-card #resBreakdownBox .text-zinc-300,
[data-theme="light"] .calc-summary-card #resBreakdownBox .text-zinc-300 {
    color: #374151 !important;
}
html:not(.dark) .calc-summary-card #resBreakdownBox .text-zinc-400,
html:not(.theme-dark) .calc-summary-card #resBreakdownBox .text-zinc-400,
[data-theme="light"] .calc-summary-card #resBreakdownBox .text-zinc-400 {
    color: #6B7280 !important;
}
html:not(.dark) .calc-summary-card #resBreakdownBox .text-white,
html:not(.theme-dark) .calc-summary-card #resBreakdownBox .text-white,
[data-theme="light"] .calc-summary-card #resBreakdownBox .text-white {
    color: #111827 !important;
}

/* Dark Mode explicit overrides for Calculator Summary Card */
html.dark .calc-summary-card,
html.theme-dark .calc-summary-card,
[data-theme="dark"] .calc-summary-card {
    background-color: #0E1216 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .calc-summary-card #resTotalPrice,
html.theme-dark .calc-summary-card #resTotalPrice,
[data-theme="dark"] .calc-summary-card #resTotalPrice {
    color: #FFFFFF !important;
}
html.dark .calc-summary-card #resModelTitle,
html.theme-dark .calc-summary-card #resModelTitle,
[data-theme="dark"] .calc-summary-card #resModelTitle {
    color: #FFFFFF !important;
}
html.dark .calc-summary-card #resDeposit,
html.theme-dark .calc-summary-card #resDeposit,
[data-theme="dark"] .calc-summary-card #resDeposit {
    color: #E4E4E7 !important;
}
html.dark .calc-summary-card #resBreakdownBox .text-white,
html.theme-dark .calc-summary-card #resBreakdownBox .text-white,
[data-theme="dark"] .calc-summary-card #resBreakdownBox .text-white {
    color: #FFFFFF !important;
}

/* Calculator general text and borders */
html:not(.dark) #calculator .text-white:not(.calc-cta-btn *):not(.calc-cta-btn),
html:not(.theme-dark) #calculator .text-white:not(.calc-cta-btn *):not(.calc-cta-btn),
[data-theme="light"] #calculator .text-white:not(.calc-cta-btn *):not(.calc-cta-btn) {
    color: #111827 !important;
}
html:not(.dark) #calculator .text-zinc-400,
html:not(.theme-dark) #calculator .text-zinc-400,
[data-theme="light"] #calculator .text-zinc-400 {
    color: #4B5563 !important;
}
html:not(.dark) #calculator .border-white\/10,
html:not(.dark) #calculator .border-white\/\[0\.08\],
html:not(.dark) #calculator .border-white\/\[0\.06\] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) #calculator input[type=range].tesla-slider {
    background: rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   HERO INTERACTIVE 3-SLIDE CAROUSEL
   ========================================================================== */
.hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

.hero-slide.is-active,
.hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

.hero-slide.is-prev {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-24px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Ensure Slide 1 (AIMA ONE benchmark) does not shift or transform when active */
#heroSlide1.is-active,
#heroSlide1.active {
    transform: none !important;
}

.hero-slider-nav-btn {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Light mode arrows (White slides: 1 and 2) */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .hero-slider-nav-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #111111 !important;
}
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .hero-slider-nav-btn:hover {
    background: rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #111111 !important;
    transform: translateY(-50%) scale(1.06) !important;
}
/* When slide 1 (day photo) is active in light mode */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section[data-active-slide="0"] .hero-slider-nav-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section:has(#heroSlide1.active) .hero-slider-nav-btn {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section[data-active-slide="0"] .hero-slider-nav-btn:hover,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section:has(#heroSlide1.active) .hero-slider-nav-btn:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
}

/* Dark mode arrows - полупрозрачные графитовые с тонким контуром */
html.dark .hero-slider-nav-btn,
body.dark .hero-slider-nav-btn,
[data-theme="dark"] .hero-slider-nav-btn,
html.theme-dark .hero-slider-nav-btn,
body.theme-dark .hero-slider-nav-btn,
.dark .hero-slider-nav-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}
html.dark .hero-slider-nav-btn:hover,
body.dark .hero-slider-nav-btn:hover,
[data-theme="dark"] .hero-slider-nav-btn:hover,
html.theme-dark .hero-slider-nav-btn:hover,
body.theme-dark .hero-slider-nav-btn:hover,
.dark .hero-slider-nav-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    transform: translateY(-50%) scale(1.06) !important;
}

.hero-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slider-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.hero-slider-dot.is-active,
.hero-slider-dot.active {
    width: 32px;
    background: #1D5D3B !important;
    box-shadow: 0 0 12px rgba(29, 93, 59, 0.7) !important;
}

/* Dots in light mode on white slides (slide 1 and 2) */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section[data-active-slide="1"] .hero-slider-dot,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section[data-active-slide="2"] .hero-slider-dot,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section:has(#heroSlide2.active) .hero-slider-dot,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section:has(#heroSlide3.active) .hero-slider-dot {
    background: rgba(15, 23, 42, 0.25);
}
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section[data-active-slide="1"] .hero-slider-dot.active,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section[data-active-slide="2"] .hero-slider-dot.active,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section:has(#heroSlide2.active) .hero-slider-dot.active,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #hero-section:has(#heroSlide3.active) .hero-slider-dot.active {
    background: #1D5D3B !important;
}

/* ==========================================================================
   HERO MACRO CROPPING (SLIDES 2 & 3: 1/4 FRONT ASSEMBLY APPLE-STYLE PRESENTATION)
   ========================================================================== */
.slide-image-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 55vw;
    height: 100%;
    overflow: hidden !important; /* Намертво режет всё, что выходит за рамки */
    pointer-events: none;
    z-index: 2;
}

.slide-vehicle-stage {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* PROMO VEHICLE STYLES (NO MIRRORING) */
.promo-vehicle-img,
.promo-section .img-col img {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ТЕКСТ И КНОПКИ СЛЕВА: фиксированы width: 42%; z-index: 10 */
.hero-macro-text {
    width: 42% !important;
    max-width: 520px !important;
    position: relative !important;
    z-index: 10 !important;
    padding-left: 48px !important;
    pointer-events: auto !important;
}

/* Headlight Lens and Glow Flare in Dark Theme */
.hero-headlight-lens {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    mix-blend-mode: screen;
    z-index: 25;
}

html.dark .hero-headlight-lens,
html.theme-dark .hero-headlight-lens,
html.dark-theme .hero-headlight-lens,
[data-theme="dark"] .hero-headlight-lens,
body.dark .hero-headlight-lens,
body.theme-dark .hero-headlight-lens,
body.dark-theme .hero-headlight-lens {
    opacity: 1;
    visibility: visible;
}

/* Like.Bike Bruiser Headlight */
.bike-headlight {
    width: 44px;
    height: 44px;
    left: 28.3%;
    top: 31.1%;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(180, 230, 255, 0.7) 55%, transparent 75%);
    box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.95),
                0 0 65px 25px rgba(180, 220, 255, 0.7),
                0 0 120px 45px rgba(29, 93, 59, 0.4);
    filter: drop-shadow(0 0 16px #ffffff);
}

.bike-headlight::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
    width: 480px;
    height: 220px;
    background: radial-gradient(ellipse at right center, rgba(255, 255, 255, 0.5) 0%, rgba(200, 240, 255, 0.25) 30%, rgba(29, 93, 59, 0.1) 60%, transparent 80%);
    clip-path: polygon(100% 45%, 0 0%, 0 100%, 100% 55%);
    pointer-events: none;
    filter: blur(10px);
}

/* Aima A700 Headlight */
.scooter-headlight {
    width: 52px;
    height: 52px;
    left: 24.5%;
    top: 40.5%;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(200, 255, 235, 0.75) 55%, transparent 75%);
    box-shadow: 0 0 30px 12px rgba(255, 255, 255, 0.95),
                0 0 75px 30px rgba(200, 255, 235, 0.75),
                0 0 130px 50px rgba(29, 93, 59, 0.45);
    filter: drop-shadow(0 0 18px #ffffff);
}

.scooter-headlight::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
    width: 540px;
    height: 240px;
    background: radial-gradient(ellipse at right center, rgba(255, 255, 255, 0.5) 0%, rgba(210, 255, 240, 0.25) 30%, rgba(29, 93, 59, 0.1) 60%, transparent 80%);
    clip-path: polygon(100% 45%, 0 0%, 0 100%, 100% 55%);
    pointer-events: none;
    filter: blur(12px);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .slide-image-wrapper {
        width: 58vw;
    }
    .hero-macro-text {
        width: 44% !important;
        padding-left: 36px !important;
    }
    .slide-bruiser {
        left: -10vw;
    }
    .slide-aima {
        left: -4vw;
    }
}

@media (max-width: 991px) {
    .slide-image-wrapper {
        width: 62vw;
    }
    .hero-macro-text {
        width: 46% !important;
        padding-left: 32px !important;
    }
    .slide-bruiser {
        left: -14vw;
    }
    .slide-aima {
        left: -8vw;
    }
}

@media (max-width: 768px) {
    .slide-image-wrapper {
        width: 100vw;
        opacity: 0.35;
    }
    .hero-macro-text {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .slide-bruiser {
        left: 0vw;
        top: 15%;
        height: 110% !important;
    }
    .slide-aima {
        left: 10vw;
        top: 15%;
        height: 100% !important;
    }
}

/* ==========================================================================
   HERO CROSSER CR-20 SLIDE (SLIDE 2: ЧИСТЫЙ БЕЛЫЙ ХОЛСТ И МАКРО-КАДР)
   ========================================================================== */
#heroSlide2,
.slide-crosser-clean {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

html.dark #heroSlide2,
html.theme-dark #heroSlide2,
html.dark-theme #heroSlide2,
[data-theme="dark"] #heroSlide2,
body.dark #heroSlide2,
body.theme-dark #heroSlide2,
body.dark-theme #heroSlide2 {
    background: #080A0C !important;
    background-color: #080A0C !important;
}

/* Текстовая колонка слева: строго слева, ширина 45%, max-width 560px, z-index: 10 */
.hero-crosser-content {
    position: relative !important;
    z-index: 10 !important;
    width: 45% !important;
    min-width: 480px !important;
    max-width: 560px !important;
    padding-left: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* Верхний бейдж */
.hero-crosser-badge {
    color: #2E8B57 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-family: 'Unbounded', sans-serif !important;
    margin-bottom: 14px !important;
    display: inline-block !important;
}

/* Заголовок H2: ~46-52px, жирный 800, четкий графитовый #111111 */
.hero-crosser-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: clamp(2.3rem, 3.4vw, 3.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #111111 !important;
    text-shadow: none !important;
    filter: none !important;
    margin-bottom: 18px !important;
}

/* Описание: 16-17px, line-height 1.5, цвет #555555 */
.hero-crosser-desc {
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    color: #555555 !important;
    text-shadow: none !important;
    margin-bottom: 0 !important;
    max-width: 540px !important;
}

/* Кнопки сразу под описанием с нормальным margin-top: 28px */
.hero-crosser-actions {
    margin-top: 28px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
}

.hero-crosser-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 25px -4px rgba(29, 93, 59, 0.35) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.hero-crosser-btn-primary:hover {
    background-color: #16965d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px -4px rgba(29, 93, 59, 0.45) !important;
}

.hero-crosser-btn-calc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #111111 !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.hero-crosser-btn-calc:hover {
    background-color: rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Контейнер и позиционирование Crosser CR-20 */
.slide-crosser-wrapper {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: auto !important;
    pointer-events: none !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
}

.slide-crosser-img {
    position: absolute !important;
    right: -5vw !important;
    bottom: 0 !important;
    height: 95% !important;
    max-height: 820px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    image-rendering: auto !important;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* Dark mode overrides for Slide 2 */
html.dark .hero-crosser-title,
html.theme-dark .hero-crosser-title,
html.dark-theme .hero-crosser-title,
[data-theme="dark"] .hero-crosser-title,
body.dark .hero-crosser-title,
body.theme-dark .hero-crosser-title,
body.dark-theme .hero-crosser-title {
    color: #FFFFFF !important;
}

html.dark .hero-crosser-desc,
html.theme-dark .hero-crosser-desc,
html.dark-theme .hero-crosser-desc,
[data-theme="dark"] .hero-crosser-desc,
body.dark .hero-crosser-desc,
body.theme-dark .hero-crosser-desc,
body.dark-theme .hero-crosser-desc {
    color: #94A3B8 !important; /* Читаемый матовый светло-серый slate */
}

html.dark .hero-crosser-btn-calc,
html.theme-dark .hero-crosser-btn-calc,
html.dark-theme .hero-crosser-btn-calc,
[data-theme="dark"] .hero-crosser-btn-calc,
body.dark .hero-crosser-btn-calc,
body.theme-dark .hero-crosser-btn-calc,
body.dark-theme .hero-crosser-btn-calc {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Адаптивность Slide 2 */
@media (max-width: 1600px) {
    .slide-crosser-img {
        right: -8vw !important;
    }
}

@media (max-width: 1440px) {
    .slide-crosser-img {
        right: -12vw !important;
    }
    .hero-crosser-content {
        min-width: 440px !important;
        padding-left: 48px !important;
    }
}

@media (max-width: 1200px) {
    .slide-crosser-img {
        right: -15vw !important;
    }
    .hero-crosser-content {
        min-width: 400px !important;
        padding-left: 40px !important;
    }
}

@media (max-width: 991px) {
    .slide-crosser-img {
        right: -14vw !important;
        opacity: 0.85;
    }
    .hero-crosser-content {
        min-width: 360px !important;
        padding-left: 32px !important;
    }
}

@media (max-width: 768px) {
    #heroSlide2.slide-crosser-clean {
        flex-direction: column !important;
        justify-content: center !important;
    }
    .hero-crosser-content {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        z-index: 10 !important;
    }
    .slide-crosser-wrapper {
        opacity: 0.22 !important;
        right: 0 !important;
        z-index: 1 !important;
    }
    .slide-crosser-img {
        height: 65% !important;
        right: -10vw !important;
    }
}

/* ==========================================================================
   HERO LIKE.BIKE BRUISER SLIDE (SLIDE 3: ЧИСТЫЙ БЕЛЫЙ ХОЛСТ И ЧИТАЕМЫЙ ТЕКСТ)
   ========================================================================== */
#heroSlide3,
.slide-bike-clean,
.slide-bruiser,
.hero-slide-bruiser {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

html.dark #heroSlide3,
html.theme-dark #heroSlide3,
html.dark-theme #heroSlide3,
[data-theme="dark"] #heroSlide3,
body.dark #heroSlide3,
body.theme-dark #heroSlide3,
body.dark-theme #heroSlide3,
html.dark .slide-bike-clean,
html.dark .slide-bruiser,
html.dark .hero-slide-bruiser,
body.dark .slide-bike-clean,
body.dark .slide-bruiser,
body.dark .hero-slide-bruiser,
[data-theme="dark"] .slide-bike-clean,
[data-theme="dark"] .slide-bruiser,
[data-theme="dark"] .hero-slide-bruiser {
    background: #080A0C !important;
    background-color: #080A0C !important;
}

/* Текстовая колонка слева: ширина 45%, min-width 480px, max-width 580px, padding-left 64px */
.hero-bike-content {
    position: relative !important;
    z-index: 10 !important;
    width: 45% !important;
    min-width: 480px !important;
    max-width: 580px !important;
    padding-left: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* Верхний бейдж */
.hero-bike-badge {
    color: #2E8B57 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-family: 'Unbounded', sans-serif !important;
    margin-bottom: 14px !important;
    display: inline-block !important;
}

/* Заголовок H2: ~46-52px, жирный 800, четкий графитовый #111111 */
.hero-bike-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: clamp(2.3rem, 3.4vw, 3.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #111111 !important;
    text-shadow: none !important;
    filter: none !important;
    margin-bottom: 18px !important;
}

/* Описание: 16-17px, line-height 1.5, цвет #555555 */
.hero-bike-desc {
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    color: #555555 !important;
    text-shadow: none !important;
    margin-bottom: 0 !important;
    max-width: 540px !important;
}

/* Кнопки сразу под описанием с нормальным margin-top: 28px */
.hero-bike-actions {
    margin-top: 28px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
}

.hero-bike-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 25px -4px rgba(29, 93, 59, 0.35) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.hero-bike-btn-primary:hover {
    background-color: #16965d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px -4px rgba(29, 93, 59, 0.45) !important;
}

.hero-bike-btn-calc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #111111 !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.hero-bike-btn-calc:hover {
    background-color: rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Позиционирование и масштаб велосипеда: правая часть слайда, height 95%, max-height 820px */
.slide-bike-wrapper {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: auto !important;
    pointer-events: none !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
}

/* Полный сброс всех деструктивных CSS-свойств для <img> велосипеда */
.slide-bruiser img,
.hero-slide-bruiser img,
.slide-bike-img, 
.hero-slide img {
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    image-rendering: auto !important;
    background: transparent !important;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); /* Аппаратное сглаживание без потери четкости */
}

.slide-bike-img {
    position: relative !important;
    z-index: 2 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 95% !important;
    max-height: 820px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Фара велосипеда в темной теме - строго отдельный слой позади тела велосипеда (z-index: 1) */
.bike-hero-headlight {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    width: 38px;
    height: 38px;
    left: 52.6%;
    top: 35.0%;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(180, 230, 255, 0.7) 55%, transparent 75%);
    box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.95),
                0 0 65px 25px rgba(180, 220, 255, 0.7),
                0 0 120px 45px rgba(29, 93, 59, 0.4);
    filter: drop-shadow(0 0 16px #ffffff);
    mix-blend-mode: screen !important;
}

.bike-hero-headlight::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
    width: 520px;
    height: 230px;
    background: radial-gradient(ellipse at right center, rgba(255, 255, 255, 0.55) 0%, rgba(200, 240, 255, 0.28) 30%, rgba(29, 93, 59, 0.12) 60%, transparent 80%);
    clip-path: polygon(100% 45%, 0 0%, 0 100%, 100% 55%);
    pointer-events: none;
    filter: blur(10px) drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
    mix-blend-mode: screen !important;
}

/* Dark mode overrides for Slide 3 */
html.dark .hero-bike-title,
html.theme-dark .hero-bike-title,
html.dark-theme .hero-bike-title,
[data-theme="dark"] .hero-bike-title,
body.dark .hero-bike-title,
body.theme-dark .hero-bike-title,
body.dark-theme .hero-bike-title {
    color: #FFFFFF !important;
}

html.dark .hero-bike-desc,
html.theme-dark .hero-bike-desc,
html.dark-theme .hero-bike-desc,
[data-theme="dark"] .hero-bike-desc,
body.dark .hero-bike-desc,
body.theme-dark .hero-bike-desc,
body.dark-theme .hero-bike-desc {
    color: #94A3B8 !important; /* Читаемый матовый светло-серый slate */
}

html.dark .hero-bike-btn-calc,
html.theme-dark .hero-bike-btn-calc,
html.dark-theme .hero-bike-btn-calc,
[data-theme="dark"] .hero-bike-btn-calc,
body.dark .hero-bike-btn-calc,
body.theme-dark .hero-bike-btn-calc,
body.dark-theme .hero-bike-btn-calc {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark .slide-bike-img,
[data-theme="dark"] .slide-bike-img {
    filter: none !important;
}

/* Адаптивность и свободный воздух 50-70px */
@media (max-width: 1600px) {
    .slide-bike-wrapper {
        right: -60px !important;
    }
}

@media (max-width: 1440px) {
    .slide-bike-wrapper {
        right: -160px !important;
    }
    .hero-bike-content {
        min-width: 440px !important;
        padding-left: 48px !important;
    }
}

@media (max-width: 1200px) {
    .slide-bike-wrapper {
        right: -200px !important;
    }
    .hero-bike-content {
        min-width: 400px !important;
        padding-left: 40px !important;
    }
}

@media (max-width: 991px) {
    .slide-bike-wrapper {
        right: -180px !important;
        opacity: 0.85;
    }
    .hero-bike-content {
        min-width: 360px !important;
        padding-left: 32px !important;
    }
}

@media (max-width: 768px) {
    #heroSlide3.slide-bike-clean {
        flex-direction: column !important;
        justify-content: center !important;
    }
    .hero-bike-content {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        z-index: 10 !important;
    }
    .slide-bike-wrapper {
        opacity: 0.22 !important;
        right: -60px !important;
        z-index: 1 !important;
    }
    .slide-bike-img {
        height: 65% !important;
    }
}

/* ==========================================================================
   MUVIO HERO SLIDER DARK THEME STANDARD (#080A0C)
   ========================================================================== */
html.dark .hero-section,
html.dark .hero-slide,
html.dark .slide-bruiser,
html.dark .slide-crosser,
body.dark .hero-section,
body.dark .hero-slide,
body.dark .slide-bruiser,
body.dark .slide-crosser,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .hero-slide,
[data-theme="dark"] .slide-bruiser,
[data-theme="dark"] .slide-crosser,
html.theme-dark .hero-section,
html.theme-dark .hero-slide,
body.theme-dark .hero-section,
body.theme-dark .hero-slide,
.dark .hero-section,
.dark .hero-slide,
html.dark #hero-section,
body.dark #hero-section,
html.dark #heroSlide1,
body.dark #heroSlide1,
html.dark #heroSlide2,
body.dark #heroSlide2,
html.dark #heroSlide3,
body.dark #heroSlide3,
[data-theme="dark"] #heroSlide2,
[data-theme="dark"] #heroSlide3,
html.theme-dark #heroSlide2,
html.theme-dark #heroSlide3,
body.theme-dark #heroSlide2,
body.theme-dark #heroSlide3,
html.dark .slide-crosser-clean,
body.dark .slide-crosser-clean,
html.dark .slide-bike-clean,
body.dark .slide-bike-clean,
[data-theme="dark"] .slide-crosser-clean,
[data-theme="dark"] .slide-bike-clean {
    background-color: #080A0C !important;
    background: #080A0C !important;
}

/* Contrast text in dark mode */
html.dark .hero-slide h1,
html.dark .hero-slide h2,
body.dark .hero-slide h1,
body.dark .hero-slide h2,
[data-theme="dark"] .hero-slide h1,
[data-theme="dark"] .hero-slide h2,
html.theme-dark .hero-slide h1,
html.theme-dark .hero-slide h2,
body.theme-dark .hero-slide h1,
body.theme-dark .hero-slide h2,
.dark .hero-slide h1,
.dark .hero-slide h2,
html.dark .hero-bike-title,
body.dark .hero-bike-title,
html.dark .hero-crosser-title,
body.dark .hero-crosser-title,
[data-theme="dark"] .hero-bike-title,
[data-theme="dark"] .hero-crosser-title {
    color: #FFFFFF !important;
}

html.dark .hero-slide p,
body.dark .hero-slide p,
[data-theme="dark"] .hero-slide p,
html.theme-dark .hero-slide p,
body.theme-dark .hero-slide p,
.dark .hero-slide p,
html.dark .hero-bike-desc,
body.dark .hero-bike-desc,
html.dark .hero-crosser-desc,
body.dark .hero-crosser-desc,
[data-theme="dark"] .hero-bike-desc,
[data-theme="dark"] .hero-crosser-desc {
    color: #94A3B8 !important; /* Читаемый матовый светло-серый slate */
}

/* Emerald badge */
.hero-bike-badge,
.hero-crosser-badge,
html.dark .hero-bike-badge,
html.dark .hero-crosser-badge,
body.dark .hero-bike-badge,
body.dark .hero-crosser-badge,
[data-theme="dark"] .hero-bike-badge,
[data-theme="dark"] .hero-crosser-badge {
    color: #2E8B57 !important;
}

/* ==================== SERVICE HUB GOOGLE MAPS ==================== */
.service-map-card {
    overflow: hidden !important;
    border-radius: 20px !important;
    position: relative !important;
}

.service-map-card iframe,
.service-hub-map {
    border: 0 !important;
    display: block !important;
    filter: none !important;
}

/* ==========================================================================
   STRICT LIGHT MODE: NO WHITE TEXT IN LIGHT THEME
   ========================================================================== */
html:not(.dark) h1 {
    color: var(--text-main) !important;
    position: static !important;
}

/* ==========================================================================
   ULTIMATE LIGHT THEME TEXT CONTRAST & MODAL CLOSE BUTTON STYLES
   ========================================================================== */
.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #111111;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 100;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

html.dark .modal-close-btn,
body.dark .modal-close-btn,
.dark .modal-close-btn {
    color: #FFFFFF !important;
}

html.dark .modal-close-btn:hover,
body.dark .modal-close-btn:hover,
.dark .modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ТОТАЛЬНИЙ ЗАХИСТ ВІД БІЛОГО ТЕКСТУ В СВІТЛІЙ ТЕМІ */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) body,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h1,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h2,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h3,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h4,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h5,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h6,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) p,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) span:not(#hero-section *):not(button *):not([class*="btn"] *):not(a.btn *):not(.muvio-btn-primary):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#229ED9]"]):not([class*="bg-[#1D5D3B]"]):not([class*="bg-emerald"]):not([class*="bg-blue"]):not([class*="bg-amber"]):not([class*="bg-zinc-800"]):not(.text-white-force),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a:not(#hero-section *):not(button *):not([class*="btn"]):not([class*="btn"] *):not(.btn-primary):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#229ED9]"]):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#16472D]"]),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) div:not(#hero-section *):not(button *):not([class*="btn"] *):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#229ED9]"]):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#16472D]"]):not(#userAvatar),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) label,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) li,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .tab-content,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .order-item,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .cabinet-card {
    color: #111111 !important;
}

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .text-muted,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .section-desc,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) p.desc {
    color: #555555 !important;
}

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) input,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) select,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) textarea {
    color: #111111 !important;
    background-color: #FFFFFF !important;
}

/* Збереження білого тексту на кольорових кнопках та бейджах у світлій темі */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#229ED9\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#229ED9\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#229ED9\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#229ED9\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-bundle-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-bundle-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .bundle-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .bundle-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .part-card-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .part-card-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-card-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-card-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #userAvatar,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #ordersCountBadge,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #cartCount,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #wishlistCount {
    color: #FFFFFF !important;
}

/* СТРОГИЙ БІЛИЙ КОЛІР ДЛЯ ВСІХ ЗЕЛЕНИХ КНОПОК ТА ЕЛЕМЕНТІВ MUVIO (#1D5D3B, #1D5D3B, #16472D) */
.pd-buy-btn,
.pd-buy-btn *,
.pd-bundle-buy-btn,
.pd-bundle-buy-btn *,
.bundle-buy-btn,
.bundle-buy-btn *,
.part-card-buy-btn,
.part-card-buy-btn *,
.rec-card-btn,
.rec-card-btn *,
.rec-buy-btn,
.rec-buy-btn *,
.muvio-btn-primary,
.muvio-btn-primary *,
button[class*="bg-[#1D5D3B]"],
button[class*="bg-[#1D5D3B]"] *,
a[class*="bg-[#1D5D3B]"],
a[class*="bg-[#1D5D3B]"] *,
button[class*="bg-[#1D5D3B]"],
button[class*="bg-[#1D5D3B]"] *,
a[class*="bg-[#1D5D3B]"],
a[class*="bg-[#1D5D3B]"] *,
button[class*="bg-[#16472D]"],
button[class*="bg-[#16472D]"] *,
a[class*="bg-[#16472D]"],
a[class*="bg-[#16472D]"] * {
    color: #FFFFFF !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ==========================================================================
   ACCESSORIES E-COMMERCE 3-TIER HEADER (INDUSTRIAL/BRUTALIST)
   ========================================================================== */
header.header-3tier,
.header-3tier {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* УРОВЕНЬ 1 */
.header-tier-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #E2E8F0;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
}

.header-tier-1 nav,
.header-3tier nav {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 1023px) {
    .header-tier-1 nav {
        display: none !important;
    }
}

html.dark .header-tier-1,
body.dark .header-tier-1,
.dark .header-tier-1 {
    background: #080A0C !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* УРОВЕНЬ 2 */
.header-tier-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    width: 100%;
    box-sizing: border-box;
}

html.dark .header-tier-2,
body.dark .header-tier-2,
.dark .header-tier-2 {
    background: #111418 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* УРОВЕНЬ 3 */
.header-tier-3 {
    display: flex;
    justify-content: center;
    padding: 14px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    width: 100%;
    box-sizing: border-box;
}

html.dark .header-tier-3,
body.dark .header-tier-3,
.dark .header-tier-3 {
    background: #080A0C !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.tier3-search-form {
    width: 100%;
    max-width: 720px;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
}

.tier3-input-wrapper {
    position: relative;
    flex: 1;
}

.tier3-search-input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    font-size: 14px;
    color: #111111 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1;
    border-radius: 2px;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.tier3-search-input:focus {
    border-color: #1D5D3B;
    box-shadow: 0 0 0 2px rgba(29, 93, 59, 0.15);
}

html.dark .tier3-search-input {
    background-color: #111418 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

.tier3-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
}

.tier3-search-btn {
    height: 42px;
    padding: 0 22px;
    background-color: #1D5D3B;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.tier3-search-btn:hover {
    background-color: #236f47;
}

/* Элементы профиля и бейджей */
.user-profile-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.user-avatar-mini {
    width: 28px;
    height: 28px;
    background-color: #1D5D3B;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: monospace;
    font-size: 13px;
    border-radius: 2px;
    flex-shrink: 0;
}

.user-name-label {
    font-weight: 700;
    font-size: 14px;
    color: #111111;
    white-space: nowrap;
    line-height: 1;
}

html.dark .user-name-label {
    color: #FFFFFF !important;
}

.buyer-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.05em;
    border-radius: 2px;
    border: 1px solid #1D5D3B;
    background-color: rgba(29, 93, 59, 0.08);
    color: #2E8B57 !important;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: 2px;
}

.buyer-dot {
    width: 5px;
    height: 5px;
    background-color: #1D5D3B;
    border-radius: 50%;
    display: inline-block;
}

/* Действия Tier 2 */
.tier2-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 2px;
    background-color: #FFFFFF;
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    position: relative;
}

.tier2-action-btn:hover {
    border-color: #1D5D3B;
    color: #2E8B57;
}

html.dark .tier2-action-btn {
    background-color: #181D22;
    border-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
}

.tier2-cart-btn {
    background-color: #1D5D3B !important;
    border-color: #1D5D3B !important;
    color: #FFFFFF !important;
}

.tier2-cart-btn:hover {
    background-color: #236f47 !important;
    border-color: #236f47 !important;
}

.clean-icon-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    color: #555555 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.clean-icon-action-btn:hover {
    border-color: #1D5D3B !important;
    color: #2E8B57 !important;
}

html.dark .clean-icon-action-btn {
    background-color: #111418 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #CBD5E1 !important;
}

html.dark .clean-icon-action-btn:hover {
    border-color: #1D5D3B !important;
    color: #2E8B57 !important;
}

.action-count-pill {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: monospace !important;
    line-height: 16px !important;
    text-align: center !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
/* ==================== UNIFIED STORE TOP BAR ==================== */
.store-top-bar {
    margin: 16px auto 20px auto;
    max-width: 1240px;
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
}

.store-top-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 10px 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.dark .store-top-bar-container {
    background: #0d0d0d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.user-profile-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}

.user-profile-compact .user-avatar-badge {
    width: 32px;
    height: 32px;
    background-color: #1D5D3B;
    color: #FFFFFF;
    font-weight: 800;
    font-family: monospace;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-profile-compact .user-display-name {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    line-height: 1;
    white-space: nowrap;
}

html.dark .user-profile-compact .user-display-name {
    color: #FFFFFF !important;
}

.store-search-form,
.search-bar,
.search-container {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    gap: 8px;
    margin: 0;
    box-sizing: border-box;
}

.store-search-form .store-search-input,
.search-input {
    flex: 1;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 2px;
    color: #111111;
    background-color: #FFFFFF;
    outline: none;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.store-search-form .store-search-input:focus,
.search-input:focus {
    border-color: #1D5D3B;
}

html.dark .store-search-form .store-search-input,
html.dark .search-input {
    background-color: #000000 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

.store-search-form .store-search-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    background: #1D5D3B;
    color: #FFFFFF;
    font-weight: 700;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.store-search-form .store-search-btn:hover {
    background: #1D5D3B;
}

.store-action-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.action-icon-btn {
    width: 38px;
    height: 38px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    background: #FFFFFF;
    cursor: pointer;
    color: #111111;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.action-icon-btn .action-svg-icon,
.action-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    transition: transform 0.15s ease !important;
}

.action-icon-btn:hover {
    border-color: #1D5D3B !important;
    color: #1D5D3B !important;
}

.action-icon-btn:hover .action-svg-icon,
.action-icon-btn:hover svg {
    transform: scale(1.08) !important;
}

html.dark .action-icon-btn {
    background: #0d0d0d !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

html.dark .action-icon-btn:hover {
    border-color: #1D5D3B !important;
    color: #2E8B57 !important;
}

.action-icon-btn .badge-count,
.badge-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: monospace, sans-serif !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-icon-btn .badge-count:empty,
.action-icon-btn .badge-count[data-count="0"],
.badge-count:empty,
.badge-count[data-count="0"],
.badge-count.hidden {
    display: none !important;
}

.product-code-badge,
.badge-code {
    display: none !important;
}

@media (max-width: 768px) {
    .store-top-bar-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .store-search-form {
        max-width: 100%;
        order: 2;
    }
    .user-profile-compact {
        order: 1;
    }
    .store-action-icons {
        order: 3;
        justify-content: flex-end;
    }
}

/* ==================== PRODUCT CARDS & GALLERY IMAGES (STRICT CENTERING) ==================== */
.product-image-box,
.product-img-wrap,
.card-image-box,
.pd-similar-img-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 180px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    float: none !important;
}

.product-image-box {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
}

html.dark .product-image-box,
html.dark .product-img-wrap,
html.dark .card-image-box,
[data-theme="dark"] .product-image-box,
[data-theme="dark"] .product-img-wrap,
[data-theme="dark"] .card-image-box {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
}

.product-card-img,
.product-image-box img,
.product-img-wrap img,
.card-image-box img,
.pd-main-img,
.pd-thumb-img,
.pd-similar-img,
.pd-main-img-box img,
.pd-similar-img-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    display: block !important;
    float: none !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease;
}

.product-card:hover .product-card-img,
.ecom-prod-card:hover .product-card-img {
    transform: scale(1.04);
}

/* ==================== ROZETKA-STYLE QUICK CART MODAL ==================== */
.cart-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.cart-modal-backdrop.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.cart-modal-window {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    background: #0d0d0d;
    border: 1px solid #222222;
    border-radius: 8px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cartModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cartModalIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header */
.cart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #111111;
    border-bottom: 1px solid #222222;
    flex-shrink: 0;
}

.cart-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.01em;
}

.cart-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #A0A0A0;
    cursor: pointer;
    user-select: none;
}

.cart-select-all-label input[type="checkbox"] {
    accent-color: #1D5D3B;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.cart-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-delete-selected-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #A0A0A0;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.cart-delete-selected-btn:hover:not(:disabled) {
    border-color: #EF4444;
    color: #EF4444;
    background: rgba(239, 68, 68, 0.08);
}

.cart-delete-selected-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    border-color: #222222 !important;
    color: #555555 !important;
    background: transparent !important;
    pointer-events: none !important;
}

.cart-modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: #A0A0A0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: all 0.15s ease;
}

.cart-modal-close-btn:hover {
    color: #FFFFFF;
    background: #1f1f1f;
}

/* Body / Item List */
.cart-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-modal-body::-webkit-scrollbar {
    width: 6px;
}
.cart-modal-body::-webkit-scrollbar-track {
    background: #0d0d0d;
}
.cart-modal-body::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 3px;
}
.cart-modal-body::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

.cart-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #A0A0A0;
}

.cart-item-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #141414;
    border: 1px solid #222222;
    border-radius: 6px;
    transition: border-color 0.15s ease;
}

.cart-item-card:hover {
    border-color: #333333;
}

.cart-item-check {
    accent-color: #1D5D3B;
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0;
}

.cart-item-thumb-box {
    width: 64px;
    height: 64px;
    background: #050505;
    border: 1px solid #222222;
    border-radius: 4px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

.cart-item-thumb {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.35;
    margin-bottom: 4px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.cart-item-title:hover {
    color: #2E8B57;
}

.cart-item-unit-price {
    font-size: 11px;
    font-family: monospace;
    color: #888888;
}

.cart-item-bottom-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.cart-item-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #262626;
    border-radius: 4px;
    background: #0a0a0a;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-step-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cart-step-btn:hover:not(:disabled) {
    background: #1f1f1f;
    color: #2E8B57;
}

.cart-step-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    color: #555555 !important;
    background: transparent !important;
}

.cart-step-input {
    width: 36px;
    height: 28px;
    background: transparent;
    border: none;
    border-left: 1px solid #262626;
    border-right: 1px solid #262626;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    font-family: monospace;
    text-align: center;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
}

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

.cart-item-price-block {
    text-align: right;
    min-width: 90px;
    flex-shrink: 0;
}

.cart-item-old-price {
    font-size: 11px;
    font-family: monospace;
    color: #777777;
    text-decoration: line-through;
}

.cart-item-subtotal {
    font-size: 15px;
    font-weight: 800;
    font-family: monospace;
    color: #FFFFFF;
}

.cart-item-del-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: #777777;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cart-item-del-btn:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Footer */
.cart-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #111111;
    border-top: 1px solid #222222;
    flex-shrink: 0;
    gap: 16px;
    flex-wrap: wrap;
}

.cart-continue-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #A0A0A0;
    padding: 11px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cart-continue-btn:hover {
    border-color: #444444;
    color: #FFFFFF;
    background: #1a1a1a;
}

.cart-footer-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cart-total-block {
    text-align: right;
}

.cart-total-label {
    font-size: 11px;
    color: #888888;
    text-transform: uppercase;
    font-family: monospace;
}

.cart-total-amount {
    font-size: 22px;
    font-weight: 900;
    font-family: monospace;
    color: #FFFFFF;
    line-height: 1.1;
}

.cart-checkout-btn {
    height: 44px;
    padding: 0 24px;
    background: #1D5D3B !important;
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.cart-checkout-btn:hover:not(.disabled):not(:disabled) {
    background: #236f47 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(29, 93, 59, 0.4);
}

/* Кнопка-посилання: білий текст і при наведенні (перебиває a:hover { color: inherit }) */
a.cart-checkout-btn:not(.disabled),
a.cart-checkout-btn:not(.disabled):visited,
a.cart-checkout-btn:not(.disabled):hover,
a.cart-checkout-btn:not(.disabled):active {
    color: #FFFFFF !important;
}

.cart-checkout-btn.disabled,
.cart-checkout-btn:disabled {
    background: #222222 !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

@media (max-width: 640px) {
    .cart-modal-backdrop {
        padding: 8px !important;
    }

    .cart-modal-window {
        max-height: 95vh !important;
    }

    .cart-modal-header {
        padding: 12px 14px !important;
    }

    .cart-modal-title {
        font-size: 16px !important;
    }

    .cart-select-all-label span {
        font-size: 11px !important;
    }

    .cart-del-btn-text {
        display: none !important;
    }

    .cart-delete-selected-btn {
        padding: 6px 8px !important;
    }

    .cart-modal-body {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .cart-item-card {
        padding: 10px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .cart-item-thumb-box {
        width: 52px !important;
        height: 52px !important;
    }

    .cart-item-info {
        flex: 1 1 calc(100% - 130px) !important;
    }

    .cart-item-title {
        font-size: 12px !important;
    }

    .cart-item-bottom-row {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 8px !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
        margin-top: 4px !important;
        margin-left: 0 !important;
    }

    .cart-modal-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .cart-continue-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 14px !important;
    }

    .cart-footer-right {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .cart-total-block {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .cart-checkout-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   MUVIO STORE - КАТАЛОГ ДЕТАЛЕЙ, РЕКОМЕНДАЦІЇ ТА МАТОВІ ФІЛЬТРИ
   ========================================================================== */
.filter-active-pill {
    background-color: #1D5D3B !important;
    border: 1px solid #1D5D3B !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.filter-clear-pill-btn {
    color: #8E8E93 !important;
    transition: color 0.15s ease !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    outline: none !important;
}

.filter-clear-pill-btn:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

.filter-chk-item {
    transition: background-color 0.12s ease !important;
}

.part-filter-checkbox {
    accent-color: #1D5D3B !important;
    cursor: pointer !important;
}

#recommendationsTrack::-webkit-scrollbar,
.recommendations-sidebar::-webkit-scrollbar {
    width: 4px !important;
    height: 0px !important;
}

#recommendationsTrack::-webkit-scrollbar-track,
.recommendations-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

#recommendationsTrack::-webkit-scrollbar-thumb,
.recommendations-sidebar::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.3) !important;
    border-radius: 2px !important;
}

#recommendationsTrack::-webkit-scrollbar-thumb:hover,
.recommendations-sidebar::-webkit-scrollbar-thumb:hover {
    background: #1D5D3B !important;
}

/* ==================== ТЕМАТИЧНІ ЗМІННІ ТА КАТАЛОГ ==================== */
/* ТЁМНАЯ ТЕМА (dark) */
[data-theme="dark"],
body.dark-theme,
html.dark,
html.theme-dark,
body.dark {
    --bg-main: #000000;
    --bg-card: #0d0d0d;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --border-color: #222222;
}

/* СВЕТЛАЯ ТЕМА (light) */
:root,
[data-theme="light"],
body.light-theme,
html:not(.dark):not(.theme-dark),
body.light {
    --bg-main: #F7F7F8;
    --bg-card: #FFFFFF;
    --text-primary: #111111;
    --text-secondary: #666666;
    --border-color: #E2E2E2;
}

.catalog-main {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.catalog-container {
    max-width: 1280px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.ecom-layout-container {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* САЙДБАР КАТЕГОРИЙ (STICKY) */
.category-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    flex-shrink: 0 !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    z-index: 20 !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
}

.category-sidebar::-webkit-scrollbar {
    width: 4px !important;
}
.category-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}
.category-sidebar::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.3) !important;
    border-radius: 2px !important;
}
.category-sidebar::-webkit-scrollbar-thumb:hover {
    background: #1D5D3B !important;
}

#viewedRecommendationsSection {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

#viewedRecommendationsSection h3 {
    color: var(--text-primary) !important;
}

#recommendationsTrack {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    padding: 10px !important;
    scrollbar-width: thin !important;
}

.recommendation-card {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    scroll-snap-align: start !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease !important;
}

.recommendation-card:hover {
    border-color: #1D5D3B !important;
}

.recommendation-img-box {
    width: 100% !important;
    height: 95px !important;
    max-height: 95px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #141414 !important;
    border-radius: 3px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 6px !important;
}

html:not(.dark) .recommendation-img-box,
[data-theme="light"] .recommendation-img-box {
    background: #F8FAFC !important;
}

.recommendation-img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transition: transform 0.15s ease !important;
}

.recommendation-card:hover .recommendation-img {
    transform: scale(1.05) !important;
}

.recommendation-cat {
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: monospace !important;
    text-transform: uppercase !important;
    color: #2E8B57 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.recommendation-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    height: 34px !important;
}

.recommendation-footer {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.product-price {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}

.recommendation-price {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}

.catalog-center-column {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.recommendations-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    flex-shrink: 0 !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    z-index: 20 !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.recommendations-sidebar::-webkit-scrollbar {
    width: 4px !important;
}
.recommendations-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}
.recommendations-sidebar::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.3) !important;
    border-radius: 2px !important;
}

.recommendation-vertical-card {
    display: flex !important;
    gap: 10px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    align-items: center !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
.recommendation-vertical-card:hover {
    border-color: #1D5D3B !important;
    background: rgba(29, 93, 59, 0.06) !important;
}
.rec-thumb-box {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    border: none !important;
    overflow: hidden !important;
}
html.dark .rec-thumb-box,
[data-theme="dark"] .rec-thumb-box {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
}
.rec-thumb-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
    margin: auto !important;
}
.rec-details {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.rec-category-tag {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #1D5D3B !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.rec-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    line-height: 1.25 !important;
    margin: 2px 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
html.dark .rec-title,
html.dark a.rec-title,
[data-theme="dark"] .rec-title,
[data-theme="dark"] a.rec-title {
    color: #FFFFFF !important;
}
.rec-title:hover {
    color: #1D5D3B !important;
}
html.dark .rec-title:hover,
html.dark a.rec-title:hover,
[data-theme="dark"] .rec-title:hover,
[data-theme="dark"] a.rec-title:hover {
    color: #2E8B57 !important;
}
html.dark .ecom-prod-card p,
[data-theme="dark"] .ecom-prod-card p,
html.dark .product-card p,
[data-theme="dark"] .product-card p {
    color: #CBD5E1 !important;
}
html.dark #productsFoundLabel,
[data-theme="dark"] #productsFoundLabel,
html.dark label[for="sortSelect"],
[data-theme="dark"] label[for="sortSelect"],
html.dark #activeFilterLabel,
[data-theme="dark"] #activeFilterLabel,
html.dark .filter-chk-item span.font-mono,
[data-theme="dark"] .filter-chk-item span.font-mono,
html.dark [data-i18n="help_desc"],
[data-theme="dark"] [data-i18n="help_desc"] {
    color: #CBD5E1 !important;
}
.rec-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
}
.rec-buy-btn {
    width: 28px !important;
    height: 28px !important;
    background: #1D5D3B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease !important;
}
.rec-buy-btn:hover {
    background: #24754a !important;
}

.recommendation-buy-btn {
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    white-space: nowrap !important;
}

.recommendation-buy-btn:hover {
    background-color: #236f47 !important;
}

.add-to-cart-btn {
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 9px 14px !important;
    border-radius: 2px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
}

.add-to-cart-btn:hover {
    background-color: #236f47 !important;
}

.header-user-btn.header-user-btn-guest {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 2px 4px !important;
}

.header-user-login-subtext {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #A0A0A0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color 0.15s ease !important;
}

.header-user-btn-guest:hover .header-user-login-subtext {
    color: #FFFFFF !important;
}

.btn-login-trigger,
.user-login-badge-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.btn-login-trigger:hover,
.user-login-badge-btn:hover {
    background-color: #236f47 !important;
}

.btn-profile-trigger {
    background: none !important;
    border: none !important;
    padding: 2px 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.user-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 12px !important;
    background: rgba(29, 93, 59, 0.15) !important;
    border: 1px solid #1D5D3B !important;
    border-radius: 20px !important;
    color: #1D5D3B !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

html.dark .user-badge,
html.theme-dark .user-badge {
    background: rgba(46, 139, 87, 0.2) !important;
    border-color: #2E8B57 !important;
    color: #4ade80 !important;
}

.user-profile-active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: inherit !important;
}

.ecom-prod-card,
.product-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.ecom-prod-card h3,
.product-card h3 {
    color: var(--text-primary) !important;
}

.ecom-prod-card p,
.product-card p {
    color: var(--text-secondary) !important;
}

/* ==================== ACTIVE LANGUAGE HIGH-CONTRAST SWITCH (NO UNDERLINE) ==================== */
.lang-btn,
.lang-switch-btn {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    padding: 2px 4px !important;
    line-height: 1 !important;
    transition: color 0.2s ease, font-weight 0.2s ease !important;
    color: #888888 !important;
    opacity: 1 !important;
}

.lang-btn::before,
.lang-btn::after,
.lang-switch-btn::before,
.lang-switch-btn::after,
#authLangUa::before,
#authLangUa::after,
#authLangEn::before,
#authLangEn::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

html.dark .lang-btn,
html.dark .lang-switch-btn,
html.theme-dark .lang-btn,
html.theme-dark .lang-switch-btn,
[data-theme="dark"] .lang-btn,
[data-theme="dark"] .lang-switch-btn {
    color: #888888 !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Active language: strictly bold 700, high contrast, NO border-bottom */
.lang-btn.active,
.lang-btn.active-lang,
.lang-switch-btn.active,
.lang-switch-btn.active-lang,
#authLangUa.active,
#authLangUa.active-lang,
#authLangEn.active,
#authLangEn.active-lang {
    font-weight: 700 !important;
    color: #111111 !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

html.dark .lang-btn.active,
html.dark .lang-btn.active-lang,
html.dark .lang-switch-btn.active,
html.dark .lang-switch-btn.active-lang,
html.dark #authLangUa.active,
html.dark #authLangUa.active-lang,
html.dark #authLangEn.active,
html.dark #authLangEn.active-lang,
html.theme-dark .lang-btn.active,
html.theme-dark .lang-btn.active-lang,
html.theme-dark .lang-switch-btn.active,
html.theme-dark .lang-switch-btn.active-lang,
html.theme-dark #authLangUa.active,
html.theme-dark #authLangUa.active-lang,
html.theme-dark #authLangEn.active,
html.theme-dark #authLangEn.active-lang,
[data-theme="dark"] .lang-btn.active,
[data-theme="dark"] .lang-btn.active-lang,
[data-theme="dark"] .lang-switch-btn.active,
[data-theme="dark"] .lang-switch-btn.active-lang,
[data-theme="dark"] #authLangUa.active,
[data-theme="dark"] #authLangUa.active-lang,
[data-theme="dark"] #authLangEn.active,
[data-theme="dark"] #authLangEn.active-lang {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* ==================== MUVIO PICKUP LOGO ==================== */
.muvio-m-pickup-wrap {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.muvio-m-pickup-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    color: #1D5D3B !important;
    fill: #1D5D3B !important;
    display: block !important;
    transition: color 0.15s ease, fill 0.15s ease !important;
}
html.dark .muvio-m-pickup-icon,
html.theme-dark .muvio-m-pickup-icon,
[data-theme="dark"] .muvio-m-pickup-icon,
.dark-theme .muvio-m-pickup-icon {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
html.light .muvio-m-pickup-icon,
html.theme-light .muvio-m-pickup-icon,
[data-theme="light"] .muvio-m-pickup-icon,
.light-theme .muvio-m-pickup-icon {
    color: #1D5D3B !important;
    fill: #1D5D3B !important;
}

/* ==================== PRODUCT MEDIA GALLERY (STRICT SPEC) ==================== */
.pd-main-img-box,
.product-main-img-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    cursor: zoom-in !important;
}

html.dark .pd-main-img-box,
html.dark .product-main-img-box,
html.theme-dark .pd-main-img-box,
html.theme-dark .product-main-img-box,
[data-theme="dark"] .pd-main-img-box,
[data-theme="dark"] .product-main-img-box {
    background: #141414 !important;
    border-color: #222222 !important;
}

.pd-main-img,
.product-main-img-box img,
.pd-main-img-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    display: block !important;
    transition: transform 0.3s ease-out, opacity 0.2s ease !important;
    will-change: transform;
    user-select: none;
    pointer-events: none;
}

.pd-thumbs-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
    padding: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pd-thumb-btn {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    padding: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.pd-thumb-btn.active {
    border-color: #1D5D3B !important;
    box-shadow: 0 0 0 1.5px #1D5D3B !important;
}

.pd-thumb-btn:hover:not(.active) {
    border-color: #1D5D3B !important;
    opacity: 0.9 !important;
}

.pd-thumb-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
    pointer-events: none !important;
}

/* ==================== PRODUCT MAIN VIEW (2-COLUMN GRID) ==================== */
.product-main-view,
.pd-hero-grid {
    display: grid !important;
    grid-template-columns: 500px 1fr !important;
    gap: 32px !important;
    align-items: start !important;
    margin-bottom: 32px !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .product-main-view,
    .pd-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.pd-title,
h1.pd-title,
#pdTitle {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin: 8px 0 !important;
    text-align: left !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Left Column: Benefits under Thumbnails */
.pd-gallery-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding: 12px 14px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.pd-gallery-feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    line-height: 1.3 !important;
}

.pd-gallery-feature-icon {
    width: 18px !important;
    height: 18px !important;
    color: #2E8B57 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==================== ЧАСТО КУПУЮТЬ РАЗОМ (BUNDLE COMPONENT) ==================== */
.pd-bundle-section {
    margin-top: 32px !important;
    margin-bottom: 24px !important;
    clear: both !important;
    width: 100% !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
}

.pd-bundle-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.pd-bundle-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pd-bundle-layout {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Кнопки в фирменном цвете #1D5D3B */
.pd-bundle-buy-btn,
.pd-buy-btn {
    background: #1D5D3B !important;
    border: 1px solid #1D5D3B !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.pd-bundle-buy-btn {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 10px 18px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.pd-bundle-buy-btn:hover,
.pd-buy-btn:hover {
    background: #236f47 !important;
    border-color: #236f47 !important;
}





/* Підпис під іконкою профілю («Вхід» / «Кабінет»): читається на білому і на темному фоні */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) header.site-header-synced .header-user-btn .header-user-login-subtext,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) header .header-user-btn-guest .header-user-login-subtext {
    color: #52525B !important;
}
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) header .header-user-btn-guest:hover .header-user-login-subtext {
    color: #1D5D3B !important;
}
html.dark header .header-user-btn-guest .header-user-login-subtext,
html.theme-dark header .header-user-btn-guest .header-user-login-subtext {
    color: #A0A0A0 !important;
}
html.dark header .header-user-btn-guest:hover .header-user-login-subtext,
html.theme-dark header .header-user-btn-guest:hover .header-user-login-subtext {
    color: #FFFFFF !important;
}

/* Кошик-модалка: світла тема (темна - базові стилі вище) */
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-backdrop{background:rgba(0,0,0,.45)}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-window{background:#FFFFFF;border-color:#E5E5E5;box-shadow:0 25px 60px -10px rgba(0,0,0,.25)}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-header,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-footer{background:#F7F7F7;border-color:#E5E5E5}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-title,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-total-amount,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-title,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-subtotal,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-step-input{color:#111111 !important}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-select-all-label,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-select-all-label span,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-unit-price,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-total-label,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-old-price{color:#555555 !important}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-delete-selected-btn{color:#111111;border-color:#CFCFCF;background:#FFFFFF}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-delete-selected-btn:hover:not(:disabled){color:#EF4444;border-color:#EF4444;background:#FFF1F1}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-delete-selected-btn:disabled{border-color:#E5E5E5 !important;color:#AAAAAA !important}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-close-btn{color:#111111;background:transparent}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-close-btn:hover{background:#EEEEEE;color:#111111}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-modal-body{background:#FFFFFF}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-card{background:#FAFAFA;border-color:#E5E5E5}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-card:hover{border-color:#BBBBBB}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-thumb-box{background:#FFFFFF;border-color:#E5E5E5}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-stepper{background:#FFFFFF;border-color:#CFCFCF}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-step-btn{background:#FFFFFF;color:#111111}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-step-btn:hover:not(:disabled){background:#EEEEEE;color:#111111}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-step-btn:disabled{color:#BBBBBB}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-step-input{background:#FFFFFF}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-del-btn{color:#777777}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-item-del-btn:hover{color:#EF4444}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-continue-btn{background:#FFFFFF;border-color:#CFCFCF;color:#111111}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-continue-btn:hover{background:#F0F0F0;border-color:#111111;color:#111111}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-empty-state,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-empty-state *{color:#555555}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-checkout-btn.disabled,:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-checkout-btn:disabled{background:#E5E5E5 !important;color:#999999 !important}

/* Порожній кошик: іконка в колі. Темна тема - білі контури, світла - зелені */
.cart-empty-icon{width:64px;height:64px;border-radius:9999px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:transparent;border:2px solid #FFFFFF;color:#FFFFFF}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-empty-icon{border-color:#1D5D3B;color:#1D5D3B}
:is(html:not(.dark):not(.theme-dark):not(.dark-theme)) .cart-empty-state .cart-empty-icon *{color:#1D5D3B}

/* ===== Єдиний футер MUVIO (однаковий на всіх сторінках, читабельний у світлій і темній темі) ===== */
html:not(#_):not(#__):not(#___) footer.muvio-footer { background-color: #123824 !important; color: #D1FAE5 !important; border-top: 2px solid #1D5D3B !important; }
html:not(#_):not(#__):not(#___) footer.muvio-footer * { color: #D1FAE5 !important; }
html:not(#_):not(#__):not(#___) footer.muvio-footer a:hover, html:not(#_):not(#__):not(#___) footer.muvio-footer a:hover * { color: #FFFFFF !important; }
html:not(#_):not(#__):not(#___) footer.muvio-footer .muvio-ft-h, html:not(#_):not(#__):not(#___) footer.muvio-footer .muvio-ft-h * { color: #A7F3D0 !important; }
html:not(#_):not(#__):not(#___) footer.muvio-footer a.chamfer-btn, html:not(#_):not(#__):not(#___) footer.muvio-footer a.chamfer-btn * { color: #FFFFFF !important; background-color: transparent; }
html:not(#_):not(#__):not(#___) footer.muvio-footer a.chamfer-btn { background-color: #1D5D3B !important; border: 1px solid #34D399 !important; }
html:not(#_):not(#__):not(#___) footer.muvio-footer .muvio-ft-h + ul li a { font-size: 15px; }

/* ===== Шрифт у стилі Farfetch: Onest (легкий строгий гротеск, є кирилиця) ===== */
html:not(#_):not(#__) body,
html:not(#_):not(#__) body *:not(svg):not(svg *):not(code):not(pre):not(.no-brand-font){
  font-family:'Onest','Helvetica Neue',Arial,sans-serif !important;
}
html:not(#_):not(#__) h1, html:not(#_):not(#__) h2, html:not(#_):not(#__) h3,
html:not(#_):not(#__) .font-extrabold, html:not(#_):not(#__) .font-black{ font-weight:600 !important; letter-spacing:-0.01em; }
html:not(#_):not(#__) body{ font-weight:400; -webkit-font-smoothing:antialiased; }

/* Лупа пошуку - біла на зеленій кнопці */
html:not(#_):not(#__) .store-search-form{ flex-direction:row !important; gap:0 !important; }
html:not(#_):not(#__) .store-search-form .store-search-input{ padding-left:4px !important; }
html:not(#_):not(#__) .store-search-form .store-search-btn{ order:-1; background:transparent !important; width:24px; height:32px; color:currentColor !important; margin-right:0; margin-left:-4px; }
html:not(#_):not(#__) .store-search-form .store-search-btn svg, html:not(#_):not(#__) .store-search-form .store-search-btn svg *{ color:currentColor !important; stroke:currentColor !important; }

/* Відступ між фото та назвою у картках магазину */
html:not(#_):not(#__) #productsGrid .product-card .product-image-box{ margin-bottom:16px !important; }
html:not(#_):not(#__) .ecom-prod-card .product-image-box{ margin-bottom:16px !important; }

/* Квадрат з фото не збільшується/не підстрибує при наведенні - лише саме фото всередині */
html:not(#_):not(#__) .ecom-prod-card:hover, html:not(#_):not(#__) .product-card:hover{ transform:none !important; }
html:not(#_):not(#__) .product-image-box, html:not(#_):not(#__) .pd-main-img-box{ overflow:hidden !important; transform:none !important; }

@media (max-width:767px){
 html:not(#_):not(#__) #productsGrid .product-card .product-image-box{ margin-bottom:8px !important; }
 html:not(#_):not(#__) .store-search-form .store-search-btn{ width:28px; height:36px; }
}

/* Мобільна шапка: довге ім'я не розсуває шапку */
@media (max-width:767px){
 html:not(#_):not(#__) #header-user-name, html:not(#_):not(#__) header .header-user-name{ max-width:64px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:11px !important; letter-spacing:0 !important; display:block !important; }
 html:not(#_):not(#__) header.site-header-synced .header-container{ gap:6px; }
}

/* Бургер завжди контрастний: темний на світлій, білий на темній темі */
html:not(#_):not(#__) #burger-btn, html:not(#_):not(#__) #burger-btn svg, html:not(#_):not(#__) #burger-btn svg *{ color:#111111 !important; stroke:#111111 !important; opacity:1 !important; }
html.dark:not(#_):not(#__) #burger-btn, html.dark:not(#_):not(#__) #burger-btn svg, html.dark:not(#_):not(#__) #burger-btn svg *,
html.theme-dark:not(#_):not(#__) #burger-btn, html.theme-dark:not(#_):not(#__) #burger-btn svg, html.theme-dark:not(#_):not(#__) #burger-btn svg *,
html[data-theme="dark"]:not(#_):not(#__) #burger-btn, html[data-theme="dark"]:not(#_):not(#__) #burger-btn svg, html[data-theme="dark"]:not(#_):not(#__) #burger-btn svg *{ color:#FFFFFF !important; stroke:#FFFFFF !important; }

/* Мобільна шапка: бургер у лівий край, лого впритул, усе по центру вертикалі */
@media (max-width:767px){
 html:not(#_):not(#__) header.site-header-synced{ padding-left:6px !important; padding-right:12px !important; align-items:center !important; }
 html:not(#_):not(#__) header.site-header-synced .header-container{ align-items:center !important; height:100% !important; }
 html:not(#_):not(#__) header.site-header-synced .header-container>*:not(#mobile-menu){ align-self:center !important; display:flex; align-items:center !important; }
 html:not(#_):not(#__) header.site-header-synced .header-container>div:first-child{ gap:0 !important; }
 html:not(#_):not(#__) header.site-header-synced #burger-btn{ margin:0 !important; padding:4px !important; width:32px !important; flex:0 0 32px; }
 html:not(#_):not(#__) header.site-header-synced .header-logo{ margin:0 0 0 -2px !important; padding:0 !important; }
 html:not(#_):not(#__) header.site-header-synced .header-logo-img{ margin:0 !important; transform:none !important; }
}

.hun-short{display:none}
@media (max-width:767px){
 html:not(#_):not(#__) .hun-full{display:none !important}
 html:not(#_):not(#__) .hun-short{display:inline !important;text-transform:none !important}
 html:not(#_):not(#__) header .header-user-btn.user-profile-active{flex-direction:column !important;align-items:center !important;gap:2px !important;text-decoration:none}
 html:not(#_):not(#__) header .header-user-btn.user-profile-active .header-user-name{max-width:none !important;font-size:11px !important;line-height:1.1 !important;text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important;white-space:nowrap}
}
@media (max-width:767px){
 html:not(#_):not(#__) header .header-right{ gap:8px !important; }
}
@media (max-width:767px){
 html:not(#_):not(#__) header .header-user-btn.user-profile-active{ position:relative !important; flex-direction:row !important; }
 html:not(#_):not(#__) header .header-user-btn.user-profile-active .header-user-name{ position:absolute !important; top:100% !important; left:50% !important; transform:translateX(-50%) !important; margin-top:-3px !important; }
 html:not(#_):not(#__) header .header-user-btn.header-user-btn-guest .header-user-login-subtext, html:not(#_):not(#__) header #header-user-name.header-user-login-subtext{ position:absolute !important; top:100% !important; left:50% !important; transform:translateX(-50%) !important; margin-top:-3px !important; }
 html:not(#_):not(#__) header .header-user-btn{ position:relative !important; }
}
@media (max-width:767px){
 html:not(#_):not(#__) header .header-user-btn.user-profile-active .header-user-name, html:not(#_):not(#__) header #header-user-name.header-user-login-subtext, html:not(#_):not(#__) header .header-user-btn.header-user-btn-guest .header-user-login-subtext{ margin-top:-7px !important; font-size:10px !important; line-height:1 !important; }
}
@media (max-width:767px){
 html:not(#_):not(#__) header .header-user-btn.user-profile-active .header-user-name, html:not(#_):not(#__) header #header-user-name.header-user-login-subtext, html:not(#_):not(#__) header .header-user-btn.header-user-btn-guest .header-user-login-subtext{ margin-top:1px !important; }
 html:not(#_):not(#__) header.site-header-synced .header-right{ margin-left:auto !important; }
}

/* Розмір логотипа шапки відомий ще до роботи скриптів, щоб він не перемикався з малого на великий */
@media (min-width:768px){
  :root{--hdr-logo-h:clamp(44px,calc((100vw - 912px) / 2.28),72px);--hdr-logo-ty:clamp(4px,calc(4px + ((100vw - 912px) / 2.28 - 44px) * .5),18px)}
}

/* Шапка на телефоні: більші елементи, щоб легко потрапляти пальцем (бургер, мова, профіль, тема) */
@media (max-width: 767px){
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced #burger-btn{width:48px !important;height:48px !important;flex:0 0 48px !important;padding:0 !important;margin:0 0 0 -4px !important;display:flex !important;align-items:center !important;justify-content:center !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced #burger-btn svg{width:22px !important;height:22px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right{gap:2px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .header-user-btn,
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .theme-toggle-btn{width:44px !important;height:44px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .header-user-btn svg,
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .theme-toggle-btn svg{width:27px !important;height:27px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .lang-switch{height:44px !important;align-items:center !important;gap:0 !important;margin:0 2px !important;padding:0 !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .lang-btn{font-size:17px !important;line-height:44px !important;height:44px !important;min-width:32px !important;padding:0 4px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .lang-divider{margin:0 !important}
}

/* Мобільна шапка: вища, усе по центру вертикалі, лого пропорційне бургеру, іконки праворуч трохи більші */
@media (max-width: 767px){
  :root{--hdr-logo-h:48px;--hdr-logo-ty:0px}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-container{align-items:center !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced #burger-btn{width:52px !important;height:52px !important;flex:0 0 52px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced #burger-btn svg{width:22px !important;height:22px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right{align-items:center !important;height:100% !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .header-user-btn,
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .theme-toggle-btn{width:48px !important;height:48px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .header-user-btn svg,
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .theme-toggle-btn svg{width:30px !important;height:30px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .lang-switch{height:48px !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header.site-header-synced .header-right .lang-btn{font-size:19px !important;line-height:48px !important;height:48px !important}
}

/* Логотип в шапці: у вузькому вікні на комп'ютері завжди 56px, навіть після зміни розміру вікна (телефон лишається 48px) */
@media (max-width:767px) and (hover:hover) and (pointer:fine){
  html:not(#_):not(#__):not(#___):not(#____):not(#_____) header .header-logo-img{height:56px !important;width:auto !important}
  html:not(#_):not(#__):not(#___):not(#____):not(#_____){--hdr-logo-h:56px !important;--hdr-logo-ty:0px !important}
}

/* Іконки контактів у підвалі: тонкі, без плашки, колір як у тексту (як іконки шапки) */
html:not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer [class*="bg-emerald-800"]{background:transparent !important;background-color:transparent !important;width:24px !important;height:24px !important}
html:not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer [class*="bg-emerald-800"] svg{width:20px !important;height:20px !important;stroke-width:1.5 !important;color:#fff !important;stroke:#fff !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer [class*="bg-emerald-800"] svg{color:#111 !important;stroke:#111 !important}

/* Кнопка Telegram Bot у підвалі: без світлої обводки, тонка іконка літачка без заливки */
html:not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer a.chamfer-btn{border:0 !important;box-shadow:none !important}
html:not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer a.chamfer-btn svg{fill:none !important;stroke:#fff !important;stroke-width:1.5 !important;width:16px !important;height:16px !important}
html:not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer a.chamfer-btn svg.tg-plane{width:20px !important;height:20px !important;fill:none !important;stroke:#fff !important;stroke-width:1.5 !important}
html:not(#_):not(#__):not(#___):not(#____):not(#_____) footer.muvio-footer a.chamfer-btn svg.tg-plane *{fill:none !important;stroke:#fff !important;stroke-width:1.5 !important}