/*
 * --------------------------------------------------------
 *  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,
		2px
	);

	--wc--button--border--radius: var(
		--wp--custom--elements--button--border--radius
	);

	--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,
		1.15rem
	);
	--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.384
	);
	--wc--button--typography--text-align: center;
	--wc--button--typography--text-transform: var(
		--wp--custom--elements--button--typography--text-transform,
		none
	);

	--wc--button--padding--bottom: calc(
		var(
				--wp--custom--elements--button--spacing--padding--bottom,
				calc(0.667em + 2px)
			) - 2px
	);
	--wc--button--padding--left: calc(
		var(
				--wp--custom--elements--button--spacing--padding--left,
				calc(1.333em + 2px)
			) - 2px
	);
	--wc--button--padding--right: calc(
		var(
				--wp--custom--elements--button--spacing--padding--right,
				calc(1.333em + 2px)
			) - 2px
	);
	--wc--button--padding--top: calc(
		var(
				--wp--custom--elements--button--spacing--padding--top,
				calc(0.667em + 2px)
			) - 2px
	);
	--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 {
	text-align: center;
}

.woocommerce .product a {
	text-decoration: none;
}
.woocommerce ul.products li.product a img {
	margin-bottom: 0.5rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--medium);
}

.woocommerce ul.products li.product .price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-bottom: 0;
}

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

.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.
 * --------------------------------------------------------
 */

 #add_payment_method .wc-proceed-to-checkout a.checkout-button, 
 .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, 
 .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
	font-size: var(	--wp--custom--elements--button--typography--font-size, 1.15rem );
}

.woocommerce-page .woocommerce-cart-form #coupon_code {
	flex: 1;
	flex-basis: 0;
}
.woocommerce-page .woocommerce-cart-form #coupon_code,
.woocommerce-page .woocommerce-cart-form .actions .button {
	font-size: var(--wp--preset--font-size--small);
	height: 100%;
}

.woocommerce ul.products li.product .button {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * --------------------------------------------------------
 *  Breadcrumbs
 * --------------------------------------------------------
 */
.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 0.5rem;
}
.woocommerce.single-product .woocommerce-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * --------------------------------------------------------
 *  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-products-header__title.page-title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-large);
}
.woocommerce-result-count {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce-ordering .orderby {
	font-size: var(--wp--preset--font-size--small);
	padding: calc(var(--wp--custom--elements--input--spacing--padding--top) / 1.5)
		0 calc(var(--wp--custom--elements--input--spacing--padding--bottom) / 1.5)
		calc(var(--wp--custom--elements--input--spacing--padding--left) / 1.5);
}

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

.woocommerce div.product {
	margin-top: var(--wp--preset--spacing--30);
}
.single-product .summary .product_title.entry-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 1rem;
}

.woocommerce div.product p.price {
	margin-top: 1rem;
	font-weight: 700;
}

.woocommerce
	div.product
	div.summary
	.woocommerce-product-details__short-description {
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce div.product div.summary .stock {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.woocommerce div.product form.cart .variations select {
	font-size: var(--wp--preset--font-size--small);
	height: 100%;
	padding: calc(var(--wp--custom--elements--input--spacing--padding--top) / 1.5)
		0 calc(var(--wp--custom--elements--input--spacing--padding--bottom) / 1.5)
		calc(var(--wp--custom--elements--input--spacing--padding--left) / 1.5);
}
.woocommerce table.variations {
	position: relative;
}
.woocommerce table.variations tr {
	margin-bottom: calc(var(--wp--preset--spacing--30) / 2);
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
	display: block;
	text-align: left;
}
.woocommerce div.product form.cart table.variations th {
	line-height: 2.5;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--wp--preset--font-size--small);
	position: absolute;
	right: 0;
	bottom: calc(100% - 40px);
}

.woocommerce div.product div.summary form.cart {
	margin-bottom: var(--wp--preset--spacing--50);
}

.woocommerce div.product .product_meta {
	display: flex;
	flex-direction: column;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce div.product .product_meta > * > * {
	font-weight: 400;
}

.woocommerce div.product .woocommerce-tabs {
	padding-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--60);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom: 2px solid var(--wp--preset--color--foreground);
	opacity: 0.2;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: transparent;
	border: none;
	border-bottom: solid 2px transparent;
	border-radius: 0;
}

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

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

.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: var(--wp--preset--color--foreground);
	opacity: 1;
}

.woocommerce-Tabs-panel h2 {
	font-size: var(--wp--preset--font-size--medium);
}
.woocommerce div.product .related.products {
	margin-top: var(--wp--preset--spacing--60);
}
.single-product .related {
	margin-bottom: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--30);
}

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

