/* ==========================================================================
   CSS: WOOCOMMERCE CART GLOBAL FIX (V52 - 1.1.5)
   ========================================================================== */

/* 0. Page Background — NP Oak 6.
   NOTE: do NOT include `.breakdance-woocommerce` in this selector list — that
   class is also applied to the header mini-cart widget (`<div class="bde-mini-cart
   breakdance-woocommerce">`), and painting it cream produces a 61×61 square
   behind the basket icon on cart pages. The other selectors below already
   cover the cart-page background. */
body.woocommerce-cart,
body.woocommerce-cart .breakdance,
body.woocommerce-cart .bde-section,
body.woocommerce-cart .bde-section > .section-container,
body.woocommerce-cart .bde-shortcode,
body.woocommerce-cart .bde-cart {
    background-color: #fbf7ef !important;
}

/* 1. Global Section & Container Reset */
body.woocommerce-cart .woocommerce { 
    background-color: transparent !important; 
    padding: 0 8px !important; 
}

/* 2. Main Containers: Custom Borders & 6PX RADIUS */
body.woocommerce-cart .woocommerce table.shop_table.cart,
body.woocommerce-cart .woocommerce .cart_totals {
    border: 2px solid #7b7264 !important;
    border-collapse: separate !important; 
    border-spacing: 0 !important; 
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
    margin-bottom: 20px !important;
    background-color: #fbf7ef !important; 
}

/* 3. Global Background Force */
body.woocommerce-cart .woocommerce table.shop_table.cart,
body.woocommerce-cart .woocommerce table.shop_table.cart tr,
body.woocommerce-cart .woocommerce table.shop_table.cart td,
body.woocommerce-cart .woocommerce table.shop_table.cart th,
body.woocommerce-cart .woocommerce .cart_totals {
     background-color: #fbf7ef !important;
}

/* 4. Harmonized Headers */
@media (min-width: 769px) {
    body.woocommerce-cart .woocommerce table.shop_table.cart thead { display: table-header-group !important; }
    body.woocommerce-cart .woocommerce table.shop_table.cart thead tr { display: table-row !important; }
}

body.woocommerce-cart .woocommerce table.shop_table.cart thead th,
body.woocommerce-cart .woocommerce .cart_totals h2 {
    background-color: #e5d7c1 !important; 
    border-bottom: 2px solid #7b7264 !important;
    color: #012169 !important; 
    text-transform: uppercase !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important; 
    height: 60px !important;
    line-height: 60px !important; 
    padding: 0 20px !important; 
    box-sizing: border-box !important;
    font-size: 20px !important;
    text-align: center !important;
}

/* 5. Basket Totals Heading Alignment */
body.woocommerce-cart .woocommerce .cart_totals h2 {
    text-align: left !important; 
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
}

/* 6. Totals Box Content Padding */
body.woocommerce-cart .woocommerce .cart_totals .shop_table {
    margin: 0 12px 12px 12px !important;
    width: calc(100% - 24px) !important;
    border: none !important;
}

/* 7. Unified Basket Layout (all screen sizes) */
body.woocommerce-cart .woocommerce table.shop_table.cart::before {
    content: "YOUR BASKET";
    display: block;
    background-color: #e5d7c1;
    border-bottom: 2px solid #7b7264;
    color: #012169;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 20px;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    text-transform: uppercase;
}

