/**
 * Rockbros — Rediseño 2026 de la tarjeta del loop (PREVIEW, ?rediseno=1)
 * ============================================================================
 * Override sobre el loop nativo de Astra/Woo. Carga DESPUÉS de archive.css y
 * SOLO con ?rediseno=1 (ver functions.php). Scoped bajo body.rb-redesign-archive
 * para no tocar el listado en vivo.
 *
 * Diseño aprobado: rediseno_web/prototipo/listado-productos-v1.html
 *   - Imagen sobre fondo claro con borde fino; hover = zoom + botón slide-up.
 *   - Badge oferta = píldora roja pequeña arriba-izq ("Ahorra S/X" / "-XX%").
 *   - Badge "Agotado" = píldora negra arriba-der.
 *   - Precio: oferta roja primero, viejo tachado gris después.
 *   - Swatches = círculos de color bajo el precio (máx 5 + "+N").
 *
 * Mapeo de clases (markup real de Astra):
 *   li.product                      → tarjeta
 *   .astra-shop-thumbnail-wrap      → media (imagen + badges + botón)
 *   span.onsale                     → badge oferta (Astra "circle" / nuestro --save)
 *   .ast-shop-product-out-of-stock  → "Agotado" de Astra (reestilizado a píldora)
 *   .rb-loop-add                    → wrapper del botón agregar (inyectado por PHP)
 *   .ast-quick-view-text            → "Vista rápida" de Astra (se oculta en preview)
 *   .astra-shop-summary-wrap        → título + precio + swatches
 *   .woocommerce-loop-product__title→ título
 *   span.price (del / ins)          → precio (del = viejo, ins = oferta)
 *   .rb-loop-swatches / .swatch     → swatches (inyectado por PHP)
 * ============================================================================ */

/* Tipografía de marca del rediseño (Barlow, igual que PDP/footer).
   !important para ganarle a la tipografía global de Astra (Poppins) sobre el
   <h3> del título, que tiene especificidad alta. */
.rb-redesign-archive .woocommerce-loop-product__title,
.rb-redesign-archive .astra-shop-summary-wrap .price,
.rb-redesign-archive .rb-loop-add .button,
.rb-redesign-archive .rb-loop-swatches .swatch-more {
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ==========================================================================
   Layout y separación de tarjetas
   - Página gris claro + tarjetas BLANCAS → se separan como bloques (las fotos
     son fondo blanco, así que un gris DETRÁS de la imagen quedaría tapado;
     invertirlo es lo que funciona).
   - Ancho de contenido acotado y centrado (antes pegado a los bordes).
   ========================================================================== */
.rb-redesign-archive #content {
	background: #F2F2F2;
}
.rb-redesign-archive .ast-woocommerce-container {
	max-width: 1320px;
	margin-inline: auto;
	padding: 28px clamp(16px, 4vw, 48px) 56px;
}

/* ---- Cabecera editorial de categoría (reemplaza la banda negra + amarillo) ---- */
.rb-redesign-archive .woocommerce-breadcrumb {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--rb-text-muted, #6B6B6B);
}
.rb-redesign-archive .rb-archive-head {
	margin: 0 0 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid #DCDCDC;
}
.rb-redesign-archive .rb-archive-head__title {
	margin: 0;
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--rb-black, #1A1A1A);
	text-align: left;
}

/* Tarjeta = bloque blanco con borde fino + sombra suave (más al hover),
   sobre la página gris → se separan como bloques. */
.rb-redesign-archive ul.products li.product {
	background: #fff;
	border: 1px solid #E8E8E8;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.rb-redesign-archive ul.products li.product:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}

/* Grilla: se mantiene la nativa de Astra (columns-4). Con el sidebar/filtro
   removido (no-sidebar), las 4 columnas quedan a ancho completo y respiran. */

/* ==========================================================================
   Media (imagen + badges + botón)
   ========================================================================== */
.rb-redesign-archive .astra-shop-thumbnail-wrap {
	position: relative;
	overflow: hidden;
	background: #fff;
	margin-bottom: 0;          /* el espacio lo da el padding del bloque de texto */
}
.rb-redesign-archive .astra-shop-thumbnail-wrap img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .4s ease;
}
.rb-redesign-archive li.product:hover .astra-shop-thumbnail-wrap img {
	transform: scale(1.05);
}

/* Ocultar "Vista rápida" de Astra en el preview (no está en el diseño aprobado) */
.rb-redesign-archive .ast-quick-view-text {
	display: none !important;
}

