/* ==========================================================================
   WooCommerce — product card, shop archive, PDP, cart, checkout, account.
   Every value comes from variables.css. Woo's own stylesheet is dequeued
   except for the layout/smallscreen sheets, so selector depth stays shallow.
   ========================================================================== */

/* ---------- Product card ---------------------------------------------------- */

.product-card,
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--bg);
	border: var(--hairline);
	border-radius: var(--radius-l);
	overflow: hidden;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}
.product-card:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-l);
	border-color: var(--border-strong);
}

/*
 * The catalogue mixes 3:2 landscape shots with 4:5 portraits. A 4:3 frame on
 * `cover` cut 40% of the height off every portrait — the vial lost its cap and
 * its base. The frame is square (the shape that treats both orientations
 * evenly) and the image is `contain`, so nothing is ever cropped; `--shot`,
 * set per card, paints a blurred copy of the same file behind it so the
 * leftover gutter reads as depth of field rather than a bar.
 */
.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--ink);
	overflow: hidden;
	isolation: isolate;
}
.product-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--shot);
	background-size: cover;
	background-position: center;
	filter: blur(18px) saturate(1.08);
	transform: scale(1.12);
	opacity: 0.85;
	transition: transform var(--dur-slow) var(--ease-out);
}
.product-card__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}
/* The zoom moves to the backdrop: scaling the shot itself would crop it again. */
.product-card:hover .product-card__media::before { transform: scale(1.2); }

@media (prefers-reduced-motion: reduce) {
	.product-card__media::before { transition: none; }
	.product-card:hover .product-card__media::before { transform: scale(1.12); }
}

/* Placeholder when a product has no image: hex + helix motif, not a grey box */
.product-card__ph {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(90% 70% at 50% 0%, var(--veil-accent-xs) 0%, transparent 65%),
		var(--surface);
}
.product-card__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23037937' stroke-opacity='0.32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 6l22 12.7v25.4L32 58 10 45.1V19.7z'/%3E%3Cpath d='M28 20h8M30 20v9l-6 11a4 4 0 003.5 6h11a4 4 0 003.5-6l-6-11v-9'/%3E%3Cpath d='M25 42h14'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 88px 88px;
}

.product-card__badges {
	position: absolute;
	top: var(--space-s);
	left: var(--space-s);
	/* The wishlist button owns the opposite corner (44px + breathing room);
	   without this bound a third badge slides underneath it and gets clipped. */
	right: calc(var(--space-s) + 52px);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	flex: 1;
	padding: var(--space-m);
}
.product-card__cat {
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Reads as a caption under the name, not as a second title. */
	color: var(--text-subtle);
}
/* The name is the loudest thing in the card body: it has to win against the
   badges, the category, the price and the button around it. */
.product-card__title {
	margin: 0;
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--text);
	/*
	 * Two lines, always: names run from "SHB" to "Tesamorelin/Ipamorelin/
	 * CJC-1295 No DAC Blend", and letting each card size to its own name is
	 * what pushed the price of every short-named card to the bottom of a
	 * stretched box. Reserving the space keeps titles, prices and buttons on
	 * the same lines right across a row, on any screen.
	 */
	min-height: calc(2em * 1.25);
}
/* Clamped on the span, never the link — see the note in card.php. */
.product-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* "Tesamorelin/Ipamorelin/CJC-1295" has no space to break at. */
	overflow-wrap: anywhere;
}
.product-card__title a { color: var(--text); text-decoration: none; }
.product-card__title a:hover { color: var(--accent-text); }

/* The title link claims the whole card as its tap target (WCAG 2.5.8 — a
   17px line of text is not a target on a phone). The controls inside the card
   sit above the overlay so they keep their own hit areas. */
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/*
 * `.product-card__badges` used to be in this list, which silently reset the
 * `position: absolute` it is given above — the badges fell out of the image
 * and into the card body, where a third badge wrapped to a second row and
 * stretched every other card in the row. They already carry `z-index: 2`, so
 * they never needed to be here.
 */
.product-card__wish,
.product-card .price,
.product-card__buy { position: relative; z-index: 2; }
.product-card .price { margin-top: auto; padding-top: var(--space-2xs); font-size: var(--step-1); }
.product-card__buy { display: grid; gap: var(--space-2xs); margin-top: var(--space-s); }
.product-card__buy select { min-height: 42px; font-size: var(--step--1); }

/* Woo's own loop markup, mapped onto the same shapes */
.woocommerce ul.products { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product::before { content: none; }
/* Woo sizes its loop items for a float layout (width: 22.05%; float: left).
   Since the cards are wrapped in <li> for list semantics, that percentage
   started resolving against the grid column instead of the row — 286px column,
   63px card. The grid owns the track sizing; the item just fills it. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product { width: auto; float: none; margin: 0; }
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: var(--step-0); }
.woocommerce ul.products li.product .button { margin: 0; }
.woocommerce ul.products li.product .onsale { display: none; }

.products-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ---------- Shop / archive header ------------------------------------------- */

.shop-hero { padding-block: var(--space-2xl); }
.shop-hero h1 { margin-bottom: var(--space-2xs); }
.shop-hero p { max-width: 60ch; color: var(--text-muted); }
.shop-hero .breadcrumb { margin-bottom: var(--space-m); }

.subcat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-m); }
.subcat-chip {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 40px;
	padding: 0 var(--space-s);
	border: var(--hairline-strong);
	border-radius: var(--radius-full);
	background: var(--bg);
	color: var(--text);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.subcat-chip:hover, .subcat-chip[aria-current="page"] { border-color: var(--accent-text); color: var(--accent-text); }
.subcat-chip span { color: var(--text-subtle); font-weight: 500; }

.shop-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1000px) { .shop-layout { grid-template-columns: 264px 1fr; gap: var(--space-2xl); } }

/* The rail sticks and scrolls inside itself, so it can never run longer than
   the viewport no matter how many size terms the catalogue has. */
/* Closed by default: below 1000px the rail is a drawer behind the Filters
   button. Declaring that in CSS rather than letting JS hide it after paint is
   what keeps the product grid from jumping (CLS). */
