/**
 * WooCommerce /cart/ page — two-column layout matching the shopping-cart mockups.
 * Units: px only.
 */

body.woocommerce-cart.sb-cart-page-layout,
body.woocommerce-cart.sb-cart-page-layout .fl-page,
body.woocommerce-cart.sb-cart-page-layout .fl-page-content,
body.woocommerce-cart.sb-cart-page-layout .fl-content,
#sb-cart-page {
	/*
	 * The v3 package's `--background: 220 20% 97%` is rgb(246,247,249). This
	 * rule out-specifies the app-wide ground in site-header.css (0,2,1 against
	 * 0,1,1), so the value has to be right here too.
	 */
	background: #f6f7f9;
}

/*
 * The Beaver Builder row/container around the cart caps at 1100px, so the
 * design's 1152 shell could never be reached from inside: the content column
 * measured 1068 against the design's 1120 and sat 26px to the right. Release
 * every wrapper between the page and #sb-cart-page, then centre the shell
 * itself at 1152 below.
 */
body.woocommerce-cart.sb-cart-page-layout .fl-content,
body.woocommerce-cart.sb-cart-page-layout .fl-content-full,
body.woocommerce-cart.sb-cart-page-layout .fl-post-content,
body.woocommerce-cart.sb-cart-page-layout .fl-page-content .container,
body.woocommerce-cart.sb-cart-page-layout .fl-page-content .row,
body.woocommerce-cart.sb-cart-page-layout .woocommerce {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body.woocommerce-cart.sb-cart-page-layout.sb-popup-cart-open {
	overflow: visible;
	overscroll-behavior: auto;
}

#sb-cart-page {
	display: block;
	width: 100%;
	/*
	 * v3 shell: max-w-[1440px] with a 24px gutter (px-6), so content is 1392.
	 * v2 had 1152/16px; every app surface widened in v3.
	 */
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	/* Design: px-6 py-8. */
	padding: 32px 24px 32px;
	/* This is the element that actually paints the content area, so the page
	   ground has to be right here too: v3 `--background` is rgb(246,247,249). */
	background: #f6f7f9;
	font-family: Inter, system-ui, sans-serif;
	color: #141d2e;
	box-sizing: border-box;
}

#sb-cart-page,
#sb-cart-page button,
#sb-cart-page input,
#sb-cart-page select,
#sb-cart-page textarea,
#sb-cart-page a,
#sb-cart-page p,
#sb-cart-page span,
#sb-cart-page strong,
#sb-cart-page em,
#sb-cart-page li,
#sb-cart-page label {
	font-family: Inter, system-ui, sans-serif;
}

#sb-cart-page strong,
#sb-cart-page b {
	color: #141d2e;
	font-weight: 600;
}

#sb-cart-page h1,
#sb-cart-page h2,
#sb-cart-page h3,
#sb-cart-page .sb-cart-page__title,
#sb-cart-page .sb-cart-page__items-title,
#sb-cart-page p.sb-cart-page__item-name,
#sb-cart-page .sb-popup-rec__title,
#sb-cart-page .sb-popup-rec__card-title,
#sb-cart-page .sb-cart-page__express-label {
	font-family: Inter, system-ui, sans-serif;
}

body.woocommerce-cart.sb-cart-page-layout .sb-popup-cart.sb-cart-page {
	position: relative;
	inset: auto;
	z-index: 1;
	display: block;
	padding: 0;
	max-width: none;
	align-items: stretch;
	justify-content: flex-start;
	background: transparent;
}

#sb-cart-page a:focus,
#sb-cart-page a:focus-visible,
#sb-cart-page a:active,
#sb-cart-page button:focus,
#sb-cart-page button:focus-visible,
#sb-cart-page button:active,
#sb-cart-page input:focus,
#sb-cart-page input:focus-visible {
	outline: 0;
	box-shadow: none;
}

.sb-cart-page__inner {
	width: 100%;
	/* The 1152 cap lives on #sb-cart-page now, gutter included. */
	max-width: none;
	margin: 0 auto;
}

.sb-cart-page__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.sb-cart-page__title {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	color: #141d2e;
}

/* The design draws this as an outline badge, not a filled one: 10px/600 ink
 * on the page ground inside a hairline. */
.sb-cart-page__pill {
	display: inline-flex;
	align-items: center;
	height: 21px;
	padding: 2px 10px;
	border: 1px solid #dbdfe6;
	border-radius: 999px;
	background: transparent;
	color: #141d2e;
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	box-sizing: border-box;
}

/* The line count is a muted, regular-weight aside inside the heading. */
.sb-cart-page__items-title .sb-cart-page__items-count {
	font-weight: 400;
	color: #647690;
}

.sb-cart-page .sb-popup-cart__header-spinner {
	position: absolute;
	top: 8px;
	right: 8px;
}

.sb-cart-page__grid {
	display: grid;
	/*
	 * The design's rail is a fixed 340px beside a 748px column with a 32px
	 * gutter, not a ratio: the fr pair rendered 728 / 364 at 1440.
	 */
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 32px;
	align-items: start;
}

/* --- Cart items (image 8) --- */

.sb-cart-page__items-card {
	padding: 0;
	background: transparent;
	overflow: hidden;
}

.sb-cart-page__items-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0px 0px 10px;
}

.sb-cart-page__items-title {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	/* Design: text-lg is 18px/28px. */
	line-height: 28px;
	color: #141d2e;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__count {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.sb-cart-page__empty-btn,
.sb-cart-page__empty-btn:hover,
.sb-cart-page__empty-btn:focus,
.sb-cart-page__empty-btn:focus-visible,
.sb-cart-page__empty-btn:active {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	/* Design: navy, 12px/600 in a 16px line box ("Empty Cart"). */
	color: #07038c;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	outline: 0;
}

.sb-cart-page__empty-btn:hover,
.sb-cart-page__empty-btn:focus-visible {
	color: #07038c;
	text-decoration: underline;
	background: transparent;
}

.sb-cart-page.is-empty .sb-cart-page__empty-btn,
.sb-cart-page.is-empty .sb-cart-page__note {
	display: none;
}

/*
 * Measured against the design at 1440: the items container is `rounded-md`
 * (6px), not 8, in both states -- and when the cart is empty the design fills
 * it `bg-muted/50` where live left it transparent.
 */
.sb-cart-page .sb-popup-cart__items {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
}

.sb-cart-page.is-empty .sb-popup-cart__items {
	background: #edeff280;
}

.sb-cart-page .sb-popup-cart__empty {
	margin: 0;
	padding: 16px 20px 24px;
	color: #647690;
	font-size: 14px;
	line-height: 22px;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__item.sb-cart-page__item {
	display: grid;
	/* v3's cart row is `md:grid-cols-[1fr_240px]`; measured design 240, live 220. */
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #dbdfe6;
	border-radius: 0;
	background: transparent;
}

.sb-cart-page__item-info {
	/* v3: both cells of the row are `px-3.5 py-3`. */
	padding: 12px 14px;
}

.sb-cart-page__item-name {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #141d2e;
}

.sb-cart-page__item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0px 0 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #647690;
}

.sb-cart-page__item-meta em {
	font-style: normal;
	font-weight: 400;
	color: #647690;
}

.sb-cart-page__item-meta strong {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	color: #141d2e;
}

.sb-cart-page__item-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	/* C1R19-4: the design's row is `mt-2` = 8px; this was 10. */
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 18px;
}

.sb-cart-page__item-status.is-stock {
	color: #80d52a;
}

.sb-cart-page__stock-label {
	color: #80d52a;
	font-weight: 600;
}

.sb-cart-page__status-copy {
	color: #647690;
	font-weight: 400;
}

.sb-cart-page__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: transparent;
	color: #80d52a;
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
}

.sb-cart-page__lead-pill {
	display: inline-flex;
	align-items: center;
	/*
	 * AC7-1: "Orange is reserved for calls to action; non-CTA accents are navy
	 * or muted." This pill is a STATUS LABEL, and #eb743d is byte-identical to
	 * the fill on "Proceed to Checkout" and "Apply" on the same page -- three
	 * controls and one label sharing one colour.
	 *
	 * The design uses a separate token for it: `bg-warning/15` on
	 * `text-warning-foreground`, at 10px/600 in a 6px radius, not 12px/700 in a
	 * pill. Censused on the design's own cart.html: exactly three orange-filled
	 * boxes, all of them controls.
	 */
	/*
	 * C1R17-1. Round sixteen took the colour token and left the box wrong.
	 * The design's markup is `px-1.5 py-0.5 rounded text-[10px] font-semibold`:
	 * Tailwind `rounded` is 4px (it is `rounded-md` that is 6px) and `px-1.5`
	 * is 6px, and the pill measures 65.3x19 against the 69.3x22 those wrong
	 * values produced. The text itself measures 53.3px on both sides, so the
	 * delta was padding and leading, not font rendering.
	 */
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(240, 204, 0, 0.15);
	color: #05025a;
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
}

.sb-cart-page__item-price {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* The design separates the qty row from the price grid with `mb-2`. */
	gap: 8px;
	padding: 12px 14px;
	border-left: 1px solid #dbdfe6;
	background: #edeff299;
	text-align: left;
}

.sb-cart-page__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	font-size: 12px;
	line-height: 18px;
	color: #647690;
}

.sb-cart-page__price-row strong {
	font-family: Inter, system-ui, sans-serif;
	color: #141d2e;
	font-weight: 600;
}

