/* ================================================
   Cart Flyout (slide-left panel + overlay)
   Triggered when clicking .mycart in the header.
   ================================================ */

/* Slide-out panel (hidden off-screen by default) */
body .slide-left {
    display: block;
    position: fixed;
    right: -1000px;
    top: 0;
    background: #fff;
    z-index: 99999;
    height: 100%;
    width: 500px;
    transition: all 300ms ease-in-out;
}
body .slide-left.show-left {
    right: 0;
}

/* Panel inner sections */
.slide-left .title {
    font-size: 32px;
    padding-bottom: 30px;
}
.slide-left .simplebar-content {
    height: 100%;
}
.sidecart {
    padding: 70px 30px 50px;
    width: 100%;
    height: 100%;
}
.slide-left .descrip-holder {
    margin: 0 10px;
    width: 285px;
}
.slide-left form {
    height: 100%;
    flex-direction: column;
}
.slide-left ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
.slide-left .cart_item {
    border-top: 1px solid #ebebeb;
    padding: 15px 0;
}
.slide-left li:nth-last-child(2) {
    border-bottom: 1px solid #ebebeb;
}
.slide-left li:last-child {
    padding: 30px 0;
}

/* Cart item rows */
.cart_item .item-image {
    position: relative;
    width: 130px;
}
.cart_item .item-image a {
    padding: 0 10px;
    display: block;
}
.cart_item .item-image img {
    width: 100%;
}
.cart_item .description a {
    font-size: 15px;
}
.description a,
.description a:hover {
    display: block;
    line-height: normal;
    text-decoration: none;
    padding-bottom: 10px;
}
.descrip-holder .price-holder {
    position: relative;
    padding: 5px 10px;
}

