/*
 * AverionHair Cart & Checkout.
 *
 * Scoped to .avh-co, except the theme suppression (printed inline from settings, scoped to
 * body.avh-co-active) and the WooCommerce field styling, which has to reach markup WooCommerce
 * prints inside ours.
 */

:root {
	--avh-co-ink: var(--avh-black, #191410);
	--avh-co-accent: var(--avh-gold, #c29a4f);
	--avh-co-surface: var(--avh-nude, #ece0cf);
	--avh-co-cream: var(--avh-cream, #f7f1e6);
	--avh-co-radius: 18px;
	--avh-co-max: 1180px;

	--avh-co-font-heading: var(--avh-font-heading, "Fraunces", Georgia, "Times New Roman", serif);
	--avh-co-font-body: var(--avh-font-body, "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif);
	--avh-co-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--avh-co-line: color-mix(in srgb, var(--avh-co-ink) 12%, transparent);
}

.avh-co {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--avh-co-max);
	margin-inline: auto;
	color: var(--avh-co-ink);
	font-family: var(--avh-co-font-body);
	font-size: 16px;
	line-height: 1.6;
}

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

/*
 * Some themes make the WooCommerce wrapper a grid or a flex row for their own cart layout, which
 * would make ours a single item inside it.
 */
body.avh-co-active .woocommerce {
	display: block;
	width: 100%;
	max-width: none;
	float: none;
}

/* --- Head ----------------------------------------------------------------------------------- */

.avh-co__head {
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--avh-co-line);
}

.avh-co__head--centred {
	border-bottom: 0;
	text-align: center;
}

.avh-co__eyebrow {
	margin: 0;
	color: var(--avh-co-accent);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	line-height: 1.4;
	text-transform: uppercase;
}

.avh-co .avh-co__title {
	margin: 0.5rem 0 0;
	font-family: var(--avh-co-font-heading);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.12;
}

.avh-co .avh-co__h2 {
	margin: 0 0 1.1rem;
	font-family: var(--avh-co-font-heading);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.3;
}

/* --- Layout --------------------------------------------------------------------------------- */

.avh-co__layout {
	display: grid;
	gap: 2.5rem;
	margin-top: 2rem;
}

@media (min-width: 900px) {
	.avh-co__layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
		align-items: start;
	}
}

.avh-co__main,
.avh-co__aside {
	min-width: 0;
}

@media (min-width: 900px) {
	.avh-co__aside {
		position: sticky;
		/* Clears a sticky site header without needing to know its height. */
		top: 6rem;
	}
}

/* --- Free shipping ---------------------------------------------------------------------------- */

.avh-co__progress {
	margin-bottom: 1.5rem;
	padding: 0.9rem 1.15rem;
	border-radius: var(--avh-co-radius);
	background: color-mix(in srgb, var(--avh-co-surface) 45%, transparent);
}

.avh-co__progress-text {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
}

.avh-co__progress.is-done .avh-co__progress-text {
	color: #1d5c3a;
	margin-bottom: 0;
}

.avh-co__progress.is-done .avh-co__progress-track {
	display: none;
}

.avh-co__progress-track {
	display: block;
	height: 0.35rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--avh-co-ink) 10%, transparent);
	overflow: hidden;
}

.avh-co__progress-track > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--avh-co-accent);
	transition: width 400ms var(--avh-co-ease);
}

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

.avh-co__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.avh-co__lines li::before,
.avh-co__lines li::marker {
	content: none;
}

.avh-co__line {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--avh-co-line);
	list-style: none;
}

.avh-co__line-media {
	flex: 0 0 5rem;
	width: 5rem;
	overflow: hidden;
	border-radius: 12px;
	background: var(--avh-co-surface);
}

.avh-co__line-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.avh-co__line-detail {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.avh-co__line-name {
	font-family: var(--avh-co-font-heading);
	font-size: 1.05rem;
	line-height: 1.3;
}

.avh-co__line-name a {
	color: var(--avh-co-ink);
	text-decoration: none;
}

.avh-co__line-name a:hover {
	color: var(--avh-co-accent);
}

/* Variation data - "Length: 18 inch" - which WooCommerce renders as a definition list. */
.avh-co__line-name .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin: 0.3rem 0 0;
	color: color-mix(in srgb, var(--avh-co-ink) 55%, transparent);
	font-family: var(--avh-co-font-body);
	font-size: 0.8rem;
}

