/**
 * FashionFlow WooCommerce styles.
 *
 * Loaded after WooCommerce's own stylesheets (woocommerce-layout, -smallscreen, -general), which stay
 * enabled. This file only adapts them to the theme tokens: product grid and cards, prices, sale and stock
 * labels, buttons, notices, form fields, tables, account navigation, and the colors of the block-based and
 * classic cart and checkout. Layouts are left to WooCommerce in this phase.
 *
 * Specificity notes:
 * - WooCommerce sizes grid items with selectors such as ".woocommerce.columns-3 ul.products li.product"
 *   (4 classes). The grid rules below use ":is(.woocommerce, .woocommerce-page) ul.products[class] li.product[class]"
 *   (5) so they apply without !important.
 * - WooCommerce Blocks stylesheets can print after this file, so the block overrides start with "body".
 */

/* ---------------------------------------------------------------- WooCommerce color variables */

/* WooCommerce's own stylesheets (and the block cart and checkout separators) read these variables. */
:root {
	--wc-red: var(--ff-color-error);
	--wc-green: var(--ff-color-success);
	--wc-destructive: var(--ff-color-error);
	--wc-primary: var(--ff-color-button-bg);
	--wc-primary-text: var(--ff-color-button-text);
	--wc-secondary: var(--ff-color-surface);
	--wc-secondary-text: var(--ff-color-text);
	--wc-highlight: var(--ff-color-accent);
	--wc-content-bg: var(--ff-color-card);
	--wc-subtext: var(--ff-color-text-muted);
	--wc-separator-color: var(--ff-color-border);
	--wc-form-border-color: var(--ff-color-border);
	--wc-form-color-background: var(--ff-color-input-bg);
	--wc-form-color-text: var(--ff-color-text);
	--wc-form-border-radius: var(--ff-radius-sm);
}

/* ---------------------------------------------------------------- Product grid */

:is(.woocommerce, .woocommerce-page) ul.products[class] {
	--ff-shop-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--ff-shop-columns), minmax(0, 1fr));
	gap: var(--ff-product-gap-row) var(--ff-product-gap-column);
	margin: 0 0 var(--ff-space-10);
	padding: 0;
}

:is(.woocommerce, .woocommerce-page) ul.products[class]::before,
:is(.woocommerce, .woocommerce-page) ul.products[class]::after {
	display: none;
}

:is(.woocommerce, .woocommerce-page) ul.products.columns-1 { --ff-shop-columns: 1; }
:is(.woocommerce, .woocommerce-page) ul.products.columns-2 { --ff-shop-columns: 2; }
:is(.woocommerce, .woocommerce-page) ul.products.columns-3 { --ff-shop-columns: 3; }
:is(.woocommerce, .woocommerce-page) ul.products.columns-5 { --ff-shop-columns: 5; }
:is(.woocommerce, .woocommerce-page) ul.products.columns-6 { --ff-shop-columns: 6; }

@media (max-width: 1199.98px) {
	:is(.woocommerce, .woocommerce-page) ul.products:is(.columns-5, .columns-6) { --ff-shop-columns: 4; }
}

@media (max-width: 959.98px) {
	:is(.woocommerce, .woocommerce-page) ul.products:is(.columns-4, .columns-5, .columns-6) { --ff-shop-columns: 3; }
}

@media (max-width: 599.98px) {
	:is(.woocommerce, .woocommerce-page) ul.products:not(.columns-1) {
		--ff-shop-columns: 2;
		--ff-product-gap-column: var(--ff-space-3);
		--ff-product-gap-row: var(--ff-space-6);
	}
}

:is(.woocommerce, .woocommerce-page) ul.products[class] li.product[class] {
	--ff-card-padding: var(--ff-space-3);
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--ff-card-padding);
	border: var(--ff-border-width) solid var(--ff-color-card-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-color-card);
	color: var(--ff-color-text);
	transition: border-color var(--ff-duration) var(--ff-ease);
}

:is(.woocommerce, .woocommerce-page) ul.products[class] li.product[class]:hover,
:is(.woocommerce, .woocommerce-page) ul.products[class] li.product[class]:focus-within {
	border-color: var(--ff-color-card-border-hover);
}