.shop-filters { display: none; gap: var(--space-l); align-content: start; }
.shop-filters.is-open { display: grid; }
@media (min-width: 1000px) { .shop-filters { display: grid; } }
@media (min-width: 1000px) {
	.shop-filters {
		position: sticky;
		top: calc(var(--header-h) + var(--space-m));
		max-height: calc(100vh - var(--header-h) - var(--space-xl));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: var(--space-2xs);
		scrollbar-width: thin;
		scrollbar-color: var(--border-strong) transparent;
	}
	.shop-filters::-webkit-scrollbar { width: 6px; }
	.shop-filters::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }
}

.shop-filters .widget { padding-bottom: var(--space-l); border-bottom: var(--hairline); }
.shop-filters .widget:last-of-type { border-bottom: 0; padding-bottom: 0; }
.shop-filters .widget--flush { padding-bottom: 0; border-bottom: 0; }
.shop-filters .widget-title, .shop-filters h2 {
	margin-bottom: var(--space-s);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text);
}

.filter-list { margin: 0; padding: 0; list-style: none; }
.filter-list li { margin: 0; }
.filter-list a {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2xs);
	align-items: center;
	min-height: 36px;
	padding: 2px 0;
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--step--1);
	transition: color var(--dur-fast) var(--ease-out);
}
.filter-list a:hover { color: var(--accent-text); }
.filter-list a[aria-current] { color: var(--text); font-weight: 600; }
.filter-list .count { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.filter-list--nested { margin: 2px 0 var(--space-2xs) var(--space-s); padding-left: var(--space-s); border-left: 1px solid var(--border); }

/* Sizes as chips: 38 terms as full rows made the column three screens tall. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	min-height: 32px;
	padding: 0 10px;
	border: var(--hairline-strong);
	border-radius: var(--radius-full);
	background: var(--bg);
	color: var(--text-muted);
	font-size: var(--step--2);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.filter-chip span { color: var(--text-subtle); font-weight: 500; font-variant-numeric: tabular-nums; }
.filter-chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
.filter-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.filter-chip.is-on span { color: var(--on-ink-65); }

/* "Show in stock only" — a link that reads as a checkbox. It is real URL
   state, so it stays a link; the box is drawn rather than rendered by the UA
   because a native checkbox cannot navigate. */
.filter-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
}
.filter-toggle__box {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	border: var(--hairline-strong);
	border-radius: var(--radius-s);
	background: var(--bg);
	color: transparent;
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filter-toggle__box .icon { width: 13px; height: 13px; }
.filter-toggle:hover { color: var(--accent-text); }
.filter-toggle:hover .filter-toggle__box { border-color: var(--accent-text); }
.filter-toggle.is-on { color: var(--text); }
.filter-toggle.is-on .filter-toggle__box { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--white); }

.filter-more { margin-top: var(--space-s); }
.filter-more > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	color: var(--accent-text);
	font-size: var(--step--1);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary .icon { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); }
.filter-more[open] > summary .icon { transform: rotate(180deg); }
.filter-more .filter-more__hide { display: none; }
.filter-more[open] .filter-more__show { display: none; }
.filter-more[open] .filter-more__hide { display: inline; }
.filter-more .filter-chips { margin-top: var(--space-2xs); }

.filter-note {
	display: flex;
	gap: var(--space-2xs);
	align-items: flex-start;
	margin: 0;
	font-size: var(--step--1);
	color: var(--text-subtle);
}
.filter-note .icon { width: 16px; height: 16px; flex: none; color: var(--accent-text); margin-top: 1px; }

.filters-toggle { display: flex; }
@media (min-width: 1000px) { .filters-toggle { display: none; } }

.shop-toolbar {
	display: flex; flex-wrap: wrap; gap: var(--space-s);
	align-items: center; justify-content: space-between;
	margin-bottom: var(--space-l);
	padding-bottom: var(--space-s);
	border-bottom: var(--hairline);
}
.woocommerce-result-count { margin: 0; color: var(--text-subtle); font-size: var(--step--1); }
.woocommerce-ordering select { min-width: 210px; min-height: 44px; }

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

.pdp { padding-block: var(--space-2xl); }
/* The related band brings its own rhythm and its own background, so the
   product wrapper's bottom padding only shows up as a white strip between it
   and the newsletter band. */
.pdp:has(> .related-products) { padding-bottom: 0; }
.pdp__grid { display: grid; gap: clamp(var(--space-l), 4vw, var(--space-3xl)); align-items: start; }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: 1.05fr 0.95fr; } }

.pdp__gallery { position: relative; }
@media (min-width: 900px) { .pdp__gallery { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
.pdp__main-image {
	position: relative;
	aspect-ratio: 1 / 1;
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--surface);
	overflow: hidden;
}
.pdp__main-image img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xs); flex-wrap: wrap; }
.pdp__thumbs img { width: 76px; height: 76px; object-fit: cover; border: var(--hairline); border-radius: var(--radius-m); cursor: pointer; }
.pdp__thumbs img:hover { border-color: var(--accent-text); }

.pdp__summary { display: grid; gap: var(--space-s); }
.pdp__summary h1 { margin: 0; font-size: var(--step-3); }
.pdp__summary .price { font-size: var(--step-2); }
.pdp__short { color: var(--text-muted); }

.pdp__buy {
	display: grid; gap: var(--space-s);
	padding: var(--space-l);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--surface);
}
.pdp__buy-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.pdp__buy-row .btn { flex: 1 1 220px; }

.pdp__trust { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.pdp__trust div { display: flex; gap: var(--space-2xs); align-items: center; font-size: var(--step--1); color: var(--text-muted); }
.pdp__trust .icon { width: 18px; height: 18px; color: var(--accent-text); flex: none; }

.coa-block {
	display: grid; gap: var(--space-s);
	padding: var(--space-l);
	border: 1px solid var(--accent-soft-strong);
	border-radius: var(--radius-l);
	background: var(--accent-soft);
}
.coa-block h2, .coa-block h3 { margin: 0; font-size: var(--step-1); }
.coa-block dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-s); margin: 0; }
.coa-block dt { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text-hover); }
.coa-block dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; color: var(--text); }

