/**
 * Smart Steps Checkout 2
 *
 * One centered column, big touch targets, one step per screen.
 * --ssc-* variables come from Settings → Style. The font is the theme's.
 */

:root {
	--ssc-primary: #2f4aa0;
	--ssc-primary-text: #fff;
	--ssc-accent: #1f8a4c;
	--ssc-text: #1d2230;
	--ssc-muted: #667085;
	--ssc-border: #d9dde5;
	--ssc-surface: #fff;
	--ssc-soft: #f3f5f9;
	--ssc-danger: #c62828;
	--ssc-radius: 16px;
	--ssc-max-width: 880px;
	--ssc-radius-sm: max(6px, calc(var(--ssc-radius) - 6px));
	--ssc-ring: color-mix(in srgb, var(--ssc-primary) 25%, transparent);
	--ssc-tint: color-mix(in srgb, var(--ssc-primary) 7%, var(--ssc-surface));
	--ssc-bar-h: 76px;
}

.ssc {
	max-width: var(--ssc-max-width);
	margin: 0 auto;
	color: var(--ssc-text);
	font-size: 16px;
	line-height: 1.5;
}

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

.ssc .ssc-icon { display: block; flex: none; }
.ssc .ssc-hidden { display: none !important; }

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

/* ------------------------------------------------------------------ *
 * Progress: segments only, no labels
 * ------------------------------------------------------------------ */

.ssc .ssc-progress { margin: 0 auto 20px; max-width: 520px; }

.ssc .ssc-progress__track {
	display: flex;
	gap: 6px;
}

.ssc .ssc-progress__seg {
	position: relative;
	flex: 1;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--ssc-border);
}

.ssc .ssc-progress__seg::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ssc-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.3, .9, .3, 1);
}

.ssc .ssc-progress__seg.is-done::after { transform: scaleX(1); }
.ssc .ssc-progress__seg.is-current::after { transform: scaleX(.5); }
.ssc .ssc-progress__seg.is-pop { animation: ssc-pop .6s ease; }

@keyframes ssc-pop {
	0% { transform: scaleY(1); }
	35% { transform: scaleY(2.2); }
	100% { transform: scaleY(1); }
}

/* ------------------------------------------------------------------ *
 * Login reminder (contact step only)
 * ------------------------------------------------------------------ */

.ssc .ssc-login[hidden] { display: none; }
.ssc .ssc-login { margin: 0 0 12px; text-align: center; font-size: .925rem; }

.ssc .ssc-login .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ssc-muted);
}

.ssc .ssc-login .woocommerce-info::before { display: none; }
.ssc .ssc-login a { color: var(--ssc-primary); font-weight: 600; }

.ssc .ssc-login form.login {
	margin: 12px 0 0;
	padding: 20px;
	border: 1px solid var(--ssc-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
	text-align: left;
}

/* ------------------------------------------------------------------ *
 * Steps
 * ------------------------------------------------------------------ */

.ssc .ssc-step {
	margin: 0 0 20px;
	padding: 36px 40px 32px;
	border: 1px solid var(--ssc-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
	box-shadow: 0 12px 32px -20px rgba(20, 28, 48, .25);
}

/* Without JS every step stays visible and the checkout still works. */
.ssc.ssc--js .ssc-step { display: none; margin: 0; }
.ssc.ssc--js .ssc-step.is-active { display: block; }
.ssc.ssc--js .ssc-step.is-measuring { display: block; position: absolute; left: -9999px; visibility: hidden; width: min(100%, var(--ssc-max-width)); }

.ssc .ssc-step.is-enter-forward { animation: ssc-in-forward .32s cubic-bezier(.3, .9, .3, 1) both; }
.ssc .ssc-step.is-enter-back { animation: ssc-in-back .32s cubic-bezier(.3, .9, .3, 1) both; }

@keyframes ssc-in-forward {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes ssc-in-back {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: none; }
}

.ssc .ssc-step__title {
	margin: 0 0 28px;
	padding: 0;
	color: var(--ssc-text);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.015em;
	text-align: center;
	text-transform: none;
}

.ssc .ssc-step__title:focus { outline: none; }

.ssc .ssc-step__body {
	max-width: 620px;
	margin: 0 auto;
}

.ssc .ssc-step--cart .ssc-step__body,
.ssc .ssc-step--review .ssc-step__body,
.ssc .ssc-step--shipping .ssc-step__body,
.ssc .ssc-step--payment .ssc-step__body { max-width: 720px; }

.ssc .ssc-step__notice {
	max-width: 620px;
	margin: 0 auto 20px;
	padding: 12px 16px;
	border-radius: var(--ssc-radius-sm);
	background: color-mix(in srgb, var(--ssc-danger) 8%, var(--ssc-surface));
	color: var(--ssc-danger);
	font-size: .925rem;
	text-align: center;
}

.ssc .ssc-step__notice[hidden] { display: none; }

.ssc .ssc-step__nav {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
}

/* ------------------------------------------------------------------ *
 * Buttons and links
 * ------------------------------------------------------------------ */

:is(.ssc, .ssc-modal, .ssc-thankyou) .ssc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	margin: 0;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: transform .12s ease, filter .15s, background-color .15s, border-color .15s;
	-webkit-tap-highlight-color: transparent;
}

:is(.ssc, .ssc-modal, .ssc-thankyou) .ssc-btn:active { transform: scale(.97); }
:is(.ssc, .ssc-modal, .ssc-thankyou) .ssc-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ssc-ring); }

:is(.ssc, .ssc-modal, .ssc-thankyou) .ssc-btn--primary {
	background: var(--ssc-primary);
	color: var(--ssc-primary-text);
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ssc-primary) 70%, transparent);
}

:is(.ssc, .ssc-modal, .ssc-thankyou) .ssc-btn--primary:hover { filter: brightness(1.08); color: var(--ssc-primary-text); }

:is(.ssc, .ssc-modal) .ssc-btn--secondary {
	border-color: var(--ssc-border);
	background: var(--ssc-surface);
	color: var(--ssc-text);
}

