@import url("mobile-fixes.css");

/* =========================================
   Funmibi Couture — SHOPPING BAG
========================================= */

.bag-page {
    background: #f7f6f2;
    color: #20242c;
}


.bag-header {

    padding: 28px 5vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid rgba(0,0,0,.10);

}


.bag-logo {

    color: #20242c;

    text-decoration: none;

    font-size: 22px;

    letter-spacing: 1px;

}


.bag-logo strong {
    font-weight: 900;
}


.continue-shopping {

    color: #20242c;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 2px;

}

.bag-header-links {
    display: flex;
    align-items: center;
    gap: 24px;
}


.bag-main {

    width: 90%;

    max-width: 1200px;

    margin: auto;

    padding: 100px 0;
}


.bag-heading p {

    color: #b08d24;

    font-size: 10px;

    letter-spacing: 4px;

}


.bag-heading h1 {

    margin-top: 15px;

    font-size: clamp(3.5rem, 6.5vw, 7rem);

    line-height: .9;

    letter-spacing: -4px;

}


.bag-items {

    margin-top: 70px;

    border-top: 1px solid #d8d7d1;

}


.bag-item {

    display: grid;

    grid-template-columns:
        60px
        1fr
        150px
        120px
        100px;

    align-items: center;

    gap: 25px;

    padding: 30px 0;

    border-bottom: 1px solid #d8d7d1;
}


.bag-item-number {

    color: #999;

    font-size: 10px;

    letter-spacing: 2px;
}


.bag-item-info h2 {

    font-size: 17px;

    font-weight: 500;
}


.bag-item-info p {

    margin-top: 7px;

    color: #999;

    font-size: 9px;

    letter-spacing: 2px;
}


.bag-item-price {

    font-size: 14px;

    font-weight: 600;
}


.bag-quantity {

    display: flex;

    align-items: center;

    gap: 15px;
}


.bag-quantity button {

    width: 30px;

    height: 30px;

    border: 1px solid #ccc;

    background: transparent;

    cursor: pointer;
}

.bag-quantity button:disabled {
    opacity: .35;
    cursor: not-allowed;
}


.remove-item {

    padding: 10px 18px;

    border: 1px solid #cfcfc9;

    background: transparent;

    color: #20242c;

    font-family: inherit;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all 0.25s ease;

    justify-self: start;
}


.remove-item:hover {

    background: #20242c;

    color: #fff;

    border-color: #20242c;

}




.bag-summary {

    max-width: 450px;

    margin-left: auto;

    margin-top: 50px;

}


.bag-summary > div {

    display: flex;

    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom: 1px solid #ccc;
}


.bag-summary span {

    font-size: 10px;

    letter-spacing: 2px;
}


.bag-summary strong {

    font-size: 20px;
}


.checkout-btn {

    width: 100%;

    margin-top: 20px;

    padding: 18px;

    border: none;

    background: #20242c;

    color: white;

    font-family: inherit;

    font-size: 10px;

    letter-spacing: 2px;

    cursor: pointer;
}


.checkout-btn:hover {

    background: #b08d24;
}


.empty-bag {

    text-align: center;

    padding: 100px 20px;

}


.empty-bag h2 {

    font-size: 25px;

    font-weight: 500;
}


.empty-bag p {

    margin: 15px 0 30px;

    color: #777;
}


.empty-bag a {

    display: inline-block;

    padding: 14px 25px;

    background: #20242c;

    color: white;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 2px;
}


/* MOBILE */

@media (max-width: 700px) {

    .bag-header {

        padding: 20px;

    }

    .bag-header-links { gap: 14px; }


    .bag-main {

        width: 90%;

        padding: 70px 0;

    }


    .bag-item {

        grid-template-columns: 1fr auto;

        gap: 15px;

    }


    .bag-item-number {

        display: none;

    }


    .bag-item-info {

        grid-column: 1 / 2;

    }


    .bag-item-price {

        grid-column: 2;

        grid-row: 1;

    }


    .bag-quantity {

        grid-column: 1;

    }


    .remove-item {

        grid-column: 2;

    }

}















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

.bag-product-image {
    width: 110px;
    height: 140px;
    overflow: hidden;
}


.bag-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}