/* ===========================================================================
   Checkout — payment step.

   The page had grown three or four visual languages at once: Bootstrap card
   defaults, an IKEA-derived blue picker, ad-hoc inline styles, and float-based
   summary rows. This sheet gives the whole step one language, modelled on the
   Shopify checkout: a narrow two-column frame, grouped option lists with
   hairline dividers instead of free-floating cards, compact review rows with
   Change links, and a sticky order summary.

   Deliberately styling-only. Every DOM contract the checkout depends on is left
   alone — .sub-total/.total/.shipping-total/.tax-total/.surcharge-total and
   friends (jQuery-updated by the React bundles), #order-summary (AJAX
   replaced), #address/.shipping-address-column/.billing-address-column,
   .address-street/.address-city (read by the surcharge popup),
   #react-local-pickup, #react-moneris-pay, .moneris, #monerisCheckout,
   .pe-gw-card/[data-pe-method]/[data-pe-panel], and .js-loading-overlay-wrap.

   Palette follows the pe system: ink #16181b, crimson #a7001a, warm neutrals.
   =========================================================================== */

:root {
	--co-ink: #16181b;
	--co-muted: #6b6560;
	--co-accent: #a7001a;
	--co-accent-dark: #8c0016;
	--co-accent-wash: #fdf7f7;
	--co-line: #e4e0da;
	--co-line-strong: #c9c3ba;
	--co-surface: #fff;
	--co-surface-alt: #f7f5f3;
	--co-radius: 12px;
	--co-radius-sm: 9px;
}

/* ===========================================================================
   PART 1 — payment picker base.
   Moved verbatim out of the inline <style> in
   Views/CheckoutPaymentMethod/_PaymentMethod.cshtml. It sits ahead of the
   redesign layer below so the cascade resolves naturally: base first, redesign
   second, no !important needed.
   =========================================================================== */

.form-group-medium .entry-feedback-wrapper, .form-group-medium select.form-control {
	width: 100% !important;
}

select.form-control {
	border: 1px solid #ddd;
}

.input-group-btn {
}

iframe#monerisCheckout-Frame {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	z-index: 9999;
}

/* === PE payment-method picker (redesign) ============================================= */

.pe-pay-heading {
	font-size: 1rem;
	margin: 0 0 14px;
}

	.pe-pay-heading .fa-lock {
		color: #00ac6a;
	}

.pe-pay-heading-by {
	color: #63676e;
	font-weight: 600;
}

/* Main gateway cards */
.pe-gw-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.pe-gw-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	margin-bottom: 0;
	transition: border-color .15s ease, background .15s ease;
}

	.pe-gw-card:hover {
		border-color: #c9c3ba;
	}

	.pe-gw-card input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	/* :focus-within fires on mouse clicks too, so selecting a row drew a crimson ring
	   around the whole row - offset outside a borderless list item, so it sat proud of
	   the list's own edges and read as misalignment.

	   The ring now lives on the RADIO, via :focus-visible, so it appears for keyboard
	   navigation and not for mouse. Deliberately not .pe-gw-card:has(input:focus-visible):
	   that rule is dropped at parse time here, which silently left keyboard users with
	   no focus indicator at all - checked by enumerating the CSSOM rather than trusting
	   that it worked. Ink, not crimson: the crimson wash already means "selected", and
	   this ring means "focused". */
	.pe-gw-card input[type="radio"]:focus-visible {
		outline: 2px solid #16181b;
		outline-offset: 2px;
	}

.pe-gw-radio {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid #c3c9cf;
	border-radius: 50%;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pe-gw-card--active {
	border-color: #a7001a;
	box-shadow: 0 0 0 1px #a7001a inset;
	background: #fdf7f7;
}

	.pe-gw-card--active .pe-gw-radio,
	.pe-gw-card--single .pe-gw-radio {
		border-color: #a7001a;
		box-shadow: inset 0 0 0 5px #a7001a;
	}

.pe-gw-card--single {
	cursor: default;
}

.pe-gw-main {
	flex: 1;
	min-width: 0;
}

.pe-gw-titlerow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pe-gw-title {
	font-weight: 700;
	font-size: 1.05rem;
	color: #16181b;
	line-height: 1.2;
}

.pe-gw-chip {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #63676e;
	background: #f0f1f3;
	border-radius: 4px;
	padding: 2px 8px;
	line-height: 1.4;
}

.pe-gw-card--active .pe-gw-chip,
.pe-gw-card--single .pe-gw-chip {
	color: #a7001a;
	background: #fdf0f2;
}

/* Selected-card detail row: wallet badges */
.pe-gw-detail {
	display: none;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #efe9e4;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pe-gw-card--active .pe-gw-detail,
.pe-gw-card--single .pe-gw-detail {
	display: flex;
}

.pe-wallets {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pe-wallet-badge svg {
	display: block;
	height: 27px;
	width: auto;
}

.pe-gw-detail-note {
	font-size: .78rem;
	font-weight: 600;
	color: #63676e;
}







/* "More ways to pay" */
.pe-express {
	margin: 4px 0 18px;
}

.pe-express-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

	.pe-express-head span {
		font-size: .72rem;
		font-weight: 800;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #8a8e95;
		white-space: nowrap;
	}

	.pe-express-head:after {
		content: "";
		flex: 1;
		height: 1px;
		background: #e4e3dd;
	}

.pe-express-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pe-express-tile {
	flex: 1 1 200px;
	max-width: 280px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	margin-bottom: 0;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

	.pe-express-tile:hover {
		border-color: #c9c3ba;
		text-decoration: none;
	}

	.pe-express-tile input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.pe-express-tile input[type="radio"]:focus-visible,
	.pe-express-tile:focus-visible {
		outline: 2px solid #16181b;
		outline-offset: 2px;
	}

	.pe-express-tile.pe-gw-card--active {
		border-color: #a7001a;
		box-shadow: 0 0 0 1px #a7001a inset;
		background: #fdf7f7;
	}

.pe-express-logo {
	height: 24px;
}

.pe-express-tile svg {
	height: 24px;
	width: auto;
}

/* Two-step PayPal reveal: exactly one of the "Other Payment Method" button and the
   PayPal tile is visible at a time, driven by pe-express--paypal-revealed on .pe-express
   (set server-side when PayPal is the default method, or by the button's click handler). */
.pe-express-tile-other {
	font-family: inherit;
	font-size: .9rem;
	font-weight: 700;
	color: #17335b;
}

.pe-express:not(.pe-express--paypal-revealed) #pe-gw-card-paypal {
	display: none;
}

.pe-express--paypal-revealed #pe-express-other {
	display: none;
}

/* Applied for ~400ms right after the reveal; keyboard (focus + Space) is unaffected. */
.pe-express-tile--settling {
	pointer-events: none;
}

/* The alternative-payments partial renders its own col-12 col-lg-6 wrapper - let it
   span the full express section instead. */
.pe-express-alt {
	margin-top: 2px;
}

	.pe-express-alt > div[class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.pe-express-alt .accordion .card.mt-4 {
		margin-top: 0 !important;
	}

/* Mobile: each "More ways to pay" tile spans the full row */
@@media (max-width: 576px) {
	.pe-express-tile {
		max-width: none;
		flex: 1 1 100%;
	}
}

/* PayPal/Stripe/Helcim selected: hide only the Moneris PAY NOW button (a direct child of
   .moneris); the delivery choice and OK-to-Email stay visible and serve every payment
   method. A CSS rule (not inline style) so it still applies after React re-renders the
   button. */
#pe-method-panel-card.pe-paypal-selected .moneris > .card.flex {
	display: none;
}

a#continue-shopping {
	background: #666;
	font-size: 1rem;
	padding: 15px 20px;
	border-radius: 5px;
	color: white !important;
}

	/* PAY NOW is a primereact <Button> that also carries Bootstrap's btn btn-primary, so it was
	   rendering in Bootstrap blue (#007bff) - the loudest thing on a page whose accent is crimson.
	   Scoped to .moneris so it beats .btn-primary on specificity without an !important war, and so
	   it survives React re-rendering the button. */
	/* matches the site's primary button: crimson, 11px radius, uppercase, weight 800 */
	.moneris button.p-button {
		padding: 15px 20px;
		border: 0;
		border-radius: 11px;
		background: #a7001a;
		color: #fff;
		font-size: 1rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .03em;
		transition: background-color .15s ease, box-shadow .15s ease;
	}

		.moneris button.p-button:hover,
		.moneris button.p-button:focus {
			background: #8c0016;
			box-shadow: 0 2px 12px rgba(167, 0, 26, .25);
		}

		.moneris button.p-button:focus-visible {
			outline: 2px solid #16181b;
			outline-offset: 2px;
		}

		.moneris button.p-button:disabled {
			background: #c9c3ba;
			box-shadow: none;
		}

/* ===========================================================================
   PART 2 — checkout redesign layer.
   =========================================================================== */

/* --- page frame ---------------------------------------------------------- */

.checkout-page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 16px 56px;
	color: var(--co-ink);
}

/* One gutter for the whole page, header included.

   Two systems were stacking: the header puts its logo on Bootstrap's own 15px
   grid gutter, while .checkout-page added a further 16px of padding INSIDE that,
   so its rows (-15px margin) and columns (+15px padding) landed content at 31px.
   Measured at 375: logo 15, page frame 15, columns 16, content boxes 31 - four
   different left edges down one screen, which is what made the header, the
   summary and the blocks below it all look out of line.

   Dropping the horizontal padding at this width lets the grid gutter alone set
   the edge, so everything meets the logo at 15. */
