@media(max-width:1400px){

    .hero h1{

        font-size:82px;

    }

}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    h2{

        font-size:44px;

    }

    /*
    |--------------------------------------------------------------------------
    | HERO
    |--------------------------------------------------------------------------
    */

    .hero{

        grid-template-columns:1fr;

        min-height:auto;

        padding-top:120px;

    }

    .hero-content{

        order:1;

        padding:0 40px 80px;

        max-width:100%;

    }

    .home-hero-image{

        order:2;

        width:100%;

        min-height:700px;

    }

    .home-hero-image::before{

        background:
            linear-gradient(
                to top,
                var(--background) 0%,
                rgba(246,241,235,.85) 20%,
                transparent 60%
            );

    }

    /*
    |--------------------------------------------------------------------------
    | SHOP
    |--------------------------------------------------------------------------
    */

    .shop-layout{

        grid-template-columns:240px 1fr;

        gap:24px;

    }

    .shop-page{

        padding:40px 24px 80px;

    }

    .shop-page .products-grid{

        grid-template-columns:
            repeat(auto-fill,minmax(220px,1fr));

    }

    /*
    |--------------------------------------------------------------------------
    | PRODUCT PAGE
    |--------------------------------------------------------------------------
    */

    .single-product-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .single-product-gallery{

        position:relative;

        top:auto;

    }

    .single-product-content{

        position:relative;

        top:auto;

    }

    /*
    |--------------------------------------------------------------------------
    | ABOUT
    |--------------------------------------------------------------------------
    */

    .about-hero,
    .about-story-grid,
    .about-values-grid,
    .process-grid,
    .about-showcase{

        grid-template-columns:1fr;

    }

}

/*
|--------------------------------------------------------------------------
| SMALL TABLET
|--------------------------------------------------------------------------
*/