.sb-cart-page__price-row--total {
	padding-top: 8px;
	border-top: 1px solid #dbdfe6;
	color: #141d2e;
	font-weight: 600;
}

.sb-cart-page__price-row--total strong {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #141d2e;
}

/*
 * v3 cart line price block: a quantity row with the stepper pushed right, then
 * a two-column grid above a rule -- Unit Price left, Total Price right.
 */
.sb-cart-page__qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	font-size: 12px;
	line-height: 18px;
	color: #647690;
}

.sb-cart-page__price-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
	padding-top: 8px;
	border-top: 1px solid #dbdfe6;
}

.sb-cart-page__price-cell--total {
	text-align: right;
}

.sb-cart-page__price-label {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: #647690;
}

.sb-cart-page__price-value {
	margin: 2px 0 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	color: #141d2e;
}

.sb-cart-page__price-value--total {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

/*
 * The design's row stepper is 92x28: two 28px buttons either side of a 36px
 * value, drawn on the page ground rather than a grey fill.
 */
.sb-cart-page__qty-ctrl {
	display: inline-flex;
	align-items: center;
	height: 28px;
	border: 1px solid #dbdfe6;
	border-radius: 4px;
	overflow: hidden;
	background: transparent;
	box-sizing: border-box;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-cart-page__qty-ctrl .sb-popup-cart__qty {
	height: 26px;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-cart-page__qty-ctrl .sb-popup-cart__qty-btn {
	width: 26px;
	height: 26px;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-cart-page__qty-ctrl .sb-popup-cart__qty-value {
	width: 36px;
	height: 26px;
	border-left: 1px solid #dbdfe6;
	border-right: 1px solid #dbdfe6;
	box-sizing: border-box;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn,
body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #141d2e;
	line-height: 1;
	text-align: center;
	box-sizing: border-box;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn--plus {
	font-size: 16px;
	font-weight: 500;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn:hover,
body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn:focus,
body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn:focus-visible {
	background: transparent;
	outline: 0;
	box-shadow: none;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-value {
	border-left: 1px solid #dbdfe6;
	border-right: 1px solid #dbdfe6;
	font-weight: 600;
	font-family: Inter, system-ui, sans-serif;
}

/*
 * THE TRASH GLYPH IS MUTED GREY, NOT DESTRUCTIVE RED.
 *
 * Measured on html/cart.html: the trash at this position computes
 * rgb(100,118,144) -- --muted-foreground. Live computed rgb(220,38,38).
 *
 * #dc2626 is Tailwind's red-600 and is in none of this design's tokens; the
 * only other place this file uses it is the genuine error state on the promo
 * and quick-add messages, which is what it is for. On four cart lines at once
 * it read as an error badge against the row.
 *
 * Note the button itself was already correct at rgb(20,29,46) -- the red was on
 * the inner span, so matched.py on the BUTTON reported an innocent colour. The
 * svg inherits from here.
 */
.sb-cart-page__qty-trash {
	display: none;
	align-items: center;
	justify-content: center;
	color: #647690;
}

.sb-cart-page__qty-minus {
	display: inline;
}

/* Design paints the remove glyph in ink, not destructive red, at qty 1. */
body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn--minus.is-trash {
	color: #141d2e;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn--minus.is-trash .sb-cart-page__qty-minus {
	display: none;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__qty-btn--minus.is-trash .sb-cart-page__qty-trash {
	display: inline-flex;
}

/*
 * Design: bg rgba(237,239,242,.5) with a 1px rgba(219,223,230,.6) outline and a
 * 6px radius, padded 16. Live had the fill and no border at all, at 8px.
 */
.sb-cart-page__note {
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid rgba(219, 223, 230, 0.6);
	border-radius: 6px;
	background: #edeff280;
}

.sb-cart-page__note h3 {
	margin: 0 0 6px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #141d2e;
}

.sb-cart-page__note p {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: #647690;
}

.sb-cart-page .sb-popup-cart__recommendations-wrap {
	margin-top: 28px;
}

/* --- Quick Add + Express Order (image 9) --- */

/*
 * Quick Add and Express Order sit directly on the page background in the
 * design -- their headings are flush with the 160px content edge and the only
 * rule on the page is the hairline above "Express Order". Wrapping them in a
 * bordered card indented both headings by 47px and narrowed the two Express
 * tiles enough to wrap their subtitles.
 */
.sb-cart-page__tools {
	margin-top: 32px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.sb-cart-page__quick,
.sb-cart-page__express {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.sb-cart-page__express {
	/* Design: mt-8 / pt-6. Live was 28/22, which cost 6px of the 171-tall block. */
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #dbdfe6;
}

/*
 * Two sizes, not one: the design sets the main-column section headings (Quick
 * Add, Express Order, Cart Items) at text-lg 18px/28px and the rail cards
 * (Payment Summary, Promo Code, Shop With Confidence, Question? We Can Help)
 * at text-base 16px/24px. One shared 16px/22px rule was a size and a
 * line-height out on both.
 */
.sb-cart-page__summary h2,
.sb-cart-page__promo h2,
.sb-cart-page__retrieve h2,
.sb-cart-page__trust h2,
.sb-cart-page__help h2,
.sb-cart-page__trust h3,
.sb-cart-page__help h3 {
	margin: 0 0 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #141d2e;
}

.sb-cart-page__quick h2,
.sb-cart-page__express h2 {
	margin: 0 0 4px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: #141d2e;
}

.sb-cart-page__quick-help,
.sb-cart-page__express-help {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 20px;
	color: #647690;
}

.sb-cart-page__quick-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-cart-page__quick-row {
	/*
	 * Design: `grid-cols-[1fr_100px_32px]` with `gap-3`. As a flex row the lot
	 * field took the slack (878 against 864) and the qty box was squeezed to 90
	 * against 100 -- and at 375 the 32px remove control dropped out of the row
	 * entirely, where the design keeps it (187 / 100 / 32).
	 */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 100px 32px;
	gap: 12px;
	align-items: end;
}

.sb-cart-page__quick-row label:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-cart-page__quick-row label:nth-child(2) {
	/*
	 * Was `width: 90px; flex: 0 0 90px` from when this row was a flex box. The
	 * row is a grid now and the column is already 100px, so the pin left the
	 * control 10px short of its own track and 22px clear of the remove button
	 * where the design has 12.
	 */
	width: 100%;
}

.sb-cart-page__quick-row label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #647690;
}

.sb-cart-page__quick-row input,
.sb-cart-page__promo-row input {
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
	background: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #141d2e;
	box-sizing: border-box;
}

.sb-cart-page__quick-remove,
.sb-cart-page__quick-remove:hover,
.sb-cart-page__quick-remove:focus,
.sb-cart-page__quick-remove:focus-visible {
	height: 40px;
	width: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	font-size: 18px;
	line-height: 40px;
	outline: 0;
	box-shadow: none;
}

.fl-page .sb-cart-page__quick-remove,
.fl-page .sb-cart-page__quick-remove:hover,
.fl-page .sb-cart-page__quick-remove:focus,
.fl-page .sb-cart-page__quick-remove:focus-visible {
	font-size: 18px;
	line-height: 40px;
}

/* -------------------------------------------------------------------------
 * The cart's notice wrapper, once it could be seen
 *
 * Round two narrowed the `display:none` that hid it, which put a live element
 * where an invisible one had been: it sits in a Beaver Builder module that the
 * `#fl-main-content` release sets to `width:100%; padding:0`, so at 1600 the
 * notice measured [0, 95, 1600, 152] while #sb-cart-page is x=80 w=1440 with a
 * 24px gutter -- its text ran ~89px left of everything else on the page.
 * Give it the shell's own box.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart.sb-cart-page-layout .woocommerce-notices-wrapper {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	/* see the <=640 rule at the end of this file: the shell drops to 16px */
	padding-right: 24px;
	box-sizing: border-box;
}

.sb-cart-page__quick-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.sb-cart-page__link-btn,
.sb-cart-page__link-btn:hover,
.sb-cart-page__link-btn:focus,
.sb-cart-page__link-btn:focus-visible,
.sb-cart-page__link-btn:active {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	/* Design: navy, 12px/600 in a 16px line box ("Add More Rows"). */
	color: #07038c;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	cursor: pointer;
	text-decoration: none;
	outline: 0;
	box-shadow: none;
}

.sb-cart-page__link-btn:hover,
.sb-cart-page__link-btn:focus-visible {
	text-decoration: underline;
	background: transparent;
	color: #07038c;
}

.sb-cart-page__quick-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 0 auto;
}

.sb-cart-page__quick-msg,
.sb-cart-page__promo-msg {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: #15803d;
}

.sb-cart-page__quick-msg.is-error,
.sb-cart-page__promo-msg.is-error {
	color: #dc2626;
}

.sb-cart-page__inline-link,
.sb-cart-page__quick-msg a,
.sb-cart-page__quick-msg .sb-popup-cart__quote-btn,
#sb-cart-page .sb-cart-page__inline-link.sb-popup-cart__quote-btn {
	display: inline;
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #07038c;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}

.sb-cart-page__inline-link:hover,
.sb-cart-page__quick-msg a:hover,
.sb-cart-page__quick-msg .sb-popup-cart__quote-btn:hover {
	text-decoration: underline;
	background: transparent;
	color: #07038c;
}

.sb-cart-page__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* The design's rail buttons are 40px with an 8px/16px box, set in 600. */
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 6px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.sb-cart-page__btn--ghost {
	border: 1px solid #dbdfe6;
	background: #f6f7f9;
	color: #141d2e;
}

.sb-cart-page__btn--ghost:hover,
.sb-cart-page__btn--ghost:focus,
.sb-cart-page__btn--ghost:focus-visible {
	background: #eb743d;
	border-color: #eb743d;
	color: #fff;
	outline: 0;
	text-decoration: none;
}

.sb-cart-page__btn--navy {
	border: 1px solid #07038c;
	background: #07038c;
	color: #fff;
}

.sb-cart-page__btn--navy:hover,
.sb-cart-page__btn--navy:focus-visible {
	background: #050274;
	border-color: #050274;
	color: #fff;
	outline: 0;
}

.sb-cart-page__btn--orange {
	border: 0;
	background: #eb743d;
	color: #fff;
}

.sb-cart-page__btn--orange:hover,
.sb-cart-page__btn--orange:focus-visible {
	background: #d86532;
	border-color: #d86532;
	color: #fff;
	outline: 0;
	text-decoration: none;
}

.sb-cart-page__btn--outline {
	border: 1px solid #dbdfe6;
	background: transparent;
	color: #141d2e;
}

.sb-cart-page__btn--outline:hover,
.sb-cart-page__btn--outline:focus-visible {
	background: #eb743d;
	border-color: #eb743d;
	color: #fff;
	outline: 0;
	text-decoration: none;
}

.sb-cart-page__btn--outline:hover .sb-cart-page__quote-icon,
.sb-cart-page__btn--outline:focus-visible .sb-cart-page__quote-icon {
	color: #fff;
}

.sb-cart-page__btn.is-loading {
	pointer-events: none;
	opacity: 0.9;
}

.sb-cart-page__btn .sb-popup-cart__spinner-svg {
	display: block;
	animation: sb-cart-spin 0.7s linear infinite;
}

@keyframes sb-cart-spin {
	to {
		transform: rotate(360deg);
	}
}

.sb-cart-page__btn--sm {
	min-height: 40px;
	padding: 8px 14px;
}

.sb-cart-page__quote-icon {
	display: inline-flex;
	color: #141d2e;
}

.sb-cart-page__express-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sb-cart-page__express-card,
.sb-cart-page__express-card.sb-popup-cart__quote-btn,
a.sb-cart-page__express-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: Inter, system-ui, sans-serif;
	box-sizing: border-box;
}

.sb-cart-page__express-card:hover,
.sb-cart-page__express-card:focus,
.sb-cart-page__express-card:focus-visible,
.sb-cart-page__express-card.sb-popup-cart__quote-btn:hover,
.sb-cart-page__express-card.sb-popup-cart__quote-btn:focus-visible {
	border-color: #eb743d;
	background: transparent;
	outline: 0;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
}

.sb-cart-page__express-card.is-disabled,
.sb-cart-page__express-card:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.sb-cart-page__express-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 8px;
	background: #f3f4f6;
	color: #6b7280;
}

.sb-cart-page__express-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sb-cart-page__express-label {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #141d2e;
}

.sb-cart-page__express-copy {
	font-size: 12px;
	line-height: 18px;
	color: #647690;
}

.sb-cart-page__express-card--file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.sb-cart-page__aside {
	position: sticky;
	top: 24px;
}

/* --- Payment summary + promo (image 6) --- */

/* -------------------------------------------------------------------------
 * Empty-cart rail: Retrieve a Quote
 *
 * Same shell as the Payment Summary card it replaces -- bordered box, tinted
 * header strip, 16px body -- so the two states read as one component.
 * ---------------------------------------------------------------------- */

.sb-cart-page__retrieve {
	margin-top: 0;
	padding: 0;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	background: transparent;
	overflow: hidden;
}

.sb-cart-page__retrieve h2 {
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid #dbdfe6;
	background: #edeff299;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: #141d2e;
}

.sb-cart-page__retrieve-body {
	padding: 16px;
}

.sb-cart-page__retrieve-body > p {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 20px;
	color: #647690;
}

.sb-cart-page__retrieve-body label {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: #141d2e;
}

.sb-cart-page__retrieve-body input[type="text"] {
	display: block;
	width: 100%;
	height: 36px;
	margin: 4px 0 12px;
	padding: 0 12px;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
	/* Design fills these with the page ground, not white. */
	background: #f6f7f9;
	font-size: 14px;
	line-height: 20px;
	color: #141d2e;
}

.sb-cart-page__retrieve-body input[type="text"]:last-of-type {
	margin-bottom: 16px;
}

.sb-cart-page__retrieve-body input[type="text"]::placeholder {
	color: #647690;
}

.sb-cart-page__summary,
.sb-cart-page__promo,
.sb-cart-page__reassurance {
	margin-top: 16px;
	padding: 0;
	border: 1px solid #dbdfe6;
	/* The design's rail cards are rounded-md, not rounded-lg. */
	border-radius: 6px;
	background: transparent;
	overflow: hidden;
}

.sb-cart-page__summary {
	margin-top: 0;
}

.sb-cart-page__summary h2 {
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid #dbdfe6;
	background: #edeff299;
}

.sb-cart-page__promo {
	background: #edeff266;
}

/*
 * The control heights ARE the design's; the card inset is not, and three
 * attempts at it have each made the card taller (96 -> 124 against a design of
 * 94). Adding `padding:16` to the card stacks on top of the children's own
 * insets rather than replacing them, and stripping the children's insets needs
 * the design's DOM compared node by node, not another CSS guess. Left as-is
 * and recorded -- see the register.
 */
.sb-cart-page__promo .sb-cart-page__promo-row input,
.sb-cart-page__promo .sb-cart-page__btn {
	height: 36px;
	min-height: 36px;
}

.sb-cart-page__promo h2 {
	padding: 14px 20px 0;
	margin: 0;
	border-bottom: 0;
	background: transparent;
}

.sb-cart-page__summary-row,
.sb-cart-page__summary-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	line-height: 20px;
	color: #647690;
}

.sb-cart-page__summary-row--subtotal,
.sb-cart-page__summary-row--subtotal span,
.sb-cart-page__summary-row--subtotal .sb-popup-cart__subtotal {
	color: #141d2e;
	font-weight: 600;
}

.sb-cart-page__summary-row--subtotal {
	padding-bottom: 12px;
	border-bottom: 1px solid #dbdfe6;
}

.sb-cart-page__summary-row--muted,
.sb-cart-page__summary-row--muted span {
	color: #647690;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

/* Shipping carries a real figure, so the design sets its value in the ink. */
.sb-cart-page__summary-row--muted span + span {
	color: #141d2e;
}

.sb-cart-page__summary-row--muted {
	padding-top: 12px;
}

.sb-cart-page__summary-row--muted + .sb-cart-page__summary-row--muted {
	padding: 8px 0 12px;
	border-bottom: 1px solid #dbdfe6;
}

.sb-cart-page__summary-row--muted + .sb-cart-page__summary-row--muted span + span {
	color: #647690;
}

.sb-cart-page__summary-total {
	margin-top: 0;
	margin-bottom: 16px;
	padding-top: 12px;
	border-top: 0;
	color: #141d2e;
	align-items: baseline;
}

.sb-cart-page__summary-count {
	color: #647690;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}

.sb-cart-page__summary-amount {
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #141d2e;
}

body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__subtotal,
body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__subtotal * {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #141d2e;
	background: transparent;
}

.sb-cart-page .sb-popup-cart__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding: 0 16px;
}

.sb-cart-page__summary .sb-popup-cart__totals-wrap {
	padding: 16px 16px 0;
}

.sb-cart-page .sb-popup-cart__actions .sb-cart-page__btn {
	width: 100%;
}

#sb-cart-page a.sb-cart-page__continue,
#sb-cart-page a.sb-cart-page__continue:focus,
#sb-cart-page a.sb-cart-page__continue:active {
	display: block;
	margin-top: 12px;
	padding: 0 16px 16px;
	text-align: center;
	color: #141d2e;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	/* 24px: the design gives this link a text-center mt-3 24px line box, and
	   the whole 6px of Payment Summary 351-vs-357 sits under it. */
	line-height: 24px;
	font-weight: 600;
	text-decoration: none;
	background: transparent;
	outline: 0;
	box-shadow: none;
}

#sb-cart-page a.sb-cart-page__continue:hover,
#sb-cart-page a.sb-cart-page__continue:focus-visible {
	text-decoration: underline;
	background: transparent;
	color: #141d2e;
}

.sb-cart-page__promo h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px 10px;
}

/* A 12px lucide info glyph in the design, not a circled italic "i". */
.sb-cart-page__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #647690;
	line-height: 0;
}

.sb-cart-page__info svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* The design's promo caption is the field label: 12px/600 with a 6px gap. */
.sb-cart-page__promo-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 14px 20px 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #141d2e;
}

