/* ==========================================================================
   Store styles (Set Apart only).

   Enqueued by inc/woocommerce.php, which is loaded only when base_is_store(), so the CMT site
   (Aunty K) never downloads a byte of this. Depends on `base-style`, whose inline block
   carries the brand tokens: nothing here names a brand colour, font or radius directly.

   Sections
     1. Page frame: heading band, body spacing, breadcrumb
     2. Archive: category chips and toolbar
     3. Product grid and cards
     4. WooCommerce buttons
     5. Pagination
     6. Single product
     7. Product descriptions (short description and Description tab)
     8. Related products / upsells
     9. Cart, checkout, account: page frame
    10. Cart and checkout blocks
    11. Classic forms, tables, notices (account, order received, fallbacks)
    12. My account
    13. Rules ported from woocommerce.css (dequeued on archives)
    14. Responsive
   ========================================================================== */

:root {
	/* Form controls need a 3:1 edge against white (WCAG 1.4.11); the 10% border token is for
	   hairlines only. */
	--shop-field-border: rgba( 0, 0, 0, 0.45 );
	--shop-muted: rgba( 0, 0, 0, 0.62 );
	--shop-field-radius: 12px;
}

/* --- 1. Page frame ------------------------------------------------------------
   Every store page uses the home page rhythm: a heading area, then a body section padded by
   --section-y, both on the .wrap content width. inc/woocommerce.php prints the frame.
   -------------------------------------------------------------------------- */
.shop-head {
	background: var( --color-cream );
	padding: calc( var( --section-y ) * 0.6 ) 0 calc( var( --section-y ) * 0.55 );
}
.shop-head__title {
	font-family: var( --font-heading );
	font-size: var( --size-heading );
	line-height: 1.1;
	margin: 0;
}
.shop-head__desc {
	max-width: 62ch;
	margin-top: 12px;
	font-size: 18px;
	color: var( --color-heading );
}
.shop-head__desc p:last-child { margin-bottom: 0; }

.shop-body { padding: calc( var( --section-y ) * 0.6 ) 0 var( --section-y ); }
.shop-body--product { padding-top: 28px; }

/* WooCommerce's own archive header is emptied (the title and description live in .shop-head). */
.shop-body .woocommerce-products-header:not( :has( * ) ) { display: none; }

.woocommerce-breadcrumb {
	margin: 0 0 14px;
	font-size: 14px;
	color: var( --shop-muted );
}
.woocommerce-breadcrumb a { color: var( --color-heading ); text-underline-offset: 3px; }
.shop-body--product .woocommerce-breadcrumb { margin-bottom: 28px; }

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

/* --- 2. Archive: chips and toolbar ------------------------------------------- */

/* Category chips surface the range instead of burying it in the nav dropdown. */
.shop-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 18px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-button );
	background: var( --color-white );
	color: var( --color-heading );
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.shop-chip:hover { border-color: var( --color-accent ); }
.shop-chip.is-active {
	background: var( --color-accent );
	border-color: var( --color-accent );
	color: var( --color-accent-text );
}
.shop-chip__count { font-size: 13px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.shop-chip--brand { border-color: var( --color-accent ); }

/* Toolbar: result count left, sort right, hairline underneath. */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 36px;
	border-bottom: 1px solid var( --color-border );
}
.shop-toolbar .woocommerce-result-count { margin: 0; color: var( --shop-muted ); font-size: 15px; }
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar select {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var( --shop-field-border );
	border-radius: var( --radius-button );
	font-family: inherit;
	font-size: 15px;
	color: var( --color-heading );
	background-color: var( --color-white );
}

/* --- 3. Product grid and cards ------------------------------------------------ */
ul.products {
	display: grid;
	gap: 40px 30px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce clears its product grid with ::before/::after content:" ",display:table.
   As soon as .products becomes a grid, those pseudo-elements are laid out as grid items and
   silently consume the first cell, pushing product 1 into column 2 and leaving a hole. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* A fixed 1:1 frame with cover makes a mixed image set read as deliberate rather than ragged.
   Square is deliberate: the catalogue's product shots are 600x600, so a 1:1 frame shows the
   garment in full. The link is only the image frame + title, not a coloured card. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: var( --radius-image );
	background: var( --color-cream );
	box-shadow: none;
}
/* Hover is a colour-only cue on the title: no lift, zoom or fade (calm UI). */
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-decoration-color: var( --color-accent );
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Brand label on product cards and the product page. */
.product-brand {
	display: block;
	margin: 16px 0 -10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: 0.78;
}
.product-brand--single { margin: 0 0 10px; }

