/*
 * --------------------------------------------------------
 *  WooCommerce
 * --------------------------------------------------------
 */

/*
 * --------------------------------------------------------
 *  All of our variables.
 *  These could probably live in theme.json at some point.
 * --------------------------------------------------------
 */

.woocommerce,
.woocommerce-page {
	--wc--gap: var(--wp--style--block-gap, 1rem);

	--wc--spacing--sm: var(--wp--custom--spacing--small);
	--wc--spacing--md: var(--wp--custom--spacing--medium);
	--wc--spacing--lg: var(--wp--custom--spacing--large);
	--wc--spacing--outer: var(--wp--custom--spacing--outer);

	--wc--z-index-xs: -1;
	--wc--z-index-sm: 1;
	--wc--z-index-md: 5;
	--wc--z-index-lg: 10;
	--wc--z-index-xl: 20;
	--wc--z-index-xxl: 25;
	--wc--z-index-xxxl: 30;

	--wc--button--background--static: var(--wp--custom--elements--button--color--background);
	--wc--button--color--static: var(--wp--custom--elements--button--color--text);

	--wc--button--background--interactive: var(--wp--custom--elements--button--color--text);
	--wc--button--color--interactive: var(--wp--custom--elements--button--color--background);

	--wc--button--border--color: var(--wp--custom--elements--button--border--color, currentColor);

	--wc--button--border--style: var(--wp--custom--elements--button--border--style, solid);

	--wc--button--border--width: var(--wp--custom--elements--button--border--width, 1px);

	--wc--button--border--radius-bottom-left: var(--wp--custom--elements--button--border--radius--bottom-left, 0);
	--wc--button--border--radius-bottom-right: var(--wp--custom--elements--button--border--radius--bottom-right, 0);
	--wc--button--border--radius-top-left: var(--wp--custom--elements--button--border--radius--top-left, 0);
	--wc--button--border--radius-top-right: var(--wp--custom--elements--button--border--radius--top-right, 0);
	--wc--button--border--radius: var(--wc--button--border--radius-top-left) var(--wc--button--border--radius-top-right) var(--wc--button--border--radius-bottom-right) var(--wc--button--border--radius-bottom-left);

	--wc--button--typography--font-family: var(--wp--custom--elements--button--typography--font-family, inherit);
	--wc--button--typograhpy--font-size: var(--wp--custom--elements--button--typography--font-size, inherit);
	--wc--button--typography--font-weight: var(--wp--custom--elements--button--typography--font-weight, 400);
	--wc--button--typography--letter-spacing: var(--wp--custom--elements--button--typography--letter-spacing, 0);
	--wc--button--typography--line-height: var(--wp--custom--elements--button--typography--line-height, 1);
	--wc--button--typography--text-align: center;
	--wc--button--typography--text-transform: var(--wp--custom--elements--button--typography--text-transform, none);

	--wc--button--padding--bottom: var(--wp--custom--elements--button--spacing--padding--bottom, 1.1rem);
	--wc--button--padding--left: var(--wp--custom--elements--button--spacing--padding--left, 2rem);
	--wc--button--padding--right: var(--wp--custom--elements--button--spacing--padding--right, 2rem);
	--wc--button--padding--top: var(--wp--custom--elements--button--spacing--padding--top, 1.1rem);
	--wc--button--padding: var(--wc--button--padding--top) var(--wc--button--padding--right) var(--wc--button--padding--bottom) var(--wc--button--padding--left);

	--wc--pagination--current--typography--font-weight: var(--wp--custom--typography--font-weight--bold, 700);

	--wc--preset--color--alt: var(--wp--preset--color--foreground);

	--wc--tabs--color--text--static: var(--wp--preset--color--foreground);
	--wc--tabs--color--background--static: var(--wp--preset--color--tertiary);
}

/*
 * --------------------------------------------------------
 *  Products lists
 * --------------------------------------------------------
 */

.woocommerce .products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	margin-top: var(--wc--gap);
	text-align: center;
}

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

.woocommerce .product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--large);
}

.woocommerce .product .price {
	font-size: var(--wp--preset--font-size--medium);
}

.woocommerce .price ins,
.woocommerce .price bdi {
	text-decoration: none;
}

.woocommerce .add_to_cart_button.loading {
	opacity: 0.5;
}

.woocommerce a.added_to_cart {
	display: block;
	margin-top: 0.2rem;
}

/*
 * --------------------------------------------------------
 *  Buttons, buttons, buttons.
 * --------------------------------------------------------
 */

.woocommerce :is(button.alt, .button, button.button.alt),
.wc-block-components-button:not(.is-link).contained,
.woocommerce #respond input#submit,
.woocommerce button.button.alt.disabled {
	background-color: var(--wc--button--background--static);
	border-color: var(--wc--button--border--color);
	border-radius: var(--wc--button--border--radius);
	border-style: var(--wc--button--border--style);
	border-width: var(--wc--button--border--width);
	color: var(--wc--button--color--static);
	font-family: var(--wc--button--typography--font-family);
	font-size: var(--wc--button--typograhpy--font-size);
	font-weight: var(--wc--button--typography--font-weight);
	letter-spacing: var(--wc--button--typography--letter-spacing);
	line-height: var(--wc--button--typography--line-height);
	padding: var(--wc--button--padding);
	text-align: var(--wc--button--typography--text-align);
	text-transform: var(--wc--button--typography--text-transform);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--wc--button--background--interactive);
	color: var(--wc--button--color--interactive);
}

/*
 * --------------------------------------------------------
 *  Breadcrumbs
 * --------------------------------------------------------
 */

.woocommerce .woocommerce-breadcrumb,
 .woocommerce .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

/*
 * --------------------------------------------------------
 *  Pagination
 * --------------------------------------------------------
 */

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	font-weight: var(--wc--pagination--current--typography--font-weight);
}

/*
 * --------------------------------------------------------
 *  Shop page
 * --------------------------------------------------------
 */

.woocommerce-ordering .orderby {
	padding: 0.3rem 0 0.3rem 0.5rem;
}

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

.single-product .summary .product_title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.woocommerce div.product form.cart .button {
	width: 100%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wc--tabs--color--text--static);
	opacity: 0.7;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--wc--tabs--color--background--static);
	border-color: var(--wc--preset--color--alt);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	border-color: var(--wc--preset--color--alt);
	box-shadow: none;
}

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	opacity: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: currentColor;
	opacity: 1;
}

.woocommerce-Tabs-panel h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.single-product .related {
	margin-bottom: var(--wp--custom--spacing--large);
	margin-top: var(--wp--custom--spacing--large);
}

.single-product .related h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-bottom: 0;
}

/*
 * --------------------------------------------------------
 *  Colors, colors, colors.
 * --------------------------------------------------------
 */

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

.woocommerce span.onsale {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: transparent;
	color: var(--wc--preset--color--alt);
}

.wc-block-components-product-badge {
	color: var(--wp--preset--color--secondary);
}

.wc-block-components-checkout-return-to-cart-button svg {
	fill: currentColor;
}

/*
 * --------------------------------------------------------
 *  Quantity picker.
 * --------------------------------------------------------
 */

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin-bottom: var(--wc--gap);
	margin-right: 0;
}

.quantity .qty {
	color: currentColor;
	font-size: 1.4rem;
	height: 100%;
	text-align: center;
	background-color: transparent;
	border-color: currentColor;
	border-style: solid;
	padding: 0.3rem 0.5rem;
}