/* ==========================================================================
   WooCommerce: loop, single product, cart, checkout, account
   ========================================================================== */

.woocommerce-products-header {
	margin-bottom: var(--s-7);
	text-align: center;
}

.woocommerce-products-header__title {
	margin-bottom: var(--s-3);
}

.term-description {
	max-width: 720px;
	margin-inline: auto;
	color: var(--c-muted-2);
}

/* --- Loop toolbar --------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
	margin-bottom: var(--s-5);
	font-size: var(--fs-sm);
}

.woocommerce-ordering select {
	min-width: 220px;
}

@media (min-width: 768px) {
	.woocommerce-result-count {
		float: left;
		line-height: 46px;
	}

	.woocommerce-ordering {
		float: right;
	}

	.woocommerce-ordering::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* --- Product grid ---------------------------------------------------------- */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4);
	clear: both;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	/* The live grid goes straight from two columns to four at 768. */
	ul.products,
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-5);
	}
}

@media (min-width: 1025px) {
	ul.products,
	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

/* --- Product card ----------------------------------------------------------
   White card, thin border, product render on white, IN STOCK badge overlaid
   top-left, centred title/price, then quantity + add-to-cart.
   ------------------------------------------------------------------------ */

.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--c-white);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.product-card:hover,
.product-card:focus-within {
	border-color: var(--c-line);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--c-white);
}

.product-card__link {
	display: block;
	width: 100%;
	height: 100%;
}

.product-card__image,
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--t-slow);
}

.product-card:hover .product-card__image {
	transform: scale(1.04);
}

.product-card__badge {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	z-index: 2;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	padding: 0 var(--s-4) var(--s-6);
	text-align: center;
}

.product-card__title {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.3;
}

.product-card__title a {
	color: var(--c-ink);
}

.product-card__title a:hover {
	color: var(--c-green-deep);
}

.product-card__price {
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
}

.product-card__price del {
	margin-right: var(--s-2);
	color: var(--c-muted);
	font-weight: var(--fw-regular);
}

.product-card__actions {
	width: 100%;
	margin-top: auto;
	padding-top: var(--s-2);
}

.product-card__form {
	/* Measured on live: a 59x39 quantity box and a 120x39 button, 11px apart,
	   both on a 4px radius — not pills. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
}

.product-card__form .quantity {
	flex: 0 0 auto;
}

.product-card__form .quantity input,
.woocommerce .product-card__form .quantity input[type="number"] {
	/* Live's box carries a visible #666 hairline, not the theme's pale one.
	   The selector has to out-rank `.woocommerce .quantity input[type=number]`,
	   which sets the 88px cart-page width. */
	width: 59px;
	height: 44px;
	min-height: 0;
	padding-inline: var(--s-2);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--field-bg);
	text-align: center;
}

.product-card__cart {
	flex: 0 0 auto;
	white-space: nowrap;
}

.product-card .button.product-card__cart,
.product-card a.button.product-card__cart,
.woocommerce .product-card a.button.product-card__cart,
.woocommerce ul.products li.product a.button.product-card__cart {
	/* The anchor is a flex item of `.product-card__form`, so whatever display it
	   is given is blockified — an inline-block here computes to block, and the
	   label then sat on the top line of a 39px box. Making the button its own
	   flex container centres the label on the box instead of on a guessed
	   line-height. WooCommerce's own stylesheet also gives loop buttons a 15px
	   top margin, which in a centred flex row dropped the button below the
	   quantity box. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 120px;
	height: 44px;
	min-height: 0;
	/* The label has no descenders, so centring it by the font's metrics leaves
	   the ink about 1px high in the box; 2px of top padding moves the content
	   box down by half that and lands it. */
	padding: 2px var(--s-4) 0;
	/* Live's loop button is square-cornered, not a pill. */
	border-radius: var(--r-sm);
	/* Live's label measures 87x12 of ink against our 81x11 — a touch larger and
	   heavier. */
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	line-height: 1;
	text-align: center;
}

.product-card .added_to_cart {
	display: block;
	margin-top: var(--s-2);
	font-size: var(--fs-xs);
	text-align: center;
}

.product-card .button.loading,
.product-card .btn.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* --- Single product --------------------------------------------------------- */

.single-product div.product {
	display: grid;
	gap: var(--s-6);
}

@media (min-width: 1025px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: var(--s-9);
		align-items: start;
	}

	/* `.single-range` and `.faq-section--product` are no longer in this grid —
	   they render outside div.product so the sticky gallery is bounded by its
	   own row. Anything Woo still puts inside spans the full width. */
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .up-sells {
		grid-column: 1 / -1;
	}
}

.single-product .woocommerce-product-gallery,
.woocommerce div.product div.images.woocommerce-product-gallery {
	position: relative;
	width: 100%;
	float: none;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-white);
}

