/* =========================================================================
   Storefront
   Loaded only on WooCommerce pages (see inc/enqueue.php).

   WooCommerce's own `woocommerce-general` stylesheet is kept, because it
   carries the cart table, checkout, my-account and notice behaviour that is
   better restyled than rebuilt. Its `layout` and `smallscreen` sheets are
   dequeued in inc/woocommerce.php, so the grids below are unopposed.

   Some selectors here are prefixed with `.woocommerce` purely to match the
   specificity of the rule they override — not out of habit.

   Contents
     1.  Store header and breadcrumb
     2.  Notices
     3.  Toolbar and category filter
     4.  Product grid
     5.  Single product layout
     6.  Gallery
     7.  Summary, price, variations
     8.  Quantity and add to cart
     9.  Tabs and related
     10. Cart
     11. Checkout
     12. My account
     13. Shared WooCommerce buttons and fields
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Store header and breadcrumb
   ---------------------------------------------------------------------- */

.store__header {
	padding-block: var(--sp-5) var(--sp-6);
	background: var(--bg-soft);
	box-shadow: inset 0 -1px 0 var(--line);
}

.store__header--compact {
	padding-block: var(--sp-4);
	background: none;
	box-shadow: none;
}

.store__intro {
	margin-top: var(--sp-5);
}

/* fs-800, not fs-900 — that largest step is reserved for the homepage hero. */
.store__title {
	font-size: var(--fs-800);
	max-width: 24ch;
}

.store__subtitle {
	max-width: 56ch;
	margin-top: var(--sp-4);
	color: var(--ink-soft);
	font-size: var(--fs-600);
}

.store__body {
	padding-block: var(--sp-7) var(--section-y);
}

.breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-300);
	letter-spacing: 0.02em;
}

.breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.breadcrumb__sep {
	margin-inline: var(--sp-2);
	color: var(--line-strong);
}

/* -------------------------------------------------------------------------
   2. Notices

   Restyled rather than replaced: WooCommerce puts these in the right place in
   the document and announces them, which is the hard part.
   ---------------------------------------------------------------------- */

.woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: var(--sp-6);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border: 0;
	border-left: 3px solid var(--ink);
	border-radius: var(--radius);
	background: var(--bg-soft);
	color: var(--ink);
	font-size: var(--fs-400);
	list-style: none;
}

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

.woocommerce .woocommerce-message {
	border-left-color: var(--success);
}

.woocommerce .woocommerce-error {
	border-left-color: var(--error);
	color: var(--error);
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   3. Toolbar and category filter
   ---------------------------------------------------------------------- */

.filter-bar {
	margin-bottom: var(--sp-5);
	/* Scrolls within itself on narrow screens rather than forcing the page
	   sideways or wrapping into a tall stack of chips. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.filter-bar::-webkit-scrollbar {
	display: none;
}

.filter-bar__list {
	display: flex;
	gap: var(--sp-2);
	width: max-content;
	padding-bottom: var(--sp-1);
}

.filter-bar__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.55rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: var(--fs-300);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.filter-bar__chip:hover {
	border-color: var(--ink);
}

.filter-bar__chip.is-current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.filter-bar__count {
	color: var(--muted);
	font-size: var(--fs-100);
	font-weight: 400;
}

.filter-bar__chip.is-current .filter-bar__count {
	color: rgba(255, 255, 255, 0.6);
}

/* Result count and sort control, which WooCommerce outputs as siblings. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0;
}

.woocommerce .woocommerce-result-count {
	color: var(--muted);
	font-size: var(--fs-300);
}

.woocommerce .woocommerce-ordering select {
	padding: 0.55rem 2.25rem 0.55rem 0.875rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background-color: var(--white);
	font-size: var(--fs-300);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
		linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.85rem) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* The two controls share one rule line above the grid. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	display: inline-block;
	vertical-align: middle;
}

.woocommerce .woocommerce-ordering {
	float: right;
}

.woocommerce ul.products {
	clear: both;
	margin: 0;
	padding-top: var(--sp-5);
}

/* -------------------------------------------------------------------------
   4. Product grid

   Overrides WooCommerce's own list layout. The card itself is styled in
   main.css, since the homepage uses it too.
   ---------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-6) var(--sp-4);
	list-style: none;
}

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

/* WooCommerce's own loop title/price rules would otherwise fight the card. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-size: inherit;
}

.woocommerce ul.products li.product a img {
	margin: 0;
	box-shadow: none;
}

@media (min-width: 48rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-7) var(--sp-5);
	}
}

@media (min-width: 68rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------------
   5. Single product layout
   ---------------------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

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

@media (min-width: 62rem) {
	.woocommerce div.product {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: start;
	}

	/* The buy column follows the gallery down the page on tall screens, so the
	   add-to-cart button stays reachable while browsing the images. */
	.woocommerce div.product div.summary {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-5));
	}

	/* Full-width rows below the two columns. */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   6. Gallery
   ---------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-soft);
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	object-fit: cover;
}

.woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
}

.woocommerce div.product .flex-control-thumbs li {
	width: auto;
	margin: 0;
	float: none;
}

.woocommerce div.product .flex-control-thumbs img {
	border-radius: var(--radius);
	opacity: 0.55;
	transition: opacity var(--dur-fast) var(--ease);
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
	opacity: 1;
}

.woocommerce div.product span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	right: auto;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.3rem 0.6rem;
	border-radius: 2px;
	background: var(--ink);
	color: var(--white);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   7. Summary, price, variations
   ---------------------------------------------------------------------- */

/* This is the page's one H1. It uses the theme's default heading treatment
   (Inter, sentence case, tight tracking) rather than the display face —
   confirmed against the reference, a product title is clean and set exactly
   as written, not the condensed poster font reserved for the hero. */
.woocommerce div.product .product_title {
	font-size: var(--fs-800);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 48ch;
	margin-top: var(--sp-4);
	color: var(--ink-soft);
	font-size: var(--fs-600);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: var(--sp-5) 0 0;
	color: var(--ink);
	font-size: var(--fs-700);
	font-weight: 500;
}

.woocommerce div.product p.price del {
	color: var(--muted);
	font-size: 0.75em;
	margin-right: var(--sp-2);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--ink);
}

.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: var(--sp-3);
}

/* Variation selects, styled as one row per attribute. */
.woocommerce div.product form.cart {
	margin: var(--sp-6) 0 0;
}

.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin-bottom: var(--sp-5);
	border: 0;
}

.woocommerce div.product form.cart table.variations tr {
	display: block;
	margin-bottom: var(--sp-4);
}

.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart table.variations th label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce div.product form.cart table.variations select {
	width: 100%;
	padding: 0.875rem 2.5rem 0.875rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background-color: var(--white);
	font-size: var(--fs-400);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
		linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--sp-2);
	color: var(--muted);
	font-size: var(--fs-300);
}

/* -------------------------------------------------------------------------
   7b. Variation swatches

   Built by shop.js on top of the <select> WooCommerce renders — see
   variationSwatches() there for how the two stay in sync. Once JS has run,
   the select itself is aria-hidden and visually hidden here; without JS this
   whole block matches nothing and the select styled above is what shoppers
   use instead.
   ---------------------------------------------------------------------- */

.swatch-enhanced-select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* The native radio is kept, not display:none, so it stays keyboard operable
   and its checked state stays real — only its default appearance is hidden,
   the label beside it is what renders visually. */
.swatch-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.swatch-input:focus-visible + .swatch {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* Text swatches — sizes. A grid of bordered boxes, selected fills solid black,
   the way the reference size grid works. */
.swatch-group--text {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
	gap: var(--sp-2);
	max-width: 26rem;
}

.swatch--text {
	height: 2.75rem;
	border: 1px solid var(--line-strong);
	font-size: var(--fs-300);
	font-weight: 500;
}

.swatch--text:hover {
	border-color: var(--ink);
}

.swatch-input:checked + .swatch--text {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.swatch-input:disabled + .swatch--text {
	border-color: var(--line);
	color: var(--line-strong);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Colour swatches — small filled circles, using the same colour-name map as
   the product card dots (t42_swatch_color() / SWATCH_COLORS in shop.js). */
.swatch--color {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background-color: var(--swatch-color, var(--bg-soft));
	box-shadow: inset 0 0 0 2px var(--bg);
}

.swatch--color:hover {
	border-color: var(--ink);
}

.swatch-input:checked + .swatch--color {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 1px var(--ink);
}

.swatch-input:disabled + .swatch--color {
	opacity: 0.35;
	cursor: not-allowed;
}

.woocommerce div.product .product_meta {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-300);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: var(--sp-1);
}

.woocommerce .stock {
	font-size: var(--fs-300);
}

.woocommerce .stock.out-of-stock {
	color: var(--error);
}

.woocommerce .stock.in-stock {
	color: var(--success);
}

.product-details {
	margin-top: var(--sp-6);
}

/* -------------------------------------------------------------------------
   8. Quantity and add to cart
   ---------------------------------------------------------------------- */

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	overflow: hidden;
}

.woocommerce .quantity input.qty {
	width: 3.25rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--fs-400);
	text-align: center;
	appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Injected by shop.js. Absent without JavaScript, where the native input on
   its own remains perfectly usable. */
.quantity__btn {
	width: 2.5rem;
	border: 0;
	background: none;
	color: var(--ink-soft);
	font-size: 1rem;
	line-height: 1;
	transition: background-color var(--dur-fast) var(--ease);
}

.quantity__btn:hover {
	background: var(--bg-soft);
	color: var(--ink);
}

.woocommerce div.product form.cart .button {
	float: none;
}

/* The buy row: quantity, then a button that takes the remaining width. */
.woocommerce div.product form.cart:not(.grouped_form):not(.variations_form),
.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1;
	min-width: 12rem;
	min-height: 3rem;
}

