/**
 * Haat — WooCommerce layer.
 *
 * Loaded only when WooCommerce is active. Overrides WooCommerce's own stylesheet
 * rather than replacing it: WooCommerce's CSS carries functional rules (the
 * variation form state, the blockUI overlay, the password strength meter) that a
 * theme must not remove, so this file restyles the presentational parts and
 * leaves the machinery alone.
 *
 * @package Haat
 */

/* ── Shop toolbar ────────────────────────────────────────────────────────*/
.haat-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 0.85rem 1rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
}

.haat-shop-toolbar__left,
.haat-shop-toolbar__right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.haat-shop-toolbar__filters {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	background: transparent;
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-md );
	color: inherit;
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-semibold );
}

@media ( max-width: 959px ) {
	.haat-shop-toolbar__filters {
		display: inline-flex;
	}
}

.haat-shop-toolbar__filter-icon,
.haat-shop-toolbar__filter-icon::before,
.haat-shop-toolbar__filter-icon::after {
	display: block;
	width: 14px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	content: "";
}

.haat-shop-toolbar__filter-icon::before { width: 10px; transform: translateY( -5px ); }
.haat-shop-toolbar__filter-icon::after { width: 6px; transform: translateY( 3px ); }

/* `.woocommerce` is in the selector to match WooCommerce's own
 * `.woocommerce .woocommerce-result-count`, which sets `margin: 0 0 1em`. The
 * shorter selector here scored 0-1-0 against its 0-2-0 and lost, so the count
 * kept a 14px bottom margin that pushed it off the baseline of the sorting
 * select beside it. */
.woocommerce .woocommerce-result-count,
.woocommerce-result-count {
	margin: 0;
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

/*
 * The wrapper's margin, not the select's.
 *
 * WooCommerce sets `.woocommerce .woocommerce-ordering { margin: 0 0 1em }`,
 * and the theme only ever styled the select inside it -- so the wrapper kept a
 * 16px bottom margin inside a flex toolbar that centres its items. The select
 * sat 15px from the top of the bar and 31px from the bottom, and the bar itself
 * was 84px tall for a 39px control.
 *
 * `.woocommerce` is in the selector to match WooCommerce's own 0-2-0. This is
 * the same trap as the result count directly above, and golden rules 15 and 16:
 * restyling a WooCommerce element means matching the prefix it ships with.
 */
.woocommerce .woocommerce-ordering,
.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	width: auto;
	min-width: 12rem;
	padding-block: 0.5rem;
	font-size: var( --haat-text-sm );
}

/* ── Product grid ────────────────────────────────────────────────────────
 * WooCommerce ships a float-based grid with percentage widths and a clearfix.
 * Left in place it fights the theme's CSS grid and produces a first row of
 * correctly sized cards followed by rows that drift. The float has to go for
 * grid to take over at all. */
.woocommerce ul.products {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

@media ( max-width: 767px ) {
	.woocommerce ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0.75rem;
	}
}

/* WooCommerce's own column classes still land on the list. Honouring them keeps
 * the Customizer column setting working, since loop_shop_columns feeds them. */
.woocommerce ul.products.columns-2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }

@media ( max-width: 767px ) {
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ── The card add-to-cart, as an icon ────────────────────────────────────
 * content-product.php fires woocommerce_after_shop_loop_item inside the action
 * stack, so this IS the real WooCommerce button — AJAX behaviour, variable
 * product handling and all — wearing an icon.
 *
 * Hiding the label is safe because WooCommerce already puts the full
 * description on the button as an aria-label ("Add ... to your cart"), so the
 * accessible name survives. Without that aria-label this would be an unlabelled
 * button and the text would have to stay.
 *
 * The compound selector li.product.haat-product-card, with no space, matters:
 * the card template puts both classes on the same <li>, so a descendant
 * selector matches nothing and the global solid-accent button wins instead.
 */
.haat-product-card__actions .button,
.haat-product-card__actions .add_to_cart_button,
.woocommerce ul.products li.product.haat-product-card .haat-product-card__actions a.button,
.woocommerce-page ul.products li.product.haat-product-card .haat-product-card__actions a.button {
	position: relative;
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: var( --haat-surface );
	color: var( --haat-foreground );
	border: 1px solid transparent;
	border-radius: var( --haat-radius-full );
	box-shadow: var( --haat-shadow-soft );
	font-size: 0;
	line-height: 0;
	transition: background var( --haat-duration-fast ) var( --haat-ease-out ),
		color var( --haat-duration-fast ) var( --haat-ease-out );
}

/* Centred by absolute placement rather than by grid.
 *
 * The button still contains WooCommerce's label text, which grid promotes to a
 * second anonymous grid item — so the icon was laid out in row one and pushed
 * off centre by a text node that is invisible but not absent. Absolute
 * placement ignores the text, the padding and the line-height entirely, which
 * is what this needs given the label cannot be wrapped in an element. */
.haat-product-card__actions .button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 1.05rem;
	height: 1.05rem;
	background: currentColor;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E" );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* An out-of-stock product's button is WooCommerce's "Read more" — a link to the
 * product page. It carries no add-to-cart class, so it fell through to the cart
 * glyph and the card offered a purchase it cannot make. A view icon says what
 * the button actually does. */
.haat-product-card.outofstock .haat-product-card__actions .button::before {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E" );
}

/* A variable product's button is a link to the product page, not an add — so it
 * gets an options icon rather than a cart. A cart glyph that navigates instead
 * of adding is a small lie the shopper only discovers after clicking. */
.haat-product-card__actions .product_type_variable::before,
.haat-product-card__actions .product_type_grouped::before,
.haat-product-card__actions .product_type_external::before {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E" );
}

.woocommerce ul.products li.product.haat-product-card .haat-product-card__actions a.button:hover,
.haat-product-card__actions .button:hover {
	background: var( --haat-primary );
	color: var( --haat-primary-foreground );
}

.haat-product-card__actions .button.loading::before {
	opacity: 0.4;
}

/* WooCommerce appends a "View cart" link after a successful AJAX add. In a
 * 2rem icon stack it has nowhere to go, and the cart drawer already opens on
 * the same event, so it would be a second route to a panel that is on screen. */
.haat-product-card__actions .added_to_cart {
	display: none;
}

/* ── Sale flash ──────────────────────────────────────────────────────────
 * WooCommerce styles span.onsale as an absolutely positioned circle pulled
 * outside its parent with negative margins. The theme prints that same element
 * inside .haat-card__badges, which is already positioned — so the negative
 * margins push it past the card edge, where the card's own overflow:hidden
 * clips it in half, and it lands on top of the badge stacked below it.
 *
 * Inside the badge stack it becomes an ordinary static pill and the stack does
 * the positioning. On the single product page there is no stack, so it keeps
 * absolute positioning but as a pill in the gallery corner rather than a circle
 * hanging off it. */
.haat-card__badges .onsale,
.woocommerce ul.products li.product .haat-card__badges .onsale,
.woocommerce-page ul.products li.product .haat-card__badges .onsale {
	/* The second and third selectors exist purely to outrank WooCommerce's own
	 * `.woocommerce ul.products li.product .onsale`, which is three classes and
	 * two elements. A single-class rule loses to it on archive pages while
	 * winning on the front page, where that ancestor chain is absent — so the
	 * same badge rendered correctly on the storefront and clipped in the shop. */
	position: static;
	top: auto;
	left: auto;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.2rem 0.55rem;
	border-radius: var( --haat-radius-full );
	background: var( --haat-foreground );
	color: var( --haat-background );
	font-size: var( --haat-text-xs );
	font-weight: var( --haat-weight-bold );
	line-height: 1.5;
}

.woocommerce div.product .onsale {
	position: absolute;
	z-index: 2;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: var( --haat-radius-full );
	background: var( --haat-flame-500 );
	color: var( --haat-primary-foreground );
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-bold );
	line-height: 1.4;
}

/* ── Buttons ─────────────────────────────────────────────────────────────*/
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	padding: 0.75rem 1.5rem;
	background: var( --haat-primary );
	color: var( --haat-primary-foreground );
	border: 0;
	border-radius: var( --haat-radius-md );
	font-weight: var( --haat-weight-semibold );
	font-size: var( --haat-text-sm );
	line-height: 1.2;
	transition: background var( --haat-duration-fast ) var( --haat-ease-out );
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var( --haat-flame-600 );
	color: var( --haat-primary-foreground );
}

.woocommerce .button.alt,
.woocommerce button.button.alt {
	background: var( --haat-primary );
	color: var( --haat-primary-foreground );
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
	background: var( --haat-muted );
	color: var( --haat-muted-foreground );
	cursor: not-allowed;
}

/* ── Notices ─────────────────────────────────────────────────────────────*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-left: 4px solid var( --haat-primary );
	border-radius: var( --haat-radius-md );
	list-style: none;
	font-size: var( --haat-text-sm );
}

.woocommerce-message { border-left-color: var( --haat-success ); }
.woocommerce-info { border-left-color: var( --haat-accent ); }
.woocommerce-error { border-left-color: var( --haat-destructive ); }

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

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 0.5rem 1rem;
}

/* ── Single product ──────────────────────────────────────────────────────*/
.single-product div.product {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 900px ) {
	.single-product div.product {
		grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr );
		align-items: start;
	}

	/* Everything after the gallery and the summary spans the full width:
	 * the tabs, upsells and related products are their own bands, not a third
	 * column beside the buy box. */
	.single-product div.product > .woocommerce-tabs,
	.single-product div.product > .upsells,
	.single-product div.product > .related,
	.single-product div.product > .product_meta {
		grid-column: 1 / -1;
	}
}