.sb-cart-page__promo-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	padding: 0 20px 16px;
}

.sb-cart-page__promo-row input {
	background: #fff;
}

.sb-cart-page__promo-msg {
	padding: 0 20px 12px;
}

/* --- Shop with confidence (image 7) --- */

.sb-cart-page__reassurance {
	padding: 20px;
	background: transparent;
}

.sb-cart-page__reassurance h2,
.sb-cart-page__trust h2,
.sb-cart-page__help h2 {
	margin: 0 0 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.sb-cart-page__trust p,
.sb-cart-page__help p,
.sb-cart-page__trust span,
.sb-cart-page__help span,
.sb-cart-page__trust strong,
.sb-cart-page__help strong,
.sb-cart-page__trust a,
.sb-cart-page__help a,
.sb-cart-page__help-label,
.sb-cart-page__phone {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	/*
	 * Left at 18. The critic read the design's body line-height as 19.5, but
	 * this selector list covers more than the card's body copy: raising it
	 * took the card from 361 to 370 against a design of 320, i.e. further
	 * away. The card's excess height is not a line-height problem and is
	 * still open -- see R4-22.
	 */
	line-height: 18px;
}

/*
 * The three trust links are 400/16 in the design, not 500/18, and the
 * "Ordering & Customer Service" label is 600 in ink rather than 700 muted.
 */
.sb-cart-page__reassurance a,
.sb-cart-page__trust a,
.sb-cart-page__help a {
	font-weight: 400;
	line-height: 16px;
}

.sb-cart-page__help-label {
	font-weight: 600;
	color: #141d2e;
}

.sb-cart-page__trust p,
.sb-cart-page__help p {
	margin: 0 0 12px;
	color: #647690;
}

.sb-cart-page__trust {
	margin: 0;
	padding: 0 0 18px;
	border: 0;
	border-bottom: 1px solid #dbdfe6;
	background: transparent;
}

.sb-cart-page__help {
	margin: 0;
	padding: 18px 0 0;
	border: 0;
	background: transparent;
}

.sb-cart-page__trust-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-cart-page__trust a,
.sb-cart-page__help a,
.sb-cart-page__trust a:hover,
.sb-cart-page__help a:hover,
.sb-cart-page__trust a:focus,
.sb-cart-page__help a:focus {
	color: #07038c;
	font-weight: 500;
	text-decoration: none;
	background: transparent;
	outline: 0;
	box-shadow: none;
}

.sb-cart-page__trust a:hover,
.sb-cart-page__help a:hover,
.sb-cart-page__trust a:focus-visible,
.sb-cart-page__help a:focus-visible {
	text-decoration: underline;
}

.sb-cart-page__help-label {
	margin: 0 0 6px;
	font-weight: 700;
	color: #334155;
}

.sb-cart-page__phone {
	margin: 6px 0 0;
	color: #647690;
}

.sb-cart-page.is-empty .sb-popup-cart__actions {
	opacity: 0.55;
}

.sb-cart-page .sb-popup-cart__checkout-btn.is-disabled,
.sb-cart-page [data-sb-quote-needs-cart].is-disabled,
.sb-cart-page [data-sb-quote-needs-cart]:disabled {
	pointer-events: none;
	cursor: not-allowed;
}
/* -------------------------------------------------------------------------
 * Recommendation sections on the cart PAGE
 *
 * Scoped to .sb-cart-page so the popup keeps its own (larger) treatment --
 * the design set only covers the cart page. Measured against
 * shots/clip/cart.design.png: bare 16px accent glyph instead of a 28px tinted
 * chip, a 600-weight title, an 11px note, 12px card padding on a 6px radius,
 * a square availability chip, and a 16px checkbox-style add control.
 * ---------------------------------------------------------------------- */

.sb-cart-page .sb-popup-rec {
	background: #fff;
	padding: 16px;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.sb-cart-page .sb-popup-rec__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

/*
 * AC7: the two recommendation section icons are `text-primary` in the design's
 * markup. This selector outweighs the navy rule in sb-site-modals.css, so the
 * colour has to be set here too or the cart page keeps painting them orange.
 */
.sb-cart-page .sb-popup-rec__icon {
	width: 16px;
	height: 16px;
	border-radius: 0;
	background: transparent;
	color: #07038c;
}

.sb-cart-page .sb-popup-rec__icon svg {
	width: 16px;
	height: 16px;
}

.sb-cart-page .sb-popup-rec__heading {
	display: flex;
	flex-wrap: wrap;
	/* Cart.tsx puts the <h2> and its muted caption in the SAME
	   `items-center` row as the icon. Baseline lines up the two text
	   baselines instead, which drops a 16px caption 3px below a 20px
	   heading. */
	align-items: center;
	gap: 8px;
}

.sb-cart-page .sb-popup-rec__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	color: #141d2e;
}

.sb-cart-page .sb-popup-rec__subtitle {
	font-size: 11px;
	line-height: 16px;
	color: #647690;
}

.sb-cart-page .sb-popup-rec__grid {
	gap: 8px;
}

.sb-cart-page .sb-popup-rec__card {
	gap: 6px;
	padding: 12px;
	border-radius: 6px;
}

.sb-cart-page .sb-popup-rec__card-title {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

/*
 * The add control reads as a checkbox in the design: an empty 16px rounded
 * square that fills with accent and shows a white tick once the lot is in the
 * cart. Both states are the same box so the card does not reflow on add.
 */
.sb-cart-page .sb-popup-rec__add,
.sb-cart-page .sb-popup-rec__added {
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	border-radius: 4px;
	flex-shrink: 0;
}

.sb-cart-page .sb-popup-rec__add {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #94a3b8;
}

/*
 * Empty in the design -- the box itself is the affordance, and the card is
 * clickable. Hidden rather than removed so the button keeps its accessible
 * name and a non-empty hit area.
 */
.sb-cart-page .sb-popup-rec__add-glyph {
	display: none;
}

/* The whole card is the target, as in the design. */
.sb-cart-page .sb-popup-rec__card:not(.is-in-cart) {
	cursor: pointer;
}

.sb-cart-page .sb-popup-rec__added {
	border: 1px solid #eb743d;
	background: #eb743d;
	color: #fff;
}

.sb-cart-page .sb-popup-rec__added svg {
	width: 12px;
	height: 12px;
}

/* Availability reads as a square chip in the design, not a pill. */
.sb-cart-page .sb-popup-rec__badge--avail {
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 10px;
	line-height: 14px;
}

.sb-cart-page .sb-popup-rec__badge--type {
	font-size: 10px;
	line-height: 14px;
	padding: 1px 8px;
}

.sb-cart-page .sb-popup-rec__meta,
.sb-cart-page .sb-popup-rec__price {
	font-size: 11px;
	line-height: 16px;
}

/* -------------------------------------------------------------------------
 * Quick Add / Promo inputs, and the quick-action buttons
 *
 * The inputs were losing to the theme's generic `input[type="text"]` rule --
 * same specificity (0,1,1), later in source order -- which paints #fcfcfc on a
 * #e6e6e6 hairline at 4px. And the rule that was meant to win set #fff, where
 * the design is #f6f7f9, so raising specificity alone would not have closed it.
 * Measured with why.py, which named both rules.
 *
 * The buttons were wearing the RAIL's box. The design's rail buttons ARE 40px
 * at weight 600 (Generate Quote, Proceed to Checkout), but the quick-action row
 * beside the input is 36px, 0-12px padding, weight 500 -- and it stays inline at
 * 375 rather than stacking full-bleed.
 * ---------------------------------------------------------------------- */

.sb-cart-page__quick-row input[type="text"],
.sb-cart-page__quick-row input[type="number"],
.sb-cart-page__promo-row input[type="text"] {
	background: #f6f7f9;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
}

.sb-cart-page__quick-actions .sb-cart-page__btn,
.sb-cart-page__promo-row .sb-cart-page__btn {
	min-height: 36px;
	padding: 0 12px;
	font-weight: 500;
}

/*
 * The promo Apply button keeps `font-semibold` (critic 6, F9).
 *
 * Cart.tsx:720 states it explicitly -- `h-9 bg-primary hover:bg-primary/90
 * text-primary-foreground font-semibold` -- and the shared rule above was
 * lowering it to 500 along with the quick-action buttons.
 *
 * The quick-action buttons are deliberately NOT changed: they are
 * `<Button size="sm">` in the component, so their weight comes from
 * ui/button.tsx, which is not in the design package. Unverifiable from source
 * is not the same as wrong, and guessing at it would be inventing a value.
 */
.sb-cart-page__promo-row .sb-cart-page__btn {
	font-weight: 600;
}

/*
 * Border only where the design has none. The quick "Add to Cart" (--navy) and
 * the promo "Apply" are borderless; "Clear All Items" (--ghost) carries a 1px
 * #dbdfe6 hairline, and since its fill is #f6f7f9 on a #f6f7f9 page ground that
 * hairline is the only thing that makes it read as a control. Round three set
 * border-width:0 across the whole row and turned it into plain text at 768.
 */
.sb-cart-page__quick-actions .sb-cart-page__btn--navy,
.sb-cart-page__promo-row .sb-cart-page__btn {
	border-width: 0;
}

.sb-cart-page__quick-actions .sb-cart-page__btn--ghost {
	border: 1px solid #dbdfe6;
}

@media (max-width: 640px) {
	.sb-cart-page__quick-actions {
		display: flex;
		/*
		 * `flex-direction: row` is the whole fix. The <=767 block above sets
		 * `column` with `align-items: stretch`, so `width: auto` on the children
		 * still stretched them to the full 343 -- which is why round three's
		 * "inline at 375" landed on neither cart state.
		 */
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
	}

	.sb-cart-page__quick-actions .sb-cart-page__btn {
		width: auto;
		flex: 0 0 auto;
		min-height: 36px;
		font-weight: 500;
	}
}

/* The design's reassurance card is padded 16, not 20 -- 67px of height. */
.sb-cart-page__reassurance {
	padding: 16px;
}

/* Design: the rail's Generate Quote is the FILLED ghost variant, not transparent. */
.sb-cart-page__btn--outline.sb-popup-cart__quote-btn {
	background: #f6f7f9;
	font-weight: 500;
}

/*
 * ...AND IT HAS TO SAY SO ON HOVER TOO.
 *
 * Brian, 18 Sep: "The Generate Quote button text is not legible on-hover."
 *
 * The rule directly above is `.sb-cart-page__btn--outline.sb-popup-cart__quote-btn`
 * -- two classes, (0,2,0). The hover state it has to coexist with is
 * `.sb-cart-page__btn--outline:hover`, which is ALSO (0,2,0). A tie is broken by
 * source order, and the ghost variant is declared later, so on hover the
 * background stayed #f6f7f9 while `color: #fff` from the hover rule still
 * applied: white text on near-white. The button did not lose its hover, it lost
 * exactly half of it.
 *
 * Restating the full hover here at (0,3,0) so the pair can no longer split.
 */
.sb-cart-page__btn--outline.sb-popup-cart__quote-btn:hover,
.sb-cart-page__btn--outline.sb-popup-cart__quote-btn:focus-visible {
	background: #eb743d;
	border-color: #eb743d;
	color: #fff;
}

.sb-cart-page__btn--outline.sb-popup-cart__quote-btn:hover .sb-cart-page__quote-icon,
.sb-cart-page__btn--outline.sb-popup-cart__quote-btn:focus-visible .sb-cart-page__quote-icon {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Beaver Builder's own button sizing
 *
 * `.fl-page button, .fl-page input[type="button"], ...` sets `font-size:16px;
 * line-height:1.2` at (0,1,1), which out-ranks every single-class rule in this
 * sheet. At 1440 our rules happened to win on other grounds; at 768 and below
 * every cart control jumped to 16px -- Empty Cart 12 -> 16, Add More Rows
 * 12 -> 16 and 111 -> 141 wide, Clear All Items and Add to Cart 14 -> 16 with
 * their height going 36 -> 40.
 *
 * Matched at (0,2,1) so the design's sizes hold at every width.
 * ---------------------------------------------------------------------- */

.fl-page .sb-cart-page__empty-btn,
.fl-page .sb-cart-page__link-btn {
	font-size: 12px;
	line-height: 16px;
}

.fl-page .sb-cart-page__btn,
.fl-page .sb-cart-page__quick-actions button,
.fl-page .sb-cart-page__quick-actions .sb-cart-page__btn {
	font-size: 14px;
	line-height: 20px;
}

/*
 * Two different breakpoints, which used to share one 980px block.
 *
 * The PAGE grid is `lg:grid-cols-[1fr_340px]` in the design, and Tailwind's
 * `lg:` is 1024 -- so items and rail stack below that.
 */
@media (max-width: 1023px) {
	.sb-cart-page__grid {
		grid-template-columns: 1fr;
	}

	.sb-cart-page__aside {
		position: static;
	}

	/* The express tiles are NOT part of the 1023 page-grid collapse: the
	   design still shows two columns at 768 and only stacks below it. */
}

@media (max-width: 639px) {
	/*
	 * `sm:grid-cols-2` -- two columns from 640 up, one below. Measured design
	 * side: 640 gives 296+296, 700 gives 326+326, 767 gives 359.5+359.5, and
	 * 639 is one column. Round six moved this from 1023 to 767, which was
	 * closer and still a whole breakpoint early.
	 */
	.sb-cart-page__express-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * The item ROW is `md:grid-cols-[1fr_240px]`, and `md:` is 768 -- measured, the
 * design's price block is still 240x107 at 768. Live stacked it at 980, so
 * every viewport from 768 to 980 broke to one column where the design does not,
 * and the row grew from 110 to 203 tall.
 */
@media (max-width: 767px) {
	body.woocommerce-cart.sb-cart-page-layout .sb-cart-page .sb-popup-cart__item.sb-cart-page__item {
		grid-template-columns: 1fr;
	}

	.sb-cart-page__item-price {
		border-left: 0;
		border-top: 1px solid #dbdfe6;
	}
}

@media (max-width: 640px) {
	#sb-cart-page {
		/*
		 * The design keeps its `px-4 py-8` shell at every width -- 16px
		 * gutters and 32px above the title. Dropping to 24px/12px on phones
		 * put the h1 16px higher than the design's.
		 */
		padding: 32px 16px 48px;
	}

	.sb-cart-page__title {
		font-size: 30px;
		line-height: 36px;
	}

	.sb-cart-page__quick-row {
		flex-wrap: wrap;
	}

	.sb-cart-page__quick-bar,
	.sb-cart-page__quick-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sb-cart-page__quick-actions {
		margin-left: 0;
	}

	.sb-cart-page__quick-actions .sb-cart-page__btn {
		width: 100%;
	}
}

/*
 * Beaver Builder Themer paints a large centred "Cart" post title above the
 * design's own "Shopping Cart" heading. WooCommerce's `woocommerce_show_page_title`
 * filter is already false here (inc/popup-cart.php) -- that filter does not touch
 * Themer's header, so the title survived it.
 *
 * Two separate sources, both hidden here:
 *   - Themer's `.fl-post-header` (the h1 post title), and
 *   - a Beaver Builder heading MODULE, `.fl-module.cart_heading`, which is what
 *     actually painted the visible 40px "Cart". Hiding only the post header did
 *     nothing, because the visible heading was an `h2.fl-heading` in that module.
 *
 * This rule lives in cart-page.css and NOT in checkout-account-ui.css: that sheet
 * is only enqueued on `.sb-co` screens and is never loaded on /cart/, so the same
 * rule placed there did nothing at all.
 */
body.sb-cart-page-layout .fl-post-header,
body.woocommerce-cart .fl-post-header,
body.sb-cart-page-layout .fl-module.cart_heading,
body.woocommerce-cart .fl-module.cart_heading {
	display: none !important;
}

/*
 * The parent theme's base is 18px; the design's is 16px. Everything on this page
 * that is not pinned by an explicit `text-*` class inherits the difference --
 * "Shopping Cart" rendered 32px against the design's 30px, and the stock notice
 * 18px against 14px.
 */
body.sb-cart-page-layout {
	font-size: 16px;
}

/* --- Empty cart panel (v2 design) --------------------------------------- */
/*
 * Design: a muted bordered panel, centred, gap-3, py-16 px-4, with a 48px
 * cart glyph at muted-foreground/60, a 14px muted line, and an outline
 * "Browse samples" button.
 */
.sb-cart-page__empty-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 64px 16px;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
	background: rgba(237, 239, 242, 0.5);
}

.sb-cart-page__empty-icon {
	width: 48px;
	height: 48px;
	color: rgba(100,118,144, 0.6);
}

.sb-cart-page__empty-text {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #647690;
}

.sb-cart-page__empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #dbdfe6;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #141d2e;
	text-decoration: none;
}

.sb-cart-page__empty-cta:hover,
.sb-cart-page__empty-cta:focus {
	background: rgba(237, 239, 242, 0.6);
	color: #141d2e;
	text-decoration: none;
}

/* --- Cart heading scale (v2 design) ------------------------------------- */
/*
 * These are bare <h2>/<h3> elements, so they inherited the parent theme's
 * heading sizes and all rendered 18px. The design uses 14px for the stock
 * notice and 16px for the rail card headings.
 */
/*
 * `div.woocommerce h2, div.woocommerce h3 { font-size: 18px }` is (0,1,2) and
 * outranked the first version of these rules, so they measured as no-ops. The
 * body-class prefix takes them to (0,2,x), which wins on class count without
 * resorting to !important.
 */
body.sb-cart-page-layout .sb-cart-page__note h3 {
	font-size: 14px;
	line-height: 20px;
}

body.sb-cart-page-layout .sb-cart-page__aside h2 {
	font-size: 16px;
	line-height: 24px;
}

/* --- Space above the cart heading (v2 design) -------------------------- */
/*
 * Design puts 'Shopping Cart' at y=157 with a 92px header, i.e. a 65px gap.
 * Live had 100px: Beaver Builder's .fl-content margin-top plus the woo
 * wrapper's own 40px padding. Zero the theme margin and let one rule own it.
 */
/*
 * The builder chrome above the page is now released outright (see the
 * fl-row/col/module rules near the top), so #sb-cart-page carries the design's
 * own `py-8` and nothing has to be compensated for. The 6px stopgap this
 * replaces was tuned against the chrome that used to be there.
 */

/*
 * The parent theme paints every `.woocommerce-page button[type="submit"]` in
 * its destructive red, and that rule lands after these. The Retrieve a Quote
 * submit on the empty cart came out red as a result; body-scoping the brand
 * fill outranks it without resorting to !important.
 */
/*
 * The store's WooCommerce button rule (`.woocommerce-page ul.products
 * li.product a.button, ...`) also matches this submit and out-weighed the
 * class rules above, so Retrieve a Quote rendered in the WooCommerce red at
 * 16px/4px radius. `#sb-cart-page` settles the cascade for good.
 */
#sb-cart-page .sb-cart-page__btn--orange,
body.woocommerce-cart .sb-cart-page__btn--orange,
body.woocommerce-page .sb-cart-page__btn--orange {
	/*
	 * No border. The design's accent buttons are `bg-accent` with no border
	 * class anywhere in the export, and a 1px edge in the fill's own colour is
	 * invisible on screen while still adding 2px to a shrink-to-fit width --
	 * which is exactly how it survived: these buttons have an explicit height,
	 * so the border disappears into it and only the width moves.
	 *
	 * Removed here at the source rather than overridden later, so there is no
	 * specificity race to lose. "Clear All Items" is `--ghost`, a different
	 * variant with its own border rule, and is untouched by this.
	 */
	border: 0;
	background: #eb743d;
	color: #fff;
	border-radius: 6px;
	font-size: 14px;
	/* The design sets 14px/20px here; live inherited 1.2 and rendered 16.8. */
	line-height: 20px;
	font-weight: 600;
}

body.woocommerce-cart .sb-cart-page__btn--orange:hover,
body.woocommerce-cart .sb-cart-page__btn--orange:focus-visible,
body.woocommerce-page .sb-cart-page__btn--orange:hover,
body.woocommerce-page .sb-cart-page__btn--orange:focus-visible {
	background: #d86532;
	border-color: #d86532;
	color: #fff;
}

/* The design's empty cart shows "Shopping Cart" alone -- no "Sample cart" chip. */
body.woocommerce-cart .sb-cart-page.is-empty .sb-cart-page__pill {
	display: none;
}

/* "Add More Rows": a lucide plus and a 6px gap, as in the design. */
.sb-cart-page__link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sb-cart-page__link-btn-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/*
 * The Express Order tile subtitles are regular-weight muted copy in the
 * design; the file-input tile was rendering its subtitle semibold, so
 * "Upload your CSV file" competed with the tile's own title.
 */
.sb-cart-page__express-copy,
.sb-cart-page__express-card--file .sb-cart-page__express-copy {
	font-weight: 400;
}

/*
 * The cart page is a Beaver Builder rich-text module inside a row whose
 * content wrapper caps at 1100px, so #sb-cart-page could never reach the
 * design's 1152 from inside it -- the content column measured 1068 against
 * the design's 1120 and sat 26px right. Release the BB row/column chain on
 * this route only; the 1152 cap and the 16px gutter stay on #sb-cart-page.
 */
/*
 * Confined to the page content. Unscoped, this flattened the global
 * footer too: its row went from x=135 w=1170 with five 234px columns to
 * x=0 w=1440 with every column full-bleed, and the copyright row
 * overlapped the address block. `#fl-main-content` is the same
 * confinement css/checkout-account-ui.css uses for its own copy of this
 * release, which is why /checkout/ and /my-account/ were never affected.
 */
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-row-content-wrap,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-row-content,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-row,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-col-group,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-col,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-col-content,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-module,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-module-content,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-rich-text {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/*
 * `.fl-row-content-wrap` also carries a 50px top pad from the builder, which
 * held the promo band 60px clear of the header where the design has it flush.
 */
/*
 * Confined to the page content for the same reason as the block above:
 * unscoped, this stripped the footer's vertical padding too and the cart's
 * footer measured 196 tall against 401 on every other route, with identical
 * content.
 */
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-row-content-wrap,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-module,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-module-content,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-col-content,
body.woocommerce-cart.sb-cart-page-layout #fl-main-content .fl-rich-text {
	/*
	 * The builder's per-node CSS puts vertical padding on the row wrapper and
	 * a 10px margin on the module content. Both are chrome the design does not
	 * model, and together they held the promo band 60px clear of the header.
	 */
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Promo band
 *
 * v3 markup, verbatim:
 *   <div class="bg-primary/5 border-b border-primary/15">
 *     <div class="max-w-[1440px] mx-auto px-4 sm:px-6 py-2 text-center
 *                 text-xs font-semibold text-foreground">
 *       ... <span class="text-primary">Applies at checkout -></span>
 *
 * So: navy at 5% with a navy 15% rule beneath, not orange at 10/20, and the
 * inner is capped at 1440 -- the 1152 below predates the widened shell.
 * ---------------------------------------------------------------------- */

.sb-cart-promo-band {
	background: rgba(7, 3, 140, .05);
	border-bottom: 1px solid rgba(7, 3, 140, .15);
}

.sb-cart-promo-band__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 8px 16px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #141d2e;
	text-align: center;
}

.sb-cart-promo-band__cta {
	color: #07038c;
}

/* `sm:px-6` -- the design widens the band's side padding from 640 up. */
@media (min-width: 640px) {
	.sb-cart-promo-band__inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/*
 * wpautop wraps the shortcode in this builder module with empty paragraphs.
 * They have no height, but their 10px bottom margin collapses out of the
 * module and held the promo band 10px clear of the header.
 */
body.woocommerce-cart.sb-cart-page-layout .fl-rich-text > p {
	margin: 0;
}


/* -------------------------------------------------------------------------
 * Quick-action row: inline at 375
 *
 * This lives at the END of the file on purpose. The `<=640` block that was
 * meant to do this sits ABOVE the `<=767` block, which re-imposes
 * `flex-direction: column` with `align-items: stretch` -- so at 375 the pair
 * kept stretching to 343 and stacking, twice reported as fixed and twice still
 * stacked. Source order, not specificity, was the problem.
 *
 * Design at 375: Clear All Items 123x36 at x=16, Add to Cart 100x36 at x=146,
 * same y.
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.sb-cart-page__quick-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		margin-left: 0;
	}

	.sb-cart-page__quick-actions .sb-cart-page__btn {
		width: auto;
		flex: 0 0 auto;
		min-height: 36px;
		font-weight: 500;
	}
}

/*
 * The notice wrapper has to follow the shell through ITS breakpoint, not just
 * match it at 1600. `#sb-cart-page` drops to `padding: 32px 16px 48px` under
 * 640; the wrapper's gutter was a flat 24px, so at 375 the notice sat 8px
 * outside the content on both sides. 375 was the width the fix was aimed at.
 */
@media (max-width: 640px) {
	body.woocommerce-cart.sb-cart-page-layout .woocommerce-notices-wrapper {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Shop With Confidence, element by element
 *
 * Three earlier passes each made this card TALLER (361 -> 370 -> 376 against a
 * design of 320) because they were blanket rules. Critic 1's per-element table
 * is what made it tractable, and the key correction is that the intro <p> is
 * SHORT at 18 where the design is 19.5 -- the excess is entirely elsewhere:
 *   <ul>            306x70 vs 306x60  (+10, inheriting the card's 23.2px base)
 *   Question block  306x128 vs 306x107 (+21)
 *   divider         18/18 vs 16/16     (+4)
 * ---------------------------------------------------------------------- */

.sb-cart-page__trust > p {
	line-height: 19.5px;
}

.sb-cart-page__trust-links {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 16px;
}

.sb-cart-page__trust-links li {
	margin: 6px 0;
	font-size: 12px;
	line-height: 16px;
}

.sb-cart-page__trust-links li a {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

/* The divider between the two halves is 16 + 16 in the design, not 18 + 18. */
.sb-cart-page__help {
	margin-top: 16px;
	padding-top: 16px;
}

.sb-cart-page__help > p {
	margin: 0;
	line-height: 16px;
}

.sb-cart-page__help-label {
	font-weight: 600;
	line-height: 16px;
	color: #141d2e;
}

/* The design's email is a link in brand navy; live rendered it muted. */
.sb-cart-page__help a[href^="mailto:"] {
	color: #07038c;
	font-weight: 400;
	line-height: 16px;
	text-decoration: none;
}

.sb-cart-page__help a[href^="mailto:"]:hover,
.sb-cart-page__help a[href^="mailto:"]:focus-visible {
	text-decoration: underline;
}

.sb-cart-page__phone {
	margin-top: 2px;
	line-height: 16px;
}

/* 14: the cart line is 2px over at every width. */
.sb-cart-page__item .sb-cart-page__price-grid {
	line-height: 1;
}

/* 16: these two are borderless in the design and carry no radius. */
.sb-cart-page__empty-btn,
.sb-cart-page__link-btn {
	border-radius: 0;
}

@media (max-width: 640px) {
	/* Design keeps "Add more rows" at its intrinsic 111px, not full-bleed. */
	.sb-cart-page__link-btn {
		width: auto;
		display: inline-flex;
	}
}

/* Same `text-base md:text-sm` rule for the cart's quick-add row. */
@media (max-width: 767px) {
	.fl-page .sb-cart-page__quick-row input[type="text"],
	.fl-page .sb-cart-page__quick-row input[type="number"],
	.fl-page .sb-cart-page__promo-row input[type="text"] {
		font-size: 16px;
	}
}

/*
 * The quick-add inputs are 400 in the design, not 600.
 */
.sb-cart-page__quick-row input[type="text"],
/* The grid gives this column 100px; the control was 90 and left a 10px hole. */
.sb-cart-page__quick-row input[type="number"] {
	width: 100%;
	font-weight: 400;
}

/* F6: Retrieve-a-Quote only exists on the empty cart, so it was missed when the
   16px-below-768 rule went in for the quick-add row. F11: the design's card is
   a 6px radius with a 16/12 header inset, not 8px and 20/14. */
@media (max-width: 767px) {
	.fl-page .sb-cart-page__retrieve-body input[type="text"] {
		font-size: 16px;
	}
}

.sb-cart-page__retrieve {
	border-radius: 6px;
}

.sb-cart-page__retrieve h2 {
	/* Design header wrapper is 12px 16px; everything else on this card matches. */
	padding: 12px 16px;
}

/*
 * The Express Order method buttons are 82 tall in the design and rendered 76.
 * Composition measured design-side: pt 24 + heading 18px/28 mb4 + desc
 * 12px/16 mb16 + an 82-tall button row = the 171 the block should be.
 */
.sb-cart-page__express-card,
a.sb-cart-page__express-card {
	min-height: 82px;
}

/*
 * The promo Apply is 71.7 wide in the design against 65.7 live -- its side
 * padding is 16, not 12, and the row it sits in is 306 rather than 298.
 */
.sb-cart-page__promo-row .sb-cart-page__btn {
	padding-left: 16px;
	padding-right: 16px;
}

/*
 * Payment Summary measured 351 against the design's 357, and critic 1 pinned
 * the whole 6px below "Continue Shopping": the design gives that link a
 * `text-center mt-3` 24px line box, live had a 16px one with no top margin.
 * Every row above it already aligns to the pixel.
 */
.sb-cart-page__continue {
	display: block;
	margin-top: 12px;
	line-height: 24px;
	text-align: center;
}

/*
 * The cart line is 2px over at every width (item 110 vs 108, price grid 49 vs
 * 47). The earlier `line-height: 1` on the grid did not take -- the height is
 * in the rows, not the container.
 */
.sb-cart-page__item .sb-cart-page__price-grid,
.sb-cart-page__price-grid {
	row-gap: 0;
}

.sb-cart-page__price-grid > * {
	line-height: 16px;
}

/*
 * "Shop With Confidence" and "Question? We Can Help" are 16px in the design and
 * rendered 18px -- the h2 -> h3 change moved them under
 * `div.woocommerce h2, div.woocommerce h3 {font-size:18px}` at (0,1,2), which
 * out-specifies the 16px rule written for them at (0,1,1). Only font-size was
 * lost; the 24px line-height still comes from ours.
 *
 * Critic 1 expects this to be the reassurance card's outstanding 14px.
 */
div.woocommerce .sb-cart-page__trust > :is(h2, h3),
div.woocommerce .sb-cart-page__help > :is(h2, h3),
div.woocommerce .sb-cart-page__reassurance > :is(h2, h3) {
	font-size: 16px;
	line-height: 24px;
}

/* MINOR 6: "Add more rows" keeps its intrinsic width at 375, not the column. */
@media (max-width: 640px) {
	.fl-page .sb-cart-page__link-btn {
		width: auto;
		max-width: max-content;
	}
}

/* -------------------------------------------------------------------------
 * C1R11-2: the Retrieve a Quote card was 340x341 against the design's 340x354.
 *
 * The 13px is not padding and not a margin -- it is a LINE BOX. The design's
 * labels are `inline` and sit in an anonymous line box whose height comes from
 * the STRUT of the parent's own 16px/24px line-height, not from the 12px label.
 * Live made the labels `display:block` with `margin-bottom:5px`, so each one
 * occupied 16 + 5 instead of a 24px line box, and the input's 4px top margin
 * collapsed into that 5.
 *
 * Modelling the strut predicts every band of the design to half a pixel:
 *
 *      label 1  141 + 6.5 = 147.5   design y=147
 *      input 1  165 + 4   = 169     design y=169
 *      label 2  217 + 6.5 = 223.5   design y=223
 *      input 2              245     design y=245
 *      button               297     design y=297
 *
 * So this restores the design's own box model rather than padding the card out
 * to the right total, which is what a height override would have done.
 * ---------------------------------------------------------------------- */
.sb-cart-page__retrieve-body {
	font-size: 16px;
	line-height: 24px;
}

/* leading-relaxed on text-xs is 1.625 x 12, not 20. */
.sb-cart-page__retrieve-body > p {
	line-height: 19.5px;
}

.sb-cart-page__retrieve-body label {
	display: inline;
	margin: 0;
}

/* The design's inputs are px-3 py-2; live set the vertical padding to 0. */
.sb-cart-page__retrieve-body input[type="text"] {
	padding: 8px 12px;
}

/* -------------------------------------------------------------------------
 * R4-21 / R7-15: the cart promo card inset.
 *
 * The earlier comment on this card said three attempts had each made it TALLER
 * (96 -> 124 against a design of 94), because `padding:16` was added to the
 * CARD while the children kept their own 20px insets, and that the fix needed
 * "the design's DOM compared node by node, not another CSS guess". That
 * comparison has now been done, by loading cart.html in the same browser and
 * reading the same properties:
 *
 *                     design                       live (before)
 *     card      340x94   padding 16            340x92   padding 0
 *     label     h 16     margin-bottom 8       338x38   padding 14/20/8
 *     row       306x36   gap 8, no padding     338x52   padding 0/20/16
 *     input     226.3x36                       216.3x36
 *     Apply     71.7x36                        73.7x36
 *
 * So the inset moves ONTO the card and OFF the children, in the same pass --
 * which is the step the three earlier attempts each missed. The arithmetic
 * closes: 16 + 16 + 8 + 36 + 16 = 92, plus 2px of border = 94; and the row
 * becomes 340 - 2 - 32 = 306.
 *
 * `.sb-cart-page__promo` is one of three cards sharing a `padding: 0` rule, so
 * the padding is set here on the promo card alone rather than by editing that
 * shared rule and disturbing the summary and reassurance cards.
 * ---------------------------------------------------------------------- */
.sb-cart-page__promo {
	padding: 16px;
}

.sb-cart-page__promo .sb-cart-page__promo-label {
	padding: 0;
	margin: 0 0 8px;
}

.sb-cart-page__promo .sb-cart-page__promo-row {
	padding: 0;
}

.sb-cart-page__promo .sb-cart-page__promo-msg {
	padding: 8px 0 0;
}

/*
 * (The promo Apply's border is handled at the source above, on the
 * `--orange` variant itself. The narrowly-scoped rule that used to sit
 * here -- `.sb-cart-page__promo-row .sb-cart-page__btn--orange` -- fixed
 * one button and missed every other accent button on the page, including
 * Retrieve a Quote. Scope to the variant, not to the row.)
 */

/* -------------------------------------------------------------------------
 * R5-9 reopened: the reassurance card is 340x333.5 against the design's
 * 340x319.5. Critic 1 attributed the 14px exactly -- +25 above the divider,
 * -11 inside the help block -- so this corrects both ends rather than
 * shaving the total.
 *
 * The design's own structure, from cart.html:
 *
 *     <h3 class="... mb-2">Shop With Confidence</h3>
 *     <p  class="text-xs ... mb-3">...</p>
 *     <ul class="space-y-1.5 text-xs"> <li><a/></li> x3 </ul>
 *     <div class="border-t border-border mt-4 pt-4">
 *       <h3 class="... mb-2">Question? We Can Help</h3>
 *       <p class="text-xs font-semibold">Ordering & Customer Service</p>
 *       <a href="mailto:...">                         <- bare, 6px below
 *       <p class="... mt-0.5">                         <- phone, 2px below
 *
 * So: no trailing padding on the trust block, 6px only BETWEEN list items, and
 * a help block with real gaps instead of three flush paragraphs.
 * ---------------------------------------------------------------------- */

/*
 * The design's divider is `mt-4 pt-4` on the help block. The trust block above
 * it has no bottom padding of its own -- live's 18px was stacking on top of
 * that 16px.
 */
/*
 * The divider belongs to the HELP block, not the trust block.
 *
 * The design is `<div class="border-t border-border mt-4 pt-4">` on the help
 * block: 16px of clear space above the line, 16px below. Live drew it as a
 * `border-bottom` on the trust block instead, and round thirteen's
 * `padding-bottom: 0` -- which is what closed the card's 14px residual --
 * removed precisely the 16px that should sit ABOVE the rule. The total came
 * out right and the line ended up flush under the last link: measured 179.5
 * against the design's 195.5, at every width.
 *
 * Moving the border does not disturb the total, which is already exact:
 *     rule   179.5 + 16 (margin) = 195.5
 *     help   195.5 + 1 (border) + 16 (padding) = 212.5
 *     card   302.5 + 16 + 1 = 319.5
 */
.sb-cart-page__reassurance .sb-cart-page__trust {
	padding-bottom: 0;
	border-bottom: 0;
}

.sb-cart-page__reassurance .sb-cart-page__help {
	border-top: 1px solid #dbdfe6;
}

/*
 * `space-y-1.5` is `> * + * { margin-top: 6px }` -- between items only. Live's
 * `margin: 6px 0` on every item also put 6px after the LAST one, which escapes
 * the list and pushes the divider down.
 */
.sb-cart-page__reassurance .sb-cart-page__trust-links li {
	margin: 0;
}

.sb-cart-page__reassurance .sb-cart-page__trust-links li + li {
	margin-top: 6px;
}

/*
 * The help block: the design gives the label 6px below it and the phone line
 * 2px below the address. `.sb-cart-page__help > p { margin: 0 }` at (0,2,1)
 * out-specifies `.sb-cart-page__help-label`'s own `margin: 0 0 6px` at (0,1,0),
 * so the gap that was written for it never applied. Restated here at (0,3,0)
 * so it wins, rather than editing the rule that shadowed it.
 */
.sb-cart-page__reassurance .sb-cart-page__help .sb-cart-page__help-label {
	margin: 0 0 6px;
}

/*
 * 4px, not 2. Measured both sides in the same terms: the design's phone line
 * sits at relY 286.5 and live's at 284.5 -- every other band in the help block
 * already lands on the design's number to 0.0.
 *
 * The design has a BARE inline `<a>` for the email, which occupies a 24px line
 * box struck by the parent, where live wraps it in a `<p>` with a 16px one.
 * Rather than restructure the markup, the 2px that loses is added here.
 *
 * This does not move the email line: the label's 6px bottom margin collapses
 * with this top margin, and 6 > 4, so only the phone line -- whose preceding
 * sibling has no bottom margin -- actually shifts.
 */
.sb-cart-page__reassurance .sb-cart-page__help > p + p {
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
 * Empty state: one payload, two containers
 *
 * popup-cart-items.php now emits BOTH empty states, because the AJAX refresh
 * renders it through admin-ajax where the cart-page flag is unset -- so a cart
 * emptied on the cart page flashed the design's panel and was then replaced by
 * the popup's one-liner. The container decides which survives.
 * ---------------------------------------------------------------------- */

#sb-cart-page .sb-popup-cart__empty,
body.woocommerce-cart .sb-cart-page .sb-popup-cart__empty {
	display: none;
}

#sb-popup-cart .sb-cart-page__empty-panel {
	display: none;
}


/*
 * v5 surface 3 -- Lot # and SKU on the recommendation cards.
 *
 * html/cart.html stacks them one per line under the badges, label in
 * --muted-foreground and value in --foreground, at the card's 12px.
 */
.sb-popup-rec__ids {
	margin: 6px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	line-height: 16px;
	color: #647690;
}

.sb-popup-rec__ids em {
	font-style: normal;
}

.sb-popup-rec__ids strong {
	font-weight: 500;
	color: #141d2e;
}


/* ==========================================================================
   v6 — the cart's WooCommerce notice, dressed like the rest of the page
   --------------------------------------------------------------------------
   Measured by the surface-3 critic: .woocommerce-message rendered x=0 and
   1440px wide inside a 1392px content column at x=24, background rgb(252,252,252),
   text rgb(69,69,69) at 16px, border-radius 0 — and an `outline: rgb(16,16,16)
   auto 1px` focus ring, because WooCommerce focuses the notice on load. Sampled
   boundary pixels came back rgb(15,15,15): a 2px black frame around the first
   thing under the header. Every other panel on the page is a 1px rgb(219,223,230)
   rounded card with rgb(20,29,46) 14px text.

   The MESSAGE stays — it tells the customer a discount has come off (register row
   S3-E). Its dress was never what was accepted.
   ========================================================================== */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
	box-sizing: border-box;
	width: 100%;
	max-width: 1392px;
	margin: 16px auto 0;
	padding: 12px 16px;
	border: 1px solid #dbdfe6;
	border-left: 3px solid #307fe2;
	border-radius: 8px;
	background: #fff;
	color: #141d2e;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 20px;
}

/* WooCommerce calls .focus() on the notice, so Chrome paints its focus ring on
   a container nobody tabbed to. The ring is removed only for that programmatic
   case -- :focus-visible still draws for real keyboard users. */
body.woocommerce-cart .woocommerce-message:focus:not(:focus-visible),
body.woocommerce-cart .woocommerce-info:focus:not(:focus-visible),
body.woocommerce-cart .woocommerce-error:focus:not(:focus-visible) {
	outline: none;
}

@media (max-width: 1439px) {
	body.woocommerce-cart .woocommerce-message,
	body.woocommerce-cart .woocommerce-info,
	body.woocommerce-cart .woocommerce-error {
		max-width: calc(100% - 48px);
	}
}

/*
 * The recommendation cards' badges come from stock Tailwind palettes, so the
 * SAME label is two different colours on one page: "4-6 Weeks" is
 * rgba(240,204,0,.15) on a cart line (correct --warning) and rgb(254,249,195)
 * on a Matched-samples card (yellow-100). Measured against html/cart.html:
 * the sample-type chip is indigo rgb(224,231,255)/rgb(55,48,163), and the
 * lead-time chip carries the warning token.
 */
.sb-popup-rec__badge--avail.sb-popup-rec__badge--mto,
.sb-popup-rec__badge--avail.sb-popup-rec__badge--inventory,
.sb-popup-rec__badge--avail.sb-popup-rec__badge--custom {
	background: rgba(240, 204, 0, 0.15) !important;
	color: #05025a !important;
}

.sb-popup-rec__badge--avail.sb-popup-rec__badge--stock {
	background: rgba(128, 213, 42, 0.1) !important;
	color: #4f8a12 !important;
}

.sb-popup-rec__badge--type {
	background: #e0e7ff !important;
	color: #3730a3 !important;
}

/* =====================================================================
 * V6 CRITIC ROUND — cart, against src/pages/Cart.tsx at Lovable HEAD.
 * ===================================================================== */

/*
 * Every value in a cart line's meta row is `text-foreground font-medium` --
 * weight 500. Live rendered all of them at 600. The critic only spotted it on
 * "Cryopreserved", but the design's rule covers SKU, Lot #, Size, Format and
 * Shipping equally, so the whole row is corrected rather than the one cell
 * that happened to get looked at.
 */
/*
 * `#sb-cart-page strong, #sb-cart-page b { font-weight: 600 }` carries an ID,
 * so it wins at (1,0,1) over anything written with classes alone. The blanket
 * 600 is right for the rest of the page -- RecCard headings and the summary
 * figures are `font-semibold` in the design -- so it is narrowed here rather
 * than lowered, and the ID is repeated to clear it.
 */
#sb-cart-page .sb-cart-page__item-meta strong,
#sb-cart-page .sb-cart-page__item-meta b {
	font-weight: 500;
}

/*
 * `<p class="text-xs font-semibold">Ordering &amp; Customer Service</p>` --
 * no colour class, so it inherits foreground. Live muted it, which put the
 * heading of the support block in the same grey as the body text under it.
 */
/* `.sb-cart-page__help p { color: #647690 }` is (0,2,1) and this <p> carries
   the help-label class, so the element selector has to come along. */
#sb-cart-page .sb-cart-page__help p.sb-cart-page__help-label,
.sb-cart-page__help p.sb-cart-page__help-label {
	color: rgb(20, 29, 46);
}

/* `<AvailabilityPill>` is `text-[10px]`; live rendered 12px. */
.sb-cart-page__stock-label {
	font-size: 10px;
}

/* `bg-warning/15 text-warning-foreground`. Live used rgb(5,2,128) -- the
   navy at 50% lightness rather than the token's 18%. */
.sb-popup-rec__badge--mto,
.sb-popup-rec__badge--avail.sb-popup-rec__badge--mto {
	color: rgb(5, 2, 90);
}

/*
 * The Quick Add remove control: `<X className="h-4 w-4" />` in
 * `text-muted-foreground`. Live drew a literal multiply sign at 18px in
 * slate-400 -- the same substitution as the product page's arrows, and the
 * same wrong grey as the trash icon was.
 */
.sb-cart-page__quick-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgb(100, 118, 144);
	line-height: 1;
}
.sb-cart-page__quick-remove-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/*
 * `FileText` / `Upload` at `h-6 w-6 text-muted-foreground`. Live drew them at
 * 22px in rgb(107,114,128) -- Tailwind's gray-500, which is not a token this
 * design uses anywhere.
 */
.sb-cart-page__express-icon,
.sb-cart-page__express-icon > svg {
	color: rgb(100, 118, 144);
}

/* `text-xs text-muted-foreground` -- 12px, not 13px. */
.sb-cart-page__quick-help {
	font-size: 12px;
}

/* The Quick Add inputs inherited the parent theme's rgb(69,69,69) body grey
   instead of the design's foreground. */
.sb-cart-page__quick-row input,
.sb-cart-page__quick input[type="text"],
.sb-cart-page__quick input[type="number"] {
	color: rgb(20, 29, 46);
}

/* V7: the header cart badge is 9px -- `text-[9px]` in SanguineNav.tsx. */
.sb-popup-cart-count,
.sb-site-header__cart .sb-popup-cart-count {
	font-size: 9px;
}

/*
 * V7: the quantity controls draw icons, so the buttons stop being type.
 *
 * Cart.tsx uses `<Trash2 className="h-3 w-3 text-muted-foreground"/>`,
 * `<Minus className="h-3 w-3"/>` and `<Plus className="h-3 w-3"/>`. Live
 * printed U+2212 and "+" as text, which inherits the button's font metrics and
 * cannot be given a stroke, a size or a colour of its own.
 */
.sb-qty-glyph {
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
}
.sb-popup-cart__qty-btn,
.sb-cart-page__qty-minus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/*
 * V8 (layout sweep): the recommendation headings and the cart-items head are
 * aligned on the wrong axis.
 *
 * Cart.tsx draws each recommendation heading as
 * `<div className="flex items-center gap-2 mb-3">` -- icon, <h2>, and the
 * muted caption all centred on one another. Live used `align-items: baseline`,
 * which lines up the TEXT BASELINES of a 20px heading and a 16px caption and
 * so pushes the caption 3px low, and would sit an icon on the text baseline
 * rather than centred against it.
 *
 * Found by qa/xf_v8_layout.py, which compares the container's layout mode
 * rather than any property of the text inside it -- no style assertion on the
 * heading or the caption could see this.
 */
/* (Corrected at `.sb-cart-page .sb-popup-rec__heading`, which is the (0,2,0)
   rule that wins. A bare class here could not reach it.) */

/* `<div className="flex items-end justify-between mb-3">` -- the Empty Cart
   link sits on the heading's BASELINE-as-bottom, not its text baseline. Live
   had the button 4px high of where the design puts it. */
.sb-cart-page__items-head {
	align-items: flex-end;
}