/* =============================================================
   GDT Cart Page Styles
   Get a Dom Tune / 3ID LLC
   Version: 1.0.1

   Scoped to .woocommerce-cart body class — zero bleed to other pages.
   Requires Elementor Kit CSS vars (loaded via elementor-frontend dependency).
   ============================================================= */


/* =============================================================
   TABLE COLLAPSE
   WooCommerce renders the cart as a <table>. We collapse it
   to block so each row can use CSS Grid for card layout.
   ============================================================= */

.woocommerce-cart .shop_table.cart {
    display: block;
    border: none;
    border-collapse: separate;
}

.woocommerce-cart .shop_table.cart thead {
    display: none;
}

.woocommerce-cart .shop_table.cart tbody {
    display: block;
}

/* woocommerce.css: .shop_table_responsive — mobile labels + layout overrides */
.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr {
    display: grid !important;
}

.woocommerce-cart table.shop_table_responsive tr td:not(.product-price) {
    display: block !important;
}

.woocommerce-cart table.shop_table_responsive tr td::before {
    content: none !important;
}

.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent !important;
}

/* =============================================================
   CART NOTICE WRAPPER
   ============================================================= 

.woocommerce-cart .woocommerce-notices-wrapper {
    margin-bottom: 16px;
}

.woocommerce-cart .woocommerce-message {
    background: #111;
    border: 1px solid #1e1e1e;
    border-left: 3px solid var(--e-global-color-accent, #DD0C0C);
    color: #ccc;
    padding: 12px 16px 12px 40px;
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.woocommerce-cart .woocommerce-message::before {
    color: var(--e-global-color-accent, #DD0C0C) !important;
}

.woocommerce-cart .woocommerce-error {
    background: #111;
    border: 1px solid #1e1e1e;
    border-left: 3px solid var(--wc-red, #a00);
    color: #ccc;
    padding: 12px 16px;
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    font-size: 12px;
    list-style: none;
}

.woocommerce-cart .woocommerce-info {
    background: #111;
    border: 1px solid #1e1e1e;
    border-left: 3px solid #444;
    color: #ccc;
    padding: 12px 16px;
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    font-size: 12px;
} */

/* =============================================================
   CART ITEM ROW — CSS Grid card layout
   
   DOM order: remove | thumbnail | name | price | quantity | subtotal
   Visual layout:
     ┌───────┬──────────────────────┬──────────┐
     │ thumb │ name + variations    │ subtotal │
     │       ├──────────────────────┤          │
     │       │ qty          remove  │          │
     └───────┴──────────────────────┴──────────┘
   ============================================================= */

.woocommerce-cart .woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "thumb  name     subtotal"
        "thumb  controls controls";
    gap: 0 clamp(16px, calc(10.959px + 1.461vw), 32px);
    padding: 18px 0;
    border-bottom: 1px solid #1e1e1e;
    align-items: start;
}

/* Reset all <td> cells */
.woocommerce-cart .woocommerce-cart-form__cart-item td {
    display: block;
    padding: 0 !important;
    border: none !important;
    background: none;
}

/* Hide per-unit price — subtotal is sufficient */
.woocommerce-cart td.product-price {
    display: none !important;
}


/* =============================================================
   GRID AREA ASSIGNMENTS
   ============================================================= */

.woocommerce-cart td.product-thumbnail {
    grid-area: thumb;
}

.woocommerce-cart td.product-name {
    grid-area: name;
}

.woocommerce-cart td.product-subtotal {
    grid-area: subtotal;
}

.woocommerce-cart td.product-quantity {
    grid-area: controls;
    justify-self: start;
}

.woocommerce-cart td.product-remove {
    grid-area: controls;
    justify-self: end;
    align-self: center;
    z-index: 1;
}


/* =============================================================
   THUMBNAIL
   ============================================================= */

.woocommerce-cart td.product-thumbnail {
    width: 88px;
    height: 88px;
    border-radius: 0;
    overflow: hidden;
    border: none !important;
}

.woocommerce-cart td.product-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.woocommerce-cart td.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =============================================================
   PRODUCT NAME + VARIATIONS
   ============================================================= */

.woocommerce-cart td.product-name {
    min-width: 0;
}

.woocommerce-cart td.product-name > a {
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: var( --e-global-typography-3fdf2cf-font-size );
    color: var(--e-global-color-text);
    letter-spacing: 0.06em;
    line-height: 1.4;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    display: block;
}

