/*
 * Shopping Cart page redesign (design only - no cart logic here).
 * Scoped to .checkout-cart-index (the body class Magento adds for this controller) so it
 * cannot leak onto any other page. Color palette / radii / shadows reused from the site's
 * existing card language (see home-redesign.css: #e31e24 red, #17a35a green, 8-10px radius,
 * 0 2px 10px rgba(0,0,0,.06) shadow) and the 1170px container already used by .cbp-section.
 */

.checkout-cart-index .page-wrapper,
.checkout-cart-index .cart-container,
.checkout-cart-index .cart-summary,
.checkout-cart-index .cbp-cart-item,
.checkout-cart-index .cbp-need-help,
.checkout-cart-index .cbp-cart-benefits__card {
    box-sizing: border-box;
}
.checkout-cart-index .cart-container *,
.checkout-cart-index .cart-summary *,
.checkout-cart-index .cbp-need-help * {
    box-sizing: border-box;
}

/* CSS fallback for the sitewide Zopim/Zendesk live-chat widget - hide-livechat.phtml already
   calls the widget's own hide API, this just covers its fixed-position launcher/window iframes
   (appended directly to <body>, no wrapping id/class - confirmed via a rendered DOM dump: the
   snippet at design/head/includes still points at v2.zopim.com but Zendesk now serves its
   current "Web Widget" markup from it, e.g. <iframe id="launcher" data-product="web_widget">)
   in case that API call hasn't run yet (e.g. slow script load), so it can never visually affect
   this page's layout. */
.checkout-cart-index iframe#launcher,
.checkout-cart-index iframe#webWidget,
.checkout-cart-index iframe[data-product="web_widget"],
.checkout-cart-index iframe[title*="chat" i],
.checkout-cart-index iframe[title*="widget" i],
.checkout-cart-index #zopim,
.checkout-cart-index .zopim,
.checkout-cart-index [id^="zopim"],
.checkout-cart-index [class*="zopim"] {
    display: none !important;
}

.checkout-cart-index .column.main,
.checkout-cart-index .page-title-wrapper,
.checkout-cart-index .breadcrumbs {
    max-width: 1170px;
}

/* ---------- Breadcrumb ---------- */
/* .breadcrumbs is a sibling of #maincontent, outside the .container/.row/.col-lg-12 grid that
   centers the rest of the page - it only gets `max-width` from the rule above, with no
   margin-left/right, so without this it renders flush against the left edge of the viewport
   instead of centered over the cart content below it. */
.checkout-cart-index .breadcrumbs {
    margin-left: auto;
    margin-right: auto;
    padding-top: 22px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
.checkout-cart-index .breadcrumbs .items .item strong {
    color: #e31e24;
    font-weight: 600;
}

/* ---------- Page title ---------- */
.checkout-cart-index .page-title-wrapper {
    margin-bottom: 6px;
    padding-top: 6px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.checkout-cart-index .page-title-wrapper .page-title {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-weight: 800;
    font-size: 34px;
    color: #1A1C1C;
    margin: 0 14px 0 0;
    position: relative;
    padding-bottom: 12px;
    display: inline-block;
}
.checkout-cart-index .page-title-wrapper .page-title:after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 0;
    width: 46px;
    height: 4px;
    background: #e31e24;
    border-radius: 2px;
}
.checkout-cart-index .cart-items-count {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 16px;
    color: #999;
    font-weight: 400;
    align-self: flex-start;
    margin-top: 6px;
}

/* ---------- Overall content grid ---------- */
.checkout-cart-index .cart-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    max-width: 1170px;
    margin: 10px auto 0;
    padding: 0 15px;
}
.checkout-cart-index .cbp-cart-items-wrap {
    order: 1;
    /* Low flex-basis (with flex-grow so it still fills extra space on wide screens) - a fixed
       700px basis needed ~1140px of container just to avoid wrapping the fixed-width sidebar
       onto its own row, which broke the two-column layout on common ~900-1100px effective
       viewports (e.g. a 1366px laptop at 150% OS display scaling ~= 911px CSS viewport). */
    flex: 1 1 380px;
    min-width: 0;
}
/* Neutralizes the stock Luma desktop rule ".cart-container .form-cart{float:left;width:73%}"
   (compiled into styles-l.css, which loads AFTER this file - same specificity, so it would
   otherwise win the cascade on source order alone). <form class="form-cart"> is the real
   <form> element inside .cbp-cart-items-wrap: being a grandchild (not a direct flex child) of
   .cart-container, flexbox's "float computes to none on flex items" rule doesn't reach it, so
   the float stood and pulled it out of normal flow - the .cbp-cart-benefits div right after it
   then wrapped up alongside it instead of stacking below, which is what was squeezing the
   benefit cards into the product row. Three classes here (0,3,0) beats the Luma rule's two
   (0,2,0) outright, regardless of stylesheet order. */
