/* ==========================================================================

   Mulu Parts - Mobile & Tablet Responsive Architecture (mobile.css)

   Full mobile UX overhaul:

   - Complete deactivation & removal of 3D Canvas / WebGL overhead on mobile

   - Touch-optimized headers, bottom sheets, and native mobile navigation

   - iOS Safari zoom bug prevention (font-size >= 16px on inputs)

   - Solved squished 4-column advantages grid on mobile

   - Support chat turned into full-screen native mobile messenger

   - iPhone safe-area padding for gestures and home indicator

   ========================================================================== */



/* ─── Общие мобильные переменные ─── */

:root {

    --mobile-nav-height: 60px;

    --mobile-header-height: 56px;

    --touch-target-min: 44px;

}



/* ==========================================================================

   1. ПЛАНШЕТЫ И СРЕДНИЕ ЭКРАНЫ (<= 1024px)

   ========================================================================== */

@media (max-width: 1024px) {

    /* Отключение 3D-модели автомобиля на планшетах для производительности */

    #keyCanvas {

        display: none !important;

    }

    .hero-video {

        display: none !important;

    }



    .hero-track {

        min-height: auto !important;

        padding-top: 80px !important;

        padding-bottom: 30px !important;

    }

    .hero-sticky {

        padding: 20px 24px !important;

        justify-content: center !important;

    }

    .hero-content {

        max-width: 100% !important;

        text-align: center !important;

    }

    .hero-content h1 {

        font-size: 38px !important;

        line-height: 1.12 !important;

    }



    /* Сетка преимуществ: 2 колонки на планшетах */

    .advantages-grid {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 16px !important;

    }



    .section {

        padding: 60px 24px 40px !important;

    }

}



/* ==========================================================================

   2. СМАРТФОНЫ И МОБИЛЬНЫЕ УСТРОЙСТВА (<= 768px)

   ========================================================================== */

