/* ============================================================================
   CAMFORT MALL CHECKOUT
   WooCommerce Classic Checkout + Storefront Child Theme
   ----------------------------------------------------------------------------
   Refactored architecture (read this before editing):

   - Every property that affects the checkout's HEIGHT / OVERFLOW / STICKY
     behaviour lives in ONE place only: section 4 ("LAYOUT ENGINE"). There is
     no duplicate height/overflow rule anywhere else in this file.
   - Desktop: `.cm-checkout-right` is `position: sticky; top: 0`. It does not
     just sit at a fixed height in normal flow — it PINS to the viewport as
     the page scrolls, so Pay Now never requires scrolling the page, no
     matter how tall the left-hand form grows.
   - Inside the sticky panel, only `#order_review` scrolls. `#payment`
     (Payment / Terms / Pay now) is a fixed-size flex child that is always
     fully visible. This is the real DOM boundary WooCommerce gives us
     (`#order_review` and `#payment` are siblings), so no table hacks like
     `tbody { display: block }` are used anywhere.
   - Inside `#order_review`, the totals row-group (`tfoot`: Subtotal / NHIL /
     VAT / Total) is `position: sticky; bottom: 0` *within that scroll box*.
     That means only the product rows (`tbody`) actually scroll past —
     totals visually stay put at the bottom of the order-review area,
     matching the target layout, without breaking table layout at all.
   - Mobile (<=900px) intentionally drops all of the above: normal document
     flow, Pay now becomes a sticky bottom action bar. This matches the
     mobile behaviour that already worked and was not touched structurally.
   ============================================================================ */


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

:root {
    --cm-radius: 8px;
    --cm-radius-lg: 10px;
    --cm-border: #dedfe4;
    --cm-text: #17181c;
    --cm-muted: #777980;
    --cm-page-bg: #fbfbfc;
    --cm-left-bg: #fdfdfd;
    --cm-right-bg: #f2f2f4;
    --cm-input-bg: #ffffff;
    --cm-dark: #15171c;
    --cm-danger: #d8452f;

    /* Height of the Storefront header on desktop. Adjust this if the header
       height on your site changes (logo size, announcement bar, etc). This
       is the single source of truth for the layout math in section 4. */
    --cm-header-h: 110px;

    /* WordPress admin bar height (only present for logged-in users). Handled
       separately below because it sits on TOP of the header, fixed to the
       viewport, and previously was not accounted for anywhere — that is a
       real cause of "Pay now sometimes below the viewport" during testing
       while logged in. */
    --cm-admin-bar-h: 32px;
    --cm-admin-bar-h-mobile: 46px;

    --cm-right-content-max: 560px;

    font-synthesis: none;
}


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

body.woocommerce-checkout .site-header__row--secondary {
    display: none !important;
}

body.woocommerce-checkout .site-header {
    margin-bottom: 0 !important;
}

body.woocommerce-checkout .site-content {
    margin-top: 0 !important;
}

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

/* Prevent Storefront's .col-full / content padding from squeezing the
   60/40 checkout columns. */
body.woocommerce-checkout .site-content > .col-full,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ============================================================================
   3. BASE COLUMN LAYOUT (60 / 40 GRID)
   ============================================================================ */

body.woocommerce-checkout .cm-checkout-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 60%) minmax(0, 40%) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;

    /* Left column stretches to match whichever column is taller (usually
       the sticky right column's viewport height). The right column opts
       out of stretch itself in section 4, via align-self. */
    align-items: stretch !important;

    box-sizing: border-box !important;
    color: var(--cm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
}