@media (max-width: 599.98px) {
	:is(.woocommerce, .woocommerce-page) ul.products[class] li.product[class] {
		--ff-card-padding: var(--ff-space-2);
	}
}

/* ---------------------------------------------------------------- Product card */

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0 0 var(--ff-space-3);
	aspect-ratio: var(--ff-product-image-ratio);
	object-fit: cover;
	border-radius: var(--ff-radius-sm);
	background: var(--ff-color-image-placeholder);
}

/* WooCommerce draws a light grey border around its placeholder image. */
.woocommerce ul.products li.product .woocommerce-placeholder,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder .woocommerce-placeholder,
.wc-block-components-product-image .woocommerce-placeholder,
.wc-block-grid__product-image .woocommerce-placeholder {
	border-color: var(--ff-color-card-border);
}

.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
	background: transparent;
	color: var(--ff-color-text-muted);
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	margin: 0 0 var(--ff-space-1);
	padding: 0;
	color: var(--ff-color-text);
	font-family: var(--ff-font-body);
	font-size: var(--ff-text-base);
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce ul.products li.product .star-rating {
	margin-block: var(--ff-space-1);
	font-size: var(--ff-text-xs);
}

/* Full-width button pushed to the bottom of the card, so buttons line up across a row and are easy to tap. */
.woocommerce ul.products li.product .button {
	align-self: stretch;
	justify-content: center;
	margin-block-start: auto;
	text-align: center;
	white-space: normal;
}

.woocommerce ul.products li.product .ff-card-category {
	display: block;
	margin-block-end: var(--ff-space-1);
	color: var(--ff-color-text-muted);
	font-size: var(--ff-text-xs);
	letter-spacing: var(--ff-tracking-wide);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.woocommerce ul.products li.product .added_to_cart {
	margin-block-start: var(--ff-space-2);
	font-size: var(--ff-text-sm);
}

/* ---------------------------------------------------------------- Prices */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ff-color-price);
}

.woocommerce ul.products li.product .price {
	margin-block-end: var(--ff-space-3);
	font-size: var(--ff-text-sm);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: var(--ff-text-xl);
}

.woocommerce .price del {
	color: var(--ff-color-text-muted);
	opacity: 1;
}

.woocommerce .price ins {
	color: var(--ff-color-price-sale);
	font-weight: var(--ff-weight-strong);
	text-decoration: none;
}

.woocommerce ul.products li.product .price .from {
	color: var(--ff-color-text-muted);
}

/* ---------------------------------------------------------------- Sale and stock labels */

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.ff-stock-badge {
	position: absolute;
	top: auto;
	right: auto;
	left: auto;
	inset-block-start: var(--ff-space-3);
	inset-inline-start: var(--ff-space-3);
	z-index: 9;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--ff-space-1) var(--ff-space-3);
	border-radius: var(--ff-radius-pill);
	background: var(--ff-color-sale-bg);
	color: var(--ff-color-sale-text);
	font-size: var(--ff-text-xs);
	font-weight: 700;
	letter-spacing: var(--ff-tracking-wide);
	line-height: 1.5;
	text-transform: uppercase;
}

/* Inside a product card the labels sit on the image, which is inset by the card padding. */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .ff-stock-badge {
	inset-block-start: calc(var(--ff-card-padding, 0px) + var(--ff-space-2));
	inset-inline-start: calc(var(--ff-card-padding, 0px) + var(--ff-space-2));
}

/* The out-of-stock label (inc/woocommerce.php) sits at the other corner, so it never covers the sale badge. */
.woocommerce ul.products li.product .ff-stock-badge,
.ff-stock-badge {
	inset-inline-start: auto;
	inset-inline-end: calc(var(--ff-card-padding, 0px) + var(--ff-space-2));
	background: var(--ff-color-soldout-bg);
	color: var(--ff-color-soldout-text);
}