.rou-note {
	max-width: var(--measure);
	padding: var(--space-s) var(--space-m);
	border-left: 3px solid var(--border-strong);
	background: var(--surface);
	border-radius: 0 var(--radius-m) var(--radius-m) 0;
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* Sticky add-to-cart bar */
.pdp-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: var(--z-sticky);
	display: flex;
	gap: var(--space-s);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2xs) var(--gutter);
	padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom));
	background: var(--frost-strong);
	backdrop-filter: blur(10px);
	border-top: var(--hairline);
	transform: translateY(110%);
	transition: transform var(--dur-base) var(--ease-out);
}
.pdp-bar.is-visible { transform: none; }
.pdp-bar__info { display: grid; gap: 2px; min-width: 0; }
.pdp-bar__title { font-family: var(--font-display); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-bar .btn { flex: none; }

/* Woo variation form */
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: var(--space-s); border: 0; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: 0 0 var(--space-2xs); border: 0; background: none; }
.woocommerce div.product form.cart .variations label { font-size: var(--step--1); font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.woocommerce div.product form.cart .reset_variations { font-size: var(--step--1); color: var(--text-subtle); }
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--space-2xs); }

/* Woo tabs, reviews */
.woocommerce-tabs { margin-top: var(--space-3xl); }
/* `overflow-x: auto` alone computes overflow-y to `auto` as well, and the
   active tab's underline pseudo-element then earns the strip a stray vertical
   scrollbar on platforms with classic scrollbars. Pin the other axis. */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--space-l); border: 0; border-bottom: var(--hairline); display: flex; gap: var(--space-l); overflow-x: auto; overflow-y: hidden; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	position: relative;
	display: block;
	padding: var(--space-s) 0;
	color: var(--text-subtle);
	font-family: var(--font-display);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: var(--accent-ink); transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur-base) var(--ease-out);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: var(--measure); margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* The tab panel ends flush against this band, so a full section rhythm here
   reads as a hole rather than a break: tight rhythm above, normal below. */
.woocommerce div.product .woocommerce-tabs { padding-bottom: var(--space-l); }
.related-products { padding-block: var(--section-y-tight); background: var(--surface); }

/* Grid stretches the list item; the card has to stretch with it, or a card
   whose title wraps to a second line leaves the row with ragged bottoms. */
.woocommerce ul.products li.product > .product-card { flex: 1 1 auto; }

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

/* The quantity drives the cart directly (assets/js/cart.js), so the button
   that used to be the only way to apply a change is redundant once the script
   is running. It stays in the markup as the no-JS path. */
.woocommerce-cart-form.is-auto [name="update_cart"] { display: none; }
.cart-auto-status { margin: 0; color: var(--text-subtle); font-size: var(--step--1); }
.cart-layout.is-updating { opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-out); }
/* Nothing in the cart is clickable while its numbers are being recalculated. */
.cart-layout.is-updating a,
.cart-layout.is-updating button,
.cart-layout.is-updating input { pointer-events: none; }

.cart-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 960px) { .cart-layout { grid-template-columns: 1.6fr 0.9fr; } }

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}
.woocommerce table.shop_table th { background: var(--surface); border: 0; border-bottom: var(--hairline); }
.woocommerce table.shop_table td { border: 0; border-bottom: var(--hairline); padding: var(--space-s); }
.woocommerce table.cart img { width: 68px; border-radius: var(--radius-m); }
.woocommerce a.remove {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	color: var(--text-subtle) !important;
	background: var(--surface);
	font-size: var(--step-0); line-height: 1;
	text-decoration: none;
}
.woocommerce a.remove:hover { background: var(--danger-soft); color: var(--danger) !important; }
.woocommerce-cart table.cart td.actions .button,
.woocommerce-cart .cart .button, .woocommerce-cart .cart input.button {
	min-height: 48px;
	padding: 0 var(--space-l);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--ink);
	color: var(--white);
	font-weight: 600;
	font-size: var(--step-0);
	cursor: pointer;
}
.woocommerce-cart .cart .button:hover, .woocommerce-cart .cart input.button:hover { background: var(--ink-hover); }

.cart-summary {
	display: block;
	padding: var(--space-l);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--surface);
}
@media (min-width: 960px) { .cart-summary { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
.cart-summary h2 { font-size: var(--step-1); }
.woocommerce-cart .cart-collaterals { width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-cart .cart_totals h2 { font-size: var(--step-1); }
.woocommerce .wc-proceed-to-checkout { padding: 0; margin-top: var(--space-s); }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex; align-items: center; justify-content: center;
	min-height: 52px; margin: 0;
	border-radius: var(--radius-full);
	background: var(--accent-ink);
	color: var(--white);
	font-size: var(--step-0); font-weight: 600;
	text-decoration: none;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent-ink-hover); }

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

.woocommerce-checkout .col2-set { display: grid; gap: var(--space-l); width: 100%; }
@media (min-width: 720px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout h3 { font-size: var(--step-1); }
.woocommerce form .form-row { display: grid; padding: 0; margin: 0 0 var(--space-m); }
.woocommerce form .form-row label { margin-bottom: var(--space-2xs); font-size: var(--step--1); font-weight: 600; color: var(--text); }
.woocommerce form .form-row .required { color: var(--danger); text-decoration: none; }
.woocommerce .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--border-strong); border-radius: var(--radius-m); }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: var(--space-s); color: var(--text); }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }

