/**
 * Tabla de compra rápida de EcoCantabria.
 *
 * Los colores salen de variables para que el tema pueda cambiarlos sin tocar el plugin:
 * basta con redefinir --eco-verde y compañía en cualquier regla de mayor peso.
 */

.eco-tabla-wrap {
	--eco-verde: #2e7d32;
	--eco-verde-oscuro: #1f5c24;
	--eco-borde: #e2e4e7;
	--eco-suave: #f6f7f7;
	--eco-texto-tenue: #646970;
	--eco-radio: 6px;
	margin: 0 0 32px;
	container-type: inline-size;
}

/* ------------------------------ Barra superior ------------------------------ */

.eco-tabla-titulo { margin: 0 0 16px; }

.eco-tabla-barra {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.eco-tabla-buscar { position: relative; flex: 1 1 260px; }

.eco-tabla-q {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 36px 10px 14px;
	border: 1px solid var(--eco-borde);
	border-radius: var(--eco-radio);
	font-size: 16px; /* 16px evita que el móvil haga zoom al enfocar. */
	line-height: 1.3;
}

.eco-tabla-q:focus { outline: 2px solid var(--eco-verde); outline-offset: 1px; border-color: var(--eco-verde); }

.eco-tabla-q-limpiar {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--eco-texto-tenue);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.eco-tabla-q-limpiar:hover { background: var(--eco-suave); color: #1d2327; }

.eco-tabla-orden-campo { display: inline-flex; align-items: center; gap: 8px; }
.eco-tabla-orden-campo span { font-size: 13px; color: var(--eco-texto-tenue); white-space: nowrap; }
.eco-tabla-orden { padding: 9px 10px; border: 1px solid var(--eco-borde); border-radius: var(--eco-radio); background: #fff; font-size: 15px; }

.eco-tabla-resumen { margin: 0 0 8px; font-size: 13px; color: var(--eco-texto-tenue); }

/* ------------------------------ Tabla ------------------------------ */

.eco-tabla {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 15px;
}

.eco-tabla thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--eco-suave);
	border-bottom: 2px solid var(--eco-borde);
	padding: 10px 12px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #3c3c3c;
	white-space: nowrap;
}

.eco-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--eco-borde); vertical-align: middle; }
.eco-tabla tr.eco-fila:hover td { background: #fafbfa; }
.eco-tabla tr.eco-oculta { display: none; }
.eco-tabla tr.eco-fila-tocada td { background: #f2f9f2; }
.eco-tabla tr.eco-fila-agotada td { opacity: .6; }

.eco-c-imagen { width: 68px; }
.eco-c-imagen img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--eco-radio); }
.eco-sin-imagen {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--eco-radio);
	background: var(--eco-suave) linear-gradient(135deg, #eef1ee 25%, transparent 25%, transparent 50%, #eef1ee 50%, #eef1ee 75%, transparent 75%);
	background-size: 12px 12px;
}

