/* ==========================================================
   Chatpata Club Responsive Design
========================================================== */


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .main-layout{

        grid-template-columns:220px 1fr;

        gap:18px;

        padding:0 18px 32px;

    }

    .product-grid{

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

    }

    .hero{

        padding:32px;

    }

}


/* ==========================
   MOBILE
========================== */

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    body{

        overflow-x:hidden;

    }

    .header{

        height:auto;

        padding:12px 16px;

        display:grid;

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

        gap:8px;

    }

    .logo{

        width:40px;

        height:40px;

    }

    #restaurantName{

        gap:4px;

        font-size:20px;

    }

    .logo-area{

        gap:8px;

        min-width:0;

    }

    .brand-tagline{

        margin-top:3px;

        font-size:9px;

    }

    .brand-slogan{

        max-width:165px;

        font-size:9px;

        white-space:normal;

    }

    .header-right{

        margin-left:auto;

        gap:8px;

    }

    .header-right .icon-button{

        width:40px;

        height:40px;

    }

}



@media (max-width:768px){

    .main-layout{

        display:flex;

        flex-direction:column;

        padding:0 16px 120px;

        gap:20px;

    }

}

@media (max-width:768px){

    header{

        padding:12px 16px;

    }

    .header-content{

        flex-wrap:wrap;

        gap:12px;

    }

    #searchInput{

        width:100%;

        order:3;

    }

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

    .product-body{

        padding:16px;

    }

    .product-name{

        font-size:18px;

    }

    .product-description{

        font-size:14px;

        min-height:auto;

    }

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

    .qty-minus,
    .qty-plus{

        width:44px;
        height:44px;

        font-size:20px;

    }

}

@media (max-width:768px){

    .hero{

        margin:16px;

        min-height:170px;

        padding:24px 20px;

        text-align:center;

    }

    .hero h2{

        font-size:26px;

    }

}

@media (max-width:768px){

    .search-section{

        margin:16px;

    }

    #searchInput{

        width:100%;

    }

}

@media (max-width:768px){

    .sidebar{

        position:static;

        width:100%;

        max-width:100%;

        overflow:hidden;

        padding:12px;

    }

    .sidebar h3{

        display:none;

    }

    .sidebar ul{

        flex-direction:row;

        flex-wrap:nowrap;

        gap:10px;

        width:100%;

        min-width:0;

        overflow-x:auto;

        overflow-y:hidden;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding-bottom:2px;

    }

    .sidebar ul::-webkit-scrollbar{

        display:none;

    }

    .sidebar li{

        white-space:nowrap;

        flex:0 0 auto;

        border-radius:25px;

        padding:10px 18px;

    }

}

@media (max-width:768px){

    .product-grid{

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

        gap:18px;

    }

    .product-card{

        min-width:0;

    }

    .section-header{

        gap:12px;

    }

    .section-header h2{

        min-width:0;

        font-size:28px;

    }

    .section-header select{

        flex:0 0 136px;

        width:136px;

    }

}

@media (max-width:768px){

    .floating-cart{

        left:0;

        right:0;

        bottom:0;

        width:100%;

        border-radius:18px 18px 0 0;

        padding:16px 20px;

    }

}

@media (max-width:768px){

    .cart-drawer{

        width:100%;

        height:85vh;

        top:auto;

        bottom:-100%;

        right:0;

        border-radius:24px 24px 0 0;

        transition:bottom .35s ease;

    }

    .cart-drawer.open{

        bottom:0;

    }

}

@media (max-width:768px){

    .modal{

        padding:0;

    }

    .modal-content{

        border-radius:24px 24px 0 0;

        max-width:100%;

        height:100vh;

        max-height:100vh;

    }

}

@media (max-width:768px){

    .qty-minus,
    .qty-plus{

        width:44px;

        height:44px;

        font-size:22px;

    }

}

@media (max-width:768px){

    footer{

        padding-bottom:90px;

    }

}