:is(.ssc, .ssc-modal) .ssc-btn--ghost { background: transparent; color: var(--ssc-muted); }
:is(.ssc, .ssc-modal) .ssc-btn--lg { min-height: 54px; min-width: 200px; padding: 0 36px; font-size: 1.05rem; }

:is(.ssc, .ssc-modal) .ssc-btn.is-loading { color: transparent !important; pointer-events: none; }

:is(.ssc, .ssc-modal) .ssc-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	border: 2px solid var(--ssc-primary-text);
	border-right-color: transparent;
	border-radius: 50%;
	animation: ssc-spin .7s linear infinite;
}

:is(.ssc, .ssc-modal) .ssc-btn--secondary.is-loading::after,
:is(.ssc, .ssc-modal) .ssc-btn--ghost.is-loading::after { border-color: var(--ssc-text); border-right-color: transparent; }

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

:is(.ssc, .ssc-thankyou) .ssc-link {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 4px 2px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ssc-muted);
	font: inherit;
	font-size: .925rem;
	font-weight: 500;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

:is(.ssc, .ssc-thankyou) .ssc-link:hover { color: var(--ssc-text); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Form fields (WooCommerce styles overridden only inside .ssc)
 * ------------------------------------------------------------------ */

.ssc .ssc-form .woocommerce-billing-fields__field-wrapper,
.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
}

.ssc .ssc-form .woocommerce-billing-fields__field-wrapper > *,
.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper > * { grid-column: 1 / -1; }

.ssc .ssc-form .woocommerce-billing-fields__field-wrapper > .form-row-first,
.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }

.ssc .ssc-form .woocommerce-billing-fields__field-wrapper > .form-row-last,
.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }

.ssc .ssc-form .form-row,
.ssc .ssc-form .form-row-first,
.ssc .ssc-form .form-row-last,
.ssc .ssc-form .form-row-wide {
	float: none;
	width: auto;
	margin: 0 0 14px;
	padding: 0;
}

.ssc .ssc-form .woocommerce-billing-fields > h3,
.ssc .ssc-form .woocommerce-additional-fields > h3 { display: none; }

.ssc .ssc-form .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--ssc-muted);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.3;
}

.ssc .ssc-form .form-row .required { border: 0; color: var(--ssc-danger); text-decoration: none; }
.ssc .ssc-form .form-row .optional { color: var(--ssc-muted); font-weight: 400; }

.ssc .ssc-form .form-row .input-text,
.ssc .ssc-form .form-row select,
.ssc .ssc-form .form-row textarea,
.ssc .ssc-coupon .input-text {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 16px;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
	box-shadow: none;
	color: var(--ssc-text);
	font: inherit;
	font-size: 16px; /* prevents iOS zoom */
	line-height: 1.4;
	transition: border-color .15s, box-shadow .15s;
}

.ssc .ssc-form .form-row textarea { min-height: 110px; resize: vertical; }

.ssc .ssc-form .form-row .input-text:focus,
.ssc .ssc-form .form-row select:focus,
.ssc .ssc-form .form-row textarea:focus,
.ssc .ssc-coupon .input-text:focus {
	border-color: var(--ssc-primary);
	outline: none;
	box-shadow: 0 0 0 4px var(--ssc-ring);
}

.ssc .ssc-form .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 52px;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
}

.ssc .ssc-form .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 16px;
	color: var(--ssc-text);
	line-height: normal;
}

.ssc .ssc-form .select2-container .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; height: 50px; }

.ssc .ssc-form .select2-container--focus .select2-selection--single,
.ssc .ssc-form .select2-container--open .select2-selection--single {
	border-color: var(--ssc-primary);
	box-shadow: 0 0 0 4px var(--ssc-ring);
}

.ssc .ssc-form .form-row.woocommerce-invalid .input-text,
.ssc .ssc-form .form-row.woocommerce-invalid select,
.ssc .ssc-form .form-row.woocommerce-invalid textarea,
.ssc .ssc-form .form-row.woocommerce-invalid .select2-selection--single { border-color: var(--ssc-danger); }

.ssc .ssc-form .form-row.woocommerce-validated .input-text,
.ssc .ssc-form .form-row.woocommerce-validated .select2-selection--single {
	border-color: color-mix(in srgb, var(--ssc-accent) 55%, var(--ssc-border));
}

.ssc .ssc-form .form-row.woocommerce-invalid label { color: var(--ssc-muted); }

.ssc .ssc-field-error {
	display: block;
	margin-top: 6px;
	color: var(--ssc-danger);
	font-size: .825rem;
	line-height: 1.35;
}

.ssc input[type="checkbox"],
.ssc input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--ssc-primary);
}

/* Checkbox and radio fields (WooCommerce and field plugins) look like the consent toggles */
.ssc .ssc-form .form-row:not(.ssc-toggle-row) label.checkbox,
.ssc .ssc-form .form-row:not(.ssc-toggle-row) .woocommerce-form__label-for-checkbox,
.ssc .ssc-form .form-row:not(.ssc-toggle-row) .woocommerce-input-wrapper label.radio {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 15px 18px;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
	color: var(--ssc-text);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: transform .12s, border-color .15s, background-color .15s;
	-webkit-tap-highlight-color: transparent;
}

.ssc .ssc-form .form-row:not(.ssc-toggle-row) label.checkbox:active,
.ssc .ssc-form .form-row:not(.ssc-toggle-row) .woocommerce-input-wrapper label.radio:active { transform: scale(.99); }

.ssc .ssc-form .form-row:not(.ssc-toggle-row) label.checkbox:has(input:checked),
.ssc .ssc-form .form-row:not(.ssc-toggle-row) .woocommerce-form__label-for-checkbox:has(input:checked),
.ssc .ssc-form .form-row:not(.ssc-toggle-row) .woocommerce-input-wrapper input[type="radio"]:checked + label.radio {
	border-color: var(--ssc-primary);
	background: var(--ssc-tint);
}

