/*
 * UK SARMs theme: WooCommerce styles.
 *
 * WooCommerce's own stylesheets are switched off (inc/woocommerce/setup.php),
 * so everything a shopper sees is styled here from the design tokens in
 * main.css. Plugin output (Product Bundles, discount rules, upsells, labels)
 * keeps its own plugin CSS; only its colours are aligned here where needed.
 */

/* ==========================================================================
   Header basket
   ========================================================================== */
.header-cart__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	padding: 0 var(--space-1);
	border-radius: 999px;
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.header-cart__link:hover {
	color: var(--c-ink);
}

.header-cart__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	transition: background var(--transition);
}

.header-cart__link:hover .header-cart__icon {
	background: var(--c-surface);
}

.header-cart__count {
	position: absolute;
	top: 3px;
	right: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: var(--c-accent);
	border: 2px solid var(--c-bg);
	border-radius: 999px;
	color: var(--c-on-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.header-cart__count[data-count="0"] {
	display: none;
}

.header-cart__text {
	display: none;
}

@media (min-width: 1024px) {
	.header-cart__link {
		padding-right: var(--space-4);
		border: 1.5px solid var(--c-line);
	}

	.header-cart__link:hover {
		border-color: var(--c-ink);
	}

	.header-cart__link:hover .header-cart__icon {
		background: transparent;
	}

	.header-cart__text {
		display: flex;
		flex-direction: column;
	}

	.header-cart__total {
		color: var(--c-muted);
		font-size: var(--fs-xs);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.header-cart__total:empty {
		display: none;
	}
}

/* ==========================================================================
   Shared: notices, prices, ratings, buttons, quantity
   ========================================================================== */
.woocommerce-store-notice,
p.demo_store {
	z-index: 200;
	width: 100%;
	margin: 0;
	padding: var(--space-3) var(--gutter);
	background: var(--c-ink);
	color: #ffffff;
	font-size: var(--fs-s);
	text-align: center;
}

.woocommerce-store-notice a {
	color: #ffffff;
}

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	list-style: none;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-accent);
	border-radius: var(--radius-s);
	color: var(--c-ink);
	font-size: var(--fs-s);
}

.woocommerce-info {
	border-left-color: var(--c-ink-soft);
}

.woocommerce-error {
	flex-direction: column;
	align-items: stretch;
	border-left-color: var(--c-sale);
}

.woocommerce-error li {
	margin: 0;
}

/* Only notices with a button are a row (text left, button right); a message
   with <strong> inside has to flow as one line. Focused by WooCommerce for
   screen readers: no ring on these non-interactive boxes. */
:is(.woocommerce-message, .woocommerce-info):not(:has(> .button)) {
	display: block;
}

:is(.woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-info, .woocommerce-error):focus {
	outline: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	min-height: 36px;
	padding: 0 var(--space-4);
	font-size: var(--fs-s);
}

.price {
	color: var(--c-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.price del {
	margin-right: var(--space-1);
	color: var(--c-muted);
	font-weight: 400;
}

.price ins {
	text-decoration: none;
}

/* Star rating without WooCommerce's icon font: coloured stars clipped to the
   rating width that WooCommerce writes on the inner span. */
.star-rating {
	position: relative;
	display: inline-block;
	width: 5.3em;
	height: 1.1em;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.1;
	letter-spacing: 0.06em;
	vertical-align: middle;
}

.star-rating::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--c-line);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: #e3a008;
}

p.stars {
	display: inline-flex;
	margin: 0 0 var(--space-3);
}

p.stars a {
	position: relative;
	width: 1.4em;
	height: 1.4em;
	overflow: hidden;
	color: var(--c-line);
	font-size: 1.3rem;
	text-indent: 999em;
}

p.stars a::before {
	content: "★";
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 0;
}

p.stars:hover a,
p.stars.selected a {
	color: #e3a008;
}

p.stars a:hover ~ a,
p.stars.selected a.active ~ a {
	color: var(--c-line);
}

.button.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

.button:disabled,
.button.disabled,
.out-of-stock-button {
	background: var(--c-line);
	border-color: var(--c-line);
	color: var(--c-muted);
	cursor: not-allowed;
}

.button.loading {
	opacity: 0.7;
	pointer-events: none;
}

.button.loading::after {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: uksarms-spin 0.7s linear infinite;
}

@keyframes uksarms-spin {
	to {
		transform: rotate(360deg);
	}
}

.added_to_cart {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--fs-s);
	font-weight: 600;
}

.quantity {
	display: inline-flex;
}

.quantity .qty {
	width: 4.5em;
	text-align: center;
}

/* ==========================================================================
   Product lists
   ========================================================================== */
.woocommerce-products-header {
	margin-bottom: var(--space-6);
}

.woocommerce-products-header .page-title {
	margin-bottom: var(--space-4);
}

.term-description,
.term-description-cat {
	max-width: 80ch;
	color: var(--c-ink-soft);
}

.cg-cat-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: var(--space-5);
	border-radius: var(--radius-l);
}

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

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-5);
	}
}

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

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

/* Product card */
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: var(--space-2) var(--space-2) var(--space-3);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
	transition: border-color var(--transition), box-shadow var(--transition);
}

@media (min-width: 768px) {
	ul.products li.product {
		padding: var(--space-3) var(--space-3) var(--space-4);
	}
}

@media (hover: hover) {
	ul.products li.product:hover {
		border-color: transparent;
		box-shadow: var(--shadow-card);
	}
}

ul.products li.product .product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: var(--space-3);
	background: var(--c-surface);
	border-radius: var(--radius-m);
}

/* Product photos have a white background: "multiply" lets the tile colour show through. */
ul.products li.product .product-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 400ms ease;
}

@media (hover: hover) {
	ul.products li.product:hover .product-card__media img {
		transform: scale(1.04);
	}
}

/* Phones (two cards across): smaller title, price and button, so a price
   range such as "£ 49.99 – £ 100.00" stays on one line. From 768px up the
   sizes below are the larger ones. */
.woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: 2.7em;
	margin: 0 var(--space-1);
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

@media (min-width: 768px) {
	.woocommerce-loop-product__title {
		font-size: 0.9375rem;
	}
}

.woocommerce-loop-product__title a {
	color: var(--c-ink);
	text-decoration: none;
}

.woocommerce-loop-product__title a:hover {
	color: var(--c-accent);
}

/* The title link covers the whole card, so the card is one big tap target. */
.woocommerce-loop-product__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

ul.products li.product .star-rating {
	margin: 6px var(--space-1) 0;
	font-size: 0.75rem;
}

ul.products li.product .price {
	display: block;
	margin: 6px var(--space-1) var(--space-3);
	font-size: var(--fs-s);
	font-weight: 600;
}

ul.products li.product .price del {
	font-size: var(--fs-xs);
	font-weight: 500;
}

@media (min-width: 768px) {
	ul.products li.product .star-rating {
		margin-top: var(--space-2);
		font-size: 0.8125rem;
	}

	ul.products li.product .price {
		margin-top: var(--space-2);
		font-size: var(--fs-m);
	}

	ul.products li.product .price del {
		font-size: var(--fs-s);
	}
}

ul.products li.product .button,
ul.products li.product .out-of-stock-button,
ul.products li.product .added_to_cart {
	position: relative;
	z-index: 2;
}

ul.products li.product .button,
ul.products li.product .out-of-stock-button {
	width: 100%;
	min-height: 38px;
	margin-top: auto;
	padding: 0 var(--space-2);
	background: var(--c-ink);
	border-color: var(--c-ink);
	border-radius: var(--radius-m);
	font-size: 0.8125rem;
}

@media (min-width: 768px) {
	ul.products li.product .button,
	ul.products li.product .out-of-stock-button {
		min-height: 42px;
		padding: 0 var(--space-3);
		font-size: var(--fs-s);
	}
}

ul.products li.product .button:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

ul.products li.product .out-of-stock-button {
	background: var(--c-surface);
	border-color: var(--c-surface);
	color: var(--c-muted);
}

ul.products li.product .added_to_cart {
	align-self: center;
	margin-top: var(--space-2);
}

/* Badges: percentage badge, WooCommerce "Sale!", out-of-stock label */
.sale-item.product-label,
.onsale {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	padding: 3px 7px;
	background: #fdecea;
	border-radius: var(--radius-s);
	color: #b42318;
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: 1.3;
}

.product-out-of-stock {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	padding: 4px 9px;
	background: var(--c-ink);
	border-radius: 999px;
	color: #ffffff;
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.3;
}

.product-out-of-stock em {
	font-style: normal;
}

.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	color: var(--c-ink);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-pagination .page-numbers span.current {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-bg);
}

/* ---------- Shop and category pages (inc/woocommerce/archive.php, main.js) ---------- */

/* Intro text: phones show the first lines and "Read more"; the whole text
   stays in the page. */
.woocommerce-products-header .term-description {
	max-width: 760px;
}

.woocommerce-products-header .term-description > :last-child {
	margin-bottom: 0;
}

.term-description__toggle {
	display: none;
}

@media (max-width: 767px) {
	.term-description.is-collapsed {
		max-height: 6.4em;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(#000 45%, transparent);
		mask-image: linear-gradient(#000 45%, transparent);
	}

	.term-description__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: var(--space-2);
		padding: 0;
		background: none;
		border: 0;
		color: var(--c-ink);
		font: inherit;
		font-size: var(--fs-s);
		font-weight: 500;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		cursor: pointer;
	}

	.term-description__toggle[hidden] {
		display: none;
	}
}

/* Category links: a row of chips that scrolls sideways, only where the main
   menu is folded away. */
.category-nav {
	margin: var(--space-4) calc(-1 * var(--gutter)) 0;
}

.category-nav__list {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0 var(--gutter);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.category-nav__list::-webkit-scrollbar {
	display: none;
}

.category-nav__list li {
	flex: 0 0 auto;
	margin: 0;
}

.category-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 var(--space-4);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-ink);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color var(--transition), background var(--transition);
}

.category-nav__link:hover {
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.category-nav__link.is-current {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #ffffff;
}

@media (min-width: 1024px) {
	.category-nav {
		display: none;
	}
}

/* Toolbar: product count on the left, sorting on the right. */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-s);
}

