/* =========================================================================
   Savonije — WooCommerce layer (single product first).
   Loaded only on WooCommerce views. Layers dark chiaroscuro styling over
   WooCommerce's own markup; it never replaces Woo logic. Tokens come from
   style.css :root (CLAUDE.md s4). Palette is closed: no colours outside it.

   Specificity note: WooCommerce's own stylesheet uses selectors like
   `.woocommerce div.product .woocommerce-product-gallery` (0,3,1) and wins on
   load order for equal weight. Overrides here are deliberately scoped under
   `.single-product` (+ div.product where needed) to strictly outrank Woo,
   without touching cart/checkout, structure, or hooks.
   ========================================================================= */

/* WooCommerce's default content wrapper for this theme slug is
   #primary.content-area > main.site-main. Frame the OUTER element only, and
   neutralise the inner main.site-main — otherwise style.css's base .site-main
   rule (meant for non-Woo pages) applies a second max-width + padding + margin,
   double-boxing the product to ~952px and offsetting it. Frame once. */
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area {
	max-width: var(--content-max);
	margin: 0 auto;
	/* Bottom trimmed so the footer sits close to the last block (round 4). */
	padding: calc(var(--rhythm) * 0.6) var(--pad-inline) calc(var(--rhythm) * 0.4);
}
.woocommerce #primary.content-area > main.site-main,
.woocommerce-page #primary.content-area > main.site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ----- Notices (kept dark so the coming-soon gate reads as intentional) ----- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	background: var(--surface);
	color: var(--text-body);
	border: 0;
	border-top: 2px solid var(--gold);
	list-style: none;
	padding: 1.1rem 1.35rem;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message a,
.woocommerce-info a { color: var(--gold); }

/* Transitional: silence the OLD coming-soon snippet's hardcoded div (grey
   inline styles) while both notices coexist; once Michael deactivates that
   snippet this selector matches nothing and can be deleted at launch. */
div[style*="#1a1a1a"] {
	display: none;
}

/* =========================================================================
   The collection — a restrained gallery on ink (CLAUDE.md s8.4)
   One object per cell, generous gutters, whole cell one link. Cells reuse
   the .plate primitive, so museum framing and the following light apply.
   ========================================================================= */
.collection__header {
	margin: 0 0 clamp(2.4rem, 5vh, 4rem);
}
.collection__header .woocommerce-products-header__title {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: var(--fs-h2);
	line-height: 1.08;
	margin: 0.7rem 0 0;
}

/* The gallery grid serves the archive AND the related-pieces row on the
   single product (both loop through content-product.php). Cart cross-sells
   are untouched. */
.woocommerce.archive ul.products,
.woocommerce-page.archive ul.products,
.single-product .related.products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
}
/* Woo's clearfix pseudo-elements become stray grid items; grid needs none. */
.woocommerce.archive ul.products::before,
.woocommerce.archive ul.products::after,
.woocommerce-page.archive ul.products::before,
.woocommerce-page.archive ul.products::after,
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after {
	content: none;
	display: none;
}
.woocommerce.archive ul.products li.collection__cell,
.woocommerce-page.archive ul.products li.collection__cell,
.single-product .related.products ul.products li.collection__cell {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}
.collection__cell .woocommerce-LoopProduct-link {
	display: block;
	color: var(--paper);
}
.collection__plate {
	display: block;
	aspect-ratio: 3 / 4;
}
/* Outrank Woo's `.woocommerce ul.products li.product a img { height: auto }`
   (0,3,2) — height:auto leaves the 3:4 plate part-empty below the photo. */
.woocommerce.archive ul.products li.product .collection__plate img,
.woocommerce-page.archive ul.products li.product .collection__plate img,
.single-product .related.products ul.products li.product .collection__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Related pieces on the single product: quiet gallery row below the object. */
.single-product .related.products {
	margin-top: var(--rhythm);
	clear: both;
}
.single-product .related.products > h2 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: var(--fs-h2);
	line-height: 1.08;
	margin: 0 0 2.4rem;
}
.collection__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.1rem;
}
/* Outrank Woo's `.woocommerce ul.products li.product .woocommerce-loop-
   product__title { font-size: 1em }` (0,4,2), which shrank every gallery
   name to 16px against the teaser's 21.6px (audit finding 3). */