body.woocommerce-cart .woocommerce table.shop_table.cart thead {
    display: none !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: minmax(140px, 160px) minmax(0, 1fr) minmax(100px, 120px) !important;
    grid-template-rows: auto auto auto !important;
    padding: 14px 16px 12px !important;
    position: relative !important;
    gap: 4px 16px !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 #7b7264 !important;
    align-items: start !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 0 !important;
    display: block !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove {
    color: #7b7264 !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    margin-left: -10px !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 140px !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name {
    grid-row: 1 !important;
    padding-top: 4px !important;
    margin-bottom: 2px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    align-items: stretch !important;
    font-variant-numeric: tabular-nums !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price:not(:has(> span:nth-child(2))) {
    display: none !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price {
    grid-row: 2 !important;
    padding-top: 2px !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:first-child,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3) {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:first-child > .woocommerce-Price-amount,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3) > .woocommerce-Price-amount,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal > span {
    margin-left: auto !important;
    text-align: right !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3) {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3) > .woocommerce-Price-amount {
    font-size: 17px !important;
    line-height: 1.25 !important;
    color: #012169 !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    grid-row: 3 !important;
    padding-top: 2px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity {
    grid-column: 3 !important;
    grid-row: 1 / span 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 0 !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity .quantity.quantity--number {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: fit-content !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:first-child,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3),
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal > span {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(2) {
    display: none !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:first-child::before,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3)::before,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal::before {
    display: inline-block !important;
    /* v1.3.0: PRICE / OPTIONS / TOTAL labels bumped 12px -> 14px for better
       legibility against the adjacent price numbers. min-width raised 74 ->
       82px so the labels still align flush-left with a consistent gutter
       between the label column and the price column. */
    min-width: 82px !important;
    color: #012169 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:first-child::before {
    content: "PRICE";
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price > span:nth-child(3)::before {
    content: "OPTIONS";
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal::before {
    content: "TOTAL";
}

/* 8. TABLET SPECIFIC (TOTALS FULL WIDTH) */
@media (max-width: 1024px) {
    body.woocommerce-cart .woocommerce {
        display: flex !important;
        flex-direction: column !important;
    }
    body.woocommerce-cart .woocommerce .cart-collaterals,
    body.woocommerce-cart .woocommerce .cart_totals {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 9. MOBILE SPECIFIC (AUTO-STACKING IMPROVEMENTS) */
@media (max-width: 768px) {
    body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item {
        display: grid !important;
        grid-template-columns: minmax(120px, 132px) minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        padding: 10px 12px 14px !important;
        position: relative !important;
        gap: 14px 12px !important;
        border-bottom: 0 !important;
        box-shadow: inset 0 -1px 0 #7b7264 !important;
        align-items: start !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name,
    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity,
    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
        grid-column: 2 !important;
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name {
        grid-row: 1 !important;
        padding-top: 2px !important;
        margin-bottom: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price {
        grid-row: 2 !important;
        padding-top: 0 !important;
        margin-top: -4px !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center !important;
        align-self: end !important;
        padding-top: 0 !important;
        margin-top: -2px !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity .quantity.quantity--number {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        width: fit-content !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
        grid-row: 3 !important;
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        padding-top: 0 !important;
        margin-top: -3px !important;
        margin-bottom: 0 !important;
        font-weight: bold !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail img {
        width: 120px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
        grid-column: 2 !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove {
        position: absolute !important; top: 10px; right: 10px;
        width: auto !important; padding: 0 !important; display: block !important;
    }
}

/* 10. Proceed to Checkout Button Spacing */
body.woocommerce-cart .woocommerce .cart_totals .wc-proceed-to-checkout {
    padding: 0 20px 20px 20px !important;
}
body.woocommerce-cart .woocommerce .cart_totals .checkout-button {
    width: 100% !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important;
}

body.woocommerce-cart .woocommerce a:focus-visible,
body.woocommerce-cart .woocommerce button:focus-visible,
body.woocommerce-cart .woocommerce input:focus-visible {
    outline: 2px solid #012169 !important;
    outline-offset: 2px !important;
}

/* 11. Inner Styling & Personalisation Fix */
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name a {
    color: #012169 !important; font-weight: 600 !important;
    overflow-wrap: anywhere !important;
}
body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row {
    display: block !important;
    width: 100% !important;
    /* Explicit brown divider between this row and the next product row.
       Previously implemented as `box-shadow: inset 0 -1px 0 #7b7264` but
       that wasn't rendering reliably in this environment. An explicit
       `border-bottom` is more robust. The other three sides are zeroed
       defensively — a theme/plugin rule in this environment would otherwise
       apply `border-bottom: 1px solid #d1d5d9` (light grey) to this row. */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px solid #7b7264 !important;
    box-shadow: none !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row td {
    display: block !important;
    background-color: #fbf7ef !important;
    /* Defensive: zero ALL borders on the td so that no external rule can
       paint a border around the personalisation cell (we want the panel
       itself to be the only bordered element). */
    border: 0 !important;
    /* The panel is an inset “card” sitting inside this td. Vertical padding
       provides breathing room between the card and the product rows above /
       below; horizontal padding determines how far the card is inset from
       the outer table border. 12px top + 14px bottom + 12px left/right
       gives a balanced inset that matches the earlier boxed look. */
    padding: 12px 12px 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* When a cart row is followed by a personalisation row, defer the divider to the personalisation row */
body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item:has(+ tr.nps-personalisation-row) {
    box-shadow: none !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* Row gap is 0 so each field's `border-bottom` (the inter-row divider)
       meets the next row's field with no whitespace between them — the line
       reads as a continuous horizontal stroke. Column gap stays at 12px so
       the left/right columns still have visual separation. */
    gap: 0 12px !important;
    width: 100% !important;
    justify-items: stretch !important;
    /* CRITICAL: without this, each field grid-item stretches vertically to
       match the tallest sibling in its row (e.g. NAME 2 stretches to match
       BACK MESSAGE's multi-line height), causing the label+value pair
       inside the short field to drift toward the vertical centre of the
       stretched cell. `align-items: start` makes every field hug its own
       content height and sit at the top of its grid row, so "Simon" shows
       up directly under its "NAME 2" label regardless of BACK MESSAGE’s
       length. */
    align-items: start !important;
    box-sizing: border-box !important;
    /* Panel is the bordered “card” that contains the heading band AND the
       field grid. No internal padding — the heading band must run flush to
       the left/right inner edges of this border (matching the YOUR BASKET
       full-width header band above), and the fields supply their own 16px
       horizontal padding individually (see the `.nps-personalisation-field`
       rule below). */
    /* Bottom padding gives breathing room under the lowest text entry inside
       the card, so values like "B2" don't sit flush against the panel border. */
    padding: 0 0 14px 0 !important;
    /* Box: 2px brown border matching the outer table stroke, 6px radius to
       match the outer table's radius. `overflow: hidden` is essential — it
       clips the cream `#EEE5D7` heading band's top-left / top-right corners
       to the panel's rounded border, so the band reads as a proper rounded
       header inside the card. */
    border: 2px solid #7b7264 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fbf7ef !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-heading {
    color: #012169 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    /* The heading is now a direct block child of the td (moved out of the grid
       panel in 1.2.5), so it naturally fills the td width. No grid-column,
       no calc width, no negative margins required. */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #EEE5D7 !important;
    border-bottom: 2px solid #7b7264 !important;
    padding: 10px 16px !important;
    margin: 0 !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    /* The panel has no horizontal padding so the heading band can run
       edge-to-edge. Individual fields therefore supply the 16px indent
       themselves so labels/values are properly inset from the card border. */
    padding: 10px 16px 10px 16px !important;
    /* Inter-row divider drawn on the BOTTOM of each field (not the top).
       Painting it on the bottom guarantees the line shows up under cells
       like NAME 1 / A1 even when no field sits in the cell directly below
       (with `border-top` it only painted where a field followed). Colour
       opacity raised from 0.2 → 0.4 for better visibility per UX feedback. */
    border-bottom: 1px solid rgba(123, 114, 100, 0.4) !important;
}

/* Suppress the inter-row divider on the very last field in the panel — we
   don't want a line at the bottom of the card just above the panel's own
   border. (BACK MESSAGE is `grid-column: 1 / -1`, so when present it IS the
   last child; otherwise the rightmost / sole field of the final row is.) */
body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-panel > .nps-personalisation-field:last-child {
    border-bottom: 0 !important;
}

/* First field row: supply the breathing room beneath the heading’s brown
   underline AND suppress the faint inter-row divider (the brown line above
   them already separates them from the heading).

   IMPORTANT: we use `:nth-of-type(-n+2)` (not `:nth-child(-n+2)`). This
   counts only `<div>` siblings, so the rule matches the first two
   `.nps-personalisation-field` divs whether or not a `<span class="heading">`
   precedes them in the panel. That keeps the layout correct under both the
   v1.2.5+ template (heading is a sibling of the panel) and any older
   cached `cart.php` where the heading is the first child of the panel. */
body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-panel > .nps-personalisation-field:nth-of-type(-n+2) {
    /* Extra breathing room beneath the heading band's brown underline.
       Override only padding-top; horizontal/bottom padding inherits from
       the base `.nps-personalisation-field` rule above. (No `border-top`
       to suppress now — dividers are drawn on the bottom edge instead.) */
    padding-top: 14px !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-label {
    color: #012169 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-value {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    min-width: 0 !important;
    color: #2b2b2b !important;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-back-message-field {
    grid-column: 1 / -1 !important;
}

@media (max-width: 768px) {
    body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 12px !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-field {
        gap: 2px 8px !important;
    }
}

/* ==========================================================================
   12. v1.1.4 SCOPED FIXES
   ========================================================================== */

/* 12a. Neutralise any white background on the WooCommerce cart form wrappers
   so the cream page background shows through on all screen sizes. On mobile
   these wrappers were revealing a white frame around our panels. */
body.woocommerce-cart .woocommerce-cart-form-wrapper,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .woocommerce-cart-form__contents,
body.woocommerce-cart .np-basket-cart-wrapper,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals > *,
body.woocommerce-cart .cart-collaterals .cross-sells,
body.woocommerce-cart .woocommerce-notices-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 12b. Main-menu basket icon: let the Breakdance header background show through
   again on all screen sizes. v1.1.3 stripped Breakdance-specific selectors
   which removed the rule that previously kept the menu cart icon wrapper
   matching the header. These selectors cover the common Breakdance menu-cart
   element shapes (desktop + mobile hamburger). If your DOM uses a different
   class, inspect the element and extend this list. */
body.woocommerce-cart .breakdance-header .bde-menu-cart,
body.woocommerce-cart .breakdance-header .bde-menu-cart__inner,
body.woocommerce-cart .breakdance-header .bde-menu-cart__toggler,
body.woocommerce-cart .breakdance-header .bde-menu-builder__menu-item--cart,
body.woocommerce-cart .breakdance-header .bde-mobile-menu-cart,
body.woocommerce-cart .bde-menu-cart,
body.woocommerce-cart .bde-menu-cart__inner,
body.woocommerce-cart .bde-menu-cart__toggler {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   13. v1.1.6 SCOPED FIXES
   ========================================================================== */

/* 13a. Eliminate residual white strips around the cart panel and the
   personalisation row on mobile. Covers every table-level wrapper that can
   paint a background between the outer cream panel and the inner td content. */
html body.woocommerce-cart .breakdance-woocommerce .woocommerce-cart-form-wrapper,
html body.woocommerce-cart .breakdance-woocommerce .woocommerce-cart-form,
html body.woocommerce-cart .breakdance-woocommerce .woocommerce-cart-form__contents,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tbody,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tfoot,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.cart_item,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.cart_item > td,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-panel,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-field,
html body.woocommerce-cart .breakdance-woocommerce .cart_totals,
html body.woocommerce-cart .breakdance-woocommerce .cart_totals table,
html body.woocommerce-cart .breakdance-woocommerce .cart_totals table tbody,
html body.woocommerce-cart .breakdance-woocommerce .cart_totals table tr,
html body.woocommerce-cart .breakdance-woocommerce .cart_totals table td,
html body.woocommerce-cart .breakdance-woocommerce .cart_totals table th {
    background-color: #fbf7ef !important;
}

html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.cart_item,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.cart_item > td,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-panel,
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row .nps-personalisation-field {
    background-clip: padding-box !important;
}

/* 13b. Force the personalisation panel to always render as 2 columns, even on
   narrow mobile. Higher specificity than rule 11 / 12 + explicit fallback grid
   to defeat any responsive-table override from the theme. */
html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 6px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel .nps-personalisation-heading {
    grid-column: 1 / -1 !important;
}

html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel .nps-personalisation-field {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: stretch !important;
}

html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel .nps-personalisation-field:nth-of-type(odd) {
    grid-column: 1 !important;
}

html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel .nps-personalisation-field:nth-of-type(even) {
    grid-column: 2 !important;
}

html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel .nps-back-message-field {
    grid-column: 1 / -1 !important;
}

@media (max-width: 480px) {
    html body.woocommerce-cart .breakdance-woocommerce table.shop_table.cart tr.nps-personalisation-row > td.nps-personalisation-data > .nps-personalisation-panel {
        gap: 4px 8px !important;
    }
}

/* 13c. (REMOVED in 1.2.3.) The original cream square behind the header
   mini-cart icon was caused by `.breakdance-woocommerce` being included in
   rule 0's selector list, not by any wrapper/counter background. Resetting
   `.bde-mini-cart-toggle__counter` here was killing the red counter badge
   that displays the item count, so the whole block has been removed. Do not
   re-add resets on the mini-cart elements without a confirmed regression. */