.elementor-8510 .elementor-element.elementor-element-5d93828{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:40px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-8510 .elementor-element.elementor-element-5d93828:not(.elementor-motion-effects-element-type-background), .elementor-8510 .elementor-element.elementor-element-5d93828 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}@media(max-width:767px){.elementor-8510 .elementor-element.elementor-element-5d93828{--padding-top:24px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for shortcode, class: .elementor-element-68325e4 *//* ===========================================================================
   Nest Box Live — Cart, phase 1 (CSS only)
   Paste into Elementor → Site Settings → Custom CSS, BELOW the checkout CSS.

   Built on cart-mockup.html. Same tokens, same type scale and the same panel
   treatment as nbl-checkout-phase1.css, because the two pages are one flow.

   Two things learned on the checkout that apply here too:
     1. The theme forces display:table on WooCommerce tables and outranks
        plain class .elementor-8510 .elementor-element.elementor-element-68325e4s, so the layout rules carry !important.
     2. Separators belong on the ROW, not the cells. Once the rows are flex
        containers the cells size to their content, and a border on a cell
        only spans part of the width.
   =========================================================================== */

/* ---- Full-height shell ---------------------------------------------------
   An empty or one-item cart is shorter than the screen, and the theme paints
   body with linear-gradient(220deg, #565527, #161303) — the olive the site
   header uses. The header, content and footer are all transparent, so anything
   they do not cover shows that gradient: a band of olive under the footer.

   Two fixes, because they solve different halves of it. The background stops
   the olive; the flex column pushes the footer to the bottom of the screen so
   there is no gap to fill in the first place.

   svh rather than vh: on a phone, 100vh is the viewport with the browser
   toolbar hidden, so it overflows by the height of the toolbar and leaves a
   permanent scroll on a page that fits. svh is the smallest the viewport gets,
   which is what "fill the screen without causing a scrollbar" actually means.
   vh first as the fallback for anything that does not know svh. */
body.woocommerce-cart {
    background: #000 !important;
    background-image: none !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}
body.woocommerce-cart > .elementor-location-header,
body.woocommerce-cart > .elementor-location-footer {
    flex: 0 0 auto;
}
/* The page content — the only .elementor block that is neither header nor
   footer. Grows to take up whatever is left. */
body.woocommerce-cart > .elementor:not(.elementor-location-header):not(.elementor-location-footer) {
    flex: 1 0 auto;
}

/* ---- Page shell ----------------------------------------------------------
   One column, capped. WooCommerce puts the totals in .cart-collaterals after
   the form, so in a single column they fall below the items on their own —
   no ordering work needed. */
body.woocommerce-cart .woocommerce {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

/* The theme floats these to build its own two-column cart. */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart form.woocommerce-cart-form {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Headings ------------------------------------------------------------ */
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart h2.cart-items-title,
body.woocommerce-cart .cart_totals > h2 {
    display: none;   /* "Your Cart" and "Cart Totals" are replaced below */
}

.nbl-cart-head {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.nbl-cart-sub {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    line-height: 18.75px;
    color: rgba(255,255,255,.6);
    margin: 0 0 18px;
}

/* ---- Item table → flex rows ---------------------------------------------
   The stock markup is a six-column table: remove, thumbnail, name, price,
   quantity, subtotal. The mockup is a card: thumbnail left, a stack of name,
   meta and controls in the middle, price right. Rebuilding it as flex rows
   and re-ordering the cells gets there without a template override. */
body.woocommerce-cart table.shop_table.cart {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
}
body.woocommerce-cart table.shop_table.cart thead { display: none !important; }
body.woocommerce-cart table.shop_table.cart tbody { display: block !important; width: 100%; }

/* tbody carries a fixed-height ::after spacer in this theme — the same one
   that opened an unexplained gap above Subtotal on the checkout. */
body.woocommerce-cart table.shop_table.cart tbody::after {
    content: none !important;
    display: none !important;
}

body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 18px 0;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
body.woocommerce-cart tr.woocommerce-cart-form__cart-item:first-child { padding-top: 0; }

body.woocommerce-cart tr.woocommerce-cart-form__cart-item > td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px;
    color: rgba(255,255,255,.75);
}

/* Order: thumbnail, name block, price. Remove is moved into the name block
   by the snippet, and the quantity cell is pulled in beside it. */
body.woocommerce-cart td.product-thumbnail { order: 1; flex: 0 0 78px; }
body.woocommerce-cart td.product-name      { order: 2; flex: 1 1 auto; min-width: 0; }
body.woocommerce-cart td.product-price     { order: 3; display: none !important; }
body.woocommerce-cart td.product-quantity  { order: 4; }
body.woocommerce-cart td.product-subtotal  { order: 5; margin-left: auto; text-align: right; white-space: nowrap; }
body.woocommerce-cart td.product-remove    { order: 6; }

/* product-price duplicates product-subtotal at quantity 1 and confuses at
   any other quantity. The line total is the number that matters. */

body.woocommerce-cart td.product-thumbnail img {
    width: 78px !important;
    height: 78px !important;
    max-width: none;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

/* .nbl-line-name is the add-on's equivalent of the product link. Catalogue-
   hidden products have no permalink, so cart.php renders their name as plain
   text and the snippet wraps it — see section 8b there. Same treatment either
   way: a line is a line. */
body.woocommerce-cart td.product-name > a,
body.woocommerce-cart td.product-name > .nbl-line-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff !important;
    text-decoration: none !important;
    margin: 0 0 4px;
}
body.woocommerce-cart td.product-name > a:hover { color: #fff !important; }

/* An add-on has no cable length, so it has no .variation to sit under and the
   4px above is all that separates the name from its controls. The camera line
   gets 10px from the meta block; this matches it. */
body.woocommerce-cart td.product-name > .nbl-line-name { margin-bottom: 10px; }

/* Variation meta — Woo renders a <dl> with a <p> inside each <dd>. */
body.woocommerce-cart td.product-name .variation {
    display: block;
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 18.75px;
    color: rgba(255,255,255,.6);
}
body.woocommerce-cart td.product-name .variation dt,
body.woocommerce-cart td.product-name .variation dd {
    display: inline;
    margin: 0;
    font-weight: 400;
}
body.woocommerce-cart td.product-name .variation dd p { display: inline; margin: 0; }
/* A plain space collapses between two inline elements, so the label ran into
   the value: "Cable Length:75ft / 20m". */
body.woocommerce-cart td.product-name .variation dt::after { content: "\00a0"; }

/* "Change" — the snippet renders it after the product name, where WooCommerce
   forces it, and the JS moves it onto the end of the meta line. Styled to
   match the Change link in the checkout summary. */
body.woocommerce-cart td.product-name .variation .nbl-change {
    color: rgba(255,255,255,.6) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
/* inline-block, and non-breaking spaces.
   inline-block is what keeps the separator out of the underline. text-decoration
   propagates from the anchor down through its descendants and a descendant
   cannot switch it off — text-decoration:none on the pseudo-element does
   nothing, which is why the underline ran unbroken through "Change · Remove".
   An inline-block is an atomic box, and decorations do not propagate into one.

   The nbsp are still there so the separator cannot be stranded at the end of a
   wrapped line. */
body.woocommerce-cart td.product-name .variation .nbl-change::before {
    content: "\00a0·\00a0";
    display: inline-block;
}
body.woocommerce-cart td.product-name .variation .nbl-change:hover { color: #fff !important; }

/* Before the JS runs it is still sitting under the name, where a block-level
   link would push the meta down and shift the row on load. */
body.woocommerce-cart td.product-name > a.nbl-change {
    display: inline;
    font-size: 12.5px;
    font-weight: 400;
    margin: 0;
}

body.woocommerce-cart td.product-subtotal {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

/* ---- Controls row --------------------------------------------------------
   The snippet moves the quantity and remove cells into .nbl-line-acts inside
   the name block, so they sit under the meta as in the mockup. */
.nbl-line-acts {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.woocommerce-cart .quantity {
    display: flex !important;
    align-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    overflow: hidden;
    float: none !important;
    margin: 0 !important;
}
body.woocommerce-cart .quantity .screen-reader-text { display: none; }

.nbl-qty-btn {
    width: 34px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: rgba(255,255,255,.6);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.nbl-qty-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.nbl-qty-btn[disabled] { opacity: .35; cursor: default; }
.nbl-qty-btn:focus-visible { outline: 2px solid rgba(125,223,130,.6); outline-offset: -2px; }

body.woocommerce-cart .quantity input.qty {
    width: 34px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.12) !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
/* The native spinner arrows duplicate our own buttons. */
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Camera lines have their remove link moved onto the meta row by the
   multi-camera snippet, which restyles it there. What is left matching this is
   the add-on line, whose link stays in its cell — so this is now the add-on's
   Remove, and it has to look like the camera's rather than like a leftover.
   Red and 12.5px, same as the checkout. */
body.woocommerce-cart td.product-remove a.remove {
    display: inline;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #e8382a !important;
    background: none !important;
    border-radius: 0;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.woocommerce-cart td.product-remove a.remove:hover {
    color: #ef5140 !important;
    background: none !important;
}

/* ---- The old actions row -------------------------------------------------
   Update Cart / Edit Cable Length / Empty Cart were three identically
   weighted outlined buttons, one of them destructive. The quantity stepper
   updates on its own now, Change lives on the line, and emptying is removing
   the last item. */
body.woocommerce-cart tr.woocommerce-cart-form__cart-item + tr td.actions,
body.woocommerce-cart td.actions { display: none !important; }
body.woocommerce-cart td.actions.nbl-keep-visible { display: block !important; }
body.woocommerce-cart .coupon { display: none !important; }

/* Hiding the cell left the row behind. Every row in this table is display:block
   by now, so an empty one is still a 1px box — and the theme gives it
   border-top:1px solid #eee, which drew a pale grey line across the bottom of
   the item list that looked like a separator in the wrong colour.
   Neutralised rather than hidden, so td.actions.nbl-keep-visible still has a
   row to appear in. */
body.woocommerce-cart table.shop_table.cart tbody > tr:not(.woocommerce-cart-form__cart-item):not(.nbl-addrow) {
    border: 0 !important;
}

/* The divider between the items and the totals belongs below "Add another
   camera" — it is the last thing in the item block, the same position it holds
   on the checkout. Without this the button had a rule above it and nothing
   below, so it looked like it belonged to the totals. */
body.woocommerce-cart tr.nbl-addrow {
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* ---- Totals -------------------------------------------------------------- */
body.woocommerce-cart .cart_totals table.shop_table {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
}

/* The theme puts 10px of padding on the tbody AND on every tr. Together that
   inset the whole totals block 20px from the items above it and left 34px
   between rows instead of 14. Both are zeroed and the spacing is set below. */
body.woocommerce-cart .cart_totals table.shop_table tbody {
    display: block;
    width: 100%;
    padding: 0 !important;
}
body.woocommerce-cart .cart_totals table.shop_table tbody::after { content: none !important; display: none !important; }

body.woocommerce-cart .cart_totals tr {
    display: flex !important;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
}
/* + the cell's 7px = 18px below the item separator, matching the checkout. */
body.woocommerce-cart .cart_totals tr:first-child { padding-top: 11px !important; }
body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td {
    display: block;
    padding: 7px 0 !important;
    border: 0 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
}
body.woocommerce-cart .cart_totals th { color: #fff; }
body.woocommerce-cart .cart_totals td { color: rgba(255,255,255,.75); text-align: right; }

/* Woo nests the shipping value in <ul><li><label>, each with its own spacing,
   which made this row taller than the others on the checkout. */
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li,
body.woocommerce-cart .cart_totals #shipping_method,
body.woocommerce-cart .cart_totals #shipping_method li,
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { display: none; }

.nbl-free { color: #7ddf82; }
.nbl-duty-val { color: #7ddf82; }

body.woocommerce-cart .cart_totals tr.order-total {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    margin-top: 11px !important;   /* + the cell's 7px  = 18px above the rule */
    padding-top: 6px !important;   /* + the cell's 14px = 20px below it */
}
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total .amount {
    padding-top: 14px !important;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
    color: #fff;
}
body.woocommerce-cart .cart_totals tr.order-total small { display: none; }

/* ---- Checkout button — identical to Place order and to Buy now ----------- */
body.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; }

body.woocommerce-cart a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    padding: 0 20px !important;
    margin: 18px 0 0 !important;
    border: 0 !important;
    border-radius: 9px;
    background: #e8382a !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 32px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    transition: background .2s ease;
}
body.woocommerce-cart a.checkout-button:hover { background: #ef5140 !important; }

/* The theme appends an arrow to .wc-forward buttons. The label already says
   where it goes. */
body.woocommerce-cart a.checkout-button::after {
    content: none !important;
    display: none !important;
}

.nbl-cart-legal {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    line-height: 17.25px;
    color: rgba(255,255,255,.45);
    text-align: center;
    margin: 12px 0 0;
}

.nbl-keep {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    color: rgba(255,255,255,.45) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nbl-keep:hover { color: #fff !important; }

/* ---- Empty state ---------------------------------------------------------
   Now that Buy now skips the cart, this is what the header cart icon shows
   most of the time. WooCommerce's default is one sentence and a "Return to
   shop" link, which is a dead end rather than a route back in. */
.nbl-empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 20px 60px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.nbl-empty-icon { font-size: 34px; margin-bottom: 10px; }
.nbl-empty h2 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.nbl-empty p  { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0 0 20px; }
.nbl-empty .nbl-empty-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    border-radius: 9px;
    background: #e8382a;
    color: #fff !important;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none !important;
}
.nbl-empty .nbl-empty-go:hover { background: #ef5140; }

body.woocommerce-cart .cart-empty,
body.woocommerce-cart .return-to-shop { display: none !important; }

/* And the other one.
   "Your cart is currently empty." was still showing above the designed state,
   because it is not WooCommerce's .cart-empty — it comes from a
   .custom-empty-cart-message block, so the rule above never matched it. Two
   empty-cart messages, one plain and one designed, stacked. */
body.woocommerce-cart .custom-empty-cart-message { display: none !important; }

/* Repeated from the checkout file. Harmless if both are loaded, and it keeps
   this stylesheet able to stand on its own.

   The badge is visible again — see the longer note in nbl-checkout-phase1.css
   for why. Hiding it without the attribution text was not compliant with
   Google's terms, and it made the checkout look as though reCAPTCHA had
   stopped loading when it had not. */
.grecaptcha-badge { bottom: 14px !important; }

/* ---- Notices: a toast, not a banner --------------------------------------
   "…removed. Undo?" was rendering in normal flow at the top of the page, so
   the whole cart sat lower while it was there — and something removes it from
   the DOM after about five seconds, at which point everything jumped back up.
   Appearing and disappearing in flow is two layout shifts for one message.

   Taking it out of flow fixes that on its own: fixed position means nothing
   moves when it arrives and nothing moves when it goes, whatever removes it.

   Top rather than the usual snackbar bottom, because the bottom of this page
   belongs to the sticky Checkout bar and a toast landing on the primary action
   is worse than one that does not. 78px clears the 64px header.

   Cart only. Checkout notices are validation errors — those need to stay in
   flow, next to the form, and stay put until they are dealt with. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
    position: fixed !important;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;   /* over the page, under the consent banner at 99999 */
    width: calc(100% - 32px);
    max-width: 420px;
    margin: 0 !important;
    padding: 13px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-left: 3px solid #7ddf82 !important;
    border-radius: 0 10px 10px 0;
    background: #161616 !important;   /* solid: it sits over content now */
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
    color: rgba(255,255,255,.8) !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px !important;
    line-height: 1.5 !important;
    animation: nbl-toast-in .22s ease-out both;
}
body.woocommerce-cart .woocommerce-error {
    border-left-color: #e8382a !important;
}

@keyframes nbl-toast-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Undo is the whole point of the message — it is the only thing that gets a
   colour. Pushed to the right so the sentence and the action do not compete. */
body.woocommerce-cart .woocommerce-message a.restore-item {
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #7ddf82 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none !important;
}
body.woocommerce-cart .woocommerce-message a.restore-item:hover { color: #a5ecaa !important; }

@media (max-width: 992px) {
    body.woocommerce-cart .woocommerce-message,
    body.woocommerce-cart .woocommerce-info,
    body.woocommerce-cart .woocommerce-error {
        top: 74px;
        font-size: 12.5px !important;
    }
}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before { display: none !important; }
body.woocommerce-cart .woocommerce-message .button { display: none; }

/* ---- Undo WooCommerce's small-screen cart -------------------------------
   WooCommerce ships woocommerce-smallscreen.css linked at max-width 768px,
   and the twenty-twenty compatibility sheet carries a matching block. Between
   them they restack .shop_table_responsive into a labelled list: every cell
   becomes a block, gets text-align:right !important, and grows a
   td::before printing its data-title — "Product: ", "Subtotal: ". The
   compat sheet then paints every second row white.

   That is a reasonable rescue for a stock six-column cart table. It is
   completely wrong for this one, which is already a stack of flex cards, and
   it does not appear on the checkout because the review table is not
   .shop_table_responsive. So none of it showed up in the desktop work.

   Everything below is neutralising, not new design — the base rules above are
   the layout, and this only stops them being overwritten under 768px.
   All of it is scoped to the cart page, so the order-received and My Account
   tables keep the stock responsive treatment, which suits them. */
@media (max-width: 768px) {

    /* 1. The data-title labels. */
    body.woocommerce-cart table.shop_table_responsive tr td::before,
    body.woocommerce-cart table.shop_table_responsive tr th::before {
        content: none !important;
        display: none !important;
    }

    /* 2. text-align:right !important on every cell. The item card reads left;
          only the line total is right, and it already is via the base rule. */
    body.woocommerce-cart table.shop_table.cart tr td { text-align: left !important; }
    body.woocommerce-cart td.product-subtotal        { text-align: right !important; }

    body.woocommerce-cart .cart_totals table.shop_table th { text-align: left  !important; }
    body.woocommerce-cart .cart_totals table.shop_table td { text-align: right !important; }

    /* 3. The zebra stripe — rgba(0,0,0,.024) from Woo, then flat #fff from the
          compat sheet, which put a white slab across a black page. */
    body.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td,
    body.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) th {
        background: none !important;
    }

    /* 4. Row margins and cell borders. The separator belongs to the row and is
          already set above; these only add a second one in the wrong place. */
    body.woocommerce-cart table.shop_table_responsive tr { margin: 0 !important; }
    body.woocommerce-cart table.shop_table_responsive tr:first-child { border-top: 0 !important; }
    body.woocommerce-cart table.shop_table_responsive tr td,
    body.woocommerce-cart table.shop_table_responsive tr td:last-child { border-bottom-width: 0 !important; }

    /* 5. Woo hides tbody th, which is where the totals labels live — Subtotal,
          Shipment and Total all lost their left-hand side and were left as a
          bold pseudo-element instead. */
    body.woocommerce-cart .cart_totals table.shop_table th,
    body.woocommerce-cart .cart_totals table.shop_table td { display: block !important; }

    /* 6. Remove is inside the name block now, so floating it right sends it
          somewhere it was never meant to go. */
    body.woocommerce-cart table.shop_table_responsive tr .product-remove { float: none !important; }

    /* 7. The compat sheet's own thumbnail size, one breakpoint's worth of
          disagreement with the 64px set below. */
    body.woocommerce-cart table.shop_table_responsive tr .product-thumbnail { display: block !important; }
    body.woocommerce-cart table.shop_table_responsive tr .product-thumbnail img { width: 64px !important; }
}

/* ---- Mobile --------------------------------------------------------------
   Same step-down as the checkout: fine print 13 -> 12.5, micro 12 -> 11.5,
   while the action button holds at 20/800/32. */
@media (max-width: 992px) {
    body.woocommerce-cart .woocommerce { padding: 0 16px; }

    body.woocommerce-cart td.product-thumbnail { flex: 0 0 64px; }
    body.woocommerce-cart td.product-thumbnail img { width: 64px !important; height: 64px !important; }
    body.woocommerce-cart td.product-name > a { font-size: 14px; }
    body.woocommerce-cart td.product-name .variation { font-size: 12px; line-height: 18px; }
    body.woocommerce-cart td.product-subtotal { font-size: 15px; }
    body.woocommerce-cart td.product-remove a.remove { font-size: 12px !important; }

    .nbl-cart-sub { font-size: 12px; line-height: 18px; }
    .nbl-cart-legal { font-size: 11px; line-height: 16.5px; }

    /* Change and Remove get their own line, which is where the checkout has
       always put them.
       On a 390px phone "Cable Length: 75ft / 20m · Change · Remove" does not
       fit, and letting it wrap naturally stranded the separator — first as a
       trailing "·" at the end of the meta, then, once the nbsp stopped that,
       as a leading "·" at the start of the next line. Neither is a thing you
       can style your way out of, because CSS cannot see where a line broke.
       Breaking it deliberately removes the question and makes the two pages
       read identically. Desktop keeps the inline version it was signed off
       with — there the line has room. */
    body.woocommerce-cart td.product-name .variation .nbl-change::before {
        content: "\A";
        white-space: pre;
        /* Back to inline here. A newline inside an inline-block is a newline
           inside a box — it does not break the line it sits on. Nothing to
           underline either way, so the reason for inline-block above does not
           apply to this one. */
        display: inline;
    }
}

/* ---- Sticky action bar on mobile ----------------------------------------
   The button has to be reachable whatever the cart contains. The totals stay
   in the flow above it; only the total and the action are pinned. */
@media (max-width: 992px) {
    .nbl-cart-bar {
        position: sticky;
        bottom: 0;
        z-index: 40;
        margin: 18px -16px 0;
        padding: 14px 16px 18px;
        border-top: 1px solid rgba(255,255,255,.12);
        background: linear-gradient(180deg, rgba(0,0,0,0), #000 22%);
    }
    .nbl-cart-bar .nbl-bar-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 10px;
        font-family: Arial, Helvetica, sans-serif;
    }

    /* …but not while the button carries the total.
       This bar was drawn for a button that just said "Checkout". With
       NBL_CART_BUTTON_TOTAL on it says "Checkout — £483.00", so the bar stated
       the total immediately above a button stating it again, directly below a
       totals block stating it a third time — three identical figures inside
       120px. The pinned button carries it on its own.
       Delete this one rule if NBL_CART_BUTTON_TOTAL is ever turned off. */
    .nbl-cart-bar .nbl-bar-row { display: none; }
    .nbl-cart-bar .nbl-bar-row span { font-size: 12.5px; color: rgba(255,255,255,.6); }
    .nbl-cart-bar .nbl-bar-row b { font-size: 19px; font-weight: 800; color: #fff; }

    body.woocommerce-cart .nbl-cart-bar a.checkout-button { margin-top: 0 !important; font-size: 19px; }
}
@media (min-width: 993px) {
    .nbl-cart-bar .nbl-bar-row { display: none; }
}/* End custom CSS */