.avh-co__line-name .variation dt,
.avh-co__line-name .variation dd {
	margin: 0;
	font-weight: 400;
}

.avh-co__line-name .variation p {
	margin: 0;
}

.avh-co__line-price {
	margin-top: 0.25rem;
	color: color-mix(in srgb, var(--avh-co-ink) 55%, transparent);
	font-size: 0.85rem;
}

.avh-co__line-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	margin-top: 0.9rem;
}

.avh-co__line-total {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/*
 * The cart quantity control.
 *
 * As of 1.0.2 this markup is ours (templates/global/quantity-input.php), which is the actual fix
 * for the number that would not show. Twice it was treated as a styling problem; it was not. The
 * field came from the THEME's copy of global/quantity-input.php, so every rule below was aimed at
 * a DOM we had never seen.
 *
 * The defensive declarations are kept even so. They cost nothing, they still guard the value
 * against a theme rule that reaches our input by tag or by Woo's own `.qty` class, and the failure
 * they prevent is a silent one: the field present, focusable and submitting the right number while
 * showing nothing at all.
 */
.avh-co .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--avh-co-line);
	border-radius: 10px;
}

.avh-co .quantity input[type="number"],
.avh-co .quantity input[type="text"],
.avh-co .quantity .qty,
.avh-co .avh-co__line-controls .qty {
	display: block;
	width: 3.75rem;
	min-width: 3rem;
	height: auto;
	max-width: none;
	padding: 0.5rem 0.4rem;
	border: 0;
	background: transparent;
	color: var(--avh-co-ink);
	/* WebKit honours this OVER `color` on form controls - the newsletter field taught us that. */
	-webkit-text-fill-color: var(--avh-co-ink);
	opacity: 1;
	font-family: inherit;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	text-align: center;
	text-indent: 0;
	/*
	 * Some themes hide the number by making the input a bare stepper: appearance:none plus a zero
	 * width, or a transparent colour. Restoring the field's own appearance puts the value back.
	 */
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
	visibility: visible;
	clip: auto;
	clip-path: none;
	position: static;
}

/* Our own steppers - and a theme's, on the surfaces where the field is still the theme's. */
.avh-co .quantity button,
.avh-co .avh-co-qty__step,
.avh-co .quantity .ct-increase,
.avh-co .quantity .ct-decrease,
.avh-co .quantity .plus,
.avh-co .quantity .minus {
	position: static;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: color-mix(in srgb, var(--avh-co-ink) 60%, transparent);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.avh-co .quantity button:hover,
.avh-co .avh-co-qty__step:hover,
.avh-co .quantity .ct-increase:hover,
.avh-co .quantity .ct-decrease:hover,
.avh-co .quantity .plus:hover,
.avh-co .quantity .minus:hover {
	color: var(--avh-co-accent);
}

/*
 * Read-only quantity: min and max are the same number, so there is nothing to step. The value is
 * submitted hidden and printed as text, exactly as WooCommerce does it.
 */
.avh-co .avh-co-qty--fixed {
	border: 0;
	padding: 0.5rem 0.75rem;
	color: var(--avh-co-ink);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

/* The label WooCommerce prints for screen readers must stay hidden, not become a visible word. */
.avh-co .quantity label.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.avh-co__remove {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	color: color-mix(in srgb, var(--avh-co-ink) 45%, transparent);
	font-size: 0.82rem;
	text-decoration: none;
}

.avh-co__remove:hover {
	color: #b3261e;
}

.avh-co__cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 1.5rem;
}

/* --- Coupon --------------------------------------------------------------------------------- */

.avh-co__coupon {
	flex: 1 1 18rem;
	min-width: 0;
}

.avh-co__coupon summary {
	cursor: pointer;
	color: color-mix(in srgb, var(--avh-co-ink) 65%, transparent);
	font-size: 0.88rem;
}

.avh-co__coupon summary:hover {
	color: var(--avh-co-accent);
}

.avh-co__coupon-body {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.avh-co__coupon-body input {
	flex: 1 1 10rem;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--avh-co-line);
	border-radius: 10px;
	background: #fff;
	color: var(--avh-co-ink);
	font-family: inherit;
	font-size: 0.9rem;
}

.avh-co__coupon--checkout {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--avh-co-line);
}

