/* ==========================================================================
   Turbo Reman Center: cart, checkout and order received
   WooCommerce's classic cart and checkout markup (cart list from woocommerce/cart/cart.php), styled by the
   theme; WooCommerce's own stylesheets are not loaded here.
   ========================================================================== */

.order-page__inner {
	padding-block: clamp(20px, 3vw, 36px) var(--space-section);
}

/* Steps: Cart, Your details, Done --------------------------------------------- */

.order-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(24px, 3.5vw, 40px);
	list-style: none;
	counter-reset: none;
}

.order-steps__step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-weight: 500;
}

.order-steps__step + .order-steps__step::before {
	content: "";
	width: clamp(16px, 5vw, 56px);
	height: 2px;
	margin-right: 4px;
	border-radius: 2px;
	background: var(--c-line);
}

.order-steps__step.is-done + .order-steps__step::before {
	background: var(--c-ink);
}

.order-steps__step a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.order-steps__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--c-line-strong);
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.order-steps__num .icon {
	width: 14px;
	height: 14px;
}

.order-steps__step.is-current {
	color: var(--c-ink);
}

.order-steps__step.is-current .order-steps__num {
	border-color: var(--c-red);
	background: var(--c-red);
	color: var(--c-white);
}

.order-steps__step.is-done {
	color: var(--c-ink);
}

.order-steps__step.is-done .order-steps__num {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.order-steps__step a:hover .order-steps__label {
		text-decoration: underline;
		text-decoration-color: var(--c-red);
		text-underline-offset: 0.25em;
	}
}

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

/* Shared: totals tables, headings, buttons ------------------------------------- */

.order-page h2,
.order-page h3 {
	font-size: clamp(1.625rem, 1.35rem + 0.9vw, 2rem);
}

.order-page .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.order-page .shop_table th,
.order-page .shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.order-page .shop_table tfoot th,
.order-page .cart_totals th {
	color: var(--c-text);
	font-weight: 500;
}

.order-page .shop_table td:last-child,
.order-page .shop_table th:last-child:not(:first-child) {
	text-align: right;
}

.order-page .shop_table .amount {
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

.order-page .shop_table .order-total th,
.order-page .shop_table .order-total td {
	border-bottom: 0;
	padding-top: 16px;
}

.order-page .shop_table .order-total .amount {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
}

.order-page .shop_table .fee th {
	font-weight: 500;
}

/* The deposit is shown under the total but not part of it: quieter than the total. */
.order-page .shop_table .core-deposit-note th,
.order-page .shop_table .core-deposit-note td {
	padding-top: 0;
	border-bottom: 0;
	color: var(--c-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.order-page .shop_table .core-deposit-note .amount {
	color: var(--c-text);
}

.order-page .shop_table dl.variation,
.order-page .cart-item dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 4px 0 0;
	color: var(--c-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.order-page dl.variation dt {
	font-weight: 400;
}

.order-page dl.variation dd p,
.order-page dl.variation dd {
	margin: 0;
}

.order-page .shop_table .product-name {
	color: var(--c-ink);
	font-weight: 500;
}

.order-page .product-quantity {
	color: var(--c-muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Summary card: cart totals and the checkout's order review */
.cart_totals,
.checkout-review {
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

.cart_totals h2 {
	margin-bottom: 8px;
}

.cart_totals .shop_table th {
	width: 50%;
}

.wc-proceed-to-checkout {
	margin-top: 18px;
}

.wc-proceed-to-checkout .checkout-button,
.order-page #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0.85em 1.9em;
	border: 2px solid var(--c-red);
	border-radius: var(--radius-pill);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.16s var(--ease-out);
}

.wc-proceed-to-checkout .checkout-button:active,
.order-page #place_order:active {
	transform: scale(0.97);
}

.order-page #place_order.is-loading {
	cursor: progress;
	opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
	.wc-proceed-to-checkout .checkout-button:hover,
	.order-page #place_order:hover {
		border-color: var(--c-red-600);
		background: var(--c-red-600);
		color: var(--c-white);
	}
}

.cart_totals .order-call,
.place-order .order-call {
	background: var(--c-white);
}

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

/* The list and the totals share .cart-layout; the totals stay in view beside the list only within it. */
.cart-layout > .cart-collaterals {
	margin-top: 28px;
}

@media (min-width: 1024px) {
	.cart-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: clamp(40px, 4vw, 64px);
		align-items: start;
	}

	.cart-layout > .cart-collaterals {
		position: sticky;
		top: calc(var(--header-nav) + 24px);
		margin-top: 0;
	}
}

.cart-items {
	border-top: 1px solid var(--c-line);
	list-style: none;
}

.cart-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 44px;
	grid-template-areas:
		"media main remove"
		"media qty total";
	align-items: center;
	gap: 14px 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-line);
}

@media (min-width: 640px) {
	.cart-item {
		grid-template-columns: 104px minmax(0, 1fr) auto minmax(96px, auto) 44px;
		grid-template-areas: "media main qty total remove";
		gap: 20px;
	}
}

