/**
 * Catalyst — WooCommerce default-chrome polish.
 * The theme drops WooCommerce's stylesheets and styles its own custom markup
 * (product cards, single product) with .crl-* classes. This layer styles the
 * remaining WC default chrome (notices, shop ordering / result count /
 * pagination, breadcrumb, quantity, sale badge, default buttons) with the brand
 * tokens. Scoped to avoid the theme's .crl-btn and product-card classes.
 * Loaded on WooCommerce pages only. CSS only.
 */

/* ----- Notices ----- */
.woocommerce-message,
.woocommerce-info {
	background: var(--accent-wash);
	border: 1px solid var(--border-default);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius-md);
	color: var(--text-body);
	padding: 13px 16px;
	font: var(--text-body-md);
	list-style: none;
}
.woocommerce-error {
	background: var(--status-critical-tint);
	border: 1px solid var(--status-critical);
	border-radius: var(--radius-md);
	color: var(--status-critical);
	padding: 13px 16px;
	font: var(--text-body-md);
	list-style: none;
}

/* ----- Shop chrome ----- */
.woocommerce-result-count { font: var(--text-body-sm); color: var(--text-muted); margin: 0; }
.woocommerce-ordering select {
	padding: 10px 12px;
	border: 1px solid var(--border-input);
	border-radius: var(--radius-md);
	background: var(--paper);
	font: var(--text-body-sm);
	color: var(--text-body);
}
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	justify-content: center;
	border: 0;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	color: var(--text-body);
	text-decoration: none;
	font: var(--text-body-sm);
}
.woocommerce-pagination .page-numbers.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.woocommerce-pagination .page-numbers:hover:not(.current) { background: var(--accent-wash); }

/* ----- Breadcrumb ----- */
.woocommerce-breadcrumb { font: var(--text-body-sm); color: var(--text-muted); margin-bottom: 16px; }
.woocommerce-breadcrumb a { color: var(--accent); text-decoration: none; }

/* ----- Quantity ----- */
.quantity input.qty {
	width: 66px;
	min-height: 42px;
	padding: 8px;
	text-align: center;
	border: 1px solid var(--border-input);
	border-radius: var(--radius-md);
	font: var(--text-body-md);
	color: var(--text-body);
}

/* ----- Sale badge ----- */
.woocommerce span.onsale {
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius-xs);
	padding: 3px 9px;
	font: var(--text-caption);
	font-weight: 600;
}

/* ----- Default WC buttons that are NOT the theme's crl-btn ----- */
.woocommerce a.button:not(.crl-btn),
.woocommerce button.button:not(.crl-btn),
.woocommerce input.button:not(.crl-btn) {
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	padding: 12px 20px;
	font: var(--text-body-md);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease;
}
.woocommerce a.button:not(.crl-btn):hover,
.woocommerce button.button:not(.crl-btn):hover,
.woocommerce input.button:not(.crl-btn):hover { background: var(--accent-deep); }

/* ----- Related / upsells / tabs headings ----- */
.related > h2, .upsells > h2, .woocommerce-tabs h2 { font: var(--text-h2); color: var(--text-body); }

/* ----- Generic WC form fields not covered by checkout/account CSS ----- */
.woocommerce form .input-text,
.woocommerce form select {
	border: 1px solid var(--border-input);
	border-radius: var(--radius-md);
	padding: 10px 12px;
}