.checkout-cart-index .cart-container .form-cart {
    float: none;
    position: static;
    width: 100%;
}
.checkout-cart-index .cart-summary {
    order: 2;
    flex: 0 0 350px;
    width: 350px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    padding: 0 0 22px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
.checkout-cart-index .cbp-need-help {
    order: 3;
    flex: 0 0 350px;
    width: 350px;
    margin-left: auto;
}
@media (min-width: 851px) {
    .checkout-cart-index .cbp-need-help {
        margin-top: -22px;
    }
}

/* Column headers above the item cards */
.checkout-cart-index .cbp-cart-columns {
    display: flex;
    align-items: center;
    padding: 0 24px 10px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #999;
}
.checkout-cart-index .cbp-cart-columns__product { flex: 1 1 auto; }
.checkout-cart-index .cbp-cart-columns__qty { flex: 0 0 150px; text-align: center; }
.checkout-cart-index .cbp-cart-columns__subtotal { flex: 0 0 150px; text-align: right; padding-right: 46px; }
@media (max-width: 767px) {
    .checkout-cart-index .cbp-cart-columns { display: none; }
}

/* ---------- Cart item cards ---------- */
.checkout-cart-index .cbp-cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.checkout-cart-index .cbp-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 18px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
.checkout-cart-index .cbp-cart-item__media {
    flex: 0 0 100px;
}
.checkout-cart-index .cbp-cart-item__media .product-item-photo {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}
.checkout-cart-index .cbp-cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.checkout-cart-index .cbp-cart-item__info {
    flex: 1 1 auto;
    min-width: 0;
}
.checkout-cart-index .cbp-cart-item__info .product-item-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1A1C1C;
    line-height: 1.3;
    margin-bottom: 4px;
}
.checkout-cart-index .cbp-cart-item__info .product-item-name a {
    color: #1A1C1C;
    text-decoration: none;
}
.checkout-cart-index .cbp-cart-item__sku {
    margin: 0 0 8px;
    font-size: 13px;
    color: #999;
}
.checkout-cart-index .cbp-cart-item__info .item-options {
    margin: 0 0 8px;
    font-size: 12px;
    color: #777;
}
.checkout-cart-index .cbp-cart-item__info .item-options dt,
.checkout-cart-index .cbp-cart-item__info .item-options dd {
    display: inline;
    margin: 0;
}
.checkout-cart-index .cbp-cart-item__info .item-options dt:after { content: ": "; }
.checkout-cart-index .cbp-cart-item__info .item-options dd:after { content: "; "; }
.checkout-cart-index .cbp-cart-item__badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border: 1px solid #e31e24;
    border-radius: 4px;
    color: #e31e24;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.checkout-cart-index .cbp-cart-item__price {
    font-size: 14px;
    color: #e31e24;
    font-weight: 700;
}
.checkout-cart-index .cbp-cart-item__price .price-including-tax,
.checkout-cart-index .cbp-cart-item__price .price-excluding-tax,
.checkout-cart-index .cbp-cart-item__price .cart-price {
    color: #e31e24;
    font-weight: 700;
}
.checkout-cart-index .cbp-cart-item__price-each {
    margin-left: 6px;
    color: #999;
    font-weight: 400;
    font-size: 12px;
}

.checkout-cart-index .cbp-cart-item__controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
}
@media (min-width: 992px) {
    .checkout-cart-index .cbp-cart-item__controls {
        min-width: 300px;
        justify-content: flex-end;
    }
}

