/* =========================================================================
   XTRALIFE — Listado de productos (tienda, categorías y páginas)
     1. Banner: foto + panel verde con el título.
     2. Barra de resultados: contador + orden.
     3. Rejilla de tarjetas.
     4. Paginación.
     7. El mismo listado fuera de la tienda.

   Los tokens (--xl-*) los define assets/css/pz-header.css.
   El número de columnas llega de PHP en --oz-shop-grid-columns.

   La rejilla y la tarjeta cuelgan de `ul.products` —el contenedor que pinta
   WooCommerce en cualquier loop— y no del envoltorio `.xl-shop__products`,
   que solo existe en archive-product.php. Así el shortcode [products] de una
   página del maquetador sale idéntico a la tienda.
   ========================================================================= */

.site-main--shop {
	background: #fff;
	color: var(--xl-ink, #1e2a22);
}

/* El contenedor del tema (.site) está centrado y con ancho máximo; en la tienda
   el banner va a sangre y es la rejilla la que se limita (.xl-shop__inner). */
body.woocommerce-shop .site,
body.post-type-archive-product .site,
body.tax-product_cat .site,
body.tax-product_tag .site,
body.woocommerce .site:has(.site-main--shop) {
	max-width: 100%;
	background: #fff;
}

body.woocommerce-shop .site-main,
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.tax-product_tag .site-main,
body.woocommerce .site-main--shop { background: #fff; }

body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag { background: #fff; }

/* =========================================================================
   1. Banner
   ========================================================================= */

.xl-hero {
	display: grid;
	grid-template-columns: 52% 48%;
	align-items: stretch;
	min-height: clamp(200px, 20.5vw, 390px);
	background: var(--xl-green, #0e4d2c);
}

.xl-hero--noimage { grid-template-columns: minmax(0, 1fr); }

.xl-hero__media {
	position: relative;
	overflow: hidden;
	background: #f3f1ea;
}

.xl-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.xl-hero__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 4vw, 60px);
	background: var(--xl-green, #0e4d2c);
}

.xl-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 3.2vw, 58px);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

/* =========================================================================
   2. Contenedor y barra de resultados
   ========================================================================= */

.xl-shop {
	padding: clamp(20px, 2.4vw, 34px) 0 clamp(34px, 4vw, 64px);
}

/* El listado va a todo el ancho de la ventana: solo respeta el margen lateral
   del sitio (--pz-gutter), igual que el banner. */
.xl-shop__inner {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--pz-gutter, 24px);
}

.xl-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: clamp(16px, 1.8vw, 26px);
}

