/**
 * Swift Checkout — frontend styles.
 *
 * All colors, radii and typography come from CSS custom properties emitted by
 * Swift_Checkout_Assets::build_css_variables(), so the settings panel controls
 * the whole surface without touching this file.
 *
 * Layout notes:
 * - Desktop-first, with a phone breakpoint at 640px and a tablet one at 1024px.
 * - The cart is a side drawer from tablet up and a bottom sheet on phones,
 *   selected by the data-mobile-style attribute rather than JavaScript, so it
 *   is correct before scripts run.
 * - Every interactive target is at least 44x44 and every text input is at least
 *   16px on touch, which is what stops iOS Safari zooming on focus.
 */

/* -------------------------------------------------------------------------
 * Fallback tokens (in case inline vars fail to print)
 * ---------------------------------------------------------------------- */

:root {
	--swiftco-accent: #111111;
	--swiftco-accent-hover: #333333;
	--swiftco-accent-text: #ffffff;
	--swiftco-success: #0f7b52;
	--swiftco-surface: #ffffff;
	--swiftco-surface-muted: #f6f6f7;
	--swiftco-text: #1a1a1a;
	--swiftco-text-muted: #6b7177;
	--swiftco-border: #e1e3e5;
	--swiftco-page-bg: #ffffff;
	/* The order summary panel runs its own palette so a brand-coloured band can
	   carry light type. Settings → Design → Order summary panel. */
	--swiftco-sum-bg: #f6f6f7;
	--swiftco-sum-heading: #1a1a1a;
	--swiftco-sum-text: #1a1a1a;
	--swiftco-sum-muted: #6b7177;
	--swiftco-sum-border: #e1e3e5;
	--swiftco-sum-badge-bg: #6b7177;
	--swiftco-sum-badge-text: #ffffff;
	--swiftco-logo-width: 180px;
	--swiftco-radius: 8px;
	--swiftco-radius-sm: 4px;
	--swiftco-radius-button: 8px;
	--swiftco-font: inherit;
	--swiftco-drawer-width: 460px;
	--swiftco-sheet-max: 88dvh;
	--swiftco-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 40px rgba(0, 0, 0, .12);
	--swiftco-focus: 0 0 0 3px rgba(0, 0, 0, .12);
	--swiftco-ease: cubic-bezier(.32, .72, 0, 1);
	--swiftco-tap: 44px;
	/* Inlined so the icon needs no HTTP request and can be recoloured by mask. */
	--swiftco-trash-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 6h12M8 6V4.6c0-.6.4-1 1-1h2c.6 0 1 .4 1 1V6m-6 0 .7 9.4c0 .6.5 1 1 1h4.6c.5 0 1-.4 1-1L15 6" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* -------------------------------------------------------------------------
 * Primitives
 * ---------------------------------------------------------------------- */

.swiftco-btn {
	align-items: center;
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius-button);
	color: var(--swiftco-text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-family: var(--swiftco-font);
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	min-height: 52px;
	padding: 14px 20px;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, transform .06s ease, opacity .18s ease;
}

.swiftco-btn:hover { text-decoration: none; }
.swiftco-btn:active { transform: translateY(1px); }
.swiftco-btn:focus-visible { box-shadow: var(--swiftco-focus); outline: 2px solid var(--swiftco-accent); outline-offset: 2px; }

.swiftco-btn--primary {
	background: var(--swiftco-accent);
	border-color: var(--swiftco-accent);
	color: var(--swiftco-accent-text);
}
.swiftco-btn--primary:hover { background: var(--swiftco-accent-hover); border-color: var(--swiftco-accent-hover); color: var(--swiftco-accent-text); }

.swiftco-btn--dark {
	background: var(--swiftco-accent);
	border-color: var(--swiftco-accent);
	color: var(--swiftco-accent-text);
	opacity: .88;
}
.swiftco-btn--dark:hover { color: var(--swiftco-accent-text); opacity: 1; }

.swiftco-btn--secondary:hover { background: var(--swiftco-surface-muted); }

.swiftco-btn--block { display: flex; width: 100%; }

.swiftco-btn__icon { flex: 0 0 auto; height: 18px; width: 18px; }
.swiftco-btn__total { font-variant-numeric: tabular-nums; opacity: .92; }

.swiftco-btn.is-loading { opacity: .65; pointer-events: none; }

.swiftco-count {
	font-size: inherit;
	font-weight: 400;
	opacity: .55;
}

/* -------------------------------------------------------------------------
 * Scrim + drawer shell
 * ---------------------------------------------------------------------- */

.swiftco-scrim {
	background: rgba(15, 17, 20, .42);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity .3s var(--swiftco-ease);
	z-index: 999998;
}
.swiftco-scrim[hidden] { display: none; }
.swiftco-scrim.is-visible { opacity: 1; }

.swiftco-drawer {
	background: var(--swiftco-surface);
	box-shadow: var(--swiftco-shadow);
	color: var(--swiftco-text);
	display: flex;
	flex-direction: column;
	font-family: var(--swiftco-font);
	height: 100vh;
	height: 100dvh;
	/* 100% rather than 100vw — on a desktop with a visible scrollbar, 100vw is
	   wider than the usable viewport. */
	max-width: 100%;
	position: fixed;
	top: 0;
	transition: transform .38s var(--swiftco-ease);
	width: var(--swiftco-drawer-width);
	z-index: 999999;
}
.swiftco-drawer[hidden] { display: none; }

.swiftco-drawer--right { right: 0; transform: translateX(100%); border-radius: 28px 0 0 28px; }
.swiftco-drawer--left { left: 0; transform: translateX(-100%); border-radius: 0 28px 28px 0; }
.swiftco-drawer.is-open { transform: translateX(0); }

/* Suppressed while a pointer drag is in progress so the sheet tracks the finger. */
.swiftco-drawer.is-dragging { transition: none; }

/* Drag handle — only meaningful in sheet mode. */
.swiftco-drawer__handle { display: none; }

.swiftco-drawer__header {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	justify-content: space-between;
	padding: 24px 24px 12px;
}

.swiftco-drawer__title {
	align-items: baseline;
	display: flex;
	font-size: 26px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0;
}

.swiftco-drawer__close {
	align-items: center;
	background: none;
	border: 1px solid var(--swiftco-border);
	border-radius: 50%;
	color: var(--swiftco-text);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: var(--swiftco-tap);
	justify-content: center;
	padding: 0;
	width: var(--swiftco-tap);
}
.swiftco-drawer__close:hover { background: var(--swiftco-surface-muted); }
.swiftco-drawer__close svg { height: 20px; width: 20px; }

/* Pinned band above the scrolling items. */
.swiftco-drawer__progress {
	flex: 0 0 auto;
	padding: 0 24px;
}
.swiftco-drawer__progress.is-empty { display: none; }

.swiftco-drawer__body {
	flex: 1 1 auto;
	/* Required. A flex item's automatic minimum size is its content, so without
	   this the list refuses to shrink and the region will not scroll. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 24px;
	-webkit-overflow-scrolling: touch;
}

/* Pinned band below the scrolling items. Laid out horizontally because pinned
   vertical space is expensive — a stacked list here would push the totals and
   the checkout button off a short screen. */
.swiftco-drawer__recs {
	border-top: 1px solid var(--swiftco-border);
	flex: 0 0 auto;
	padding: 14px 0 0 24px;
}
.swiftco-drawer__recs.is-empty { display: none; }

.swiftco-drawer__footer {
	background: var(--swiftco-surface);
	border-top: 1px solid var(--swiftco-border);
	flex: 0 0 auto;
	padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
}
.swiftco-drawer__footer.is-empty { display: none; }

.swiftco-drawer__totals {
	align-items: baseline;
	display: flex;
	font-size: 15px;
	justify-content: space-between;
	margin-bottom: 6px;
}
.swiftco-drawer__totals-value { font-variant-numeric: tabular-nums; }

.swiftco-drawer__grand {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
}
.swiftco-drawer__grand-label { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.swiftco-drawer__grand-value { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 700; }

.swiftco-drawer__actions { display: grid; gap: 10px; }
.swiftco-drawer__actions.has-secondary { grid-template-columns: 1fr 1.35fr; }
.swiftco-drawer__actions .swiftco-btn { border-radius: 999px; width: 100%; }

.swiftco-drawer__fineprint {
	color: var(--swiftco-text-muted);
	font-size: 12.5px;
	margin: 12px 0 0;
	text-align: center;
}

/* Payment method chips. Text labels rather than brand marks, deliberately —
   shipping third-party logos in a distributed plugin is a trademark problem. */

.swiftco-paymethods {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.swiftco-paymethods__item {
	align-items: center;
	background: var(--swiftco-surface-muted);
	border: 1px solid var(--swiftco-border);
	border-radius: 4px;
	color: var(--swiftco-text-muted);
	display: flex;
	font-size: 8.5px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	letter-spacing: .04em;
	padding: 0 7px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Free shipping progress with milestones
 * ---------------------------------------------------------------------- */

.swiftco-progress { padding: 6px 0 18px; }

.swiftco-progress__marks {
	height: 20px;
	margin: 0 0 6px;
	position: relative;
}

.swiftco-progress__mark {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}
/* Keep the first and last labels inside the track rather than clipped. */
.swiftco-progress__mark[style*="left:0%"],
.swiftco-progress__mark[style*="left:0.00%"] { transform: translateX(0); }
.swiftco-progress__mark[style*="left:100%"],
.swiftco-progress__mark[style*="left:100.00%"] { transform: translateX(-100%); }

.swiftco-progress__mark-label {
	color: var(--swiftco-text-muted);
	font-size: 13px;
	font-weight: 600;
}
.swiftco-progress__mark.is-reached .swiftco-progress__mark-label { color: var(--swiftco-text); }

.swiftco-progress__track {
	background: var(--swiftco-surface-muted);
	border-radius: 999px;
	height: 6px;
	position: relative;
}

.swiftco-progress__fill {
	background: var(--swiftco-success);
	border-radius: 999px;
	display: block;
	height: 100%;
	transition: width .45s var(--swiftco-ease);
}

.swiftco-progress__dot {
	background: var(--swiftco-surface);
	border: 2px solid var(--swiftco-border);
	border-radius: 50%;
	height: 14px;
	margin-left: -7px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color .3s ease, border-color .3s ease;
	width: 14px;
}
.swiftco-progress__dot.is-reached { background: var(--swiftco-success); border-color: var(--swiftco-success); }

.swiftco-progress__label {
	font-size: 14px;
	margin: 10px 0 0;
	text-align: center;
}

.swiftco-progress__highlight {
	background: var(--swiftco-surface-muted);
	border-radius: var(--swiftco-radius-sm);
	color: var(--swiftco-text);
	font-weight: 700;
	padding: 2px 6px;
}
.swiftco-progress.is-complete .swiftco-progress__highlight {
	background: var(--swiftco-surface-muted);
	color: var(--swiftco-success);
}
@supports (background: color-mix(in srgb, red 5%, white)) {
	.swiftco-progress.is-complete .swiftco-progress__highlight {
		background: color-mix(in srgb, var(--swiftco-success) 14%, var(--swiftco-surface));
	}
}

/* -------------------------------------------------------------------------
 * Line items
 * ---------------------------------------------------------------------- */

.swiftco-items { list-style: none; margin: 0; padding: 0; }

.swiftco-item {
	border-top: 1px solid var(--swiftco-border);
	display: flex;
	gap: 14px;
	padding: 18px 0;
}
.swiftco-item:first-child { border-top: 0; }
.swiftco-item.is-updating { opacity: .5; pointer-events: none; }

.swiftco-item__media { flex: 0 0 84px; width: 84px; }
.swiftco-item__media img {
	aspect-ratio: 1 / 1;
	background: var(--swiftco-surface-muted);
	border-radius: var(--swiftco-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.swiftco-item__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }

.swiftco-item__head { display: flex; gap: 12px; justify-content: space-between; }

.swiftco-item__title { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin: 0; }
.swiftco-item__title a { color: inherit; text-decoration: none; }
.swiftco-item__title a:hover { text-decoration: underline; }

.swiftco-item__price {
	flex: 0 0 auto;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.swiftco-item__meta { color: var(--swiftco-text-muted); font-size: 13px; margin: 0; }
.swiftco-item__meta p { margin: 0; }

.swiftco-item__foot {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: 8px;
}

/* Pill stepper, with the remove control kept separate so a mis-tap never
   deletes a line the shopper meant to decrement. */

.swiftco-qty {
	align-items: center;
	border: 1px solid var(--swiftco-border);
	border-radius: 999px;
	display: inline-flex;
	overflow: hidden;
}

.swiftco-qty__btn {
	align-items: center;
	background: none;
	border: 0;
	color: var(--swiftco-text);
	cursor: pointer;
	display: flex;
	height: var(--swiftco-tap);
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: var(--swiftco-tap);
}
.swiftco-qty__btn:hover { background: var(--swiftco-surface-muted); }
.swiftco-qty__btn svg { height: 15px; width: 15px; }

.swiftco-qty__input {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: 16px;
	height: var(--swiftco-tap);
	padding: 0;
	text-align: center;
	width: 34px;
}
.swiftco-qty__input::-webkit-outer-spin-button,
.swiftco-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.swiftco-qty__input:focus { outline: none; }

.swiftco-item__remove {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--swiftco-text-muted);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: var(--swiftco-tap);
	justify-content: center;
	padding: 0;
	width: var(--swiftco-tap);
}
.swiftco-item__remove:hover { background: var(--swiftco-surface-muted); color: var(--swiftco-text); }
.swiftco-item__remove svg { height: 19px; width: 19px; }

/* -------------------------------------------------------------------------
 * Recommendations
 * ---------------------------------------------------------------------- */

.swiftco-recs { margin: 0; padding: 0; }

.swiftco-recs__title {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.swiftco-recs__list {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 0 24px 14px 0;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
/* A slim scrollbar hints that there is more to the side without stealing
   height from the pinned strip. */
.swiftco-recs__list::-webkit-scrollbar { height: 4px; }
.swiftco-recs__list::-webkit-scrollbar-thumb { background: var(--swiftco-border); border-radius: 999px; }

.swiftco-rec {
	align-items: center;
	background: var(--swiftco-surface-muted);
	border-radius: var(--swiftco-radius);
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
	padding: 8px;
	scroll-snap-align: start;
	width: 248px;
}

.swiftco-rec__media { display: block; flex: 0 0 44px; width: 44px; }
.swiftco-rec__media img { border-radius: var(--swiftco-radius-sm); display: block; height: auto; width: 100%; }

.swiftco-rec__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swiftco-rec__title { color: inherit; font-size: 13.5px; font-weight: 600; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.swiftco-rec__price { color: var(--swiftco-text-muted); font-size: 12.5px; }
.swiftco-rec__price del { opacity: .6; }

.swiftco-rec__add {
	align-items: center;
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	border-radius: 999px;
	color: var(--swiftco-text);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	justify-content: center;
	margin-left: auto;
	min-height: 36px;
	padding: 8px 14px;
	text-decoration: none;
}
.swiftco-rec__add:hover { background: var(--swiftco-accent); border-color: var(--swiftco-accent); color: var(--swiftco-accent-text); }

/* -------------------------------------------------------------------------
 * Order note
 * ---------------------------------------------------------------------- */

.swiftco-note { margin-bottom: 14px; }

.swiftco-note__toggle {
	color: var(--swiftco-text-muted);
	cursor: pointer;
	font-size: 13.5px;
	list-style: none;
	min-height: 32px;
	padding: 6px 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.swiftco-note__toggle::-webkit-details-marker { display: none; }

.swiftco-note__input {
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius-sm);
	color: inherit;
	font: inherit;
	font-size: 16px;
	padding: 10px 12px;
	resize: vertical;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Empty state + toast
 * ---------------------------------------------------------------------- */

.swiftco-empty { padding: 56px 12px; text-align: center; }
.swiftco-empty__icon { color: var(--swiftco-border); height: 56px; margin-bottom: 12px; width: 56px; }
.swiftco-empty__title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.swiftco-empty__text { color: var(--swiftco-text-muted); font-size: 14px; margin: 0 0 20px; }

.swiftco-toast {
	background: var(--swiftco-text);
	border-radius: var(--swiftco-radius);
	bottom: 16px;
	color: #fff;
	display: flex;
	font-size: 13.5px;
	gap: 12px;
	justify-content: space-between;
	left: 16px;
	opacity: 0;
	padding: 12px 14px;
	position: absolute;
	right: 16px;
	transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease;
	z-index: 5;
}
.swiftco-toast[hidden] { display: none; }
.swiftco-toast.is-visible { opacity: 1; transform: translateY(0); }
.swiftco-toast button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-weight: 700;
	min-height: 32px;
	padding: 0 4px;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Quick add on product cards
 * ---------------------------------------------------------------------- */

/* The picker is positioned against the card, so the card needs to be a
   containing block. Themes vary, so cover the common wrappers. */
.woocommerce ul.products li.product,
ul.products li.product,
.wc-block-grid__product,
.swiftco-qa-host { position: relative; }

.swiftco-qa { position: static; }

/*
 * Move the sale flash out of the bottom-right corner on cards that have quick
 * add, so it cannot sit on top of the add button. Raising the button's z-index
 * alone would make it clickable but leave "Sale!" printed across the bag icon.
 * Scoped to cards Swift Checkout actually renders into, so the badge keeps the
 * theme's own placement everywhere else.
 */
li.product:has(.swiftco-qa) .onsale,
.wc-block-grid__product:has(.swiftco-qa) .onsale {
	bottom: auto;
	left: 10px;
	right: auto;
	top: 10px;
	z-index: 2;
}

/* Quick add is a pointer feature. Everything below is scoped to devices that
   actually have hover, and the fallback below covers everything else — done in
   CSS rather than by sniffing the user agent so a page cache can serve one
   document to every device. */
.swiftco-qa__view,
.swiftco-qa__panel,
.swiftco-qa__add,
.swiftco-qa__personalize { display: none; }

.swiftco-qa__fallback { display: block; }

@media (hover: hover) and (pointer: fine) {

	.swiftco-qa__fallback { display: none; }

	/*
	 * Quick view. No filled backplate — a solid block over the photo reads as
	 * a rendering artefact, especially when a theme resets border-radius on
	 * links and squares it off. The icon carries a drop shadow instead so it
	 * stays legible on both light and dark product shots.
	 */
	.swiftco-qa a.swiftco-qa__view,
	.swiftco-qa .swiftco-qa__view {
		align-items: center;
		background: none;
		border: 0;
		border-radius: 50%;
		box-shadow: none;
		color: var(--swiftco-qa-eye, #b5b8bc);
		display: flex;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
		height: var(--swiftco-tap);
		justify-content: center;
		opacity: 0;
		padding: 0;
		position: absolute;
		right: 8px;
		text-decoration: none;
		top: 8px;
		transition: opacity .2s ease, transform .18s ease, color .18s ease;
		width: var(--swiftco-tap);
		z-index: 6;
	}
	.swiftco-qa a.swiftco-qa__view:hover,
	.swiftco-qa .swiftco-qa__view:hover {
		background: none;
		color: #ffffff;
		transform: scale(1.08);
	}
	.swiftco-qa .swiftco-qa__view svg { height: 22px; width: 22px; }

	.swiftco-qa .swiftco-qa__panel { display: block; }

	.swiftco-qa button.swiftco-qa__add,
	.swiftco-qa .swiftco-qa__add {
		align-items: center;
		background: var(--swiftco-accent);
		border: 0;
		border-radius: 50%;
		bottom: 0;
		color: var(--swiftco-accent-text);
		cursor: pointer;
		display: flex;
		height: 62px;
		justify-content: center;
		padding: 0;
		position: absolute;
		right: 0;
		transition: transform .18s ease, opacity .2s ease, background-color .18s ease;
		width: 62px;
		/* Above WooCommerce's sale flash, which many themes park in this same
		   corner. Losing the stacking contest here means the shopper clicks a
		   decorative badge and nothing gets added to the cart. */
		z-index: 6;
	}

	.swiftco-qa .swiftco-qa__personalize { display: inline-flex; }

	/* Floating panel. JS sets `top` from the measured image; until then it sits
	   in normal flow so nothing is ever positioned over the product title. */
	.swiftco-qa--overlay .swiftco-qa__panel {
		background: var(--swiftco-surface);
		border-radius: 18px;
		box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
		left: 12px;
		/* Never eat more than the lower half of the photo. JS narrows this
		   further from the measured image height. */
		max-height: 52%;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 14px;
		position: absolute;
		right: 12px;
		z-index: 2;
	}
	.swiftco-qa--overlay .swiftco-qa__panel:not([style*="top"]) {
		box-shadow: none;
		max-height: none;
		padding: 12px 0;
		position: static;
	}

	/* Hover reveal. The panel and buttons stay out of the way until the card is
	   hovered or something inside it takes keyboard focus, so the product photo
	   is never obscured while browsing. */
	.swiftco-qa--hover .swiftco-qa__panel,
	.swiftco-qa--hover .swiftco-qa__view,
	.swiftco-qa--hover .swiftco-qa__add {
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity .22s ease, transform .22s var(--swiftco-ease);
	}
	.swiftco-qa--hover .swiftco-qa__view { transform: translateY(-6px); }

	li.product:hover .swiftco-qa--hover .swiftco-qa__panel,
	li.product:focus-within .swiftco-qa--hover .swiftco-qa__panel,
	.wc-block-grid__product:hover .swiftco-qa--hover .swiftco-qa__panel,
	.swiftco-qa--hover:hover .swiftco-qa__panel,
	.swiftco-qa--hover:focus-within .swiftco-qa__panel,
	li.product:hover .swiftco-qa--hover .swiftco-qa__view,
	li.product:focus-within .swiftco-qa--hover .swiftco-qa__view,
	.wc-block-grid__product:hover .swiftco-qa--hover .swiftco-qa__view,
	.swiftco-qa--hover:hover .swiftco-qa__view,
	.swiftco-qa--hover:focus-within .swiftco-qa__view,
	li.product:hover .swiftco-qa--hover .swiftco-qa__add,
	li.product:focus-within .swiftco-qa--hover .swiftco-qa__add,
	.wc-block-grid__product:hover .swiftco-qa--hover .swiftco-qa__add,
	.swiftco-qa--hover:hover .swiftco-qa__add,
	.swiftco-qa--hover:focus-within .swiftco-qa__add {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* The always-on variant still needs its buttons visible. */
	.swiftco-qa--always .swiftco-qa__view,
	.swiftco-qa--always .swiftco-qa__add { opacity: 1; }

	.swiftco-qa .swiftco-qa__add:hover { background: var(--swiftco-accent-hover); transform: scale(1.05); }
	.swiftco-qa .swiftco-qa__add:disabled { cursor: not-allowed; opacity: .45; transform: none; }
}

.swiftco-qa--inline .swiftco-qa__panel {
	background: transparent;
	padding: 10px 0 0;
}

.swiftco-qa__axis + .swiftco-qa__axis { margin-top: 10px; }

.swiftco-qa__label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 7px;
	text-align: center;
}

.swiftco-qa__options { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.swiftco-qa .swiftco-qa__option {
	align-items: center;
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-text);
	border-radius: 999px;
	color: var(--swiftco-text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	justify-content: center;
	line-height: 1;
	/* Compact enough that a full XS–4XL run fits two rows. */
	min-height: 36px;
	min-width: 36px;
	padding: 8px 12px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.swiftco-qa .swiftco-qa__option:hover { background: var(--swiftco-surface-muted); }
.swiftco-qa .swiftco-qa__option.is-selected {
	background: var(--swiftco-accent);
	border-color: var(--swiftco-accent);
	color: var(--swiftco-accent-text);
}
.swiftco-qa__option.is-unavailable,
.swiftco-qa__option[disabled] {
	border-color: var(--swiftco-border);
	color: var(--swiftco-text-muted);
	cursor: not-allowed;
	opacity: .5;
	position: relative;
}
/* A diagonal rule reads as sold out without relying on colour alone. */
.swiftco-qa__option.is-unavailable::after {
	background: currentColor;
	content: "";
	height: 1px;
	left: 14%;
	position: absolute;
	top: 50%;
	transform: rotate(-18deg);
	width: 72%;
}

.swiftco-qa__axis--swatch .swiftco-qa__option { padding: 0; width: var(--swiftco-tap); }
.swiftco-qa__swatch {
	background: var(--swiftco-swatch, var(--swiftco-surface-muted));
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 50%;
	display: block;
	height: 24px;
	width: 24px;
}

.swiftco-qa__hint {
	color: var(--swiftco-text-muted);
	font-size: 12.5px;
	margin: 8px 0 0;
	min-height: 0;
}
.swiftco-qa__hint:empty { display: none; }
.swiftco-qa__hint.is-error { color: #c1362b; }

.swiftco-qa__add svg { height: 26px; width: 26px; }
.swiftco-qa__add.is-loading .swiftco-qa__add-icon { display: none; }
.swiftco-qa__add.is-loading .swiftco-qa__add-spinner {
	animation: swiftco-spin .7s linear infinite;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	display: block;
	height: 22px;
	width: 22px;
}
.swiftco-qa__add-spinner { display: none; }

.swiftco-qa--inline .swiftco-qa__add { position: static; margin-top: 12px; }

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

/* Display is owned by the hover media query above; everything here is purely
   appearance so the two rules never fight over visibility. */
.swiftco-qa__personalize {
	align-items: center;
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-text);
	border-radius: 999px;
	color: var(--swiftco-text);
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
	min-height: var(--swiftco-tap);
	padding: 10px 20px;
	text-decoration: none;
	width: 100%;
}
.swiftco-qa__personalize:hover { background: var(--swiftco-accent); border-color: var(--swiftco-accent); color: var(--swiftco-accent-text); }
.swiftco-qa__personalize svg { height: 17px; width: 17px; }

/* -------------------------------------------------------------------------
 * Cart page
 *
 * WooCommerce's cart is a <table>, which is why it reads so badly on a phone.
 * Rather than override the template — and inherit the maintenance burden of
 * every hook inside it — the rows are re-laid out as a grid here.
 * ---------------------------------------------------------------------- */

.swiftco-cart .woocommerce { font-family: var(--swiftco-font); }

.swiftco-cart .swiftco-progress { margin: 0 auto 32px; max-width: 720px; }

/* Line items. Markup comes from the plugin's own cart/cart.php override, so
   these selectors describe a structure Swift Checkout controls rather than one
   it is trying to reshape from the outside. */

.swiftco-cart .swiftco-cartform__items { margin-bottom: 32px; }

.swiftco-cart .swiftco-cartrow {
	align-items: center;
	border-bottom: 1px solid var(--swiftco-border);
	display: grid;
	gap: 6px 20px;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	padding: 22px 0;
}
.swiftco-cart .swiftco-cartrow:first-child { border-top: 1px solid var(--swiftco-border); }

.swiftco-cart .swiftco-cartrow__media { width: 104px; }
.swiftco-cart .swiftco-cartrow__media img {
	aspect-ratio: 1 / 1;
	background: var(--swiftco-surface-muted);
	border-radius: var(--swiftco-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.swiftco-cart .swiftco-cartrow__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.swiftco-cart .swiftco-cartrow__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
.swiftco-cart .swiftco-cartrow__name a { color: inherit; text-decoration: none; }
.swiftco-cart .swiftco-cartrow__name a:hover { text-decoration: underline; }

.swiftco-cart .swiftco-cartrow__meta {
	color: var(--swiftco-text-muted);
	font-size: 13px;
}
.swiftco-cart .swiftco-cartrow__meta p,
.swiftco-cart .swiftco-cartrow__meta dl { margin: 0; }
.swiftco-cart .swiftco-cartrow__meta dt,
.swiftco-cart .swiftco-cartrow__meta dd { display: inline; margin: 0; }
.swiftco-cart .swiftco-cartrow__meta dd::after { content: ""; display: block; }

/* Anything a cart-editing plugin injects lands here. Constrain it so a stray
   select or button run cannot blow the row apart. */
.swiftco-cart .swiftco-cartrow__name select,
.swiftco-cart .swiftco-cartrow__meta select {
	font-size: 14px;
	max-width: 100%;
	padding: 8px 10px;
}
.swiftco-cart .swiftco-cartrow__info .button { font-size: 13px; margin: 4px 4px 0 0; padding: 8px 14px; }

.swiftco-cart .swiftco-cartrow__controls {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-top: 4px;
}

.swiftco-cart .swiftco-cartrow__price {
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	justify-self: end;
	text-align: right;
	white-space: nowrap;
}

/* WooCommerce's stock quantity input, dressed as the drawer's pill stepper. */
.swiftco-cart .swiftco-cartrow__qty .quantity {
	align-items: center;
	border: 1px solid var(--swiftco-border);
	border-radius: 999px;
	display: inline-flex;
	margin: 0;
	overflow: hidden;
}
.swiftco-cart .swiftco-cartrow__qty .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 16px;
	height: var(--swiftco-tap);
	padding: 0;
	text-align: center;
	width: 68px;
}
.swiftco-cart .swiftco-cartrow__qty .quantity input.qty::-webkit-outer-spin-button,
.swiftco-cart .swiftco-cartrow__qty .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.swiftco-cart .swiftco-cartrow__qty .quantity input.qty:focus { outline: none; }
/*
 * Remove button.
 *
 * WooCommerce renders this as a bare "×" character coloured with
 * `color: red !important`. Relying on that glyph made the control disappear
 * whenever the inherited colours happened to match the circle behind it,
 * leaving an unexplained dot in the row. The text is hidden and a trash icon
 * is drawn with a mask instead, so the mark is always visible regardless of
 * which palette the store owner picked.
 */
.swiftco-cart .swiftco-cartrow a.remove {
	align-items: center;
	/* Fixed on all four axes. As a flex child this was being stretched into an
	   oval by the row's align/justify defaults. */
	aspect-ratio: 1 / 1;
	background: var(--swiftco-surface-muted);
	border: 1px solid var(--swiftco-border);
	border-radius: 50%;
	/* Hide the × glyph without removing it from the accessibility tree. */
	color: transparent !important;
	display: flex;
	flex: 0 0 var(--swiftco-tap);
	font-size: 0;
	height: var(--swiftco-tap);
	justify-content: center;
	line-height: 1;
	max-width: var(--swiftco-tap);
	min-width: var(--swiftco-tap);
	position: relative;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
	width: var(--swiftco-tap);
}

.swiftco-cart .swiftco-cartrow a.remove::before {
	background-color: var(--swiftco-text-muted);
	content: "";
	display: block;
	height: 19px;
	-webkit-mask-image: var(--swiftco-trash-icon);
	mask-image: var(--swiftco-trash-icon);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 19px;
}

.swiftco-cart .swiftco-cartrow a.remove:hover {
	background: var(--swiftco-surface);
	border-color: var(--swiftco-text-muted);
	color: transparent !important;
}
.swiftco-cart .swiftco-cartrow a.remove:hover::before { background-color: var(--swiftco-text); }

/* Browsers without mask support fall back to showing the original glyph
   rather than an empty circle. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
	.swiftco-cart .swiftco-cartrow a.remove {
		color: var(--swiftco-text-muted) !important;
		font-size: 20px;
	}
	.swiftco-cart .swiftco-cartrow a.remove::before { display: none; }
}

.swiftco-cart .swiftco-cartform__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 24px 0 0;
}

.swiftco-cart .swiftco-cartform__coupon { display: flex; float: none; gap: 8px; margin: 0; }
.swiftco-cart .swiftco-cartform__coupon input#coupon_code {
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius-sm);
	font-size: 16px;
	min-height: 52px;
	min-width: 0;
	padding: 12px 14px;
	width: 190px;
}

.swiftco-cart .swiftco-cartform__actions .button,
.swiftco-cart .swiftco-cartform__update {
	background: var(--swiftco-accent);
	border: 0;
	border-radius: 999px;
	color: var(--swiftco-accent-text);
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	min-height: 52px;
	padding: 15px 28px;
	white-space: nowrap;
}
.swiftco-cart .swiftco-cartform__actions .button:hover { background: var(--swiftco-accent-hover); color: var(--swiftco-accent-text); }

/* Update cart is secondary — it is only meaningful after a quantity edit. */
.swiftco-cart .swiftco-cartform__update {
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	color: var(--swiftco-text);
	margin-left: auto;
}
.swiftco-cart .swiftco-cartform__update:hover { background: var(--swiftco-surface-muted); color: var(--swiftco-text); }
.swiftco-cart .swiftco-cartform__update:disabled { cursor: default; opacity: .45; }

.swiftco-cart .cart_totals {
	background: var(--swiftco-surface-muted);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius);
	padding: 24px;
}
.swiftco-cart .cart_totals h2 { font-size: 17px; font-weight: 700; margin: 0 0 16px; }
.swiftco-cart .cart_totals table { border: 0; width: 100%; }
.swiftco-cart .cart_totals table th,
.swiftco-cart .cart_totals table td {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--swiftco-border);
	font-size: 14px;
	padding: 12px 0;
}
.swiftco-cart .cart_totals table th { color: var(--swiftco-text-muted); font-weight: 400; text-align: left; }
.swiftco-cart .cart_totals table td { font-variant-numeric: tabular-nums; text-align: right; }
.swiftco-cart .cart_totals table tr.order-total th,
.swiftco-cart .cart_totals table tr.order-total td {
	border-bottom: 0;
	color: var(--swiftco-text);
	font-size: 20px;
	font-weight: 700;
}
/* Proceed to checkout. Element-qualified and box-sized so a theme's inline-block
   button rule cannot shrink it back to a two-line stub. */
.swiftco-cart .wc-proceed-to-checkout { padding-top: 18px; }
.swiftco-cart .wc-proceed-to-checkout a.button,
.swiftco-cart .wc-proceed-to-checkout a.checkout-button {
	align-items: center;
	background: var(--swiftco-accent);
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--swiftco-accent-text);
	display: flex;
	float: none;
	font-size: 16px;
	font-weight: 700;
	justify-content: center;
	min-height: 56px;
	padding: 17px 24px;
	text-align: center;
	white-space: nowrap;
	width: 100%;
}
.swiftco-cart .wc-proceed-to-checkout a.button:hover { background: var(--swiftco-accent-hover); color: var(--swiftco-accent-text); }

@media (max-width: 640px) {
	.swiftco-cart .swiftco-cartrow {
		gap: 4px 14px;
		grid-template-columns: 82px minmax(0, 1fr);
		padding: 18px 0;
	}
	/* Price drops under the name rather than fighting for a third column. */
	.swiftco-cart .swiftco-cartrow__price {
		font-size: 15px;
		grid-column: 2;
		justify-self: start;
		order: 3;
		text-align: left;
	}
	.swiftco-cart .swiftco-cartrow__media { grid-row: span 2; width: 82px; }
	.swiftco-cart .swiftco-cartrow__name { font-size: 14.5px; }

	.swiftco-cart .swiftco-cartform__actions { flex-direction: column; align-items: stretch; }
	.swiftco-cart .swiftco-cartform__coupon { flex-wrap: wrap; }
	.swiftco-cart .swiftco-cartform__coupon input#coupon_code { flex: 1 1 100%; width: 100%; }
	.swiftco-cart .swiftco-cartform__actions .button,
	.swiftco-cart .swiftco-cartform__update { margin-left: 0; width: 100%; }
	.swiftco-cart .cart_totals { padding: 18px; }
}

/* -------------------------------------------------------------------------
 * Checkout layout
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Surface
 *
 * The design tokens describe a light checkout: near-black text, white panels,
 * light grey summaries. Painted onto a dark theme with no background of its
 * own, that reads as dark-on-dark and the page is unusable. So when the
 * "Page background" setting is on its default, the plugin paints the surface
 * its palette assumes rather than borrowing the theme's.
 * ---------------------------------------------------------------------- */

/*
 * The surface is painted on the plugin's own containers, never on `body`.
 *
 * An earlier version set `background-color` on `body` to guarantee the palette
 * had the surface it assumes. That is not a plugin's element to touch: themes
 * layer their own page backgrounds through `body`, `#wrap_all` and their
 * section wrappers, and overriding it changed how a stretched layout resolved —
 * which is what turned a full-width checkout into a boxed one. Scoped to the
 * plugin's containers, the palette is self-consistent and the theme's page
 * layout is left completely alone.
 */
.swiftco-solid .swiftco-checkout,
.swiftco-solid .swiftco-cart .woocommerce {
	background-color: var(--swiftco-surface);
	color: var(--swiftco-text);
}

/* Themes colour their own headings, which on a dark theme means white text
   landing on the surface painted above. */
.swiftco-solid .swiftco-checkout h1,
.swiftco-solid .swiftco-checkout h2,
.swiftco-solid .swiftco-checkout h3,
.swiftco-solid .swiftco-checkout p,
.swiftco-solid .swiftco-checkout td,
.swiftco-solid .swiftco-checkout th,
.swiftco-solid .swiftco-checkout legend,
.swiftco-solid .swiftco-cartrow__name,
.swiftco-solid .swiftco-cart .cart_totals,
.swiftco-solid .swiftco-cart .cart_totals h2 {
	color: var(--swiftco-text);
}

.swiftco-solid .swiftco-checkout label,
.swiftco-solid .swiftco-checkout .swiftco-breadcrumb a,
.swiftco-solid .swiftco-cartrow__meta {
	color: var(--swiftco-text-muted);
}

.swiftco-solid .swiftco-checkout a { color: inherit; }
.swiftco-solid .swiftco-checkout__logo { color: var(--swiftco-text); }

/* ---------------------------------------------------------------------------
 * Standalone checkout document
 *
 * Here the plugin renders the whole page, so `html` and `body` are its own
 * elements to style — the caveat above about not touching `body` applies to
 * the theme's document, not to this one.
 *
 * There is no theme stylesheet on this page, which means no normalize, no base
 * typography and no box-sizing reset. What follows is the small amount of that
 * the checkout actually needs. It is deliberately minimal: WooCommerce's own
 * stylesheet and the gateways' still load, and this should not fight them.
 * ------------------------------------------------------------------------- */

html.swiftco-html { background: var(--swiftco-page-bg); }

body.swiftco-standalone {
	background: var(--swiftco-page-bg);
	color: var(--swiftco-text);
	font-family: var(--swiftco-font);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

body.swiftco-standalone *,
body.swiftco-standalone *::before,
body.swiftco-standalone *::after { box-sizing: border-box; }

body.swiftco-standalone img,
body.swiftco-standalone svg { max-width: 100%; }

body.swiftco-standalone a { color: var(--swiftco-text); }

/*
 * Colour is set, not inherited.
 *
 * WordPress prints the active theme's theme.json as inline CSS with no file
 * behind it, so it survives a directory-based strip; on a dark block theme it
 * sets white body text, and white text on this page's light surface is an
 * invisible checkout. The class strips that handle now, but relying on the
 * absence of someone else's rule is not a guarantee — so the text colour is
 * declared outright on the elements that carry copy.
 *
 * The summary panel is excluded: it runs its own palette, which is the point
 * of having one.
 */
body.swiftco-standalone h1,
body.swiftco-standalone h2,
body.swiftco-standalone h3,
body.swiftco-standalone h4,
body.swiftco-standalone p,
body.swiftco-standalone li,
body.swiftco-standalone td,
body.swiftco-standalone th,
body.swiftco-standalone legend,
body.swiftco-standalone dt,
body.swiftco-standalone dd { color: var(--swiftco-text); }

body.swiftco-standalone label,
body.swiftco-standalone small { color: var(--swiftco-text-muted); }

body.swiftco-standalone input,
body.swiftco-standalone select,
body.swiftco-standalone textarea {
	background-color: var(--swiftco-surface);
	color: var(--swiftco-text);
}

/* The panel wins back every one of those inside its own bounds. */
body.swiftco-standalone .swiftco-summary h1,
body.swiftco-standalone .swiftco-summary h2,
body.swiftco-standalone .swiftco-summary h3,
body.swiftco-standalone .swiftco-summary p,
body.swiftco-standalone .swiftco-summary li,
body.swiftco-standalone .swiftco-summary td,
body.swiftco-standalone .swiftco-summary th,
body.swiftco-standalone .swiftco-summary label { color: var(--swiftco-sum-text); }

/* The theme's own header is gone, so there is nothing left to clear. */
body.swiftco-standalone { --swiftco-mobile-top: 0px; }

/* Footer sits at the bottom of short pages rather than floating mid-screen. */
.swiftco-shell__wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.swiftco-shell__main { flex: 1 0 auto; }

.swiftco-shell__inner {
	margin: 0 auto;
	max-width: min(1180px, 100%);
	padding: 0 20px;
	width: 100%;
}

.swiftco-shell__header .swiftco-shell__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: space-between;
	min-height: 72px;
	padding-bottom: 14px;
	padding-top: 14px;
}

.swiftco-shell__logo {
	align-items: center;
	color: var(--swiftco-text);
	display: inline-flex;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	text-decoration: none;
}

/* Width is the store owner's setting; the height cap and `contain` are there so
   an unusually tall logo cannot stretch the header or distort itself. */
.swiftco-shell__logo img {
	display: block;
	height: auto;
	max-height: 90px;
	object-fit: contain;
	object-position: left center;
	width: var(--swiftco-logo-width, 180px);
}

body.swiftco-standalone div.swiftco-checkout {
	background: transparent;
	padding-top: 32px;
}

.swiftco-shell__footer {
	color: var(--swiftco-text-muted);
	font-size: 13px;
	margin-top: 8px;
}

.swiftco-shell__footer .swiftco-shell__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	padding-bottom: 22px;
	padding-top: 22px;
}

.swiftco-shell__policies { display: flex; flex-wrap: wrap; gap: 18px; }

.swiftco-shell__policies a {
	color: var(--swiftco-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.swiftco-shell__policies a:hover { color: var(--swiftco-text); }

.swiftco-shell__copyright { margin: 0; }

/* ---------------------------------------------------------------------------
 * The two-tone split
 *
 * Above 1000px the page reads as two bands: the form on the page background,
 * the summary on its own colour, both running the full height of the document
 * — behind the header and past the footer — rather than the summary sitting as
 * a card floating in white space.
 *
 * The colour is painted by a gradient on the wrap, with the hard stop at
 * `--swiftco-split`. The grid inside uses the same figure for its column
 * boundary, so the panel's edge and the paint's edge are the same line by
 * construction and cannot drift apart at any window width. Painting the aside
 * itself would only colour as far as its content reaches, which is exactly the
 * short, floating panel this replaces.
 * ------------------------------------------------------------------------- */

@media (min-width: 1000px) {
	body.swiftco-standalone {
		/* Where the form column ends and the summary begins. */
		--swiftco-split: 58%;
	}

	.swiftco-shell__wrap {
		background: linear-gradient(
			to right,
			var(--swiftco-page-bg) 0 var(--swiftco-split),
			var(--swiftco-sum-bg) var(--swiftco-split) 100%
		);
	}

	/* Full-bleed: the bands reach the window edges, while the content inside
	   stays on the centred measure. */
	body.swiftco-standalone .swiftco-shell__inner,
	body.swiftco-standalone div.swiftco-checkout { max-width: 100%; padding-left: 0; padding-right: 0; }

	body.swiftco-standalone .swiftco-checkout__grid {
		gap: 0;
		grid-template-columns: var(--swiftco-split) 1fr;
	}

	/*
	 * Content in both columns is pulled toward the centre line, so the form and
	 * the summary sit either side of the fold like facing pages rather than
	 * drifting to the far edges of a wide monitor.
	 */
	body.swiftco-standalone .swiftco-checkout__main {
		margin-left: auto;
		max-width: 660px;
		padding: 8px 56px 72px 24px;
		width: 100%;
	}

	body.swiftco-standalone .swiftco-checkout__aside {
		margin-right: auto;
		max-width: 520px;
		padding: 8px 24px 72px 56px;
		width: 100%;
	}

	/* The band already carries the colour, so the panel itself is just layout. */
	body.swiftco-standalone .swiftco-summary {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	/* Header and footer align to the same centre line as the columns. */
	body.swiftco-standalone .swiftco-shell__header .swiftco-shell__inner,
	body.swiftco-standalone .swiftco-shell__footer .swiftco-shell__inner {
		display: grid;
		gap: 0;
		grid-template-columns: var(--swiftco-split) 1fr;
	}

	body.swiftco-standalone .swiftco-shell__header .swiftco-shell__inner > *,
	body.swiftco-standalone .swiftco-shell__footer .swiftco-shell__inner > * {
		grid-column: 1;
		margin-left: auto;
		max-width: 660px;
		padding-left: 24px;
		padding-right: 56px;
		width: 100%;
	}

	body.swiftco-standalone .swiftco-shell__header .swiftco-shell__inner {
		align-items: end;
		padding-bottom: 20px;
		padding-top: 34px;
	}

	body.swiftco-standalone .swiftco-shell__header .swiftco-breadcrumb { padding-top: 12px; }

	body.swiftco-standalone .swiftco-shell__footer .swiftco-shell__inner {
		border-top: 0;
		padding-bottom: 40px;
	}

	body.swiftco-standalone .swiftco-shell__footer .swiftco-shell__inner > * + * { padding-top: 6px; }

	/* The summary scrolls with its band rather than pinning to the viewport;
	   the band is already full height, so there is nothing to pin against. */
	body.swiftco-standalone.swiftco-sticky-summary .swiftco-checkout__aside { top: 28px; }
}

@media (max-width: 999px) {
	/* Below the split, the summary goes back to being a bordered card. */
	.swiftco-shell__header,
	.swiftco-shell__footer { background: var(--swiftco-surface); }
	.swiftco-shell__header { border-bottom: 1px solid var(--swiftco-border); }
	.swiftco-shell__footer { border-top: 1px solid var(--swiftco-border); }
}

@media (max-width: 640px) {
	.swiftco-shell__inner { padding: 0 10px; }
	.swiftco-shell__header .swiftco-shell__inner { min-height: 0; }
	.swiftco-shell__logo { font-size: 17px; }
	.swiftco-shell__logo img { max-height: 48px; width: min(var(--swiftco-logo-width, 180px), 150px); }
	body.swiftco-standalone div.swiftco-checkout { padding-top: 20px; }
	.swiftco-shell__footer .swiftco-shell__inner { justify-content: flex-start; }
}

/*
 * `swiftco-checkout` is on two elements: the wrapper this template renders, and
 * `<body>`, where it exists purely as a hook for layout-mode classes.
 *
 * Everything that sizes or positions the container is therefore qualified with
 * `div`. Without that qualifier these rules also hit `<body>` — a centred
 * 1180px box with 20px of side padding — which silently boxed the whole
 * document and pushed a full-width theme header inward. The descendant rules
 * below are left unqualified on purpose: they resolve to the same elements from
 * either ancestor, and body is the more reliable of the two.
 *
 * `clip` rather than `hidden` for the overflow, because clip does not create a
 * scroll container and so leaves the sticky summary working.
 */
div.swiftco-checkout {
	box-sizing: border-box;
	color: var(--swiftco-text);
	font-family: var(--swiftco-font);
	margin: 0 auto;
	max-width: min(1180px, 100%);
	overflow-x: clip;
	padding: 0 20px 64px;
	width: 100%;
}

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

.swiftco-checkout__grid,
.swiftco-checkout__main,
.swiftco-checkout__aside,
.swiftco-checkout .swiftco-panels,
.swiftco-checkout .swiftco-panel,
.swiftco-payment {
	max-width: 100%;
	min-width: 0;
}

.swiftco-checkout__masthead {
	align-items: center;
	border-bottom: 1px solid var(--swiftco-border);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	margin-bottom: 32px;
	padding: 24px 0;
}

.swiftco-checkout__logo { color: inherit; font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.swiftco-checkout__logo img { display: block; max-height: 42px; width: auto; }

.swiftco-breadcrumb { color: var(--swiftco-text-muted); display: flex; font-size: 13px; gap: 8px; }
.swiftco-breadcrumb a { color: var(--swiftco-text-muted); text-decoration: none; }
.swiftco-breadcrumb a:hover { color: var(--swiftco-text); text-decoration: underline; }
.swiftco-breadcrumb [aria-current] { color: var(--swiftco-text); font-weight: 600; }

.swiftco-checkout__grid {
	align-items: start;
	display: grid;
	gap: 40px;
	/* The form gets the room; the summary is capped so it never sprawls on a
	   wide monitor and leave a canyon between the two columns. */
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.swiftco-checkout__main { min-width: 0; }
.swiftco-checkout__aside { min-width: 0; }

.swiftco-sticky-summary .swiftco-checkout__aside { position: sticky; top: 24px; }

/* Panels */

.swiftco-panels { display: grid; gap: 32px; }
.swiftco-panels::after,
.swiftco-panels::before { content: none; }

.swiftco-panel { min-width: 0; }

/*
 * WooCommerce's layout stylesheet floats #customer_details .col-1 and .col-2
 * at 47.8% each. Left alone that confines every field to half of the form
 * column — which is why the inputs looked shrunken on desktop and never
 * reached the edge of the screen on a phone. The grid above owns this layout,
 * so the float and the width both have to go.
 */
.swiftco-checkout #customer_details.col2-set,
.swiftco-checkout #customer_details .col-1,
.swiftco-checkout #customer_details .col-2 {
	float: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
	width: 100%;
}
.swiftco-panel h3,
.swiftco-checkout h3#order_review_heading,
.swiftco-checkout .woocommerce-billing-fields > h3,
.swiftco-checkout .woocommerce-shipping-fields > h3,
.swiftco-checkout .woocommerce-additional-fields > h3 {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}

/* Form fields */

.swiftco-checkout .form-row {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0 0 14px;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

/* Border-box everywhere in the form, so a themed padding cannot push a
   100%-wide field past its container and make it look inset. */
.swiftco-checkout .form-row *,
.swiftco-checkout .form-row {
	box-sizing: border-box;
}

.swiftco-checkout .form-row-first,
.swiftco-checkout .form-row-last,
.swiftco-checkout .form-row-wide { float: none; width: 100%; }

@media (min-width: 600px) {
	/* Only the paired half-width rows become inline; wide rows stay block so
	   they never collapse to content width. */
	.swiftco-checkout #customer_details .form-row-first,
	.swiftco-checkout #customer_details .form-row-last {
		display: inline-flex;
		vertical-align: top;
		width: calc(50% - 8px);
	}
	.swiftco-checkout #customer_details .form-row-first { margin-right: 12px; }
}

.swiftco-checkout label {
	color: var(--swiftco-text-muted);
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
}
.swiftco-checkout label .required { border: 0; color: inherit; text-decoration: none; }

.swiftco-checkout input[type="text"],
.swiftco-checkout input[type="tel"],
.swiftco-checkout input[type="email"],
.swiftco-checkout input[type="password"],
.swiftco-checkout input[type="number"],
.swiftco-checkout textarea,
.swiftco-checkout select,
.swiftco-checkout .select2-container .select2-selection--single {
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius-sm);
	box-shadow: none;
	color: var(--swiftco-text);
	font: inherit;
	font-family: var(--swiftco-font);
	/* 16px, not 15 — anything smaller makes iOS Safari zoom on focus. */
	font-size: 16px;
	height: auto;
	line-height: 1.4;
	min-height: 50px;
	padding: 13px 14px;
	transition: border-color .16s ease, box-shadow .16s ease;
	width: 100%;
}

.swiftco-checkout textarea { min-height: 96px; resize: vertical; }

.swiftco-checkout input:focus,
.swiftco-checkout textarea:focus,
.swiftco-checkout select:focus {
	border-color: var(--swiftco-accent);
	box-shadow: 0 0 0 1px var(--swiftco-accent);
	outline: none;
}

/* Native selects lose the OS chrome so they match the text inputs. */
.swiftco-checkout select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m6 8 4 4 4-4" fill="none" stroke="%236b7177" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 18px;
	padding-right: 38px;
}

.swiftco-checkout .select2-container { width: 100% !important; }
.swiftco-checkout .select2-container .select2-selection--single { align-items: center; display: flex; width: 100%; }
.swiftco-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }
.swiftco-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--swiftco-text);
	line-height: 1.4;
	padding: 0;
}
/* Select2's "clear" cross renders as a bare × over the field when a value is
   set; give it a hit area and get it out of the label's way. */
.swiftco-checkout .select2-container--default .select2-selection--single .select2-selection__clear {
	margin-right: 22px;
	opacity: .5;
}

/* Validation */

.swiftco-checkout .form-row.swiftco-invalid input,
.swiftco-checkout .form-row.swiftco-invalid textarea,
.swiftco-checkout .form-row.swiftco-invalid select,
.swiftco-checkout .form-row.woocommerce-invalid input.input-text {
	border-color: #c1362b;
	box-shadow: 0 0 0 1px #c1362b;
}

.swiftco-field-error {
	align-items: center;
	color: #c1362b;
	display: flex;
	font-size: 12.5px;
	gap: 5px;
	margin: 6px 0 0;
}
.swiftco-field-error::before {
	background: #c1362b;
	border-radius: 50%;
	color: #fff;
	content: "!";
	display: inline-grid;
	flex: 0 0 auto;
	font-size: 9px;
	font-weight: 700;
	height: 14px;
	place-items: center;
	width: 14px;
}

.swiftco-checkout .form-row.swiftco-valid input { border-color: var(--swiftco-border); }

/* Checkbox rows */

.swiftco-checkout .woocommerce-form__label-for-checkbox,
.swiftco-checkout #ship-to-different-address label {
	align-items: center;
	color: var(--swiftco-text);
	cursor: pointer;
	display: flex;
	font-size: 14.5px;
	font-weight: 600;
	gap: 10px;
	margin: 0;
	min-height: var(--swiftco-tap);
}
.swiftco-checkout .woocommerce-form__label-for-checkbox input,
.swiftco-checkout #ship-to-different-address input {
	accent-color: var(--swiftco-accent);
	height: 20px;
	margin: 0;
	width: 20px;
}

/* -------------------------------------------------------------------------
 * Express payment slot
 * ---------------------------------------------------------------------- */

.swiftco-express { margin-bottom: 28px; }

.swiftco-express__buttons { display: grid; gap: 10px; }
.swiftco-express__buttons > * { margin: 0 !important; }
.swiftco-express__buttons:empty { display: none; }

.swiftco-express__divider {
	align-items: center;
	color: var(--swiftco-text-muted);
	display: flex;
	font-size: 12.5px;
	gap: 14px;
	margin-top: 22px;
}
.swiftco-express__divider::before,
.swiftco-express__divider::after {
	background: var(--swiftco-border);
	content: "";
	flex: 1 1 auto;
	height: 1px;
}

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

/*
 * The summary runs on its own palette rather than the form column's.
 *
 * On the standalone checkout it is a full-height band down the side of the
 * page, which is where most stores put their brand colour. A dark panel there
 * needs light type — and that cannot be derived from the form column's
 * colours, which describe a light surface. So: separate tokens, and every
 * colour inside the panel resolves against them.
 */
.swiftco-summary {
	background: var(--swiftco-sum-bg);
	border: 1px solid var(--swiftco-sum-border);
	border-radius: var(--swiftco-radius);
	color: var(--swiftco-sum-text);
	padding: 22px;
}

.swiftco-summary,
.swiftco-summary th,
.swiftco-summary td,
.swiftco-summary p,
.swiftco-summary span,
.swiftco-summary strong,
.swiftco-summary bdi { color: var(--swiftco-sum-text); }

.swiftco-summary__heading,
.swiftco-summary h2,
.swiftco-summary h3 { color: var(--swiftco-sum-heading); }

.swiftco-summary__heading { font-size: 15px; font-weight: 700; margin: 0 0 16px; }

.swiftco-summary__list { display: grid; gap: 16px; list-style: none; margin: 0 0 18px; padding: 0; }

.swiftco-summary__item { align-items: center; display: flex; gap: 14px; }

.swiftco-summary__thumb { flex: 0 0 60px; position: relative; width: 60px; }
.swiftco-summary__thumb img {
	aspect-ratio: 1 / 1;
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius-sm);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.swiftco-summary__qty {
	align-items: center;
	background: var(--swiftco-sum-badge-bg);
	border-radius: 999px;
	color: var(--swiftco-sum-badge-text);
	display: flex;
	font-size: 11px;
	font-weight: 700;
	height: 21px;
	justify-content: center;
	min-width: 21px;
	padding: 0 5px;
	position: absolute;
	right: -8px;
	top: -8px;
}

.swiftco-summary__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swiftco-summary__name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.swiftco-summary__variation { color: var(--swiftco-sum-muted); font-size: 12.5px; }
.swiftco-summary__variation p { margin: 0; }
.swiftco-summary__price { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; white-space: nowrap; }

/* Coupon */

.swiftco-coupon { border-top: 1px solid var(--swiftco-sum-border); margin-bottom: 18px; padding-top: 18px; }

.swiftco-coupon__form { display: flex; gap: 8px; }

.swiftco-coupon__input {
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-sum-border);
	border-radius: var(--swiftco-radius-sm);
	color: inherit;
	flex: 1 1 auto;
	font: inherit;
	font-size: 16px;
	min-height: 48px;
	min-width: 0;
	padding: 12px 14px;
}
.swiftco-coupon__input:focus { border-color: var(--swiftco-accent); box-shadow: 0 0 0 1px var(--swiftco-accent); outline: none; }

.swiftco-coupon__apply {
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-sum-border);
	border-radius: var(--swiftco-radius-sm);
	color: var(--swiftco-sum-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	min-height: 48px;
	padding: 0 20px;
}
.swiftco-coupon__apply:hover { background: var(--swiftco-accent); border-color: var(--swiftco-accent); color: var(--swiftco-accent-text); }
.swiftco-coupon__apply.is-loading { opacity: .6; pointer-events: none; }

.swiftco-coupon__error { color: #c1362b; font-size: 12.5px; margin: 8px 0 0; }
.swiftco-coupon__error[hidden] { display: none; }

.swiftco-coupon__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.swiftco-coupon__tag {
	align-items: center;
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-sum-border);
	border-radius: 999px;
	display: inline-flex;
	font-size: 12.5px;
	font-weight: 600;
	gap: 4px;
	padding: 0 4px 0 12px;
	text-transform: uppercase;
}
.swiftco-coupon__tag button {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--swiftco-sum-muted);
	cursor: pointer;
	display: flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}
.swiftco-coupon__tag button:hover { color: var(--swiftco-text); }
.swiftco-coupon__tag svg { height: 13px; width: 13px; }

/* Totals table */

.swiftco-totals {
	border: 0;
	border-collapse: collapse;
	border-top: 1px solid var(--swiftco-sum-border);
	margin: 0;
	padding-top: 16px;
	width: 100%;
}
.swiftco-totals th,
.swiftco-totals td {
	background: none;
	border: 0;
	font-size: 14px;
	font-weight: 400;
	padding: 7px 0;
	vertical-align: top;
}
.swiftco-totals th { color: var(--swiftco-sum-muted); text-align: left; }
.swiftco-totals td { font-variant-numeric: tabular-nums; text-align: right; }
.swiftco-totals tr:first-child th,
.swiftco-totals tr:first-child td { padding-top: 16px; }

.swiftco-totals .cart-discount th,
.swiftco-totals .cart-discount td { color: var(--swiftco-success); }

.swiftco-totals ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.swiftco-totals ul#shipping_method li { margin: 0 0 6px; }
.swiftco-totals ul#shipping_method label { color: var(--swiftco-sum-text); display: inline; font-size: 14px; margin: 0; }
.swiftco-totals .woocommerce-shipping-destination { color: var(--swiftco-sum-muted); font-size: 12.5px; margin-top: 6px; }

.swiftco-totals .swiftco-eta th,
.swiftco-totals .swiftco-eta td { font-size: 13px; }
.swiftco-totals .swiftco-eta td { color: var(--swiftco-sum-text); font-weight: 600; }

.swiftco-totals .order-total th,
.swiftco-totals .order-total td {
	border-top: 1px solid var(--swiftco-sum-border);
	color: var(--swiftco-sum-text);
	font-size: 18px;
	font-weight: 700;
	padding-top: 16px;
}
.swiftco-totals .order-total small { color: var(--swiftco-sum-muted); display: block; font-size: 12px; font-weight: 400; }

.swiftco-summary-toggle { display: none; }

/* -------------------------------------------------------------------------
 * Payment section
 * ---------------------------------------------------------------------- */

/* Payment section, now in the main column beneath the address. */
.swiftco-payment {
	border-top: 1px solid var(--swiftco-border);
	margin-top: 36px;
	padding-top: 28px;
}
.swiftco-payment__heading {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}

.swiftco-checkout #payment { background: transparent; border-radius: 0; margin-top: 0; }

.swiftco-checkout #payment ul.payment_methods {
	background: var(--swiftco-surface);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius);
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.swiftco-checkout #payment ul.payment_methods li {
	border-bottom: 1px solid var(--swiftco-border);
	margin: 0;
	padding: 14px 16px;
}
.swiftco-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }

.swiftco-checkout #payment ul.payment_methods li label {
	align-items: center;
	color: var(--swiftco-text);
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	font-size: 14.5px;
	font-weight: 600;
	gap: 8px;
	margin: 0;
	min-height: var(--swiftco-tap);
}
.swiftco-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--swiftco-accent); height: 20px; margin-right: 4px; width: 20px; }
.swiftco-checkout #payment ul.payment_methods li img { max-height: 24px; width: auto; }

