/*
 * Shop layer (WooCommerce, docs/shop.md): a thin layer over WooCommerce's own stylesheets, loaded wherever WooCommerce
 * loads its general stylesheet (inc/shop/core.php). It binds WooCommerce's variables to the theme's tokens and recolours
 * the few rules WooCommerce writes with fixed colours; each selector has the same specificity as WooCommerce's and wins
 * by coming later. Buttons share the theme's .myco-button rules in layout.css. One section per area.
 */

/* Variables */
:root {
	--wc-red: var(--myco-color-danger);
	--wc-destructive: var(--myco-color-danger);
	--wc-green: var(--myco-color-success);
	--wc-form-border-color: var(--myco-color-border);
	--wc-separator-color: var(--myco-color-border);
	--wc-form-border-radius: var(--myco-radius-sm);
	--wc-card-border-radius: var(--myco-radius-md);
	--wc-form-color-background: var(--myco-color-bg);
	--wc-form-color-text: var(--myco-color-text);
	--wc-primary: var(--myco-color-primary);
	--wc-primary-text: var(--myco-color-white);
	--wc-secondary: var(--myco-color-surface);
	--wc-secondary-text: var(--myco-color-text);
	--wc-highlight: var(--myco-color-primary);
	--wc-highligh-text: var(--myco-color-white);
	--wc-content-bg: var(--myco-color-bg);
	--wc-subtext: var(--myco-color-muted);
}

/* Notices (every page: a shortcode or the store notice may print them) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--myco-color-primary);
	background-color: var(--myco-color-surface);
	color: var(--myco-color-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--myco-color-primary);
}

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

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

.woocommerce-store-notice,
p.demo_store {
	background-color: var(--myco-color-primary);
	color: var(--myco-color-white);
}

/* Archive */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background-color: var(--myco-color-primary);
}

/* Result count and sorting: one row (WooCommerce's floats), stacked at WooCommerce's small-screen width. */
@media (max-width: 768px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
	}
}

/* Card */
.woocommerce ul.products li.product .price {
	color: var(--myco-color-text);
}

.woocommerce span.onsale {
	background-color: var(--myco-color-primary);
	color: var(--myco-color-white);
}

/* Product */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--myco-color-text);
}

.woocommerce div.product .stock:not(.out-of-stock) {
	color: var(--myco-color-success);
}

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

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--myco-color-border);
}

/* The corners' shadows take the tab's own background (WooCommerce draws them with its fixed colours). */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	box-shadow: 2px 2px 0 var(--myco-color-surface);
}

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

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

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

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

/* Cart, Checkout, Account: full container width instead of the reading column of page.php */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
	--myco-container-content: var(--myco-container);
}

/* Checkout (and the account's "Add payment method", which shows the same payment box) */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: var(--myco-color-surface);
	border-radius: var(--myco-radius-md);
}

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

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

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--myco-space-md) 0;
}

/* Account */
.woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--myco-space-lg);
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	padding-block: var(--myco-space-2xs);
	border-bottom: 1px solid var(--myco-color-border);
}

.woocommerce-MyAccount-navigation .is-active a {
	font-weight: 600;
	text-decoration: none;
}