/* Cart, checkout and order confirmation. Design tokens come from theme.json. */

/* These elements set a display of their own, which outranks the hidden attribute. */

.astm-pane[hidden],
.astm-back[hidden],
.astm-cart__update[hidden],
[data-astm-next][hidden] {
	display: none;
}

.astm-flow {
	display: grid;
	gap: var(--wp--preset--spacing--35);
}

.astm-flow__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.astm-flow__lead {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* Progress */

.astm-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.astm-steps__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--muted);
}

.astm-steps__item + .astm-steps__item::before {
	content: "";
	width: clamp(24px, 10vw, 140px);
	height: 2px;
	margin-inline-end: var(--wp--preset--spacing--10);
	border-radius: 2px;
	background: var(--wp--preset--color--border);
}

.astm-steps__item.is-current::before,
.astm-steps__item.is-done::before {
	background: var(--wp--preset--color--accent);
}

.astm-steps__marker {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-weight: 600;
}

.astm-steps__check {
	display: none;
}

.astm-steps__item.is-current .astm-steps__marker {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.astm-steps__item.is-done .astm-steps__marker {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.astm-steps__item.is-done .astm-steps__number {
	display: none;
}

.astm-steps__item.is-done .astm-steps__check {
	display: block;
}

.astm-steps__item.is-current .astm-steps__label,
.astm-steps__item.is-done .astm-steps__label {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Layout */

.astm-flow__layout {
	display: grid;
	align-items: start;
	gap: var(--wp--preset--spacing--35);
}

.astm-flow__main {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

@media (min-width: 62rem) {
	.astm-flow__layout {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}

	.astm-flow__aside {
		position: sticky;
		top: var(--wp--preset--spacing--20);
	}
}

/* Cart lines */

.astm-cart__items {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	list-style: none;
}

.astm-cart__item {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}

.astm-cart__item + .astm-cart__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.astm-cart__media img {
	width: 100%;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	object-fit: contain;
}

.astm-cart__body {
	display: grid;
	gap: 0.35rem;
	justify-items: start;
	min-width: 0;
}

.astm-cart__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.astm-cart__name a {
	text-decoration: none;
}

.astm-cart__meta,
.astm-cart__stock {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-cart__stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.astm-cart__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: currentColor;
}

.astm-cart__stock--in {
	color: #1a7f5a;
}

.astm-cart__stock--out {
	color: #b3402f;
}

.astm-cart__quantity-label {
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-cart__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.astm-cart__remove {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-cart__remove:hover {
	color: var(--wp--preset--color--accent);
}

.astm-cart__price {
	display: grid;
	gap: 0.2rem;
	justify-items: end;
	text-align: end;
}

.astm-cart__amount {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.astm-cart__tax {
	color: var(--wp--preset--color--muted);
}

.astm-cart.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.astm-cart__update {
	justify-self: start;
	margin-top: var(--wp--preset--spacing--20);
}

@media (max-width: 40rem) {
	.astm-cart__item {
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.astm-cart__price {
		grid-column: 1 / -1;
		justify-items: start;
		text-align: start;
	}
}

/* Quantity stepper */

.astm-cart .quantity {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.astm-cart .quantity input.qty {
	width: 3.5rem;
	padding: 0.6rem 0.25rem;
	border: 0;
	background: none;
	font: inherit;
	text-align: center;
	-moz-appearance: textfield;
}

.astm-cart .quantity input.qty::-webkit-outer-spin-button,
.astm-cart .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.astm-quantity__step {
	display: inline-flex;
	flex: none;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	border: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

/* Cross-sells and coupon */

.astm-cross,
.astm-coupon {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

.astm-cross__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

.astm-cross__list {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.astm-cross__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.astm-cross__media img {
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	object-fit: contain;
}

.astm-cross__name {
	font-weight: 600;
	text-decoration: none;
}

.astm-cross__meta,
.astm-cross__price {
	margin: 0.2rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-cross__price {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.astm-coupon {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.astm-coupon__icon {
	color: var(--wp--preset--color--accent);
}

.astm-coupon__body {
	flex: 1;
	min-width: 0;
}

.astm-coupon__label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.astm-coupon__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.astm-coupon__row input {
	flex: 1;
	min-width: 12rem;
}

/* Order summary */

.astm-summary,
.astm-card {
	padding: var(--wp--preset--spacing--35);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

.astm-summary__title,
.astm-card__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

.astm-summary__items {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0 0 var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.astm-summary__item {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.astm-summary__media img {
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	object-fit: contain;
}

.astm-summary__name {
	margin: 0;
	font-weight: 600;
}

.astm-summary__meta {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-summary__meta p {
	margin: 0;
}

.astm-summary__price {
	margin: 0.35rem 0 0;
	font-weight: 700;
}

.astm-summary__rows {
	margin: 0;
}

.astm-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: 0.45rem 0;
}

.astm-summary__row dt {
	color: var(--wp--preset--color--muted);
}

.astm-summary__row dd {
	margin: 0;
	font-weight: 500;
	text-align: end;
}

.astm-summary__row--stacked {
	display: block;
}

.astm-summary__row--stacked dd {
	margin-top: 0.25rem;
	text-align: start;
}

.astm-summary__row--total {
	margin-top: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--large);
}

.astm-summary__row--total dt {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.astm-summary__row--total dd {
	font-weight: 700;
}

.astm-summary__pending {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.astm-summary__note {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-summary__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-summary__actions {
	margin-top: var(--wp--preset--spacing--30);
}

.astm-summary__actions .button,
.astm-card__actions .button {
	width: 100%;
	justify-content: center;
}

.astm-shipping {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: end;
}

/* Callouts and badges */

.astm-callout {
	display: flex;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border-radius: 12px;
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--primary);
}

.astm-callout--wide {
	align-items: center;
	margin: 0;
}

.astm-callout__icon {
	flex: none;
	color: var(--wp--preset--color--accent);
}

.astm-callout small {
	display: block;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--muted);
}

.astm-badge {
	display: inline-flex;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.astm-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Empty cart */

.astm-empty {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	text-align: center;
}

.astm-empty__icon {
	color: var(--wp--preset--color--accent);
}

.astm-empty__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* Checkout panes */

.astm-pane {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.astm-pane__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.astm-pane__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.astm-back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.astm-back:hover {
	color: var(--wp--preset--color--accent);
}

.astm-flow__privacy {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-flow__privacy .icon {
	flex: none;
	color: var(--wp--preset--color--accent);
}

/* Address form */

.astm-fields h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

.astm-fields + .astm-fields {
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 40rem) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* WooCommerce floats and half-widths its rows from `.woocommerce form .form-row`.
   Matching that selector shape is what outranks it; the grid does the placing. */

.woocommerce form.astm-checkout .form-row,
.woocommerce-page form.astm-checkout .form-row,
.astm-checkout .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.astm-checkout .form-row-wide,
.astm-checkout .astm-consent {
	grid-column: 1 / -1;
}

.woocommerce form.astm-checkout .form-row label,
.woocommerce-page form.astm-checkout .form-row label,
.astm-checkout .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.astm-checkout .form-row .required {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.astm-checkout input.input-text,
.astm-checkout textarea,
.astm-checkout select,
.astm-coupon__row input {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
}

.astm-checkout textarea {
	min-height: 6rem;
	resize: vertical;
}

/* WooCommerce marks the rows it validated itself, from a selector of its own shape. */

.woocommerce form.astm-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.astm-checkout .form-row.woocommerce-invalid select,
.woocommerce form.astm-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-page form.astm-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-page form.astm-checkout .form-row.woocommerce-invalid select,
.woocommerce-page form.astm-checkout .form-row.woocommerce-invalid textarea,
.astm-checkout .astm-invalid input,
.astm-checkout .astm-invalid select,
.astm-checkout .astm-invalid textarea {
	border-color: var(--astm-danger);
}

.woocommerce form.astm-checkout .form-row.woocommerce-invalid label,
.woocommerce-page form.astm-checkout .form-row.woocommerce-invalid label,
.astm-checkout .astm-invalid label {
	color: var(--astm-danger);
}

.woocommerce form.astm-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce form.astm-checkout .form-row.woocommerce-validated select,
.woocommerce form.astm-checkout .form-row.woocommerce-validated textarea,
.woocommerce-page form.astm-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-page form.astm-checkout .form-row.woocommerce-validated select,
.woocommerce-page form.astm-checkout .form-row.woocommerce-validated textarea {
	border-color: var(--astm-success);
}

.woocommerce form.astm-checkout .form-row label.checkbox,
.woocommerce-page form.astm-checkout .form-row label.checkbox,
.astm-checkout .astm-consent label,
.astm-checkout .woocommerce-form__label-for-checkbox,
.astm-checkout #ship-to-different-address label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.astm-checkout #ship-to-different-address {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: inherit;
	font-weight: 400;
}

/* The address is revealed by its own checkbox; !important outranks the inline
   display WooCommerce animates onto this container. */

.astm-checkout .shipping_address[hidden] {
	display: none !important;
}

.astm-checkout .shipping_address {
	margin-top: var(--wp--preset--spacing--20);
}

.astm-checkout .select2-container .select2-selection--single {
	height: auto;
	padding: 0.55rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

/* Payment */

.astm-checkout #payment {
	padding: var(--wp--preset--spacing--35);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

.astm-checkout .wc_payment_methods {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.astm-checkout .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: inherit;
	font-weight: 600;
}

.astm-checkout .payment_box {
	margin-top: 0.75rem;
	padding: var(--wp--preset--spacing--20);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-checkout .place-order {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.astm-checkout #place_order {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

/* Confirmation */

.astm-thanks__head {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--10);
	text-align: center;
}

.astm-thanks__mark {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: var(--wp--preset--spacing--10);
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.astm-thanks__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.astm-thanks__lead {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.astm-thanks__number {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--large);
}

.astm-thanks__number strong {
	color: var(--wp--preset--color--accent);
}

.astm-thanks__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-thanks__cards {
	display: grid;
	align-items: start;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 56rem) {
	.astm-thanks__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.astm-card__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.astm-card__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

.astm-thanks__support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.astm-thanks__support .icon {
	color: var(--wp--preset--color--accent);
}

/* The flow screens carry their own heading. */

.woocommerce-cart .entry__title,
.woocommerce-checkout .entry__title {
	display: none;
}

/* Applied coupon, on the discount row of the summary. */

.astm-summary__coupon {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--astm-success-soft);
	color: var(--astm-success);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-remove-coupon {
	color: var(--astm-danger);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}