.xl-shop__count {
	margin: 0;
	color: var(--xl-ink, #1e2a22);
	font-size: 13px;
	font-weight: 500;
}

/* Selector de orden. */
.xl-shop__sort {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.xl-shop__sort-select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 168px;
	height: 36px;
	margin: 0;
	padding: 0 36px 0 14px;
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: 6px;
	background: #fff;
	color: var(--xl-ink, #1e2a22);
	font-family: inherit;
	font-size: 13px;
	line-height: 34px;
	cursor: pointer;
}

.xl-shop__sort-select:focus-visible {
	outline: none;
	border-color: var(--xl-green, #0e4d2c);
	box-shadow: 0 0 0 3px rgba(14, 77, 44, .12);
}

.xl-shop__sort-ico {
	position: absolute;
	right: 12px;
	display: inline-flex;
	color: var(--xl-ink, #1e2a22);
	pointer-events: none;
}

.xl-shop__sort-go {
	margin-left: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: 6px;
	background: var(--xl-green, #0e4d2c);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* Descripción de la categoría, si la hay. */
.oz-shop-archive__intro { margin-bottom: 18px; }
.oz-shop-archive__intro:empty { display: none; }
.oz-shop-archive__intro p { margin: 0 0 10px; color: var(--xl-muted, #5d6b62); font-size: 14px; line-height: 1.7; }

/* =========================================================================
   3. Rejilla de productos
   ========================================================================= */

.xl-shop__products { margin: 0; }

/* Número de columnas. Sale del Personalizador (--oz-shop-grid-columns, que
   imprime theme-woocommerce.php) y de aquí en adelante se maneja con
   --xl-shop-cols: así las medidas de abajo solo cambian esta variable, sin
   pelearse por especificidad con nadie. */
:root { --xl-shop-cols: var(--oz-shop-grid-columns, 5); }

/* OZ Cotizador reparte su rejilla con `repeat(auto-fill, minmax(240px, 1fr))`
   —en pantallas anchas salían 6 columnas—, y su selector pesa más que el
   nuestro. Por eso se repite aquí con el `body` delante para poder ganarle. */
body.ozc-loops--replace ul.products:not(.ozs__track),
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--xl-shop-cols, 5), minmax(0, 1fr));
	gap: clamp(18px, 2vw, 30px) clamp(12px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* WooCommerce reparte las tarjetas con float y anchos en %: aquí manda el grid. */
.woocommerce ul.products li.product,
ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.oz-loop-product { display: flex; }

.oz-loop-product__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ---- Foto ---- */

.oz-loop-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--xl-sand, #e9ebdb);
	border-radius: 2px;
	text-decoration: none;
}

.woocommerce .oz-loop-product__media img,
.oz-loop-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	box-sizing: border-box;
	transition: transform .35s var(--pz-ease, ease);
}

.oz-loop-product__media:hover img { transform: scale(1.04); }

/* Etiqueta de oferta. */
.woocommerce .oz-loop-product .onsale,
.oz-loop-product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--xl-orange, #f26522);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
}

/* ---- Textos ---- */

.oz-loop-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 12px 2px 0;
}

.woocommerce .oz-loop-product__title,
.oz-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 0;
	min-height: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
}

.oz-loop-product__title a {
	color: var(--xl-ink, #1e2a22);
	text-decoration: none;
	transition: color .2s var(--pz-ease, ease);
}

.oz-loop-product__title a:hover,
.oz-loop-product__title a:focus-visible { color: var(--xl-green, #0e4d2c); }

.woocommerce .oz-loop-product .price,
.oz-loop-product .price {
	display: block;
	margin: 0;
	color: var(--xl-orange, #f26522);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.woocommerce .oz-loop-product .price del,
.oz-loop-product .price del {
	margin-right: 6px;
	color: var(--xl-muted, #5d6b62);
	font-size: 14px;
	font-weight: 400;
	opacity: .85;
}

.woocommerce .oz-loop-product .price ins,
.oz-loop-product .price ins {
	background: transparent;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/* ---- Acciones: cantidad + añadir ---- */

.oz-loop-product__actions {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.oz-loop-product__actions--wide { grid-template-columns: minmax(0, 1fr); }

.oz-loop-product__qty {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	height: 34px;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--xl-sand, #e9ebdb);
	color: var(--xl-green, #0e4d2c);
}

.oz-loop-product__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--pz-ease, ease);
}

.oz-loop-product__qty-btn:hover { color: var(--xl-orange, #f26522); }

.oz-loop-product__qty-val {
	min-width: 16px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.woocommerce .oz-loop-product a.oz-loop-product__add,
.oz-loop-product a.oz-loop-product__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 4px;
	background: var(--xl-green, #0e4d2c);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	min-width: 0;
	cursor: pointer;
	transition: background-color .2s var(--pz-ease, ease);
}

.woocommerce .oz-loop-product a.oz-loop-product__add:hover,
.woocommerce .oz-loop-product a.oz-loop-product__add:focus-visible,
.oz-loop-product a.oz-loop-product__add:hover,
.oz-loop-product a.oz-loop-product__add:focus-visible {
	background: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
	color: #fff;
}

.oz-loop-product__add-ico { display: inline-flex; flex: 0 0 auto; }

/* `min-width: 0` es lo que permite que el texto se recorte en vez de desbordar
   la tarjeta cuando la etiqueta es larga («Agregar a cotización»). */
.oz-loop-product__add-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Estado «añadiendo» de WooCommerce. */
.woocommerce .oz-loop-product a.oz-loop-product__add.loading { opacity: .75; }
.woocommerce .oz-loop-product a.oz-loop-product__add.added::after { display: none; }

/* Enlace «Ver carrito» que WooCommerce añade tras el AJAX. */
.woocommerce .oz-loop-product a.added_to_cart {
	grid-column: 1 / -1;
	margin-top: 6px;
	color: var(--xl-green, #0e4d2c);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
}

/* =========================================================================
   3 bis. Tarjeta de OZ Cotizador dentro del listado
   La card la pinta el plugin (.ozc-product-card); aquí se le da el aspecto
   Xtralife: foto a sangre sobre arena, precio naranja y fila cantidad + botón.
   Sus estilos se encolan antes que este archivo, así que basta con la
   especificidad del contenedor `ul.products` (salvo dos reglas suyas con
   !important).
   ========================================================================= */

ul.products .ozc-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* El tema no trae un reset global de `box-sizing`, y varias piezas de la card
   combinan `width: 100%` con `padding` (el botón principal, sobre todo). Sin
   esto el botón mide el ancho de su columna + el padding y se sale de la
   tarjeta, pisando la de al lado. */
ul.products .ozc-product-card,
ul.products .ozc-product-card *,
ul.products .ozc-product-card *::before,
ul.products .ozc-product-card *::after {
	box-sizing: border-box;
}

/* ---- Foto: sin marco ni relleno, ocupa toda la caja ---- */

ul.products .ozc-product-card__media {
	aspect-ratio: 1 / 1;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--xl-sand, #e9ebdb);
	overflow: hidden;
}

ul.products .ozc-product-card__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	object-fit: cover !important;
	transition: transform .35s var(--pz-ease, ease);
}

ul.products .ozc-product-card__media:hover img { transform: scale(1.04); }

/* El diseño no lleva ni la etiqueta de marca ni la categoría sobre la foto. */
ul.products .ozc-product-card__badge,
ul.products .ozc-product-card__category { display: none; }

/* ---- Textos ---- */

ul.products .ozc-product-card__section {
	padding: 0;
	margin-top: 6px;
	text-align: left;
}

ul.products .ozc-product-card__media + .ozc-product-card__section { margin-top: 12px; }

/* Sin altura reservada: el precio sube y queda pegado al nombre. La fila de
   botones sigue alineada entre tarjetas porque va con `margin-top: auto`. */
ul.products .ozc-product-card__title {
	min-height: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
}

ul.products .ozc-product-card__title a { color: var(--xl-ink, #1e2a22); }
ul.products .ozc-product-card__title a:hover { color: var(--xl-green, #0e4d2c); }

/* El plugin oculta el precio en las cards; en la tienda sí va (en dólares). */
ul.products .ozc-product-card__price {
	display: block !important;
	margin-top: 4px;
	color: var(--xl-orange, #f26522);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

ul.products .ozc-product-card__price del {
	margin-right: 6px;
	color: var(--xl-muted, #5d6b62);
	font-size: 14px;
	font-weight: 400;
}

ul.products .ozc-product-card__price ins {
	background: transparent;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/* ---- Acciones: cantidad + botón, en una sola fila ---- */

ul.products .ozc-product-card__actions {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

ul.products .ozc-product-card__qty {
	width: auto;
	height: 34px;
	margin: 0;
	padding: 0 4px;
	border-radius: 4px;
	background: var(--xl-sand, #e9ebdb);
	color: var(--xl-green, #0e4d2c);
}

ul.products .ozc-product-card__qty-btn {
	width: 20px;
	height: 32px;
	font-size: 14px;
	line-height: 1;
	color: inherit;
}

ul.products .ozc-product-card__qty-btn:hover { color: var(--xl-orange, #f26522); }

ul.products .ozc-product-card__qty-input {
	width: 26px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

ul.products .ozc-product-card__qty-input::-webkit-outer-spin-button,
ul.products .ozc-product-card__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Botón principal: bloque de una línea que se recorta con «…» en vez de
   desbordar la tarjeta (etiquetas largas como «Agregar a cotización»). */
ul.products .ozc-product-card__btn--primary {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 4px;
	background: var(--xl-green, #0e4d2c);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 34px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color .2s var(--pz-ease, ease);
}

ul.products .ozc-product-card__btn--primary:hover,
ul.products .ozc-product-card__btn--primary:focus-visible {
	background: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
	color: #fff;
}

/* Icono de carrito suelto (packs que lo separan del botón). */
ul.products .ozc-product-card__cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 4px;
	background: var(--xl-green, #0e4d2c);
	color: #fff;
}

ul.products .ozc-product-card__cart-btn:hover { background: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%)); }

/* Botón de WhatsApp, si está activo en el plugin. */
ul.products .ozc-product-card__wa-btn {
	height: 32px;
	border: 1px solid var(--xl-green, #0e4d2c);
	border-radius: 4px;
	background: transparent;
	color: var(--xl-green, #0e4d2c);
	font-size: 11.5px;
}

ul.products .ozc-product-card__wa-btn:hover {
	background: var(--xl-green, #0e4d2c);
	color: #fff;
}

/* =========================================================================
   4. Paginación
   ========================================================================= */

.woocommerce nav.woocommerce-pagination.xl-pagination,
.xl-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(26px, 3vw, 46px);
	text-align: center;
}

.xl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--xl-ink, #1e2a22);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s var(--pz-ease, ease), color .2s var(--pz-ease, ease);
}

.xl-pagination a.page-numbers:hover,
.xl-pagination a.page-numbers:focus-visible {
	background: var(--xl-sand, #e9ebdb);
	color: var(--xl-green, #0e4d2c);
}

.xl-pagination .page-numbers.current {
	background: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
	color: #fff;
}

.xl-pagination .page-numbers.dots { background: transparent; color: var(--xl-muted, #5d6b62); }

.xl-pagination .page-numbers.prev,
.xl-pagination .page-numbers.next { color: var(--xl-ink, #1e2a22); }

/* =========================================================================
   5. Sin resultados y avisos
   ========================================================================= */

.xl-shop__empty {
	padding: clamp(30px, 5vw, 70px) 0;
	text-align: center;
}

.woocommerce .xl-shop__empty .woocommerce-info,
.xl-shop__empty .woocommerce-info {
	display: inline-block;
	border-top-color: var(--xl-green, #0e4d2c);
	background: #f6f8f4;
	color: var(--xl-ink, #1e2a22);
}

/* =========================================================================
   6. Responsive
   ========================================================================= */

/* Solo cambia la variable: la regla de la rejilla es siempre la misma. */
@media (max-width: 1480px) { :root { --xl-shop-cols: 4; } }
@media (max-width: 1180px) { :root { --xl-shop-cols: 3; } }
@media (max-width: 680px)  { :root { --xl-shop-cols: 2; } }
@media (max-width: 400px)  { :root { --xl-shop-cols: 1; } }

@media (max-width: 900px) {
	.xl-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.xl-hero__media { aspect-ratio: 16 / 7; }
	.xl-hero__panel { padding-block: clamp(22px, 5vw, 40px); }
}

@media (max-width: 680px) {
	.oz-loop-product__actions,
	ul.products .ozc-product-card__actions { grid-template-columns: minmax(0, 1fr); }

	.oz-loop-product__qty,
	ul.products .ozc-product-card__qty { justify-content: center; gap: 14px; }
	.xl-shop__toolbar { justify-content: space-between; }
	.xl-shop__sort-select { min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
	.oz-loop-product__media img,
	.oz-loop-product a.oz-loop-product__add,
	.xl-pagination .page-numbers { transition-duration: .01ms !important; }
	.oz-loop-product__media:hover img { transform: none; }
}

/* =========================================================================
   7. El listado fuera de la tienda (páginas y maquetador)
   En una página normal manda el contenedor del tema (.site, recortado a
   --OZ-Container-PC) y el listado se quedaba en una columna estrecha y sin
   margen lateral. La clase la pone oz_tema_2_singular_has_product_loop().
   ========================================================================= */

body.xl-has-product-loop .site {
	width: 100%;
	max-width: none;
}

/* Liberado el ancho, el contenido se queda sin margen lateral. Se repone el
   del sitio, pero solo en páginas sin maquetador: cuando la maqueta la pinta
   .oz-pb-root son sus filas las que deciden ancho y padding (widthMode), y
   añadir aquí un relleno las descuadraría. */
body.xl-has-product-loop .entry-content:not(:has(> .oz-pb-root)) {
	padding-inline: var(--pz-gutter, 24px);
}