/* =====================================================
   SATRUPA CART PAGE
===================================================== */

body {
    background: #f8f6f2;
    color: #292929;
}


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

.cart-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.site-header {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #eeeeee;
}

.site-header .logo {
    color: #3a4921 !important;
    text-decoration: none !important;

    font-size: 24px;
    font-weight: 700;

    letter-spacing: 4px;
}

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

.nav-links a {
    color: #555 !important;
    text-decoration: none !important;

    font-size: 13px;
    font-weight: 500;

    transition: .25s;
}

.nav-links a:hover {
    color: #3a4921 !important;
}


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

.cart-header {
    padding: 65px 0 55px;

    background:
        linear-gradient(135deg,
            #eef0e7,
            #f8f6f2);

    border-bottom: 1px solid #e7e4dc;
}

.cart-header span {
    color: #a17f20;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.cart-header h1 {
    margin: 10px 0;

    color: #3a4921;

    font-size: 42px;
    font-weight: 600;
}

.cart-header p {
    color: #777;

    font-size: 14px;
}


/* =====================================================
   MAIN
===================================================== */

.cart-main {
    padding: 55px 0 80px;
}


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

.cart-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 360px;

    gap: 35px;

    align-items: start;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.cart-section-heading {
    margin-bottom: 20px;
}

.cart-section-heading span,
.summary-header span {
    color: #a17f20;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.cart-section-heading h2,
.summary-header h2 {
    margin-top: 7px;

    color: #3a4921;

    font-size: 25px;
    font-weight: 600;
}


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

.cart-items {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


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

.cart-items .product-card {
    display: grid !important;

    grid-template-columns: 125px minmax(0, 1fr) auto;

    grid-template-areas:
        "image name price"
        "image size price"
        "image quantity remove";

    gap: 8px 20px;

    align-items: center;

    padding: 18px;

    background: #fff;

    border: 1px solid #e8e4dc;

    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    transition: .25s;
}

.cart-items .product-card:hover {
    border-color: #d6d9c8;

    box-shadow: 0 12px 30px rgba(58, 73, 33, .09);
}


/* IMAGE */

.cart-items .product-card img {
    grid-area: image;

    width: 125px !important;
    height: 155px !important;

    object-fit: cover;

    border-radius: 11px;

    background: #eee9df;
}


/* NAME */

.cart-items .product-card h3 {
    grid-area: name;

    margin: 0;

    color: #30391d;

    font-size: 16px;
    font-weight: 600;
}


/* PRICE */

.cart-items .product-card .price {
    grid-area: price;

    margin: 0;

    color: #3a4921;

    font-size: 18px;
    font-weight: 700;

    white-space: nowrap;
}


/* SIZE */

.cart-items .product-card .cart-size {
    grid-area: size;

    margin: 0;

    color: #777;

    font-size: 12px;
}


/* QUANTITY */

.cart-items .product-card>div {
    grid-area: quantity !important;

    display: flex !important;

    align-items: center;

    gap: 0 !important;

    width: 105px;

    height: 38px;

    margin: 5px 0 0 !important;

    border: 1px solid #ddd8cf;

    border-radius: 8px;

    overflow: hidden;
}

.cart-items .product-card>div button {
    width: 34px;
    height: 100%;

    border: none;

    background: #fff;

    color: #3a4921;

    font-size: 18px;

    cursor: pointer;
}

.cart-items .product-card>div button:hover {
    background: #eef1e7;
}

.cart-items .product-card>div strong {
    flex: 1;

    text-align: center;

    color: #333;

    font-size: 13px;
}


/* REMOVE */

.cart-items .product-card>button {
    grid-area: remove;

    border: none;

    background: transparent;

    color: #b33a32;

    font-family: Poppins, sans-serif;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.cart-items .product-card>button:hover {
    text-decoration: underline;
}


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

.cart-summary {
    position: sticky;

    top: 95px;

    padding: 25px;

    background: #fff;

    border: 1px solid #e8e4dc;

    border-radius: 17px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.summary-header {
    padding-bottom: 18px;

    border-bottom: 1px solid #eee;
}


/* TOTAL CONTENT GENERATED BY JS */

#cart-total {
    padding: 20px 0;
}

#cart-total p {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin: 0 0 12px;

    color: #666;

    font-size: 13px;
}

#cart-total p strong {
    color: #444;
}

#cart-total hr {
    border: none;

    height: 1px;

    margin: 18px 0 !important;

    background: #eee;
}

#cart-total h2 {
    margin: 0;

    color: #3a4921;

    font-size: 20px;

    font-weight: 700;
}


