/*
=========================================
HAPPY MISTHAN
RESPONSIVE
=========================================
*/

/* =====================================
Extra Small Phones
320px - 359px
===================================== */

@media screen and (max-width:359px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    .logo-area h1{
        font-size:16px;
    }

    .menu-btn,
    .cart-btn{
        width:42px;
        height:42px;
    }

    .search-bar input{
        height:50px;
        font-size:14px;
    }

    .hero-content{
        grid-template-columns:1fr 110px;
        min-height:160px;
        padding:16px;
    }

    .hero-left h2{
        font-size:18px;
    }

    .hero-left p{
        font-size:11px;
    }

    .hero-btn{
        height:38px;
        padding:0 18px;
        font-size:12px;
    }

    .hero-right img{
        width:110px;
    }

    .product-card{
        grid-template-columns:90px 1fr;
        gap:12px;
    }

    .product-image{
        width:90px;
        height:90px;
    }

    .product-info h3{
        font-size:15px;
    }

    .product-info p{
        font-size:12px;
    }

}

/* =====================================
Normal Phones
360px - 480px
===================================== */

@media screen and (min-width:360px) and (max-width:480px){

    .container{
        max-width:420px;
    }

}

/* =====================================
Large Phones
481px - 767px
===================================== */

@media screen and (min-width:481px) and (max-width:767px){

    .container{
        max-width:500px;
    }

    .hero-content{
        grid-template-columns:1fr 180px;
    }

}

/* =====================================
Tablet
768px - 991px
===================================== */

@media screen and (min-width:768px){

    .container{
        max-width:720px;
    }

    .hero-content{
        min-height:240px;
    }

}

/* =====================================
Laptop
992px - 1199px
===================================== */

@media screen and (min-width:992px){

    .container{
        max-width:960px;
    }

}

/* =====================================
Desktop
1200px - 1399px
===================================== */

@media screen and (min-width:1200px){

    .container{
        max-width:1180px;
    }

}

/* =====================================
Large Desktop
1400px+
===================================== */

@media screen and (min-width:1400px){

    .container{
        max-width:1320px;
    }

}

/* =====================================
Landscape Phones
===================================== */

@media screen and (max-height:500px) and (orientation:landscape){

    .hero-content{
        min-height:180px;
    }

}

/* =====================================
iPhone Safe Area
===================================== */

@supports (padding:max(0px)){

    .bottom-cart{

        left:max(12px,env(safe-area-inset-left));

        right:max(12px,env(safe-area-inset-right));

        bottom:max(12px,env(safe-area-inset-bottom));

    }

}

/* =====================================
Touch Devices
===================================== */

@media (hover:none){

    button:hover{

        transform:none !important;

    }

}

/* =====================================
Reduce Motion
===================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}