/**
 * WooCommerce layer.
 *
 * Loaded only on shop, cart, checkout, account and search pages. Every colour
 * and space comes from a theme.json preset — no hardcoded palette, no
 * duplication of what theme.json already declares.
 */

/* ---------------------------------------------------------------- */
/* Availability                                                     */
/* ---------------------------------------------------------------- */

.stock {
	display: inline-flex;
	align-items: center;
	gap: 0.5ch;
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
}

.stock::before {
	content: "";
	inline-size: 0.6em;
	block-size: 0.6em;
	border-radius: 50%;
	background-color: currentColor;
	flex: 0 0 auto;
}

.stock.in-stock {
	color: var( --wp--preset--color--success );
}

.stock.low-stock {
	color: var( --wp--preset--color--warning );
}

.stock.available-on-backorder {
	color: var( --wp--preset--color--contrast-2 );
}

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

/* ---------------------------------------------------------------- */
/* Product identity                                                 */
/* ---------------------------------------------------------------- */

/*
 * SKU and MPN are read character by character, so they are set in the mono
 * face where 0 and O cannot be confused.
 */
.product_meta .sku,
.componon-reference {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.01em;
}

.product_meta {
	margin-block-start: var( --wp--preset--spacing--30 );
	padding-block-start: var( --wp--preset--spacing--20 );
	border-block-start: 1px solid var( --wp--preset--color--border );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --wp--preset--color--contrast-2 );
}

.product_meta > span {
	display: block;
	margin-block-end: 0.35em;
}

/* ---------------------------------------------------------------- */
/* Product cards                                                    */
/* ---------------------------------------------------------------- */

.wc-block-product-template__responsive .wc-block-product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var( --wp--preset--spacing--20 );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 8px;
	background-color: var( --wp--preset--color--base );
}

ul.products li.product:hover {
	border-color: var( --wp--preset--color--primary );
	box-shadow: var( --wp--preset--shadow--card );
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.35;
}

ul.products li.product .price {
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

ul.products li.product .price del {
	color: var( --wp--preset--color--contrast-2 );
	font-weight: 400;
}

ul.products li.product .price ins {
	color: var( --wp--preset--color--accent );
	text-decoration: none;
}

ul.products li.product .button {
	margin-block-start: auto;
}

span.onsale,
.wc-block-components-product-sale-badge {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	border-radius: 4px;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --wp--preset--spacing--20 );
	margin-block: var( --wp--preset--spacing--30 );
}

.woocommerce div.product form.cart .button {
	flex: 1 1 14rem;
}

.quantity input[type="number"] {
	inline-size: 6rem;
	padding: 0.6em 0.5em;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 6px;
	font-family: var( --wp--preset--font-family--mono );
	text-align: center;
}

/* ---------------------------------------------------------------- */
/* Forms                                                            */
/* ---------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
	padding: 0.65em 0.8em;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 6px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover {
	border-color: var( --wp--preset--color--contrast-2 );
}

.woocommerce form .form-row input.input-text:disabled,
.woocommerce form .form-row select:disabled {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	cursor: not-allowed;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var( --wp--preset--color--error );
}

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

/* ---------------------------------------------------------------- */
/* Notices                                                          */
/* ---------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 0.9em 1.1em;
	border: 1px solid var( --wp--preset--color--border );
	border-inline-start-width: 4px;
	border-radius: 6px;
	background-color: var( --wp--preset--color--base-2 );
	list-style: none;
}

.woocommerce-message {
	border-inline-start-color: var( --wp--preset--color--success );
}

.woocommerce-info {
	border-inline-start-color: var( --wp--preset--color--primary );
}

.woocommerce-error {
	border-inline-start-color: var( --wp--preset--color--error );
}

/* ---------------------------------------------------------------- */
/* Filters                                                          */
/* ---------------------------------------------------------------- */

.wp-block-woocommerce-product-filters {
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-woocommerce-product-filters h3,
.wp-block-woocommerce-product-filters h4 {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--contrast-2 );
}

/* ---------------------------------------------------------------- */
/* Tables (cart, order, account)                                    */
/* ---------------------------------------------------------------- */

/*
 * Order and cart tables scroll inside their own container rather than
 * squeezing columns away on small screens.
 */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--small );
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.75em 0.9em;
	border-block-end: 1px solid var( --wp--preset--color--border );
	text-align: start;
}

@media ( max-width: 48em ) {
	.woocommerce-cart-form,
	.woocommerce-order-details {
		overflow-x: auto;
	}
}