/* Checkbox: square box with check */
.ssc .ssc-form .form-row:not(.ssc-toggle-row) input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 1.5px solid var(--ssc-border);
	border-radius: 8px;
	background: var(--ssc-surface) no-repeat center / 14px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.ssc .ssc-form .form-row:not(.ssc-toggle-row) input[type="checkbox"]:checked {
	border-color: var(--ssc-primary);
	background-color: var(--ssc-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	animation: ssc-check .25s cubic-bezier(.3, 1.6, .5, 1);
}

.ssc .ssc-form .form-row:not(.ssc-toggle-row) input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ssc-ring); }

/* Radio: one card per option, round marker */
.ssc .ssc-form .form-row .woocommerce-input-wrapper:has(> input[type="radio"]) { display: grid; gap: 10px; }

.ssc .ssc-form .form-row .woocommerce-input-wrapper > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ssc .ssc-form .form-row:not(.ssc-toggle-row) .woocommerce-input-wrapper label.radio { padding-left: 54px; }

.ssc .ssc-form .form-row .woocommerce-input-wrapper label.radio::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 18px;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--ssc-border);
	border-radius: 50%;
	background: var(--ssc-surface);
	transform: translateY(-50%);
	transition: border-color .15s, box-shadow .15s;
}

.ssc .ssc-form .form-row .woocommerce-input-wrapper input[type="radio"]:checked + label.radio::before {
	border-color: var(--ssc-primary);
	box-shadow: inset 0 0 0 5px var(--ssc-surface), inset 0 0 0 11px var(--ssc-primary);
}

.ssc .ssc-form .form-row .woocommerce-input-wrapper input[type="radio"]:focus-visible + label.radio { box-shadow: 0 0 0 4px var(--ssc-ring); }
.ssc .ssc-form .form-row.woocommerce-invalid label.checkbox,
.ssc .ssc-form .form-row.woocommerce-invalid .woocommerce-input-wrapper label.radio { border-color: var(--ssc-danger); }

.ssc .woocommerce-account-fields { margin-top: 4px; }

/* Returning customer: complete step shown as a summary */
.ssc .ssc-step.is-prefilled .ssc-fields {
	height: 0;
	margin: 0;
	overflow: hidden;
	visibility: hidden;
}

.ssc .ssc-prefill {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 0 16px;
	padding: 18px 20px;
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-soft);
}

.ssc .ssc-prefill__text { margin: 0; overflow-wrap: anywhere; }
.ssc .ssc-prefill .ssc-link { color: var(--ssc-primary); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Step 1 – Cart
 * ------------------------------------------------------------------ */

.ssc .ssc-cart-list { margin: 0; padding: 0; list-style: none; }

.ssc .ssc-cart-item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto 100px 36px;
	grid-template-areas: "thumb info qty total remove";
	gap: 16px;
	align-items: center;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--ssc-border);
	transition: opacity .2s;
}

.ssc .ssc-cart-item:first-child { padding-top: 0; }
.ssc .ssc-cart-item.is-loading { opacity: .45; pointer-events: none; }
.ssc .ssc-cart-item__thumb { grid-area: thumb; }
.ssc .ssc-cart-item__info { grid-area: info; min-width: 0; }
.ssc .ssc-cart-item__qty { grid-area: qty; }
.ssc .ssc-cart-item__total { grid-area: total; font-weight: 700; text-align: right; white-space: nowrap; }
.ssc .ssc-cart-item__remove { grid-area: remove; }

.ssc .ssc-cart-item__thumb img {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0;
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-soft);
	object-fit: cover;
}

.ssc .ssc-cart-item__name { margin: 0; font-weight: 600; line-height: 1.35; }
.ssc .ssc-cart-item__name a { color: inherit; text-decoration: none; }
.ssc .ssc-cart-item__price { margin: 4px 0 0; color: var(--ssc-muted); font-size: .85rem; }

.ssc dl.variation { margin: 4px 0 0; color: var(--ssc-muted); font-size: .85rem; }
.ssc dl.variation dt,
.ssc dl.variation dd { display: inline; float: none; margin: 0; padding: 0; border: 0; }
.ssc dl.variation dd p { display: inline; margin: 0; }
.ssc dl.variation dd::after { content: ""; display: block; }

.ssc .ssc-qty {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--ssc-border);
	border-radius: 999px;
	background: var(--ssc-surface);
}

.ssc .ssc-qty .ssc-qty__btn,
.ssc .ssc-cart-item__remove {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ssc-text);
	cursor: pointer;
	transition: transform .12s, background-color .15s, color .15s;
}

.ssc .ssc-qty .ssc-qty__btn:active,
.ssc .ssc-cart-item__remove:active { transform: scale(.88); }
.ssc .ssc-qty .ssc-qty__btn:hover { background: var(--ssc-soft); }
.ssc .ssc-cart-item__remove { color: var(--ssc-muted); }
.ssc .ssc-cart-item__remove:hover { background: color-mix(in srgb, var(--ssc-danger) 10%, var(--ssc-surface)); color: var(--ssc-danger); }

.ssc .ssc-qty .ssc-qty__input {
	width: 36px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ssc-text);
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ssc .ssc-qty .ssc-qty__input::-webkit-outer-spin-button,
.ssc .ssc-qty .ssc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ssc .ssc-qty-fixed { color: var(--ssc-muted); }

@media (max-width: 640px) {
	.ssc .ssc-cart-item {
		grid-template-columns: 60px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb info remove"
			"thumb qty total";
		gap: 8px 14px;
	}

	.ssc .ssc-cart-item__thumb { align-self: start; }
	.ssc .ssc-cart-item__thumb img { width: 60px; height: 60px; }
	.ssc .ssc-cart-item__remove { align-self: start; }
	.ssc .ssc-cart-item__qty { justify-self: start; }
}

/* Totals line + badge */
.ssc .ssc-total-line {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: center;
	margin: 24px 0 0;
	text-align: center;
}

.ssc .ssc-total-line__amount { display: inline-flex; gap: 10px; align-items: baseline; }
.ssc .ssc-total-line__label { color: var(--ssc-muted); font-size: .95rem; }