/* WooCommerce lays the single-product page out with floats and percentage
 * widths: div.images is width:48%;float:left and div.summary is the matching
 * 48% beside it. Inside the CSS grid above, those percentages resolve against
 * the GRID COLUMN rather than the page, so the gallery renders at roughly half
 * the width it was given and the summary sits in a column it no longer fills.
 * Both have to be reset to full width for the grid to own the layout. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product div.woocommerce-product-gallery {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images img {
	width: 100%;
	border-radius: var( --haat-radius-lg );
}

/* The zoom trigger is absolutely positioned against the gallery, so the gallery
 * needs to be the positioned ancestor or the magnifier lands in the page
 * corner on some screen widths. */
.woocommerce div.product div.woocommerce-product-gallery {
	position: relative;
}

.woocommerce div.product div.images .flex-control-thumbs {
	/* flexslider styles this as .flex-control-nav, which it positions
	 * absolutely over the bottom of the slide. Left alone the thumbnails sit on
	 * top of the main image as a row of tiny chips instead of below it. */
	position: static;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/*
 * `div.images` is in this selector to match WooCommerce's own.
 *
 * Its rule is `.woocommerce div.product div.images .flex-control-thumbs li`,
 * which sets `width: 25%; float: left`. The shorter selector used here before
 * lost to it on specificity (0-3-2 against 0-4-3), so every thumbnail rendered
 * at a QUARTER of its grid cell -- a row of ~29px chips, which is what the
 * gallery actually looked like however the grid above was configured. A grid
 * cell is already the width; the item only has to fill it.
 */
.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	/* flexslider also writes its own measurement onto the thumbs, which is
	 * meaningless once the row is laid out by grid rather than by floats. */
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var( --haat-muted );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-md );
	cursor: pointer;
	opacity: 0.65;
	transition: opacity var( --haat-duration-fast ) var( --haat-ease-out ),
		border-color var( --haat-duration-fast ) var( --haat-ease-out );
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var( --haat-primary );
}

/* ── Gallery arrows ────────────────────────────────────────*/
.woocommerce div.product div.images .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-direction-nav a {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -1.25rem;
	/* The label is for assistive technology only. flexslider puts real text in
	 * the anchor, so it is hidden by size rather than by display:none, which
	 * would take it out of the accessibility tree as well. */
	overflow: hidden;
	text-indent: -999em;
	white-space: nowrap;
	background: var( --haat-background );
	border: 1px solid var( --haat-border );
	border-radius: 50%;
	box-shadow: var( --haat-shadow-md );
	opacity: 0;
	transition: opacity var( --haat-duration-base ) var( --haat-ease-out ),
		background-color var( --haat-duration-base ) var( --haat-ease-out );
}

/*
 * Revealed on hover, but never on a touch screen -- where there is no hover to
 * reveal them with, and a swipe already works. `any-hover` asks about the
 * primary pointer, so a laptop with a touchscreen still gets them.
 */
@media ( any-hover: hover ) {
	.woocommerce div.product div.images:hover .flex-direction-nav a,
	.woocommerce div.product div.images .flex-direction-nav a:focus-visible {
		opacity: 1;
	}
}

@media ( any-hover: none ) {
	.woocommerce div.product div.images .flex-direction-nav a {
		opacity: 1;
	}
}

.woocommerce div.product div.images .flex-direction-nav a:hover {
	background: var( --haat-surface );
	border-color: var( --haat-primary );
}

.woocommerce div.product div.images .flex-direction-nav a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid var( --haat-foreground );
	border-right: 2px solid var( --haat-foreground );
	content: "";
}

.woocommerce div.product div.images .flex-direction-nav .flex-prev {
	inset-inline-start: 0.75rem;
}

.woocommerce div.product div.images .flex-direction-nav .flex-next {
	inset-inline-end: 0.75rem;
}

/*
 * The chevrons are drawn with borders and rotated, and rtlcss DOES flip both
 * the translate and the rotate when it generates woocommerce-rtl.css -- so
 * there is deliberately no hand-written [dir="rtl"] override here.
 *
 * Writing one was tried and made RTL worse, not better: rtlcss processes the
 * whole file, so it flipped the manual override as well, and the doubly-
 * flipped rule then beat the correctly-flipped base rule on specificity. When
 * the generator already handles a property, adding a manual override means
 * fighting it. (This is the exception to golden rule 11: that rule is about
 * transforms written from JAVASCRIPT, which rtlcss genuinely cannot reach. A
 * transform sitting in a stylesheet is reachable and is already handled.)
 */