.checkout-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1000px) { .checkout-layout { grid-template-columns: 1.5fr 1fr; } }
#order_review, .checkout-review {
	padding: var(--space-l);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--surface);
}
@media (min-width: 1000px) { .checkout-review { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
.woocommerce #payment { background: transparent; border-radius: 0; }
.woocommerce #payment ul.payment_methods { padding: 0; border-bottom: 0; }
.woocommerce #payment div.form-row { padding: var(--space-m) 0 0; }
.woocommerce #payment #place_order {
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--accent-ink);
	color: var(--white);
	font-size: var(--step-0);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce #payment #place_order:hover { background: var(--accent-ink-hover); transform: translateY(-2px); }

/* ---------- My account ------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-bottom: var(--space-l); }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
@media (min-width: 900px) {
	.logged-in.woocommerce-account .woocommerce { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-2xl); align-items: start; }
	.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 0; }
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li { margin: 0; border-bottom: var(--hairline); }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--space-s) var(--space-2xs);
	color: var(--text-muted);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.woocommerce-MyAccount-navigation li a:hover { color: var(--accent-text); padding-left: var(--space-s); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--text); font-weight: 600; }

/* ---------- Woo messages ------------------------------------------------------------ */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex; flex-wrap: wrap; gap: var(--space-s);
	align-items: center;
	margin: 0 0 var(--space-l);
	padding: var(--space-s) var(--space-m);
	border: 0;
	border-left: 3px solid var(--info);
	border-radius: var(--radius-m);
	background: var(--info-soft);
	color: var(--text);
	font-size: var(--step--1);
	list-style: none;
}
.woocommerce-message { border-color: var(--success); background: var(--success-soft); }
.woocommerce-error { border-color: var(--danger); background: var(--danger-soft); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message .button, .woocommerce-info .button {
	min-height: 40px; padding: 0 var(--space-m);
	border-radius: var(--radius-full);
	background: var(--ink); color: var(--white);
	font-size: var(--step--1); font-weight: 600;
	display: inline-flex; align-items: center;
	text-decoration: none;
	margin-left: auto;
}

/* Woo's generic .button, wherever it escapes our templates */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px;
	padding: 0 var(--space-l);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--accent-ink);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: var(--accent-ink-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-accent);
	color: var(--white);
}
.woocommerce .button.loading { opacity: 0.7; pointer-events: none; }
.woocommerce a.added_to_cart { display: inline-flex; align-items: center; margin-left: var(--space-2xs); font-size: var(--step--1); font-weight: 600; }

/* Cart-add pulse */
@keyframes pr-cart-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.cart-count.is-bumped { animation: pr-cart-pop var(--dur-slow) var(--ease-spring); }

/* ---------- Card frame + wishlist toggle -------------------------------------- */

.product-card__frame { position: relative; }
.product-card__badges { pointer-events: none; }

.product-card__wish {
	position: absolute;
	top: var(--space-2xs);
	right: var(--space-2xs);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--on-ink-90);
	color: var(--text-muted);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}
.product-card:hover .product-card__wish,
.product-card__wish:focus-visible,
.product-card__wish.is-on { opacity: 1; transform: none; }
.product-card__wish:hover { color: var(--accent-text); background: var(--white); }
.product-card__wish .icon { width: 19px; height: 19px; }
.product-card__wish.is-on { color: var(--accent-text); }
.product-card__wish.is-on .icon { fill: currentColor; }

/* Touch devices have no hover, so the control is always visible there. */
@media (hover: none) {
	.product-card__wish { opacity: 1; transform: none; }
}

/* ---------- Woo loop wrappers that live outside .woocommerce ------------------- */

ul.products {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.products::before, ul.products::after { content: none; }
ul.products li.product { margin: 0; }
.related.products > h2, .upsells.products > h2, .cross-sells > h2 {
	margin-bottom: var(--space-l);
	font-size: var(--step-2);
}


/* ---------- Product gallery ------------------------------------------------------
   Woo's gallery markup is kept (zoom, lightbox, slider all rely on it) and given
   the card shape the rest of the page uses.
   -------------------------------------------------------------------------------- */

.woocommerce-product-gallery {
	position: relative;
	margin: 0;
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--surface);
	overflow: hidden;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery .woocommerce-product-gallery__image { margin: 0; }
/*
 * No forced ratio here. The PDP is the one place the shot should be shown
 * exactly as it was taken, and the img carries its own width/height attributes
 * so the browser still reserves the right box — no layout shift, no letterbox.
 */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image img {
	object-fit: contain;
	padding: clamp(24px, 6vw, 64px);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-s);
	right: var(--space-s);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--frost);
	box-shadow: var(--shadow-s);
	font-size: 0; /* icon-only control: hides Woo's magnifier glyph */
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-out);
}
.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 20px; height: 20px;
	background-color: var(--text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-product-gallery__trigger:hover { background: var(--white); }
/* No images means nothing to zoom into. */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__trigger { display: none; }

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: var(--space-2xs) 0 0;
	padding: var(--space-2xs);
	list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img {
	width: 76px; height: 76px;
	object-fit: cover;
	border: var(--hairline);
	border-radius: var(--radius-m);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--accent-text); }

/* ---------- Variation form ---------------------------------------------------------- */

.woocommerce div.product form.cart .variations { display: grid; gap: var(--space-s); }
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr { display: contents; }
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value { display: block; width: 100%; }
.woocommerce div.product form.cart .variations th.label { padding-bottom: 4px; background: none; text-transform: none; }
.woocommerce div.product form.cart .single_variation_wrap { display: grid; gap: var(--space-s); }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .button { flex: 1 1 200px; }
/* Woo marks the add-to-cart button unavailable with a class, not the disabled
   attribute, so it stays in the accessibility tree and its label still has to
   be readable. Recolour it rather than fading it out. */
.woocommerce div.product form.cart .button[disabled],
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button[aria-disabled="true"] {
	--btn-bg: var(--surface-2);
	--btn-color: var(--text-muted);
	--btn-border: var(--border-strong);
	opacity: 1;
	box-shadow: none;
	cursor: not-allowed;
}

/* Woo 11 validates the coupon field inline; it ships the markup, not the look. */
.woocommerce .coupon .input-text.has-error,
.woocommerce .coupon .input-text[aria-invalid="true"] {
	border-color: var(--danger);
	background: var(--danger-soft);
}

.woocommerce .coupon-error-notice {
	margin: var(--space-2xs) 0 0;
	font-size: var(--step--1);
	color: var(--danger);
}

/* Small Woo links that sit on their own line rather than inside a sentence, so
   the inline exception to the minimum target size does not cover them. */
.woocommerce a.reset_variations,
.woocommerce-LostPassword a { display: inline-flex; align-items: center; min-height: 24px; }

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

.cart-layout__items { min-width: 0; }
.woocommerce-cart .cart-collaterals { width: 100%; float: none; }
.woocommerce-cart .cart-collaterals .cross-sells { width: 100%; float: none; }