/* --- Summary -------------------------------------------------------------------------------- */

.avh-co__summary {
	padding: 1.5rem;
	border: 1px solid var(--avh-co-line);
	border-radius: var(--avh-co-radius);
	background: var(--avh-co-cream);
}

.avh-co__row {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.55rem 0;
	font-size: 0.92rem;
}

.avh-co__row > span:first-child {
	color: color-mix(in srgb, var(--avh-co-ink) 60%, transparent);
}

.avh-co__row--total {
	margin-top: 0.4rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--avh-co-line);
	font-size: 1rem;
}

.avh-co__row--total > span:first-child {
	color: var(--avh-co-ink);
	font-weight: 600;
}

.avh-co__row--total .amount,
.avh-co__row--total .woocommerce-Price-amount {
	font-family: var(--avh-co-font-heading);
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
}

/* WooCommerce's shipping rows come through as a table row it builds itself. */
.avh-co__summary .shipping ul,
.avh-co__summary #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.avh-co__summary .shipping li,
.avh-co__summary #shipping_method li {
	margin: 0 0 0.3rem;
	list-style: none;
}

.avh-co__summary .shipping li::before,
.avh-co__summary #shipping_method li::before {
	content: none;
}

.avh-co__summary .woocommerce-shipping-destination {
	margin: 0.4rem 0 0;
	color: color-mix(in srgb, var(--avh-co-ink) 50%, transparent);
	font-size: 0.78rem;
}

.avh-co__link {
	display: block;
	margin-top: 0.9rem;
	color: color-mix(in srgb, var(--avh-co-ink) 60%, transparent);
	font-size: 0.85rem;
	text-align: center;
	text-decoration: none;
}

.avh-co__link:hover {
	color: var(--avh-co-accent);
}

/* --- Trust row ------------------------------------------------------------------------------ */

.avh-co__trust {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.avh-co__trust li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0 0 0.45rem;
	color: color-mix(in srgb, var(--avh-co-ink) 55%, transparent);
	font-size: 0.78rem;
	line-height: 1.5;
	list-style: none;
}

.avh-co__trust li::before,
.avh-co__trust li::marker {
	content: none;
}

.avh-co__trust svg {
	flex: 0 0 auto;
	margin-top: 0.15rem;
	color: var(--avh-co-accent);
}

.avh-co__trust a {
	color: inherit;
}

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

/*
 * WooCommerce renders these, not us - the field markup carries names, validation classes and the
 * hooks every gateway and address plugin binds to. Restyled, never replaced.
 */
.avh-co__panel {
	padding: 1.5rem;
	border: 1px solid var(--avh-co-line);
	border-radius: var(--avh-co-radius);
}

.avh-co .woocommerce-billing-fields h3,
.avh-co .woocommerce-shipping-fields h3,
.avh-co .woocommerce-additional-fields h3 {
	margin: 0 0 1.1rem;
	font-family: var(--avh-co-font-heading);
	font-size: 1.3rem;
	font-weight: 400;
}

.avh-co .woocommerce-shipping-fields,
.avh-co .woocommerce-additional-fields {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--avh-co-line);
}

.avh-co .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0;
}

.avh-co .form-row label {
	color: color-mix(in srgb, var(--avh-co-ink) 60%, transparent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

.avh-co .input-text,
.avh-co .form-row input[type="text"],
.avh-co .form-row input[type="email"],
.avh-co .form-row input[type="tel"],
.avh-co .form-row input[type="password"],
.avh-co .form-row textarea,
.avh-co .form-row select,
.avh-co .select2-container .select2-selection {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--avh-co-line);
	border-radius: 12px;
	background: #fff;
	color: var(--avh-co-ink);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
}

.avh-co .form-row input:focus,
.avh-co .form-row textarea:focus,
.avh-co .form-row select:focus {
	border-color: var(--avh-co-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--avh-co-accent) 25%, transparent);
}

/* Two-up rows, which WooCommerce marks with form-row-first / form-row-last. */
@media (min-width: 560px) {
	.avh-co .form-row-first,
	.avh-co .form-row-last {
		display: inline-flex;
		width: calc(50% - 0.5rem);
	}
	.avh-co .form-row-first {
		margin-right: 1rem;
	}
}

/* --- Order review --------------------------------------------------------------------------- */

