/**
 * Rockbros — Rediseño 2026 de la HOME (PREVIEW, ?rediseno=1)
 * ============================================================================
 * Override sobre home.css. Carga DESPUÉS de home.css y SOLO con ?rediseno=1 en
 * la portada (ver functions.php). Scoped bajo .rb-home → no toca la home en vivo;
 * sin el parámetro el archivo no se enqueua y queda el diseño actual intacto.
 *
 * Dirección (réplica fiel ROCKBROS USA, decisiones D1–D4 + refinamientos):
 *   D1 · Esquinas RECTAS (radio 0) salvo botones = píldora (refinamiento PDP) y
 *        swatches = círculos.
 *   D2 · MONOCROMO: negro sobre blanco; el amarillo sale de la UI (eyebrow/CTA
 *        del hero pasan a negro), el rojo solo en precio de oferta y badge.
 *   D3 · EDITORIAL CON AIRE: ritmo vertical amplio.
 *   D4 · TIPOGRAFÍA = Barlow en todo (reemplaza Poppins de home.css).
 *
 * El diseño base aprobado vive en rediseno_web/prototipo/index.html.
 * Como tokens.css aún NO está migrado al :root de global.css, declaramos los
 * tokens del rediseño scopeados en .rb-home (cascada hacia los descendientes).
 *
 * Secciones (mismo orden que home.css):
 *   0. Tokens scopeados + tipografía Barlow
 *   1. Botones
 *   2. Hero editorial claro
 *   3. Barra USP
 *   4. Heads de sección + ritmo vertical
 *   5. Categorías
 *   6. Grids de productos
 *   7. Promo band
 *   8. Reseñas
 *   9. FAQ
 *  10. Blog
 *  11. Newsletter
 *  12. Acerca de
 *  13. Responsive
 * ============================================================================ */

/* ==========================================================================
   0. Tokens scopeados + tipografía Barlow
   --------------------------------------------------------------------------
   Barlow en TODO. home.css hardcodea "Poppins" en varios selectores; los
   pisamos con selectores de igual o mayor especificidad que cargan después.
   ========================================================================== */
.rb-home {
	--rb-font:        "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--rb-text-muted:  #6b6b6b;
	--rb-text-faint:  #8a8a8a;
	--rb-surface-soft:#f7f7f7;
	--rb-hero-bg:     #f4f4f3;
	--rb-border:      #e6e6e6;
	font-family: var(--rb-font);
}

.rb-home,
.rb-home h1, .rb-home h2, .rb-home h3, .rb-home h4,
.rb-home p, .rb-home a, .rb-home span, .rb-home li,
.rb-home summary, .rb-home button, .rb-home input {
	font-family: var(--rb-font);
}

/* Hero al ras del header (como rockbrosusa). Astra mete margin-top en
   article.page y el grupo .rb-home arrastra padding-top: ambos generan ~120px
   de aire muerto entre el menú y el hero. Este stylesheet SOLO carga en la home
   con ?rediseno=1, por eso tocar el contenedor de Astra aquí no afecta a otras
   páginas. */
.rb-home { padding-top: 0 !important; margin-top: 0 !important; }
#primary article.page,
#primary .entry-content { margin-top: 0 !important; padding-top: 0 !important; }
/* La fuente del aire: Astra (ast-page-builder-template) da al .entry-header VACÍO
   (título oculto, h=0) margin-top:4em Y margin-bottom:1.5em. En un bloque vacío
   esos márgenes se auto-colapsan y propagan hacia arriba a través de article/main,
   apareciendo como ~82px de hueco entre el header sticky y el hero. Hay que matar
   AMBOS márgenes (no solo el top). */
#primary .entry-header { margin: 0 !important; }
.ast-single-post-featured-section + article { margin-top: 0 !important; }