.woocommerce table.cart td.actions {
	padding: var(--space-m) var(--space-s);
	border-bottom: 0;
}
.woocommerce table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: center;
	float: none;
	margin-bottom: var(--space-s);
}
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce table.cart td.actions .coupon #coupon_code {
	width: auto;
	min-width: 200px;
	flex: 1 1 200px;
}
.woocommerce table.cart td.actions > .button { float: none; }
.woocommerce table.cart img.woocommerce-placeholder,
.woocommerce table.cart img { width: 68px; height: 68px; object-fit: cover; background: var(--surface); }

.woocommerce-cart .cart_totals table.shop_table th { background: transparent; text-transform: none; letter-spacing: 0; }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.cart-summary .cart_totals h2 { margin-bottom: var(--space-s); }

.woocommerce .cross-sells { margin-top: var(--space-3xl); }
.woocommerce .cross-sells > h2 { font-size: var(--step-2); margin-bottom: var(--space-l); }

/* Update cart is a secondary action — it should not compete with Apply coupon
   or with Proceed to checkout. */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text);
}
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover {
	background: transparent;
	border-color: var(--accent-text);
	color: var(--accent-text);
	box-shadow: none;
}
.woocommerce-cart button[name="update_cart"][disabled] { opacity: 0.45; }

/* ---------- Woo clearfix pseudos vs. grid ------------------------------------------
   woocommerce-layout.css clears floats with `content: " "; display: table` on
   ::before/::after. Once the same element is a grid container those pseudos
   become grid ITEMS and take the first cell — which silently swapped the
   checkout columns. Remove them wherever we lay out with grid.
   ---------------------------------------------------------------------------------- */

.woocommerce .col2-set::before, .woocommerce .col2-set::after,
.woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after,
.woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after,
.woocommerce form.checkout::before, .woocommerce form.checkout::after,
.woocommerce .woocommerce-MyAccount-content::before,
.woocommerce .woocommerce-MyAccount-content::after,
.woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after {
	content: none;
}

/* ---------- Checkout: two columns, sticky summary ----------------------------------- */

@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.45fr 1fr;
		/* Explicit rows: with auto placement the order box fell to row 2 of the
		   grid and ended up ~1000px below its own heading. */
		grid-template-rows: auto 1fr;
		gap: var(--space-m) var(--space-2xl);
		align-items: start;
	}
	.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout form.checkout > h3#order_review_heading { grid-column: 2; grid-row: 1; margin-bottom: 0; }
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; }
	.woocommerce-checkout #order_review { position: sticky; top: calc(var(--header-h) + var(--space-m)); }
}

/* Billing and the notes field stack inside their own column rather than
   splitting it in half — the notes box does not need 50% of the page. */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col2-set { grid-template-columns: 1fr; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; }
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 { font-size: var(--step-1); }
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td { padding: var(--space-xs) var(--space-2xs); }
.woocommerce-checkout table.shop_table tfoot th { background: transparent; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
@media (min-width: 560px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--space-s);
	}
	.woocommerce form .form-row-wide, .woocommerce form #order_comments_field { grid-column: 1 / -1; }
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: var(--space-l); }

/* ---------- Pagination (Woo's own markup) --------------------------------------- */

.woocommerce-pagination { margin-top: var(--space-2xl); }
.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li { margin: 0; border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--space-xs);
	border: var(--hairline);
	border-radius: var(--radius-m);
	color: var(--text);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--accent-text);
	color: var(--accent-text);
	background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

/* Touch target floor for the card's save control. */
.product-card__wish { width: 44px; height: 44px; }

/* Woo's layout sheet floats the gallery at 48% of the column; the theme lays
   the PDP out with grid, so the gallery takes its whole column instead. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 100%;
	float: none;
	margin: 0;
}
.woocommerce div.product div.images .flex-viewport { border-radius: var(--radius-l); }

/*
 * This used to force 4:3 on the belief that "live's product photography is
 * landscape". 17 of the 66 shots are portrait, and 4:3 on `cover` beheaded
 * every one of them. Square + `contain` (set above) shows all of both shapes.
 */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; }

/* ---------- Dark shop / category hero ------------------------------------------- */

.shop-hero--ink { padding-block: var(--space-2xl); }
.shop-hero--ink h1 { color: var(--white); }

/* The product page opens on the same band, just a slim breadcrumb-only strip. */
.shop-hero--slim {
	padding-block: var(--space-m);
	background-color: var(--ink);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 0;
}
.shop-hero--slim::before {
	content: "";
	position: absolute;
	inset: -200% -10% auto -10%;
	height: 500%;
	z-index: -2;
	background:
		radial-gradient(46% 58% at 82% 40%, var(--veil-accent-md) 0%, transparent 62%),
		var(--gradient-ink);
}
.shop-hero--slim::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.35;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104' fill='none' stroke='%2335c97f' stroke-opacity='0.28' stroke-width='1'%3E%3Cpath d='M30 2l28 16v32L30 66 2 50V18z'/%3E%3Cpath d='M90 2l28 16v32L90 66 62 50V18z'/%3E%3Cpath d='M60 54l28 16v32L60 118 32 102V70z'/%3E%3C/svg%3E");
	background-size: 120px 104px;
}

/* The chips sit on ink, so they take the ink surface rather than a white pill. */
.shop-hero--ink .subcat-chip {
	background: var(--on-ink-6);
	border-color: var(--on-ink-22);
	color: var(--on-ink);
}
.shop-hero--ink .subcat-chip:hover,
.shop-hero--ink .subcat-chip[aria-current="page"] {
	border-color: var(--accent-lift);
	color: var(--accent-lift);
}
.shop-hero--ink .subcat-chip span { color: var(--on-ink-muted); }

/* Products live carries with no price at all. */
.price--none {
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text-subtle);
	letter-spacing: 0;
}


/* ---------- Account: signed out ------------------------------------------------- */

.auth-layout {
	display: grid;
	gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
	align-items: start;
}
@media (min-width: 900px) { .auth-layout { grid-template-columns: minmax(0, 520px) 1fr; } }