/* Clamp titles to two lines so prices and buttons align across a row. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	font-family: var( --font-heading );
	font-size: 18px;
	line-height: 1.35;
	margin: 18px 0 6px;
	padding: 0 4px;
	color: var( --color-heading );
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var( --color-heading );
	font-variant-numeric: tabular-nums;
	margin: 0 0 16px;
}
.woocommerce ul.products li.product .price del { opacity: 0.6; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: center;
	padding: 12px 26px;
	font-size: 15px;
}

/* Four-up product rows (home page, related products). */
.woocommerce ul.products.columns-4,
ul.products.columns-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 36px 26px; }

/* The Aunty K feature on the home page: split intro, then its products on a white tray. */
.feature-range__products { margin-top: calc( var( --gutter ) * 1.25 ); }
.feature-range .woocommerce ul.products li.product a img { background: var( --color-white ); }

/* --- 4. WooCommerce buttons ----------------------------------------------------
   WooCommerce ships button styling with higher specificity than .btn (and its `.alt` variant
   in its own purple), so the branded buttons are matched explicitly.
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	background: var( --color-accent );
	color: var( --color-accent-text );
	border: 0;
	border-radius: var( --radius-button );
	font-family: var( --font-button );
	font-weight: 700;
	font-size: var( --size-button );
	line-height: 1;
	padding: 14px 28px;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce ul.products li.product .button:hover {
	background: var( --color-accent );
	color: var( --color-accent-text );
	opacity: 0.9;
}

.woocommerce ul.products li.product .added_to_cart {
	margin-top: 8px;
	align-self: center;
	background: transparent;
	color: var( --color-heading );
	padding: 8px 12px;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 5. Pagination ------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination { margin-top: 56px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-button );
	color: var( --color-heading );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var( --color-accent );
	border-color: var( --color-accent );
	color: var( --color-accent-text );
}

/* --- 6. Single product ---------------------------------------------------------
   WooCommerce's layout stylesheet is removed, so THIS puts the gallery and the summary side
   by side. The grid goes on `div.product` itself: WooCommerce emits the gallery and
   `.summary` as its children. `.product` cards are centred, so the page resets to left.
   -------------------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr );
	gap: calc( var( --gutter ) * 1.5 );
	align-items: start;
	text-align: left;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
	position: relative;
	width: 100%;
	float: none;
	margin: 0;
}

/* Keep the buy controls in view while the gallery is scrolled. */
.single-product div.product .summary.entry-summary { position: sticky; top: 110px; }

.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery .flex-viewport {
	border-radius: var( --radius-image );
}
.single-product div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	background: var( --color-cream );
}

/* Zoom trigger (ported from woocommerce.css, restyled). */
.single-product div.product .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 9;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --color-white );
	box-shadow: var( --shadow-image );
	font-size: 0;
	text-decoration: none;
}
.single-product div.product .woocommerce-product-gallery__trigger::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 11px;
	height: 11px;
	border: 2px solid var( --color-heading );
	border-radius: 50%;
}
.single-product div.product .woocommerce-product-gallery__trigger::after {
	content: "";
	position: absolute;
	top: 24px;
	left: 23px;
	width: 2px;
	height: 7px;
	background: var( --color-heading );
	transform: rotate( -45deg );
}
.single-product div.product .woocommerce-product-gallery__trigger span[aria-hidden] { display: none; }

/* Gallery thumbnails: a quiet strip, not a second grid of full-size images. */
.single-product div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.single-product div.product .flex-control-thumbs li { width: 84px; float: none; margin: 0; }
.single-product div.product .flex-control-thumbs img {
	border-radius: 10px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}
.single-product div.product .flex-control-thumbs img.flex-active,
.single-product div.product .flex-control-thumbs img:hover { opacity: 1; }

/* Summary hierarchy: one statement (the product name), then price, then the buy action. */
.single-product .product_title {
	font-family: var( --font-subheading );
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.single-product .summary .price {
	font-size: 24px;
	font-weight: 600;
	color: var( --color-heading );
	font-variant-numeric: tabular-nums;
	margin: 0 0 24px;
}
.single-product .summary .price del { font-size: 0.75em; opacity: 0.55; margin-right: 8px; }
.single-product .summary .price ins { text-decoration: none; }

/* Variations: stack label above control. */
.single-product .variations { width: 100%; margin: 0 0 22px; border: 0; border-collapse: collapse; }
.single-product .variations tbody,
.single-product .variations tr { display: block; }
.single-product .variations tr { margin-bottom: 16px; }
.single-product .variations th,
.single-product .variations td { display: block; padding: 0; text-align: left; border: 0; line-height: 1.4; }
.single-product .variations th label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var( --color-heading );
}
.single-product .variations select {
	width: 100%;
	max-width: 380px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var( --shop-field-border );
	border-radius: var( --shop-field-radius );
	font-family: inherit;
	font-size: 1rem;
	color: var( --color-text );
	background-color: var( --color-white );
}
.single-product .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	color: var( --color-heading );
}