.collection__meta .woocommerce-loop-product__title,
.woocommerce ul.products li.product .collection__meta .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-piece);
	line-height: 1.2;
	color: var(--paper);
	padding: 0;
	margin: 0;
	transition: color var(--ease);
}
/* Woo's default olive on the .price wrapper: latent, cleaned for hygiene. */
.woocommerce ul.products li.product .collection__meta .price {
	color: var(--gold);
}
.collection__cell:hover .woocommerce-loop-product__title,
.collection__cell:focus-within .woocommerce-loop-product__title {
	color: var(--gold); /* the name warms to gold (s8.3/s8.4) */
}
.collection__meta .price,
.collection__meta .price .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-price-cell);
	color: var(--gold);
	white-space: nowrap;
	margin: 0;
}
.collection__meta .price del { opacity: 0.5; }
.collection__meta .price ins { text-decoration: none; }

/* Pagination, if the catalogue ever outgrows one page: quiet text links. */
.woocommerce.archive .woocommerce-pagination ul.page-numbers {
	border: 0;
	margin: var(--rhythm) 0 0;
	display: flex;
	justify-content: center;
	gap: 1.4rem;
}
.woocommerce.archive .woocommerce-pagination ul.page-numbers li {
	border: 0;
}
.woocommerce.archive .woocommerce-pagination .page-numbers {
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--taupe);
	background: transparent;
}
.woocommerce.archive .woocommerce-pagination .page-numbers.current,
.woocommerce.archive .woocommerce-pagination .page-numbers:hover {
	color: var(--gold);
	background: transparent;
}

@media (max-width: 820px) {
	.woocommerce.archive ul.products,
	.woocommerce-page.archive ul.products,
	.single-product .related.products ul.products {
		grid-template-columns: 1fr;
		gap: calc(var(--rhythm) * 0.6);
	}
}

/* =========================================================================
   Single product — plate | summary as one composition (CLAUDE.md s3, s8)
   ========================================================================= */
.single-product div.product {
	display: block;
}

/* Plate dominant, gap tightened so the two columns read as one composition. */
.single-product div.product .product__main {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

/* Neutralise Woo's float-based two-column layout inside the grid. */
.single-product div.product .product__plate,
.single-product div.product .summary.entry-summary {
	width: auto;
	float: none;
	margin: 0;
}

/* ----- The plate: one object surfacing from dark (CLAUDE.md s3) ----- */
.single-product div.product .product__plate {
	position: sticky;
	top: clamp(1.5rem, 4vh, 3rem);
}
/* Fill the column and outrank Woo's 48% float (0,4,1 > 0,3,1). The gallery
   fade joins the motion law; the slider is clipped so its cloned slides
   can never push the page sideways on mobile (audit: 26px overflow). */
.single-product div.product .product__plate .woocommerce-product-gallery {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	background: var(--ink);
	border: 1px solid var(--hairline-gold-soft);
	padding: clamp(1.25rem, 2.4vw, 2.5rem);
	overflow: hidden;
	transition: opacity var(--ease);
}
.single-product .product__plate .flex-viewport {
	overflow: hidden;
	max-width: 100%;
}
/* Main image fills the plate; a wide container makes srcset pick a sharp
   candidate (the tiny 150px render was a symptom of the tiny 48% container). */
.single-product div.product .product__plate .woocommerce-product-gallery__wrapper,
.single-product div.product .product__plate .woocommerce-product-gallery__image,
.single-product div.product .product__plate .woocommerce-product-gallery__image a {
	width: 100%;
	margin: 0;
	display: block;
}
.single-product div.product .product__plate .woocommerce-product-gallery__image img,
.single-product div.product .product__plate .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
}

/* Thumbnail row: quiet, gold hairline, no rounded corners. Beat Woo's 25% cols. */
.single-product div.product .product__plate .flex-control-thumbs {
	margin: clamp(1rem, 1.6vw, 1.5rem) 0 0;
	padding: 0;
	display: flex;
	gap: 0.6rem;
	list-style: none;
}
.single-product div.product .product__plate .flex-control-thumbs li {
	margin: 0;
	width: auto;
	flex: 0 0 auto;
}
.single-product div.product .product__plate .flex-control-thumbs img {
	width: 72px;
	height: auto;
	opacity: 0.5;
	border: 1px solid transparent;
	transition: opacity var(--ease), border-color var(--ease);
	cursor: pointer;
}
.single-product div.product .product__plate .flex-control-thumbs img:hover,
.single-product div.product .product__plate .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--hairline-gold);
}
/* The specular lean (s7.2) moves the subject, never the thumbnail strip. */
.single-product div.product .product__plate .flex-control-thumbs img {
	transform: none;
}

