/*
 * ON Negozio Maglie: il negozio vintage con le maglie appese (home, #shop).
 * Porta home.css .shop, .negozio, .maglia, .prods (righe 100-111, 217-257, 594-600, 641-669, 762-769,
 * 806-811, 859-879) con le correzioni finali del prototipo: una riga per prodotto, niente cartellini sul telefono.
 * La nota sulla foto (home.html:203, home.css:239, 601, 718) c'è come nel prototipo, se scritta nel widget.
 * Mobile first: sotto i 600 px il telefono, 600-900 il tablet, da 901 il desktop.
 *
 * Il pendolo lo muove il JS scrivendo --on-maglia-a (angolo), --on-maglia-ry (giro sull'asse verticale)
 * e lo spostamento dell'ombra; con il pendolo acceso (.is-armato) le maglie pendono dritte come nel prototipo,
 * dove il JS riscriveva il transform senza --r; senza JS o con il movimento ridotto stanno ferme alla loro inclinazione.
 */

.on-negozio {
	/* Colori decorativi del mondo ON, derivati dai token: ombre, cartellino, foro e filo */
	--on-negozio-ombra-scena: 0 40px 80px -30px color-mix(in srgb, var(--on-shade) 90%, transparent);
	--on-negozio-vignetta: radial-gradient(ellipse at 50% 30%, transparent 50%, color-mix(in srgb, var(--on-shade) 45%, transparent) 100%);
	--on-negozio-ombra-maglia: color-mix(in srgb, var(--on-shade) 60%, transparent);
	--on-negozio-ombra-tag: 0 6px 10px color-mix(in srgb, var(--on-shade) 40%, transparent);
	--on-negozio-bordo-foro: color-mix(in srgb, var(--on-card-back), var(--on-ink) 18%);
	--on-negozio-filo: color-mix(in srgb, var(--on-card-back), var(--on-ink) 10%);

	position: relative;
	padding-block: 44px 56px;
	background-color: var(--on-black);
	color: var(--on-white);
}

/* La grana della carta su tutta la sezione, come nel prototipo (.shop::before, home.css:113-114) */
.on-negozio::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-grain);
	opacity: .5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.on-negozio > .on-container {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------
 * Testata
 * ------------------------------------------------------------------ */

.on-negozio__testa {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 24px;
}

/* L'occhiello: verde ON come nel prototipo (.shop h2 > .k, home.css:808; --green-soft è #008D33 da scene.css:623) */
.on-negozio .on-negozio__occhiello {
	margin: 0 0 12px;
	color: var(--on-green);
	font-family: var(--on-font-cond);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.5;
	text-transform: uppercase;
}

/* Selettore doppio: la Theme Style del kit (.elementor-kit-N h2) imporrebbe la sua misura */
.on-negozio .on-negozio__titolo {
	margin: 0;
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--on-lh-title);
	text-transform: uppercase;
	text-wrap: balance;
}

.on-negozio .on-negozio__lede {
	max-width: 44ch;
	margin: 0;
	color: var(--on-ink-inv-2);
	font-size: 1rem;
	line-height: 1.5;
}

.on-negozio .on-negozio__vai {
	margin: 16px 0 0;
}

.on-negozio__lede + .on-negozio__vai {
	margin-top: 16px;
}

.on-negozio .on-negozio__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Sul telefono l'area di tocco è alta 44 px senza spostare il layout (home.css:731) */
	margin-block: -10px -7px;
	padding-block: 10px;
	border-bottom: 1.5px solid currentColor;
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	/* L'interlinea del corpo del prototipo (concept.css:26): fissa la distanza della riga sotto il testo */
	line-height: 1.55;
	text-decoration: none;
	text-transform: uppercase;
}

.on-negozio .on-negozio__more:hover {
	color: var(--on-white);
}

/* ---------------------------------------------------------------------
 * La scena: la foto del negozio, la stanga a un quinto dell'altezza, le maglie appese
 * ------------------------------------------------------------------ */

.on-negozio__palco {
	position: relative;
	padding-inline: var(--on-gutter);
}

.on-negozio__scena {
	position: relative;
	max-width: var(--on-container);
	margin: 0 auto;
	overflow: hidden;
	aspect-ratio: 4 / 3.3;
	background: var(--on-black);
	box-shadow: var(--on-negozio-ombra-scena);
}

.on-negozio__scena::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-negozio-vignetta);
	pointer-events: none;
}

.on-negozio .on-negozio__fondo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--on-foto-x, 50%) var(--on-foto-y, 50%);
	filter: saturate(.9) contrast(1.04);
	transition: transform .4s ease-out;
}

.on-negozio__stanga {
	position: absolute;
	inset: 0;
}

