/* ============================================================
	 Flair theme: WooCommerce styles.

	 Loaded only on WooCommerce pages (flair_woocommerce_styles() in
	 inc/woocommerce.php), after site.css. These rules can use site.css
	 custom properties and its button styles.

	 Scope: WooCommerce markup that is not a core block. Native WooCommerce
	 blocks already use theme.json, so they need no rules here.
	 ============================================================ */

/* ---- Main bottom spacing ----
	 WooCommerce's block templates (shop, product, cart, checkout, account) render <main> without the bottom
	 padding the theme sets inline. This rule adds it, but only on those pages: on any other page, such as the
	 home, the last section sits right on the footer. When a WooCommerce page itself ends in a full-width band,
	 the band sits on the footer too. */
body:is(.woocommerce, .woocommerce-page) main#wp--skip-link--target {
	padding-bottom: var(--wp--preset--spacing--section);
}
body:is(.woocommerce, .woocommerce-page) main#wp--skip-link--target:has(> .alignfull:last-child) {
	padding-bottom: 0;
}

/* ---- Sale badge ----
	 One badge everywhere: the one of the product page (span.onsale) and the one of the product
	 grids (the Product Sale Badge block). A gradient pill in the top left corner of the image. */
.woocommerce span.onsale.onsale,
.wc-block-components-product-sale-badge.wc-block-components-product-sale-badge {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: none;
	border: 0;
	border-radius: var(--wp--custom--field-radius, 62.4375rem);
	min-height: 0;
	min-width: 0;
	width: auto;
	line-height: 1;
	padding: 0.55em 1.1em;
	margin: 0;
	box-shadow: none;
}
.wc-block-components-product-sale-badge span {
	background: transparent;
	color: inherit;
}
.woocommerce span.onsale.onsale,
.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale.onsale,
.wc-block-components-product-image .wc-block-components-product-sale-badge.wc-block-components-product-sale-badge {
	position: absolute;
	top: var(--wp--preset--spacing--xs);
	left: var(--wp--preset--spacing--xs);
	right: auto;
	z-index: 9;
}
.wp-block-woocommerce-product-image-gallery {
	position: relative;
}

/* ---- Star rating ---- */
.woocommerce .star-rating {
	color: var(--wp--preset--color--accent);
	font-size: 0.9rem;
}
.woocommerce .star-rating::before {
	color: var(--wp--preset--color--border);
}
.woocommerce p.stars a {
	color: var(--wp--preset--color--accent);
}

/* ---- Product reviews ----
	 The Reviews tab as a grid of quote cards: stars, then the review, then
	 the name and date. WooCommerce's default puts a grey placeholder avatar
	 next to a boxed comment; the placeholder is hidden, a real avatar is
	 shown small. Ids repeat WooCommerce's own selectors so these win. */
.woocommerce #reviews #comments h2.woocommerce-Reviews-title {
	font-size: var(--wp--preset--font-size--h-4, 1.5rem);
	margin: 0 0 var(--wp--preset--spacing--md);
}
.woocommerce #reviews #comments ol.commentlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--md);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce's clearfix pseudo-elements would count as grid and flex
   items: an empty first card, and space above the stars. */