.shop-toolbar .woocommerce-ordering {
	margin: 0 0 0 auto;
}

.shop-toolbar select.orderby {
	min-height: 40px;
	padding: 0 40px 0 var(--space-4);
	background: var(--c-bg) var(--icon-chevron) no-repeat right 14px center / 14px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-ink);
	font: inherit;
	font-size: var(--fs-s);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.shop-toolbar select.orderby:hover {
	border-color: var(--c-ink);
}

/* Phones: count and sorting on one line (the list is as wide as its longest
   option otherwise). */
@media (max-width: 767px) {
	.woocommerce-products-header {
		margin-bottom: var(--space-5);
	}

	.shop-toolbar {
		flex-wrap: nowrap;
	}

	.shop-toolbar .woocommerce-result-count,
	.shop-toolbar select.orderby {
		font-size: 0.8125rem;
	}

	.shop-toolbar select.orderby {
		width: 150px;
		text-overflow: ellipsis;
	}
}

/* Four cards a row on large screens, as on the home page. */
@media (min-width: 1100px) {
	.post-type-archive-product ul.products,
	.tax-product_cat ul.products,
	.tax-product_tag ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.woocommerce-pagination ul {
	justify-content: center;
}

/* Text under the grid: a reading column; latest posts three across. */
.below-woocommerce-category > .wp-block-group + .wp-block-group {
	margin-top: var(--space-7);
}

.below-woocommerce-category h6.has-text-align-center {
	margin: var(--space-7) 0 var(--space-4);
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
}

@media (min-width: 768px) {
	.below-woocommerce-category .uksarms-latest-posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Product rails (home page category rows)
   Title on the left, arrows on the right (mouse screens), 4 cards visible on
   desktop, swipe on phones with the next card peeking in, "View all" below.
   ========================================================================== */
.product-rail-section {
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

/* A line between one category row and the next. */
.product-rail-section + .product-rail-section {
	border-top: 1px solid var(--c-line);
}

.product-rail-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.product-rail-section__titles {
	flex: 1 1 auto;
	min-width: 0;
}

.product-rail-section__label {
	margin: 0 0 var(--space-2);
	color: var(--c-accent);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.entry-content .product-rail-section__header h2 {
	margin: 0;
	font-size: var(--fs-2xl);
	text-align: left;
}

.product-rail__nav {
	display: none;
	flex-shrink: 0;
	gap: var(--space-2);
}

.product-rail__nav.is-active {
	display: flex;
}

.product-rail__nav .icon-button {
	border: 1.5px solid var(--c-line);
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.product-rail__nav .icon-button:hover:not(:disabled) {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #ffffff;
}

.product-rail__nav .icon-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.product-rail ul.products {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 68%;
	gap: var(--space-3);
	margin: 0 calc(-1 * var(--gutter));
	padding: var(--space-1) var(--gutter) var(--space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--gutter);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.product-rail ul.products::-webkit-scrollbar {
	display: none;
}

.product-rail ul.products li.product {
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.product-rail ul.products {
		grid-auto-columns: calc((100% - 2 * var(--gutter) - 2 * var(--space-3)) / 2.4);
	}
}

@media (min-width: 900px) {
	.product-rail ul.products {
		grid-auto-columns: calc((100% - 2 * var(--gutter) - 2 * var(--space-5)) / 3);
		gap: var(--space-5);
	}
}

/* From here the rail sits inside the page width; no bleed to the screen edge. */
@media (min-width: 1200px) {
	.product-rail ul.products {
		grid-auto-columns: calc((100% - 3 * var(--space-5)) / 4);
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

.below-woocommerce-category {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line);
}

/* ==========================================================================
   Single product
   Large screens: gallery on the left (it stays in view while the summary
   scrolls), summary on the right, then the tabs as a centred reading column.
   Phones: gallery, summary, tabs; a bar with price and "Add to cart" slides
   up once the main button has scrolled away (see .sticky-atc).
   ========================================================================== */
.single-product .site-main {
	padding-top: var(--space-2);
}

div.product {
	position: relative;
}

/* Gallery and summary (wrapper from inc/woocommerce/single-product.php). */
.product-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
}

@media (min-width: 900px) {
	/* The picture stays at most 500px wide (it stays in view while the summary
	   scrolls, so it has to fit the screen); the summary gets the rest. */
	.product-top {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--space-5) clamp(2.5rem, 5vw, 4.5rem);
	}

	/* Anything else a plugin prints here takes the full width. */
	.product-top > * {
		grid-column: 1 / -1;
	}

	/* .product prefix: a plugin prints ".product .images { position: relative }" later in the page. */
	.product .product-top > .woocommerce-product-gallery {
		position: sticky;
		top: var(--space-5);
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		max-width: 500px;
	}

	.product-top > .summary {
		grid-column: 2;
		grid-row: 1;
	}
}

div.product > .onsale {
	display: none;
}

/* ---------- Gallery ---------- */
/* WooCommerce keeps the gallery invisible until its slider script has run;
   before that every image sat under the other (a tall empty area on phones).
   Now the first image shows straight away and the rest wait beside it. */
.woocommerce-product-gallery {
	position: relative;
	min-width: 0;
	opacity: 1 !important;
}

.woocommerce-product-gallery__wrapper {
	display: flex;
	margin: 0;
}

.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport {
	overflow: hidden;
	background: var(--c-surface);
	border-radius: var(--radius-l);
}

.woocommerce-product-gallery__image {
	flex: 0 0 100%;
	min-width: 0;
}

.flex-viewport .woocommerce-product-gallery__image {
	flex: 0 0 auto;
}

.woocommerce-product-gallery__image > a {
	display: block;
}

/* Product photos are on white: "multiply" lets the tile colour show through. */
.woocommerce-product-gallery__image img.wp-post-image,
.woocommerce-product-gallery__image > a > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce-product-gallery .zoomImg {
	background: #ffffff;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--c-bg);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgb(14 20 17 / 0.12);
	font-size: 0;
	text-decoration: none;
}

.woocommerce-product-gallery__trigger > span[aria-hidden],
.woocommerce-product-gallery__trigger img.emoji {
	display: none !important;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 0;
	background: var(--c-ink);
	-webkit-mask: var(--icon-zoom) no-repeat 50% / contain;
	mask: var(--icon-zoom) no-repeat 50% / contain;
}

/* Thumbnails: one row that scrolls sideways when there are many. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0 0 var(--space-1);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 68px;
	overflow: hidden;
	background: var(--c-surface);
	border-radius: var(--radius-m);
}

@media (min-width: 900px) {
	.woocommerce-product-gallery .flex-control-thumbs li {
		flex-basis: 84px;
	}
}

.woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border: 2px solid transparent;
	border-radius: var(--radius-m);
	cursor: pointer;
	mix-blend-mode: multiply;
	opacity: 0.65;
	transition: opacity var(--transition), border-color var(--transition);
}

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

.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--c-ink);
}

/* ---------- Summary ---------- */
/* Flex row that wraps: most parts take a full line; price, sale badge and
   the "Sale!" label sit side by side. */
.summary.entry-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-3);
	min-width: 0;
}

.summary.entry-summary > * {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
}

.summary.entry-summary > .onsale,
.summary.entry-summary > .price,
.summary.entry-summary > .sale-item.product-label {
	flex: 0 0 auto;
}

.summary > .onsale {
	position: static;
	order: -2;
	margin-bottom: var(--space-3);
	padding: 0;
	background: transparent;
	color: var(--c-sale);
	font-size: var(--fs-s);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
}

/* The "-22%" badge beside the price already says it: no "Sale!" label then. */
.summary:has(> .sale-item) > .onsale {
	display: none;
}

/* Previous / next product: top right, on the same line as the "Sale!" label. */
.summary > .product-prevnext {
	flex: 0 0 auto;
	order: -1;
	margin: 0 0 var(--space-3) auto;
}

/* Title, rating and "18,714 sold" come first; the rating and the sold count
   share one line. */
.summary > .product_title,
.summary > .woocommerce-product-rating,
.summary > .product-sold-count {
	order: -1;
}

/* Line break after them, so the price always starts its own line (on wide
   screens it would otherwise sit beside the rating). */
.summary.entry-summary::before {
	content: "";
	flex: 0 0 100%;
	order: 0;
	height: 0;
}

.summary .product_title {
	margin-bottom: var(--space-2);
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem);
	letter-spacing: -0.02em;
}

.summary .woocommerce-product-rating {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	font-size: var(--fs-s);
}

.summary .woocommerce-review-link {
	color: var(--c-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	text-decoration: none;
}

.summary .woocommerce-review-link:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

.summary > .product-sold-count {
	flex: 0 0 auto;
	margin: 0 0 var(--space-4);
	color: var(--c-muted);
	font-size: 0.8125rem;
}

.summary:has(> .woocommerce-product-rating) > .product-sold-count::before {
	content: "\00b7";
	margin-right: var(--space-3);
}

.summary > .price {
	font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.summary > .price del {
	margin-right: var(--space-2);
	font-size: 0.6em;
	font-weight: 400;
}

.summary > .sale-item.product-label {
	position: static;
	font-size: var(--fs-s);
}

.summary > .all-taxes-included {
	margin-top: var(--space-1);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: 500;
}

/* Short description: a checklist. */
.summary .woocommerce-product-details__short-description {
	color: var(--c-ink-soft);
	font-size: var(--fs-s);
}

.woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

.woocommerce-product-details__short-description p {
	margin: var(--space-4) 0 var(--space-2);
}

.woocommerce-product-details__short-description ul {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-details__short-description li {
	position: relative;
	padding-left: 24px;
	line-height: 1.5;
}

.woocommerce-product-details__short-description li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336423c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat 50% / 14px;
}

.woocommerce-product-details__short-description li strong {
	color: var(--c-ink-soft);
	font-weight: 400;
}

.woocommerce-product-details__short-description a {
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: underline;
}

.woocommerce-product-details__short-description a:hover {
	color: var(--c-accent);
}

/* Stock */
.summary .stock {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
	padding-top: 0;
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
}

.summary .stock.in-stock::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	background: var(--c-accent);
	border-radius: 999px;
	box-shadow: 0 0 0 4px var(--c-accent-soft);
}

.summary .stock.out-of-stock {
	color: var(--c-sale);
}

/* Variable products: the chosen option's price replaces the price range under
   the title (main.js), so the second price above the button is not needed. */
.summary.has-live-price .woocommerce-variation-price {
	display: none;
}

.summary > .sale-item.product-label[hidden] {
	display: none;
}

/* ---------- Add to cart ---------- */
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-3);
}

.summary form.cart {
	margin-top: var(--space-5);
}

form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 54px;
	border-radius: var(--radius-m);
	font-size: var(--fs-m);
}

