/**
 * Homepage mobile redesign.
 * Phone (≤767px): compact chrome, layout, homepage content.
 * Tablet (768–1024px): legacy header unless body.aps-tablet-redesign
 *   (see homepage-tablet-redesign.css when HOME_TABLET_REDESIGN=true).
 * Desktop: 1025px+
 */

/* Compact chrome/layout/home CSS is loaded via <link media="..."> in layout
   (nested @import inside @media is ignored by browsers). */

/* Tablet: old hamburger header (not sticky) — skipped when aps-tablet-redesign */
@media (min-width: 768px) and (max-width: 1024px) {
    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 {
        position: relative;
        z-index: 50;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-main-header {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__menu--phone-end {
        display: none !important;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__menu--tablet-start,
    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__actions {
        gap: 0.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__icon-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__icon-group .js-user-dropdown-container {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 0;
        border-radius: 9999px;
        background: #00FFB5;
        color: #002d2f;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        position: relative;
        flex-shrink: 0;
        text-decoration: none;
        box-sizing: border-box;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__icon-btn i {
        display: block;
        line-height: 1;
        font-size: 0.9375rem;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__icon-btn--cart {
        overflow: visible;
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__badge {
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        width: 1rem;
        height: 1rem;
        min-width: 1rem;
        padding: 0;
        border-radius: 9999px;
        background: #00FFB5;
        color: #002D2F;
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1rem;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0 0 0 2px rgba(0, 45, 47, 0.1);
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) .aps-main-header-wrap--mobile-v2 .aps-mobile-header__brand > .rounded {
        width: 11rem !important;
        max-width: calc(100vw - 14rem);
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) #mobile-menu-drawer {
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }

    body.aps-mobile-redesign:not(.aps-tablet-redesign) #mobile-menu-drawer.translate-x-0 {
        transform: translateX(0) !important;
    }
}

@media (min-width: 1025px) {
    body:not(.aps-tablet-redesign) .aps-mobile-bottom-nav,
    body.aps-tablet-redesign .aps-mobile-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body:not(.aps-tablet-redesign) .aps-mobile-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 768px) {
    body:not(.aps-tablet-redesign) .home-hero-heading-mobile,
    body:not(.aps-tablet-redesign) .home-hero-trust,
    body:not(.aps-tablet-redesign) .home-search-card--all,
    body:not(.aps-tablet-redesign) .home-mobile-story,
    body:not(.aps-tablet-redesign) .home-mobile-testimonial {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    body.aps-tablet-redesign .home-hero-heading-mobile,
    body.aps-tablet-redesign .home-hero-trust,
    body.aps-tablet-redesign #home-search-all-wrap,
    body.aps-tablet-redesign .home-mobile-story,
    body.aps-tablet-redesign .home-mobile-testimonial {
        display: none !important;
    }
}

/* Phone: 16px+ on search fields/modal input — prevents iOS Safari focus zoom */
@media (max-width: 767px) {
    body.aps-mobile-redesign .home-search-section #vin-input-row input,
    body.aps-mobile-redesign .home-search-section #oem_number,
    body.aps-mobile-redesign .home-search-card--all .home-search-all-input,
    body.aps-mobile-redesign #modal-search,
    body.aps-mobile-redesign .home-search-section #vehicleSearchForm button[id$="-trigger"],
    body.aps-mobile-redesign .home-search-section #vin-search-block button[id$="-trigger"] {
        font-size: 16px !important;
    }
}