@media (max-width: 991px) {
	.checkout-page {
		padding-left: 0;
		padding-right: 0;
		/* the header is a logo bar, not a hero - it needs a step, not a gap */
		padding-top: 8px;
		/* 56px was set for the payment step, where the page ends on a control. Here
		   it ends on a finished summary, and 56px of it plus the wrapper's own 18px
		   left the footer floating a screen-inch clear of the last thing on the page. */
		padding-bottom: 24px;
	}

	/* the summary column carries Bootstrap's p-0 in the markup, so it was leaning on
	   the page padding above to stay inset - without it the panel goes full bleed
	   while everything else sits at the gutter */
	.checkout-page > .row > .col-12.col-lg-4 {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}

	.checkout-page .checkout-content > .row {
		margin-left: 0;
		margin-right: 0;
	}

/* right column: Shopify keeps the summary on a tinted panel, divided from the
   form by a hairline rather than a drop shadow. */
.checkout-page > .row > .col-12.col-lg-4 {
	position: relative;
}

@media (min-width: 992px) {
	.checkout-page > .row > .col-md-8 {
		padding-right: 40px;
	}

	/* Stick the whole COLUMN, not just the summary panel. Sticking the panel alone made it
	   slide down over its own siblings - the PayBright/Affirm estimator ended up rendering on
	   top of the Tax row. Sticking the column keeps the panel and the callouts under it moving
	   as one block; align-self stops the flex row stretching it to full height, which would
	   leave nothing to stick. */
	.checkout-page > .row > .col-12.col-lg-4 {
		position: sticky;
		top: 20px;
		align-self: flex-start;
	}
}

/* the summary panel carries an inline background:#eee from the view; override
   without touching the markup */
.checkout-page > .row > .col-12.col-lg-4 > div[style*="background"] {
	background: var(--co-surface-alt) !important;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	padding: 16px 18px !important;
}

/* --- vertical rhythm ------------------------------------------------------ */
/* Measured at 375 before this: 170px of chrome between the header and the first
   block, to show one line reading "Show order summary  $4,856.99". Three separate
   causes, none of them the content.

   1. #maincontent carries a site-wide 40px top margin. Checkout has no hero or
      breadcrumb to breathe under - the form starts immediately - so it only pushed
      the page down. Scoped with :has() so nothing else on the site moves; browsers
      without :has() simply keep the 40px. */
#maincontent:has(.checkout-page) {
	margin-top: 16px !important;
}

/* 2. The summary panel wrapped a 36px toggle in 83px of padding and margin:
      20 (panel) + 10 (.order-block) + 4 + 4 (.os-toggle) + 10 + 15 (.order-block
      margin) + 20. The block's own padding and trailing margin do nothing here -
      the panel already provides the inset. */
.checkout-page .order-block {
	/* Horizontal padding too, not just vertical. On the payment step its 10px was
	   hidden inside the tinted panel; on the cart there is no panel, so it pushed the
	   summary to x25 while everything else sat at x15. */
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* 3. The gap BELOW the panel was the same padding and margin measured from the
      other side, so it closes with them. This keeps a deliberate step instead. */
@media (max-width: 991px) {
	.checkout-page > .row > .col-12.col-lg-4 {
		margin-bottom: 16px;
	}

	.checkout-page > .row > .col-12.col-lg-4 > div[style*="background"] {
		padding: 12px 14px !important;
	}

	.os-toggle {
		padding: 2px 0 !important;
	}
}

/* --- one content column, one left edge ----------------------------------- */
/* Every block in the left column was landing on a different x. The review box and
   the trust strip sat at 59px while the payment list, headings, delivery picker,
   OK-to-Email and PAY NOW all sat at 74px - a 15px Bootstrap gutter, because the
   payment row carries an inline margin:20px 0 that cancels the row's -15px while
   its inner column keeps its +15px padding. Rather than compensating block by
   block, the column stops using Bootstrap gutters at all: one content box, one
   left edge, everything measured from it. */

.checkout-page > .row > .col-md-8 > .checkout-content > .row,
#address.addresses-row,
#ShippingMethods.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

	.checkout-page > .row > .col-md-8 > .checkout-content > .row > [class*="col-"],
	#address.addresses-row > [class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

/* --- payment rows: PayBright / PayPal ------------------------------------ */
/* These two used to be logo tiles parked outside the group with no radio at all,
   which is exactly why the merged block read as patched in. They are now ordinary
   rows of the same radiogroup, so they inherit the row layout and only need their
   brand mark constrained - the PayBright SVG ships at width="201.72", which let it
   dominate its row. */

.pe-gw-card--compact {
	align-items: center;
}

	.pe-gw-card--compact .pe-gw-titlerow {
		display: flex;
		align-items: center;
		gap: 10px;
	}

.pe-gw-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
}

	.pe-gw-brand svg,
	.pe-gw-brand img {
		display: block;
		width: auto;
		height: 18px;
		max-width: 110px;
	}

.pe-alt-payments {
	margin-top: 18px;
}

/* --- financing note, inside the payment list ----------------------------- */
/* The estimator now sits directly under the Pay over time row as a continuation of
   it: same surface, no top border, indented to the row's text column so it reads as
   that option's small print rather than a separate callout. The bordered box it
   used to live in is stripped - it is inside the list's border now. */

/* .checkout-page .paybright-asset styles this as a bordered callout further up and
   outranks a single class, so this needs the depth to win - the node keeps both
   classes once it is moved. */

/* Inserting the note between two rows broke the list's dividers: they are drawn by
   .pe-gw-card + .pe-gw-card, and PayPal stopped being adjacent to a card, so it lost
   its top border and the list looked like it ended early. */
.checkout-page .pe-gw-list .pe-gw-financing + .pe-gw-card {
	border-top: 1px solid var(--co-line) !important;
}

/* The row keeps a full 14px of bottom padding before the note, which left the note
   floating between two rows instead of belonging to the one above it. Close that up
   and let the note carry the row's bottom padding instead, so the pair reads as one
   row with a sub-line and matches the height rhythm of its neighbours. */
.checkout-page .pe-gw-list .pe-gw-card:has(+ .pe-gw-financing) {
	padding-bottom: 3px !important;
}

.checkout-page .pe-gw-list .pe-gw-financing {
	margin: 0 !important;
	padding: 0 18px 14px 46px !important;
	border: 0 !important;
	border-left: 0 !important;
	border-radius: 0 !important;
	background: var(--co-surface) !important;
	box-shadow: none !important;
	font-size: .82rem;
	color: var(--co-muted);
}

	.checkout-page .pe-gw-list .pe-gw-card--active + .pe-gw-financing {
		background: var(--co-accent-wash) !important;
	}

	/* The row and its note are one option, so they light and select as one. Hovering
	   either half highlights both - the sibling combinator covers row-to-note, and
	   :has() covers note-to-row. Without this the note stayed white while the row it
	   belongs to lit up, which read as two separate things. */
	.checkout-page .pe-gw-list .pe-gw-card:hover + .pe-gw-financing,
	.checkout-page .pe-gw-list .pe-gw-financing:hover {
		background: var(--co-surface-alt) !important;
	}

	.checkout-page .pe-gw-list .pe-gw-card:has(+ .pe-gw-financing:hover) {
		background: var(--co-surface-alt) !important;
	}

	/* selection still wins over hover on both halves */
	.checkout-page .pe-gw-list .pe-gw-card--active:hover + .pe-gw-financing,
	.checkout-page .pe-gw-list .pe-gw-card--active + .pe-gw-financing:hover {
		background: var(--co-accent-wash) !important;
	}

	.checkout-page .pe-gw-list .pe-gw-card--active:has(+ .pe-gw-financing:hover) {
		background: var(--co-accent-wash) !important;
	}

	.checkout-page .pe-gw-list .pe-gw-financing {
		cursor: pointer;
	}

		/* the link keeps its own affordance */
		.checkout-page .pe-gw-list .pe-gw-financing a {
			cursor: pointer;
		}

	.pe-gw-financing p {
		margin: 0;
		font-size: .82rem;
		color: var(--co-muted);
	}

	.pe-gw-financing a {
		color: var(--co-accent) !important;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

@media (max-width: 575px) {
	.pe-gw-financing {
		padding-left: 42px !important;
	}
}

/* ===========================================================================
   Cart (/viewshoppingcart, /viewcart)

   Same rules as the rest of the funnel. Everything below was diverging: the
   primary CTA was Bootstrap blue where the site is crimson, cards sat at 4px
   where the site uses 12px, and the section headings were held at weight 500 by
   inline font-size attributes (now removed from the views, which is what let
   these apply at all).
   =========================================================================== */

/* Cart lines. The container and its status pills were styled inline on
   CheckoutCartItem.cshtml - 5px corners, a #bbb border, and one pill still using
   #0071bc, the IKEA-derived blue already removed from the payment picker. Lifted
   here so the cart uses the same 12px card and warm hairline as the rest of the
   funnel, and so the colours are in one place. */

/* --- surfaces -------------------------------------------------------------

   "so much text in plain white screen, no clear layout and separation."

   Measured, and it was literal: every ancestor from .checkout-page up to <body>
   computed background transparent, so the page, the cart list, the summary and
   the whole rail were one undifferentiated white field with hairlines drawn on
   it. The only element that read as a panel was the Affirm callout, and only
   because it carries its own border inline.

   Regions come from surface, not from more rules. The page takes a warm tint and
   the content sits on white panels, which is also what lets the cart lines stay
   rows: the list is the object, and the panel is what says so. Seven cards said
   the opposite.

   Scoped to .viewcart. The payment step has the same flat-white problem and
   should follow, but it carries its own .order-block overrides and wants its own
   pass rather than being dragged along by this one.
   -------------------------------------------------------------------------- */

/* .container is max-width constrained, so tinting it would leave white gutters
   down both sides - .body-background is the first full-width ancestor. */
.body-background:has(.checkout-page.viewcart) {
	background: #f4f1ed;
}

.checkout-page.viewcart #checkout-content,
.checkout-page.viewcart .checkout-details-bar > .order-block,
.checkout-page.viewcart .optional-checkout-items,
.checkout-page.viewcart .paybright-asset {
	/* !important answers the .checkout-page .order-block { padding: 0 !important }
	   written for the payment step, which this is more specific than */
	padding: 18px !important;
	margin-bottom: 16px !important;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-surface);
}