/* The gallery holds its place while the summary column — which now carries the
   description too — scrolls past it, as the original template did (sticky on
   desktop only).

   🛑 This block MUST stay after the rule above: the two selectors are identical,
   a media query adds no specificity, so source order decides. Placed earlier,
   `position: relative` wins and only `top`/`align-self` survive — which looks
   like a working rule in devtools but does not stick.

   `align-self: start` keeps the item at its content height so it has room to
   travel inside its grid area. */
@media (min-width: 1025px) {
	.single-product .woocommerce-product-gallery,
	.woocommerce div.product div.images.woocommerce-product-gallery {
		position: sticky;
		top: calc(var(--header-h) + var(--s-4));
		align-self: start;
	}
}

.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	object-fit: contain;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin-bottom: 0;
}

/* Woo's general sheet colours prices and links olive-green; the brand does not. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--c-body);
}

.woocommerce-Tabs-panel h1,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3 {
	color: var(--c-ink);
}

.woocommerce-Tabs-panel h1 {
	font-size: var(--fs-h3);
}

.single-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: var(--s-3);
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	flex: 0 0 72px;
	margin: 0;
}

.single-product .flex-control-thumbs img {
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-sm);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--t-fast), border-color var(--t-fast);
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
	border-color: var(--c-ink);
	opacity: 1;
}

.single-product .product_title {
	margin-block: var(--s-3) var(--s-4);
}

.single-product .summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	margin-bottom: var(--s-5);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: 1.75rem;
	font-weight: var(--fw-semibold);
}

.single-product .woocommerce-product-details__short-description {
	margin-bottom: var(--s-5);
	color: var(--c-muted-2);
	line-height: var(--lh-loose);
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}

.single-product form.cart .quantity input {
	width: 88px;
	min-height: 52px;
	text-align: center;
}

.single-product form.cart .single_add_to_cart_button,
.woocommerce .single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
	padding-inline: var(--s-7);
	background: var(--c-green);
	border: 0;
	border-radius: var(--r-pill);
	color: var(--c-green-ink);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	transition: background var(--t-base);
}

.single-product form.cart .single_add_to_cart_button:hover,
.woocommerce .single-product form.cart .single_add_to_cart_button:hover {
	background: var(--c-green-hover);
	color: var(--c-green-ink);
}

.single-trust {
	display: grid;
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
	padding: var(--s-5);
	list-style: none;
	background: var(--c-surface-alt);
	border-radius: var(--r-md);
}

.single-trust__item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0;
	font-size: var(--fs-sm);
}

.single-coa {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	font-size: var(--fs-sm);
}

.single-coa a {
	color: var(--c-ink);
	font-weight: var(--fw-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stock.out-of-stock {
	margin-bottom: var(--s-4);
	color: var(--c-accent);
	font-weight: var(--fw-medium);
}

/* --- Sticky add-to-cart (mobile) --------------------------------------------- */

.sticky-atc {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-3) var(--gutter);
	background: var(--c-white);
	border-top: 1px solid var(--c-line);
	box-shadow: 0 -6px 24px rgba(12, 12, 12, 0.08);
	transform: translateY(110%);
	transition: transform var(--t-base);
}

.sticky-atc.is-visible {
	transform: none;
}

@media (min-width: 1025px) {
	.sticky-atc {
		display: none;
	}
}

.sticky-atc__info {
	flex: 1;
	min-width: 0;
}

.sticky-atc__name {
	display: block;
	overflow: hidden;
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sticky-atc__price {
	color: var(--c-muted-2);
	font-size: var(--fs-xs);
}

.sticky-atc .btn {
	flex: 0 0 auto;
}

/* --- Tabs ---------------------------------------------------------------------- */

.woocommerce-tabs {
	margin-top: var(--s-8);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}

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

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

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin: 0 0 var(--s-6);
	padding: 0 0 var(--s-3);
	border-bottom: 1px solid var(--c-line);
	list-style: none;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--c-muted);
	font-family: var(--f-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--c-ink);
}

.woocommerce-Tabs-panel {
	max-width: 80ch;
	color: var(--c-muted-2);
	line-height: var(--lh-loose);
}

.woocommerce-Tabs-panel h2 {
	display: none;
}

/* --- Related --------------------------------------------------------------------- */

.related.products,
.up-sells.products {
	margin-top: var(--s-10);
}

.related.products > h2,
.up-sells.products > h2 {
	margin-bottom: var(--s-6);
	font-size: var(--fs-h3);
	text-align: center;
}

/* --- Notices ----------------------------------------------------------------------- */