/* Títulos de loop de Astra (Poppins por defecto, especificidad alta) + precios. */
.rb-home .rb-products ul.products li.product .woocommerce-loop-product__title,
.rb-home .rb-products ul.products li.product .price,
.rb-home .rb-products ul.products li.product .button {
	font-family: var(--rb-font) !important;
}

/* ==========================================================================
   1. Botones — monocromo, Barlow, mayúsculas (la píldora se conserva, D1 refinado)
   ========================================================================== */
.rb-home .rb-btn {
	font-family: var(--rb-font);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 15px 32px;
}

/* En monocromo el amarillo sale de la UI: el CTA primario del hero pasa a negro. */
.rb-home .rb-btn--yellow {
	background: var(--rb-black);
	color: var(--rb-white);
	border-color: var(--rb-black);
}
.rb-home .rb-btn--yellow:hover,
.rb-home .rb-btn--yellow:focus {
	background: #333;
	color: var(--rb-white);
}

/* ==========================================================================
   2. Hero — editorial claro, alineado a la izquierda, mucho aire
   Pisa el banner oscuro con overlay de home.css (fondo imagen + texto blanco).
   ========================================================================== */
.rb-home .rb-hero {
	min-height: 540px;
	background-image: none;
	background: var(--rb-hero-bg);
	justify-content: flex-start;
	text-align: left;
	padding: clamp(56px, 8vw, 104px) clamp(20px, 9vw, 128px);
}

.rb-home .rb-hero__inner {
	max-width: 640px;
	margin: 0;
}

/* Eyebrow: de píldora amarilla → label en mayúsculas tracked, gris. */
.rb-home .rb-hero__eyebrow {
	background: transparent;
	color: var(--rb-text-muted);
	padding: 0;
	border-radius: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	margin-bottom: 22px;
}

.rb-home .rb-hero h1 {
	color: var(--rb-black);
	text-shadow: none;
	font-weight: 700;
	font-size: clamp(36px, 6vw, 64px);
	line-height: 1.04;
	letter-spacing: -.01em;
	margin-bottom: 22px;
}

.rb-home .rb-hero p {
	color: #5a5a5a;
	max-width: 480px;
	margin: 0 0 30px 0;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.55;
}

.rb-home .rb-hero__cta {
	justify-content: flex-start;
}

/* Botones del hero sobre fondo CLARO (home.css los pinta para fondo oscuro). */
.rb-home .rb-hero .rb-btn--outline {
	background: transparent;
	color: var(--rb-black);
	border-color: var(--rb-black);
}
.rb-home .rb-hero .rb-btn--outline:hover,
.rb-home .rb-hero .rb-btn--outline:focus {
	background: var(--rb-black);
	color: var(--rb-white);
}

/* ==========================================================================
   2b. Hero "split" estilo Vans (bloque core/columns en el contenido, page 8807)
   --------------------------------------------------------------------------
   2 columnas de FOTO (bloques de Imagen, swappables en el editor) + 1 panel
   NEGRO de TEXTO (eyebrow + H1 + oferta gigante + CTA, todo HTML/CSS = ligero,
   editable, nítido, indexable). Clases: .rb-hero2 / __media / __panel. Convive
   con el hero viejo `.rb-hero` (ya no existe en el contenido; sus reglas quedan
   muertas pero inocuas).
   ========================================================================== */
.rb-home .rb-hero2 {
	min-height: clamp(460px, 62vh, 660px);
	gap: 0 !important;
	margin: 0 !important;
	align-items: stretch;
	flex-wrap: nowrap;
}

/* Columnas de foto */
.rb-home .rb-hero2__media {
	flex: 1 1 0 !important;
	margin: 0 !important;
	display: flex;
	overflow: hidden;
}
.rb-home .rb-hero2__media .wp-block-image {
	margin: 0;
	width: 100%;
	display: flex;
}
.rb-home .rb-hero2__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.rb-home .rb-hero2__media:hover img { transform: scale(1.04); }