/* Narrow cards have no room for both labels side by side: a product on sale and out of stock gets them stacked. */
@media (max-width: 959.98px) {
	.woocommerce ul.products li.product:has(.onsale) .ff-stock-badge {
		inset-block-start: calc(var(--ff-card-padding, 0px) + var(--ff-space-2) + 1.75rem);
		inset-inline-start: calc(var(--ff-card-padding, 0px) + var(--ff-space-2));
		inset-inline-end: auto;
	}
}

/* ---------------------------------------------------------------- Buttons */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ff-tap-target);
	padding: var(--ff-space-3) var(--ff-space-5);
	border: var(--ff-border-width) solid var(--ff-color-button-bg);
	border-radius: var(--ff-radius-button);
	background-color: var(--ff-color-button-bg);
	color: var(--ff-color-button-text);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-strong);
	letter-spacing: var(--ff-tracking-wide);
	line-height: var(--ff-leading-tight);
	text-transform: uppercase;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	border-color: var(--ff-color-button-bg-hover);
	background-color: var(--ff-color-button-bg-hover);
	color: var(--ff-color-button-text);
}

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
	border-color: var(--ff-color-button-bg);
	background-color: var(--ff-color-button-bg);
	color: var(--ff-color-button-text);
	opacity: 0.5;
}

/* Block-based cart and checkout (WooCommerce Blocks). */
.wc-block-components-button:not(.is-link) {
	border-radius: var(--ff-radius-button);
	background-color: var(--ff-color-button-bg);
	color: var(--ff-color-button-text);
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--ff-color-button-bg-hover);
	color: var(--ff-color-button-text);
}

/* ---------------------------------------------------------------- Notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--ff-color-info);
	background-color: var(--ff-color-notice-bg);
	color: var(--ff-color-text);
}

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

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

.woocommerce-message::before {
	color: var(--ff-color-success);
}

.woocommerce-info::before {
	color: var(--ff-color-info);
}

.woocommerce-error::before {
	color: var(--ff-color-error);
}

.woocommerce-store-notice,
p.demo_store {
	background-color: var(--ff-color-primary);
	color: var(--ff-color-button-text);
}

/* ---------------------------------------------------------------- Shop page header, ordering, breadcrumbs */

.woocommerce .woocommerce-breadcrumb {
	margin-block-end: var(--ff-space-6);
	color: var(--ff-color-text-muted);
	font-size: var(--ff-text-sm);
}

.woocommerce .woocommerce-breadcrumb a {
	color: inherit;
}

.woocommerce-products-header__title.page-title {
	margin-block-end: var(--ff-space-4);
	font-size: var(--ff-text-3xl);
}

.woocommerce .woocommerce-result-count {
	color: var(--ff-color-text-muted);
	font-size: var(--ff-text-sm);
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border-color: var(--ff-color-border);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--ff-color-button-bg);
	color: var(--ff-color-button-text);
}

/* ---------------------------------------------------------------- Single product */

.woocommerce div.product .product_title {
	font-size: var(--ff-text-3xl);
}

.woocommerce div.product form.cart .variations select {
	min-width: 12rem;
}

.woocommerce div.product form.cart .reset_variations {
	color: var(--ff-color-text-muted);
	font-size: var(--ff-text-sm);
}

/* Stock availability (simple products and the selected variation). */
.woocommerce div.product .stock {
	color: var(--ff-color-success);
}

.woocommerce div.product .stock.out-of-stock {
	display: inline-block;
	padding: var(--ff-space-1) var(--ff-space-3);
	border-radius: var(--ff-radius-pill);
	background: var(--ff-color-soldout-bg);
	color: var(--ff-color-soldout-text);
	font-size: var(--ff-text-xs);
	font-weight: 700;
	letter-spacing: var(--ff-tracking-wide);
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel {
	color: var(--ff-color-text);
}

.woocommerce div.product .product_meta {
	color: var(--ff-color-text-muted);
	font-size: var(--ff-text-sm);
}

/* Gallery zoom button: WooCommerce draws the magnifier with fixed white and black. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	background: var(--ff-color-card);
	box-shadow: var(--ff-shadow-sm);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
	border-color: var(--ff-color-text);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	background: var(--ff-color-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	box-shadow: 2px 2px 0 var(--ff-color-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	box-shadow: -2px 2px 0 var(--ff-color-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--ff-color-background);
	border-bottom-color: var(--ff-color-background);
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	border-color: var(--ff-color-border);
}

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

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--ff-color-accent);
}

/* ---------------------------------------------------------------- Forms */

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
	min-height: var(--ff-tap-target);
	border: var(--ff-border-width) solid var(--ff-color-border);
	border-radius: var(--ff-radius-sm);
	background-color: var(--ff-color-input-bg);
	color: var(--ff-color-text);
}

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