body.woocommerce-checkout .cm-checkout-left {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 36px 60px 48px !important;
    background: var(--cm-left-bg) !important;
    float: none !important;
    flex: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout #customer_details {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .cm-checkout-right {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 36px 48px 48px !important;
    background: var(--cm-right-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    float: none !important;
    flex: none !important;
    box-sizing: border-box !important;
}

/* Right-column content width (coupon, heading, order review, payment) */
body.woocommerce-checkout .cm-checkout-right .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .cm-checkout-right form.checkout_coupon,
body.woocommerce-checkout .cm-checkout-right #order_review_heading,
body.woocommerce-checkout .cm-checkout-right #order_review,
body.woocommerce-checkout .cm-checkout-right #payment {
    width: 100% !important;
    max-width: var(--cm-right-content-max) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Nothing inside the right side should create a "card" */
body.woocommerce-checkout .cm-checkout-right #order_review,
body.woocommerce-checkout .cm-checkout-right #payment,
body.woocommerce-checkout .cm-checkout-right .woocommerce-checkout-review-order-table {
    background: transparent !important;
    box-shadow: none !important;
}


/* ============================================================================
   4. LAYOUT ENGINE — height / overflow / sticky behaviour
   (Single source of truth. Do not add height/overflow rules elsewhere.)
   ============================================================================ */

@media (min-width: 901px) {

    /* The right panel pins to the viewport as the page scrolls, instead of
       just sitting at a fixed height in normal flow. This is what guarantees
       Pay now is reachable without ever scrolling the page, regardless of
       how long the left-hand form is. */
    body.woocommerce-checkout .cm-checkout-right {
        position: sticky !important;
        top: 0 !important;
        align-self: start !important;

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

        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* WordPress admin bar is fixed to the viewport on top of everything,
       including anything stuck at top:0. Previously unaccounted for — this
       is why the layout could look fine to a logged-out customer but break
       for a logged-in admin testing the page. */
    body.admin-bar.woocommerce-checkout .cm-checkout-right {
        top: var(--cm-admin-bar-h) !important;
        height: calc(100vh - var(--cm-header-h) - var(--cm-admin-bar-h)) !important;
        max-height: calc(100vh - var(--cm-header-h) - var(--cm-admin-bar-h)) !important;
    }

    /* Fixed-size children: coupon, heading, payment */
    body.woocommerce-checkout .cm-checkout-right .woocommerce-form-coupon-toggle,
    body.woocommerce-checkout .cm-checkout-right form.checkout_coupon,
    body.woocommerce-checkout .cm-checkout-right #order_review_heading,
    body.woocommerce-checkout .cm-checkout-right #payment {
        flex: 0 0 auto !important;
    }

    /* The ONLY scrolling region on desktop. */
    body.woocommerce-checkout .cm-checkout-right #order_review {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
    }

    body.woocommerce-checkout .cm-checkout-right #order_review::-webkit-scrollbar {
        width: 5px;
    }

    body.woocommerce-checkout .cm-checkout-right #order_review::-webkit-scrollbar-track {
        background: transparent;
    }

    body.woocommerce-checkout .cm-checkout-right #order_review::-webkit-scrollbar-thumb {
        background: #c9c9ce;
        border-radius: 10px;
    }

    /* Totals stay visually "docked" at the bottom of the order-review scroll
       box, so only the products themselves scroll past underneath — without
       touching tbody/table display at all. Requires an opaque background so
       scrolling rows don't show through. */
    body.woocommerce-checkout .cm-checkout-right .woocommerce-checkout-review-order-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    body.woocommerce-checkout .cm-checkout-right .woocommerce-checkout-review-order-table tfoot {
        position: sticky !important;
        bottom: 0 !important;
        background: var(--cm-right-bg) !important;
    }

    body.woocommerce-checkout .cm-checkout-right .woocommerce-checkout-review-order-table tfoot th,
    body.woocommerce-checkout .cm-checkout-right .woocommerce-checkout-review-order-table tfoot td {
        background: var(--cm-right-bg) !important;
    }

    /* Pay now sits statically inside the always-visible #payment block —
       no sticky/backdrop trickery needed on desktop. Removing the mobile
       sticky-button reserved padding here is what stops #payment from
       silently growing taller than it needs to be inside the fixed-height
       panel (a real contributor to Pay now falling out of view before). */
    body.woocommerce-checkout .cm-checkout-right #payment.woocommerce-checkout-payment {
        padding-bottom: 0 !important;
    }

    body.woocommerce-checkout .cm-checkout-right #payment .place-order {
        position: static !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        z-index: auto !important;
    }

    body.woocommerce-checkout .cm-checkout-right #payment .place-order::before {
        display: none !important;
    }
}

@media (max-width: 900px) {
    /* Explicit, defensive reset: normal document flow, no scroll box. */
    body.woocommerce-checkout .cm-checkout-right {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.woocommerce-checkout .cm-checkout-right .woocommerce-checkout-review-order-table tfoot {
        position: static !important;
    }
}


/* ============================================================================
   5. SECTION HEADINGS
   ============================================================================ */

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .cm-shipping-method-wrap h3,
body.woocommerce-checkout #payment.woocommerce-checkout-payment::before {
    color: var(--cm-text) !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout #order_review_heading {
    margin: 0 0 18px !important;
}