.woocommerce div.product div.images .flex-direction-nav .flex-prev::after {
	transform: translate( -30%, -50% ) rotate( -135deg );
}

.woocommerce div.product div.images .flex-direction-nav .flex-next::after {
	transform: translate( -70%, -50% ) rotate( 45deg );
}

.woocommerce div.product .product_title {
	font-size: var( --haat-text-4xl );
}

/* Same rule as the card: the price is ink, and the SALE price is the part that
 * earns the accent. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --haat-foreground );
	font-size: var( --haat-text-3xl );
	font-weight: var( --haat-weight-bold );
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var( --haat-flame-600 );
}

.woocommerce div.product p.price del {
	margin-right: 0.5rem;
	color: var( --haat-muted-foreground );
	font-size: var( --haat-text-xl );
	font-weight: var( --haat-weight-normal );
}

.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin-block: 1.5rem;
}

.woocommerce div.product form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var( --haat-input );
	border-radius: var( --haat-radius-md );
	overflow: hidden;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 4rem;
	border: 0;
	border-radius: 0;
	text-align: center;
}

.woocommerce div.product form.cart .quantity .qty:focus {
	box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 14rem;
	padding-block: 0.9rem;
	font-size: var( --haat-text-base );
	box-shadow: var( --haat-shadow-glow );
}

/* A variable product's cart form stacks: the variation table needs the full
 * width, and the add-to-cart row sits under it. */
.woocommerce div.product form.variations_form {
	display: block;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 1rem;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 0.4rem 0;
	border: 0;
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	font-size: var( --haat-text-sm );
}

.haat-product-assurance {
	display: grid;
	gap: 0.5rem;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	list-style: none;
	background: var( --haat-muted );
	border-radius: var( --haat-radius-lg );
	font-size: var( --haat-text-sm );
}

.haat-product-assurance__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.haat-product-assurance__tick {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	background: var( --haat-success );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E" );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.woocommerce div.product .product_meta {
	padding-top: 1.25rem;
	border-top: 1px solid var( --haat-border );
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

/* ── Product tabs ────────────────────────────────────────────────────────*/
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid var( --haat-border );
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 1.15rem;
	color: var( --haat-muted-foreground );
	font-weight: var( --haat-weight-semibold );
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --haat-primary );
	border-bottom-color: var( --haat-primary );
}

/* ── Cart ────────────────────────────────────────────────────────────────*/
.woocommerce table.shop_table {
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1rem;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: 1px solid var( --haat-border );
}

.woocommerce table.shop_table thead th {
	background: var( --haat-muted );
	font-size: var( --haat-text-sm );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce table.cart img {
	width: 4rem;
	border-radius: var( --haat-radius-md );
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 1.5rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: var( --haat-text-xl );
}

/* ── Checkout ────────────────────────────────────────────────────────────*/
.woocommerce-checkout .col2-set {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 768px ) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: auto;
	float: none;
}

.woocommerce form .form-row {
	margin-bottom: 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-medium );
}

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

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var( --haat-radius-lg );
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var( --haat-border );
	list-style: none;
}

.woocommerce-checkout #payment div.form-row {
	padding: 1.25rem 0 0;
}

/* ── My account ──────────────────────────────────────────────────────────*/
.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: var( --haat-radius-md );
	color: var( --haat-foreground );
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-medium );
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var( --haat-flame-50 );
	color: var( --haat-flame-700 );
	text-decoration: none;
}

@media ( min-width: 768px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 15rem;
		margin-right: 2.5rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		overflow: hidden;
		width: auto;
		float: none;
	}
}

/* ── Mini cart ───────────────────────────────────────────────────────────*/
/*
 * Laid out as a block with the thumbnail lifted out of flow, NOT as a flex row.
 *
 * The markup is <a><img><span class="product-title"></a> followed by the rating
 * and then whatever get_price_html() returns -- which for a variable product is
 * two <span class="amount"> and a bare en-dash text node between them. As a
 * flex row every one of those became its own column, so the title, the stars
 * and both halves of the price sat side by side and wrapped into each other.
 * Taking the image out of flow lets the rest stay ordinary inline content, so
 * any price markup flows correctly without the CSS having to know its shape.
 */
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
	position: relative;
	display: block;
	min-height: 3.25rem;
	padding: 0.85rem 0 0.85rem 4rem;
	border-bottom: 1px solid var( --haat-border );
	font-size: var( --haat-text-sm );
}