.avh-co .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.avh-co .woocommerce-checkout-review-order-table th,
.avh-co .woocommerce-checkout-review-order-table td {
	padding: 0.55rem 0;
	border: 0;
	border-bottom: 1px solid var(--avh-co-line);
	text-align: left;
	vertical-align: top;
}

.avh-co .woocommerce-checkout-review-order-table td:last-child,
.avh-co .woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.avh-co .woocommerce-checkout-review-order-table thead {
	display: none;
}

.avh-co .woocommerce-checkout-review-order-table .order-total th,
.avh-co .woocommerce-checkout-review-order-table .order-total td {
	border-bottom: 0;
	padding-top: 0.9rem;
	font-size: 1rem;
}

.avh-co .woocommerce-checkout-review-order-table .order-total .amount {
	font-family: var(--avh-co-font-heading);
	font-size: 1.3rem;
}

/* --- Payment -------------------------------------------------------------------------------- */

/*
 * EVERY COLOUR IN THIS SECTION IS OPAQUE, AND THAT IS THE POINT.
 *
 * The card fields are not ours and they are not the theme's - they are Stripe's, rendered inside
 * an iframe we cannot reach with a stylesheet. What we CAN reach is the only thing that decides
 * how they look: WooCommerce Stripe builds Stripe's `appearance` object by reading the COMPUTED
 * STYLES off this checkout and copying them in.
 *
 * So our stylesheet is the card form's stylesheet, at one remove, and a value that reads fine here
 * can be unreadable once copied:
 *
 *   - `background: transparent` computes to `rgba(0, 0, 0, 0)`. The alpha is dropped on the way
 *     across and the colour channel is BLACK, so the card panel came back near-black.
 *   - `color-mix(… 60%, transparent)` on the labels is legible on cream and invisible on that
 *     panel. Both halves of the bug, from two declarations that were correct in isolation.
 *
 * Rules: state a real background rather than `transparent`, and never express a muted colour as a
 * partly transparent one here - mix toward the surface instead, which gives the same tone as a
 * solid value that survives being copied.
 *
 * `--avh-co-line` is still mixed toward transparent, deliberately: it is used on every surface in
 * the plugin, and pinning it to the cream would be wrong on the white ones. If a hairline ever
 * comes back black inside the card form, that token is where to look first.
 */

.avh-co #payment {
	margin-top: 1.25rem;
	border-radius: var(--avh-co-radius);
	/* Opaque, so the appearance reader gets a real colour. See the note above. */
	background: var(--avh-co-cream);
}

.avh-co #payment ul.payment_methods {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	list-style: none;
}

.avh-co #payment ul.payment_methods li {
	margin: 0 0 0.5rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--avh-co-line);
	border-radius: 12px;
	background: #fff;
	list-style: none;
}

.avh-co #payment ul.payment_methods li::before,
.avh-co #payment ul.payment_methods li::marker {
	content: none;
}

.avh-co #payment div.payment_box {
	margin: 0.6rem 0 0;
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--avh-co-surface) 45%, var(--avh-co-cream));
	color: color-mix(in srgb, var(--avh-co-ink) 82%, var(--avh-co-cream));
	font-size: 0.85rem;
}

/*
 * Labels inside the payment area, including the ones Stripe redraws from this rule.
 *
 * Solid ink, and darker than the billing labels. A form label sitting beside its own field on a
 * cream page can afford to recede; the same label copied onto a card panel, over a field the
 * shopper is typing a card number into, cannot. Getting this wrong reads as a broken payment form,
 * which is the last place on the site anybody gives the benefit of the doubt.
 */
.avh-co #payment label,
.avh-co #payment .form-row label,
.avh-co #payment .wc-block-components-checkout-step__description {
	color: color-mix(in srgb, var(--avh-co-ink) 78%, var(--avh-co-cream));
}

/*
 * The saved-card and "use a new payment method" rows a gateway prints, and its own field wells.
 * Opaque white for the same reason: these are the elements the appearance reader samples for the
 * card input's own background.
 */
.avh-co #payment .form-row input[type="text"],
.avh-co #payment .form-row input[type="email"],
.avh-co #payment .form-row input[type="tel"],
.avh-co #payment .form-row select {
	background: var(--avh-co-cream);
}

/* WooCommerce draws a little arrow on the payment box with a border trick; it points at the
   wrong place once the box is restyled. */