form.variations_form,
form.cart.bundle_form,
form.cart.grouped_form {
	display: block;
}

/* Quantity: − and + buttons are added by main.js. */
.quantity {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--c-bg);
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-m);
	transition: border-color var(--transition);
}

.quantity.hidden {
	display: none;
}

.quantity:focus-within {
	border-color: var(--c-ink);
}

.quantity .qty {
	width: 3.2em;
	min-height: 52px;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty:focus {
	box-shadow: none;
}

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

.qty-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--c-ink);
	font: inherit;
	font-size: 1.25rem;
	font-weight: 400;
	cursor: pointer;
	transition: background var(--transition);
}

.qty-step:hover {
	background: var(--c-surface);
}

.qty-step:disabled {
	color: var(--c-line);
	cursor: default;
}

/* Variations */
table.variations {
	position: relative;
	width: 100%;
	margin: 0 0 var(--space-3);
	border: 0;
}

table.variations tr {
	display: block;
	margin-bottom: var(--space-3);
}

table.variations th,
table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

table.variations th label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-s);
	font-weight: 500;
}

table.variations select {
	min-height: 52px;
	padding-right: 44px;
	background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1411' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px;
	border-radius: var(--radius-m);
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* "Clear": small, on the right of the first option label. */
.reset_variations {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--c-muted);
	font-size: var(--fs-s);
	text-decoration: none;
}

.reset_variations:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

/* Options as buttons (main.js); the drop-down stays in the form, hidden. */
table.variations select.variation-select {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.variation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.variation-pill {
	min-height: 44px;
	padding: 0 var(--space-4);
	background: var(--c-bg);
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-m);
	color: var(--c-ink);
	font: inherit;
	font-size: var(--fs-s);
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.variation-pill:hover:not(:disabled) {
	border-color: var(--c-ink);
}

.variation-pill.is-selected {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #ffffff;
}

.variation-pill:disabled {
	color: var(--c-muted);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.5;
}

.single_variation_wrap .woocommerce-variation-price {
	margin-bottom: var(--space-2);
}

.single_variation_wrap .woocommerce-variation-price .price {
	font-size: var(--fs-xl);
	font-weight: 600;
}

.single_variation_wrap .stock {
	margin-top: var(--space-2);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

/* Discount rule message ("Buy 3 Pens, Get One Free!") as a quiet offer line.
   The plugin writes its colours inline, hence !important. */
.awdr_discount_bar.awdr_discount_bar {
	display: flex !important;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0 0 !important;
	padding: var(--space-3) var(--space-4) !important;
	background: var(--c-surface) !important;
	border: 0 !important;
	border-radius: var(--radius-m) !important;
	color: var(--c-ink) !important;
	font-size: var(--fs-s) !important;
	font-weight: 400;
	line-height: 1.4;
}

.awdr_discount_bar.awdr_discount_bar::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: var(--c-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.4 1.4 0 0 1 0 2l-6.2 6.2a1.4 1.4 0 0 1-2 0z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.3'/%3E%3C/svg%3E") no-repeat 50% / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.4 1.4 0 0 1 0 2l-6.2 6.2a1.4 1.4 0 0 1-2 0z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.3'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

.awdr_discount_bar_content::before {
	content: "Offer";
	margin-right: var(--space-2);
	color: var(--c-sale);
	font-size: var(--fs-s);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* "View COA" under the add-to-cart button (inc/woocommerce/single-product.php) */
.summary > .product-coa,
.summary > .product-coa-list {
	margin-top: var(--space-2);
}

.product-coa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: 0 var(--space-4);
	background: var(--c-bg);
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-m);
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--transition);
}

.product-coa:hover {
	border-color: var(--c-ink);
	color: var(--c-ink);
	text-decoration: none;
}

.product-coa .icon {
	flex-shrink: 0;
}

.product-coa__count {
	color: var(--c-muted);
	font-weight: 400;
}

/* Several reports (stacks, strengths): the button opens a short list. */
summary.product-coa {
	list-style: none;
}

summary.product-coa::-webkit-details-marker {
	display: none;
}

summary.product-coa::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-chevron) no-repeat 50% / contain;
	mask: var(--icon-chevron) no-repeat 50% / contain;
	transition: transform var(--transition);
}

.product-coa-list[open] > summary.product-coa::after {
	transform: rotate(180deg);
}

.product-coa-list ul {
	margin: var(--space-2) 0 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.product-coa-list li {
	margin: 0;
}

.product-coa-list li + li {
	border-top: 1px solid var(--c-line);
}

.product-coa-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	color: var(--c-ink);
	font-size: var(--fs-s);
	text-decoration: none;
}

.product-coa-list a:hover {
	background: var(--c-surface);
	color: var(--c-ink);
	text-decoration: none;
}

.product-coa-list a::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background: var(--c-muted);
	-webkit-mask: var(--icon-arrow) no-repeat 50% / contain;
	mask: var(--icon-arrow) no-repeat 50% / contain;
}

/* Dispatch countdown: a live timer written by main.js */
.summary .dispatch-countdown {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-3);
	color: var(--c-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.summary .dispatch-countdown[hidden] {
	display: none;
}

/* "Live" dot with a soft pulse */
.dispatch-countdown__dot {
	position: relative;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin: 5px 3px 0;
	background: var(--c-accent);
	border-radius: 999px;
}

.dispatch-countdown__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	border-radius: inherit;
	animation: dispatch-pulse 2s ease-out infinite;
}

@keyframes dispatch-pulse {
	from {
		opacity: 0.5;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(2.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dispatch-countdown__dot::after {
		animation: none;
		opacity: 0;
	}
}

.dispatch-countdown strong {
	color: var(--c-ink);
	font-weight: 500;
}

.dispatch-countdown__time {
	font-variant-numeric: tabular-nums;
}

/* "We accept" row */
.summary .payment-methods {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-4);
}

.payment-methods__label {
	color: var(--c-muted);
	font-size: var(--fs-s);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.payment-methods__list {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.payment-methods__list li {
	display: flex;
	margin: 0;
}

.payment-methods__list img {
	display: block;
	width: 36px;
	height: 23px;
	background: #ffffff;
	border: 1px solid var(--c-line);
	border-radius: 4px;
}

/* Phones: options, price, "Add to cart" and the reassurance first; the
   feature list and product details follow. */
@media (max-width: 899px) {
	.summary > .product-prevnext {
		display: none;
	}

	/* The same 24px under the price hairline, whichever part comes next
	   (stock line, offer or options). */
	.summary > .all-taxes-included {
		margin-bottom: 0;
	}

	.summary > .stock {
		margin-top: var(--space-5);
	}

	.summary > .awdr_discount_bar.awdr_discount_bar {
		margin-top: var(--space-5) !important;
	}

	.summary .woocommerce-product-details__short-description {
		order: 20;
		margin-top: var(--space-5);
		padding-top: var(--space-5);
		border-top: 1px solid var(--c-line);
	}

	.summary .product_meta {
		order: 21;
	}
}

/* Bulk discount: three small cards instead of a table (same text). */
.summary .uksarms-bulk-discount {
	display: block;
	margin-top: var(--space-5);
}

.uksarms-bulk-discount::before {
	content: "Buy more, save more";
	display: block;
	margin-bottom: var(--space-2);
	color: var(--c-muted);
	font-size: var(--fs-s);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.uksarms-bulk-discount table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

.uksarms-bulk-discount tbody {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.uksarms-bulk-discount tr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: var(--space-3) var(--space-2);
	background: var(--c-bg);
	text-align: center;
}

/* Header row ("QTY / Additional Discount") stays for screen readers only. */
.uksarms-bulk-discount tr:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.uksarms-bulk-discount td {
	display: block;
	padding: 0;
	border: 0;
	text-align: center;
}

/* Hairlines between the three tiers (row 1 is the hidden header row). */
.uksarms-bulk-discount tr:nth-child(n + 3) {
	border-left: 1px solid var(--c-line);
}

.uksarms-bulk-discount td:first-child {
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: 500;
}

.uksarms-bulk-discount td:last-child {
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
}

/* Tiers are buttons (main.js): a tap sets the quantity. */
.uksarms-bulk-discount tr[role="button"] {
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.uksarms-bulk-discount tr[role="button"]:hover {
	background: var(--c-surface);
}

.uksarms-bulk-discount tr.is-active,
.uksarms-bulk-discount tr.is-active:hover {
	background: var(--c-ink);
}

.uksarms-bulk-discount tr.is-active td {
	color: #ffffff;
}

.uksarms-bulk-discount tr[role="button"]:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: -2px;
}

/* Reassurance points (inc/woocommerce/single-product.php): a white card with
   one row each, the icon on the left, the title above its short note. */
.summary .product-trust {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: var(--space-5) 0 0;
	padding: 0 var(--space-4);
	list-style: none;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

.product-trust li {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 58px;
	margin: 0;
	padding: var(--space-3) 0 var(--space-3) 46px;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

.product-trust li + li {
	border-top: 1px solid var(--c-line);
}

.product-trust li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	background: var(--c-surface) var(--trust-icon) no-repeat 50% / 16px;
	border-radius: 999px;
}

.product-trust li:nth-child(1) {
	--trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1411' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

.product-trust li:nth-child(2) {
	--trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1411' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 16.5V6.5h-11v10h2.2'/%3E%3Cpath d='M8.3 16.5h5.2'/%3E%3Cpath d='M13.5 9.5h4l3.5 3.5v3.5h-2.2'/%3E%3Cpath d='M15.2 16.5h-1.7'/%3E%3Ccircle cx='6.5' cy='16.5' r='1.8'/%3E%3Ccircle cx='17' cy='16.5' r='1.8'/%3E%3C/svg%3E");
}

.product-trust li:nth-child(3) {
	--trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1411' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5'/%3E%3Cpath d='M10.5 3v6.2L5 18.5A1.7 1.7 0 0 0 6.5 21h11a1.7 1.7 0 0 0 1.5-2.5L13.5 9.2V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E");
}

.product-trust li:nth-child(4) {
	--trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1411' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.5-3.2 8.2-7.5 9.5-4.3-1.3-7.5-5-7.5-9.5V6z'/%3E%3Cpath d='M8.75 12.25l2.25 2.25 4.25-4.5'/%3E%3C/svg%3E");
}

.product-trust strong {
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
}

/* SKU and category */
.summary .product_meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.product_meta a {
	color: var(--c-ink-soft);
	font-weight: 500;
}

/* ---------- Tabs: description, details, reviews ---------- */
.woocommerce-tabs {
	margin-top: var(--space-7);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-1);
	margin: 0 0 var(--space-6);
	padding: 0;
	overflow-x: auto;
	list-style: none;
	border-bottom: 1px solid var(--c-line);
	scrollbar-width: none;
}

.woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.woocommerce-tabs ul.tabs {
		justify-content: center;
	}
}

.woocommerce-tabs ul.tabs li {
	flex: 0 0 auto;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	margin-bottom: -1px;
	padding: var(--space-3) var(--space-4);
	border-bottom: 2px solid transparent;
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--transition), border-color var(--transition);
}

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

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

/* Reading column */
.woocommerce-tabs .panel {
	max-width: 800px;
	margin-inline: auto;
	color: var(--c-ink-soft);
}

@media (min-width: 768px) {
	.woocommerce-tabs .panel {
		font-size: 1.0625rem;
		line-height: 1.75;
	}
}

.woocommerce-tabs .panel > :first-child {
	margin-top: 0;
}

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

.woocommerce-tabs .panel * + h2 {
	margin-top: var(--space-7);
}

.woocommerce-tabs .panel * + h3,
.woocommerce-tabs .panel * + h4 {
	margin-top: var(--space-6);
}

.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol {
	padding-left: 1.25em;
}

.woocommerce-tabs .panel li + li {
	margin-top: var(--space-2);
}

.woocommerce-tabs .panel li::marker {
	color: var(--c-ink-soft);
	font-weight: 400;
}

.woocommerce-tabs .panel a {
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgb(14 20 17 / 0.35);
	text-underline-offset: 0.2em;
}

.woocommerce-tabs .panel a:hover {
	color: var(--c-accent);
	text-decoration-color: currentColor;
}

.woocommerce-tabs .panel strong {
	color: var(--c-ink);
}

.woocommerce-tabs .panel img {
	border-radius: var(--radius-m);
}

.woocommerce-tabs .panel table {
	font-size: var(--fs-s);
}

/* Additional information */
table.woocommerce-product-attributes {
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	border-collapse: separate;
	border-spacing: 0;
}

table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--c-line);
}

table.woocommerce-product-attributes tr:last-child > * {
	border-bottom: 0;
}

table.woocommerce-product-attributes th {
	width: 35%;
	background: var(--c-surface);
	color: var(--c-ink);
}

table.woocommerce-product-attributes td p {
	margin: 0;
}

/* Reviews */
.woocommerce-Reviews-title {
	margin-bottom: var(--space-5);
}

#reviews .commentlist {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

#reviews .commentlist li {
	margin: 0;
	padding: var(--space-4) var(--space-5);
	background: var(--c-surface);
	border-radius: var(--radius-l);
}