body.woocommerce-checkout .cm-shipping-method-wrap {
    margin-top: 26px !important;
}

body.woocommerce-checkout .cm-shipping-method-wrap h3 {
    margin: 0 0 12px !important;
}

body.woocommerce-checkout #payment.woocommerce-checkout-payment {
    position: relative !important;
    margin-top: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

body.woocommerce-checkout #payment.woocommerce-checkout-payment::before {
    content: "Payment";
    display: block !important;
    margin: 0 0 12px !important;
}


/* ============================================================================
   6. BILLING / DELIVERY FIELDS
   ============================================================================ */

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: flow-root !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* First / Last name */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    width: calc(50% - 7px) !important;
    float: left !important;
    clear: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    float: right !important;
}

/* Delivery address + Region */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-address {
    width: calc(66.666% - 7px) !important;
    float: left !important;
    clear: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-region {
    width: calc(33.333% - 7px) !important;
    float: right !important;
    clear: none !important;
}

/* Town/City + Phone */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-city {
    width: calc(50% - 7px) !important;
    float: left !important;
    clear: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-phone {
    width: calc(50% - 7px) !important;
    float: right !important;
    clear: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after {
    content: "";
    display: table;
    clear: both;
}


/* ============================================================================
   7. FIELD LABELS
   ============================================================================ */

body.woocommerce-checkout .woocommerce-billing-fields label {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--cm-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

body.woocommerce-checkout .woocommerce-billing-fields label .required {
    color: var(--cm-danger) !important;
    text-decoration: none !important;
}


/* ============================================================================
   8. INPUTS + SELECT2
   ============================================================================ */

body.woocommerce-checkout .woocommerce-billing-fields input.input-text,
body.woocommerce-checkout .woocommerce-billing-fields select,
body.woocommerce-checkout .woocommerce-billing-fields textarea,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    padding: 0 13px !important;
    background: var(--cm-input-bg) !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 7px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-billing-fields input.input-text::placeholder {
    color: var(--cm-muted) !important;
}

/* Focus should look identical to the resting state */
body.woocommerce-checkout .woocommerce-billing-fields input.input-text:focus,
body.woocommerce-checkout .woocommerce-billing-fields select:focus,
body.woocommerce-checkout .woocommerce-billing-fields textarea:focus,
body.woocommerce-checkout .select2-container--default .select2-selection--single:focus,
body.woocommerce-checkout .select2-container--default .select2-selection--single:focus-within {
    background: var(--cm-input-bg) !important;
    border-color: var(--cm-border) !important;
    outline: none !important;
    box-shadow: none !important;
}

body.woocommerce-checkout input,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

body.woocommerce-checkout .select2-container--default {
    width: 100% !important;
    max-width: 100% !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    color: var(--cm-text) !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection__arrow {
    height: 42px !important;
}


/* ============================================================================
   9. CREATE ACCOUNT + EMAIL
   ============================================================================ */

/* When Create Account exists, email shares the row */
body.woocommerce-checkout.cm-has-create-account #billing_email_field {
    width: calc(68% - 7px) !important;
    float: left !important;
    clear: none !important;
}

body.woocommerce-checkout.cm-has-create-account .woocommerce-account-fields {
    display: block !important;
    width: calc(32% - 7px) !important;
    float: right !important;
    clear: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* When Create Account does not exist, email uses the full width */
body.woocommerce-checkout:not(.cm-has-create-account) #billing_email_field {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    margin: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__input-checkbox {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    accent-color: var(--cm-dark);
    box-shadow: none !important;
}

body.woocommerce-checkout .woocommerce-account-fields .create-account {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================================
   10. SHIPPING METHOD
   ============================================================================ */

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cm-input-bg) !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-lg) !important;
    overflow: hidden !important;
}

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border);
}

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method li:last-child {
    border-bottom: none;
}

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 12px 0 0;
    border: 2px solid #c7c8ce;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    box-shadow: none;
}

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method input[type="radio"]:checked {
    border-color: var(--cm-dark);
}

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--cm-dark);
}