/* Live leaves WooCommerce's own notice styling in place: a pale panel with a
   3px rule across the top and a marker on the left, not a themed callout. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin: 0 0 var(--s-6);
	padding: 1em 2em 1em 3.5em;
	background: #f6f5f8;
	border-top: 3px solid #1e85be;
	border-radius: 0;
	list-style: none;
	font-size: var(--fs-sm);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "";
	position: absolute;
	top: 1.1em;
	left: 1.5em;
	width: 1em;
	height: 1em;
	background: currentColor;
	color: #1e85be;
	mask: var(--icon-info) center / contain no-repeat;
	-webkit-mask: var(--icon-info) center / contain no-repeat;
}

.woocommerce-message {
	border-top-color: #8fae1b;
}

.woocommerce-message::before {
	color: #8fae1b;
}

.woocommerce-error {
	border-top-color: #b81c23;
}

.woocommerce-error::before {
	color: #b81c23;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: var(--s-2) var(--s-5);
	background: var(--c-ink);
	border-radius: var(--r-sm);
	color: var(--c-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

/* --- Cart / checkout / account --------------------------------------------------------- */

.woocommerce table.shop_table {
	margin-bottom: var(--s-6);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	border-collapse: collapse;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--c-surface-alt);
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.woocommerce table.shop_table img {
	width: 64px;
	border-radius: var(--r-sm);
}

.woocommerce .quantity input[type="number"] {
	width: 88px;
	text-align: center;
}

.woocommerce .cart-collaterals {
	max-width: 480px;
	margin-left: auto;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--fs-h4);
}

.woocommerce .button,
.woocommerce input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: var(--s-3) var(--s-6);
	/* WooCommerce's own buttons — order tracking, account, lost password, the
	   empty-cart return — take the site's primary pill rather than a black box
	   nothing else on the site uses. */
	background: var(--c-green);
	border: 0;
	border-radius: var(--r-pill);
	color: var(--c-green-ink);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background var(--t-base), transform var(--t-fast);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--c-green-hover);
	color: var(--c-green-ink);
}

.woocommerce .button.alt,
.woocommerce #place_order {
	width: 100%;
	min-height: 54px;
	font-size: var(--fs-body);
}

/* The checkout's own layout lives in cart.css, which follows live's grid. */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--s-4);
	padding: 0;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin-bottom: var(--s-1);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	color: var(--c-body);
	font-weight: var(--fw-medium);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
	background: var(--c-surface-alt);
	color: var(--c-ink);
}

@media (min-width: 1025px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--s-8);
		align-items: start;
	}
}

/* --- Shop heading ------------------------------------------------------------ */

.shop-heading {
	/* Measured: ~80px between the heading and the first card row on live. */
	margin-bottom: 78px;
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
	/* Live sets this one heading at 700, not the display face's usual 600. */
	font-weight: var(--fw-bold);
}

.shop-intro {
	max-width: 720px;
	margin-top: calc(var(--s-6) * -1);
	margin-bottom: var(--s-7);
	color: var(--c-muted-2);
}

/* WooCommerce's own layout sheet is dequeued, but guard against any plugin
   re-adding the float-based widths. */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	float: none;
}

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

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

/* --- Archive tail ------------------------------------------------------------ */

.shop-cta {
	text-align: center;
}

.shop-cta__text {
	/* Measured: ~130px between the line and the button on live. */
	margin-bottom: 100px;
	color: var(--c-body);
	font-size: var(--fs-sm);
}

/* --- Theme buttons keep the brand fill inside WooCommerce -------------------
   `.woocommerce a.button` (0,2,1) out-specifies `.btn` (0,1,0), which silently
   turned every add-to-cart black. These restore the green pill.
   ------------------------------------------------------------------------ */

.woocommerce a.btn,
.woocommerce button.btn,
.woocommerce input.btn,
.woocommerce .btn.button,
.woocommerce a.button.btn,
.woocommerce button.button.btn {
	background: var(--c-green);
	border-radius: var(--r-pill);
	color: var(--c-green-ink);
	font-family: var(--f-body);
	font-weight: var(--fw-semibold);
}

.woocommerce a.btn:hover,
.woocommerce button.btn:hover,
.woocommerce a.button.btn:hover,
.woocommerce button.button.btn:hover {
	background: var(--c-green-hover);
	color: var(--c-green-ink);
}

.woocommerce .btn--outline {
	background: transparent;
	color: var(--c-ink);
}