/* =====================================================
   NOTES
===================================================== */

.summary-note {
    display: flex;

    gap: 9px;

    align-items: flex-start;

    padding: 10px 0;

    border-top: 1px solid #f0eee9;
}

.summary-note span {
    color: #3a4921;

    font-weight: 700;
}

.summary-note p {
    margin: 0;

    color: #777;

    font-size: 10px;

    line-height: 1.5;
}


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

.cart-buttons {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.continue-shopping-btn,
.checkout-btn {
    display: flex;

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

    min-height: 48px;

    padding: 12px 18px;

    border-radius: 9px;

    font-family: Poppins, sans-serif;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none !important;

    transition: .25s;
}

.continue-shopping-btn {
    border: 1px solid #3a4921;

    background: #fff;

    color: #3a4921 !important;
}

.continue-shopping-btn:hover {
    background: #f0f2e9;
}

.checkout-btn {
    border: 1px solid #3a4921;

    background: #3a4921;

    color: #fff !important;
}

.checkout-btn:hover {
    background: #293515;

    transform: translateY(-2px);
}


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

.empty-cart {
    display: none;

    max-width: 600px;

    margin: 20px auto 0;

    padding: 70px 30px;

    background: #fff;

    border: 1px solid #e8e4dc;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.empty-cart-icon {
    width: 75px;
    height: 75px;

    display: flex;

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

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #eef1e7;

    font-size: 30px;
}

.empty-cart h2 {
    margin-bottom: 10px;

    color: #3a4921;

    font-size: 25px;
}

.empty-cart p {
    margin-bottom: 25px;

    color: #777;

    font-size: 13px;
}

.empty-cart .checkout-btn {
    display: inline-flex;

    padding: 12px 25px;
}


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

.cart-footer {
    padding: 45px 20px;

    background: #202a13;

    color: white;

    text-align: center;
}

.cart-footer h3 {
    color: #d4af37;

    font-size: 20px;

    letter-spacing: 4px;
}

.cart-footer p {
    margin: 8px 0 18px;

    color: rgba(255, 255, 255, .7);

    font-size: 11px;
}

.cart-footer span {
    color: rgba(255, 255, 255, .5);

    font-size: 10px;
}


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

@media (max-width: 900px) {

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

}


@media (max-width: 650px) {

    .cart-container {
        width: calc(100% - 30px);
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links a:nth-child(3),
    .nav-links a:nth-child(4),
    .nav-links a:nth-child(5) {
        display: none;
    }

    .cart-header {
        padding: 45px 0;
    }

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

    .cart-main {
        padding: 40px 0 60px;
    }

    .cart-items .product-card {
        grid-template-columns: 90px minmax(0, 1fr);

        grid-template-areas:
            "image name"
            "image price"
            "image size"
            "image quantity"
            "image remove";
    }

    .cart-items .product-card img {
        width: 90px !important;
        height: 125px !important;
    }

    .cart-items .product-card .price {
        font-size: 16px;
    }

    .cart-items .product-card>button {
        justify-self: start;
    }

    .cart-summary {
        padding: 20px;
    }

}


@media (max-width: 430px) {

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

    .cart-items .product-card {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 7px 13px;
    }

    .cart-items .product-card img {
        width: 75px !important;
        height: 105px !important;
    }

    .cart-items .product-card h3 {
        font-size: 13px;
    }

    .cart-items .product-card .price {
        font-size: 15px;
    }

}