/*
 * Menú de categorías anidadas del catálogo.
 *
 * Vive dentro de la plantilla del tema, así que hereda su tipografía y su
 * fondo; sólo el acento es nuestro y viene de la paleta del popup. Los cuatro
 * estilos comparten estas variables y sólo cambian navegación y comportamiento.
 */
.notiwoo-catalog {
	--nwcat-accent: #2563eb;
	--nwcat-accent-text: #ffffff;
	/*
	 * Líneas, fondos suaves y texto atenuado se derivan del color de texto que
	 * hereda del tema, no de `prefers-color-scheme`. La preferencia del sistema
	 * no dice de qué color es la página: un tema claro en un equipo en modo
	 * oscuro dejaba el texto atenuado en blanco sobre blanco.
	 */
	--nwcat-line: color-mix(in srgb, currentColor 14%, transparent);
	--nwcat-soft: color-mix(in srgb, currentColor 6%, transparent);
	--nwcat-muted: color-mix(in srgb, currentColor 66%, transparent);
	--nwcat-radius: 14px;
	--nwcat-sticky-top: 0px;
	container-type: inline-size;
}

/* `hidden` debe ganar a los `display: flex` de los carriles y paneles. */
.notiwoo-catalog [hidden] {
	display: none !important;
}

/*
 * Cuando el tema ignora la compuerta `woocommerce_product_loop`, el loop nativo
 * se ejecuta igual y nuestro catálogo se imprime justo antes. El marcador y la
 * rejilla nativa quedan como hermanos, así que se oculta lo que viene después.
 *
 * Se hace con el marcador y no con una clase en el body a propósito: el
 * marcador sólo existe si de verdad pintamos la carta, de modo que un fallo
 * nuestro nunca puede dejar la tienda sin productos.
 */
.notiwoo-catalog-replaces-loop ~ ul.products,
.notiwoo-catalog-replaces-loop ~ .woocommerce-pagination,
.notiwoo-catalog-replaces-loop ~ .woocommerce-result-count,
.notiwoo-catalog-replaces-loop ~ .woocommerce-ordering,
.notiwoo-catalog-replaces-loop ~ nav.woocommerce-pagination {
	display: none !important;
}

.notiwoo-catalog *,
.notiwoo-catalog *::before,
.notiwoo-catalog *::after {
	box-sizing: border-box;
}

/* ---------- Navegación: base común ---------- */

.notiwoo-catalog__nav {
	margin: 0 0 28px;
}