/* Panel negro de texto */
.rb-home .rb-hero2__panel {
	flex: 0 0 34% !important;
	margin: 0 !important;
	background: var(--rb-black);
	color: #fff;
	display: flex;
}
.rb-home .rb-hero2__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: clamp(28px, 3.2vw, 56px);
	text-align: left;
}
.rb-home .rb-hero2__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 14px;
}
.rb-home .rb-hero2__title {
	font-family: var(--rb-font);
	color: #fff;
	font-weight: 700;
	font-size: clamp(24px, 2.2vw, 38px);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 14px 0;
	text-shadow: none;
}
.rb-home .rb-hero2__sub {
	font-size: clamp(14px, 1.1vw, 18px);
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
	margin: 0 0 4px 0;
}
/* Oferta gigante: número blanco + "% OFF" apilado en rojo (uso de marca = oferta) */
.rb-home .rb-hero2__deal {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	line-height: .85;
	margin: 0 0 26px 0;
}
.rb-home .rb-hero2__deal-num {
	font-family: var(--rb-font);
	font-weight: 700;
	font-size: clamp(64px, 7vw, 124px);
	letter-spacing: -.03em;
	color: #fff;
}
.rb-home .rb-hero2__deal-unit {
	font-family: var(--rb-font);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 32px);
	line-height: .95;
	padding-top: clamp(6px, .8vw, 14px);
	color: var(--rb-sale);
}
/* CTA: botón blanco píldora → rojo en hover */
.rb-home .rb-hero2__btn {
	align-self: flex-start;
	background: #fff;
	color: var(--rb-black);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 15px 32px;
	border-radius: 60px;
	transition: background .2s, color .2s;
}
.rb-home .rb-hero2__btn:hover,
.rb-home .rb-hero2__btn:focus {
	background: var(--rb-sale);
	color: #fff;
}

/* Tablet: una sola foto + panel */
@media (max-width: 1024px) {
	.rb-home .rb-hero2 { min-height: clamp(420px, 56vh, 540px); }
	.rb-home .rb-hero2__media--2 { display: none !important; }
	.rb-home .rb-hero2__panel { flex-basis: 42% !important; }
}

/* Móvil: apila (core/columns ya stackea <782px; reforzamos alturas) */
@media (max-width: 781px) {
	.rb-home .rb-hero2 { display: block !important; min-height: 0; }
	.rb-home .rb-hero2__media {
		display: block;
		height: 44vh;
		min-height: 280px;
	}
	.rb-home .rb-hero2__media--2 { display: none !important; }
	.rb-home .rb-hero2__media .wp-block-image,
	.rb-home .rb-hero2__media img { height: 100%; }
	.rb-home .rb-hero2__panel { display: block; }
	.rb-home .rb-hero2__deal-num { font-size: 88px; }
}

/* ==========================================================================
   3. Barra USP — monocromo Barlow (sin cambios estructurales)
   ========================================================================== */
.rb-home .rb-usp {
	background: var(--rb-surface-soft);
}
.rb-home .rb-usp__item span {
	font-family: var(--rb-font);
	color: var(--rb-black);
}

/* ==========================================================================
   4. Heads de sección + ritmo vertical amplio (D3)
   ========================================================================== */
