/* Omni Checkout — MD3 layout + component overrides */

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Shell stays visible from first paint so Safari Contact AutoFill can scan fields.
   (Opacity:0 until session load breaks Safari autofill while Chrome still works.) */

body {
	margin: 0;
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-family-label);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Shell ─── */

.checkout-shell {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		'notice'
		'brand'
		'summary'
		'form';
	min-height: 100vh;
	width: 100%;
}

.checkout-notice {
	grid-area: notice;
	padding: var(--md-space-3) var(--checkout-content-inset) 0;
}

.checkout-notice:empty {
	display: none;
}

/* Mobile: unwrap so brand / summary / form keep separate grid areas */
.checkout-main {
	display: contents;
}

.brand-header {
	grid-area: brand;
	padding: var(--md-space-3) var(--checkout-content-inset) 0;
	background: var(--color-bg);
}

.form-panel {
	grid-area: form;
	padding: var(--md-space-3) var(--checkout-content-inset) var(--md-space-4);
	background: var(--color-bg);
	max-width: none;
	width: 100%;
}

.summary-panel {
	grid-area: summary;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--md-space-3) var(--checkout-content-inset);
	background: var(--color-bg);
}

@media (min-width: 840px) {
	.checkout-shell {
		max-width: var(--checkout-max-width);
		margin: 0 auto;
		grid-template-columns: minmax(0, 1fr) var(--checkout-summary-col);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'notice notice'
			'main summary';
		background: #F0EEE9;
	}

	:root {
		--checkout-content-inset: var(--md-space-4);
		--line-item-thumb-size: 72px;
	}

	.checkout-notice {
		padding: var(--md-space-3) var(--checkout-content-inset) 0;
	}

	/* One left column = one horizontal inset for brand + Contact */
	.checkout-main {
		grid-area: main;
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: var(--md-space-4) var(--checkout-content-inset) var(--md-space-5);
		background: var(--color-bg);
	}

	.summary-panel {
		border-left: 0.5px solid #d9d9d9;
	}

	.brand-header {
		grid-area: unset;
		padding: 0;
		margin: 0;
	}

	.checkout-main .form-panel {
		grid-area: unset;
		flex: 1 1 auto;
		padding: var(--md-space-3) 0 0;
		margin: 0;
	}

	.checkout-main .form-panel,
	.checkout-main #checkout-form,
	.checkout-main fieldset.step {
		width: 100%;
		max-width: none;
	}

	.summary-panel {
		display: flex;
		flex-direction: column;
		padding: var(--md-space-4) var(--checkout-content-inset) var(--md-space-3);
		min-height: 0;
		align-self: stretch;
	}

	.summary-header {
		flex: 0 0 auto;
		min-height: var(--checkout-brand-content-height);
		margin-bottom: 0;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.summary-toggle {
		display: none;
	}

	.summary-panel .summary-body {
		display: block;
		flex: 1 1 auto;
		padding-top: var(--md-space-3);
	}

	.brand-word {
		font-size: var(--font-size-heading);
	}
}

/* ─── Brand header ─── */

.brand-header {
	margin-bottom: 0;
}

.brand-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-2);
	width: 100%;
}

.brand-logo {
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: var(--md-sys-color-on-surface);
}

.brand-logo:has(.brand-logo-img:not([hidden])) {
	display: inline-flex;
	align-items: center;
	gap: var(--md-space-1);
}

.brand-logo-img {
	display: block;
	max-height: 36px;
	max-width: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.brand-word {
	margin-bottom: 0;
}

/* ─── Form panel ─── */

.checkout-main #checkout-form {
	margin: 0;
	padding: 0;
	border: 0;
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-inline-size: 0;
}

fieldset.step {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: var(--md-space-4);
}

fieldset.step:last-of-type {
	margin-bottom: 0;
}

.step-heading,
.summary-title {
	display: block;
	width: 100%;
	margin: 0 0 var(--md-space-2);
	padding: 0;
	/* Matches the dashboard preview's section titles (checkout-preview-mock.tsx),
	   which render at the same size as body text, not the golden-ratio
	   --font-size-heading scale used for the brand name / grand total. */
	font-size: var(--font-size-base);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-heading, var(--font-weight-bold));
	letter-spacing: -0.01em;
	color: var(--color-text);
}

