/*
 * Rua WooCommerce styles.
 *
 * Overrides WooCommerce's default stylesheets rather than replacing them, so
 * the pieces this file does not touch (checkout fields, account tables) keep
 * working. Selectors deliberately mirror WooCommerce's own so that, loaded
 * later, they win on equal specificity without resorting to !important.
 *
 * Mobile first, tokens from theme.json, same as theme.css.
 */

:root {
	/* Cart, checkout and account: wider than prose, narrower than the shop. */
	--rua-commerce-width: 1100px;
	--rua-card-ratio: 3 / 4;
	--rua-field-height: 48px;
	--rua-thumb-width: 72px;
	--rua-buybar-height: 72px;
	/* Phone product page: how far the summary sheet rides up over the photo. */
	--rua-sheet-overlap: 1.5rem;
}

/* --------------------------------------------------------- buttons ---- */

/*
 * :is() takes the specificity of its strongest argument (.button.alt), so
 * one rule outranks every WooCommerce button variant while staying low
 * enough for page-specific rules below to override it.
 */
.woocommerce :is(a.button, button.button, input.button, a.button.alt, button.button.alt, input.button.alt) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rua-transition);
}

.woocommerce :is(a.button, button.button, input.button, a.button.alt, button.button.alt, input.button.alt):hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/*
 * Disabled, including on hover.
 *
 * WooCommerce colours a hovered disabled button in its own purple
 * (#7F54B3). The selector that does it for a variable product's "Add to
 * cart" -- `button.button.alt:disabled[disabled]:hover` -- counts six
 * classes, one more than a plain `:disabled` version of the rule above, so
 * it won on specificity no matter which stylesheet loaded last. That is
 * what turned the button purple while no size was chosen. Naming both
 * hover forms here takes this rule past it.
 */
.woocommerce :is(a.button, button.button, input.button, a.button.alt, button.button.alt, input.button.alt):is(:disabled, .disabled, .alt.disabled:hover, .alt:disabled[disabled]:hover) {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------- notices ---- */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0.9rem 1.25rem;
	border: var(--rua-border);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

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

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	min-height: 36px;
	padding-inline: 1rem;
	margin-left: 1rem;
}

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

.woocommerce-products-header {
	max-width: 46rem;
	margin: 0 auto var(--wp--preset--spacing--50);
	text-align: center;
}

.woocommerce-products-header__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0 0 0.5rem;
}

/* Category or shop description, below the products and pagination. */
.rua-archive-about {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.rua-archive-about > * > :first-child {
	margin-top: 0;
}

.rua-archive-about > * > :last-child {
	margin-bottom: 0;
}

/* Result count and sort sit on one line above the grid. */
.woocommerce .woocommerce-result-count {
	float: left;
	margin: 0 0 var(--wp--preset--spacing--40);
	line-height: var(--rua-field-height);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce .woocommerce-ordering {
	float: right;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.woocommerce .woocommerce-ordering select {
	min-height: var(--rua-field-height);
	padding: 0 2.5rem 0 1rem;
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	appearance: none;
	cursor: pointer;
}

/* ----------------------------------------------------- product grid ---- */

/*
 * One grid for every product list: shop, category, related and upsells.
 * WooCommerce's float-and-percentage layout (and its per-context column
 * counts) is replaced wholesale so they all match.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

@media (min-width: 700px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--40);
	}
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	position: relative;
}

/* ----------------------------------------------------- product card ---- */

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: var(--rua-card-ratio);
	object-fit: cover;
	margin: 0 0 0.85rem;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--surface);
	box-shadow: none;
	transition: opacity var(--rua-transition);
}

.woocommerce ul.products li.product a:hover img {
	opacity: 0.9;
}

/*
 * Hover swap: the first gallery image (added by Woocommerce::loop_hover_image)
 * sits over the thumbnail and fades in. Both are the same ratio, so they
 * align exactly. Pointer devices only; touch gets the plain thumbnail,
 * and with the hover image out of the layout its lazy download never
 * starts -- an image that is merely transparent still downloads.
 */
.woocommerce ul.products li.product a img.rua-card__hover {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease;
}

@media (hover: hover) {
	.woocommerce ul.products li.product a:hover img.rua-card__hover {
		opacity: 1;
	}
}

@media (hover: none) {
	.woocommerce ul.products li.product a img.rua-card__hover {
		display: none;
	}
}

/*
 * Three lines under every photo, set as the product page's details are:
 * the category as a small-caps label, the name, then the price (with
 * "Free size" beside it) or, once sold out, "Get restock alert".
 */
.woocommerce ul.products li.product .rua-card__category {
	display: block;
	margin: 0 0 0.3rem;
	overflow: hidden;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	display: -webkit-box;
	margin: 0 0 0.35rem;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

.rua-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product .price del {
	margin-right: 0.35em;
	opacity: 1;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce ul.products li.product .price ins {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.rua-card__free {
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
	white-space: nowrap;
}

/* The product page's "In stock" green. */
.rua-card__alert {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
	color: #1a6b45;
}

.rua-card__alert .rua-icon {
	flex: 0 0 auto;
}

.woocommerce ul.products li.product a:hover .rua-card__alert {
	text-decoration: underline;
}

@media (min-width: 900px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9375rem;
	}

	.woocommerce ul.products li.product .price {
		font-size: 0.9375rem;
	}
}

.woocommerce ul.products li.product .star-rating {
	margin: 0.35rem 0;
}

/* Removed via hook; this catches plugins that re-add it. */
.woocommerce ul.products li.product .button {
	display: none;
}

/*
 * One badge on the photo's top-left corner: Sold out, New or Sale (see
 * Woocommerce::card_badge()). A sold-out photo is not dimmed: the hover
 * photo sits under it and would show through. WooCommerce's
 * own sale flash is unhooked; the rule for it stays for plugins that
 * print one.
 */
.rua-card__badge,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.woocommerce span.onsale,
.rua-card__badge--sale {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.rua-card__badge--sold-out {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* A reel to watch: a play button on the photo's top-right, beside the card link. */
.rua-card__reel {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--base);
}

.rua-card__reel::before {
	content: "";
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgb(20 14 10 / 0.45);
	transition: background-color var(--rua-transition);
}

.rua-card__reel:hover::before {
	background: var(--wp--preset--color--primary);
}

.rua-card__reel .rua-icon {
	position: relative;
	margin-left: 2px;
	fill: currentColor;
}

/* Related and upsells share one heading style. */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-large);
	text-align: center;
}

.woocommerce .related,
.woocommerce .upsells {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--60);
	border-top: var(--rua-border);
}

/* ------------------------------------------------------ home rows ----- */

/*
 * The front page's product rows are WooCommerce's own [products] shortcode,
 * so they arrive inside a .woocommerce wrapper and pick up the grid and card
 * rules above unchanged. The shortcode prints its own heading markup only
 * when asked to; the section supplies the heading, so nothing is duplicated.
 */
.rua-products .woocommerce {
	margin: 0;
}

/* Four across from 1000px, as the shop is; two on a phone. */
.rua-products ul.products {
	margin: 0;
}

/* ---------------------------------------------------- single product --- */

/*
 * .rua-product__main is added by hooks around the gallery and summary (see
 * Woocommerce::product_main_start). It, not div.product, is the grid, so the
 * sticky summary is constrained to the gallery's height.
 */
.woocommerce div.product .rua-product__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	position: relative;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary {
	float: none;
	width: 100%;
	margin: 0;
}

@media (min-width: 900px) {
	.woocommerce div.product .rua-product__main {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	/* The summary stays in view while a long gallery scrolls. */
	.woocommerce div.product div.summary {
		position: sticky;
		top: calc(var(--rua-header-offset) + var(--wp--preset--spacing--40));
	}
}

@media (min-width: 1200px) {
	.woocommerce div.product .rua-product__main {
		column-gap: var(--wp--preset--spacing--70);
	}

	.woocommerce div.product div.summary {
		padding-right: var(--wp--preset--spacing--50);
	}
}

/* Gallery */

/*
 * No slider script: the photos are printed one after another (with the
 * reel second) and laid out here. Phones: a row that swipes with the
 * browser's own scrolling, a photo at a time, with the counter, dots and
 * "Watch reel" chip theme.js adds. Desktop: a two-column grid beside the
 * sticky details, five photos and the reel, the fifth saying "All 7
 * photos" when there are more (they open in the full-screen viewer).
 */
.woocommerce div.product div.images.rua-gallery {
	position: relative;
	margin: 0;
	/*
	 * WooCommerce hides the gallery (an inline opacity: 0) until its script
	 * has set up the slider. There is no slider, so the first photo -- the
	 * page's largest paint -- shows as soon as it arrives.
	 */
	opacity: 1 !important;
}

.woocommerce div.product div.images img {
	background: var(--wp--preset--color--surface);
}

/* A tap or click on a photo opens the full-screen viewer; no lens button. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.rua-gallery .woocommerce-product-gallery__wrapper {
	position: relative;
	display: flex;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rua-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
	display: none;
}

/* WooCommerce's own sheet shrinks every photo after the first to a thumbnail when there is no slider. */
.woocommerce div.product div.images.rua-gallery .woocommerce-product-gallery__image {
	position: relative;
	display: block;
	flex: 0 0 100%;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Another colour's photo while a colour is chosen. */
.woocommerce div.product div.images.rua-gallery .woocommerce-product-gallery__image.is-other-colour {
	display: none;
}

/* The reel over the first photo, its cover: "See it move". */
.has-reel .rua-reel-tile--cover {
	position: absolute;
	inset: 0;
	width: 100%;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.has-reel .rua-reel-tile--cover .rua-reel-tile__badge {
	right: 0.75rem;
	left: auto;
	top: 0.75rem;
}

.has-reel .rua-reel-tile--cover .rua-reel-tile__play {
	width: 4rem;
	height: 4rem;
}

.has-reel .rua-reel-tile--cover .rua-reel-tile__text {
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	align-items: center;
	text-align: center;
}

.has-reel .rua-reel-tile--cover .rua-reel-tile__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 500;
}

.rua-reel-tile__hint {
	font-size: 0.75rem;
	opacity: 0.85;
}

.rua-gallery__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Phones: counter, dots and the chip, over the photo's lower edge. */
.rua-gallery__ui {
	position: absolute;
	right: 0;
	bottom: calc(var(--rua-sheet-overlap) + 0.75rem);
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/* One band the chip fits in, so it stays clear of the sheet below. */
	height: 30px;
	padding-inline: 1rem;
	pointer-events: none;
}

.rua-gallery__dots {
	display: flex;
	gap: 0.3rem;
}

.rua-gallery__dots span {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: rgb(255 255 255 / 0.6);
	box-shadow: 0 0 3px rgb(0 0 0 / 0.25);
	transition: width var(--rua-transition), background-color var(--rua-transition);
}

.rua-gallery__dots span.is-current {
	width: 18px;
	background: #fff;
}

.rua-gallery__count {
	position: absolute;
	right: 1rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.45);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 500;
}

.rua-gallery__chip {
	position: absolute;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 30px;
	padding: 0 0.75rem 0 0.625rem;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.92);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
	cursor: pointer;
	pointer-events: auto;
}

.rua-gallery__chip[hidden] {
	display: none;
}

.rua-gallery__chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(125 46 61 / 0.25);
}

@media (min-width: 900px) {
	.rua-gallery .woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		overflow: visible;
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__image img,
	.has-reel .rua-reel-tile--cover {
		border-radius: 16px;
	}

	.has-reel .rua-reel-tile--cover .rua-reel-tile__badge {
		top: 1rem;
		right: 1rem;
	}

	.rua-gallery__badge {
		top: 1rem;
		left: 1rem;
	}

	.rua-gallery__ui {
		display: none;
	}

	/* Past five photos the rest wait for the viewer; the fifth says how many. */
	.rua-gallery.is-capped .woocommerce-product-gallery__image:nth-of-type(n + 6) {
		display: none;
	}

	.rua-gallery .woocommerce-product-gallery__image[data-rua-more] {
		position: relative;
	}

	.rua-gallery .woocommerce-product-gallery__image[data-rua-more]::after {
		content: attr(data-rua-more);
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		padding: 0.55rem 1rem;
		border-radius: 999px;
		background: rgb(255 255 255 / 0.92);
		color: var(--wp--preset--color--contrast);
		font-size: 0.8125rem;
		font-weight: 600;
		box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
		pointer-events: none;
	}
}

/*
 * Phones: the photo runs edge to edge from the top of the screen and stays
 * put (sticky) while the summary, drawn as a rounded sheet, slides up over
 * it -- the layered feel of a store app's bottom sheet.
 */
@media (max-width: 899.98px) {
	.rua-product .rua-main--shop {
		padding-top: 0;
	}

	.woocommerce div.product .rua-product__main {
		gap: 0;
	}

	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images,
	.woocommerce div.product div.images.rua-gallery {
		position: sticky;
		top: 0;
		z-index: 0;
		width: auto;
		margin-inline: calc(-1 * var(--rua-gutter));
		margin-bottom: 0;
		background: var(--rua-backdrop);
		border-top: var(--rua-header-strip) solid transparent;
	}

	.rua-gallery .woocommerce-product-gallery__wrapper {
		border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__image img {
		max-height: 72vh;
	}

	.rua-gallery__badge,
	.has-reel .rua-reel-tile--cover .rua-reel-tile__badge {
		top: calc(var(--rua-header-offset) + 0.75rem);
	}

	/* Clear of the dots and the sheet that overlaps the photo. */
	.has-reel .rua-reel-tile--cover .rua-reel-tile__text {
		bottom: calc(var(--rua-sheet-overlap) + 3rem);
	}

	/* The summary as a sheet, overlapping the photo and scrolling over it. */
	.woocommerce div.product div.summary,
	.woocommerce-page div.product div.summary {
		position: relative;
		z-index: 1;
		width: auto;
		margin: calc(-1 * var(--rua-sheet-overlap)) calc(-1 * var(--rua-gutter)) 0;
		padding: var(--wp--preset--spacing--40) var(--rua-gutter) 0;
		border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
		background: var(--wp--preset--color--base);
		box-shadow: 0 -8px 24px rgb(64 59 59 / 0.1);
	}

	/* Under the floating header, clear of the back button. */
	.woocommerce div.product .rua-product__main > .onsale {
		top: calc(var(--rua-header-offset) + 0.75rem);
		left: 0.75rem;
		z-index: 2;
	}
}

/* Summary */

.rua-product__category {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-product__category a {
	color: inherit;
	text-decoration: none;
}

.rua-product__category a:hover {
	color: var(--wp--preset--color--primary);
}

/* The category already sits above the title. */
.woocommerce div.product .product_meta .posted_in {
	display: none;
}

.woocommerce div.product .product_title {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}

.woocommerce div.product .woocommerce-product-rating {
	margin: 0 0 0.75rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	margin-right: 0.4em;
	font-size: 0.9em;
	opacity: 1;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	font-weight: 500;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	color: var(--wp--preset--color--contrast-muted);
}

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

.woocommerce div.product p.stock,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product p.stock.out-of-stock {
	color: var(--wp--preset--color--primary);
}

/* Purchase form */

.woocommerce div.product form.cart {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: var(--rua-border);
	border-bottom: var(--rua-border);
}

.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	border: 0;
	border-collapse: collapse;
}

.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	line-height: inherit;
}