#reviews .comment-text .star-rating {
	float: none;
	margin-bottom: var(--space-2);
}

#reviews .comment-text .meta {
	margin-bottom: var(--space-2);
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 600;
}

/* Review dates are hidden (legacy.css); the dash between name and date goes too. */
#reviews .woocommerce-review__dash {
	display: none;
}

#reviews .comment-text .description {
	font-size: var(--fs-s);
	line-height: 1.6;
}

#reviews .comment-text .description p:last-child {
	margin-bottom: 0;
}

#review_form_wrapper {
	margin-top: var(--space-5);
	padding: var(--space-5);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

.comment-reply-title {
	display: block;
	margin-bottom: var(--space-3);
	font-size: var(--fs-l);
	font-weight: 600;
}

/* ---------- Customer reviews (reviews.io) under the description ---------- */
.product-reviews-band {
	margin-top: var(--space-7);
	padding: var(--space-7) var(--space-5);
	background: var(--c-surface);
	border-radius: var(--radius-xl);
}

.product-reviews-band__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	text-align: center;
}

.product-reviews-band__title {
	margin: 0;
	font-size: var(--fs-2xl);
}

.product-reviews-band__link {
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 767px) {
	.product-reviews-band {
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		border-radius: 0;
	}
}

/* ---------- Related products and up-sells ---------- */
.related > h2,
.up-sells > h2,
.cross-sells > h2 {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-2xl);
}

.related,
.up-sells {
	margin-top: var(--space-7);
	padding-top: var(--space-7);
	border-top: 1px solid var(--c-line);
}

/* Phones: related products swipe sideways, like the home page rows. */
@media (max-width: 767px) {
	.related ul.products,
	.up-sells ul.products {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 68%;
		margin: 0 calc(-1 * var(--gutter));
		padding: var(--space-1) var(--gutter) var(--space-4);
		overflow-x: auto;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.related ul.products::-webkit-scrollbar,
	.up-sells ul.products::-webkit-scrollbar {
		display: none;
	}

	.related ul.products li.product,
	.up-sells ul.products li.product {
		scroll-snap-align: start;
	}
}

/* ---------- Sticky add-to-cart bar ---------- */
.sticky-atc {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
	background: var(--c-bg);
	border-top: 1px solid var(--c-line);
	box-shadow: 0 -10px 30px -18px rgb(14 20 17 / 0.35);
	visibility: hidden;
	transform: translateY(calc(100% + 30px));
	transition: transform 240ms ease, visibility 0s linear 240ms;
}

.sticky-atc.is-visible {
	visibility: visible;
	transform: none;
	transition: transform 240ms ease, visibility 0s;
}

.sticky-atc__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.sticky-atc__product {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}

.sticky-atc__image {
	display: none;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: var(--c-surface);
	border-radius: var(--radius-s);
	mix-blend-mode: multiply;
}

.sticky-atc__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sticky-atc__title {
	overflow: hidden;
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sticky-atc__price {
	font-size: var(--fs-s);
	font-weight: 600;
	line-height: 1.3;
}

.sticky-atc__price del {
	margin-right: var(--space-1);
	color: var(--c-muted);
	font-weight: 500;
}

.sticky-atc__price ins {
	text-decoration: none;
}

.sticky-atc__button {
	flex-shrink: 0;
	min-height: 46px;
	padding: 0 var(--space-5);
	border-radius: var(--radius-m);
}

@media (min-width: 768px) {
	.sticky-atc__image {
		display: block;
	}

	.sticky-atc__button {
		min-width: 220px;
	}
}

/* Room at the end of the page so the bar never covers the footer. */
body.has-sticky-atc {
	padding-bottom: 72px;
}

/* ==========================================================================
   Tables shared by cart, checkout, account and order received
   ========================================================================== */
table.shop_table {
	width: 100%;
	margin-bottom: var(--space-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--fs-s);
}

table.shop_table th,
table.shop_table td {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--c-line);
	vertical-align: middle;
}

table.shop_table tr:last-child > th,
table.shop_table tr:last-child > td {
	border-bottom: 0;
}

table.shop_table thead th {
	background: var(--c-surface);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

table.shop_table tfoot th {
	font-weight: 600;
}

table.shop_table .order-total .amount {
	font-size: var(--fs-l);
	font-weight: 600;
}

/* ==========================================================================
   Cart
   Large screens: the items on the left as a list, the order summary on the
   right (it stays in view). Phones: the list, then the summary. Each item:
   picture; name, unit price and quantity; line total and "remove" on the
   right. main.js updates the basket by itself when a quantity changes.
   ========================================================================== */
@media (min-width: 900px) {
	.woocommerce-cart .entry-content > .woocommerce:has(> .cart-collaterals) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
		grid-template-rows: repeat(8, auto) 1fr;
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}

	.woocommerce-cart .entry-content > .woocommerce:has(> .cart-collaterals) > * {
		grid-column: 1;
		min-width: 0;
	}

	.woocommerce-cart .entry-content > .woocommerce:has(> .cart-collaterals) > .cart-collaterals {
		position: sticky;
		top: var(--space-5);
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: start;
	}
}

.woocommerce-cart-form table.cart {
	margin-bottom: var(--space-4);
	overflow: visible;
	border: 0;
	border-top: 1px solid var(--c-line);
	border-radius: 0;
}

.woocommerce-cart-form table.cart,
.woocommerce-cart-form table.cart tbody {
	display: block;
}

.woocommerce-cart-form table.cart thead {
	display: none;
}

.woocommerce-cart-form table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name total"
		"thumb price price"
		"thumb qty remove";
	align-items: center;
	gap: var(--space-1) var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--c-line);
}

.woocommerce-cart-form table.cart tr.cart_item > td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce-cart-form table.cart tr.cart_item > td::before {
	content: none;
}

.woocommerce-cart-form td.product-thumbnail {
	grid-area: thumb;
	align-self: start;
}

/* Product photos have a white background: "multiply" lets the tile colour show through. */
.woocommerce-cart-form .product-thumbnail a {
	display: block;
	overflow: hidden;
	background: var(--c-surface);
	border-radius: var(--radius-m);
}

.woocommerce-cart-form .product-thumbnail img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce-cart-form td.product-name {
	grid-area: name;
	font-size: var(--fs-s);
	line-height: 1.4;
}

