/* woo: WooCommerce look only. No template overrides, no change to fields, names, ids or payment scripts. */

/* ---------- Product grids ([products], shop and category pages) ---------- */
.woocommerce ul.products,
.wp-block-shortcode ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-align: left;
}
@media (max-width: 899px) {
	.woocommerce ul.products, .wp-block-shortcode ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product { width: auto; float: none; margin: 0; }
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { color: var(--color-ink); text-decoration: none; display: flex; flex-direction: column; gap: 0.25rem; }
.woocommerce ul.products li.product a img {
	margin: 0 0 var(--space-sm);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-paper-2);
	border-radius: var(--radius-card);
	outline: var(--rule-hair) solid var(--color-rule);
	outline-offset: -1px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font: 500 var(--text-md)/1.35 var(--font-body);
	letter-spacing: 0;
	color: var(--color-ink);
	padding: 0;
	margin: 0;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { text-decoration: underline; text-decoration-color: var(--color-accent); }
.woocommerce ul.products li.product .price {
	color: var(--color-ink-2);
	font-size: var(--text-sm);
	font-weight: 400;
	margin: 0;
}
.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: 0.35rem;
	background: transparent;
	color: var(--color-ink);
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-pill);
	box-sizing: border-box;
	height: 44px;
	padding: 0 var(--space-sm);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font: 500 var(--text-sm)/1.2 var(--font-body);
}
.woocommerce ul.products li.product .button:hover { background: var(--color-paper-2); border-color: var(--color-ink); color: var(--color-ink); }
.woocommerce span.onsale {
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border-radius: var(--radius-pill);
	min-height: 0; min-width: 0; line-height: 1.2;
	padding: 0.3rem 0.7rem;
	font: 500 var(--text-sm)/1.2 var(--font-body);
}

/* ---------- Buttons everywhere in the store ---------- */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border: var(--rule-hair) solid var(--color-accent);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 500;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-accent-ink);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 500;
}

/* ---------- Inputs (look only) ---------- */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce .variations select,
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__input,
.wc-blocks-components-select__select {
	border: var(--rule-hair) solid var(--color-muted);
	border-radius: var(--radius-card);
	background-color: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-md);
}

/* ---------- Single product ---------- */
/* Before a size and color are chosen the button stays readable; WooCommerce still asks for the options on click. */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:disabled { opacity: 1; cursor: not-allowed; background-color: var(--color-accent); color: var(--color-accent-ink); }
/* SKU, categories and tags are for the back office, not the shopper. */
.single-product .product_meta,
.single-product .wp-block-woocommerce-product-meta { display: none; }
.single-product .product_title,
.wp-block-post-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.single-product .wc-block-components-product-price,
.single-product .woocommerce-Price-amount,
.single-product p.price { color: var(--color-ink); }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding-block: 0.4rem; }
.woocommerce div.product form.cart .variations label { font-weight: 500; color: var(--color-ink); }
.woocommerce-product-gallery img,
.wc-block-components-product-image img {
	border-radius: var(--radius-card);
	background: var(--color-paper-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-paper-2); border-color: var(--color-rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--color-paper); }

/* ---------- Notices and prices ---------- */
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner {
	border-radius: var(--radius-card);
	background: var(--color-paper-2);
	color: var(--color-ink);
	border-color: var(--color-rule-2);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-accent); }
.woocommerce-error, .wc-block-components-notice-banner.is-error { border-radius: var(--radius-card); }

/* Mini cart badge */
.wc-block-mini-cart__badge { background: var(--color-accent); color: var(--color-accent-ink); }

/* ---------- Block product collections (shop, category, related) ---------- */
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wc-block-product { text-align: left; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-name {
	font: 500 var(--text-md)/1.35 var(--font-body);
	letter-spacing: 0;
	text-align: left;
	color: var(--color-ink);
	margin-block: var(--space-sm) 0.25rem;
}
.wc-block-product .wp-block-post-title a { color: var(--color-ink); text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price { text-align: left; justify-content: flex-start; color: var(--color-ink-2); font-size: var(--text-sm); }
.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-paper-2);
	border-radius: var(--radius-card);
	outline: var(--rule-hair) solid var(--color-rule);
	outline-offset: -1px;
}
.wc-block-product .wp-block-woocommerce-product-button { text-align: left; justify-content: flex-start; align-items: flex-start; }
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button {
	background: transparent;
	color: var(--color-ink);
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-pill);
	box-sizing: border-box;
	height: 44px;
	padding: 0 var(--space-sm);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font: 500 var(--text-sm)/1.2 var(--font-body);
	margin-inline: 0;
}
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.wc-block-product .wc-block-components-product-button__button:hover { background: var(--color-paper-2); border-color: var(--color-ink); color: var(--color-ink); }

/* Single product title: a section head, not a poster */
.single-product .wp-block-post-title,
.single-product .product_title { font-size: var(--text-xl); line-height: 1.08; }
.single-product .wc-block-product .wp-block-post-title { font: 500 var(--text-md)/1.35 var(--font-body); }

/* Catalog sorting */
.woocommerce-ordering select,
.wc-block-catalog-sorting select,
.wp-block-woocommerce-catalog-sorting select {
	border: var(--rule-hair) solid var(--color-muted);
	border-radius: var(--radius-card);
	background-color: var(--color-paper);
	color: var(--color-ink);
	font: 400 var(--text-sm)/1.3 var(--font-body);
	padding: 0.45rem 0.75rem;
}

/* Same grid as the homepage: 4 a row on desktop, 2 below 900px (Woo collapses to one on phones) */
@media (min-width: 900px) {
	.wc-block-product-template.is-flex-container:not(.columns-5) {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-lg) var(--space-md);
	}
	.wc-block-product-template.is-flex-container:not(.columns-5) > li { width: auto; margin: 0; }
}
@media (max-width: 899px) {
	.wc-block-product-template.is-flex-container,
	.wc-block-product-template.wc-block-product-template__responsive,
	.wc-block-product-template.is-layout-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-lg) var(--space-sm);
	}
	.wc-block-product-template.is-flex-container > li,
	.wc-block-product-template > .wc-block-product { width: auto; margin: 0; }
}

/* Three weights in running use (400, 500, Vollkorn 600): WooCommerce's bold labels step down to 500 */
.woocommerce :is(strong, b, th, label, dt),
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item,
.wc-block-cart-items th,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.wc-block-grid__product-title { font-weight: 500; }
.wc-block-grid__product-title { color: var(--color-ink); text-align: left; }