/* [hidden] is user-agent origin and loses to any author "display" rule of
   equal or higher specificity (e.g. .step-heading above) — restate it here
   with the same specificity so toggling `.hidden = true` in JS actually hides
   the element instead of being silently overridden back to display:block. */
.step-heading[hidden],
.summary-title[hidden] {
	display: none;
}

.field-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--md-space-2);
	width: 100%;
}

.field-row {
	display: grid;
	gap: var(--md-space-2);
	width: 100%;
}

.field-row > .field,
.field-row > md-outlined-text-field {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.field-row--halves {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-row--city {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Native light-DOM fields — required for reliable mobile autofill. */
.field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	min-width: 0;
	margin: 0;
}

.field__label {
	font-family: var(--font-family-label);
	font-size: 0.8125rem;
	line-height: 1.2;
	font-weight: 500;
	color: var(--color-text-muted);
	cursor: text;
}

/* Match customize-checkout preview: text fields use in-input placeholders;
   only selects (country) keep a visible label above the control. */
.field:not(:has(select)) .field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.field:not(:has(select)) {
	gap: 0;
}

.field__control::placeholder {
	color: var(--color-text-muted, #8a8a8a);
	opacity: 1;
}

.field--state[hidden] {
	display: none !important;
}

.field__control {
	width: 100%;
	min-width: 0;
	height: var(--checkout-field-height, 48px);
	padding: 0 14px;
	border: 0.5px solid #d9d9d9;
	border-radius: var(--md-sys-shape-corner-medium);
	background: var(--color-input-bg);
	color: var(--color-text);
	font-family: var(--font-family-input, var(--font-family-label));
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	/* Do not set appearance:none on text inputs — it can break iOS autofill UI. */
	box-shadow: none;
}

.field__control:focus {
	outline: none;
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-input-focus);
}

.field__control:disabled {
	opacity: 0.6;
}

select.field__control {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-color: var(--color-input-bg);
}

/* Keep autofill colors from fighting the merchant theme. */
.field__control:-webkit-autofill,
.field__control:-webkit-autofill:hover,
.field__control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--color-text);
	caret-color: var(--color-text);
	box-shadow: inset 0 0 0 9999px var(--color-input-bg);
	transition: background-color 99999s ease-out;
}

.field-stack > .field {
	flex: 1 1 auto;
}

/* Discount field (and any remaining MD inputs) keep Material styling. */
md-outlined-text-field {
	width: 100%;
	max-width: 100%;
	display: flex;
	align-self: stretch;
	box-sizing: border-box;
	background-color: var(--color-input-bg);
	border-radius: var(--md-sys-shape-corner-medium);
	--md-outlined-text-field-container-shape: var(--md-sys-shape-corner-medium);
	--md-outlined-field-container-shape: var(--md-sys-shape-corner-medium);
	--md-outlined-text-field-input-text-color: var(--color-text);
	--md-outlined-text-field-label-text-color: var(--color-text-muted);
	--md-outlined-text-field-outline-color: var(--color-border);
	--md-outlined-text-field-focus-outline-color: var(--color-border-strong);
	--md-outlined-text-field-label-text-font: var(--font-family-label);
	--md-outlined-text-field-input-text-font: var(--font-family-input);
	--md-outlined-field-top-space: 12px;
	--md-outlined-field-bottom-space: 12px;
}

md-filled-button {
	display: inline-flex;
}

.field-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--md-space-1);
	margin: 0;
	color: var(--md-sys-color-on-surface-variant);
	cursor: pointer;
}

.field-checkbox input[type='checkbox'] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--color-accent);
}

.rate-option__radio {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--color-accent);
}

.billing-fields {
	margin: var(--md-space-2) 0 var(--md-space-3);
}

/* ─── Express checkout ─── */

.express-checkout {
	margin-bottom: var(--md-space-3);
}