.woocommerce form .form-row .required {
	color: var(--ff-color-error);
}

/* ---------------------------------------------------------------- Tables (classic cart, checkout review, attributes) */

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_attributes,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-color: var(--ff-color-border);
}

.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th,
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th {
	border-top-color: var(--ff-color-border);
}

.woocommerce table.shop_attributes tr:nth-child(2n) td,
.woocommerce table.shop_attributes tr:nth-child(2n) th,
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
	background-color: var(--ff-color-row-alt);
}

/* Classic cart: remove link and coupon field. WooCommerce marks the remove link colors !important. */
.woocommerce a.remove {
	color: var(--ff-color-error) !important; /* Overrides WooCommerce's own !important. */
}

.woocommerce a.remove:hover {
	background: var(--ff-color-error);
	color: var(--ff-color-on-status) !important; /* Overrides WooCommerce's own !important. */
}

.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
	min-height: var(--ff-tap-target);
	border-color: var(--ff-color-border);
	border-radius: var(--ff-radius-sm);
	background-color: var(--ff-color-input-bg);
	color: var(--ff-color-text);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-card);
}

/* Classic checkout: payment methods box. */
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
#add_payment_method #payment {
	background: var(--ff-color-surface);
	color: var(--ff-color-text);
}

.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods,
#add_payment_method #payment ul.payment_methods {
	border-bottom-color: var(--ff-color-border);
}

.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
#add_payment_method #payment div.payment_box {
	background-color: var(--ff-color-card);
	color: var(--ff-color-text);
}

.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::before {
	border-bottom-color: var(--ff-color-card);
}

/* Country and state drop-downs (select2). */
.woocommerce .select2-container .select2-selection,
.select2-container--default .select2-selection--single {
	min-height: var(--ff-tap-target);
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-input-bg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ff-color-text);
}

.select2-dropdown {
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-card);
	color: var(--ff-color-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--ff-color-button-bg);
	color: var(--ff-color-button-text);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--ff-space-8);
	padding: 0;
	border-block-start: var(--ff-border-width) solid var(--ff-color-border);
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--ff-space-3) var(--ff-space-3);
	border-block-end: var(--ff-border-width) solid var(--ff-color-border);
	color: var(--ff-color-text);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ff-color-row-alt);
	color: var(--ff-color-link-hover);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	box-shadow: inset 3px 0 0 var(--ff-color-accent);
	font-weight: var(--ff-weight-strong);
}

[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	box-shadow: inset -3px 0 0 var(--ff-color-accent);
}

/* ---------------------------------------------------------------- Block-based cart and checkout (WooCommerce Blocks) */

body .wc-block-components-text-input input[type],
body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-input-bg);
	color: var(--ff-color-text);
}

body .wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: var(--ff-color-input-bg);
}

/* Item count bubble in the checkout order summary (WooCommerce draws it in the text color with white digits). */
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	border-color: var(--ff-color-card);
	background: var(--ff-color-button-bg);
	color: var(--ff-color-button-text);
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: inherit;
}

body .wc-block-components-text-input input[type]:focus,
body .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body .wc-block-components-textarea:focus,
body .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--ff-color-primary);
}

/*
 * Invalid fields. WooCommerce draws their borders, labels and focus glow in its own fixed red, and its hover and
 * active rules outrank a plain override, so every state is listed here.
 */