body.woocommerce-checkout .cm-shipping-method-wrap ul#shipping_method label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
}

.cm-shipping-name {
    font-weight: 600;
}

.cm-shipping-cost {
    font-weight: 600;
}


/* ============================================================================
   11. PAYMENT METHODS
   ============================================================================ */

body.woocommerce-checkout #payment ul.wc_payment_methods.payment_methods {
    list-style: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid #dfdfe3 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
    margin: 0 !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border-bottom: 1px solid #dfdfe3 !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:last-child {
    border-bottom: none !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 12px 0 0 !important;
    vertical-align: middle !important;
    border: 2px solid #c7c8ce !important;
    border-radius: 50% !important;
    position: relative !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods input[type="radio"]:checked {
    border-color: var(--cm-dark) !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--cm-dark);
}

body.woocommerce-checkout #payment ul.wc_payment_methods label {
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

body.woocommerce-checkout #payment ul.wc_payment_methods img {
    height: 20px !important;
    width: auto !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* Payment method description (e.g. "Order Now, Pay Later" copy) stays
   hidden — the method itself remains selectable via its radio + label. */
body.woocommerce-checkout #payment .payment_box {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}


/* ============================================================================
   12. ORDER REVIEW TABLE
   ============================================================================ */

body.woocommerce-checkout #order_review {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
    display: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    background: transparent !important;
    box-shadow: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid var(--cm-border) !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 14px 0 !important;
    vertical-align: top !important;
    font-size: 14px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    width: 70% !important;
    max-width: 70% !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
    width: 30% !important;
    max-width: 30% !important;
    padding-left: 12px !important;
    text-align: right !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}


/* ============================================================================
   13. CART / PRODUCT ITEM
   ============================================================================ */

body.woocommerce-checkout .cm-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

body.woocommerce-checkout .cm-cart-item__image {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 7px;
    overflow: hidden;
    background: #f2f2f4;
    border: 1px solid var(--cm-border);
}