.swiftco-checkout #payment div.payment_box {
	background: var(--swiftco-surface-muted);
	border-radius: var(--swiftco-radius-sm);
	box-sizing: border-box;
	color: var(--swiftco-text-muted);
	font-size: 13.5px;
	margin: 12px 0 0;
	max-width: 100%;
	padding: 14px;
}
.swiftco-checkout #payment div.payment_box::before { display: none; }

/*
 * Gateway markup is not ours and is frequently sized for a desktop column —
 * hosted card iframes especially. Constrain everything inside the payment
 * block to its container so a card field cannot run off the side of a phone,
 * which is exactly where a shopper needs to feel most confident.
 */
.swiftco-checkout #payment,
.swiftco-checkout #payment ul.payment_methods,
.swiftco-checkout #payment ul.payment_methods li,
.swiftco-checkout .swiftco-payment {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: break-word;
}

.swiftco-checkout #payment ul.payment_methods li > *,
.swiftco-checkout #payment div.payment_box > * {
	box-sizing: border-box;
	max-width: 100%;
}

.swiftco-checkout #payment iframe,
.swiftco-checkout #payment canvas,
.swiftco-checkout #payment img,
.swiftco-checkout #payment input,
.swiftco-checkout #payment .wc-payment-form,
.swiftco-checkout #payment [class*="card-fields"],
.swiftco-checkout #payment [id*="card-fields"] {
	box-sizing: border-box;
	max-width: 100%;
}