.auth-card {
	padding: clamp(var(--space-l), 3vw, var(--space-xl));
	background: var(--bg);
	border: var(--hairline);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-m);
}
.auth-card h2 {
	margin-bottom: var(--space-m);
	font-size: var(--step-2);
	text-align: left;
}
.auth-card .woocommerce-form-login { margin: 0; padding: 0; border: 0; }
.auth-card .woocommerce-form-row { margin-bottom: var(--space-m); }
.auth-card label { display: block; margin-bottom: var(--space-2xs); font-size: var(--step--1); font-weight: 600; color: var(--text); }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] { width: 100%; }

/* Woo's show/hide password control. */
.auth-card .woocommerce-form-login__password,
.auth-card .password-input { position: relative; display: block; width: 100%; }
.auth-card .show-password-input {
	position: absolute;
	top: 50%;
	right: var(--space-s);
	transform: translateY(-50%);
	width: 24px; height: 24px;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.55;
}
.auth-card .show-password-input:hover { opacity: 1; }
.auth-card input[type="password"] { padding-right: var(--space-xl); }

.auth-card .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	font-size: var(--step--1);
	font-weight: 500;
	color: var(--text-muted);
}
.auth-card .woocommerce-form-login__rememberme input { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent-ink); }

.auth-card .woocommerce-form-login__submit,
.auth-card button[name="login"],
.auth-card button[name="register"] { width: 100%; margin: var(--space-m) 0 0; }

.auth-card .lost_password { margin: var(--space-s) 0 0; font-size: var(--step--1); }
.auth-card .lost_password a { color: var(--text-muted); }
.auth-card .lost_password a:hover { color: var(--accent-text); }

/* Woo ships the signed-out screen as a FLOATED .col2-set, which splits the card
   into two ~174px columns — narrower than the register form's privacy paragraph
   can set, so every line broke after three or four words. Stack them instead and
   give each form the full width of the card. */
.auth-card .u-columns,
.auth-card .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	width: 100%;
}
.auth-card .col2-set .col-1,
.auth-card .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}
/* A rule above Register so it reads as its own offer and not as more of the
   login form. */
.auth-card .col2-set .col-2 {
	padding-top: var(--space-l);
	border-top: var(--hairline);
}
.auth-card .woocommerce-form-register > p:not(.woocommerce-form-row),
.auth-card .woocommerce-privacy-policy-text p {
	font-size: var(--step--1);
	color: var(--text-muted);
	line-height: 1.55;
}

.auth-aside h2 { max-width: 22ch; }
/* Stacking the two forms makes the card taller than the panel beside it, which
   left the right half empty on the way down. Same sticky treatment as .legal-toc. */
@media (min-width: 900px) { .auth-aside { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
.auth-benefits { display: grid; gap: var(--space-l); margin: var(--space-xl) 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; gap: var(--space-s); align-items: flex-start; margin: 0; }
.auth-benefits .card-icon { margin-bottom: 0; flex: none; width: 42px; height: 42px; }
.auth-benefits h3 { margin-bottom: 2px; font-size: var(--step-0); }
.auth-benefits p { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Mobile shop ---------------------------------------------------------- */

@media (max-width: 999px) {
	/* Open state reads as a panel rather than a loose stack of lists. */
	.shop-filters.is-open {
		padding: var(--space-m);
		border: var(--hairline);
		border-radius: var(--radius-l);
		background: var(--bg);
		box-shadow: var(--shadow-s);
	}
	.filters-toggle[aria-expanded="true"] { border-color: var(--accent-text); color: var(--accent-text); }
}

/* Product detail tabs: two rows on a phone rather than one row that scrolls
   sideways. A tab nobody can see is a tab nobody reads, and horizontal
   scrolling inside a page that scrolls vertically goes unnoticed. */
@media (max-width: 767px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		overflow: visible;
		border-bottom: 0;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		border-bottom: var(--hairline);
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		display: block;
		padding-inline: var(--space-3xs);
		text-align: center;
		/* Long labels ("Shipping & storage") wrap instead of being clipped. */
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Two products per row on phones — one per row wasted half the screen. */
@media (max-width: 639px) {
	.products-grid,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-s);
	}

	.product-card__body { gap: var(--space-3xs); padding: var(--space-s); }
	.product-card__cat {
		font-size: var(--step--3);
		letter-spacing: 0.06em;
		/* Two lines maximum: some category names are very long. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* Still the largest text in the body on a phone, where the card is only
	   half the screen wide. */
	.product-card__title { font-size: var(--step-0); line-height: 1.22; min-height: calc(2em * 1.22); }
	.product-card .price { font-size: var(--step-0); padding-top: 0; }
	.product-card__buy { margin-top: var(--space-2xs); }
	.product-card__buy .btn { min-height: 40px; padding-inline: var(--space-xs); font-size: var(--step--2); }
	.product-card__badges { top: 6px; left: 6px; right: 52px; gap: 4px; }
	.product-card__badges .badge { padding: var(--space-3xs) var(--space-2xs); font-size: var(--step--3); letter-spacing: 0.03em; }
	.product-card__wish { top: 4px; right: 4px; }
}

/* ==========================================================================
   Volume pricing — the tier table on the product page and its cart echo.

   Deliberately NOT named #tier-table. Live carries a WPCode snippet (#3619)
   that styles that id with ~30 !important declarations in the old theme's
   palette; scoping to .pdp-tiers means the client's snippet can stay in place,
   as they asked, without fighting this design for control of the table.
   ========================================================================== */

.pdp-tiers {
	margin-top: var(--space-l);
	padding: var(--space-m);
	border: var(--hairline);
	border-radius: var(--radius-l);
	background: var(--surface);
}

.pdp-tiers__head { margin-bottom: var(--space-s); }

.pdp-tiers__head h2 {
	font-size: var(--step-0);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-heading);
	margin: 0;
}

.pdp-tiers__head .form-note { margin-top: 4px; }

.pdp-tiers__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg);
	border: var(--hairline);
	border-radius: var(--radius-m);
	overflow: hidden;
}

.pdp-tiers__table th,
.pdp-tiers__table td {
	padding: var(--space-2xs) var(--space-s);
	text-align: left;
	font-size: var(--step--1);
	border-bottom: var(--hairline);
}

.pdp-tiers__table thead th {
	font-family: var(--font-body);
	font-size: var(--step--3);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-subtle);
	background: var(--surface);
}