.paypal-button-container {
	min-height: var(--input-height);
	border-radius: var(--md-sys-shape-corner-medium);
	overflow: hidden;
}

.express-powered {
	margin: var(--md-space-1) 0 0;
	color: var(--md-sys-color-on-surface-variant);
	text-align: center;
}

.express-divider {
	display: flex;
	align-items: center;
	gap: var(--md-space-2);
	margin: var(--md-space-3) 0 0;
	color: var(--md-sys-color-on-surface-variant);
}

.express-divider::before,
.express-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--md-sys-color-outline-variant);
}

/* ─── Shipping rates ─── */

.rates {
	display: flex;
	flex-direction: column;
	gap: var(--md-space-2);
}

.rate-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-2);
	padding: var(--md-space-2);
	border: 0.5px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-medium);
	background: var(--md-sys-color-surface-container-lowest);
	cursor: pointer;
	transition:
		border-color 200ms cubic-bezier(0.2, 0, 0, 1),
		background 200ms cubic-bezier(0.2, 0, 0, 1);
}

.rate-option:has(.rate-option__radio:checked) {
	border-color: var(--color-border-strong);
	background: var(--md-sys-color-surface-container-lowest);
}

.rate-option__label {
	display: flex;
	align-items: center;
	gap: var(--md-space-1);
	flex: 1;
	min-width: 0;
	color: var(--md-sys-color-on-surface);
}

.rate-option__price {
	flex-shrink: 0;
	color: var(--md-sys-color-on-surface);
	font-weight: var(--font-weight-medium);
}

/* ─── Payment block ─── */

.step-payment {
	margin-top: var(--md-space-4);
}

#payment-embed-container {
	margin: 0;
	padding: 0;
	min-height: 0;
}

#payment-embed-container > div {
	margin: 0 !important;
}

.step-payment .btn-complete {
	margin-top: var(--md-space-3);
}

.btn-complete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--checkout-complete-button-height, var(--md-space-6));
	padding: 0 16px;
	border: none;
	border-radius: var(--md-sys-shape-corner-medium);
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-family: var(--font-family-label);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium, 500);
	cursor: pointer;
}

.btn-complete:hover {
	background: var(--color-accent-hover);
}

.btn-complete[hidden] {
	display: none;
}

md-filled-button[hidden],
md-text-button[hidden],
md-linear-progress[hidden] {
	display: none;
}

.hint {
	margin: 0;
	color: var(--md-sys-color-on-surface-variant);
}

.field-error {
	margin: var(--md-space-1) 0 0;
	color: var(--md-sys-color-error);
	font-size: var(--font-size-sm);
}

.error {
	margin: var(--md-space-2) 0 0;
	color: var(--md-sys-color-error);
	font-size: var(--font-size-sm);
}

/* ─── Legal footer ─── */

.checkout-legal {
	margin-top: var(--md-space-3);
	text-align: center;
}

.policy-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--md-space-1) var(--md-space-3);
}

.policy-link {
	color: var(--md-sys-color-on-surface-variant);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.policy-link:hover {
	color: var(--md-sys-color-on-surface);
}

/* ─── Order summary ─── */

.summary-body {
	flex: 1 1 auto;
	width: 100%;
}

.summary-header {
	display: flex;
	align-items: center;
	margin-bottom: var(--md-space-2);
}

.summary-toggle {
	display: none;
	width: 100%;
	margin: 0;
	padding: var(--md-space-2) 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-2);
}

.summary-toggle-leading {
	display: flex;
	align-items: center;
	gap: var(--md-space-1);
	min-width: 0;
}

.summary-toggle-basket {
	flex-shrink: 0;
	width: 18px;
	font-size: 15px;
	text-align: center;
	color: var(--color-text);
}

.summary-toggle-label {
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-tight);
	white-space: nowrap;
}

.summary-toggle-total {
	flex-shrink: 0;
	margin-left: auto;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	white-space: nowrap;
}

.summary-toggle-icon {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-text);
	border-bottom: 2px solid var(--color-text);
	transform: rotate(45deg);
	transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.summary-panel[data-collapsed='false'] .summary-toggle-icon {
	transform: rotate(-135deg);
}