/* Lightbox trigger — darken Woo's white circle (its selector is
   `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`,
   0,4,2). Hover-zoom itself is killed at theme-support level (s8.6). */
.woocommerce.single-product div.product .product__plate .woocommerce-product-gallery__trigger {
	background: var(--surface);
	border: 1px solid var(--hairline-gold);
	color: var(--gold);
}
.woocommerce.single-product div.product .product__plate .woocommerce-product-gallery__trigger::after {
	background: var(--gold);
}

/* =========================================================================
   The summary — tight, deliberate vertical rhythm (CLAUDE.md s6)
   ========================================================================= */
.single-product div.product .summary.entry-summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* Zero stray margins, then set an intentional ladder. */
.single-product div.product .summary.entry-summary > * {
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
}
/* …except the signature accent: 64px, never a full-bleed divider (audit). */
.single-product div.product .summary.entry-summary > .savonije-rule {
	width: 64px;
	margin: 1rem 0 1.25rem;
}
.single-product .summary .product_title {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: var(--fs-h2);
	line-height: 1.08;
	margin: 0;
}
/* The oxblood hairline is styled once, in style.css (.savonije-rule). */
/* price in gold Bodoni (CLAUDE.md s5) */
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--gold);
	font-size: var(--fs-price);
	line-height: 1.2;
}
.single-product .summary .price {
	margin: 0 0 1.5rem;
}
.single-product .summary .price del { opacity: 0.5; margin-right: 0.5rem; }
.single-product .summary .price ins { text-decoration: none; }

/* short description = lede voice (CLAUDE.md s5) */
.single-product .summary .woocommerce-product-details__short-description {
	color: var(--taupe);
	font-size: var(--fs-lede);
	line-height: 1.7;
	margin: 0 0 1.75rem;
	max-width: var(--measure-para);
}
.single-product .summary .woocommerce-product-details__short-description p { margin: 0 0 0.8rem; }
.single-product .summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* coming-soon gate / add-to-cart region sit flush in the ladder */
.single-product .summary form.cart,
.single-product .summary .woocommerce-info,
.single-product .summary .stock,
.single-product .summary .cart {
	margin: 0;
}
.single-product .summary .woocommerce-info { max-width: var(--measure-para); }

/* =========================================================================
   Buttons — one control language across the product page (CLAUDE.md s5/s6/s7)
   Add-to-basket and Read-more share the gold-outline treatment. Scoped to
   .single-product so cart/checkout controls are left alone.
   ========================================================================= */
.single-product .woocommerce a.button,
.single-product .woocommerce button.button,
.single-product a.button,
.single-product button.button,
.single-product .single_add_to_cart_button,
.single-product .summary .button {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--paper);
	background: transparent;
	border: 1px solid var(--gold);
	border-radius: 0;
	padding: 0.9rem 2rem;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}
.single-product .woocommerce a.button:hover,
.single-product .woocommerce a.button:focus,
.single-product .woocommerce button.button:hover,
.single-product a.button:hover,
.single-product a.button:focus,
.single-product button.button:hover,
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus,
.single-product .summary .button:hover,
.single-product .summary .button:focus {
	background: color-mix(in srgb, var(--gold) 16%, transparent);
	border-color: var(--gold);
	color: var(--paper);
}

/* quantity input */
.single-product form.cart {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}
.single-product form.cart .quantity { display: inline-flex; }
.single-product form.cart .quantity .qty {
	width: 4.5rem;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--hairline-gold);
	border-radius: 0;
	padding: 0.9rem 0.6rem;
	font-family: var(--font-body);
	text-align: center;
	-moz-appearance: textfield;
}

/* =========================================================================
   Tabs — kill Woo's white pill chrome, restyle dark (CLAUDE.md s3/s4/s5).
   Woo styles these with `.woocommerce div.product .woocommerce-tabs ...`
   (up to 0,4,3) and li.active with #fff. The `.woocommerce.single-product
   div.product` prefix (0,5,3+) outranks all of it, including the active tab
   and its white pseudo-element corners.
   ========================================================================= */