@media (max-width: 768px) {

    /* ── Предотвращение горизонтального скролла на странице ── */

    html, body {

        overflow-x: hidden !important;

        width: 100% !important;

        max-width: 100% !important;

    }

    body {

        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 12px) + 16px) !important;

    }



    /* ── Полное отключение и сокрытие 3D-сцены автомобиля ── */

    #keyCanvas, 

    canvas#keyCanvas,

    .hero-video {

        display: none !important;

        visibility: hidden !important;

        pointer-events: none !important;

        opacity: 0 !important;

        height: 0 !important;

        width: 0 !important;

    }



    /* ─── Шапка сайта (Header) ─── */

    .header {

        padding: 8px 16px !important;

        height: var(--mobile-header-height) !important;

        background: rgba(4, 6, 10, 0.92) !important;

        backdrop-filter: blur(20px) !important;

        -webkit-backdrop-filter: blur(20px) !important;

    }

    /* Скрываем десктопные ссылки меню — навигация вынесена в нижний бар */

    .header .nav {

        display: none !important;

    }

    .header-vin-btn {

        display: none !important;

    }

    .header .logo {

        font-size: 22px !important;

        letter-spacing: -0.5px !important;

    }

    .header-actions {

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

    }

    /* Компактный виджет активного авто из Гаража */

    .selected-car-widget {

        display: flex !important;

        padding: 4px 8px !important;

        border-radius: 10px !important;

        max-width: 130px !important;

        background: rgba(255, 255, 255, 0.05) !important;

        border: 1px solid rgba(255, 255, 255, 0.1) !important;

    }

    .car-name {

        font-size: 11.5px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        max-width: 110px !important;

    }

    .car-change {

        font-size: 9px !important;

        margin-top: 1px !important;

    }

    .icon-btn {

        width: 38px !important;

        height: 38px !important;

        font-size: 16px !important;

        border-radius: 12px !important;

    }

    .cart-badge {

        width: 17px !important;

        height: 17px !important;

        font-size: 10px !important;

        top: -3px !important;

        right: -3px !important;

    }



    /* ─── Hero-блок без 3D ─── */

    .hero-track {

        min-height: auto !important;

        padding-top: calc(var(--mobile-header-height) + 16px) !important;

        padding-bottom: 20px !important;

    }

    .hero-sticky {

        padding: 0 16px !important;

        justify-content: center !important;

    }

    .hero-content {

        text-align: left !important;

        width: 100% !important;

    }

    .hero-content > div[style*="inline-flex"] {

        font-size: 11px !important;

        padding: 4px 10px !important;

        margin-bottom: 12px !important;

    }

    .hero-content h1 {

        font-size: 26px !important;

        line-height: 1.18 !important;

        margin: 0 0 12px 0 !important;

        letter-spacing: -0.5px !important;

        word-break: normal !important;

    }

    .hero-content h1 br {

        display: none !important;

    }

    .hero-content .sub {

        font-size: 13px !important;

        line-height: 1.48 !important;

        color: var(--text-muted) !important;

        margin-bottom: 16px !important;

    }



    /* ── Карточка заявки эксперту (Hero Concierge) ── */

    .hero-concierge-card {

        padding: 20px 16px !important;

        border-radius: 20px !important;

        margin-bottom: 18px !important;

        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;

        background: rgba(11, 15, 23, 0.96) !important;

        border: 1px solid rgba(255, 255, 255, 0.14) !important;

    }

    .hero-card-header {

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        margin-bottom: 14px !important;

    }

    .hero-card-title {

        font-size: 13.5px !important;

    }

    .hero-live-badge {

        font-size: 11.5px !important;

    }



    /* Просторные табы в 3 колонки без слипания и переполнения */

    .hero-modes-nav {

        display: grid !important;

        grid-template-columns: repeat(3, 1fr) !important;

        gap: 5px !important;

        padding: 4px !important;

        margin-bottom: 14px !important;

        border-radius: 12px !important;

    }

    .hero-modes-nav::-webkit-scrollbar {

        display: none !important;

    }

    .hero-mode-tab {

        flex: unset !important;

        padding: 9px 4px !important;

        font-size: 11.5px !important;

        font-weight: 600 !important;

        border-radius: 9px !important;

        white-space: nowrap !important;

        min-height: 40px !important;

        text-align: center !important;

        justify-content: center !important;

    }

    .hero-mode-tab.active {

        background: rgba(255, 255, 255, 0.14) !important;

        color: #ffffff !important;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;

    }



    /* Гарантия полного сокрытия неактивных табов на мобильных */

    .hero-mode-pane[style*="display: none"],

    .hero-mode-pane[style*="display:none"],

    #heroPaneSingle[style*="display: none"],

    #heroPaneSingle[style*="display:none"],

    #heroPaneEstimate[style*="display: none"],

    #heroPaneEstimate[style*="display:none"],

    #heroPaneMaintenance[style*="display: none"],

    #heroPaneMaintenance[style*="display:none"] {

        display: none !important;

    }



    /* Режим 1: Поиск детали с четкой иерархией кнопок */

    #heroPaneSingle {

        flex-direction: column !important;

        gap: 12px !important;

    }

    .hero-single-input-wrap {

        width: 100% !important;

        min-width: 0 !important;

    }

    #heroQuickInput {

        width: 100% !important;

        min-width: 0 !important;

        height: 48px !important;

        font-size: 16px !important; /* Предотвращает зум в Safari на iOS */

        padding: 0 16px !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;

        background: rgba(255, 255, 255, 0.06) !important;

        border: 1px solid rgba(255, 255, 255, 0.16) !important;

        color: #ffffff !important;

    }

    /* Второстепенная кнопка прикрепления — не спорит с главным действием */

    .hero-upload-btn {

        width: 100% !important;

        height: 40px !important;

        justify-content: center !important;

        padding: 0 14px !important;

        font-size: 12.5px !important;

        font-weight: 500 !important;

        border-radius: 10px !important;

        box-sizing: border-box !important;

        background: rgba(255, 255, 255, 0.03) !important;

        border: 1px dashed rgba(255, 255, 255, 0.2) !important;

        color: #94a3b8 !important;

    }

    .hero-upload-btn:hover,

    .hero-upload-btn:active {

        background: rgba(255, 255, 255, 0.07) !important;

        border-color: rgba(255, 255, 255, 0.35) !important;

        color: #ffffff !important;

    }

    /* Доминантная главная кнопка целевого действия */

    #heroPaneSingle .btn-primary,

    .hero-submit-btn {

        width: 100% !important;

        height: 48px !important;

        padding: 0 16px !important;

        font-size: 15px !important;

        font-weight: 600 !important;

        border-radius: 12px !important;

        text-align: center !important;

        justify-content: center !important;

        display: flex !important;

        align-items: center !important;

        background: #ffffff !important;

        color: #040810 !important;

        box-shadow: 0 8px 24px rgba(255, 255, 255, 0.16) !important;

    }



    /* Режим 2: Смета с СТО */

    #heroEstimateInput {

        font-size: 16px !important;

        padding: 12px 14px !important;

        min-height: 90px !important;

        border-radius: 12px !important;

    }

    .hero-estimate-actions {

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

    }

    .hero-estimate-actions .hero-upload-btn,

    .hero-estimate-actions .btn-primary {

        width: 100% !important;

        justify-content: center !important;

        text-align: center !important;

    }



    /* Режим 3: Комплект ТО на мобильном */

    .to-checklist {

        grid-template-columns: 1fr !important;

        gap: 8px !important;

        margin-bottom: 14px !important;

    }

    .to-chip-content {

        padding: 12px 14px !important;

        border-radius: 12px !important;

    }

    .to-submit-wrap {

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

    }

    .to-note {

        text-align: center !important;

        font-size: 12px !important;

    }

    .to-submit-wrap .btn-primary {

        width: 100% !important;

        height: 48px !important;

        text-align: center !important;

        justify-content: center !important;

    }



    /* Гарантии Hero: в одну колонку вместо сплющенных 3 */

    .hero-concierge-card > div[style*="grid-template-columns: repeat(3, 1fr)"],

    .hero-concierge-card > div[style*="repeat(3, 1fr)"] {

        grid-template-columns: 1fr !important;

        gap: 7px !important;

        padding-top: 12px !important;

        margin-top: 12px !important;

    }



    /* Мессенджеры в Hero */

    .hero-messenger-bridge {

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 8px !important;

        text-align: center !important;

    }

    .hero-messenger-bridge > div {

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;

        gap: 8px !important;

    }

    .hero-messenger-bridge .btn-messenger {

        justify-content: center !important;

        padding: 10px 12px !important;

        font-size: 12.5px !important;

        border-radius: 10px !important;

    }



    /* Кнопки действий Hero */

    .hero-actions {

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

        width: 100% !important;

    }

    .hero-actions button,

    .hero-actions a.btn-outline {

        width: 100% !important;

        text-align: center !important;

        justify-content: center !important;

        padding: 12px 16px !important;

        font-size: 13.5px !important;

        border-radius: 12px !important;

    }



    /* ─── Секция Поиска (#searchSection) ─── */

    .section {

        padding: 32px 16px 20px !important;

    }

    .section-header {

        margin-bottom: 20px !important;

    }

    .section-header h2 {

        font-size: 22px !important;

        line-height: 1.2 !important;

        margin-bottom: 6px !important;

    }

    .section-header p {

        font-size: 13px !important;

        line-height: 1.45 !important;

    }

    .search-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .search-box {

        padding: 4px 4px 4px 14px !important;

        border-radius: 14px !important;

        min-height: 48px !important;

    }

    .search-box input {

        font-size: 16px !important; /* Отключает автозум в iOS */

        padding: 10px 0 !important;

    }

    .search-box button {

        padding: 10px 16px !important;

        border-radius: 10px !important;

        font-size: 13px !important;

        white-space: nowrap !important;

        min-height: 40px !important;

    }



    /* ─── Каталог и Категории (#catalogSection) ─── */

    #catalogCategories.catalog-grid {

        grid-template-columns: 1fr 1fr !important;

        gap: 10px !important;

    }

    @media (max-width: 380px) {

        #catalogCategories.catalog-grid {

            grid-template-columns: 1fr !important;

        }

    }

    .catalog-card {

        padding: 14px 12px !important;

        border-radius: 16px !important;

    }

    .catalog-card .icon {

        font-size: 24px !important;

        margin-bottom: 8px !important;

    }

    .catalog-card h4 {

        font-size: 14px !important;

        margin-bottom: 4px !important;

        line-height: 1.25 !important;

    }

    .catalog-card p {

        font-size: 11.5px !important;

        line-height: 1.35 !important;

        margin-bottom: 8px !important;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }



    /* Товары в каталоге: 1 колонка на смартфонах */

    #catalogProductsContent.catalog-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .catalog-card-image {

        height: 140px !important;

        margin-bottom: 12px !important;

        border-radius: 12px !important;

    }

    .prod-price {

        font-size: 19px !important;

        margin-top: 6px !important;

    }

    .prod-card-actions {

        display: flex !important;

        flex-direction: column !important;

        gap: 6px !important;

        margin-top: 10px !important;

    }

    .prod-card-actions .btn-buy,

    .prod-card-actions .btn-quick-buy {

        width: 100% !important;

        padding: 11px 12px !important;

        font-size: 13px !important;

        justify-content: center !important;

        text-align: center !important;

        border-radius: 10px !important;

        box-sizing: border-box !important;

    }



    /* Подкатегории и бренды */

    .subcat-grid {

        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;

        gap: 10px !important;

        margin-bottom: 20px !important;

    }

    @media (max-width: 520px) {

        .subcat-grid {

            grid-template-columns: 1fr !important;

            gap: 8px !important;

        }

    }

    .subcat-card {

        padding: 14px 16px !important;

        border-radius: 14px !important;

    }

    .subcat-text h5 {

        font-size: 14px !important;

    }

    .brand-filter-wrap {

        gap: 6px !important;

        margin-bottom: 16px !important;

    }

    .brand-chip {

        padding: 6px 11px !important;

        font-size: 11.5px !important;

        border-radius: 14px !important;

    }



    /* Навигация по категориям в каталоге (табы) */

    .catalog-nav-tabs-wrap {

        padding: 10px 12px !important;

        border-radius: 14px !important;

        margin-bottom: 16px !important;

    }

    .catalog-nav-tabs {

        gap: 6px !important;

        padding-bottom: 2px !important;

    }

    .catalog-nav-tab {

        padding: 6px 12px !important;

        font-size: 12px !important;

    }



    /* ── Карточка ручного ввода VIN (.vin-manual-card) ── */

    .vin-manual-card {

        padding: 16px 14px !important;

        border-radius: 16px !important;

        margin-bottom: 20px !important;

    }

    .vin-manual-card h3 {

        font-size: 17px !important;

    }

    .vin-manual-card p {

        font-size: 12.5px !important;

    }

    #vinManualEnrichForm {

        grid-template-columns: 1fr !important;

        gap: 10px !important;

    }

    #vinManualEnrichForm input {

        font-size: 16px !important; /* Защита от зума Safari */

        padding: 12px 14px !important;

        border-radius: 10px !important;

    }

    #btnSubmitManualVin {

        width: 100% !important;

        padding: 13px !important;

        font-size: 14px !important;

    }



    /* ── Карточка цифрового паспорта автомобиля ── */

    .vin-passport-card {

        padding: 16px 14px !important;

        border-radius: 16px !important;

        margin-bottom: 20px !important;

    }

    .vin-passport-header {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 12px !important;

    }

    .vin-passport-specs {

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

    }

    @media (max-width: 380px) {

        .vin-passport-specs {

            grid-template-columns: 1fr !important;

        }

    }



    /* ─── Секция преимуществ (#advantages) ─── */

    /* Исправлен баг со сплющенными в 70px 4 колонками */

    .advantages-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .advantage-item {

        padding: 18px 16px !important;

        border-radius: 16px !important;

    }

    .advantage-item .icon {

        font-size: 24px !important;

        margin-bottom: 8px !important;

    }

    .advantage-item h4 {

        font-size: 15.5px !important;

        margin-bottom: 6px !important;

    }

    .advantage-item p {

        font-size: 13px !important;

        line-height: 1.45 !important;

    }



    /* ─── Подвал (Footer) ─── */

    .footer {

        padding: 32px 16px calc(var(--mobile-nav-height) + 24px) !important;

        text-align: center !important;

    }

    .footer-links {

        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

        margin-bottom: 20px !important;

    }

    .footer-links a {

        font-size: 12.5px !important;

        padding: 4px 0 !important;

    }



    /* ─── Модальные окна: Нативный Bottom Sheet на смартфонах ─── */

    .modal-overlay {

        align-items: flex-end !important;

        padding: 0 !important;

        overscroll-behavior: contain !important;

        touch-action: none !important;

    }

    .modal-content {

        width: 100% !important;

        max-width: 100% !important;

        border-radius: 22px 22px 0 0 !important;

        margin: auto 0 0 0 !important;

        max-height: 90vh !important;

        padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 16px)) !important;

        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85) !important;

        border-left: none !important;

        border-right: none !important;

        border-bottom: none !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

        overscroll-behavior: contain !important;

        touch-action: pan-y !important;

        position: relative !important;

    }

    .modal-content.orders-mode {

        max-height: 90vh !important;

        padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 16px)) !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

        overscroll-behavior: contain !important;

    }

    /* Индикатор перетаскивания шторки (Native Sheet Handle) */

    .modal-content::before {

        content: '';

        display: block;

        width: 44px;

        height: 5px;

        background: rgba(255, 255, 255, 0.22);

        border-radius: 5px;

        margin: -6px auto 16px auto;

    }

    .modal-close {

        top: 14px !important;

        right: 16px !important;

        width: 36px !important;

        height: 36px !important;

        font-size: 24px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        background: rgba(255, 255, 255, 0.08) !important;

        border-radius: 50% !important;

    }

    .modal-content input,

    .modal-content textarea,

    .modal-content select {

        font-size: 16px !important; /* Убирает автозуммирование в iOS */

    }

    .fio-grid {

        grid-template-columns: 1fr !important;

        gap: 8px !important;

    }

    .service-book-tabs {

        display: flex !important;

        gap: 6px !important;

        width: 100% !important;

    }

    .service-tab-btn {

        flex: 1 !important;

        font-size: 12px !important;

        padding: 8px 6px !important;

        text-align: center !important;

        white-space: nowrap !important;

    }



    /* ─── Боковая панель корзины (Cart Drawer) ─── */

    .cart-panel {

        width: 100% !important;

        max-width: 100% !important;

        right: -100% !important;

    }

    .cart-overlay.active .cart-panel {

        right: 0 !important;

    }

    .cart-header {

        padding: 16px 18px !important;

    }

    .cart-header h3 {

        font-size: 20px !important;

    }

    .cart-items {

        padding: 14px 16px !important;

        gap: 10px !important;

    }

    .cart-item {

        padding: 12px !important;

        gap: 10px !important;

        border-radius: 14px !important;

    }

    .cart-item-icon {

        width: 44px !important;

        height: 44px !important;

        font-size: 20px !important;

    }

    .cart-item-title {

        font-size: 13.5px !important;

    }

    .cart-footer {

        padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 12px)) !important;

    }

    .btn-checkout {

        padding: 15px !important;

        font-size: 15px !important;

        border-radius: 12px !important;

    }



    /* ─── Плавающий виджет чата поддержки (.support-fab) ─── */

    /* На смартфонах чат доступен в нижней панели навигации («Эксперт»), скрываем дублирующую плавающую кнопку */

    .support-fab {

        display: none !important;

    }



    /* ── Окно чата поддержки: Полноэкранный мессенджер на смартфонах ── */

    .support-window {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: 100vw !important;

        max-width: 100vw !important;

        height: 100vh !important;

        max-height: 100vh !important;

        border-radius: 0 !important;

        z-index: 2200 !important;

        transform: translateY(100%) !important;

        border: none !important;

        background: #090d14 !important;

    }

    .support-window.active {

        transform: translateY(0) !important;

    }

    .support-header {

        padding: calc(14px + env(safe-area-inset-top, 0)) 16px 14px 16px !important;

    }

    .support-close-btn {

        width: 36px !important;

        height: 36px !important;

        font-size: 20px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 50% !important;

        background: rgba(255, 255, 255, 0.1) !important;

    }

    .support-footer {

        padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 8px)) 14px !important;

    }

    .support-input {

        font-size: 16px !important; /* Убирает автозум в iOS */

    }



    /* ─── Окно чата поддержки: подсказки и футер на смартфонах ─── */

    .support-hints {

        display: flex !important;

        gap: 8px !important;

        overflow-x: auto !important;

        padding: 8px 14px 12px !important;

        scrollbar-width: none !important;

    }

    .support-hints::-webkit-scrollbar {

        display: none !important;

    }

    .support-hint-chip {

        white-space: nowrap !important;

        font-size: 12px !important;

        font-weight: 500 !important;

        padding: 8px 14px !important;

        border-radius: 20px !important;

        background: rgba(255, 255, 255, 0.05) !important;

        border: 1px solid rgba(255, 255, 255, 0.12) !important;

        color: #cbd5e1 !important;

        display: inline-flex !important;

        align-items: center !important;

        gap: 6px !important;

        min-height: 36px !important;

    }



    /* ─── Нижняя панель навигации (Mobile Bottom Nav) ─── */

    .mobile-bottom-nav {

        display: flex !important;

        position: fixed !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;

        background: rgba(8, 11, 16, 0.96) !important;

        backdrop-filter: blur(24px) !important;

        -webkit-backdrop-filter: blur(24px) !important;

        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

        z-index: 999 !important;

        justify-content: space-around !important;

        align-items: center !important;

        padding-top: 2px !important;

        padding-bottom: env(safe-area-inset-bottom, 0px) !important;

        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6) !important;

    }

    .mobile-bottom-nav-item {

        background: none !important;

        border: none !important;

        color: #94a3b8 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 3px !important;

        font-size: 11px !important;

        font-weight: 500 !important;

        text-decoration: none !important;

        cursor: pointer !important;

        padding: 4px 6px !important;

        flex: 1 !important;

        max-width: 85px !important;

        min-height: 48px !important;

        transition: color 0.2s ease, transform 0.15s ease !important;

        -webkit-tap-highlight-color: transparent !important;

    }

    .mobile-bottom-nav-item:active {

        transform: scale(0.92) !important;

    }

    .mobile-bottom-nav-item.active,

    .mobile-bottom-nav-item:hover {

        color: #ffffff !important;

    }

    .mobile-bottom-nav-item.active svg {

        stroke: #38bdf8 !important;

    }

    .mobile-cart-badge {

        position: absolute !important;

        top: -4px !important;

        right: -8px !important;

        background: #38bdf8 !important;

        color: #040810 !important;

        font-size: 10px !important;

        font-weight: 800 !important;

        border-radius: 10px !important;

        padding: 1px 5px !important;

        min-width: 14px !important;

        text-align: center !important;

    }

}