.single-product .woocommerce-variation-price .price { margin-bottom: 16px; font-size: 20px; }
.single-product .woocommerce-variation-availability p,
.single-product .summary .stock { font-size: 15px; margin: 0 0 16px; color: var( --color-heading ); }

/* Quantity + add to cart on one row, the button taking the remaining width. */
.single-product form.cart:not( .variations_form ),
.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	max-width: 380px;
	margin: 0 0 8px;
}
.single-product form.cart .quantity { margin: 0; }
.quantity .qty,
.single-product form.cart .quantity input.qty {
	width: 72px;
	height: 100%;
	min-height: 52px;
	padding: 8px 6px;
	border: 1px solid var( --shop-field-border );
	border-radius: var( --radius-button );
	font-family: inherit;
	font-size: 16px;
	text-align: center;
	color: var( --color-text );
	background: var( --color-white );
	font-variant-numeric: tabular-nums;
}

.single-product .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 52px;
	padding: 17px 32px;
	font-size: 16px;
}

/* WooCommerce paints its own brand purple on `.button.alt` and a half-opacity variant on
   disabled buttons. Its selectors are wrapped in `:where()`, but the surrounding
   `.woocommerce … button.button.alt` still ties with a plain theme selector and the disabled
   rule wins outright. These selectors outrank all of them. The disabled state is real (no
   size chosen yet), so it stays quiet rather than pretending to be actionable. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
	background-color: var( --color-accent );
	background-image: none;
	border: 0;
	color: var( --color-accent-text );
}

.woocommerce div.product form.cart button.single_add_to_cart_button:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button[disabled] {
	background-color: var( --color-accent );
	color: var( --color-accent-text );
	opacity: 0.45;
	cursor: not-allowed;
}

.single-product .product_meta {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var( --color-border );
	font-size: 14px;
	color: var( --shop-muted );
}
.single-product .product_meta > span { display: block; margin-bottom: 4px; }
.single-product .product_meta a { color: var( --color-heading ); text-underline-offset: 3px; }

/* Description / additional information / reviews tabs span both columns.
   Selectors are deliberately deep (`div.product` included) so they outrank WooCommerce's
   `.woocommerce div.product .woocommerce-tabs ul.tabs li` rule (grey boxes, rounded
   pseudo-element corners). */
.single-product div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: calc( var( --section-y ) * 0.55 );
}

.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var( --color-border );
	overflow: visible;
}
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after { content: none; display: none; }

.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 0;
	font-weight: 600;
	color: var( --shop-muted );
	text-decoration: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li a:hover { color: var( --color-heading ); }
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --color-heading );
	box-shadow: inset 0 -2px 0 var( --color-accent );
}

/* The panel repeats the tab's own label as an <h2>; the tab already names it. */
.single-product .woocommerce-Tabs-panel > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* Additional information: a quiet two-column list, not a boxed table. */
.single-product .woocommerce-product-attributes {
	width: 100%;
	max-width: 620px;
	border-collapse: collapse;
}
.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
	padding: 12px 0;
	border-bottom: 1px solid var( --color-border );
	text-align: left;
	vertical-align: top;
}
.single-product .woocommerce-product-attributes th { width: 34%; font-weight: 600; color: var( --color-heading ); }
.single-product .woocommerce-product-attributes td p { margin: 0; }

/* Reviews: calm form fields. */
.single-product #reviews .woocommerce-noreviews { color: var( --shop-muted ); }
.single-product #review_form .comment-reply-title { display: block; font-family: var( --font-subheading ); font-size: 22px; margin: 0 0 12px; color: var( --color-heading ); }
.single-product #review_form label { display: block; margin-bottom: 6px; font-weight: 600; color: var( --color-heading ); }
.single-product #review_form textarea,
.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"] {
	width: 100%;
	max-width: 620px;
	padding: 12px 14px;
	border: 1px solid var( --shop-field-border );
	border-radius: var( --shop-field-radius );
	font: inherit;
}
.single-product #review_form .comment-form-rating .stars a { color: var( --color-heading ); }

/* --- 7. Product descriptions ----------------------------------------------------
   Styled for clean HTML (p, ul/li, h3/h4, strong). A ~65ch measure, left-aligned,
   comfortable leading; "Label: value" lines keep the label in the heading colour.
   -------------------------------------------------------------------------- */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-Tabs-panel--description {
	max-width: 65ch;
	line-height: 1.7;
	text-align: left;
}
.single-product .woocommerce-product-details__short-description {
	margin-bottom: 28px;
	font-size: 16px;
}

.single-product .woocommerce-product-details__short-description p,
.single-product .woocommerce-Tabs-panel--description p { margin: 0 0 1em; }
.single-product .woocommerce-product-details__short-description > :last-child,
.single-product .woocommerce-Tabs-panel--description > :last-child { margin-bottom: 0; }