.woocommerce div.product form.cart table.variations tr + tr {
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce div.product form.cart table.variations th.label {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-bottom: 0.4rem;
	text-align: left;
}

.woocommerce div.product form.cart table.variations th.label label {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * "Size guide": a quiet link with a tape icon. Printed under the pills;
 * theme.js moves it to the end of the "Size" line.
 */
.rua-size-guide {
	margin: 0.6rem 0 0;
}

.woocommerce div.product form.cart table.variations th.label .rua-size-guide {
	flex: 0 0 auto;
	margin: 0;
}

.rua-size-guide__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.rua-size-guide__link .rua-icon {
	flex: 0 0 auto;
}

/* A product in one size: the "Size" line the pills would have had, naming it. */
.woocommerce div.product form.cart .rua-size-one {
	flex: 1 1 100%;
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
}

.rua-size-one__label {
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rua-size-one__value {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product form.cart .rua-size-one .rua-size-guide {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce div.product form.cart table.variations th.label label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product form.cart table.variations td.value {
	position: relative;
}

.woocommerce div.product form.cart table.variations select,
.woocommerce div.product form.cart .variations select {
	width: 100%;
	min-height: var(--rua-field-height);
	margin: 0;
	padding: 0 2.75rem 0 1rem;
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	/* 16px minimum stops iOS Safari zooming the page on focus. */
	font-size: 16px;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--rua-transition);
}

.woocommerce div.product form.cart table.variations select:hover {
	border-color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product form.cart table.variations select:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

/*
 * Variation pills, built by theme.js in front of each select. The select is
 * kept in the DOM (hidden) because WooCommerce reads it; the pills only set
 * its value. The chosen value is echoed after the label ("Size  M"). Every
 * value, colours included, is shown by name.
 */
.woocommerce div.product form.cart table.variations td.value.has-rua-swatches select {
	display: none;
}

.woocommerce div.product form.cart table.variations td.value.has-rua-swatches::after {
	display: none;
}

.rua-swatches__value {
	margin-left: 0.6em;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-swatches__value:empty {
	display: none;
}

.rua-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.rua-swatches__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.9rem;
	border: var(--rua-border);
	border-radius: 999px;
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background-color var(--rua-transition), color var(--rua-transition), border-color var(--rua-transition);
}

.rua-swatches__item:hover {
	border-color: var(--wp--preset--color--contrast-muted);
}

.rua-swatches__item[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/*
 * Options that cannot be bought -- out of stock, or ruled out by the other
 * choices -- stay in place but read as unavailable: faded, struck through,
 * flat, and not clickable.
 */
.rua-swatches__item:disabled {
	cursor: not-allowed;
	border-style: dashed;
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: line-through;
	opacity: 0.55;
}

/* Chevron drawn in CSS so it inherits the text colour. */
.woocommerce div.product form.cart table.variations td.value::after {
	content: "";
	position: absolute;
	top: calc(var(--rua-field-height) / 2);
	right: 1.1rem;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.woocommerce div.product form.cart .woocommerce-variation-price .price {
	margin: 0 0 0.25rem;
}

.woocommerce div.product form.cart .woocommerce-variation-availability p.stock {
	margin: 0;
}

.woocommerce div.product form.cart .woocommerce-variation-description > :last-child {
	margin-bottom: 0;
}

.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

/*
 * No quantity stepper on the product page -- customers add one at a time
 * and adjust from the cart. The field's default value of 1 still submits
 * with the form; hiding it in CSS keeps WooCommerce's own template intact.
 * !important because WooCommerce's variation script sets an inline
 * `display: block` on it whenever a variation is found.
 */
.woocommerce div.product form.cart div.quantity {
	display: none !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: var(--rua-field-height);
	margin: 0;
}

/*
 * Add-to-bag states, on the form's button and the buy bar's proxy alike
 * (theme.js). Adding: the label dims behind a spinner. Added: a tick
 * draws itself beside the word before the label comes back.
 */
.single_add_to_cart_button,
.rua-buybar__button {
	position: relative;
	transition: background-color var(--rua-transition), color var(--rua-transition), transform 120ms ease;
}

.single_add_to_cart_button.is-adding,
.rua-buybar__button.is-adding {
	color: transparent;
	pointer-events: none;
}

.single_add_to_cart_button.is-adding::after,
.rua-buybar__button.is-adding::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgb(255 246 232 / 0.35);
	border-top-color: var(--wp--preset--color--base);
	border-radius: 50%;
	animation: rua-spin 700ms linear infinite;
}

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

.single_add_to_cart_button.is-added,
.rua-buybar__button.is-added {
	background: var(--wp--preset--color--primary-dark);
	pointer-events: none;
}

.single_add_to_cart_button.is-added::before,
.rua-buybar__button.is-added::before {
	content: "";
	width: 8px;
	height: 14px;
	margin-right: 0.6rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-2px);
	animation: rua-tick 260ms ease-out both;
}

@keyframes rua-tick {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0);
	}
}

/* --------------------------------------------------------- bag drawer -- */

/*
 * The bag as a sheet: rises from the foot of a phone screen, slides in
 * from the right on desktop. Hidden with [hidden] while closed so nothing
 * inside is reachable; .is-open runs the slide.
 */
.rua-bag {
	position: fixed;
	inset: 0;
	z-index: 150;
}

.rua-bag[hidden] {
	display: none;
}

.rua-bag__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(64 59 59 / 0.45);
	opacity: 0;
	transition: opacity 260ms ease;
}

.rua-bag.is-open .rua-bag__backdrop {
	opacity: 1;
}

.rua-bag__panel {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	max-height: min(86vh, 86dvh);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 -12px 40px rgb(64 59 59 / 0.25);
	transform: translateY(100%);
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
	outline: none;
}

.rua-bag.is-open .rua-bag__panel {
	transform: none;
}

/* Under a finger the sheet follows it exactly; no easing until it lets go. */
.rua-bag__panel.is-dragging {
	transition: none;
}

.rua-bag__grab {
	width: 40px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 999px;
	background: var(--wp--preset--color--border);
}

.rua-bag__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem var(--rua-gutter) 0.75rem;
	border-bottom: var(--rua-border);
}

.rua-bag__title {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.rua-bag__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-bag__count::before {
	content: "(";
}

.rua-bag__count::after {
	content: ")";
}

.rua-bag__close,
.rua-bag__remove,
.rua-bag__qty button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.rua-bag__close {
	width: 40px;
	height: 40px;
	margin-right: -10px;
	border-radius: 50%;
}

.rua-bag__close:hover {
	background: var(--wp--preset--color--accent-soft);
}

.rua-bag__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.5rem var(--rua-gutter);
	transition: opacity var(--rua-transition);
}

.rua-bag.is-loading .rua-bag__body {
	opacity: 0.5;
}

.rua-bag__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rua-bag__item {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 0.9rem;
	padding: 0.9rem 0;
	border-bottom: var(--rua-border);
	transition: opacity var(--rua-transition);
}

.rua-bag__item:last-child {
	border-bottom: 0;
}

.rua-bag__item.is-busy {
	opacity: 0.45;
	pointer-events: none;
}

.rua-bag__thumb {
	display: block;
	aspect-ratio: var(--rua-card-ratio);
	border-radius: var(--rua-radius);
	overflow: hidden;
	background: var(--wp--preset--color--accent-soft);
}

.rua-bag__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rua-bag__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-right: 2rem;
}

.rua-bag__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rua-bag__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-bag__meta:empty {
	display: none;
}

.rua-bag__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.4rem;
}

.rua-bag__qty {
	display: inline-flex;
	align-items: center;
	border: var(--rua-border);
	border-radius: 999px;
	background: var(--rua-field);
}

.rua-bag__qty button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.rua-bag__qty button:disabled {
	color: var(--wp--preset--color--border);
	cursor: default;
}

.rua-bag__qty span {
	min-width: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-align: center;
}

.rua-bag__price {
	font-weight: 500;
}

.rua-bag__remove {
	position: absolute;
	top: 0.9rem;
	right: -8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-bag__remove:hover {
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--accent-soft);
}

.rua-bag__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 2.5rem 0 3rem;
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
}

.rua-bag__empty[hidden] {
	display: none;
}

.rua-bag__empty p {
	margin: 0;
}

.rua-bag__footer {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.9rem var(--rua-gutter) 1rem;
	border-top: var(--rua-border);
	background: var(--wp--preset--color--base);
}

.rua-bag__footer[hidden] {
	display: none;
}

.rua-bag__subtotal {
	display: flex;
	justify-content: space-between;
	font-weight: 500;
}

.rua-bag__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-bag__note[hidden] {
	display: none;
}

.rua-bag__checkout {
	width: 100%;
}

/* Ways to pay, and the way that isn't: the checkout page's trust lines, on one line when they fit. */
.rua-trust.rua-bag__trust {
	margin: 0.1rem 0 0;
	gap: 0.35rem 1.25rem;
}

.rua-bag__trust li > * {
	white-space: nowrap;
}

.rua-bag__links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.25rem;
}

.rua-bag__continue {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

@media (min-width: 900px) {
	.rua-bag__panel {
		inset: 0 0 0 auto;
		width: min(440px, 100%);
		max-height: none;
		padding-bottom: 0;
		border-radius: 0;
		box-shadow: -12px 0 40px rgb(64 59 59 / 0.25);
		transform: translateX(100%);
	}

	.rua-bag__grab {
		display: none;
	}

	.rua-bag__header {
		padding-top: 1.25rem;
	}
}

/* The copy of the photo that flies from the button into the bag. */
.rua-flyer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--accent-soft);
	box-shadow: 0 6px 20px rgb(64 59 59 / 0.3), 0 0 0 2px var(--wp--preset--color--base);
	pointer-events: none;
	will-change: transform;
}

.rua-flyer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Buy bar: fixed to the foot of the phone screen in the tab bar's slot
 * (body.has-rua-buybar sets --rua-tabbar-offset in theme.css). Slides out of
 * the way while the form's own button is on screen.
 */
.rua-buybar {
	position: fixed;
	inset: auto 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	height: var(--rua-tabbar-offset);
	padding: 0 var(--rua-gutter) env(safe-area-inset-bottom, 0px);
	background: var(--wp--preset--color--base);
	border-top: var(--rua-border);
	box-shadow: 0 -8px 24px -16px rgb(64 59 59 / 0.25);
	transition: transform 200ms ease, visibility 0s;
	view-transition-name: rua-buybar;
}

.rua-buybar.is-hidden {
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 200ms ease, visibility 0s 200ms;
}

/* Slides back up while an item is being added, so its bag can catch it. */
.rua-buybar.is-hidden.is-peeking {
	transform: none;
	visibility: visible;
	transition: transform 200ms ease, visibility 0s;
}

.rua-buybar__price {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 1.25;
}

.rua-buybar__label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-buybar__amount {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	white-space: nowrap;
}

.rua-buybar__amount ins {
	text-decoration: none;
}

.rua-buybar__button {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--rua-field-height);
	padding-inline: 1.25rem;
	white-space: nowrap;
}

/* No room for the was-price beside the button on a phone; the summary has it. */
.rua-buybar__amount del {
	display: none;
}

/* Cart shortcut beside the button, same shape (and outline weight) as add-to-cart. */
.rua-buybar__cart {
	flex: 0 0 auto;
	padding-inline: 1rem;
}

.rua-buybar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
}

.rua-buybar__count.is-empty {
	display: none;
}

@media (min-width: 900px) {
	.rua-buybar {
		display: none;
	}
}

/*
 * Ask before buying: one quiet green line under the button. A link, not a
 * button, so it never competes with Add to bag; green so it reads as
 * WhatsApp at a glance and clears AA on the cream.
 */
.rua-ask {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.rua-ask__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #1a7a4a;
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.rua-ask__link:hover,
.rua-ask__link:focus-visible {
	text-decoration: underline;
}

.rua-ask__link .rua-icon {
	flex: 0 0 auto;
}

/* Shipping card under the purchase form: free in Kerala, everywhere in India, and when it should arrive. */

.rua-perk {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0.9rem 0 0;
	padding: 0.75rem 0.9rem;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--accent-soft);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.rua-perk__row {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	line-height: 1.5;
}

.rua-perk__row strong {
	font-weight: 500;
}

/* The second line of a row, under the first rather than trailing it. */
.rua-perk__muted {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-perk__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.rua-perk__mark .rua-icon {
	stroke-width: 2.2;
}

.rua-perk__mark--soft {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.rua-perk__mark--soft .rua-icon {
	stroke-width: 1.8;
}

/* The two windows, indented to the text of the rows above. */
.rua-perk__eta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 1rem;
	margin: -0.25rem 0 0 calc(24px + 0.7rem);
	font-size: var(--wp--preset--font-size--x-small);
}

.rua-perk__eta div {
	display: contents;
}

.rua-perk__eta dt {
	color: var(--wp--preset--color--contrast-muted);
}

.rua-perk__eta dd {
	margin: 0;
	font-weight: 500;
}

.rua-perk + .rua-ask {
	margin-top: 0.6rem;
}

/* Meta */

.woocommerce div.product .product_meta {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin: 0.3rem 0;
}

.woocommerce div.product .product_meta a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
	text-decoration: underline;
}

/* Accordion: description, additional information, reviews, in the summary. */

.woocommerce div.product .rua-accordion {
	margin-top: var(--wp--preset--spacing--40);
	border-top: var(--rua-border);
}

.woocommerce div.product .rua-accordion__item {
	border-bottom: var(--rua-border);
}

.woocommerce div.product .rua-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: color var(--rua-transition);
}