/*
 * --------------------------------------------------------
 *  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 div.product p.price del, .woocommerce div.product span.price del {
	opacity: 0.75;
}

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

.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;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td {
	border-color: rgb(153 153 153 / 30%);
}

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

.woocommerce div.product form.cart div.quantity {
	margin-right: 0;
}

.woocommerce .quantity .qty {
	color: currentColor;
	font-size: var(--wc--button--typograhpy--font-size);
	width: 100%;
	max-width: 120px;
	text-align: center;
	background-color: transparent;
	border-color: currentColor;
	border-style: solid;
	border-radius: var(--wp--custom--elements--input--border--radius);
	border-width: var(--wp--custom--elements--input--border--width);
	padding: var( --wp--custom--elements--input--spacing--padding--top, calc(0.667em + 2px) ) calc( var( --wp--custom--elements--input--spacing--padding--right, calc(1.333em + 2px) ) / 2 );

	padding: var(--wp--custom--elements--input--spacing--padding--top)
		var(--wp--custom--elements--input--spacing--padding--right)
		var(--wp--custom--elements--input--spacing--padding--bottom)
		var(--wp--custom--elements--input--spacing--padding--left);
}

/*
 * --------------------------------------------------------
 *  input
 * --------------------------------------------------------
 */

 .woocommerce-page .woocommerce-cart-form #coupon_code,
.woocommerce-page .input-text {
	border-color: var(--wp--custom--elements--input--border--color);
	border-radius: var(--wp--custom--elements--input--border--radius);
	border-width: var(--wp--custom--elements--input--border--width);
	box-sizing: border-box;
	display: block;
	font-size: var(--wp--custom--elements--input--typography--font-size);
	line-height: var(--wp--custom--elements--input--typography--line-height) !important;
	padding: var(--wp--custom--elements--input--spacing--padding--top)
		var(--wp--custom--elements--input--spacing--padding--right)
		var(--wp--custom--elements--input--spacing--padding--bottom)
		var(--wp--custom--elements--input--spacing--padding--left);
	width: 100%;
}

.woocommerce-page .input-text::placeholder { 
	color: var(--wp--preset--color--foreground);
	opacity: 0.75; 
  }
.select2-dropdown {
	background-color: var(--wp--preset--color--tertiary);
	color:  var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
}
.select2-container--default .select2-results__option[aria-selected=true], 
.select2-container--default .select2-results__option[data-selected=true] {
	background-color: var(--wp--preset--color--background);
}
.woocommerce form .form-row .select2-container .select2-selection--single {
	background-color: var(--wp--custom--elements--input--color--background);
	border-color: var(--wp--custom--elements--input--color--foreground);
	border-radius: var(--wp--custom--elements--input--border--radius);
	border-style: solid;
	border-width: var(--wp--custom--elements--input--border--width);
	color: currentColor;
	cursor: pointer;
	display: block;
	font-size: var(--wp--custom--elements--input--typography--font-size);
	line-height: var(--wp--custom--elements--input--typography--line-height) !important;
	height: auto;
	margin: 0;
	outline: 0;
	padding: var(--wp--custom--elements--input--spacing--padding--top) 
		var(--wp--custom--elements--input--spacing--padding--right)
		var(--wp--custom--elements--input--spacing--padding--bottom)
		var(--wp--custom--elements--input--spacing--padding--left);
}

.select2-container--default
	.select2-results__option--highlighted[aria-selected],
.select2-container--default
	.select2-results__option--highlighted[data-selected] {
		background-color: var(--wp--preset--color--primary);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color:  var(--wp--preset--color--foreground);
}

/*
 * --------------------------------------------------------
 *  Info and message
 * --------------------------------------------------------
 */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	padding: 1em 2em 1em 3.5em;
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--foreground);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border-color: var(--wp--preset--color--foreground);
}

/*
 * --------------------------------------------------------
 *  Checkout.
 * --------------------------------------------------------
 */

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background-color: var(--wp--preset--color--tertiary);
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}
#add_payment_method #payment div.payment_box p:last-child,
.woocommerce-cart #payment div.payment_box p:last-child,
.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-top: 0;
}
#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(--wp--preset--color--background);
}

.woocommerce-page ul.woocommerce-order-overview {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30)
	calc(var(--wp--preset--spacing--30) / 2);
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
	border-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--foreground);
}

/*
 * --------------------------------------------------------
 *  My Account.
 * --------------------------------------------------------
 */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--30) / 4);
}
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
	background-color: var(--wp--preset--color--tertiary);
	padding: calc(var(--wp--preset--spacing--30) / 2)
		calc(var(--wp--preset--spacing--30) / 1.5);
	border-radius: var(--wp--custom--elements--input--border--radius);
	font-size: var(--wp--preset--font-size--small);
	display: block;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 66%;
}

.woocommerce-account .addresses .title h3 {
	margin-top: calc(var(--wp--preset--spacing--30) / 2);
	font-size: var(--wp--preset--font-size--medium);
}
.woocommerce-account .addresses .title a {
	font-size: var(--wp--preset--font-size--small);
	margin-top: calc(var(--wp--preset--spacing--30) / 2);
}
form.woocommerce-EditAccountForm.edit-account span {
	font-size: var(--wp--preset--font-size--small);
}