.single-product .woocommerce-tabs {
	margin-top: var(--rhythm);
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0 0 2.4rem;
	padding: 0 0 0.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	border-bottom: 1px solid var(--hairline-gold-soft);
}
/* remove Woo's tab-strip underline and the light tab boxes + curved corners */
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active::after {
	display: none;
	border: 0;
	box-shadow: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.24em;
	color: var(--taupe);
	padding: 0;
	text-shadow: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--gold);
}
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-Tabs-panel {
	max-width: var(--measure-text);
	color: var(--text-body);
	margin: 0;
}
.single-product .woocommerce-Tabs-panel h2 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: var(--fs-statement);
	line-height: 1.25;
	margin: 0 0 1.2rem;
}
.single-product .woocommerce-Tabs-panel p { max-width: none; }
.single-product .woocommerce-Tabs-panel ul,
.single-product .woocommerce-Tabs-panel ol {
	padding-left: 1.2rem;
	margin: 0 0 1.2rem;
}
.single-product .woocommerce-Tabs-panel li {
	margin-bottom: 0.5rem;
	list-style: disc;
}
.single-product .woocommerce-Tabs-panel li::marker { color: var(--taupe); }
.single-product .woocommerce-Tabs-panel strong { color: var(--paper); }

/* Reviews tab, related products, and upsells are pruned in functions.php
   (s8.5: one object contemplated at a time, not a funnel) — no styles needed. */

/* =========================================================================
   The basket — the house holds through the ask (s11: style with CSS,
   minimal template change). One control language: gold outline.
   ========================================================================= */
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--paper);
	background: transparent;
	border: 1px solid var(--gold);
	border-radius: 0;
	padding: 0.9rem 2rem;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}
.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: color-mix(in srgb, var(--gold) 16%, transparent);
	color: var(--paper);
}
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart p.cart-empty {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--hairline-gold-soft);
	color: var(--taupe);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.35rem;
	text-align: center;
	padding: 2.4rem 0 0.5rem;
}
.woocommerce-cart .return-to-shop {
	text-align: center;
	margin-top: 1.6rem;
}
/* Cart table + coupon field, for when the gate lifts. */
.woocommerce-cart table.shop_table {
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.woocommerce-cart table.shop_table th {
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.24em;
	color: var(--taupe);
	border: 0;
	border-bottom: 1px solid var(--hairline-gold);
	background: transparent;
}
.woocommerce-cart table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--hairline-gold-soft);
	background: transparent;
	color: var(--text-body);
}
.woocommerce-cart table.shop_table .woocommerce-Price-amount {
	color: var(--gold);
	font-family: var(--font-display);
}
.woocommerce-cart #coupon_code,
.woocommerce-cart .quantity .qty {
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--hairline-gold);
	border-radius: 0;
	padding: 0.7rem 0.8rem;
	font-family: var(--font-body);
}
/* The remove × — Woo core paints it bold red via `color: red !important`
   and flips to white on a red disc on hover. Specificity cannot reach an
   !important declaration, so colour and background must carry !important
   here — the only place in this file that needs it; do not "tidy" it
   away. Both selector shapes because Woo's markup nests inconsistently
   between the cart table and the totals area. 2.75rem square = a 44px
   tap target without moving the glyph off its baseline. */
