/**
 * SMC bag — port of `review/purchase-journey.html` §7 (`#view-bag`).
 *
 * V4 (2026-11-01): interaction + mobile polish. Scope of the change:
 *  - last-quantity pulse (`.bag-item.is-last-qty`), 420 ms, reduced-motion
 *    aware;
 *  - row removal / quantity pending states (`.is-busy` / `.is-pending`) that
 *    never dim the page — the bag root can no longer carry `.smc-cart-busy`;
 *  - sticky bar locked to the checkout's type scale and single-line total;
 *  - 390 px rows: 92/88 px thumb, 14.5 px name, 14 px right-aligned price,
 *    36 px stepper with 40 px targets.
 * The filename changed because the CDN ignores `?ver` (AGENTS.md §1).
 *
 * V5 (2026-11-01) — same filename rule (v4 → v5):
 *  - BUG 01: the summary header has one child now (no Edit-bag trigger), so
 *    `.sum-head` no longer justifies with `space-between`;
 *  - BUG 02: the delivery fill transitions width in .45 s so the bar can move
 *    in the same frame as the row (assets/js/smc-bag-progress.js);
 *  - BUG 04: `.smc-bag .rail-shell` gets the theme's section gap before the
 *    pre-footer (the rail lives outside `.wrap .page`).
 *
 * Every value below is copied from the prototype. The only change is scope:
 * everything lives under `.smc-bag` so the theme header/footer and the
 * PDP classes (`.panel`, `.summary`, `.sticky-bar`, `.view`, `.wrap`) are
 * never touched.
 *
 * Not in this file by design:
 *  - the accessory rail  → assets/css/smc-rail.css  (scoped `.smc-rail`)
 *  - the two dialogs     → assets/css/smc-modal.css (scoped `.smc-modal`)
 *  Both are shared with the checkout and order confirmation.
 */

.smc-bag {
	--ink: #0a0a0a;
	--ink-2: #3d4046;
	--muted: #5f6368;
	--faint: #6b7280;
	--page: #f9f9fa;
	--white: #fff;
	--line: #e7e8ea;
	--line-2: #f1f2f4;
	--green: #047857;
	--green-2: #065f46;
	--green-soft: #f2f8f4;
	--green-line: #dcebe2;
	--danger: #b42318;
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 16px;
	--shadow-card: 0 1px 2px rgba(17, 18, 20, .03), 0 12px 30px -28px rgba(17, 18, 20, .18);
	--wrap: 1240px;
	--gut: 28px;
	--head-h: 64px;

	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--page);
	color: var(--ink);
	min-height: 60vh;
	-webkit-font-smoothing: antialiased;
}

.smc-bag *,
.smc-bag *::before,
.smc-bag *::after {
	box-sizing: border-box;
}

/* `hidden` must win over the display rules below (ship CTA, badge, …). */
.smc-bag [hidden] {
	display: none !important;
}

.smc-bag .wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.smc-bag .page {
	padding-top: 36px;
	padding-bottom: 72px;
}

/* BUG 04 — breathing space before the pre-footer.
   The accessory rail is rendered OUTSIDE `.wrap .page`, so the page's own
   bottom padding never applied to it and the rail butted against the footer.
   Value matches the theme's section rhythm (`_theme_work/assets/css/sm-core-9.css`:
   `.sm-broad-main` / `.sm-broad-secondary` bottom padding, 44–56px), applied
   only inside `.smc-bag` so nothing leaks to other surfaces. */
/* A horizontal rail scrolls inside itself, never the document. `clip` (not
   `hidden`) so no scroll container is created and the fixed sticky bar keeps
   its viewport position. */
.smc-bag {
	overflow-x: clip;
}

.smc-bag .rail-shell,
.smc-bag .sm-hp-prod-car {
	margin-bottom: 56px;
}

.smc-bag .panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.smc-bag h1,
.smc-bag h2,
.smc-bag h3,
.smc-bag p,
.smc-bag dl,
.smc-bag dd,
.smc-bag dt {
	margin: 0;
}

/* ---------- buttons (prototype §6) ---------- */

.smc-bag .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.smc-bag .btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.smc-bag .btn-primary {
	background: var(--ink);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.smc-bag .btn-primary:hover {
	background: #000;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px -8px rgba(0, 0, 0, .45);
	color: #fff;
}

.smc-bag .btn-secondary {
	background: #fff;
	border-color: var(--line);
	color: var(--ink-2);
}

.smc-bag .btn-secondary:hover {
	background: var(--page);
	border-color: #cfd2d6;
	color: var(--ink);
}

.smc-bag .btn-block {
	width: 100%;
}

.smc-bag .link-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 2px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--green);
	text-decoration: none;
	white-space: nowrap;
}

.smc-bag .link-back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- fields (the promo input is a prototype `.input`) ---------- */

.smc-bag .input {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: var(--ink);
	outline: none;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.smc-bag .input::placeholder {
	color: var(--faint);
}

.smc-bag .input:hover {
	border-color: #d6d8db;
}

.smc-bag .input:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(4, 120, 87, .13);
}

/* ---------- bag head (title left, Continue shopping right) ---------- */

.smc-bag .bag-head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "title link";
	align-items: center;
	gap: 4px 16px;
	margin-bottom: 26px;
}

.smc-bag .bag-title {
	grid-area: title;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.035em;
	color: var(--ink);
}

.smc-bag .bag-continue {
	grid-area: link;
	justify-self: end;
	align-self: center;
	white-space: nowrap;
}

/* ---------- bag grid ---------- */

.smc-bag .bag-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 36px;
	align-items: start;
}

.smc-bag .bag-grid.is-empty {
	grid-template-columns: 1fr;
}

.smc-bag .bag-grid.is-empty .summary {
	display: none;
}

