/* ==========================================================
   GLYDE Experience Center
   Responsive Styles
========================================================== */

/* ===========================
   Large Desktop
=========================== */

@media (min-width:1600px){

    .container{

        max-width:1500px;

    }

}

/* ===========================
   Desktop
=========================== */

@media (max-width:1200px){

    .product-layout{

        grid-template-columns:350px 1fr;

    }

}

/* ===========================
   Tablet Landscape
=========================== */

@media (max-width:992px){

    .hero h2{

        font-size:34px;

    }

    .product-layout{

        grid-template-columns:1fr;

    }

    .product-gallery{

        flex-direction:column-reverse;

    }

    .thumbnail-list{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

    }

    .main-image{

        max-width:700px;

        margin:auto;

    }

}

/* ===========================
   Tablet
=========================== */

@media (max-width:768px){

    .topbar .container{

        justify-content:center;

    }

    .brand{

        text-align:center;

    }

    .toolbar-grid{

        flex-direction:column;

        align-items:stretch;

    }

    .search-box{

        width:100%;

    }

    #sortProducts{

        width:100%;

    }

    .hero{

        padding:50px 20px;

    }

    .hero h2{

        font-size:28px;

    }

    .hero p{

        font-size:16px;

    }

    .product-grid{

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

    }

    .product-buttons{

        flex-direction:column;

    }

    .product-buttons .btn{

        width:100%;

    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:576px){

    .container{

        width:94%;

    }

    .product-grid{

        grid-template-columns:1fr;

    }

    .logo{

        width:42px;

        height:42px;

    }

    .brand h1{

        font-size:22px;

    }

    .hero h2{

        font-size:24px;

    }

    .hero p{

        font-size:15px;

    }

    .thumbnail{

        width:65px;

        height:65px;

    }

    .product-details h1{

        font-size:28px;

    }

    .product-actions{

        grid-template-columns:1fr;

    }

    .floating-whatsapp{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

        font-size:28px;

    }

    .video-box{

        padding:15px;

    }

    .close-video{

        width:34px;

        height:34px;

    }

}

/* ===========================
   Small Mobile
=========================== */

@media (max-width:380px){

    .hero{

        padding:40px 15px;

    }

    .hero h2{

        font-size:20px;

    }

    .product-grid{

        gap:18px;

    }

    .filter-btn{

        width:100%;

        text-align:center;

    }

}