.single-product .woocommerce-product-details__short-description strong,
.single-product .woocommerce-Tabs-panel--description strong { font-weight: 600; color: var( --color-heading ); }

.single-product .woocommerce-Tabs-panel--description h2:not( :first-child ),
.single-product .woocommerce-Tabs-panel--description h3,
.single-product .woocommerce-Tabs-panel--description h4,
.single-product .woocommerce-product-details__short-description h3,
.single-product .woocommerce-product-details__short-description h4 {
	font-family: var( --font-subheading );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 1.6em 0 0.5em;
	color: var( --color-heading );
}
.single-product .woocommerce-Tabs-panel--description > h2:first-child + h3,
.single-product .woocommerce-Tabs-panel--description > h2:first-child + h4,
.single-product .woocommerce-product-details__short-description > h3:first-child,
.single-product .woocommerce-product-details__short-description > h4:first-child { margin-top: 0; }
.single-product .woocommerce-Tabs-panel--description h4,
.single-product .woocommerce-product-details__short-description h4 { font-size: 17px; }

.single-product .woocommerce-Tabs-panel--description ul,
.single-product .woocommerce-Tabs-panel--description ol,
.single-product .woocommerce-product-details__short-description ul,
.single-product .woocommerce-product-details__short-description ol {
	margin: 0 0 1.2em;
	padding-left: 1.25em;
}
.single-product .woocommerce-Tabs-panel--description li,
.single-product .woocommerce-product-details__short-description li {
	margin-bottom: 0.45em;
	padding-left: 0.2em;
}
.single-product .woocommerce-Tabs-panel--description li::marker,
.single-product .woocommerce-product-details__short-description li::marker { color: var( --color-accent ); }
.single-product .woocommerce-Tabs-panel--description li > p,
.single-product .woocommerce-product-details__short-description li > p { margin: 0; }

/* --- 8. Related products / upsells ---------------------------------------------
   The section itself carries the `products` class; only its inner list is a grid.
   -------------------------------------------------------------------------- */
.single-product section.related.products,
.single-product section.up-sells.products,
.single-product section.upsells.products {
	display: block;
	grid-column: 1 / -1;
	margin-top: calc( var( --section-y ) * 0.75 );
	text-align: left;
}
.single-product section.related > h2,
.single-product section.up-sells > h2,
.single-product section.upsells > h2 {
	position: relative;
	font-size: var( --size-subheading );
	margin: 0 0 32px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --color-border );
}
.single-product section.related > h2::after,
.single-product section.up-sells > h2::after,
.single-product section.upsells > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 2px;
	background: var( --color-accent );
}

/* --- 9. Cart, checkout, account: page frame -------------------------------------
   These are ordinary pages (page.php); the store frame is applied through WooCommerce's body
   classes. The narrow wrap is widened so a two-column cart/checkout fits.
   -------------------------------------------------------------------------- */
.woocommerce-cart .wrap--narrow,
.woocommerce-checkout .wrap--narrow,
.woocommerce-account .wrap--narrow { max-width: var( --content-max ); }

.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-account .page-title {
	font-family: var( --font-heading );
	font-size: var( --size-heading );
	line-height: 1.1;
	margin: 0 0 calc( var( --section-y ) * 0.5 );
}
.woocommerce-cart .page-heading,
.woocommerce-checkout .page-heading,
.woocommerce-account .page-heading { padding-top: calc( var( --section-y ) * 0.6 ); }
.woocommerce-cart .page-heading .page-title,
.woocommerce-checkout .page-heading .page-title,
.woocommerce-account .page-heading .page-title { margin: 0; }
.woocommerce-cart .section--divi,
.woocommerce-checkout .section--divi,
.woocommerce-account .section--divi { padding: calc( var( --section-y ) * 0.5 ) 0 var( --section-y ); }
.woocommerce-cart article > .section,
.woocommerce-checkout article > .section,
.woocommerce-account article > .section { padding-top: calc( var( --section-y ) * 0.6 ); }