.rb-home .rb-section {
	padding-top: clamp(32px, 3.5vw, 48px);
	padding-bottom: clamp(32px, 3.5vw, 48px);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Sin margen NI padding extra en el grupo de productos. El group `.rb-products`
   arrastraba 60px de padding vertical interno (medido) que, sumado al padding de
   `.rb-section`, abría ~90px entre el título y las tarjetas. Se anula: el único
   aire entre head y tarjetas debe ser el margin del head (~32px). */
.rb-home .rb-products,
.rb-home .rb-products .woocommerce,
.rb-home .rb-products ul.products {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.rb-home .rb-products {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Tarjetas alineadas arriba (no se estiran al alto de la fila → sin vacío interno). */
.rb-home .rb-products .products {
	align-items: start;
}

.rb-home .rb-sec-head h2 {
	font-family: var(--rb-font);
	font-weight: 700;
	letter-spacing: -.01em;
}
.rb-home .rb-sec-head p {
	color: var(--rb-text-muted);
}

/* ==========================================================================
   5. Categorías — esquinas rectas, aspect 4/5 editorial, label Barlow
   ========================================================================== */
.rb-home .rb-cat-card {
	border-radius: 0;
	aspect-ratio: 4 / 5;
	background: var(--rb-surface-mute, #efefef);
}
.rb-home .rb-cat-card::after {
	background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.05) 55%);
}
.rb-home .rb-cat-card__label {
	/* Mismo tipo que el menú del header (.rb-nav__link): Barlow, mayúsculas y
	   letter-spacing .03em. Se sube el peso a 600 (vs 500 del nav) por legibilidad
	   sobre la foto + gradiente. */
	font-family: var(--rb-font);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* ==========================================================================
   6. Grids de productos — Barlow, recto, oferta en rojo, badge píldora roja
   ========================================================================== */
/* Imagen recta (sin radio). */
.rb-home .rb-products ul.products li.product img {
	border-radius: 0;
}

.rb-home .rb-products ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600;
}

/* Precio: oferta (ins) PRIMERO en rojo, regular tachado (del) DESPUÉS en gris.
   WooCommerce emite el markup como `<del>` (regular) ANTES que `<ins>` (oferta)
   → por defecto sale tachado-izquierda / oferta-derecha (mal). Se invierte con
   flex + `order:-1` en ins (mismo patrón ya usado en la tarjeta de archive). */
.rb-home .rb-products ul.products li.product .price {
	display: flex;             /* habilita `order`; gana al inline nativo */
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;   /* la tarjeta es centrada (default Astra) */
	gap: 8px;
}
.rb-home .rb-products ul.products li.product .price ins,
.rb-home .rb-products ul.products li.product .price ins .woocommerce-Price-amount {
	order: -1;                 /* mueve la oferta ANTES del precio viejo */
	color: var(--rb-sale);
	font-weight: 700;
	text-decoration: none;
}
.rb-home .rb-products ul.products li.product .price del {
	color: #999;
	font-weight: 400;
	font-size: 14px;
}
/* Al volver .price flex, los .screen-reader-text del precio se vuelven flex-items
   y, sin el clip estándar (perfmatters lo purga como CSS no usado), inflan la
   caja. Re-aplicamos sr-only para sacarlos del flujo SIN perder accesibilidad. */
.rb-home .rb-products ul.products li.product .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;
}

/* Botón del loop: negro píldora (se conserva) + Barlow mayúsculas. */
.rb-home .rb-products ul.products li.product .button {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Badge de oferta de Astra (span.onsale "circle") → píldora roja chica arriba-izq. */
.rb-home .rb-products ul.products li.product .astra-shop-thumbnail-wrap,
.rb-home .rb-products ul.products li.product .woocommerce-LoopProduct-link {
	position: relative;
}
.rb-home .rb-products ul.products li.product .onsale {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	background: var(--rb-sale) !important;
	color: var(--rb-white) !important;
	font-family: var(--rb-font) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .03em;
}

/* ==========================================================================
   7. Promo band — eyebrow monocromo (sale el amarillo), título Barlow
   ========================================================================== */
.rb-home .rb-promo h2 {
	font-family: var(--rb-font);
	font-weight: 700;
	letter-spacing: -.01em;
}
.rb-home .rb-promo__eyebrow {
	color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   8. Reseñas — widget de terceros; solo tipografía del head (ya cubierto)
   ========================================================================== */

/* ==========================================================================
   9. FAQ — Barlow (estructura <details> recta ya sirve)
   ========================================================================== */
.rb-home .rb-home-faq summary {
	font-family: var(--rb-font);
	font-weight: 600;
}

/* ==========================================================================
   10. Blog — tarjetas rectas, títulos Barlow
   ========================================================================== */
.rb-home .rb-blog li.wp-block-post {
	border-radius: 0 !important;
}
.rb-home .rb-blog .wp-block-post-featured-image img {
	border-radius: 0;
}
.rb-home .rb-blog .wp-block-post-title {
	font-family: var(--rb-font);
	font-weight: 600;
}

/* ==========================================================================
   11. Newsletter — fuera el amarillo (D2): banda gris clara monocroma
   ========================================================================== */
.rb-home .rb-newsletter {
	background: var(--rb-surface-soft);
}
.rb-home .rb-newsletter h2 {
	font-family: var(--rb-font);
	font-weight: 700;
}
.rb-home .rb-newsletter p {
	color: #5a5a5a;
}
/* Input recto (D1); el botón submit conserva la píldora. */
.rb-home .rb-newsletter input[type="email"],
.rb-home .rb-newsletter input[type="text"] {
	border-radius: 0;
	border-color: var(--rb-border);
}

/* ==========================================================================
   12. Acerca de — Barlow
   ========================================================================== */
.rb-home .rb-about h2 {
	font-family: var(--rb-font);
	font-weight: 700;
}

/* ==========================================================================
   13. Full-width en escritorio (≥1025px)
   --------------------------------------------------------------------------
   El contenido vive en una caja "constrained" de Gutenberg/Astra (max-width
   1200px). En desktop rompemos esa caja SOLO para las secciones con grid y
   bandas → ocupan todo el viewport con gutters laterales cómodos. Los bloques
   de TEXTO (heads de sección, FAQ, "Acerca de") se MANTIENEN angostos: texto a
   todo el ancho mata la legibilidad (y el UX/SEO). Las fotos crecen; se conserva
   la rejilla de 4 columnas.
   ========================================================================== */
@media (min-width: 1025px) {
	/* CLAVE: el tope de 1200px lo impone el layout "constrained" de Gutenberg
	   sobre CADA `.wp-block-group__inner-container` (centrado a content-size). Hay
	   varios niveles anidados (.rb-home › sección › .rb-products), todos capados.
	   Liberar TODOS los inner-container (descendientes) es lo que lleva la home a
	   full-width de punta a punta. Los bloques de texto se auto-limitan por su
	   propio max-width, así que siguen legibles. */
	.rb-home .wp-block-group__inner-container {
		max-width: none !important;
		width: 100% !important;
	}

	/* Por si alguna sección trae su propio tope, se libera también. El selector
	   genérico cubre cualquier banda nueva (p.ej. la promo con countdown). */
	.rb-home > .wp-block-group__inner-container > *,
	.rb-home .rb-hero,
	.rb-home .rb-section,
	.rb-home .rb-promo,
	.rb-home .rb-usp,
	.rb-home .rb-newsletter {
		max-width: none !important;
	}

	/* Gutters laterales cómodos para las secciones de grid (que sí pegan su
	   contenido a los bordes); las bandas full-bleed ya traen su propio padding. */
	.rb-home .rb-section {
		padding-left: clamp(24px, 4vw, 72px);
		padding-right: clamp(24px, 4vw, 72px);
	}

	/* Contenedores internos de grid → full-width (antes tope 1200px en home.css). */
	.rb-home .rb-products,
	.rb-home .rb-cats__grid,
	.rb-home .rb-blog,
	.rb-home .rb-reviews-home,
	.rb-home .rb-usp__grid {
		max-width: none !important;
	}

	/* Los bloques de TEXTO se mantienen angostos y centrados (legibilidad/SEO):
	   head de sección, "Acerca de", FAQ y el inner del hero NO se estiran. */
	.rb-home .rb-sec-head {
		max-width: 720px;
	}
	.rb-home .rb-about,
	.rb-home .rb-home-faq {
		max-width: 820px;
	}

	/* Tarjetas de TAMAÑO uniforme en TODAS las filas (decisión del dueño):
	   a full-width, fijar nº de columnas dejaba tarjetas enormes (4-col) o huecos
	   feos cuando la fila no llenaba. En vez de columnas fijas se fija el ANCHO de
	   tarjeta (~270px = tamaño del listado) con `auto-fill`: reserva las pistas que
	   quepan y las tarjetas NUNCA se estiran, tengan la fila 4, 5 u 8 productos.
	   Resultado: toda tarjeta de la home mide igual. Las filas que no llenan dejan
	   su hueco a la derecha (grid alineado a la izquierda, patrón estándar de tienda).
	   Especificidad (3 clases + elemento) gana al base repeat(4) de home.css; el
	   modificador .rb-products--5 queda inerte (esta regla lo cubre). */
	/* Tarjetas de ancho UNIFORME en todas las filas. Astra fija el nº de columnas vía
	   la clase .columns-N que añade el shortcode (columns-4 vs columns-5) y esa regla
	   ganaba → unas filas con 4 tarjetas grandes y otras con 5. Se fuerza con
	   !important el ancho de tarjeta (auto-fit) y el gap → toda fila reparte el mismo
	   tamaño, tenga 4, 5 u 8 productos; las que no llenan se centran. */
	.rb-home .rb-products ul.products {
		/* CLAVE: con un MÁXIMO fijo, `auto-fit` cuenta columnas por el MÁXIMO (no el
		   mínimo). Por eso `minmax(200px,260px)` daba 4 (5×260+gaps>ancho). Se baja el
		   tope a 210px → 5 tarjetas entran a lo ancho real (5×210+4×24=1146 ≤ 1233) y
		   NUNCA 6 (cap 1280: 6×210+5×24=1380>1280). Las filas que no llenan colapsan
		   sus tracks vacíos y se centran (justify-content:center) → todas las tarjetas
		   miden igual (≈210px) tenga la fila 4, 5 u 8 productos. */
		grid-template-columns: repeat(auto-fit, minmax(190px, 210px)) !important;
		justify-content: center !important;
		gap: 36px 24px !important;
		/* Grid contenido a 1280px y centrado; la banda/sección sigue full-bleed. */
		max-width: 1280px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ==========================================================================
   14. Responsive (móvil)
   ========================================================================== */
/* Móvil/tablet (<1025px): bandas full-bleed + gutter chico y consistente.
   El grupo `.rb-home` arrastra ~27px de padding lateral (Astra/alignfull) que
   indenta el hero Y las secciones por igual. En escritorio el §13 ya lo libera;
   aquí se anula para móvil/tablet → las bandas (hero split, slider) llegan al
   borde como en escritorio, y solo las `.rb-section` de contenido reciben un
   gutter de 16px (las bandas de color quedan full-bleed con su texto a 16px del
   borde). */
@media (max-width: 1024px) {
	.rb-home {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.rb-home .rb-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ==========================================================================
   15. Slider "Lo más vendido" — track horizontal scroll-snap, carga lazy 5 a 5
   ========================================================================== */
/* SOLO esta vitrina se vuelve carrusel: el grupo lleva la clase extra
   .rb-bestsellers-slider, así `.rb-products.rb-bestsellers-slider` (4 clases)
   gana al grid uniforme de §13 (`.rb-products`, 3 clases) y las demás vitrinas
   siguen en grid. Las imágenes fuera de vista NO se descargan (loading=lazy
   nativo dentro de overflow-x:auto) → el mismo ahorro que un AJAX "cargar 5 más"
   sin endpoint ni estados de carga. */
.rb-home .rb-products.rb-bestsellers-slider {
	position: relative;
	/* Mismo tope/centrado que las otras vitrinas (§13 libera .rb-products a
	   full-width con !important; esto, con +1 clase, lo recapa a 1280). */
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	/* GUTTER lateral propio donde viven las flechas → NO se montan sobre las
	   tarjetas. El track (ul) se inseta por este padding; las flechas se colocan
	   absolutas dentro de él. */
	padding-left: 48px !important;
	padding-right: 48px !important;
}
.rb-home .rb-products.rb-bestsellers-slider ul.products {
	display: flex !important;            /* anula display:grid */
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: 24px !important;
	max-width: none !important;
	margin: 0 !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;       /* deja scroll libre con trackpad */
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;               /* Firefox: oculta scrollbar */
	padding-bottom: 4px;                 /* respiro para sombra/borde de tarjeta */
}
.rb-home .rb-products.rb-bestsellers-slider ul.products::-webkit-scrollbar {
	display: none;                       /* Chrome/Edge/Safari: oculta scrollbar */
}
.rb-home .rb-products.rb-bestsellers-slider ul.products li.product {
	flex: 0 0 calc((100% - 4 * 24px) / 5) !important;  /* 5 visibles en desktop */
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

/* Flechas cuadradas monocromas SÓLIDAS, en el gutter lateral (no sobre la
   tarjeta). Las inyecta home-redesign.js. */
.rb-home .rb-slider__arrow {
	position: absolute;
	top: 27%;                            /* ~centro de la imagen cuadrada (el % escala con la tarjeta) */
	transform: translateY(-50%);
	z-index: 5;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--rb-black, #111); /* sólida, no tímida */
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, opacity .15s ease;
}
.rb-home .rb-slider__arrow:hover {
	background: #333;
}
.rb-home .rb-slider__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}
/* Dentro del padding/gutter del contenedor → junto al borde, sin tapar tarjetas. */
.rb-home .rb-slider__arrow--prev { left: 2px; }
.rb-home .rb-slider__arrow--next { right: 2px; }
/* Chevron con un span cuadrado rotado (sin icon-font). */
.rb-home .rb-slider__arrow span {
	display: block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.rb-home .rb-slider__arrow--prev span { transform: rotate(135deg); margin-left: 4px; }
.rb-home .rb-slider__arrow--next span { transform: rotate(-45deg); margin-right: 4px; }

/* Indicador de progreso (pista de swipe). Lo crea home-redesign.js; el CSS solo
   lo muestra en móvil (en desktop hay flechas). El thumb lo mueve el JS. */
.rb-home .rb-slider__progress { display: none; }
.rb-home .rb-slider__progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 30%;
	background: var(--rb-black, #111);
	transition: left .12s linear, width .12s linear;
}

/* Tablet: 3 tarjetas visibles. */
@media (min-width: 768px) and (max-width: 1024px) {
	.rb-home .rb-products.rb-bestsellers-slider ul.products li.product {
		flex-basis: calc((100% - 2 * 24px) / 3) !important;
	}
}
/* Móvil: 2 visibles con "peek" del siguiente; sin flechas (swipe nativo). */
@media (max-width: 767px) {
	/* Sin gutter de flechas en móvil → el track usa todo el ancho de la sección. */
	.rb-home .rb-products.rb-bestsellers-slider {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.rb-home .rb-products.rb-bestsellers-slider ul.products {
		gap: 14px !important;
		scroll-snap-type: x mandatory;
	}
	.rb-home .rb-products.rb-bestsellers-slider ul.products li.product {
		flex-basis: calc((100% - 14px) / 2 - 6px) !important;
	}
	.rb-home .rb-slider__arrow { display: none; }
	/* Pista de swipe: barra fina centrada bajo el carrusel. */
	.rb-home .rb-slider__progress {
		display: block;
		position: relative;
		width: 84px;
		height: 3px;
		margin: 14px auto 0;
		background: #d7d7d7;
		overflow: hidden;
	}
}