.woocommerce-cart .woocommerce a.remove,
.woocommerce-cart a.remove {
	color: var(--taupe) !important;
	background: transparent !important;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.35rem;
	line-height: 1;
	border-radius: 0;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--ease);
}
.woocommerce-cart .woocommerce a.remove:hover,
.woocommerce-cart .woocommerce a.remove:focus,
.woocommerce-cart a.remove:hover,
.woocommerce-cart a.remove:focus {
	color: var(--gold) !important;
	background: transparent !important;
}
/* Basket rows on the phone. Measured at 320px with one item, before:
   253px per row, six stacked blocks (remove 63, thumbnail killed by
   Woo's display:none, name 43, price 43, quantity 61, subtotal 43),
   .cart_totals starting at 596px — three items push the checkout
   action past 1100px. The grid folds each line to three rows and
   restores the thumbnail. Breakpoint 768px, NOT the site's usual 820:
   Woo stacks the cart table at 768, so from 769 to 820 it still
   renders a real table and a grid there would tear it apart. Cell
   rules ride on tr.cart_item to outrank Woo's smallscreen selectors
   (0,4,3 vs 0,3,3), not on cascade order. */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table tbody tr.cart_item {
		display: grid;
		grid-template-columns: 60px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb price price"
			"thumb qty   subtotal";
		column-gap: 0.75rem;
		row-gap: 0.5rem;
		align-items: center;
		padding: 1.1rem 0;
		border-bottom: 1px solid var(--hairline-gold-soft);
	}
	/* The row owns frame and rhythm now; the desktop per-cell borders
	   and padding go. */
	.woocommerce-cart table.shop_table tr.cart_item td {
		border: 0;
		padding: 0;
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail {
		grid-area: thumb;
		display: block; /* Woo's stacked layout hides it */
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail img {
		width: 60px;
		height: auto;
		display: block;
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-name {
		grid-area: name;
		text-align: left !important;
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-price {
		grid-area: price;
		text-align: left !important;
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-quantity {
		grid-area: qty;
		text-align: left !important;
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal {
		grid-area: subtotal;
		text-align: right !important;
	}
	.woocommerce-cart table.shop_table tr.cart_item td.product-remove {
		grid-area: remove;
		align-self: start;
		justify-self: end;
	}
	/* Inside the grid the input must not push the subtotal off. */
	.woocommerce-cart table.shop_table tr.cart_item td.product-quantity .qty {
		width: 3.5rem;
		text-align: center;
	}
	/* Woo's ::before column labels all go on mobile: at 320px they
	   overlap their own values. The layout carries the meaning — a
	   number box on the left, a price on the right. Woo right-aligns
	   every td to seat those labels — with text-align: right
	   !important, so the resets above must carry !important too
	   (same situation as the remove ×). All four carry it, subtotal
	   included, so nobody wonders later why three do and one does
	   not. Without the reset the values cling to the right edge with
	   dead space after the thumbnail. */
	.woocommerce-cart table.shop_table tr.cart_item td.product-name::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-price::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-quantity::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal::before {
		display: none;
	}
}

/* =========================================================================
   My Account — the private salon (CLAUDE.md s3/s5/s6; s11 style-only)
   The house receiving a returning guest, not a settings panel. Form submit
   buttons are functional controls and take the single control language
   (gold outline) — no retail CTAs are added.
   ========================================================================= */

/* The pearls breathing in the background: DSC8228 surfaces faintly from
   the ink behind the whole account page. Every edge dissolves via a radial
   mask — an object in the dark, never a photo with corners. Still, per the
   motion law; non-interactive; content reads above it. */
.woocommerce-account .site-main {
	position: relative;
}
.woocommerce-account .site-main::before {
	content: "";
	position: absolute;
	top: 4rem;
	right: -8%;
	width: min(75vw, 950px);
	aspect-ratio: 1600 / 1066;
	background: url("../img/account-pearls.jpg") center / cover no-repeat;
	opacity: 0.12;
	pointer-events: none;
	z-index: -1;
	-webkit-mask-image: radial-gradient(ellipse 55% 55% at center, rgb(8 5 4) 30%, transparent 72%);
	mask-image: radial-gradient(ellipse 55% 55% at center, rgb(8 5 4) 30%, transparent 72%);
}
@media (max-width: 820px) {
	.woocommerce-account .site-main::before {
		width: 120vw;
		right: -30%;
		top: 8rem;
	}
}

/* The page's h1 ("My account") stays for the accessibility tree but yields
   the visual stage to the voice ("Welcome back." / the salon greeting). */
.woocommerce-account .site-main > h1:first-child,
.woocommerce-account #main > h1:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ----- The entrance: login (and register, if enabled) ----- */
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--hairline-gold);
	max-width: 30rem;
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 3rem);
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login::after,
.woocommerce-account:not(.logged-in) .woocommerce-form-register::after {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	border: 1px solid var(--hairline-gold-soft);
}
/* With registration enabled Woo renders two columns; frame each. */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	float: none;
	width: auto;
}
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
	content: none;
	display: none;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	float: none;
	width: auto;
	max-width: none;
}
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: var(--fs-statement);
	line-height: 1.25;
	margin: 0 0 1.4rem;
	text-align: center;
}