body.woocommerce-checkout .cm-cart-item__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.woocommerce-checkout .cm-cart-item__info {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* Product names must wrap normally — never collapse into
   character-by-character wrapping. min-width:0 on the flex parents above is
   what allows normal wrapping instead of the flex item refusing to shrink
   and forcing the browser into extreme break-word wrapping. */
body.woocommerce-checkout .cm-cart-item__name {
    display: block;
    width: 100%;
    color: var(--cm-text);
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

body.woocommerce-checkout .cm-cart-item__info .product-quantity {
    color: var(--cm-muted);
    font-weight: 400;
}

body.woocommerce-checkout .cm-cart-item__info dl,
body.woocommerce-checkout .cm-cart-item__info .wc-item-meta {
    margin: 4px 0 0;
    color: var(--cm-muted);
    font-size: 12px;
}

body.woocommerce-checkout .cm-cart-item__info dl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body.woocommerce-checkout .cm-cart-item__info dt {
    font-weight: 400;
}

body.woocommerce-checkout .cm-cart-item__info dt::after {
    content: ":";
    margin-right: 2px;
}

body.woocommerce-checkout .cm-cart-item__info dd {
    margin: 0 8px 0 0;
}


/* ============================================================================
   14. TOTALS (Subtotal / NHIL / VAT / Total)
   ============================================================================ */

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
    border-bottom: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    padding: 7px 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    text-align: right !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    padding-top: 14px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-top: 1px solid var(--cm-border) !important;
}


/* ============================================================================
   15. COUPON
   ============================================================================ */

body.woocommerce-checkout .cm-checkout-right .woocommerce-form-coupon-toggle {
    display: block !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body.woocommerce-checkout .cm-checkout-right .woocommerce-form-coupon-toggle::before,
body.woocommerce-checkout .cm-checkout-right .woocommerce-form-coupon-toggle .woocommerce-notice::before {
    display: none !important;
}

body.woocommerce-checkout .cm-checkout-right .woocommerce-form-coupon-toggle a.showcoupon {
    color: var(--cm-text) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* IMPORTANT: WooCommerce controls this form's open/closed state via inline
   style. Never force display:flex/block here — only style the internal
   layout once WooCommerce has already opened it (see the attribute selector
   below). */
body.woocommerce-checkout .cm-checkout-right form.checkout_coupon {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .cm-checkout-right form.checkout_coupon .form-row {
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout form.checkout_coupon input#coupon_code {
    width: 100% !important;
    height: 44px !important;
    padding: 0 13px !important;
    background: #ffffff !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    height: 44px !important;
    padding: 0 20px !important;
    background: var(--cm-dark) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* When WooCommerce opens the coupon form (inline style="display:block"),
   arrange its contents horizontally. */
body.woocommerce-checkout .cm-checkout-right form.checkout_coupon[style*="display: block"] {
    display: flex !important;
    gap: 10px !important;
}

body.woocommerce-checkout .cm-checkout-right form.checkout_coupon[style*="display: block"] .form-row:first-child {
    flex: 1 1 auto !important;
}


/* ============================================================================
   16. TERMS & CONDITIONS
   ============================================================================ */

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 11px 0 !important;
    padding: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 12px !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    accent-color: var(--cm-dark);
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
    display: inline !important;
    color: var(--cm-muted) !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--cm-text) !important;
}


/* ============================================================================
   17. PAY NOW BUTTON
   Shared visual style here. Positioning per breakpoint lives in section 4
   (desktop) and section 18 (mobile) — never both at once.
   ============================================================================ */

body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout #payment .place-order button {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cm-dark) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.woocommerce-checkout #payment #place_order:hover {
    opacity: 0.92 !important;
}


/* ============================================================================
   18. REMOVE UNUSED WOOCOMMERCE SECTIONS
   ============================================================================ */

body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
    display: none !important;
}


/* ============================================================================
   19. MOBILE (<=900px)
   ============================================================================ */

@media (max-width: 900px) {

    body.woocommerce-checkout .cm-checkout-columns {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    body.woocommerce-checkout .cm-checkout-left {
        padding: 30px 24px 40px !important;
    }

    body.woocommerce-checkout .cm-checkout-right {
        padding: 30px 24px 40px !important;
    }

    /* Stack all address field rows */
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-address,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-region,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-city,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-phone,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    body.woocommerce-checkout.cm-has-create-account #billing_email_field {
        width: 100% !important;
        float: none !important;
    }

    body.woocommerce-checkout.cm-has-create-account .woocommerce-account-fields {
        width: 100% !important;
        float: none !important;
        margin-top: 0 !important;
    }

    /* Payment gets reserved bottom space so content doesn't sit underneath
       the sticky Pay now bar. This padding is intentionally scoped to
       mobile only — see section 4 for why it must not leak onto desktop. */
    body.woocommerce-checkout #payment.woocommerce-checkout-payment {
        padding-bottom: 78px !important;
    }

    /* Sticky bottom action bar */
    body.woocommerce-checkout #payment .place-order {
        position: sticky !important;
        bottom: 10px !important;
        z-index: 50 !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }

    /* Opaque backdrop so content doesn't show through behind the sticky
       button as the page scrolls underneath it. */
    body.woocommerce-checkout #payment .place-order::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -12px;
        right: -14px;
        bottom: -12px;
        left: -14px;
        background: var(--cm-right-bg);
    }

    body.woocommerce-checkout #payment #place_order,
    body.woocommerce-checkout #payment .place-order button {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
    }
}


/* ============================================================================
   20. SMALL MOBILE (<=600px)
   ============================================================================ */

@media (max-width: 600px) {

    body.woocommerce-checkout .cm-checkout-left {
        padding: 24px 16px 32px !important;
    }

    body.woocommerce-checkout .cm-checkout-right {
        padding: 24px 16px 32px !important;
    }

    body.woocommerce-checkout .cm-cart-item__image {
        flex-basis: 52px !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    body.woocommerce-checkout form.checkout_coupon {
        flex-direction: column !important;
    }

    body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
        width: 100% !important;
    }
}


/* ============================================================================
   21. MISC
   ============================================================================ */

#post-766 {
    margin-bottom: 0px !important;
}



/* ========================================================================
   CAMFORT MALL
   PAYMENT MOVED BELOW SHIPPING - FINAL DESKTOP LAYOUT
   ======================================================================== */


/* ------------------------------------------------------------------------
   DESKTOP LEFT COLUMN
   ------------------------------------------------------------------------ */