/* --- 10. Cart and checkout blocks ------------------------------------------------
   WooCommerce Blocks bring their own layout; the theme brands it: type, fields, buttons, the
   totals panel. Generic `button` rules in style.css paint every <button> gold, so the
   blocks' utility buttons (quantity steppers, remove, panel toggles) are reset first.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var( --font-body );
	color: var( --color-text );
}
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide { max-width: none; margin: 0; }

.wc-block-components-quantity-selector__button,
.wc-block-cart-item__remove-link,
.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link,
.wc-block-components-address-card__edit,
.wc-block-components-product-details__toggle,
.wc-block-checkout__login-prompt,
.wc-block-components-show-password-button,
.wc-block-components-notice-banner__dismiss,
.wc-block-components-chip__remove,
.wc-block-cart .wc-block-components-button.is-link,
.wc-block-components-checkout-return-to-cart-button {
	background: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	box-shadow: none;
	transform: none;
}
.wc-block-components-quantity-selector__button:hover,
.wc-block-cart-item__remove-link:hover,
.wc-block-components-panel__button:hover { transform: none; opacity: 1; }

/* Primary actions: one brand button style. */
.wc-block-components-button:not( .is-link ),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
	min-height: 52px;
	padding: 16px 28px;
	border: 0;
	border-radius: var( --radius-button );
	background: var( --color-accent );
	color: var( --color-accent-text );
	font-family: var( --font-button );
	font-weight: 700;
	font-size: var( --size-button );
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
.wc-block-components-button:not( .is-link ):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var( --color-accent );
	color: var( --color-accent-text );
	opacity: 0.9;
}
.wc-block-components-totals-coupon__button { min-height: 0; padding: 0 20px; }
.wc-block-cart__submit-container .wc-block-cart__submit-button { width: 100%; }

/* Headings inside the blocks follow the site scale rather than the block defaults. */
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
	font-family: var( --font-subheading );
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --color-heading );
	text-transform: none;
	letter-spacing: 0;
}
.wc-block-cart .wc-block-cart__totals-title { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Line items. */
.wc-block-cart-items { border-collapse: collapse; }
.wc-block-cart-items .wc-block-cart-items__header th {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --shop-muted );
	padding-bottom: 14px;
}
.wc-block-cart-items td { padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var( --color-border ); }
.wc-block-cart-item__image img { border-radius: 10px; background: var( --color-cream ); }
.wc-block-components-product-name {
	font-family: var( --font-heading );
	font-size: 18px;
	font-weight: 600;
	color: var( --color-heading );
	text-decoration: none;
}
.wc-block-components-product-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-block-components-product-metadata { font-size: 14px; color: var( --shop-muted ); }
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }
.wc-block-cart-item__remove-link {
	font-size: 14px;
	color: var( --color-heading );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-components-quantity-selector {
	border-radius: var( --radius-button );
	border-color: var( --shop-field-border );
	overflow: hidden;
}
.wc-block-components-quantity-selector::after { border-color: var( --shop-field-border ); border-radius: var( --radius-button ); }
.wc-block-components-quantity-selector__button { min-width: 36px; color: var( --color-heading ); }
.wc-block-components-quantity-selector__input { font-variant-numeric: tabular-nums; }

/* The totals panel: one calm cream tray, no card-on-card. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: 24px;
	border: 0;
	border-radius: var( --radius-card );
	background: var( --color-cream );
}
.wc-block-components-totals-wrapper { border-color: rgba( 0, 0, 0, 0.1 ); }
/* On phones the order summary collapses to a title row inside the tray; its own top and
   bottom rules then read as a doubled border. The tray already frames it. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title { border: 0; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 20px;
	font-weight: 700;
	color: var( --color-heading );
}

/* Fields. Blocks float the label inside the input; keep that, just brand the edge. */
.wc-block-components-text-input input[type],
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input[type],
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border: 1px solid var( --shop-field-border );
	border-radius: var( --shop-field-radius );
	background-color: var( --color-white );
	color: var( --color-text );
	font-family: inherit;
}
.wc-blocks-components-select .wc-blocks-components-select__container { border-radius: var( --shop-field-radius ); }
.wc-block-components-text-input input[type]:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var( --color-heading );
	box-shadow: 0 0 0 1px var( --color-heading );
	outline: 0;
}
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label { color: var( --shop-muted ); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-radio-control__input {
	border-color: var( --shop-field-border );
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-block-components-radio-control__input:checked { border-color: var( --color-heading ); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var( --color-heading ); }
.wc-block-components-radio-control__input:checked::before { background: var( --color-heading ); }
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked { border-radius: var( --shop-field-radius ); }

.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
	color: var( --color-heading );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Notices (blocks). Neutral tray, a coloured edge carries the meaning. */
.wc-block-components-notice-banner {
	border: 0;
	border-left: 3px solid var( --color-accent );
	border-radius: 10px;
	background: var( --color-cream );
	color: var( --color-text );
	font-size: 15px;
}
.wc-block-components-notice-banner.is-error { border-left-color: rgba( 180, 40, 40, 0.9 ); background: rgba( 180, 40, 40, 0.06 ); }

/* Empty cart: a calm message, then "New in store". */
.wc-block-cart__empty-cart__title.with-empty-cart-icon {
	font-family: var( --font-subheading );
	font-size: 24px;
	color: var( --color-heading );
	margin-bottom: 8px;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 3em;
	height: 3em;
	margin-bottom: 18px;
	background-color: var( --color-accent );
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	margin: 40px auto;
	border: 0;
	background: none;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	color: var( --color-accent );
	font-size: 24px;
	letter-spacing: 1.2em;
	padding-left: 1.2em;
}
.wp-block-woocommerce-empty-cart-block > h2:not( .wc-block-cart__empty-cart__title ) {
	font-size: var( --size-subheading );
	margin: 0 0 28px;
}

/* "New in store" and cross-sells use the block product grid: match the theme cards.
   The block lays cards out with flex at 25% each; with a gap that overflows, so a 4-up row
   wrapped to 3 + 1. A real grid keeps every card in the row. The block CSS loads after this
   file and sizes cards with `.wc-block-grid.has-N-columns .wc-block-grid__product`
   (max-width 25%), hence the doubled `.wc-block-grid` to outrank it. */
.wc-block-grid.wc-block-grid .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	margin: 0;
	gap: 26px;
}
.wc-block-grid.wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.wc-block-grid.wc-block-grid.has-2-columns .wc-block-grid__products { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.wc-block-grid.wc-block-grid .wc-block-grid__products .wc-block-grid__product {
	flex: none;
	max-width: none;
	width: auto;
	margin: 0;
	border: 0;
	padding: 0;
	text-align: center;
}
.wc-block-grid__product .wc-block-grid__product-link,
.wc-block-grid__product .wc-block-grid__product-image { display: block; }
.wc-block-grid__product-link { color: inherit; text-decoration: none; }
.wc-block-grid__product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var( --radius-image );
	background: var( --color-cream );
}
.wc-block-grid__product-title {
	margin: 16px 0 6px;
	font-family: var( --font-heading );
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --color-heading );
}
.wc-block-grid__product-price {
	margin-bottom: 14px;
	font-weight: 600;
	color: var( --color-heading );
	font-variant-numeric: tabular-nums;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .add_to_cart_button {
	padding: 12px 24px;
	font-size: 15px;
	border-radius: var( --radius-button );
	background: var( --color-accent );
	color: var( --color-accent-text );
}

/* --- 11. Classic forms, tables, notices -------------------------------------------
   The account pages and any shortcode fallback use WooCommerce's classic markup.
   -------------------------------------------------------------------------- */
.woocommerce form .form-row {
	display: block;
	margin: 0 0 18px;
	padding: 0;
}
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --color-heading );
}
.woocommerce form .form-row .required { color: var( --color-heading ); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var( --shop-field-border );
	border-radius: var( --shop-field-radius );
	background: var( --color-white );
	color: var( --color-text );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var( --color-heading );
	box-shadow: 0 0 0 1px var( --color-heading );
	outline: 0;
}
.woocommerce form .form-row input.input-text:focus-visible { outline: 3px solid var( --color-accent ); outline-offset: 2px; }

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: rgba( 180, 40, 40, 0.9 ); }