/* ----- Fields: the established dark input pattern ----- */
.woocommerce-account .woocommerce-form-row label {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--taupe);
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
	display: block;
}
.woocommerce-account .woocommerce-form-row input.woocommerce-Input,
.woocommerce-account .woocommerce-form-row input[type="text"],
.woocommerce-account .woocommerce-form-row input[type="email"],
.woocommerce-account .woocommerce-form-row input[type="password"],
.woocommerce-account .woocommerce-form-row input[type="tel"],
.woocommerce-account .woocommerce-form-row select,
.woocommerce-account .woocommerce-form-row .password-input {
	width: 100%;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--hairline-gold);
	border-radius: 0;
	padding: 0.8rem 0.9rem;
	font-family: var(--font-body);
	font-weight: 300;
}
.woocommerce-account .woocommerce-form-row .password-input {
	padding: 0;
	border: 0;
	background: transparent;
}
.woocommerce-account .woocommerce-form-row .password-input input {
	width: 100%;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--hairline-gold);
	border-radius: 0;
	padding: 0.8rem 0.9rem;
	font-family: var(--font-body);
	font-weight: 300;
}
.woocommerce-account .show-password-input {
	color: var(--taupe);
	font-family: var(--font-body);
	background: transparent;
	border: 0;
}
.woocommerce-account .woocommerce-form-login__rememberme {
	color: var(--taupe);
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.woocommerce-account .lost_password {
	margin: 1.1rem 0 0;
	text-align: center;
}
.woocommerce-account .lost_password a {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.26em;
	color: var(--taupe);
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--hairline-gold);
	transition: color var(--ease), border-color var(--ease);
}
.woocommerce-account .lost_password a:hover,
.woocommerce-account .lost_password a:focus {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

/* ----- Controls: the single button language, account-wide ----- */
.woocommerce-account .woocommerce button.button,
.woocommerce-account button.woocommerce-Button,
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-register__submit {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--paper);
	background: transparent;
	border: 1px solid var(--gold);
	border-radius: 0;
	padding: 0.9rem 2rem;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: color var(--ease), background-color var(--ease), border-color var(--ease);
	width: 100%;
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account button.woocommerce-Button:hover,
.woocommerce-account button.woocommerce-form-login__submit:hover,
.woocommerce-account button.woocommerce-form-login__submit:focus,
.woocommerce-account button.woocommerce-form-register__submit:hover {
	background: color-mix(in srgb, var(--gold) 16%, transparent);
	color: var(--paper);
}

/* ----- The salon: navigation + content, logged in -----
   Named grid areas, explicitly pinned: auto-placement collapsed the
   columns when an unexpected child entered the flow (owner screenshot,
   round 2). Nothing is left to placement luck. */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	grid-template-areas:
		"notices notices"
		"nav     content";
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
	grid-area: notices;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
	grid-area: nav;
	align-self: start;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
	grid-area: content;
	min-width: 0; /* long unbreakable words (emails, order ids) must not crush the column */
}
/* Anything else Woo or a plugin injects spans full width below the salon. */
.woocommerce-account.logged-in .woocommerce > *:not(.woocommerce-notices-wrapper):not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
	grid-row: auto;
}
.woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-right: 1px solid var(--hairline-gold-soft);
	padding-right: clamp(1.2rem, 2vw, 2rem);
}
.woocommerce-MyAccount-navigation li {
	margin: 0;
}
.woocommerce-MyAccount-navigation a {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--taupe);
	transition: color var(--ease);
	white-space: nowrap; /* Log out stays on one line */
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus,
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--gold);
}
.woocommerce-MyAccount-content {
	float: none;
	width: auto;
	color: var(--text-body);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	line-height: 1.2;
}
.woocommerce-MyAccount-content fieldset {
	border: 0;
	padding: 0;
	margin: 1.6rem 0 0;
}
.woocommerce-MyAccount-content legend {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: 1.2rem;
	margin-bottom: 0.8rem;
}
/* forms inside the salon share the field pattern but not full-width buttons */
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content button.woocommerce-Button {
	width: auto;
}

