/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width: 1400px) {

    /* ===========
       CONTAINER
    ============ */

    .container {

        max-width: 1200px;

    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    /* ===========
       GRID LAYOUTS
    ============ */

    .entity-grid,
    .product-grid,
    .products-grid,
    .brand-grid,
    .brands-grid,
    .vehicle-grid,
    .vehicles-grid,
    .category-grid,
    .categories-grid,
    .contact-grid,
    .why-grid,
    #categoryGrid {

        grid-template-columns: repeat(3, minmax(0,1fr));

    }

    /* ===========
       FOOTER
    ============ */

    .footer-grid {

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

    }

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

    .hero-stats {

        gap: 32px;

    }

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

    .pdp-hero {

        grid-template-columns: 1fr;

    }

    .pdp-inquiry {

        position: static;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

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

    .main-navigation {

        display: none;

    }

    .mobile-menu-button {

        display: block;

    }

    .header-actions {

        display: none;

    }

    .header-wrapper {

        min-height: 72px;

    }

    .logo-image {

        max-height: 48px;

    }

    .mobile-navigation {

        position: fixed;

        top: 145px;

        left: 0;

        width: 100%;

        height: calc(100vh - 145px);

        display: none;

        padding: 24px;

        overflow-y: auto;

        background: #fff;

        z-index: 3000;

        box-shadow: 0 8px 24px rgba(0,0,0,.08);

    }

    .mobile-navigation.active {

        display: block;

    }


    /* ======================================================
       CTA
    ====================================================== */

    .cta-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .cta-actions {

        justify-content: center;

    }


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

    .catalogue-summary-wrapper {

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }


    /* ======================================================
       GALLERY
    ====================================================== */

    .store-gallery-large,
    .video-grid {

        grid-template-columns: 1fr;

    }

    .store-gallery-small {

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

    }


    /* ======================================================
       GRID LAYOUTS
    ====================================================== */

    .entity-grid,
    .product-grid,
    .products-grid,
    .brand-grid,
    .brands-grid,
    .vehicle-grid,
    .vehicles-grid,
    .category-grid,
    .categories-grid,
    .contact-grid,
    .why-grid,
    #categoryGrid {

        grid-template-columns: repeat(2, minmax(0,1fr));

    }

    .grid-4 {

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

    }


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

    .hero-stats {

        flex-wrap: wrap;

        justify-content: center;

    }


    /* ======================================================
       POPULAR VEHICLES
    ====================================================== */

    .popular-vehicles-grid {

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

    }


    /* ======================================================
       FOOTER
    ====================================================== */

    .footer-grid {

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

    }


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

    .pdp-trust {

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

    }

    .pdp-vehicle-grid,
    .pdp-related-grid {

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

    }

    .pdp-description-grid {

        grid-template-columns: 1fr;

    }

}

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

@media (max-width: 768px) {

    /* ======================================================
       CONTAINER
    ====================================================== */

    .container {

        width: 100%;

        max-width: 100%;

        padding: 0 16px;

    }


    /* ======================================================
       PAGE SPACING
    ====================================================== */

    .section-spacing,
    .catalogue-search,
    .category-directory,
    .brand-directory,
    .vehicle-directory,
    .product-directory,
    .catalogue-products {

        padding: 40px 0;

    }


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

    .catalogue-hero,
    .categories-hero,
    .brands-hero,
    .vehicles-hero {

        padding: 60px 0;

    }

    .catalogue-hero h1,
    .categories-hero h1,
    .brands-hero h1,
    .vehicles-hero h1,
    .hero-content h1 {

        font-size: 2rem;

    }

    .hero-content {

        text-align: center;

    }

    .hero-content h1 {

        line-height: 1.2;

    }

    .hero-content p {

        font-size: 1rem;

    }

    .hero-stats {

        display: flex;

        flex-direction: column;

        gap: 12px;

        margin-top: 24px;

    }

    .hero-stat strong {

        font-size: 22px;

    }

    .hero-stat-divider {

        display: none;

    }


    /* ======================================================
       SEARCH
    ====================================================== */

    .search-wrapper {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }

    .search-box {

        width: 100%;

    }

    #searchButton {

        width: 100%;

    }


    /* ======================================================
       FILTERS
    ====================================================== */

    .filter-wrapper {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }

    .filter-group,
    .catalogue-filter {

        width: 100%;

    }


    /* ======================================================
       CTA
    ====================================================== */

    .cta-wrapper {

        flex-direction: column;

        gap: 24px;

        text-align: center;

    }

    .cta-actions {

        display: flex;

        flex-direction: column;

        gap: 12px;

        width: 100%;

    }

    .cta-actions .btn {

        width: 100%;

    }


    /* ======================================================
       PAGINATION
    ====================================================== */

    .pagination-wrapper {

        flex-direction: column;

        gap: 16px;

        text-align: center;

    }


    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    .section-heading {

        margin-bottom: 32px;

    }


    /* ======================================================
       GRID UTILITIES
    ====================================================== */

    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns: 1fr;

    }


    /* ======================================================
       PRODUCT GRIDS
    ====================================================== */

    .products-grid,
    .entity-grid {

        grid-template-columns: 1fr;

    }


    /* ======================================================
       FOOTER
    ====================================================== */

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .footer-section {

        text-align: center;

    }

    .footer-bottom-links {

        justify-content: center;

    }


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

    .pdp-meta-pills {

        gap: 8px;

    }

    .pdp-pill {

        padding: 7px 12px;

        font-size: .85rem;

    }

    .pdp-sticky-rfq {

        position: fixed;

        bottom: 0;

        left: 0;

        width: 100%;

        padding: 12px;

        background: #fff;

        box-shadow: 0 -4px 20px rgba(0,0,0,.08);

        z-index: 5000;

    }

    .pdp-main-image {

        width: 100%;

        aspect-ratio: 1 / 1;

        object-fit: contain;

    }

    .pdp-thumbnails {

        display: flex;

        gap: 8px;

        overflow-x: auto;

        scrollbar-width: none;

    }

    .pdp-thumbnails::-webkit-scrollbar {

        display: none;

    }

    .pdp-thumbnail {

        width: 60px;

        height: 60px;

        flex: 0 0 auto;

    }

    .pdp-thumb-prev,
    .pdp-thumb-next {

        display: none;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 576px) {

    /* ======================================================
       GRID LAYOUTS
    ====================================================== */

    .entity-grid,
    .product-grid,
    .products-grid,
    .brand-grid,
    .brands-grid,
    .vehicle-grid,
    .vehicles-grid,
    .category-grid,
    .categories-grid,
    .contact-grid,
    .why-grid,
    #categoryGrid {

        grid-template-columns: 1fr;

    }


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

    .hero-stats {

        flex-direction: column;

        gap: 12px;

    }


    /* ======================================================
       CTA
    ====================================================== */

    .cta-wrapper {

        padding: 24px;

    }

    .cta-actions {

        flex-direction: column;

        width: 100%;

    }

    .cta-actions .btn {

        width: 100%;

    }


    /* ======================================================
       POPULAR VEHICLES
    ====================================================== */

    .popular-vehicles-grid {

        grid-template-columns: 1fr;

    }


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

    .pdp-trust {

        grid-template-columns: 1fr;

    }

    .pdp-title {

        font-size: 34px;

    }

    .pdp-tabs {

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: none;

    }

    .pdp-tabs::-webkit-scrollbar {

        display: none;

    }

    .pdp-tab {

        flex: 0 0 auto;

    }

    .pdp-vehicle-grid,
    .pdp-related-grid {

        grid-template-columns: 1fr;

    }

}