.ssc .ssc-total-line .ssc-products-total,
.ssc .ssc-total-line .ssc-order-total {
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.ssc .ssc-total-line small { font-size: .75rem; font-weight: 400; color: var(--ssc-muted); }

.ssc .ssc-badge {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	color: var(--ssc-text);
	font-size: .95rem;
}

.ssc .ssc-badge .ssc-icon { color: var(--ssc-accent); }
.ssc .ssc-badge-row { margin: 20px 0 0; text-align: center; }

/* Free shipping bar */
.ssc .ssc-free-shipping {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-soft);
}

.ssc .ssc-free-shipping[hidden] { display: none; }

.ssc .ssc-free-shipping__text {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0 0 10px;
	font-size: .925rem;
}

.ssc .ssc-free-shipping__text .ssc-icon { color: var(--ssc-accent); }

.ssc .ssc-free-shipping__track {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ssc-accent) 15%, var(--ssc-surface));
}

.ssc .ssc-free-shipping__track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ssc-accent);
	transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

/* ------------------------------------------------------------------ *
 * Reassurance (free HTML): items and links always inline, same look.
 * Add an <hr> in the HTML field to separate two groups.
 * ------------------------------------------------------------------ */

.ssc .ssc-reassure {
	max-width: 640px;
	margin: 24px auto 0;
	color: var(--ssc-text);
	font-size: .875rem;
	line-height: 1.4;
	text-align: center;
}

.ssc .ssc-reassure ul,
.ssc .ssc-reassure p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssc .ssc-reassure ul + ul,
.ssc .ssc-reassure ul + p,
.ssc .ssc-reassure p + ul,
.ssc .ssc-reassure p + p { margin-top: 8px; }

.ssc .ssc-reassure li,
.ssc .ssc-reassure a { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

.ssc .ssc-reassure a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ssc .ssc-reassure a:hover { color: var(--ssc-primary); }
.ssc .ssc-reassure .ssc-icon { flex: none; width: 18px; height: 18px; color: var(--ssc-accent); }
.ssc .ssc-reassure strong { font-weight: 600; }

.ssc .ssc-reassure hr {
	max-width: 460px;
	height: 0;
	margin: 14px auto;
	border: 0;
	border-top: 1px solid var(--ssc-border);
	background: none;
}

/* "Included in your order": same inline look, optional title on its own line */
.ssc .ssc-reassure .ssc-included { display: block; }
.ssc .ssc-reassure .ssc-included__title { display: block; margin: 0 0 8px; font-weight: 600; }
.ssc .ssc-reassure .ssc-included > * + * { margin-top: 8px; }

/* Help box above payment */
.ssc .ssc-help {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-soft);
	color: var(--ssc-muted);
	font-size: .925rem;
	text-align: center;
}

.ssc .ssc-help p { margin: 0; }
.ssc .ssc-help .ssc-icon { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--ssc-primary); }
.ssc .ssc-help a { color: var(--ssc-primary); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Toggle buttons: different address (step 3), order notes (summary)
 * ------------------------------------------------------------------ */

.ssc .ssc-xitem { max-width: 460px; margin: 0 auto; }
.ssc .ssc-collapsibles { display: grid; gap: 12px; margin-top: 20px; }
.ssc .ssc-collapsibles .ssc-xitem { width: 100%; }
.ssc .ssc-step__body > .ssc-collapsibles:first-child,
.ssc .ssc-step__body > .ssc-sections:first-child { margin-top: 0; }

/* Special sections: always after the fields */
.ssc .ssc-sections { display: grid; gap: 12px; margin-top: 20px; }
.ssc .ssc-sections > * { margin-top: 0; }
.ssc .ssc-sections .ssc-coupon-box { margin-top: 0; }
.ssc .ssc-sections .ssc-account { max-width: 460px; width: 100%; margin: 0 auto; }

/* Collapsed field: the button already shows the label */
.ssc .ssc-form .form-row.ssc-label-hidden > label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.ssc .ssc-collapsible .ssc-xpanel .form-row { margin-bottom: 0; }
.ssc .ssc-ship-different { max-width: none; margin-top: 10px; }
.ssc .ssc-ship-different .ssc-xitem__head { max-width: 460px; margin: 0 auto; }

.ssc .ssc-form h3.ssc-xitem__head {
	margin: 0;
	padding: 0;
	font: inherit;
}

.ssc .ssc-xtoggle,
.ssc .ssc-form .ssc-xitem__head .ssc-xtoggle {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 12px 20px;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
	box-shadow: none;
	color: var(--ssc-text);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: transform .12s, border-color .15s, background-color .15s;
	-webkit-tap-highlight-color: transparent;
}

.ssc .ssc-xtoggle:active { transform: scale(.98); }
.ssc .ssc-xtoggle:hover { border-color: color-mix(in srgb, var(--ssc-primary) 50%, var(--ssc-border)); }
.ssc .ssc-xtoggle .ssc-icon { color: var(--ssc-primary); }

.ssc .ssc-xtoggle[aria-expanded="true"],
.ssc .ssc-xtoggle:has(input:checked) {
	border-color: var(--ssc-primary);
	background: var(--ssc-tint);
}

.ssc .ssc-xtoggle:focus-visible,
.ssc .ssc-xtoggle:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 4px var(--ssc-ring); }

.ssc .ssc-xpanel { padding: 16px 0 4px; }
.ssc .ssc-xpanel[hidden] { display: none; }

/* Discount code: discreet link below the total */
.ssc .ssc-coupon-box { max-width: 420px; margin: 14px auto 0; text-align: center; }

.ssc .ssc-coupon-box .ssc-coupon-link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ssc-muted);
	font: inherit;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 3px;
	text-transform: none;
	cursor: pointer;
}