/* Remember-me: checkbox and label share one hit target. */
.woocommerce form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
.woocommerce form .woocommerce-form__label-for-checkbox input { width: 18px; height: 18px; margin: 0; accent-color: var( --color-heading ); }

/* Show-password toggle: an eye icon inside the field, not a gold button. */
.woocommerce form .password-input,
.woocommerce-page form .password-input { position: relative; display: block; }
.woocommerce form .password-input input.input-text { padding-right: 52px; }
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --color-heading );
	cursor: pointer;
	transform: none;
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 10px;
	width: 20px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 50% / 60%;
	box-sizing: border-box;
}
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after {
	content: "";
	position: absolute;
	top: 17px;
	left: 17px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.woocommerce form .show-password-input.display-password::before { border-style: dashed; }
.woocommerce form .show-password-input:hover { transform: none; opacity: 1; background: var( --color-cream ); }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	margin: 0;
	padding: 32px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-card );
	background: var( --color-white );
}
.woocommerce form.login .form-row:last-of-type,
.woocommerce form.register .form-row:last-of-type { margin-bottom: 0; }
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit { margin-top: 6px; }
.woocommerce form.login p.form-row:has( .woocommerce-form-login__submit ) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}
.woocommerce form.login p.form-row:has( .woocommerce-form-login__submit ) .woocommerce-form-login__submit { order: 2; margin: 0; }
.woocommerce .lost_password { margin: 16px 0 0; font-size: 15px; }
.woocommerce .lost_password a { color: var( --color-heading ); text-underline-offset: 3px; }