.cart-item__media {
	grid-area: media;
	align-self: start;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--c-dark-3);
}

.cart-item__media a,
.cart-item__img {
	display: block;
	width: 100%;
	height: 100%;
}

.cart-item__img {
	object-fit: cover;
}

.cart-item__main {
	grid-area: main;
	min-width: 0;
}

.order-page .cart-item__name {
	font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.3125rem);
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.cart-item__name a {
	color: var(--c-ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.cart-item__name a:hover {
		color: var(--c-red-600);
	}
}

.cart-item__price {
	margin-top: 4px;
	color: var(--c-muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.cart-item__qty {
	grid-area: qty;
	justify-self: start;
}

.cart-item__total {
	grid-area: total;
	justify-self: end;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cart-item__remove {
	grid-area: remove;
	justify-self: end;
}

@media (max-width: 639.98px) {
	.cart-item__remove {
		align-self: start;
	}
}

.cart-item__remove-link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--c-muted);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out);
}

.cart-item__remove-link .icon {
	width: 20px;
	height: 20px;
}

.cart-item__remove-link:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.cart-item__remove-link:hover {
		background: var(--c-surface);
		color: var(--c-red-600);
	}
}

/* Quantity: one pill with minus, the number and plus (steps from inc/product.php). */
.order-page .quantity .qty {
	width: 72px;
	height: 48px;
	padding: 0 8px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	color: var(--c-ink);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.order-page .quantity.has-steps {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding-inline: 2px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.order-page .quantity.has-steps:focus-within {
	border-color: var(--c-red);
	box-shadow: 0 0 0 4px rgb(229 39 39 / 0.14);
}

.order-page .quantity.has-steps .qty {
	width: 40px;
	height: 44px;
	padding: 0;
	border: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.order-page .quantity.has-steps .qty::-webkit-inner-spin-button,
.order-page .quantity.has-steps .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.order-page .quantity .qty:focus-visible {
	outline: none;
}

.order-page .qty-step {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--c-ink);
	transition: background-color 0.15s ease, transform 0.16s var(--ease-out);
}

.order-page .qty-step .icon {
	width: 16px;
	height: 16px;
}

.order-page .qty-step:active:not(:disabled) {
	transform: scale(0.92);
}

.order-page .qty-step:disabled {
	color: var(--c-line-strong);
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.order-page .qty-step:hover:not(:disabled) {
		background: var(--c-surface);
	}
}

.cart-form.is-updating .cart-items {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.cart-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
}

.cart-form__continue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
}

.cart-form__continue .icon {
	width: 18px;
	height: 18px;
	color: var(--c-red);
	transition: transform 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.cart-form__continue:hover {
		color: var(--c-ink);
	}

	.cart-form__continue:hover .icon {
		transform: translateX(-3px);
	}
}

.cart-form__update {
	min-height: 44px;
	padding: 0.5em 1.3em;
	font-size: 0.9375rem;
}

.order-page .cross-sells {
	margin-top: clamp(48px, 6vw, 80px);
	container-type: inline-size;
}

.order-page .cross-sells > h2 {
	margin-bottom: clamp(20px, 3vw, 28px);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

/* Empty cart: WooCommerce's message, the phone, and the way back to the shop. */
.order-page .cart-empty {
	margin-bottom: 20px;
}

.order-page--cart .woocommerce > .order-call {
	max-width: 440px;
	margin: 0 0 24px;
}

.order-page .return-to-shop .button {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: 0.85em 1.9em;
	border: 2px solid var(--c-red);
	border-radius: var(--radius-pill);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
}

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

.order-page form.checkout {
	display: grid;
	gap: 28px;
}

.order-page #order_review_heading {
	margin: 0 0 -16px;
}

.order-page #order_review {
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

@media (min-width: 1024px) {
	.order-page form.checkout {
		grid-template-columns: minmax(0, 1fr) 420px;
		grid-template-areas:
			"details heading"
			"details review";
		grid-template-rows: auto 1fr;
		column-gap: clamp(40px, 4vw, 64px);
		row-gap: 0;
		align-items: start;
	}

	.order-page #customer_details {
		grid-area: details;
	}

	/* The heading and the review read as one card. */
	.order-page #order_review_heading {
		grid-area: heading;
		margin: 0;
		padding: 28px 28px 0;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		background: var(--c-surface);
	}

	.order-page #order_review {
		grid-area: review;
		padding-top: 8px;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	}
}

.order-page #customer_details .col-2 {
	margin-top: 28px;
}

.order-page #customer_details .col-2:empty {
	display: none;
}

.checkout-lede {
	margin: 6px 0 20px;
	color: var(--c-muted);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
}

.woocommerce-additional-fields h3 {
	margin-bottom: 14px;
}

.order-page .form-row {
	display: grid;
	gap: 6px;
	grid-column: 1 / -1;
	margin: 0;
}

@media (min-width: 560px) {
	.order-page .form-row-first {
		grid-column: 1;
	}

	.order-page .form-row-last {
		grid-column: 2;
	}
}

