[data-visibility="hidden"] {display: none !important;}
.container {min-height: 70vh;}

.container.empty-cart {
    display: flex;
    align-items: center;
    padding: 20px 0px;
    justify-content: center;
    & .child {
        display: block;
        text-align: center;
        max-width: 50%;
    }
    & .child img {
        width: 200px;
        height: auto;
        display: block;
        margin: 0px auto 20px;
    }
    & .child p.desc {
        color: rgb(69, 69, 69);
        margin-top: 10px;
        font-size: 15px;
        line-height: 22px;
    }
    & a {
        text-decoration: none;
        padding: 8px 16px;
        background-color: rgb(0, 189, 242);
        color: rgb(255, 255, 255);
        display: block;
        width: 120px;
        font-size: 15px;
        margin: 20px auto 0px;
        border-radius: 7px;
        font-weight: 600;
    }
    & a:hover {opacity: 0.7;}
}

.cart-overview {
    margin-top: 110px;    
    & .child {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 1fr 340px;
        gap: 40px;
    }
    & .tab {background-color: #fff;border-radius: 17px;}    
    & .tab.end {
        height: auto;background-color: #fafafa;padding: 20px;margin-top: 50px;
        & p.subtotal {font-size: 20px;font-weight: 400;color: #353535;}
        & .amount {font-size: 28px; font-weight: 600; margin: 10px 0 20px 0;}
        & button.checkout {
            padding: 10px 0;
            font-size: 16px;
            border: 0;
            font-weight: 600;
            width: 100%;
            border-radius: 11px;
            background-color: #00BDF2;
            color: #fff;
            cursor: pointer;
            &:hover {background-color: #2f3a53;}
        }
    }
}
.cart-overview .item {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 17px;
    overflow: hidden;
    background-color: #f7f7f7;
    display: flex;
    align-items: flex-start;
    & a.image {display: flex;margin: 20px;}
    & a.image img {aspect-ratio: 1/1; height: 110px; object-fit: cover;border-radius: 11px;}
    & .contents {
        flex: 1;
        position: relative;
        display: block;
        padding: 20px 0;
        text-decoration: none;
        height: 100%;
        & .product-name {font-size: 20px; font-weight: 600; text-decoration: none; width: 100%;}
        & .desc {font-size: 16px; font-weight: 400; line-height: 1.4; color: #353535;margin-top: 7px;}
    }
    & .amount {font-size: 22px;font-weight: 600;margin: 20px;}
    & button.delete {
        position: absolute;
        right: 20px;
        bottom: 20px;
        border: 1px solid #fff;
        height: 38px;
        border-radius: 50px;
        color: #fff;
        font-size: 14px;
        background-color: #fff;
        cursor: pointer;
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        &:hover svg {fill: #ff0000;}
        & svg {height: 20px;width: 20px;display: flex;;fill: #454545;}

    }    
}

@media screen and (max-width: 1240px) {
    .cart-overview .child {grid-template-columns: 1fr 320px;gap: 30px;}
}

@media screen and (max-width: 1140px) {
    .cart-overview .child {grid-template-columns: 1fr 290px;gap: 20px;}
}

@media screen and (max-width: 940px) {
    .cart-overview {
        margin-top: 90px;
        & .child {grid-template-columns: auto;gap: 30px;}
        & .tab.end {order: -1;margin-top: 0;}
    }
}