.ssc .ssc-coupon-box .ssc-coupon-link:hover { color: var(--ssc-text); }
.ssc .ssc-coupon-box .ssc-coupon-link[aria-expanded="true"] { color: var(--ssc-text); }
.ssc .ssc-coupon-box .ssc-xpanel { padding-top: 10px; }
.ssc .ssc-coupon-box.is-open .ssc-xpanel { padding-top: 6px; }
.ssc .ssc-coupon-box__title { margin: 0; color: var(--ssc-muted); font-size: .9rem; }

.ssc .ssc-coupon { display: flex; gap: 10px; }
.ssc .ssc-coupon .input-text { flex: 1; text-transform: uppercase; }
.ssc .ssc-coupon__msg { margin: 8px 0 0; font-size: .9rem; text-align: center; }
.ssc .ssc-coupon__msg:empty { display: none; }
.ssc .ssc-coupon__msg.is-error { color: var(--ssc-danger); }
.ssc .ssc-coupon__msg.is-success { color: var(--ssc-accent); }

.ssc .ssc-applied-coupons:empty { display: none; }

.ssc .ssc-applied-coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 10px 0 0;
	color: var(--ssc-accent);
	font-size: .925rem;
	font-weight: 600;
}

.ssc .ssc-applied-coupon .woocommerce-remove-coupon { margin-left: 6px; color: var(--ssc-muted); font-weight: 400; }
.ssc .ssc-step--review .ssc-fields,
.ssc .ssc-step--shipping .ssc-fields,
.ssc .ssc-step--payment .ssc-fields { max-width: 460px; margin: 20px auto 0; }
.ssc .ssc-step--payment .ssc-fields { margin: 0 auto 20px; }


/* ------------------------------------------------------------------ *
 * Step 5 – Shipping, Step 7 – Payment: big selectable cards
 * ------------------------------------------------------------------ */

.ssc .ssc-shipping-table,
.ssc .ssc-shipping-table tbody,
.ssc .ssc-shipping-table tr,
.ssc .ssc-shipping-table th,
.ssc .ssc-shipping-table td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.ssc .ssc-shipping-table tr + tr { margin-top: 20px; }
.ssc .ssc-shipping-table th { margin-bottom: 10px; color: var(--ssc-muted); font-size: .875rem; font-weight: 500; text-align: center; }
.ssc .ssc-shipping-table tr:only-child th { display: none; }

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li label {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	margin: 0;
	padding: 22px 20px;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
	text-align: center;
	cursor: pointer;
	transition: transform .12s, border-color .15s, background-color .15s, box-shadow .15s;
	-webkit-tap-highlight-color: transparent;
}

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li label:active { transform: scale(.98); }
.ssc .ssc-ship__name { font-weight: 600; line-height: 1.3; }
.ssc .ssc-ship__price { font-size: 1.15rem; font-weight: 700; }

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li input:checked + label {
	border-color: var(--ssc-primary);
	background: var(--ssc-tint);
	box-shadow: inset 0 0 0 1px var(--ssc-primary);
}

.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li input:focus-visible + label { box-shadow: 0 0 0 4px var(--ssc-ring); }
.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li input[type="hidden"] + label { cursor: default; border-color: var(--ssc-primary); background: var(--ssc-tint); }

/* Check mark on the selected card */
.ssc .ssc-shipping-table ul.woocommerce-shipping-methods li input:checked + label::after,
.ssc .ssc-form #payment ul.payment_methods li.is-selected::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ssc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
	animation: ssc-check .25s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes ssc-check { from { transform: scale(0); } to { transform: scale(1); } }

.ssc .ssc-form #payment { background: transparent; border-radius: 0; }

.ssc .ssc-form #payment ul.payment_methods {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.ssc .ssc-form #payment ul.payment_methods li {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
	line-height: 1.4;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.ssc .ssc-form #payment ul.payment_methods li.is-selected,
.ssc .ssc-form #payment ul.payment_methods li:has(> input:checked) {
	border-color: var(--ssc-primary);
	background: var(--ssc-tint);
	box-shadow: inset 0 0 0 1px var(--ssc-primary);
}

.ssc .ssc-form #payment ul.payment_methods li > input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ssc .ssc-form #payment ul.payment_methods li:has(> input:focus-visible) { box-shadow: 0 0 0 4px var(--ssc-ring); }

.ssc .ssc-form #payment ul.payment_methods li > label {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 20px 48px 20px 22px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ssc .ssc-form #payment ul.payment_methods li > label img { float: none; max-height: 26px; margin: 0; }

.ssc .ssc-form #payment div.payment_box {
	margin: 0;
	padding: 0 22px 20px;
	border-radius: 0;
	background: transparent;
	color: var(--ssc-muted);
	font-size: .9rem;
}

.ssc .ssc-form #payment div.payment_box::before { display: none; }
.ssc .ssc-form #payment div.payment_box p:last-child { margin-bottom: 0; }

/* Total, back link and order button in one centered row */
.ssc .ssc-form #payment div.form-row.place-order {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 4px 0 0;
}

.ssc .ssc-form #payment div.place-order > * { flex-basis: 100%; }
.ssc .ssc-form #payment div.place-order > #place_order,
.ssc .ssc-form #payment div.place-order > .ssc-pay-back { flex-basis: auto; }
.ssc .ssc-form #payment div.place-order > .ssc-pay-back { order: 1; }
.ssc .ssc-form #payment div.place-order > #place_order { order: 2; }
.ssc .ssc-form #payment div.place-order > input[type="hidden"],
.ssc .ssc-form #payment div.place-order > noscript { display: none; }

.ssc .ssc-form #payment #place_order {
	float: none;
	min-width: 240px;
	min-height: 56px;
	margin: 0;
	padding: 0 36px;
	border: 0;
	border-radius: 999px;
	background: var(--ssc-primary);
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ssc-primary) 80%, transparent);
	color: var(--ssc-primary-text);
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: transform .12s, filter .15s;
}

.ssc .ssc-form #payment #place_order:hover { filter: brightness(1.08); }
.ssc .ssc-form #payment #place_order:active { transform: scale(.97); }
.ssc .ssc-form #payment #place_order:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ssc-ring); }