.woocommerce-cart-form .product-name a {
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-cart-form .product-name a:hover {
	text-decoration: underline;
}

.woocommerce-cart-form .product-name dl.variation {
	margin: 2px 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.woocommerce-cart-form td.product-price {
	grid-area: price;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.woocommerce-cart-form td.product-price .price,
.woocommerce-cart-form td.product-price .amount {
	color: inherit;
	font-weight: 400;
}

.woocommerce-cart-form td.product-quantity {
	grid-area: qty;
	justify-self: start;
	margin-top: var(--space-1);
}

.woocommerce-cart-form td.product-subtotal {
	grid-area: total;
	align-self: start;
	font-size: var(--fs-s);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.woocommerce-cart-form td.product-remove {
	grid-area: remove;
	justify-self: end;
}

.woocommerce-cart-form a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	color: var(--c-muted);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-cart-form a.remove:hover {
	background: var(--c-surface);
	color: var(--c-sale);
}

/* A smaller stepper in the list. */
.woocommerce-cart-form .quantity .qty {
	width: 2.6em;
	min-height: 38px;
}

.woocommerce-cart-form .qty-step {
	width: 34px;
	font-size: 1.125rem;
}

@media (max-width: 599px) {
	.woocommerce-cart-form table.cart tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		column-gap: var(--space-3);
	}

	.woocommerce-cart-form .product-thumbnail img {
		width: 72px;
		height: 72px;
	}
}

/* Coupon on the left; "Update cart" stays for browsers without JavaScript. */
.woocommerce-cart-form table.cart tr:has(> td.actions) {
	display: block;
}

.woocommerce-cart-form td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) 0 0;
	border: 0;
}

.woocommerce-cart-form td.actions::before {
	content: none;
}

.woocommerce-cart-form .coupon {
	display: flex;
	flex: 1 1 300px;
	gap: var(--space-2);
	max-width: 460px;
	margin: 0;
}

.woocommerce-cart-form .coupon .input-text {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.woocommerce-cart-form .coupon .button,
.woocommerce-cart-form [name="update_cart"] {
	background: var(--c-bg);
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.woocommerce-cart-form .coupon .button:hover,
.woocommerce-cart-form [name="update_cart"]:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #ffffff;
}

.has-cart-autoupdate .woocommerce-cart-form [name="update_cart"] {
	display: none;
}

/* Order summary */
.cart-collaterals .cart_totals {
	padding: var(--space-5);
	background: var(--c-surface);
	border-radius: var(--radius-l);
}

.cart_totals h2 {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-l);
}

.cart_totals table.shop_table,
.cart_totals table.shop_table tbody {
	display: block;
	margin: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.cart_totals table.shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	border-bottom: 1px solid var(--c-line);
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	display: block;
	padding: var(--space-3) 0;
	background: none;
	border: 0;
	font-size: var(--fs-s);
}

.cart_totals table.shop_table th {
	flex-shrink: 0;
	color: var(--c-muted);
	font-weight: 400;
	text-align: left;
}

.cart_totals table.shop_table td {
	text-align: right;
}

.cart_totals table.shop_table td::before {
	content: none;
}

.cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart_totals .woocommerce-shipping-methods li {
	margin: 0;
}

.cart_totals .woocommerce-shipping-destination,
.cart_totals .shipping-calculator-button {
	margin: var(--space-1) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.cart_totals tr.fee td {
	color: var(--c-accent);
}

.cart_totals tr.order-total {
	border-bottom: 0;
}

.cart_totals tr.order-total th {
	color: var(--c-ink);
	font-weight: 600;
}

.cart_totals tr.order-total .amount {
	font-size: var(--fs-l);
	font-weight: 600;
}

.wc-proceed-to-checkout {
	margin-top: var(--space-4);
	padding: 0;
}

.wc-proceed-to-checkout .checkout-button,
#place_order {
	display: flex;
	gap: var(--space-2);
	width: 100%;
	min-height: 54px;
	font-size: var(--fs-m);
}

.wc-proceed-to-checkout .checkout-button::before,
#place_order::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--icon-lock) no-repeat 50% / contain;
	mask: var(--icon-lock) no-repeat 50% / contain;
}

/* "Secure checkout" and the card marks under the button (inc/woocommerce/archive.php). */
.checkout-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.checkout-secure .icon {
	flex-shrink: 0;
	color: var(--c-ink);
}

.cart_totals .payment-methods {
	display: flex;
	justify-content: center;
	margin-top: var(--space-3);
}

.cart_totals .payment-methods__label {
	display: none;
}

/* Empty basket */
.wc-empty-cart-message {
	max-width: 440px;
	margin: var(--space-6) auto var(--space-4);
	text-align: center;
}

.wc-empty-cart-message .cart-empty.woocommerce-info {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--fs-l);
	font-weight: 500;
}

.wc-empty-cart-message .cart-empty::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-4);
	background: var(--c-surface) var(--icon-bag) no-repeat 50% / 28px;
	border-radius: 999px;
}

.woocommerce-cart .return-to-shop {
	margin-bottom: var(--space-8);
	text-align: center;
}

/* Responsive tables elsewhere (account orders): rows become cards; WooCommerce
   writes each cell's label in data-title. */
@media (max-width: 767px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive tr {
		display: block;
		border-bottom: 1px solid var(--c-line);
	}

	table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
		text-align: right;
		border-bottom: 0;
	}

	table.shop_table_responsive td::before {
		content: attr(data-title);
		color: var(--c-muted);
		font-weight: 600;
		text-align: left;
	}

	table.shop_table_responsive td.product-remove::before,
	table.shop_table_responsive td.product-thumbnail::before,
	table.shop_table_responsive td.actions::before {
		content: none;
	}

	table.shop_table_responsive td.product-thumbnail,
	table.shop_table_responsive td.actions {
		justify-content: flex-start;
		text-align: left;
	}

	table.shop_table_responsive td.actions {
		display: block;
	}
}

/* ==========================================================================
   Forms: checkout, account, login
   ========================================================================== */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0 0 var(--space-4);
	padding: 0;
}

.woocommerce form .form-row label {
	font-size: var(--fs-s);
	font-weight: 600;
}

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

.woocommerce form .form-row .optional {
	color: var(--c-muted);
	font-weight: 400;
}

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

.woocommerce form .form-row .woocommerce-input-wrapper {
	width: 100%;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 var(--space-2) 0 0;
	accent-color: var(--c-accent);
	vertical-align: middle;
}

@media (min-width: 600px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: calc(50% - var(--space-2));
	}

	.woocommerce form .form-row-first {
		float: left;
	}

	.woocommerce form .form-row-last {
		float: right;
	}

	.woocommerce form .form-row-wide {
		clear: both;
	}
}

.woocommerce-billing-fields::after,
.woocommerce-shipping-fields::after,
.woocommerce-additional-fields::after,
.woocommerce-address-fields::after,
.clear {
	content: "";
	display: block;
	clear: both;
}

.select2-container .select2-selection--single {
	height: 44px;
	border: 1px solid #c3c9c4;
	border-radius: var(--radius-s);
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: var(--space-3);
	line-height: 42px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
	height: 42px;
}

.select2-dropdown {
	border-color: #c3c9c4;
}

/* Checkout layout: customer details left, order review right */
form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--space-7);
}

@media (min-width: 1024px) {
	form.checkout {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
		align-items: start;
	}

	form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

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

	form.checkout > #order_review {
		position: sticky;
		top: var(--space-5);
	}
}

form.checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

#customer_details .col-1,
#customer_details .col-2 {
	margin-bottom: var(--space-5);
}

.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
#order_review_heading {
	margin-bottom: var(--space-4);
	font-size: var(--fs-xl);
}

#order_review {
	padding: var(--space-5);
	background: var(--c-surface);
	border-radius: var(--radius-l);
}

#order_review table.shop_table {
	background: var(--c-bg);
}

#payment ul.payment_methods {
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

#payment ul.payment_methods > li {
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-2);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-s);
}

#payment ul.payment_methods > li > label {
	font-weight: 600;
	cursor: pointer;
}

#payment ul.payment_methods img {
	max-height: 24px;
	margin-left: var(--space-2);
	vertical-align: middle;
}

#payment .place-order {
	margin: 0;
}

#payment .woocommerce-privacy-policy-text {
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

#place_order {
	width: 100%;
	min-height: 54px;
	font-size: var(--fs-l);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--space-4);
	font-size: var(--fs-s);
}

.woocommerce-form-coupon,
.woocommerce-form-login {
	margin-bottom: var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

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

/* Coupon: always open (as on the live site, for affiliate codes), as one slim
   row above the form. Beats legacy.css (display/width), hence the selector. */
.woocommerce-checkout .woocommerce form.checkout_coupon {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	width: auto;
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	background: var(--c-surface);
	border: 0;
	border-radius: var(--radius-l);
}

.woocommerce-checkout .woocommerce form.checkout_coupon > p:first-child {
	flex: 1 1 260px;
	margin: 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-s);
}

.woocommerce-checkout .woocommerce form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-checkout .woocommerce form.checkout_coupon .form-row-first {
	flex: 1 1 200px;
	max-width: 320px;
}

.woocommerce-checkout .woocommerce form.checkout_coupon .input-text {
	background: var(--c-bg);
}

.woocommerce-checkout .woocommerce form.checkout_coupon .button {
	background: var(--c-ink);
	border-color: var(--c-ink);
}

.woocommerce-checkout .woocommerce form.checkout_coupon .button:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.woocommerce-checkout .woocommerce form.checkout_coupon .clear {
	display: none;
}

/* Progress steps (inc/woocommerce/cart-checkout.php): numbered circles joined
   by a line; finished steps get a tick, the current one is dark. */
.checkout-steps {
	display: flex;
	max-width: 560px;
	margin: 0 auto var(--space-6);
	padding: 0;
	list-style: none;
	counter-reset: checkout-step;
}

.checkout-steps li {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	text-align: center;
	counter-increment: checkout-step;
}

.checkout-steps li::before {
	content: counter(checkout-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--c-bg);
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
}

/* The line from the previous step. */
.checkout-steps li + li::after {
	content: "";
	position: absolute;
	top: 14px;
	right: calc(50% + 15px);
	left: calc(-50% + 15px);
	height: 2px;
	background: var(--c-line);
}

.checkout-steps li.is-done,
.checkout-steps li.is-current {
	color: var(--c-ink);
}

.checkout-steps li.is-done::before {
	content: "";
	background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat 50% / 14px;
	border-color: var(--c-accent);
}