.woocommerce-cart td.product-name > a:hover {
    color: var(--e-global-color-accent, #DD0C0C);
}


/* =============================================================
   VARIATIONS — CSS Grid pairs dt on top, dd below
   WooCommerce DOM: <dl><dt><dd><dt><dd>...</dl>
   Grid rows: row 1 = labels (dt), row 2 = values (dd)
   Each dt+dd pair occupies one column.
   ============================================================= */

.woocommerce-cart .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 16px 0 !important;
    padding: 0;
}

.woocommerce-cart .variation .variation-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.woocommerce-cart .variation dt,
.woocommerce-cart .variation dd {
    flex-basis: auto;
    float: none;
}

.woocommerce-cart .variation dt {
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var( --e-global-typography-26f8a9d-font-size );
    white-space: nowrap;
    font-weight: normal;
    line-height: 1em;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Remove trailing colon from variation labels */
.woocommerce-cart .variation dt::after {
    content: none;
}

.woocommerce-cart .variation dd {
    color: #999;
    font-size: var( --e-global-typography-69f03e8-font-size );
    line-height: 1em;
    text-align: left;
    white-space: wrap;
    margin: 4px 0 0 0 !important;
    padding: 0;
}

.woocommerce-cart .variation dd p {
    margin: 0;
}


/* =============================================================
   SUBTOTAL (price per line item)
   ============================================================= */

.woocommerce-cart td.product-subtotal {
    font-family: "Montserrat", Sans-serif;
    font-size: var( --e-global-typography-355b316-font-size );
    font-weight: bold;
    color: var(--e-global-color-v4-dull-gold);
    white-space: nowrap;
    text-align: right;
    padding-top: 2px;
}


/* =============================================================
   QUANTITY + REMOVE — share the "controls" grid area
   Quantity sits left, Remove sits right (via justify-self: end)
   ============================================================= */

.woocommerce-cart td.product-quantity {
    display: flex;
    align-items: center;
    padding-top: 12px;
}

.woocommerce-cart td.product-remove {
    padding-top: 12px;
}

.woocommerce-cart .quantity {
    display: flex;
    align-items: center;
    gap: 0;
}

/* +/− buttons injected by gdt-cart.js */
.woocommerce-cart .qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #333;
    border-radius: 0;
    color: #999;
    font-size: 14px;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    cursor: pointer;
    user-select: none;
    background: none;
    line-height: 0.1;
    transition: color 0.15s, border-color 0.15s;
}

.woocommerce-cart .qty-btn:hover {
    color: #fff;
    border-color: #555;
}

.woocommerce-cart .quantity input.qty {
    width: 28px;
    height: 24px;
    padding: 0;
    margin: 0 4px;
    background: none;
    border: none;
    border-radius: 0;
    color: #999;
    text-align: center;
    font-size: 11px;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}


/* =============================================================
   REMOVE BUTTON (×)
   ============================================================= */

.woocommerce-cart .woocommerce a.remove {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    font-size: 16px;
    font-weight: 400;
    color: #444 !important;
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s;
}

.woocommerce-cart .woocommerce a.remove:hover {
    color: var(--e-global-color-accent, #DD0C0C) !important;
    background: none !important;
}

.woocommerce-cart .woocommerce a.remove::after {
    content: "Remove";
    font-size: 11px;
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    text-decoration: none;
    text-underline-offset: 3px;
    letter-spacing: 0.02em;
}


/* =============================================================
   ACTIONS ROW — Coupon + Update Cart
   The actions <tr> has a single <td colspan="6">
   ============================================================= */

.woocommerce-cart .shop_table.cart tr:last-child {
    display: block;
}

.woocommerce-cart .shop_table.cart .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0 0;
    border-top: none;
}

/* Coupon row */
.woocommerce-cart .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
}

.woocommerce-cart .coupon label {
    display: none;
}

.woocommerce-cart .coupon input#coupon_code {
    background: #111;
    border: 1px solid #2a2a2a;
    color: #fff;
    padding: 8px 12px;
    font-size: 11px;
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    border-radius: 0;
    width: 160px;
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.15s;
}

.woocommerce-cart .coupon input#coupon_code:focus {
    border-color: #444;
}

.woocommerce-cart .coupon input#coupon_code::placeholder {
    color: #444;
}