/* Quantity input */
body .slide-left .cart_item div.input-holder div.quantity input {
    text-align: center;
    width: 52px;
    font-weight: 700;
    border: 1px solid #d0cfcf;
    padding: 10px 0;
}
.cart_item .quantity .btn-holder {
    display: none;
}
.cart_item .quantity input::-webkit-inner-spin-button,
.cart_item .quantity input::-webkit-outer-spin-button,
.cart_item .quantity input {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
.sidecart .input-holder {
    margin-bottom: auto;
    margin-top: 10px;
}
.input-holder .quantity {
    padding: 0 10px;
}
.input-holder .quantity .input-text {
    width: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 35px;
    font-weight: 700;
    border: 1px solid #d0cfcf;
}

/* Remove (×) button on cart line */
.input-holder .close-btn {
    display: flex;
    align-items: center;
    line-height: normal;
}
.input-holder .close-btn a,
.input-holder .close-btn a:hover,
body.woocommerce .input-holder .close-btn a.remove,
body.woocommerce .input-holder .close-btn a.remove:hover {
    font-size: 24px;
    color: #d0cfcf !important;
    background-color: transparent;
    text-decoration: none;
    font-weight: lighter;
}

/* Pricing */
.sidecart .price-holder > div:last-child {
    font-size: 22px;
}
.sidecart .price-holder .small-text,
.recom-item .price-holder .small-text {
    line-height: normal;
    margin-top: 0 !important;
}
.sidecart .reg-price .woocommerce-Price-amount {
    display: inline-block;
}
.slide-left .sale-percent {
    width: 50px;
    height: 50px;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.sidecart .sale-percent > div {
    line-height: normal;
}
.slide-left .sale-percent > div:first-child {
    font-size: 0.9rem;
}
.slide-left .sale-percent > div:last-child {
    font-size: 9px;
}

/* Subtotal + buttons */
.sidecart h4,
.sidecart .u-save-holder h5 {
    margin-bottom: 15px;
}
.sidecart .subtotal-holder h4 {
    margin-bottom: 0;
}
.sidecart .checkout-btn a {
    font-weight: bold;
    line-height: normal;
    font-size: 16px;
    padding: 12px 25px;
}
form.checkout .close-btn a.remove:hover {
    line-height: 1;
    color: #000 !important;
}
.checkout-btn a.btn-primary:focus {
    color: #ffffff;
}

/* Recommended-items section */
.slide-left .recom-item {
    background-color: #f3faf9;
    padding: 30px 30px 40px;
}
.recom-item .cart {
    background-color: #fff;
    padding: 20px 20px 30px;
}
.recom-item .cart .cart_item {
    border-top: 0;
}
.recom-item .cart_item .item-image {
    width: 110px;
    flex: 0 0 110px;
}
.recom-item .descrip-holder {
    width: 250px;
    flex: 0 0 250px;
}
.recom-item .input-holder {
    width: 70px;
    flex: 0 0 70px;
}
.recom-item .quantity input {
    width: 100%;
}
.recom-item .add-to-cart-btn {
    border: none;
    color: #fff;
    background-color: #77d0bc;
    display: block;
    width: 100%;
    font-size: 15px;
    padding: 10px 0;
    outline: none;
}
.recom-item .add-to-cart-btn:hover,
.recom-item .add-to-cart-btn:focus {
    background-color: #7fdcc7;
    box-shadow: none;
}
.recom-item .sale-price {
    font-size: 22px;
}
.recom-item h5 {
    margin-bottom: 10px;
}
.add-to-cart-btn-holder {
    padding: 10px 40px 0;
}

/* Close button (X in the top-right of the panel) */
.closed-btn-holder {
    position: relative;
    width: 100%;
}
.closed-btn-holder > div {
    position: absolute;
    right: 40px;
    top: 20px;
    width: 25px;
    height: 25px;
    opacity: 1;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.closed-btn-holder > div:hover {
    opacity: 1;
}
.closed-btn-holder > div:before,
.closed-btn-holder > div:after {
    position: absolute;
    top: 0;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #000;
}
.closed-btn-holder > div:before {
    transform: rotate(45deg);
}
.closed-btn-holder > div:after {
    transform: rotate(-45deg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    body .slide-left {
        width: 100%;
    }
    .slide-left .title {
        font-size: 24px;
    }
}

/* ================================================
   Flycart Redesign — vb-fc-* classes
   ================================================ */

/* Panel layout: flex column so header is fixed, items scroll, summary stays pinned */
body .slide-left {
    overflow: hidden;
}
body .slide-left > form#flyoutcart {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */
.vb-fc-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    z-index: 10;
}
.vb-fc-clear {
    font-size: 13px;
    color: #6B6B6B;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
.vb-fc-clear:hover { color: #000; text-decoration: none; }
.vb-fc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1A1A1A;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 140% */
    letter-spacing: -0.449px;

}
.vb-fc-count {
    color: #FFF;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.15px;
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 16777200px;
    background: #C8102E;
}

/* Close button positioning within new header */
.vb-fc-header .closed-btn-holder {
    position: static;
    width: auto;
    min-width: 70px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Use × character instead of CSS-drawn lines */
.vb-fc-header .closed-btn-holder > div {
    position: static;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    font-size: 22px;
    color: #222;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vb-fc-header .closed-btn-holder > div:before,
.vb-fc-header .closed-btn-holder > div:after {
    content: none;
}

/* Sidecart body: clips overflow — scrolling is on .vb-fc-items, not here */
.sidecart {
    flex: 1;
    overflow-y: scroll;
    padding: 0;
    width: 100%;
    min-height: 0;
}
.sidecart.d-flex {
    align-items: center;
    justify-content: center;
}
.cart-has-items {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Inset the entire ajax content area from panel edges */
.cart-has-items .flyoutajax-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    padding: 0 8px;
    padding-left: 20px;
    padding-right: 10px;
}

/* Items list: this is the scrollable region */
.vb-fc-items {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.vb-fc-item {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #ebebeb;
}

/* Item image column */
.vb-fc-img {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: #f5f5f5;
    overflow: hidden;
}
.vb-fc-img a { display: block; }
.vb-fc-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Discount badge on image */
.vb-fc-disc-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: #C8102E;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    pointer-events: none;
    box-shadow: 0 6.25px 4.688px rgba(0, 0, 0, 0.1), 0 2.5px 1.875px rgba(0, 0, 0, 0.1);
}
.vb-fc-disc-badge strong { font-size: 13px; display: block; font-weight: 800; }
.vb-fc-disc-badge span   { font-size: 7px;  display: block; }

/* Item details column */
.vb-fc-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.vb-fc-name {
    text-decoration: none;
    display: block;
    color: #1A1A1A;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.15px;
}
.vb-fc-name:hover { color: #000; text-decoration: none; }

/* Price-type pill (HOT / CHOPPED) — matches the product card (.vb-price-pill).
   Shown only for HOT/CHOP products; when present, RRP/WAS + the discount badge
   are suppressed (see ajaxFlycart() in incl/woocommerce-extent.php). */
.vb-fc-pill-row { display: flex; }
.vb-fc-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    padding: 4px 8px;
    color: #fff;
}
.vb-fc-pill--hot  {
    background: #ff0000; 
    color: #FFF;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px; /* 100% */
}
.vb-fc-pill--chop {
    background: #00a651;
    color: #FFF;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px; /* 100% */
}

/* Pricing row: RRP on left, sale price on right */
.vb-fc-pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vb-fc-rrp,
.vb-fc-rrp .woocommerce-Price-amount,
.vb-fc-rrp .woocommerce-Price-currencySymbol {
    font-size: 15px;
    color: #6B6B6B;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.15px;
}
.vb-fc-sale-price,
.vb-fc-sale-price .woocommerce-Price-amount,
.vb-fc-sale-price .woocommerce-Price-currencySymbol {
    font-size: 20px;
    color: #C8102E;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
    letter-spacing: -0.439px;
    margin-left: auto;
}

/* Qty + remove row */
.vb-fc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
/* Single unified pill: one outer border + radius, inner dividers around the number */
.vb-fc-qty-wrap {
    display: inline-flex;
    align-items: stretch;
    height: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}
.vb-fc-qty-wrap .quantity {
    display: flex;
    padding: 0;
    height: 100%;
}
.vb-fc-qty-wrap .quantity input.qty {
    width: 40px;
    height: 100%;
    text-align: center;
    border: none;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 0 !important;
    font-size: 14px;
    color: #1a1a1a;
    background: #fff;
    cursor: default;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
.vb-fc-qty-wrap .quantity input.qty.vb-fc-cart-item-qty {
    height: auto !important;
}

.vb-fc-qty-wrap .quantity input::-webkit-inner-spin-button,
.vb-fc-qty-wrap .quantity input::-webkit-outer-spin-button { -webkit-appearance: none; }
.vb-fc-qty-btn {
    width: 28px;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    flex-shrink: 0;
    padding: 0;
}
.vb-fc-qty-btn:hover { background: #f5f5f5; }
.vb-fc-actions .close-btn { line-height: 1; }
.vb-fc-actions .close-btn a.remove,
.vb-fc-actions .close-btn a.remove:hover,
body.woocommerce .vb-fc-actions .close-btn a.remove,
body.woocommerce .vb-fc-actions .close-btn a.remove:hover {
    font-size: 22px;
    color: #ccc !important;
    background: transparent;
    text-decoration: none;
    font-weight: 300;
    line-height: 1;
}
.vb-fc-actions .close-btn a.remove:hover { color: #999 !important; }

/* Summary section */
.vb-fc-summary {
    flex-shrink: 0;
    background: rgba(245, 245, 245, 0.3);
    border-top: 1px solid #e5e5e5;
    padding: 24px 0;
}
.vb-fc-free-ship { text-align: center; margin-bottom: 14px; }
.vb-fc-free-ship img { width: 170px; }

.vb-fc-totals { margin-bottom: 16px; }
.vb-fc-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-family: Inter;
    font-size: 16px;
    color: #6b6b6b;
}
.vb-fc-total-row > span:last-child { color: #1a1a1a; }
.vb-fc-free-text { color: #C8102E !important; font-weight: 700; font-size: 14px; }
.vb-fc-grand-total {
    font-size: 16px;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid #e5e5e5;
}
.vb-fc-grand-total strong:first-child { color: #1a1a1a; font-weight: 500; }
.vb-fc-grand-total strong:last-child { color: #000; }
.vb-fc-grand-total .woocommerce-Price-amount{
    font-size: 20px;
}

.vb-fc-checkout-btn {
    display: block;
    width: 100%;
    background: #C8102E;
    color: #fff !important;
    text-align: center;
    padding: 16px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.3125px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 12px;
}
.vb-fc-checkout-btn:hover { background: #c0222e; text-decoration: none; }

.vb-fc-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: Inter;
    font-size: 12px;
    color: #6b6b6b;
}

/* Empty state — centered icon + message + primary/outline buttons.
   .cart-empty is the show/hide target (toggled by js/custom.js); .vb-fc-empty
   is the always-flex-column wrapper so layout holds whether JS sets the outer
   display to flex or block via .show(). */
.cart-empty { width: 100%; }
.vb-fc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: Inter, sans-serif;
}
.vb-fc-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(200, 16, 46, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.vb-fc-empty-title {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.449px;
    color: #1A1A1A;
    margin: 0 0 8px;
}
.vb-fc-empty-text {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: #6B6B6B;
    margin: 0 0 24px;
}
.vb-fc-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.vb-fc-empty-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.vb-fc-empty-btn--primary {
    background: #C8102E;
    border: 1px solid #C8102E;
    color: #fff !important;
}
.vb-fc-empty-btn--primary:hover,
.vb-fc-empty-btn--primary:focus {
    background: #a50d26;
    border-color: #a50d26;
    color: #fff !important;
    text-decoration: none;
}
.vb-fc-empty-btn--outline {
    background: #fff;
    border: 1px solid #C8102E;
    color: #C8102E !important;
}
.vb-fc-empty-btn--outline:hover,
.vb-fc-empty-btn--outline:focus {
    background: #C8102E;
    color: #fff !important;
    text-decoration: none;
}

@media (max-width: 768px) {
    .vb-fc-header { padding: 14px 16px; }
    .vb-fc-item   { padding: 14px 16px; }
    .vb-fc-summary { padding: 14px 16px; }
}

/* ================================================================
   /cart page redesign  (standard WooCommerce cart, NOT the flyout)
   ----------------------------------------------------------------
   The /cart page renders WooCommerce's default `cart/cart.php`
   ([woocommerce_cart] shortcode -> div.woocommerce) inside understrap
   page.php. No template override — this restyle reshapes the default
   markup entirely in CSS, mirroring the flyout (.vb-fc-*) and checkout
   (#cfw-cart) redesign language. Scoped to body.woocommerce-cart so it
   can't touch the always-present flyout or any other page.
   Palette kept as literals (matches the flyout section above and the
   checkout.css :root tokens): red #C8102E / hover #a50d26, text #1A1A1A,
   muted #6B6B6B, border #E5E5E5, soft #F5F5F5, radius 6px.
   ================================================================ */

/* --- Font family: Inter across the cart subtree ---
   Re-assert FontAwesome afterwards — a blanket Inter rule blanks .fa
   icon glyphs (see redesign-design-tokens note). Form controls don't
   inherit font-family, so they're listed explicitly. */
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce a,
body.woocommerce-cart .woocommerce input,
body.woocommerce-cart .woocommerce select,
body.woocommerce-cart .woocommerce textarea,
body.woocommerce-cart .woocommerce button,
body.woocommerce-cart .entry-title {
    font-family: 'Inter', sans-serif;
}
body.woocommerce-cart .woocommerce .fa,
body.woocommerce-cart .woocommerce [class^="fa-"],
body.woocommerce-cart .woocommerce [class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

/* Page title ("Cart") */
body.woocommerce-cart .entry-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.45px;
    color: #1A1A1A;
    margin-bottom: 24px;
}

/* --- Two-column layout: items (left) + summary card (right) ---
   Guarded with :has(.woocommerce-cart-form) so the empty-cart state
   (no form/collaterals) keeps its natural single-column flow. */
body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px 32px;
    align-items: start;
}
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
body.woocommerce-cart .cart-collaterals {
    grid-column: 2;
    width: auto;
    float: none;
    margin: 0;
}
body.woocommerce-cart .cart-collaterals .cross-sells { width: auto; float: none; }
body.woocommerce-cart .woocommerce > wc-order-attribution-inputs { display: none; }

/* --- Items list: reshape the default table into a bordered card --- */
body.woocommerce-cart .woocommerce-cart-form table.shop_table {
    display: block;
    width: 100%;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #fff;
    margin: 0;
    overflow: hidden;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table thead { display: none; }
body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody { display: block; }
body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody > tr { display: block; }

/* Each product row -> a 2-row card grid:
     row 1:  [ thumb ] [ name .......... ] [ × remove ]
     row 2:  [ thumb ] [ price ] [ qty ]  [ subtotal ]
   NB: selector carries the full table>tbody>tr path so it out-specifies the
   `> tbody > tr { display:block }` reset above (which the actions row needs). */
body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody > tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 96px auto 1fr auto;
    grid-template-areas:
        "thumb name  name  remove"
        "thumb price qty   subtotal";
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #E5E5E5;
}
body.woocommerce-cart tr.woocommerce-cart-form__cart-item:last-of-type { border-bottom: 0; }
body.woocommerce-cart tr.woocommerce-cart-form__cart-item > td {
    padding: 0;
    border: 0;
    background: none;
}

/* Thumbnail */
body.woocommerce-cart .cart_item .product-thumbnail {
    grid-area: thumb;
    align-self: start;
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: #F5F5F5;
    overflow: hidden;
}
body.woocommerce-cart .cart_item .product-thumbnail a,
body.woocommerce-cart .cart_item .product-thumbnail img {
    display: block;
    width: 96px;
    height: 96px;
}
body.woocommerce-cart .cart_item .product-thumbnail img { object-fit: cover; }

/* Product name */
body.woocommerce-cart .cart_item .product-name {
    grid-area: name;
    min-width: 0;
    align-self: start;
}
body.woocommerce-cart .cart_item .product-name a {
    display: block;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.15px;
    text-decoration: none;
}
body.woocommerce-cart .cart_item .product-name a:hover { color: #000; text-decoration: none; }
body.woocommerce-cart .cart_item .product-name .backorder_notification {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6B6B6B;
}

/* Remove (×) — top-right, gray, darkens on hover */
body.woocommerce-cart .cart_item .product-remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    line-height: 1;
}
body.woocommerce-cart .cart_item .product-remove a.remove,
body.woocommerce-cart .woocommerce .cart_item .product-remove a.remove {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: #CCC !important;
    background: transparent !important;
    text-decoration: none;
}
body.woocommerce-cart .cart_item .product-remove a.remove:hover { color: #999 !important; }

/* Unit price (muted) */
body.woocommerce-cart .cart_item .product-price {
    grid-area: price;
    justify-self: start;
    font-size: 15px;
    color: #6B6B6B;
}
body.woocommerce-cart .cart_item .product-price .woocommerce-Price-amount { color: #6B6B6B; }

/* Quantity stepper */
body.woocommerce-cart .cart_item .product-quantity {
    grid-area: qty;
    justify-self: start;
}
body.woocommerce-cart .cart_item .product-quantity .quantity { margin: 0; padding: 0; }
body.woocommerce-cart .cart_item .product-quantity input.qty {
    width: 64px;
    height: 40px;
    text-align: center;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 0 6px;
    font-size: 15px;
    color: #1A1A1A;
    background: #fff;
    -moz-appearance: textfield;
}
body.woocommerce-cart .cart_item .product-quantity input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .cart_item .product-quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Line subtotal */
body.woocommerce-cart .cart_item .product-subtotal {
    grid-area: subtotal;
    justify-self: end;
    align-self: center;
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
}

/* --- HOT/CHOP pills + discount badges + RRP/sale pricing ---
   Injected server-side (functions.php: vb_cart_item_thumb_badge /
   vb_cart_item_pill / vb_cart_item_price_html) reusing the flycart's
   .vb-fc-* classes so the cart items match the flyout exactly. */

/* Positioning context for the discount badge inside the thumbnail. */
body.woocommerce-cart .cart_item .product-thumbnail { position: relative; }

/* HOT/CHOP pill sits directly under the product name. */
body.woocommerce-cart .cart_item .product-name .vb-fc-pill-row { margin-top: 6px; }

/* Price cell: RRP/WAS (muted) stacked above the red sale price, mirroring the
   flyout. Override the plain muted price colour so .vb-fc-sale-price stays red
   (our .product-price .woocommerce-Price-amount rule would otherwise grey it). */
body.woocommerce-cart .cart_item .product-price { display: flex; flex-direction: column; gap: 2px; }
body.woocommerce-cart .cart_item .product-price .vb-fc-rrp,
body.woocommerce-cart .cart_item .product-price .vb-fc-rrp .woocommerce-Price-amount { color: #6B6B6B; }
body.woocommerce-cart .cart_item .product-price .vb-fc-sale-price,
body.woocommerce-cart .cart_item .product-price .vb-fc-sale-price .woocommerce-Price-amount { color: #C8102E; }
body.woocommerce-cart .cart_item .product-price .vb-fc-sale-price { margin-left: 0; }

/* --- Actions row (coupon + update cart) --- */
body.woocommerce-cart td.actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px !important;
    border-top: 1px solid #E5E5E5;
}
body.woocommerce-cart td.actions .coupon {
    display: flex;
    gap: 8px;
    margin: 0;
    flex: 1 1 auto;        /* grow so the input can be wide (Update cart stays right) */
    min-width: 0;
}
body.woocommerce-cart .woocommerce td.actions #coupon_code.input-text {
    width: auto !important;   /* beats legacy .woocommerce-cart #coupon_code width:110px !important */
    flex: 1 1 auto;           /* fill the coupon group -> full placeholder is visible */
    min-width: 240px;
    max-width: 420px;
    height: 44px;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 15px;
    background: #fff;
}
body.woocommerce-cart td.actions #coupon_code::placeholder { color: #9a9a9a; }

/* --- Buttons: solid-red primary, outline-red secondary --- */
body.woocommerce-cart .woocommerce .btn-primary,
body.woocommerce-cart .woocommerce .btn-outline-primary,
body.woocommerce-cart .woocommerce .button {
    height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 42px;
    text-transform: none;
    letter-spacing: -0.15px;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.woocommerce-cart .woocommerce .btn-primary {
    background: #C8102E;
    border: 1px solid #C8102E;
    color: #fff;
}
body.woocommerce-cart .woocommerce .btn-primary:hover,
body.woocommerce-cart .woocommerce .btn-primary:focus {
    background: #a50d26;
    border-color: #a50d26;
    color: #fff;
}
body.woocommerce-cart .woocommerce .btn-outline-primary {
    background: #fff;
    border: 1px solid #C8102E;
    color: #C8102E;
}
body.woocommerce-cart .woocommerce .btn-outline-primary:hover,
body.woocommerce-cart .woocommerce .btn-outline-primary:focus {
    background: #C8102E;
    border-color: #C8102E;
    color: #fff;
}

/* --- Summary card (Cart totals) --- */
body.woocommerce-cart .cart-collaterals .cart_totals {
    width: auto;
    float: none;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #fff;
    padding: 24px;
    position: sticky;
    top: 24px;
}
body.woocommerce-cart .cart_totals h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #1A1A1A;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    text-transform: none;
}
body.woocommerce-cart .cart_totals table.shop_table {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
}
body.woocommerce-cart .cart_totals table.shop_table tbody { display: block; }
body.woocommerce-cart .cart_totals table.shop_table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
}
body.woocommerce-cart .cart_totals table.shop_table tr th,
body.woocommerce-cart .cart_totals table.shop_table tr td {
    padding: 0;
    border: 0;
    background: none;
}
body.woocommerce-cart .cart_totals table.shop_table tr th {
    font-weight: 400;
    color: #6B6B6B;
    text-align: left;
}
body.woocommerce-cart .cart_totals table.shop_table tr td {
    text-align: right;
    color: #1A1A1A;
}
/* Shipping row: stack th above the calculator (it's a whole form) */
body.woocommerce-cart .cart_totals tr.shipping,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
    display: block;
}
body.woocommerce-cart .cart_totals tr.shipping th { display: block; margin-bottom: 6px; }
body.woocommerce-cart .cart_totals tr.shipping td {
    display: block;
    text-align: left;
    color: #6B6B6B;
    font-size: 14px;
    line-height: 20px;
}
body.woocommerce-cart .cart_totals tr.shipping .shipping-calculator-button { color: #C8102E; text-decoration: none; }
body.woocommerce-cart .cart_totals tr.shipping .shipping-calculator-button:hover { text-decoration: underline; }
body.woocommerce-cart .cart_totals .shipping-calculator-form .input-text,
body.woocommerce-cart .cart_totals .shipping-calculator-form select {
    height: 40px;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    background: #fff;
}
/* Order total row */
body.woocommerce-cart .cart_totals tr.order-total {
    border-bottom: 0;
    border-top: 1px solid #E5E5E5;
    margin-top: 6px;
    padding-top: 16px;
}
body.woocommerce-cart .cart_totals tr.order-total th { color: #1A1A1A; font-weight: 600; font-size: 16px; }
body.woocommerce-cart .cart_totals tr.order-total td strong { font-size: 20px; font-weight: 700; color: #1A1A1A; }

/* Proceed-to-checkout: Proceed (WC) + PayPal (ppcp) + Apple Pay (Stripe
   express, #wc-stripe-express-checkout-element) all render as direct
   children here via the woocommerce_proceed_to_checkout hook.
   Use a flex column with `gap` so the spacing between whichever buttons
   are VISIBLE is always equal: the Apple Pay element starts display:none
   (no gap consumed) and, once Stripe reveals it a few seconds later, it
   picks up the same gap on both sides. Plugin/inline vertical margins on
   the children (Stripe's margin-bottom:12px + inline margin-top:1em) are
   zeroed so `gap` is the single source of spacing. */
body.woocommerce-cart .wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 0;
}
body.woocommerce-cart .wc-proceed-to-checkout > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.btn {
    display: block;
    width: 100%;
    background: #C8102E;
    border: 1px solid #C8102E;
    color: #fff;
    text-align: center;
    padding: 14px;
    height: auto;
    line-height: 1.2;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.3px;
    text-decoration: none;
    text-transform: none;
}
body.woocommerce-cart .wc-proceed-to-checkout a:hover,
body.woocommerce-cart .wc-proceed-to-checkout a:focus {
    background: #a50d26;
    border-color: #a50d26;
    color: #fff;
}

/* --- Empty-cart state (cart-empty.php) --- */
body.woocommerce-cart .cart-empty.woocommerce-info,
body.woocommerce-cart p.cart-empty {
    background: rgba(200, 16, 46, 0.05);
    border: 0;
    border-radius: 8px;
    padding: 24px;
    color: #1A1A1A;
    font-size: 16px;
    text-align: center;
}
body.woocommerce-cart p.cart-empty::before { display: none; }
body.woocommerce-cart .return-to-shop { text-align: center; margin-top: 16px; }
body.woocommerce-cart .return-to-shop a.button {
    display: inline-block;
    background: #C8102E;
    border: 1px solid #C8102E;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
}
body.woocommerce-cart .return-to-shop a.button:hover { background: #a50d26; border-color: #a50d26; color: #fff; }

/* --- Neutralise WooCommerce's default mobile cart reflow ---
   WooCommerce enqueues woocommerce-smallscreen.css with media="max-width:768px",
   which reflows any `.shop_table_responsive` (our cart items table AND the
   totals table) for ITS OWN stock mobile cart:
     - hides `td.product-thumbnail`  -> our product image vanished on mobile
     - hides `tbody th`              -> our totals row labels vanished
     - injects `td::before { content: attr(data-title) }` -> stray "Product:",
       "Price:", "Quantity:", "Subtotal:" labels cluttered every cell
     - clearfix ::before/::after on `td.actions .coupon`
   Our redesign already has a purpose-built responsive layout (grid item cards
   + flex totals), so switch all of that back off. WC's thumbnail selector
   includes `#content` (an ID, understrap's wrapper), so !important is required
   to out-weigh it. These are safe at every width — the stray labels/hidden
   elements only exist under WC's mobile stylesheet in the first place. */
body.woocommerce-cart .cart_item .product-thumbnail { display: block !important; }
/* WC's mobile rule is `td{text-align:right!important}` (spec 0,2,3); match its
   !important and out-specify it (0,3,2) so name/price read left-aligned. The
   subtotal cell is positioned right by its own grid justify-self, so left text
   alignment there is harmless. */
body.woocommerce-cart .woocommerce-cart-form .cart_item td { text-align: left !important; }
body.woocommerce-cart .woocommerce-cart-form td::before,
body.woocommerce-cart .cart_totals td::before { content: none !important; }
body.woocommerce-cart .cart_totals table.shop_table tr th { display: block !important; }
body.woocommerce-cart td.actions .coupon::before,
body.woocommerce-cart td.actions .coupon::after { content: none !important; display: none !important; }
/* WC's smallscreen also zebra-stripes even rows: `tr:nth-child(2n) td{
   background:rgba(0,0,0,.025)}` (spec 0,3,3) — that's the faint grey behind
   the 2nd item's cells. Kill it (keep the thumbnail's own placeholder bg). */
body.woocommerce-cart .woocommerce-cart-form table.shop_table tr:nth-child(2n) td:not(.product-thumbnail) { background: transparent !important; }

/* --- Responsive --- */
@media (max-width: 991px) {
    body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) {
        grid-template-columns: 1fr;
    }
    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals { grid-column: 1; }
    body.woocommerce-cart .cart-collaterals .cart_totals { position: static; }
}
@media (max-width: 480px) {
    body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody > tr.woocommerce-cart-form__cart-item {
        grid-template-columns: 72px 1fr auto;
        grid-template-areas:
            "thumb name  remove"
            "thumb price price"
            "thumb qty   subtotal";
        column-gap: 12px;
        padding: 16px;
    }
    body.woocommerce-cart .cart_item .product-thumbnail,
    body.woocommerce-cart .cart_item .product-thumbnail a,
    body.woocommerce-cart .cart_item .product-thumbnail img {
        width: 72px;
        height: 72px;
    }
    /* Scale the discount badge down to suit the 72px mobile thumbnail. */
    body.woocommerce-cart .cart_item .vb-fc-disc-badge { width: 34px; height: 34px; }
    body.woocommerce-cart .cart_item .vb-fc-disc-badge strong { font-size: 11px; }
    body.woocommerce-cart .cart_item .vb-fc-disc-badge span { font-size: 6px; }
    body.woocommerce-cart td.actions { flex-direction: column; align-items: stretch; }
    body.woocommerce-cart td.actions .coupon { flex-wrap: wrap; }
    body.woocommerce-cart .woocommerce td.actions #coupon_code.input-text { min-width: 0; flex: 1; }
}