.avh-co #payment div.payment_box::before {
	content: none;
}

.avh-co #payment .woocommerce-privacy-policy-text {
	/* Opaque, same rule as the rest of this section. */
	color: color-mix(in srgb, var(--avh-co-ink) 62%, var(--avh-co-cream));
	font-size: 0.78rem;
}

/* --- Buttons -------------------------------------------------------------------------------- */

.avh-co .avh-co__button,
.avh-co .checkout-button,
.avh-co #place_order,
.avh-co .button:not(.avh-co__button--ghost) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--avh-co-ink);
	border-radius: 999px;
	background: var(--avh-co-ink);
	color: var(--avh-co-cream);
	font-family: inherit;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms var(--avh-co-ease), border-color 200ms var(--avh-co-ease);
}

.avh-co .checkout-button,
.avh-co #place_order {
	width: 100%;
	margin-top: 0.5rem;
}

.avh-co .avh-co__button:hover,
.avh-co .checkout-button:hover,
.avh-co #place_order:hover,
.avh-co .button:not(.avh-co__button--ghost):hover {
	background: var(--avh-co-accent);
	border-color: var(--avh-co-accent);
	color: #fff;
}

.avh-co .avh-co__button--ghost {
	background: transparent;
	color: var(--avh-co-ink);
}

.avh-co .avh-co__button--ghost:hover {
	background: var(--avh-co-ink);
	border-color: var(--avh-co-ink);
	color: var(--avh-co-cream);
}

.avh-co__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

/* The update-cart button, hidden once the script can update on change. */
.avh-co__update[hidden] {
	display: none !important;
}

/* --- Empty cart ----------------------------------------------------------------------------- */

.avh-co__empty {
	margin-top: 2.5rem;
	padding: 3.5rem 2rem;
	border: 1px dashed var(--avh-co-line);
	border-radius: var(--avh-co-radius);
	text-align: center;
}

.avh-co__empty svg {
	color: color-mix(in srgb, var(--avh-co-ink) 20%, transparent);
}

.avh-co__empty p {
	max-width: 26rem;
	margin: 0.5rem auto 1.75rem;
	color: color-mix(in srgb, var(--avh-co-ink) 60%, transparent);
}

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

.avh-co__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1rem;
	border-radius: 999px;
	background: color-mix(in srgb, #2f7d54 12%, transparent);
	color: #1d5c3a;
}

.avh-co__receipt {
	display: grid;
	gap: 1.25rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	margin: 2rem 0 0;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--avh-co-line);
	border-radius: var(--avh-co-radius);
	background: var(--avh-co-cream);
	list-style: none;
}

/*
 * The list keeps WooCommerce's own classes (woocommerce-order-overview, -thankyou-order-details,
 * order_details) so snippets that target them still work - which hands the theme the same hooks.
 * Blocksy forces a two-column grid on `.woocommerce-thankyou-order-details` and draws a padded,
 * bordered box round every item, so five items left an empty sixth box; WooCommerce floats
 * `ul.order_details li` and adds clearfix pseudo-elements, which become stray GRID ITEMS. Undone
 * here at doubled class specificity rather than !important.
 */
.avh-co .avh-co__receipt.avh-co__receipt {
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	/* Blocksy also sets padding: 0 / margin-bottom on this class, loaded after us (seen live). */
	margin: 2rem 0 0;
	padding: 1.5rem 1.75rem;
}

.avh-co .avh-co__receipt.avh-co__receipt::before,
.avh-co .avh-co__receipt.avh-co__receipt::after {
	content: none;
	display: none;
}

.avh-co .avh-co__receipt.avh-co__receipt li {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: 1.4;
	text-transform: none;
	list-style: none;
}

.avh-co__receipt li::before,
.avh-co__receipt li::marker {
	content: none;
}

/* The LABEL only. Was `.avh-co__receipt span`, which also caught the two spans WooCommerce wraps a
   price in - so the total rendered as a tiny, faint, uppercase label with the symbol on its own line. */