.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
	position: absolute;
	top: 0.85rem;
	inset-inline-start: 0;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	object-fit: cover;
	background: var( --haat-muted );
	border-radius: var( --haat-radius-md );
	float: none;
}

.woocommerce ul.product_list_widget li > a {
	display: block;
	font-weight: var( --haat-weight-medium );
	color: var( --haat-foreground );
}

.woocommerce ul.product_list_widget li .star-rating {
	float: none;
	margin: 0.3rem 0;
	font-size: 0.7em;
	color: var( --haat-foreground );
}

.woocommerce ul.product_list_widget li .woocommerce-Price-amount {
	font-weight: var( --haat-weight-bold );
	color: var( --haat-foreground );
}

/* <ins> carries a browser underline, which on a price reads as a link. The
 * sale price is already distinguished by the struck-through original next to
 * it, so the rule is noise. */
.woocommerce ul.product_list_widget li ins {
	background: none;
	text-decoration: none;
}

.woocommerce ul.product_list_widget li del {
	opacity: 0.6;
}

.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
	padding: 1rem 0;
	border-top: 1px solid var( --haat-border );
	font-size: var( --haat-text-base );
}

.woocommerce .widget_shopping_cart .buttons {
	display: grid;
	gap: 0.5rem;
}

.woocommerce .widget_shopping_cart .buttons a {
	width: 100%;
	text-align: center;
}

/* The mini-cart "continue shopping" button is secondary to checkout, so it
 * reads as the quieter of the pair rather than as a second primary CTA. */
.woocommerce .widget_shopping_cart .buttons a:not( .checkout ) {
	background: transparent;
	color: var( --haat-foreground );
	border: 1px solid var( --haat-border );
}

/* ── Vendor stores ───────────────────────────────────────────────────────
 * See inc/compat/dokan.php and inc/compat/wcfm.php. Only layout and chrome —
 * the vendor plugins keep every functional rule of their own. */
.haat-vendor-store__wrap {
	padding-block: 2rem;
}

.haat-vendor-store .dokan-store-tabs ul,
.haat-vendor-store .wcfm_store_tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var( --haat-border );
}

.haat-vendor-store .dokan-store-tabs ul li a,
.haat-vendor-store .wcfm_store_tabs ul li a {
	display: block;
	padding: 0.75rem 1.15rem;
	color: var( --haat-muted-foreground );
	font-weight: var( --haat-weight-semibold );
	border-bottom: 2px solid transparent;
}

.haat-vendor-store .dokan-store-tabs ul li.active a,
.haat-vendor-store .wcfm_store_tabs ul li.active a {
	color: var( --haat-primary );
	border-bottom-color: var( --haat-primary );
}

/* ── Product reviews ─────────────────────────────────────────────────────
 *
 * WooCommerce's own reviews, styled by the theme.
 *
 * Deliberately NOT delegated to a reviews plugin. wordpress.org rejects a theme
 * that needs one, and reviews are WooCommerce's data (comments plus a rating
 * meta) rather than the theme's -- so rendering them is theme work and storing
 * them is not. A plugin that replaces the tab brings its own markup; that is
 * what inc/compat/ is for.
 */
.woocommerce #reviews #comments ol.commentlist {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: grid;
	/* Avatar column, then everything else. The stock template floats the avatar
	 * out of the text, which leaves a review longer than the avatar wrapping
	 * back underneath it in a ragged L. */
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 1rem;
	padding: 1.25rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	background: var( --haat-muted );
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* The stock template puts the author, the verified flag, the dash and the date
 * in one <p>, so they need to be a row that can wrap rather than a paragraph. */
.woocommerce #reviews #comments ol.commentlist li .comment-text .meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__author {
	font-size: var( --haat-text-base );
	font-weight: var( --haat-weight-bold );
	color: var( --haat-foreground );
}

/*
 * "Verified owner" is the one claim in a review a shopper cannot make for
 * themselves, so it reads as a badge rather than as an aside in brackets. It is
 * the only accent in the block: the stars are information and take ink, in
 * keeping with golden rule 14, and a wall of accent stars would drown this out.
 */
.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__verified {
	padding: 0.1rem 0.45rem;
	font-size: var( --haat-text-xs );
	font-style: normal;
	font-weight: var( --haat-weight-medium );
	color: var( --haat-primary );
	background: color-mix( in oklab, var( --haat-primary ) 10%, transparent );
	border-radius: var( --haat-radius-sm );
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__dash {
	display: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description {
	color: var( --haat-foreground );
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child {
	margin-bottom: 0;
}

/* The rating sits with the meta rather than off in the corner: it belongs to
 * the person who wrote the review, and at the far right of a wide card it reads
 * as a property of the card instead. */
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: none;
	margin: 0 0 0.35rem;
	color: var( --haat-foreground );
}

.woocommerce #reviews .woocommerce-Reviews-title {
	margin-bottom: 1.25rem;
	font-size: var( --haat-text-2xl );
}

.woocommerce #reviews #review_form_wrapper {
	padding: 1.5rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
}

