/* ==========================================================================
   Cart, checkout and order received (woocommerce/cart/*, woocommerce/checkout/*).
   WooCommerce's own stylesheet is not loaded on these pages.
   ========================================================================== */

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

.page-hero--funnel {
	padding-block: var(--space-5) var(--space-4);
}

.page-hero--funnel .page-hero__title {
	margin-block-end: 0;
}

.checkout-steps {
	margin-block-end: var(--space-5);
}

.checkout-steps ol {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
	color: var(--color-muted);
}

.checkout-steps li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.checkout-steps li + li::before {
	content: "";
	inline-size: clamp(1rem, 4vw, 3rem);
	block-size: 1px;
	margin-inline-end: var(--space-1);
	background: var(--color-line);
}

.checkout-steps a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
}

.checkout-steps__n {
	display: grid;
	place-items: center;
	inline-size: 1.625rem;
	block-size: 1.625rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	font-size: var(--step--2);
	font-weight: 500;
}

.checkout-steps .is-current {
	color: var(--color-ink);
	font-weight: 500;
}

.checkout-steps .is-current .checkout-steps__n {
	border-color: var(--color-ink);
	background: var(--color-ink);
	color: var(--color-surface);
}

.checkout-steps .is-done .checkout-steps__n {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-surface);
}

/* Shared cards and items -------------------------------------------------- */

.funnel-content a:not(.button) {
	color: inherit;
}

.funnel-content .woocommerce-form-coupon-toggle .woocommerce-info {
	display: block;
	margin-block-end: var(--space-5);
	border-inline-start-color: var(--color-gold);
}

.funnel-content .woocommerce-form-coupon-toggle a {
	text-decoration: underline;
}

.funnel-content form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-end: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
}

.funnel-content form.checkout_coupon > p:first-child {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--step--1);
	color: var(--color-muted);
}

.funnel-content form.checkout_coupon .form-row-first {
	flex: 1;
}

.checkout-card {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
}

@media (min-width: 768px) {
	.checkout-card {
		padding: var(--space-6);
	}
}

.checkout-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	font-size: var(--step-2);
}

.checkout-card__step {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--color-ink);
	color: var(--color-surface);
	font-family: var(--font-sans);
	font-size: var(--step--1);
	font-weight: 500;
}

.checkout-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
}

.checkout-item__thumb {
	position: relative;
	display: block;
	background: var(--color-sand);
}

.checkout-item__thumb img {
	inline-size: 56px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.checkout-item__qty {
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-end: -0.5rem;
	display: grid;
	place-items: center;
	min-inline-size: 1.375rem;
	block-size: 1.375rem;
	padding-inline: 0.3rem;
	border-radius: var(--radius-pill);
	background: var(--color-ink);
	color: var(--color-surface);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
}

.checkout-item__info {
	display: grid;
	gap: 0.125rem;
	font-size: var(--step--1);
}

.checkout-item__name {
	font-family: var(--font-serif);
	font-size: var(--step-1);
	line-height: 1.2;
}

.checkout-item__info .variation,
.checkout-item__info .wc-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-muted);
}

.checkout-item__info dt,
.checkout-item__info dd,
.checkout-item__info p,
.checkout-item__info .wc-item-meta li {
	display: inline;
	margin: 0;
}

.checkout-item__price {
	font-size: var(--step--1);
	font-weight: 500;
	white-space: nowrap;
}

.shipping-pending {
	color: var(--color-muted);
	font-weight: 400;
	font-size: var(--step--1);
}

.shipping-free {
	color: var(--color-success);
	font-weight: 500;
}

/* Cart page --------------------------------------------------------------- */

.cart-layout {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 1024px) {
	.cart-layout {
		grid-template-columns: minmax(0, 1fr) 380px;
		align-items: start;
		gap: var(--space-8);
	}

	.cart-collaterals {
		position: sticky;
		inset-block-start: calc(var(--header-h) + var(--space-5));
	}
}

.cart-items {
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--color-ink);
	list-style: none;
}

.cart-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-block-end: 1px solid var(--color-line);
}

@media (min-width: 640px) {
	.cart-row {
		grid-template-columns: 112px minmax(0, 1fr) auto;
		gap: var(--space-5);
	}
}

.cart-row__thumb {
	background: var(--color-sand);
}

.cart-row__thumb img {
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.cart-row__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	min-inline-size: 0;
	font-size: var(--step--1);
}

.cart-row__name {
	font-family: var(--font-serif);
	font-size: var(--step-1);
	line-height: 1.2;
	text-decoration: none;
}

.cart-row__name:hover {
	color: var(--color-accent) !important;
}

@media (min-width: 640px) {
	.cart-row__name {
		font-size: var(--step-2);
	}
}

.cart-row__info .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	margin: 0;
	color: var(--color-muted);
}

