/**
 * Favourites — heart button (DZ-5 part B).
 *
 * Neutral styling on purpose: the theme owns the look of the catalog card, this only
 * makes the heart legible and tappable wherever it lands.
 *
 * @since 0.11.2
 */

.esolver-fav {
	background: none;
	border: 0;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	line-height: 1;
	color: #b3b3b3;
	transition: color 0.25s ease, transform 0.15s ease;
}

/* Lo stato non è nell'HTML (Q-26): il cuore atterra sempre spento e si accende un
   istante dopo, quando il client ha risolto la lista. La transizione sul colore e una
   pulsazione appena percettibile fanno leggere quel passaggio come un effetto voluto
   invece che come uno sfarfallio. Il cuore spento è comunque uno stato legittimo,
   quindi senza JS non si vede nulla di rotto. */
.esolver-fav.is-favourite .esolver-fav__icon {
	animation: esolver-fav-pop 0.25s ease;
}

@keyframes esolver-fav-pop {
	0%   { transform: scale(0.7); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.esolver-fav,
	.esolver-fav.is-favourite .esolver-fav__icon {
		transition: none;
		animation: none;
	}
}

.esolver-fav:hover,
.esolver-fav:focus-visible {
	color: #d63638;
}

.esolver-fav.is-favourite {
	color: #d63638;
}

.esolver-fav.is-busy {
	opacity: 0.5;
	cursor: progress;
}

.esolver-fav:active {
	transform: scale(0.9);
}

.esolver-fav__icon {
	font-size: 22px;
	display: inline-block;
}

/* On the catalog card the heart floats over the image, top-right. The card belongs to the
   theme and does not promise us a positioning context, so we establish one ourselves —
   the only rule here that touches the theme's markup, and a harmless one. */
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
}

/* Dimensioni fisse e uguali: il glifo del cuore è più stretto che alto, quindi
   lasciando che sia il contenuto a dimensionare il bottone il `border-radius: 50%`
   produceva un ovale invece di un cerchio. */
.esolver-fav--loop {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

/* Sulla scheda prodotto il cuore è accanto al nome e porta l'etichetta scritta:
   da solo sarebbe un'icona muta in mezzo al riepilogo. */
.esolver-fav--single {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 6px 12px 6px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font-size: 14px;
}

.esolver-fav--single:hover,
.esolver-fav--single:focus-visible {
	border-color: #d63638;
}

.esolver-fav--single .esolver-fav__icon {
	font-size: 18px;
}

/* Il colore del bottone è quello del CUORE, ed è chiaro apposta: spento deve sembrare
   spento. Sulla scheda prodotto però dentro lo stesso bottone c'è anche l'etichetta
   scritta, che quel grigio da icona rendeva quasi invisibile — è la prima cosa che il
   cliente ha cerchiato nella segnalazione del 05/08/2026. L'etichetta si tiene quindi
   un colore da testo; il cuore continua a seguire `currentColor`, hover e stato acceso
   compresi. */
.esolver-fav--single .esolver-fav__label {
	color: #2f3945;
}

/* Favourites list: a row un-hearted from the list fades out, but is NOT removed from the
   DOM — the customer may want to click it again to undo, without a page reload. */
.esolver-favourite-table tr.is-removed {
	opacity: 0.4;
}

.esolver-favourite-table .product-fav,
.esolver-reorder-table .product-fav,
.esolver-favourite-table .product-pick,
.esolver-reorder-table .product-pick {
	width: 1%;
	text-align: center;
}

.esolver-favourite-table .product-add,
.esolver-reorder-table .product-add {
	width: 1%;
	white-space: nowrap;
}

/* Quanto di questa riga è già nel carrello: sotto il nome, in tono minore. Serve a far
   capire che il campo quantità è il totale voluto, non un'aggiunta. */
.esolver-fav-incart,
.esolver-reorder-incart {
	color: #666;
}

/* "Mostriamo i 25 più frequenti su N": dice cosa si sta guardando, così una lista
   tagliata non passa per una lista completa. */
.esolver-reorder-capped {
	color: #666;
	font-size: 14px;
}

/* Import degli acquisti storici: l'attesa va mostrata, non nascosta. */
.esolver-reorder-legacy {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 1em;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f4f4f7;
	color: #3b3b46;
	font-size: 14px;
}

.esolver-reorder-legacy.is-error {
	background: #fdf0f0;
	color: #a02128;
}

.esolver-reorder-legacy__spinner {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: #4a3f95;
	border-radius: 50%;
	animation: esolver-reorder-spin 0.8s linear infinite;
}

.esolver-reorder-legacy.is-error .esolver-reorder-legacy__spinner {
	display: none;
}

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

@media (prefers-reduced-motion: reduce) {
	.esolver-reorder-legacy__spinner {
		animation: none;
	}
}

.esolver-favourite-table .product-qty input,
.esolver-reorder-table .product-qty input {
	width: 6em;
}

.esolver-fav-oos,
.esolver-reorder-oos {
	color: #777;
	font-style: italic;
}