/* the promo block brings its own .order-block wrapper, which would panel a panel */
.checkout-page.viewcart .optional-checkout-items .order-block {
	padding: 0 !important;
	margin-bottom: 0 !important;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Separated, not boxed. Seven bordered cards down a page is seven of everything -
   seven rounded outlines, seven 18px paddings, seven 14px gaps - and it framed
   each line as its own object when the list is the object. A rule between them
   says the same thing and gives ~34px per line back. The list keeps one outer
   edge so it still reads as a group. */
.checkout-page .cart-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--co-line);
	background: none;
}

	/* the list already ends on the Update Cart row - a trailing rule would fence it off */
	.checkout-page .cart-items > .cart-item:last-child,
	.checkout-page .visible-cart-items > .cart-item:last-child,
	.checkout-page #hidden-cart-items > .cart-item:last-child {
		border-bottom: 0;
	}

	.checkout-page .cart-items > .cart-item:first-child,
	.checkout-page .visible-cart-items > .cart-item:first-child {
		padding-top: 4px;
	}

/* --- the line itself ------------------------------------------------------

   Three areas, not a Bootstrap grid. The old markup nested col-5/col-md-2 beside
   col-12/col-md-10, so on a phone the image took 41% of the row and the body took
   100% of the next one - a tall column of nothing beside every thumbnail. Naming
   the areas lets the phone layout be stated outright instead of falling out of
   whatever the column widths happen to add up to.

	 desktop                    phone
	 media body foot price      media body body
	                            foot  foot price

   On a wide screen it is one row: there is no reason to spend a full-width band
   and a rule on a quantity box with 700px of nothing beside it. The stacked
   version takes over below 768 - it has to cover small tablets too, because at
   ~600px the four columns leave the title about 160px to wrap in.
   -------------------------------------------------------------------------- */

.checkout-page .cart-line {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto auto;
	grid-template-areas: "media body foot price";
	align-items: start;
	column-gap: 16px;
}

/* A square tile, not a free-shaped image. Catalogue art is every aspect ratio
   there is - the Hercules tire is 544x760 - and letting it size itself meant a
   portrait photo set the height of the whole row: 172px against 134px for the
   same amount of text. The tile normalises that and gives every line the same
   left edge to scan down. */
.cart-line-media {
	grid-area: media;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--co-radius-sm);
	background: var(--co-surface-alt);
}

.cart-line-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cart-line-body {
	grid-area: body;
	min-width: 0;
}

/* Product title. Sentence-case here rather than the uppercase used for section
   headings: this is content, and seven shouted product names down a page is a
   wall. The site's heading voice stays on the section above it. */
.checkout-page .cart-line-name {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--co-ink);
	text-transform: none;
	letter-spacing: 0;
}

	.checkout-page .cart-line-name a {
		color: inherit;
	}

	.checkout-page .cart-line-name a:hover,
	.checkout-page .cart-line-name a:focus {
		color: var(--co-accent);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

/* The parent product, when it says something the title does not. Its own line
   rather than another middot in the meta row, because it is often a full sentence
   ("Mounted and Balanced Packages requires an additional 4-7 days to process"). */
.cart-line-subname {
	margin: 0 0 4px;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--co-muted);
}

/* Tier 2: SKU, options, and the vehicle the line was bought for, as one line.

   These were four separate full-width rows set at 12.8px and 13.12px - a third of
   a pixel apart, one muted and one ink - so they neither grouped nor ranked. As
   one muted 12px line they read as a single group of specifics, and the gap to
   the 16px/700 name is a real step instead of a rounding error.

   Deliberately NOT flex: as flex items each span wraps whole, which drops a
   leading middot at the start of a wrapped line. Inline spans wrap like prose. */
.cart-line-meta {
	display: block;
	margin: 0 0 6px;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--co-muted);
}

	.cart-line-meta > span + span::before {
		content: "\00B7";
		margin: 0 6px;
		color: var(--co-line-strong);
	}

/* Labels inside tier 2. "SKU" and the part number were the same 12px muted text
   with one space between them, so they ran together as "SKU 42-105" - and worse
   on part numbers that contain spaces of their own, like "BLK-Lug Nut". The
   label takes weight and the value takes contrast plus a little tracking, so the
   eye has somewhere to break. */
.cart-line-key {
	font-weight: 700;
	color: #55504b;
}

.cart-line-val {
	color: #3d3936;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

/* Tier 3: stock, promotion, disclosure - one row, not three.

   Each used to own a full-width row, and .cart-line-status / .cart-line-details
   were block wrappers inheriting the 19.2px body line-height, so an 11px pill sat
   in a 30px band. */
.cart-line-signals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 2px;
	line-height: 1.3;
}

.cart-line-promo {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	color: var(--co-accent);
}

/* Disclosure for the full compatibility list. Sits inline with the pill while
   closed; takes the row back for itself once open. */
.cart-line-details {
	margin-top: 0;
}

	.cart-line-details[open] {
		flex: 1 0 100%;
		margin-top: 2px;
	}

	/* a disclosure, not a heading - it was .8rem/700 in full ink, which read as
	   loud as the product name it sat under */
	.cart-line-details > summary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		font-size: .75rem;
		font-weight: 600;
		color: var(--co-muted);
		list-style: none;
	}

	.cart-line-details > summary::-webkit-details-marker {
		display: none;
	}

	.cart-line-details > summary::before {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translate(-1px, -1px);
		transition: transform .15s ease;
	}

	.cart-line-details[open] > summary::before {
		transform: rotate(-135deg) translate(-1px, -1px);
	}

	.cart-line-details > summary:hover {
		color: var(--co-accent);
	}

.cart-line-details-body {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: var(--co-radius-sm);
	background: var(--co-surface-alt);
	font-size: .78rem;
	line-height: 1.5;
	color: var(--co-muted);
}

.cart-line-extras {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	font-size: .82rem;
}

/* --- price ---------------------------------------------------------------- */

/* Stretched to the full row height with the amount at the top and Remove at the
   bottom, which is what puts Remove in the bottom-right corner of the line. */
.cart-line-price {
	grid-area: price;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	line-height: 1.2;
}

.cart-line-amount {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.checkout-page .cart-subtotal {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--co-ink);
}

/* CAD used to sit above the number in 0.7rem, so the currency was announced
   before the amount. It is a footnote to the price, not a heading for it. */
.cart-line-currency {
	margin-top: 1px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--co-muted);
}

.cart-vat-wrap {
	margin-top: 4px;
	font-size: .72rem;
	color: var(--co-muted);
}

/* --- quantity and remove --------------------------------------------------- */

/* A column beside the body on a wide screen, so it carries no rule; the stacked
   layout below 768 puts the rule back, where it is a row under the body.
   (What it replaced was a col-12 div with an inline height:15px and a
   border-bottom - an empty element standing in for a border.) */
