/* ==========================================================================
   Engage360 - Responsive CSS (Tablet & Mobile)
   ==========================================================================
   Breakpoints:
   - Tablet Landscape:  1024px - 1199px
   - Tablet Portrait:    768px - 1023px
   - Mobile:             below 768px
   - Small Mobile:       below 480px
   ========================================================================== */

/* ==========================================================================
   SIDEBAR OVERLAY (for mobile drawer)
   ========================================================================== */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}
.sidebar-overlay.active {
    display: block;
}
.mobile-sidebar-close {
    display: none;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    margin-left: auto;
}

/* Mobile-only buttons - hidden on desktop */
.mobile-visualizer-bubble,
.mobile-visualizer-close,
.details-view-vehicle-btn,
.inventory-mobile-header,
.search-mobile-header,
.mobile-details-toggle {
    display: none;
}
.mobile-filter-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #054086;
    font-size: 18px;
    flex-shrink: 0;
}
.mobile-filter-toggle:hover {
    background: #054086;
    color: #fff;
}

@media only screen and (max-width: 1024px) {
    .mobile-sidebar-close {
        display: block;
    }
    .mobile-filter-toggle {
        display: flex;
    }
    .sidebar .sbc-top-menu {
        margin-bottom: 16px;
    }
}


/* ==========================================================================
   TABLET LANDSCAPE (1024px - 1199px)
   ========================================================================== */
@media only screen and (max-width: 1199px) {

    /* -- Sidebar Layout -- */
    .sidebar-layout .sidebar {
        max-width: 260px;
        padding: 12px;
    }
    .sidebar-layout .sidebar-main-content {
        max-width: calc(100vw - 260px);
    }

    /* -- Header / Nav -- */
    .site-tools-cart .navbar-nav {
        gap: 20px;
    }
    .search-log-nav {
        width: 300px;
    }

    /* -- Vehicle Builder: Accessories Header -- */
    .accessories-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    .ah-text {
        width: 100%;
        order: 1;
    }
    .accessories-header h1 {
        font-size: 24px;
    }
    .mobile-filter-toggle {
        order: 2;
    }
    .product-count {
        width: auto;
        margin-left: 0;
        order: 3;
    }
    .product-sort {
        margin-left: auto;
        order: 4;
    }
    .product-search {
        width: 100%;
        order: 5;
    }
    .product-sort select {
        width: 150px;
    }

    /* -- Vehicle Builder: Brands single column -- */
    .brands-list .main-cat {
        width: 100%;
    }

    /* -- Vehicle Builder: Accessory Cards -- */
    .col-md-2.accessory {
        width: 30%;
    }
    .accessories .accessory-img img,
    .available-visualizer .accessory-img img {
        min-height: 160px;
        max-height: 160px;
    }
    .price-section h5 {
        font-size: 22px;
    }
    .price-section h6 {
        font-size: 16px;
    }

    /* -- Vehicle Builder: Viewer/Carousel -- */
    .accessory-viewer {
        width: 55%;
    }
    .vehicle-carousel {
        height: 350px;
    }
    .zoom-added-acc {
        min-width: 400px;
        max-width: 400px;
    }
    .zoom-acc-info h2 {
        font-size: 18px;
    }

    /* -- Vehicle Builder: Detail Panel -- */
    .detail-product-info-row {
        flex-direction: column;
    }
    .part-price-row {
        justify-content: center;
        align-items: center;
        margin-left: auto;
    }
    .fitment-row .col-md-4 {
        width: 55%;
    }

    /* -- Vehicle Builder: Added Accessories -- */
    .added-accessories-slider {
        max-width: 350px;
    }

    /* -- Vehicle Builder: Filter sidebar (w-side) -- */
    .w-side .side-filter-buttons {
        font-size: 15px !important;
    }

    /* -- Cart Side Panel -- */
    .cart-side {
        max-width: 700px;
    }
    .cart-acc-info {
        max-width: 250px;
    }
    .cart-acc-price {
        min-width: 170px;
    }

    /* -- Checkout -- */
    .checkout-modal, .checkout-payment-modal {
        width: 80%;
    }
    .checkout-form .cart-item-price {
        max-width: 30%;
    }
    .inst-section {
        min-width: 180px;
    }

    /* -- Vehicle Search -- */
    h1.lgs-title {
        font-size: 48px;
        margin-bottom: 35px;
    }

    /* -- Vehicle Inventory -- */
    .vehicle {
        width: 31%;
    }
    .vehicles .vehicle-img img {
        min-height: 220px;
        max-height: 220px;
    }
}


/* ==========================================================================
   TABLET PORTRAIT (768px - 1023px)
   ========================================================================== */