body .wc-block-components-text-input.has-error input[type],
body .wc-block-components-text-input.has-error input[type]:hover,
body .wc-block-components-text-input.has-error input[type]:active,
body .wc-block-components-text-input.has-error input[type]:focus,
body .wc-block-components-text-input.has-error input[type]:focus-within,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__container,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__select,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__select:hover,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"],
body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"]:hover,
body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"]:active,
body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"]:focus {
	border-color: var(--ff-color-error);
}

body .wc-block-components-text-input.has-error input[type]:focus,
body .wc-block-components-text-input.has-error input[type]:focus-within {
	box-shadow: 0 0 0 0.5px var(--ff-color-error);
}

body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"]:focus {
	outline-color: var(--ff-color-error);
}

body .wc-block-components-text-input.has-error label,
body .wc-block-components-form .wc-block-components-text-input.has-error label,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__label,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-checkbox.has-error,
body .wc-block-components-checkbox.has-error a,
body .wc-block-components-validation-error {
	color: var(--ff-color-error);
}

body .has-error .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--ff-color-error);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
body .wc-block-components-radio-control__input {
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-input-bg);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
body .wc-block-components-radio-control__input:checked {
	border-color: var(--ff-color-control);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--ff-color-control);
}

body .wc-block-components-radio-control__input:checked::before {
	background: var(--ff-color-control);
}

body .wc-block-components-quantity-selector {
	border-color: var(--ff-color-border);
	background-color: var(--ff-color-input-bg);
}

body .wc-block-components-quantity-selector::after {
	border-color: var(--ff-color-border);
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input,
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--ff-color-text);
}

body .wc-block-components-product-badge,
body .wc-block-components-product-sale-badge,
body .wc-block-grid__product-onsale {
	border-color: var(--ff-color-sale-bg);
	background: var(--ff-color-sale-bg);
	color: var(--ff-color-sale-text);
}

body .wc-block-components-product-badge:not(.wc-block-components-sale-badge) {
	border-color: var(--ff-color-border);
	background: var(--ff-color-surface);
	color: var(--ff-color-text);
}

body .wc-block-components-product-price__value.is-discounted,
body .wc-block-components-formatted-money-amount.wc-block-components-product-price__value.is-discounted {
	color: var(--ff-color-price-sale);
}

body .wc-block-components-product-price del,
body .wc-block-components-product-price__regular {
	color: var(--ff-color-text-muted);
}

body .wc-block-components-notice-banner {
	border-color: var(--ff-color-info);
	background-color: var(--ff-color-notice-bg);
	color: var(--ff-color-text);
}

body .wc-block-components-notice-banner > svg {
	background-color: var(--ff-color-info);
	fill: var(--ff-color-on-status);
}

body .wc-block-components-notice-banner.is-success {
	border-color: var(--ff-color-success);
	background-color: var(--ff-color-success-bg);
}

body .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--ff-color-success);
}

body .wc-block-components-notice-banner.is-error {
	border-color: var(--ff-color-error);
	background-color: var(--ff-color-error-bg);
}

body .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--ff-color-error);
}

body .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	color: var(--ff-color-text);
}

/* Cart, checkout and account pages are regular pages: give their content the full container width. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .ff-entry-header,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .ff-entry-content {
	max-width: none;
}

/* ---------------------------------------------------------------- Shop: toolbar, filters, empty results */

.ff-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-space-3) var(--ff-space-4);
	margin-block-end: var(--ff-space-6);
}

.woocommerce .ff-shop-toolbar .woocommerce-result-count,
.woocommerce .ff-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	max-width: 100%;
	min-height: var(--ff-tap-target);
}

.woocommerce .term-description,
.woocommerce .page-description {
	max-width: var(--ff-content-max);
	margin-block-end: var(--ff-space-6);
	color: var(--ff-color-text-muted);
}

.ff-no-products {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ff-space-3);
	margin-block: var(--ff-space-6) var(--ff-space-10);
}

.ff-no-products .woocommerce-product-search {
	flex: 1 1 18rem;
}

/* "Shop filters" widget area: a column beside the products on desktop, a panel behind a button on smaller screens. */
.ff-shop-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-6);
}

.ff-shop-content {
	min-width: 0;
}