.cart-row__info .variation dt,
.cart-row__info .variation dd,
.cart-row__info .variation p {
	margin: 0;
}

.cart-row__unit {
	color: var(--color-muted);
}

.cart-row__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	margin-block-start: var(--space-3);
}

.cart-row__remove {
	font-size: var(--step--1);
	color: var(--color-muted);
}

.cart-row__total {
	grid-column: 2;
	font-weight: 500;
}

@media (min-width: 640px) {
	.cart-row__total {
		grid-column: auto;
		font-size: var(--step-1);
		text-align: end;
	}
}

.cart-row.loading,
.woocommerce-cart-form.processing {
	opacity: 0.6;
}

/* Quantity stepper (same look as on the product page). */
.qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.qty-stepper__btn {
	inline-size: 2.5rem;
	border: 0;
	background: none;
	font-size: 1.125rem;
	line-height: 1;
}

.qty-stepper__btn:hover {
	color: var(--color-accent);
}

.qty-stepper .quantity {
	display: flex;
}

.qty-stepper .qty {
	inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty-stepper .qty:focus {
	box-shadow: none;
}

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

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
}

.cart-coupon summary {
	font-size: var(--step--1);
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	list-style: none;
}

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

.cart-coupon .coupon {
	display: flex;
	gap: var(--space-2);
	margin-block-start: var(--space-3);
}

.cart-coupon .coupon input {
	min-block-size: 2.75rem;
}

.cart-coupon .coupon .button {
	min-block-size: 2.75rem;
	padding-inline: var(--space-4);
}

/* Quantities update by themselves once JavaScript runs. */
.med-cart-auto-update .cart-update {
	display: none;
}

.cart-update[disabled] {
	opacity: 0.5;
}

/* Cart summary */

.cart-summary {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
}

@media (min-width: 768px) {
	.cart-summary {
		padding: var(--space-6);
	}
}

.cart-summary__title {
	margin-block-end: var(--space-4);
	font-size: var(--step-2);
}

.cart-summary__table,
.checkout-review {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}

.cart-summary__table th,
.cart-summary__table td,
.checkout-review tfoot th,
.checkout-review tfoot td {
	padding-block: var(--space-3);
	border-block-start: 1px solid var(--color-line);
	font-weight: 400;
	text-align: start;
	vertical-align: top;
}

.cart-summary__table td,
.checkout-review tfoot td {
	text-align: end;
}

.cart-summary__table .order-total th,
.cart-summary__table .order-total td,
.checkout-review .order-total th,
.checkout-review .order-total td {
	padding-block-start: var(--space-4);
	border-block-start-color: var(--color-ink);
	font-size: var(--step-0);
	font-weight: 500;
}

.cart-summary__table .order-total td,
.checkout-review .order-total td {
	font-size: var(--step-2);
}

.cart-summary__table .order-total small {
	display: block;
	font-size: var(--step--2);
	font-weight: 400;
	color: var(--color-muted);
}

.wc-proceed-to-checkout {
	margin-block-start: var(--space-5);
}

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	inline-size: 100%;
	min-block-size: 3.5rem;
	font-size: var(--step-0);
}

.cart-summary__assurance {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	padding: 0;
	font-size: var(--step--1);
	color: var(--color-muted);
	list-style: none;
}

.cart-summary__assurance li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.cart-summary__assurance .icon {
	color: var(--color-accent);
}

.cart-empty-state {
	padding-block: var(--space-6) var(--space-8);
}

/* Cross-sells */

.cross-sells {
	margin-block-start: var(--section);
}

.cross-sells > h2 {
	margin-block-end: var(--space-6);
}

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

.med-checkout {
	padding-block-end: var(--space-8);
}

.checkout-layout {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.checkout-layout {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
		align-items: start;
		gap: var(--space-7);
	}

	.checkout-aside {
		position: sticky;
		inset-block-start: calc(var(--header-h) + var(--space-5));
	}
}

/* Mobile: total at the top, items on demand. */
.checkout-peek {
	margin-block-end: var(--space-5);
	border: 1px solid var(--color-line);
	background: var(--color-sand);
}

.checkout-peek__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4);
	font-size: var(--step--1);
	cursor: pointer;
	list-style: none;
}

.checkout-peek__toggle::-webkit-details-marker {
	display: none;
}

.checkout-peek__label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-accent);
	font-weight: 500;
}

.checkout-peek__hide,
.checkout-peek[open] .checkout-peek__show {
	display: none;
}

.checkout-peek[open] .checkout-peek__hide {
	display: inline;
}

.checkout-peek__total {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	color: var(--color-muted);
}

.checkout-peek__total strong {
	color: var(--color-ink);
	font-size: var(--step-1);
	font-weight: 500;
}