/* -------------------------------------------------------------------------
   9. Tabs and related
   ---------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--sp-8);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin: 0 0 var(--sp-5);
	padding: 0 0 var(--sp-3);
	border-bottom: 1px solid var(--line);
}

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

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	color: var(--muted);
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 68ch;
	margin: 0;
	color: var(--ink-soft);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: var(--fs-700);
	margin-bottom: var(--sp-4);
	color: var(--ink);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	margin-bottom: var(--sp-6);
	font-size: var(--fs-800);
}

.woocommerce .related,
.woocommerce .upsells {
	margin-top: var(--sp-9);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   10. Cart
   ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	padding: 0 var(--sp-3) var(--sp-4) 0;
	border-bottom: 1px solid var(--line-strong);
	color: var(--muted);
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: var(--sp-5) var(--sp-3) var(--sp-5) 0;
	border-top: 0;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 5rem;
	border-radius: var(--radius);
}

.woocommerce table.shop_table .product-name a {
	font-weight: 500;
	text-decoration: none;
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--bg-soft);
	color: var(--ink) !important;
	font-size: 1rem;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: var(--error);
	color: var(--white) !important;
}

.woocommerce .cart-collaterals {
	margin-top: var(--sp-7);
}

.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

.woocommerce .cart_totals h2 {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-700);
}

.woocommerce .cart_totals table.shop_table {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--line);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-400);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-bottom: 0;
	font-size: var(--fs-600);
	font-weight: 600;
}

.woocommerce .wc-proceed-to-checkout {
	padding-top: var(--sp-5);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: var(--fs-400);
}

.woocommerce .cart-empty {
	font-family: var(--font-display);
	font-size: var(--fs-800);
}

.woocommerce .return-to-shop {
	margin-top: var(--sp-5);
}

@media (min-width: 62rem) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: var(--sp-8);
		align-items: start;
	}

	.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
	}

	.woocommerce-cart .woocommerce .cart-collaterals {
		grid-column: 2;
		margin-top: 0;
		position: sticky;
		top: calc(var(--header-h) + var(--sp-5));
	}

	.woocommerce-cart .woocommerce .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   11. Checkout
   ---------------------------------------------------------------------- */

.woocommerce-checkout h3 {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-700);
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
	width: auto;
	float: none;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
	width: auto;
}

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

.woocommerce .col2-set .col-2 {
	margin-top: var(--sp-6);
}

.woocommerce-checkout #order_review {
	margin-top: var(--sp-7);
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
}

.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.woocommerce-checkout #payment div.form-row {
	padding: var(--sp-4) 0 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	font-size: var(--fs-400);
}

@media (min-width: 62rem) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.25fr 1fr;
		gap: var(--sp-8);
		align-items: start;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		margin-bottom: 0;
	}

	.woocommerce-checkout form.checkout #order_review {
		margin-top: var(--sp-4);
		position: sticky;
		top: calc(var(--header-h) + var(--sp-5));
	}

	.woocommerce .col2-set .col-2 {
		margin-top: var(--sp-7);
	}
}

/* -------------------------------------------------------------------------
   12. My account
   ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-6);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 0.55rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: var(--fs-300);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	max-width: 32rem;
	margin: 0;
	padding: var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
}

@media (min-width: 62rem) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		align-items: flex-start;
	}

	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 15rem 1fr;
		gap: var(--sp-8);
		align-items: start;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   13. Shared WooCommerce buttons and fields

   WooCommerce renders its buttons with several different element types, so all
   of them are normalised to the theme's .btn appearance in one place.
   ---------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: var(--fs-300);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: none;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

.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 #respond input#submit:hover {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
	color: var(--bg);
}

/* Secondary actions — "Update cart", "Apply coupon" — read as outlines so the
   primary action in the same row stays unambiguous. */
.woocommerce button.button[name="update_cart"],
.woocommerce button.button[name="apply_coupon"],
.woocommerce a.button.wc-backward {
	background: none;
	border-color: var(--line-strong);
	color: var(--ink);
}

.woocommerce button.button[name="update_cart"]:hover,
.woocommerce button.button[name="apply_coupon"]:hover,
.woocommerce a.button.wc-backward:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.woocommerce form .form-row {
	margin-bottom: var(--sp-4);
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-300);
	font-weight: 500;
}

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

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	font-size: var(--fs-400);
	line-height: 1.5;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
	border-color: var(--ink);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 0.5rem;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--error);
}

.woocommerce .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-400);
	font-weight: 400;
}

.woocommerce .woocommerce-form__label-for-checkbox input {
	margin-top: 0.35em;
}

.woocommerce .woocommerce-privacy-policy-text {
	color: var(--muted);
	font-size: var(--fs-300);
}