.ff-shop-filters__toggle {
	display: none;
}

.ff-filter-widget + .ff-filter-widget {
	margin-block-start: var(--ff-space-6);
	padding-block-start: var(--ff-space-6);
	border-block-start: var(--ff-border-width) solid var(--ff-color-border);
}

.ff-filter-widget__title,
.ff-filter-widget .wp-block-heading {
	margin-block-end: var(--ff-space-3);
	font-family: var(--ff-font-body);
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-strong);
	letter-spacing: var(--ff-tracking-wide);
	text-transform: uppercase;
}

.ff-filter-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-filter-widget li {
	padding-block: var(--ff-space-1);
}

.ff-filter-widget a {
	color: var(--ff-color-text);
}

/*
 * Active Filters block: the buttons that remove a filter. WooCommerce draws them in fixed grays at 16px; here they
 * use the palette and are 24px, the minimum target size in WCAG 2.2. Hover and focus invert the colors.
 */
body .wc-block-active-filters .wc-block-active-filters__list-item-remove,
body .wc-block-active-filters .wc-block-components-chip__remove {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: middle;
	background: var(--ff-color-border);
	color: var(--ff-color-text);
}

body .wc-block-active-filters .wc-block-active-filters__list-item-remove:hover,
body .wc-block-active-filters .wc-block-active-filters__list-item-remove:focus,
body .wc-block-active-filters .wc-block-components-chip__remove:hover,
body .wc-block-active-filters .wc-block-components-chip__remove:focus,
body .wc-block-active-filters button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
body .wc-block-active-filters button.wc-block-components-chip:focus > .wc-block-components-chip__remove {
	background: var(--ff-color-text);
	color: var(--ff-color-background);
}

body .wc-block-active-filters .wc-block-active-filters__list-item-remove:disabled,
body .wc-block-active-filters .wc-block-components-chip__remove:disabled {
	background: var(--ff-color-border);
	color: var(--ff-color-text-muted);
}

body .wc-block-active-filters .wc-block-active-filters__list-item-remove .wc-block-components-chip__remove-icon,
body .wc-block-active-filters .wc-block-active-filters__list-item-remove:hover .wc-block-components-chip__remove-icon,
body .wc-block-active-filters .wc-block-active-filters__list-item-remove:focus .wc-block-components-chip__remove-icon,
body .wc-block-active-filters .wc-block-components-chip__remove .wc-block-components-chip__remove-icon,
body .wc-block-active-filters .wc-block-components-chip__remove:hover .wc-block-components-chip__remove-icon,
body .wc-block-active-filters .wc-block-components-chip__remove:focus .wc-block-components-chip__remove-icon,
body .wc-block-active-filters button.wc-block-components-chip:hover > .wc-block-components-chip__remove .wc-block-components-chip__remove-icon,
body .wc-block-active-filters button.wc-block-components-chip:focus > .wc-block-components-chip__remove .wc-block-components-chip__remove-icon {
	fill: currentColor;
}

/* WooCommerce price filter slider. */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--ff-color-border);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--ff-color-button-bg);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
	outline: 2px solid var(--ff-color-focus);
	outline-offset: 2px;
}

.woocommerce .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-space-2);
	font-size: var(--ff-text-sm);
}

@media (max-width: 959.98px) {
	.js .ff-shop-filters__toggle {
		display: inline-flex;
	}

	.js .ff-shop-filters__panel:not(.is-open) {
		display: none;
	}

	.ff-shop-filters__panel {
		margin-block-start: var(--ff-space-3);
		padding: var(--ff-space-4);
		border: var(--ff-border-width) solid var(--ff-color-card-border);
		border-radius: var(--ff-radius-md);
		background: var(--ff-color-card);
	}
}

@media (min-width: 960px) {
	.ff-shop-layout {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: var(--ff-space-10);
	}
}

/* ---------------------------------------------------------------- Single product */

