/* CTE Categorías - Shop Automático: estilos base.
   Los colores reales se fijan por instancia desde los ajustes del módulo
   de Divi (variables CSS inyectadas inline); aquí solo van los valores
   por defecto de reserva, en negro. */

.cte-category-shop {
	--cte-accent: #000000;
	--cte-text: #222222;
	--cte-accent-text: #ffffff;
	--cte-border: #e5e5e5;
	--cte-mobile-cols: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: flex-start;
}

.cte-category-shop--filters-right {
	flex-direction: row-reverse;
}

.cte-category-shop--filters-top {
	flex-direction: column;
}

.cte-category-shop__filters {
	flex: 0 0 260px;
	max-width: 260px;
}

.cte-category-shop--filters-top .cte-category-shop__filters {
	max-width: 100%;
	flex: 1 1 100%;
}

.cte-category-shop__content-wrap {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}

/* --- Panel de filtros ---
   El flotado al hacer scroll (position: fixed con límites) lo gestiona
   cte-frontend.js: es más fiable que "position: sticky" porque no
   depende de que ningún contenedor del tema tenga overflow visible. */
.cte-filters {
	border: 1px solid var(--cte-border);
	border-radius: 6px;
	padding: 20px;
	box-sizing: border-box;
	background: #fff;
	/* Si en pantallas pequeñas de escritorio el panel no cabe entero,
	   que haga scroll él solo en vez de salirse de la ventana. */
	max-height: 90vh;
	overflow-y: auto;
}

.cte-filter {
	margin-bottom: 24px;
}

.cte-filter > label {
	display: block;
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--cte-text) !important;
}

/* --- Botón "Filtrar" (solo visible en móvil/tablet, ver media query):
   banda completa fija arriba del todo, siempre visible al hacer scroll.
   El panel se abre como una hoja deslizante desde abajo. --- */
.cte-mobile-filter-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--cte-accent);
	color: var(--cte-accent-text) !important;
	border: none;
	cursor: pointer;
}

.cte-mobile-filter-toggle__icon {
	display: flex;
	align-items: center;
	line-height: 0;
}

.cte-mobile-filter-backdrop {
	display: none;
}

.cte-mobile-filter-close {
	display: none;
}

/* --- Árbol de categorías ---
   !important porque el tema (Divi) trae sus propios estilos por defecto
   para <ul>/<li> (viñeta + márgenes grandes) con más especificidad que
   estas reglas; sin !important no se puede ganar ese pulso de forma fiable. */
.cte-cat-tree,
.cte-cat-tree ul,
.cte-cat-tree li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cte-cat-tree__list {
	margin-top: 2px !important;
}

.cte-filter--category > .cte-cat-tree > .cte-cat-tree__list {
	padding-left: 0 !important;
}

/* Nivel raíz (familias): en negrita, tamaño normal. */
.cte-cat-tree__list[data-depth="0"] > .cte-cat-tree__item > .cte-cat-node {
	font-weight: 600;
	font-size: 13px;
}

/* Niveles anidados (subcategorías): más pequeño, gris, con guía visual a
   la izquierda para que se note claramente que cuelgan de la familia. */
.cte-cat-tree__list:not([data-depth="0"]) {
	padding-left: 16px !important;
	margin-left: 4px !important;
	border-left: 1px solid var(--cte-border);
}

/* :not(.is-active) para que esta regla no le gane en especificidad a
   ".cte-cat-node.is-active" (si no, el texto se quedaba gris sobre fondo
   negro al seleccionar una subcategoría, ilegible). */
.cte-cat-tree__list:not([data-depth="0"]) > .cte-cat-tree__item > .cte-cat-node:not(.is-active) {
	font-weight: 400;
	font-size: 12.5px;
	color: #666 !important;
}

.cte-cat-tree__item {
	margin: 2px 0 !important;
}