.woocommerce #reviews #comments ol.commentlist::before,
.woocommerce #reviews #comments ol.commentlist::after,
.woocommerce #reviews #comments ol.commentlist li::before,
.woocommerce #reviews #comments ol.commentlist li::after,
.woocommerce #reviews #comments ol.commentlist li .comment_container::before,
.woocommerce #reviews #comments ol.commentlist li .comment_container::after,
.woocommerce #reviews #comments ol.commentlist li .comment-text::before,
.woocommerce #reviews #comments ol.commentlist li .comment-text::after {
	content: none;
	display: none;
}
.woocommerce #reviews #comments ol.commentlist li {
	margin: 0;
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--background);
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--card-radius, 1rem);
	box-shadow: var(--flair-shadow-sm);
}
.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar-default {
	display: none;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: none;
	order: 1;
	margin: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .description {
	order: 2;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--lead, 1.125rem);
	line-height: 1.55;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .description p {
	margin: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__dash {
	display: none;
}
.woocommerce #reviews .woocommerce-verification-required,
.woocommerce #reviews .woocommerce-noreviews {
	margin-top: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Notices ----
	 Cart, checkout, and account messages: success, info, and error. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--foreground);
	border-radius: min(0.75rem, var(--wp--custom--card-radius, 0.75rem));
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--body);
	box-shadow: none;
}
.woocommerce-error {
	border-top-color: var(--wp--preset--color--error);
}
/* WooCommerce's own icon font sits over the text with the theme's padding
   (a square on the order received page); the colored top border already
   says what kind of notice it is. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	display: none;
}

/* ---- Order received ----
	 The thank-you line and the section titles (order details, billing
	 address, bank details from offline payment methods) use the theme's
	 smaller heading sizes, like My Account. */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order > .woocommerce-notice {
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.45;
	margin: 0 0 var(--wp--preset--spacing--md);
}
.woocommerce-order h2 {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
	margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xs);
}
.woocommerce-order h3 {
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.3;
	margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--2-xs);
}
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	float: none;
	margin-top: var(--wp--preset--spacing--xs);
}

/* ---- Quantity stepper ---- */
.woocommerce div.quantity .qty,
.woocommerce table.cart td.actions .quantity .qty {
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
	padding: 0.55em 0.6em;
	font-family: var(--wp--preset--font-family--body);
	width: 4em;
}

/* ---- Breadcrumbs ---- */
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--md);
}
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---- Catalog ordering ----
	 The sort dropdown on shop and category pages. */
.woocommerce-ordering select.orderby {
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
	padding: 0.55em 2.2em 0.55em 0.8em;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--background);
	appearance: none;
	-webkit-appearance: none;
	/* The chevron is drawn with two CSS gradients, not an SVG. An SVG data URI
		 cannot read the theme's color variables, so the gradients are the only way
		 to make the chevron match each style's muted color. */
	background-image:
		linear-gradient(
			45deg,
			transparent 50%,
			var(--wp--preset--color--muted) 50%
		),
		linear-gradient(
			135deg,
			var(--wp--preset--color--muted) 50%,
			transparent 50%
		);
	background-position:
		right 1.05em center,
		right 0.8em center;
	background-size:
		0.3125rem 0.3125rem,
		0.3125rem 0.3125rem;
	background-repeat: no-repeat;
}
.woocommerce-ordering select.orderby:focus {
	outline: 0.125rem solid var(--wp--preset--color--primary);
	outline-offset: 0.0625rem;
}

/* ---- Product card (classic loop) ----
	 WooCommerce floats each product, so the cards line up only when every title
	 wraps to the same number of lines. Flexbox fixes that: each row stretches
	 to equal height, and the card fills its row. */
.woocommerce ul.products {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.woocommerce ul.products li.product {
	float: none;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.woocommerce ul.products li.product img {
	border-radius: min(0.75rem, var(--wp--custom--card-radius, 0.75rem));
	aspect-ratio: 3/4;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	margin-top: auto;
}
.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}
/* The old (struck-through) price is small, so the current price reads first.
	 This applies on the single product page too. */
/* Product Price block: block-theme product pages do not always sit inside a
	 .woocommerce wrapper, so these selectors match both cases. */
.woocommerce .price del,
.price del,
.wp-block-woocommerce-product-price del,
.wc-block-components-product-price del {
	font-size: 0.6em;
	font-weight: 400;
	opacity: 0.7;
	margin-right: 0.35em;
}
/* The add-to-cart button sits outside the product link. The link above it fills
	 the card, which pushes the button to the bottom. This stops the button from
	 stretching to the full card width. */
.woocommerce ul.products li.product a.button {
	align-self: flex-start;
}

/* ---- Product Collection grid (shop and category pages) ----
	 The shop page uses WooCommerce's Product Collection block, not the classic
	 .products markup above. The block is a CSS grid, so rows already share equal
	 heights. */
.wc-block-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
}
.wc-block-product-template
	li.wc-block-product
	.wp-block-woocommerce-product-price {
	margin-top: auto;
}
/* WordPress global styles add a top margin to items in ".is-layout-flow"
	 containers. That margin also reaches the grid cards here, so every card
	 except the first in a row sits lower. This resets it on the grid. */
