/*
 * WooCommerce styles for every page: product cards, the single product,
 * the mini-cart, notices and the classic account pages.
 * Every color, size and space comes from a theme.json variable.
 */

/* Catalog bar: results count and sorting. */

.hmx-catalog-bar {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.hmx-catalog-bar > * {
	margin: 0;
}

.woocommerce.wc-block-catalog-sorting .woocommerce-ordering,
.wc-block-catalog-sorting .woocommerce-ordering {
	margin: 0;
}

.wc-block-catalog-sorting select.orderby {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	padding-inline-end: var(--wp--preset--spacing--60);
}

/* Breadcrumbs. */

.wc-block-breadcrumbs .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--text-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--text);
}

/* Product cards. */

.wc-block-product-template {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.wc-block-product-template .wc-block-product > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.wc-block-product .wc-block-components-product-image {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	margin-bottom: var(--wp--preset--spacing--30);
	overflow: hidden;
}

.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
}

/* The button sits at the bottom of the card, so buttons line up across a row. */
.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.wc-block-components-product-button .wp-block-button__link {
	width: 100%;
}

.wc-block-components-product-button a.added_to_cart {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	margin-top: var(--wp--preset--spacing--20);
	text-align: center;
}

/* Sale badge. */

.wc-block-components-product-sale-badge,
.woocommerce span.onsale {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--primary-contrast);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: 0.04em;
	line-height: var(--wp--custom--line-height--snug);
	min-height: 0;
	min-width: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.wc-block-components-product-sale-badge .wc-block-components-product-sale-badge__text {
	color: inherit;
}

/* Price. */

.wc-block-components-product-price,
.woocommerce .price {
	color: var(--wp--preset--color--text);
}

.wc-block-components-product-price del,
.woocommerce .price del {
	color: var(--wp--preset--color--text-muted);
	font-weight: var(--wp--custom--font-weight--regular);
	opacity: 1;
}

.wc-block-components-product-price ins,
.woocommerce .price ins {
	background: none;
	color: var(--wp--preset--color--error);
	text-decoration: none;
}

/* Product rating. */

.wc-block-components-product-rating__stars,
.woocommerce .star-rating {
	color: var(--wp--preset--color--text);
}

/* Single product. */

.hmx-product {
	gap: var(--wp--preset--spacing--60);
}

.hmx-product__summary > * {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--wp--custom--radius--md);
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
	background-color: var(--wp--preset--color--surface);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--20)) / 4);
	float: none;
	margin: 0;
	width: auto;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	opacity: 1;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--text);
	opacity: 1;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	align-items: center;
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	height: var(--wp--custom--target--min);
	justify-content: center;
	width: var(--wp--custom--target--min);
}

/* Add to cart form and quantity. */

.wp-block-woocommerce-add-to-cart-form form.cart,
.woocommerce div.product form.cart {
	margin-bottom: 0;
}

.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce .quantity input.qty {
	border: 1px solid var(--hmx-control-border);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--md);
	height: 100%;
	min-height: var(--wp--custom--target--min);
	padding: var(--wp--preset--spacing--20);
	text-align: center;
	width: 5rem;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 12rem;
	float: none;
}

.woocommerce div.product form.cart table.variations {
	border: 0;
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	border: 0;
	display: block;
	padding: 0 0 var(--wp--preset--spacing--20);
	text-align: start;
}

.woocommerce div.product form.cart table.variations select {
	width: 100%;
}

.woocommerce div.product .stock {
	color: var(--wp--preset--color--success);
	font-size: var(--wp--preset--font-size--sm);
}

.woocommerce div.product .out-of-stock {
	color: var(--wp--preset--color--error);
}

/* Classic WooCommerce buttons. They take the same look as block buttons. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--primary-contrast);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--bold);
	justify-content: center;
	line-height: var(--wp--custom--line-height--snug);
	min-height: var(--wp--custom--target--min);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	text-decoration: none;
}

.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 {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-contrast);
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.alt.disabled {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* Product details tabs. */

.wp-block-woocommerce-product-details {
	margin-top: var(--wp--preset--spacing--70);
}