/* !important en el color: Divi pinta los enlaces/botones de su contenido
   con el color de acento del tema (aquí se veían en azul/naranja) con más
   especificidad que una clase simple; sin !important no se puede ganar. */
.cte-cat-node {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
	color: var(--cte-text) !important;
	padding: 5px 8px;
	margin: 1px 0;
	text-align: left;
	text-decoration: none !important;
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.cte-cat-node--all {
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
}

.cte-cat-node:hover {
	background: var(--cte-border);
}

.cte-cat-node.is-active {
	background: var(--cte-accent) !important;
	color: var(--cte-accent-text) !important;
}

/* --- Slider de rango (jQuery UI, sin tema externo: pintado a mano) --- */
.cte-slider.ui-slider {
	position: relative;
	height: 4px;
	background: var(--cte-border);
	border-radius: 3px;
	margin: 18px 6px 10px;
}

.cte-slider .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--cte-accent);
	border-radius: 3px;
}

.cte-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	transform: translateY(-50%);
	background: #fff;
	border: 3px solid var(--cte-accent);
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	outline: none;
}

.cte-slider .ui-slider-handle:active {
	cursor: grabbing;
	transform: translateY(-50%) scale(1.15);
}

.cte-slider__values {
	font-size: 13px;
	color: var(--cte-text) !important;
	text-align: center;
}

.cte-filters__reset {
	display: block;
	width: 100%;
	padding: 10px;
	margin-top: 8px;
	border: 1px solid var(--cte-accent);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	background: transparent;
	color: var(--cte-accent) !important;
}

.cte-filters__reset:hover {
	background: var(--cte-accent);
	color: var(--cte-accent-text) !important;
}

/* --- Jerarquía de categorías (columna de contenido) ---
   Sin indentado escalonado a propósito: con varios niveles se iba
   comiendo el ancho y todo se hacía cada vez más pequeño. Los niveles ya
   se distinguen bien solo con la tipografía de cada cte-heading--depth-N
   (ver más abajo), sin necesidad de ir desplazando el bloque a la derecha. */
.cte-family {
	margin-bottom: 30px;
}

/* Se muestra encima del título cuando se filtra por una subcategoría
   concreta: solo el nombre de su categoría principal, para saber a qué
   familia pertenece. */
.cte-breadcrumb {
	margin: 0 0 6px;
	font-size: 13px;
	color: #888 !important;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.cte-heading {
	margin: 0 0 20px;
}

.cte-heading a {
	text-decoration: none !important;
	color: inherit !important;
}

.cte-heading--depth-0 {
	background: var(--cte-accent);
	color: var(--cte-accent-text) !important;
	padding: 12px 16px;
	font-size: 21px;
	border-radius: 4px;
}

.cte-heading--depth-1 {
	color: var(--cte-accent) !important;
	font-size: 18px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--cte-border);
}

.cte-heading--depth-2,
.cte-heading--depth-3 {
	color: var(--cte-text) !important;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* --- Rejilla de producto --- */
.cte-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}

