/* ######## Link bar de categorías — home móvil (WEB-7x, 2026-09-20) ########
 * Ver el docblock completo en includes/class-wc-orem-home-linkbar.php.
 * Oculto en escritorio a propósito: ahí la jerarquía la resuelve el menú
 * principal ya arreglado (WEB-7x ronda 1) -- el link bar es un patrón
 * específicamente de descubrimiento móvil (GrowthRock, Rifle Paper Co.).
 *
 * `overflow-x:auto` es una RED, no el plan: las 4 etiquetas están elegidas
 * para caber sin scroll a 375px (medido). Si un día el link bar crece a 5+
 * categorías, esta red evita que se rompa el layout, pero GrowthRock midió
 * que los enlaces que exigen scroll horizontal para verse NO mueven nada
 * de conversión -- si hace falta el scroll, el link bar ya no está
 * cumpliendo su función y hay que recortar etiquetas, no confiar en la
 * red.
 */
.orem-linkbar {
	display: none;
}

@media (max-width: 992px) {
	.orem-linkbar {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px;
		overflow-x: auto;
		scrollbar-width: none;
		background: var(--orem-pearl, #FAF8F5);
		border-bottom: 1px solid var(--orem-champagne, #E8D8C5);
	}
	.orem-linkbar::-webkit-scrollbar {
		display: none;
	}

	.orem-linkbar__pill {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--orem-champagne, #E8D8C5);
		border-radius: 22px;
		background: #fff;
		font-family: Prompt, sans-serif;
		font-size: 13px;
		font-weight: 500;
		color: var(--orem-ink, #2B2B2B);
		text-decoration: none;
		white-space: nowrap;
	}

	/* La primera pill ("Agendas 2027") lleva el acento -- es el producto
	 * estrella, no una categoría más; mismo tono que el resto de "estás
	 * aquí"/CTA del sitio (var(--orem-burgundy)). */
	.orem-linkbar__pill--acento {
		background: var(--orem-burgundy, #6B1D33);
		border-color: var(--orem-burgundy, #6B1D33);
		color: var(--orem-champagne, #E8D8C5);
	}
}