/*=====================================
=====
        TABLETS
=======================================
===*/
@media (max-width: 992px){
    .hero-grid,
    .story-grid,
    .product-layout,
    .checkout-layout,
    .cart-layout,
    .shop-layout,
    .trending .container{
        grid-template-columns:1fr;
    }
    .feature-grid,
    .category-grid,
    .product-grid,
    .shop-products,
    .mission-grid,
    .values-grid,
    .why-grid,
    .contact-grid,
    .hours-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .hero-content{
        text-align:center;
    }
    .hero-content p{
        margin:auto;
        margin-bottom:30px;
    }
    .hero-buttons{
        justify-content:center;
    }
}
/*=====================================
=====
        MOBILE
=======================================
===*/
@media (max-width:768px){
    .nav-links{
        display:none;
    }
    .menu-toggle{
        display:block;
        font-size:1.8rem;
        cursor:pointer;
    }
    .feature-grid,
    .category-grid,
    .product-grid,
    .shop-products,
    .mission-grid,
    .values-grid,
    .why-grid,
    .contact-grid,
    .hours-grid{
        grid-template-columns:1fr;
    }
    .hero h1,
    .shop-hero h1,
    .product-hero h1,
    .checkout-hero h1,
    .about-hero h1,
    .contact-hero h1{
        font-size:2.6rem;
    }
    .section-header h2{
        font-size:2.2rem;
    }
    .product-card img{
        height:300px;
    }
    .cart-item{
        grid-template-columns:1fr;
        text-align:center;
    }
    .product-buttons{
        flex-direction:column;
    }
}
/*=====================================
=====
        SMALL PHONES
=======================================
===*/
@media (max-width:480px){
    .container{
        width:92%;
    }
    .hero{
        text-align:center;
    }
    .hero h1{
        font-size:2.2rem;
    }
    .hero p{
        font-size:.95rem;
    }
    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }
    .newsletter input{
        width:100%;
    }
}
.nav-links.show{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:85px;
    left:0;
    width:100%;
    background:white;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}