.smc-bag .bag-main {
	min-width: 0;
}

.smc-bag .bag-sheet {
	overflow: hidden;
}

/* ---------- free-delivery card ---------- */

.smc-bag .ship-box {
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
	transition: border-color .3s ease;
}

.smc-bag .ship-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.smc-bag .ship-icon {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: #fff;
	color: var(--green-2);
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1px #dcebe2;
	transition: color .3s ease;
}

.smc-bag .ship-icon svg {
	width: 24px;
	height: 24px;
}

.smc-bag .ship-icon .ship-check {
	display: none;
}

.smc-bag .ship-copy {
	flex: 1;
	min-width: 0;
}

.smc-bag .ship-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.012em;
	color: var(--ink);
}

.smc-bag .ship-sub {
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 450;
	line-height: 1.45;
	color: var(--muted);
}

.smc-bag .ship-sub b {
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.smc-bag .ship-cta {
	flex: none;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 30px;
	padding: 0 11px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--green-2);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .14s ease, background .14s ease;
}

.smc-bag .ship-cta:hover {
	background: var(--green-soft);
	border-color: var(--green-line);
}

.smc-bag .ship-badge {
	flex: none;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 25px;
	padding: 0 9px;
	border: 1px solid var(--green-line);
	border-radius: 99px;
	background: var(--green-soft);
	color: var(--green-2);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.smc-bag .ship-badge svg {
	width: 10px;
	height: 10px;
}

.smc-bag .ship-track {
	position: relative;
	height: 8px;
	margin-top: 16px;
	border-radius: 99px;
	background: #eef0f2;
	box-shadow: inset 0 1px 2px rgba(17, 18, 20, .07);
}

.smc-bag .ship-track i {
	position: relative;
	overflow: hidden;
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, #34d399, #10b981 55%, #047857);
	/* BUG 02: the bar has to START moving with the row the user touched, not
	   after the server fragment. `.45s` matches smc-bag-progress.js's motion. */
	transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.smc-bag .ship-track i::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 58%);
}