/* --- Card actions on small screens -------------------------------------------
   Two cards per row leaves ~170px of card width, so the quantity field and the
   button have to share it rather than overflow.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.product-card__body {
		padding-inline: var(--s-3);
	}

	.product-card__form {
		gap: var(--s-2);
	}

	.product-card__form .quantity {
		flex: 0 0 auto;
		min-width: 0;
	}

	.product-card__form .quantity input.qty,
	.woocommerce .product-card__form .quantity input.qty {
		width: 44px;
		min-width: 0;
		min-height: 42px;
		padding-inline: 2px;
	}

	/* Must out-specify `.woocommerce a.button`, which sets the desktop padding
	   and pill radius. */
	.woocommerce a.button.product-card__cart,
	.woocommerce button.button.product-card__cart,
	.woocommerce a.product-card__cart,
	.woocommerce button.product-card__cart,
	a.product-card__cart,
	button.product-card__cart {
		flex: 1 1 0%;
		width: auto;
		min-width: 0;
		min-height: 42px;
		padding: var(--s-2) var(--s-2);
		border-radius: var(--r-md);
		font-size: var(--fs-2xs);
		line-height: 1.25;
		white-space: normal;
	}

	.product-card__title {
		font-size: 1.0625rem;
	}

	.product-card__price {
		font-size: 1.125rem;
	}
}

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

/* Live leaves WooCommerce's own pale pill here; the rebuild uses the brand
   button, because it is the only thing to press on the page. */
.woocommerce .return-to-shop .button,
.woocommerce .return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: var(--s-3) var(--s-6);
	background: var(--c-green);
	color: var(--c-green-ink);
	border: 0;
	border-radius: var(--r-pill);
	font-family: var(--f-body);
	font-size: 100%;
	font-weight: var(--fw-bold);
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce .return-to-shop .button:hover,
.woocommerce .return-to-shop a.button:hover {
	background: var(--c-green-hover);
	color: var(--c-green-ink);
}

/* --- Tap targets ----------------------------------------------------------
   Controls the audit found under the 44px accessible minimum. The card button
   keeps its measured 39px box visually; the extra height is transparent. */
.woocommerce .product-card__cart,
.woocommerce a.button.product-card__cart,
.woocommerce button.button.product-card__cart,
.product-card__cart {
	min-height: 44px;
}

.woocommerce .single-product div.product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger,
.woocommerce .single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger,
.woocommerce .woocommerce-product-gallery__trigger {
	width: 44px;
	height: 44px;
	line-height: 44px;
}

/* Every add-to-cart in a loop, not just the card's own. */
.woocommerce ul.products a.button.add_to_cart_button,
.woocommerce ul.products button.button.add_to_cart_button,
.woocommerce a.button.add_to_cart_button {
	min-height: 44px;
}

/* Standalone links that act as buttons. */
.single-product .coa-link,
.single-product .single-product__overview-link,
.product-card__title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* WooCommerce ships these three at its own sizes from its own stylesheet; each
   is a standalone control, so each gets a real target. */
.woocommerce .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	width: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
	text-align: center;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	background-position: center;
}

.woocommerce-LostPassword a,
.woocommerce .woocommerce-LostPassword a,
.single-coa a,
.single-product .single-coa a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --- Loop card, matched back to live --------------------------------------
   WooCommerce sets the loop title at 1em from its own stylesheet, three
   classes deep, which was holding the card's name at 16px against live's 22.
   Live's quantity box and Add to cart are square-cornered, not pills. */
.woocommerce ul.products li.product .product-card__title,
.woocommerce ul.products li.product h3.product-card__title {
	width: 100%;
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

/* The homepage carousel renders its cards outside WooCommerce's own wrapper, so
   the square corners cannot hang off a .woocommerce ancestor. */
.woocommerce .product-card__form .quantity input[type="number"],
.product-card__form .quantity input,
.woocommerce ul.products li.product a.button.product-card__cart,
.woocommerce ul.products li.product button.button.product-card__cart,
a.product-card__cart.btn,
button.product-card__cart.btn,
.product-card__cart {
	border-radius: var(--r-sm);
}

/* --- Single product: description and range -------------------------------
   `.single-range` and `.faq-section--product` sit inside `div.product`, which is
   the gallery/summary grid, so they span the row. Their own container is already
   the page's, so they carry no gutter of their own.

   `.single-description` is different: it renders INSIDE div.summary, under the
   add-to-cart, so it is not a grid child and needs no span or container reset —
   only a rule above the fold it now sits below. */
.single-range,
.faq-section--product {
	padding-inline: 0;
}

.single-range > .container,
.faq-section--product > .container {
	max-width: none;
	padding-inline: 0;
}

.single-description {
	margin-top: var(--s-7);
	padding-top: var(--s-6);
	border-top: 1px solid var(--c-line-soft);
}

.single-description__title {
	margin: 0 0 var(--s-5);
	font-family: var(--f-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}

.single-description__body > *:first-child {
	margin-top: 0;
}

/* The two COAs sit side by side in one paragraph in the copy, but the theme
   renders images as blocks, which stacked them down a half-empty column. Inside
   the description they run inline again and wrap when there is no room. */
.single-description__body p > a {
	display: inline-block;
	margin-right: var(--s-5);
	vertical-align: top;
}

.single-description__body p > a > img,
.single-description__body p > img {
	display: inline-block;
	height: auto;
	vertical-align: top;
}