.pdp-tiers__table tbody th { font-weight: 600; color: var(--text); }
.pdp-tiers__table tbody tr:last-child th,
.pdp-tiers__table tbody tr:last-child td { border-bottom: 0; }
.pdp-tiers__table td:last-child { text-align: right; font-weight: 600; }

/* The row the customer's current quantity lands on. Colour is not the only
   signal — the weight change and the left rule carry it too. */
.pdp-tiers__table tbody tr.is-active > * {
	background: var(--accent-soft);
	color: var(--text);
	font-weight: 700;
}

.pdp-tiers__table tbody tr.is-active th {
	box-shadow: inset 3px 0 0 0 var(--accent-ink);
}

.pdp-tiers__live {
	margin: var(--space-s) 0 0;
	font-size: var(--step--1);
	color: var(--text-muted);
}

.pdp-tiers__live.is-discounted { color: var(--accent-text); font-weight: 600; }
.pdp-tiers__live strong { color: var(--text); }
.pdp-tiers__live.is-discounted strong { color: var(--accent-text); }

/* The saving, named on the cart line where it is taken. */
.tier-was { text-decoration: line-through; color: var(--text-subtle); }

.tier-off {
	display: inline-block;
	margin-left: var(--space-3xs);
	padding: 2px var(--space-2xs);
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: var(--step--3);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.pdp-tiers { padding: var(--space-s); }
	.pdp-tiers__table th,
	.pdp-tiers__table td { padding: var(--space-2xs) var(--space-xs); font-size: var(--step--2); }
}

/* ==========================================================================
   Cart — shipping methods and the address calculator.

   WooCommerce ships this block as a bare <ul> of radios plus a form of plain
   fields, and the theme dequeues woocommerce-general, so until now it landed on
   the cart page completely unstyled: bullet points, naked radios and an
   unaligned country select.

   🛑 The selectors carry `table.shop_table tr.shipping` deliberately. The cart
   totals rule right-aligns every <td> with tabular numerals — correct for money,
   wrong for a list of choices — and it scores (0,3,2), so anything lighter than
   this loses to it and the list stays right-aligned.
   ========================================================================== */

/* The shipping row spans the full width of its table on both pages, so the
   method cards match the payment cards on checkout instead of being squeezed
   into the narrow value column of a two-column totals table. */
.woocommerce-cart .cart_totals table.shop_table tr.shipping th,
.woocommerce-cart .cart_totals table.shop_table tr.shipping td,
.woocommerce-checkout table.shop_table tr.shipping th,
.woocommerce-checkout table.shop_table tr.shipping td {
	display: block;
	width: 100%;
	text-align: left;
	font-variant-numeric: normal;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping th,
.woocommerce-checkout table.shop_table tr.shipping th {
	padding-bottom: var(--space-3xs);
	border-bottom: 0;
	background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping td,
.woocommerce-checkout table.shop_table tr.shipping td {
	padding-top: 0;
	padding-bottom: var(--space-s);
}

/* ---- The list of methods ---------------------------------------------- */

.woocommerce ul#shipping_method,
.woocommerce ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3xs);
}

/* Same card as a payment method — same border, radius, height and selected
   ring — so the two choice lists on checkout read as one system. */
.woocommerce ul#shipping_method li,
.woocommerce ul.woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	width: 100%;
	margin: 0;
	padding: var(--space-xs);
	border: var(--hairline);
	border-radius: var(--radius-m);
	background: var(--bg);
	/* The row is the target, not just the 18px radio (WCAG 2.5.8). */
	min-height: 52px;
	transition: border-color var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}

.woocommerce ul#shipping_method li:hover,
.woocommerce ul.woocommerce-shipping-methods li:hover {
	border-color: var(--border-strong);
}

/* A single available method renders as a hidden input plus a label — there is
   nothing to choose, so it should read as a statement, not a dead control. */
.woocommerce ul#shipping_method li:has(> input[type="hidden"]) {
	background: var(--surface);
	border-style: dashed;
}

.woocommerce ul#shipping_method li input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--accent-ink);
	cursor: pointer;
}

.woocommerce ul#shipping_method li label { padding: 0; }

.woocommerce ul#shipping_method li label {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2xs);
	font-size: var(--step--1);
	line-height: var(--lh-snug);
	cursor: pointer;
}

.woocommerce ul#shipping_method li label .woocommerce-Price-amount {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The chosen row, stated in weight and colour rather than colour alone. */
.woocommerce ul#shipping_method li:has(> input[type="radio"]:checked) {
	border-color: var(--accent-ink);
	box-shadow: 0 0 0 1px var(--accent-ink);
}

.woocommerce ul#shipping_method li:has(> input[type="radio"]:checked) label { font-weight: 600; }

.woocommerce ul#shipping_method li:has(> input[type="radio"]:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ---- "Shipping to X" + the change-address toggle ----------------------- */

.woocommerce .woocommerce-shipping-destination {
	margin: var(--space-2xs) 0 0;
	font-size: var(--step--1);
	color: var(--text-subtle);
}

.woocommerce .woocommerce-shipping-destination strong { color: var(--text); }

.woocommerce .shipping-calculator-button {
	display: inline-block;
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.woocommerce .shipping-calculator-button:hover { color: var(--accent-text-hover); }

/* ---- The address calculator ------------------------------------------- */

.woocommerce .shipping-calculator-form {
	margin-top: var(--space-s);
	padding: var(--space-s);
	border: var(--hairline);
	border-radius: var(--radius-m);
	background: var(--bg);
	display: grid;
	gap: var(--space-2xs);
}

.woocommerce .shipping-calculator-form .form-row {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
}

.woocommerce .shipping-calculator-form label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--step--2);
	font-weight: 600;
	color: var(--text-muted);
}

.woocommerce .shipping-calculator-form select,
.woocommerce .shipping-calculator-form input.input-text,
.woocommerce .shipping-calculator-form .select2-container .select2-selection--single {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--space-2xs);
	border: var(--hairline-strong);
	border-radius: var(--radius-s);
	background: var(--bg);
	color: var(--text);
	font-family: inherit;
	font-size: var(--step--1);
}