.discount-row {
	display: flex;
	gap: var(--md-space-2);
	align-items: stretch;
	margin: var(--md-space-2) 0 var(--md-space-3);
}

.discount-row md-outlined-text-field {
	flex: 1 1 auto;
	min-width: 0;
}

.discount-field-icon {
	opacity: 0.2;
	font-size: var(--font-size-base);
	line-height: 1;
	color: var(--color-text);
}

.btn-discount {
	flex-shrink: 0;
	align-self: stretch;
	--md-filled-button-container-shape: var(--md-sys-shape-corner-medium);
	--md-filled-button-container-color: var(--color-accent);
	--md-filled-button-label-text-color: var(--color-accent-text);
	--md-filled-button-hover-container-color: var(--color-accent-hover);
}

md-filled-button.btn-discount {
	display: inline-flex;
}

.discount-message {
	margin: 0 0 var(--md-space-2);
}

.discount-message.field-error {
	color: var(--md-sys-color-error, #b3261e);
}

.summary-totals-block {
	margin-top: 0;
	padding-top: var(--md-space-3);
	border-top: 0.5px solid #d9d9d9;
}

/* Desktop panel heading — mobile uses .summary-toggle instead */
.summary-title--desktop {
	display: none;
}

@media (min-width: 840px) {
	.summary-title--desktop {
		display: block;
	}

	.summary-panel .summary-body {
		display: block;
	}
}

.line-items {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.line-items li,
.line-item {
	display: grid;
	grid-template-columns: var(--line-item-thumb-size) minmax(0, 1fr);
	align-items: start;
	gap: var(--md-space-2);
	padding: var(--md-space-2) 0;
	width: 100%;
}

.line-items li:first-child,
.line-item:first-child {
	padding-top: 0;
}

.line-items li:last-child,
.line-item:last-child {
	padding-bottom: 0;
}

.line-item-thumb {
	position: relative;
	width: var(--line-item-thumb-size);
	height: var(--line-item-thumb-size);
	flex-shrink: 0;
}

.line-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	/*border: 0.5px solid #b0b0b0;*/
	background: var(--md-sys-color-surface-container-lowest);
}

.line-item-thumb.is-empty::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--md-sys-shape-corner-small);
	border: 0.5px solid #d9d9d9;
	background: var(--md-sys-color-surface-container-lowest);
}

.line-item-qty {
	position: absolute;
	top: calc(var(--md-space-1) * -1);
	right: calc(var(--md-space-1) * -1);
	z-index: 1;
	min-width: 24px;
	height: 24px;
	padding: 0 var(--md-space-1);
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 24px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--color-bg);
}

.line-item-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--md-space-1) var(--md-space-2);
	min-width: 0;
	padding-top: var(--md-space-1);
}

.line-item-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.line-item-title {
	display: block;
	min-width: 0;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	overflow-wrap: break-word;
}

.line-item-variant {
	display: block;
	margin-top: 2px;
	color: var(--md-sys-color-on-surface-variant);
	line-height: var(--line-height-relaxed);
	overflow-wrap: break-word;
}

.line-item-price {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.totals {
	margin-top: 0;
}

.total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--md-space-2);
	padding: var(--md-space-1) 0;
	color: var(--md-sys-color-on-surface);
}

.total-row span:first-child {
	flex: 1 1 auto;
	min-width: 0;
	text-align: start;
}