.checkout-steps li.is-current::before {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #ffffff;
}

.checkout-steps li.is-done + li::after {
	background: var(--c-accent);
}

.checkout-steps li.is-current {
	font-weight: 500;
}

/* One delivery option: WooCommerce chooses it by itself (a hidden field, no
   radio button), so it is shown as chosen. */
.woocommerce-shipping-methods li:has(> input[type="hidden"]) label {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-2);
	text-align: left;
}

.woocommerce-shipping-methods li:has(> input[type="hidden"]) label::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: var(--c-bg);
	border: 5px solid var(--c-accent);
	border-radius: 999px;
}

.woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--c-accent);
}

/* Cancellation policy above "Place order" (a WPCode snippet on the live site;
   legacy.css gives it a green frame). */
#payment .checkout-cancellation-notice {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

#payment .checkout-cancellation-notice p {
	display: block;
	margin: 0;
}

/* Order summary: one line per row, the amount on the right (the delivery name
   no longer squeezes into a narrow column); a picture beside each item
   (inc/woocommerce/cart-checkout.php). */
#order_review table.shop_table,
#order_review table.shop_table tbody,
#order_review table.shop_table tfoot {
	display: block;
}

#order_review table.shop_table thead {
	display: none;
}

#order_review table.shop_table tr {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	border-bottom: 1px solid var(--c-line);
}

#order_review table.shop_table tfoot tr:last-child {
	border-bottom: 0;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	display: block;
	padding: var(--space-3) var(--space-4);
	border: 0;
}

#order_review table.shop_table td.product-name {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 0;
}

#order_review table.shop_table td.product-total {
	flex-shrink: 0;
	text-align: right;
	white-space: nowrap;
}

#order_review table.shop_table tfoot th {
	flex-shrink: 0;
	color: var(--c-muted);
	font-weight: 400;
	text-align: left;
}

#order_review table.shop_table tfoot td {
	text-align: right;
}

#order_review .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

#order_review tr.order-total th {
	color: var(--c-ink);
	font-weight: 600;
}

#order_review .checkout-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	vertical-align: middle;
}

#order_review .checkout-item__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: var(--c-surface);
	border-radius: var(--radius-s);
	mix-blend-mode: multiply;
}

#order_review table.shop_table .product-name {
	font-weight: 500;
}

#order_review table.shop_table .product-quantity {
	color: var(--c-muted);
	font-weight: 400;
}

#order_review tr.fee td {
	color: var(--c-accent);
}

/* Quantity and "Remove" under each item's name (inc/woocommerce/cart-checkout.php). */
#order_review .checkout-item__controls {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-2) 0 0 60px;
	transition: opacity var(--transition);
}

#order_review .checkout-item__controls.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

#order_review .checkout-qty {
	display: inline-flex;
	align-items: center;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: 999px;
}

#order_review .checkout-qty__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--c-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

#order_review .checkout-qty__step:hover {
	background: var(--c-surface);
}

#order_review .checkout-qty__step:disabled {
	color: var(--c-line);
	background: none;
	cursor: default;
}

#order_review .checkout-qty__value {
	min-width: 1.5em;
	font-size: var(--fs-s);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

#order_review .checkout-item__remove {
	padding: 0;
	background: none;
	border: 0;
	color: var(--c-muted);
	font: inherit;
	font-size: var(--fs-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

#order_review .checkout-item__remove:hover {
	color: var(--c-sale);
}

#order_review .checkout-item__error {
	display: block;
	margin: var(--space-1) 0 0 60px;
	color: var(--c-sale);
	font-size: var(--fs-xs);
}

/* Payment methods: cards, the chosen one outlined. */
#payment ul.payment_methods > li {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-m);
	transition: border-color var(--transition), box-shadow var(--transition);
}

#payment ul.payment_methods > li:has(> input:checked) {
	border-color: var(--c-ink);
	box-shadow: 0 0 0 1px var(--c-ink);
}

#payment ul.payment_methods > li > input {
	accent-color: var(--c-ink);
	margin-right: var(--space-2);
	vertical-align: middle;
}

#payment ul.payment_methods > li > label {
	font-weight: 500;
}

/* The live site hides the methods' descriptions (legacy.css), so the boxes are
   left plain: only the open banking choice shows. */
#payment ul.payment_methods > li .payment_box {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
}

#payment ul.payment_methods > li .payment_box fieldset {
	margin: var(--space-2) 0 0;
	padding: 0;
	border: 0;
}

/* The address reminder under the billing fields (theme legacy notice). */
.woocommerce-checkout .ls-address-notice {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-color: #f0dca0;
	border-radius: var(--radius-m);
	color: var(--c-ink-soft);
	font-size: var(--fs-s);
}

/* ---------- Focused checkout, compact notices, easier fields ----------
   (inc/woocommerce/cart-checkout.php, header.php, main.js) */

/* Only the logo and "Secure checkout" in the header; no menu, search,
   basket, breadcrumbs or footer links to leave by. */
.is-checkout-focus .nav-toggle,
.is-checkout-focus .site-search,
.is-checkout-focus .primary-nav,
.is-checkout-focus .woocommerce-breadcrumb,
.is-checkout-focus .site-footer__main {
	display: none;
}

.is-checkout-focus .site-header {
	border-bottom: 1px solid var(--c-line);
}

.is-checkout-focus .site-header__bar {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "brand actions";
}

.is-checkout-focus .site-branding {
	justify-self: start;
}

.header-secure {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-s);
	font-weight: 500;
	white-space: nowrap;
}

.header-secure .icon {
	color: var(--c-accent);
}

.is-checkout-focus .entry-header {
	margin-top: var(--space-5);
}

.is-checkout-focus .entry-header .entry-title {
	font-size: var(--fs-2xl);
}

/* Discount and other confirmations: one small green line instead of a box
   (the message is text with a <strong> inside, so it flows as one line). */
.woocommerce-checkout #awdr_checkout_promotion_messages:empty {
	display: none;
}

.woocommerce-checkout #awdr_checkout_promotion_messages .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-message {
	position: relative;
	display: block;
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3) var(--space-2) 36px;
	background: var(--c-accent-soft);
	border: 0;
	border-radius: var(--radius-m);
	color: var(--c-accent-hover);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.woocommerce-checkout #awdr_checkout_promotion_messages .woocommerce-message::before,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-message::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat 50% / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

/* Field help (the email address): shown under the field while it is being
   filled in (WooCommerce slides it in on focus). */
.woocommerce-checkout .woocommerce-input-wrapper .description {
	display: none;
	margin-top: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

/* Optional fields behind "+ Add …" (main.js): the link sits in the field's
   row, the label and field come back with a click. */
.woocommerce form .form-row.is-folded {
	margin-top: calc(-1 * var(--space-2));
}

.woocommerce form .form-row.is-folded > :not(.checkout-add-field) {
	display: none;
}

.checkout-add-field {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin: 0;
	padding: var(--space-1) 0;
	background: none;
	border: 0;
	color: var(--c-accent);
	font: inherit;
	font-size: var(--fs-s);
	font-weight: 500;
	cursor: pointer;
}

.checkout-add-field:hover {
	color: var(--c-accent-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* "Ship to a different address?": a plain checkbox line, not a big title. */
.woocommerce-shipping-fields > h3#ship-to-different-address {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-m);
	font-weight: 500;
}

#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

#ship-to-different-address input {
	margin: 0;
}

/* The address reminder: smaller. */
.woocommerce-checkout .ls-address-notice {
	padding: var(--space-2) var(--space-3);
	font-size: 0.8125rem;
}

/* Payment choices: one white box, the options divided by thin lines, the
   chosen one tinted with its line of explanation shown. The whole row is
   the tap area. */
#payment ul.payment_methods {
	margin: 0 0 var(--space-4);
	overflow: hidden;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

/* The ring sits level with the choice's name (first line, 22px high), also
   when the explanation opens below it. */
#payment ul.payment_methods > li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: background var(--transition);
}

#payment ul.payment_methods > li + li {
	border-top: 1px solid var(--c-line);
}

#payment ul.payment_methods > li:has(> input:checked) {
	background: #f7f9f8;
	box-shadow: none;
}

/* A thin ring, filled dark when chosen. */
#payment ul.payment_methods > li > input[type="radio"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 20px 0 0 var(--space-4);
	-webkit-appearance: none;
	appearance: none;
	background: var(--c-bg);
	border: 1.5px solid #b9c1bc;
	border-radius: 999px;
	cursor: pointer;
	transition: border var(--transition);
}

#payment ul.payment_methods > li > input[type="radio"]:checked {
	border: 5.5px solid var(--c-ink);
}

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

#payment ul.payment_methods > li > label {
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--space-3);
	min-width: 0;
	margin: 0;
	padding: 18px var(--space-4) 18px var(--space-3);
	font-weight: 500;
	cursor: pointer;
}

#payment ul.payment_methods > li > .payment_box {
	flex: 1 0 100%;
	margin: 0;
	padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 18px + var(--space-3));
	background: none;
}

/* Terms: the box on the left, the text (and its *) flowing beside it. */
.woocommerce-terms-and-conditions-wrapper .form-row label.checkbox {
	position: relative;
	display: block;
	padding-left: 28px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

.woocommerce-terms-and-conditions-wrapper .form-row label.checkbox input {
	position: absolute;
	top: 2px;
	left: 0;
	margin: 0;
}

/* "Payment" above the choices (inc/woocommerce/cart-checkout.php). */
.checkout-payment-head {
	margin: var(--space-6) 0 var(--space-3);
}

.checkout-payment-head__title {
	margin: 0;
	font-size: var(--fs-l);
	font-weight: 600;
}

.checkout-payment-head__note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.checkout-payment-head__note .icon {
	flex-shrink: 0;
	color: var(--c-accent);
}

/* Each choice: its name on the left, the payment marks (card) or banks
   (pay by bank) small on the right, the explanation under the chosen one. */
.payment-choice__title {
	flex: 1 1 auto;
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 22px;
}

.payment-choice__note {
	display: none;
	flex: 1 0 100%;
	color: var(--c-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.45;
}

#payment ul.payment_methods > li:has(> input:checked) .payment-choice__note {
	display: block;
}

.payment-marks,
.payment-banks {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

#payment ul.payment_methods .payment-marks img {
	display: block;
	width: 34px;
	height: 22px;
	max-height: none;
	margin: 0;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid #e3e7e5;
	border-radius: 4px;
}

/* Banks: small app-style tiles in each bank's colour (assets/images/banks). */
.payment-banks__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
}