.avh-co__receipt .avh-co__receipt-label {
	display: block;
	color: color-mix(in srgb, var(--avh-co-ink) 55%, var(--avh-co-cream));
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.avh-co .avh-co__receipt strong {
	display: block;
	margin-top: 0.3rem;
	color: var(--avh-co-ink);
	font-family: var(--avh-co-font-heading);
	font-size: 1.05rem;
	font-weight: 400;
	/* A long email address wraps instead of running out of its column. */
	overflow-wrap: anywhere;
}

/* Everything inside the total (Woo's amount + currency-symbol spans, <bdi>) reads as one value. */
.avh-co .avh-co__receipt strong * {
	display: inline;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.avh-co .avh-co__receipt .avh-co__receipt-total {
	font-size: 1.2rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* WooCommerce's order table and addresses below, in the storefront's type rather than the theme's. */
.avh-co--thankyou h2,
.avh-co--thankyou h3 {
	color: var(--avh-co-ink);
	font-family: var(--avh-co-font-heading);
	font-weight: 400;
}

/* --- Order details + addresses on the order-received page ----------------------------------- */

/*
 * WooCommerce's own markup (order/order-details.php, order-details-customer.php), kept whole -
 * gateways and plugins hook into it - and dressed as two cards. Blocksy's dashed table rows and
 * dashed address box are undone; everything is scoped to the order-received page.
 */
.avh-co--thankyou .woocommerce-order-details,
.avh-co--thankyou .woocommerce-customer-details {
	margin: 2.5rem 0 0;
	padding: 1.5rem 1.75rem 1.25rem;
	border: 1px solid var(--avh-co-line);
	border-radius: var(--avh-co-radius);
	background: #fff;
}

.avh-co--thankyou .woocommerce-customer-details {
	margin-top: 1.25rem;
}

.avh-co--thankyou .woocommerce-order-details__title,
.avh-co--thankyou .woocommerce-column__title {
	margin: 0 0 0.75rem;
	color: var(--avh-co-ink);
	font-size: 1.35rem;
	line-height: 1.25;
}

.avh-co--thankyou table.order_details.order_details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 0.95rem;
}

.avh-co--thankyou table.order_details.order_details th,
.avh-co--thankyou table.order_details.order_details td {
	padding: 0.85rem 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--avh-co-ink) 10%, #fff);
	background: transparent;
	color: var(--avh-co-ink);
	text-align: left;
	vertical-align: middle;
}

.avh-co--thankyou table.order_details.order_details .product-total,
.avh-co--thankyou table.order_details.order_details tfoot td {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.avh-co--thankyou table.order_details.order_details thead th {
	padding-top: 0.25rem;
	color: color-mix(in srgb, var(--avh-co-ink) 55%, #fff);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* A line: photo, name, quantity, any item meta (variation, etc.). */
/* Floated, so a long name wraps BESIDE the photo rather than under it (a table cell contains its floats). */
.avh-co--thankyou .order_details .avh-co__line-thumb {
	float: left;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 0.85rem 0 0;
	overflow: hidden;
	border-radius: 0.6rem;
	background: var(--avh-co-cream);
}

.avh-co--thankyou .order_details .avh-co__line-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.avh-co--thankyou .order_details .avh-co__line-name,
.avh-co--thankyou .order_details .avh-co__line-name a {
	color: var(--avh-co-ink);
	font-weight: 500;
	text-decoration: none;
	line-height: 1.45;
}

.avh-co--thankyou .order_details .avh-co__line-name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.avh-co--thankyou .order_details .product-quantity {
	color: color-mix(in srgb, var(--avh-co-ink) 55%, #fff);
	font-weight: 400;
}

.avh-co--thankyou .order_details .wc-item-meta {
	margin: 0.35rem 0 0;
	padding: 0;
	color: color-mix(in srgb, var(--avh-co-ink) 60%, #fff);
	font-size: 0.82rem;
	list-style: none;
}

.avh-co--thankyou .order_details .wc-item-meta li,
.avh-co--thankyou .order_details .wc-item-meta p {
	display: inline;
	margin: 0 0.75rem 0 0;
}

/* Totals: labels quiet, the grand total (WooCommerce prints it last) clearly the answer. */
.avh-co--thankyou table.order_details.order_details tfoot th {
	color: color-mix(in srgb, var(--avh-co-ink) 65%, #fff);
	font-weight: 400;
}

.avh-co--thankyou table.order_details.order_details tfoot tr:last-child th,
.avh-co--thankyou table.order_details.order_details tfoot tr:last-child td {
	padding-top: 1rem;
	border-bottom: 0;
	color: var(--avh-co-ink);
	font-size: 1.1rem;
	font-weight: 600;
}

.avh-co--thankyou table.order_details.order_details tfoot small {
	color: color-mix(in srgb, var(--avh-co-ink) 55%, #fff);
	font-size: 0.78rem;
	font-weight: 400;
}

/* Addresses: plain text in the card, side by side when there is a shipping address too. */
.avh-co--thankyou .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--avh-co-ink);
	font-size: 0.95rem;
	font-style: normal;
	line-height: 1.7;
}

.avh-co--thankyou .woocommerce-customer-details address p {
	margin: 0.35rem 0 0;
	padding: 0;
	color: color-mix(in srgb, var(--avh-co-ink) 70%, #fff);
}

.avh-co--thankyou .woocommerce-customer-details .addresses {
	display: grid;
	gap: 1.5rem 2.5rem;
	margin: 0;
}

.avh-co--thankyou .woocommerce-customer-details .addresses::before,
.avh-co--thankyou .woocommerce-customer-details .addresses::after {
	content: none;
	display: none;
}

.avh-co--thankyou .woocommerce-customer-details .addresses .col-1,
.avh-co--thankyou .woocommerce-customer-details .addresses .col-2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.avh-co--thankyou .woocommerce-customer-details .addresses {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.avh-co--thankyou .woocommerce-order-details,
	.avh-co--thankyou .woocommerce-customer-details {
		padding: 1.25rem 1.1rem 1rem;
	}
}

/* --- Pay for order (Paystack's page) ------------------------------------------------------ */

.avh-co__lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--avh-co-accent) 16%, var(--avh-co-cream));
	color: var(--avh-co-ink);
}

.avh-co .avh-co__lede {
	max-width: 34rem;
	margin: 0.75rem auto 0;
	color: color-mix(in srgb, var(--avh-co-ink) 70%, var(--avh-co-cream));
	font-size: 0.95rem;
	line-height: 1.6;
}

/*
 * The gateway's own markup (Paystack: a sentence, a form, "Pay Now" and "Cancel order & restore
 * cart"). Restyled in place, never rebuilt - its script opens the payment window from these.
 */
.avh-co .avh-co__gateway {
	margin: 1.5rem 0 0;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--avh-co-line);
	border-radius: var(--avh-co-radius);
	background: #fff;
	color: var(--avh-co-ink);
	text-align: center;
}

.avh-co .avh-co__gateway p {
	margin: 0 0 1rem;
	color: var(--avh-co-ink);
	font-size: 0.95rem;
}

.avh-co .avh-co__gateway form:empty {
	display: none;
}

.avh-co .avh-co__gateway .button,
.avh-co .avh-co__gateway button,
.avh-co .avh-co__gateway input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin: 0.35rem;
	padding: 0.8rem 1.75rem;
	border: 1px solid var(--avh-co-ink);
	border-radius: 999px;
	background: var(--avh-co-ink);
	box-shadow: none;
	color: #fff;
	font-family: var(--avh-co-font-body, inherit);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.avh-co .avh-co__gateway .button:hover,
.avh-co .avh-co__gateway button:hover {
	background: color-mix(in srgb, var(--avh-co-ink) 86%, #fff);
}

/* "Cancel order & restore cart" is the way out, not the way forward. */
.avh-co .avh-co__gateway .button.cancel,
.avh-co .avh-co__gateway a.cancel {
	border-color: var(--avh-co-line);
	background: transparent;
	color: var(--avh-co-ink);
}

.avh-co .avh-co__gateway .button.cancel:hover,
.avh-co .avh-co__gateway a.cancel:hover {
	border-color: var(--avh-co-ink);
	background: transparent;
}

/* --- Keeping the theme out of it ------------------------------------------------------------- */

/*
 * Themes place the icon on a WooCommerce notice in an ABSOLUTELY positioned ::before, which lands
 * on top of the first word - on this shop that turned "No saved methods found." into
 * "[bell] saved methods found.", inverting the sentence. The `position: static` is the half that
 * matters; removing the icon is tidiness, since these notices carry their own accent border.
 */
body.avh-co-active .woocommerce-message,
body.avh-co-active .woocommerce-error,
body.avh-co-active .woocommerce-info,
body.avh-co-active .woocommerce-notice {
	position: static;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.15rem;
	border: 0;
	border-left: 3px solid var(--avh-co-accent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--avh-co-surface) 45%, transparent);
	color: var(--avh-co-ink);
	font-size: 0.92rem;
	list-style: none;
}

body.avh-co-active .woocommerce-error {
	border-left-color: #b3261e;
	background: color-mix(in srgb, #b3261e 8%, transparent);
}

body.avh-co-reset .woocommerce-message::before,
body.avh-co-reset .woocommerce-message::after,
body.avh-co-reset .woocommerce-error::before,
body.avh-co-reset .woocommerce-error::after,
body.avh-co-reset .woocommerce-info::before,
body.avh-co-reset .woocommerce-info::after {
	content: none !important;
	display: none !important;
}

/* --- Utility -------------------------------------------------------------------------------- */

.avh-co .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.avh-co a:focus-visible,
.avh-co button:focus-visible,
.avh-co input:focus-visible,
.avh-co summary:focus-visible {
	outline: 2px solid var(--avh-co-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.avh-co__progress-track > span,
	.avh-co .avh-co__button,
	.avh-co #place_order {
		transition: none;
	}
}

/* --- Delivery & Origins ---------------------------------------------------------------------- */

/*
 * Everything below only ever appears when AverionHair Delivery & Origins has split the cart -
 * which happens because the items are held in different countries. On a single-warehouse shop none
 * of this markup is emitted at all.
 *
 * COLOURS ARE STATED, NEVER INHERITED, and mixed toward the cream rather than toward transparent.
 * The checkout's payment section taught this the hard way: WooCommerce Stripe builds Stripe's
 * `appearance` object by reading the computed styles off this page, and a colour mixed toward
 * transparent survives that copy as its own colour channel - which is black.
 */

.avh-co__shipments {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--avh-co-line);
	border-radius: var(--avh-co-radius);
	background: color-mix(in srgb, var(--avh-co-surface) 45%, var(--avh-co-cream));
	color: var(--avh-co-ink);
	font-family: var(--avh-co-font-body);
}

.avh-co__shipments svg {
	flex: 0 0 auto;
	margin-top: 0.15rem;
	color: var(--avh-co-accent);
}

.avh-co__shipments p {
	margin: 0;
	color: color-mix(in srgb, var(--avh-co-ink) 78%, var(--avh-co-cream));
	font-size: 0.85rem;
	line-height: 1.5;
}

.avh-co__shipments strong {
	display: block;
	color: var(--avh-co-ink);
	font-weight: 500;
}

/*
 * The per-line origin. A block rather than an inline run, because it is appended to the product
 * NAME - and WooCommerce prints that name inside a link on the cart and inside a table cell on the
 * order review, so an inline span would run straight on from the title in both.
 */
.avh-co__line-origin {
	display: block;
	margin-top: 0.2rem;
	color: color-mix(in srgb, var(--avh-co-ink) 55%, var(--avh-co-cream));
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* It is appended inside the <a>, so it must not be underlined with the product name. */
.avh-co__line a .avh-co__line-origin,
.woocommerce-checkout-review-order a .avh-co__line-origin {
	text-decoration: none;
}

/*
 * More than one shipping package.
 *
 * WooCommerce prints a <th> carrying the package name only when there are several, and the origins
 * plugin fills that with "Shipment 1 of 2 - from Nigeria". Untouched it is a bare table heading in
 * the middle of the totals; these rules make it read as the start of a group.
 */
.avh-co__summary .shipping th,
.woocommerce-checkout-review-order-table .shipping th {
	color: var(--avh-co-ink);
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.35;
}

.avh-co__summary tr.shipping + tr.shipping th,
.woocommerce-checkout-review-order-table tr.shipping + tr.shipping th {
	padding-top: 0.85rem;
	border-top: 1px dashed var(--avh-co-line);
}

/* The origins plugin's own sentence under a chosen rate. */
.avh-co__summary .avh-sh-note,
.woocommerce-checkout-review-order-table .avh-sh-note {
	margin: 0.25rem 0 0;
	color: color-mix(in srgb, var(--avh-co-ink) 60%, var(--avh-co-cream));
	font-size: 0.78rem;
	line-height: 1.45;
	opacity: 1; /* Its inline opacity is fine on white and too faint on our cream panel. */
}

@media (max-width: 480px) {
	.avh-co__shipments {
		padding: 0.75rem 0.9rem;
	}
}