.smc-bag .ship-hint {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 9px;
	font-size: 10px;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.smc-bag .ship-hint b {
	font-weight: 600;
	color: var(--ink-2);
}

.smc-bag .ship-box.is-unlocked {
	border-color: #dcebe2;
}

/* Optimistic unlock (BUG 02): the bar is allowed to arrive at 100% before the
   check icon takes over, so the move is seen instead of snapping away.
   `is-celebrating` is added/removed by smc-bag-progress.js only. */
.smc-bag .ship-box.is-unlocked.is-celebrating .ship-track {
	display: block;
}

.smc-bag .ship-box.is-unlocked .ship-truck {
	display: none;
}

.smc-bag .ship-box.is-unlocked .ship-check {
	display: block;
}

.smc-bag .ship-box.is-unlocked .ship-track,
.smc-bag .ship-box.is-unlocked .ship-badge,
.smc-bag .ship-box.is-unlocked .ship-hint {
	display: none;
}

.smc-bag .ship-box:not(.is-unlocked) .ship-track i::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 38%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	animation: smc-ship-shine 3.8s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes smc-ship-shine {
	0% {
		transform: translateX(-140%);
		opacity: 0;
	}

	18% {
		opacity: .5;
	}

	58% {
		opacity: .5;
	}

	100% {
		transform: translateX(320%);
		opacity: 0;
	}
}

.smc-bag .ship-box.is-celebrating .ship-badge {
	animation: smc-ship-pop .58s cubic-bezier(.34, 1.56, .64, 1) both;
}

.smc-bag .ship-box.is-celebrating .ship-icon {
	animation: smc-ship-pop .58s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes smc-ship-pop {
	0% {
		transform: scale(.72);
		opacity: .4;
	}

	60% {
		transform: scale(1.08);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ---------- item rows ---------- */

.smc-bag .bag-item {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr);
	gap: 24px;
	padding: 20px;
}

.smc-bag .bag-item + .bag-item {
	border-top: 1px solid var(--line-2);
}

.smc-bag .thumb {
	position: relative;
	display: block;
	width: 100%;
	max-width: 136px;
	aspect-ratio: 1;
	border: 1px solid #f0f0f2;
	border-radius: 12px;
	overflow: hidden;
	background: radial-gradient(95% 70% at 50% 8%, #fff 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(165deg, #f5f5f7, #ececef);
}

.smc-bag .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.smc-bag .bag-item .thumb img {
	padding: 5%;
}

.smc-bag .thumb:hover img {
	transform: scale(1.04);
}

.smc-bag .item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.smc-bag .item-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.smc-bag .item-copy {
	min-width: 0;
}

.smc-bag .item-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var(--ink);
}

.smc-bag .item-name a {
	text-decoration: none;
}

.smc-bag .item-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.smc-bag .item-variant {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--muted);
}

.smc-bag .item-price {
	flex: none;
	text-align: right;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -.015em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.smc-bag .item-unit {
	display: block;
	margin-top: 1px;
	font-size: 10.5px;
	font-weight: 450;
	color: var(--faint);
}

.smc-bag .item-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 16px;
}

.smc-bag .item-links {
	display: flex;
	align-items: center;
	gap: 14px;
}

.smc-bag .item-link {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
	cursor: pointer;
}

.smc-bag .item-link:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.smc-bag .item-link.danger:hover {
	color: var(--danger);
}

.smc-bag .bag-item.is-leaving {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .18s ease, transform .18s ease;
}

.smc-bag .bag-item:last-child {
	padding-bottom: 22px;
}

/* ---------- quantity stepper ---------- */

.smc-bag .qty {
	display: inline-flex;
	align-items: center;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.smc-bag .qty button {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-2);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.smc-bag .qty button:hover {
	background: var(--line-2);
	color: var(--ink);
}

.smc-bag .qty button[disabled] {
	opacity: .35;
	cursor: default;
}

.smc-bag .qty .qty-remove {
	color: var(--faint);
}

.smc-bag .qty .qty-remove:hover {
	background: #fdf1f0;
	color: var(--danger);
}

.smc-bag .qty button svg {
	width: 12px;
	height: 12px;
}

.smc-bag .qty .qty-remove svg {
	width: 15px;
	height: 15px;
}

.smc-bag .qty output {
	min-width: 26px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- interaction states (v4) ---------- */

/* A removal is measured and collapsed; the row must never push the layout
   while it leaves. The inline height/padding/margin are written by
   smc-cart.js and cleared when the fragments land. */
.smc-bag .bag-item.is-removing {
	overflow: hidden;
	pointer-events: none;
	will-change: transform, opacity, height;
}

/* Only the control in use shows a pending state — the page never dims.
   `is-busy` = a removal (buttons are disabled), `is-pending` = a quantity
   request in flight (the buttons stay live so rapid clicks still queue). */
.smc-bag .bag-item.is-busy .qty,
.smc-bag .bag-item.is-busy .item-links,
.smc-bag .bag-item.is-pending .qty {
	opacity: .7;
	transition: opacity .14s ease;
}

.smc-bag .bag-item.is-busy .item-link,
.smc-bag .bag-item.is-busy .qty button {
	cursor: default;
}

/* The minus that lands on quantity 1: one 420 ms pulse on the stepper, then
   settle. Rows are re-rendered by the server, so the class is added to the
   fresh row AFTER the fragment swap and removed on animationend. */
.smc-bag .bag-item.is-last-qty .qty {
	animation: smc-last-qty .42s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes smc-last-qty {
	0% {
		transform: scale(1);
		border-color: var(--line);
		background: #fff;
	}

	30% {
		transform: scale(1.05);
		border-color: #bcdcc8;
		background: var(--green-soft);
		color: var(--green-2);
	}

	100% {
		transform: scale(1);
		border-color: var(--line);
		background: #fff;
	}
}

/* The live bag never dims the page. smc-cart.js no longer adds
   `.smc-cart-busy` to this root; this neutralises the /cart rule
   (`assets/css/smc-cart.css`) if anything ever adds it again. */
.smc-bag.smc-cart-busy {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* ---------- empty state ---------- */

.smc-bag .empty {
	padding: 64px 24px 60px;
	text-align: center;
}

.smc-bag .empty .empty-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 16px;
	background: #f4f5f6;
	color: var(--faint);
	display: grid;
	place-items: center;
}

.smc-bag .empty .empty-icon svg {
	width: 24px;
	height: 24px;
}

.smc-bag .empty h2 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.smc-bag .empty p {
	max-width: 340px;
	margin: 8px auto 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}

.smc-bag .empty .btn {
	margin-top: 20px;
	height: 42px;
	font-size: 12.5px;
}

/* ---------- pay-over-time note ---------- */

.smc-bag .finance {
	display: block;
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid #eceef1;
	border-radius: 12px;
	background: #fafbfc;
}

.smc-bag .finance-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.smc-bag .finance-marks {
	display: flex;
	flex-direction: row;
	gap: 5px;
	flex: none;
}

.smc-bag .fin-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
}

.smc-bag .fin-klarna {
	background: #ffb3c7;
	color: #0a0a0a;
}

.smc-bag .fin-affirm {
	background: #4a4af4;
	color: #fff;
	letter-spacing: .02em;
}

.smc-bag .finance-copy {
	flex: 1;
	min-width: 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--muted);
}

.smc-bag .finance-copy b {
	font-weight: 600;
	color: var(--ink);
}

.smc-bag .finance-more {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 99px;
	background: #fff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 550;
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .14s ease, color .14s ease;
}

.smc-bag .finance-more span {
	display: inline-block;
	font-size: 11px;
	line-height: 1;
	transition: transform .15s ease;
}

.smc-bag .finance-more[aria-expanded="true"] span {
	transform: rotate(45deg);
}

.smc-bag .finance-more:hover {
	border-color: #cfd2d6;
	color: var(--ink);
}

.smc-bag .finance-terms {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line-2);
	font-size: 10.5px;
	line-height: 1.55;
	color: var(--faint);
}

/* ---------- summary ---------- */

.smc-bag .summary {
	position: sticky;
	top: calc(var(--head-h) + 24px);
	margin-top: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 26px 26px;
	box-shadow: var(--shadow-card);
}

.smc-bag .sum-head {
	display: flex;
	align-items: center;
	/* BUG 01: the Edit-bag trigger is gone, so `.sum-head` has one child.
	   `space-between` left the heading alone at the start and reserved dead
	   space on the right; the heading now simply owns the row. */
	justify-content: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.smc-bag .sum-head h2 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.smc-bag .summary .upsell-link {
	margin-top: 0;
}

.smc-bag .summary .tear {
	margin: 22px -26px;
}

.smc-bag .summary .totals {
	margin-top: 2px;
}

.smc-bag .summary .promo {
	margin-top: 0;
	border-top: 0;
}

.smc-bag .summary .terms-note {
	margin-top: 10px;
}

/* Dotted tear: a clean dashed rule across the paper, no side notches. */
.smc-bag .tear {
	height: 1px;
	margin: 22px -26px;
	background-image: linear-gradient(90deg, #dfe2e6 55%, transparent 0);
	background-size: 7px 1px;
	background-repeat: repeat-x;
}

.smc-bag .totals {
	margin-top: 0;
}

.smc-bag .totals > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 0;
	font-size: 12.5px;
}

.smc-bag .totals dt {
	color: var(--muted);
}

.smc-bag .totals dd {
	color: var(--ink);
	font-weight: 550;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.smc-bag .totals .discount dt,
.smc-bag .totals .discount dd {
	color: var(--green-2);
}

.smc-bag .totals .grand {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.smc-bag .totals .grand dt {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.smc-bag .totals .grand dd {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.025em;
}

.smc-bag .totals .free {
	color: var(--green);
	font-weight: 600;
}

.smc-bag .totals .later {
	font-size: 10.5px;
	font-weight: 450;
	color: var(--faint);
}

.smc-bag .place-order {
	margin-top: 18px;
	height: 48px;
	font-size: 13.5px;
}

.smc-bag .place-order .amount {
	font-variant-numeric: tabular-nums;
}

.smc-bag .terms-note {
	margin-top: 10px;
	font-size: 9.5px;
	line-height: 1.5;
	color: var(--faint);
	text-align: center;
}

.smc-bag .terms-note a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- promo ---------- */

.smc-bag .promo {
	margin-top: 0;
	padding-top: 0;
}

.smc-bag .promo summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--green-2);
	cursor: pointer;
	list-style: none;
}

.smc-bag .promo summary::-webkit-details-marker {
	display: none;
}

.smc-bag .promo summary span {
	font-size: 13px;
	font-weight: 500;
	color: var(--faint);
}

.smc-bag .promo[open] summary {
	padding-bottom: 6px;
}

.smc-bag .promo-form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.smc-bag .promo-form .input {
	height: 40px;
	font-size: 12.5px;
}

.smc-bag .promo-form .btn {
	height: 40px;
	padding: 0 14px;
	font-size: 12px;
}

.smc-bag .promo-msg {
	margin-top: 7px;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--danger);
}

.smc-bag .promo-msg.ok {
	color: var(--green-2);
}

/* Applied coupons only exist live — the prototype has no applied state. */
.smc-bag .promo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.smc-bag .promo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 8px;
	border: 1px solid var(--green-line);
	border-radius: 99px;
	background: var(--green-soft);
	font-size: 10px;
	font-weight: 600;
	color: var(--green-2);
}

.smc-bag .promo-chip button {
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
}

/* ---------- mobile sticky checkout ---------- */

/* Structurally and typographically identical to the checkout bar
   (`assets/css/smc-co-v2.css` §15): 10px padding + 44px action + 1px rule =
   65px, plus the safe area. Only the content contract differs — the bag
   prints the server's plain-text total, exactly like `data-co-total`. */
.smc-bag .sticky-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: calc(65px + env(safe-area-inset-bottom));
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
}

.smc-bag .sticky-total {
	min-width: 0;
	flex: 1 1 auto;
}

.smc-bag .sticky-total span {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--faint);
}