.order-page .form-row label {
	color: var(--c-ink);
	font-weight: 500;
}

.order-page .form-row .required {
	color: var(--c-red-600);
	text-decoration: none;
}

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

.order-page .form-row .input-text,
.order-page .form-row textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	color: var(--c-ink);
	font: inherit;
	font-size: max(16px, 1rem);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.order-page .form-row textarea {
	min-height: 120px;
	resize: vertical;
}

.order-page .form-row .input-text:focus,
.order-page .form-row textarea:focus {
	border-color: var(--c-red);
	outline: none;
	box-shadow: 0 0 0 4px rgb(229 39 39 / 0.14);
}

.order-page .form-row .input-text:user-invalid,
.order-page .woocommerce-invalid .input-text {
	border-color: var(--c-red-600);
}

.order-page .woocommerce-input-wrapper {
	display: block;
}

/* Order review */
.order-page .woocommerce-checkout-review-order-table {
	margin-top: 8px;
}

.order-page .woocommerce-checkout-review-order-table thead th {
	padding-top: 0;
	color: var(--c-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.order-page .woocommerce-checkout-review-order-table .product-name {
	padding-right: 12px;
}

/* Payment method and place order */
.order-page #payment {
	margin-top: 20px;
}

.order-page .wc_payment_methods {
	list-style: none;
}

.order-page .wc_payment_method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 12px;
	padding: 16px 18px;
	border: 2px solid var(--c-red);
	border-radius: var(--radius);
	background: var(--c-white);
}

.order-page .wc_payment_method + .wc_payment_method {
	margin-top: 10px;
	border-color: var(--c-line-strong);
}

.order-page .wc_payment_method .input-radio {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--c-red);
}

.order-page .wc_payment_method label {
	color: var(--c-ink);
	font-weight: 600;
}

.order-page .payment_box {
	grid-column: 2;
	color: var(--c-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.order-page .payment_box p {
	margin: 0;
}

.order-page .place-order {
	display: grid;
	gap: 14px;
	margin-top: 18px;
}

.order-page .woocommerce-privacy-policy-text p {
	color: var(--c-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.order-page .woocommerce-terms-and-conditions-wrapper .form-row {
	display: block;
}

.order-page .woocommerce-form__label-for-checkbox {
	position: relative;
	display: block;
	padding-left: 30px;
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	cursor: pointer;
}

.order-page .woocommerce-form__input-checkbox {
	position: absolute;
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--c-red);
}

.order-page .woocommerce-terms-and-conditions-checkbox-text a,
.order-page .woocommerce-privacy-policy-text a {
	color: var(--c-red-600);
}

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

.order-page .woocommerce-order {
	display: grid;
	gap: 32px;
	max-width: 880px;
}

.order-page .woocommerce-thankyou-order-received {
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	font-weight: 600;
	line-height: 1.05;
	text-wrap: balance;
}

.order-page .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	list-style: none;
}

.order-page .woocommerce-order-overview li {
	display: grid;
	gap: 4px;
	padding: 16px 18px;
	border-radius: var(--radius);
	background: var(--c-surface);
	color: var(--c-muted);
	font-size: 0.875rem;
}

.order-page .woocommerce-order-overview strong {
	color: var(--c-ink);
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.next-steps {
	padding: clamp(22px, 3vw, 32px);
	border: 2px solid var(--c-red);
	border-radius: var(--radius-lg);
}

.next-steps__title {
	margin-bottom: 16px;
}

.next-steps__list {
	display: grid;
	gap: 12px;
	list-style: none;
	counter-reset: step;
}

.next-steps__list li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	color: var(--c-ink);
	line-height: 1.5;
	counter-increment: step;
}

.next-steps__list li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-red);
	color: var(--c-white);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1;
}

.next-steps__list li:first-child {
	font-weight: 500;
}

.next-steps__ask {
	margin-top: 16px;
	color: var(--c-text);
}

.next-steps__ask a {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--c-ink);
	text-decoration-color: var(--c-red);
	font-variant-numeric: tabular-nums;
}

.order-page .woocommerce-order-details__title,
.order-page .woocommerce-column__title {
	margin-bottom: 12px;
}

.order-page .woocommerce-customer-details address {
	padding: 18px 20px;
	border-radius: var(--radius);
	background: var(--c-surface);
	color: var(--c-ink);
	font-style: normal;
	line-height: 1.6;
}

.order-page .woocommerce-customer-details address p {
	margin: 0;
}

.order-page .wc-item-meta {
	margin: 4px 0 0;
	color: var(--c-muted);
	font-size: 0.8125rem;
	list-style: none;
}

.order-page .wc-item-meta li,
.order-page .wc-item-meta p {
	display: inline;
	margin: 0;
}

.order-page .wc-item-meta .wc-item-meta-label {
	font-weight: 400;
}

.order-page .woocommerce-table--order-details .product-name a {
	color: var(--c-ink);
	text-decoration: none;
}