/* ------------------------------------------------------------------ *
 * Step 6 – Summary
 * ------------------------------------------------------------------ */

.ssc #order_review { float: none; width: auto; padding: 0; }

.ssc table.shop_table.ssc-review {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
	font-size: .95rem;
}

.ssc table.shop_table.ssc-review th,
.ssc table.shop_table.ssc-review td {
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--ssc-border);
	background: transparent;
	color: var(--ssc-text);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	vertical-align: top;
}

.ssc table.shop_table.ssc-review thead th { border-top: 0; padding-top: 0; color: var(--ssc-muted); font-size: .825rem; font-weight: 500; }
.ssc table.shop_table.ssc-review td:last-child,
.ssc table.shop_table.ssc-review th:last-child { padding-left: 16px; text-align: right; }
.ssc table.shop_table.ssc-review tfoot th { color: var(--ssc-muted); }
.ssc table.shop_table.ssc-review .product-quantity { font-weight: 600; color: var(--ssc-muted); }

.ssc table.shop_table.ssc-review .order-total th,
.ssc table.shop_table.ssc-review .order-total td {
	border-top: 1.5px solid var(--ssc-text);
	color: var(--ssc-text);
	font-size: 1.2rem;
	font-weight: 700;
}

.ssc table.shop_table.ssc-review .order-total small { display: block; color: var(--ssc-muted); font-size: .75rem; font-weight: 400; }

.ssc .ssc-recap {
	margin: 24px 0 0;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius-sm);
	font-size: .925rem;
}

.ssc .ssc-recap[hidden] { display: none; }

.ssc .ssc-recap__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 12px 16px;
}

.ssc .ssc-recap__row + .ssc-recap__row { border-top: 1px solid var(--ssc-border); }
.ssc .ssc-recap__label { color: var(--ssc-muted); }
.ssc .ssc-recap__value { overflow-wrap: anywhere; }
.ssc .ssc-recap .ssc-recap__edit { color: var(--ssc-primary); font-weight: 600; }

@media (max-width: 600px) {
	.ssc .ssc-recap__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ssc .ssc-recap__label { grid-column: 1 / -1; margin-bottom: -6px; font-size: .8rem; }
}

/* Consents as toggle buttons */
.ssc .ssc-consents { display: grid; gap: 10px; margin: 24px 0 0; }
.ssc .ssc-consents .woocommerce-terms-and-conditions-wrapper { display: grid; gap: 10px; }
.ssc .ssc-consents .woocommerce-privacy-policy-text { color: var(--ssc-muted); font-size: .85rem; }
.ssc .ssc-consents .woocommerce-privacy-policy-text p { margin: 0; }
.ssc .ssc-form .ssc-toggle-row { margin: 0; }

.ssc .ssc-form .ssc-toggle-row label.ssc-toggle {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 16px 18px;
	border: 1.5px solid var(--ssc-border);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
	color: var(--ssc-text);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: transform .12s, border-color .15s, background-color .15s;
	-webkit-tap-highlight-color: transparent;
}

.ssc .ssc-form .ssc-toggle-row label.ssc-toggle:active { transform: scale(.99); }

.ssc .ssc-toggle__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ssc .ssc-toggle__box {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1.5px solid var(--ssc-border);
	border-radius: 8px;
	background: var(--ssc-surface);
	color: transparent;
	transition: background-color .15s, border-color .15s, color .15s;
}

.ssc .ssc-toggle__text a { color: var(--ssc-primary); }

.ssc .ssc-form .ssc-toggle-row label.ssc-toggle:has(.ssc-toggle__input:checked) {
	border-color: var(--ssc-primary);
	background: var(--ssc-tint);
}

.ssc .ssc-toggle__input:checked + .ssc-toggle__box {
	border-color: var(--ssc-primary);
	background: var(--ssc-primary);
	color: var(--ssc-primary-text);
	animation: ssc-check .25s cubic-bezier(.3, 1.6, .5, 1);
}

.ssc .ssc-toggle__input:focus-visible + .ssc-toggle__box { box-shadow: 0 0 0 4px var(--ssc-ring); }
.ssc .ssc-form .ssc-toggle-row.woocommerce-invalid label.ssc-toggle { border-color: var(--ssc-danger); }
.ssc .ssc-step--contact .ssc-toggle-row { margin-top: 8px; }

/* ------------------------------------------------------------------ *
 * Mobile: fixed bottom bar, no in-step navigation
 * ------------------------------------------------------------------ */

.ssc .ssc-bar { display: none; }

@media (max-width: 767px) {
	.ssc .ssc-step { padding: 26px 18px 24px; border-radius: var(--ssc-radius); }
	.ssc .ssc-step__title { margin-bottom: 22px; }
	.ssc.ssc--js .ssc-step__nav { display: none; }
	.ssc .ssc-total-line .ssc-products-total,
	.ssc .ssc-total-line .ssc-order-total { font-size: 1.35rem; }

	.ssc .ssc-form .woocommerce-billing-fields__field-wrapper,
	.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }

	.ssc .ssc-form .woocommerce-billing-fields__field-wrapper > .form-row-first,
	.ssc .ssc-form .woocommerce-billing-fields__field-wrapper > .form-row-last,
	.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper > .form-row-first,
	.ssc .ssc-form .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 1 / -1; }

	/* Order button lives in the bar on mobile */
	.ssc.ssc--js .ssc-form #payment div.place-order > #place_order,
	.ssc.ssc--js .ssc-form #payment div.place-order > .ssc-pay-back { display: none; }

	.ssc.ssc--js .ssc-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		gap: 12px;
		align-items: center;
		min-height: var(--ssc-bar-h);
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--ssc-border);
		background: color-mix(in srgb, var(--ssc-surface) 94%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		transition: transform .2s ease;
	}

	body.ssc-has-bar { padding-bottom: calc(var(--ssc-bar-h) + 12px); }
	body.ssc-typing .ssc.ssc--js .ssc-bar { transform: translateY(110%); }

	.ssc .ssc-bar__back {
		display: inline-flex;
		flex: none;
		gap: 4px;
		align-items: center;
		min-height: 44px;
		padding: 0 6px 0 0;
		color: var(--ssc-muted);
		font-size: .9rem;
		font-weight: 500;
		text-decoration: none;
	}

	.ssc .ssc-bar__back[hidden] { display: none; }
	.ssc .ssc-bar.has-total .ssc-bar__back-text { display: none; }

	.ssc .ssc-bar__total { display: none; flex-direction: column; min-width: 0; line-height: 1.15; }
	.ssc .ssc-bar.has-total .ssc-bar__total { display: flex; }
	.ssc .ssc-bar__label { color: var(--ssc-muted); font-size: .75rem; }
	.ssc .ssc-bar__total .ssc-order-total { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
	.ssc .ssc-bar__total small { display: none; }

	.ssc .ssc-bar .ssc-btn { flex: 1 1 auto; min-height: 50px; margin-left: auto; padding: 0 20px; max-width: 62%; }
}

