/*
 * OneGetUp — WooCommerce (Fase 15).
 * Hooks y bloques nativos; ningún selector depende de un override.
 * Copyright © 2026 OneGetUP — JAZO.
 */

.ogu-commerce {
	min-width: 0;
}

:is(.ogu-commerce, .ogu-commerce-route) :is(h1, h2, h3) {
	text-wrap: balance;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-breadcrumb"] {
	margin-block-end: var(--ogu-space-6);
	color: var(--ogu-text-secondary);
	font-size: var(--ogu-text-sm);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-breadcrumb"] a {
	color: var(--ogu-accent);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-result-count"] {
	color: var(--ogu-text-secondary);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-ordering"] select {
	min-height: 44px;
	padding-inline: var(--ogu-space-3);
	border: 1px solid var(--ogu-border-strong);
	border-radius: var(--ogu-radius-sm);
	background-color: var(--ogu-surface);
	color: var(--ogu-text);
	font: inherit;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="products"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ogu-grid-gap);
	padding: 0;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="products"]::before,
:is(.ogu-commerce, .ogu-commerce-route) [class~="products"]::after {
	display: none;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="products"] [class~="product"] {
	position: relative;
	float: none;
	width: auto;
	margin: 0;
	padding: var(--ogu-space-5);
	border: 1px solid var(--ogu-border);
	border-radius: var(--ogu-radius-sm);
	background-color: var(--ogu-surface);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="products"] [class~="product"] img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="products"] [class~="product"] h2 {
	font-size: var(--ogu-text-xl);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="price"] {
	color: var(--ogu-text);
	font-size: var(--ogu-text-lg);
	font-weight: var(--ogu-weight-bold);
}

/* La hoja clásica de WooCommerce usa un selector más específico y un verde
 * de precio que solo alcanza 3.41:1 sobre blanco. La capa del tema gana por
 * especificidad, sin `!important`, y mantiene el token correcto en ambos modos. */
body.ogu-commerce-route.woocommerce [class~="products"] [class~="product"] [class~="price"],
body.ogu-commerce-route.woocommerce div[class~="product"] p[class~="price"],
body.ogu-commerce-route.woocommerce div[class~="product"] span[class~="price"] {
	color: var(--ogu-text);
}

:is(.ogu-commerce, .ogu-commerce-route) :is([class~="button"], button, input[type="submit"]) {
	min-height: 44px;
	padding: var(--ogu-space-3) var(--ogu-space-5);
	border: 1px solid var(--ogu-accent);
	border-radius: var(--ogu-radius-sm);
	background-color: var(--ogu-accent);
	color: var(--ogu-accent-contrast);
	font: inherit;
	font-weight: var(--ogu-weight-semibold);
	cursor: pointer;
}

:is(.ogu-commerce, .ogu-commerce-route) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea) {
	min-height: 44px;
	padding: var(--ogu-space-3);
	border: 1px solid var(--ogu-border-strong);
	border-radius: var(--ogu-radius-sm);
	background-color: var(--ogu-surface);
	color: var(--ogu-text);
	font: inherit;
}

:is(.ogu-commerce, .ogu-commerce-route) table {
	width: 100%;
	border-collapse: collapse;
}

:is(.ogu-commerce, .ogu-commerce-route) :is(th, td) {
	padding: var(--ogu-space-3);
	border-block-end: 1px solid var(--ogu-border);
	text-align: start;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-message"],
:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-info"],
:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-error"] {
	padding: var(--ogu-space-4);
	border-inline-start: 4px solid var(--ogu-accent);
	background-color: var(--ogu-bg-subtle);
	color: var(--ogu-text);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-error"] {
	border-inline-start-color: var(--ogu-error);
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-pagination"] ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogu-space-2);
	border: 0;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-pagination"] li {
	border: 0;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-pagination"] :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--ogu-border);
}

:is(.ogu-commerce, .ogu-commerce-route) [class^="wp-block-woocommerce-"] {
	max-width: 100%;
}

:is(.ogu-commerce, .ogu-commerce-route) [class^="wc-block-"] :is(input, select, button) {
	min-height: 44px;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-MyAccount-navigation"] ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogu-space-2);
	padding: 0;
	list-style: none;
}

:is(.ogu-commerce, .ogu-commerce-route) [class~="woocommerce-MyAccount-navigation"] a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--ogu-space-3);
}

@media (max-width: 64rem) {
	:is(.ogu-commerce, .ogu-commerce-route) [class~="products"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	:is(.ogu-commerce, .ogu-commerce-route) [class~="products"] {
		grid-template-columns: 1fr;
	}

	:is(.ogu-commerce, .ogu-commerce-route) table,
	:is(.ogu-commerce, .ogu-commerce-route) :is(tbody, tr, th, td) {
		display: block;
		width: 100%;
	}
}

/* Woo Blocks conserva tres columnas rígidas en el carrito. En teléfonos
 * estrechos la tercera repite el total que ya aparece junto al producto y
 * empuja la fila fuera del viewport. La composición móvil usa dos columnas
 * reales (miniatura + datos) y oculta únicamente ese total duplicado. */
@media (max-width: 30rem) {
	:is(.ogu-commerce, .ogu-commerce-route) [class~="wc-block-cart-items__row"] {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr);
		gap: var(--ogu-space-3);
	}

	:is(.ogu-commerce, .ogu-commerce-route) [class~="wc-block-cart-item__image"] {
		grid-column: 1;
		width: 4rem;
		padding-inline: 0;
	}

	:is(.ogu-commerce, .ogu-commerce-route) [class~="wc-block-cart-item__product"] {
		grid-column: 2;
		min-width: 0;
		padding-inline: 0;
		overflow-wrap: anywhere;
	}

	:is(.ogu-commerce, .ogu-commerce-route) [class~="wc-block-cart-item__total"] {
		display: none;
	}
}