/**
 * Lo que el plugin pinta en la tienda: el bloque del día de preparación, los destacados y los
 * remates de legibilidad del carrito y la caja.
 *
 * Los remates existen porque el tema de la web deja el texto de los campos casi en blanco: la
 * cantidad del carrito, los datos de facturación y los títulos de las secciones se leían con
 * dificultad o no se leían. Nada de esto cambia el aspecto del tema —los fondos, la tipografía
 * y los colores de marca se quedan como están—, solo se asegura de que lo escrito se vea.
 *
 * Se puede apagar entero en Ajustes → Tienda.
 */

.eco-tienda {
	--eco-tinta: #1d2327;
	--eco-tinta-suave: #4b5563;
	--eco-verde: #2e7d32;
	--eco-borde: #d6d9d4;
}

/* ------------------------------ Día de preparación ------------------------------ */

.eco-checkout-field {
	margin: 24px 0;
	padding: 18px 20px;
	border: 1px solid var(--eco-borde, #dcdcde);
	border-left: 4px solid var(--eco-verde, #2e7d32);
	border-radius: 6px;
	background: #fafbf9;
}
.eco-checkout-field h3 {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.2;
	color: var(--eco-tinta, #1d2327);
}
.eco-checkout-desc { color: var(--eco-tinta-suave, #50575e); font-size: 14px; margin: 0 0 14px; }
.eco-checkout-field .eco-fecha-select select {
	width: 100%;
	max-width: 420px;
	height: 44px;
	padding: 0 12px;
	font-size: 16px;
	color: var(--eco-tinta, #1d2327);
	background: #fff;
	border: 1px solid var(--eco-borde, #dcdcde);
	border-radius: 6px;
}
.eco-checkout-field .eco-fecha-select select:focus { outline: 2px solid var(--eco-verde, #2e7d32); outline-offset: 1px; }
.eco-fecha-confirmacion { padding: 10px 14px; background: #edf7ed; border-left: 4px solid #2e7d32; margin: 14px 0; color: var(--eco-tinta, #1d2327); }

/* ------------------------------ Destacados ------------------------------ */

.eco-destacados-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.eco-destacados-cols-2 .eco-destacados-lista { grid-template-columns: repeat(2, 1fr); }
.eco-destacados-cols-3 .eco-destacados-lista { grid-template-columns: repeat(3, 1fr); }
.eco-destacados-cols-4 .eco-destacados-lista { grid-template-columns: repeat(4, 1fr); }
.eco-destacado { text-align: center; }
.eco-destacado img { width: 100%; height: auto; border-radius: 4px; display: block; margin-bottom: 8px; }
.eco-destacado a { text-decoration: none; }
.eco-destacado-nombre { display: block; font-weight: 600; }
.eco-destacado-origen { display: block; font-size: 13px; color: #646970; }
.eco-destacado-precio { display: block; margin-top: 4px; font-weight: 700; }
@media (max-width: 782px) {
	.eco-destacados-lista { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ------------------------------ Carrito y caja legibles ------------------------------
 *
 * Todo lo de aquí cuelga de .eco-tienda, que se pone en el <body> solo en el carrito y en la
 * caja. Así estas reglas no pueden tocar ninguna otra página, y quitando esa clase desaparecen.
 */

/*
 * El texto de todos los campos.
 *
 * Aquí sí van !important. No es por comodidad: esto pelea contra reglas del tema que pueden
 * llevarlos también, y si pierde la pelea el cliente no ve lo que está escribiendo en su
 * dirección. Solo se fuerza lo imprescindible para leer —color, relleno de texto y fondo—; los
 * tamaños y los márgenes se dejan sin forzar para no romper la maquetación del tema. Y todo esto
 * se apaga entero desde Ajustes.
 *
 * -webkit-text-fill-color hace falta porque en Safari gana al color a secas.
 */
.eco-tienda .woocommerce input[type="text"],
.eco-tienda .woocommerce input[type="email"],
.eco-tienda .woocommerce input[type="tel"],
.eco-tienda .woocommerce input[type="number"],
.eco-tienda .woocommerce input[type="password"],
.eco-tienda .woocommerce input[type="search"],
.eco-tienda .woocommerce textarea,
.eco-tienda .woocommerce select,
.eco-tienda form.checkout input[type="text"],
.eco-tienda form.checkout input[type="email"],
.eco-tienda form.checkout input[type="tel"],
.eco-tienda form.checkout textarea,
.eco-tienda form.checkout select,
.eco-tienda .select2-selection__rendered {
	color: var(--eco-tinta) !important;
	-webkit-text-fill-color: var(--eco-tinta) !important;
	background-color: #fff !important;
	border: 1px solid var(--eco-borde);
	border-radius: 6px;
	opacity: 1;
}

.eco-tienda .woocommerce input::placeholder,
.eco-tienda .woocommerce textarea::placeholder {
	color: #767b74;
	-webkit-text-fill-color: #767b74;
	opacity: 1;
}

.eco-tienda .woocommerce input:focus,
.eco-tienda .woocommerce textarea:focus,
.eco-tienda .woocommerce select:focus { outline: 2px solid var(--eco-verde); outline-offset: 1px; }

/*
 * La cantidad del carrito era lo peor: en blanco sobre blanco, no había forma de saber cuántos
 * kilos llevabas. Aquí se vende al peso, así que además tiene que caber «3,5».
 */
.eco-tienda .woocommerce .quantity .qty,
.eco-tienda .woocommerce td.product-quantity input {
	width: 5.5em;
	min-width: 72px;
	height: 44px;
	padding: 0 8px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--eco-tinta) !important;
	-webkit-text-fill-color: var(--eco-tinta) !important;
	background: #fff !important;
	border: 1px solid var(--eco-borde);
	border-radius: 6px;
}

/* Los títulos de sección salían en blanco sobre el fondo claro del tema. */
.eco-tienda .woocommerce h1,
.eco-tienda .woocommerce h2,
.eco-tienda .woocommerce h3,
.eco-tienda .woocommerce h1 *,
.eco-tienda .woocommerce h2 *,
.eco-tienda .woocommerce h3 *,
.eco-tienda .woocommerce-billing-fields h3,
.eco-tienda .woocommerce-shipping-fields h3,
.eco-tienda .woocommerce-additional-fields h3,
.eco-tienda .woocommerce-billing-fields h3 *,
.eco-tienda #order_review_heading,
.eco-tienda .cart_totals h2 { color: var(--eco-tinta) !important; }

.eco-tienda .woocommerce form .form-row label,
.eco-tienda .woocommerce-checkout .form-row label { color: var(--eco-tinta) !important; font-weight: 600; }

/* La tabla del carrito: cabeceras marcadas, importes alineados y filas con aire. */
.eco-tienda .woocommerce table.shop_table { border-radius: 6px; }
.eco-tienda .woocommerce table.shop_table th { color: var(--eco-tinta); font-weight: 700; }
.eco-tienda .woocommerce table.shop_table td { color: var(--eco-tinta); vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.eco-tienda .woocommerce table.shop_table td.product-price,
.eco-tienda .woocommerce table.shop_table td.product-subtotal,
.eco-tienda .woocommerce table.shop_table th.product-price,
.eco-tienda .woocommerce table.shop_table th.product-subtotal { text-align: right; font-variant-numeric: tabular-nums; }
.eco-tienda .woocommerce table.shop_table td.product-subtotal { font-weight: 700; }
.eco-tienda .woocommerce table.cart img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }

/* El nombre del producto, legible y sin el subrayado de enlace de todo el sitio. */
.eco-tienda .woocommerce table.cart td.product-name a { color: var(--eco-tinta); font-weight: 600; text-decoration: none; }
.eco-tienda .woocommerce table.cart td.product-name a:hover { color: var(--eco-verde); text-decoration: underline; }

/* Quitar una línea: una equis pequeña y roja es fácil de pulsar por error. */
.eco-tienda .woocommerce table.cart td.product-remove a.remove {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	font-size: 18px;
	line-height: 1;
	border-radius: 50%;
	color: #8a1f11;
}
.eco-tienda .woocommerce table.cart td.product-remove a.remove:hover { background: #f6e4e0; color: #8a1f11; }

/* El resumen del pedido, que es donde se mira el total. */
.eco-tienda .woocommerce .cart_totals table.shop_table td,
.eco-tienda .woocommerce .cart_totals table.shop_table th { color: var(--eco-tinta); }
.eco-tienda .woocommerce .order-total .amount { font-size: 20px; font-weight: 700; }

@media (max-width: 600px) {
	.eco-tienda .woocommerce .quantity .qty,
	.eco-tienda .woocommerce td.product-quantity input { min-width: 64px; }
}

/*
 * Avisos de reparto y de envío gratis.
 *
 * El color va en la banda, no en el texto: el aviso tiene que leerse sobre el fondo del tema sea
 * cual sea, y forzar el color del texto aquí pelearía con el del propio aviso de WooCommerce.
 */
.eco-aviso-reparto {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid #2e7d32;
	border-radius: 4px;
	background: #edf7ed;
	color: #1f5c24 !important;
	-webkit-text-fill-color: #1f5c24 !important;
	font-size: 15px;
	line-height: 1.45;
}
.eco-aviso-reparto p { margin: 0 0 6px; color: inherit !important; -webkit-text-fill-color: inherit !important; }
.eco-aviso-reparto p:last-child { margin-bottom: 0; }
.eco-envio-gratis th,
.eco-envio-gratis td { color: #1f5c24 !important; -webkit-text-fill-color: #1f5c24 !important; }

/*
 * La barra del envío gratis.
 *
 * «Te faltan 3,20 €» es un dato; una barra al 80 % es un motivo para añadir una cosa más. El
 * color va en la barra y no en el texto, igual que en el aviso: el tema puede tener el suyo.
 *
 * La anchura se pinta en línea porque es un dato calculado, no un estilo: cambia con el carrito.
 */
.eco-envio-texto { display: block; }
.eco-barra {
	display: block;
	height: 8px;
	margin-top: 8px;
	overflow: hidden;
	background: #dfe4dc;
	border-radius: 4px;
}
.eco-barra > span {
	display: block;
	height: 100%;
	min-width: 4px;
	background: #2e7d32;
	border-radius: 4px;
	transition: width .25s ease-out;
}
.eco-barra-llena > span { background: #1e6b2a; }
.eco-aviso-reparto .eco-barra { background: #cfe3cf; }

@media (prefers-reduced-motion: reduce) {
	.eco-barra > span { transition: none; }
}

/* ------------------------------ El día de reparto, en botones ------------------------------
 *
 * Con dos o tres días, un desplegable esconde justo lo que hay que comparar. Puestos a la vista
 * se leen de una y se pulsan con el pulgar. El radio de verdad sigue ahí, oculto: es lo que
 * hace que funcionen el teclado, el foco y las flechas sin escribir una línea de JavaScript.
 */
.eco-fecha-botones .woocommerce-input-wrapper { display: grid; gap: 8px; }
.eco-fecha-botones input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.eco-fecha-botones label.radio {
	display: block;
	margin: 0;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--eco-tinta, #1d2327) !important;
	background: #fff;
	border: 2px solid var(--eco-borde, #d6d9d4);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.eco-fecha-botones label.radio:hover { border-color: var(--eco-verde, #2e7d32); }
.eco-fecha-botones input[type="radio"]:checked + label.radio {
	border-color: var(--eco-verde, #2e7d32);
	background: #f2f9f2;
	font-weight: 700;
}
/* El foco se ve aunque el radio esté escondido: si no, con el teclado se navega a ciegas. */
.eco-fecha-botones input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid var(--eco-verde, #2e7d32);
	outline-offset: 2px;
}

/* ------------------------------ Cantidad al peso ------------------------------
 *
 * La unidad pegada al número y dos botones para moverlo. Solo en lo que se vende al peso: es
 * donde el campo pide decimales y donde «3,5» sin unidad al lado no dice si son kilos o piezas.
 */
.eco-tienda .quantity.eco-qty-decimal,
.quantity.eco-qty-decimal {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.eco-qty-unidad {
	font-size: 14px;
	font-weight: 600;
	color: var(--eco-tinta-suave, #4b5563);
	white-space: nowrap;
}
.eco-qty-paso {
	flex: 0 0 auto;
	/* 44 px: esto se pulsa con el pulgar, muchas veces seguidas y con una mano. */
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--eco-tinta, #1d2327);
	background: #fff;
	border: 1px solid var(--eco-borde, #d6d9d4);
	border-radius: 8px;
	cursor: pointer;
}
.eco-qty-paso:hover { border-color: var(--eco-verde, #2e7d32); background: #f2f9f2; }
.eco-qty-paso:focus-visible { outline: 2px solid var(--eco-verde, #2e7d32); outline-offset: 1px; }

/* ------------------------------ Precio por unidad ------------------------------
 *
 * «4,60 €» no se puede comparar con nada; «4,60 € · 9,20 € / kg» sí.
 */
.eco-price-unitario {
	display: inline-block;
	margin-left: 6px;
	font-size: 13px;
	font-weight: 400;
	color: var(--eco-tinta-suave, #4b5563);
	white-space: nowrap;
}