/* ------------------------------------------------------------------ *
 * Thank you page
 * ------------------------------------------------------------------ */

.ssc-thankyou {
	max-width: var(--ssc-max-width);
	margin: 0 auto;
	color: var(--ssc-text);
}

.ssc-thankyou .ssc-thankyou__card {
	padding: 44px 32px 36px;
	border: 1px solid var(--ssc-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
	box-shadow: 0 12px 32px -20px rgba(20, 28, 48, .25);
	text-align: center;
}

.ssc-thankyou .ssc-icon { display: block; flex: none; }
.ssc-thankyou .ssc-thankyou__check { display: inline-block; color: var(--ssc-accent); }
.ssc-thankyou .ssc-thankyou__check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ssc-draw .6s ease forwards; }
.ssc-thankyou .ssc-thankyou__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ssc-draw .4s .45s ease forwards; }

@keyframes ssc-draw { to { stroke-dashoffset: 0; } }

.ssc-thankyou .ssc-thankyou__title {
	margin: 16px 0 8px;
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);
	font-weight: 600;
	line-height: 1.15;
}

.ssc-thankyou .ssc-thankyou__text,
.ssc-thankyou .woocommerce-notice { margin: 0 auto; max-width: 520px; padding: 0; border: 0; background: none; color: var(--ssc-muted); }
.ssc-thankyou .woocommerce-notice::before { display: none; }

.ssc-thankyou .ssc-thankyou__image {
	display: block;
	max-width: 100%;
	margin: 0 auto;
	animation: ssc-image-in .5s cubic-bezier(.3, 1.3, .5, 1) both;
}

.ssc-thankyou .ssc-thankyou__image img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

@keyframes ssc-image-in {
	from { opacity: 0; transform: scale(.85); }
	to { opacity: 1; transform: none; }
}

/* Order overview: label/value rows, same width as the bank box (no columns to misalign) */
.ssc-thankyou ul.order_details.ssc-thankyou__overview {
	display: block;
	max-width: 560px;
	margin: 20px auto 0;
	padding: 6px 20px;
	border-radius: var(--ssc-radius);
	background: var(--ssc-soft);
	list-style: none;
	text-align: left;
}

/* WooCommerce/theme clearfix pseudo-elements would become empty cells */
.ssc-thankyou ul.order_details.ssc-thankyou__overview::before,
.ssc-thankyou ul.order_details.ssc-thankyou__overview::after { content: none; display: none; }

.ssc-thankyou ul.order_details.ssc-thankyou__overview li {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 4px 12px;
	align-items: baseline;
	float: none;
	width: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-top: 1px solid var(--ssc-border);
	background: none;
	color: var(--ssc-muted);
	font-size: .875rem;
	line-height: 1.4;
	text-transform: none;
}

.ssc-thankyou ul.order_details.ssc-thankyou__overview li:first-child { border-top: 0; }
.ssc-thankyou ul.order_details.ssc-thankyou__overview li::before,
.ssc-thankyou ul.order_details.ssc-thankyou__overview li::after { content: none; display: none; }

.ssc-thankyou ul.order_details.ssc-thankyou__overview li strong {
	display: block;
	margin: 0;
	color: var(--ssc-text);
	font-size: .95rem;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
	.ssc-thankyou ul.order_details.ssc-thankyou__overview li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.ssc-thankyou ul.order_details.ssc-thankyou__overview li strong { text-align: left; }
}

.ssc-thankyou .ssc-thankyou__details { margin-top: 32px; }
.ssc-thankyou .ssc-thankyou__card.is-failed .woocommerce-thankyou-order-failed-actions { display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 20px; }

/* Waiting for payment + bank details with Copy buttons */
.ssc-thankyou .ssc-thankyou__onhold {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 560px;
	margin: 20px auto 0;
	padding: 14px 18px;
	border-radius: var(--ssc-radius-sm);
	background: color-mix(in srgb, var(--ssc-primary) 8%, var(--ssc-surface));
	color: var(--ssc-text);
	font-size: .95rem;
	text-align: left;
}

.ssc-thankyou .ssc-thankyou__onhold .ssc-icon { flex: none; margin-top: 2px; color: var(--ssc-primary); }

.ssc-thankyou .ssc-bank {
	max-width: 560px;
	margin: 20px auto 0;
	padding: 20px;
	border: 1.5px solid var(--ssc-primary);
	border-radius: var(--ssc-radius);
	text-align: left;
}

.ssc-thankyou .ssc-bank__title { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; font-weight: 700; }
.ssc-thankyou .ssc-bank__title .ssc-icon { color: var(--ssc-primary); }
.ssc-thankyou .ssc-bank__instructions { margin: 0 0 12px; color: var(--ssc-muted); font-size: .9rem; }
.ssc-thankyou .ssc-bank__instructions p { margin: 0 0 6px; }
.ssc-thankyou .ssc-bank__account + .ssc-bank__account { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ssc-border); }

.ssc-thankyou .ssc-bank__row {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) auto;
	gap: 4px 12px;
	align-items: center;
	padding: 6px 0;
}