.cte-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cte-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cte-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.cte-category-shop { flex-direction: column; gap: 16px; }
	.cte-category-shop__filters { max-width: 100%; flex: 1 1 100%; }
	.cte-grid--cols-2, .cte-grid--cols-3, .cte-grid--cols-4 {
		grid-template-columns: repeat(var(--cte-mobile-cols), 1fr);
	}
	.cte-grid {
		gap: 14px;
	}

	/* Botón cuadrado (líneas rectas, sin redondear) pegado al borde
	   derecho, centrado verticalmente en
	   la pantalla, solo con el icono (el texto sigue ahí para lectores de
	   pantalla, pero visualmente oculto). En móvil este bloque completo
	   (fondo + botón + hoja) se saca de <body> por JS, así que estos
	   z-index compiten al nivel más alto posible: nada del tema puede
	   quedar por encima (2147483647 es el máximo seguro en todos los
	   navegadores, el mismo truco que usan los banners de cookies). */
	.cte-mobile-filter-toggle {
		display: flex;
		position: fixed !important;
		top: 50%;
		right: 14px;
		left: auto;
		transform: translateY(-50%);
		width: 54px;
		height: 54px;
		padding: 0;
		border-radius: 0;
		align-items: center;
		justify-content: center;
		z-index: 2147483647 !important;
		box-shadow: 0 4px 16px rgba(0,0,0,.35);
	}

	.cte-mobile-filter-toggle__icon svg {
		width: 24px;
		height: 24px;
	}

	/* El texto sigue en el DOM (accesibilidad) pero no se ve. */
	.cte-mobile-filter-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* El botón desaparece mientras el panel está abierto. */
	.cte-category-shop__filters.is-open .cte-mobile-filter-toggle {
		display: none;
	}

	/* El panel se convierte en una hoja deslizante fija desde abajo, con
	   un ancho del 80% (no a todo lo ancho) centrada. */
	.cte-filters {
		position: fixed !important;
		left: 50%;
		right: auto;
		bottom: 0;
		width: 80%;
		max-width: 420px;
		max-height: 82vh;
		overflow-y: auto;
		border-radius: 16px 16px 0 0;
		border: none;
		box-shadow: 0 -6px 24px rgba(0,0,0,.25);
		padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		z-index: 2147483647 !important;
		transform: translate(-50%, 110%);
		transition: transform .25s ease;
	}

	.cte-category-shop__filters.is-open .cte-filters {
		transform: translate(-50%, 0);
	}

	.cte-mobile-filter-backdrop {
		display: block;
		position: fixed !important;
		inset: 0;
		background: rgba(0,0,0,.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
		z-index: 2147483646 !important;
	}

	.cte-category-shop__filters.is-open .cte-mobile-filter-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.cte-mobile-filter-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: none;
		background: var(--cte-border);
		color: var(--cte-text) !important;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	/* Info de la ficha en vertical (etiqueta encima del valor) para que
	   quepa mejor en tarjetas estrechas. */
	.cte-card {
		padding: 10px;
	}

	.cte-card__specs li {
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
		padding: 6px 0;
	}

	.cte-card__specs li span {
		font-size: 10.5px;
		text-transform: uppercase;
		letter-spacing: .03em;
	}
}

.cte-card {
	border-radius: 6px;
	padding: 14px;
	text-align: center;
	transition: box-shadow .2s ease;
	box-sizing: border-box;
}

.cte-card,
.cte-card * {
	box-sizing: border-box;
}

.cte-card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.cte-card__img img {
	max-width: 100%;
	height: auto;
}

.cte-card__title {
	font-size: 16px;
	margin: 10px 0;
}

.cte-card__title a {
	color: var(--cte-text) !important;
	text-decoration: none !important;
}

.cte-card__specs,
.cte-card__specs li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.cte-card__specs {
	display: block !important;
	width: 100% !important;
	margin-bottom: 10px !important;
	font-size: 13px;
	text-align: left;
}

.cte-card__specs li {
	display: flex !important;
	width: 100% !important;
	justify-content: space-between;
	border-bottom: 1px dashed var(--cte-border);
	padding: 4px 0 !important;
}

.cte-card__specs li span {
	color: #777 !important;
}

.cte-card__price {
	font-weight: 700;
	color: var(--cte-accent) !important;
}

.cte-no-results {
	padding: 20px;
	text-align: center;
	color: #777 !important;
}

/* --- Spinner de carga (siempre negro, a propósito) --- */
.cte-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .7);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 5;
}

.cte-spinner.is-active {
	opacity: 1;
	pointer-events: all;
}

.cte-spinner span {
	width: 38px;
	height: 38px;
	border: 4px solid #ddd;
	border-top-color: #000;
	border-radius: 50%;
	animation: cte-spin .7s linear infinite;
}

@keyframes cte-spin {
	to { transform: rotate(360deg); }
}