/*=========================================================
  THE SPOILED CHEF
  RESPONSIVE
=========================================================*/

/*=========================================================
  LARGE DESKTOP
  ≤ 1400px
=========================================================*/

@media (max-width:1400px){

    :root{

        --container-width:1200px;

    }

}

/*=========================================================
  DESKTOP
  ≤ 1200px
=========================================================*/

@media (max-width:1200px){

    :root{

        --container-width:100%;

    }

    .hero__wrapper{

        gap:40px;

    }

    .product-grid{

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

    }

    .category-grid{

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

    }

    .why-grid{

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

    }

    .review-grid{

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

    }

    .gallery-grid{

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

    }

}

/*=========================================================
  LAPTOP
  ≤ 992px
=========================================================*/

@media (max-width:992px){

    html{

        font-size:95%;

    }

    .navigation{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .header__actions .btn{

        display:none;

    }

    .hero{

        padding-top:140px;

        min-height:auto;

    }

    .hero__wrapper{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero__content{

        max-width:100%;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__stats{

        justify-content:center;

    }

    .hero__image{

        order:-1;

    }

    .about__wrapper{

        grid-template-columns:1fr;

    }

    .location-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

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

    }

}

/*=========================================================
  TABLET
  ≤ 768px
=========================================================*/

@media (max-width:768px){

    html{

        font-size:90%;

    }

    .section{

        padding-block:70px;

    }

    .trust-grid,

    .category-grid,

    .product-grid,

    .why-grid,

    .review-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

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

    }

    .hero__buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero__buttons .btn{

        width:100%;

        max-width:320px;

    }

    .hero__stats{

        gap:24px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom-wrapper{

        flex-direction:column;

        text-align:center;

    }

    .newsletter-form{

        flex-direction:column;

        gap:15px;

    }

    .newsletter input{

        border-radius:50px;

    }

    .newsletter button{

        border-radius:50px;

        height:54px;

    }

}

/*=========================================================
  MOBILE
  ≤ 576px
=========================================================*/

@media (max-width:576px){

    html{

        font-size:87.5%;

    }

    :root{

        --container-padding:16px;

        --header-height:72px;

    }

    .logo img{

        width:135px;

    }

    .hero{

        padding-top:110px;

    }

    .hero__badge{

        font-size:.8rem;

        padding:8px 16px;

    }

    .hero__title{

        line-height:1.05;

    }

    .hero__description{

        font-size:1rem;

    }

    .hero__image::before{

        width:300px;

        height:300px;

    }

    .hero-card{

        display:none;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .category-card,

    .product-card,

    .review-card,

    .why-card,

    .faq-item{

        padding:24px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .location iframe{

        min-height:320px;

    }

    .back-to-top{

        width:48px;

        height:48px;

        right:16px;

        bottom:16px;

    }

}

/*=========================================================
  SMALL MOBILE
  ≤ 380px
=========================================================*/

@media (max-width:380px){

    html{

        font-size:85%;

    }

    .hero__buttons .btn{

        max-width:100%;

    }

    .hero__stats{

        flex-direction:column;

        gap:16px;

    }

    .product-footer{

        flex-direction:column;

        gap:15px;

        align-items:flex-start;

    }

    .footer-bottom-links{

        flex-direction:column;

        gap:10px;

    }

}
@media (max-width:768px){

    .review-summary{

        grid-template-columns:1fr;

        text-align:center;

        gap:25px;

    }

    .review-action{

        justify-content:center;

    }

}
@media (max-width:992px){

    .cta-wrapper{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

}