.woocommerce .shipping-calculator-form select:focus-visible,
.woocommerce .shipping-calculator-form input.input-text:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

/* select2 is what Woo actually renders the country field as; line its inner
   parts up with the plain controls above rather than leaving it a head taller. */
.woocommerce .shipping-calculator-form .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce .shipping-calculator-form .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--text);
}

.woocommerce .shipping-calculator-form .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

.woocommerce .shipping-calculator-form button.button {
	justify-self: start;
	min-height: 44px;
	margin-top: var(--space-3xs);
	padding: 0 var(--space-m);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--ink);
	color: var(--white);
	font-weight: 600;
	font-size: var(--step--1);
	cursor: pointer;
}

.woocommerce .shipping-calculator-form button.button:hover { background: var(--ink-hover); }

/* ---- Checkout uses the same list ---------------------------------------- */

.woocommerce-checkout ul#shipping_method { margin-bottom: var(--space-2xs); }



/* ==========================================================================
   Checkout — payment methods.

   WooCommerce ships this as a plain <ul> of radios, each with a hidden
   `.payment_box` description, and the theme dequeues woocommerce-general — so
   the five live gateways (ByteNFT, CLKK, Zelle, Link Money, Zeno) landed on
   the page as bullet points with naked radios and unstyled description text.

   Each method is a selectable card. The description panel belongs to the chosen
   card, so it is tinted and notched into it rather than floating underneath —
   on this store those panels carry the Zelle address and the "upload your proof
   of payment" instruction, which a customer must not miss.
   ========================================================================== */

.woocommerce #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--space-s);
	display: grid;
	gap: var(--space-2xs);
}

/* 🛑 The <li> itself has to be the flex row. WooCommerce renders the radio and
   the label as SIBLINGS inside this <li>; making only the label a flex container
   leaves it a block-level box, so it drops onto the line below the radio. The
   description panel is a third sibling and is pushed to its own full-width line
   by flex-basis, not by a wrapper. */
.woocommerce #payment ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	border: var(--hairline);
	border-radius: var(--radius-m);
	background: var(--bg);
	overflow: hidden;
	transition: border-color var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}

.woocommerce #payment ul.payment_methods li.wc_payment_method:hover { border-color: var(--border-strong); }

/* The whole row is the target, not the 18px radio (WCAG 2.5.8). */
.woocommerce #payment ul.payment_methods li.wc_payment_method > label {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	padding: var(--space-xs);
	min-height: 52px;
	font-size: var(--step--1);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--text);
	cursor: pointer;
}

.woocommerce #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0 0 0 var(--space-xs);
	accent-color: var(--accent-ink);
	cursor: pointer;
}

/* Gateway logos: keep them from setting the row height. */
.woocommerce #payment ul.payment_methods li.wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	margin-left: auto;
}

/* The selected method — weight and a border, not colour alone.
   🛑 `:has(> input…)`, with the child combinator. Link Money renders a set of
   saved-bank-account radios INSIDE its .payment_box, one of them checked, so a
   plain descendant :has() lit that card up as selected while its own radio was
   unchecked. */
.woocommerce #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
	border-color: var(--accent-ink);
	box-shadow: 0 0 0 1px var(--accent-ink);
}

.woocommerce #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) > label {
	font-weight: 600;
}

.woocommerce #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ---- The description panel --------------------------------------------- */

.woocommerce #payment div.payment_box {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	/* Text lines up under the label: radio inset + radio + the label's own
	   left padding. */
	padding: var(--space-s) var(--space-xs) var(--space-s) calc(var(--space-xs) + 18px + var(--space-xs));
	border-top: var(--hairline);
	background: var(--surface);
	color: var(--text-muted);
	font-size: var(--step--2);
	line-height: var(--lh-body);
	/* Woo's own arrow is drawn by the stylesheet we drop; nothing to reset. */
}

.woocommerce #payment div.payment_box::before { content: none; }

.woocommerce #payment div.payment_box p { margin: 0 0 var(--space-2xs); }
.woocommerce #payment div.payment_box p:last-child { margin-bottom: 0; }

/* Gateways put contact details and payment instructions in here — the Zelle
   address, the proof-of-payment step — so give them emphasis rather than
   letting them read as small print. */
.woocommerce #payment div.payment_box strong,
.woocommerce #payment div.payment_box b { color: var(--text); }

.woocommerce #payment div.payment_box a {
	color: var(--accent-text);
	font-weight: 600;
}

.woocommerce #payment div.payment_box ul,
.woocommerce #payment div.payment_box ol { margin: 0 0 var(--space-2xs); padding-left: var(--space-m); }

.woocommerce #payment div.payment_box input[type="text"],
.woocommerce #payment div.payment_box input[type="tel"],
.woocommerce #payment div.payment_box input[type="email"],
.woocommerce #payment div.payment_box select {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--space-2xs);
	border: var(--hairline-strong);
	border-radius: var(--radius-s);
	background: var(--bg);
	font-family: inherit;
	font-size: var(--step--1);
}

/* A couple of gateways inject a <script> straight into the box; it must not
   occupy a line of its own. */
.woocommerce #payment div.payment_box script { display: none; }

/* ---- Terms, privacy and the order button -------------------------------- */

.woocommerce #payment .woocommerce-privacy-policy-text,
.woocommerce #payment .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--step--2);
	color: var(--text-subtle);
}

.woocommerce #payment .woocommerce-privacy-policy-text p { margin: 0 0 var(--space-2xs); }

.woocommerce #payment .form-row.place-order { padding-top: var(--space-s); }

/* Certificates linked to this product (Certificate of analysis box in wp-admin). */
.pdp-coas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.pdp-coa {
	display: grid; gap: var(--space-3xs, 4px);
	padding: var(--space-2xs);
	border: 1px solid var(--accent-soft-strong);
	border-radius: var(--radius-m);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pdp-coa:hover, .pdp-coa:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-m, 0 6px 18px rgba(0,0,0,.08)); }
.pdp-coa__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--radius-s, 6px); background: #fff; }
.pdp-coa__label { font-size: var(--step--1); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pdp-coa__open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--step--2); color: var(--accent-text-hover); }
.pdp-coa__open svg { width: 14px; height: 14px; }