@media (min-width: 901px) {

    /*
     * Left side becomes a controlled viewport.
     * This prevents the payment section from being pushed
     * indefinitely below the visible screen.
     */
    body.woocommerce-checkout .cm-checkout-left {
        min-height: calc(100vh - var(--cm-header-h)) !important;

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

        overflow-y: auto !important;
        overflow-x: hidden !important;

        scrollbar-width: thin;
    }


    body.admin-bar.woocommerce-checkout .cm-checkout-left {
        height: calc(
            100vh
            - var(--cm-header-h)
            - var(--cm-admin-bar-h)
        ) !important;

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


    /* Left scrollbar */
    body.woocommerce-checkout .cm-checkout-left::-webkit-scrollbar {
        width: 5px;
    }

    body.woocommerce-checkout .cm-checkout-left::-webkit-scrollbar-track {
        background: transparent;
    }

    body.woocommerce-checkout .cm-checkout-left::-webkit-scrollbar-thumb {
        background: #d0d0d4;
        border-radius: 10px;
    }


    /* --------------------------------------------------------------------
       PAYMENT
       -------------------------------------------------------------------- */

    /*
     * Payment is now BELOW Shipping Method in the left column.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment {

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

        margin: 20px 0 0 !important;

        padding: 0 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;
    }


    /* Payment heading */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment.woocommerce-checkout-payment::before {

        content: "Payment";

        display: block !important;

        margin: 0 0 9px !important;

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

        font-size: 18px !important;

        line-height: 1.25 !important;

        font-weight: 700 !important;
    }


    /* --------------------------------------------------------------------
       PAYMENT OPTION
       -------------------------------------------------------------------- */

    /*
     * Much more compact than the previous payment card.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods.payment_methods {

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

        background: transparent !important;

        border: 1px solid #dedfe4 !important;

        border-radius: 8px !important;

        overflow: hidden !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    li.wc_payment_method {

        min-height: 0 !important;

        margin: 0 !important;

        padding: 9px 13px !important;

        display: flex !important;

        align-items: center !important;

        background: transparent !important;

        border-bottom: 1px solid #dedfe4 !important;

        box-sizing: border-box !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    li.wc_payment_method:last-child {

        border-bottom: none !important;
    }


    /* Payment radio */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    input[type="radio"] {

        flex: 0 0 16px !important;

        width: 16px !important;
        height: 16px !important;

        margin: 0 9px 0 0 !important;

        border-width: 2px !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    input[type="radio"]:checked::after {

        inset: 3px !important;
    }


    /* Payment label */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    label {

        margin: 0 !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        font-weight: 600 !important;
    }


    /* Gateway icons */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    img {

        height: 17px !important;

        margin-left: 5px !important;
    }


    /* Payment description stays hidden */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .payment_box {

        display: none !important;
    }


    /* --------------------------------------------------------------------
       TERMS
       -------------------------------------------------------------------- */

    body.woocommerce-checkout
    .cm-checkout-left
    .woocommerce-terms-and-conditions-wrapper {

        margin: 8px 0 !important;

        padding: 0 !important;

        font-size: 11px !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    .woocommerce-terms-and-conditions-wrapper
    label {

        display: inline-flex !important;

        align-items: center !important;

        gap: 5px !important;

        margin: 0 !important;

        font-size: 11px !important;

        line-height: 1.3 !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    .woocommerce-terms-and-conditions-wrapper
    input[type="checkbox"] {

        flex: 0 0 15px !important;

        width: 15px !important;
        height: 15px !important;

        margin: 0 !important;
    }


    /* --------------------------------------------------------------------
       PAY NOW
       -------------------------------------------------------------------- */

    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order {

        display: block !important;

        position: sticky !important;

        bottom: 10px !important;

        z-index: 20 !important;

        margin: 8px 0 0 !important;

        padding: 8px !important;

        background: rgba(253, 253, 253, .97) !important;

        border-radius: 8px !important;

        box-sizing: border-box !important;

        backdrop-filter: blur(6px);

        -webkit-backdrop-filter: blur(6px);
    }


    /*
     * Hide the old sticky-button pseudo background.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order::before {

        display: none !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    #place_order {

        display: block !important;

        width: 100% !important;

        height: 48px !important;

        margin: 0 !important;

        border: none !important;

        border-radius: 7px !important;

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

        color: #fff !important;

        font-size: 14px !important;

        font-weight: 700 !important;

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


/* ========================================================================
   RIGHT COLUMN
   ======================================================================== */

/*
 * Payment has moved out, so the right side no longer needs to reserve
 * space for it. Order Summary gets substantially more usable space.
 */
@media (min-width: 901px) {

    body.woocommerce-checkout
    .cm-checkout-right {

        overflow-y: auto !important;

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

        min-height: 0 !important;

        box-sizing: border-box !important;
    }


    body.admin-bar.woocommerce-checkout
    .cm-checkout-right {

        height: calc(
            100vh
            - var(--cm-header-h)
            - var(--cm-admin-bar-h)
        ) !important;
    }


    /*
     * Order review can now use the whole right-side height.
     */
    body.woocommerce-checkout
    .cm-checkout-right
    #order_review {

        min-height: 0 !important;

        overflow-y: visible !important;

        flex: none !important;
    }


    /*
     * Remove any payment sizing from the right side just in case
     * old rules still exist.
     */
    body.woocommerce-checkout
    .cm-checkout-right
    #payment {

        display: none !important;
    }
}


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

@media (max-width: 900px) {

    /*
     * Payment remains in the left section on mobile as well,
     * directly underneath Shipping Method.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment {

        display: block !important;

        margin-top: 20px !important;

        padding-bottom: 78px !important;
    }


    /*
     * Sticky mobile Pay Now.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order {

        position: fixed !important;

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

        width: 100vw !important;

        z-index: 9999 !important;

        margin: 0 !important;

        padding: 10px 16px !important;

        background: rgba(253,253,253,.96) !important;

        border-top: 1px solid #dedfe4 !important;

        box-sizing: border-box !important;

        backdrop-filter: blur(8px);

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


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order::before {

        display: none !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    #place_order {

        height: 50px !important;

        border-radius: 7px !important;
    }


    /*
     * Payment option becomes compact on mobile too.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    li.wc_payment_method {

        padding: 10px 13px !important;
    }
}





/* ========================================================================
   CAMFORT MALL CHECKOUT
   PAYMENT OPTIONS LEFT + TERMS/PAY NOW FIXED RIGHT
   ======================================================================== */


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

@media (min-width: 901px) {

    /* --------------------------------------------------------------------
       LEFT PAYMENT METHODS
       -------------------------------------------------------------------- */

    body.woocommerce-checkout
    .cm-checkout-left
    #payment {

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

        margin: 20px 0 0 !important;

        padding: 0 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;
    }


    /* Payment heading */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment::before {

        content: "Payment";

        display: block !important;

        margin: 0 0 9px !important;

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

        font-size: 18px !important;

        line-height: 1.25 !important;

        font-weight: 700 !important;
    }


    /* Compact payment container */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods {

        margin: 0 !important;

        padding: 0 !important;

        background: transparent !important;

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

        border-radius: 8px !important;

        overflow: hidden !important;
    }


    /* Compact payment option */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    li.wc_payment_method {

        display: flex !important;

        align-items: center !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 9px 13px !important;

        background: transparent !important;

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

        box-sizing: border-box !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    li.wc_payment_method:last-child {

        border-bottom: none !important;
    }


    /* Compact radio */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    input[type="radio"] {

        flex: 0 0 16px !important;

        width: 16px !important;
        height: 16px !important;

        margin: 0 9px 0 0 !important;
    }


    /* Label */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    ul.wc_payment_methods
    label {

        margin: 0 !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        font-weight: 600 !important;
    }


    /* Payment description remains hidden */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .payment_box {

        display: none !important;
    }


    /* --------------------------------------------------------------------
       RIGHT ORDER AREA
       -------------------------------------------------------------------- */

    /*
     * Reserve space at the bottom for Terms + Pay now.
     */
    body.woocommerce-checkout
    .cm-checkout-right {

        padding-bottom: 145px !important;
    }


    /*
     * Keep the order review above the fixed action bar.
     */
    body.woocommerce-checkout
    .cm-checkout-right
    #order_review {

        padding-bottom: 20px !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------------------
       TERMS
       -------------------------------------------------------------------- */

    /*
     * Move the terms visually to the right side.
     *
     * It remains in #payment in the DOM, preserving WooCommerce
     * functionality, but is displayed as a fixed right-side action.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper {

        position: fixed !important;

        right: 0px !important;

        bottom: 78px !important;
        background-color: var(--cm-right-bg) !important;

        width: calc(40vw - 96px) !important;

        max-width: 512px !important;

        margin: 0 !important;

        padding: 5px !important;

        z-index: 1000 !important;

        box-sizing: border-box !important;

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

        font-size: 11px !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper
    label {

        display: inline-flex !important;

        align-items: center !important;

        gap: 6px !important;

        margin: 0 !important;

        padding: 0 !important;

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

        font-size: 11px !important;

        line-height: 1.35 !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper
    input[type="checkbox"] {

        flex: 0 0 15px !important;

        width: 15px !important;

        height: 15px !important;

        margin: 0 !important;

        box-shadow: none !important;

        accent-color: var(--cm-dark);
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper
    a {

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


    /* --------------------------------------------------------------------
       PAY NOW
       -------------------------------------------------------------------- */

    /*
     * Permanently visible on the right side.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order {

        position: fixed !important;

        right: 48px !important;

        bottom: 18px !important;

        width: calc(40vw - 98px) !important;

        max-width: 512px !important;

        margin: 0 !important;

        padding: 0 !important;

        z-index: 1001 !important;

        box-sizing: border-box !important;
    }


    /*
     * Remove any old sticky pseudo-element.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order::before {

        display: none !important;
    }


    /*
     * Pay now button.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    #place_order {

        display: block !important;

        width: 100% !important;

        height: 52px !important;

        margin: 0 !important;

        padding: 0 !important;

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

        color: #ffffff !important;

        border: none !important;

        border-radius: 8px !important;

        font-size: 15px !important;

        font-weight: 700 !important;

        cursor: pointer !important;

        box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
    }


    /* --------------------------------------------------------------------
       RIGHT ACTION BACKDROP
       -------------------------------------------------------------------- */

    /*
     * Gives Terms + Pay now a clean area matching the right background.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment::after {

        content: "";

        position: fixed;

        right: 0;

        bottom: 0;

        width: 38vw;

        height: 126px;

        z-index: 999;

        pointer-events: none;

        background: var(--cm-right-bg);
    }


    /*
     * Keep the actual controls above the backdrop.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper,
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order {

        isolation: isolate;
    }
}


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

@media (max-width: 900px) {

    /*
     * Undo desktop visual relocation.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper {

        position: static !important;

        width: auto !important;

        max-width: none !important;

        margin: 10px 0 !important;
    }


    /*
     * Mobile Pay now remains sticky at the bottom.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order {

        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: 100vw !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 10px 16px !important;

        z-index: 9999 !important;

        background: rgba(253, 253, 253, .97) !important;

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

        box-sizing: border-box !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order::before {

        display: none !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    #place_order {

        width: 100% !important;

        height: 50px !important;

        border-radius: 8px !important;
    }


    /*
     * Don't leave the desktop backdrop on mobile.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment::after {

        display: none !important;
    }


    /*
     * Make space so page content isn't hidden behind
     * the mobile action bar.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment {

        padding-bottom: 70px !important;
    }
}




//* ========================================================================
   RIGHT-SIDE TERMS + PAY NOW
   Match the right-column content alignment
   ======================================================================== */

@media (min-width: 901px) {

    /*
     * The right column has 48px internal padding.
     * Match that same left alignment, while keeping the action area
     * slightly narrower so it feels intentionally contained.
     */
    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .woocommerce-terms-and-conditions-wrapper {

        position: fixed !important;

        right: 0px !important;
        bottom: 0px !important;

        

        max-width: var(--cm-right-content-max) !important;

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

        box-sizing: border-box !important;
    }


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    .place-order {

        position: fixed !important;

        right: 48px !important;
        bottom: 20px !important;

        width: min(
            calc(40vw - 96px),
            var(--cm-right-content-max)
        ) !important;

        max-width: var(--cm-right-content-max) !important;

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

        box-sizing: border-box !important;
    }

    


    body.woocommerce-checkout
    .cm-checkout-left
    #payment
    #place_order {

        width: 100% !important;
        height: 50px !important;

        margin: 0 !important;
        border-radius: 8px !important;
    }
}

/* ========================================================================
   HIDE FOOTER ON CHECKOUT
   ======================================================================== */

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





.woocommerce-privacy-policy-text{
  background-color: var(--cm-right-bg) !important;
}