.ssc-thankyou .ssc-bank__label { color: var(--ssc-muted); font-size: .85rem; }
.ssc-thankyou .ssc-bank__value { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.ssc-thankyou .ssc-copy {
	min-height: 34px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--ssc-border);
	border-radius: 999px;
	background: var(--ssc-surface);
	box-shadow: none;
	color: var(--ssc-text);
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	transition: transform .12s, background-color .15s, border-color .15s, color .15s;
}

.ssc-thankyou .ssc-copy:active { transform: scale(.95); }
.ssc-thankyou .ssc-copy:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ssc-ring); }
.ssc-thankyou .ssc-copy.is-copied { border-color: var(--ssc-accent); background: var(--ssc-accent); color: #fff; }

@media (max-width: 520px) {
	.ssc-thankyou .ssc-bank__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ssc-thankyou .ssc-bank__label { grid-column: 1 / -1; margin-bottom: -4px; }
}

/* Order details: same look as the summary step */
.ssc-thankyou .ssc-thankyou__details > * {
	margin: 0 0 20px;
	padding: 28px 32px;
	border: 1px solid var(--ssc-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
}

.ssc-thankyou .ssc-thankyou__details > *:empty { display: none; }
.ssc-thankyou .ssc-thankyou__details .woocommerce-customer-details,
.ssc-thankyou .ssc-thankyou__details .woocommerce-order-details { padding: 28px 32px; }
.ssc-thankyou .ssc-thankyou__details h2 { margin: 0 0 16px; font-size: 1.2rem; font-weight: 600; text-align: center; }

.ssc-thankyou table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
	font-size: .95rem;
}

.ssc-thankyou table.shop_table th,
.ssc-thankyou table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--ssc-border);
	background: transparent;
	color: var(--ssc-text);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.ssc-thankyou table.shop_table thead th { border-top: 0; padding-top: 0; color: var(--ssc-muted); font-size: .825rem; font-weight: 500; }
.ssc-thankyou table.shop_table td:last-child,
.ssc-thankyou table.shop_table th:last-child { padding-left: 16px; text-align: right; }
.ssc-thankyou table.shop_table tfoot th { color: var(--ssc-muted); }
.ssc-thankyou table.shop_table tfoot tr:last-child th,
.ssc-thankyou table.shop_table tfoot tr:last-child td { border-top: 1.5px solid var(--ssc-text); font-size: 1.15rem; font-weight: 700; color: var(--ssc-text); }
.ssc-thankyou table.shop_table td a { color: inherit; }

.ssc-thankyou .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ssc-thankyou .woocommerce-customer-details .woocommerce-column { float: none; width: auto; }
.ssc-thankyou .woocommerce-customer-details .woocommerce-column__title { font-size: 1rem; text-align: left; }
.ssc-thankyou .woocommerce-customer-details address { padding: 14px 16px; border: 0; border-radius: var(--ssc-radius-sm); background: var(--ssc-soft); font-style: normal; line-height: 1.6; }

.ssc-thankyou .ssc-thankyou__support {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	padding: 20px 24px;
	border-radius: var(--ssc-radius);
	background: var(--ssc-soft);
	color: var(--ssc-text);
}

.ssc-thankyou .ssc-thankyou__support > .ssc-icon { flex: none; color: var(--ssc-primary); }
.ssc-thankyou .ssc-thankyou__support p { margin: 0 0 4px; }
.ssc-thankyou .ssc-thankyou__support a { color: var(--ssc-primary); font-weight: 600; }

@media (max-width: 600px) {
	.ssc-thankyou .ssc-thankyou__card,
	.ssc-thankyou .ssc-thankyou__details > * { padding: 24px 18px; }
}

/* ------------------------------------------------------------------ *
 * Exit window, toast
 * ------------------------------------------------------------------ */

.ssc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 16px;
	color: var(--ssc-text);
}

.ssc-modal[hidden] { display: none; }
html.ssc-modal-open { overflow: hidden; }

.ssc-modal .ssc-modal__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); opacity: 0; transition: opacity .2s; }

.ssc-modal .ssc-modal__box {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 40px 28px 24px;
	border-radius: calc(var(--ssc-radius) + 4px);
	background: var(--ssc-surface);
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .4);
	text-align: center;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .2s, transform .25s cubic-bezier(.3, 1.3, .5, 1);
}

.ssc-modal .ssc-modal__box:focus { outline: none; }
.ssc-modal.is-open .ssc-modal__overlay { opacity: 1; }
.ssc-modal.is-open .ssc-modal__box { opacity: 1; transform: none; }

.ssc-modal .ssc-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ssc-muted);
	cursor: pointer;
}

.ssc-modal .ssc-modal__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--ssc-soft);
	color: var(--ssc-primary);
}

.ssc-modal .ssc-modal__icon .ssc-icon { display: block; }
.ssc-modal .ssc-modal__title { margin: 0 0 8px; padding: 0; color: var(--ssc-text); font-size: 1.45rem; font-weight: 600; line-height: 1.2; text-transform: none; }
.ssc-modal .ssc-modal__text { margin: 0 0 24px; color: var(--ssc-muted); }
.ssc-modal .ssc-modal__actions { display: grid; gap: 8px; }
.ssc-modal .ssc-modal__actions .ssc-btn { width: 100%; }

.ssc-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 100001;
	max-width: calc(100% - 32px);
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--ssc-text);
	color: var(--ssc-surface);
	font-size: .925rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity .2s, transform .2s;
}

.ssc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ssc-toast.is-error { background: var(--ssc-danger); color: #fff; }

@media (max-width: 767px) {
	body.ssc-has-bar .ssc-toast { bottom: calc(var(--ssc-bar-h) + 16px); }
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ssc *,
	.ssc *::before,
	.ssc *::after,
	.ssc-modal *,
	.ssc-thankyou *,
	.ssc-toast {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Theme/WooCommerce resets for the different-address heading */
.ssc .ssc-form #ship-to-different-address { float: none; width: auto; margin: 0; padding: 0; border: 0; }