/* =========================================================
   SUPPLIER-SHOP3
   RESPONSIVE CSS
   Mobile / Tablet
========================================================= */


/* =========================================================
   GLOBAL RESPONSIVE SAFETY
========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

iframe,
video{
    max-width:100%;
}

input,
textarea,
select,
button{
    max-width:100%;
}


/* =========================================================
   TABLET
   769px - 992px
========================================================= */

@media (max-width:992px){

    /* -------------------------
       CONTAINER
    ------------------------- */

    .container{
        width:94%;
        max-width:100%;
    }


    /* -------------------------
       HEADER
    ------------------------- */

    .header{
        width:94%;
        max-width:94%;
    }


    /* -------------------------
       PRODUCTS GRID
    ------------------------- */

    .products-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:18px;
    }


    /* -------------------------
       FOOTER
    ------------------------- */

    .footer-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* -------------------------
       GENERAL WIDTH SAFETY
    ------------------------- */

    .product-detail,
    .cart-item,
    .checkout-container,
    .account-container,
    .order-container{
        width:100%;
        max-width:100%;
        min-width:0;
    }


    /* -------------------------
       TABLE
    ------------------------- */

    table{
        max-width:100%;
    }

}


/* =========================================================
   MOBILE
   768px and below
========================================================= */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }


    /* =====================================================
       GLOBAL CONTAINER
    ===================================================== */

    .container{
        width:92%;
        max-width:none;

        margin-left:auto;
        margin-right:auto;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .header{
        width:92%;
        max-width:92%;

        margin:15px auto;

        padding:13px 15px;

        min-height:65px;

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:12px;
    }


    .logo{
        min-width:0;
        max-width:calc(100% - 60px);

        font-size:22px;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .menu-toggle{
        display:flex;

        align-items:center;
        justify-content:center;

        width:45px;
        height:45px;

        flex:0 0 45px;

        padding:0;
        margin:0;

        background:transparent !important;

        color:#fff;

        border:none;
        border-radius:0;

        font-size:25px;
        line-height:1;

        cursor:pointer;

        z-index:100000;
    }


    .menu-toggle:hover{
        background:transparent !important;
        color:#D99B7F;
    }


    /* =====================================================
       DESKTOP MENU HIDE
    ===================================================== */

    .header .menu,
    .header nav.menu{
        display:none;
    }


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

    .mobile-menu{
        display:none !important;

        position:absolute !important;

        top:75px !important;
        right:10px !important;

        width:220px !important;
        max-width:calc(100vw - 30px);

        padding:15px !important;

        background:#0F3040 !important;

        border:1px solid rgba(255,255,255,.15);

        border-radius:20px;

        box-shadow:0 20px 50px rgba(0,0,0,.45);

        z-index:9999999 !important;
    }


    .mobile-menu.show{
        display:block !important;
    }


    .mobile-menu a{
        display:block;

        width:100%;

        padding:12px;

        margin-bottom:8px;

        text-align:center;

        color:#fff;

        border-radius:12px;

        background:rgba(255,255,255,.08);
    }


    .mobile-menu a:last-child{
        margin-bottom:0;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    .btn,
    .product-btn,
    .add-cart-btn,
    .cart-btn{
        display:inline-flex;

        align-items:center;
        justify-content:center;

        min-height:44px;

        max-width:100%;

        padding:11px 16px;

        border-radius:18px;
    }


    /* =====================================================
       HOME
    ===================================================== */

    .home-page{
        width:100%;
        max-width:100%;

        padding:15px 0;
    }


    .shop-title{
        width:100%;

        font-size:24px;

        line-height:1.6;

        overflow-wrap:anywhere;
    }


    /* =====================================================
       SECTION HEADER
    ===================================================== */

    .section-header{
        width:100%;
        max-width:100%;

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    .section-header h2{
        min-width:0;

        margin:0;

        font-size:20px;

        line-height:1.6;

        overflow-wrap:anywhere;
    }


    .view-all-btn{
        display:inline-flex;

        align-items:center;
        justify-content:center;

        flex-shrink:0;

        max-width:100%;

        padding:8px 14px;

        border-radius:20px;

        font-size:13px;

        white-space:nowrap;
    }


    /* =====================================================
       PRODUCTS GRID
    ===================================================== */

    .products-grid{
        width:100%;
        max-width:100%;

        display:grid;

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

        gap:12px;

        min-width:0;
    }


    /* =====================================================
       PRODUCT CARD
    ===================================================== */

    .product-card{
        width:100%;
        max-width:100%;

        min-width:0;
        min-height:auto;

        padding:12px;

        border-radius:20px;

        overflow:hidden;
    }


    /* =====================================================
       PRODUCT IMAGE
       مهم:
       بدون کراپ
    ===================================================== */

    .product-card img{
        display:block;

        width:100%;
        max-width:100%;

        height:auto;

        max-height:260px;

        object-fit:contain;
        object-position:center;

        padding:6px;

        border-radius:14px;

        background:rgba(255,255,255,.05);
    }


    /* =====================================================
       PRODUCT TITLE
    ===================================================== */

    .product-card h3{
        width:100%;
        min-width:0;

        font-size:14px;

        line-height:1.7;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /* =====================================================
       PRICE
    ===================================================== */

    .price,
    .old-price,
    .discount-price,
    .discount-badge{
        max-width:100%;

        overflow-wrap:anywhere;
    }


    .price,
    .discount-price{
        font-size:15px;
    }


    /* =====================================================
       PRODUCT BUTTON
    ===================================================== */

    .product-btn{
        width:100%;
        max-width:100%;

        font-size:13px;
    }


    /* =====================================================
       SLIDER
    ===================================================== */

    .slider-wrapper{
        width:100%;
        max-width:100%;

        display:flex;

        gap:12px;

        overflow-x:auto;
        overflow-y:hidden;

        padding-bottom:5px;

        scroll-behavior:smooth;

        scroll-snap-type:x proximity;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-x:contain;
    }


    .slider-card{
        width:auto;

        min-width:170px;
        max-width:80vw;

        flex:0 0 170px;

        scroll-snap-align:start;
    }


    /* =====================================================
       PRODUCT DETAIL
    ===================================================== */

    .product-detail{
        width:100%;
        max-width:100%;

        min-width:0;

        display:flex;

        flex-direction:column;

        gap:20px;
    }


    .product-image{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    .product-image img{
        display:block;

        width:100%;
        max-width:100%;

        height:auto;

        max-height:500px;

        object-fit:contain;
        object-position:center;
    }


    .product-info{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    .product-info h1{
        max-width:100%;

        font-size:22px;

        line-height:1.6;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /* =====================================================
       CART
    ===================================================== */

    .cart-item{
        width:100%;
        max-width:100%;

        min-width:0;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:15px;
    }


    .cart-image{
        width:auto;
        max-width:100%;
    }


    .cart-image img{
        display:block;

        width:160px;
        height:160px;

        max-width:100%;

        object-fit:contain;
        object-position:center;

        border-radius:18px;
    }


    .cart-info{
        width:100%;
        max-width:100%;

        min-width:0;

        text-align:center;
    }


    .cart-summary{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    /* =====================================================
       CHECKOUT
    ===================================================== */

    .checkout-container,
    .checkout-box,
    .checkout-content{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    /* =====================================================
       FORMS
    ===================================================== */

    form{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    input,
    textarea,
    select{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    textarea{
        resize:vertical;
    }


    /* =====================================================
       TABLES
    ===================================================== */

    .table-wrapper,
    .table-responsive,
    .orders-table-wrapper{
        width:100%;
        max-width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-x:contain;
    }


    table{
        width:max-content;

        max-width:none;

        white-space:nowrap;
    }


    /* =====================================================
       ACCOUNT
    ===================================================== */

    .account-container,
    .account-content,
    .account-card{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    /* =====================================================
       ORDERS
    ===================================================== */

    .orders-container,
    .orders-list,
    .order-card{
        width:100%;
        max-width:100%;

        min-width:0;
    }


    .order-card{
        overflow:hidden;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer{
        width:100%;

        padding:35px 20px;
    }


    .footer-container{
        width:100%;
        max-width:100%;

        grid-template-columns:1fr;

        gap:25px;
    }

}


/* =========================================================
   SMALL MOBILE
   450px and below
========================================================= */

@media (max-width:450px){

    /* =====================================================
       CONTAINER
    ===================================================== */

    .container{
        width:94%;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .header{
        width:94%;
        max-width:94%;

        padding:12px 13px;

        border-radius:20px;
    }


    .logo{
        font-size:20px;
    }


    .menu-toggle{
        width:40px;
        height:40px;

        flex:0 0 40px;

        font-size:22px;
    }


    .mobile-menu{
        top:70px !important;

        right:5px !important;

        width:calc(100vw - 20px) !important;

        max-width:280px;
    }


    /* =====================================================
       HOME
    ===================================================== */

    .home-page{
        padding:10px 0;
    }


    .shop-title{
        font-size:22px;

        margin-bottom:25px;
    }


    .home-page section h2{
        font-size:20px;
    }


    /* =====================================================
       SECTION HEADER
    ===================================================== */

    .section-header{
        flex-direction:column;

        align-items:stretch;

        gap:10px;
    }


    .section-header h2{
        width:100%;

        text-align:center;
    }


    .view-all-btn{
        width:100%;
        max-width:100%;
    }


    /* =====================================================
       PRODUCTS
    ===================================================== */

    .products-grid{
        grid-template-columns:1fr;

        gap:15px;
    }


    .product-card{
        width:100%;
        max-width:100%;

        padding:13px;
    }


    /* =====================================================
       PRODUCT IMAGE
       بدون کراپ
    ===================================================== */

    .product-card img{
        width:100%;
        max-width:100%;

        height:auto;

        max-height:300px;

        object-fit:contain;
        object-position:center;
    }


    .product-card h3{
        font-size:15px;

        line-height:1.7;
    }


    .price,
    .discount-price{
        font-size:16px;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    .btn,
    .product-btn,
    .add-cart-btn,
    .cart-btn{
        width:100%;

        min-height:46px;
    }


    /* =====================================================
       PRODUCT DETAIL
    ===================================================== */

    .product-info h1{
        font-size:20px;
    }


    /* =====================================================
       CART
    ===================================================== */

    .cart-image img{
        width:140px;
        height:140px;

        object-fit:contain;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   360px and below
========================================================= */

@media (max-width:360px){

    .container{
        width:95%;
    }


    .header{
        width:95%;
        max-width:95%;
    }


    .logo{
        font-size:18px;
    }


    .shop-title{
        font-size:21px;
    }


    .home-page section h2{
        font-size:18px;
    }


    /* =====================================================
       PRODUCT IMAGE
       کاملاً بدون کراپ
    ===================================================== */

    .product-card img{
        width:100%;
        max-width:100%;

        height:auto;

        max-height:260px;

        object-fit:contain;

        object-position:center;
    }


    .product-card h3{
        font-size:14px;
    }


    .slider-card{
        min-width:150px;
        flex-basis:150px;
    }


    .slider-wrapper{
        gap:10px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none) and (max-width:768px){

    .product-card:hover{
        transform:none;
    }


    .product-btn:active{
        transform:scale(.97);

        background:#A56F63;
    }


    .view-all-btn:active{
        transform:scale(.97);

        background:#A56F63;
    }


    .menu-toggle:active{
        transform:scale(.95);
    }

}


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

@media (max-width:850px) and (orientation:landscape){

    .products-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));

        gap:12px;
    }


    .product-card{
        min-height:350px;

        padding:12px;
    }


    .product-card img{
        width:100%;

        height:auto;

        max-height:180px;

        object-fit:contain;
    }


    .product-card h3{
        font-size:14px;
    }


    .price,
    .discount-price{
        font-size:15px;
    }

}