.woocommerce div.product .rua-accordion__summary::-webkit-details-marker {
	display: none;
}

.woocommerce div.product .rua-accordion__summary:hover {
	color: var(--wp--preset--color--primary);
}

.woocommerce div.product .rua-accordion__summary:focus-visible {
	outline-offset: -2px;
}

/* The plus turns into a minus by fading out its vertical stroke. */
.woocommerce div.product .rua-accordion__summary .rua-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--contrast-muted);
	transition: transform var(--rua-transition);
}

.woocommerce div.product .rua-accordion__item[open] > .rua-accordion__summary .rua-icon {
	transform: rotate(45deg);
}

.woocommerce div.product .rua-accordion__panel {
	padding: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product .rua-accordion__panel > :first-child {
	margin-top: 0;
}

.woocommerce div.product .rua-accordion__panel > :last-child {
	margin-bottom: 0;
}

.woocommerce div.product .rua-accordion__panel h2 {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

/* The note that closes the description: colour and care, set off by a dashed rule. */

.woocommerce div.product .rua-notes {
	margin: 1rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px dashed var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

.woocommerce div.product .rua-notes strong {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

/*
 * Reviews inside the panel: compact list and form. WooCommerce styles the
 * list with id-heavy selectors, so these repeat them to win.
 */
.woocommerce div.product .rua-accordion__panel #reviews #comments h2 {
	display: none;
}

.woocommerce div.product #reviews #comments ol.commentlist {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.woocommerce div.product #reviews #comments ol.commentlist li {
	position: static;
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce div.product #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: 0.75rem;
}

.woocommerce div.product #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: none;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
}

.woocommerce div.product #reviews #comments ol.commentlist li .comment-text {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product #reviews #comments ol.commentlist li .comment-text p.meta {
	margin: 0.15rem 0 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product #reviews #comments ol.commentlist li .comment-text .description p {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product .rua-accordion__panel #review_form_wrapper {
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce div.product .rua-accordion__panel .comment-reply-title {
	display: block;
	margin: 0 0 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product .rua-accordion__panel .comment-form p {
	margin: 0 0 0.75rem;
}

.woocommerce div.product .rua-accordion__panel .comment-form label {
	display: block;
	margin: 0 0 0.3rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product .rua-accordion__panel .comment-form input[type="text"],
.woocommerce div.product .rua-accordion__panel .comment-form input[type="email"],
.woocommerce div.product .rua-accordion__panel .comment-form textarea {
	width: 100%;
	min-height: var(--rua-field-height);
	padding: 0.6rem 1rem;
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 16px;
}

.woocommerce div.product .rua-accordion__panel .comment-form textarea {
	min-height: 6rem;
	resize: vertical;
}

.woocommerce div.product .rua-accordion__panel .comment-form-cookies-consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.woocommerce div.product .rua-accordion__panel .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product .rua-accordion__panel .comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

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

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 0.6rem 0;
	border: 0;
	border-bottom: var(--rua-border);
	background: none;
	font-style: normal;
	text-align: left;
}

.woocommerce table.shop_attributes th {
	width: 38%;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.woocommerce table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------- cart, checkout, account --- */

/* Shortcode and block pages render inside the singular template; give them room. */
.rua-main--singular .rua-post__body > .woocommerce {
	max-width: var(--rua-commerce-width);
}

/* Cart, account and order-received titles: centred over the commerce width. */
.woocommerce-cart .rua-post__title,
.woocommerce-account .rua-post__title,
.woocommerce-checkout .rua-post__title {
	max-width: var(--rua-commerce-width);
	margin: 0 auto var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-large);
	text-align: center;
}

/* -------------------------------------------------------- checkout ---- */

/*
 * Cart and checkout use the WooCommerce blocks, which bring their own
 * layout and styles and take colour and type from theme.json. The theme
 * only gives them the commerce width.
 */
.rua-main--singular .rua-post__body > .wp-block-woocommerce-checkout,
.rua-main--singular .rua-post__body > .wp-block-woocommerce-cart {
	max-width: var(--rua-commerce-width);
}

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

/*
 * The account area. On desktop "My account" and the page's name over two
 * columns: a card with who is signed in and the navigation, and the page
 * beside it. On phones the heading, then the navigation as a row of pills
 * that scrolls sideways, then the page, with Log out at its foot.
 */
.woocommerce-account {
	--rua-account-card: var(--rua-field);
	--rua-account-blush: #f4e4e1;
	--rua-account-rule: #d9c9b1;
	--rua-account-radius: 16px;
}

.woocommerce-account .rua-post__body > .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	max-width: var(--rua-commerce-width);
}

@media (min-width: 900px) {
	.woocommerce-account {
		--rua-account-radius: 18px;
	}

	.woocommerce-account.logged-in .rua-post__body > .woocommerce {
		grid-template-columns: 16.25rem minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: 2rem;
		row-gap: 0;
		align-items: start;
	}

	.woocommerce-account.logged-in .rua-post__body > .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
		margin-bottom: 1.5rem;
	}

	/* Who and the navigation make one card in the first column. */
	.woocommerce-account.logged-in .rua-account__who {
		grid-column: 1;
		grid-row: 3;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 4;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 3 / span 2;
	}
}

/* Notices and the heading span the row; the columns start under them. */
.woocommerce-account .rua-post__body > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .rua-post__body > .woocommerce > .rua-account__head {
	grid-column: 1 / -1;
}

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

/* Heading: "My account" over the page's name. */
.rua-account__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.rua-account__head-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.rua-account__eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.woocommerce-account .rua-account__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.2;
}

.rua-account__head.is-dashboard .rua-account__title {
	font-size: 1.75rem;
}

.rua-account__title-wide,
.rua-latest__all-wide {
	display: none;
}

@media (min-width: 900px) {
	.rua-account__head {
		margin-bottom: 2rem;
	}

	.rua-account__head-text {
		gap: 0.375rem;
	}

	.rua-account__eyebrow {
		font-size: 0.75rem;
	}

	.woocommerce-account .rua-account__title,
	.rua-account__head.is-dashboard .rua-account__title {
		font-size: 2.5rem;
		line-height: 1.15;
	}

	.rua-account__head .rua-account__head-avatar,
	.rua-account__title-narrow,
	.rua-latest__all-narrow {
		display: none;
	}

	.rua-account__title-wide,
	.rua-latest__all-wide {
		display: inline;
	}
}

/* Initials in a blush circle: in the heading on phones, in the card on desktop. */
.rua-account__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--rua-account-blush);
	color: var(--wp--preset--color--primary);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Who is signed in: the top of the navigation card, desktop only. */
.rua-account__who {
	display: none;
}

@media (min-width: 900px) {
	.rua-account__who {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 0.75rem;
		align-items: center;
		padding: 1.25rem 1.25rem 1.125rem;
		border: var(--rua-border);
		border-bottom: 0;
		border-radius: var(--rua-account-radius) var(--rua-account-radius) 0 0;
		background: var(--rua-account-card);
	}

	.rua-account__who .rua-account__avatar {
		grid-row: 1 / span 2;
	}
}

.rua-account__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.rua-account__email {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
	overflow-wrap: anywhere;
}

/* Navigation: pills on phones. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: 0.5rem;
	margin: 0 calc(-1 * var(--rua-gutter));
	padding: 0.25rem var(--rua-gutter);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.woocommerce-MyAccount-navigation li {
	flex: 0 0 auto;
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 40px;
	padding: 0 1rem;
	border: var(--rua-border);
	border-radius: 999px;
	background: var(--rua-account-card);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--rua-transition), color var(--rua-transition), border-color var(--rua-transition);
}

.woocommerce-MyAccount-navigation a:hover {
	border-color: var(--wp--preset--color--contrast-muted);
}

.woocommerce-MyAccount-navigation .is-active a {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* Log out sits at the foot of the page on phones (Account::phone_logout()). */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
	display: none;
}

.rua-account__logout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 48px;
	margin-top: 1rem;
	color: var(--wp--preset--color--contrast-muted);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.rua-account__logout:hover {
	color: var(--wp--preset--color--primary);
}

/* Desktop: the bottom of the navigation card, a list with an icon per page. */
@media (min-width: 900px) {
	.woocommerce-MyAccount-navigation {
		padding: 0 1.25rem 1.25rem;
		border: var(--rua-border);
		border-top: 0;
		border-radius: 0 0 var(--rua-account-radius) var(--rua-account-radius);
		background: var(--rua-account-card);
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		gap: 0.25rem;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.woocommerce-MyAccount-navigation a {
		display: flex;
		min-height: 44px;
		padding: 0 0.75rem;
		border: 0;
		border-radius: 10px;
		background: transparent;
		font-size: 0.875rem;
	}

	.woocommerce-MyAccount-navigation a::before {
		content: "";
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: var(--rua-nav-icon) center / contain no-repeat;
		mask: var(--rua-nav-icon) center / contain no-repeat;
	}

	.woocommerce-MyAccount-navigation a:hover {
		background: var(--wp--preset--color--accent-soft);
	}

	.woocommerce-MyAccount-navigation .is-active a {
		background: var(--rua-account-blush);
		color: var(--wp--preset--color--primary);
	}

	.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
		display: block;
		margin-top: 0.875rem;
		padding-top: 0.875rem;
		border-top: var(--rua-border);
	}

	.woocommerce-MyAccount-navigation-link--customer-logout a {
		color: var(--wp--preset--color--contrast-muted);
	}

	.rua-account__logout {
		display: none;
	}
}

/* The navigation's icons, as masks so they take the link's colour. */
.woocommerce-MyAccount-navigation li {
	--rua-nav-icon: 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.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard {
	--rua-nav-icon: 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.8'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--orders {
	--rua-nav-icon: 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.8'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address {
	--rua-nav-icon: 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.8'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account {
	--rua-nav-icon: 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.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
	--rua-nav-icon: 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.8'%3E%3Cpath d='M15 4h4v16h-4'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content .woocommerce-order-details > h2,
.woocommerce-MyAccount-content .woocommerce-column__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

/* Cards, headings and buttons shared by the account pages. */
.rua-account__card {
	margin: 0;
	padding: 1.25rem;
	border: var(--rua-border);
	border-radius: var(--rua-account-radius);
	background: var(--rua-account-card);
}

.rua-account__card h2,
.rua-account__hello h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.rua-account__card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.rua-account__card-head a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.woocommerce-account .rua-account__button {
	min-height: 44px;
	padding-inline: 1.125rem;
	border-radius: 12px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
}

.woocommerce-account .rua-account__button--ink {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.woocommerce-account .rua-account__button--ink:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* An icon on a blush square: shortcuts and address cards. */
.rua-account__tile-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--rua-account-blush);
	color: var(--wp--preset--color--primary);
}

.rua-account__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.rua-account__empty p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* Dashboard: WooCommerce's two sentences make way for the cards below. */
.woocommerce-dashboard .woocommerce-MyAccount-content > p {
	display: none;
}

.rua-account {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-account__hello {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.25rem;
	border-radius: var(--rua-account-radius);
	background: var(--rua-account-blush);
}

.rua-account__hello h2 {
	display: none;
}

.rua-account__hello-text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rua-account__hello p {
	max-width: 29rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #5a4a44;
}

.woocommerce-account .rua-account__hello .rua-account__button {
	min-height: 48px;
}

.rua-latest {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-latest__order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
}

.rua-latest__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.rua-latest__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.rua-latest__number {
	font-size: 0.9375rem;
	font-weight: 600;
}

.rua-latest__meta {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-latest__order > .rua-account__button {
	flex: 1 0 100%;
	order: 3;
}

.rua-latest__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0.875rem 0 0;
	border-top: var(--rua-border);
	list-style: none;
}

.rua-latest__step {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	grid-template-rows: 18px auto;
	row-gap: 0.375rem;
}

.rua-latest__step::after {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	height: 3px;
	margin: 0 0.25rem;
	border-radius: 2px;
	background: var(--wp--preset--color--border);
}

.rua-latest__step:last-child::after {
	display: none;
}

.rua-latest__step.is-done::after {
	background: var(--wp--preset--color--primary);
}

.rua-latest__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--rua-account-rule);
	border-radius: 50%;
	background: var(--rua-account-card);
	color: var(--wp--preset--color--surface);
}

.rua-latest__dot .rua-icon {
	stroke-width: 3.2;
}

.rua-latest__step.is-done .rua-latest__dot {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

.rua-latest__step.is-current .rua-latest__dot {
	border: 3px solid var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--rua-account-blush);
}