/* ---- Badge de oferta → píldora roja pequeña, arriba-izquierda ----
   Especificidad alta + !important en la posición para ganarle al
   `.onsale.circle` de Astra (que la clava al borde con top/left propios). */
.rb-redesign-archive .astra-shop-thumbnail-wrap span.onsale,
.rb-redesign-archive .astra-shop-thumbnail-wrap .rb-loop-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 3;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	background: var(--rb-sale, #DC3545) !important;
	color: #fff !important;
	font-size: 13px !important;     /* = a la píldora "Agotado" (Astra .circle la achicaba) */
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 7px 14px !important;   /* simétrica con la de Agotado */
	border-radius: 999px;           /* píldora (anula el "circle" de Astra) */
	transform: none !important;
}

/* ---- Badge "Agotado" → reestiliza el de Astra como píldora negra, arriba-der.
   Astra lo centra abajo con fondo blanco translúcido y ESPECIFICIDAD 0,4,2
   (.woocommerce ul.products li.product .ast-shop-product-out-of-stock), por eso
   TODO va con !important (sin él, el fondo blanco de Astra deja el texto blanco
   invisible). ---- */
.rb-redesign-archive .ast-shop-product-out-of-stock {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	z-index: 3;
	background: var(--rb-black, #1A1A1A) !important;
	background-color: var(--rb-black, #1A1A1A) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	padding: 7px 14px !important;
	border-radius: 999px;
}
/* Astra cambia el fondo a blanco al hover del link → mantenerlo negro. */
.rb-redesign-archive .woocommerce-loop-product__link:hover .ast-shop-product-out-of-stock,
.rb-redesign-archive li.product:hover .ast-shop-product-out-of-stock {
	background-color: var(--rb-black, #1A1A1A) !important;
	color: #fff !important;
}

/* ---- Botón "Agregar al carrito" → barra negra slide-up al hover ---- */
.rb-redesign-archive .rb-loop-add {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	transform: translateY(100%);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
}
.rb-redesign-archive li.product:hover .rb-loop-add {
	transform: translateY(0);
	opacity: 1;
}
.rb-redesign-archive .rb-loop-add .button,
.rb-redesign-archive .rb-loop-add .added_to_cart {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--rb-black, #1A1A1A);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	padding: 13px 10px;
	transition: background .2s ease;
}
.rb-redesign-archive .rb-loop-add .button:hover {
	background: var(--rb-black-hover, #333);
	color: #fff;
}
/* El "added_to_cart" (ver carrito) que Woo agrega tras ajax: secundario */
.rb-redesign-archive .rb-loop-add .added_to_cart {
	background: #fff;
	color: var(--rb-black, #1A1A1A);
	border-top: 1px solid var(--rb-border, #E6E6E6);
}

/* ==========================================================================
   Resumen (título + precio + swatches)
   ========================================================================== */
.rb-redesign-archive .astra-shop-summary-wrap {
	text-align: center;
	padding: 10px 16px 9px;    /* ajustado para mantener el alto al subir los gaps internos */
}
.rb-redesign-archive .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rb-black, #1A1A1A);
	padding: 0 0 9px;             /* gap simétrico título→precio */
	margin: 0;
	/* Nombre completo: se permiten varias líneas (el usuario quiere leer todo).
	   min-height de 2 líneas → los precios siguen alineados entre tarjetas con
	   título de 1 ó 2 líneas (la mayoría); títulos más largos empujan hacia abajo. */
	min-height: 2.6em;            /* 2 líneas a line-height 1.3 */
}

/* ---- Valoración (estrellas + conteo) ----
   Estrellas pequeñas para no robar espacio + conteo "(N)" en gris. Monocromo:
   llenas en negro de marca, vacías en gris claro (la fuente "star" de WooCommerce
   dibuja los glifos; NO heredar Barlow en .star-rating o se rompen). El contenedor
   SIEMPRE existe (lo imprime el PHP) y su min-height ≈ al alto de la fila llena →
   las tarjetas SIN reseñas tienen el mismo alto de contenido que las llenas
   (precios alineados, sin estirar la tarjeta = sin hueco). Va entre título y
   precio (reubicado por JS). */
.rb-redesign-archive .rb-loop-rating {
	display: flex !important;     /* gana a cualquier display heredado (si no, el float:right gana) */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 6px;
	min-height: 13px;             /* ≈ alto de la fila llena → empareja con/sin reseñas */
	margin: 9px 0 0;              /* gap simétrico swatches→estrellas */
}
.rb-redesign-archive .rb-loop-rating .review-rating {
	float: none !important;       /* el wrapper de Woo flota a la derecha → resetear */
	order: 0;                     /* estrellas primero */
	margin: 0;
	line-height: 1;
}
.rb-redesign-archive .rb-loop-rating__count {
	order: 1;                     /* conteo después de las estrellas */
}
.rb-redesign-archive .rb-loop-rating .star-rating {
	float: none;
	margin: 0;
	width: 4.8em;                 /* ancho de 5 estrellas a este font-size */
	height: 1em;
	font-size: 14px !important;   /* !important: gana a la regla de Woo (.woocommerce ul.products li.product .star-rating) que tiene más especificidad */
	line-height: 1;
	color: var(--rb-black, #1A1A1A);   /* estrellas llenas */
}
.rb-redesign-archive .rb-loop-rating .star-rating::before {
	color: #D9D9D9;               /* track de estrellas vacías */
	opacity: 1;
}
.rb-redesign-archive .rb-loop-rating .star-rating span::before {
	color: var(--rb-black, #1A1A1A);   /* relleno (porción puntuada) */
}
.rb-redesign-archive .rb-loop-rating__count {
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;              /* escalado con las estrellas (casi su alto) */
	font-weight: 500;
	line-height: 1;
	color: var(--rb-text-muted, #6B6B6B);
	position: relative;
	top: -4px;                    /* centro óptico: Barlow cae bajo el centro de las estrellas (medido por píxeles) */
}

/* ---- Precio: oferta roja primero, viejo tachado gris después ---- */
.rb-redesign-archive .astra-shop-summary-wrap .price {
	display: flex !important;   /* gana al display nativo para que `order` aplique */
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;             /* caja ceñida al texto → el gap lo dan los márgenes */
	margin: 0 !important;       /* Astra mete margen inferior que inflaba el espacio bajo el precio */
	color: var(--rb-black, #1A1A1A);
}
/* Los .screen-reader-text del precio ("El precio original era…") se vuelven
   flex-items al hacer .price display:flex y, sin el clip estándar (perfmatters
   lo purga como CSS no usado), envuelven en líneas extra → inflan el precio a
   ~52px. Re-aplicamos sr-only para sacarlos del flujo SIN perder accesibilidad. */
.rb-redesign-archive .astra-shop-summary-wrap .price .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* del/ins (precio viejo/oferta) heredan un line-height enorme (~3×) que los hace
   de ~51px de alto e infla la caja del precio. Los ceñimos a su texto. */
.rb-redesign-archive .astra-shop-summary-wrap .price del,
.rb-redesign-archive .astra-shop-summary-wrap .price ins,
.rb-redesign-archive .astra-shop-summary-wrap .price .woocommerce-Price-amount,
.rb-redesign-archive .astra-shop-summary-wrap .price bdi {
	line-height: 1 !important;
}
.rb-redesign-archive .astra-shop-summary-wrap .price ins,
.rb-redesign-archive .astra-shop-summary-wrap .price ins .woocommerce-Price-amount {
	order: -1;                 /* mueve la oferta antes del precio viejo */
	text-decoration: none;
	color: var(--rb-sale, #DC3545);
	background: transparent;
	font-size: 20px;           /* explícito: Astra le metía un tamaño menor → quedaba más chico que el tachado */
}
.rb-redesign-archive .astra-shop-summary-wrap .price del,
.rb-redesign-archive .astra-shop-summary-wrap .price del .woocommerce-Price-amount {
	color: #6B6B6B !important;   /* gris medio, más visible (antes #8A8A8A casi invisible) */
	font-weight: 400;
	font-size: 19px;             /* escalado con el precio de oferta */
	opacity: 1 !important;       /* Astra impone opacity:.5 (espec. 0,4,3) → lo difuminaba */
}
/* Precio sin oferta (un solo monto) en negro */
.rb-redesign-archive .astra-shop-summary-wrap .price > .woocommerce-Price-amount {
	color: var(--rb-black, #1A1A1A);
}

/* ---- Swatches de color (círculos) ---- */
.rb-redesign-archive .rb-loop-swatches {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 13px;             /* = alto de un swatch → la fila vacía reserva igual */
	margin-top: 9px;              /* gap simétrico precio→swatches */
}
/* Fila vacía (producto sin variantes de color): solo reserva espacio. */
.rb-redesign-archive .rb-loop-swatches--empty {
	margin-top: 9px;
}
.rb-redesign-archive .rb-loop-swatches .swatch {
	display: block;            /* es un <a>; como flex-item igual se blockifica */
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .2);
	cursor: pointer;
	text-decoration: none;
	transition: box-shadow .2s ease;
}
.rb-redesign-archive .rb-loop-swatches .swatch.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rb-black, #1A1A1A);
}
.rb-redesign-archive .rb-loop-swatches .swatch:hover {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rb-text-muted, #6B6B6B);
}
.rb-redesign-archive .rb-loop-swatches .swatch-more {
	font-size: 10px;
	font-weight: 500;
	color: var(--rb-text-muted, #6B6B6B);
	margin-left: 2px;
	text-decoration: none;
}
.rb-redesign-archive .rb-loop-swatches .swatch-more:hover {
	color: var(--rb-black, #1A1A1A);
}

/* ==========================================================================
   Texto SEO al pie de la categoría (.custom-category-description, plugin)
   Solo restilado + colapso. El texto y sus <h2>/<h3> quedan en el DOM (SEO ok).
   ========================================================================== */
.rb-redesign-archive .custom-category-description {
	max-width: 820px;          /* medida legible (antes ocupaba ~1300px) */
	margin: 44px 0 0;
	padding-top: 28px;
	border-top: 1px solid #DCDCDC;   /* separación de la grilla */
	color: #555;
	font-size: 15px;
	line-height: 1.75;
}
.rb-redesign-archive .custom-category-description h2,
.rb-redesign-archive .custom-category-description h3 {
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rb-black, #1A1A1A);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 1.7em 0 .5em;
}
.rb-redesign-archive .custom-category-description h2 { font-size: 22px; }
.rb-redesign-archive .custom-category-description h3 { font-size: 18px; }
.rb-redesign-archive .custom-category-description > :first-child { margin-top: 0; }
.rb-redesign-archive .custom-category-description p { margin: 0 0 1em; }
.rb-redesign-archive .custom-category-description ul,
.rb-redesign-archive .custom-category-description ol { margin: 0 0 1em 1.2em; }
.rb-redesign-archive .custom-category-description a {
	color: var(--rb-black, #1A1A1A);
	text-decoration: underline;
}

/* ---- Colapso "Leer más" (lo activa el JS) ---- */
.rb-redesign-archive .custom-category-description.rb-seo-collapsed {
	max-height: 8.5em;
	overflow: hidden;
	position: relative;
}
.rb-redesign-archive .custom-category-description.rb-seo-collapsed::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4.5em;
	background: linear-gradient(rgba(242, 242, 242, 0), #F2F2F2);  /* funde al gris de página */
	pointer-events: none;
}
.rb-redesign-archive .rb-seo-toggle {
	display: inline-block;
	margin: 14px 0 0;
	padding: 0 0 2px;
	background: none;
	border: 0;
	border-bottom: 2px solid var(--rb-black, #1A1A1A);
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rb-black, #1A1A1A);
	cursor: pointer;
}
.rb-redesign-archive .rb-seo-toggle:hover {
	color: var(--rb-text-muted, #6B6B6B);
	border-color: var(--rb-text-muted, #6B6B6B);
}

/* Estado AGOTADO: se comunica SOLO con la píldora "Agotado" (sin atenuar la
   imagen — decisión del dueño 2026-06-17). */

/* ==========================================================================
   Responsive — en móvil no hay hover: ocultamos el botón "Agregar" (tapaba la
   imagen). El tap en la tarjeta lleva a la ficha (decisión del dueño 2026-06-20).
   ========================================================================== */
@media (max-width: 767px) {
	.rb-redesign-archive .rb-loop-add {
		display: none;
	}

	/* Tarjetas al máximo ancho: margen lateral mínimo y poco gap entre columnas.
	   Reemplazamos la grilla nativa de Astra (que mete márgenes anchos) por un
	   Grid de 2 columnas iguales, y bajamos el padding de TODOS los contenedores
	   padre de Astra que podrían estar dejando aire a los lados. */
	.rb-redesign-archive .ast-woocommerce-container,
	.rb-redesign-archive .ast-container,
	.rb-redesign-archive #primary,
	.rb-redesign-archive #content .ast-container {
		padding-left: 2px;
		padding-right: 2px;
	}
	.rb-redesign-archive ul.products {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px !important;
		margin: 0 !important;
	}
	.rb-redesign-archive ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}
}