.wc-block-product-template.wc-block-product-template__responsive
	li.wc-block-product {
	margin-top: 0;
}
/* The grid gap (WooCommerce core CSS) spaces items from each other only. It adds
	 no space above the first row, so the grid touches the sorting bar. This
	 restores that space. WooCommerce's block styles use a selector with higher
	 specificity, so this rule uses the same selector to win. */
.wp-block-group:has(
	.wc-block-product-results-count,
	.wc-block-catalog-sorting
) {
	margin-bottom: var(--wp--preset--spacing--md);
}

/* ---- Single product tabs ----
	 Description and Reviews. */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-bottom: 0.125rem solid transparent;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	border-bottom-color: var(--wp--preset--color--primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

/* ---- Cart and checkout tables ---- */
.woocommerce table.shop_table {
	border-color: var(--wp--preset--color--border);
	border-radius: min(0.75rem, var(--wp--custom--card-radius, 0.75rem));
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background: var(--wp--preset--color--background-alt);
	font-family: var(--wp--preset--font-family--headings);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--wp--preset--color--border);
}
.woocommerce #payment div.payment_box {
	background: var(--wp--preset--color--background-alt);
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
}
.woocommerce #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--background-alt);
}

/* ---- Coupon field ---- */
.woocommerce .coupon .input-text {
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
	padding: 0.6em 0.8em;
	font-family: var(--wp--preset--font-family--body);
}

/* ---- Form fields ----
	 Checkout billing and shipping, and My Account. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-Address-field select,
.woocommerce form .form-row select {
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
	padding: 0.65em 0.8em;
	font-family: var(--wp--preset--font-family--body);
}
.woocommerce form .form-row label {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--foreground);
}
.woocommerce form .form-row .required {
	color: var(--wp--preset--color--error);
	text-decoration: none;
}

/* ---- Mini cart ----
	 The cart in a widget or header. */
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
	border-bottom-color: var(--wp--preset--color--border);
}
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
}

/* ---- Checkout block: order notes ---- */
.wc-block-checkout__add-note {
	margin-top: var(--wp--preset--spacing--xs);
}
.wc-block-components-checkbox__label {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--foreground);
}
.wc-block-components-checkbox__input {
	border-color: var(--wp--preset--color--border) !important;
}
.wc-block-components-checkbox__input:checked {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}
.wc-block-components-checkbox__input:checked
	+ .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--background);
}
.wc-block-components-textarea {
	border: 0.0625rem solid var(--wp--preset--color--border);
	border-radius: min(0.5rem, var(--wp--custom--field-radius, 0.5rem));
	padding: 0.65em 0.8em;
	font-family: var(--wp--preset--font-family--body);
	width: 100%;
}
.wc-block-components-textarea:focus {
	outline: 0.125rem solid var(--wp--preset--color--primary);
	outline-offset: 0.0625rem;
}

/* ---- Checkout block: terms and conditions ---- */
.wc-block-checkout__terms {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--body);
	margin-top: var(--wp--preset--spacing--sm);
}
.wc-block-checkout__terms a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ---- Flair Companion: purchase notes ----
	 The plugin carries its own look for these (assets/css/woo-notes.css), so it
	 works under any theme. These rules only make it follow this theme's tokens
	 and styles. The purchase note on the product page and the list of notes at
	 checkout use the same card as the author box at the end of a post: a hairline border, the
	 card radius, a soft shadow and the same padding, so the two read as one
	 family. */