.cart-line-foot {
	grid-area: foot;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.cart-line-qty {
	display: flex;
	align-items: center;
	gap: 8px;
}

	/* A number input sitting next to a "Remove" link does not need the word
	   QUANTITY spelled out beside it. Spelled out it cost 200px of a 595px card -
	   the cart column is two thirds of a 1180px frame, not the whole window - and
	   that came straight off the title, which then wrapped to two lines on a
	   1920px screen. Hidden from view, kept for screen readers. */
	.checkout-page .cart-line-qty label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* the control itself is styled as .cart-qty-select further down - there used to be
	   three overlapping rules here from when this was a number input on one branch and a
	   dropdown on the other */

/* Remove was an unlabelled 14px <i> - no accessible name and barely a target.
   It is quiet on purpose: a destructive action should be findable, not adjacent
   in weight to the quantity control next to it. */
.checkout-page .cart-delete-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 0;
	font-size: .72rem;
	font-weight: 600;
	color: var(--co-muted);
	background: none;
	border: 0;
	white-space: nowrap;
}

	.checkout-page .cart-delete-link:hover,
	.checkout-page .cart-delete-link:focus {
		color: var(--co-accent);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

@media (max-width: 767px) {
	.checkout-page .cart-item {
		padding: 14px 0;
	}

	/* 18px of panel on each side of a 390px screen is 9% of it spent on gutter */
	.checkout-page.viewcart #checkout-content,
	.checkout-page.viewcart .checkout-details-bar > .order-block,
	.checkout-page.viewcart .optional-checkout-items,
	.checkout-page.viewcart .paybright-asset {
		padding: 14px !important;
		margin-bottom: 12px !important;
	}

	/* Price drops to the bottom row and sits opposite quantity, so the body gets
	   the full width beside the thumbnail instead of a narrow column squeezed by
	   a price that only ever needs one line. Remove rides with it and lands under
	   the amount - still the bottom-right corner, and it costs no extra row
	   because the qty box on the left is already taller than two lines of price.

	   No internal rule here any more: the lines are separated by rules now, and a
	   second one inside each line just fenced off the quantity row. */
	.checkout-page .cart-line {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"media body body"
			"foot  foot price";
		column-gap: 12px;
	}

	.cart-line-price {
		align-self: end;
		gap: 2px;
		margin-top: 10px;
	}

	.cart-line-amount {
		flex-direction: row;
		align-items: baseline;
		gap: 5px;
	}

	.cart-line-currency {
		margin-top: 0;
		order: -1;
	}

	.cart-line-foot {
		margin-top: 10px;
	}

}

/* The mount-and-balance offer is a prompt, not a line the shopper added, so it
   stays a block while the real lines became rows - that difference is now what
   marks it out. The crimson edge does the rest, without the teal that matched
   nothing else on the site. */
.checkout-page .cart-item--offer {
	padding: 14px 16px;
	margin: 14px 0;
	border: 1px solid var(--co-line);
	border-left: 3px solid var(--co-accent);
	border-radius: var(--co-radius-sm);
	background: var(--co-accent-wash);
}

.cart-status {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 7px;
	background: #f2efec;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: capitalize;
}

	.cart-status--alert {
		color: var(--co-accent);
	}

	.cart-status--info {
		color: var(--co-ink);
	}

	.cart-status--ok {
		background: #e8f3ea;
		color: #1c7a4a;
	}

/* --- secondary actions: update cart, add promo, save notes ----------------

   All three were .btn-default, which style.css flattens to a #e5e5e5 slab with
   Bootstrap's stock 4px corners. They are the quiet actions on the page and
   should stay quiet, but they should look like they belong to the same set of
   controls as everything else in the funnel: 9px corners, warm hairline, ink
   text. Selectors carry three classes so they win over `.checkout-page
   .btn-default` on specificity rather than on bundle order.
   -------------------------------------------------------------------------- */

.checkout-page .cart-actions .update-cart-button,
.checkout-page .order-notes-actions .add-notes-checkout-button {
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--co-line-strong);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	color: var(--co-ink);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background-color .15s ease, border-color .15s ease;
}

	.checkout-page .cart-actions .update-cart-button:hover,
	.checkout-page .cart-actions .update-cart-button:focus,
	.checkout-page .order-notes-actions .add-notes-checkout-button:hover,
	.checkout-page .order-notes-actions .add-notes-checkout-button:focus {
		background: var(--co-surface-alt);
		border-color: var(--co-ink);
		color: var(--co-ink);
	}

.checkout-page .cart-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 4px 0 18px;
}

/* --- promotion codes ------------------------------------------------------ */

.promo-entry {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

	.checkout-page .promo-entry .form-control {
		flex: 1 1 auto;
		min-width: 0;
		height: 42px;
		padding: 8px 12px;
		border: 1px solid var(--co-line-strong);
		border-radius: var(--co-radius-sm);
		background: var(--co-surface);
		font-size: .9rem;
		color: var(--co-ink);
		box-shadow: none;
	}

	.checkout-page .promo-entry .form-control:focus {
		border-color: var(--co-ink);
		outline: 2px solid var(--co-ink);
		outline-offset: 1px;
	}

/* Applying a code is the committing action of this little form, so it takes the
   ink fill rather than the outline the other two secondaries wear. */
.checkout-page .promo-entry .add-promo-checkout-button {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 20px;
	border: 1px solid var(--co-ink);
	border-radius: var(--co-radius-sm);
	background: var(--co-ink);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background-color .15s ease;
}

	.checkout-page .promo-entry .add-promo-checkout-button:hover,
	.checkout-page .promo-entry .add-promo-checkout-button:focus {
		background: #000;
		color: #fff;
	}

/* An applied code is money off, so it gets the same green as the in-stock pill
   rather than the charcoal bar it used to wear. */
.entered-promos {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entered-promo {
	display: flex;
	align-items: center;
	gap: 12px;
	/* the remove control sets the row height, so the padding stays tight around it */
	padding: 6px 6px 6px 12px;
	border: 1px solid #cfe6d7;
	border-radius: var(--co-radius-sm);
	background: #e8f3ea;
}

.promo-body {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	min-width: 0;
}

.checkout-page .promo-code {
	margin: 0;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1c7a4a;
}

.promo-description {
	font-size: .82rem;
	line-height: 1.4;
	color: #4a6552;
}

.checkout-page .promo-remove {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #4a6552;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

	.checkout-page .promo-remove:hover,
	.checkout-page .promo-remove:focus {
		background: rgba(28, 122, 74, .14);
		color: #145634;
		text-decoration: none;
	}

/* --- cart head ------------------------------------------------------------ */

.cart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

	/* Out of the column it lost whatever was holding it down and came back at full
	   browser-default h1, icon and all. Stated here instead, in the site's heading
	   voice, with the bag sized as an ornament rather than as a peer of the words. */
	.checkout-page.viewcart .cart-head h1 {
		margin: 0;
		font-size: 1.5rem;
		font-weight: 800;
		line-height: 1.2;
		text-transform: uppercase;
		letter-spacing: .01em;
		color: var(--co-ink);
	}

		.checkout-page.viewcart .cart-head h1 .fa {
			font-size: 1rem;
			color: var(--co-muted);
			vertical-align: baseline;
		}

.checkout-page .cart-continue {
	flex: 0 0 auto;
	font-size: .82rem;
	font-weight: 600;
	color: var(--co-muted);
}

	.checkout-page .cart-continue:hover,
	.checkout-page .cart-continue:focus {
		color: var(--co-accent);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

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

   A select that posts on change, replacing a number spinner plus an Update Cart
   button. The button was a second step that existed only to commit the first,
   and until it was pressed the summary disagreed with the number on screen.
   -------------------------------------------------------------------------- */

.checkout-page .cart-qty-select {
	width: auto;
	min-width: 64px;
	/* style.css:25 sets `select.form-control { height: 3.5rem !important }` site-wide, which
	   no amount of specificity beats - it made every quantity box a 56px slab. This is the
	   one place in this file that has to answer !important with !important. */
	height: 38px !important;
	margin-bottom: 0;
	padding: 4px 26px 4px 10px;
	border: 1px solid var(--co-line-strong);
	border-radius: var(--co-radius-sm);
	background-color: var(--co-surface);
	/* the caret has to be drawn in - appearance:none removes the platform one */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6560' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 10px 6px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: .9rem;
	font-weight: 700;
	color: var(--co-ink);
	box-shadow: none;
	cursor: pointer;
}

	.checkout-page .cart-qty-select:focus {
		border-color: var(--co-ink);
		outline: 2px solid var(--co-ink);
		outline-offset: 1px;
	}

/* the free-entry box behind "10+" - matches the select it replaces, minus the caret */
.checkout-page .cart-qty-input {
	width: 72px;
	height: 38px !important;
	margin-bottom: 0;
	padding: 4px 8px;
	border: 1px solid var(--co-line-strong);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	font-size: .9rem;
	font-weight: 700;
	text-align: center;
	color: var(--co-ink);
	box-shadow: none;
}

	.checkout-page .cart-qty-input:focus {
		border-color: var(--co-ink);
		outline: 2px solid var(--co-ink);
		outline-offset: 1px;
	}

	/* [hidden] loses to the display the .form-control rules set */
	.checkout-page .cart-line-qty [hidden] {
		display: none !important;
	}

/* --- updating -------------------------------------------------------------

   Committing a quantity is a full page POST. On a long cart that round trip is
   slow enough to read as a dead click, so the wait is shown rather than left to
   be guessed at.

   The form goes inert but is NOT faded as a whole: opacity on the form would
   apply to the spinner inside it too, and a half-visible spinner is worse than
   none. Instead the untouched rows recede and the row being changed stays sharp,
   which puts the eye on the one thing that is actually working.
   ------------------------------------------------------------------------- */

.cart-form.is-updating {
	pointer-events: none;
}

	/* everything except the row being changed steps back */
	.cart-form.is-updating .cart-line:not(.is-updating) {
		opacity: .45;
		transition: opacity .12s ease-out;
	}

/* the totals are about to be recalculated, and they are the numbers people watch */
#order-summary.is-updating {
	opacity: .45;
	transition: opacity .12s ease-out;
	pointer-events: none;
}

.cart-qty-busy {
	display: none;
	align-items: center;
	gap: 7px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--co-muted);
	white-space: nowrap;
}

	/* clears `.checkout-page .cart-line-qty [hidden]`, which is !important at 0,3,0 */
	.checkout-page .cart-line-qty.is-updating .cart-qty-busy {
		display: inline-flex !important;
	}

	/* the control is gone for the moment - the spinner stands in its place, so the
	   row does not reflow while the new page is on its way */
	.checkout-page .cart-line-qty.is-updating .cart-qty-select,
	.checkout-page .cart-line-qty.is-updating .cart-qty-input {
		display: none !important;
	}

.cart-qty-spinner {
	flex: none;
	width: 15px;
	height: 15px;
	border: 2px solid var(--co-line);
	border-top-color: var(--co-ink);
	border-radius: 50%;
	animation: cart-qty-spin .6s linear infinite;
}

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

/* a spinner that never stops is the one thing motion sensitivity cannot opt out of */
@media (prefers-reduced-motion: reduce) {
	.cart-qty-spinner {
		animation-duration: 2.4s;
	}

	.cart-form.is-updating .cart-line:not(.is-updating),
	#order-summary.is-updating {
		transition: none;
	}
}

/* --- reassurance beside the CTA ------------------------------------------- */

.checkout-reassure {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: .75rem;
	color: var(--co-muted);
}

	.checkout-reassure li {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.checkout-reassure .fa {
		color: #1c7a4a;
	}

/* --- disclosures in the rail ---------------------------------------------- */

.checkout-page .checkout-disclosure {
	margin-bottom: 4px;
}

	.checkout-page .checkout-disclosure > summary {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 0;
		cursor: pointer;
		list-style: none;
		font-size: .85rem;
		font-weight: 700;
		color: var(--co-ink);
	}

	.checkout-page .checkout-disclosure > summary::-webkit-details-marker {
		display: none;
	}

	.checkout-page .checkout-disclosure > summary::after {
		content: "";
		margin-left: auto;
		width: 7px;
		height: 7px;
		border-right: 1.5px solid var(--co-muted);
		border-bottom: 1.5px solid var(--co-muted);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .15s ease;
	}

	.checkout-page .checkout-disclosure[open] > summary::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

/* --- asides ---------------------------------------------------------------

   Content that is not on the path to purchase. The agent-attribution block was
   sitting between Order Notes and the Order Summary, set in the same uppercase
   800 as ORDER SUMMARY, so an internal staff-credit question carried the same
   rank as the total - and was the last thing before the checkout button. It has
   moved below the CTA, and it is sized like the footnote it is.
   -------------------------------------------------------------------------- */

.checkout-page .checkout-aside {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--co-line);
}

	/* the copy is a question ("Did one of our part experts help you out?"), and a
	   question set in uppercase 800 reads as shouted, not asked */
	.checkout-page .checkout-aside .order-header {
		font-size: .8rem;
		font-weight: 600;
		text-transform: none;
		letter-spacing: normal;
		color: var(--co-muted);
		margin-bottom: 8px;
	}

	.checkout-page .checkout-aside select.form-control {
		height: 38px;
		border: 1px solid var(--co-line-strong);
		border-radius: var(--co-radius-sm);
		font-size: .82rem;
		color: var(--co-ink);
		box-shadow: none;
	}

/* --- order notes ---------------------------------------------------------- */

.checkout-page .order-notes-box {
	/* the textarea is rows="2"; this holds that without adding a third line of
	   empty box to an optional field */
	min-height: 64px;
	padding: 10px 12px;
	border: 1px solid var(--co-line-strong);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	font-size: .9rem;
	line-height: 1.5;
	color: var(--co-ink);
	box-shadow: none;
	resize: vertical;
}

	.checkout-page .order-notes-box:focus {
		border-color: var(--co-ink);
		outline: 2px solid var(--co-ink);
		outline-offset: 1px;
	}

.checkout-page .order-notes-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

/* the checkout CTA, matching the site's primary button and PAY NOW */
.checkout-page .minicart-checkout-button.btn-primary {
	border: 0;
	border-radius: 11px;
	background: var(--co-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 14px 20px;
	transition: background-color .15s ease, box-shadow .15s ease;
}

	.checkout-page .minicart-checkout-button.btn-primary:hover,
	.checkout-page .minicart-checkout-button.btn-primary:focus {
		background: var(--co-accent-dark);
		box-shadow: 0 2px 12px rgba(167, 0, 26, .25);
		color: #fff;
	}

/* the guest / secondary variant stays quiet but shares the geometry */
.checkout-page .minicart-checkout-button.btn-secondary {
	border: 1px solid var(--co-line-strong);
	border-radius: 11px;
	background: var(--co-surface);
	color: var(--co-ink);
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 13px 20px;
}

/* cart line items and panels: the site's 12px, not Bootstrap's 4px */
.checkout-page .card,
.checkout-page .card-body {
	border-radius: 12px;
}

.checkout-page .card {
	border-color: var(--co-line);
}

/* page title in the site's voice, like PAYMENT and DELIVERY */
.checkout-page > .row h1 {
	font-size: 1.15rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--co-ink);
	margin: 0 0 14px;
}

/* --- shared section heading --------------------------------------------- */

/* Section headings speak in the site's voice. Every other section on the site -
   SHOP BY CATEGORY, READY TO BUILD?, SUPPORTING CANADIAN BRANDS - is uppercase
   Rajdhani at weight 800 in ink; checkout used sentence case at 600 and read like
   a different product. Heading level only: the payment ROWS stay quiet on purpose,
   because four options shouting at once is what made that block feel heavy. The
   site's loud voice belongs to section headers, not to list items. */
.pe-pay-heading,
.pe-fulfilment-legend,
.pe-pickup-legend,
.checkout-page .order-header,
#address .co-section-title {
	font-size: 1.15rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.3;
	color: var(--co-ink);
	margin: 0 0 12px;
}