.checkout-peek__items {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: var(--space-2) var(--space-4) var(--space-5);
	list-style: none;
}

.checkout-peek__items li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--step--1);
}

@media (min-width: 1024px) {
	.checkout-peek {
		display: none;
	}
}

/* Fields ------------------------------------------------------------------ */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	gap: var(--space-4);
}

/* No order note: the wrapper only holds fields that plugins may add. */
.woocommerce-additional-fields:has(*) {
	margin-block-start: var(--space-4);
}

.form-row {
	margin: 0;
	padding: 0;
}

.form-row > label,
.form-row .woocommerce-input-wrapper + label {
	display: block;
	margin-block-end: var(--space-2);
	font-size: var(--step--1);
	font-weight: 500;
}

.form-row .required {
	color: var(--color-error);
	text-decoration: none;
}

.form-row .optional {
	color: var(--color-muted);
	font-weight: 400;
}

.form-row textarea {
	min-block-size: 6rem;
	resize: vertical;
}

.form-row .description {
	display: block;
	margin-block-start: var(--space-2);
	font-size: var(--step--2);
	color: var(--color-muted);
}

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

.form-row.woocommerce-validated input.input-text {
	border-color: var(--color-line);
}

/* WooCommerce writes inline errors under fields after validation. */
.checkout-inline-error-message,
.form-row .checkout-inline-error-message {
	margin: var(--space-2) 0 0;
	font-size: var(--step--2);
	color: var(--color-error);
}

.med-phone-error {
	display: block;
	margin-block-start: var(--space-2);
	font-size: var(--step--2);
	color: var(--color-error);
}

.med-phone-invalid .description {
	display: none;
}

.med-hidden-field,
.med-hp {
	display: none !important;
}

/* "Autre ville": shown when chosen (without JavaScript it stays visible). */
.js .med-city-other:not(.is-visible) {
	display: none;
}

/* City search (selectWoo) */

.select2-container {
	inline-size: 100% !important;
	font-size: 1rem;
}

.select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	block-size: 3rem;
	padding-inline: var(--space-4) 2.5rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--color-ink);
	line-height: 1.4;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--color-muted);
}

.select2-container .select2-selection--single .select2-selection__arrow {
	inset-block: 0;
	inset-inline-end: var(--space-3);
	block-size: auto;
}

.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.select2-dropdown {
	border-color: var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow);
}

.select2-search--dropdown {
	padding: var(--space-2);
}

.select2-search--dropdown .select2-search__field {
	min-block-size: 2.75rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	font-size: 1rem;
}

.select2-results__options {
	max-block-size: 280px !important;
}

.select2-results__option {
	padding: var(--space-3) var(--space-4);
	font-size: var(--step--1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--color-accent);
	color: var(--color-surface);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--color-accent-soft);
	color: var(--color-ink);
}

/* "Autre ville" sits apart at the end of the list. */
.select2-results__option[id$="-autre"] {
	border-block-start: 1px solid var(--color-line);
	font-style: italic;
}

/* Summary and payment ------------------------------------------------------ */

.checkout-review {
	margin-block-end: var(--space-5);
}

.checkout-review tbody td {
	padding-block: var(--space-3);
	vertical-align: middle;
}

.checkout-review tbody td.product-total {
	padding-inline-start: var(--space-3);
	font-size: var(--step--1);
	font-weight: 500;
	text-align: end;
	white-space: nowrap;
}

.checkout-review .checkout-item {
	grid-template-columns: 56px minmax(0, 1fr);
}

.checkout-review .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.checkout-review tfoot th {
	color: var(--color-muted);
}

.checkout-review .order-total th {
	color: var(--color-ink);
}

/* Cash on delivery: a single, reassuring card instead of a radio list. */
.woocommerce-checkout-payment {
	margin: 0;
}

.wc_payment_methods {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.wc_payment_method {
	position: relative;
	padding: var(--space-4) var(--space-4) var(--space-4) 3.5rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-accent-soft);
}

[dir="rtl"] .wc_payment_method {
	padding: var(--space-4) 3.5rem var(--space-4) var(--space-4);
}

.wc_payment_method + .wc_payment_method {
	margin-block-start: var(--space-3);
}

.wc_payment_method > input[type="radio"] {
	position: absolute;
	inset-block-start: 1.2rem;
	inset-inline-start: var(--space-4);
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	accent-color: var(--color-accent);
}

.wc_payment_methods:has(> li:only-child) .wc_payment_method > input[type="radio"] {
	opacity: 0;
}