.woocommerce #reviews #review_form .comment-reply-title {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var( --haat-font-display );
	font-size: var( --haat-text-xl );
	font-weight: var( --haat-weight-bold );
	color: var( --haat-foreground );
}

.woocommerce #reviews #review_form .comment-notes {
	margin-bottom: 1.25rem;
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

.woocommerce #reviews #review_form .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-medium );
	color: var( --haat-foreground );
}

/* Name and email are short and related, so they share a row on anything wider
 * than a phone rather than making the form twice as long as it needs to be. */
@media ( min-width: 40rem ) {
	.woocommerce #reviews #review_form .comment-form {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0 1rem;
	}

	.woocommerce #reviews #review_form .comment-form .comment-notes,
	.woocommerce #reviews #review_form .comment-form .comment-form-rating,
	.woocommerce #reviews #review_form .comment-form .comment-form-comment,
	.woocommerce #reviews #review_form .comment-form .comment-form-cookies-consent,
	.woocommerce #reviews #review_form .comment-form .form-submit {
		grid-column: 1 / -1;
	}
}

.woocommerce #reviews #review_form .comment-form-rating .stars {
	margin: 0 0 1rem;
}

/* ── Category filter ─────────────────────────────────────────────────────
 *
 * A collapsible tree. Every branch stays open until the script marks the list
 * `.haat-cats`, so with JavaScript off the widget is exactly what WooCommerce
 * printed rather than a list with no way to open it.
 */
.woocommerce ul.product-categories,
.widget ul.product-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget ul.product-categories li {
	margin: 0;
	list-style: none;
}

/*
 * Three columns: link, count, disclosure.
 *
 * WooCommerce prints the count as a SIBLING of the link -- `<a>...</a>
 * <span class="count">(4)</span>` -- not inside it. A two-column grid therefore
 * handed column two to the count and pushed the toggle onto a row of its own,
 * with the sub-category counts wrapping under their names for the same reason.
 * Placing all three explicitly is the only way to be sure which is which.
 *
 * The disclosure column is a fixed width rather than `auto` so that leaf rows,
 * which have no button, still reserve it and every count in the widget lines
 * up on the same edge.
 */
.widget ul.haat-cats li {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto 1.75rem;
	gap: 0 0.4rem;
	align-items: center;
}

/*
 * Setting `display` on the row defeats the `hidden` attribute: `[hidden] {
 * display: none }` is a user-agent rule and any author rule beats it. The
 * "Show all categories" tail was being marked hidden and staying on screen, so
 * the clamp did nothing at all. Restated here rather than swapped for a class,
 * because `hidden` also takes the row out of the accessibility tree -- which is
 * what a collapsed tail should do.
 */
.widget ul.haat-cats li[hidden] {
	display: none;
}

.widget ul.haat-cats li > a {
	grid-column: 1;
}

.widget ul.haat-cats li > .count {
	grid-column: 2;
}

.widget ul.haat-cats li > .haat-cats__toggle {
	grid-column: 3;
}

.widget ul.haat-cats li > ul.children {
	grid-column: 1 / -1;
}


.widget ul.product-categories a {
	display: block;
	padding: 0.3rem 0;
	color: var( --haat-foreground );
}

.widget ul.product-categories a:hover {
	color: var( --haat-primary );
}

.widget ul.product-categories .count {
	color: var( --haat-muted-foreground );
	font-size: var( --haat-text-xs );
}

/* The category being filtered on is the one piece of state in the widget, so
 * it carries the accent -- a signal, not decoration (golden rule 14). */
.widget ul.product-categories .current-cat > a {
	color: var( --haat-primary );
	font-weight: var( --haat-weight-bold );
}

.widget ul.product-categories ul.children {
	margin: 0 0 0.25rem;
	padding-inline-start: 0.85rem;
	border-inline-start: 1px solid var( --haat-border );
	list-style: none;
}