.pe-pay-heading {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 4px;
}

	.pe-pay-heading b {
		font-weight: 700;
	}

	.pe-pay-heading .fa-lock {
		color: var(--co-muted);
		font-size: .9rem;
	}

.pe-pay-heading-by {
	font-size: .85rem;
	font-weight: 500;
	color: var(--co-muted);
}

/* --- review rows (shipping / billing) ------------------------------------ */
/* Two Bootstrap columns become one bordered box of stacked rows, the way
   Shopify shows Contact / Ship to / Method before payment. */

#address.addresses-row {
	display: block;
	margin: 0 0 24px;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-surface);
	overflow: hidden;
}

	#address.addresses-row > [class*="col-"] {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		padding: 0;
	}

		#address.addresses-row > [class*="col-"] + [class*="col-"] {
			border-top: 1px solid var(--co-line);
		}

	#address .checkout-block {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		margin: 0 !important;
		padding: 14px 18px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* Label column, then the address, then Change pinned right. Uppercase small caps:
	   these are field labels, and the site uses that treatment for labels throughout -
	   SHIPPING TO reads as a label, "Shipping To" reads as a heading competing with the
	   real ones. (This lived in CheckoutShipping.cshtml's inline style until the address
	   rules were consolidated here; it came across with them rather than being lost.) */
	#address .checkout-header {
		flex: 0 0 84px;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: .78rem;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--co-muted);
	}

		#address .checkout-header .checkout-status,
		#address .checkout-header span[aria-hidden="true"] {
			display: none;
		}

	#address .checkout-content {
		flex: 1 1 auto;
		min-width: 0;
		font-size: .9rem;
		line-height: 1.5;
		color: var(--co-ink);
	}

	/* The address used to run as one inline stream with middot separators, so line
	   breaks landed wherever they fell - at 378px the postal code split across two
	   lines ("Richmond Hill, ON L4B" / "0H9"), which is what made it look broken.

	   Three deliberate lines instead: who it is, where it goes, how to reach them.
	   _AddressDetail.cshtml renders each field as its own div, so the grouping is done
	   here: the name is a block, street and city share a line, and country and phone
	   share the next. City is inline-block so it wraps as a whole unit and can never
	   split a postal code again. */

	#address .address-name {
		display: block;
		font-weight: 600;
		color: var(--co-ink);
	}

	#address .address-street,
	#address .address-street > div,
	#address .address-street > span,
	#address .address-country,
	#address .address-phone {
		display: inline;
	}

		/* Address2 / Suite are extra spans inside .address-street */
		#address .address-street > span::before {
			content: ' ';
		}

	#address .address-city {
		display: inline-block;
	}

	/* country and phone drop to their own line, quieter than the address itself */
	#address .address-country::before {
		content: "";
		display: block;
	}

	#address .address-country,
	#address .address-phone {
		color: var(--co-muted);
	}

	#address .address-street::after,
	#address .address-country::after {
		content: ' \00B7 ';
		color: var(--co-line-strong);
	}

/* Change / add links read as links, not grey buttons */
#address .checkout-content .btn,
#address .checkout-content a.btn,
#address .checkout-content button {
	padding: 0;
	border: 0;
	background: none !important;
	color: var(--co-accent) !important;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	box-shadow: none;
}

	#address .checkout-content .btn:hover,
	#address .checkout-content button:hover {
		color: var(--co-accent-dark) !important;
	}