/* Classic notices. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 28px;
	padding: 16px 20px;
	list-style: none;
	border: 0;
	border-left: 3px solid var( --color-accent );
	border-radius: 10px;
	background: var( --color-cream );
	color: var( --color-text );
	font-size: 15px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-error { border-left-color: rgba( 180, 40, 40, 0.9 ); background: rgba( 180, 40, 40, 0.06 ); }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button,
.woocommerce-info .button { order: 2; padding: 10px 20px; font-size: 14px; }
.woocommerce-message a:not( .button ),
.woocommerce-info a:not( .button ) { color: var( --color-heading ); }

/* Classic tables (orders, order details, cart fallback). */
.shop_table,
.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 32px;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-variant-numeric: tabular-nums;
}
.shop_table th,
.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 12px;
	border: 0;
	border-bottom: 1px solid var( --color-border );
	text-align: left;
	vertical-align: middle;
}
.shop_table thead th,
.woocommerce table.shop_table thead th {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --shop-muted );
}
.shop_table tfoot th { color: var( --color-heading ); }
.cart_totals,
.woocommerce-checkout-review-order { margin-top: 30px; }

/* --- 12. My account -------------------------------------------------------------- */
.woocommerce-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) {
	display: grid;
	grid-template-columns: 220px minmax( 0, 1fr );
	gap: calc( var( --gutter ) * 1.25 );
	align-items: start;
}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --color-border );
}
.woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var( --color-border ); }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 13px 4px;
	color: var( --color-text );
	text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { color: var( --color-heading ); }
.woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 600;
	color: var( --color-heading );
	box-shadow: inset 2px 0 0 var( --color-accent );
	padding-left: 14px;
}
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content a:not( .button ) { color: var( --color-heading ); text-underline-offset: 3px; }
.woocommerce-Addresses { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 24px; }
.woocommerce-Address { padding: 24px; border-radius: var( --radius-card ); background: var( --color-cream ); }
.woocommerce-Address-title h2 { font-size: 22px; margin: 0 0 8px; }
.woocommerce-Address address { font-style: normal; line-height: 1.7; }
.woocommerce-account h2 { font-size: var( --size-subheading ); }

/* Login + register side by side when registration is enabled. */
.woocommerce .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: calc( var( --gutter ) * 1.25 );
}
.woocommerce .u-columns.col2-set .u-column1,
.woocommerce .u-columns.col2-set .u-column2 { width: auto; float: none; }

/* The login form alone reads better at a form measure than stretched across the page. */
.woocommerce-account:not( .logged-in ) .entry-content > .woocommerce { max-width: 520px; }
.woocommerce-account:not( .logged-in ) .entry-content > .woocommerce:has( .u-columns ) { max-width: none; }
.woocommerce-account:not( .logged-in ) .entry-content > .woocommerce > h2 { font-size: var( --size-subheading ); margin: 0 0 16px; }

/* --- 13. Ported from woocommerce.css ------------------------------------------------
   woocommerce.css is dequeued on archives and the front page (inc/woocommerce.php); these
   are the few of its rules those pages still rely on.
   -------------------------------------------------------------------------- */
.woocommerce span.onsale,
span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 6px 12px;
	border-radius: var( --radius-button );
	background: var( --color-heading );
	color: var( --color-white );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
ul.products li.product { position: relative; }

.woocommerce .star-rating,
.star-rating {
	position: relative;
	display: block;
	width: 5.4em;
	height: 1.1em;
	margin: 8px auto 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var( --color-heading );
}
.star-rating::before { content: "\2606\2606\2606\2606\2606"; position: absolute; top: 0; left: 0; }
.star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; padding-top: 1.5em; }
.star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0; }

.woocommerce .blockUI.blockOverlay { position: relative; }
.woocommerce .loader::before,
.woocommerce a.button.loading { opacity: 0.6; }
.woocommerce a.button.added::after { content: " \2713"; }

/* --- 14. Responsive ------------------------------------------------------------------ */
@media ( max-width: 980px ) {
	ul.products,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

	.single-product div.product { grid-template-columns: minmax( 0, 1fr ); gap: 32px; }
	.single-product div.product .summary.entry-summary { position: static; }

	.woocommerce-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) { grid-template-columns: minmax( 0, 1fr ); }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 0 22px; border: 0; }
	.woocommerce-MyAccount-navigation li { border: 0; }
	.woocommerce-MyAccount-navigation li.is-active a { box-shadow: inset 0 -2px 0 var( --color-accent ); padding-left: 4px; }
}