.widget ul.product-categories ul.children a {
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

/* Collapsed only once the script has taken over. */
.widget ul.haat-cats .haat-cats__branch:not( .is-open ) > ul.children {
	display: none;
}

.haat-cats__toggle {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var( --haat-radius-sm );
	cursor: pointer;
}

.haat-cats__toggle:hover {
	background: var( --haat-muted );
}

.haat-cats__toggle::after {
	width: 0.45rem;
	height: 0.45rem;
	border-bottom: 2px solid var( --haat-muted-foreground );
	border-inline-end: 2px solid var( --haat-muted-foreground );
	transform: translateY( -25% ) rotate( -45deg );
	transition: transform var( --haat-duration-fast ) var( --haat-ease-out );
	content: "";
}

.haat-cats__branch.is-open > .haat-cats__toggle::after {
	transform: translateY( 10% ) rotate( 45deg );
}

.haat-cats__more {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.5rem;
	font-family: inherit;
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-medium );
	color: var( --haat-foreground );
	background: none;
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-md );
	cursor: pointer;
	transition: border-color var( --haat-duration-fast ) var( --haat-ease-out ),
		color var( --haat-duration-fast ) var( --haat-ease-out );
}

.haat-cats__more:hover {
	color: var( --haat-primary );
	border-color: var( --haat-primary );
}

/* ── Account: sign in and register ───────────────────────────────────────
 *
 * The logged-out account page is the theme's only true "auth" screen, and
 * WooCommerce leaves it as a bare form on a full-width page: at 1440px the
 * login box was 1216px wide, which reads as an unfinished admin screen rather
 * than a storefront. A centred card is the convention for a reason -- a short
 * form measured against the whole viewport gives the eye nothing to land on.
 *
 * `body.woocommerce-account:not(.logged-in)` is the auth state specifically:
 * the same page logged IN is the dashboard, which wants the full width for its
 * orders table.
 */
.woocommerce-account:not( .logged-in ) .haat-page-header,
.woocommerce-account:not( .logged-in ) .entry-header {
	text-align: center;
}

.woocommerce-account:not( .logged-in ) .woocommerce > h2,
.woocommerce-account:not( .logged-in ) .u-column1 > h2,
.woocommerce-account:not( .logged-in ) .u-column2 > h2 {
	margin-bottom: 1rem;
	font-size: var( --haat-text-xl );
	text-align: center;
}

/*
 * `.woocommerce form.` to out-specify WooCommerce's `.woocommerce form.login`
 * (0-2-1), which sets `margin: 2em 0` -- a shorthand, so it zeroes the side
 * margins and `margin-inline: auto` never centred the card. The card was styled
 * correctly and simply sat against the left edge under a centred heading.
 */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register {
	max-width: 27rem;
	margin: 0 auto;
	padding: 1.75rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
	box-shadow: var( --haat-shadow-sm );
}

/*
 * With registration enabled WooCommerce prints login and register side by side
 * in `.u-columns`. Explicit columns rather than auto-fit: the container has no
 * definite width of its own here, and auto-fit resolves its repetition count to
 * ONE against an indefinite width -- golden rule 20, which has already stacked
 * the footer and the mega menu into a single column.
 */
/*
 * WooCommerce clears its float layout with `.col2-set::before/::after`
 * ({ content: ""; display: table }). A pseudo-element on a GRID container is a
 * grid ITEM, so the ::before silently took cell 1 and pushed the two cards onto
 * separate rows -- a 2x452px grid holding two 452px items that still stacked.
 * Every measurement looked right, which is why it took enumerating the grid's
 * children to see. Any float clearfix has to be switched off before its
 * container becomes a grid or a flexbox.
 */
.woocommerce-account:not( .logged-in ) .u-columns::before,
.woocommerce-account:not( .logged-in ) .u-columns::after {
	display: none;
}

.woocommerce-account:not( .logged-in ) .u-columns {
	display: grid;
	gap: 1.5rem;
	max-width: 58rem;
	margin-inline: auto;
}

@media ( min-width: 56rem ) {
	.woocommerce-account:not( .logged-in ) .u-columns {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		align-items: start;
	}
}

.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-medium );
	color: var( --haat-foreground );
}

/*
 * `form.` is on these selectors to out-specify WooCommerce's
 * `.woocommerce form .form-row .input-text`, which is 0-3-1 -- three classes
 * AND a type. Written without it this rule scored 0-3-0 and lost, so the fields
 * kept WooCommerce's 4px radius against the theme's own rounding everywhere
 * else on the page. The border was already fixed by mapping
 * --wc-form-border-color in tokens.css; radius has no such variable, so it has
 * to be won on specificity.
 */
.woocommerce-account .woocommerce form.woocommerce-form-login .input-text,
.woocommerce-account .woocommerce form.woocommerce-form-register .input-text {
	width: 100%;
	height: 2.75rem;
	border-radius: var( --haat-radius-md );
}

/* The submit is the only action in the card, so it takes the full width rather
 * than sitting in a row with the "Remember me" checkbox beside it -- which is
 * what made the button look like an afterthought wedged against a stray
 * control. */
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button {
	width: 100%;
	margin: 0.25rem 0 0;
	padding-block: 0.75rem;
}