@media (max-width: 575px) {
	#address .checkout-block {
		flex-direction: column;
		gap: 4px;
	}

	#address .checkout-header {
		flex: none;
	}

	/* Billing that just repeats the shipping address took a full card row - label,
	   "Same as shipping address" and Change on three stacked lines, 107px to say
	   nothing new. Collapsed to one line. The marker class comes from
	   CheckoutShipping/_SelectAddress.cshtml, set by the same condition that decides
	   to print "same as shipping" instead of the address; :has() keeps the styling
	   here rather than duplicating the shape into the view, and browsers without it
	   just keep the roomier row. */
	#address .billing-address-column:has(.is-same-as-shipping) .checkout-block {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}

		#address .billing-address-column:has(.is-same-as-shipping) .checkout-header {
			flex: 0 0 auto;
			white-space: nowrap;
		}

		/* Label and value were 8px apart on one line and read as a single run of text.
		   A hairline does the separating so the row keeps its height - more air alone
		   would have meant giving back the space this collapse just saved. */
		#address .billing-address-column:has(.is-same-as-shipping) .checkout-content {
			padding-left: 12px;
			border-left: 1px solid var(--co-line);
		}

		/* the partial wraps the text and the Change button in their own grid columns */
		#address .billing-address-column:has(.is-same-as-shipping) .js-selected-address .row {
			display: flex;
			align-items: baseline;
			gap: 8px;
			margin: 0;
			flex-wrap: nowrap;
		}

			#address .billing-address-column:has(.is-same-as-shipping) .js-selected-address .row > [class*="col-"] {
				width: auto;
				max-width: none;
				flex: 0 0 auto;
				padding: 0;
			}

		#address .billing-address-column:has(.is-same-as-shipping) .checkout-actions {
			margin-top: 0 !important;
		}
}

/* --- payment row typography ---------------------------------------------- */
/* Every row was set in 700 with a crimson uppercase processor chip and a "SECURED
   BY" logo beside it, so four options competed at the same volume and the block
   read as heavy. In a picker the LABEL is the content and the branding is
   supporting detail: titles drop to 600 at a smaller size, the chip becomes a
   quiet neutral tag, and the secured-by mark recedes. Selection - the radio and
   the wash - is what should carry emphasis. */

.pe-gw-title {
	font-size: .95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

.pe-gw-chip {
	padding: 2px 7px !important;
	border-radius: 5px !important;
	background: #f2efec !important;
	color: var(--co-muted) !important;
	font-size: .66rem !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
}




.pe-gw-detail-note {
	color: var(--co-muted) !important;
	font-size: .78rem !important;
	font-weight: 500 !important;
}

.pe-pay-heading {
	font-size: 1.15rem;
	font-weight: 800;
}

/* --- grouped option lists (payment methods) ------------------------------ */
/* Free-floating cards with gaps become one bordered group with hairline
   dividers — the single biggest reason the old page read as unfinished. */

.pe-gw-list {
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-surface);
	overflow: hidden;
}

.pe-gw-card {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: var(--co-surface) !important;
	transition: background-color .15s ease;
}

	.pe-gw-card + .pe-gw-card,
	.pe-gw-list > * + * .pe-gw-card,
	.pe-gw-list > div + div {
		border-top: 1px solid var(--co-line) !important;
	}

	.pe-gw-card--active {
		background: var(--co-accent-wash) !important;
	}

	.pe-gw-card:hover {
		background: var(--co-surface-alt) !important;
	}

	.pe-gw-card--active:hover {
		background: var(--co-accent-wash) !important;
	}

/* the expanded panel belongs to the row above it, so keep it inside the group */
[data-pe-panel] {
	border-top: 1px solid var(--co-line);
	background: var(--co-accent-wash);
}

	[data-pe-panel] .creditcard-block {
		padding: 4px 0;
	}

/* --- "more ways to pay" -------------------------------------------------- */
/* These are payment methods too, so they read as more rows of the same list
   rather than loose buttons parked underneath it. Two of them cannot become
   plain radios and are deliberately left as they are:

     - PayBright is an <a> to SetPaymentMethod?selectedPaymentMethod=PAYBRIGHT,
       which persists Customer.RequestedPaymentMethod server-side. The view
       carries an explicit "do not turn into a radio" note.
     - "Other Payment Method" is a disclosure button, not a method - it reveals
       the PayPal tile, which IS already a radio in the pe-payment-method group.
       The two-step reveal is deliberate (PayPal branding stays hidden until the
       shopper asks for it), so it is a commercial decision to remove, not a
       styling one.

   Styling them as rows gets the visual consistency without touching either. */

/* PayBright and PayPal are rows of this list now, so it IS the whole group and keeps
   its border and radius on all four sides. It had been stripped of its bottom border
   and lower corners to weld it to the "more ways to pay" strip - and once that strip
   stopped rendering on this path, the last row was left with no bottom border. */

.pe-gw-list {
	gap: 0 !important;
	margin-bottom: 18px !important;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
}

/* Still rendered by the non-Moneris fallback path, where it stands as its own group. */
.pe-express {
	margin: 18px 0 !important;
}

.pe-express-head {
	display: none;
}

.pe-express-row {
	display: flex;
	flex-direction: column;
	/* base rule is a 10px-gap wrapping strip; a grouped list uses dividers, not gaps */
	gap: 0;
	flex-wrap: nowrap;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-surface);
	overflow: hidden;
}

/* --- PayPal: neutral until chosen ---------------------------------------- */
/* The row reads "Other Payment Method" with no branding until it is selected, then
   becomes PayPal. That keeps the old two-step reveal's intent - PayPal's wordmark is
   not put in front of the card options - while the row remains an ordinary radio in
   the same group, which the previous button-plus-hidden-tile arrangement never was.
   Driven off .pe-gw-card--active, which the picker already maintains. */

#pe-gw-card-paypal .pe-gw-title-selected,
#pe-gw-card-paypal .pe-gw-brand-paypal {
	display: none;
}

#pe-gw-card-paypal.pe-gw-card--active .pe-gw-title-unselected {
	display: none;
}

#pe-gw-card-paypal.pe-gw-card--active .pe-gw-title-selected {
	display: inline;
}

#pe-gw-card-paypal.pe-gw-card--active .pe-gw-brand-paypal {
	display: inline-flex;
}


.pe-express-tile {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .75rem;
	/* the base rule is flex: 1 1 200px / max-width: 280px, sized for a horizontal
	   strip - in a column container that 200px basis becomes the HEIGHT */
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0 !important;
	padding: 13px 18px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--co-surface) !important;
	text-align: left;
	transition: background-color .15s ease;
}

	.pe-express-row > * + * {
		border-top: 1px solid var(--co-line);
	}

	.pe-express-tile:hover {
		background: var(--co-surface-alt) !important;
		border-color: transparent !important;
	}

	.pe-express-tile.pe-gw-card--active {
		background: var(--co-accent-wash) !important;
	}

	.pe-express-tile-other {
		font-size: .95rem;
		font-weight: 600;
		color: var(--co-ink);
	}

.pe-express-alt {
	margin: 0;
}

/* --- trust strip --------------------------------------------------------- */
/* Three loud orange icons sat BETWEEN the address review and the payment
   methods, breaking the one place the page needs an uninterrupted line of
   thought: here is where it goes -> here is how you pay. Reassurance belongs
   with the commitment, so the strip is reordered below PAY NOW and quietened.
   Done with flex order rather than moving markup, so nothing that reads the DOM
   has to change. */

.checkout-page > .row > .col-md-8 > .checkout-content {
	display: flex;
	flex-direction: column;
}

	.checkout-page > .row > .col-md-8 > .checkout-content > #ShippingMethods {
		order: 99;
	}

#ShippingMethods .service-block {
	margin-right: 22px;
}

#ShippingMethods .service-icon {
	color: var(--co-muted) !important;
	font-size: .95rem;
	margin-right: 6px;
}

#ShippingMethods .service-text {
	font-size: .72rem;
	line-height: 1.25;
	color: var(--co-muted);
	letter-spacing: .02em;
}

	#ShippingMethods .service-text b,
	#ShippingMethods .service-text strong {
		font-weight: 600;
		color: var(--co-ink);
	}

#ShippingMethods.row {
	margin: 18px 0 0;
	border-top: 1px solid var(--co-line);
}

	#ShippingMethods .col-12 {
		padding: 14px 0 0 !important;
	}

/* --- section rhythm ------------------------------------------------------ */
/* The stack carried ~136px of pure gap above the button. Tightened to a
   consistent 18px step so the page reads as one rhythm instead of six
   different margins. */

.checkout-page > .row > .col-md-8 > .checkout-content > .row {
	margin-top: 0 !important;
	margin-bottom: 18px !important;
}

.pe-fulfilment,
.pe-pickup {
	margin-bottom: 18px !important;
}


/* --- order summary ------------------------------------------------------- */
/* The view uses a float-based .left / .right / .clear pattern. Kept intact
   (the .total / .sub-total hooks live on .right) but laid out with flexbox. */

.checkout-page .order-block .checkout-header,
.checkout-page #order-summary-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--co-ink);
}

#order-summary [class^="order-summary-"] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: .92rem;
}

	#order-summary [class^="order-summary-"] .left {
		float: none;
		color: var(--co-muted);
		font-weight: 500 !important;
	}

	#order-summary [class^="order-summary-"] .right {
		float: none;
		text-align: right;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		color: var(--co-ink);
		font-weight: 600;
	}

	#order-summary .clear {
		display: none;
	}

#order-summary hr {
	margin: 12px 0;
	border: 0;
	border-top: 1px solid var(--co-line);
}

#order-summary .order-summary-total {
	padding-top: 2px;
	font-size: 1.05rem;
}

	#order-summary .order-summary-total .left {
		color: var(--co-ink) !important;
		font-weight: 700 !important;
	}

	#order-summary .order-summary-total .right {
		font-size: 1.4rem;
		font-weight: 700;
	}

#order-summary .order-summary-discount .right,
#order-summary .order-summary-gift-card-discount .right {
	color: #1c7a4a;
}

/* --- summary heading + edit path ----------------------------------------- */
/* The summary listed everything and offered no way back. A wrong quantity meant
   hunting for the browser's back button. */