/* Qty stepper */
.checkout-cart-index .cbp-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f7f7;
    margin: 0;
}
.checkout-cart-index .cbp-qty-btn {
    width: 30px;
    height: 30px;
    line-height: 28px;
    border: none;
    background: transparent;
    color: #1A1C1C;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.checkout-cart-index .cbp-qty-btn:hover { background: #ececec; }
.checkout-cart-index .cbp-qty-input {
    width: 34px;
    height: 30px;
    border: none;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    background: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1A1C1C;
    padding: 0;
    -moz-appearance: textfield;
}
.checkout-cart-index .cbp-qty-input::-webkit-outer-spin-button,
.checkout-cart-index .cbp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.checkout-cart-index .cbp-cart-item__subtotal {
    font-size: 16px;
    font-weight: 700;
    color: #1A1C1C;
    min-width: 80px;
    text-align: right;
}
.checkout-cart-index .cbp-cart-item__subtotal .price { color: #1A1C1C; }

.checkout-cart-index .cbp-cart-item__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkout-cart-index .cbp-cart-item__actions .action-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #eee;
    border-radius: 6px;
    color: #c81b20;
    text-decoration: none;
    font-size: 15px;
}
.checkout-cart-index .cbp-cart-item__actions .action-delete:hover {
    background: #fdeceb;
    border-color: #f3c8c6;
}
.checkout-cart-index .cbp-cart-item__actions .action-edit,
.checkout-cart-index .cbp-cart-item__actions .action-towishlist {
    order: -1;
    font-size: 11px;
    color: #999;
    text-decoration: underline;
    white-space: nowrap;
}

.checkout-cart-index .cbp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Cart bottom actions ---------- */
.checkout-cart-index .cbp-cart-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
/* The theme's own compiled cart CSS ships several fairly specific rules
   (".cart-container .cart.main.actions .action", "button, .cart-container .action.continue,
   a.action.primary...") targeting these same classes with their own !important colors - left
   over from styling the default Magento cart markup. Matching !important alone isn't enough
   since those rules win ties on source order; the class is repeated (.cbp-btn-x.cbp-btn-x) to
   push specificity strictly above them regardless of stylesheet order. */
.checkout-cart-index .cbp-btn-continue.cbp-btn-continue {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: none !important;
    border: none !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-transform: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.checkout-cart-index .cbp-btn-continue.cbp-btn-continue:hover { color: #1A1C1C !important; }
/* Same leftover-Luma-CSS problem as the float fix above, but for the icon font: stock Luma
   gives ".cart-container .form-cart .action.continue/.action.update" a 32px ":before" glyph
   (its own "icons-blank-theme" font, e.g. content:'\e617') plus a stray "padding-left:5px" on
   .action.update - neither carries !important, but neither did the redesign's buttons touch
   :before before now, so that oversized legacy glyph was still rendering next to our real
   FontAwesome icon/text, which is what made these buttons look broken. */
.checkout-cart-index .cart-container .form-cart .action.continue:before,
.checkout-cart-index .cart-container .form-cart .action.update:before,
.checkout-cart-index .cart-container .form-cart .action.clear:before {
    content: none !important;
    display: none !important;
}
.checkout-cart-index .cart-container .form-cart .action.update,
.checkout-cart-index .cart-container .form-cart .action.clear {
    padding-left: 0;
}
.checkout-cart-index .cbp-cart-actions > div:last-child,
.checkout-cart-index .cbp-btn-update,
.checkout-cart-index .cbp-btn-clear {
    display: inline-flex;
    align-items: center;
}
.checkout-cart-index .cbp-btn-update.cbp-btn-update,
.checkout-cart-index .cbp-btn-clear.cbp-btn-clear {
    margin-left: 12px;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: #1A1C1C !important;
    box-shadow: none !important;
    cursor: pointer;
}
.checkout-cart-index .cbp-btn-update.cbp-btn-update:hover { border-color: #1A1C1C !important; }
.checkout-cart-index .cbp-btn-clear.cbp-btn-clear { color: #c81b20 !important; border-color: #f3c8c6 !important; }

/* ---------- Lower benefit cards ---------- */
.checkout-cart-index .cbp-cart-benefits {
    display: flex;
    gap: 18px;
    margin-top: 24px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
.checkout-cart-index .cbp-cart-benefits__card {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 16px 18px;
}
.checkout-cart-index .cbp-cart-benefits__card > i {
    flex: 0 0 auto;
    font-size: 20px;
    color: #e31e24;
}
.checkout-cart-index .cbp-cart-benefits__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #1A1C1C;
}
.checkout-cart-index .cbp-cart-benefits__sub {
    margin: 0;
    font-size: 12px;
    color: #999;
}

/* ---------- Order Summary card ---------- */
/* text-transform: none !important beats yttheme.css's ".cart-container .cart-summary .summary.title"
   (equal specificity, so normally whichever rule loads last on the page would win) - the reference
   design shows "Order Summary" in title case, not uppercase. */
.checkout-cart-index .cart-summary .summary.title {
    display: block;
    background: #e31e24;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    padding: 16px 22px;
    margin: 0 0 18px;
    text-transform: none !important;
}

/* Hide the "Estimate Shipping and Tax" widget - not part of this design; the quote's
   already-calculated shipping/tax still feed the totals table below untouched. */
.checkout-cart-index #block-shipping {
    display: none !important;
}

.checkout-cart-index #cart-totals {
    padding: 0 22px;
}
.checkout-cart-index #cart-totals .table-wrapper { margin: 0; }
/* table.totals stays display:table while its <tr> rows are forced to display:flex below - that
   mismatch (table > flex-row, with the browser still expecting table-row-group children) makes
   Chrome miscalculate the table's own rendered height, so it can end up shorter than its visible
   rows and the promo/coupon block right after it (.cbp-promo) renders overlapping the totals
   instead of below them. Making the whole hierarchy non-table (table/tbody/tfoot all block, only
   the rows are flex) avoids the mixed layout mode that causes it. */
.checkout-cart-index #cart-totals table.totals {
    display: block;
    width: 100%;
    border-collapse: collapse;
}
.checkout-cart-index #cart-totals table.totals tbody,
.checkout-cart-index #cart-totals table.totals tfoot {
    display: block;
}
.checkout-cart-index #cart-totals table.totals .table-caption { display: none; }
.checkout-cart-index #cart-totals table.totals tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.checkout-cart-index #cart-totals table.totals th,
.checkout-cart-index #cart-totals table.totals td {
    display: block;
    border: none;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 400;
    color: #1A1C1C;
    text-align: left;
}
.checkout-cart-index #cart-totals table.totals td { text-align: right; }
.checkout-cart-index #cart-totals .cbp-totals-count {
    color: #999;
    font-size: 12px;
    margin-left: 4px;
}
.checkout-cart-index #cart-totals .cbp-free-shipping {
    color: #17a35a;
    font-weight: 700;
}
.checkout-cart-index #cart-totals tr.grand.totals {
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 12px;
}
.checkout-cart-index #cart-totals tr.grand.totals th,
.checkout-cart-index #cart-totals tr.grand.totals td {
    padding-top: 12px;
    font-size: 19px;
    font-weight: 800;
}
.checkout-cart-index #cart-totals tr.grand.totals th strong,
.checkout-cart-index #cart-totals tr.grand.totals td strong {
    color: #e31e24;
    font-weight: 800;
}

