/*
 * Vantu Auto Spares — Premium Mobile Marketplace V3
 *
 * All rules are restricted to screens 767px and below.
 * Desktop, laptop and backend Desk layouts are not targeted.
 */

@media screen and (max-width: 767px) {
    :root {
        --vantu-mobile-blue: #0969ef;
        --vantu-mobile-navy: #031b44;
        --vantu-mobile-deep: #001333;
        --vantu-mobile-orange: #ff761b;
        --vantu-mobile-green: #079866;
        --vantu-mobile-text: #071a3d;
        --vantu-mobile-muted: #60718c;
        --vantu-mobile-border: #dce5f2;
        --vantu-mobile-surface: #ffffff;
        --vantu-mobile-background: #f4f8fe;
        --vantu-mobile-nav-height: 68px;
        --vantu-mobile-radius: 16px;
        --vantu-mobile-gap: 9px;
    }

    html,
    body,
    #app,
    .portal,
    .vantu-portal-shell,
    .portal-content,
    .marketplace-page,
    .product-detail-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html,
    body,
    #app {
        overflow-x: hidden !important;
    }

    body {
        margin: 0 !important;
        background: var(--vantu-mobile-background) !important;
        overscroll-behavior-x: none !important;
    }

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

    img,
    svg,
    video,
    canvas {
        max-width: 100% !important;
    }

    /*
     * ===============================================================
     * MOBILE HEADER
     * ===============================================================
     */

    .vantu-topbar {
        position: relative !important;
        z-index: 50 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        background:
            linear-gradient(
                125deg,
                var(--vantu-mobile-deep) 0%,
                #03265d 58%,
                #064a9e 100%
            ) !important;
        box-shadow: none !important;
    }

    .vantu-topbar::after {
        position: absolute !important;
        right: -70px !important;
        bottom: -90px !important;
        width: 250px !important;
        height: 210px !important;
        content: "" !important;
        pointer-events: none !important;
        opacity: 0.4 !important;
        transform: rotate(-18deg) !important;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(17, 111, 255, 0.34),
                transparent
            ) !important;
    }

    .vantu-topbar-inner {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        padding: 12px 13px 7px !important;
    }

    .vantu-header-brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .vantu-header-brand img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        object-fit: contain !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(0, 15, 48, 0.28) !important;
    }

    .vantu-header-brand > span {
        min-width: 0 !important;
    }

    .vantu-header-brand strong {
        display: block !important;
        overflow: hidden !important;
        color: #ffffff !important;
        font-size: 19px !important;
        font-weight: 850 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .vantu-header-brand small {
        display: block !important;
        margin-top: 4px !important;
        overflow: hidden !important;
        color: #c6d7f2 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .vantu-header-search,
    .vantu-primary-nav,
    .vantu-header-user,
    .vantu-cart-copy {
        display: none !important;
    }

    .vantu-header-actions {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 44px !important;
    }

    .vantu-cart-action {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    .vantu-cart-icon {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .vantu-cart-badge {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border: 2px solid #06306e !important;
        border-radius: 999px !important;
        background: var(--vantu-mobile-orange) !important;
        color: #ffffff !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 14px !important;
        text-align: center !important;
    }

    .vantu-mobile-search {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 6px 13px 15px !important;
    }

    .vantu-mobile-search input {
        width: 100% !important;
        min-width: 0 !important;
        height: 47px !important;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: 13px 0 0 13px !important;
        outline: 0 !important;
        background: #ffffff !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 14px !important;
        line-height: 1 !important;
        box-shadow: inset 0 0 0 1px #e1e7f1 !important;
        text-overflow: ellipsis !important;
    }

    .vantu-mobile-search button {
        width: auto !important;
        min-width: 84px !important;
        height: 47px !important;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: 0 13px 13px 0 !important;
        background:
            linear-gradient(
                135deg,
                #0878ff 0%,
                #045fd9 100%
            ) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: 0 7px 18px rgba(0, 91, 218, 0.27) !important;
    }

    /*
     * ===============================================================
     * MARKETPLACE HERO
     * ===============================================================
     */

    .marketplace-page {
        padding: 0 10px calc(
            var(--vantu-mobile-nav-height)
            + env(safe-area-inset-bottom)
            + 18px
        ) !important;
        overflow-x: hidden !important;
        background:
            linear-gradient(
                180deg,
                #eef5ff 0%,
                #f8fbff 36%,
                #f4f8fe 100%
            ) !important;
    }

    .marketplace-hero {
        position: relative !important;
        display: block !important;
        width: calc(100% + 20px) !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 272px !important;
        height: auto !important;
        margin: 0 -10px !important;
        padding: 22px 18px 66px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 0 24px 24px !important;
        background-color: var(--vantu-mobile-navy) !important;
        background-image:
            linear-gradient(
                112deg,
                rgba(1, 20, 57, 0.98) 0%,
                rgba(3, 41, 92, 0.94) 58%,
                rgba(5, 69, 145, 0.72) 100%
            ),
            url("/assets/africorridor_auto/images/marketplace/acr-elc-0007-12v-alternator.png"),
            url("/assets/africorridor_auto/images/marketplace/acr-clu-0009-three-piece-clutch-kit.png") !important;
        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;
        background-position:
            center,
            111% 58%,
            97% 103% !important;
        background-size:
            cover,
            43% auto,
            48% auto !important;
        box-shadow: 0 18px 38px rgba(3, 33, 81, 0.18) !important;
    }

    .marketplace-hero::before {
        position: absolute !important;
        inset: 0 !important;
        content: "" !important;
        pointer-events: none !important;
        opacity: 0.55 !important;
        background:
            linear-gradient(
                120deg,
                transparent 30%,
                rgba(18, 103, 218, 0.12) 30%,
                rgba(18, 103, 218, 0.12) 36%,
                transparent 36%
            ) !important;
    }

    .marketplace-hero .hero-copy {
        position: relative !important;
        z-index: 2 !important;
        width: 58% !important;
        max-width: 58% !important;
        min-width: 0 !important;
    }

    .marketplace-hero .eyebrow {
        color: #9fc7ff !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.17em !important;
        text-transform: uppercase !important;
    }

    .marketplace-hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 9px 0 8px !important;
        color: #ffffff !important;
        font-size: clamp(26px, 8.2vw, 34px) !important;
        font-weight: 900 !important;
        line-height: 0.98 !important;
        letter-spacing: -0.045em !important;
        text-wrap: balance !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .marketplace-hero h1 span {
        display: inline !important;
        color: var(--vantu-mobile-orange) !important;
    }

    .marketplace-hero .hero-copy > p {
        display: -webkit-box !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #d9e7fb !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }

    .marketplace-hero .search-panel {
        display: none !important;
    }

    .vantu-mobile-trust-row {
        position: absolute !important;
        right: 14px !important;
        bottom: 40px !important;
        left: 14px !important;
        z-index: 3 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .vantu-mobile-trust-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        padding: 7px 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 999px !important;
        background: rgba(0, 22, 62, 0.52) !important;
        color: #ffffff !important;
        font-size: 7px !important;
        font-weight: 750 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        backdrop-filter: blur(7px) !important;
    }

    .vantu-mobile-trust-item b {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        border-radius: 999px !important;
        background: rgba(30, 118, 246, 0.72) !important;
        font-size: 8px !important;
    }

    /*
     * ===============================================================
     * FITMENT CARD
     * ===============================================================
     */

    .fitment-panel {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: -28px 0 17px !important;
        padding: 14px !important;
        overflow: hidden !important;
        border: 1px solid rgba(218, 228, 241, 0.92) !important;
        border-radius: 19px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow:
            0 18px 42px rgba(8, 45, 99, 0.14),
            0 2px 7px rgba(8, 45, 99, 0.05) !important;
    }

    .fitment-panel::before {
        position: absolute !important;
        top: 0 !important;
        left: 19px !important;
        width: 76px !important;
        height: 4px !important;
        content: "" !important;
        border-radius: 0 0 999px 999px !important;
        background: var(--vantu-mobile-orange) !important;
    }

    .fitment-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .fitment-heading h2 {
        margin: 4px 0 0 !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 17px !important;
        font-weight: 850 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
    }

    .fitment-heading p {
        display: none !important;
    }

    .fitment-eyebrow {
        color: var(--vantu-mobile-orange) !important;
        font-size: 8px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
    }

    .reset-fitment-button {
        padding: 7px 8px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: #eef5ff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
    }

    .fitment-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .fitment-grid label {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .fitment-grid label > span {
        display: block !important;
        margin-bottom: 4px !important;
        overflow: hidden !important;
        color: #5e6f89 !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.045em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .fitment-grid input,
    .fitment-grid select {
        width: 100% !important;
        min-width: 0 !important;
        height: 43px !important;
        padding: 0 9px !important;
        border: 1px solid var(--vantu-mobile-border) !important;
        border-radius: 11px !important;
        outline: 0 !important;
        background: #ffffff !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 11px !important;
        box-shadow: 0 3px 9px rgba(9, 52, 111, 0.04) !important;
    }

    .fitment-grid button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background:
            linear-gradient(
                135deg,
                #e7f1ff 0%,
                #d7e9ff 100%
            ) !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        box-shadow: none !important;
    }

    .active-fitment,
    .fitment-error {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 8px 9px !important;
        border-radius: 9px !important;
        font-size: 9px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * ===============================================================
     * PRODUCT CATALOGUE
     * ===============================================================
     */

    .catalogue-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .catalogue-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 2px 10px !important;
    }

    .catalogue-header h2 {
        margin: 0 !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.025em !important;
    }

    .catalogue-header p {
        display: none !important;
    }

    .product-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        background: #e8f2ff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: var(--vantu-mobile-gap) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Compact card:
     * image on the left, details on the right, action across the bottom.
     */
    .product-card {
        display: grid !important;
        grid-template-columns: 43% minmax(0, 57%) !important;
        grid-template-rows: auto auto minmax(34px, 1fr) 34px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 184px !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #dde6f1 !important;
        border-radius: 15px !important;
        background: #ffffff !important;
        box-shadow:
            0 8px 22px rgba(11, 48, 99, 0.07),
            0 1px 3px rgba(11, 48, 99, 0.04) !important;
    }

    .product-card.featured {
        border-color: rgba(255, 118, 27, 0.52) !important;
        box-shadow:
            0 9px 24px rgba(255, 118, 27, 0.10),
            0 1px 4px rgba(11, 48, 99, 0.05) !important;
    }

    .product-media {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 / 4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 142px !important;
        min-height: 142px !important;
        padding: 8px 4px 7px 7px !important;
        overflow: hidden !important;
        border: 0 !important;
        background:
            linear-gradient(
                145deg,
                #f9fbfe 0%,
                #eef4fb 100%
            ) !important;
    }

    .product-media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        filter: drop-shadow(0 8px 10px rgba(6, 29, 67, 0.12)) !important;
    }

    .product-media .image-placeholder {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .product-media .image-placeholder span {
        font-size: 21px !important;
    }

    .product-media .image-placeholder small {
        font-size: 7px !important;
    }

    .featured-badge {
        top: 6px !important;
        left: 6px !important;
        max-width: calc(100% - 12px) !important;
        padding: 4px 6px !important;
        overflow: hidden !important;
        border: 2px solid rgba(255, 255, 255, 0.88) !important;
        border-radius: 999px !important;
        background: var(--vantu-mobile-orange) !important;
        color: #ffffff !important;
        font-size: 6px !important;
        font-weight: 850 !important;
        letter-spacing: 0.025em !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-shadow: 0 5px 12px rgba(255, 104, 10, 0.28) !important;
    }

    .product-content {
        display: contents !important;
    }

    .product-meta {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-width: 0 !important;
        gap: 3px !important;
        padding: 9px 8px 0 7px !important;
    }

    .product-meta .category {
        display: block !important;
        max-width: 64% !important;
        padding: 4px 5px !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        background: #e8f2ff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 6px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: 0.035em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .product-meta .stock {
        flex: 0 0 auto !important;
        max-width: 34% !important;
        overflow: hidden !important;
        color: var(--vantu-mobile-green) !important;
        font-size: 6px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .product-card h3 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: -webkit-box !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 7px 8px 1px 7px !important;
        overflow: hidden !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1.28 !important;
        letter-spacing: -0.02em !important;
        overflow-wrap: anywhere !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .product-card .sku,
    .product-card .description {
        display: none !important;
    }

    .product-footer {
        grid-column: 2 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-content: flex-end !important;
        justify-content: flex-end !important;
        flex-direction: column !important;
        gap: 3px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 8px 8px 7px !important;
        border: 0 !important;
    }

    .product-footer .price {
        display: flex !important;
        align-items: baseline !important;
        min-width: 0 !important;
        gap: 3px !important;
    }

    .product-footer .price span {
        flex: 0 0 auto !important;
        color: #677892 !important;
        font-size: 6px !important;
        font-weight: 750 !important;
    }

    .product-footer .price strong {
        min-width: 0 !important;
        overflow: hidden !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.04em !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .stock-count {
        overflow: hidden !important;
        color: var(--vantu-mobile-green) !important;
        font-size: 6px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .product-detail-button {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 30px !important;
        height: 30px !important;
        margin: 0 7px 7px !important;
        padding: 0 7px !important;
        overflow: hidden !important;
        border: 1px solid #1976f3 !important;
        border-radius: 9px !important;
        background: #ffffff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 8px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .product-detail-button::after {
        margin-left: 4px !important;
        content: "›" !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .vantu-mobile-quality-strip {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        margin: 14px 0 2px !important;
        padding: 10px 11px !important;
        border: 1px solid #dce8f8 !important;
        border-radius: 13px !important;
        background:
            linear-gradient(
                135deg,
                #edf5ff 0%,
                #f9fbff 100%
            ) !important;
        color: var(--vantu-mobile-text) !important;
    }

    .vantu-mobile-quality-strip > b {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        background: #dcecff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 17px !important;
    }

    .vantu-mobile-quality-strip strong {
        display: block !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
    }

    .vantu-mobile-quality-strip small {
        display: block !important;
        margin-top: 2px !important;
        color: var(--vantu-mobile-muted) !important;
        font-size: 7px !important;
        line-height: 1.3 !important;
    }

    .vantu-mobile-quality-strip > span {
        color: var(--vantu-mobile-blue) !important;
        font-size: 16px !important;
    }

    /*
     * ===============================================================
     * PRODUCT DETAIL PAGE
     * ===============================================================
     */

    .product-detail-page {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px 10px calc(
            var(--vantu-mobile-nav-height)
            + env(safe-area-inset-bottom)
            + 18px
        ) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        background:
            linear-gradient(
                180deg,
                #eef5ff 0%,
                #f8fbff 100%
            ) !important;
    }

    .product-detail-page .back-link {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        margin: 0 0 9px !important;
        padding: 0 11px !important;
        border: 1px solid #dce6f3 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .product-overview {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 11px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .product-gallery,
    .product-summary {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 1px solid #dce6f3 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 27px rgba(8, 45, 99, 0.08) !important;
    }

    .product-gallery {
        padding: 9px !important;
    }

    .detail-image-shell {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 232px !important;
        min-height: 232px !important;
        max-height: 232px !important;
        padding: 9px !important;
        overflow: hidden !important;
        border-radius: 13px !important;
        background:
            linear-gradient(
                145deg,
                #f8fbff 0%,
                #edf3fa 100%
            ) !important;
    }

    .detail-image-shell img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        filter: drop-shadow(0 12px 16px rgba(4, 27, 64, 0.13)) !important;
    }

    .thumbnail-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding: 2px 1px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .thumbnail-button {
        flex: 0 0 57px !important;
        width: 57px !important;
        height: 57px !important;
        min-width: 57px !important;
        padding: 3px !important;
        border-radius: 9px !important;
        scroll-snap-align: start !important;
    }

    .thumbnail-button img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .product-summary {
        padding: 15px !important;
    }

    .summary-heading {
        width: 100% !important;
        min-width: 0 !important;
    }

    .summary-heading .eyebrow {
        display: inline-flex !important;
        max-width: 100% !important;
        padding: 5px 8px !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        background: #e7f2ff !important;
        color: var(--vantu-mobile-blue) !important;
        font-size: 8px !important;
        font-weight: 850 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .summary-heading h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 6px !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 23px !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .product-code,
    .summary-description,
    .long-description,
    .empty-copy,
    .purchase-notice,
    .cart-feedback {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .product-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }

    .product-badges > * {
        max-width: 100% !important;
        padding: 5px 7px !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .price-panel {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 5px 8px !important;
        width: 100% !important;
        margin: 9px 0 !important;
        padding: 12px !important;
        overflow: visible !important;
        border: 1px solid #dce9fb !important;
        border-radius: 12px !important;
        background:
            linear-gradient(
                135deg,
                #edf6ff 0%,
                #f8fbff 100%
            ) !important;
    }

    .price-panel .currency {
        color: #60718c !important;
        font-size: 10px !important;
    }

    .price-panel strong {
        min-width: 0 !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 28px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.045em !important;
        overflow-wrap: anywhere !important;
    }

    .regular-price {
        flex: 0 0 100% !important;
        font-size: 10px !important;
    }

    .summary-description {
        margin: 8px 0 !important;
        color: #566984 !important;
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    .quick-facts {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 9px 0 !important;
    }

    .quick-facts > * {
        width: 100% !important;
        min-width: 0 !important;
        padding: 9px !important;
        overflow: hidden !important;
        border: 1px solid #e0e8f3 !important;
        border-radius: 10px !important;
        background: #fbfdff !important;
    }

    .quick-facts span,
    .quick-facts strong,
    .quick-facts small {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .cart-purchase-panel {
        position: static !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 11px 0 0 !important;
        padding: 12px !important;
        overflow: visible !important;
        border: 1px solid #dce6f3 !important;
        border-radius: 13px !important;
        background: #ffffff !important;
        transform: none !important;
    }

    .quantity-control {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .quantity-selector {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        width: 100% !important;
        overflow: hidden !important;
        border: 1px solid #dce6f3 !important;
        border-radius: 10px !important;
    }

    .quantity-selector button,
    .quantity-selector input {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    .add-cart-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 11px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background:
            linear-gradient(
                135deg,
                #0878ff 0%,
                #045fd9 100%
            ) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        text-align: center !important;
        white-space: normal !important;
        box-shadow: 0 8px 20px rgba(4, 95, 217, 0.22) !important;
    }

    .detail-sections {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 11px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .information-card,
    .technical-panel,
    .compatibility-card {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 13px !important;
        overflow: visible !important;
        border: 1px solid #dce6f3 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(8, 45, 99, 0.06) !important;
    }

    .section-heading h2 {
        margin: 4px 0 0 !important;
        color: var(--vantu-mobile-text) !important;
        font-size: 17px !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .long-description,
    .empty-copy {
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .specification-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .specification-grid > div {
        display: grid !important;
        grid-template-columns: minmax(86px, 0.8fr) minmax(0, 1.2fr) !important;
        align-items: start !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 8px !important;
        border-radius: 8px !important;
        background: #f8fbff !important;
    }

    .specification-grid dt,
    .specification-grid dd {
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .compatibility-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 5px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .compatibility-table {
        width: 100% !important;
        min-width: 570px !important;
        table-layout: auto !important;
        font-size: 9px !important;
    }

    .compatibility-table th,
    .compatibility-table td {
        max-width: 205px !important;
        padding: 8px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        vertical-align: top !important;
    }

    /*
     * ===============================================================
     * BOTTOM NAVIGATION
     * ===============================================================
     */

    .vantu-mobile-navigation {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(
            var(--vantu-mobile-nav-height)
            + env(safe-area-inset-bottom)
        ) !important;
        min-height: var(--vantu-mobile-nav-height) !important;
        padding: 3px 5px env(safe-area-inset-bottom) !important;
        overflow: visible !important;
        border-top: 1px solid #e1e8f2 !important;
        background: rgba(255, 255, 255, 0.97) !important;
        box-shadow: 0 -10px 28px rgba(10, 42, 86, 0.09) !important;
        backdrop-filter: blur(14px) !important;
    }

    .vantu-mobile-navigation a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        min-width: 0 !important;
        padding: 5px 2px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        color: #62718a !important;
    }

    .vantu-mobile-navigation a.router-link-active,
    .vantu-mobile-navigation a.active {
        background: #eaf3ff !important;
        color: var(--vantu-mobile-blue) !important;
    }

    .vantu-mobile-navigation a > span {
        font-size: 17px !important;
        line-height: 1 !important;
    }

    .vantu-mobile-navigation a small {
        width: 100% !important;
        margin-top: 4px !important;
        overflow: hidden !important;
        font-size: 7px !important;
        font-weight: 750 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .vantu-service-strip {
        display: none !important;
    }
}

/*
 * Very narrow phones remain two-column, with tighter dimensions.
 */
@media screen and (max-width: 370px) {
    .marketplace-hero {
        min-height: 255px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
        background-position:
            center,
            118% 59%,
            102% 103% !important;
        background-size:
            cover,
            41% auto,
            46% auto !important;
    }

    .marketplace-hero .hero-copy {
        width: 61% !important;
        max-width: 61% !important;
    }

    .marketplace-hero h1 {
        font-size: 25px !important;
    }

    .product-grid {
        gap: 7px !important;
    }

    .product-card {
        grid-template-columns: 42% minmax(0, 58%) !important;
        min-height: 174px !important;
    }

    .product-media {
        height: 131px !important;
        min-height: 131px !important;
        padding: 7px 3px 6px 5px !important;
    }

    .product-card h3 {
        margin-right: 6px !important;
        margin-left: 6px !important;
        font-size: 10px !important;
    }

    .product-meta {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .product-footer {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .product-footer .price strong {
        font-size: 13px !important;
    }

    .product-detail-button {
        margin-right: 6px !important;
        margin-left: 6px !important;
        font-size: 7px !important;
    }

    .detail-image-shell {
        height: 215px !important;
        min-height: 215px !important;
        max-height: 215px !important;
    }
}