/* Gateway logo rows wrap rather than forcing the panel wider. */
.swiftco-checkout #payment ul.payment_methods li label img {
	display: inline-block;
	max-height: 24px;
	width: auto;
}

.swiftco-checkout #payment .form-row.place-order { margin: 0; padding: 0; }

.swiftco-checkout #place_order {
	background: var(--swiftco-accent);
	border: 0;
	border-radius: var(--swiftco-radius-button);
	color: var(--swiftco-accent-text);
	cursor: pointer;
	font: inherit;
	font-family: var(--swiftco-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	min-height: 54px;
	padding: 17px 24px;
	transition: background-color .18s ease, opacity .18s ease;
	width: 100%;
}
.swiftco-checkout #place_order:hover { background: var(--swiftco-accent-hover); }
.swiftco-checkout #place_order:disabled { cursor: not-allowed; opacity: .55; }

.swiftco-secure-line {
	align-items: center;
	color: var(--swiftco-text-muted);
	display: flex;
	font-size: 13px;
	gap: 7px;
	margin: 0 0 14px;
}
.swiftco-secure-line svg { flex: 0 0 auto; height: 16px; width: 16px; }

.swiftco-trust { display: grid; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.swiftco-trust__item { align-items: center; color: var(--swiftco-text-muted); display: flex; font-size: 13px; gap: 8px; }
.swiftco-trust__icon { color: var(--swiftco-success); flex: 0 0 auto; height: 17px; width: 17px; }

/* -------------------------------------------------------------------------
 * Order bump
 * ---------------------------------------------------------------------- */

.swiftco-bump {
	background: var(--swiftco-surface);
	border: 2px dashed var(--swiftco-border);
	border-radius: var(--swiftco-radius);
	margin: 0 0 20px;
	position: relative;
	transition: border-color .2s ease, background-color .2s ease;
}
.swiftco-bump.is-active {
	background: var(--swiftco-surface-muted);
	border-color: var(--swiftco-success);
	border-style: solid;
}
@supports (background: color-mix(in srgb, red 5%, white)) {
	.swiftco-bump.is-active { background: color-mix(in srgb, var(--swiftco-success) 6%, var(--swiftco-surface)); }
}
.swiftco-bump.is-loading { opacity: .6; pointer-events: none; }

/* Above the payment methods, the bump needs a little separation from the
   address fields it now follows. */
.swiftco-payment .swiftco-bump { margin-bottom: 22px; }

.swiftco-bump__label { align-items: flex-start; cursor: pointer; display: flex; gap: 12px; margin: 0; padding: 16px; }

.swiftco-bump__checkbox { height: 0; opacity: 0; position: absolute; width: 0; }

.swiftco-bump__box {
	background: var(--swiftco-surface);
	border: 2px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius-sm);
	color: transparent;
	display: grid;
	flex: 0 0 auto;
	height: 24px;
	margin-top: 2px;
	place-items: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	width: 24px;
}
.swiftco-bump__box svg { height: 15px; width: 15px; }
.swiftco-bump__checkbox:checked + .swiftco-bump__box { background: var(--swiftco-success); border-color: var(--swiftco-success); color: #fff; }
.swiftco-bump__checkbox:focus-visible + .swiftco-bump__box { box-shadow: var(--swiftco-focus); }

.swiftco-bump__copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.swiftco-bump__headline { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.swiftco-bump__product { align-items: center; display: flex; gap: 12px; }
.swiftco-bump__product img { border-radius: var(--swiftco-radius-sm); flex: 0 0 52px; height: auto; width: 52px; }
.swiftco-bump__details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swiftco-bump__name { font-size: 14px; font-weight: 600; }
.swiftco-bump__pricing { align-items: baseline; display: flex; flex-wrap: wrap; font-size: 14px; gap: 8px; }
.swiftco-bump__pricing del { color: var(--swiftco-text-muted); text-decoration: line-through; }
.swiftco-bump__pricing ins { background: none; font-weight: 700; text-decoration: none; }
.swiftco-bump__save {
	background: var(--swiftco-success);
	border-radius: var(--swiftco-radius-sm);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 3px 7px;
	text-transform: uppercase;
}
.swiftco-bump__desc { color: var(--swiftco-text-muted); font-size: 13px; line-height: 1.45; }

/* -------------------------------------------------------------------------
 * Post-purchase offer
 * ---------------------------------------------------------------------- */

.swiftco-postpurchase {
	background: var(--swiftco-surface-muted);
	border: 1px solid var(--swiftco-border);
	border-radius: var(--swiftco-radius);
	font-family: var(--swiftco-font);
	margin: 0 0 36px;
	padding: 28px;
}
.swiftco-postpurchase__eyebrow {
	color: var(--swiftco-success);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 6px;
	text-transform: uppercase;
}
.swiftco-postpurchase__title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 20px; }
.swiftco-postpurchase__card {
	background: var(--swiftco-surface);
	border-radius: var(--swiftco-radius);
	display: flex;
	gap: 22px;
	padding: 20px;
}
.swiftco-postpurchase__media { flex: 0 0 140px; width: 140px; }
.swiftco-postpurchase__media img { border-radius: var(--swiftco-radius-sm); display: block; height: auto; width: 100%; }
.swiftco-postpurchase__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.swiftco-postpurchase__name { font-size: 17px; font-weight: 700; margin: 0; }
.swiftco-postpurchase__desc { color: var(--swiftco-text-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.swiftco-postpurchase__price { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.swiftco-postpurchase__price del { color: var(--swiftco-text-muted); font-weight: 400; }
.swiftco-postpurchase__body .swiftco-btn { align-self: flex-start; }
.swiftco-postpurchase__fine { color: var(--swiftco-text-muted); font-size: 12.5px; margin: 0; }

/* -------------------------------------------------------------------------
 * Sheet mode — shared block, applied per breakpoint below
 * ---------------------------------------------------------------------- */

@media (max-width: 639px) {
	.swiftco-drawer[data-mobile-style="auto"],
	.swiftco-drawer[data-mobile-style="sheet"] {
		border-radius: 22px 22px 0 0;
		bottom: 0;
		/* Fill the sheet rather than sizing to content. With height:auto the
		   pinned header, progress bar, recommendations and footer could add up
		   to the whole sheet and squeeze the line items down to nothing. */
		height: var(--swiftco-sheet-max);
		left: 0;
		max-height: var(--swiftco-sheet-max);
		right: 0;
		top: auto;
		transform: translateY(100%);
		width: 100%;
	}

	/*
	 * The item list takes whatever the pinned regions leave and no more. An
	 * earlier min-height here forced the list taller than the space available,
	 * which pushed the totals and the checkout buttons off the bottom of the
	 * sheet — the fixed sheet height already guarantees the list gets room.
	 */
	.swiftco-drawer[data-mobile-style="auto"] .swiftco-drawer__body,
	.swiftco-drawer[data-mobile-style="sheet"] .swiftco-drawer__body {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Nothing escapes the sheet. */
	.swiftco-drawer[data-mobile-style="auto"],
	.swiftco-drawer[data-mobile-style="sheet"] { overflow: hidden; }

	.swiftco-drawer[data-mobile-style="auto"] .swiftco-drawer__footer,
	.swiftco-drawer[data-mobile-style="sheet"] .swiftco-drawer__footer { flex: 0 0 auto; }

	/*
	 * Recommendations stay. An earlier rule hid them below 780px of viewport
	 * height, which fired on ordinary phones once the browser toolbars were
	 * counted — Safari reports a viewport well short of the device height. The
	 * strip is compact enough now to earn its place instead.
	 */
	.swiftco-drawer[data-mobile-style="auto"].is-open,
	.swiftco-drawer[data-mobile-style="sheet"].is-open { transform: translateY(0); }

	.swiftco-drawer[data-mobile-style="auto"] .swiftco-drawer__handle,
	.swiftco-drawer[data-mobile-style="sheet"] .swiftco-drawer__handle {
		align-items: center;
		background: none;
		border: 0;
		cursor: grab;
		display: flex;
		flex: 0 0 auto;
		justify-content: center;
		padding: 10px 0 2px;
		touch-action: none;
		width: 100%;
	}
	.swiftco-drawer__handle span {
		background: var(--swiftco-border);
		border-radius: 999px;
		display: block;
		height: 4px;
		width: 40px;
	}
	.swiftco-drawer__handle:active { cursor: grabbing; }

	.swiftco-drawer[data-mobile-style="auto"] .swiftco-drawer__header,
	.swiftco-drawer[data-mobile-style="sheet"] .swiftco-drawer__header { padding: 6px 16px 10px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
	.swiftco-drawer[data-mobile-style="sheet"] {
		border-radius: 22px 22px 0 0;
		bottom: 0;
		height: auto;
		left: 0;
		max-height: var(--swiftco-sheet-max);
		right: 0;
		top: auto;
		transform: translateY(100%);
		width: 100%;
	}
	.swiftco-drawer[data-mobile-style="sheet"].is-open { transform: translateY(0); }
	.swiftco-drawer[data-mobile-style="sheet"] .swiftco-drawer__handle {
		align-items: center;
		background: none;
		border: 0;
		display: flex;
		justify-content: center;
		padding: 10px 0 2px;
		touch-action: none;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.swiftco-checkout__grid { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
	:root { --swiftco-drawer-width: 400px; }
}

@media (max-width: 860px) {
	/*
	 * One gutter, applied once, on a border-box container. Everything inside
	 * inherits full width from it, so the summary toggle, the fields and the
	 * payment block all line up on the same two edges.
	 */
	div.swiftco-checkout {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		/* A narrow gutter on purpose. Hosted card fields from Square and Stripe
		   have a minimum width of roughly 320px; every pixel spent on page
		   padding is a pixel they do not get, and a clipped card field is the
		   worst thing a checkout can show. */
		/* The top value is store-configurable clearance for a theme whose fixed
		   header overlaps the form on phones. Defaults to zero. */
		padding: var(--swiftco-mobile-top, 0) 10px 48px;
		width: 100%;
	}

	/*
	 * Theme wrappers around the WooCommerce field groups are a common source of
	 * extra padding, and they are what kept the inputs from reaching the edges.
	 * Flatten them.
	 */
	.swiftco-checkout .woocommerce-billing-fields,
	.swiftco-checkout .woocommerce-billing-fields__field-wrapper,
	.swiftco-checkout .woocommerce-shipping-fields,
	.swiftco-checkout .woocommerce-shipping-fields__field-wrapper,
	.swiftco-checkout .woocommerce-additional-fields,
	.swiftco-checkout .woocommerce-additional-fields__field-wrapper,
	.swiftco-checkout .woocommerce-account-fields {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	/*
	 * Fields fill their row, full stop. !important is deliberate here: this is
	 * the one flow where an unknown theme rule winning would cost a sale, and
	 * the selector is scoped tightly to Swift Checkout's own container.
	 */
	.swiftco-checkout .form-row,
	.swiftco-checkout .form-row .input-text,
	.swiftco-checkout .form-row input[type="text"],
	.swiftco-checkout .form-row input[type="tel"],
	.swiftco-checkout .form-row input[type="email"],
	.swiftco-checkout .form-row input[type="password"],
	.swiftco-checkout .form-row select,
	.swiftco-checkout .form-row textarea,
	.swiftco-checkout .form-row .select2-container {
		float: none !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.swiftco-checkout__grid,
	.swiftco-checkout__main,
	.swiftco-checkout__aside,
	.swiftco-checkout .swiftco-panels,
	.swiftco-checkout .swiftco-panel {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}

	.swiftco-checkout__masthead { margin-bottom: 0; padding: 18px 0; }

	/* The summary sits second in the document so it reads correctly to a screen
	   reader and so the form is what a phone lands on. Flex ordering moves it
	   visually to the top without touching source order. */
	.swiftco-checkout__grid {
		align-items: stretch;
		display: flex;
		flex-direction: column;
	}
	.swiftco-checkout__aside { order: -1; }
	.swiftco-checkout__main { order: 1; }

	/* Summary collapsed behind a toggle. Sits inside the page gutter rather
	   than bleeding to the screen edge, so it is exactly as wide as the fields
	   below it. */
	.swiftco-checkout__aside {
		margin: 0 0 24px;
		position: static !important;
	}

	.swiftco-summary-toggle {
		align-items: center;
		background: var(--swiftco-surface-muted);
		border: 1px solid var(--swiftco-border);
		border-radius: var(--swiftco-radius);
		box-sizing: border-box;
		color: var(--swiftco-text);
		cursor: pointer;
		display: flex;
		font: inherit;
		font-family: var(--swiftco-font);
		font-size: 14.5px;
		gap: 12px;
		justify-content: space-between;
		min-height: 56px;
		padding: 16px;
		width: 100%;
	}
	.swiftco-summary-toggle__label { align-items: center; display: flex; gap: 8px; font-weight: 500; }
	.swiftco-summary-toggle__label > svg:first-child { height: 18px; width: 18px; }
	.swiftco-summary-toggle__chevron { height: 16px; transition: transform .2s ease; width: 16px; }
	.swiftco-summary-toggle[aria-expanded="true"] .swiftco-summary-toggle__chevron { transform: rotate(180deg); }
	.swiftco-summary-toggle__total { font-size: 17px; font-weight: 700; }

	.swiftco-summary {
		border-radius: var(--swiftco-radius);
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		box-sizing: border-box;
		display: none;
		margin-top: -1px;
		padding: 18px 16px;
		width: 100%;
	}
	.swiftco-summary.is-open { display: block; }
	.swiftco-summary__heading { display: none; }
	.swiftco-summary-toggle[aria-expanded="true"] {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.swiftco-postpurchase { padding: 20px; }
	.swiftco-postpurchase__card { flex-direction: column; gap: 16px; }
	.swiftco-postpurchase__media { flex: 0 0 auto; max-width: 220px; width: 100%; }
	.swiftco-postpurchase__body .swiftco-btn { align-self: stretch; }

	/* Sticky place-order bar so the CTA is always a thumb away. The anchor is a
	   1px sentinel the IntersectionObserver watches; an inline zero-size element
	   would never report an intersection. */
	.swiftco-cta-anchor { display: block; height: 1px; width: 100%; }
	.swiftco-sticky-cta div.swiftco-checkout { padding-bottom: 96px; }
	.swiftco-sticky-cta #place_order.swiftco-is-stuck {
		border-radius: 0;
		bottom: 0;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
		left: 0;
		padding-bottom: calc(17px + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		width: 100%;
		z-index: 30;
	}
}

@media (max-width: 640px) {
	.swiftco-drawer { --swiftco-drawer-width: 100vw; --swiftco-sheet-max: 92dvh; }
	.swiftco-drawer__header { padding: 16px; }
	.swiftco-drawer__title { font-size: 22px; }
	.swiftco-drawer__progress { padding: 0 16px; }
	.swiftco-drawer__body { padding: 0 16px; }
	/* Compact footer. Every pixel spent here is a pixel the shopper cannot use
	   to look at their own cart. */
	.swiftco-drawer__footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
	.swiftco-drawer__footer .swiftco-note { margin-bottom: 10px; }
	.swiftco-drawer__totals { margin-bottom: 2px; }
	.swiftco-drawer__grand { margin-bottom: 12px; }
	.swiftco-drawer__fineprint { font-size: 11.5px; margin-top: 8px; }
	/* Decorative on a phone, and expensive in vertical space. */
	.swiftco-drawer__footer .swiftco-paymethods { display: none; }

	.swiftco-toast { bottom: 12px; left: 12px; right: 12px; }

	/* Compact recommendation strip. Sized so it costs about 80px of the sheet,
	   which the line items can spare, and padded to match the drawer so the
	   first card is not clipped against the screen edge. */
	.swiftco-drawer__recs { padding: 10px 0 0 16px; }
	.swiftco-drawer__recs .swiftco-recs__list { padding: 0 16px 8px 0; gap: 8px; }
	.swiftco-drawer__recs .swiftco-rec { gap: 8px; padding: 6px; width: 196px; }
	.swiftco-drawer__recs .swiftco-rec__media { flex: 0 0 34px; width: 34px; }
	.swiftco-drawer__recs .swiftco-rec__title { font-size: 12.5px; }
	.swiftco-drawer__recs .swiftco-rec__price { font-size: 11.5px; }
	.swiftco-drawer__recs .swiftco-rec__add { font-size: 11.5px; min-height: 30px; padding: 6px 11px; }
	.swiftco-drawer__recs .swiftco-recs__title { font-size: 10.5px; margin-bottom: 6px; }

	.swiftco-item { gap: 12px; padding: 16px 0; }
	.swiftco-item__media { flex: 0 0 72px; width: 72px; }
	.swiftco-item__title { font-size: 14px; }

	/* Two full-width CTAs stacked read better than a cramped row. */
	.swiftco-drawer__actions.has-secondary { grid-template-columns: 1fr; }

	.swiftco-drawer__grand-label,
	.swiftco-drawer__grand-value { font-size: 20px; }

	.swiftco-progress__mark-label { font-size: 12px; }

	.swiftco-checkout__masthead { align-items: flex-start; flex-direction: column; }
	.swiftco-checkout__logo { font-size: 18px; }
	.swiftco-checkout #place_order { font-size: 17px; min-height: 56px; }

	/*
	 * Give the gateway nearly the whole page width.
	 *
	 * WooCommerce core pads `.payment_box` at the same specificity this file
	 * uses, and themes commonly pad it harder still — which is what kept
	 * Square's hosted card field wider than the grey panel it sits in. The
	 * !important here is deliberate and narrow: it applies only inside Swift
	 * Checkout's own container, only on phones, and only to padding and width.
	 * A card field spilling out of its box is the single worst thing a
	 * checkout can show a shopper.
	 */
	.swiftco-checkout #payment ul.payment_methods { padding: 0 !important; }
	.swiftco-checkout #payment ul.payment_methods li { padding: 12px 6px !important; }
	.swiftco-checkout #payment div.payment_box {
		margin: 10px 0 0 !important;
		padding: 10px 6px !important;
	}
	.swiftco-checkout #payment div.payment_box > *,
	.swiftco-checkout #payment div.payment_box form,
	.swiftco-checkout #payment div.payment_box iframe {
		box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		min-width: 0;
		width: 100% !important;
	}

	/* Square wraps its hosted fields in its own containers, which carry their
	   own width and margins. */
	.swiftco-checkout #payment [class*="wc-square"],
	.swiftco-checkout #payment [id*="wc-square"],
	.swiftco-checkout #payment [class*="sq-"],
	.swiftco-checkout #payment [id*="sq-"] {
		box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.swiftco-payment { margin-top: 28px; padding-top: 24px; }

	/* Gateway logo strips wrap instead of setting the panel's width. */
	.swiftco-checkout #payment ul.payment_methods li label {
		flex-wrap: wrap;
		gap: 6px;
	}
	.swiftco-checkout #payment ul.payment_methods li label img { max-height: 20px; }

	/* A narrow but hover-capable window still shows quick add, so keep the
	   controls proportionate. Touch devices never see any of this. */
	.swiftco-qa .swiftco-qa__view { height: var(--swiftco-tap); right: 8px; top: 8px; width: var(--swiftco-tap); }
	.swiftco-qa .swiftco-qa__view svg { height: 19px; width: 19px; }
	.swiftco-qa .swiftco-qa__add { height: 52px; width: 52px; }
	.swiftco-qa .swiftco-qa__add svg { height: 22px; width: 22px; }
	.swiftco-qa--overlay .swiftco-qa__panel { border-radius: 14px; left: 8px; padding: 10px; right: 8px; }
	.swiftco-qa .swiftco-qa__label { font-size: 13px; margin-bottom: 6px; }
	.swiftco-qa .swiftco-qa__option { font-size: 12.5px; min-height: 34px; min-width: 34px; padding: 7px 10px; }
	.swiftco-qa .swiftco-qa__options { gap: 5px; }
}

@media (max-width: 400px) {
	.swiftco-item__media { flex: 0 0 64px; width: 64px; }
	.swiftco-drawer__title { font-size: 20px; }
}

/* -------------------------------------------------------------------------
 * Accessibility / motion
 * ---------------------------------------------------------------------- */

.swiftco-drawer .screen-reader-text,
.swiftco-checkout .screen-reader-text,
.swiftco-qa .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* iOS ignores overflow:hidden on body, so the scroll lock pins the body and
   JS restores the offset on close. */
body.swiftco-drawer-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.swiftco-drawer,
	.swiftco-scrim,
	.swiftco-progress__fill,
	.swiftco-toast,
	.swiftco-qa__add,
	.swiftco-summary-toggle__chevron {
		transition-duration: .01ms !important;
	}
	.swiftco-qa__add.is-loading .swiftco-qa__add-spinner { animation-duration: 1.6s; }
}

@media (forced-colors: active) {
	.swiftco-btn,
	.swiftco-drawer,
	.swiftco-summary,
	.swiftco-qa__option { border: 1px solid CanvasText; }
	.swiftco-qa__option.is-selected { forced-color-adjust: none; }
}