@media only screen and (max-width: 1024px) {

    /* -- Sidebar Layout: collapse sidebar into overlay drawer -- */
    .sidebar-layout {
        flex-direction: column;
    }
    .sidebar-layout .sidebar {
        position: fixed;
        top: 0;
        left: -330px;
        max-width: 330px;
        width: 85vw;
        height: 100vh;
        z-index: 9999;
        background: #fff;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        padding: 16px;
    }
    .sidebar-layout .sidebar.mobile-open {
        left: 0;
    }
    .sidebar-layout .sidebar-main-content {
        max-width: 100vw;
        width: 100%;
    }

    /* -- Header -- */
    .top-header-nav {
        padding: 0 15px;
    }
    .top-header-nav .nav-link {
        font-size: 12px;
        margin: 0 8px;
    }
    .navbar-nav.main-links .nav-link {
        margin: 0 8px;
        font-size: 14px;
    }

    /* -- Vehicle Builder: Accessories Header -- */
    .accessories-header h1 {
        font-size: 22px;
    }
    .ah-text img {
        max-width: 40px;
    }

    /* -- Vehicle Builder: Accessory Cards -- */
    .col-md-2.accessory {
        width: 47%;
    }
    .accessory-header h3 {
        font-size: 12px;
        min-height: 30px;
    }
    .accessories .accessory-img img,
    .available-visualizer .accessory-img img {
        min-height: 140px;
        max-height: 140px;
    }
    .price-section h5 {
        font-size: 20px;
    }
    .price-section h6 {
        font-size: 14px;
    }
    .accessory-buttons .details-btn {
        font-size: 10px;
        padding: 6px 2px;
    }
    .ford-pass-section img {
        max-width: 120px;
    }

    /* -- Vehicle Builder: Layout -- */
    html, body {
        overflow: auto;
        height: auto;
    }
    .catalog-tab-section {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .filter-side {
        height: auto;
    }
    .filters {
        height: auto;
        max-height: 50vh;
        padding-bottom: 20px;
    }
    .accessories-section,
    .accessories,
    div#catalog,
    div#catalogTabContent,
    .sidebar-main-content .main-content,
    .sidebar-main-content .page-content {
        height: auto;
    }
    .accessories-row {
        max-height: none;
        overflow: visible;
        padding-bottom: 0;
    }
    .accessories {
        padding-bottom: 0 !important;
    }
    .accessories-section {
        padding-bottom: 0 !important;
    }
    .sidebar-main-content .main-content {
        padding-bottom: 0 !important;
    }
    .recommended-accs {
        padding-bottom: 10px !important;
    }
    /* Vehicle inventory page: mobile filter toggle + search bar at top of content */
    .sidebar .search-section {
        display: none;
    }
    .inventory-mobile-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px;
        background: #fff;
        border-bottom: 1px solid #eaecf0;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .inventory-mobile-header .mobile-filter-toggle {
        order: 1;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }
    .inventory-mobile-search {
        order: 2;
        flex: 1;
        display: flex !important;
        align-items: center;
        gap: 6px;
        height: 40px;
        max-width: none !important;
        float: none !important;
        margin: 0 !important;
    }
    .inventory-mobile-search .veh-search {
        flex: 1;
        height: 40px;
        padding: 0 12px;
        border: 1px solid #eaecf0;
        border-radius: 6px;
        font-size: 14px;
        min-width: 0;
        box-sizing: border-box;
    }
    .inventory-mobile-search .search-btn {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #054086;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }
    /* Vehicle inventory cards on mobile */
    .vehicle-inventory .vehicles .row {
        gap: 16px;
        flex-direction: column;
    }
    .col-md-3.vehicle {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
    }
    .col-md-3.vehicle > a {
        display: block;
        width: 100%;
    }
    .vehicles .vehicle-img {
        max-height: 240px;
        overflow: hidden;
    }
    .vehicles .vehicle-img img {
        min-height: 0 !important;
        max-height: 240px !important;
        height: auto !important;
    }
    .vehicle-header,
    .vehicle-footer,
    .vehicle-details,
    .vehicle-accessories {
        display: block !important;
        visibility: visible !important;
    }
    .vehicle-accessories {
        display: flex !important;
    }
    .vehicle-footer {
        padding: 12px !important;
    }
    .vehicle-accessories {
        margin-top: 12px !important;
        flex-wrap: nowrap;
    }
    a.accessories-btn {
        flex: 1;
    }
    .vehicle-accessories .fav-btn {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eaecf0;
        border-radius: 4px;
    }
    /* Vehicle search (build-order) page: mobile filter toggle */
    .search-mobile-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: #fff;
        border-bottom: 1px solid #eaecf0;
    }
    .search-mobile-header .mobile-filter-toggle {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }
    .search-mobile-header-label {
        font-weight: 600;
        color: #054086;
        font-size: 15px;
    }
    .vehicle-select {
        overflow: visible !important;
        max-height: none !important;
        display: block !important;
        height: auto !important;
    }
    .vehicle-select .vehicle-results {
        height: auto !important;
        max-height: none !important;
        padding: 15px !important;
    }
    .vehicle-select .vehicle-body,
    .vehicle-select .vehicle-body:last-child {
        margin-bottom: 15px !important;
    }
    .vehicle-select .vehicle-body:last-child {
        margin-bottom: 0 !important;
    }
    .search-inventory.vehicles {
        padding-bottom: 10px !important;
    }
    /* Vehicle-search landing page: smaller buttons on mobile/tablet */
    .content-overlay {
        justify-content: center !important;
    }
    .content-overlay .button-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        flex-direction: initial !important;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    .content-overlay .button-row > .col {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .content-overlay .button-row > .col:first-child {
        grid-column: 1 / -1;
        text-align: center;
    }
    .content-overlay .button-row > .col:first-child h2 {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }
    .content-overlay .bo-box,
    .content-overlay .inv-box {
        height: auto !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    .content-overlay .bo-box h2,
    .content-overlay .inv-box h2 {
        font-size: 1rem !important;
        padding: 14px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
    }
    /* Cart side-panel: full viewport width on mobile/tablet */
    html, body {
        overflow-x: hidden;
    }
    .cart-slide {
        overflow: hidden;
    }
    .cart-overlay {
        width: 100vw !important;
    }
    .cart-overlay.open {
        left: 0 !important;
    }
    .cart-side {
        max-width: 100vw !important;
        width: 100vw !important;
    }
    .cart-side-section {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .cart-side .cart-products-content {
        flex: 1;
        overflow-y: auto;
    }
    .cart-side-footer {
        flex-shrink: 0;
    }
    .cart-side-footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 12px 15px;
    }
    .cart-side-footer .qr-code,
    .cart-side-footer .qr-code[style] {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Hide QR codes everywhere on mobile/tablet */
    .qr-code,
    .ar-qr-img,
    .acc-viewer-acc .ar-qr-img,
    .checkout-qr-code {
        display: none !important;
    }
    /* Hide the QR column (h4 + QR) in the finalize quote modal on mobile */
    .swal2-html-container .col-md-6:has(.checkout-qr-code) {
        display: none !important;
    }
    /* Cart header: pin close X to the far right */
    .cart-side-header {
        justify-content: space-between;
    }
    .cart-side-header .continue-txt {
        width: auto !important;
        flex-shrink: 0;
    }
    .cart-side-header .dealer-info {
        flex: 1;
    }
    .cart-side-header .close-cart-side {
        width: auto !important;
        margin-left: auto !important;
        flex-shrink: 0;
    }
    /* Cart item: stack price and install toggle so "Not Installed" stays on one line */
    .cart-products-content .cart-acc-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .cart-products-content .install-selector {
        width: 100%;
        max-width: 100%;
    }
    .cart-products-content .install-button {
        white-space: nowrap;
        padding: 0 14px;
    }
    /* Cart item trash: float top-right of the row */
    .cart-products-content .cart-acc {
        position: relative;
    }
    .cart-products-content .cart-item-btns {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0 !important;
    }
    .cart-side-footer .qr-code svg {
        width: 90px;
        height: 90px;
    }
    a.side-checkout-button {
        width: 100%;
        text-align: center;
    }
    /* When w-side (accessory detail loaded), show the accessory details full-width on mobile */
    .catalog-tab-section.w-side .visualizer-section {
        flex-direction: column;
    }
    .catalog-tab-section.w-side .accessory-viewer {
        width: 100% !important;
        height: auto !important;
        border-right: none;
    }
    /* Vehicle-viewer (carousel) becomes a full-width slide-out controlled by the bubble/button.
       Use left/right offsets (not transform) so position:fixed descendants anchor to the viewport. */
    .vehicle-viewer,
    .catalog-tab-section.w-side .vehicle-viewer {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 100vw !important;
        right: -100vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        background: #f9fafb;
        z-index: 9998;
        transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
        overflow-y: auto;
        display: block !important;
        padding: 8px 10px 20px;
    }
    .vehicle-viewer.mobile-open,
    .catalog-tab-section.w-side .vehicle-viewer.mobile-open {
        left: 0 !important;
        right: 0 !important;
    }
    .vehicle-viewer .carousel-holder,
    .vehicle-viewer .carousel-holder-aa-section,
    .vehicle-viewer .carousel-holder-veh-section,
    .vehicle-viewer .vehicle-carousel {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vehicle-viewer .vehicle-carousel {
        height: auto !important;
        max-height: none !important;
    }
    .vehicle-viewer .carousel-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 6px;
        position: relative;
        height: auto !important;
        max-height: none !important;
    }
    /* Main carousel: constrain so arrows hug the image; drop fixed heights */
    .vehicle-viewer .main-carousel,
    .vehicle-viewer #carousel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .vehicle-viewer #carousel canvas,
    .vehicle-viewer .main-carousel canvas,
    .vehicle-zoom-modal #zoom-carousel canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .vehicle-zoom-modal #zoom-carousel {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vehicle-viewer #carousel-items-container,
    .vehicle-zoom-modal #zoom-carousel-items-container {
        min-height: 0 !important;
        overflow: hidden !important;
    }
    /* Suppress the width transition that flashes all 3 vehicle images side-by-side mid-slide */
    .vehicle-viewer #carousel .item-view-selected,
    .vehicle-viewer #carousel .item-view-unselected,
    .vehicle-zoom-modal #zoom-carousel .item-view-selected,
    .vehicle-zoom-modal #zoom-carousel .item-view-unselected {
        transition: opacity 0.2s ease !important;
    }
    .vehicle-viewer #carousel .item-view-unselected,
    .vehicle-zoom-modal #zoom-carousel .item-view-unselected {
        width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }
    .vehicle-viewer #carousel .item-view-selected,
    .vehicle-zoom-modal #zoom-carousel .item-view-selected {
        width: 100% !important;
        opacity: 1 !important;
    }
    .vehicle-viewer #carousel-controller-previous,
    .vehicle-viewer #carousel-controller-next,
    .vehicle-zoom-modal #zoom-carousel-controller-previous,
    .vehicle-zoom-modal #zoom-carousel-controller-next {
        font-size: 1.2rem;
        z-index: 20 !important;
        pointer-events: auto !important;
        cursor: pointer;
    }
    /* Mini-carousel: 3 thumbs in a centered row, full width so they don't sit next to the grid */
    .vehicle-viewer .mini-carousel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        position: relative;
    }
    .vehicle-viewer .mini-expand-btn,
    .vehicle-viewer .mini-collapse-btn {
        display: none !important;
    }
    .vehicle-viewer #mini-carousel {
        width: 100% !important;
        min-height: 0 !important;
    }
    .vehicle-viewer #mini-carousel-items-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .vehicle-viewer #mini-carousel-items-container .c-image {
        flex: 0 0 auto;
        width: 110px !important;
        height: 80px;
    }
    /* Colorizer: pinned top-left of the slide-out, only visible when slide-out is open */
    .vehicle-viewer .visualizer-colorizer-select {
        display: none;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 10000;
        margin: 0 !important;
    }
    .vehicle-viewer.mobile-open .visualizer-colorizer-select {
        display: block;
    }
    /* Colorizer panel: escape the off-screen sidebar by going position: fixed */
    .colorizer-colors {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -100vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 9999 !important;
        overflow-y: auto;
    }
    .colorizer-colors.open {
        left: 0 !important;
        z-index: 10001 !important;
    }
    .vehicle-viewer .visualizer-colorizer-select .colorizer-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #eaecf0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    .vehicle-viewer .visualizer-colorizer-select .colorizer-btn img {
        width: 26px;
        height: 26px;
    }
    /* Added accessories: own section with heading */
    .vehicle-viewer .added-accessories-section {
        width: 100%;
        margin-top: 20px;
        padding: 16px 8px 20px;
        border-top: 1px solid #eaecf0;
        box-sizing: border-box;
    }
    .vehicle-viewer .added-accessories-section::before {
        content: 'Added Accessories';
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #054086;
        text-align: center;
        margin-bottom: 12px;
    }
    .vehicle-viewer .add-vh-note-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        margin-bottom: 16px;
    }
    .vehicle-viewer .add-vh-note-text .add-vis {
        font-size: 13px;
        text-align: center;
        margin: 0;
    }
    .vehicle-viewer .add-vh-buttons {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0 !important;
    }
    .vehicle-viewer .add-vh-buttons a {
        margin: 0 !important;
        font-size: 13px;
    }
    .vehicle-viewer .aacc-accessories {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .vehicle-viewer .added-accessory {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px;
        border: 1px solid #eaecf0;
        border-radius: 8px;
        background: #fff;
        min-width: 0;
        box-sizing: border-box;
    }
    .vehicle-viewer .aacc-img {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .vehicle-viewer .aacc-img img {
        max-width: 100%;
        max-height: 80px;
        object-fit: contain;
    }
    .vehicle-viewer .aacc-actions {
        display: flex;
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
    .vehicle-viewer .aacc-actions a {
        font-size: 16px;
        cursor: pointer;
    }
    .mobile-visualizer-close {
        display: none;
        position: fixed;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #e7e7e7;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #054086;
        z-index: 9999;
        cursor: pointer;
        text-decoration: none !important;
    }
    .vehicle-viewer.mobile-open .mobile-visualizer-close {
        display: flex;
    }
    .mobile-visualizer-close:hover,
    .mobile-visualizer-close:focus {
        text-decoration: none !important;
    }
    .mobile-visualizer-bubble {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #054086;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        align-items: center;
        justify-content: center;
        z-index: 9997;
        cursor: pointer;
        overflow: hidden;
        padding: 6px;
    }
    .mobile-visualizer-bubble img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .mobile-visualizer-bubble {
        display: flex;
    }
    .details-view-vehicle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 auto;
        padding: 8px 16px;
        border: 1px solid #054086;
        border-radius: 6px;
        color: #fff;
        background: #054086;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none !important;
        max-width: 180px;
        width: auto;
    }
    .details-view-vehicle-btn i {
        font-size: 13px;
    }
    .details-view-vehicle-btn:hover,
    .details-view-vehicle-btn:focus {
        background: #0a5cb8;
        color: #fff;
        text-decoration: none !important;
    }
    /* Zoom modal: fit content height, larger vehicle image, room for controls */
    .vehicle-zoom-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100vh;
        padding: 40px 15px 15px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        justify-content: flex-start !important;
        position: relative;
    }
    .vehicle-zoom-modal .close-modal {
        top: 12px !important;
        left: auto !important;
        right: 12px !important;
        font-size: 18px;
    }
    .vehicle-zoom-modal .threed-demo {
        top: 12px;
        left: 12px;
        bottom: auto !important;
        right: auto !important;
    }
    .vehicle-zoom-modal .s-logo {
        display: none;
    }
    .vehicle-zoom-modal .render-section {
        position: static !important;
        text-align: center;
        padding: 0 50px;
        margin-bottom: 8px;
        font-size: 13px;
        order: 3;
    }
    .vehicle-zoom-modal .ymm-text {
        order: 1;
        position: static !important;
        text-align: center !important;
        padding: 0 50px;
        margin: -28px 0 8px !important;
    }
    .vehicle-zoom-modal .ymm-text h2 {
        font-size: 18px;
        margin: 0;
    }
    .vehicle-zoom-modal #zoom-carousel {
        order: 2;
    }
    .vehicle-zoom-modal .zoom-footer {
        order: 4;
    }
    .vehicle-zoom-modal #zoom-carousel {
        max-height: none !important;
        padding-top: 0 !important;
    }
    .vehicle-zoom-modal #zoom-carousel-first-item-content,
    .vehicle-zoom-modal #zoom-carousel-second-item-content,
    .vehicle-zoom-modal #zoom-carousel-third-item-content {
        padding: 0 !important;
    }
    .vehicle-zoom-modal .zoom-carousel-first-item-vehicle-img,
    .vehicle-zoom-modal .zoom-carousel-second-item-vehicle-img,
    .vehicle-zoom-modal .zoom-carousel-third-item-vehicle-img {
        transform: scale(1.1) !important;
    }
    .vehicle-zoom-modal .zoom-carousel-first-item-vehicle-img img,
    .vehicle-zoom-modal .zoom-carousel-second-item-vehicle-img img,
    .vehicle-zoom-modal .zoom-carousel-third-item-vehicle-img img {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vehicle-zoom-modal .ymm-text {
        margin-top: 28px;
        text-align: center;
    }
    .vehicle-zoom-modal .ymm-text h2 {
        font-size: 18px;
        margin: 0;
    }
    .vehicle-zoom-modal .zoom-footer {
        margin-top: 16px;
    }
    /* Added accessories list inside zoom modal: stack + scroll */
    .vehicle-zoom-modal .zoom-add-acc-section {
        max-height: 500px;
        overflow-y: auto;
    }
    .vehicle-zoom-modal .zoom-add-acc-section .aacc-accessories,
    .vehicle-zoom-modal .zoom-add-acc-section .zoom-added-accessories,
    .vehicle-zoom-modal .zoom-add-acc-section .added-accessories {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* Accessory detail header: back/buttons on row 1, brand + FordPass on row 2 */
    .acc-detail-title > .row {
        flex-wrap: wrap;
        row-gap: 10px;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .acc-detail-title .back-btn {
        order: 1;
    }
    .acc-detail-title .brand-img {
        order: 2;
        margin-left: auto;
    }
    .acc-detail-title .acc-details-fp-section {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
    }
    .acc-detail-title .details-view-vehicle-btn {
        order: 4;
        flex-basis: 100%;
        margin: 4px auto;
    }
    .acc-detail-title .acc-title {
        order: 5;
        flex-basis: 100%;
    }
    /* Accessory detail body: stack Part # → Add to Cart → Pricing → Description */
    .prod-desc-row.row {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        gap: 12px;
        margin: 0;
    }
    .prod-desc-row.row > .description,
    .prod-desc-row.row > .detail-product-info-row,
    .prod-desc-row.row .detail-payment-row {
        display: contents;
    }
    .prod-desc-row.row .description > .desc-row:first-child {
        order: 1;
    }
    .prod-desc-row.row .detail-payment-row > .cart-btn {
        order: 2;
        margin: 0 auto !important;
    }
    .prod-desc-row.row .detail-payment-row > .payment-imp {
        order: 3;
        text-align: center;
    }
    .prod-desc-row.row .detail-payment-row > .price-breakdown-toggle {
        order: 4;
        width: 100%;
        text-align: center;
    }
    .prod-desc-row.row .detail-payment-row > .impact-row {
        order: 5;
        width: 100%;
        margin: 0;
    }
    .prod-desc-row.row .description > .stock-icon {
        order: 6;
    }
    .prod-desc-row.row .description > .desc-row:not(:first-child) {
        order: 7;
    }
    .prod-desc-row.row .detail-product-info-row > .fitment-row {
        order: 8;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Image section: main image full-width on top, thumbnails as horizontal swipeable row below */
    .ad-img-section {
        flex-direction: column !important;
        gap: 10px;
        width: 100%;
    }
    .ad-img-section .thumbnails {
        order: 2;
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }
    .ad-img-section .thumbnails .thumb-img {
        flex: 0 0 auto;
        margin: 0 !important;
        scroll-snap-align: start;
    }
    .ad-img-section .acc-viewer-acc {
        order: 1;
        width: 100% !important;
    }
    .ad-img-section .acc-viewer-acc .main-img,
    .ad-img-section .acc-viewer-acc .main-img.active {
        width: 100%;
        max-width: 100%;
    }
    .ad-img-section .acc-viewer-acc .accessory-webgl-container,
    .ad-img-section .acc-viewer-acc model-viewer {
        width: 100%;
    }
    .filter-section {
        height: auto;
    }
    .w-side .visualizer-section {
        flex-direction: column;
    }
    .accessory-viewer {
        width: 100% !important;
    }
    .mini-carousel {
        display: none;
    }

    /* -- Vehicle Builder: Detail Panel -- */
    .accessory-side-panel.show {
        margin-left: 0;
        position: absolute;
        background: #fff;
        height: 100%;
        z-index: 9999999;
        width: 100%;
    }

    /* -- Vehicle Builder: Zoom Modal -- */
    .zoom-added-acc {
        min-width: 350px;
        max-width: 350px;
    }
    .zoom-acc-info h2 {
        font-size: 16px;
    }
    .zoom-acc-img {
        max-width: 80px;
    }
    .zoom-footer {
        padding: 10px 15px;
    }

    /* -- Vehicle Builder: Added Accessories Bar -- */
    .aacs-section {
        flex-direction: column;
        gap: 10px;
    }
    .added-accessories-slider {
        max-width: 100%;
        margin-left: 0;
    }
    .add-vh-note-text {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* -- Vehicle Builder: Remaining Visualizer Items -- */
    .remain-acc-item, .added-accessory {
        margin: 0 5px;
    }
    .remain-acc-item img {
        max-width: 70px;
    }
    .added-accessory .aacc-img img {
        max-width: 100px;
        min-width: 80px;
    }

    /* -- Cart Side Panel -- */
    .cart-side {
        max-width: 100%;
        width: 100%;
    }
    .cart-side-header .continue-txt,
    .cart-side-header .close-cart-side {
        width: 25%;
    }
    .cart-side-header .dealer-info {
        width: 50%;
    }
    .cart-products-content .cart-acc {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cart-acc-info {
        max-width: 100%;
        margin: 0;
    }
    .cart-acc-price {
        min-width: auto;
        margin-left: 0;
        width: 100%;
    }
    .cart-side-footer-content {
        height: auto;
        min-height: 80px;
        flex-direction: column;
        gap: 10px;
    }
    .cart-checkout-payment-section {
        max-width: 100%;
        padding-right: 0;
    }

    /* -- Vehicle Search -- */
    .content-overlay {
        padding: 5% 3% 3% 3%;
    }
    h1.lgs-title {
        font-size: 40px;
        margin-bottom: 25px;
    }
    .bo-box, .inv-box {
        margin-left: 0;
        justify-content: center;
    }
    .bo-box h2, .inv-box h2 {
        max-width: 200px;
        font-size: 1.25rem;
    }
    .brand-overlay-logo {
        left: 50%;
        transform: translateX(-50%);
    }

    /* -- Vehicle Search: Make/Year Selectors -- */
    .make-select-makes {
        flex-wrap: wrap;
        max-height: none;
        gap: 5px;
    }

    /* -- Vehicle Results Grid -- */
    .vehicle-model, .vehicle-trim {
        max-width: 48% !important;
    }
    .vehicle-results {
        padding: 20px;
    }

    /* -- Vehicle Inventory -- */
    .vehicle {
        width: 47%;
    }
    .inventory-filters {
        flex-direction: column;
    }
    .filter-filters .form-group {
        width: 100%;
    }
    .search-top-bar {
        padding: 0 15px;
    }
    .search-top-bar, .search-top-bar .navbar {
        max-height: 100%;
    }
    .vehicles .vehicle-img img {
        min-height: 200px;
        max-height: 200px;
    }

    /* -- Checkout -- */
    .checkout-form {
        height: auto;
    }
    .checkout-form .col-md-7,
    .checkout-form .col-md-9 {
        height: auto;
    }
    .cf-content {
        height: auto;
        overflow-y: visible;
    }
    .checkout-modal, .checkout-payment-modal {
        width: 95%;
        padding: 15px;
    }
    .pi-section, .pi-slider-section {
        flex-direction: column;
    }
    .pi-section .pi-total-info,
    .pi-section .pi-fp-info,
    .pi-slider-section .pi-loan-sliders,
    .pi-slider-section .qr-code {
        width: 100% !important;
    }
    .payment-info .row {
        flex-direction: column;
    }
    .payment-info .col {
        margin-bottom: 8px;
    }
    .cart-section .cart-item {
        flex-direction: column;
    }
    .cart-item-info {
        flex-direction: column;
        gap: 8px;
    }
    .cart-item-price {
        max-width: 100%;
        justify-content: flex-start;
        gap: 15px;
    }
    .ep-content .cart-checkout-section {
        flex-direction: column;
    }
    .checkout-btns {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* -- Modals -- */
    .idle-popup-custom, .checkout-popup-custom, .checkout-complete-custom {
        width: 90vw !important;
        max-width: 90vw !important;
    }
    .page-modal {
        padding: 15px;
        max-width: 100%;
        height: 100%;
        margin-top: 0;
    }

    /* -- Admin -- */
    .fordpass-slide {
        width: 100%;
    }

    /* -- Sidebar Menu (hamburger) -- */
    .sidebar-menu {
        width: 320px;
        left: -320px;
    }
    .featured-models ul li {
        width: 47%;
    }

    /* -- Checkout page: mobile layout -- */
    body .main-content,
    body .page-content,
    body .sidebar-main-content .main-content,
    body .sidebar-main-content .page-content {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .checkout-form,
    .checkout-form > .col-md-7,
    .checkout-form > .col-md-5,
    .checkout-form .cart-section,
    .checkout-form .cart-section .cart-products-row,
    .checkout-form .cart-section .cart-items,
    .checkout-form .ep-section,
    .checkout-form .estimated-payment,
    .checkout-form .ep-content {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .checkout-form {
        display: flex !important;
        flex-direction: column !important;
    }
    .checkout-form > .col-md-7 {
        order: 2;
    }
    .checkout-form > .col-md-5 {
        order: 1;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eaecf0;
    }
    .checkout-form > .col-md-5 > h2 {
        display: none;
    }
    .checkout-form > .col-md-7 > h2 {
        margin-top: 4px;
    }
    .checkout-form .ep-content.open {
        display: flex !important;
        flex-direction: column !important;
    }
    .checkout-form .ep-content .cart-checkout-section {
        order: -1 !important;
        display: flex !important;
        gap: 10px;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    .checkout-form .ep-content .cart-checkout-section span {
        font-size: 13px;
        color: #6b7280;
    }
    .checkout-form .ep-content .cart-checkout-section a.side-checkout-button {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px !important;
        font-size: 14px !important;
        text-align: center;
        margin: 0 !important;
    }
    .checkout-form .cart-products-row {
        overflow: visible !important;
        max-height: none !important;
    }
    .checkout-form .cart-section {
        margin-bottom: 0 !important;
    }
    .checkout-form .cart-section .cart-items {
        margin-bottom: 10px !important;
    }
    .checkout-form .cart-item {
        background: #fff;
        border: 1px solid #eaecf0;
        border-radius: 8px;
        padding: 12px !important;
        margin-bottom: 12px;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* DOM: .cart-item > .cart-item-info > (.cart-acc-img + .cart-acc-info + .cart-item-price) */
    .checkout-form .cart-item-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 10px;
        width: 100% !important;
        max-width: 100% !important;
    }
    .checkout-form .cart-item-info > .cart-acc-img {
        flex: 0 0 auto;
        width: 100px;
        max-width: 100px;
        margin: 0 !important;
    }
    .checkout-form .cart-item-info > .cart-acc-img img {
        width: 100%;
        max-width: 100px;
        height: auto;
    }
    .checkout-form .cart-item-info > .cart-acc-info {
        flex: 1 1 auto;
        max-width: 100% !important;
        min-width: 0;
        margin: 0 !important;
    }
    .checkout-form .cart-item-info > .cart-acc-info h4 {
        font-size: 15px;
        margin-bottom: 6px;
        line-height: 1.3;
    }
    .checkout-form .cart-item-info > .cart-acc-info .cart-acc-pn-inst {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px;
        align-items: flex-start !important;
    }
    .checkout-form .cart-item-info > .cart-item-price {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin: 8px 0 0 !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid #eaecf0;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-price,
    .checkout-form .cart-item-info > .cart-item-price .cart-item-btns {
        display: flex !important;
        visibility: visible !important;
        width: auto !important;
        max-width: none !important;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-acc-qty,
    .checkout-form .cart-item-info > .cart-item-price .cart-price {
        flex: 1 1 0;
        margin: 0 !important;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-price {
        text-align: right;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-item-btns {
        flex: 0 0 auto;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-acc-qty h5,
    .checkout-form .cart-item-info > .cart-item-price .cart-price h5 {
        font-size: 13px;
        margin-bottom: 4px;
        color: #6b7280;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-acc-qty input {
        width: 70px;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-acc-total {
        font-size: 16px;
        font-weight: 700;
        color: #054086;
    }
}

/* ==========================================================================
   MOBILE ONLY (< 768px): Hide payment details behind a toggle
   ========================================================================== */
@media only screen and (max-width: 767px) {
    .mobile-details-toggle {
        order: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 14px;
        margin: 0 0 12px !important;
        border: 1px solid #054086;
        border-radius: 6px;
        color: #054086;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        background: #fff;
        text-decoration: none !important;
    }
    .checkout-form .ep-content .payment-info,
    .checkout-form .ep-content .pi-section,
    .checkout-form .ep-content .pi-divider,
    .checkout-form .ep-content .pi-slider-section {
        display: none !important;
    }
    .checkout-form .ep-content.details-open .payment-info,
    .checkout-form .ep-content.details-open .pi-section,
    .checkout-form .ep-content.details-open .pi-divider,
    .checkout-form .ep-content.details-open .pi-slider-section {
        display: block !important;
    }
}


/* ==========================================================================
   MOBILE (below 768px)
   ========================================================================== */
@media only screen and (max-width: 767px) {

    /* -- General -- */
    html, body {
        overflow-x: hidden;
    }

    /* -- Sidebar Layout: full-width, no sidebar visible -- */
    .sidebar-layout .sidebar {
        width: 85vw;
        max-width: 300px;
    }
    .sidebar-layout .sidebar-main-content {
        max-width: 100%;
    }

    /* -- Header / Nav -- */
    .top-nav .navbar {
        min-height: 44px;
        padding: 5px 0;
    }
    .navbar-nav.main-links .nav-link {
        font-size: 13px;
        margin: 0 5px;
        padding: 6px;
    }
    .site-tools-cart .navbar-nav {
        gap: 12px;
    }
    .site-tools-cart .navbar-nav a {
        font-size: 13px;
        letter-spacing: 0 !important;
    }
    span.cart-count {
        top: -8px;
        right: 55px;
        width: 14px;
        height: 14px;
        font-size: 10px;
    }
    .cart-navbar {
        margin-right: 5px;
    }

    /* -- Vehicle Builder: Accessories Header -- */
    .accessories-header h1 {
        font-size: 18px;
    }
    .ah-text img {
        max-width: 35px;
    }
    .product-count h5 {
        font-size: 14px;
    }
    .product-sort select {
        width: 130px;
        font-size: 13px;
    }

    /* -- Vehicle Builder: Accessory Cards -- */
    .col-md-2.accessory {
        width: 48%;
        max-width: 100%;
    }
    .accessories .accessory-img img,
    .available-visualizer .accessory-img img {
        min-height: 120px;
        max-height: 120px;
    }
    .accessory-header h3 {
        font-size: 11px;
        min-height: 28px;
    }
    .accessory-header h5 {
        font-size: 10px;
    }
    .accessory .brand-logo {
        min-height: 30px;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    .accessory .brand-logo img {
        max-height: 20px;
    }
    .price-section h5 {
        font-size: 18px;
        line-height: 22px;
    }
    .price-section h6 {
        font-size: 13px;
    }
    .ford-pass-section img {
        max-width: 100px;
    }
    .fp-points h5 {
        font-size: 14px;
    }
    .accessory-buttons {
        padding: 8px 5px;
    }
    .accessory-buttons .details-btn {
        font-size: 10px;
        padding: 6px 2px;
    }
    .accessory-buttons .favorite-button {
        padding: 6px;
    }

    /* -- Vehicle Builder: Layout -- */
    .catalog-tab-section {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .filter-side {
        height: auto;
    }
    .filters {
        height: auto;
        max-height: 40vh;
    }
    .filter-section {
        height: auto;
    }
    .w-side .visualizer-section {
        flex-direction: column;
    }
    .accessory-viewer {
        width: 100% !important;
        padding: 0;
    }
    .vehicle-carousel {
        height: 250px;
    }
    .mini-carousel {
        display: none;
    }
    .side-filter-buttons {
        font-size: 14px !important;
    }
    .product-search input {
        width: 100%;
    }

    /* -- Vehicle Builder: Detail Panel (full-screen overlay) -- */
    .accessory-side-panel.show {
        margin-left: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background: #fff;
        overflow-y: auto;
    }

    /* -- Vehicle Builder: Zoom Modal -- */
    .zoom-added-accessories {
        flex-direction: column;
    }
    .zoom-added-acc {
        min-width: 100%;
        max-width: 100%;
        margin: 5px 0;
    }
    .zoom-acc-info h2 {
        font-size: 14px;
    }
    .zoom-footer {
        padding: 8px 10px;
    }

    /* -- Vehicle Builder: Added Accessories -- */
    .added-accessories {
        flex-wrap: wrap;
    }
    .added-accessories-slider {
        max-width: 100%;
        margin-left: 0;
    }
    .add-vh-note-text {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .add-vh-buttons {
        justify-content: center;
    }

    /* -- Vehicle Builder: Remaining Visualizer -- */
    .remaining-vaccs, .aacc-accessories {
        gap: 8px;
    }
    .remain-acc-item img {
        max-width: 60px;
    }
    .remain-acc-details {
        max-width: 100%;
    }
    .rem-acc-detail-2 {
        flex-direction: column;
    }
    .rem-acc-price {
        margin-left: 0;
    }

    /* -- Vehicle Builder: Recommended Accessories -- */
    .recommended-accs .accessory {
        width: 48%;
    }
    .recommended-accs .accessory-img img {
        max-height: 100px;
    }

    /* -- Cart Side Panel: full-screen takeover -- */
    .cart-side {
        max-width: 100%;
        width: 100%;
    }
    .cart-side-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .cart-side-header .continue-txt,
    .cart-side-header .dealer-info,
    .cart-side-header .close-cart-side {
        width: auto;
    }
    .cart-side-header .dealer-info {
        order: -1;
        width: 100%;
        text-align: center;
    }
    .cart-side-header .dealer-info h4 {
        font-size: 14px;
    }
    .cart-products-content {
        height: auto;
        max-height: calc(100vh - 250px);
    }
    .cart-products-content .cart-acc {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .cart-acc-img {
        max-width: 80px;
    }
    .cart-acc-info {
        max-width: 100%;
        margin: 0;
    }
    .cart-acc-price {
        min-width: auto;
        margin-left: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .cart-item-btns {
        margin-left: 0;
        justify-content: flex-start;
    }
    .cart-side-footer-content {
        height: auto;
        flex-direction: column;
        padding: 10px;
    }
    .cart-checkout-section {
        flex-direction: column;
        gap: 10px;
    }
    .cart-checkout-section h5 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .install-selector {
        max-width: 100%;
    }

    /* -- Vehicle Search -- */
    .search-pages {
        padding: 2rem 0;
    }
    .content-overlay {
        padding: 15% 4% 4% 4%;
        height: 100dvh;
    }
    h1.lgs-title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    h1.lgs-title-or {
        font-size: 20px;
    }
    .button-row {
        margin-top: 30px;
        gap: 15px;
    }
    .bo-box, .inv-box {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .bo-box h2, .inv-box h2 {
        max-width: 100%;
        width: 90%;
        font-size: 1.1rem;
        padding: 12px 0;
    }
    .nav-toggle {
        top: 3%;
        left: 3%;
    }
    .video-action-btns {
        top: 3%;
        right: 3%;
    }
    .video-action-btns a {
        width: 40px !important;
        height: 40px !important;
    }
    .video-action-btns i {
        font-size: 22px;
    }
    .brand-overlay-logo {
        top: 3%;
    }
    .search-pages .brand-overlay-logo img {
        max-width: 100px;
    }

    /* -- Vehicle Search: Make/Year/Body selectors -- */
    .make-select-makes {
        flex-wrap: wrap;
        max-height: none;
        gap: 8px;
    }
    .make-select-makes h5 {
        margin-right: 10px;
        width: 100%;
    }
    a.make-link {
        margin: 0 8px;
    }
    .year-select, .body-select {
        flex-direction: column;
    }
    .year-select-header, .body-select-header {
        max-width: 100%;
        padding: 8px 15px;
    }
    .year-select-years {
        flex-direction: column;
    }
    .new-years, .used-years {
        width: 100%;
    }

    /* -- Vehicle Results Grid -- */
    .vehicle-model, .vehicle-trim {
        max-width: 100% !important;
        margin: 0 0 15px 0;
    }
    .vehicle-results {
        padding: 15px;
    }
    .search-inventory .vehicle {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* -- Vehicle Inventory -- */
    .vehicle {
        width: 100%;
    }
    .vehicles .vehicle-img img {
        min-height: 200px;
        max-height: 250px;
    }
    .vehicle-search {
        max-width: 100%;
        margin-left: 0;
    }
    .nu-filter {
        max-width: 100%;
    }
    .make-centered h3 {
        font-size: 18px;
    }

    /* -- Checkout -- */
    .checkout-form {
        height: auto;
        padding-bottom: 20px;
    }
    .checkout-form .col-md-7,
    .checkout-form .col-md-9 {
        height: auto;
        width: 100%;
    }
    .checkout-form .col-md-3 {
        width: 100%;
    }
    .cf-content {
        height: auto;
        overflow-y: visible;
    }
    .checkout-form h2 {
        font-size: 22px;
    }
    .checkout-form h3 {
        font-size: 22px;
    }
    .veh-info-top .vehicle-img img {
        max-width: 200px;
    }
    .cart-section .cart-products-row {
        max-height: none;
    }
    .cart-section .cart-item {
        flex-direction: column;
    }
    .cart-item-info {
        flex-direction: column;
        gap: 8px;
    }
    .cart-item-price {
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
    }
    .cart-acc-img {
        margin-right: 0;
    }
    .cart-acc-info {
        max-width: 100%;
        margin-left: 0;
    }
    .inst-section {
        min-width: auto;
        width: 100%;
    }

    /* Checkout: estimated payment */
    .pi-section, .pi-slider-section {
        flex-direction: column;
    }
    .pi-section .pi-total-info,
    .pi-section .pi-fp-info,
    .pi-slider-section .pi-loan-sliders,
    .pi-slider-section .qr-code {
        width: 100% !important;
    }
    .ep-content {
        padding: 10px;
    }
    .payment-info .row {
        flex-direction: column;
    }
    .payment-info .col {
        margin-bottom: 8px;
    }
    .ep-content .cart-checkout-section {
        flex-direction: column;
        margin: 20px 0 0 0;
    }
    .checkout-btns {
        flex-direction: column;
        align-items: center;
    }
    .checkout-btns a {
        max-width: 100%;
    }

    /* Checkout: form sections */
    .shipping-option {
        flex-direction: column;
    }
    .shipping-option .method-option,
    .shipping-option .method-cost {
        width: 100%;
        text-align: left;
    }
    .veh-extra-detail {
        flex-direction: column;
        gap: 5px;
    }

    /* -- Checkout Modals -- */
    .checkout-modal, .checkout-payment-modal {
        width: 100%;
        max-width: calc(100vw - 20px);
        margin-top: 10px;
        padding: 15px;
    }
    .product-modal {
        max-width: calc(100vw - 20px);
    }
    a.order-btn {
        max-width: 100%;
    }
    .cc-exp input {
        width: 48% !important;
    }

    /* -- Modals & Popups -- */
    .idle-popup-custom, .checkout-popup-custom, .checkout-complete-custom {
        width: 95vw !important;
        max-width: 95vw !important;
        border-radius: 12px !important;
    }
    .page-modal {
        padding: 10px;
        max-width: 100%;
        height: 100%;
        margin-top: 0;
    }
    .page-modal iframe {
        height: calc(100vh - 50px);
    }
    .vehicle-search-filter {
        width: 95%;
        left: 2.5%;
        top: 10%;
    }

    /* -- Sidebar Menu (hamburger drawer) -- */
    .sidebar-menu {
        width: 100%;
        left: -100%;
        padding: 15px;
    }
    .sb-open .sidebar-menu {
        left: 0;
    }
    .dealer-info {
        flex-wrap: wrap;
        gap: 8px;
    }
    .featured-models ul li {
        width: 47%;
    }
    .f-model h5 {
        font-size: 15px;
    }

    /* -- Sales Tools Panel -- */
    .sales-tools-content {
        max-width: 100%;
        width: 100%;
    }

    /* -- Admin -- */
    .fordpass-slide {
        width: 100%;
        max-height: 100vh;
    }
    .admin-container {
        padding-bottom: 15px;
    }

    /* -- QR Cart Pages -- */
    .ford-pass-cart-section {
        width: 100%;
    }
    .qr-code svg {
        max-width: 60px;
    }
    .fp-qr-codes {
        flex-direction: column;
        align-items: center;
    }

    /* -- Training Page -- */
    .email-template {
        width: 100%;
    }
}


/* ==========================================================================
   SMALL MOBILE (below 480px)
   ========================================================================== */
@media only screen and (max-width: 479px) {

    /* -- Header -- */
    .top-nav .navbar {
        flex-wrap: wrap;
        gap: 5px;
    }
    .navbar-nav.main-links .nav-link {
        font-size: 12px;
        padding: 4px;
    }
    .site-tools-cart .navbar-nav a {
        font-size: 11px;
    }

    /* -- Vehicle Builder: Accessory Cards single column -- */
    .col-md-2.accessory {
        width: 100%;
    }
    .accessories .accessory-img img,
    .available-visualizer .accessory-img img {
        min-height: 180px;
        max-height: 180px;
    }
    .accessory-header h3 {
        font-size: 13px;
        min-height: auto;
    }
    .price-section h5 {
        font-size: 22px;
    }
    .vehicle-carousel {
        height: 200px;
    }
    .recommended-accs .accessory {
        width: 100%;
    }

    /* -- Cart Side -- */
    .cart-side-header .dealer-info h4 {
        font-size: 13px;
    }
    .cart-side-header .dealer-info h6 {
        font-size: 12px;
    }
    .cart-acc-info h4 {
        font-size: 13px;
    }

    /* -- Vehicle Search -- */
    h1.lgs-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    h1.lgs-title-or {
        font-size: 16px;
    }
    .bo-box h2, .inv-box h2 {
        font-size: 1rem;
        padding: 10px 0;
    }
    .nav-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px;
    }
    .nav-menu-toggle i {
        font-size: 24px;
    }

    /* -- Vehicle Inventory -- */
    .swatch {
        flex: 0 0 auto;
        width: 11.333333%;
        margin: 5px 15px;
    }

    /* -- Checkout -- */
    .checkout-form h2 {
        font-size: 18px;
    }
    .checkout-form h3 {
        font-size: 18px;
    }
    .veh-info-top .vehicle-data h5 {
        font-size: 18px;
    }
    .veh-info-top .vehicle-img img {
        max-width: 160px;
    }
    .cart-total {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .ct-text {
        width: 100%;
    }
    .iTotal, .cTotal, .cartTotal {
        font-size: 22px;
        width: auto;
    }

    /* -- Checkout Buttons -- */
    a.side-checkout-button {
        padding: 7px 20px;
        font-size: 14px;
    }
    .submit-quote-btn, .side-checkout-button {
        padding: 7px 20px;
    }

    /* -- Sidebar Menu -- */
    .sidebar-menu .nav li a {
        font-size: 16px;
    }
    .dname h4 {
        font-size: 16px;
    }
    .f-model h5 {
        font-size: 14px;
    }
}


/* ==========================================================================
   TOUCH / HOVER ADJUSTMENTS
   Improve tap targets for touch devices
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Enlarge tap targets (nav and action buttons only) */
    .cart-edit-btn, .cart-remove-btn,
    a.co-btn-blue, a.co-btn-white {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Prevent hover-sticky states on touch */
    .bo-box h2:hover,
    .model-stock a:hover,
    .trim-stock a:hover,
    a.accessories-btn:hover,
    .accessory-buttons .details-btn:hover,
    a.chg-veh-btn:hover, a.chg-trim-btn:hover {
        opacity: 1;
    }
}


/* ==========================================================================
   LANDSCAPE ORIENTATION FIXES (phones in landscape)
   ========================================================================== */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .content-overlay {
        padding: 2% 4%;
        height: 100dvh;
    }
    h1.lgs-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .button-row {
        margin-top: 10px;
        gap: 10px;
        flex-direction: row;
    }
    .bo-box h2, .inv-box h2 {
        font-size: 0.9rem;
        padding: 8px 0;
    }
    .cart-products-content {
        max-height: calc(100dvh - 200px);
    }
    .idle-popup-custom {
        width: 80vw !important;
    }

    /* Vehicle builder in landscape phone */
    .accessories-header {
        flex-wrap: wrap;
        gap: 5px;
    }
    .accessories-header h1 {
        font-size: 16px;
    }
    .col-md-2.accessory {
        width: 30%;
    }
}


/* ==========================================================================
   TABLET (768px - 1024px): wider accessory grid
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .col-md-2.accessory {
        width: 31% !important;
    }
    /* Checkout: restore side-by-side columns on tablet (undo mobile stacked override) */
    .checkout-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .checkout-form > .col-md-7 {
        order: 1 !important;
        width: 58.333333% !important;
        max-width: 58.333333% !important;
        flex: 0 0 58.333333% !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .checkout-form > .col-md-5 {
        order: 2 !important;
        width: 41.666666% !important;
        max-width: 41.666666% !important;
        flex: 0 0 41.666666% !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .checkout-form > .col-md-5 > h2 {
        display: block !important;
    }
    .checkout-form .ep-content .cart-checkout-section {
        order: 99 !important;
    }
    /* Checkout cart item on tablet: everything on one row
       DOM: .cart-item > .cart-item-info > (.cart-acc-img + .cart-acc-info + .cart-item-price) */
    .checkout-form .cart-item-info {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px;
    }
    .checkout-form .cart-item-info > .cart-acc-img {
        width: 80px !important;
        flex: 0 0 80px;
    }
    .checkout-form .cart-item-info > .cart-acc-info {
        flex: 1;
        min-width: 0;
    }
    .checkout-form .cart-item-info > .cart-acc-info .cart-acc-pn-inst {
        flex-direction: row !important;
        gap: 14px;
        align-items: center !important;
        flex-wrap: wrap;
    }
    .checkout-form .cart-item-info > .cart-item-price {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        gap: 14px !important;
    }
    .checkout-form .cart-item-info > .cart-item-price .cart-acc-qty input {
        width: 60px;
    }
    /* Cart: inline price + install toggle on tablet */
    .cart-products-content .cart-acc-price {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
    }
    .cart-products-content .cart-acc-price h5 {
        flex-shrink: 0;
        margin: 0;
    }
    .cart-products-content .install-selector {
        width: auto !important;
        max-width: 360px;
        flex: 1;
    }
    /* Cart footer: arrange sections horizontally to save vertical space */
    .cart-side-footer-content {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px 20px;
    }
    .cart-side-footer-content .cart-checkout-payment-section,
    .cart-side-footer-content .ford-pass-cart-section,
    .cart-side-footer-content .qr-code,
    .cart-side-footer-content .cart-checkout-section {
        flex: 1 1 auto;
        width: auto !important;
        text-align: center;
    }
    .cart-side-footer-content .cart-checkout-section {
        flex: 1 1 100%;
    }
    .cart-side-footer-content a.side-checkout-button {
        max-width: 320px;
        margin: 0 auto;
    }
    /* Trim extra bottom scroll space in the cart */
    .cart-side .cart-products-content {
        padding-bottom: 10px !important;
    }
    .cart-products-row {
        padding-bottom: 0 !important;
    }

    /* Checkout page: move checkout buttons to top of payment calculator */
    .checkout-form .ep-content.open {
        display: flex;
        flex-direction: column;
    }
    .checkout-form .cart-checkout-section {
        order: -1;
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        margin: 16px 0 12px !important;
        padding: 0 !important;
        flex-wrap: nowrap;
    }
    .checkout-form .cart-checkout-section span {
        font-size: 13px;
        color: #6b7280;
        flex: 0 0 auto;
    }
    .checkout-form .cart-checkout-section a.side-checkout-button {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px !important;
        font-size: 14px !important;
        text-align: center;
        margin: 0 !important;
    }
    .checkout-form .ep-section,
    .checkout-form .ep-content,
    .checkout-form .estimated-payment {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .checkout-form > .col-md-5 > h2 {
        margin-bottom: 12px;
    }
}