.flair-woo-purchase-note,
.flair-woo-purchase-notes {
	border: 0.0625rem solid var(--wp--preset--color--background-alt);
	border-radius: var(--wp--custom--card-radius, 1rem);
	box-shadow: var(--flair-shadow-sm);
	padding: var(--wp--preset--spacing--lg);
	margin-top: var(--wp--preset--spacing--xl);
	font-family: var(--wp--preset--font-family--body);
}
.flair-woo-purchase-note > :first-child,
.flair-woo-purchase-notes > :first-child {
	margin-top: 0;
}
.flair-woo-purchase-note > :last-child,
.flair-woo-purchase-notes > :last-child {
	margin-bottom: 0;
}
.flair-woo-purchase-note p:first-child,
.flair-woo-purchase-notes p:first-child {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h5, 1.125rem);
	margin-top: 0;
}
.flair-woo-purchase-note ul,
.flair-woo-purchase-notes ul {
	margin: 0.5em 0 0;
	padding-left: 1.2em;
}

/* The purchase note, the order notes and the service terms are plain divs placed
	 straight in the page's constrained layout. Without a width they would take the
	 narrow content width, or the full width with no margin, and sit out of line with
	 the product above them. They get the wide width (the same as the product, its
	 tabs and the related products), centered the same way. */
.is-layout-constrained > .flair-woo-purchase-note,
.is-layout-constrained > .flair-woo-purchase-notes,
.is-layout-constrained > .flair-woo-service-terms {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 72.5rem);
	margin-left: auto;
	margin-right: auto;
}

/* ---- Flair Companion: service terms on the product page ---- */
/* Fine print: delivery and refund terms. A step smaller than the body text and
	 muted, set off by a hairline, so it reads as a footnote to the product and
	 never competes with the description. The text runs the full width of the
	 content, like the description above it. The paragraphs are set explicitly:
	 WooCommerce gives them a size of their own, which would otherwise win. */
.flair-woo-service-terms {
	margin-top: var(--wp--preset--spacing--lg);
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 0.0625rem solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--muted);
}
.flair-woo-service-terms :is(p, li) {
	font-size: 0.8125rem;
	line-height: 1.6;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0.5em;
}
.flair-woo-service-terms > :last-child {
	margin-bottom: 0;
}
.flair-woo-service-terms a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.flair-woo-service-terms a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---- My Account navigation ---- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 0.0625rem solid var(--wp--preset--color--border);
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--wp--preset--spacing--xs) 0;
	color: var(--wp--preset--color--foreground);
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ---- My Account page title ----
	 WooCommerce widens the page title to 62.5rem on the account pages, and the
	 centered title then starts to the left of the intro line, the "Last
	 updated" line and the account menu under it. It keeps the same column as
	 them. */
body.woocommerce-account .wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
}

/* ---- My Account headings ----
	 Section titles in the account pages (addresses, order details, downloads)
	 sit in a narrow column next to the menu: they use the h4 and h5 sizes
	 instead of the page heading sizes. The address titles share their line
	 with the Edit / Add link. One class, so a plugin's own area inside the
	 account (scoped by its own class) keeps its sizes. */
.woocommerce-MyAccount-content h2 {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
	margin: 0 0 var(--wp--preset--spacing--xs);
}
.woocommerce-MyAccount-content h3 {
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.3;
	margin: 0 0 var(--wp--preset--spacing--xs);
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--xs);
}
.woocommerce-MyAccount-content .woocommerce-Address-title::before,
.woocommerce-MyAccount-content .woocommerce-Address-title::after {
	display: none;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	float: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Product meta ----
	 SKU, category, and tags under the short description. They are stacked with a
	 clear gap and use a quieter color than the description. */
.woocommerce div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3-xs);
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.woocommerce div.product .product_meta > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}
.woocommerce div.product .product_meta a {
	color: var(--wp--preset--color--primary);
}
/* Plain small text for the product meta. Not the uppercase eyebrow style: the
	 category is a quiet detail under the price and button. */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta * {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}