.woocommerce div.product .woocommerce-tabs ul.tabs,
.wp-block-woocommerce-product-details ul.wc-tabs {
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.wp-block-woocommerce-product-details ul.wc-tabs li {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin: 0 0 -1px;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.wp-block-woocommerce-product-details ul.wc-tabs li a {
	align-items: center;
	color: var(--wp--preset--color--text-muted);
	display: inline-flex;
	font-weight: var(--wp--custom--font-weight--medium);
	min-height: var(--wp--custom--target--min);
	padding: 0;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.wp-block-woocommerce-product-details ul.wc-tabs li.active {
	background: none;
	border-bottom-color: var(--wp--preset--color--primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.wp-block-woocommerce-product-details ul.wc-tabs li.active a,
.wp-block-woocommerce-product-details ul.wc-tabs li a:hover {
	color: var(--wp--preset--color--text);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

.woocommerce table.shop_attributes,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-color: var(--wp--preset--color--border);
}

/* Related products. */

.wp-block-woocommerce-product-collection {
	margin-top: var(--wp--preset--spacing--60);
}

.hmx-catalog-bar + .wp-block-woocommerce-product-collection,
.hmx-featured .wp-block-woocommerce-product-collection {
	margin-top: var(--wp--preset--spacing--40);
}

/* Shared components: buttons, quantity selector, links. */

.wc-block-components-button:not(.is-link) {
	border-radius: var(--wp--custom--radius--sm);
	font-weight: var(--wp--custom--font-weight--bold);
	min-height: var(--wp--custom--target--min);
}

.wc-block-components-button:not(.is-link):focus,
.wc-block-components-button:not(.is-link):focus-visible {
	box-shadow: none;
	outline: var(--wp--custom--focus--width) solid var(--hmx-focus-color);
	outline-offset: var(--wp--custom--focus--offset);
}

.wc-block-components-button:not(.is-link).outlined {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	box-shadow: none;
	color: var(--wp--preset--color--primary);
}

.wc-block-components-button:not(.is-link).outlined:not(:disabled):hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--hmx-control-border);
	border-radius: var(--wp--custom--radius--sm);
}

.wc-block-components-quantity-selector::after {
	display: none;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--md);
	min-height: 2.25rem;
	opacity: 1;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 2.25rem;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background-color: var(--wp--preset--color--surface);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--wp--preset--color--text-muted);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus-visible,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible {
	box-shadow: none;
	outline: var(--wp--custom--focus--width) solid var(--hmx-focus-color);
	outline-offset: calc(-1 * var(--wp--custom--focus--width));
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--text);
	font-weight: var(--wp--custom--font-weight--medium);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	text-decoration: underline;
}

.wc-block-components-product-metadata,
.wc-block-components-product-details {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
}

/* Header icons: account and mini-cart. */

.hmx-header__actions .wc-block-mini-cart__button,
.hmx-header__actions .wp-block-woocommerce-customer-account a,
.hmx-header .wc-block-cart-link {
	align-items: center;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
	display: inline-flex;
	justify-content: center;
	min-height: var(--wp--custom--target--min);
	min-width: var(--wp--custom--target--min);
	padding: 0 var(--wp--preset--spacing--20);
}

.hmx-header__actions .wc-block-mini-cart__button:hover,
.hmx-header__actions .wp-block-woocommerce-customer-account a:hover {
	background-color: var(--wp--preset--color--surface);
	opacity: 1;
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--bold);
}

/* Mini-cart drawer. */

.wc-block-components-drawer__screen-overlay {
	background-color: color-mix(in srgb, var(--wp--preset--color--text) 60%, transparent);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-components-drawer {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title,
.wp-block-woocommerce-mini-cart-contents h2.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--bold);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close,
.wc-block-components-drawer .wc-block-components-drawer__close {
	align-items: center;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
	display: flex;
	height: var(--wp--custom--target--min);
	justify-content: center;
	opacity: 1;
	width: var(--wp--custom--target--min);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
	box-shadow: none;
	outline: var(--wp--custom--focus--width) solid var(--hmx-focus-color);
}

.wc-block-mini-cart__footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
	font-weight: var(--wp--custom--font-weight--bold);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Notices: block banners and classic messages. */

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start: 4px solid var(--wp--preset--color--text-muted);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--md);
}

.wc-block-components-notice-banner.is-success,
.woocommerce-message {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	border-inline-start-color: var(--wp--preset--color--success);
}

.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	border-inline-start-color: var(--wp--preset--color--error);
}

.wc-block-components-notice-banner.is-warning {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	border-inline-start-color: var(--wp--preset--color--warning);
}

.wc-block-components-notice-banner.is-info,
.woocommerce-info {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	border-inline-start-color: var(--wp--preset--color--text-muted);
}

.wc-block-components-notice-banner > svg {
	fill: var(--wp--preset--color--background);
}

.wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--preset--color--success);
}

.wc-block-components-notice-banner.is-error > svg {
	background-color: var(--wp--preset--color--error);
}

.wc-block-components-notice-banner.is-warning > svg {
	background-color: var(--wp--preset--color--warning);
}

.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--wp--preset--color--text-muted);
}

.wc-block-components-notice-banner a,
.wc-block-components-notice-banner .wc-forward {
	color: var(--wp--preset--color--text);
}

.wc-block-components-notice-banner > .wc-block-components-button {
	color: var(--wp--preset--color--text) !important;
	opacity: 1;
}

.wc-block-components-validation-error,
.wc-block-components-validation-error > p {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--sm);
}

/* Classic account pages. */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	align-items: center;
	color: var(--wp--preset--color--text);
	display: flex;
	min-height: var(--wp--custom--target--min);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--wp--preset--color--surface);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--wp--preset--color--surface);
	font-weight: var(--wp--custom--font-weight--bold);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
}

.woocommerce form .form-row label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	border: 1px solid var(--hmx-control-border);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--md);
	min-height: var(--wp--custom--target--min);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.woocommerce form .form-row .required {
	color: var(--wp--preset--color--error);
}

.woocommerce table.shop_table {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wp--preset--color--border);
}