/*
 * "Remember me" is a label wrapping a checkbox, so it needs to be a row in its
 * own right. WooCommerce leaves it inline beside the button, where the box sits
 * on the text baseline and the label reads as part of the button's row.
 *
 * Four classes deep to beat WooCommerce's own
 * `.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme`
 * (0-3-0), which sets `display: inline-block`.
 */
.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-normal );
	color: var( --haat-muted-foreground );
}

.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var( --haat-primary );
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 1rem 0 0;
	font-size: var( --haat-text-sm );
	text-align: center;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var( --haat-muted-foreground );
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	color: var( --haat-primary );
}

/* The reveal button inside the password field. WooCommerce positions it
 * absolutely against the field wrapper and leaves it unstyled. */
.woocommerce-account .woocommerce-form-login .password-input,
.woocommerce-account .woocommerce-form-register .password-input {
	display: block;
	position: relative;
}

.woocommerce-account .show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 0.75rem;
	transform: translateY( -50% );
	color: var( --haat-muted-foreground );
	cursor: pointer;
}

/* The lost-password and set-password forms are the same screen in a different
 * state, so they get the same card rather than reverting to full width. */
.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce form.lost_reset_password {
	max-width: 27rem;
	margin: 0 auto;
	padding: 1.75rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
	box-shadow: var( --haat-shadow-sm );
}

.woocommerce-account .woocommerce-ResetPassword .input-text {
	width: 100%;
	height: 2.75rem;
	border-radius: var( --haat-radius-md );
}

.woocommerce-account .woocommerce-ResetPassword .button {
	width: 100%;
}

/* ── Auth screen ─────────────────────────────────────────────────────────
 *
 * The logged-out account page, treated as a screen rather than as two forms
 * that happen to be on a page.
 */
.woocommerce-account:not( .logged-in ) .haat-entry__header {
	display: none;
}

.haat-auth__intro {
	max-width: 32rem;
	margin: 0 auto 2rem;
	text-align: center;
}

/* The mark, not the wordmark-plus-title lockup: .haat-branding is a column
 * flex container, and centring it here would otherwise leave the tagline and
 * anything else it prints stacked under the logo. */
.haat-auth__brand .haat-branding {
	align-items: center;
	margin-bottom: 1.25rem;
}

.haat-auth__title {
	margin: 0 0 0.5rem;
	font-size: var( --haat-text-3xl );
}

.haat-auth__subtitle {
	margin: 0;
	color: var( --haat-muted-foreground );
}

/*
 * Column headings. WooCommerce prints "Login" and "Register" as bare h2s; they
 * are the only label each card has, so they sit inside the card's rhythm rather
 * than floating above it.
 */
.woocommerce-account:not( .logged-in ) .u-column1 > h2,
.woocommerce-account:not( .logged-in ) .u-column2 > h2 {
	margin: 0 0 0.75rem;
	font-size: var( --haat-text-lg );
	text-align: center;
}

/*
 * What the account is for. A register form with nothing beside it is a form
 * asking for an email address in exchange for nothing stated.
 */
.haat-auth__benefits {
	margin: 1.25rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var( --haat-border );
	list-style: none;
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

.haat-auth__benefits li {
	display: grid;
	grid-template-columns: 1rem minmax( 0, 1fr );
	gap: 0.6rem;
	align-items: start;
	margin: 0 0 0.5rem;
}

.haat-auth__benefits li:last-child {
	margin-bottom: 0;
}

/* A check drawn from borders, so it takes the brand colour and needs no icon
 * font or extra request. */
.haat-auth__benefits li::before {
	width: 0.55rem;
	height: 0.3rem;
	margin-top: 0.35rem;
	border-bottom: 2px solid var( --haat-primary );
	border-left: 2px solid var( --haat-primary );
	transform: rotate( -45deg );
	content: "";
}

/* Both cards keep the same top edge whatever their height, so the two headings
 * line up instead of the shorter form floating in the middle of its column. */
.woocommerce-account:not( .logged-in ) .u-column1,
.woocommerce-account:not( .logged-in ) .u-column2 {
	/*
	 * WooCommerce floats these and gives them `width: 48%` -- a percentage of
	 * the GRID TRACK once the parent is a grid, so each column came out 217px
	 * inside a 452px track and the two cards sat at different heights. A grid
	 * item is already the width of its track; the float and the percentage are
	 * both left over from the float layout this replaces.
	 */
	float: none;
	width: auto;
	min-width: 0;
}

.woocommerce-account:not( .logged-in ) .woocommerce form.woocommerce-form-register {
	margin-top: 0;
}