.woocommerce div.product .product_meta a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}


/* The product page built from blocks puts the SKU, categories, brands and tags
	 in a Product Meta block. Each one gets its own line (the SKU first). The SKU
	 block is itself a ".product_meta" box, which the rule above stacks, so it is
	 set back to one row here: the label and its value share a line, in the same
	 uppercase style as the category and brand lines. */
.wp-block-woocommerce-product-meta,
.wp-block-woocommerce-product-meta > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2-xs);
}
.woocommerce div.product .wp-block-woocommerce-product-sku.product_meta,
.woocommerce div.product .wp-block-woocommerce-product-sku.product_meta * {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce div.product .wp-block-woocommerce-product-sku.product_meta {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.4em;
	margin: 0;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
}

/* ---- Variable product options ----
	 The label sits above its options (a dropdown, or the buttons Flair Companion
	 can show instead), one option per block, instead of a cramped two-column
	 table. */
.woocommerce div.product form.cart .variations {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--md);
	border: 0;
}
.woocommerce div.product form.cart .variations tbody {
	display: block;
}
.woocommerce div.product form.cart .variations tr {
	display: grid;
	gap: var(--wp--preset--spacing--2-xs);
	margin-bottom: var(--wp--preset--spacing--sm);
}
.woocommerce div.product form.cart .variations :is(th, td) {
	display: block;
	padding: 0;
	text-align: left;
}
/* The dropdown is a form field like any other: its border, radius, padding and
	 focus ring come from the theme's field rules (theme.json), so a style that
	 changes the fields changes the dropdown too. Only its width and its arrow are
	 set here. The arrow is drawn with the text color, so it follows every style. */
.woocommerce div.product form.cart .variations select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 24rem;
	min-height: 2.75rem;
	padding-inline-end: 2.75rem;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.5rem) 50%,
		calc(100% - 1.1rem) 50%;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
}
.woocommerce div.product form.cart .variations th label {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce div.product form.cart .variations tr:last-child {
	margin-bottom: 0;
}
/* The Clear link sits at the end of the option's name line instead of below the
	 options: WooCommerce hides it until something is chosen, but it still took up
	 a line, which left a big gap above the quantity and the button. */
.woocommerce div.product form.cart .variations td.value {
	position: relative;
}
.woocommerce div.product form.cart .reset_variations {
	position: absolute;
	top: -2.1rem;
	right: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Grouped product list ----
	 Each product is a row: its name and price on the first line, and what the
	 buyer does (a quantity, a button, or the options Flair Companion can show)
	 on the second. A button no longer squeezes into a narrow first column. */
/* WooCommerce's Add to Cart Form block makes the form a grid of several
	 narrow columns, and sizes it to its content (width: fit-content). The list of
	 a group needs the whole width, so the form is a full-width block here. */
form.cart.grouped_form,
.wp-block-woocommerce-add-to-cart-form form.cart.grouped_form {
	display: block;
	width: 100%;
}
.woocommerce-grouped-product-list {
	display: block;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--md);
	border: 0;
	border-collapse: collapse;
}
.woocommerce-grouped-product-list tbody {
	display: block;
}
.woocommerce-grouped-product-list-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"label price"
		"quantity quantity";
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--sm);
	border-bottom: 0.0625rem solid var(--wp--preset--color--border);
}
.woocommerce-grouped-product-list-item > td {
	display: block;
	padding: 0;
	border: 0;
}
/* WooCommerce's own rules give the first cell a width of 4em, centered text and
	 side padding on the name. Those suit its table layout, not these rows, so they
	 are set back here with a selector as specific as theirs. */
