/**
 * griglia-viva.css — la griglia prodotti «viva», portata dal negozio Shopify (ntc-griglia.css).
 *
 * ⭐ Quello che cambia rispetto a una griglia normale: il palco chiaro dove la foto si posa, la
 * targhetta obliqua del tipo, il prezzo grosso, il pulsante rosso col fulmine, e — solo dove c'è
 * un mouse — la scheda che si inclina col riflesso, l'anello rosso che gira, le scie di velocità
 * e la macchinina che attraversa il pulsante.
 *
 * ⛔ SOLO ASPETTO, sopra al markup di WooCommerce: nessun modello copiato nel tema, così un
 *    aggiornamento di WooCommerce non porta via niente.
 * ⚠️ Niente fondi scuri sulle schede: il catalogo è fatto di foto su fondo bianco.
 * ⚠️ Le animazioni si spengono da sole con «riduci animazioni» di sistema.
 */

@property --ntc-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.ntc-griglia-viva ul.products li.product {
	--ntc-ink: #12161c;
	--ntc-muto: #6b7280;
	--ntc-linea: #e6e8ec;
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ntc-linea);
	border-radius: 18px;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

/* la riga rossa che cresce in fondo alla scheda */
.ntc-griglia-viva ul.products li.product::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 3px;
	pointer-events: none;
	background: linear-gradient(90deg, var(--ntc-rosso) 0%, #e2554f 55%, rgba(226, 85, 79, 0) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

/* ── il palco della foto: il bianco sparisce, il pezzo si posa ───────────────────────────── */
.ntc-griglia-viva .ntc-cardfoto {
	position: relative;
	display: block;
	overflow: hidden;
	background: radial-gradient(120% 90% at 50% 38%, #fff 0%, #f4f5f7 60%, #e9ebef 100%);
	border-bottom: 1px solid #f0f0f0;
}
.ntc-griglia-viva .ntc-cardfoto img {
	border-bottom: 0 !important;
	mix-blend-mode: multiply;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, filter .5s ease;
}
/* la seconda foto sta sopra la prima e si vede solo al passaggio del mouse */
.ntc-griglia-viva .ntc-cardfoto__seconda {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transform: translateX(18%) skewX(-6deg);
	filter: blur(5px);
	transition: opacity .35s ease, transform .7s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}

/* targhetta del tipo, in basso a sinistra sulla foto */
.ntc-griglia-viva .ntc-card-tipo {
	position: absolute;
	z-index: 3;
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	height: 24px;
	padding: 0 10px 0 8px;
	border-radius: 4px;
	transform: skewX(-10deg);
	background: rgba(18, 22, 28, .92);
	color: #fff;
	box-shadow: 0 8px 16px -8px rgba(18, 22, 28, .5);
	font: 800 10px/24px var(--ntc-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.ntc-griglia-viva .ntc-card-tipo::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 9px;
	margin-right: 7px;
	vertical-align: -1px;
	background: repeating-linear-gradient(90deg, #e2554f 0 3px, transparent 3px 5px);
	transform: skewX(-18deg);
}

/* riflesso che segue il mouse, anello rosso che gira, scie di velocità (li mette il JS) */
.ntc-card-luce {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	transition: opacity .3s ease;
	background: radial-gradient(460px circle at var(--ntc-lx, 50%) var(--ntc-ly, 0%), rgba(255, 255, 255, .36), rgba(255, 255, 255, 0) 42%);
	-webkit-mask-image: linear-gradient(#000 0%, #000 50%, transparent 70%);
	mask-image: linear-gradient(#000 0%, #000 50%, transparent 70%);
}
.ntc-card-anello {
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
	border-radius: inherit;
	padding: 1.5px;
	opacity: 0;
	transition: opacity .35s ease;
	background: conic-gradient(from var(--ntc-giro), rgba(179, 55, 58, 0) 0deg, rgba(179, 55, 58, 0) 210deg, #e2554f 290deg, #b3373a 335deg, rgba(179, 55, 58, 0) 360deg);
	-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, linear-gradient(#000 0 0);
	mask-composite: exclude;
}
@keyframes ntc-anello { to { --ntc-giro: 360deg; } }

.ntc-card-scie { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ntc-card-scie i {
	position: absolute;
	left: -45%;
	width: 40%;
	height: 2px;
	border-radius: 2px;
	opacity: 0;
	background: linear-gradient(90deg, rgba(179, 55, 58, 0), rgba(179, 55, 58, .6), rgba(179, 55, 58, 0));
}
.ntc-card-scie i:nth-child(1) { top: 30%; }
.ntc-card-scie i:nth-child(2) { top: 52%; width: 30%; }
.ntc-card-scie i:nth-child(3) { top: 71%; width: 22%; }
@keyframes ntc-scia { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(420%); opacity: 0; } }

/* ── testi e prezzo ──────────────────────────────────────────────────────────────────────── */
.ntc-griglia-viva ul.products li.product .woocommerce-loop-product__title { color: var(--ntc-ink); transition: color .2s ease; }
.ntc-griglia-viva ul.products li.product .price {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--ntc-ink);
	font-variant-numeric: tabular-nums;
}
.ntc-griglia-viva ul.products li.product .price del { font-size: 14px; font-weight: 600; color: var(--ntc-muto); }
.ntc-griglia-viva ul.products li.product .price ins { color: var(--ntc-rosso); text-decoration: none; }
.ntc-griglia-viva ul.products li.product .price .woocommerce-Price-currencySymbol { font-size: .8em; }

/* ── «Aggiungi al carrello»: rosso pieno col fulmine, lampo e macchinina ─────────────────── */
.ntc-griglia-viva ul.products li.product a.button,
.ntc-griglia-viva ul.products li.product button.button {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 14px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #cf4447 0%, var(--ntc-rosso) 52%, #8f2a2d 100%);
	color: #fff;
	box-shadow: 0 12px 22px -14px rgba(179, 55, 58, .9);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.ntc-griglia-viva ul.products li.product a.button::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ntc-lampo {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 42%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	transition: left .6s ease;
}
.ntc-corsa {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: -70px;
	width: 40px;
	height: 15px;
	margin-top: -8px;
	opacity: 0;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath fill='%23fff' d='M6 30c0-4 2-6.5 6-7.4l16-3.6c6-5 13-8.4 22-8.8 11-.4 20 2.6 28 8.2l18 2.6c7 1 11 4 12 9v4c0 1.6-1.2 2.8-2.8 2.8H100a10 10 0 00-19.6 0H40.2a10 10 0 00-19.6 0H8.8C7.2 36.8 6 35.6 6 34z'/%3E%3Ccircle cx='30.4' cy='36.6' r='6.5' fill='%23fff'/%3E%3Ccircle cx='90.2' cy='36.6' r='6.5' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ntc-corsa::before {
	content: "";
	position: absolute;
	right: 90%;
	top: 50%;
	width: 46px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75));
}
@keyframes ntc-corsa { 0% { left: -70px; opacity: 0; } 14% { opacity: .95; } 86% { opacity: .95; } 100% { left: calc(100% + 40px); opacity: 0; } }

/* ── il passaggio del mouse (solo dove c'è un mouse) ─────────────────────────────────────── */
@media (hover: hover) {
	.ntc-griglia-viva ul.products li.product:hover {
		transform: translateY(-6px);
		border-color: rgba(179, 55, 58, .35);
		box-shadow: 0 30px 50px -26px rgba(18, 22, 28, .38);
	}
	.ntc-griglia-viva ul.products li.product:hover::after { transform: scaleX(1); }
	.ntc-griglia-viva ul.products li.product:hover .ntc-card-anello { opacity: 1; animation: ntc-anello 2.6s linear infinite; }
	.ntc-griglia-viva ul.products li.product:hover .ntc-cardfoto img:not(.ntc-cardfoto__seconda) { transform: scale(1.06) translateX(5px); }
	.ntc-griglia-viva ul.products li.product:hover .ntc-cardfoto:has(.ntc-cardfoto__seconda) img:not(.ntc-cardfoto__seconda) { transform: translateX(-18%) skewX(6deg); filter: blur(5px); }
	.ntc-griglia-viva ul.products li.product:hover .ntc-cardfoto__seconda { opacity: 1; transform: none; filter: none; }
	.ntc-griglia-viva ul.products li.product:hover .ntc-card-scie i { animation: ntc-scia .85s cubic-bezier(.3, .6, .3, 1) both; }
	.ntc-griglia-viva ul.products li.product:hover .ntc-card-scie i:nth-child(2) { animation-delay: .08s; }
	.ntc-griglia-viva ul.products li.product:hover .ntc-card-scie i:nth-child(3) { animation-delay: .16s; }
	.ntc-griglia-viva ul.products li.product:hover .woocommerce-loop-product__title { color: var(--ntc-rosso); }
	.ntc-griglia-viva ul.products li.product a.button:hover {
		transform: translateY(-2px);
		box-shadow: 0 16px 26px -14px rgba(179, 55, 58, 1);
		filter: saturate(1.08);
	}
	.ntc-griglia-viva ul.products li.product a.button:hover .ntc-lampo { left: 120%; }
	.ntc-griglia-viva ul.products li.product a.button:hover .ntc-corsa { animation: ntc-corsa 1.05s cubic-bezier(.5, .05, .3, 1) forwards; }
}

/* la scheda si inclina seguendo il mouse: vince sul semplice «si alza» */
@media (hover: hover) and (pointer: fine) {
	.ntc-griglia-js .ntc-griglia-viva ul.products li.product.ntc-in-volo {
		transform: perspective(1100px) rotateX(var(--ntc-rx, 0deg)) rotateY(var(--ntc-ry, 0deg)) translateY(-8px);
		transition: transform .12s linear, box-shadow .35s ease, border-color .35s ease;
	}
	.ntc-griglia-js .ntc-griglia-viva ul.products li.product.ntc-in-volo .ntc-card-luce { opacity: 1; }
}

/* ── entrata mentre si scorre: da sfocata e bassa a nitida ───────────────────────────────── */
.ntc-griglia-js .ntc-griglia-viva ul.products li.product.ntc-da-rivelare { opacity: 0; transform: translateY(34px) scale(.97); filter: blur(8px); }
.ntc-griglia-js .ntc-griglia-viva ul.products li.product.ntc-da-rivelare.is-rivelata {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity .6s ease var(--ntc-ritardo, 0ms), transform .8s cubic-bezier(.2, .8, .2, 1) var(--ntc-ritardo, 0ms), filter .7s ease var(--ntc-ritardo, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.ntc-griglia-viva ul.products li.product,
	.ntc-griglia-viva ul.products li.product * { animation: none !important; transition: none !important; }
	.ntc-griglia-js .ntc-griglia-viva ul.products li.product.ntc-da-rivelare { opacity: 1; transform: none; filter: none; }
}

/* ⛔ La categoria a testo sotto il titolo sparisce: adesso sta sulla foto, obliqua. Due volte
   lo stesso nome nella stessa scheda è rumore. */
.ntc-griglia-viva ul.products li.product .ntct-scheda-cat { display: none; }

/* ⛔ La categoria a testo (il collegamento sopra al titolo) sparisce: adesso sta sulla foto,
   obliqua. Due volte lo stesso nome nella stessa scheda è rumore. */
/* ⛔ NON basta «il collegamento alla categoria»: il pulsante «Aggiungi al carrello» di
   WooCommerce punta alla PAGINA CORRENTE + ?add-to-cart=123 — su una pagina categoria
   finisce anche lui in questo selettore, e sparisce il pulsante. Misurato il 20/09/2026. */
.ntc-griglia-viva ul.products li.product > a[href*="/product-category/"]:not(.button):not([href*="add-to-cart"]) { display: none; }

/* «Compare» e «Quick view» restano, ma sottovoce: sono strumenti, non richiami. */
.ntc-griglia-viva ul.products li.product .woosc-btn,
.ntc-griglia-viva ul.products li.product .woosq-btn {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	color: var(--ntc-tenue) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
	text-transform: none !important;
}
.ntc-griglia-viva ul.products li.product .woosc-btn::before,
.ntc-griglia-viva ul.products li.product .woosq-btn::before { content: none !important; }