/* ----- Orders: a quiet ledger ----- */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	background: transparent;
}
.woocommerce-account .woocommerce-MyAccount-content table th {
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.24em;
	color: var(--taupe);
	text-align: left;
	padding: 0.8rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--hairline-gold);
	background: transparent;
}
.woocommerce-account .woocommerce-MyAccount-content table td {
	padding: 1rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--hairline-gold-soft);
	color: var(--text-body);
	background: transparent;
}
.woocommerce-account .woocommerce-MyAccount-content table .woocommerce-Price-amount {
	color: var(--gold);
	font-family: var(--font-display);
}
/* row actions read as text links, not boxes */
.woocommerce-account .woocommerce-MyAccount-content table .button {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline-gold);
	border-radius: 0;
	padding: 0 0 0.3em;
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--paper);
	transition: color var(--ease), border-color var(--ease);
	width: auto;
}
.woocommerce-account .woocommerce-MyAccount-content table .button:hover {
	color: var(--gold);
	border-bottom-color: var(--gold);
	background: transparent;
}

/* ----- Addresses: two framed cards on surface ----- */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	float: none;
	width: auto;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	content: none;
	display: none;
}
.woocommerce-account .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	position: relative;
	background: var(--surface);
	border: 1px solid var(--hairline-gold-soft);
	padding: 1.6rem;
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	color: var(--text-body);
	line-height: 1.7;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 1.2rem;
	margin: 0 0 0.6rem;
}
.woocommerce-account .woocommerce-Address-title .edit {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--fs-nav);
	letter-spacing: 0.22em;
	color: var(--taupe);
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
	color: var(--gold);
}

/* ----- Salon voice block (dashboard override, commit 2) ----- */
.account-welcome__eyebrow {
	margin-bottom: 0.4rem;
}
.account-welcome__title {
	font-size: var(--fs-statement);
	margin: 0 0 1rem;
}
.account-welcome__lede {
	color: var(--taupe);
	max-width: var(--measure-para);
	margin: 0 0 1.8rem;
}
.account-welcome__links {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
}
.account-welcome__signout {
	color: var(--taupe);
	font-size: 0.85rem;
}
.account-welcome__signout a {
	color: var(--taupe);
	text-decoration: underline;
	text-decoration-color: var(--hairline-gold);
}
.account-welcome__signout a:hover {
	color: var(--gold);
}

/* ----- The entrance heading block (login override, commit 2) ----- */
.account-entrance {
	text-align: center;
	margin: 0 auto clamp(1.8rem, 4vh, 2.6rem);
	max-width: 34rem;
}
.account-entrance__title {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--paper);
	font-size: var(--fs-h2);
	line-height: 1.08;
	margin: 0.7rem 0 0.8rem;
}
.account-entrance__lede {
	color: var(--taupe);
	margin: 0;
}

@media (max-width: 820px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 1fr;
		grid-template-areas:
			"notices"
			"nav"
			"content";
	}
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.2rem;
		border-right: 0;
		border-bottom: 1px solid var(--hairline-gold-soft);
		padding: 0 0 1rem;
	}
}

/* =========================================================================
   Responsive: stack the plate above the summary
   ========================================================================= */
@media (max-width: 820px) {
	.single-product div.product .product__main {
		grid-template-columns: 1fr;
	}
	/* relative, NEVER static: this rule only cancels the desktop sticky,
	   but the plate must remain a containing block. On static, the veil
	   (.plate::before, absolute inset 0) attaches to the next positioned
	   ancestor and drowns the title, description and price — and touch
	   cannot recover: no :hover to thin the veil, and savonije-light.js
	   exits on coarse pointers. z-index: 0 keeps the plate in normal
	   paint order so it never sits over the summary. top must be reset
	   here as well: relative (unlike static) honours the desktop
	   sticky's top: clamp(1.5rem, 4vh, 3rem), which visually drops the
	   photograph over the title while its layout box stays put. */
	.single-product div.product .product__plate {
		position: relative;
		z-index: 0;
		top: auto;
	}
	/* The desktop frame's top padding (--rhythm * 0.6, ~74px at 320px)
	   is too deep once everything stacks. Same selector pair as the base
	   rule so specificity is equal and source order decides. */
	.woocommerce #primary.content-area,
	.woocommerce-page #primary.content-area {
		padding-top: 2rem;
	}
	/* Cart, checkout and account render through index.php: a bare
	   #main.site-main with no #primary wrapper, so the frame/neutraliser
	   pair at the top of this file never matches and style.css's generic
	   wrapper applies its full --rhythm top padding (~123px at 320px).
	   Scoped to the Woo body classes so non-Woo pages are untouched; the
	   (1,3,1) neutraliser still outranks this (1,2,0), so product and
	   shop keep padding 0. */
	.woocommerce #main.site-main,
	.woocommerce-page #main.site-main {
		padding-top: 2rem;
	}
}