@media(max-width:992px){

    .shop-layout{

        display:flex;

        flex-direction:column;

        gap:24px;

    }

    .shop-sidebar{

        position:relative;

        top:0;

        width:100%;

        max-width:100%;

    }

    .shop-main{

        width:100%;

    }

    .shop-toolbar{

        flex-direction:column;

        align-items:stretch;

        gap:16px;

    }

    .shop-sort{

        width:100%;

        min-width:100%;

    }

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    /*
    |--------------------------------------------------------------------------
    | TOPBAR / NAVBAR
    |--------------------------------------------------------------------------
    */

    .topbar{

        display:none;

    }

    .navbar{

        height:84px;

        min-height:84px;

        padding:0 20px;

    }

    .logo-img{

        height:58px;

        max-height:58px;

    }

    /*
    |--------------------------------------------------------------------------
    | HERO
    |--------------------------------------------------------------------------
    */

    .hero{

        display:flex;

        flex-direction:column;

        padding-top:40px;

    }

    .hero-content{

        order:1;

        padding:40px 24px 60px;

    }

    .home-hero-image{

        order:2;

        width:100%;

        min-height:420px;

    }

    .hero-tag{

        font-size:14px;

    }

    .hero-content p{

        font-size:20px;

    }

    /*
    |--------------------------------------------------------------------------
    | SHOP
    |--------------------------------------------------------------------------
    */

    .shop-page{

        padding:32px 16px 80px;

    }

    .shop-layout{

        display:flex !important;

        flex-direction:column !important;

        gap:24px;

        width:100%;

    }

    .shop-sidebar{

        width:100% !important;

        max-width:100% !important;

        position:relative !important;

        top:auto !important;

        padding:20px;

        border-radius:20px;

    }

    .shop-main{

        width:100% !important;

        max-width:100% !important;

    }

    .shop-toolbar{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:16px;

        width:100%;

    }

    .shop-results{

        font-size:14px;

    }

    .shop-sort{

        width:100%;

        min-width:100%;

        height:58px;

        font-size:16px;

        border-radius:20px;

        padding:0 18px;

    }

    .products-grid{

        display:grid !important;

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

        gap:14px;

        width:100%;

    }

    .product-card{

        width:100%;

        max-width:100%;

        height:100%;

    }

    .product-image{

        aspect-ratio:1/1;

    }

    .sidebar-category{

        padding:14px 16px;

        font-size:14px;

    }

    .shop-page .product-content{

        padding:14px;

    }

    .shop-page .product-content h3{

        font-size:15px;

        line-height:1.3;

        margin-bottom:10px;

        min-height:39px;

    }

    .shop-page .product-price{

        font-size:16px;

    }

    .shop-page .product-bottom{

        flex-direction:column;

        align-items:stretch;

        gap:12px;

    }

    .shop-page .product-actions{

        width:100%;

        min-height:38px;

        justify-content:space-between;

    }

    .shop-page .product-cart-btn{

        width:38px;

        height:38px;

        min-width:38px;

        min-height:38px;

        border-radius:12px;

    }

    .shop-page .product-cart-btn::after{

        width:14px;

        height:14px;

        background:
            linear-gradient(#fff,#fff) center/100% 2.5px no-repeat,
            linear-gradient(#fff,#fff) center/2.5px 100% no-repeat;

    }

    /*
    |--------------------------------------------------------------------------
    | PRODUCT PAGE
    |--------------------------------------------------------------------------
    */

    .single-product-page{

        padding:30px 20px 80px;

    }

    .single-product-container{

        display:grid;

        grid-template-columns:1fr;

        gap:36px;

    }

    .single-product-content h1{

        font-size:42px;

        letter-spacing:0;

    }

    .single-product-price{

        font-size:36px;

    }

    .single-product-short p{

        font-size:17px;

    }

    .product-cart-box{

        flex-direction:column;

        gap:20px;

    }

    .quantity-box{

        width:100%;

    }

    .main-product-image img{

        width:100%;

        height:auto;

        max-height:520px;

        object-fit:cover;

        border-radius:28px;

    }

    /*
    |--------------------------------------------------------------------------
    | RELATED
    |--------------------------------------------------------------------------
    */

    .related-products-section{

        padding:40px 20px 100px;

        overflow:hidden;

    }

    .related-header{

        margin-bottom:28px;

    }

    .related-header h2{

        font-size:42px;

        line-height:1;

        letter-spacing:0;

    }

    .related-products-section .products-grid{

        display:grid;

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

        gap:14px;

    }

    /*
    |--------------------------------------------------------------------------
    | FOOTER
    |--------------------------------------------------------------------------
    */

    .footer-container{

        padding:60px 24px 32px;

    }

    .footer-links{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer-authority-badges{

        justify-content:flex-start;

        gap:14px;

    }

    .footer-authority-badge{

        width:min(100%,280px);

    }

    .footer-logo{

        height:58px !important;

        max-height:58px !important;

        width:auto;

    }

    /*
    |--------------------------------------------------------------------------
    | ABOUT
    |--------------------------------------------------------------------------
    */

    .about-hero-content{

        padding:60px 24px;

    }

    .about-hero h1{

        font-size:54px;

        letter-spacing:0;

    }

    .about-hero p{

        font-size:18px;

    }

    .about-hero-image{

        min-height:500px;

    }

    .about-story{

        padding:100px 20px;

    }

    .about-story h2{

        font-size:42px;

    }

    .about-values{

        padding:0 20px 100px;

    }

    .about-process{

        padding:0 20px 100px;

    }

    .about-showcase{

        padding:0 20px 100px;

        gap:40px;

    }

}

/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:520px){

    .products-grid{

        grid-template-columns:1fr !important;

    }

    .related-products-section .products-grid{

        grid-template-columns:1fr 1fr;

    }

    .shop-page .product-content{

        padding:12px;

    }

    .shop-page .product-content h3{

        font-size:14px;

    }

    .shop-page .product-price{

        font-size:15px;

    }

    .shop-page .product-card .novaro-qty__btn{

        width:28px;

        height:28px;

        font-size:16px;

    }

    .shop-page .product-card .novaro-qty__input{

        width:28px;

        font-size:13px;

    }

    .shop-page .product-card .novaro-qty{

        max-width:calc(100% - 48px);

    }

}