.total-row span:last-child {
	flex: 0 0 auto;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.total-row--grand {
	margin-top: var(--md-space-2);
	padding-top: var(--md-space-2);
	border-top: 0.5px solid #d9d9d9;
	font-weight: var(--font-weight-bold);
}

.total-row--grand span:last-child {
	font-size: var(--font-size-heading);
	line-height: var(--line-height-tight);
}

.continue-shopping {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	color: var(--md-sys-color-on-surface-variant);
	text-decoration: none;
	white-space: nowrap;
}

.continue-shopping__icon {
	font-size: 0.95em;
	opacity: 0.85;
}

/* Two "Continue shopping" links exist in the DOM — header (mobile) and summary
   (desktop) — only one should render per breakpoint. Desktop default: summary only. */
.continue-shopping--brand {
	display: none;
}

.continue-shopping--summary {
	display: inline-flex;
}

.continue-shopping:hover {
	color: var(--md-sys-color-on-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── Preview banner ─── */

.preview-banner {
	margin: 0;
	padding: var(--md-space-2);
	border-radius: var(--md-sys-shape-corner-small);
	background: var(--color-warning-bg);
	border: 0.5px solid var(--color-warning-border);
	color: var(--color-warning-text);
	font-size: var(--font-size-sm);
}

/* ─── Complete / confirmation page ─── */

.complete-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--md-space-3) var(--page-gutter);
	background: var(--color-bg);
}

.complete-card {
	width: min(440px, 100%);
	padding: var(--md-space-4) var(--md-space-3);
	background: var(--md-sys-color-surface-container-high);
	border: 0.5px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-extra-large);
	text-align: center;
}

.complete-brand {
	margin: 0 0 var(--md-space-3);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.complete-card h1 {
	margin: 0 0 var(--md-space-2);
	color: var(--md-sys-color-on-surface);
}

.complete-card #status-message {
	margin: 0;
	color: var(--md-sys-color-on-surface-variant);
}

.complete-meta {
	margin: var(--md-space-3) 0 0;
	font-size: var(--font-size-sm);
	color: var(--md-sys-color-on-surface-variant);
}

.complete-progress {
	margin: 0 auto var(--md-space-3);
	max-width: 280px;
}

.complete-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--md-space-2);
	margin-top: var(--md-space-3);
}

.complete-actions md-filled-button,
.complete-actions md-text-button {
	min-width: 200px;
}

.complete-actions md-filled-button {
	--md-filled-button-container-shape: var(--md-sys-shape-corner-medium);
	--md-filled-button-container-color: var(--color-accent);
	--md-filled-button-label-text-color: var(--color-accent-text);
}

.complete-card[data-state='paid'] .complete-progress,
.complete-card[data-state='failed'] .complete-progress,
.complete-card[data-state='timeout'] .complete-progress {
	display: none;
}

.complete-card[data-state='paid'] {
	border-color: var(--color-success-border);
	background: linear-gradient(
		180deg,
		var(--color-success-bg),
		var(--md-sys-color-surface-container-high) 48%
	);
}

/* ─── Responsive ─── */

@media (max-width: 839px) {
	.checkout-shell {
		max-width: none;
		box-shadow: none;
	}

	.brand-header {
		padding: var(--md-space-3) var(--checkout-content-inset) 0;
	}

	.continue-shopping--brand {
		display: inline-flex;
	}

	.continue-shopping--summary {
		display: none;
	}

	.summary-header {
		display: none;
	}

	.form-panel {
		padding: 0 var(--checkout-content-inset) var(--md-space-4);
		padding-top: 0;
	}

	/* One continuous bordered box wraps the toggle header and the expanded
	   content — no gap. A single internal divider separates the header from
	   the content below it; the totals section has its own two divider lines
	   further down (see .summary-totals-block / .total-row--grand).
	   Margin (not padding) keeps the box away from the screen edges and from
	   the logo above / payment buttons below — otherwise it's full-bleed and
	   the border is invisible against the viewport edge. */
	.summary-panel {
		margin: var(--md-space-4) var(--checkout-content-inset);
		padding: 0;
		border: 0.1px solid #d9d9d9;
		background: var(--color-bg);
	}

	.summary-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: var(--md-space-6);
		margin-bottom: 0;
		padding: var(--md-space-2) var(--md-space-3);
	}

	.summary-panel[data-collapsed='true'] .summary-body {
		display: none;
	}

	.summary-panel[data-collapsed='false'] .summary-body {
		padding: var(--md-space-3);
		border-top: 0.5px solid #d9d9d9;
	}
}

@media (max-width: 600px) {
	.field-row--halves,
	.field-row--city {
		grid-template-columns: 1fr;
	}
}