.on-negozio .on-negozio__maglia {
	position: absolute;
	top: 19%;
	left: var(--on-maglia-x, 50%);
	z-index: 2;
	display: block;
	width: 30%;
	aspect-ratio: var(--on-maglia-fr, .7);
	color: var(--on-white);
	text-decoration: none;
	/* --on-negozio-riposo vale 0 con il pendolo acceso: l'inclinazione del widget resta solo per le maglie ferme */
	transform: translateX(-50%) rotate(calc(var(--on-maglia-r, 0deg) * var(--on-negozio-riposo, 1) + var(--on-maglia-a, 0deg))) rotateY(var(--on-maglia-ry, 0deg));
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	transition: filter .4s;
}

.on-negozio .on-negozio__maglia:hover {
	z-index: 3;
	color: var(--on-white);
}

/* La gruccia porta maglia e cartellino: è lei che cade sulla stanga all'ingresso, la maglia oscilla */
.on-negozio__gruccia {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.on-negozio .on-negozio__maglia-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* La nota sulla foto: sul telefono in alto a sinistra (home.css:601, 718) */
.on-negozio__nota {
	position: absolute;
	top: 8px;
	left: 10px;
	z-index: 3;
	max-width: 70%;
	padding: 6px 8px 4px;
	background: color-mix(in srgb, var(--on-shade) 50%, transparent);
	color: color-mix(in srgb, var(--on-white) 70%, transparent);
	font-family: var(--on-font-cond);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.55;
	text-transform: uppercase;
}

/*
 * Il cartellino: sul telefono il prototipo lo toglie (home.css:858); qui resta per gli screen reader,
 * perché dà il nome al link quando la foto non ha un testo alternativo.
 */
.on-negozio__tag {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * La lista dei prodotti: una riga per collezione
 * ------------------------------------------------------------------ */

.on-negozio__prodotti {
	display: grid;
	grid-template-columns: 1fr;
	margin: 18px 0 0;
	padding: 0;
	border-top: 1px solid var(--on-line-inv);
	list-style: none;
}

.on-negozio__voce {
	margin: 0;
}

.on-negozio .on-negozio__riga {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--on-line-inv);
	color: var(--on-white);
	text-decoration: none;
	transition: padding-left .4s var(--on-ease-out);
}

.on-negozio__voce:last-child .on-negozio__riga {
	border-bottom: 0;
}

/* Il numero è un segno grafico (aria-hidden): il verde ON resta quello del prototipo */
.on-negozio__n {
	color: var(--on-green);
	font-family: var(--on-font-cond);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	transition: color var(--on-dur-1);
}

.on-negozio__t {
	display: block;
	min-width: 0;
}

.on-negozio__nome {
	display: block;
	font-family: var(--on-font-cond);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
}

.on-negozio__descrizione,
.on-negozio__prezzo {
	display: block;
	margin-top: 3px;
	color: var(--on-ink-inv-2);
	font-size: .8125rem;
	line-height: 1.55;
}

.on-negozio__prezzo {
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	text-transform: uppercase;
}

.on-negozio__cta {
	padding-bottom: 2px;
	border-bottom: 1.5px solid currentColor;
	opacity: .7;
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	line-height: 1.55;
	text-transform: uppercase;
	transition: opacity var(--on-dur-1);
}

/* La riga e la maglia si accendono insieme (is-on dal JS) */
.on-negozio__voce.is-on .on-negozio__riga,
.on-negozio a.on-negozio__riga:hover {
	padding-left: 8px;
}

.on-negozio__voce.is-on .on-negozio__n,
.on-negozio a.on-negozio__riga:hover .on-negozio__n {
	color: var(--on-white);
}

.on-negozio__voce.is-on .on-negozio__cta,
.on-negozio a.on-negozio__riga:hover .on-negozio__cta {
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Movimento: ingresso (le maglie compaiono sulla stanga, le righe salgono)
 * Solo con html.on-motion e dopo che il JS si è armato.
 * ------------------------------------------------------------------ */

/* Con il pendolo acceso le maglie pendono dritte, come nel prototipo (home.js:217) */
.on-negozio.is-armato {
	--on-negozio-riposo: 0;
}

.on-motion .on-negozio.is-armato:not(.is-entrato) .on-negozio__gruccia {
	opacity: 0;
}

.on-motion .on-negozio.is-armato:not(.is-entrato) .on-negozio__voce {
	opacity: 0;
	transform: translateY(24px);
}

/* Lo sfondo scivola appena con il mouse (profondità): il JS scrive --on-negozio-px */
.on-motion .on-negozio.is-armato .on-negozio__fondo {
	transform: translateX(var(--on-negozio-px, 0px)) scale(1.04);
	will-change: transform;
}

/* ---------------------------------------------------------------------
 * Schermi stretti (fino a 360 px)
 * ------------------------------------------------------------------ */

@media (max-width: 360px) {
	.on-negozio__descrizione,
	.on-negozio__prezzo {
		font-size: .75rem;
	}
}

/* ---------------------------------------------------------------------
 * Tablet (600-900 px)
 * ------------------------------------------------------------------ */

@media (min-width: 600px) {
	.on-negozio .on-negozio__titolo {
		font-size: 3.125rem;
	}

	.on-negozio .on-negozio__lede {
		font-size: 1.0625rem;
	}

	.on-negozio__n,
	.on-negozio__nome {
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------------------
 * Desktop (da 901 px)
 * ------------------------------------------------------------------ */

@media (min-width: 901px) {
	.on-negozio {
		padding-block: clamp(48px, 5.5vw, 88px) clamp(56px, 6vw, 96px);
	}

	.on-negozio__testa {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
		align-items: end;
		gap: 48px;
		margin-bottom: clamp(24px, 3vw, 40px);
	}

	.on-negozio .on-negozio__occhiello {
		font-size: var(--on-fs-small);
	}

	.on-negozio .on-negozio__titolo {
		font-size: clamp(2.875rem, 5.8vw, 5.75rem);
	}

	.on-negozio .on-negozio__lede {
		font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
		line-height: var(--on-lh-lede);
	}

	.on-negozio .on-negozio__vai,
	.on-negozio__lede + .on-negozio__vai {
		margin-top: 18px;
	}

	.on-negozio .on-negozio__more {
		margin-block: 0;
		padding-block: 0 3px;
		font-size: var(--on-fs-nav);
	}

	.on-negozio__scena {
		border-radius: var(--on-radius-s);
		aspect-ratio: 16 / 9;
	}

	/* La nota in basso a sinistra (home.css:239) */
	.on-negozio__nota {
		top: auto;
		bottom: 12px;
		left: 14px;
		max-width: none;
		font-size: 11px;
	}

	/* Le ombre a filtro solo sul desktop: sul telefono costano (home.css:610) */
	.on-negozio .on-negozio__maglia {
		top: 17.5%;
		width: 26%;
		filter: drop-shadow(var(--on-maglia-ox, 0px) var(--on-maglia-oy, 24px) 22px var(--on-negozio-ombra-maglia));
	}

	.on-negozio__tag {
		top: 9%;
		left: 64%;
		display: grid;
		gap: 4px;
		width: auto;
		height: auto;
		min-width: 46%;
		padding: 8% 7% 7%;
		overflow: visible;
		clip-path: none;
		border-radius: var(--on-radius-xs);
		background: var(--on-card-back);
		box-shadow: var(--on-negozio-ombra-tag);
		color: var(--on-ink);
		white-space: normal;
		transform: rotate(8deg);
		transform-origin: 8% 0;
		transition: transform .5s var(--on-ease-out);
	}

	/* Il foro del cartellino */
	.on-negozio__tag::before {
		content: "";
		position: absolute;
		top: 7%;
		left: 10%;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--on-black);
		box-shadow: inset 0 0 0 2px var(--on-negozio-bordo-foro);
	}

	/* Il filo che lo lega alla gruccia */
	.on-negozio__tag::after {
		content: "";
		position: absolute;
		top: -40%;
		left: 10%;
		width: 1px;
		height: 46%;
		background: var(--on-negozio-filo);
		transform: rotate(-30deg);
		transform-origin: bottom;
	}

	.on-negozio__tag-titolo {
		padding-left: 14%;
		font-family: var(--on-font-cond);
		font-size: clamp(10px, 1.15vw, 17px);
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1;
		text-transform: uppercase;
	}

	.on-negozio__tag-cta {
		padding-left: 14%;
		color: var(--on-green-ink);
		font-family: var(--on-font-cond);
		font-size: clamp(8px, .8vw, 12px);
		font-weight: 700;
		letter-spacing: var(--on-ls-label);
		/* Come nel prototipo (interlinea del corpo): dà al cartellino la sua altezza, e al filo la sua lunghezza */
		line-height: 1.55;
		text-transform: uppercase;
	}

	.on-negozio__maglia:hover .on-negozio__tag,
	.on-negozio__maglia:focus-visible .on-negozio__tag,
	.on-negozio__maglia.is-on .on-negozio__tag {
		transform: rotate(2deg) scale(1.06);
	}

	.on-negozio__prodotti {
		margin-top: clamp(20px, 2.6vw, 36px);
	}

	.on-negozio .on-negozio__riga {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: 24px;
		padding: 22px 0;
	}

	.on-negozio__n,
	.on-negozio__nome {
		font-size: clamp(1.3125rem, 1.7vw, 1.625rem);
	}

	.on-negozio__t {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 18px;
	}

	.on-negozio__descrizione,
	.on-negozio__prezzo {
		margin-top: 0;
		font-size: var(--on-fs-small);
	}

	.on-negozio__cta {
		font-size: var(--on-fs-small);
	}
}