.woocommerce-cart .coupon button[name="apply_coupon"] {
    background: transparent;
    border: 1px solid var(--e-global-color-accent, #DD0C0C);
    color: var(--e-global-color-accent, #DD0C0C);
    padding: 8px 14px;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
    background: var(--e-global-color-accent, #DD0C0C);
    color: #fff;
}

/* Update Cart button — pushed right */
.woocommerce-cart .actions > button[name="update_cart"] {
    margin-left: auto;
    background: #297d00;
    color: #fff;
    padding: 8px 18px;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.woocommerce-cart .actions > button[name="update_cart"]:hover {
    background: #216600;
}

.woocommerce-cart .actions > button[name="update_cart"]:disabled {
    opacity: 0.1;
    cursor: default;
    padding: 8px 18px;
    background: transparent;
}

.woocommerce-cart .actions > button[name="update_cart"]:disabled:hover {
    opacity: 0.1;
    cursor: default;
    background: transparent;
}


/* =============================================================
   TWO-COLUMN LAYOUT — Items left, Totals right
   ============================================================= */

.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0 40px;
    align-items: start;
}

.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .woocommerce > .return-to-shop {
    grid-column: 1 / -1;
    text-align: center;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce > form {
    grid-column: 1;
}

.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
}


/* =============================================================
   CART TOTALS
   ============================================================= */

.woocommerce-cart .cart_totals {
    float: none !important;
    width: 100% !important;
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 0;
    padding: clamp(16px, calc(13.479px + 0.731vw), 24px);
}

.woocommerce-cart .cart_totals h2 {
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: var( --e-global-typography-355b316-font-size );
    letter-spacing: 0.15em;
    color: #666;
    text-transform: uppercase;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e1e1e;
}

/* Totals table — collapse to flex rows */
.woocommerce-cart .cart_totals table {
    display: block;
    border: none;
}

.woocommerce-cart .cart_totals table tbody {
    display: block;
}

.woocommerce-cart .cart_totals table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    font-size: var( --e-global-typography-69f03e8-font-size );
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    color: var(--e-global-color-v4-dull-gold);
    border-bottom: 1px solid #1a1a1a;
}

.woocommerce-cart .cart_totals table tr th,
.woocommerce-cart .cart_totals table tr td {
    display: block;
    padding: 0;
    border: none;
    background: none;
}

.woocommerce-cart .cart_totals table tr th {
    font-weight: normal;
    color: #888;
}

.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th {
    border-top: none !important;
}

.woocommerce-cart .cart_totals table tr td {
    text-align: right;
}

/* Order total row */
.woocommerce-cart .cart_totals tr.order-total {
    color: var(--e-global-color-v4-dull-gold);
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    font-size: var( --e-global-typography-355b316-font-size );
    padding-top: 14px;
    border-bottom: none;
}

.woocommerce-cart .cart_totals tr.order-total th {
    color: #fff;
    font-weight: 400;
}

/* =============================================================
   PROCEED TO CHECKOUT BUTTON
   ============================================================= */

.woocommerce-cart .wc-proceed-to-checkout {
    padding: 16px 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    background: var(--e-global-color-accent, #DD0C0C) !important;
    border: none;
    color: #fff;
    padding: 14px 20px !important;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s;
    box-sizing: border-box;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background: #bb0a0a !important;
}


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

.woocommerce-cart .cart-empty {
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    color: #888;
    font-size: 14px;
}

.woocommerce-cart .return-to-shop .button {
    background: var(--e-global-color-accent, #DD0C0C);
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    text-decoration: none;
    transition: background 0.15s;
}

.woocommerce-cart .return-to-shop .button:hover {
    background: #bb0a0a;
    color: #fff;
}


/* =============================================================
   RESPONSIVE — Tablet (≤ 1024px)
   Two columns → single column, totals below items
   ============================================================= */

@media (max-width: 1024px) {

    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .woocommerce-cart .woocommerce > .cart-collaterals {
        grid-column: 1;
        grid-row: auto;
    }

}


/* =============================================================
   RESPONSIVE — Mobile (≤ 767px)
   ============================================================= */

@media (max-width: 767px) {

    /* Adjust grid to 2 columns — thumb + content */
    .woocommerce-cart .woocommerce-cart-form__cart-item {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "thumb  name"
            "thumb  subtotal"
            "controls controls";
        gap: 4px 12px;
        padding: 14px 0;
    }

    /* Smaller thumbnail */
    .woocommerce-cart td.product-thumbnail {
        width: 64px;
        height: 64px;
    }

    /* Price left-aligned on mobile */
    .woocommerce-cart td.product-subtotal {
        font-size: 12px;
        text-align: left;
        padding-top: 0;
    }

    /* Controls row full width */
    .woocommerce-cart td.product-quantity {
        padding-top: 8px;
    }

    .woocommerce-cart td.product-remove {
        padding-top: 8px;
    }

    /* Coupon full width */
    .woocommerce-cart .coupon {
        flex-wrap: wrap;
    }

    .woocommerce-cart .coupon input#coupon_code {
        flex: 1;
        width: auto;
        min-width: 120px;
    }

    /* Totals card tighter */
    .woocommerce-cart .cart_totals {
        padding: 16px;
    }

}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CROSS-SELLS — "You may be interested in…"
   Added 2026-09-06. gdt-cart.css previously had ZERO rules for this block.

   WHY IT LOOKED BROKEN: woocommerce-layout.css floats .cross-sells left at
   48%. Inside our 400px totals column that resolves to 192px, and because
   floats are out of flow the block rendered ON TOP OF the Cart Totals card —
   giant heading over the totals, product title wrapping one word per line.

   PLACEMENT: mirrors the legacy shop3 cart, where the collaterals row put
   cross-sells under the ITEMS column. Here that means column 1, below the
   items table; Cart Totals stays in the right rail.

   MECHANISM: .cart-collaterals wraps BOTH .cart_totals and .cross-sells, so
   as a single grid item they cannot be placed separately. display:contents
   dissolves its box and promotes both children to grid items of .woocommerce.
   The min-width/overflow guard that lived on .cart-collaterals moves onto
   .cart_totals, which is what it was actually protecting.

   NOTE: .cross-sells precedes .cart_totals in the WooCommerce template, so
   the ≤1024px stack needs `order` to keep Cart Totals above the upsell.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.woocommerce-cart .woocommerce > .cart-collaterals {
    display: contents;
}

.woocommerce-cart .cart-collaterals > .cart_totals {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
}

.woocommerce-cart .cart-collaterals > .cross-sells {
    grid-column: 1;
    float: none;
    width: auto;
    min-width: 0;
    margin: var(--space-2xl) 0 0;
    padding-top: var(--space-l);
    border-top: 1px solid #1e1e1e;
}

/* Heading — same idiom as the CART TOTALS heading */
.woocommerce-cart .cross-sells > h2 {
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: var( --e-global-typography-355b316-font-size );
    letter-spacing: 0.15em;
    color: #666;
    text-transform: uppercase;
    margin: 0 0 24px;
}

/* Product grid — replaces WooCommerce's float/columns-N model */
.woocommerce-cart .cross-sells ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 32px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after {
    content: none;
}

.woocommerce-cart .cross-sells ul.products li.product {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.woocommerce-cart .cross-sells ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}

.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: var( --e-global-typography-69f03e8-font-size );
    color: var(--e-global-color-text);
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.woocommerce-cart .cross-sells ul.products li.product .price {
    font-family: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
    font-size: var( --e-global-typography-74c8d73-font-size );
    color: var(--e-global-color-v4-dull-gold);
    margin: 0;
}

.woocommerce-cart .cross-sells ul.products li.product .price del { opacity: 0.5; }
.woocommerce-cart .cross-sells ul.products li.product .price ins { text-decoration: none; }

/* Button — outlined accent, so it never competes with Proceed to Checkout */
.woocommerce-cart .cross-sells ul.products li.product .button {
    margin-top: auto;
    width: 100%;
    background: transparent;
    border: 1px solid var(--e-global-color-accent, #DD0C0C);
    color: var(--e-global-color-accent, #DD0C0C);
    padding: 12px 16px;
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}

.woocommerce-cart .cross-sells ul.products li.product .button:hover {
    background: var(--e-global-color-accent, #DD0C0C);
    color: #fff;
}

/* AJAX add-to-cart states */
.woocommerce-cart .cross-sells ul.products li.product .button.added { display: none; }

.woocommerce-cart .cross-sells ul.products li.product .added_to_cart {
    font-family: var(--e-global-typography-primary-font-family, 'Michroma'), sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e-global-color-bc9e091, #297D00);
    text-decoration: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CROSS-SELLS — RESPONSIVE
   These MUST come after the ≤1024 / ≤767 blocks already in this file,
   because display:contents makes the existing
   `.woocommerce > .cart-collaterals` placement rules inert.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (max-width: 1024px) {

    .woocommerce-cart .cart-collaterals > .cart_totals {
        grid-column: 1;
        grid-row: auto;
        order: 1;
    }

    .woocommerce-cart .cart-collaterals > .cross-sells {
        grid-column: 1;
        order: 2;
    }

}

@media (max-width: 767px) {

    .woocommerce-cart .cross-sells ul.products {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 24px 16px;
    }

}