/* ==========================================================================
   Velas Velia — Miga de pan (breadcrumb) de WooCommerce
   --------------------------------------------------------------------------
   Estiliza .woocommerce-breadcrumb para que sea SUTIL y elegante en TODA la
   tienda (catálogo, categorías y ficha de producto). No cambia el markup del
   hook de Woo: solo CSS. Consume EXCLUSIVAMENTE tokens del sistema.

   El tema padre inyecta morado a los enlaces → se fuerza con !important.
   ========================================================================== */

/* --- Contenedor del breadcrumb ------------------------------------------- */
.woocommerce-breadcrumb {
	/* Alineado al ancho de contenido del catálogo / ficha. */
	max-width: var(--container);
	/* Bastante aire arriba: margen + padding-top (el padding no colapsa con el
	   contenedor, así el espacio superior siempre se ve). */
	margin: var(--space-16) auto var(--space-8);
	padding: var(--space-8) var(--space-6) var(--space-3);

	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	line-height: var(--leading-snug);
	color: var(--ink-300); /* tono tenue por defecto (separadores incluidos) */
}

/* --- Enlaces de la ruta -------------------------------------------------- */
.woocommerce-breadcrumb a {
	color: var(--ink-500) !important; /* gana al morado del tema padre */
	text-decoration: none !important;
	transition: color var(--dur) var(--ease-out);
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var(--camel) !important; /* hover discreto de marca */
	text-decoration: none !important;
}

/* La hoja actual (texto suelto sin enlace) hereda el tono tenue del nav, pero
   la marcamos un punto más definida para situar al usuario. */
.woocommerce-breadcrumb {
	color: var(--ink-300);
}

/* ==========================================================================
   Separador elegante
   --------------------------------------------------------------------------
   Woo inserta el separador como texto plano (por defecto " / ") entre los
   enlaces, no como elemento, así que no puede sustituirse de forma fiable solo
   con CSS. Lo dejamos en un tono MUY tenue para que casi desaparezca y la ruta
   respire; el color --ink-300 del contenedor ya lo apaga. Aquí afinamos el
   tamaño y el espaciado del glifo para que se lea como un punto/medio fino.
   ========================================================================== */
.woocommerce-breadcrumb {
	/* Espaciado cómodo alrededor de cada separador de texto. */
	word-spacing: 0.12em;
}

/* Separador propio del catálogo (·) inyectado vía woocommerce_breadcrumb_defaults
   en archive-product.php: punto medio fino, muy tenue, con buen aire lateral. */
.woocommerce-breadcrumb .vv-breadcrumb__sep {
	display: inline-block;
	margin: 0 var(--space-2);
	color: var(--gold-400);
	font-weight: var(--fw-regular);
	word-spacing: normal;
}

/* En móvil reducimos el margen y permitimos que la ruta haga wrap con holgura. */
@media (max-width: 720px) {
	.woocommerce-breadcrumb {
		padding: var(--space-1) var(--space-4);
		margin: var(--space-6) auto var(--space-5);
		font-size: var(--text-2xs);
	}
}