/**
 * Checkout: woocommerce/checkout/ (Checkout 2188:940). No mobile frame:
 * homepage mobile patterns. Uses the cart styles (cart.css) for the title
 * card, the summary card and its lines.
 */

body.xat-checkout {
	background: var(--color-white);
}

/* Breadcrumb (2188:1066): 20px above, 24px under. */
.checkout-page > .breadcrumb {
	padding-top: 20px;
	padding-bottom: var(--space-md);
}

/* Title card: 32px under it on the checkout (2188:1070). */
.title-card-wrap--tight {
	padding-bottom: clamp(24px, 21.6654px + 0.6226vw, 32px);
}

/* Steps (2188:1522): white pill, line border, 8px padding and gaps; done =
 * cream, current = black, next = muted; "›" between them. Below 480 only
 * the current step shows its name. */
.checkout-steps-wrap {
	padding-bottom: clamp(24px, 21.6654px + 0.6226vw, 32px);
}

.checkout-steps {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--space-xs);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	list-style: none;
}

.checkout-steps__step {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-width: 0;
}

.checkout-steps__step + .checkout-steps__step::before {
	color: var(--color-muted);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	content: "›";
}

.checkout-steps__pill {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-pill);
	color: var(--color-muted);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
	white-space: nowrap;
}

.checkout-steps__step--done .checkout-steps__pill {
	background: var(--color-cream);
	color: var(--color-ink);
}

a.checkout-steps__pill:hover {
	color: var(--color-orange);
}

.checkout-steps__step--current .checkout-steps__pill {
	background: var(--color-black);
	color: var(--color-white);
}

