/**
 * Pixaris store styles.
 *
 * Layered on top of the WooCommerce core stylesheets rather than replacing
 * them, so a WooCommerce release that adds a component does not leave an
 * unstyled hole in the storefront.
 *
 * @package Pixaris
 * @author  Pixaris
 * @since   1.0.0
 */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	border: var(--pixaris-hairline);
	border-radius: var(--pixaris-radius-lg);
	background: var(--wp--preset--color--surface, #fff);
	border-inline-start: 3px solid var(--wp--preset--color--accent, #35544E);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	color: var(--wp--preset--color--ink, #1A1917);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.woocommerce-notices-wrapper .woocommerce-error {
	border-inline-start-color: var(--wp--preset--color--danger, #97302F);
}

/* Product grid ------------------------------------------------------------ */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	inline-size: 100%;
	margin: 0;
	float: none;
	text-align: start;
}

.woocommerce ul.products li.product img {
	border-radius: var(--pixaris-radius-lg);
	margin-block-end: 0.85rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-block-start: 0.2rem;
	color: var(--wp--preset--color--ink-muted, #6A665E);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.woocommerce ul.products li.product .price del {
	opacity: 0.6;
	margin-inline-end: 0.35rem;
}

.woocommerce span.onsale {
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ink, #1A1917);
	color: var(--wp--preset--color--surface, #fff);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 500;
	line-height: 1.6;
}

/* Buttons ----------------------------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	border-radius: var(--pixaris-radius);
	background: var(--wp--preset--color--accent, #35544E);
	color: var(--wp--preset--color--surface, #fff);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	padding: 0.65rem 1.15rem;
	transition: background-color var(--pixaris-transition);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--ink, #1A1917);
	color: var(--wp--preset--color--surface, #fff);
}

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

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--voice, Georgia, serif);
	font-weight: 400;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	border-block-end: var(--pixaris-hairline);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-color: var(--wp--preset--color--hairline, #E2DDD4);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-block-end: 2px solid var(--wp--preset--color--accent, #35544E);
	background: transparent;
}

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

/* Cart and checkout ------------------------------------------------------- */

.woocommerce table.shop_table {
	border-radius: var(--pixaris-radius-lg);
	border-color: var(--wp--preset--color--hairline, #E2DDD4);
	background: var(--wp--preset--color--surface, #fff);
}

.woocommerce table.shop_table th {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	min-block-size: 44px;
	padding: 0.55rem 0.75rem;
	border: var(--pixaris-hairline);
	border-radius: var(--pixaris-radius);
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--ink, #1A1917);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.woocommerce form .form-row label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
}

@media (max-width: 600px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1.5rem 1rem;
	}
}