/* =====================================================
   MH EVO THEME
   CART MOBILE
   File : cart-mobile.css
   Breakpoint : <= 767px
===================================================== */

@media (max-width:767px){

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

    .mh-cart-container{
        margin:24px auto 48px;
        padding:0 16px;
    }

    .mh-cart-header{
        margin-bottom:24px;
    }

    .mh-cart-header h1{
        font-size:28px;
    }

    .mh-cart-header p{
        font-size:15px;
    }

    /* ==========================================
       LAYOUT
    ========================================== */

    .mh-cart-layout{
        display:block;
    }

    .woocommerce-cart-form{
        width:100%;
    }

    .cart-collaterals{
        width:100%;
        margin-top:32px;
    }

    /* ==========================================
       TABLE
    ========================================== */

    .shop_table th,
    .shop_table td{
        padding:16px;
    }

    /* MOBILE WIDTH OVERRIDE  */

.product-name{
    width:auto !important;
}

.product-thumbnail{
    width:auto !important;
    min-width:0 !important;
}

.product-quantity{
    min-width:0 !important;
}

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

    td.mh-mobile-hide-thumb{
        display:none!important;
    }

    .mh-product-mobile{
        display:flex;
        align-items:flex-start;
        gap:18px;
    }

    .mh-product-mobile-thumb{
        flex:0 0 90px;
        margin-top:4px;
    }

    .mh-product-mobile-thumb img{
        display:block;
        width:90px!important;
        height:90px!important;
        border-radius:14px;
        object-fit:cover;
    }

    .mh-product-mobile-info{
        flex:1;
        min-width:0;
        overflow:hidden;
        padding-right:40px;
    }

    /* ==========================================
       PRODUCT NAME
    ========================================== */

    .woocommerce table.shop_table_responsive td.product-name,
    .woocommerce-page table.shop_table_responsive td.product-name{

        padding-top:0!important;
        vertical-align:top;

    }

    .woocommerce table.shop_table_responsive td.product-name::before,
    .woocommerce-page table.shop_table_responsive td.product-name::before{

        display:none!important;
        content:none!important;

    }

    .product-name a{
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
        overflow:hidden;

        font-size:17px;
        font-weight:600;
        line-height:1.4;

        color:#222;
        text-decoration:none;
        word-break:break-word;
    }

    /* ==========================================
       PRODUCT IMAGE
    ========================================== */

    .product-thumbnail img{
        width:72px!important;
        height:72px!important;
    }

    .woocommerce table.shop_table_responsive td.product-thumbnail{

        vertical-align:top;

    }

    /* ==========================================
       PRICE & SUBTOTAL
    ========================================== */

    .product-price,
    .product-subtotal{

        font-size:16px;

    }

    .woocommerce table.shop_table_responsive td.product-price,
    .woocommerce table.shop_table_responsive td.product-subtotal{

        padding-top:14px;
        padding-bottom:14px;

    }
    
    /* ==========================================
       QUANTITY
    ========================================== */

    .quantity{
        margin:0;
    }

    .mh-qty{
        display:inline-flex;
        align-items:center;
    }

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

    .mh-cart-summary-header{
        padding:24px;
    }

    .cart_totals th,
    .cart_totals td{
        padding:16px 24px;
    }

    .wc-proceed-to-checkout{
        padding:24px;
    }

    .mh-cart-security{
        padding:0 24px 24px;
    }

/* ==========================================
   REMOVE BUTTON
========================================== */

.woocommerce table.shop_table_responsive tr.cart_item{

        position:relative;

    }

.woocommerce table.shop_table_responsive td.product-remove{

    position:absolute;
    top:14px;
    right:14px;

    width:auto;
    padding:0;
    border:0;
    background:none;

    text-align:right;
    z-index:20;

}

.woocommerce table.shop_table_responsive td.product-remove::before{

    display:none!important;

}

.woocommerce table.shop_table_responsive td.product-remove a.remove{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    border-radius:50%;
    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    font-size:18px;
    font-weight:700;
    color:#d32f2f!important;
    text-decoration:none;
}

    /* COUPON & CART ACTIONS */
    .woocommerce-cart-form td.actions{
        padding:20px 16px;
    }

    .woocommerce-cart-form td.actions .coupon{
        float:none !important;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        width:100% !important;
        margin:0 0 20px;
    }

    .woocommerce-cart-form td.actions .coupon #coupon_code{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
        box-sizing:border-box;
        height:46px;
    }

    .woocommerce-cart-form td.actions .coupon button{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        box-sizing:border-box;
        height:46px;
    }

    .woocommerce-cart-form td.actions > button[name="update_cart"]{
        width:100%;
        box-sizing:border-box;
        height:46px;
    }

    /* REMOVE DESKTOP HOVER EFFECT */
    .shop_table tbody tr:hover{
        background:transparent;
    }
/* =====================================================
   SMALL MOBILE
   <= 480px
===================================================== */

@media (max-width:480px){

    .actions .coupon{

        display:flex;
        flex-direction:column;
        align-items:stretch;

    }

    .actions .coupon input,
    .actions .coupon button,
    .actions > button{

        width:100%;

    }

}

/* ==========================================
   DESKTOP ONLY
========================================== */

@media (min-width:768px){

    .mh-product-mobile-thumb{
        display:none;
    }

}