.notiwoo-catalog__link {
	align-items: center;
	border-radius: 999px;
	color: inherit;
	display: inline-flex;
	gap: 8px;
	line-height: 1.3;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.notiwoo-catalog__link:hover,
.notiwoo-catalog__link:focus-visible {
	text-decoration: none;
}

.notiwoo-catalog__link-image {
	border-radius: 50%;
	flex: 0 0 auto;
	height: 26px;
	object-fit: cover;
	width: 26px;
}

.notiwoo-catalog__link-count {
	background: var(--nwcat-soft);
	border-radius: 999px;
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	min-width: 1.9em;
	padding: 0 6px;
	text-align: center;
}

/* Sobre el acento el contador se aclara respecto a SU propio color de texto,
   que puede ser blanco o casi negro según el acento elegido. */
.notiwoo-catalog__link.is-active .notiwoo-catalog__link-count {
	background: color-mix(in srgb, var(--nwcat-accent-text) 22%, transparent);
}

.notiwoo-catalog__link:focus-visible {
	outline: 2px solid var(--nwcat-accent);
	outline-offset: 2px;
}

/* Modo menú: sin enlaces ni botón, la tarjeta no debe parecer pulsable. */
.notiwoo-catalog.is-menu-mode ul.products li.product,
.notiwoo-catalog.is-menu-mode ul.products li.product * {
	cursor: default;
}

/* ---------- Detalles de la tarjeta ---------- */

/*
 * Etiqueta destacada: píldora con borde y texto en degradado dorado. Los
 * colores son variables para que cada tema la ajuste a su fondo; el dorado
 * de fábrica mantiene contraste tanto sobre claro como sobre oscuro.
 */
.notiwoo-catalog {
	--nwcat-badge-from: #8a6424;
	--nwcat-badge-mid: #d8b567;
	--nwcat-badge-to: #9c7430;
}

.notiwoo-badge {
	align-items: center;
	align-self: flex-start;
	border-radius: 999px;
	display: inline-flex;
	gap: 6px;
	line-height: 1;
	margin: 0 0 8px;
	max-width: 100%;
	padding: 6px 12px 6px 13px;
	position: relative;
}

/* El borde en degradado se recorta con una máscara: así el interior queda
   transparente sobre cualquier fondo, sin tener que adivinar su color. */
.notiwoo-badge::before {
	background: linear-gradient(100deg, var(--nwcat-badge-from), var(--nwcat-badge-mid) 45%, var(--nwcat-badge-to));
	border-radius: inherit;
	content: "";
	inset: 0;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	padding: 1.5px;
	pointer-events: none;
	position: absolute;
}

.notiwoo-badge__label {
	background: linear-gradient(100deg, var(--nwcat-badge-from), var(--nwcat-badge-mid) 45%, var(--nwcat-badge-to));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--nwcat-badge-from);
	-webkit-text-fill-color: transparent;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.notiwoo-badge__icon {
	color: var(--nwcat-badge-to);
	flex: 0 0 auto;
	height: 11px;
	width: 11px;
}

.notiwoo-card__description {
	color: var(--nwcat-muted);
	font-size: 0.9em;
	line-height: 1.55;
	margin: 6px 0 10px;
}

.notiwoo-card__description p {
	margin: 0 0 0.5em;
}

.notiwoo-card__description p:last-child {
	margin-bottom: 0;
}

.notiwoo-card__description strong,
.notiwoo-card__description b {
	color: currentColor;
	font-weight: 700;
}

/* ---------- Secciones ---------- */

/* Deja hueco tanto para la barra del tema como para la nuestra, o el título
   de la sección queda escondido detrás del menú al saltar con un ancla. */
.notiwoo-catalog__section {
	scroll-margin-top: calc(var(--nwcat-sticky-top) + var(--nwcat-nav-height, 0px) + 20px);
}

.notiwoo-catalog__section--depth-1 + .notiwoo-catalog__section--depth-1 {
	margin-top: 48px;
}

.notiwoo-catalog__section--depth-2 {
	margin-top: 32px;
}

.notiwoo-catalog__section-head {
	margin-bottom: 18px;
}

.notiwoo-catalog__section-title {
	letter-spacing: -0.01em;
	margin: 0;
}

.notiwoo-catalog__section--depth-1 > .notiwoo-catalog__section-head {
	align-items: baseline;
	border-bottom: 1px solid var(--nwcat-line);
	padding-bottom: 10px;
}

.notiwoo-catalog__section-description {
	color: var(--nwcat-muted);
	font-size: 0.94em;
	margin-top: 6px;
}

.notiwoo-catalog__section-description p:last-child {
	margin-bottom: 0;
}

/* El grid de productos lo sigue pintando el tema (ul.products): sólo nos
   aseguramos de que respire entre secciones. */
.notiwoo-catalog__panel > ul.products {
	margin-bottom: 0;
}

/* ---------- Estilo 1: fichas horizontales ---------- */

.notiwoo-catalog--chips .notiwoo-catalog__rail {
	display: flex;
	gap: 8px;
	margin: 0;
	overflow-x: auto;
	padding: 4px 2px 10px;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

.notiwoo-catalog--chips .notiwoo-catalog__rail::-webkit-scrollbar {
	height: 4px;
}

.notiwoo-catalog--chips .notiwoo-catalog__rail::-webkit-scrollbar-thumb {
	background: var(--nwcat-line);
	border-radius: 999px;
}

.notiwoo-catalog--chips .notiwoo-catalog__link {
	background: var(--nwcat-soft);
	border: 1px solid transparent;
	flex: 0 0 auto;
	font-size: 0.95em;
	font-weight: 600;
	padding: 9px 15px;
}

.notiwoo-catalog--chips .notiwoo-catalog__link:hover {
	border-color: var(--nwcat-line);
}

.notiwoo-catalog--chips .notiwoo-catalog__link.is-active {
	background: var(--nwcat-accent);
	color: var(--nwcat-accent-text);
}

.notiwoo-catalog--chips .notiwoo-catalog__rail--sub {
	padding-top: 0;
}

.notiwoo-catalog--chips .notiwoo-catalog__rail--sub .notiwoo-catalog__link {
	background: none;
	border-color: var(--nwcat-line);
	font-size: 0.88em;
	font-weight: 500;
	padding: 6px 13px;
}

.notiwoo-catalog--chips .notiwoo-catalog__rail--sub .notiwoo-catalog__link.is-active {
	background: none;
	border-color: var(--nwcat-accent);
	color: var(--nwcat-accent);
}

/* ---------- Estilo 2: menú lateral ---------- */

.notiwoo-catalog--sidebar {
	display: grid;
	gap: 36px;
	grid-template-columns: 240px minmax(0, 1fr);
}

.notiwoo-catalog--sidebar .notiwoo-catalog__nav {
	margin: 0;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__tree {
	list-style: none;
	margin: 0;
	padding: 0;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-1 > .notiwoo-catalog__tree-item + .notiwoo-catalog__tree-item {
	margin-top: 2px;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__link {
	border-radius: 10px;
	display: flex;
	font-size: 0.95em;
	font-weight: 600;
	justify-content: space-between;
	padding: 9px 12px;
	width: 100%;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__link-label {
	min-width: 0;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__link:hover {
	background: var(--nwcat-soft);
}

.notiwoo-catalog--sidebar .notiwoo-catalog__link.is-active {
	background: var(--nwcat-accent);
	color: var(--nwcat-accent-text);
}

/* La jerarquía se marca con una guía vertical, no con sangría a ciegas. */
.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-2 {
	border-left: 2px solid var(--nwcat-line);
	margin: 2px 0 6px 12px;
	padding-left: 10px;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-2 .notiwoo-catalog__link,
.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-3 .notiwoo-catalog__link {
	font-size: 0.89em;
	font-weight: 500;
	padding: 6px 10px;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-2 .notiwoo-catalog__link.is-active {
	background: none;
	color: var(--nwcat-accent);
}

.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-3 {
	border-left: 2px solid var(--nwcat-line);
	list-style: none;
	margin: 2px 0 4px 10px;
	padding-left: 8px;
}

/* ---------- Estilo 3: pestañas ---------- */

.notiwoo-catalog--tabs .notiwoo-catalog__rail {
	border-bottom: 1px solid var(--nwcat-line);
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.notiwoo-catalog--tabs .notiwoo-catalog__rail::-webkit-scrollbar {
	display: none;
}

.notiwoo-catalog--tabs .notiwoo-catalog__link {
	border-bottom: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	color: var(--nwcat-muted);
	flex: 0 0 auto;
	font-size: 0.97em;
	font-weight: 600;
	margin-bottom: -1px;
	padding: 11px 16px;
}

.notiwoo-catalog--tabs .notiwoo-catalog__link:hover {
	color: inherit;
}

.notiwoo-catalog--tabs .notiwoo-catalog__link.is-active {
	border-bottom-color: var(--nwcat-accent);
	color: var(--nwcat-accent);
}

.notiwoo-catalog--tabs .notiwoo-catalog__rail--sub {
	border-bottom: 0;
	gap: 8px;
	padding: 12px 0 0;
}

.notiwoo-catalog--tabs .notiwoo-catalog__rail--sub .notiwoo-catalog__link {
	background: var(--nwcat-soft);
	border-bottom: 0;
	border-radius: 999px;
	font-size: 0.87em;
	margin-bottom: 0;
	padding: 6px 13px;
}

.notiwoo-catalog--tabs .notiwoo-catalog__rail--sub .notiwoo-catalog__link.is-active {
	background: var(--nwcat-accent);
	color: var(--nwcat-accent-text);
}

/* En pestañas sólo se muestra la sección activa: no se hace scroll, se filtra. */
.notiwoo-catalog--tabs .notiwoo-catalog__section--depth-1[hidden] {
	display: none;
}

.notiwoo-catalog--tabs .notiwoo-catalog__section--depth-1 {
	margin-top: 0;
}

.notiwoo-catalog--tabs .notiwoo-catalog__section--depth-1 + .notiwoo-catalog__section--depth-1 {
	margin-top: 0;
}

/* ---------- Estilo 4: acordeón ---------- */

.notiwoo-catalog--accordion {
	display: grid;
	gap: 32px;
	grid-template-columns: 240px minmax(0, 1fr);
}

.notiwoo-catalog--accordion .notiwoo-catalog__nav {
	margin: 0;
}

.notiwoo-catalog--accordion .notiwoo-catalog__tree {
	list-style: none;
	margin: 0;
	padding: 0;
}

.notiwoo-catalog--accordion .notiwoo-catalog__link {
	display: flex;
	font-size: 0.94em;
	justify-content: space-between;
	padding: 7px 10px;
	width: 100%;
}

.notiwoo-catalog--accordion .notiwoo-catalog__link:hover {
	background: var(--nwcat-soft);
}

.notiwoo-catalog--accordion .notiwoo-catalog__link.is-active {
	color: var(--nwcat-accent);
	font-weight: 700;
}

.notiwoo-catalog--accordion .notiwoo-catalog__tree--depth-2 {
	border-left: 2px solid var(--nwcat-line);
	margin: 0 0 6px 10px;
	padding-left: 8px;
}

.notiwoo-catalog--accordion .notiwoo-catalog__section--depth-1 {
	background: var(--nwcat-soft);
	border-radius: var(--nwcat-radius);
	overflow: hidden;
}

.notiwoo-catalog--accordion .notiwoo-catalog__section--depth-1 + .notiwoo-catalog__section--depth-1 {
	margin-top: 12px;
}

.notiwoo-catalog--accordion .notiwoo-catalog__section--depth-1 > .notiwoo-catalog__section-head {
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

.notiwoo-catalog__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 20px;
	text-align: left;
	width: 100%;
}

.notiwoo-catalog__toggle:focus-visible {
	outline: 2px solid var(--nwcat-accent);
	outline-offset: -2px;
}

.notiwoo-catalog__toggle-icon {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	flex: 0 0 auto;
	height: 9px;
	transform: rotate(45deg);
	transition: transform 160ms ease;
	width: 9px;
}

.notiwoo-catalog__toggle[aria-expanded="false"] .notiwoo-catalog__toggle-icon {
	transform: rotate(-45deg);
}

.notiwoo-catalog--accordion .notiwoo-catalog__panel {
	padding: 0 20px 20px;
}

/* La descripción va fuera del botón, así que hay que igualar su sangría a la
   del texto del toggle o queda desalineada respecto al título. */
.notiwoo-catalog--accordion .notiwoo-catalog__section--depth-1 > .notiwoo-catalog__section-head .notiwoo-catalog__section-description {
	margin-top: -4px;
	padding: 0 20px 12px;
}

.notiwoo-catalog--accordion .notiwoo-catalog__panel[hidden] {
	display: none;
}

.notiwoo-catalog--accordion .notiwoo-catalog__section--depth-2 > .notiwoo-catalog__section-head {
	margin-bottom: 12px;
}

/* ---------- Fijado ---------- */

.notiwoo-catalog.is-sticky.notiwoo-catalog--chips .notiwoo-catalog__nav,
.notiwoo-catalog.is-sticky.notiwoo-catalog--tabs .notiwoo-catalog__nav {
	backdrop-filter: blur(10px);
	/* El JS mide el fondo real del tema y lo escribe en --nwcat-sticky-bg. */
	background: var(--nwcat-sticky-bg, transparent);
	/* Sangrado simétrico y generoso: con 8px la barra sobresalía apenas del
	   contenido y se leía como un desalineado, no como una barra. */
	margin-left: -16px;
	margin-right: -16px;
	padding: 10px 16px;
	position: sticky;
	top: var(--nwcat-sticky-top);
	transition: box-shadow 160ms ease, border-color 160ms ease;
	z-index: 40;
}

/* Solo al quedarse pegada aparece la separación. Flotando sin borde, los
   productos parecían cortarse en una línea invisible al pasar por debajo. */
.notiwoo-catalog.is-sticky.is-stuck .notiwoo-catalog__nav {
	box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.55), 0 1px 0 0 var(--nwcat-line);
}

.notiwoo-catalog.is-sticky.notiwoo-catalog--tabs.is-stuck .notiwoo-catalog__nav {
	/* En pestañas la línea inferior ya la dibuja el propio carril. */
	box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.55);
}

/* El carril deja de tener padding inferior propio: ahora lo pone la barra. */
.notiwoo-catalog.is-sticky.notiwoo-catalog--chips .notiwoo-catalog__rail {
	padding-bottom: 0;
}

/* «Todos» encabeza la navegación y se distingue del resto. */
.notiwoo-catalog__link--all {
	font-weight: 700;
}

.notiwoo-catalog--chips .notiwoo-catalog__link--all,
.notiwoo-catalog--tabs .notiwoo-catalog__rail--sub .notiwoo-catalog__link--all {
	position: relative;
}

.notiwoo-catalog--sidebar .notiwoo-catalog__link--all,
.notiwoo-catalog--accordion .notiwoo-catalog__link--all {
	margin-bottom: 6px;
}

.notiwoo-catalog.is-sticky.notiwoo-catalog--sidebar .notiwoo-catalog__nav {
	align-self: start;
	max-height: calc(100vh - var(--nwcat-sticky-top) - 32px);
	overflow-y: auto;
	position: sticky;
	top: calc(var(--nwcat-sticky-top) + 16px);
}

/* ---------- Responsive ---------- */

@container (max-width: 860px) {
	.notiwoo-catalog--sidebar,
	.notiwoo-catalog--accordion {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 860px) {
	.notiwoo-catalog--sidebar,
	.notiwoo-catalog--accordion {
		display: block;
	}

	.notiwoo-catalog--sidebar .notiwoo-catalog__nav,
	.notiwoo-catalog--accordion .notiwoo-catalog__nav {
		margin-bottom: 24px;
		max-height: none;
		position: static;
	}

	/* En móvil el árbol lateral se convierte en un carril deslizable: un menú
	   vertical largo empujaría el catálogo fuera de la primera pantalla. */
	.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-1 {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 8px;
	}

	.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-1 > .notiwoo-catalog__tree-item {
		flex: 0 0 auto;
	}

	.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-1 > .notiwoo-catalog__tree-item > .notiwoo-catalog__link {
		background: var(--nwcat-soft);
		white-space: nowrap;
	}

	.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-2,
	.notiwoo-catalog--sidebar .notiwoo-catalog__tree--depth-3 {
		display: none;
	}

	.notiwoo-catalog__section--depth-1 + .notiwoo-catalog__section--depth-1 {
		margin-top: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.notiwoo-catalog__link,
	.notiwoo-catalog__toggle-icon {
		transition: none;
	}

	.notiwoo-catalog--chips .notiwoo-catalog__rail {
		scroll-behavior: auto;
	}
}

/* Las tarjetas usan la imagen de ficha (más nítida); se recorta cuadrada como la miniatura. */
.notiwoo-catalog li.product img.attachment-woocommerce_single {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	width: 100%;
}