.smc-bag .sticky-total b,
.smc-bag .sticky-total .smc-sticky-total {
	display: block;
	margin-top: 1px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Guard: `wc_price()` markup (if it ever reaches the bar) must not stack the
   currency symbol above the amount — that was the v3 defect. */
.smc-bag .sticky-total .woocommerce-Price-amount,
.smc-bag .sticky-total .woocommerce-Price-currencySymbol {
	display: inline;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	white-space: nowrap;
}

.smc-bag .sticky-bar .btn {
	height: 44px;
	padding: 0 20px;
	font-size: 13px;
	flex: none;
}

/* ---------- responsive (prototype 905-1144) ---------- */

@media (prefers-reduced-motion: reduce) {
	.smc-bag .ship-track i {
		transition: none;
	}

	.smc-bag .ship-box:not(.is-unlocked) .ship-track i::before,
	.smc-bag .ship-box.is-celebrating .ship-badge,
	.smc-bag .ship-box.is-celebrating .ship-icon {
		animation: none;
	}

	/* The last-quantity state still settles — it just does not move. */
	.smc-bag .bag-item.is-last-qty .qty {
		animation: none;
		border-color: #bcdcc8;
	}

	.smc-bag .bag-item.is-busy .qty,
	.smc-bag .bag-item.is-busy .item-links,
	.smc-bag .bag-item.is-pending .qty {
		transition: none;
	}

	.smc-bag .bag-item.is-removing {
		will-change: auto;
	}
}

@media (max-width: 1180px) {
	.smc-bag .bag-grid {
		grid-template-columns: minmax(0, 1fr) 372px;
		gap: 36px;
	}
}

@media (max-width: 980px) {
	.smc-bag .bag-grid {
		grid-template-columns: 1fr;
	}

	.smc-bag .summary {
		position: static;
		margin-top: 8px;
		padding: 20px 20px 22px;
	}

	.smc-bag .summary .tear {
		margin: 20px -20px;
	}

	.smc-bag .sticky-bar {
		display: flex;
	}

	.smc-bag .page {
		padding-bottom: 96px;
	}

	/* The sticky checkout bar is fixed over the bottom of the page: the rail
	   must clear it as well as keep the theme's section gap. */
	.smc-bag .rail-shell,
	.smc-bag .sm-hp-prod-car {
		margin-bottom: calc(65px + env(safe-area-inset-bottom) + 24px);
	}
}

@media (max-width: 760px) {
	.smc-bag {
		--gut: 20px;
	}

	.smc-bag .page {
		padding-top: 24px;
		padding-bottom: 56px;
	}

	.smc-bag .bag-head {
		grid-template-columns: 1fr;
		grid-template-areas: "title" "link";
		align-items: start;
		gap: 8px;
		margin-bottom: 20px;
	}

	.smc-bag .bag-title {
		font-size: 32px;
		line-height: 1.02;
	}

	.smc-bag .bag-continue {
		justify-self: start;
		align-self: start;
		font-size: 11.5px;
	}

	.smc-bag .ship-box {
		padding: 15px 14px 14px;
		margin-bottom: 12px;
		border-radius: 16px;
	}

	.smc-bag .ship-icon {
		width: 46px;
		height: 46px;
		border-radius: 14px;
	}

	.smc-bag .ship-icon svg {
		width: 24px;
		height: 24px;
	}

	.smc-bag .ship-title {
		font-size: 13px;
	}

	.smc-bag .ship-sub {
		font-size: 11px;
	}

	.smc-bag .ship-cta {
		font-size: 10.5px;
	}

	.smc-bag .bag-item {
		grid-template-columns: 92px minmax(0, 1fr);
		grid-template-areas: "thumb top" "foot foot";
		gap: 10px 14px;
		padding: 14px;
	}

	.smc-bag .thumb {
		grid-area: thumb;
		align-self: start;
		width: 92px;
		border-radius: 10px;
	}

	.smc-bag .item-body {
		display: contents;
	}

	.smc-bag .item-top {
		grid-area: top;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 6px;
	}

	.smc-bag .item-name {
		font-size: 14.5px;
	}

	.smc-bag .item-variant {
		font-size: 11.5px;
		margin-top: 2px;
	}

	.smc-bag .item-price {
		align-self: stretch;
		font-size: 14px;
		text-align: right;
		margin-top: 6px;
	}

	.smc-bag .item-foot {
		grid-area: foot;
		margin-top: 0;
		padding-top: 10px;
		border-top: 0;
		gap: 10px;
		flex-wrap: nowrap;
		align-items: center;
	}

	.smc-bag .item-links {
		gap: 12px;
	}

	.smc-bag .item-link {
		font-size: 11px;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* 36px stepper, 40px-wide targets (the 4px the height gives up goes to
	   the row's spacing, so the thumb + footer still fit at 320). */
	.smc-bag .bag-item .qty {
		height: 36px;
	}

	.smc-bag .bag-item .qty button {
		width: 40px;
		height: 36px;
	}

	.smc-bag .bag-item .qty output {
		min-width: 24px;
		font-size: 12.5px;
	}

	.smc-bag .totals .grand dd {
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	.smc-bag .finance {
		gap: 8px;
	}

	.smc-bag .finance-marks {
		order: 1;
	}

	.smc-bag .finance-more {
		order: 2;
		margin-left: auto;
	}

	.smc-bag .finance-copy {
		order: 3;
		flex-basis: 100%;
	}

	.smc-bag .item-top {
		gap: 10px;
	}

	.smc-bag .wrap {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 400px) {
	.smc-bag .wrap {
		padding-left: 14px;
		padding-right: 14px;
	}

	.smc-bag .bag-item {
		grid-template-columns: 88px minmax(0, 1fr);
		grid-template-areas: "thumb top" "foot foot";
		gap: 10px 13px;
	}

	.smc-bag .thumb {
		width: 88px;
	}

	.smc-bag .item-price {
		font-size: 14px;
	}
}

@media (max-width: 380px) {
	.smc-bag .wrap {
		padding-left: 12px;
		padding-right: 12px;
	}

	.smc-bag .bag-item {
		grid-template-columns: 68px minmax(0, 1fr);
		grid-template-areas: "thumb top" "foot foot";
		gap: 10px 11px;
		padding: 12px;
	}

	.smc-bag .thumb {
		width: 68px;
		border-radius: 9px;
	}

	.smc-bag .item-name {
		font-size: 13px;
		line-height: 1.25;
	}

	.smc-bag .item-variant {
		font-size: 10.5px;
		margin-top: 1px;
	}

	.smc-bag .item-price {
		font-size: 12.5px;
		margin-top: 5px;
	}

	.smc-bag .item-unit {
		display: none;
	}

	.smc-bag .item-foot {
		padding-top: 10px;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.smc-bag .bag-item .qty {
		height: 34px;
	}

	.smc-bag .bag-item .qty button {
		width: 36px;
		height: 34px;
	}

	.smc-bag .bag-item .qty output {
		min-width: 20px;
		font-size: 11.5px;
	}

	.smc-bag .item-links {
		gap: 10px;
		flex-wrap: nowrap;
	}

	.smc-bag .item-link {
		font-size: 10.5px;
		min-height: 34px !important;
	}

	.smc-bag .ship-row {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
		grid-template-areas: "icon copy" "cta cta";
		gap: 10px 12px;
	}

	.smc-bag .ship-icon {
		grid-area: icon;
		width: 42px;
		height: 42px;
		border-radius: 13px;
	}

	.smc-bag .ship-icon svg {
		width: 22px;
		height: 22px;
	}

	.smc-bag .ship-copy {
		grid-area: copy;
	}

	.smc-bag .ship-cta {
		grid-area: cta;
		justify-self: start;
		margin-top: 2px;
	}

	.smc-bag .ship-badge {
		display: none;
	}

	.smc-bag .ship-track {
		margin-top: 12px;
	}
}

/* ===========================================================================
   v6 — 2026-11-01
   1. The setup rail sits on the page tone on the bag, and the page ends
      closer to it.
   2. The free-delivery unlock is a one-time celebration.
   =========================================================================== */

/* The rail is a theme block with its own `is-white` panel (#f5f5f7). On a bag
   page whose tone is #f9f9fa that panel ends in a visible seam before the
   dark pre-footer, so the rail takes the page tone here — the same call the
   shop and archive surfaces already make. */
.smc-bag .sm-hp-prod-car,
.smc-bag .sm-hp-prod-car.is-white,
.smc-bag .sm-hp-prod-car.is-gray {
	background: transparent;
}

/* End of the bag: 56px of page tone under the rail foot, not the 112px the
   block's own 56px padding plus 56px margin left behind. */
.smc-bag .sm-hp-prod-car__inner {
	padding-bottom: 20px;
}

.smc-bag .sm-hp-prod-car {
	margin-bottom: 36px;
}

/* ---------------------------------------------------------------------------
   Free delivery unlocked: one celebration, then quiet
   `is-celebrating` is added by smc-bag-progress.js only on the crossing.
   --------------------------------------------------------------------------- */
@keyframes smc-ship-pop {
	0% {
		transform: scale(.55);
		opacity: 0;
	}
	62% {
		transform: scale(1.08);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes smc-ship-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(4, 120, 87, .22);
	}
	100% {
		box-shadow: 0 0 0 10px rgba(4, 120, 87, 0);
	}
}

.smc-bag .ship-box.is-unlocked.is-celebrating {
	animation: smc-ship-ring .9s cubic-bezier(.22, .61, .36, 1) both;
}

.smc-bag .ship-box.is-unlocked.is-celebrating .ship-check {
	transform-origin: 50% 50%;
	animation: smc-ship-pop .42s cubic-bezier(.22, 1, .36, 1) both;
}

@media (max-width: 760px) {
	/* The sticky checkout bar still owns its clearance; only the rail's own
	   trailing padding is trimmed. */
	.smc-bag .sm-hp-prod-car {
		margin-bottom: calc(65px + env(safe-area-inset-bottom) + 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.smc-bag .ship-box.is-unlocked.is-celebrating,
	.smc-bag .ship-box.is-unlocked.is-celebrating .ship-check {
		animation: none;
	}
}

/* ===========================================================================
   v7 — 2026-11-01
   1. The setup rail follows the site rail, not the block's 4-up defaults.
   2. The bag and the checkout share one column split.
   =========================================================================== */

/* ---- 1. Setup rail ------------------------------------------------ */
/* Block defaults are a 4-up product carousel: 16px gap, mandatory snap, cards
   sized by a percentage so a 1184 column never lands on the rail's own card
   width. The site rail is 298px cells, a 24px gap and proximity snap, which is
   what the PDP rails use. */
.smc-bag .sm-hp-prod-car__track {
	gap: 24px;
	scroll-snap-type: x proximity;
	padding-top: 4px;
	padding-bottom: 44px;
}

.smc-bag .sm-hp-prod-car__item {
	flex: 0 0 298px;
	max-width: 298px;
}

/* The arrow states are the task's own rule: prev is off at the start, next at
   the end, and neither is ever invisible — a disabled arrow still reads. */
.smc-bag .sm-rail-arrow[disabled] {
	opacity: .32;
	cursor: default;
}

.smc-bag .sm-rail-arrow:not([disabled]):hover {
	border-color: #111113;
}

/* ---- 2. One column split ----------------------------------------- */
/* Bag and checkout were already identical (1fr + 372px + 36px); the reader
   column was too wide next to the summary. Shared: 48px gap, 384px summary. */
.smc-bag .bag-grid {
	grid-template-columns: minmax(0, 1fr) 384px;
	gap: 48px;
}

@media (max-width: 900px) {
	.smc-bag .bag-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ===========================================================================
   v8 — 2026-11-01
   The rail card is fixed on a desktop track and a share of the phone track,
   the way every other rail on the site behaves.
   =========================================================================== */

@media (max-width: 767px) {
	.smc-bag .sm-hp-prod-car__track {
		gap: 16px;
	}

	.smc-bag .sm-hp-prod-car__item {
		flex: 0 0 78%;
		max-width: 78%;
	}
}

/* ===========================================================================
   v9 — 2026-11-01
   "Complete your setup" is the same control on both pages: the checkout chip.
   =========================================================================== */

.smc-bag .summary .upsell-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 33px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #fff;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1;
	color: var(--green-2);
	white-space: nowrap;
	cursor: pointer;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.smc-bag .summary .upsell-link .plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.smc-bag .summary .upsell-link svg {
	width: 12px;
	height: 12px;
	flex: none;
}

.smc-bag .summary .upsell-link:hover {
	background: var(--green-soft);
	border-color: var(--green-line);
}

/* ===========================================================================
   v10 — 2026-11-01
   1. The summary lists what is in the bag, in text, with line prices.
   2. The stepper answers the finger immediately; the ceiling is explicit.
   =========================================================================== */

/* ---- 1. Summary lines -------------------------------------------- */
.smc-bag .summary .sum-items {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.smc-bag .summary .sum-items li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: 10px;
}

.smc-bag .summary .sum-item-copy {
	min-width: 0;
	display: block;
}

.smc-bag .summary .sum-item-name {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.smc-bag .summary .sum-item-meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.smc-bag .summary .sum-item-qty {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.smc-bag .summary .sum-item-price {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- 2. Stepper: touch first ------------------------------------- */
/* The press is feedback, not a request: it lands on pointerdown and never
   waits for the server. 90ms in, 140ms out — a touch, not a bounce. */
.smc-bag .qty button {
	transition: transform .14s cubic-bezier(.22, 1, .36, 1), background-color .12s ease, color .12s ease;
}

.smc-bag .qty button:active:not(:disabled) {
	transform: scale(.9);
	background: #eceef1;
}

.smc-bag .qty button:active:not(:disabled) svg {
	transform: scale(.94);
}

.smc-bag .qty button svg {
	transition: transform .12s ease;
}

/* At the ceiling the plus stays pressable and quiet: a disabled control is
   a dead end and removes the only route to the B2B team. The toast explains
   the limit on press. */
.smc-bag .qty button[data-smc-qty-inc].is-at-max,
.smc-bag .bag-item.is-max-qty .qty button[data-smc-qty-inc] {
	opacity: .42;
	cursor: pointer;
}

.smc-bag .qty button[data-smc-qty-inc]:disabled {
	opacity: .35;
	cursor: default;
}

.smc-bag .qty {
	position: relative;
}

.smc-bag .is-max-qty .qty-note,
.smc-bag .qty .qty-note {
	display: none;
}

.smc-bag .is-max-qty .qty-note {
	display: inline;
	margin-left: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--faint);
}

/* ===========================================================================
   v11 — 2026-11-01
   The bag summary follows the checkout slip's rhythm, not a bag-only one:
   head -> 16px -> lines 16px apart -> 18px -> the chip -> 26px -> the tear.
   "Complete your setup" is the checkout chip (green-soft fill, green line),
   and the quantity moved out of its own column into the spec sentence.
   =========================================================================== */

/* The list owns the air under the title, exactly as `.slip-items` does. */
.smc-bag .sum-head {
	margin-bottom: 0;
}

.smc-bag .summary .sum-items {
	margin-top: 16px;
	gap: 16px;
}

.smc-bag .summary .sum-items li {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
}

.smc-bag .summary .sum-item-name {
	line-height: 1.35;
}

.smc-bag .summary .sum-item-meta {
	margin-top: 3px;
	font-size: 10.5px;
	line-height: 1.4;
}

.smc-bag .summary .sum-item-price {
	padding-top: 1px;
}

/* ---- The chip: the checkout action row ---------------------------- */
.smc-bag .summary .sum-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 18px;
}

.smc-bag .summary .sum-actions .upsell-link,
.smc-bag .summary .sum-actions .upsell-link:hover {
	background: var(--green-soft);
	border-color: var(--green-line);
	color: var(--green-2);
}

/* Breathing space between the action row and the tear (checkout: 26px). */
.smc-bag .summary .sum-actions + .tear {
	margin-top: 26px;
}

@media (max-width: 900px) {
	.smc-bag .summary .sum-items {
		margin-top: 12px;
		gap: 14px;
	}
}

/* The card padding is checkout's paper body, not a bag variant: 22/26/24 on
   desktop and 16/16/18 on the phone, so both summaries open on the same
   breathing room. The tear keeps its full-bleed track. */
.smc-bag .summary {
	padding: 22px 26px 24px;
}

@media (max-width: 980px) {
	.smc-bag .summary {
		padding: 16px 16px 18px;
	}

	.smc-bag .summary .tear {
		margin-left: -16px;
		margin-right: -16px;
	}
}

/* The shared modal trigger styles `.upsell-link[data-smc-modal-open]` as a
   full-width banner. Inside the summary it is the checkout chip: content
   width, centred label, no white plus tile. */
.smc-bag .summary .sum-actions .upsell-link {
	width: auto;
	height: 33px;
	margin-top: 0;
	padding: 0 12px;
	gap: 5px;
	border-radius: 9px;
	text-align: center;
}

.smc-bag .summary .sum-actions .upsell-link .plus {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
}

.smc-bag .summary .sum-actions .upsell-link svg {
	width: 12px;
	height: 12px;
}

/* ===========================================================================
   v12 — 2026-11-01
   Promo: the disclosure opens on a measured height, the answer sits under the
   field, and the plus turns into a close mark. No page-top notices.
   =========================================================================== */

.smc-bag .promo .promo-body {
	transform-origin: top center;
}

.smc-bag .promo.is-animating .promo-body {
	will-change: height, opacity, transform;
}

/* The + becomes × when the block is open. */
.smc-bag .promo summary span {
	display: inline-block;
	transition: transform .26s cubic-bezier(.22, 1, .36, 1), color .16s ease;
}

.smc-bag .promo[open] summary span {
	transform: rotate(45deg);
	color: var(--muted);
}

.smc-bag .promo summary:hover span {
	color: var(--muted);
}

/* The answer is part of the block, under the field. */
.smc-bag .promo-msg {
	margin-top: 8px;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--danger);
}

.smc-bag .promo-msg:empty {
	display: none;
}

.smc-bag .promo-msg:not(:empty) {
	animation: smcPromoMsgIn .24s cubic-bezier(.22, 1, .36, 1) both;
}

.smc-bag .promo-msg.is-success {
	color: var(--green-2);
}

.smc-bag .promo-form .btn.is-pending {
	opacity: .72;
	cursor: default;
}

@keyframes smcPromoMsgIn {
	from {
		opacity: 0;
		transform: translateY(-2px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.smc-bag .promo summary span {
		transition: none;
	}

	.smc-bag .promo-msg:not(:empty) {
		animation: none;
	}
}

/* ===========================================================================
   v13 — 2026-11-03
   The discount row reads like the checkout slip's: muted label, the code in a
   light pill, the remove cross beside it, then air, then the amount on the
   content edge. The cross delegates through `data-smc-remove-coupon`, so it is
   the only removal affordance on the page — the duplicate chip under the promo
   form is gone, and the code never prints twice.
   One rule standard: the grand row's solid divider bleeds to the card edges
   like the dotted tear (26px desktop, 16px at 980px — the summary's own
   horizontal padding), so no rule starts inside the card.
   =========================================================================== */

.smc-bag .totals .discount dt {
	/* Three tracks: label, code, cross. The middle one is `minmax(0,
	   max-content)`, so the pill hugs a short code and shrinks (truncating)
	   only when the row runs out of width; `white-space: nowrap` would
	   otherwise make the pill's min-content the whole string. */
	display: grid;
	grid-template-columns: auto minmax(0, max-content) auto;
	justify-content: start;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--muted);
	white-space: nowrap;
}

/* A pill, never a competitor to the money: a long code truncates instead of
   pushing the amount off the content edge. */
.smc-bag .totals .discount .promo-code {
	display: block;
	min-width: 0;
	max-width: 100%;
	height: 20px;
	padding: 0 8px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #f6f7f8;
	font-size: 10px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: .06em;
	color: #3f4247;
	text-transform: uppercase;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.smc-bag .totals .discount .smc-coupon-remove {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	font-family: inherit;
	line-height: 1;
	color: var(--faint);
	cursor: pointer;
	transition: background .13s ease, color .13s ease;
}

.smc-bag .totals .discount .smc-coupon-remove svg {
	width: 11px;
	height: 11px;
}

.smc-bag .totals .discount .smc-coupon-remove:hover {
	background: #fdf0ee;
	color: var(--danger);
}

.smc-bag .totals .discount .smc-coupon-remove[disabled] {
	opacity: .45;
	cursor: default;
}

.smc-bag .totals .discount dd {
	display: block;
	flex: 0 0 auto;
	white-space: nowrap;
}

.smc-bag .totals .discount .discount-amount {
	font-variant-numeric: tabular-nums;
}

/* The grand row's rule, full-bleed (see `.tear`: 26px desktop, 16px at 980px).
   The border is removed so the row can never carry two lines. */
.smc-bag .totals .grand {
	--bag-rule-bleed: 26px;
	position: relative;
	border-top: 0;
}

.smc-bag .totals .grand::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(-1 * var(--bag-rule-bleed));
	right: calc(-1 * var(--bag-rule-bleed));
	height: 1px;
	background: var(--line);
}

@media (max-width: 980px) {
	.smc-bag .totals .grand {
		--bag-rule-bleed: 16px;
	}
}

/* ===========================================================================
   v14 — 2026-11-03
   Coupon states that are not errors, and a zero-value discount row.

   "Already applied" / "no longer applied" keep the muted notice tone instead
   of the error red. A free-shipping coupon contributes 0.00 to the discount
   total, so its row says "Free shipping" rather than "−$0.00".
   =========================================================================== */

.smc-bag .promo-msg.is-notice {
	color: var(--muted);
}

.smc-bag .totals .discount-amount.is-zero {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
}


/* ===========================================================================
   v15 - 2026-11-03
   The bag summary follows the checkout slip exactly: the same 384px column,
   the same 64px gap (32px at 1180px, 24px stacked), the same coupon row with
   the code and the remove cross inside one pill, and the same full-bleed
   rules. The "Complete your setup" chip keeps the checkout's 34px box.
   =========================================================================== */

.smc-bag .bag-grid {
	grid-template-columns: minmax(0, 1fr) 384px;
	gap: 64px;
}

@media (max-width: 1180px) {
	.smc-bag .bag-grid {
		grid-template-columns: minmax(0, 1fr) 348px;
		gap: 32px;
	}
}

@media (max-width: 980px) {
	.smc-bag .bag-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* The pill now owns the cross: two tracks (label, pill), not three. */
.smc-bag .totals .discount dt {
	grid-template-columns: auto minmax(0, max-content);
}

.smc-bag .totals .discount .promo-code {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 22px;
	padding: 0 2px 0 9px;
	max-width: 100%;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #f6f7f8;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .06em;
	color: #3f4247;
	text-transform: uppercase;
}

.smc-bag .totals .discount .promo-code-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.smc-bag .totals .discount .smc-coupon-remove {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 0;
	line-height: 1;
	color: var(--faint);
	cursor: pointer;
	transition: background .13s ease, color .13s ease;
}

.smc-bag .totals .discount .smc-coupon-remove svg {
	width: 9px;
	height: 9px;
}

.smc-bag .totals .discount .smc-coupon-remove:hover {
	background: #fdf0ee;
	color: var(--danger);
}

@media (max-width: 980px) {
	.smc-bag .totals .discount .promo-code {
		height: 24px;
	}

	.smc-bag .totals .discount .smc-coupon-remove {
		width: 20px;
		height: 20px;
	}
}

/* The summary list is name/meta + price; the old third track was empty. */
.smc-bag .summary .sum-items li {
	grid-template-columns: minmax(0, 1fr) auto;
}

/* Checkout chip rhythm: the same 34px box as `.co-sum-actions .co-chip`. */
.smc-bag .summary .sum-actions .upsell-link {
	height: 34px;
}

/* The promo block sits above Total on both pages. */
.smc-bag .totals + .promo {
	margin-top: 16px;
}

.smc-bag .promo + .totals {
	margin-top: 12px;
}

.smc-bag .totals.is-total .grand {
	margin-top: 0;
	padding-top: 16px;
}


/* The checkout summary chip is a white secondary; the shared trigger rule
   painted it green-soft. Match `.co-sum-actions .co-chip.is-primary`. */
.smc-bag .summary .sum-actions .upsell-link,
.smc-bag .summary .sum-actions .upsell-link.is-primary {
	background: #fff;
	border-color: var(--line);
	color: var(--green-2);
}

.smc-bag .summary .sum-actions .upsell-link:hover,
.smc-bag .summary .sum-actions .upsell-link.is-primary:hover {
	background: var(--green-soft);
	border-color: var(--green-line);
	color: var(--green);
}


/* Match the checkout's 1000px stack so the two grids change together. */
@media (max-width: 1000px) {
	.smc-bag .bag-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


/* The bag template hides every scrollbar; checkout does not, so the two pages
   sat 7.5px apart and the 390px summary was 19px wider. Keep the inner rails
   clean but give the document the same 15px scrollbar as checkout. */
html::-webkit-scrollbar {
	display: block;
	width: 15px;
}

html::-webkit-scrollbar-track {
	background: #fff;
}

html::-webkit-scrollbar-thumb {
	background: #c9ccd1;
	border: 3px solid #fff;
	border-radius: 8px;
}

html {
	scrollbar-width: auto;
	scrollbar-color: #c9ccd1 #fff;
}

/* Checkout uses 16px page gutters at 400 and below; the bag used 14/12. */
@media (max-width: 400px) {
	.smc-bag .wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 380px) {
	.smc-bag .wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}