/* Promo code */
/* The base theme's collapsible-block CSS (".cart-summary .block > .content") hides this
   panel by default and only shows it via the "collapsible" JS widget toggling an ".active"
   class - our coupon.phtml is deliberately always-open (no accordion), so force it visible. */
.checkout-cart-index .cart-summary .cbp-promo.block > .content,
.checkout-cart-index .cart-summary .cbp-promo .content {
    display: block !important;
}
.checkout-cart-index .cbp-promo {
    padding: 18px 22px 4px;
    border-top: 1px solid #eee;
    margin-top: 6px;
}
.checkout-cart-index .cbp-promo__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 8px;
}
.checkout-cart-index .cbp-promo__row {
    display: flex;
    gap: 10px;
}
.checkout-cart-index .cbp-promo__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 13px;
}
.checkout-cart-index .cbp-promo__actions { flex: 0 0 auto; }
.checkout-cart-index .cbp-promo__apply {
    height: 44px;
    padding: 0 22px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
    color: #1A1C1C;
    font-size: 13px;
    font-weight: 600;
    text-transform: none !important;
    cursor: pointer;
}
.checkout-cart-index .cbp-promo__apply:hover { background: #f5f5f5; border-color: #ccc; }
.checkout-cart-index .fieldset.coupon.applied .cbp-promo__input { background: #f5f5f5; color: #999; }

/* Checkout button */
.checkout-cart-index .checkout-methods-items {
    list-style: none;
    margin: 20px 22px 0;
    padding: 0;
    width: calc(100% - 44px);
}
.checkout-cart-index .checkout-methods-items .item + .item { margin-top: 10px; }
.checkout-cart-index .cbp-btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    background: #e31e24;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: none !important;
    cursor: pointer;
}
.checkout-cart-index .cbp-btn-checkout:hover { background: #c81b20; }
.checkout-cart-index .cbp-btn-checkout .fa { font-size: 15px; }

/* Secure payments */
.checkout-cart-index .cbp-secure-payments {
    margin: 18px 22px 0;
    padding-top: 16px;
    border-top: 1px solid #eee;
    text-align: center;
}
.checkout-cart-index .cbp-secure-payments__label {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #999;
}
.checkout-cart-index .cbp-secure-payments__icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.checkout-cart-index .cbp-secure-payments__icons img {
    height: 22px;
    width: auto;
}
.checkout-cart-index .cbp-payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 9px;
    background: #f5f5f5;
    border: 1px solid #ececec;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #555;
    letter-spacing: .02em;
}
.checkout-cart-index .cbp-secure-payments__ssl {
    margin: 0;
    font-size: 12px;
    color: #999;
}
.checkout-cart-index .cbp-secure-payments__ssl .fa { margin-right: 5px; }

/* ---------- Need Help box ---------- */
.checkout-cart-index .cbp-need-help {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    padding: 20px 22px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
.checkout-cart-index .cbp-need-help__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fdeceb;
    color: #e31e24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.checkout-cart-index .cbp-need-help__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #1A1C1C;
}
.checkout-cart-index .cbp-need-help__phone,
.checkout-cart-index .cbp-need-help__hours {
    margin: 0;
    font-size: 12px;
    color: #999;
}

/* ---------- "Sign Up For Newsletter" band ---------- */
/* Same rules as .cbp-newsletter in home-redesign.css (that file isn't loaded on this page) -
   kept here instead of pulling in the rest of that homepage-only stylesheet, consistent with
   this file's own "scoped to .checkout-cart-index" approach. Markup/block/template are the
   real Magento_Newsletter\Block\Subscribe form, reused as-is via checkout_cart_index.xml. */
.checkout-cart-index .cbp-newsletter {
    background: #111;
    padding: 80px 15px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}
.checkout-cart-index .cbp-newsletter__card {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    padding: 50px;
    text-align: center;
}
.checkout-cart-index .cbp-newsletter__card h2 { font-size: 30px; font-weight: 800; margin: 0 0 10px; }
.checkout-cart-index .cbp-newsletter__card p { font-size: 15px; color: #777; margin: 0 0 28px; }
.checkout-cart-index .cbp-newsletter__form { display: flex; gap: 14px; flex-wrap: wrap; }
.checkout-cart-index .cbp-newsletter__form input {
    flex: 1 1 200px;
    height: 52px;
    border: 1px solid #ddd;
    padding: 0 16px;
    font-size: 14px;
}
.checkout-cart-index .cbp-newsletter__form button {
    flex: 0 0 auto;
    height: 52px;
    background: #e31e24;
    color: #fff;
    border: none;
    padding: 0 34px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
}
@media (max-width: 767px) {
    .checkout-cart-index .cbp-newsletter__card { padding: 24px; }
}

/* ---------- Responsive ---------- */
/* Order Summary/Need Help only drop to full-width stacking below 850px - genuinely narrow
   (tablet-portrait-ish) viewports - not at 991px, which a maximized laptop with OS display
   scaling (e.g. a common 1366px screen at 125-150% scaling) can land right underneath,
   incorrectly stacking the sidebar even though the design is meant to read as "desktop" there. */
@media (max-width: 850px) {
    .checkout-cart-index .cart-summary,
    .checkout-cart-index .cbp-need-help {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 991px) {
    .checkout-cart-index .cbp-cart-benefits { flex-wrap: wrap; }
    .checkout-cart-index .cbp-cart-benefits__card { flex: 1 1 45%; }
}
@media (max-width: 767px) {
    .checkout-cart-index .cbp-cart-item { flex-wrap: wrap; }
    .checkout-cart-index .cbp-cart-item__controls {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid #f0f0f0;
    }
    .checkout-cart-index .cbp-cart-actions { flex-wrap: wrap; gap: 12px; }
    .checkout-cart-index .cbp-cart-actions > div:last-child { width: 100%; display: flex; }
    .checkout-cart-index .cbp-btn-update,
    .checkout-cart-index .cbp-btn-clear { flex: 1 1 auto; justify-content: center; margin-left: 0; }
    .checkout-cart-index .cbp-btn-update + .cbp-btn-clear,
    .checkout-cart-index .cbp-btn-clear + .cbp-btn-update { margin-left: 10px; }
    .checkout-cart-index .cbp-cart-benefits { flex-direction: column; }
    .checkout-cart-index .page-title-wrapper .page-title { font-size: 26px; }
}