@media (max-width: 479px) {
	.checkout-steps__step:not(.checkout-steps__step--current) .checkout-steps__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

@media (min-width: 768px) {
	.checkout-steps__pill {
		padding: 10px 18px;
	}
}

/* Notices (not designed): the cart notice style, above the layout and at
 * the top of the form (WooCommerce's checkout errors). */
.checkout-page__notices:not(:has(li, .woocommerce-message, .woocommerce-info)) {
	display: none;
}

.checkout-page .woocommerce-error,
.checkout-page .woocommerce-message,
.checkout-page .woocommerce-info {
	margin: 0 0 var(--space-sm);
	padding: 12px 16px;
	border: 1px solid var(--color-orange);
	border-radius: var(--radius-md);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
	list-style: none;
}

.checkout-page .woocommerce-message,
.checkout-page .woocommerce-info {
	border-color: var(--color-line);
}

.checkout-page .woocommerce-error::before,
.checkout-page .woocommerce-message::before,
.checkout-page .woocommerce-info::before {
	content: none;
}

.checkout-page .woocommerce-error li + li {
	margin-top: 4px;
}

.checkout-page .woocommerce-error a {
	color: inherit;
}

/* Layout (2188:1531): summary above the form below 1280 (a closed toggle),
 * then the 808 + 32 + 440 columns; 140px to the footer. */
.checkout-page__layout {
	display: grid;
	gap: var(--space-md);
	align-items: start;
	padding-bottom: clamp(64px, 41.821px + 5.9144vw, 140px);
}

.checkout-page__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.checkout-summary {
	order: -1;
}

@media (min-width: 1280px) {
	.checkout-page__layout {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 32px;
	}

	.checkout-summary {
		order: 0;
	}
}

/* Step cards (2188:1533): white, line border, radius 30, 36px padding,
 * 18px between the parts; radius 20 and 20px padding on phones. */
.checkout-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: var(--space-md) 20px;
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

@media (min-width: 768px) {
	.checkout-card {
		padding: 36px;
		border-radius: 30px;
	}
}

.checkout-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.checkout-card__number {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--color-green-dark);
	color: var(--color-white);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.checkout-card__title {
	flex: 1;
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

/* "Already have an account? Log in" (2188:1538). Under the title on phones. */
.checkout-card__aside {
	flex-basis: 100%;
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.checkout-card__aside a {
	color: var(--color-orange);
	text-decoration: underline;
}

.checkout-card__aside a:hover {
	color: var(--color-orange-dark);
}

@media (min-width: 768px) {
	.checkout-card__aside {
		flex-basis: auto;
	}
}

/* Fields (2188:1539): Label/M label 8px above a 54px cream input, line
 * border, radius 12. Two columns from 480 for the paired fields (name,
 * postcode and city, country and phone); 18px rows, 16px columns. */
.checkout-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px 16px;
}

@media (min-width: 480px) {
	.checkout-fields:not(.checkout-fields--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.checkout-fields .form-row {
		grid-column: 1 / -1;
	}

	.checkout-fields [id$="_first_name_field"],
	.checkout-fields [id$="_last_name_field"],
	.checkout-fields [id$="_postcode_field"],
	.checkout-fields [id$="_city_field"],
	.checkout-fields [id$="_state_field"],
	.checkout-fields [id$="_country_field"],
	.checkout-fields [id$="_phone_field"] {
		grid-column: auto;
	}
}

.checkout-page .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.checkout-fields .form-row > label {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.checkout-fields .form-row .optional {
	font-weight: var(--weight-semibold);
}

.checkout-fields .form-row .required {
	color: var(--color-orange-dark);
	text-decoration: none;
}

.checkout-fields .woocommerce-input-wrapper {
	display: block;
}

.checkout-fields .input-text,
.checkout-fields select {
	box-sizing: border-box;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	background-color: var(--color-cream);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-field);
	line-height: var(--leading-body-m);
	appearance: none;
}

/* "Select country ▾": a small caret drawn with two gradients. */
.checkout-fields select {
	padding-right: 44px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
		linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
	background-position:
		calc(100% - 26px) 50%,
		calc(100% - 21px) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px;
	cursor: pointer;
}

.checkout-fields .input-text::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.checkout-fields .input-text:hover,
.checkout-fields select:hover {
	border-color: var(--color-muted);
}

.checkout-fields .input-text:focus,
.checkout-fields select:focus {
	border-color: var(--color-ink);
}

.checkout-page .woocommerce-invalid .input-text,
.checkout-page .woocommerce-invalid select {
	border-color: var(--color-orange-dark);
}

.checkout-page .checkout-inline-error-message {
	margin: 0;
	color: var(--color-orange-dark);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

/* Checkboxes: components/checkbox.css. */
.checkout-page .woocommerce-invalid .checkout-check__box {
	border-color: var(--color-orange-dark);
}

/* Billing address (shown with "Bill to a different address"; not designed). */
.checkout-billing {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: var(--space-xs);
}

.checkout-billing[hidden] {
	display: none;
}

.checkout-billing__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

/* Option rows (2188:1598, 2188:1620): radio, optional round icon, name and
 * second line, price; white with a line border, the chosen one cream with
 * an orange border; radius 12, 18px / 20px padding, 16px gaps. The whole
 * row is the label. */
.checkout-options {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checkout-option {
	position: relative;
	border: 1.5px solid var(--color-line);
	border-radius: 12px;
	background: var(--color-white);
}

.checkout-option:has(.checkout-option__radio:checked) {
	border-color: var(--color-orange);
	background: var(--color-cream);
}

.checkout-option__label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 22px;
	padding: 18px 20px 18px 58px;
	cursor: pointer;
}

/* The radio sits on the row's left edge; the label leaves room for it. */
.checkout-option__radio {
	position: absolute;
	top: 18px;
	left: 20px;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid var(--color-muted);
	border-radius: 50%;
	background: var(--color-white);
	appearance: none;
	cursor: pointer;
}

.checkout-option__radio:checked {
	border: 6px solid var(--color-orange);
}

/* Rows with an icon (40px): top-aligned, the radio on the icon's centre,
 * also when the second line wraps. */
.checkout-option--payment .checkout-option__label {
	align-items: flex-start;
}

.checkout-option--payment .checkout-option__radio {
	top: 27px;
}

.checkout-option__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.checkout-option__name,
.checkout-option__price {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.checkout-option__price {
	flex: none;
	white-space: nowrap;
}

.checkout-option__sub {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.checkout-option__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--color-green);
	color: var(--color-white);
}

.checkout-option__icon--yellow {
	background: var(--color-yellow);
}

.checkout-option__icon--green-dark {
	background: var(--color-green-dark);
}

/* A gateway's description or fields while chosen. */
.checkout-option__box {
	padding: 0 20px 18px 58px;
	color: var(--color-ink);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.checkout-option__box p {
	margin: 0;
}

.checkout-note {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.xat-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.checkout-free-shipping {
	margin: 0;
	color: var(--color-green);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

/* Payment step and Place order (2188:1641): checkboxes, the 64px button
 * with the arrow, "← Return to cart"; 20px apart, 8px above. */
.checkout-payment {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.checkout-page .checkout-confirm {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: var(--space-xs);
}

.checkout-place {
	min-height: 64px;
	gap: 10px;
}

.checkout-place::after {
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	content: "";
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.checkout-place:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.checkout-back {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-xs);
	min-height: 44px;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
}

.checkout-back:hover {
	color: var(--color-orange);
}

.checkout-update {
	min-height: 44px;
	margin-top: var(--space-xs);
	padding: 0 var(--space-sm);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font: inherit;
	cursor: pointer;
}

/* Order summary (2188:1650): the cart summary card; "Order summary (3)",
 * lines with a 64px photo and a black quantity badge, discount code,
 * totals. */
.checkout-summary__body,
.checkout-summary__lines,
.xat-checkout-totals,
.woocommerce-checkout-review-order {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.checkout-summary.is-busy .checkout-summary__body {
	opacity: 0.6;
}

.summary-items {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.summary-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
}

.summary-item__photo {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: var(--color-photo);
}

.summary-item__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}

.summary-item__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	box-sizing: border-box;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--color-black);
	color: var(--color-white);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.summary-item__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.summary-item__name,
.summary-item__price {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.summary-item__price {
	white-space: nowrap;
}

.summary-item__meta {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.coupon__notice:empty {
	display: none;
}

.coupon__notice .woocommerce-error,
.coupon__notice .woocommerce-message,
.coupon__notice .woocommerce-info {
	margin: 0;
}

/* Summary toggle below 1280 (not designed): "Order summary   €46.53 ▾". */
.checkout-summary__toggle {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink);
	font: inherit;
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-align: left;
	cursor: pointer;
}

.checkout-summary__toggle[hidden] {
	display: none;
}

.checkout-summary__toggle > span:first-child {
	flex: 1;
}

.checkout-summary__caret {
	transition: transform 0.2s ease;
}

.checkout-summary.is-open .checkout-summary__caret {
	transform: rotate(180deg);
}

@media (max-width: 1279px) {
	.checkout-summary.has-toggle:not(.is-open) .checkout-summary__body {
		display: none;
	}

	.checkout-summary.has-toggle {
		padding-top: var(--space-sm);
		padding-bottom: var(--space-sm);
	}

	.checkout-summary.has-toggle.is-open .checkout-summary__body {
		padding-top: var(--space-sm);
		padding-bottom: var(--space-xs);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.checkout-summary__caret {
		transition: none;
	}
}

/* Order received (not designed, woocommerce/checkout/thankyou.php): the
 * checkout's cards and summary. The summary follows the message on phones
 * and tablets. */
.order-received .checkout-summary {
	order: 0;
}

.order-received__lead {
	margin: 0;
	color: var(--color-ink);
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.order-facts,
.order-addresses {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
}

.order-facts__item {
	padding: var(--space-sm) 20px;
	border-radius: var(--radius-md);
	background: var(--color-cream);
}

.order-facts dt,
.order-addresses__title {
	margin: 0 0 4px;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body-s);
}

.order-facts dd {
	margin: 0;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	overflow-wrap: anywhere;
}

.order-addresses address {
	color: var(--color-ink);
	font-size: var(--text-body-m);
	font-style: normal;
	line-height: var(--leading-body-m);
}

@media (min-width: 480px) {
	.order-facts,
	.order-addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The payment method's own block, e.g. bank details. */
.order-received__payment {
	color: var(--color-ink);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.order-received__payment h2 {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.order-received__payment p,
.order-received__payment ul {
	margin: 0;
}

.order-received__continue {
	justify-self: start;
}

/* Desktop: the button under the cards, the summary next to both. */
@media (min-width: 1280px) {
	.order-received .checkout-summary {
		grid-row: 1 / span 2;
		grid-column: 2;
	}

	.order-received__continue {
		grid-column: 1;
	}
}

/* Phones (client, 19 Oct 2026): labels and checkbox labels at 14px; option
 * names too. Typed text stays 16px (--text-field, decision 14.29). Desktop
 * keeps the frame's 16px. */
@media (max-width: 767px) {
	.checkout-fields .form-row > label,
	.checkout-check__label,
	.checkout-option__name,
	.checkout-option__price {
		font-size: var(--text-body-s);
	}

	.checkout-check__label {
		line-height: var(--leading-body-s);
	}

	.checkout-fields .input-text,
	.checkout-fields select {
		height: 48px;
		padding-left: var(--space-sm);
	}
}

/* Narrow phones: tighter option rows, a 32px icon, so the names keep one
 * line next to the radio and the icon. */
@media (max-width: 479px) {
	.checkout-option__label {
		gap: 12px;
		padding: var(--space-sm) var(--space-sm) var(--space-sm) 50px;
	}

	.checkout-option__radio {
		top: 16px;
		left: var(--space-sm);
	}

	.checkout-option--payment .checkout-option__radio {
		top: 21px;
	}

	.checkout-option__icon {
		width: 32px;
		height: 32px;
	}

	.checkout-option__icon svg {
		width: var(--icon-inline);
		height: var(--icon-inline);
	}

	.checkout-option__box {
		padding: 0 var(--space-sm) var(--space-sm) 50px;
	}
}