.woocommerce div.product form.cart .group_table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__label,
.woocommerce div.product form.cart .group_table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__price,
.woocommerce div.product form.cart .group_table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__quantity {
	width: auto;
	padding: 0;
	text-align: left;
}
.woocommerce div.product form.cart .group_table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__price {
	text-align: right;
}
.woocommerce-grouped-product-list-item__label {
	grid-area: label;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	line-height: 1.3;
}
/* The product name is a heading in everything but its tag, so like every
	 linked heading it is not underlined (it is on hover and keyboard focus). */
.woocommerce-grouped-product-list-item__label a {
	text-decoration: none;
}
.woocommerce-grouped-product-list-item__label a:is(:hover, :focus-visible) {
	text-decoration: underline;
}
.woocommerce-grouped-product-list-item__price {
	grid-area: price;
	text-align: right;
}
.woocommerce-grouped-product-list-item__quantity {
	grid-area: quantity;
}
.woocommerce-grouped-product-list-item__quantity .button {
	width: auto;
	padding: 0.625rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}
.woocommerce-grouped-product-list-item__quantity .qty {
	width: 4.5rem;
}

/* ---- Rounded product images ----
	 Every WooCommerce image uses the theme's card radius (theme.json
	 settings.custom.cardRadius, the --wp--custom--card-radius variable), like
	 cards, covers and post images. Small thumbnails take half of it. */
.wc-block-components-product-image,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.wc-block-product-gallery-large-image img,
.wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--wp--custom--card-radius, 1rem);
}
.wc-block-components-product-image {
	overflow: hidden;
}
.woocommerce div.product div.images .flex-control-thumbs li img,
.wc-block-product-gallery-thumbnails img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.woocommerce table.shop_table img,
.woocommerce-mini-cart-item img {
	border-radius: calc(var(--wp--custom--card-radius, 1rem) / 2);
}

/* ---- "View cart" link after adding from a product list ----
	 After a product is added without leaving the page, WooCommerce puts a "View
	 cart" link after the button. Stacked below it, with the button's own bottom
	 margin plus the link's margin and padding, it added about 2.5rem to that one
	 card and pushed the row out of line with its neighbors. It now sits beside
	 the button, and only drops under it when the card is too narrow for both. */
.wp-block-button.wc-block-components-product-button {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
}
.wp-block-button.wc-block-components-product-button .wp-block-button__link.wc-block-components-product-button__button {
	flex: 0 0 auto;
	width: auto;
	margin-bottom: 0;
	white-space: nowrap;
}
.wp-block-button.wc-block-components-product-button .added_to_cart,
.woocommerce ul.products li.product .added_to_cart {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--2-xs);
}

/* The line that says the order note is required: a little stronger than the
	 notes above it, so it is not missed. */
.flair-woo-purchase-notes .flair-woo-purchase-notes__required {
	margin: var(--wp--preset--spacing--xs) 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.flair-woo-purchase-notes > ul + .flair-woo-purchase-notes__required {
	margin-top: var(--wp--preset--spacing--sm);
}

/* ---- Notes at checkout: quieter than the product page note ----
	 At checkout the buyer is about to pay, so this box is a hint, not a feature:
	 a smaller card, smaller text, and the required line in a muted tone. */
.flair-woo-purchase-notes {
	padding: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--md);
	box-shadow: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.flair-woo-purchase-notes p:first-child {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.flair-woo-purchase-notes ul {
	margin-top: var(--wp--preset--spacing--2-xs);
}
.flair-woo-purchase-notes li {
	font-size: var(--wp--preset--font-size--small);
}
.flair-woo-purchase-notes .flair-woo-purchase-notes__required {
	margin-top: var(--wp--preset--spacing--xs);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.flair-woo-purchase-notes > ul + .flair-woo-purchase-notes__required {
	margin-top: var(--wp--preset--spacing--xs);
}