/* Gallery and summary side by side from tablet width; tabs, related and up-sell products below. */
@media (min-width: 768px) {
	.single-product div.product.type-product {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--ff-space-10) clamp(var(--ff-space-8), 4vw, var(--ff-space-16));
	}

	.single-product div.product.type-product > * {
		grid-column: 1 / -1;
	}

	.single-product div.product.type-product > div.images,
	.single-product div.product.type-product > div.summary {
		float: none;
		width: auto;
		margin: 0;
	}

	.single-product div.product.type-product > div.images {
		grid-column: 1;
	}

	.single-product div.product.type-product > div.summary {
		grid-column: 2;
	}
}

.woocommerce div.product div.images img {
	border-radius: var(--ff-radius-md);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ff-space-2);
	margin-block-start: var(--ff-space-2);
}

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

.woocommerce div.product .summary > * + * {
	margin-block-start: var(--ff-space-4);
}

.woocommerce div.product .product_title {
	margin-block-end: 0;
	overflow-wrap: break-word;
}

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

/* Variation selectors: label above a full-width select, so long option names and RTL text fit. */
.woocommerce div.product form.cart .variations {
	margin-block-end: var(--ff-space-4);
	border: 0;
}

.woocommerce div.product form.cart .variations tr {
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-1);
	margin-block-end: var(--ff-space-3);
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	padding: 0;
	border: 0;
	line-height: var(--ff-leading-body);
	text-align: start;
}

.woocommerce div.product form.cart .variations label {
	font-size: var(--ff-text-sm);
	letter-spacing: var(--ff-tracking-wide);
	text-transform: uppercase;
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 22rem;
	min-width: 0;
	margin: 0;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-block-start: var(--ff-space-2);
}

.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-availability {
	margin-block-end: var(--ff-space-3);
}

/* Quantity and add to cart on one row (simple products and the selected variation). */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ff-space-3);
}

.woocommerce div.product form.cart:not(.variations_form)::before,
.woocommerce div.product form.cart:not(.variations_form)::after {
	content: none;
}

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

.woocommerce div.product form.cart .quantity .qty {
	width: 5rem;
	min-height: 3.25rem;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3.25rem;
	float: none;
	font-size: var(--ff-text-base);
}

.woocommerce div.product .product_meta {
	padding-block-start: var(--ff-space-4);
	border-block-start: var(--ff-border-width) solid var(--ff-color-border);
}

.woocommerce div.product .product_meta > span {
	display: block;
}

.woocommerce div.product .product_meta a {
	color: var(--ff-color-link);
}

/* Tabs as an underlined row (WooCommerce's markup and script are unchanged). */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--ff-space-6);
	margin: 0 0 var(--ff-space-6);
	padding: 0;
	overflow-x: auto;
	border-block-end: var(--ff-border-width) solid var(--ff-color-border);
}

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: var(--ff-space-3) 0;
	color: var(--ff-color-text-muted);
	font-weight: var(--ff-weight-strong);
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	box-shadow: inset 0 -2px 0 var(--ff-color-accent);
	color: var(--ff-color-text);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	font-size: var(--ff-text-xl);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	margin-block-end: var(--ff-space-6);
	font-size: var(--ff-text-2xl);
}

/* ---------------------------------------------------------------- Cart, checkout and account panels */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--ff-radius-sm);
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
body .wp-block-woocommerce-cart-totals-block {
	padding: var(--ff-space-5);
	border: var(--ff-border-width) solid var(--ff-color-card-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-color-card);
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-size: var(--ff-text-xl);
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff-space-2);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
	margin-block-start: 0;
}

/*
 * Block cart rows on narrow screens. WooCommerce lays each row out as a grid with fixed 80px 132px columns and
 * puts the line total in an extra implicit column, so rows overflow the screen below about 360px. Flexible
 * columns keep image, product and total within the width.
 */
body .wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 80px minmax(0, 1fr) auto;
}

body .wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2 / 3;
	min-width: 0;
}

body .wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3;
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	flex-wrap: wrap;
	row-gap: var(--ff-space-2);
}

@media (max-width: 399.98px) {
	body .wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		column-gap: var(--ff-space-3);
	}

	body .wc-block-cart:is(.is-medium, .is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-right: 0;
		padding-left: 0;
	}
}