.payment-banks__logo svg {
	display: block;
	width: 13px;
	height: 13px;
}

.payment-banks__more {
	margin-left: 2px;
	color: var(--c-muted);
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Phones: the name on its own line, every mark (Apple Pay and Google Pay
   too) or bank on the line under it, then the explanation. */
@media (max-width: 599px) {
	#payment ul.payment_methods > li > label {
		gap: 8px var(--space-3);
		padding-top: 16px;
		padding-bottom: 16px;
	}

	#payment ul.payment_methods > li > input[type="radio"] {
		margin-top: 18px;
	}

	.payment-marks,
	.payment-banks {
		flex: 1 0 100%;
		flex-wrap: wrap;
		margin-left: 0;
	}

	#payment ul.payment_methods .payment-marks img {
		width: 36px;
		height: 23px;
	}

	.payment-banks__logo {
		width: 24px;
		height: 24px;
	}

	.payment-banks__logo svg {
		width: 14px;
		height: 14px;
	}
}

/* Reassurance badges under "Place order". */
.checkout-badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.checkout-badges li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.checkout-badges__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--c-accent-soft);
	border-radius: 999px;
	color: var(--c-accent);
}

.checkout-badges__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.checkout-badges__text strong {
	color: var(--c-ink);
	font-size: 0.75rem;
	font-weight: 600;
}

.checkout-badges__text span {
	color: var(--c-muted);
	font-size: 0.6875rem;
}

/* The order summary: one light panel, the items on it with white picture
   tiles, the total set apart. */
#order_review table.shop_table {
	background: transparent;
	border: 0;
	border-radius: 0;
}

#order_review table.shop_table tr {
	border-bottom-color: rgb(14 20 17 / 0.08);
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: var(--space-3) 0;
}

#order_review table.shop_table tbody td.product-name {
	padding-right: var(--space-3);
}

/* Name at the top beside the picture, level with the price. */
#order_review .checkout-item {
	align-items: flex-start;
	gap: var(--space-3);
}

#order_review .checkout-item__name {
	padding-top: 6px;
}

#order_review table.shop_table tbody td.product-total {
	padding-top: calc(var(--space-3) + 6px);
}

#order_review .checkout-item__thumb {
	width: 56px;
	height: 56px;
	padding: 4px;
	background: #ffffff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	mix-blend-mode: normal;
}

#order_review .checkout-item__name {
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.35;
}

#order_review .checkout-item__controls,
#order_review .checkout-item__error {
	margin-left: 68px;
}

#order_review .checkout-qty {
	background: #ffffff;
}

#order_review table.shop_table tbody td.product-total {
	font-size: var(--fs-s);
	font-weight: 600;
}

#order_review table.shop_table tfoot th,
#order_review table.shop_table tfoot td {
	font-size: var(--fs-s);
}

#order_review tr.order-total th {
	font-size: var(--fs-m);
}

#order_review tr.order-total td {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Phones and tablets: "Show order summary · £total" first (main.js opens
   it; it starts open when a delivery option has to be chosen), then the
   details, then payment and "Place order". #order_review lets its summary
   and payment take their own places in the form. */
.checkout-summary-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
	color: var(--c-ink);
	font: inherit;
	font-size: var(--fs-s);
	text-align: left;
	cursor: pointer;
}

.checkout-summary-toggle[hidden] {
	display: none;
}

.checkout-summary-toggle__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-accent);
	font-weight: 500;
}

.checkout-summary-toggle__label::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-chevron) no-repeat 50% / contain;
	mask: var(--icon-chevron) no-repeat 50% / contain;
	transition: transform var(--transition);
}

.checkout-summary-toggle[aria-expanded="true"] .checkout-summary-toggle__label::after {
	transform: rotate(180deg);
}

.checkout-summary-toggle__total {
	font-size: var(--fs-m);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
	form.checkout > #order_review {
		display: contents;
	}

	form.checkout > *,
	form.checkout > #order_review > * {
		order: 4;
	}

	form.checkout > .woocommerce-NoticeGroup {
		order: 0;
	}

	form.checkout > .checkout-summary-toggle {
		order: 1;
	}

	form.checkout > #order_review > .woocommerce-checkout-review-order-table {
		order: 2;
		margin: calc(-1 * var(--space-2)) 0 var(--space-5);
		padding: 0 var(--space-4);
		background: var(--c-surface);
		border-radius: var(--radius-l);
	}

	form.checkout > #order_review > .checkout-payment-head {
		order: 5;
		margin-top: var(--space-2);
	}

	form.checkout > #customer_details {
		order: 3;
	}

	form.checkout > #order_review > #payment {
		order: 5;
		padding: var(--space-4);
		background: var(--c-surface);
		border-radius: var(--radius-l);
	}

	/* The bar names the summary. */
	form.checkout.has-summary-toggle > #order_review_heading {
		display: none;
	}

	form.checkout.has-summary-toggle:not(.is-summary-open) > #order_review > .woocommerce-checkout-review-order-table {
		display: none;
	}

	/* 16px in fields: iPhones zoom into smaller text when it is tapped. */
	.select2-container .select2-selection--single .select2-selection__rendered,
	.select2-search--dropdown .select2-search__field {
		font-size: 16px;
	}
}

@media (min-width: 1024px) {
	.checkout-summary-toggle {
		display: none;
	}
}

/* ---------- UpsellWP offers (cart and checkout) ----------
   Colours and spacing come inline from the plugin's settings, hence
   !important: a white card and the site's dark button instead of yellow. */
.cuw-offer .cuw-container {
	margin: var(--space-4) 0 !important;
	padding: var(--space-4) !important;
	background: var(--c-bg) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-l) !important;
}

.cuw-offer .cuw-product-image img {
	display: block;
	width: 100%;
	max-width: 96px;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--c-surface);
	border-radius: var(--radius-m);
	mix-blend-mode: multiply;
}

.cuw-offer .cuw-product-title {
	color: var(--c-ink) !important;
	font-size: var(--fs-s) !important;
	font-weight: 600;
	line-height: 1.35;
}

.cuw-offer .cuw-offer-title,
.cuw-offer .cuw-offer-description {
	padding: 0 !important;
	background: none !important;
	color: var(--c-muted) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 400;
	line-height: 1.5;
	text-align: left !important;
}

.cuw-offer .cuw-product-price {
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 600;
}

.cuw-offer select.variant-select {
	min-height: 40px;
	font-size: var(--fs-s);
}

.cuw-offer .cuw-offer-cta-section {
	background: var(--c-ink) !important;
	border-radius: var(--radius-m) !important;
	color: #ffffff !important;
	transition: background var(--transition);
}

.cuw-offer .cuw-offer-cta-section:hover {
	background: var(--c-accent) !important;
}

.cuw-offer .cuw-button {
	min-height: 44px;
	cursor: pointer;
}

.cuw-offer .cuw-offer-cta-text {
	font-size: var(--fs-s);
	font-weight: 500 !important;
}

/* ==========================================================================
   My account and order received
   ========================================================================== */
.u-columns.col2-set {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	.u-columns.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-s);
	color: var(--c-ink);
	text-decoration: none;
}

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

.woocommerce-LostPassword {
	font-size: var(--fs-s);
}

p.technical-issue {
	padding: var(--space-4) var(--space-5);
	background: var(--c-notice);
	border: 1px solid #d3c084;
	border-radius: var(--radius-m);
}

.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.woocommerce-order-overview li {
	padding: var(--space-3) var(--space-4);
	background: var(--c-surface);
	border-radius: var(--radius-m);
	color: var(--c-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: var(--space-1);
	color: var(--c-ink);
	font-size: var(--fs-m);
	text-transform: none;
}

.woocommerce-customer-details address {
	padding: var(--space-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	font-style: normal;
}

/* ==========================================================================
   Previous / next product (single product summary)
   ========================================================================== */
.product-prevnext {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.product-prevnext__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-ink);
}

.product-prevnext__link:hover,
.product-prevnext__link:focus-visible {
	border-color: var(--c-ink);
}

.product-prevnext__tooltip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--space-3);
	width: 260px;
	padding: var(--space-3);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.25);
	font-size: var(--fs-s);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
}

.product-prevnext__tooltip img {
	grid-row: span 2;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.product-prevnext__link:hover .product-prevnext__tooltip,
.product-prevnext__link:focus-visible .product-prevnext__tooltip {
	opacity: 1;
	visibility: visible;
}

.product-prevnext__title {
	font-weight: 600;
}

.product-prevnext__price {
	color: var(--c-muted);
}

/* ==========================================================================
   Add-to-basket pop-up (inc/woocommerce/basket-popup.php, main.js)
   A centred dialog on large screens, a sheet from the bottom on phones.
   ========================================================================== */
.basket-popup {
	width: min(100% - 32px, 460px);
	max-width: none;
	max-height: min(100vh - 48px, 780px);
	max-height: min(100dvh - 48px, 780px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	background: var(--c-bg);
	border: 0;
	border-radius: var(--radius-xl);
	box-shadow: 0 30px 80px -24px rgb(14 20 17 / 0.45);
	color: var(--c-ink);
}

.basket-popup[open] {
	display: flex;
	flex-direction: column;
	animation: basket-popup-in 220ms ease-out;
}

.basket-popup::backdrop {
	background: rgb(14 20 17 / 0.5);
	animation: basket-popup-fade 220ms ease-out;
}

.basket-popup__panel {
	flex: 1 1 auto;
	min-height: 0;
	/* x hidden: Chrome counts the close button's negative margin as overflow. */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-5);
}

@keyframes basket-popup-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes basket-popup-up {
	from {
		transform: translateY(100%);
	}

	to {
		transform: none;
	}
}

@keyframes basket-popup-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (max-width: 599px) {
	.basket-popup {
		width: 100%;
		max-height: calc(100vh - 56px);
		max-height: calc(100dvh - 56px);
		margin: auto 0 0;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	}

	.basket-popup[open] {
		animation-name: basket-popup-up;
	}

	.basket-popup__panel {
		padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.basket-popup[open],
	.basket-popup::backdrop {
		animation: none;
	}
}

.basket-popup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.basket-popup__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-m);
	font-weight: 600;
}