@media ( max-width: 767px ) {
	.shop-head { padding: 28px 0 26px; }
	.shop-head__title { font-size: var( --size-subheading ); }
	.shop-head__desc { font-size: 16px; }
	.shop-body { padding: 24px 0 var( --section-y ); }
	.shop-body--product { padding-top: 16px; }
	.shop-body--product .woocommerce-breadcrumb { margin-bottom: 16px; }

	/* Chips scroll sideways on phones instead of stacking into four rows above the grid. */
	.shop-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin: 0 -20px 20px;
		padding: 2px 20px;
	}
	.shop-chips::-webkit-scrollbar { display: none; }
	.shop-chip { flex: 0 0 auto; }

	.shop-toolbar { margin-bottom: 24px; padding-bottom: 14px; gap: 10px; }
	.shop-toolbar .woocommerce-result-count { font-size: 14px; }
	.shop-toolbar select { max-width: 200px; font-size: 14px; }

	/* Product grids stay two-up on phones: one column makes browsing a catalogue tedious. */
	ul.products,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 28px 14px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px; margin-top: 14px; }
	.woocommerce ul.products li.product .price { font-size: 15px; margin-bottom: 12px; }
	.woocommerce ul.products li.product .button { width: 100%; padding: 12px 10px; font-size: 14px; }
	.product-brand { margin-top: 12px; font-size: 11px; }

	.single-product .product_title { font-size: 28px; }
	.single-product .summary .price { margin-bottom: 18px; }
	.single-product form.cart:not( .variations_form ),
	.single-product .woocommerce-variation-add-to-cart,
	.single-product .variations select { max-width: none; }
	.single-product div.product .flex-control-thumbs { gap: 8px; }
	.single-product div.product .flex-control-thumbs li { width: 64px; }
	.single-product div.product .woocommerce-tabs { margin-top: 40px; }
	.single-product div.product .woocommerce-tabs ul.tabs { gap: 0 22px; margin-bottom: 24px; }
	.single-product .woocommerce-Tabs-panel--description,
	.single-product .woocommerce-product-details__short-description { font-size: 16px; }
	.single-product section.related.products,
	.single-product section.up-sells.products,
	.single-product section.upsells.products { margin-top: 56px; }

	.woocommerce form.login,
	.woocommerce form.register,
	.woocommerce form.lost_reset_password { padding: 22px 18px; }
	.woocommerce .u-columns.col2-set,
	.woocommerce-Addresses { grid-template-columns: minmax( 0, 1fr ); }

	.wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-cart-totals-block,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block { padding: 18px 16px; }

	.wc-block-grid.wc-block-grid .wc-block-grid__products,
	.wc-block-grid.wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 28px 14px; }

	/* Classic tables stack into label/value rows (woocommerce-smallscreen.css is removed). */
	.woocommerce table.shop_table_responsive thead { display: none; }
	.woocommerce table.shop_table_responsive tr { display: block; padding: 10px 0; border-bottom: 1px solid var( --color-border ); }
	.woocommerce table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 6px 0;
		border: 0;
		text-align: right;
	}
	.woocommerce table.shop_table_responsive td::before {
		content: attr( data-title );
		font-weight: 600;
		color: var( --color-heading );
		text-align: left;
	}
	.woocommerce table.shop_table_responsive td:not( [data-title] )::before { content: none; }
}

/* --- Ranges (2026-09-26) ---------------------------------------------------------
   Set Apart carries two ranges. Each brand archive opens like a collection page (story and a
   photo from the range), the chip row names the ranges as their own group, and the label on a
   product page links back to its range.
   -------------------------------------------------------------------------- */
.range-head {
	background: var( --color-cream );
	padding: calc( var( --section-y ) * 0.45 ) 0 0;
	overflow: hidden;
}
.range-head__row {
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 0.9fr );
	gap: var( --gutter );
	align-items: end;
}
.range-head__text { align-self: center; padding-bottom: calc( var( --section-y ) * 0.5 ); }
.range-head__title {
	font-family: var( --font-heading );
	font-size: var( --size-heading );
	line-height: 1.1;
	margin: 0 0 16px;
}
.range-head__body { max-width: 52ch; font-size: 19px; line-height: 1.6; color: var( --color-heading ); margin: 0 0 18px; }
.range-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --shop-muted );
}
.range-head__meta a { color: var( --color-heading ); text-underline-offset: 4px; text-decoration-color: var( --color-accent ); }
.range-head__media { display: flex; justify-content: center; align-items: flex-end; }
.range-head__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 440px;
	border-radius: var( --radius-card ) var( --radius-card ) 0 0;
	object-fit: cover;
}

/* Chip row: the ranges follow the categories as a named group. */
.shop-chips__label {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding-left: 18px;
	border-left: 1px solid var( --color-border );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --shop-muted );
}

a.product-brand { text-decoration: none; }
a.product-brand:hover { color: var( --color-heading ); text-decoration: underline; text-decoration-color: var( --color-accent ); text-underline-offset: 4px; }

@media ( max-width: 767px ) {
	.range-head__row { grid-template-columns: minmax( 0, 1fr ); }
	.range-head__text { padding-bottom: 0; }
	.range-head__body { font-size: 17px; }
	.range-head__img { max-height: 300px; }
	.shop-chips__label { margin-left: 4px; padding-left: 12px; }
}