/**
 * Rockbros — Archivos de producto (categorías + tienda) — Fase 3 migración Elementor
 *
 * Estilos del archive nativo Astra/Woo. Reemplaza el template Elementor 16165.
 * Se enqueua SOLO en is_shop()/is_product_category()/is_product_tag() (ver functions.php).
 *
 * Scope: .rb-archive-banner (banner inyectado por inc/archive-hooks.php) +
 * ajustes mínimos al loop nativo. Sin overrides globales.
 */

/* ============================================================
   Banner de marca (reemplaza la franja del template Elementor)
   Inyectado en astra_header_after → full-bleed, antes del contenido.
   ============================================================ */
.rb-archive-banner {
	background-color: var(--rb-black, #1A1A1A);
	width: 100%;
}

.rb-archive-banner__inner {
	max-width: 1240px;
	margin: 0 auto;
	min-height: 125px;
	padding: 28px 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rb-archive-banner__title {
	margin: 0;
	padding-bottom: 14px;
	position: relative;
	color: var(--rb-white, #fff);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	letter-spacing: .4px;
}

/* Subrayado de marca (amarillo Rockbros) */
.rb-archive-banner__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--rb-yellow, #F0C417);
}

@media (max-width: 768px) {
	.rb-archive-banner__inner {
		min-height: 80px;
		padding: 18px 16px;
	}
}

/* ============================================================
   Ajustes del archive nativo
   ============================================================ */

/* El <header> de productos de Woo queda vacío (el título lo da el banner) →
   colapsar su margen para que el breadcrumb no quede con hueco extra arriba. */
.woocommerce-products-header:empty {
	margin: 0;
	padding: 0;
}

/* Breadcrumb: un poco de aire arriba, alineado al contenido. */
.woocommerce-breadcrumb {
	margin-top: 1.2em;
}

/* ============================================================
   Landing de "Luces para bicicleta" (term 1201)
   Recrea el template Elementor 7577 en nativo. Full-width sin sidebar.
   ============================================================ */
.rb-luces-landing {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.rb-luces-intro {
	max-width: 820px;
	margin: 0 auto 2.5em;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--rb-black, #1A1A1A);
}

.rb-luces-section {
	margin: 0 0 3em;
}

.rb-luces-h2 {
	position: relative;
	margin: 0 0 1.1em;
	padding-bottom: 12px;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 700;
	text-align: center;
	color: var(--rb-black, #1A1A1A);
}

.rb-luces-h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--rb-yellow, #F0C417);
}

.rb-luces-more {
	margin: 1.2em 0 0;
	text-align: center;
}

.rb-luces-link {
	display: inline-block;
	padding: 10px 22px;
	border: 2px solid var(--rb-black, #1A1A1A);
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
	color: var(--rb-black, #1A1A1A);
	transition: background-color .2s ease, color .2s ease;
}

.rb-luces-link:hover,
.rb-luces-link:focus {
	background: var(--rb-black, #1A1A1A);
	color: var(--rb-white, #fff);
}

/* Bloque SEO inferior */
.rb-luces-seo {
	max-width: 900px;
	margin: 1em auto 0;
	padding-top: 2.2em;
	border-top: 1px solid #eee;
	line-height: 1.7;
	color: #444;
}

.rb-luces-seo h2 {
	margin: 1.4em 0 .5em;
	font-size: clamp(18px, 2vw, 24px);
	color: var(--rb-black, #1A1A1A);
}

.rb-luces-seo h2:first-child {
	margin-top: 0;
}