.checkout-page .order-block .order-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.os-edit {
	flex: 0 0 auto;
	/* the heading is uppercase now; a secondary link should not shout with it */
	text-transform: none;
	letter-spacing: normal;
	color: var(--co-accent) !important;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

	.os-edit:hover {
		color: var(--co-accent-dark) !important;
	}

/* --- opt-in below the button --------------------------------------------- */

#okToEmailDiv {
	margin: 14px 0 0 !important;
	color: var(--co-muted);
	font-size: .85rem;
}

/* --- mobile: trim the Moneris row --------------------------------------- */
/* At 375px that row ran to 162px across FOUR stacked lines - title+chip, a
   wrapped SECURED BY block, the wallet badges, then a line of text repeating
   what the badges already say. The chip names the processor, so the secured-by
   lockup and the note are redundant at this width; the badges stay, because
   Apple Pay / Google Pay availability is a real reason to pick this row. */

@media (max-width: 575px) {

	.pe-gw-detail-note {
		display: none !important;
	}

	.pe-gw-detail {
		margin-top: 6px !important;
	}
}

/* --- order summary: line items ------------------------------------------- */
/* The summary showed money but never what was being bought, so on the step where
   the shopper hands over card details they had no way to check the order. */

.os-items {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--co-line);
	list-style: none;
}

.os-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 7px 0;
}

.os-item-media {
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 1px solid var(--co-line);
	border-radius: 9px;
	/* Service and add-on lines (WTC-Service, BLK-Lug-Nut, BLK-TPMS) have no art on
	   S3, so the img removes itself and the tile would otherwise be a blank white
	   square that reads as broken. A faint box glyph sits underneath, so an empty
	   tile looks deliberate. */
	background-color: var(--co-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3ba' stroke-width='1.5'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	overflow: visible;
}

	.os-item-media img {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		object-fit: contain;
	}

/* quantity badge, Shopify-style, so the count never competes with the product name */
.os-item-qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--co-ink);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.os-item-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Some lines carry a sentence as their name ("Mounted and Balanced Packages requires an
   additional 4-7 days to process - Can not be cancelled or returned"), which ran to three
   lines and swamped the rest of the summary. */
.os-item-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .87rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--co-ink);
}

.os-item-variant {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .78rem;
	color: var(--co-muted);
}

.os-item-total {
	flex: 0 0 auto;
	font-size: .87rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--co-ink);
}

/* A zero row is kept in the DOM - LocalPickup.js writes into .surcharge-total and
   .flat-tax-total after the pickup toggle, and a missing node would fail silently -
   but it is not worth a line of the shopper's attention until it has a value. */
.os-row-empty {
	display: none !important;
}

.os-note {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 8px 0 0;
	font-size: .78rem;
	color: var(--co-muted);
}

	.os-note .right {
		font-variant-numeric: tabular-nums;
		font-weight: 600;
	}

	.os-note-tail::before {
		content: "\00B7 ";
	}

/* --- mobile: summary first, collapsed ------------------------------------ */
/* Measured at 375px before this: PAY NOW sat at y1053 and the order summary at
   y1318 - you committed to paying before you could see what you were buying or
   what it cost. The summary column now comes FIRST on mobile and collapses behind
   a bar that always shows the total, so the number is on screen from the start
   without 350px of line items pushing the form down. Desktop is untouched: the
   panel stays open and sticky in the right-hand column. */

.os-toggle {
	display: none;
}

@media (max-width: 991px) {
	.checkout-page > .row > .col-12.col-lg-4 {
		order: -1;
	}

	.checkout-page > .row > .col-md-8 {
		order: 0;
	}

	/* the heading is replaced by the toggle, which carries the same words */
	.checkout-page .order-block.os-collapsible .order-header {
		display: none;
	}

	.os-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 4px 0;
		border: 0;
		background: none;
		color: var(--co-ink);
		font-family: inherit;
		font-size: 1rem;
		text-align: left;
	}

	.os-toggle-label {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--co-accent);
		font-weight: 600;
	}

		/* chevron, rotated when open */
		.os-toggle-label::after {
			content: "";
			width: 7px;
			height: 7px;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: translateY(-2px) rotate(45deg);
			transition: transform .15s ease;
		}

		.os-open .os-toggle-label::after {
			transform: translateY(1px) rotate(225deg);
		}

	.os-toggle-total {
		font-size: 1.15rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* .os-collapsible is set by the toggle script, so this only applies where a toggle
	   exists to undo it. Scoped by media query alone it also hid the summary on
	   /viewshoppingcart - which renders the same .order-block but has no toggle - so the
	   cart showed no totals on mobile at all. */
	.checkout-page .order-block.os-collapsible #order-summary {
		display: none;
	}

	.checkout-page .order-block.os-collapsible.os-open #order-summary {
		display: block;
		margin-top: 12px;
	}

	/* the estimator/notice callouts belong with the summary, not stranded above the form */
	.checkout-page > .row > .col-12.col-lg-4 .paybright-asset,
	.checkout-page > .row > .col-12.col-lg-4 .bd-callout {
		display: none;
	}
}

/* --- financing / notice callouts ----------------------------------------- */

.checkout-page .paybright-asset,
.checkout-page .bd-callout {
	margin-top: 14px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--co-line) !important;
	border-left: 3px solid var(--co-accent) !important;
	border-radius: var(--co-radius-sm) !important;
	background: var(--co-surface);
	font-size: .88rem;
	color: var(--co-ink);
}

/* --- OK to email --------------------------------------------------------- */

#okToEmailDiv {
	margin: 16px 0 !important;
	font-size: .9rem;
	color: var(--co-ink);
}

/* --- checkout header ------------------------------------------------------ */
/* The progress stepper's styles lived here after being moved out of
   _LayoutCheckout.cshtml. The stepper itself is gone now, so they went with it. */

/* The logo now shares the content's frame. The site header and footer both use a
   98%-wide container, while .checkout-page is capped at 1180px and centred - the
   narrow column is right for checkout, but it left the logo at x29 with the form
   starting at x139. Giving the header row the same max-width, centring and padding
   makes the two resolve to the same edge, so the logo sits directly above the
   first block instead of floating off to its left. */
#checkout-header {
	max-width: 1180px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px;
	padding-right: 16px;
}

	#checkout-header > #logo {
		padding-left: 0;
	}

/* The checkout logo rendered at 240px on mobile against 144px everywhere else on
   the site - same left edge, but 67% larger, which is what made the header read as
   not belonging to the same site rather than as misaligned. The img carries an
   inline width:100% and Bootstrap col-9, so max-width is the lever that does not
   need !important to win. */
@media (max-width: 991px) {
	#checkout-header .partsengineLogo {
		max-width: 144px;
	}

	/* Mobile keeps the 15px grid gutter, matching every block below it. The row's own
	   -15px margin is gone (margin: auto above centres it), so the container padding
	   IS the gutter - the column must not add a second one on top. */
	#checkout-header {
		padding-left: 0;
		padding-right: 0;
	}

		#checkout-header > #logo {
			padding-left: 0;
			padding-right: 0;
		}
}

/* ===========================================================================
   Order confirmation (page.orderconfirmation.xml.config)

   What was here: two loose columns of <p> tags, two <h1>s on one page, a grey
   VIEW INVOICE button, and a COVID-19 delay notice. The facts a shopper needs -
   order number, total, where the email went - were sentences in a paragraph
   stack rather than anything they could pick out at a glance.

   The XSLT also carried an inline rule `.order-confirmation p, li, a {
   font-size: .8rem }`. Only the first selector was scoped; `li` and `a` applied
   to every list item and link on the page, header and footer included. Styles
   live here now, where they are scoped by construction.
   =========================================================================== */

.oc {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 15px 8px;
	color: var(--co-ink);
}

/* --- the confirmation itself: this is what the page is for ---------------- */

.oc-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
}

.oc-head-mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e8f3ea;
	color: #1c7a4a;
	font-size: 1.1rem;
}

.oc-title {
	margin: 0 0 4px;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--co-ink);
}

.oc-lede {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--co-muted);
}

/* The three facts, as figures rather than sentences. */
.oc-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	margin: 0 0 20px;
	padding: 0;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-line);
	overflow: hidden;
}

.oc-fact {
	padding: 14px 18px;
	background: var(--co-surface);
}

	.oc-fact dt {
		margin: 0 0 3px;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--co-muted);
	}

	.oc-fact dd {
		margin: 0;
		font-size: .95rem;
		line-height: 1.35;
		color: var(--co-ink);
	}

.oc-fact-lg {
	font-size: 1.35rem !important;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* an address can run long and has no spaces to break on */
.oc-fact-email {
	word-break: break-word;
}

/* --- actions -------------------------------------------------------------- */

.oc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.oc .oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* icon-to-label spacing set here rather than with an &#160; in the markup, so it
	   is one number instead of a space character inside a flex container */
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid var(--co-line-strong);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface);
	color: var(--co-ink);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

	.oc .oc-btn:hover,
	.oc .oc-btn:focus {
		background: var(--co-surface-alt);
		border-color: var(--co-ink);
		color: var(--co-ink);
		text-decoration: none;
	}

.oc .oc-btn-primary {
	border-color: var(--co-accent);
	background: var(--co-accent);
	color: #fff;
}

	.oc .oc-btn-primary:hover,
	.oc .oc-btn-primary:focus {
		background: var(--co-accent-dark);
		border-color: var(--co-accent-dark);
		color: #fff;
	}