.rua-latest__label {
	grid-column: 1 / -1;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-latest__step.is-done .rua-latest__label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.rua-latest__step.is-current .rua-latest__label {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Shortcuts: a list on phones, three cards from 600px. */
.rua-account__tiles {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--rua-border);
	border-radius: var(--rua-account-radius);
	background: var(--rua-account-card);
}

.rua-account__tile {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 68px;
	padding: 0 1rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color var(--rua-transition);
}

.rua-account__tile + .rua-account__tile {
	border-top: var(--rua-border);
}

.rua-account__tile:hover {
	background: var(--wp--preset--color--accent-soft);
}

.rua-account__tile > .rua-icon:last-child {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-account__tile-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rua-account__tile-text strong {
	font-size: 0.875rem;
	font-weight: 600;
}

.rua-account__tile-text span {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-account__help {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.rua-account__help-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.rua-account__help-text strong {
	font-size: 0.875rem;
	font-weight: 600;
}

.rua-account__help-text span {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-account__chat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0 1.125rem;
	border: 1px solid #cfe3d6;
	border-radius: 12px;
	color: #1a6b45;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--rua-transition);
}

.rua-account__chat:hover,
.rua-account__chat:focus-visible {
	border-color: #1a6b45;
}

@media (min-width: 600px) {
	.rua-account__tiles {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
		overflow: visible;
		border: 0;
		background: none;
	}

	.rua-account__tile {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 1.25rem;
		border: var(--rua-border);
		border-radius: var(--rua-account-radius);
		background: var(--rua-account-card);
	}

	.rua-account__tile + .rua-account__tile {
		border-top: var(--rua-border);
	}

	.rua-account__tile > .rua-icon:last-child {
		display: none;
	}

	.rua-account__tile-text {
		gap: 0.125rem;
	}

	.rua-account__tile-text strong {
		font-size: 0.9375rem;
	}

	.rua-account__tile-text span {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-account__help {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1.125rem 1.5rem;
	}

	.rua-account__help-text strong {
		font-size: 0.9375rem;
	}

	.rua-account__help-text span {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-latest__order {
		flex-wrap: nowrap;
		gap: 1.125rem;
	}

	.rua-latest__order > .rua-account__button {
		flex: 0 0 auto;
		order: 0;
	}

	.rua-latest__number {
		font-size: 1rem;
	}

	.rua-latest__meta {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-latest__step {
		grid-template-columns: 20px minmax(0, 1fr);
		grid-template-rows: 20px auto;
		row-gap: 0.5rem;
	}

	.rua-latest__dot {
		width: 20px;
		height: 20px;
	}

	.rua-latest__label {
		font-size: var(--wp--preset--font-size--x-small);
	}
}

@media (min-width: 900px) {
	.rua-account {
		gap: 1.5rem;
	}

	.rua-account__card {
		padding: 1.5rem 1.75rem;
	}

	.rua-account__card h2,
	.rua-account__hello h2 {
		font-size: 1.375rem;
	}

	.rua-account__hello {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		padding: 1.75rem 2rem;
	}

	.rua-account__hello h2 {
		display: block;
		font-size: 1.75rem;
	}

	.rua-latest {
		gap: 1.25rem;
	}

	.rua-latest__steps {
		padding-top: 1.125rem;
	}
}

/* Status pills, shared by cards, the orders list and the order header. */
.rua-status {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.rua-status--processing {
	background: #fbecc6;
	color: #7a4b00;
}

.rua-status--completed {
	background: #ddf3e4;
	color: #1a7a4a;
}

.rua-status--cancelled,
.rua-status--refunded,
.rua-status--failed {
	background: #f9dede;
	color: #a0212d;
}

/*
 * Orders: the filters -- a segmented control on phones, pills from 600px
 * -- over a card per order. A card is a strip with the number, date and
 * status over a row of photos, what it is, the total and its buttons;
 * on phones the total sits beside the text and the buttons share a row.
 */
.rua-order-filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 1rem;
	padding: 4px;
	border-radius: 12px;
	background: #f2e7d7;
}

.rua-order-filters__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 0.5rem;
	border-radius: 9px;
	color: var(--wp--preset--color--contrast-muted);
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.rua-order-filters__item[aria-current="page"] {
	background: var(--rua-account-card);
	box-shadow: 0 1px 2px rgb(42 34 32 / 0.12);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.rua-order-filters__count {
	margin-left: 0.3em;
}

/* On phones only the chosen filter carries its count. */
.rua-order-filters__item:not([aria-current="page"]) .rua-order-filters__count {
	display: none;
}

.rua-orders {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-order-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1rem;
	border: var(--rua-border);
	border-radius: var(--rua-account-radius);
	background: var(--rua-account-card);
}

.rua-order-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.rua-order-card__id {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.rua-order-card__number {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rua-order-card__number:hover {
	color: var(--wp--preset--color--primary);
}

.rua-order-card__date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-card__placed {
	display: none;
}

.rua-order-card__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.875rem 0.75rem;
}

.rua-order-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.rua-order-card__items {
	font-size: 0.875rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.rua-order-card__where {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-card__total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.rua-order-card__total-label {
	display: none;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-card__actions {
	grid-column: 1 / -1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.625rem;
}

/* Photos: 52 × 64, a second one tucked behind the first. */
.rua-order-card__photos {
	display: flex;
	flex: 0 0 auto;
}

.rua-order-card__photo {
	display: block;
	width: 52px;
	aspect-ratio: 13 / 16;
	overflow: hidden;
	border: 2px solid var(--rua-account-card);
	border-radius: 10px;
	background: #efe3d2;
}

.rua-order-card__photo + .rua-order-card__photo {
	margin-left: -22px;
}

.rua-order-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rua-orders__count {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	text-align: center;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce-account .woocommerce-pagination--without-numbers {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
}

.woocommerce-account .woocommerce-pagination--without-numbers .rua-account__button:last-child {
	margin-left: auto;
}

@media (min-width: 600px) {
	.rua-order-filters {
		display: flex;
		gap: 0.5rem;
		padding: 0;
		background: none;
	}

	.rua-order-filters__item {
		min-height: 40px;
		padding: 0 1rem;
		border: var(--rua-border);
		border-radius: 999px;
		background: var(--rua-account-card);
		color: var(--wp--preset--color--contrast);
		font-size: 0.8125rem;
	}

	.rua-order-filters__item:hover {
		border-color: var(--wp--preset--color--contrast-muted);
	}

	.rua-order-filters__item[aria-current="page"] {
		border-color: var(--wp--preset--color--primary);
		background: var(--wp--preset--color--primary);
		box-shadow: none;
		color: var(--wp--preset--color--surface);
	}

	.rua-order-filters__item:not([aria-current="page"]) .rua-order-filters__count {
		display: inline;
	}

	.rua-order-card {
		gap: 0;
		padding: 0;
		overflow: hidden;
	}

	.rua-order-card__head {
		align-items: center;
		padding: 1rem 1.5rem;
		border-bottom: var(--rua-border);
		background: #fdf8f0;
	}

	.rua-order-card__id {
		flex-direction: row;
		align-items: baseline;
		gap: 0.875rem;
	}

	.rua-order-card__number {
		font-size: 1rem;
	}

	.rua-order-card__date {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-order-card__placed {
		display: inline;
	}

	.rua-order-card__body {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 1rem 1.125rem;
		padding: 1.125rem 1.5rem;
	}

	.rua-order-card__where {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-order-card__photo {
		width: 56px;
	}

	.rua-order-card__photo + .rua-order-card__photo {
		margin-left: 0.5rem;
	}

	.rua-order-card__total {
		gap: 0.125rem;
		font-size: 1.0625rem;
	}

	.rua-order-card__total-label {
		display: block;
	}

	.rua-order-card__actions {
		display: flex;
		justify-content: flex-end;
	}
}

@media (min-width: 1100px) {
	.rua-order-card__body {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
	}

	.rua-order-card__total {
		margin-right: 0.5rem;
	}

	.rua-order-card__actions {
		grid-column: auto;
	}
}

/*
 * One order. The header (number, status, date), then a delivery card
 * holding the timeline and the tracking id, then WooCommerce's details:
 * items with photos, totals gathered under the prices.
 */
.woocommerce-view-order .woocommerce-MyAccount-content > p:empty {
	display: none;
}

.rua-order__header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.rua-order__delivery {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 1.25rem 1.5rem;
	border: var(--rua-border);
	border-radius: calc(var(--rua-radius) * 2);
	background: var(--rua-field);
}

.rua-order__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.rua-order__number {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.rua-order__date {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order__timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.rua-order__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
}

/* The line between dots: each step draws the half-lines to its neighbours. */
.rua-order__step::before,
.rua-order__step::after {
	content: "";
	position: absolute;
	top: 7px;
	width: 50%;
	height: 2px;
	background: var(--wp--preset--color--border);
}

.rua-order__step::before {
	left: 0;
}

.rua-order__step::after {
	right: 0;
}

.rua-order__step:first-child::before,
.rua-order__step:last-child::after {
	display: none;
}

.rua-order__step.is-done::before,
.rua-order__step.is-done::after,
.rua-order__step.is-current::before {
	background: var(--wp--preset--color--primary);
}

.rua-order__dot {
	position: relative;
	z-index: 1;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.rua-order__step.is-done .rua-order__dot {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

.rua-order__step.is-current .rua-order__dot {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgb(125 46 61 / 0.15);
}

.rua-order__step.is-done,
.rua-order__step.is-current {
	color: var(--wp--preset--color--contrast);
}

.rua-order__step.is-current {
	font-weight: 500;
}

/* Under the timeline once shipped: the tracking id, Copy, and the courier at the far end. */
.rua-order__tracking {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.75rem;
}

.rua-order__timeline + .rua-order__tracking {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: var(--rua-border);
}

.rua-order__track {
	margin-left: auto;
}

.rua-order__tracking-label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order__tracking-id {
	padding: 0.35rem 0.6rem;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-soft);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
	user-select: all;
}

.rua-order__copy {
	min-height: 36px;
	padding: 0 0.9rem;
	border: 0;
	border-radius: var(--rua-radius);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	transition: box-shadow var(--rua-transition), color var(--rua-transition);
}

.rua-order__copy:hover,
.rua-order__copy:focus-visible {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.rua-order__copy.is-copied {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.rua-order__track {
	min-height: 36px;
	padding-inline: 1.1rem;
	font-size: 0.7rem;
}

/* Phones: a tighter card; the label above, the id and Copy together, the courier button full width. */
@media (max-width: 599px) {
	.rua-order__delivery {
		padding: 1rem 1rem 1.1rem;
	}

	.rua-order__tracking-label,
	.rua-order__track {
		flex-basis: 100%;
	}

	.rua-order__tracking-label {
		margin-bottom: -0.2rem;
	}
}

/*
 * The items: a photo beside each line with the quantity and any options
 * under the name, the price on the name's line; then the totals gathered
 * at the right, the grand total set off by a rule.
 */
.woocommerce table.shop_table.order_details tbody tr {
	align-items: flex-start;
}

.woocommerce table.shop_table.order_details tbody td {
	padding: 1rem 0;
}

.woocommerce table.shop_table.order_details td.product-name {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce table.shop_table.order_details .rua-order-item__thumb {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--accent-soft);
}

.woocommerce table.shop_table.order_details .rua-order-item__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--rua-card-ratio);
	object-fit: cover;
}

.woocommerce table.shop_table.order_details td.product-name {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"thumb name"
		"thumb qty"
		"thumb meta";
	align-content: start;
	column-gap: 0.9rem;
	align-items: start;
}

.woocommerce table.shop_table.order_details td.product-name .rua-order-item__thumb {
	grid-area: thumb;
}

.woocommerce table.shop_table.order_details td.product-name .rua-order-item__name {
	grid-area: name;
}

.woocommerce table.shop_table.order_details td.product-name .rua-order-item__name a {
	color: inherit;
	text-decoration: none;
}

.woocommerce table.shop_table.order_details td.product-name .product-quantity {
	grid-area: qty;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce table.shop_table.order_details td.product-name .wc-item-meta {
	grid-area: meta;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce table.shop_table.order_details td.product-name .wc-item-meta li {
	display: inline;
}

.woocommerce table.shop_table.order_details td.product-name .wc-item-meta li + li::before {
	content: " · ";
}

.woocommerce table.shop_table.order_details td.product-name .wc-item-meta p {
	display: inline;
	margin: 0;
}

.woocommerce table.shop_table.order_details td.product-name .wc-item-meta strong {
	font-weight: 400;
}

/* The totals: tighter rows, labels beside their values, the notes muted. */
.woocommerce table.shop_table.order_details tfoot tr {
	padding: 0.4rem 0;
}

.woocommerce table.shop_table.order_details tfoot tr:first-child {
	padding-top: 1rem;
}

.woocommerce table.shop_table.order_details tfoot th,
.woocommerce table.shop_table.order_details tfoot td {
	padding: 0;
	text-align: right;
}

/* Beside its label, not at the far edge (outranks the row rule's margin-left: auto). */
.woocommerce table.shop_table.order_details tfoot td:last-child {
	margin-left: 0;
}

.woocommerce table.shop_table.order_details tfoot small {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce table.shop_table.order_details tfoot tr:last-child {
	margin-top: 0.4rem;
	padding-top: 0.9rem;
	border-top: var(--rua-border);
}

.woocommerce table.shop_table.order_details tfoot tr:last-child th,
.woocommerce table.shop_table.order_details tfoot tr:last-child td {
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 599px) {
	.woocommerce table.shop_table.order_details tr {
		gap: 1rem;
	}

	.woocommerce table.shop_table.order_details tfoot small {
		display: block;
	}
}

.woocommerce table.shop_table.order_details tfoot .order-actions--heading {
	display: none;
}

.woocommerce table.shop_table.order_details tfoot .order-actions-button {
	margin-right: 0.4rem;
	min-height: 36px;
	padding: 0 1rem;
	font-size: 0.7rem;
}

.rua-order__help {
	margin-top: 1rem;
}

/* Addresses on an order: tiles side by side. */
.woocommerce-customer-details {
	margin-top: var(--wp--preset--spacing--50);
}

.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

@media (min-width: 600px) {
	.woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * WooCommerce's layout sheet gives .col2-set a clearfix and floats its
 * columns at 48%. In a grid the clearfix's pseudo-elements become grid
 * items -- billing lands in the second cell and shipping under it -- and
 * the 48% halves each tile. Written with WooCommerce's own selectors so
 * both give way.
 */
.woocommerce .woocommerce-customer-details .col2-set::before,
.woocommerce .woocommerce-customer-details .col2-set::after,
.woocommerce-page .woocommerce-customer-details .col2-set::before,
.woocommerce-page .woocommerce-customer-details .col2-set::after {
	content: none;
}

.woocommerce .woocommerce-customer-details .woocommerce-column,
.woocommerce-page .woocommerce-customer-details .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
	padding: 1rem 1.1rem;
	border: var(--rua-border);
	border-radius: calc(var(--rua-radius) * 2);
	background: var(--rua-field);
}

.woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 0.35rem 0 0;
	padding: 0;
	line-height: 1.5;
}

.woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-customer-details .woocommerce-customer-details--email::before {
	display: none;
}

/*
 * The Addresses page: a card per address -- delivery, then billing --
 * side by side from 600px, over a dashed note.
 */
.rua-addresses__intro {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.rua-address {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.rua-address__head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.rua-address .rua-account__tile-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
}

.rua-account__card.rua-address h2 {
	font-size: 1.1875rem;
}

.rua-address__lines {
	margin: 0;
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.rua-address__lines strong {
	font-weight: 600;
}

.rua-address__none {
	color: var(--wp--preset--color--contrast-muted);
}

.rua-address__contact {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-address__contact li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-wrap: anywhere;
}

.rua-address__contact .rua-icon {
	flex: 0 0 auto;
}

.rua-address__foot {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

.rua-addresses__note {
	display: flex;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	border: 1.5px dashed var(--rua-account-rule);
	border-radius: var(--rua-account-radius);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-addresses__note .rua-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

@media (min-width: 600px) {
	.rua-addresses {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: 1.25rem;
	}

	.rua-address {
		gap: 1rem;
	}

	.rua-address .rua-account__tile-icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.rua-account__card.rua-address h2 {
		font-size: 1.375rem;
	}

	/* A rule over the edit button, which keeps to its own width. */
	.rua-address__foot {
		align-items: flex-start;
		padding-top: 1rem;
		border-top: var(--rua-border);
	}

	.rua-addresses__intro {
		margin-bottom: 1.25rem;
		font-size: 0.875rem;
	}

	.rua-addresses__note {
		align-items: center;
		gap: 0.875rem;
		margin-top: 1.25rem;
		padding: 1.125rem 1.5rem;
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-addresses__note .rua-icon {
		width: 20px;
		height: 20px;
		margin-top: 0;
	}
}

/*
 * Account details: two cards -- personal information, the password --
 * then Cancel and Save. First and last name share a row everywhere; from
 * 900px every field pairs up and the passwords take three columns.
 */
.woocommerce-EditAccountForm.edit-account {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.woocommerce-account fieldset.rua-details__card {
	margin: 0;
	padding: 1.125rem;
	border: var(--rua-border);
	min-width: 0;
}

.rua-details__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-details__card-head {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rua-details__card-head p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-details__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 0.75rem;
}

.woocommerce-account .rua-details__grid .form-row,
.woocommerce-account .rua-details__grid .form-row.form-row-first,
.woocommerce-account .rua-details__grid .form-row.form-row-last {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.woocommerce-account .rua-details__grid .form-row-wide,
.rua-details__grid--password .form-row {
	grid-column: 1 / -1;
}

.woocommerce-account .rua-details__grid .form-row label {
	margin: 0;
	font-size: 0.8125rem;
}

.woocommerce-account .rua-details__grid .form-row .input-text {
	min-height: 48px;
	border-color: var(--rua-account-rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	font-size: 15px;
}

.rua-details__help {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-details__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 0;
}

.rua-details__cancel {
	display: none;
}

.woocommerce-account .rua-details__actions .woocommerce-Button.button {
	flex: 1 1 auto;
	min-height: 52px;
	padding-inline: 1.75rem;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
}

@media (min-width: 900px) {
	.woocommerce-EditAccountForm.edit-account {
		gap: 1.25rem;
	}

	.woocommerce-account fieldset.rua-details__card {
		padding: 1.5rem 1.75rem;
	}

	.rua-details__card {
		gap: 1.25rem;
	}

	.rua-details__card-head p {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-details__grid {
		gap: 1.125rem 1.25rem;
	}

	.woocommerce-account .rua-details__grid--personal .form-row-wide {
		grid-column: auto;
	}

	.rua-details__grid--password {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.woocommerce-account .rua-details__grid--password .form-row {
		grid-column: auto;
	}

	.rua-details__cancel {
		display: inline-flex;
	}

	.woocommerce-account .rua-details__actions .woocommerce-Button.button {
		flex: 0 0 auto;
		min-height: 50px;
	}
}

/*
 * Forms in the account area (addresses, account details, sign in):
 * the theme's fields.
 */
.woocommerce-account .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce-account .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.woocommerce-account .form-row .required {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.woocommerce-account .form-row .input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea,
.woocommerce-account .select2-container .select2-selection--single {
	width: 100%;
	min-height: var(--rua-field-height);
	padding: 0.6rem 1rem;
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 16px;
	transition: border-color var(--rua-transition), box-shadow var(--rua-transition);
}

.woocommerce-account .form-row .input-text:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.woocommerce-account .select2-container .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: inherit;
}

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

.woocommerce-account .form-row.form-row-first,
.woocommerce-account .form-row.form-row-last {
	float: none;
	width: auto;
}

.woocommerce-account fieldset {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	border: 0;
}

.woocommerce-account fieldset legend {
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.woocommerce-account .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.woocommerce-account .woocommerce-password-strength,
.woocommerce-account .woocommerce-password-hint {
	font-size: var(--wp--preset--font-size--x-small);
}

.woocommerce-account .woocommerce-password-strength {
	padding: 0.35rem 0.6rem;
	border-radius: 6px;
	text-align: left;
}

.woocommerce-account .show-password-input {
	top: 50% !important;
	right: 0.85rem !important;
	transform: translateY(-50%);
}

@media (min-width: 600px) {
	.woocommerce-account .form-row.form-row-first,
	.woocommerce-account .form-row.form-row-last {
		width: calc(50% - 0.5rem);
	}

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

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

	.woocommerce-account .form-row.form-row-wide,
	.woocommerce-account .form-row.form-row-last + .form-row {
		clear: both;
	}
}

/*
 * Sign in: one card in the middle of the page. The register form is the
 * card's other face on desktop (.is-register), and moves into a sheet
 * on phones (theme.js).
 */
.woocommerce-account:not(.logged-in) .rua-post__body > .woocommerce {
	display: block;
	max-width: 28rem;
	margin-inline: auto;
}

.woocommerce-account:not(.logged-in) .rua-post__title {
	display: none;
}

.rua-login .col2-set,
.rua-login .u-columns {
	display: block;
	width: auto;
}

/* Written with WooCommerce's own selector so its 48% two-column split gives way. */
.woocommerce .rua-login .col2-set .col-1,
.woocommerce .rua-login .col2-set .col-2,
.woocommerce-page .rua-login .col2-set .col-1,
.woocommerce-page .rua-login .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
}

/* WooCommerce's own "Login" / "Register" headings; ours sit inside the forms. */
.rua-login > h2,
.rua-login .u-column1 > h2,
.rua-login .u-column2 > h2 {
	display: none;
}

/* Written with WooCommerce's selector, whose 2em margins and 20px padding outrank a class. */
.woocommerce .rua-login form.login,
.woocommerce .rua-login form.register,
.woocommerce-page .rua-login form.login,
.woocommerce-page .rua-login form.register {
	margin: 0;
	padding: 2rem 1.75rem;
	border: var(--rua-border);
	border-radius: calc(var(--rua-radius) * 2);
	background: var(--rua-field);
}

@media (max-width: 599px) {
	.woocommerce .rua-login form.login,
	.woocommerce .rua-login form.register,
	.woocommerce-page .rua-login form.login,
	.woocommerce-page .rua-login form.register {
		padding: 1.5rem 1.25rem;
	}
}

/*
 * The sign-in form is a two-column grid so "Remember me" and "Lost your
 * password?" share a line above the button; everything else spans both
 * columns. WooCommerce puts the checkbox and the button in one <p>, so
 * that <p> dissolves (display: contents) and its children place
 * themselves; dense flow lets the password link fill the gap beside the
 * checkbox.
 */
.rua-login .woocommerce-form-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-auto-flow: row dense;
	column-gap: 1rem;
	align-items: center;
}

.rua-login .woocommerce-form-login > * {
	grid-column: 1 / -1;
}

/* WooCommerce pads each row 3px; the button and the checkbox line have no row, so none do. */
.rua-login .woocommerce-form .form-row {
	padding-inline: 0;
}

.rua-login .woocommerce-form-login > p.form-row:not(.woocommerce-form-row) {
	display: contents;
}

/*
 * Site Kit's "Continue with Google": full width like the fields (the
 * width itself is set in class-account.php before Google draws it), then
 * an "or" line before the email form. The line only appears once the
 * button has been drawn, so a blocked script leaves no stray "or".
 */
.rua-login .googlesitekit-sign-in-with-google__frontend-output-button {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.rua-login .googlesitekit-sign-in-with-google__frontend-output-button:not(:empty)::after {
	content: "or";
	flex-basis: 100%;
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--contrast-muted);
	background:
		linear-gradient(var(--wp--preset--color--border), var(--wp--preset--color--border)) left center / calc(50% - 1.5rem) 1px no-repeat,
		linear-gradient(var(--wp--preset--color--border), var(--wp--preset--color--border)) right center / calc(50% - 1.5rem) 1px no-repeat;
}

.rua-login__heading {
	margin-bottom: 1.5rem;
	text-align: center;
}

.rua-login__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.rua-login__lead {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-login .woocommerce-form-login__submit,
.rua-login .woocommerce-form-register__submit {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	margin-top: 1.25rem;
}

.rua-login .woocommerce-form-login__rememberme {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.rua-login .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.rua-login .password-input {
	display: block;
	position: relative;
}

.rua-login .lost_password {
	grid-column: 2;
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: right;
}

.rua-login .lost_password a {
	color: var(--wp--preset--color--contrast-muted);
}

.rua-login__switch {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
}

.rua-login__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Which face of the card shows. */
.rua-login .u-column2,
.rua-login .rua-login__switch--to-login {
	display: none;
}

.rua-login.is-register .u-column1,
.rua-login.is-register .rua-login__switch--to-register {
	display: none;
}

.rua-login.is-register .u-column2,
.rua-login.is-register .rua-login__switch--to-login {
	display: block;
}

/* The register sheet on phones. */
.rua-register-sheet {
	position: fixed;
	inset: 0;
	z-index: 150;
}

.rua-register-sheet[hidden] {
	display: none;
}

.rua-register-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(64 59 59 / 0.45);
	opacity: 0;
	transition: opacity 260ms ease;
}

.rua-register-sheet.is-open .rua-register-sheet__backdrop {
	opacity: 1;
}

.rua-register-sheet__panel {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	max-height: min(92vh, 92dvh);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 -12px 40px rgb(64 59 59 / 0.25);
	transform: translateY(100%);
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
	outline: none;
}

.rua-register-sheet.is-open .rua-register-sheet__panel {
	transform: none;
}

.rua-register-sheet__panel.is-dragging {
	transition: none;
}

.rua-register-sheet__grab {
	width: 40px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 999px;
	background: var(--wp--preset--color--border);
}

.rua-register-sheet__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.rua-register-sheet__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.5rem var(--rua-gutter) var(--wp--preset--spacing--40);
}

/*
 * The size guide: a sheet from the foot of the screen on phones, a
 * dialog in the middle on desktop. Same bones as the bag and register
 * sheets, so theme.js drives it the same way.
 */
.rua-sizes {
	position: fixed;
	inset: 0;
	z-index: 150;
}

.rua-sizes[hidden] {
	display: none;
}

.rua-sizes__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(64 59 59 / 0.45);
	opacity: 0;
	transition: opacity 260ms ease;
}

.rua-sizes.is-open .rua-sizes__backdrop {
	opacity: 1;
}

.rua-sizes__panel {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	max-height: min(92vh, 92dvh);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 -12px 40px rgb(64 59 59 / 0.25);
	transform: translateY(100%);
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
	outline: none;
}

.rua-sizes.is-open .rua-sizes__panel {
	transform: none;
}

.rua-sizes__panel.is-dragging {
	transition: none;
}

.rua-sizes__grab {
	flex: 0 0 auto;
	width: 40px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 999px;
	background: var(--wp--preset--color--border);
}

.rua-sizes__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.rua-sizes__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.75rem var(--rua-gutter) 1.5rem;
}

.rua-sizes__title {
	margin: 0 2.5rem 1rem 0;
	font-size: var(--wp--preset--font-size--x-large);
}

/* The chart: the size column stays put while a wide chart scrolls sideways. */
.rua-sizes__scroll {
	overflow-x: auto;
	margin-inline: calc(-1 * var(--rua-gutter));
	padding-inline: var(--rua-gutter);
	scrollbar-width: none;
}

.rua-sizes__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.rua-sizes__table th,
.rua-sizes__table td {
	padding: 0.65rem 0.75rem;
	border-bottom: var(--rua-border);
	text-align: center;
}

.rua-sizes__table th:first-child,
.rua-sizes__table td:first-child {
	position: sticky;
	left: 0;
	background: var(--wp--preset--color--base);
	text-align: left;
}

.rua-sizes__table thead th {
	padding-top: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-sizes__table tbody th {
	font-weight: 500;
}

/* The size the customer has picked. */
.rua-sizes__table tr.is-current th,
.rua-sizes__table tr.is-current td {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

.rua-sizes__table tr.is-current th:first-child {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
}

.rua-sizes__heading {
	margin: 1.5rem 0 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-sizes__how {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.rua-sizes__how div {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.75rem;
}

.rua-sizes__how dt {
	font-weight: 500;
}

.rua-sizes__how dd {
	margin: 0;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-sizes__note {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-sizes__note + .rua-sizes__note {
	margin-top: 0.4rem;
}

/*
 * Desktop: not a dialog but a section of the page under the details --
 * "Find your size" scrolls to it -- with the chart beside how to measure.
 */
@media (min-width: 900px) {
	.rua-sizes,
	.rua-sizes[hidden] {
		position: static;
		display: block;
		margin: var(--wp--preset--spacing--60) 0 0;
		scroll-margin-top: calc(var(--rua-header-offset) + 1.5rem);
	}

	.rua-sizes__backdrop,
	.rua-sizes__grab,
	.rua-sizes__close {
		display: none;
	}

	.rua-sizes__panel,
	.rua-sizes.is-open .rua-sizes__panel {
		position: static;
		max-height: none;
		padding: 0;
		overflow: visible;
		border: var(--rua-border);
		border-radius: 24px;
		background: var(--rua-field);
		box-shadow: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rua-sizes__body {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		grid-template-areas:
			"title how"
			"chart how"
			"notes how";
		align-items: start;
		gap: 0.75rem 3rem;
		padding: 2.25rem 2.5rem;
		overflow: visible;
	}

	.rua-sizes__title {
		grid-area: title;
		font-size: 1.75rem;
	}

	.rua-sizes__scroll {
		grid-area: chart;
		margin-inline: 0;
		padding-inline: 0;
	}

	.rua-sizes__heading,
	.rua-sizes__how {
		grid-column: 2;
	}

	.rua-sizes__heading {
		grid-row: 1;
		margin-top: 0;
	}

	.rua-sizes__how {
		grid-row: 2 / span 2;
	}

	.rua-sizes__note {
		grid-column: 1;
	}
}

/*
 * Reels. The "New every day" band with its row of reel tiles; and the popup -- a full-screen
 * sheet on phones (player on top, shop panel at the foot), a two-column
 * dialog on desktop with arrows to the next and previous reels.
 */
/* The band. */
.rua-reels {
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 2rem 0;
	background: var(--wp--preset--color--accent-soft);
}

.single-product .rua-reels {
	margin-inline: calc(-1 * var(--rua-gutter));
}

.rua-reels__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.single-product .rua-reels__inner {
	padding-inline: var(--rua-gutter);
}

.rua-reels__intro {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rua-reels__intro .rua-eyebrow {
	margin: 0;
}

.rua-reels .rua-reels__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
}

.rua-reels__text {
	max-width: 26rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-reels__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 0.5rem;
}

.rua-reels__follow,
.rua-reels__community {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.rua-reels__follow {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--contrast);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
}

.rua-reels__community {
	background: #1a6b45;
	color: #fff;
}

.rua-reels__follow:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.rua-reels__community:hover {
	background: #145637;
}

/* The row: scrolls sideways, a tile snapping to the start. */
.rua-reels__list {
	display: flex;
	gap: 0.75rem;
	margin: 0 calc(-1 * var(--rua-gutter));
	padding: 0.25rem var(--rua-gutter) 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rua-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rua-reels__list::-webkit-scrollbar {
	display: none;
}

.rua-reels__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* A tile: the product photo cropped tall, like a reel's cover. */
.rua-reel-tile {
	position: relative;
	display: block;
	width: 9.5rem;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 14px;
	background: #2a2220;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.rua-reel-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.rua-reel-tile .rua-reel-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 6s ease-out;
	z-index: -1;
}

/* Darker at the foot for the words, a little at the top for the badge. */
.rua-reel-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.72) 100%);
	z-index: -1;
}

.rua-reel-tile__badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.38);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rua-reel-tile__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	color: #262626;
	transform: translate(-50%, -50%);
	transition: transform var(--rua-transition);
}

.rua-reel-tile__play .rua-icon {
	margin-left: 3px;
	fill: currentColor;
}

.rua-reel-tile__text {
	position: absolute;
	right: 0.625rem;
	bottom: 0.625rem;
	left: 0.625rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1.3;
}

.rua-reel-tile__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.75rem;
	font-weight: 500;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rua-reel-tile__price {
	font-size: 0.75rem;
	font-weight: 600;
}

.rua-reel-tile__price del {
	opacity: 0.7;
	font-weight: 400;
}

.rua-reel-tile__price ins {
	text-decoration: none;
}

@media (hover: hover) {
	.rua-reel-tile:hover .rua-reel-tile__img.rua-reel-tile__img {
		transform: scale(1.08);
	}

	.rua-reel-tile:hover .rua-reel-tile__play {
		transform: translate(-50%, -50%) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rua-reel-tile__img,
	.rua-reel-tile__play {
		transition: none;
	}
}

@media (min-width: 900px) {
	.rua-reels {
		padding: 3rem 0;
		border-radius: 0;
	}

	.single-product .rua-reels {
		margin-inline: 0;
		border-radius: 24px;
	}

	.rua-reels__inner {
		display: grid;
		grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
		align-items: center;
		gap: 2.5rem;
	}

	.single-product .rua-reels__inner {
		padding-inline: 2.5rem;
	}

	.rua-reels .rua-reels__title {
		font-size: 2.25rem;
	}

	.rua-reels__list {
		margin: 0;
		padding: 0.25rem 0 0.5rem;
		scroll-padding-inline: 0;
	}

	.rua-reel-tile {
		width: 11rem;
	}
}

/*
 * The popup. Phones: a full-height sheet sliding up -- the bar with
 * "As seen in our reel" and Close, the player scrolling under it, and the
 * shop panel fixed at the foot.
 */
.rua-reel {
	--rua-reel-ground: #f2e7d7;
	position: fixed;
	inset: 0;
	z-index: 160;
}

.rua-reel[hidden] {
	display: none;
}

.rua-reel__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(32 24 20 / 0.66);
	opacity: 0;
	transition: opacity 280ms ease;
}

.rua-reel.is-open .rua-reel__backdrop {
	opacity: 1;
}

.rua-reel__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rua-reel-ground);
	color: var(--wp--preset--color--contrast);
	transform: translateY(100%);
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
	outline: none;
}

.rua-reel.is-open .rua-reel__panel {
	transform: none;
}

.rua-reel__panel.is-dragging {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.rua-reel__panel,
	.rua-reel__backdrop {
		transition: none;
	}
}

.rua-reel__top {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0.75rem 0.5rem 1rem;
}

.rua-reel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.rua-reel__eyebrow--wide {
	display: none;
}

.rua-reel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #e2d6c4;
	border-radius: 50%;
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.rua-reel__close:hover,
.rua-reel__close:focus-visible {
	border-color: var(--wp--preset--color--contrast);
}

.rua-reel__media {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 1rem;
	overflow-y: auto;
	border: 1px solid #e2d6c4;
	border-radius: 14px;
	background: #fff;
	overscroll-behavior: contain;
}

.rua-reel__frame {
	position: relative;
	min-height: 100%;
}

.rua-reel__loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	background: #f4f4f4;
	font-size: 0.75rem;
	color: #737373;
	z-index: 1;
}

.rua-reel__frame.is-loaded .rua-reel__loading {
	display: none;
}

.rua-reel__spinner {
	width: 34px;
	height: 34px;
	border: 2.5px solid #dbdbdb;
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: rua-reel-spin 0.9s linear infinite;
}

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

.rua-reel__frame iframe {
	display: block;
	width: 100%;
	border: 0;
	background: #fff;
}

/* Instagram's post: header, video, caption; resized once it says how tall it is. */
.rua-reel__frame iframe.is-instagram {
	height: 640px;
}

.rua-reel__frame iframe.is-video {
	height: 100%;
	min-height: 360px;
	background: #000;
}

.rua-reel__shop {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.875rem;
	max-height: 62%;
	margin-top: 0.75rem;
	padding: 1rem 1rem calc(1.375rem + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	border-radius: 26px 26px 0 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 -10px 30px rgb(20 12 8 / 0.16);
}

.rua-reel__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.25rem 0.75rem;
}

.rua-reel .rua-reel__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.2;
}

.rua-reel__price {
	margin: 0;
	padding-top: 0.125rem;
	font-size: 1.125rem;
	font-weight: 600;
	white-space: nowrap;
}

.rua-reel__price del {
	font-size: 0.8em;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-reel__price ins {
	text-decoration: none;
}

.rua-reel__tax {
	display: none;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-reel__chips {
	display: none;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rua-reel__chips li {
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	background: var(--rua-reel-ground);
	font-size: 0.75rem;
	color: #5a4a44;
}

.rua-reel__sizes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rua-reel__sizes[hidden] {
	display: none;
}

.rua-reel__sizes-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.75rem;
}

.rua-reel__size-label {
	font-weight: 600;
}

.rua-reel__size-value {
	font-weight: 500;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-reel__guide {
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.rua-reel__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
	gap: 0.5rem;
}

.rua-reel__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: 44px;
	padding: 0.25rem;
	border: 1px solid var(--rua-account-rule, #d9c9b1);
	border-radius: 12px;
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
}

.rua-reel__option[aria-checked="true"] {
	border: 2px solid var(--wp--preset--color--primary);
	background: #f4e4e1;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.rua-reel__option:disabled {
	border-style: dashed;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: line-through;
	cursor: not-allowed;
}

.rua-reel__left {
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.rua-reel__soldout {
	margin: 0;
	padding: 0.625rem 0.75rem;
	border-radius: 10px;
	background: #f4e4e1;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--primary);
}

.rua-reel__soldout[hidden],
.rua-reel__error[hidden] {
	display: none;
}

.rua-reel__error {
	margin: 0;
	font-size: 0.8125rem;
	color: #a0212d;
}

.rua-reel__buy {
	display: flex;
	gap: 0.625rem;
}

.rua-reel__add {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0 1rem;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color var(--rua-transition), opacity var(--rua-transition);
}

.rua-reel__add:hover:not(:disabled) {
	background: var(--wp--preset--color--primary-dark);
}

.rua-reel__add:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.rua-reel__ask {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid #cfe3d6;
	border-radius: 14px;
	background: var(--rua-field);
	color: #1a6b45;
}

.rua-reel__ask[hidden] {
	display: none;
}

.rua-reel__ask:hover {
	border-color: #1a6b45;
}

.rua-reel__details {
	display: none;
	align-items: center;
	align-self: flex-start;
	gap: 0.375rem;
	margin-top: -0.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.rua-reel__drop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: var(--rua-border);
}

.rua-reel__drop-text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #5a4a44;
}

.rua-reel__drop-text strong {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* On phones the long line gives way to "Daily launches & restocks" width-wise. */
.rua-reel__drop-text span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.rua-reel__drop-links {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
}

.rua-reel__follow,
.rua-reel__community {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-height: 44px;
	border-radius: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.rua-reel__follow {
	width: 44px;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.rua-reel__follow span,
.rua-reel__community-wide {
	display: none;
}

.rua-reel__community {
	padding: 0 0.875rem;
	background: #1a6b45;
	color: #fff;
}

.rua-reel__step {
	display: none;
}

/*
 * Desktop: a dialog in the middle -- the player on a tinted column at the
 * left, the shop panel at the right -- with the arrows either side.
 */
@media (min-width: 900px) {
	.rua-reel__panel {
		inset: auto;
		top: 50%;
		left: 50%;
		display: grid;
		grid-template-columns: 460px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		width: min(1000px, calc(100vw - 13rem));
		height: min(720px, calc(100vh - 4rem));
		border-radius: 28px;
		background: var(--wp--preset--color--base);
		box-shadow: 0 30px 80px rgb(20 12 8 / 0.45);
		opacity: 0;
		transform: translate(-50%, -48%) scale(0.98);
		transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.rua-reel.is-open .rua-reel__panel {
		opacity: 1;
		transform: translate(-50%, -50%);
	}

	.rua-reel__top {
		position: absolute;
		top: 1.125rem;
		right: 1.125rem;
		z-index: 2;
		padding: 0;
	}

	.rua-reel__top .rua-reel__eyebrow {
		display: none;
	}

	.rua-reel__media {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		padding: 1.25rem;
		border: 0;
		border-radius: 0;
		background: var(--rua-reel-ground);
	}

	.rua-reel__frame {
		min-height: 100%;
		overflow: hidden;
		border: 1px solid #e2d6c4;
		border-radius: 14px;
		background: #fff;
	}

	.rua-reel__shop {
		grid-column: 2;
		grid-row: 1;
		gap: 1.375rem;
		max-height: none;
		margin: 0;
		padding: 2.75rem 2.75rem 2rem;
		border-radius: 0;
		box-shadow: none;
	}

	.rua-reel__head {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		padding-right: 2.5rem;
	}

	.rua-reel__eyebrow--wide {
		display: inline-flex;
	}

	.rua-reel .rua-reel__name {
		font-size: 2.125rem;
		line-height: 1.15;
	}

	.rua-reel__price {
		font-size: 1.5rem;
	}

	.rua-reel__tax {
		display: inline;
		margin-left: 0.375rem;
	}

	.rua-reel__chips {
		display: flex;
	}

	.rua-reel__sizes-head {
		font-size: 0.8125rem;
	}

	.rua-reel__options {
		display: flex;
		flex-wrap: wrap;
	}

	.rua-reel__option {
		min-width: 4.5rem;
		min-height: 48px;
		font-size: 0.875rem;
	}

	.rua-reel__add {
		min-height: 54px;
	}

	.rua-reel__ask {
		width: 54px;
		height: 54px;
	}

	.rua-reel__details {
		display: inline-flex;
	}

	.rua-reel__drop {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		margin-top: auto;
		padding: 1.125rem 1.25rem;
		border-top: 0;
		border-radius: 18px;
		background: var(--rua-reel-ground);
	}

	.rua-reel__drop-text {
		font-size: 0.75rem;
	}

	.rua-reel__drop-text strong {
		font-size: 0.9375rem;
	}

	.rua-reel__drop-text span {
		display: block;
	}

	.rua-reel__drop-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}

	.rua-reel__follow {
		width: auto;
		padding: 0 0.875rem;
		background: var(--rua-field);
	}

	.rua-reel__follow span,
	.rua-reel__community-wide {
		display: inline;
	}

	.rua-reel__community-narrow {
		display: none;
	}

	.rua-reel__step {
		position: absolute;
		top: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgb(251 244 232 / 0.92);
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
		transform: translateY(-50%);
		opacity: 0;
		transition: opacity 240ms ease;
	}

	.rua-reel.is-open .rua-reel__step {
		opacity: 1;
	}

	.rua-reel__step[hidden] {
		display: none;
	}

	.rua-reel__step--prev {
		left: max(1.5rem, calc(50% - 500px - 5.5rem));
	}

	.rua-reel__step--next {
		right: max(1.5rem, calc(50% - 500px - 5.5rem));
	}

	.rua-reel__step:hover,
	.rua-reel__step:focus-visible {
		background: #fff;
	}
}

/* Inside the sheet the register form loses its card and shows. */
.rua-register-sheet .u-column2 {
	display: block;
	float: none;
	width: auto;
	max-width: none;
}

.rua-register-sheet .u-column2 > h2 {
	display: none;
}

.rua-register-sheet .woocommerce-form {
	padding: 0;
	border: 0;
	background: transparent;
}

.rua-register-sheet .rua-login__heading {
	text-align: left;
}

/* Lost password: the same card. */
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-form.lost_reset_password {
	max-width: 26rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	border: var(--rua-border);
	border-radius: calc(var(--rua-radius) * 2);
	background: var(--rua-field);
}

.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------- cart ------- */

/*
 * The empty bag. The Cart block's own "New in store" grid takes the
 * theme's card look, so it matches the shop, and the browse link is a
 * button.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: var(--wp--preset--font-size--x-large);
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block > .wp-block-paragraph {
	text-align: center;
}

/* The block's giant sad face goes; the words are enough. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
	display: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-empty-cart-block > .wp-block-paragraph a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.75rem;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block > .wp-block-paragraph a:hover {
	background: var(--wp--preset--color--primary-dark);
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
	display: none;
}

.wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--large);
	text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--40);
	}
}

@media (min-width: 1000px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block .wc-block-grid[class*="has-"] .wc-block-grid__product {
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	margin: 0 0 0.85rem;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: var(--rua-card-ratio);
	object-fit: cover;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--surface);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-onsale,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-rating {
	display: none;
}

/* -------------------------------------------------------- checkout ---- */

/*
 * The Checkout block, dressed like the rest of the store: the theme's
 * fields, its corner radius, the order summary as a card that keeps
 * pace with the page, and the Place order button as the theme's own.
 * Selectors carry the block's root so they outrank its stylesheet.
 */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]),
.wp-block-woocommerce-checkout .wc-block-components-text-input input:not([type="checkbox"]),
.wp-block-woocommerce-checkout .wc-block-components-select .components-custom-select-control__button,
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
	transition: border-color var(--rua-transition), box-shadow var(--rua-transition);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:not([type="checkbox"]):focus,
.wp-block-woocommerce-checkout .wc-block-components-select select:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-select label,
.wp-block-woocommerce-checkout .wc-block-components-combobox label {
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.has-error input {
	border-color: #a0212d;
}

/* The summarised address card, and the option cards for shipping and payment. */
.wp-block-woocommerce-checkout .wc-block-components-address-card,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--rua-radius);
}

.wp-block-woocommerce-checkout .wc-block-components-address-card {
	padding: 1rem 1.1rem;
	background: var(--rua-field);
}

.wp-block-woocommerce-checkout .wc-block-components-address-card__edit {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	background: var(--rua-field);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 4px;
}

/*
 * The order summary: a soft card, no hard rule around it. Title row with
 * the item count; each line a photo, name and options with the price
 * on the right; the coupon as a quiet link; totals in a hairline list
 * with the total itself set in the heading face and wine.
 */
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	padding: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: calc(var(--rua-radius) * 2);
	background: var(--rua-field);
	box-shadow: 0 1px 2px rgb(64 59 59 / 0.06), 0 12px 32px -20px rgb(64 59 59 / 0.35);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.25rem 1.5rem 0.75rem;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__content {
	padding: 0 1.5rem 1.25rem;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary__content,
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
	padding-inline: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
	border-top: 1px solid rgb(64 59 59 / 0.08);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:first-child {
	border-top: 0;
}

/* Lines. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	padding: 0.85rem 0;
	border-bottom: 1px solid rgb(64 59 59 / 0.08);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image {
	width: 60px;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	aspect-ratio: var(--rua-card-ratio);
	object-fit: cover;
}

/* The block paints the badge with currentcolor, so the colour is the wine and the digit is set on its span. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px var(--rua-field);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity > span {
	color: var(--wp--preset--color--base);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description {
	padding-left: 1rem;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.35;
}

/* The unit price under the name repeats the line total; the options stay. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-product-details {
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-weight: 500;
}

/* Coupon: a quiet link, not a panel. */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	padding: 0.85rem 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__content {
	padding-bottom: 0.75rem;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input {
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button {
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Totals. */
.wp-block-woocommerce-checkout .wc-block-components-totals-item {
	padding: 0.45rem 0;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 400;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__description {
	color: var(--wp--preset--color--contrast-muted);
}

/* The block wraps this row in a totals-wrapper, which already draws the line above it. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
	margin-top: 0;
	padding: 1rem 0 0;
	border-top: 0;
	/* The block scales this row up in em; the sizes below are set outright. */
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	margin-top: 0.25rem;
}

/*
 * Phones: the summary sits at the top as a bar that opens. Same card;
 * the title carries the total and a chevron.
 */
@media (max-width: 699.98px) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
		border-radius: var(--rua-radius);
		box-shadow: 0 1px 2px rgb(64 59 59 / 0.06);
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
		padding: 1rem 1.1rem;
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
		font-size: var(--wp--preset--font-size--medium);
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-formatted-money-amount {
		margin-left: auto;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--primary);
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
		color: var(--wp--preset--color--contrast-muted);
	}

	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__content {
		padding: 0 1.1rem 1rem;
	}
}

/* Place order: the theme's button, whatever the block's default. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	min-height: 52px;
	border: 0;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color var(--rua-transition), transform 120ms ease;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--primary-dark);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:active {
	transform: scale(0.98);
}

.wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
	flex-wrap: wrap;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--contrast-muted);
}

/* A few words of reassurance under the button (theme.js). */
.rua-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	width: 100%;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-trust li > * {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.rua-trust a:hover {
	color: var(--wp--preset--color--primary);
}

.rua-trust .rua-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
}

.rua-trust .rua-icon--whatsapp {
	color: #1a7a4a;
}

/*
 * Order received. A successful order gets the confirmation below
 * (.rua-confirm); what is left here dresses a failed order, which keeps
 * WooCommerce's notice and order table under the "pay again" buttons.
 */
.woocommerce-order > section > h2,
.woocommerce-order .woocommerce-column__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
}

.woocommerce-order > section {
	margin-bottom: var(--wp--preset--spacing--50);
}

/*
 * The order table is laid out as rows rather than columns: each row is a
 * flex line with the price at its end, so a long name never squeezes the
 * price and the totals' notes have the row's full width. The header row,
 * the items and the totals each keep their own shape below.
 */
.woocommerce table.shop_table.order_details,
.woocommerce table.shop_table.order_details thead,
.woocommerce table.shop_table.order_details tbody,
.woocommerce table.shop_table.order_details tfoot {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

.woocommerce table.shop_table.order_details tr {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	border-bottom: var(--rua-border);
}

.woocommerce table.shop_table.order_details th,
.woocommerce table.shop_table.order_details td {
	padding: 0.75rem 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

.woocommerce table.shop_table.order_details th:last-child,
.woocommerce table.shop_table.order_details td:last-child {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

.woocommerce table.shop_table.order_details thead th {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce table.shop_table.order_details tfoot tr {
	justify-content: flex-end;
	border-bottom: 0;
}

.woocommerce table.shop_table.order_details tfoot th {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce table.shop_table.order_details tfoot tr:last-child th,
.woocommerce table.shop_table.order_details tfoot tr:last-child td {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.woocommerce-order .woocommerce-customer-details address {
	padding: 1rem 1.25rem;
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/*
 * The confirmation: a heading with the customer's name, a summary strip,
 * the order's progress, then the items and totals beside delivery, help
 * and the way on. One column on phones; from 900px the items take the
 * width and the rest stacks in a 360px column beside them.
 */
.rua-confirm {
	--rua-confirm-card: var(--rua-field);
	--rua-confirm-radius: 16px;
	--rua-confirm-blush: #f4e4e1;
	--rua-confirm-rule: #d9c9b1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 70rem;
	margin: 0 auto;
	color: var(--wp--preset--color--contrast);
}

.rua-confirm__card {
	margin: 0;
	padding: 1.25rem;
	border: var(--rua-border);
	border-radius: var(--rua-confirm-radius);
	background: var(--rua-confirm-card);
}

.rua-confirm__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.rua-confirm .rua-confirm__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

/* Heading */

.rua-confirm__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0 0.75rem;
	text-align: center;
}

.rua-confirm__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 8px var(--rua-confirm-blush);
	color: var(--wp--preset--color--surface);
	animation: rua-confirm-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.rua-confirm__badge .rua-icon {
	width: 28px;
	height: 28px;
	stroke-width: 2.4;
}

@keyframes rua-confirm-pop {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rua-confirm__badge {
		animation: none;
	}
}

.rua-confirm__eyebrow {
	margin: 0.875rem 0 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.rua-confirm .rua-confirm__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
}

.rua-confirm__lead {
	max-width: 35rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__lead strong {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}

/* Summary: two by two on phones, one row from 768px. */

.rua-confirm__summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0;
}

.rua-confirm__fact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	padding: 1rem;
}

.rua-confirm__fact:nth-child(-n + 2) {
	border-bottom: var(--rua-border);
}

.rua-confirm__fact:nth-child(even) {
	border-left: var(--rua-border);
}

.rua-confirm__fact dt {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__fact dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

.rua-confirm__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: var(--rua-border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	transition: border-color var(--rua-transition), color var(--rua-transition);
}

.rua-confirm__copy:hover,
.rua-confirm__copy:focus-visible,
.rua-confirm__copy.is-copied {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.rua-confirm__copy .rua-icon--check,
.rua-confirm__copy.is-copied .rua-icon--copy {
	display: none;
}

.rua-confirm__copy.is-copied .rua-icon--check {
	display: block;
}

.rua-confirm__pill {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: #fbecc6;
	color: #7a4b00;
	font-size: 0.6875rem;
	font-weight: 600;
}

.rua-confirm__pill.is-paid {
	background: #ddf3e4;
	color: #1a6b45;
}

.rua-confirm__method {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

/*
 * Progress: down the card on phones, across it from 768px. Each step is
 * a small grid -- the dot, the line on to the next step, the words -- so
 * the line is drawn by the step it leaves from and coloured once that
 * step is done.
 */

.rua-confirm__status {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.rua-confirm__steps {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rua-confirm__step {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 0.875rem;
}

.rua-confirm__step::after {
	content: "";
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	width: 3px;
	min-height: 30px;
	margin: 4px 0;
	border-radius: 2px;
	background: var(--wp--preset--color--border);
}

.rua-confirm__step:last-child::after {
	display: none;
}

.rua-confirm__step.is-done::after {
	background: var(--wp--preset--color--primary);
}

.rua-confirm__dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border: 2px solid var(--rua-confirm-rule);
	border-radius: 50%;
	background: var(--rua-confirm-card);
	color: var(--wp--preset--color--surface);
}

.rua-confirm__dot .rua-icon {
	width: 13px;
	height: 13px;
	stroke-width: 3;
}

.rua-confirm__step.is-done .rua-confirm__dot {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

.rua-confirm__step.is-current .rua-confirm__dot {
	border: 3px solid var(--wp--preset--color--primary);
	box-shadow: 0 0 0 5px var(--rua-confirm-blush);
}

.rua-confirm__step.is-current .rua-confirm__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.rua-confirm__step-text {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.125rem 0 0.75rem;
}

.rua-confirm__step-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__step.is-done .rua-confirm__step-label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.rua-confirm__step.is-current .rua-confirm__step-label {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.rua-confirm__step-note {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* Items and totals */

.rua-confirm__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.rua-confirm__items {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-confirm__count {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__lines {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rua-confirm__line {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 0;
	border-bottom: var(--rua-border);
}

.rua-confirm__line:first-child {
	padding-top: 0;
}

.rua-confirm__photo {
	flex: 0 0 auto;
	width: 72px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 10px;
	background: #efe3d2;
}

.rua-confirm__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rua-confirm__line-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.rua-confirm__line-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.rua-confirm__name {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

a.rua-confirm__name:hover {
	color: var(--wp--preset--color--primary);
}

.rua-confirm__price {
	flex: 0 0 auto;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.rua-confirm__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rua-confirm__chips li {
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-soft);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__totals {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	font-size: 0.875rem;
}

.rua-confirm__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.rua-confirm__total-row dt {
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__total-row dd {
	margin: 0;
	text-align: right;
}

.rua-confirm__total-row dd small {
	display: block;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__grand {
	margin-top: 0.25rem;
	padding-top: 0.875rem;
	border-top: 1px dashed var(--rua-confirm-rule);
}

.rua-confirm__grand dt {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.rua-confirm__grand dd {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

.rua-confirm__tax {
	margin: -0.5rem 0 0;
	font-size: 0.6875rem;
	text-align: right;
	color: var(--wp--preset--color--contrast-muted);
}

/* Beside the items: delivery, help, the way on. */

.rua-confirm__side {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-confirm__delivery {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.rua-confirm__address {
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.7;
}

.rua-confirm__address strong {
	font-weight: 600;
}

.rua-confirm__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__contact li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.rua-confirm__contact .rua-icon {
	flex: 0 0 auto;
}

.rua-confirm__note {
	margin: 0;
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-soft);
	font-size: var(--wp--preset--font-size--x-small);
	overflow-wrap: anywhere;
}

.rua-confirm__note span {
	display: block;
	font-weight: 600;
}

.rua-confirm__billing {
	padding-top: 0.75rem;
	border-top: var(--rua-border);
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-confirm__billing p {
	margin: 0;
}

.rua-confirm__billing .rua-confirm__address {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--contrast);
}

.rua-confirm__help {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	border-radius: var(--rua-confirm-radius);
	background: var(--rua-confirm-blush);
}

.rua-confirm__help p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	color: #5a4a44;
}

.rua-confirm__chat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	border: 1px solid #cfe3d6;
	border-radius: 12px;
	background: var(--rua-confirm-card);
	color: #1a6b45;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--rua-transition);
}

.rua-confirm__chat:hover,
.rua-confirm__chat:focus-visible {
	border-color: #1a6b45;
}

.rua-confirm__mail {
	align-self: center;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--primary);
}

.rua-confirm__actions {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding-top: 0.25rem;
}

.rua-confirm__actions .rua-button {
	border-radius: 12px;
	letter-spacing: 0.04em;
	text-transform: none;
	font-weight: 600;
}

.rua-confirm__actions .rua-button--outline {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.rua-confirm__actions .rua-button--outline:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (min-width: 768px) {
	.rua-confirm {
		gap: 1.5rem;
	}

	.rua-confirm .rua-confirm__heading {
		font-size: 1.375rem;
	}

	.rua-confirm__card {
		padding: 1.75rem 2rem;
		border-radius: 18px;
	}

	.rua-confirm__hero {
		gap: 0.75rem;
		padding-bottom: 1rem;
	}

	.rua-confirm__badge {
		width: 72px;
		height: 72px;
		box-shadow: 0 0 0 10px var(--rua-confirm-blush);
	}

	.rua-confirm__badge .rua-icon {
		width: 34px;
		height: 34px;
	}

	.rua-confirm__eyebrow {
		margin-top: 1.125rem;
		font-size: 0.75rem;
	}

	.rua-confirm .rua-confirm__title {
		font-size: 3rem;
		line-height: 1.15;
	}

	.rua-confirm__lead {
		font-size: 1rem;
	}

	.rua-confirm__summary {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 0;
	}

	.rua-confirm__fact {
		gap: 0.375rem;
		padding: 1.375rem 1.75rem;
	}

	.rua-confirm__fact:nth-child(-n + 2) {
		border-bottom: 0;
	}

	.rua-confirm__fact + .rua-confirm__fact {
		border-left: var(--rua-border);
	}

	.rua-confirm__fact dt {
		font-size: 0.6875rem;
	}

	.rua-confirm__fact dd {
		font-size: 1.25rem;
	}

	.rua-confirm__status {
		gap: 1.375rem;
		padding: 1.5rem 2rem 1.75rem;
	}

	.rua-confirm__steps {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rua-confirm__step {
		grid-template-columns: 28px minmax(0, 1fr);
		grid-template-rows: 28px auto;
		row-gap: 0.625rem;
		column-gap: 0;
	}

	.rua-confirm__step::after {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: stretch;
		width: auto;
		height: 3px;
		min-height: 0;
		margin: 0 0.5rem;
	}

	.rua-confirm__dot {
		width: 28px;
		height: 28px;
	}

	.rua-confirm__dot .rua-icon {
		width: 14px;
		height: 14px;
	}

	.rua-confirm__step.is-current .rua-confirm__dot {
		box-shadow: 0 0 0 6px var(--rua-confirm-blush);
	}

	.rua-confirm__step-text {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 0;
	}

	.rua-confirm__items {
		gap: 1.25rem;
	}

	.rua-confirm__count {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-confirm__line {
		gap: 1.125rem;
		padding: 1.25rem 0;
	}

	.rua-confirm__photo {
		width: 88px;
		border-radius: 12px;
	}

	.rua-confirm__name,
	.rua-confirm__price {
		font-size: 1rem;
	}

	.rua-confirm__chips li {
		padding: 0.2rem 0.5rem;
		font-size: 0.75rem;
	}

	.rua-confirm__grand dd {
		font-size: 1.75rem;
	}

	.rua-confirm__tax {
		font-size: 0.75rem;
	}

	.rua-confirm__help {
		padding: 1.5rem;
		border-radius: 18px;
	}
}

@media (min-width: 900px) {
	.rua-confirm__grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 1.5rem;
	}

	.rua-confirm__side {
		gap: 1.25rem;
	}

	.rua-confirm__side .rua-confirm__card {
		padding: 1.5rem;
	}

	.rua-confirm__side .rua-confirm__heading {
		font-size: 1.25rem;
	}
}

/*
 * One order in the account: the confirmation's cards under a header with
 * the way back, the number and status, and a way to ask; the delivery and
 * payment as small labelled boxes beside the items; the order's updates
 * as a timeline at the foot. On phones the account's pills give way to
 * the link back.
 */
@media (max-width: 899.98px) {
	.woocommerce-view-order .woocommerce-MyAccount-navigation {
		display: none;
	}
}

.rua-order-view {
	max-width: none;
}

.rua-order-view__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rua-order-view__back {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.25rem;
	min-height: 32px;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-decoration: none;
}

.rua-order-view__back:hover {
	text-decoration: underline;
}

.rua-order-view__title-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-order-view__title-text {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.rua-order-view__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem 0.875rem;
}

.rua-order-view .rua-order-view__title h1 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.2;
}

.rua-order-view__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-view__actions {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rua-order-view__actions .rua-account__chat {
	background: var(--rua-account-card);
}

.rua-order-view .rua-order__tracking {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: var(--rua-border);
}

.rua-order-view__box {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rua-order-view .rua-order-view__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-view__muted {
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-view__small {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-order-view__pay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.rua-order-view__updates {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rua-order-view__events {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A dot per update, the newest in wine, joined by a line down the left. */
.rua-order-view__event {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0 0 1rem 1.625rem;
}

.rua-order-view__event:last-child {
	padding-bottom: 0;
}

.rua-order-view__event::before {
	content: "";
	position: absolute;
	top: 0.375rem;
	left: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rua-account-rule);
}

.rua-order-view__event:first-child::before {
	background: var(--wp--preset--color--primary);
}

.rua-order-view__event::after {
	content: "";
	position: absolute;
	top: 1.25rem;
	bottom: 0.25rem;
	left: 5px;
	width: 2px;
	background: var(--wp--preset--color--border);
}

.rua-order-view__event:last-child::after {
	display: none;
}

.rua-order-view__event-text {
	font-size: 0.875rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.rua-order-view__event-date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

@media (min-width: 768px) {
	.rua-order-view {
		gap: 1.25rem;
	}

	.rua-order-view__head {
		gap: 0.625rem;
	}

	.rua-order-view__title-row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.rua-order-view__title {
		justify-content: flex-start;
	}

	.rua-order-view .rua-order-view__title h1 {
		font-size: 2.5rem;
		line-height: 1.15;
	}

	.rua-order-view__meta {
		font-size: 0.875rem;
	}

	.rua-order-view__actions {
		flex-direction: row;
		flex-shrink: 0;
	}

	.rua-order-view__actions .rua-account__chat {
		min-height: 44px;
		font-size: var(--wp--preset--font-size--x-small);
	}

	.rua-order-view .rua-confirm__status {
		padding: 1.375rem 1.75rem 1.5rem;
	}

	.rua-order-view .rua-confirm__card.rua-confirm__items,
	.rua-order-view__updates {
		padding: 1.5rem;
	}

	.rua-order-view__box {
		padding: 1.25rem;
	}
}

@media (min-width: 900px) {
	.rua-order-view__grid {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 1.25rem;
	}

	.rua-order-view .rua-confirm__side {
		gap: 1rem;
	}

	.rua-order-view .rua-confirm__side .rua-order-view__box {
		padding: 1.25rem;
	}

	.rua-order-view .rua-confirm__address {
		font-size: 0.8125rem;
	}
}

/*
 * The product's details, as designed: the category with the SKU at the
 * other end of its line; "Inclusive of all taxes" and the stock under the
 * price; the options as "Colour: Mustard Yellow" then "Size: Select a
 * size" over the size pills, each pill with its bust; a sentence-case Add
 * to bag; the delivery card as rows.
 */
.rua-product__category {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--primary);
}

.rua-product__sku {
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product .summary > p.price {
	margin-bottom: 0.25rem;
	font-size: 1.5rem;
	font-weight: 600;
}

.rua-price-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-price-note__stock {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 600;
	color: #1a6b45;
}

.rua-price-note__stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e8b57;
}

.rua-price-note__stock.is-out {
	color: var(--wp--preset--color--primary);
}

.rua-price-note__stock.is-out::before {
	background: var(--wp--preset--color--primary);
}

.rua-price-note__stock.is-low {
	color: #9a4d00;
}

.rua-price-note__stock.is-low::before {
	background: #e08a00;
}

/* Options: one-value rows ("Colour: Mustard Yellow") first, then the choices. */
.woocommerce div.product form.cart table.variations tbody {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.woocommerce div.product form.cart table.variations tr + tr {
	margin-top: 0;
}

.woocommerce div.product form.cart table.variations tr.is-single {
	order: -1;
}

.woocommerce div.product form.cart table.variations tr.is-single td.value {
	display: none;
}

.woocommerce div.product form.cart table.variations tr.is-single th.label {
	padding-bottom: 0;
}

.woocommerce div.product form.cart table.variations th.label label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.rua-swatches__value {
	margin-left: 0;
	font-weight: 500;
}

/* "Colour: Mustard Yellow"; the colon belongs to the label, before the value. */
.rua-swatches__value::before {
	content: ": ";
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	white-space: pre;
}

/* Shown in place of an empty value: "Size: Select a size". */
.woocommerce div.product form.cart table.variations tr:not(.is-single) .rua-swatches__value:empty {
	display: inline;
}

.woocommerce div.product form.cart table.variations tr:not(.is-single) .rua-swatches__value:empty::after {
	content: attr(data-placeholder);
}

.rua-swatches {
	gap: 0.5rem;
}

.rua-swatches__item {
	min-width: 4.5rem;
	min-height: 48px;
	padding: 0 0.875rem;
	border-color: #d9c9b1;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 500;
}

.rua-swatches__item.has-note {
	flex-direction: column;
	gap: 0.125rem;
	min-height: 60px;
}

.rua-swatches__note {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-swatches__item[aria-pressed="true"] {
	border: 2px solid var(--wp--preset--color--primary);
	background: #f4e4e1;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.rua-swatches__item[aria-pressed="true"] .rua-swatches__note {
	color: var(--wp--preset--color--primary);
}

.rua-size-between {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce div.product form.cart table.variations th.label .rua-size-guide__link {
	text-decoration: underline;
	font-size: 0.75rem;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	min-height: 54px;
	border-radius: 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: none;
}

/*
 * Delivery: a line per region, how one pays, and when it usually leaves.
 * Kept to a few short lines so the description, where the measurements
 * are, follows close under the purchase form.
 */
.rua-perk {
	gap: 0.3rem;
	margin-top: 0.75rem;
	padding: 0.625rem 0.875rem;
	border: var(--rua-border);
	border-radius: 12px;
	background: var(--rua-field);
	font-size: 0.8125rem;
}

.rua-perk__row {
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	line-height: 1.4;
}

.rua-perk__row strong {
	display: inline;
	font-size: inherit;
	font-weight: 600;
}

.rua-perk__muted {
	display: inline;
	font-size: inherit;
}

.rua-perk__muted::before {
	content: " · ";
}

.rua-perk__mark {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--primary);
}

.rua-perk__mark .rua-icon {
	stroke-width: 1.8;
}

.rua-perk__dispatch {
	margin: 0.15rem 0 0;
	padding: 0.35rem 0 0;
	border-top: 1px dashed #d9c9b1;
	font-size: 0.75rem;
	font-weight: 500;
	color: #1a6b45;
}

@media (min-width: 900px) {
	.woocommerce div.product .summary > p.price {
		font-size: 1.75rem;
	}
}

/* The buy bar's line over the price: what is chosen so far, as written. */
.rua-buybar .rua-buybar__label {
	overflow: hidden;
	font-size: 0.75rem;
	letter-spacing: 0;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

/*
 * Sold out: the purchase part of the form goes (the struck-through sizes
 * stay, to show what it came in), and the community card takes the place
 * of Add to cart and the delivery dates.
 */
.rua-product-sold-out div.product form.cart .single_variation_wrap,
.rua-product-sold-out div.product form.cart .reset_variations,
.rua-product-sold-out div.product form.cart:not(.variations_form) > *:not(.rua-size-one),
.rua-product-sold-out div.product .summary > p.stock.out-of-stock {
	display: none !important;
}

.rua-soldout {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0 0 1rem;
	padding: 0.875rem;
	border-radius: 16px;
	background: #e2f0e6;
	scroll-margin-top: calc(var(--rua-header-offset) + 1rem);
}

.rua-soldout__head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.rua-soldout__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1a6b45;
	color: #fff;
}

.rua-soldout .rua-soldout__title {
	margin: 0 0 0.125rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.25;
}

.rua-soldout__text {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: #2f4a3a;
}

.rua-soldout__actions {
	display: flex;
	gap: 0.5rem;
}

.rua-soldout__community,
.rua-soldout__follow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.rua-soldout__community {
	flex: 1 1 auto;
	background: #1a6b45;
	color: #fff;
}

.rua-soldout__community:hover {
	background: #145637;
}

.rua-soldout__follow {
	flex: 0 0 44px;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--contrast);
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
}

.rua-soldout__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: 0.6875rem;
	color: #2f4a3a;
}

.rua-soldout__foot a {
	font-weight: 600;
	color: #1a6b45;
}

/* "Notify me when it's back": inside the sold-out card, or folded out under Add to cart. */
.rua-restock {
	margin: -0.5rem 0 1rem;
}

.rua-soldout .rua-restock {
	margin: 0;
	padding: 0.75rem;
	border-radius: 12px;
	background: var(--rua-field);
}

.rua-restock__title {
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.rua-restock__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 32px;
	color: #1a6b45;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.rua-restock__toggle::-webkit-details-marker {
	display: none;
}

.rua-restock__toggle span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

details.rua-restock[open] .rua-restock__form {
	margin-top: 0.5rem;
	padding: 1rem;
	border: var(--rua-border);
	border-radius: 14px;
	background: var(--rua-field);
}

.rua-restock__form {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.rua-restock__label {
	font-size: 0.75rem;
	font-weight: 600;
}

.rua-restock__size,
.rua-restock__contact {
	width: 100%;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid #d9c9b1;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 16px;
}

.rua-restock__size {
	margin-bottom: 0.25rem;
}

.rua-restock__row {
	display: flex;
	gap: 0.5rem;
}

.rua-restock__contact {
	flex: 1 1 auto;
	min-width: 0;
}

.rua-restock__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.rua-restock__submit:disabled {
	opacity: 0.6;
}

.rua-restock__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.rua-restock__note,
.rua-restock__community {
	margin: 0.125rem 0 0;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-restock__community a {
	color: #1a6b45;
	font-weight: 500;
}

.rua-restock__status {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.rua-restock__status:empty {
	display: none;
}

.rua-restock__form.is-done > :not(.rua-restock__status) {
	display: none;
}

.rua-restock__form.is-done .rua-restock__status {
	color: #1a6b45;
}

/* The sold-out buy bar: the price and a way to the restock card. */
.rua-buybar.is-sold-out .rua-buybar__button {
	flex: 1 1 auto;
	background: #1a6b45;
	text-decoration: none;
}

.rua-buybar .rua-buybar__button {
	border-radius: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: none;
}