/* ==============================
   89 ORIGINAL RESPONSIVE DESIGN
============================== */


/* Tablets */

@media (max-width: 992px){

.container{
    width:90%;
}

.product-grid{
    grid-template-columns:repeat(2,1fr);
}

.product-container{
    grid-template-columns:1fr;
}

.extra-grid{
    grid-template-columns:1fr 1fr;
}

.nav{
    gap:20px;
}

}


/* Mobile Phones */

@media (max-width:768px){

body{
    overflow-x:hidden;
}


/* Header */

.nav-container{
    padding:15px 0;
}

.nav{

    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    padding:25px;
    display:none;

}

.nav.open{
    display:flex;
}


.menu-btn{
    display:block;
}


/* Hero */

.shop-hero{
    padding:70px 20px;
}

.shop-hero h1{
    font-size:2rem;
}


/* Products */

.product-grid{
    grid-template-columns:1fr;
}


.product-card img{
    height:auto;
}


/* Search */

.shop-top{
    flex-direction:column;
}


.search-box{
    width:100%;
}


.search-box input{
    width:100%;
}


/* Product Details */

.product-details{
    padding:40px 0;
}


.product-info h1{
    font-size:1.8rem;
}


.buttons{
    flex-direction:column;
}


/* Cart */

.cart-item{
    flex-direction:column;
    text-align:center;
}


.cart-item img{
    width:100%;
    max-width:250px;
}


/* Footer */

.footer-inner{

flex-direction:column;

text-align:center;

gap:30px;

}

}


/* Small phones */

@media(max-width:480px){

.brand-logo{

width:120px;

}


.btn{

width:100%;

}


.filter-bar{

justify-content:center;

}


.filter-btn{

padding:8px 15px;

font-size:14px;

}

}