.eco-tabla-nombre { display: inline; color: var(--eco-tinta, #1d2327); font-weight: 600; text-decoration: none; }
.eco-tabla-destacado {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	background: #e6f4ea;
	color: var(--eco-verde-oscuro);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
}
.eco-tabla-nota,
.eco-tabla-unitario { display: block; margin-top: 2px; font-size: 12px; color: var(--eco-texto-tenue); }

.eco-c-precio, .eco-c-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-tabla-precio { font-weight: 600; }
.eco-tabla-total { font-weight: 700; }
.eco-tabla-agotado { font-size: 13px; color: var(--eco-texto-tenue); font-style: italic; }

/* ------------------------------ Cantidad ------------------------------ */

.eco-qty { display: inline-flex; align-items: center; gap: 0; }

.eco-qty-btn {
	width: 34px;
	height: 38px;
	border: 1px solid var(--eco-borde);
	background: #fff;
	color: #1d2327;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s;
}
.eco-qty-btn:first-child { border-radius: var(--eco-radio) 0 0 var(--eco-radio); }
.eco-qty-mas { border-radius: 0 var(--eco-radio) var(--eco-radio) 0; }
.eco-qty-btn:hover { background: #e6f4ea; border-color: var(--eco-verde); }
.eco-qty-btn:focus-visible { outline: 2px solid var(--eco-verde); outline-offset: 1px; z-index: 1; }

.eco-qty-input {
	width: 62px;
	height: 38px;
	box-sizing: border-box;
	padding: 0 6px;
	border: 1px solid var(--eco-borde);
	border-left: 0;
	border-right: 0;
	text-align: center;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.eco-qty-input:focus { outline: 2px solid var(--eco-verde); outline-offset: -2px; }
.eco-qty-unidad { margin-left: 8px; font-size: 12px; color: var(--eco-texto-tenue); }

/* ------------------------------ Botón añadir ------------------------------ */

.eco-tabla .eco-tabla-add {
	display: inline-block;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--eco-radio);
	background: var(--eco-verde);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s;
}
.eco-tabla .eco-tabla-add:hover { background: var(--eco-verde-oscuro); color: #fff; }
.eco-tabla .eco-tabla-add:focus-visible { outline: 2px solid #1d2327; outline-offset: 2px; }
.eco-tabla .eco-tabla-add.eco-cargando { opacity: .7; pointer-events: none; }
.eco-tabla .eco-tabla-add.eco-anadido { background: #1f5c24; }

.eco-tabla-mas {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 12px;
	border: 1px solid var(--eco-verde);
	border-radius: var(--eco-radio);
	background: var(--eco-verde);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.eco-tabla-mas:hover { background: var(--eco-verde-oscuro); border-color: var(--eco-verde-oscuro); }

.eco-tabla-sin-resultados,
.eco-tabla-vacio { margin: 24px 0; padding: 16px; background: var(--eco-suave); border-radius: var(--eco-radio); color: var(--eco-texto-tenue); text-align: center; }

/* ------------------------------ Filtros ------------------------------ */

.eco-filtros { margin-bottom: 24px; font-size: 15px; }
.eco-filtros-abrir { display: none; }

.eco-filtro-bloque + .eco-filtro-bloque { margin-top: 20px; }
.eco-filtro-titulo { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--eco-texto-tenue, #646970); }

.eco-filtro-lista, .eco-filtro-hijas { list-style: none; margin: 0; padding: 0; }
.eco-filtro-hijas { margin-left: 18px; }

.eco-filtro-opcion {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 4px;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1.3;
}
.eco-filtro-opcion:hover { background: #f6f7f7; }
.eco-filtro-opcion input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #2e7d32; }
.eco-filtro-nombre { flex: 1 1 auto; }
.eco-filtro-n { font-size: 12px; color: #8c8f94; font-variant-numeric: tabular-nums; }

.eco-filtros-limpiar {
	margin-top: 14px;
	padding: 8px 14px;
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	cursor: pointer;
}
.eco-filtros-limpiar:hover { background: #f6f7f7; }

/* ------------------------------ Carrito flotante ------------------------------ */

.eco-carrito-flotante {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	max-width: calc(100vw - 24px);
	padding: 12px 16px;
	border-radius: 999px;
	background: #1d2327;
	color: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
	font-size: 15px;
}
.eco-carrito-flotante[hidden] { display: none; }
.eco-carrito-datos { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eco-carrito-n { font-weight: 700; }
.eco-carrito-total { font-variant-numeric: tabular-nums; }
.eco-carrito-nota { flex-basis: 100%; font-size: 12px; opacity: .75; }

.eco-carrito-flotante .eco-carrito-ver,
.eco-carrito-anadir {
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: #2e7d32;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.eco-carrito-anadir { background: #fff; color: #1d2327; }
.eco-carrito-flotante .eco-carrito-ver:hover { background: #1f5c24; color: #fff; }
.eco-carrito-anadir[hidden] { display: none; }

/* ------------------------------ Avisos ------------------------------ */

.eco-tabla-aviso {
	position: fixed;
	left: 50%;
	bottom: 84px;
	transform: translate(-50%, 12px);
	z-index: 10000;
	max-width: min(520px, calc(100vw - 24px));
	padding: 12px 18px;
	border-radius: 8px;
	background: #b32d2e;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, transform .2s, visibility .2s;
}
.eco-tabla-aviso-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ------------------------------ Móvil ------------------------------ */

@media (max-width: 782px) {
	.eco-tabla, .eco-tabla tbody, .eco-tabla tr, .eco-tabla td { display: block; width: auto; }
	.eco-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

	.eco-tabla tr.eco-fila {
		position: relative;
		margin-bottom: 12px;
		padding: 12px 12px 12px 84px;
		min-height: 80px;
		border: 1px solid var(--eco-borde);
		border-radius: var(--eco-radio);
	}
	.eco-tabla tr.eco-fila:hover td { background: transparent; }
	.eco-tabla tr.eco-fila-tocada { border-color: var(--eco-verde); background: #f2f9f2; }
	.eco-tabla tr.eco-fila-tocada td { background: transparent; }

	.eco-tabla td { border: 0; padding: 2px 0; }

	/* La imagen se ancla arriba a la izquierda y el resto fluye a su derecha. */
	.eco-tabla td.eco-c-imagen { position: absolute; left: 12px; top: 12px; padding: 0; }

	.eco-tabla td.eco-c-nombre { font-size: 16px; padding-bottom: 4px; }

	.eco-tabla td.eco-c-origen:empty,
	.eco-tabla td.eco-c-productor:empty { display: none; }

	.eco-tabla td.eco-c-origen::before,
	.eco-tabla td.eco-c-productor::before,
	.eco-tabla td.eco-c-formato::before,
	.eco-tabla td.eco-c-sku::before,
	.eco-tabla td.eco-c-categoria::before,
	.eco-tabla td.eco-c-precio::before,
	.eco-tabla td.eco-c-total::before {
		content: attr(data-label) ': ';
		font-size: 12px;
		color: var(--eco-texto-tenue);
	}

	.eco-tabla td.eco-c-cantidad,
	.eco-tabla td.eco-c-comprar { display: inline-block; margin-top: 8px; vertical-align: middle; }
	.eco-tabla td.eco-c-comprar { margin-left: 10px; }
	.eco-tabla .eco-tabla-add { padding: 11px 18px; }

	.eco-tabla-barra { flex-direction: column; align-items: stretch; }
	.eco-tabla-orden-campo { justify-content: space-between; }
	.eco-tabla-orden { flex: 1 1 auto; }

	/* Los filtros se pliegan tras un botón para no comerse la pantalla. */
	.eco-filtros-abrir {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 11px 14px;
		border: 1px solid #e2e4e7;
		border-radius: 6px;
		background: #fff;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}
	.eco-filtros-cuenta { margin-left: auto; padding: 1px 8px; border-radius: 10px; background: #2e7d32; color: #fff; font-size: 12px; }
	.eco-filtros-cuenta[hidden] { display: none; }
	.eco-filtros-panel { display: none; padding-top: 14px; }
	.eco-filtros.eco-filtros-abiertos .eco-filtros-panel { display: block; }

	.eco-carrito-flotante { left: 12px; right: 12px; transform: none; max-width: none; border-radius: 12px; justify-content: space-between; }
	.eco-tabla-aviso { bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.eco-tabla-aviso, .eco-qty-btn, .eco-tabla-add { transition: none; }
}

/* Por si el tema no define la clase de WordPress para texto solo de lectores de pantalla. */
.eco-tabla-wrap .screen-reader-text,
.eco-filtros .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* ------------------------- Convivencia con el tema -------------------------
 *
 * Todo lo de abajo lleva más peso del que debería porque pelea contra reglas del tema, no
 * contra las de aquí. El tema de la tienda pinta los enlaces en amarillo, deja los campos de
 * formulario casi sin color de texto y convierte el contenido de la página en una caja
 * flexible, que aplasta a la tabla hasta dejar el resumen con una palabra por línea.
 *
 * Se sube la especificidad —nunca !important— anteponiendo el contenedor. Si algún día el tema
 * deja de hacer esto, quitar este bloque entero no cambia nada de lo de arriba.
 */

.eco-tabla-wrap {
	--eco-tinta: #1d2327;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.eco-tabla-wrap * { box-sizing: border-box; }

/* La barra y el resumen ocupan su línea entera: son hermanos de una tabla muy ancha. */
.eco-tabla-wrap .eco-tabla-barra,
.eco-tabla-wrap .eco-tabla-resumen { width: 100%; flex: 0 0 100%; }
.eco-tabla-wrap .eco-tabla-resumen { white-space: normal; }

.eco-tabla-wrap table.eco-tabla {
	width: 100%;
	max-width: 100%;
	margin: 0;
	table-layout: auto;
}

.eco-tabla-wrap .eco-tabla td,
.eco-tabla-wrap .eco-tabla th { vertical-align: middle; }

/* El nombre es lo que se lee primero: que mande él el ancho y que no vaya en color de enlace. */
.eco-tabla-wrap .eco-tabla .eco-c-nombre { width: 34%; min-width: 220px; }

.eco-tabla-wrap .eco-tabla .eco-tabla-nombre {
	color: var(--eco-tinta);
	font-weight: 600;
	text-decoration: none;
}

/*
 * La cantidad. Sin esto el número se pinta del color de texto de los campos del tema, que es
 * casi blanco: la casilla parece vacía y el cliente no sabe qué va a añadir.
 * -webkit-text-fill-color hace falta porque en Safari gana al color a secas.
 */
.eco-tabla-wrap .eco-qty-input,
.eco-tabla-wrap input.eco-qty-input {
	color: var(--eco-tinta) !important;
	-webkit-text-fill-color: var(--eco-tinta) !important;
	background: #fff;
	opacity: 1;
	border: 1px solid var(--eco-borde);
	border-left: 0;
	border-right: 0;
	font-weight: 600;
	min-width: 62px;
	margin: 0;
}

/*
 * El buscador, con el mismo problema que la cantidad: se escribía y no se veía.
 *
 * Aquí y en la casilla de cantidad va !important, y es lo único de esta hoja que lo lleva. Es
 * la misma razón que en la hoja de la tienda: el color del texto de los campos es justo lo que
 * el tema también fuerza, y si se pierde esa pelea el cliente escribe a ciegas. Solo se fuerza
 * el color y el relleno del texto; el tamaño y el borde se dejan al tema.
 */
.eco-tabla-wrap .eco-tabla-q,
.eco-tabla-wrap input.eco-tabla-q {
	color: var(--eco-tinta) !important;
	-webkit-text-fill-color: var(--eco-tinta) !important;
	background: #fff;
	opacity: 1;
}
.eco-tabla-wrap .eco-tabla-q::placeholder {
	color: #767b74;
	-webkit-text-fill-color: #767b74;
	opacity: 1;
}
.eco-tabla-wrap .eco-tabla-orden { color: var(--eco-tinta); background: #fff; }

/*
 * El «−» y el «+» se iban a una esquina del botón: el tema le mete su propio relleno y su
 * interlineado a todos los botones, y el glifo deja de estar en el centro.
 */
.eco-tabla-wrap .eco-qty .eco-qty-btn {
	display: grid;
	place-items: center;
	padding: 0;
	/*
	 * Ancho mínimo en vez de ancho fijo, a propósito. Con caja de borde —que la hay— un tema
	 * que imponga 18px de relleno a cada lado de un botón de 34px deja el contenido en cero y
	 * el signo desaparece. Así, si el tema mete relleno, el botón crece y el signo se ve.
	 */
	width: auto;
	min-width: 40px;
	height: auto;
	min-height: 38px;
	line-height: 1;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

.eco-tabla-wrap .eco-qty { flex-wrap: nowrap; }
.eco-tabla-wrap .eco-qty-unidad { color: var(--eco-tinta); font-weight: 600; }

/* El botón de añadir, en verde y no en el color por defecto de los botones del tema. */
.eco-tabla-wrap .eco-tabla .eco-tabla-add,
.eco-tabla-wrap .eco-tabla a.eco-tabla-add {
	background: var(--eco-verde);
	color: #fff;
}
.eco-tabla-wrap .eco-tabla .eco-tabla-add:hover { background: var(--eco-verde-oscuro); color: #fff; }

@media (max-width: 782px) {
	/* En móvil la tabla ya se pinta como fichas: ahí el nombre no lleva ancho fijo. */
	.eco-tabla-wrap .eco-tabla .eco-c-nombre { width: auto; min-width: 0; }
}

/* ---------------- Categorías plegables y remates del tema ----------------
 *
 * Segunda tanda contra el tema: lo de arriba es el diseño, esto es lo que hace falta para que
 * ese diseño llegue entero a la pantalla en Hello Elementor y dentro de un contenedor flexible.
 */

/* El contenedor de Elementor da a sus hijos el ancho del contenido, no el suyo. El shortcode
   vive dentro de esa caja, así que la tabla se quedaba corta por mucho width:100% que tuviera. */
.elementor-widget-shortcode:has(.eco-tabla-wrap),
.elementor-shortcode:has(.eco-tabla-wrap),
.elementor-widget-container:has(> .eco-tabla-wrap),
.wp-block-shortcode:has(.eco-tabla-wrap) {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	align-self: stretch;
}

.eco-tabla-wrap { flex: 1 1 100%; align-self: stretch; }

/* Las cabeceras, dos puntos más grandes: son el mapa de la tabla. */
.eco-tabla-wrap .eco-tabla thead th { font-size: 14px; }

/*
 * «Ver más productos» salía como un botón diminuto con el texto cortado: el tema le pone su
 * propio ancho y su propio relleno a todo <button>, y ganaba.
 */
.eco-tabla-wrap .eco-tabla-mas {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	padding: 14px 18px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	color: #fff;
	background: var(--eco-verde);
	border: 1px solid var(--eco-verde);
	line-height: 1.3;
}
.eco-tabla-wrap .eco-tabla-mas:hover { background: var(--eco-verde-oscuro); border-color: var(--eco-verde-oscuro); color: #fff; }
.eco-tabla-wrap .eco-tabla-mas:focus-visible { outline: 2px solid var(--eco-tinta); outline-offset: 2px; }

/* ----- Filtros ----- */

.eco-filtros .eco-filtro-titulo {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--eco-borde, #e2e4e7);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--eco-tinta);
}

.eco-filtros .eco-filtro-item { margin: 0; }

/* La fila entera es la zona pulsable: la etiqueta selecciona y el resto despliega. */
.eco-filtros .eco-filtro-fila {
	display: flex;
	align-items: center;
	gap: 2px;
	border-radius: 6px;
}
.eco-filtros .eco-filtro-fila:hover { background: #f4f6f4; }

.eco-filtros .eco-filtro-opcion {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 6px;
	background: none;
}
.eco-filtros .eco-filtro-opcion:hover { background: none; }
.eco-filtros .eco-filtro-nombre { color: var(--eco-tinta); overflow-wrap: anywhere; }
.eco-filtros .eco-filtro-n {
	flex: 0 0 auto;
	min-width: 22px;
	text-align: right;
	font-size: 12px;
	color: #7c8079;
}

/* Las madres, algo más marcadas: son por donde se empieza a buscar. */
.eco-filtros .eco-filtro-lista > .eco-filtro-item > .eco-filtro-fila .eco-filtro-nombre { font-weight: 600; }

.eco-filtros .eco-filtro-abrir {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	color: var(--eco-texto-tenue, #646970);
}
.eco-filtros .eco-filtro-abrir:hover { background: #e6f4ea; color: var(--eco-verde, #2e7d32); }
.eco-filtros .eco-filtro-abrir:focus-visible { outline: 2px solid var(--eco-verde, #2e7d32); outline-offset: 1px; }

/* La punta: un triángulo de bordes, sin imagen ni fuente de iconos que cargar. */
.eco-filtros .eco-filtro-punta {
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .15s ease;
}
.eco-filtros .eco-filtro-item.eco-abierta > .eco-filtro-fila .eco-filtro-punta { transform: rotate(-180deg); }

/* Las hijas, colgadas de una guía para que se vea de quién son. */
.eco-filtros .eco-filtro-hijas {
	margin: 2px 0 6px 16px;
	padding-left: 10px;
	border-left: 2px solid var(--eco-borde, #e2e4e7);
}
.eco-filtros .eco-filtro-hijas .eco-filtro-nombre { font-weight: 400; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.eco-filtros .eco-filtro-punta { transition: none; }
}

/* ------------------------- Móvil: la tabla como fichas -------------------------
 *
 * En el móvil la tabla se pinta como fichas, y ahí el tema se nota el doble: tipos grandes,
 * campos sin caja y controles que se estiran de lado a lado. Esto ordena la ficha —imagen,
 * nombre, datos, acción— y deja los tamaños en algo que se lee con el pulgar.
 */
@media (max-width: 782px) {

	/*
	 * El buscador. Sin altura propia, el campo crecía hasta varios cientos de píxeles y la equis
	 * de borrar, que se coloca respecto a él, acababa suelta a media pantalla.
	 */
	.eco-tabla-wrap .eco-tabla-q {
		height: 48px !important;
		min-height: 0 !important;
		padding: 0 46px 0 14px !important;
		/* Con borde también forzado: un buscador sin caja no parece un buscador. */
		border: 1px solid var(--eco-borde) !important;
		border-radius: var(--eco-radio) !important;
		font-size: 16px;
	}
	/*
	 * El :not([hidden]) no es adorno: la equis nace oculta y solo aparece cuando hay algo que
	 * borrar. Poner display sin más la saca a la fuerza y se queda ahí siempre.
	 */
	.eco-tabla-wrap .eco-tabla-q-limpiar:not([hidden]) {
		display: grid;
		place-items: center;
	}
	.eco-tabla-wrap .eco-tabla-q-limpiar {
		top: 50%;
		right: 8px;
		width: 32px;
		height: 32px;
		min-height: 0;
		padding: 0;
		transform: translateY(-50%);
	}

	/*
	 * Y aquí estaba el hueco enorme entre el buscador y el orden: el buscador lleva
	 * `flex: 1 1 260px` para repartirse el ancho en escritorio, pero en el móvil la barra pasa a
	 * columna y esos 260px dejan de ser ancho para ser ALTO. La caja medía 260 px de alto con un
	 * campo de 48 dentro, y la equis, que se coloca a la mitad de la caja, caía a media pantalla.
	 */
	.eco-tabla-wrap .eco-tabla-buscar { flex: 0 0 auto; width: 100%; }

	.eco-tabla-wrap .eco-tabla-barra { gap: 10px; margin-bottom: 10px; }
	.eco-tabla-wrap .eco-tabla-orden { height: 48px; font-size: 15px; }
	.eco-tabla-wrap .eco-tabla-resumen { margin: 0 0 12px; }

	/* La ficha: tipo base más contenido, para que quepa la información y no tres palabras. */
	.eco-tabla-wrap .eco-tabla tr.eco-fila {
		padding: 14px 14px 14px 88px;
		font-size: 15px;
		line-height: 1.35;
	}
	.eco-tabla-wrap .eco-tabla td { padding: 1px 0; }
	.eco-tabla-wrap .eco-tabla td.eco-c-nombre { font-size: 17px; font-weight: 700; padding-bottom: 6px; }
	.eco-tabla-wrap .eco-tabla td.eco-c-imagen img,
	.eco-tabla-wrap .eco-tabla td.eco-c-imagen .eco-sin-imagen { width: 60px; height: 60px; }

	/* Las etiquetas («Formato:», «Precio:») en pequeño: son la letra chica, no el dato. */
	.eco-tabla-wrap .eco-tabla td::before { font-size: 12px; }
	.eco-tabla-wrap .eco-tabla td.eco-c-precio { font-size: 16px; }
	.eco-tabla-wrap .eco-tabla td.eco-c-precio .eco-tabla-precio { font-weight: 700; }

	/* El total repite el precio cuando solo se lleva uno: entonces sobra. */
	.eco-tabla-wrap .eco-tabla td.eco-c-total { color: var(--eco-texto-tenue); }

	/*
	 * Cantidad y «Añadir», en la misma línea y sin estirarse. El tema pone los campos al 100 %
	 * de ancho, y la casilla de cantidad se comía la ficha entera.
	 */
	.eco-tabla-wrap .eco-tabla td.eco-c-cantidad,
	.eco-tabla-wrap .eco-tabla td.eco-c-comprar { margin-top: 10px; }
	.eco-tabla-wrap .eco-qty-input {
		width: 64px;
		flex: 0 0 64px;
		min-width: 0;
	}
	.eco-tabla-wrap .eco-qty .eco-qty-btn { min-width: 44px; }
	.eco-tabla-wrap .eco-tabla .eco-tabla-add { width: auto; padding: 12px 20px; }

	/* Que la barra flotante no tape la última ficha. */
	.eco-tabla-wrap { padding-bottom: 76px; }
}

/* ------------------------- Buscador, filtros y ficha corta ------------------------- */

/*
 * Los colores viven en variables declaradas sobre .eco-tabla-wrap. Estos dos shortcodes pueden
 * ir sueltos por la página, fuera de esa caja, y entonces cada var() se quedaba sin valor: una
 * declaración con una variable indefinida no es que caiga a un color por defecto, es que se
 * anula entera. Así se perdía el borde del buscador suelto sin que nada lo avisara.
 */
.eco-buscador,
.eco-filtros {
	--eco-verde: #2e7d32;
	--eco-verde-oscuro: #1f5c24;
	--eco-borde: #e2e4e7;
	--eco-suave: #f6f7f7;
	--eco-texto-tenue: #646970;
	--eco-tinta: #1d2327;
	--eco-radio: 6px;
}

/*
 * Y la etiqueta del campo, que solo leen los lectores de pantalla. La clase es de WordPress,
 * pero no todos los temas la definen: donde no está, el «Buscar producto» aparece escrito
 * encima del campo como si fuera parte del diseño.
 */
.eco-buscador .screen-reader-text,
.eco-tabla-wrap .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.eco-buscador { margin: 0 0 18px; }
.eco-buscador-cabecera { margin-bottom: 10px; }
.eco-buscador-titulo {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.25;
	color: var(--eco-tinta, #1d2327) !important;
	-webkit-text-fill-color: var(--eco-tinta, #1d2327) !important;
}
.eco-buscador-texto { margin: 0; font-size: 14px; color: var(--eco-texto-tenue, #646970); }
.eco-buscador .eco-tabla-buscar { position: relative; }

/*
 * La caja del buscador, con borde también en escritorio. Antes solo se forzaba en el móvil y en
 * pantalla grande el tema lo quitaba: quedaba el texto de ayuda flotando, sin caja que lo
 * señalara como un campo donde se escribe.
 */
.eco-tabla-wrap .eco-tabla-q,
.eco-buscador .eco-tabla-q {
	height: 48px;
	border: 1px solid var(--eco-borde) !important;
	border-radius: var(--eco-radio) !important;
	background: #fff;
}
.eco-buscador .eco-tabla-q {
	width: 100%;
	box-sizing: border-box;
	padding: 0 46px 0 14px;
	color: var(--eco-tinta, #1d2327) !important;
	-webkit-text-fill-color: var(--eco-tinta, #1d2327) !important;
	font-size: 16px;
}
.eco-buscador .eco-tabla-q-limpiar {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	cursor: pointer;
}
.eco-buscador .eco-tabla-q-limpiar:not([hidden]) { display: grid; place-items: center; }

/* El rótulo de los filtros, fuera del panel: en el móvil el panel nace plegado. */
.eco-filtros .eco-filtros-titulo {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--eco-tinta, #1d2327) !important;
	-webkit-text-fill-color: var(--eco-tinta, #1d2327) !important;
}

.eco-tabla-wrap .eco-tabla-titulo,
.eco-tabla-wrap .eco-buscador-titulo,
.eco-tabla-wrap .eco-buscador-texto {
	color: var(--eco-tinta, #1d2327) !important;
	-webkit-text-fill-color: var(--eco-tinta, #1d2327) !important;
}

.eco-tabla-wrap .eco-buscador-texto,
.eco-buscador .eco-buscador-texto {
	color: var(--eco-texto-tenue, #646970) !important;
	-webkit-text-fill-color: var(--eco-texto-tenue, #646970) !important;
}

/* El «+ info» solo tiene sentido donde faltan columnas. */
.eco-mas-info { display: none; }

@media (max-width: 782px) {
	/* El botón de filtrar, a todo lo ancho: es la puerta a los filtros en el móvil. */
	.eco-filtros .eco-filtros-abrir {
		display: flex;
		width: 100% !important;
		max-width: none !important;
		min-width: 100%;
		flex: 0 0 100%;
		align-self: stretch;
		box-sizing: border-box;
		justify-content: center;
		background: var(--eco-verde, #2e7d32);
		border-color: var(--eco-verde, #2e7d32);
		color: #fff;
	}

	/*
	 * La ficha se queda en lo que hace falta para comprar: foto, nombre, cantidad, total y
	 * botón. El origen, el formato y el precio unitario están, pero plegados: en una pantalla de
	 * teléfono, seis líneas por producto convierten una lista de 267 en un scroll infinito.
	 */
	.eco-tabla-wrap .eco-tabla tr.eco-fila { position: relative; }
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-origen,
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-productor,
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-formato,
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-sku,
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-categoria,
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-precio { display: none; }

	/*
	 * El :not(:empty) es lo que impide que al desplegar aparezca un «Origen:» sin origen: la
	 * etiqueta la pinta el CSS, así que una celda sin dato sigue ocupando su línea.
	 */
	.eco-tabla-wrap .eco-tabla tr.eco-fila.eco-ficha-abierta td.eco-c-origen:not(:empty),
	.eco-tabla-wrap .eco-tabla tr.eco-fila.eco-ficha-abierta td.eco-c-productor:not(:empty),
	.eco-tabla-wrap .eco-tabla tr.eco-fila.eco-ficha-abierta td.eco-c-formato:not(:empty),
	.eco-tabla-wrap .eco-tabla tr.eco-fila.eco-ficha-abierta td.eco-c-sku:not(:empty),
	.eco-tabla-wrap .eco-tabla tr.eco-fila.eco-ficha-abierta td.eco-c-categoria:not(:empty),
	.eco-tabla-wrap .eco-tabla tr.eco-fila.eco-ficha-abierta td.eco-c-precio:not(:empty) { display: block; }

	.eco-tabla-wrap .eco-mas-info {
		display: inline-flex;
		align-items: center;
		position: absolute;
		top: 10px;
		right: 10px;
		min-height: 0;
		padding: 5px 10px;
		border: 1px solid var(--eco-borde);
		border-radius: 999px;
		background: #fff;
		color: var(--eco-tinta, #1d2327);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.2;
		cursor: pointer;
	}
	.eco-tabla-wrap .eco-mas-info:hover { background: var(--eco-suave); }
	.eco-tabla-wrap tr.eco-ficha-abierta .eco-mas-info {
		background: var(--eco-verde);
		border-color: var(--eco-verde);
		color: #fff;
	}

	/* Deja sitio al botón para que no se monte sobre el nombre. */
	.eco-tabla-wrap .eco-tabla tr.eco-fila td.eco-c-nombre { padding-right: 78px; }

	/* Añadir, a todo lo ancho: es la acción de la ficha. */
	.eco-tabla-wrap .eco-tabla td.eco-c-comprar { display: block; margin-left: 0; }
	.eco-tabla-wrap .eco-tabla .eco-tabla-add {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}