/* ==========================================================================
   CAMFORT MALL CART
   WooCommerce Classic Cart + Storefront Child Theme
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
    --cm-cart-text: #17181c;
    --cm-cart-muted: #777980;
    --cm-cart-border: #dedfe4;
    --cm-cart-bg: #fbfbfc;
    --cm-cart-left-bg: #fdfdfd;
    --cm-cart-right-bg: #f2f2f4;
    --cm-cart-white: #ffffff;
    --cm-cart-dark: #15171c;
    --cm-cart-price: #d63638;

    --cm-cart-radius: 8px;
    --cm-cart-radius-lg: 10px;

    --cm-cart-header-h: 110px;

    font-synthesis: none;
}


/* ==========================================================================
   2. STOREFRONT CONTAINER RESET
   ========================================================================== */

body.woocommerce-cart {
    background: var(--cm-cart-bg) !important;
}


/*
 * Prevent Storefront's content wrapper from squeezing the cart.
 */
body.woocommerce-cart .site-content > .col-full,
body.woocommerce-cart .site-main,
body.woocommerce-cart .content-area,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .woocommerce {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/*
 * Remove unnecessary footer spacing from the cart page.
 */
body.woocommerce-cart .site-footer {
    margin-top: 0 !important;
}


/* ==========================================================================
   3. MAIN CART LAYOUT
   ========================================================================== */

body.woocommerce-cart .cm-cart-columns {

    display: grid !important;

    grid-template-columns:
        minmax(0, 60%)
        minmax(0, 40%) !important;

    width: 100% !important;
    max-width: none !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    align-items: stretch !important;

    box-sizing: border-box !important;

    color: var(--cm-cart-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ==========================================================================
   4. LEFT CART AREA
   ========================================================================== */

body.woocommerce-cart .cm-cart-left {

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 38px 60px 60px !important;

    background: var(--cm-cart-left-bg) !important;

    box-sizing: border-box !important;
}


/* Cart heading */
body.woocommerce-cart .cm-cart-heading {

    margin: 0 0 20px !important;

    color: var(--cm-cart-text) !important;

    font-size: 22px !important;

    line-height: 1.25 !important;

    font-weight: 700 !important;
}


/* ==========================================================================
   5. CART ITEM LIST
   ========================================================================== */

body.woocommerce-cart .cm-cart-items {

    width: 100% !important;

    border-top: 1px solid var(--cm-cart-border) !important;
}


/* Individual item */
body.woocommerce-cart .cm-cart-item {

    display: grid !important;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        auto
        auto !important;

    align-items: center !important;

    column-gap: 16px !important;

    width: 100% !important;

    padding: 18px 0 !important;

    border-bottom: 1px solid var(--cm-cart-border) !important;

    box-sizing: border-box !important;
}


/* ==========================================================================
   6. PRODUCT IMAGE
   ========================================================================== */

body.woocommerce-cart .cm-cart-item__thumb {

    width: 64px !important;
    height: 64px !important;

    overflow: hidden !important;

    border-radius: 7px !important;

    background: #f2f2f4 !important;

    border: 1px solid var(--cm-cart-border) !important;
}

body.woocommerce-cart .cm-cart-item__thumb a,
body.woocommerce-cart .cm-cart-item__thumb img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;
}

body.woocommerce-cart .cm-cart-item__thumb img {

    object-fit: cover !important;
}


/* ==========================================================================
   7. PRODUCT INFORMATION
   ========================================================================== */

body.woocommerce-cart .cm-cart-item__info {

    min-width: 0 !important;
}


/* Product name */
body.woocommerce-cart .cm-cart-item__name {

    margin: 0 !important;
}

body.woocommerce-cart .cm-cart-item__name a {

    color: var(--cm-cart-text) !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    overflow-wrap: normal !important;

    word-break: normal !important;
}

body.woocommerce-cart .cm-cart-item__name a:hover {

    color: #4b4b50 !important;
}


/* Product meta */
body.woocommerce-cart .cm-cart-item__meta {

    margin-top: 4px !important;

    color: var(--cm-cart-muted) !important;

    font-size: 12px !important;

    line-height: 1.4 !important;
}

body.woocommerce-cart .cm-cart-item__meta p {

    margin: 0 !important;
}


/* ==========================================================================
   8. PRICE
   ========================================================================== */

body.woocommerce-cart .cm-cart-item__price {

    color: var(--cm-cart-price) !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    white-space: nowrap !important;
}

body.woocommerce-cart .cm-cart-item__price--mobile {

    display: none !important;
}


/* ==========================================================================
   9. REMOVE + QUANTITY
   ========================================================================== */

body.woocommerce-cart .cm-cart-item__actions {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;
}


/* Remove */
body.woocommerce-cart .cm-cart-item__remove-link {

    display: inline-flex !important;

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

    width: 30px !important;
    height: 30px !important;

    color: var(--cm-cart-muted) !important;

    text-decoration: none !important;

    border-radius: 6px !important;

    transition:
        color .15s ease,
        background .15s ease;
}

body.woocommerce-cart .cm-cart-item__remove-link:hover {

    color: var(--cm-cart-price) !important;

    background: #faf1f1 !important;
}


/* Quantity wrapper */
body.woocommerce-cart .cm-cart-item__qty .quantity {

    display: inline-flex !important;

    align-items: center !important;

    height: 32px !important;

    border: 1px solid var(--cm-cart-border) !important;

    border-radius: 7px !important;

    overflow: hidden !important;

    background: var(--cm-cart-white) !important;
}


/* Quantity input */
body.woocommerce-cart .cm-cart-item__qty .qty {

    width: 38px !important;

    height: 30px !important;

    margin: 0 !important;

    padding: 0 !important;

    text-align: center !important;

    background: var(--cm-cart-white) !important;

    color: var(--cm-cart-text) !important;

    border: none !important;

    font-size: 13px !important;

    box-shadow: none !important;

    appearance: textfield !important;
}

body.woocommerce-cart .cm-cart-item__qty .qty::-webkit-inner-spin-button,
body.woocommerce-cart .cm-cart-item__qty .qty::-webkit-outer-spin-button {

    -webkit-appearance: none !important;

    margin: 0 !important;
}


/* +/- buttons */
body.woocommerce-cart .cm-qty-btn {

    display: inline-flex !important;

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

    width: 27px !important;
    height: 30px !important;

    padding: 0 !important;

    background: #ffffff !important;

    color: var(--cm-cart-text) !important;

    border: none !important;

    font-size: 15px !important;

    line-height: 1 !important;

    cursor: pointer !important;
}

body.woocommerce-cart .cm-qty-btn:hover {

    background: #f5f5f6 !important;
}


/* ==========================================================================
   10. CONTINUE SHOPPING
   ========================================================================== */

body.woocommerce-cart .cm-cart-continue-link {

    display: inline-flex !important;

    align-items: center !important;

    margin-top: 20px !important;

    padding: 9px 16px !important;

    color: var(--cm-cart-text) !important;

    background: transparent !important;

    border: 1px solid var(--cm-cart-border) !important;

    border-radius: 7px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}

body.woocommerce-cart .cm-cart-continue-link:hover {

    background: #f6f6f7 !important;
}


/* ==========================================================================
   11. RIGHT CART AREA
   ========================================================================== */

body.woocommerce-cart .cm-cart-right {

    width: 100% !important;

    min-width: 0 !important;

    min-height: calc(100vh - var(--cm-cart-header-h)) !important;

    margin: 0 !important;

    padding: 32px 48px 40px !important;

    background: var(--cm-cart-right-bg) !important;

    box-sizing: border-box !important;
}


/* ==========================================================================
   12. STICKY SIDEBAR
   ========================================================================== */

body.woocommerce-cart .cm-cart-sticky {

    position: sticky !important;

    top: 20px !important;

    width: 100% !important;

    max-width: 560px !important;

    max-height: calc(100vh - 40px) !important;

    margin: 0 auto !important;

    display: flex !important;

    flex-direction: column !important;

    box-sizing: border-box !important;
}


/* ==========================================================================
   13. COUPON
   ========================================================================== */

body.woocommerce-cart .cm-cart-coupon-toggle-wrap {

    flex: 0 0 auto !important;

    margin: 0 0 16px !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;
}

body.woocommerce-cart .cm-cart-coupon-toggle {

    margin: 0 !important;

    color: var(--cm-cart-muted) !important;

    font-size: 13px !important;

    line-height: 1.4 !important;
}

body.woocommerce-cart .cm-cart-coupon-toggle a {

    color: var(--cm-cart-text) !important;

    font-weight: 600 !important;

    text-decoration: underline !important;
}


/* Coupon fields */
body.woocommerce-cart .cm-cart-coupon-fields {

    display: none !important;

    gap: 10px !important;

    margin-top: 12px !important;
}

body.woocommerce-cart .cm-cart-coupon-fields.cm-cart-coupon-fields--open {

    display: flex !important;
}

body.woocommerce-cart .cm-cart-coupon-input {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    height: 44px !important;

    padding: 0 13px !important;

    background: #fff !important;

    color: var(--cm-cart-text) !important;

    border: 1px solid var(--cm-cart-border) !important;

    border-radius: 7px !important;

    outline: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}

body.woocommerce-cart .cm-cart-coupon-input:focus {

    background: #fff !important;

    border-color: var(--cm-cart-border) !important;

    box-shadow: none !important;

    outline: none !important;
}

body.woocommerce-cart .cm-cart-coupon-apply {

    flex: 0 0 auto !important;

    height: 44px !important;

    padding: 0 20px !important;

    background: var(--cm-cart-dark) !important;

    color: #fff !important;

    border: none !important;

    border-radius: 7px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    cursor: pointer !important;
}


/* ==========================================================================
   14. ORDER SUMMARY
   ========================================================================== */

body.woocommerce-cart .cart-collaterals {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/*
 * Remove default WooCommerce float/sidebar behaviour.
 */
body.woocommerce-cart .cart-collaterals .cart_totals {

    float: none !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;
}


/*
 * The summary itself is NOT a white card anymore.
 * It belongs directly to the grey right section.
 */
body.woocommerce-cart .cm-cart-totals-card {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Summary title */
body.woocommerce-cart .cm-cart-card__title {

    margin: 0 0 18px !important;

    color: var(--cm-cart-text) !important;

    font-size: 21px !important;

    line-height: 1.25 !important;

    font-weight: 700 !important;
}


/* ==========================================================================
   15. TOTAL ROWS
   ========================================================================== */

body.woocommerce-cart .cm-cart-totals-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;

    width: 100% !important;

    padding: 7px 0 !important;

    color: var(--cm-cart-muted) !important;

    font-size: 13px !important;

    line-height: 1.4 !important;
}

body.woocommerce-cart .cm-cart-totals-row > span:last-child {

    color: var(--cm-cart-text) !important;

    text-align: right !important;

    white-space: nowrap !important;
}


/* Discount */
body.woocommerce-cart .cm-cart-totals-row--discount span:last-child {

    color: var(--cm-cart-price) !important;
}


/* Total */
body.woocommerce-cart .cm-cart-totals-row--total {

    margin-top: 8px !important;

    padding-top: 15px !important;

    border-top: 1px solid var(--cm-cart-border) !important;

    color: var(--cm-cart-text) !important;

    font-size: 17px !important;

    font-weight: 700 !important;
}

body.woocommerce-cart .cm-cart-totals-row--total > span:last-child {

    color: var(--cm-cart-text) !important;

    font-weight: 700 !important;
}


/* ==========================================================================
   16. CHECK OUT ACTION
   ========================================================================== */

body.woocommerce-cart .wc-proceed-to-checkout {

    position: sticky !important;

    bottom: 0 !important;

    z-index: 10 !important;

    margin: 18px 0 0 !important;

    padding: 12px 0 4px !important;

    background: var(--cm-cart-right-bg) !important;
}


/* Check Out button */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {

    display: flex !important;

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

    width: 100% !important;

    min-height: 50px !important;

    margin: 0 !important;

    padding: 0 20px !important;

    background: var(--cm-cart-dark) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 8px !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    text-align: center !important;

    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(0,0,0,.10) !important;

    box-sizing: border-box !important;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {

    opacity: .92 !important;
}


/* ==========================================================================
   17. CART FORM CLEANUP
   ========================================================================== */

body.woocommerce-cart .woocommerce-cart-form {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/*
 * Remove any default WooCommerce cart table layout influence.
 */
body.woocommerce-cart table.shop_table.cart {

    width: 100% !important;

    margin: 0 !important;

    border: none !important;

    background: transparent !important;
}


/* Prevent Storefront's generic cart table styles */
body.woocommerce-cart .shop_table.cart th,
body.woocommerce-cart .shop_table.cart td {

    border: none !important;

    background: transparent !important;
}


/* ==========================================================================
   18. MOBILE
   ========================================================================== */

@media (max-width: 900px) {

    body.woocommerce-cart .cm-cart-columns {

        grid-template-columns: 1fr !important;
    }


    body.woocommerce-cart .cm-cart-left {

        padding: 28px 24px 40px !important;
    }


    body.woocommerce-cart .cm-cart-right {

        min-height: auto !important;

        padding: 28px 24px 100px !important;
    }


    body.woocommerce-cart .cm-cart-sticky {

        position: static !important;

        max-height: none !important;

        max-width: none !important;
    }


    body.woocommerce-cart .cm-cart-item {

        grid-template-columns:
            56px
            minmax(0, 1fr)
            auto !important;

        column-gap: 12px !important;

        padding: 15px 0 !important;
    }


    body.woocommerce-cart .cm-cart-item__thumb {

        width: 56px !important;
        height: 56px !important;
    }


    /*
     * Desktop price hidden, mobile price shown under name.
     */
    body.woocommerce-cart .cm-cart-item__price--desktop {

        display: none !important;
    }


    body.woocommerce-cart .cm-cart-item__price--mobile {

        display: block !important;

        margin-top: 5px !important;
    }


    /*
     * Put quantity + remove into the last grid column.
     */
    body.woocommerce-cart .cm-cart-item__actions {

        flex-direction: column !important;

        align-items: flex-end !important;

        gap: 7px !important;
    }


    /*
     * Fixed mobile checkout action.
     */
    body.woocommerce-cart .wc-proceed-to-checkout {

        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 9999 !important;

        margin: 0 !important;

        padding:
            10px
            16px
            calc(10px + env(safe-area-inset-bottom))
            !important;

        background: rgba(242,242,244,.97) !important;

        border-top: 1px solid var(--cm-cart-border) !important;

        backdrop-filter: blur(8px);

        -webkit-backdrop-filter: blur(8px);

        box-sizing: border-box !important;
    }


    body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {

        min-height: 50px !important;

        border-radius: 8px !important;
    }


    /*
     * Coupon fields stack if screen is narrow.
     */
    body.woocommerce-cart .cm-cart-coupon-fields--open {

        flex-direction: column !important;
    }


    body.woocommerce-cart .cm-cart-coupon-apply {

        width: 100% !important;
    }
}


/* ==========================================================================
   19. SMALL MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    body.woocommerce-cart .cm-cart-left {

        padding:
            24px
            16px
            32px !important;
    }


    body.woocommerce-cart .cm-cart-right {

        padding:
            24px
            16px
            90px !important;
    }


    body.woocommerce-cart .cm-cart-heading {

        font-size: 20px !important;
    }


    body.woocommerce-cart .cm-cart-item {

        grid-template-columns:
            52px
            minmax(0, 1fr)
            auto !important;

        column-gap: 10px !important;
    }


    body.woocommerce-cart .cm-cart-item__thumb {

        width: 52px !important;
        height: 52px !important;
    }


    body.woocommerce-cart .cm-cart-item__qty .quantity {

        height: 30px !important;
    }


    body.woocommerce-cart .cm-qty-btn {

        width: 25px !important;
        height: 28px !important;
    }


    body.woocommerce-cart .cm-cart-item__qty .qty {

        width: 32px !important;
        height: 28px !important;
    }


    body.woocommerce-cart .wc-proceed-to-checkout {

        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


#post764 {
    margin: 0px !important;
}


/* Hide secondary header and footer on cart page */
body.woocommerce-cart .site-header__row--secondary {
    display: none !important;
}

body.woocommerce-cart .site-footer,
body.woocommerce-cart #colophon {
    display: none !important;
}


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

.cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cart-drawer__header-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.cart-drawer__title {
	display: inline-flex;
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}


/* =========================================================
   VIEW CART LINK
   ========================================================= */

.cart-drawer__view-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border: 1px solid #dedede;
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

.cart-drawer__view-cart svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.cart-drawer__view-cart:hover {
	background: #f7f7f7;
	border-color: #cfcfcf;
	color: #111;
	text-decoration: none !important;
	transform: translateY(-1px);
}

.cart-drawer__view-cart:focus-visible {
	outline: 2px solid #1d2327;
	outline-offset: 2px;
}


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

@media (max-width: 480px) {

	.cart-drawer__header-left {
		gap: 10px;
	}

	.cart-drawer__title {
		font-size: 18px;
	}

	.cart-drawer__view-cart {
		padding: 6px 9px;
		font-size: 12px;
		gap: 5px;
	}

	.cart-drawer__view-cart svg {
		width: 15px;
		height: 15px;
		flex-basis: 15px;
	}

}