/**
 * WooCommerce finish.
 *
 * Loaded only while WooCommerce is active (inc/enqueue.php). Pinbin does not
 * declare WooCommerce support or override its templates; this only brings
 * WooCommerce's own colours and buttons in line with the theme, and with its
 * dark mode. The selectors mirror WooCommerce's specificity and the file loads
 * after woocommerce.css, so they win without !important.
 */

/* WooCommerce reads these custom properties for most of its colours. */
body {
	--wc-primary: var(--pinbin-ink);
	--wc-primary-text: var(--pinbin-canvas);
	--wc-secondary: var(--pinbin-surface-alt);
	--wc-secondary-text: var(--pinbin-ink);
	--wc-highlight: var(--pinbin-accent);
	--wc-highligh-text: var(--pinbin-canvas);
	--wc-content-bg: var(--pinbin-surface);
	--wc-subtext: var(--pinbin-muted);
	--wc-form-border-color: var(--pinbin-rule);
}

/* Prices were WooCommerce's hard-coded #958e09, which fails WCAG AA
   contrast on the white card (3.4:1). */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--pinbin-ink);
}

.woocommerce span.onsale {
	background-color: var(--pinbin-accent);
	color: var(--pinbin-canvas);
}

/* Buttons: the theme's ink pill instead of WooCommerce's grey and purple. */
.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 {
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background-color: var(--pinbin-ink);
	color: var(--pinbin-canvas);
	font-weight: 500;
	line-height: 1.2;
}

.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 {
	background-color: var(--pinbin-accent);
	color: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--pinbin-ink);
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

.woocommerce .quantity .qty {
	width: 4.5em;
}

/* Product tabs: WooCommerce paints them with fixed light greys and white,
   which turns into a white slab on the dark scheme. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.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(--pinbin-rule);
}

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

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--pinbin-ink);
}

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

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

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

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