/* Focused on opening (autofocus) so the close button gets no ring on a tap. */
.basket-popup__title:focus {
	outline: none;
}

.basket-popup__tick {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--c-accent);
	border-radius: 999px;
	color: #ffffff;
}

.basket-popup__tick .icon {
	stroke-width: 2.6;
}

.basket-popup__close {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px -8px -8px 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--c-muted);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.basket-popup__close:hover {
	background: var(--c-surface);
	color: var(--c-ink);
}

/* What was added */
.basket-popup__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.basket-popup__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3);
	background: var(--c-surface);
	border-radius: var(--radius-l);
}

.basket-popup__item + .basket-popup__item {
	margin-top: var(--space-2);
}

.basket-popup__thumb {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: #ffffff;
	border-radius: var(--radius-m);
}

.basket-popup__item-name {
	margin: 0;
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.35;
}

.basket-popup__item-meta {
	margin: 2px 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.basket-popup__item-price {
	margin: 0;
	font-size: var(--fs-s);
	font-weight: 600;
	white-space: nowrap;
}

.basket-popup__item-price del {
	display: none;
}

.basket-popup__item-price ins {
	text-decoration: none;
}

/* Subtotal (and any discount), delivery, buttons */
.basket-popup__totals {
	margin-top: var(--space-4);
}

.basket-popup__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--fs-s);
}

.basket-popup__total + .basket-popup__total {
	margin-top: var(--space-1);
}

.basket-popup__total > span {
	color: var(--c-muted);
}

.basket-popup__total strong {
	font-size: var(--fs-m);
	font-weight: 600;
}

.basket-popup__total--saving > span,
.basket-popup__total--saving strong {
	color: var(--c-accent);
	font-size: var(--fs-s);
	font-weight: 500;
}

.basket-popup__delivery {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.basket-popup__delivery .icon {
	flex-shrink: 0;
	color: var(--c-ink);
}

.basket-popup__actions {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.basket-popup__actions .button {
	width: 100%;
	min-height: 50px;
	font-size: var(--fs-m);
}

.basket-popup__basket-link {
	display: block;
	width: fit-content;
	margin: var(--space-3) auto 0;
	color: var(--c-muted);
	font-size: var(--fs-s);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.basket-popup__basket-link:hover {
	color: var(--c-ink);
}

/* Products that go with it */
.basket-popup__suggest {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line);
}

.basket-popup__suggest-title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-s);
	font-weight: 600;
}

.basket-popup__suggest-list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.basket-suggest {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.basket-suggest__image img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: var(--c-surface);
	border-radius: var(--radius-m);
}

.basket-suggest__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.basket-suggest__name {
	color: var(--c-ink);
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

.basket-suggest__name:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

.basket-suggest__price {
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
}

.basket-suggest__price del {
	margin-right: 4px;
	color: var(--c-muted);
}

.basket-suggest__price ins {
	text-decoration: none;
}

.basket-suggest__options {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.basket-suggest__option {
	padding: 3px 10px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-ink);
	font: inherit;
	font-size: var(--fs-xs);
	line-height: 1.5;
	cursor: pointer;
}

.basket-suggest__option:hover {
	border-color: var(--c-ink);
}

.basket-suggest__option.is-selected {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #ffffff;
}

.basket-suggest__form {
	margin: 0;
}

/* Plain button[type="submit"] is a green button site-wide: reset it here. */
.basket-popup .basket-suggest__add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 var(--space-3);
	background: var(--c-bg);
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	color: var(--c-ink);
	font-size: var(--fs-xs);
	font-weight: 500;
	white-space: nowrap;
}

.basket-popup .basket-suggest__add:hover {
	background: var(--c-bg);
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.basket-suggest__add .icon-check,
.basket-suggest.is-added .basket-suggest__add .icon-bag {
	display: none;
}

.basket-suggest.is-added .basket-suggest__add .icon-check {
	display: block;
}

.basket-popup .basket-suggest.is-added .basket-suggest__add {
	background: var(--c-accent-soft);
	border-color: var(--c-accent-soft);
	color: var(--c-accent-hover);
	cursor: default;
}

.basket-suggest__error {
	grid-column: 2 / -1;
	margin: 0;
	color: var(--c-sale);
	font-size: var(--fs-xs);
}

/* Waiting for the basket: the same spinner as WooCommerce's card buttons. */
.button.is-loading,
.basket-popup .basket-suggest__add.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.button.is-loading::after,
.basket-suggest__add.is-loading::after {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: uksarms-spin 0.7s linear infinite;
}

/* Could not add (e.g. not enough stock): shown above the button. */
.add-to-cart-error {
	flex: 0 0 100%;
	margin: 0 0 var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: #fdecea;
	border-radius: var(--radius-m);
	color: #b42318;
	font-size: var(--fs-s);
}

/* The pop-up has "View basket": no extra link under card buttons. */
.has-basket-popup .added_to_cart.wc-forward {
	display: none;
}

/* ==========================================================================
   Basket panel (inc/woocommerce/cart-drawer.php, main.js)
   The header basket opens it from the right; full width on phones. The
   items scroll, the subtotal and "Checkout" stay at the bottom.
   ========================================================================== */
.cart-drawer {
	inset: 0 0 0 auto;
	width: min(100%, 420px);
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--c-bg);
	border: 0;
	box-shadow: -24px 0 60px -30px rgb(14 20 17 / 0.45);
	color: var(--c-ink);
}

.cart-drawer[open] {
	display: flex;
	flex-direction: column;
	animation: cart-drawer-in 240ms ease-out;
}

.cart-drawer::backdrop {
	background: rgb(14 20 17 / 0.5);
	animation: basket-popup-fade 220ms ease-out;
}

@keyframes cart-drawer-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cart-drawer[open],
	.cart-drawer::backdrop {
		animation: none;
	}
}

.cart-drawer__panel,
.cart-drawer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.cart-drawer__body {
	transition: opacity var(--transition);
}

/* Opened again: the last contents show until the fresh ones arrive. */
.cart-drawer__body.is-refreshing {
	opacity: 0.55;
}

.cart-drawer__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--c-line);
}

.cart-drawer__title {
	margin: 0;
	font-size: var(--fs-m);
	font-weight: 600;
}

/* Focused on opening (autofocus) so the close button gets no ring on a tap. */
.cart-drawer__title:focus {
	outline: none;
}

.cart-drawer__count {
	color: var(--c-muted);
	font-weight: 400;
}

.cart-drawer__close {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px -8px -8px 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--c-muted);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.cart-drawer__close:hover {
	background: var(--c-surface);
	color: var(--c-ink);
}

.cart-drawer__loading {
	margin: auto;
	padding: var(--space-6) var(--space-5);
	color: var(--c-muted);
	font-size: var(--fs-s);
}

/* Items */
.cart-drawer__items {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 var(--space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.cart-drawer__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--c-line);
	transition: opacity var(--transition);
}

.cart-drawer__item:last-child {
	border-bottom: 0;
}

.cart-drawer__item.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.cart-drawer__image {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: var(--c-surface);
	border-radius: var(--radius-m);
}

.cart-drawer__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.cart-drawer__item-name {
	margin: 0;
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.35;
}

.cart-drawer__item-name a {
	color: var(--c-ink);
	text-decoration: none;
}

.cart-drawer__item-name a:hover {
	color: var(--c-accent);
}

.cart-drawer__item-meta {
	margin: 2px 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.cart-drawer__item-price {
	margin: 0;
	font-size: var(--fs-s);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.cart-drawer__item-price del {
	display: block;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: 400;
}

.cart-drawer__item-price ins {
	text-decoration: none;
}

/* "− 2 +" and "Remove", as in the checkout's order summary. */
.cart-drawer__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.cart-drawer__qty {
	display: inline-flex;
	align-items: center;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: 999px;
}

.cart-drawer__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--c-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.cart-drawer__step:hover {
	background: var(--c-surface);
}

.cart-drawer__step:disabled {
	color: var(--c-line);
	background: none;
	cursor: default;
}

.cart-drawer__qty-value {
	min-width: 1.5em;
	font-size: var(--fs-s);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.cart-drawer__qty-fixed {
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.cart-drawer__remove {
	padding: 0;
	background: none;
	border: 0;
	color: var(--c-muted);
	font: inherit;
	font-size: var(--fs-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.cart-drawer__remove:hover {
	color: var(--c-sale);
}

.cart-drawer__error {
	grid-column: 2 / -1;
	margin: 0;
	color: var(--c-sale);
	font-size: var(--fs-xs);
}

.cart-drawer__body > .cart-drawer__error {
	padding: var(--space-3) var(--space-5) 0;
}

/* Subtotal, delivery and buttons */
.cart-drawer__foot {
	flex: none;
	padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
	background: var(--c-bg);
	border-top: 1px solid var(--c-line);
}

.cart-drawer__foot .basket-popup__totals {
	margin-top: 0;
}

.cart-drawer__checkout {
	width: 100%;
	min-height: 50px;
	margin-top: var(--space-4);
	font-size: var(--fs-m);
}

.cart-drawer__continue {
	display: block;
	width: fit-content;
	margin: var(--space-3) auto 0;
	padding: var(--space-1) var(--space-2);
	background: none;
	border: 0;
	color: var(--c-muted);
	font: inherit;
	font-size: var(--fs-s);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.cart-drawer__continue:hover {
	color: var(--c-ink);
}

.cart-drawer__empty {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-6) var(--space-5);
	color: var(--c-muted);
	text-align: center;
}

.cart-drawer__empty p {
	margin: 0;
}

@media (max-width: 599px) {
	.cart-drawer {
		width: 100%;
	}

	.cart-drawer__head,
	.cart-drawer__foot {
		padding-inline: var(--gutter);
	}

	.cart-drawer__items {
		padding-inline: var(--gutter);
	}
}