/* --- guest ----------------------------------------------------------------

   A guest has no account and cannot reach the receipt: ReceiptController is
   [Authorize] and matches CustomerID, and the confirmation controller clears a
   guest session immediately after. The old page still showed them a VIEW
   INVOICE button, which 302s to the sign-in page. So say what is true instead:
   the email is the record, and the order number is the handle.
   -------------------------------------------------------------------------- */

.oc-guest {
	margin-bottom: 24px;
	padding: 16px 18px;
	border: 1px solid var(--co-line);
	border-left: 3px solid var(--co-accent);
	border-radius: var(--co-radius-sm);
	background: var(--co-accent-wash);
}

.oc-guest-lead {
	margin: 0 0 14px;
	font-size: .9rem;
	line-height: 1.5;
}

.oc-guest .oc-actions {
	margin-bottom: 12px;
}

.oc-guest-note {
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--co-muted);
}

/* --- next steps / help ---------------------------------------------------- */

.oc-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.oc-panel {
	padding: 18px;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-surface);
}

.oc-panel-title {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--co-ink);
}

.oc-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: oc-step;
}

	.oc-steps li {
		position: relative;
		padding: 0 0 14px 34px;
		counter-increment: oc-step;
	}

	.oc-steps li:last-child {
		padding-bottom: 0;
	}

	.oc-steps li::before {
		content: counter(oc-step);
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--co-surface-alt);
		color: var(--co-ink);
		font-size: .7rem;
		font-weight: 800;
	}

	/* the line the steps hang from - stops before the last marker */
	.oc-steps li:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 10px;
		top: 26px;
		bottom: 6px;
		width: 1px;
		background: var(--co-line);
	}

	.oc-steps strong {
		display: block;
		font-size: .88rem;
		font-weight: 700;
		line-height: 1.3;
	}

	.oc-steps span {
		display: block;
		margin-top: 2px;
		font-size: .82rem;
		line-height: 1.45;
		color: var(--co-muted);
	}

.oc-help-lead {
	margin: 0 0 12px;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--co-muted);
}

.oc-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.oc .oc-links a {
		font-size: .84rem;
		font-weight: 600;
		color: var(--co-ink);
	}

	.oc .oc-links a:hover,
	.oc .oc-links a:focus {
		color: var(--co-accent);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

.oc-downloads {
	margin: 16px 0 0;
	font-size: .88rem;
	font-weight: 700;
}

/* --- review prompt --------------------------------------------------------

   Moved here with the rest. It matters that this came along: `display: none` is
   what keeps the banner hidden until the timer fires, so dropping the old inline
   <style> without carrying these would have left it on screen, unstyled, from
   the moment the page loaded.

   Not carried over: that same block opened with `* { margin:0; padding:0;
   box-sizing:border-box }` - an unscoped reset that stripped margins and padding
   from every element on the page, header and footer included, on this page only.
   -------------------------------------------------------------------------- */

.popup {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.popup-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
}

.popup-content {
	position: relative;
	width: 600px;
	max-width: 90%;
	margin: auto;
	z-index: 2;
}

	.popup-content img {
		display: block;
		width: 100%;
		height: auto;
	}

.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: .2rem .5rem;
	border: none;
	background: #000;
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
}

@media (max-width: 767px) {
	.popup-content {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.oc {
		padding-top: 18px;
	}

	.oc-title {
		font-size: 1.35rem;
	}

	.oc-head-mark {
		width: 32px;
		height: 32px;
		font-size: .95rem;
	}

	.oc-fact-lg {
		font-size: 1.15rem !important;
	}

	.oc-actions .oc-btn {
		flex: 1 1 100%;
	}

}

/* ===========================================================================
   PART 9 — address form (/address/detailguest).

   The last page in the funnel still wearing Bootstrap. It carried its own inline
   <style> with 4rem inputs, a #ccc border and - the part that mattered -
   `label.form-label.form-label-required { display: none }`, so thirteen of its
   fourteen fields were labelled by placeholder alone. A placeholder is not a
   label: it leaves at the first keystroke, so anyone tabbing back through a
   part-filled form is reading empty boxes.

   Selects were left untouched by that inline block, so the page rendered 64px
   inputs beside 56px square-cornered selects in the same column.

   Everything below is scoped to .addressform so no other consumer of these
   Bootstrap classes is affected.
   =========================================================================== */

/* Same tint as the cart - the rail and panels need something to sit on. */
.body-background:has(.checkout-page.addressform) {
	background: #f4f1ed;
}

.addressform .address-control {
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	padding: 20px 20px 8px;
}

	/* the billing block is a panel inside the panel - a rule, not a second border */
	.addressform .address-control .address-control {
		border: 0;
		border-top: 1px solid var(--co-line);
		border-radius: 0;
		padding: 18px 0 0;
		margin-top: 4px;
	}

/* Section headings share the voice of .order-header rather than Bootstrap's h4. */
.addressform h4 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 11px;
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--co-ink);
}

	.addressform h4 .fa {
		color: var(--co-accent);
		font-size: .95rem;
	}

/* --- labels: visible again ------------------------------------------------ */

.addressform .form-group {
	margin-bottom: 11px;
}

/* The second heading needs air above it, not below - it opens a new group. */
.addressform h4 + .row,
.addressform h4 + div {
	margin-top: 0;
}

.addressform .removefrombilling + h4 {
	margin-top: 18px;
}

.addressform label.form-label {
	display: block;
	margin: 0 0 4px;
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--co-muted);
}

	/* The required marker is carried twice - a prefix span and a trailing "*".
	   Keep one, in the accent, so the label reads as words rather than punctuation. */
	.addressform .form-label-prefix-required {
		display: none;
	}

	.addressform .form-label-suffix-required {
		color: var(--co-accent);
		margin-left: 2px;
	}

	.addressform .form-label-suffix-optional {
		font-weight: 700;
		text-transform: none;
		letter-spacing: 0;
		color: var(--co-muted);
	}

/* --- controls: inputs and selects finally agree --------------------------- */

.addressform .form-control,
.addressform select.form-control,
.addressform .has-feedback .form-control.text-box,
.addressform input#ShippingAddress_Address_Address2 {
	/* !important answers style.css:25, `select.form-control { height: 3.5rem !important }`,
	   which is unreachable from here otherwise - the same fight the cart quantity had. */
	height: 46px !important;
	width: 100%;
	margin-bottom: 0;
	padding: 8px 13px;
	border: 1px solid var(--co-line-strong);
	border-radius: var(--co-radius-sm);
	background-color: var(--co-surface);
	box-shadow: none;
	font-size: .95rem;
	color: var(--co-ink);
}

.addressform select.form-control {
	/* the platform caret goes with appearance:none, so it is drawn back in */
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6560' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 10px 6px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

	.addressform .form-control:focus,
	.addressform select.form-control:focus {
		border-color: var(--co-ink);
		outline: 2px solid var(--co-ink);
		outline-offset: 1px;
		box-shadow: none;
	}

	.addressform .form-control::placeholder {
		color: #a39c92;
	}

/* Validation reads as the accent, and only occupies space when it has something to say. */
.addressform .field-validation-error,
.addressform .form-validation-message {
	display: block;
	margin-top: 4px;
	font-size: .78rem;
	font-weight: 700;
	color: var(--co-accent);
}

.addressform .field-validation-valid:empty {
	display: none;
}

.addressform .form-control.input-validation-error {
	border-color: var(--co-accent);
}

/* --- the PO Box note ------------------------------------------------------ */

.addressform .address-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: -2px 0 11px;
	padding: 7px 11px;
	border-radius: var(--co-radius-sm);
	background: var(--co-accent-wash);
	color: var(--co-ink);
	font-size: .78rem;
	line-height: 1.35;
}

	.addressform .address-note p {
		margin: 0;
	}

	.addressform .address-note .fa {
		margin-top: 2px;
		color: var(--co-accent);
	}

/* --- checkboxes ----------------------------------------------------------- */

.addressform label.checkbox-label {
	font-size: .85rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--co-ink);
}

/* --- the commit ----------------------------------------------------------- */

/* Was Bootstrap primary blue with a 48px pill radius - the one button in the
   funnel that looked like it belonged to another site. */
.addressform .Billing-address-control input.btn,
.addressform input.update-button {
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 11px;
	padding: 14px 20px;
	background: var(--co-accent) !important;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: background-color .15s ease, box-shadow .15s ease;
}

	.addressform .Billing-address-control input.btn:hover,
	.addressform .Billing-address-control input.btn:focus {
		background: var(--co-accent-dark) !important;
		box-shadow: 0 2px 12px rgba(167, 0, 26, .25);
		color: #fff;
	}

@media (max-width: 991.98px) {
	.addressform .address-control {
		padding: 18px 16px 4px;
	}

	/* the commit sits under the form on a phone, not above the summary */
	.addressform .Billing-address-control {
		display: flex;
		flex-direction: column;
	}

		.addressform .Billing-address-control input.btn {
			order: 2;
			margin-top: 16px;
		}
}

/* The "billing is the same as shipping" row. JS toggles d-none on it, so it is
   invisible until the shopper unticks the box - which is exactly why it had gone
   unnoticed as a grey inline-styled slab. */
.addressform .billing-same-row {
	width: 100%;
	margin: 4px 0 10px;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-sm);
	background: var(--co-surface-alt);
}