.wc_payment_methods:has(> li:only-child) .wc_payment_method::before {
	content: "";
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: var(--space-4);
	inline-size: 1.5rem;
	block-size: 1.5rem;
	background: var(--color-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='1.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='1.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wc_payment_method > label {
	font-weight: 500;
	cursor: pointer;
}

.wc_payment_method .payment_box {
	margin-block-start: var(--space-1);
	font-size: var(--step--1);
	color: var(--color-ink-soft);
}

.wc_payment_method .payment_box p {
	margin: 0;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
	margin-block-end: var(--space-4);
	font-size: var(--step--2);
	color: var(--color-muted);
}

.woocommerce-privacy-policy-text p {
	margin: 0;
}

.place-order {
	margin: 0;
	padding: 0;
}

#place_order {
	display: flex;
	inline-size: 100%;
	min-block-size: 3.75rem;
	border-color: var(--brand-orange);
	background: var(--brand-orange);
	color: var(--color-ink);
	font-size: var(--step-0);
	letter-spacing: 0.12em;
}

#place_order:hover {
	border-color: var(--color-ink);
	background: var(--color-ink);
	color: var(--brand-yellow);
}

.checkout-assurance {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	font-size: var(--step--2);
	color: var(--color-muted);
}

.checkout-assurance .icon {
	flex-shrink: 0;
	color: var(--color-accent);
}

/* While WooCommerce recalculates (blockUI overlay). */
.blockUI.blockOverlay {
	background: var(--color-surface) !important;
	opacity: 0.6 !important;
}

/* Error list above the form after a failed submit. */
.woocommerce-NoticeGroup-checkout .woocommerce-error {
	display: block;
	margin-block-end: var(--space-5);
	padding-inline-start: var(--space-5);
}

.woocommerce-NoticeGroup-checkout .woocommerce-error a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li + li {
	margin-block-start: var(--space-2);
}

/* Order received ---------------------------------------------------------- */

.thankyou {
	display: grid;
	gap: var(--space-6);
	padding-block-end: var(--space-8);
}

.thankyou-hero {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	max-inline-size: 640px;
	margin-inline: auto;
	padding-block: var(--space-4);
	text-align: center;
}

.thankyou-hero__icon {
	display: grid;
	place-items: center;
	inline-size: 4rem;
	block-size: 4rem;
	margin-block-end: var(--space-2);
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-surface);
}

.thankyou-hero .eyebrow {
	margin: 0;
}

.thankyou-hero .eyebrow::before {
	display: none;
}

.thankyou-hero__title {
	margin: 0;
	font-size: var(--step-4);
}

.thankyou-hero__text {
	margin: 0;
	font-size: var(--step-1);
	color: var(--color-ink-soft);
}

.thankyou-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-accent-soft);
	font-size: var(--step--1);
	color: var(--color-accent);
}

.thankyou-hero__wa {
	margin-block-start: var(--space-3);
}

.button--whatsapp {
	border-color: var(--color-line);
	background: var(--color-surface);
	color: var(--color-ink);
}

.button--whatsapp .icon {
	color: #1A8C4A;
}

.button--whatsapp:hover {
	border-color: #1A8C4A;
	background: #1A8C4A;
	color: var(--color-surface);
}

.button--whatsapp:hover .icon {
	color: inherit;
}

.thankyou-steps {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

@media (min-width: 768px) {
	.thankyou-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-5);
	}
}

.thankyou-steps li {
	position: relative;
	display: grid;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-4) var(--space-4) 3.5rem;
	border-block-start: 2px solid var(--color-line);
	counter-increment: step;
	font-size: var(--step--1);
}

[dir="rtl"] .thankyou-steps li {
	padding: var(--space-4) 3.5rem var(--space-4) var(--space-4);
}

.thankyou-steps li::before {
	content: counter(step);
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-start: var(--space-3);
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	font-weight: 500;
}

.thankyou-steps li.is-done {
	border-block-start-color: var(--color-accent);
}

.thankyou-steps li.is-done::before {
	content: "✓";
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-surface);
}

.thankyou-steps strong {
	font-weight: 500;
}

.thankyou-steps span {
	color: var(--color-muted);
}

.thankyou-grid {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.thankyou-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: start;
	}
}

.thankyou-items {
	display: grid;
	gap: var(--space-4);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.thankyou-totals {
	margin: 0;
}

.thankyou-totals th,
.thankyou-totals td {
	padding-block: var(--space-3);
	border-block-start: 1px solid var(--color-line);
	text-align: start;
	font-weight: 400;
}

.thankyou-totals td {
	text-align: end;
}

.thankyou-totals small {
	display: block;
	color: var(--color-muted);
}

.thankyou-details {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--step--1);
}

.thankyou-details > div {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: var(--space-3);
}

.thankyou-details dt {
	color: var(--color-muted);
}

.thankyou-details dd {
	margin: 0;
}

.thankyou-continue {
	margin: 0;
	text-align: center;
}

.thankyou-hero--failed .thankyou-hero__title {
	font-size: var(--step-3);
}