/* Chainmail Jack · WooCommerce surfaces (archive, single product, cart, checkout, account).
   Woo core CSS stays enqueued for form correctness; these rules re-voice it into the theme. */

/* ---- shared woo wrapper ---- */

.cj-woo { padding-block: var(--space-xl) var(--space-3xl); }
.woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: var(--text-xs) !important;
	color: var(--color-muted) !important;
	margin-bottom: var(--space-lg) !important;
}
.woocommerce-breadcrumb a { color: var(--color-ink-2); }

/* Kill Woo's float grid; CSS grid instead (Woo ships float-based columns). */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
	margin: 0 0 var(--space-xl);
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: grid;
	gap: var(--space-xs);
}
@media (max-width: 60rem) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 22.5rem) { .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); } }

.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-sm);
	background: var(--color-paper-2);
	margin: 0 0 var(--space-xs) !important;
	transition: transform var(--dur-long) var(--ease-out);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font: 600 var(--text-sm)/1.35 var(--font-body);
	color: var(--color-ink);
	padding: 0;
}
.woocommerce ul.products li.product .price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-sm) !important;
	color: var(--color-ink-2) !important;
}
.woocommerce ul.products li.product .button {
	margin-top: var(--space-2xs);
	justify-self: start;
}

/* Woo buttons → cj-btn voice */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-height: 44px;
	padding: var(--space-sm) var(--space-lg) !important;
	line-height: 1.2 !important;
	border: var(--rule-hair) solid var(--color-ink) !important;
	border-radius: var(--radius-sm) !important;
	background: transparent !important;
	color: var(--color-ink) !important;
	font: 600 var(--text-sm) var(--font-body) !important;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--dur-short) var(--ease-out),
	            color var(--dur-short) var(--ease-out),
	            transform 100ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	.woocommerce button.button.alt:hover,
	.woocommerce a.button.alt:hover {
		background: var(--color-ink) !important;
		color: var(--color-paper) !important;
	}
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #payment #place_order {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: var(--color-accent-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
	.woocommerce button.button.alt:hover,
	.woocommerce a.button.alt:hover,
	.woocommerce #payment #place_order:hover {
		background: var(--color-accent-deep) !important;
		border-color: var(--color-accent-deep) !important;
		color: var(--color-accent-ink) !important;
	}
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt.disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* on-sale badge → quiet mono chip, not a starburst */
.woocommerce span.onsale {
	position: absolute;
	top: var(--space-sm) !important;
	left: var(--space-sm) !important;
	min-height: 0 !important;
	line-height: 1 !important;
	padding: var(--space-2xs) var(--space-xs) !important;
	background: var(--color-ink) !important;
	color: var(--color-paper) !important;
	border-radius: var(--radius-sm) !important;
	font: 500 var(--text-xs) var(--font-mono) !important;
}

/* ---- single product ---- */

.woocommerce div.product { display: block; }
.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-2xl);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--color-ink) !important;
	font-size: var(--text-lg) !important;
}
.woocommerce div.product div.images img {
	border: var(--rule-hair) solid var(--color-rule-2);
	border-radius: var(--radius-sm);
}
.woocommerce div.product form.cart div.quantity .qty {
	min-height: 44px;
	border: var(--rule-hair) solid var(--color-rule-strong);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin: 0 0 var(--space-lg) !important;
	border-bottom: var(--rule-hair) solid var(--color-rule);
	display: flex;
	gap: var(--space-lg);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.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 a {
	padding: var(--space-sm) 0 !important;
	font: 600 var(--text-sm) var(--font-body);
	color: var(--color-muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-ink);
	border-bottom-color: var(--color-accent);
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--text-md); }

/* ---- archive utilities: result count, ordering, pagination ---- */

.woocommerce .woocommerce-result-count {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-xs);
	color: var(--color-muted);
}
.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	padding: var(--space-xs) var(--space-sm);
	border: var(--rule-hair) solid var(--color-rule-strong);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
	color: var(--color-ink);
	font: 400 var(--text-sm) var(--font-body);
}
.woocommerce nav.woocommerce-pagination {
	margin-top: var(--space-xl);
}
.woocommerce nav.woocommerce-pagination ul {
	border: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: flex-start;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 0 !important;
	float: none !important;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-sm) !important;
	border: var(--rule-hair) solid var(--color-rule-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-sm);
	line-height: 1 !important;
	color: var(--color-ink-2);
	background: var(--color-paper) !important;
	text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--color-ink) !important;
	border-color: var(--color-ink);
	color: var(--color-paper) !important;
}
@media (hover: hover) and (pointer: fine) {
	.woocommerce nav.woocommerce-pagination ul li a:hover {
		background: var(--color-paper-2) !important;
		color: var(--color-ink);
	}
}

/* ---- notices ---- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--color-paper-2) !important;
	color: var(--color-ink) !important;
	border-top: 2px solid var(--color-accent) !important;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
}
.woocommerce-error { border-top-color: var(--color-error) !important; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-accent) !important; }
.woocommerce-error::before { color: var(--color-error) !important; }

/* ---- forms (cart, checkout, account) ---- */

.woocommerce form .form-row label { font-size: var(--text-sm); font-weight: 600; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-account .woocommerce-EditAccountForm input {
	min-height: 44px;
	padding: var(--space-xs) var(--space-sm) !important;
	border: var(--rule-hair) solid var(--color-rule-strong) !important;
	border-radius: var(--radius-sm) !important;
	background: var(--color-paper) !important;
	color: var(--color-ink) !important;
	font: 400 var(--text-base) var(--font-body) !important;
	outline: 2px solid transparent;
	outline-offset: 1px;
	transition: background-color var(--dur-short) var(--ease-out);
}
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
	outline: 2px solid var(--color-focus);
	border-width: var(--rule-hair) !important;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--color-error) !important;
}
.woocommerce form .form-row.woocommerce-invalid label { color: var(--color-error); }
.woocommerce form .form-row input.input-text:disabled,
.woocommerce form .form-row select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.woocommerce #payment #place_order:focus-visible { outline-color: var(--color-ink); }

/* ---- cart table ---- */

.woocommerce table.shop_table {
	border: var(--rule-hair) solid var(--color-rule) !important;
	border-radius: var(--radius-md) !important;
	font-size: var(--text-sm);
}
.woocommerce table.shop_table th {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.woocommerce table.shop_table td { border-top: var(--rule-hair) solid var(--color-rule-2) !important; }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce-checkout-review-order-table .amount {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* ---- checkout ---- */

.woocommerce-checkout h3 { font-size: var(--text-md); }
.woocommerce-checkout #payment {
	background: var(--color-paper-2) !important;
	border-radius: var(--radius-md) !important;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--color-paper) !important;
	color: var(--color-ink-2) !important;
	font-size: var(--text-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ---- account ---- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--rule-hair) solid var(--color-rule);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--space-sm) var(--space-md);
	color: var(--color-ink-2);
	text-decoration: none;
	font-size: var(--text-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-accent);
	background: var(--color-paper-2);
}

/* ---- star ratings keep Woo glyphs, re-inked ---- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a { color: var(--color-accent); }

/* ---- mobile cart table collapse ---- */
@media (max-width: 40rem) {
	.woocommerce table.shop_table_responsive tr td::before {
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		color: var(--color-muted);
	}
}