/* =========================================================================
   PostNL delivery picker (checkout)
   Third-party widget (woo-postnl), restyled by class only: the plugin
   tears the whole container down and re-inserts it on every
   updated_checkout fragment refresh, so nothing here may depend on JS
   state or initial render. Every selector is scoped under
   .woocommerce-checkout to outrank the plugin sheet (fe-checkout.css,
   flat class chains, no !important) regardless of load order, and no
   plugin file is touched, so this survives plugin updates.
   ========================================================================= */
.woocommerce-checkout .postnl_checkout_container {
	background: var(--surface);
	border: 1px solid var(--hairline-gold);
	border-radius: 1px;
	margin: 0.6rem 0;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--text-body);
}

/* Tabs: nav register, hairline base; the active tab's segment turns gold.
   The gold underline lives on the li, not the label, so the base rule
   stays one continuous line across both tabs. */
.woocommerce-checkout .postnl_checkout_tab_list > li {
	border-bottom: 1px solid var(--hairline-gold-soft);
	transition: border-color var(--ease);
}
.woocommerce-checkout .postnl_checkout_tab_list > li.active {
	border-bottom-color: var(--gold);
}
.woocommerce-checkout .postnl_checkout_tab_list > li .postnl_checkout_tab {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-nav);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--taupe);
	padding: 0.9rem 0.75rem 0.8rem;
	transition: color var(--ease);
}
.woocommerce-checkout .postnl_checkout_tab_list > li .postnl_checkout_tab:hover {
	color: var(--paper);
}
.woocommerce-checkout .postnl_checkout_tab_list > li.active .postnl_checkout_tab {
	background: transparent;
	color: var(--paper);
}

/* Date headers (and pickup-point names): the eyebrow register. */
.woocommerce-checkout .postnl_content .postnl_list .list_title {
	background: transparent;
	border-top: 0;
	border-bottom: 1px solid var(--hairline-gold-soft);
	padding: 0.75rem 0.75rem 0.55rem;
}
.woocommerce-checkout .postnl_content .postnl_list .list_title span {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.34em;
	color: var(--taupe);
}
.woocommerce-checkout .postnl_content .postnl_list .list_title span.distance {
	font-weight: 400;
	letter-spacing: 0.1em;
}

/* Pickup intro line above the point list. */
.woocommerce-checkout .postnl_content_desc {
	background: transparent;
	color: var(--taupe);
	padding: 0.6rem 0.75rem 0;
}

/* Slot rows. The transparent left rule reserves the selected state's
   2px so selection never shifts the row's text. */
.woocommerce-checkout .postnl_content .postnl_list .postnl_sub_list > li {
	border-bottom: 1px solid var(--hairline-gold-soft);
	border-left: 2px solid transparent;
	transition: background-color var(--ease), border-color var(--ease);
}
.woocommerce-checkout .postnl_content .postnl_list .postnl_sub_list .postnl_sub_radio_label {
	padding: 0.8rem 0.75rem;
	color: var(--text-body);
	font-weight: 300;
	line-height: 1.4;
}
.woocommerce-checkout .postnl_content .postnl_list .postnl_sub_list .postnl_sub_radio_label i {
	color: var(--taupe);
}
.woocommerce-checkout .postnl_content .postnl_sub_radio {
	accent-color: var(--gold);
}

/* The selected slot: a functional control, so unmistakable beats subtle.
   Gold ground at hairline strength, solid gold edge, text lifted to paper. */
.woocommerce-checkout .postnl_content .postnl_list .postnl_sub_list > li.active {
	background: color-mix(in srgb, var(--gold) 12%, transparent);
	border-left-color: var(--gold);
}
.woocommerce-checkout .postnl_content .postnl_list .postnl_sub_list > li.active .postnl_sub_radio_label {
	color: var(--paper);
}