/* Предотвращение горизонтальной прокрутки */
        body, html {
            overflow-x: hidden;
        }
        
        /* Brand slider */
        .brand-slider-container { position: relative; overflow: hidden; }
        
        /* Расширенный контейнер для брендов (выход за контейнер до краев viewport, макс. 1600px) */
        .brand-slider-container-full {
            position: relative;
            overflow: hidden;
            max-width: 1600px;
            width: 100%;
            margin: 0 auto;
            padding: 40px 0;
        }
        
        /* На больших экранах растягиваем до границ viewport, но не более 1600px */
        @media (min-width: 1200px) and (max-width: 1600px) {
            .brand-slider-container-full {
                width: 100vw;
                margin-left: calc(-50vw + 50%);
            }
        }
        
        .brand-slider { 
            width: 100%; 
            position: relative;
        }
        
        .brand-track { 
            display: flex; 
            gap: 30px; 
            align-items: center; 
            will-change: transform;
        }
        
        .brand-item { 
            flex: 0 0 300px;
            min-width: 330px;
        }
        
        .brand-item .category-card {
            background: white;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 170px;
        }
        
        .brand-item .category-card:hover {
            box-shadow: 0 8px 25px rgba(37,73,216,0.15);
            transform: translateY(-5px);
        }
        
        .brand-item .category-card img {
            max-width: 100%;
            max-height: 120px;
            width: auto;
            height: auto;
            object-fit: contain;
        }


        :root {
            /* TRON Brand Colors */
            --tron-blue: #2549d8;
            --tron-dark-blue: #1e3aad;
            --tron-light-blue: #f3f5fc;
            --tron-gray: #f4f4f5;
            --tron-dark-gray: #909098;
            --tron-text: #2b2b2e;
            --tron-white: #ffffff;
            
            /* Figma Design System Colors */
            --brand-50: #f3f5fc;
            --brand-100: #d3dbf7;
            --brand-200: #bec8f3;
            --brand-500: #2549d8;
            --brand-600: #1e3aad;
            --brand-700: #162c82;
            
            --0: #ffffff;
            --50: #f4f4f5;
            --100: #e9e9ea;
            --500: #909098;
            --600: #73737a;
            --900: #2b2b2e;
        }
        
        /* Site Container */
        .site-container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }
        
        /* Container - для хедера и футера */
        .container {
            max-width: 1200px;
            padding: 0 20px;
        }
        
        /* Wide Container - для контента страниц */
        .container-wide {
            max-width: 1500px;
            padding: 0 20px;
            margin: 0 auto;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--tron-white);
            color: var(--tron-text);
            line-height: 1.6;
        }
        
        /* Header Styles */
        .top-header {
            background-color: var(--tron-white);
            border-bottom: 1px solid var(--100);
            padding: 12px 0;
            font-size: 14px;
        }
        
        .main-header {
            
            padding: 20px 0;
        }
        
       
        
        
        
        .catalog-btn {
            background-color: var(--brand-500);
            color: var(--0);
            border: none;
            padding: 19px 54px;
            border-radius: 16px;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s ease;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .catalog-btn:hover {
            background-color: var(--brand-600);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(37, 73, 216, 0.3);
        }
        
        .search-container {
            position: relative;
            width: 100%;
        }
        
        .search-input {
            width: 100%;
            padding: 24px 18px 24px 50px;
            border: 1px solid var(--100);
            border-radius: 18px;
            font-size: 16px;
            transition: all 0.3s ease;
            height: 56px;
            box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
        }
        
        .search-input:focus {
            border-color: var(--brand-500);
            box-shadow: 0 0 0 3px rgba(37, 73, 216, 0.1);
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--tron-dark-gray);
            font-size: 18px;
        }
        
        .header-icons {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .icon-btn {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background-color: var(--0);
            border: 1px solid var(--100);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tron-text);
            font-size: 24px;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
        }
        
        .icon-btn:hover {
            background-color: var(--brand-500);
            color: var(--0);
            transform: translateY(-2px);
            border-color: var(--brand-500);
        }
        
        .cart-badge {
            background-color: #FF4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -5px;
            right: -5px;
        }
        
        /* Navigation */
        .main-nav {
            background-color: var(--tron-white);
            border-bottom: 1px solid #E5E5E5;
        }
        
        .nav-link {
            color: var(--tron-text);
            font-weight: 500;
            padding: 15px 20px;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            color: var(--tron-blue);
            background-color: var(--tron-light-blue);
        }
        
        /* Product Cards */
        .product-card {
            background: var(--0);
            border-radius: 24px;
            border: 1px solid var(--100);
            box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            overflow: hidden;
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background-color: var(--tron-gray);
        }
        
        .product-badges {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-discount {
            background-color: var(--tron-blue);
            color: white;
        }
        
        .badge-delivery {
            background-color: white;
            color: var(--tron-text);
            border: 1px solid #E5E5E5;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-sku {
            font-size: 12px;
            color: var(--tron-dark-gray);
            margin-bottom: 5px;
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 10px;
        }
        
        .star {
            color: #FFD700;
            font-size: 14px;
        }
        
        .product-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--tron-text);
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .product-price {
            margin-bottom: 15px;
        }
        
        .price-label {
            font-size: 12px;
            color: var(--tron-dark-gray);
            margin-bottom: 5px;
        }
        
        .current-price {
            font-size: 20px;
            font-weight: 700;
            color: var(--tron-text);
        }
        
        .old-price {
            font-size: 16px;
            color: var(--tron-dark-gray);
            text-decoration: line-through;
            margin-left: 10px;
        }
        
        .unit-selector {
            display: flex;
            gap: 5px;
            margin-bottom: 15px;
        }
        
        .unit-btn {
            padding: 5px 12px;
            border: 1px solid #E5E5E5;
            background-color: white;
            border-radius: 15px;
            font-size: 12px;
            color: var(--tron-text);
            transition: all 0.3s ease;
        }
        
        .unit-btn.active {
            background-color: var(--tron-blue);
            color: white;
            border-color: var(--tron-blue);
        }
        
        .add-to-cart-btn {
            width: 100%;
            background-color: var(--brand-500);
            color: var(--0);
            border: none;
            padding: 19px 54px;
            border-radius: 16px;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s ease;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .add-to-cart-btn:hover {
            background-color: var(--brand-600);
            transform: translateY(-2px);
        }
        
        /* Promotional Cards */
        .promo-card {
            background: var(--brand-50);
            border-radius: 24px;
            padding: 20px 24px;
            color: var(--900);
            position: relative;
            overflow: hidden;
            height: 271px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            justify-content: flex-start;
        }
        
        .promo-card.featured {
            background: var(--brand-500);
            color: var(--0);
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        .promo-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 10px;
            line-height: 160%;
        }
        
        .promo-description {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 20px;
            line-height: 22px;
        }
        
        .promo-discount {
            font-size: 32px;
            font-weight: 500;
            margin: 20px 0;
            letter-spacing: -0.01em;
        }
        
        /* News Cards */
        .news-card {
            border-radius: 24px;
            border: 1px solid var(--100);
            overflow: hidden;
            position: relative;
            height: 465px;
            box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
        }
        
/* Actions (Наши акции) */
.actions-card {
    background: linear-gradient(135deg, #2f5bff 0%, #3aa0ff 100%);
    border-radius: 24px;
    padding: 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.actions-hero {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actions-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.actions-percent {
    font-size: 136px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2px;
}

.actions-capsules { display: flex; gap: 16px; }
.actions-capsule {
    width: 180px; height: 220px;
    background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
    border-radius: 28px;
    display:flex; align-items:center; justify-content:center;
}
.actions-capsule img { max-width: 100%; max-height: 100%; object-fit: contain; }

.actions-half { min-height: 180px; display:flex; align-items:center; justify-content:space-between; }
.actions-badge {
    position: absolute; right: 26px; top: 18px;
    background: #fff; color: #ff3b3b; font-weight: 800;
    padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* B2B banner (Покупайте как юрлицо) */
.b2b-card {
    position: relative;
    border-radius: 24px;
    border: 1px solid #e9e9ea;
    padding: 28px 28px 28px 28px;
    background: linear-gradient(90deg, #f4f7ff 0%, #e9f0ff 60%, #ddeaff 100%);
    overflow: hidden;
    box-shadow: 0 0 4.8px rgba(0,0,0,.06);
    min-height: 280px;
}
.b2b-ellipse {
    position: absolute; width: 580px; height: 303px; right: -120px; top: -40px;
    background: #2549d8; border-radius: 50%; filter: blur(80px); opacity: .35;
}
.b2b-title { font-weight: 700; font-size: 24px; margin-bottom: 18px; color:#2b2b2e; }
.b2b-list { display:flex; gap:20px; }
.b2b-col { display:flex; flex-direction:column; gap:16px; }
.b2b-item { display:flex; align-items:center; gap:8px; color:#2b2b2e; font-size:14px; font-weight:500; }
.b2b-item i { color:#2549d8; }
.b2b-illustration { position:absolute; right:18px; bottom:0; top:0; display:flex; align-items:flex-end; }
.b2b-illustration img { height: 100%; width:auto; object-fit: contain; }

/* First action card (radial bg + big percent) */
.actions-first {
    background: radial-gradient(closest-side, #7c92e8 0%, #2549d8 100%);
    border-radius: 42px;
    min-height: 340px;
    padding: 38px 42px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    
    justify-content: space-between;
}
.actions-first .actions-left h3 {font-size:32px; font-weight:600; margin:0 0 10px 0;}
.actions-first .actions-left .percent {font-size:126px; font-weight:800; letter-spacing:-.03em; line-height:1;}
.actions-first .capsules {display:flex; gap:28px;}
.actions-first .capsule {width:213px; height:266px; border-radius:32px; background: linear-gradient(180deg, #ffffff 0%, #7c92e8 100%); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.actions-first .capsule img {max-height:260px; width:auto; object-fit:contain;}

/* Half cards (bottom two) */
.actions-half-card {
    background: radial-gradient(closest-side, #7c92e8 0%, #2549d8 100%);
    border-radius: 42px;
    min-height: 341px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.actions-half-title { position:absolute; left:172px; top:43px; font-size:32px; font-weight:500; letter-spacing:-.01em; }
.actions-half-capsule { position:absolute; left:175.5px; top:109px; width:317px; height:266px; border-radius:46px; background: linear-gradient(180deg,#fff 0%, #7c92e8 100%); overflow:hidden; display: flex; align-items: center; justify-content: center; }
.actions-half-capsule img { position:relative; width:280px; height:280px; object-fit:cover; }
.actions-half-capsule img.blur { filter: blur(27px); }
.actions-half-capsule img.main { }
.actions-half-badge { position:absolute; left:394.5px; top:95px; background:#fff; color:#f35252; padding:2px 15px; border-radius:35px; box-shadow:0 4px 21.9px rgba(0,0,0,.14); font-weight:700; font-size:32px; letter-spacing:-.03em; }
        .news-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .news-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            /* слегка синий фильтр поверх изображения */
            background: linear-gradient(180deg, rgba(37,73,216,0) 0%, rgba(37,73,216,0.55) 35%, rgba(37,73,216,0.85) 100%);
            padding: 30px 20px 20px;
            color: #ffffff;
        }
        
        .news-date {
            font-size: 12px;
            opacity: 0.95;
            margin-bottom: 5px;
            color: #ffffff;
        }
        
        .news-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
            color: #ffffff;
        }
        
        .news-link {
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* Footer */
        .footer {
            background-color: var(--brand-600);
            color: var(--0);
            padding: 42px 56px 28px;
            border-radius: 36px;
            margin-bottom: 20px;
        }
        
        .footer-logo {
            font-size: 20px;
            font-weight: 600;
            color: var(--0);
            margin-bottom: 20px;
            position: relative;
        }
        
        .footer-logo::before,
        .footer-logo::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--0);
        }
        
        .footer-logo::before {
            top: -10px;
        }
        
        .footer-logo::after {
            bottom: -10px;
        }
        
        .phone-number,
        .email-address {
            color: var(--0);
            font-weight: 500;
            font-size: 16px;
        }
        
        .phone-label,
        .email-label {
            color: var(--brand-100);
            font-size: 14px;
            margin-top: 5px;
        }
        
        .footer-section a {
            color: var(--0);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-section a:hover {
            color: var(--brand-100);
        }
        
        .footer-right {
            text-align: right;
        }
        
        .footer-left {
            text-align: left;
        }
        
        .footer-bottom {
            border-top: 1px solid var(--brand-700);
            padding-top: 20px;
            margin-top: 30px;
            color: var(--brand-100);
        }
        
        .footer-bottom small {
            color: var(--brand-100);
        }
        
        .social-icons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            background-color: var(--brand-700);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--0);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            background-color: var(--brand-500);
            color: var(--0);
        }
        
        /* Mega Menu */
        .mega-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--0);
            border: 1px solid var(--100);
            border-top: none;
            box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            display: none;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .mega-menu.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        
        .mega-menu-content {
            padding: 40px 0;
        }
        
        .mega-menu-columns {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .mega-menu-column {
            flex: 1;
        }
        
        .mega-menu-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--900);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--brand-500);
        }
        
        .mega-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .mega-menu-list li {
            margin-bottom: 12px;
        }
        
        .mega-menu-list a {
            color: var(--600);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
            display: block;
            padding: 5px 0;
        }
        
        .mega-menu-list a:hover {
            color: var(--brand-500);
        }
        
        .mega-menu-featured {
            border-top: 1px solid var(--100);
            padding-top: 30px;
        }
        
        .mega-menu-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        
        .mega-menu-card {
            background: var(--brand-50);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .mega-menu-card:hover {
            background: var(--brand-100);
            transform: translateY(-5px);
        }
        
        .mega-menu-card img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin-bottom: 10px;
        }
        
        .mega-menu-card span {
            font-size: 14px;
            font-weight: 500;
            color: var(--900);
        }
        
        /* Category Cards */
        .category-card {
            background: var(--0);
            border-radius: 18px;
            border: 1px solid var(--100);
            padding: 12px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
        }
        
        .category-image {
            margin-bottom: 15px;
        }
        
        .category-image img {
            width: 100%;
            height: 139px;
            object-fit: cover;
            border-radius: 12px;
        }
        
        .category-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--900);
            margin-bottom: 10px;
        }
        
        .category-description {
            font-size: 14px;
            color: var(--500);
            margin-bottom: 0;
        }
        
         /* Promotional Slider */
         .promo-slider-container {
             position: relative;
             overflow: hidden; /* прокрутка внутри контейнера */
             padding: 20px 0;
         }
         
         .promo-slider {
             position: relative;
             width: 100%;
         }
         
         .slider-track {
             display: flex;
             transition: transform 0.5s ease-in-out;
             gap: 20px;
             align-items: center;
             /* убираем визуальный отступ в начале и конце трека */
             margin: 0 -10px;
         }
         /* Owl Carousel overrides */
         .owl-carousel.slider-track {
             display: block;
             gap: 0;
             align-items: stretch;
             margin: 0;
         }
         
         .slider-item {
             flex: 0 0 240px;
             transition: all 0.3s ease;
             height: 300px;
             padding: 0 10px; /* компенсируем отрицательные поля у трека */
         }
         .owl-carousel .slider-item {
             flex: none;
             padding: 0 10px;
             height: 300px;
         }
         
         .slider-item.active {
             flex: 0 0 520px;
             height: 300px;
             z-index: 2;
         }
         /* масштаб для центрального элемента Owl */
         .owl-carousel .owl-item .slider-item { transform: scale(0.92); }
         .owl-carousel .owl-item.center .slider-item { transform: scale(1.05); }
         
         .slider-item .promo-card {
             height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             position: relative;
             overflow: hidden;
         }
         
         .slider-item.active .promo-card {
             background: var(--brand-500);
             color: var(--0);
         }
         .owl-carousel .owl-item.center .promo-card {
             background: var(--brand-500);
             color: var(--0);
         }
         
         .slider-item.active .promo-card .promo-title {
             color: var(--0);
         }
         
         .slider-item.active .promo-card .promo-description {
             color: var(--0);
             opacity: 0.9;
         }
         
         .promo-image {
             text-align: center;
             margin-top: auto;
         }
         
         .promo-image img {
             height: 250px;
             object-fit: contain;
         }
         
         .promo-icons {
             display: flex;
             flex-wrap: wrap;
             gap: 15px;
             justify-content: center;
             margin-top: 20px;
         }
         
         .promo-icons i {
             font-size: 24px;
             color: var(--0);
             opacity: 0.8;
             animation: float 3s ease-in-out infinite;
         }
         
         .promo-icons i:nth-child(2) { animation-delay: 0.5s; }
         .promo-icons i:nth-child(3) { animation-delay: 1s; }
         .promo-icons i:nth-child(4) { animation-delay: 1.5s; }
         .promo-icons i:nth-child(5) { animation-delay: 2s; }
         .promo-icons i:nth-child(6) { animation-delay: 2.5s; }
         
         .slider-nav {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             background: var(--0);
             border: 1px solid var(--100);
             border-radius: 50%;
             width: 50px;
             height: 50px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s ease;
             z-index: 3;
             box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
         }
         /* Стили и позиционирование стандартных стрелок Owl */
         .owl-carousel .owl-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
         .owl-carousel .owl-nav button { pointer-events: all; background: var(--0) !important; border: 1px solid var(--100) !important; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
         .owl-carousel .owl-nav button:hover { background: var(--brand-500) !important; color: var(--0) !important; }
         
         .slider-nav:hover {
             background: var(--brand-500);
             color: var(--0);
             transform: translateY(-50%) scale(1.1);
         }
         
         .slider-prev {
             left: 10px; /* поверх слайда, не обрезается */
         }
         
         .slider-next {
             right: 10px; /* поверх слайда, не обрезается */
         }
         
         .slider-dots {
             display: flex;
             justify-content: center;
             gap: 10px;
             margin-top: 30px;
         }
         
         .dot {
             width: 12px;
             height: 12px;
             border-radius: 50%;
             background: var(--100);
             cursor: pointer;
             transition: all 0.3s ease;
         }
         
         .dot.active {
             background: var(--brand-500);
             transform: scale(1.2);
         }
         
         .dot:hover {
             background: var(--brand-200);
         }
         
         /* Business Section */
         .business-main-card {
             background: var(--0);
             border-radius: 24px;
             padding: 40px;
             position: relative;
             overflow: hidden;
             box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
             min-height: 500px;
         }
         
         .business-title {
             font-size: 28px;
             font-weight: 600;
             color: var(--900);
             margin-bottom: 20px;
             line-height: 1.3;
         }
         
         .business-subtitle {
             font-size: 20px;
             font-weight: 500;
             color: var(--900);
             margin-bottom: 30px;
         }
         
         .business-features {
             list-style: none;
             padding: 0;
             margin: 0;
             margin-bottom: 30px;
         }
         
         .business-feature {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
             font-size: 16px;
             color: var(--900);
         }
         
         .feature-icon {
             color: var(--brand-500);
             font-size: 20px;
             margin-right: 15px;
             flex-shrink: 0;
         }
         
         .business-illustration {
             position: absolute;
             right: 20px;
             top: 50%;
             transform: translateY(-50%);
             width: 200px;
             height: 200px;
             z-index: 1;
         }
         
         .business-illustration img {
             width: 100%;
             height: 100%;
             object-fit: contain;
         }
         
         .business-benefits {
             display: flex;
             flex-direction: column;
             gap: 20px;
         }
         
         .benefit-card {
             background: var(--0);
             border-radius: 18px;
             padding: 25px;
             display: flex;
             align-items: center;
             gap: 15px;
             box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.06);
             transition: all 0.3s ease;
             border: 1px solid var(--100);
         }
         
         .benefit-card:hover {
             transform: translateY(-5px);
             box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
         }
         
         .benefit-icon {
             color: var(--brand-500);
             font-size: 24px;
             flex-shrink: 0;
         }
         
         .benefit-text {
             font-size: 16px;
             font-weight: 500;
             color: var(--900);
             line-height: 1.4;
         }
         
         /* Stores Section */
         .stores-container {
             height: 100%;
         }
         
         .stores-title {
             font-size: 32px;
             font-weight: 700;
             color: var(--900);
             margin-bottom: 30px;
             text-align: left;
         }
         
         .city-card {
             background: var(--0);
             border-radius: 16px;
             margin-bottom: 20px;
             box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
             overflow: hidden;
         }
         
         .city-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 20px 24px;
             cursor: pointer;
             transition: all 0.3s ease;
             background: var(--0);
         }
         
         .city-header:hover {
             background: var(--brand-50);
         }
         
         .city-name {
             font-size: 20px;
             font-weight: 600;
             color: var(--900);
             margin: 0;
         }
         
         .city-arrow {
             color: var(--brand-500);
             font-size: 18px;
             transition: transform 0.3s ease;
         }
         
         .city-card.active .city-arrow {
             transform: rotate(180deg);
         }
         
         .city-stores {
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.3s ease;
             background: var(--0);
         }
         
         .city-stores.active {
             max-height: 500px;
         }
         
         .store-item {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 20px 24px;
             margin: 10px 0;
             cursor: pointer;
             transition: all 0.3s ease;
             border: 2px solid transparent;
             background: var(--0);
             border-radius: 12px;
             box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
         }
         
         .store-item:hover {
             background: var(--brand-50);
         }
         
         .store-item.active {
             background: var(--brand-50);
             border-color: var(--brand-500);
             box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.2);
         }
         
         .store-address {
             flex: 1;
         }
         
         .store-address p {
             margin: 0;
             font-size: 16px;
             color: var(--600);
             line-height: 1.5;
         }
         
         .store-address p:first-child {
             font-weight: 500;
             color: var(--900);
             margin-bottom: 8px;
         }
         
        .store-phone {
            font-size: 14px;
            color: var(--500);
        }
        
        /* New Store Styles - No Accordion */
        .city-section {
            margin-bottom: 30px;
        }
        
        .city-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--900);
            margin: 0 0 16px 0;
            padding: 0;
        }
        
        .store-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 24px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            background: var(--0);
            border-radius: 12px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .store-card:hover {
            background: var(--brand-50);
        }
        
        .store-card.active {
            background: var(--brand-50);
            border-color: var(--brand-500);
            box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.2);
        }
        
        .store-info {
            flex: 1;
        }
        
        .store-address-text {
            margin: 0 0 8px 0;
            font-size: 16px;
            font-weight: 500;
            color: var(--900);
            line-height: 1.5;
        }
        
        .store-info .store-phone {
            margin: 0;
            font-size: 14px;
            color: var(--500);
        }
        
        .store-marker {
            color: var(--500);
            font-size: 24px;
            margin-left: 16px;
            transition: all 0.3s ease;
        }
        
        .store-marker.active {
            color: var(--brand-500);
            transform: scale(1.2);
        }
        
        /* City Header Card */
        .city-header-card {
            margin-bottom: 12px !important;
        }
        
        .city-name-text {
            font-size: 18px !important;
            font-weight: 600 !important;
            margin-bottom: 0 !important;
        }
        
        .city-toggle-icon {
            color: var(--brand-500);
            font-size: 20px;
            transition: transform 0.3s ease;
        }
        
        .city-header-card.active .city-toggle-icon {
            transform: rotate(180deg);
        }
        
        /* City Stores List */
        .city-stores-list {
            display: none;
            padding-left: 16px;
        }
        
        .city-stores-list.active {
            display: block;
        }
        
        .city-stores-list .store-card {
            margin-bottom: 12px;
        }
         
         .store-icon {
             font-size: 24px;
             color: var(--500);
             transition: all 0.3s ease;
             margin-left: 20px;
         }
         
         .store-icon.active {
             color: var(--brand-500);
         }
         
         .map-container {
             background: var(--0);
             border-radius: 16px;
             box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
             height: 500px;
         }
         
         .yandex-map {
             width: 100%;
             height: 100%;
             border-radius: 12px;
             overflow: hidden;
         }
         
         /* Responsive */
         @media (max-width: 768px) {
             .search-container {
                 max-width: 100%;
                 margin: 10px 0;
             }
             
             .header-icons {
                 gap: 10px;
             }
             
             .icon-btn {
                 width: 40px;
                 height: 40px;
                 font-size: 16px;
             }
             
             .business-main-card {
                 padding: 30px 20px;
                 min-height: auto;
             }
             
             .business-title {
                 font-size: 24px;
             }
             
             .business-subtitle {
                 font-size: 18px;
             }
             
             .business-illustration {
                 position: static;
                 transform: none;
                 width: 150px;
                 height: 150px;
                 margin: 20px auto 0;
                 display: block;
             }
             
             .stores-container {
                 margin-bottom: 30px;
             }
             
             .stores-title {
                 font-size: 28px;
             }
             
             .city-card {
                 margin-bottom: 15px;
             }
             
             .city-header {
                 padding: 15px 20px;
             }
             
             .city-name {
                 font-size: 18px;
             }
             
             .store-item {
                 padding: 15px 20px 15px 30px;
                 margin: 8px 0;
             }
             
             .store-address p {
                 font-size: 14px;
             }
             
             .store-phone {
                 font-size: 13px;
             }
             
             .store-icon {
                 font-size: 20px;
                 margin-left: 15px;
             }
             
             .map-container {
                 height: 400px;
             }
         }