/*
 * WooCommerce pages: shop, category, product, basket, checkout and account.
 *
 * WooCommerce 7+ draws its buttons, prices and form fields from a set of
 * custom properties (--wc-primary and friends). Pointing those at the theme's
 * tokens re-colours every WooCommerce element at once, in either design,
 * without fighting WooCommerce's selectors. The rules after that only shape
 * things to match the theme's own buttons and fields.
 */
:root {
	--woocommerce:             var(--c-accent);
	--wc-primary:              var(--c-accent);
	--wc-primary-text:         var(--c-onAccent);
	--wc-secondary:            var(--c-band);
	--wc-secondary-text:       var(--c-text);
	--wc-highlight:            var(--c-primary);
	--wc-highligh-text:        var(--c-onAccent);   /* sic: WooCommerce's own spelling */
	--wc-content-bg:           var(--c-surface);
	--wc-subtext:              var(--c-muted);
	--wc-separator-color:      var(--c-line);
	--wc-form-border-color:    var(--c-line);
	--wc-form-border-radius:   var(--r-sm);
	--wc-form-border-width:    var(--stroke-str);
	--wc-form-color-background: var(--c-surface);
	--wc-form-color-text:      var(--c-text);
	--wc-card-border-radius:   var(--r-md);
}

.ofc-shop { padding-block: var(--s-4) var(--s-6); }

/* The basket, checkout and account are ordinary pages, whose text column is
   sized for reading. Their tables and forms need the full width. */
.woocommerce-cart .ofc-prose,
.woocommerce-checkout .ofc-prose,
.woocommerce-account .ofc-prose { max-width: none; }

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

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border-radius: var(--r-sm);
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
	background: var(--c-accent);
	color: var(--c-onAccent);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: color-mix(in srgb, var(--c-accent) 86%, black);
	color: var(--c-onAccent);
}

/* ------------------------------------------------------ fields and quantity */

.woocommerce .quantity .qty {
	width: 4.5em;
	min-height: 48px;
	padding: 0 0.5em;
	border: var(--stroke-str) solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	font: inherit;
	text-align: center;
}
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}
.woocommerce div.product form.cart .button { float: none; margin: 0; }
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce #coupon_code {
	min-height: 48px;
	padding: 0.625rem 0.875rem;
	border: var(--stroke-str) solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	font: inherit;
}
.woocommerce form .form-row textarea.input-text { min-height: 7.5em; }
.woocommerce form .form-row label { font-weight: 600; }

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

.woocommerce div.product .product_title { font-family: var(--f-head); color: var(--c-primary); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--c-primary); font-size: var(--t-lg); font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--c-surface); }
.woocommerce span.onsale { background: var(--c-accent); color: var(--c-onAccent); }

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--c-accent);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--c-accent); }

/* --------------------------------------------------- basket and checkout */

.woocommerce table.shop_table {
	border-color: var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--c-line); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 { font-family: var(--f-head); color: var(--c-primary); }
.woocommerce-checkout #payment {
	border-radius: var(--r-md);
	background: var(--c-band);
}