/* Archivio e scheda del catalogo.

   Nessuna cornice, nessun riquadro, nessuna ombra: la separazione la fanno i
   filetti sottili e lo spazio bianco. E' la richiesta della specifica, ed e' il
   motivo per cui qui non c'e' nessuna classe che assomigli a una card. */

/* ── Filtri ─────────────────────────────────────────── */
.esca-filtri {
	position: sticky;
	top: var(--esca-testata-bassa);
	z-index: 40;
	background: var(--esca-bianco);
	border-bottom: 1px solid var(--esca-filo);
	padding-block: var(--esca-spazio-4);
	transition: top var(--esca-durata);
}

/* Quando la testata scivola via, la barra sale a prenderne il posto. */
body:has(.esca-testata--nascosta) .esca-filtri {
	top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.esca-filtri {
		transition: none;
	}
}

/* Su schermo stretto le voci stanno su una riga che scorre, per tenere bassa la barra. */
@media (max-width: 47.99rem) {
	.esca-filtri {
		padding-block: var(--esca-spazio-3);
	}

	.esca-filtri .esca-filtri__voci {
		flex-wrap: nowrap;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		white-space: nowrap;
	}
}

.esca-filtri__riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--esca-spazio-3) var(--esca-spazio-5);
}

.esca-filtri__voci {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esca-spazio-2) var(--esca-spazio-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.esca-filtri__voce {
	display: inline-block;
	font-size: var(--esca-dim-piccolo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: var(--esca-spazio-1);
	border-bottom: 1px solid transparent;
}

.esca-filtri__voce:hover,
.esca-filtri__voce--attiva {
	border-bottom-color: var(--esca-oro-testo);
}

.esca-filtri__modulo {
	display: flex;
	gap: var(--esca-spazio-2);
}

/* La freccia della tendina, come nel modulo contatti. */
.esca-filtri__select {
	appearance: none;
	padding: 0.5rem var(--esca-spazio-6) 0.5rem 0.8rem;
	background-color: var(--esca-bianco);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--esca-oro-testo) 50%),
		linear-gradient(135deg, var(--esca-oro-testo) 50%, transparent 50%);
	background-position:
		calc(100% - var(--esca-spazio-4)) 50%,
		calc(100% - var(--esca-spazio-4) + var(--esca-spazio-1) - 1px) 50%;
	background-size: calc(var(--esca-spazio-1) - 1px) calc(var(--esca-spazio-1) - 1px);
	background-repeat: no-repeat;
	color: var(--esca-testo);
	border: 1px solid var(--esca-filo);
	border-radius: 0;
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-piccolo);
	cursor: pointer;
}

.esca-filtri__select:focus-visible {
	border-color: var(--esca-oro-testo);
}

.esca-filtri__invia {
	padding: 0.5rem 0.8rem;
	background: none;
	color: var(--esca-testo);
	border: 1px solid var(--esca-filo);
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-piccolo);
	cursor: pointer;
}

/* Con lo script la select filtra da sola e il bottone non serve. */
.esca-filtri__modulo--automatico .esca-filtri__invia {
	display: none;
}

/* Sotto i 64rem resta solo il filtro per linea. */
@media (max-width: 63.99rem) {
	.esca-filtri__modulo {
		display: none;
	}
}

/* Appena sopra, voci piu' strette perche' la tendina stia sulla stessa riga. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.esca-filtri__voci {
		column-gap: var(--esca-spazio-3);
	}
}


/* ── Prodotto in apertura ───────────────────────────── */
.esca-lead__nome a,
.esca-mini__nome a {
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--esca-durata-bottone) var(--esca-curva);
}

.esca-lead__nome a:hover,
.esca-mini__nome a:hover,
.esca-mini__voce:hover .esca-mini__nome a {
	text-decoration-color: var(--esca-oro-tratto);
}

.esca-lead__sommario {
	color: var(--esca-testo-tenue);
	margin-bottom: var(--esca-spazio-4);
}

.esca-lead__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ── Coppia di prodotti ─────────────────────────────── */
.esca-coppia {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esca-spazio-6);
	margin-top: var(--esca-spazio-5);
}

@media (min-width: 48rem) {
	.esca-coppia {
		grid-template-columns: 7fr 5fr;
		align-items: start;
	}
}

.esca-coppia__figura {
	display: block;
	margin-bottom: var(--esca-spazio-4);
	overflow: hidden;
}

.esca-coppia__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.esca-coppia__nome {
	font-size: var(--esca-dim-sottotitolo);
	margin-bottom: var(--esca-spazio-2);
}

.esca-coppia__voce:first-child .esca-coppia__nome {
	font-size: var(--esca-dim-titolo);
}

.esca-coppia__nome a {
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--esca-durata-bottone) var(--esca-curva);
}

.esca-coppia__voce:hover .esca-coppia__nome a {
	text-decoration-color: var(--esca-oro-tratto);
}

.esca-coppia__sommario {
	color: var(--esca-testo-tenue);
	margin-bottom: var(--esca-spazio-2);
}

.esca-coppia__bottone {
	margin-top: var(--esca-spazio-4);
}

@media (prefers-reduced-motion: reduce) {
	.esca-coppia__immagine,
	.esca-coppia__nome a {
		transition: none;
	}

	.esca-coppia__voce:hover .esca-coppia__immagine {
		transform: none;
	}
}

/* ── Prodotti in colonna ────────────────────────────── */
.esca-mini {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esca-spazio-5);
	margin-top: var(--esca-spazio-6);
	padding-top: var(--esca-spazio-5);
	border-top: 1px solid var(--esca-filo);
}

@media (min-width: 48rem) {
	.esca-mini {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--esca-spazio-6);
	}

	/* I filetti verticali fra una colonna e l'altra, senza bordi intorno.
	   Il filetto sta sul bordo sinistro della colonna e lo spazio lo fa il gap
	   della griglia: nessun margine negativo, che a larghezze intermedie
	   farebbe accavallare le colonne. */
	.esca-mini > .esca-mini__voce + .esca-mini__voce {
		padding-left: var(--esca-spazio-5);
		border-left: 1px solid var(--esca-filo);
	}
}

.esca-mini__figura {
	display: block;
	margin-bottom: var(--esca-spazio-3);
	overflow: hidden;
}

.esca-mini__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--esca-bianco);
}

@media (prefers-reduced-motion: reduce) {
	.esca-lead__nome a,
	.esca-mini__nome a {
		transition: none;
	}
}

.esca-mini__nome {
	font-size: var(--esca-dim-sottotitolo);
	margin-bottom: var(--esca-spazio-2);
}

.esca-mini__sommario {
	font-size: var(--esca-dim-piccolo);
	color: var(--esca-testo-tenue);
	margin-bottom: var(--esca-spazio-2);
}

.esca-mini__dati {
	font-size: var(--esca-dim-mini);
	text-transform: lowercase;
	color: var(--esca-oro-testo);
	margin-bottom: 0;
}

/* ── Scheda ─────────────────────────────────────────── */
.esca-scheda__apertura {
	display: grid;
	gap: var(--esca-spazio-6);
	margin-top: var(--esca-spazio-5);
}

@media (min-width: 64rem) {
	.esca-scheda__apertura {
		grid-template-columns: 7fr 5fr;
		gap: var(--esca-spazio-7);
		align-items: start;
	}
}

.esca-scheda__titolo {
	margin-bottom: var(--esca-spazio-2);
}

/* La riga in corsivo sotto il titolo, come nel catalogo cartaceo. */
.esca-scheda__sottotitolo {
	max-width: 40rem;
	margin-bottom: var(--esca-spazio-4);
	padding-bottom: var(--esca-spazio-3);
	border-bottom: 1px solid var(--esca-oro-tratto);
	font-size: var(--esca-dim-piccolo);
	font-style: italic;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--esca-testo-tenue);
}

.esca-scheda__descrizione {
	max-width: 40rem;
	margin-bottom: var(--esca-spazio-5);
}

.esca-scheda__descrizione p {
	max-width: none;
}

.esca-scheda__descrizione strong {
	font-weight: 600;
	color: var(--esca-testo);
}

.esca-scheda__figura {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--esca-bianco);
}

.esca-scheda__miniature {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--esca-spazio-2);
	margin: var(--esca-spazio-2) 0 0;
	padding: 0;
	list-style: none;
}

.esca-scheda__miniatura {
	display: block;
	width: 100%;
	padding: 0;
	background: var(--esca-bianco);
	border: 1px solid var(--esca-filo);
	cursor: pointer;
	transition: border-color var(--esca-durata);
}

.esca-scheda__miniatura img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.esca-scheda__miniatura:hover,
.esca-scheda__miniatura[aria-pressed="true"] {
	border-color: var(--esca-oro-testo);
}

/* ── Scheda tecnica ──────────────────────────────────── */
.esca-scheda__titoletto {
	margin-bottom: var(--esca-spazio-5);
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-occhiello);
	font-weight: 600;
	letter-spacing: var(--esca-spaziatura-occhiello);
	text-transform: uppercase;
	color: var(--esca-oro-testo);
}

.esca-aree {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--esca-spazio-5) var(--esca-spazio-6);
}

/* Le aree fatte di righe etichetta e valore hanno bisogno di piu' respiro. */
@media (min-width: 64rem) {
	.esca-area--tabella {
		grid-column: span 2;
	}
}

.esca-area__titolo {
	margin-bottom: var(--esca-spazio-2);
	padding-top: var(--esca-spazio-2);
	border-top: 2px solid var(--esca-inchiostro);
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-occhiello);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.esca-area__voci {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--esca-dim-piccolo);
}

.esca-area__voce {
	display: grid;
	grid-template-columns: minmax(7rem, 2fr) 3fr;
	gap: var(--esca-spazio-3);
	padding-block: var(--esca-spazio-2);
	border-bottom: 1px solid var(--esca-filo);
	font-variant-numeric: tabular-nums;
}

.esca-area__voce--semplice {
	grid-template-columns: 0.5rem 1fr;
	gap: var(--esca-spazio-2);
}

.esca-area__voce--semplice::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	margin-top: 0.55em;
	background: var(--esca-oro-tratto);
}

.esca-area__etichetta {
	color: var(--esca-testo-tenue);
}

.esca-area__valore {
	color: var(--esca-testo);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ── Formati ─────────────────────────────────────────── */
.esca-scheda__formati {
	margin-bottom: var(--esca-spazio-7);
}

.esca-formati__tabella {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--esca-dim-piccolo);
	font-variant-numeric: tabular-nums;
}

.esca-formati__tabella + .esca-formati__tabella {
	margin-top: var(--esca-spazio-6);
}

.esca-formati__gruppo {
	padding-block: var(--esca-spazio-2);
	border-top: 2px solid var(--esca-inchiostro);
	font-size: var(--esca-dim-occhiello);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

/* Su mobile ogni riga e' un blocco: l'intestazione resta solo per i lettori di schermo. */
.esca-formati__tabella thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.esca-formati__tabella tbody {
	display: block;
}

.esca-formati__tabella tr {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--esca-spazio-3);
	padding-block: var(--esca-spazio-3);
	border-bottom: 1px solid var(--esca-filo);
}

.esca-formati--con-foto .esca-formati__tabella tr {
	grid-template-columns: 5rem 1fr;
}

.esca-formati--con-foto .esca-formati__tabella tr > :not(.esca-formati__cella-foto) {
	grid-column: 2;
}

.esca-formati__cella-foto {
	grid-column: 1;
	grid-row: span 5;
	align-self: start;
}

.esca-formati__tabella th,
.esca-formati__tabella td {
	padding: 0.125rem 0;
	border-bottom: 0;
	font-weight: 400;
	text-align: left;
}

.esca-formati__tabella .esca-formati__formato {
	color: var(--esca-testo);
	font-weight: 600;
}

.esca-formati__nota {
	display: block;
	font-size: var(--esca-dim-mini);
	font-weight: 400;
	color: var(--esca-testo-tenue);
}

.esca-formati__tabella td {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--esca-spazio-2);
	color: var(--esca-testo);
	overflow-wrap: anywhere;
}

.esca-formati__tabella td::before {
	content: attr(data-etichetta);
	color: var(--esca-testo-tenue);
}

.esca-formati__tabella td.esca-formati__cella-foto {
	display: block;
}

.esca-formati__tabella td.esca-formati__cella-foto::before {
	content: none;
}

.esca-formati__foto,
.esca-formati__segnaposto {
	display: grid;
	place-items: center;
	width: 5rem;
	aspect-ratio: 1;
	padding: 0.25rem;
	border: 1px solid var(--esca-filo);
	background: var(--esca-bianco);
}

.esca-formati__foto {
	cursor: pointer;
	transition: border-color var(--esca-durata) ease;
}

.esca-formati__foto:hover,
.esca-formati__foto:focus-visible {
	border-color: var(--esca-oro-testo);
}

.esca-formati__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Senza foto: la spirale del logo, come nel catalogo. */
.esca-formati__segnaposto {
	border-color: transparent;
	background: var(--esca-fondo-caldo);
}

.esca-formati__segnaposto::before {
	content: "";
	width: 45%;
	aspect-ratio: 1;
	background: var(--esca-oro-tratto);
	opacity: 0.35;
	-webkit-mask: url("../img/spirale.svg") center / contain no-repeat;
	mask: url("../img/spirale.svg") center / contain no-repeat;
}

@media (min-width: 64rem) {
	.esca-formati__tabella thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.esca-formati__tabella tbody {
		display: table-row-group;
	}

	.esca-formati__tabella tr {
		display: table-row;
		padding: 0;
		border: 0;
	}

	.esca-formati__tabella th,
	.esca-formati__tabella td,
	.esca-formati__tabella td.esca-formati__cella-foto {
		display: table-cell;
		padding: var(--esca-spazio-2) var(--esca-spazio-4) var(--esca-spazio-2) 0;
		border-bottom: 1px solid var(--esca-filo);
		vertical-align: middle;
	}

	.esca-formati__tabella td::before {
		content: none;
	}

	.esca-formati__tabella thead th {
		font-size: var(--esca-dim-mini);
		font-weight: 500;
		color: var(--esca-testo-tenue);
	}

	/* Larghezze fisse: i blocchi di conservazione diversi restano allineati in colonna. */
	.esca-formati__tabella {
		table-layout: fixed;
	}

	.esca-formati__cella-foto {
		width: 7.5rem;
	}

	.esca-formati__foto,
	.esca-formati__segnaposto {
		width: 6rem;
	}

	.esca-formati__colonna--peso {
		width: 7rem;
	}

	.esca-formati__colonna--conservazione {
		width: 11rem;
	}

	.esca-formati__colonna--ean {
		width: 11.5rem;
	}

	.esca-formati__colonna--cartone {
		width: 10rem;
	}
}

/* La testata fissa non deve coprire la foto quando un formato la richiama. */
[data-esca-galleria] {
	scroll-margin-top: calc(var(--esca-testata-bassa) + var(--esca-spazio-3));
}

.esca-scheda__chiusura {
	display: grid;
	gap: var(--esca-spazio-5);
	margin-top: var(--esca-spazio-7);
	padding-top: var(--esca-spazio-5);
	border-top: 1px solid var(--esca-filo);
}

@media (min-width: 64rem) {
	.esca-scheda__chiusura {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

.esca-scheda__claim {
	margin: 0;
	font-family: var(--esca-font-titolo);
	font-size: var(--esca-dim-titolo);
	font-style: italic;
	line-height: var(--esca-interlinea-titolo);
}

.esca-scheda__certificazioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esca-spazio-3);
}

.esca-scheda__marchio {
	width: auto;
	height: 4rem;
	mix-blend-mode: multiply;
}

.esca-scheda__nota-certificazione {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--esca-dim-piccolo);
	color: var(--esca-testo-tenue);
}

.esca-elenco {
	list-style: none;
	padding: 0;
	margin: 0;
}

.esca-elenco li {
	padding: var(--esca-spazio-2) 0;
	border-bottom: 1px solid var(--esca-filo);
	font-size: var(--esca-dim-piccolo);
}

/* ── Vetrina di linea ─────────────────────────────── */
.esca-vetrina-linea {
	margin-bottom: var(--esca-spazio-6);
}

.esca-vetrina-linea__nome {
	font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem);
	margin-bottom: var(--esca-spazio-3);
}

.esca-vetrina-linea__intro {
	font-size: var(--esca-dim-normale);
	color: var(--esca-testo-tenue);
	margin-bottom: 0;
}

/* ── Prodotti di una linea ────────────────────────── */
.esca-prodotti {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esca-spazio-6) var(--esca-spazio-5);
}

@media (min-width: 40rem) {
	.esca-prodotti {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.esca-prodotti {
		grid-template-columns: repeat(3, 1fr);
	}
}

.esca-prodotti .esca-mini__voce {
	padding-top: var(--esca-spazio-3);
	border-top: 1px solid var(--esca-filo);
}

/* Su telefono foto e testo affiancati, 40/60. */
@media (max-width: 39.99rem) {
	.esca-prodotti {
		gap: var(--esca-spazio-4);
	}

	.esca-prodotti .esca-mini__voce {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-auto-rows: min-content;
		column-gap: var(--esca-spazio-3);
		align-items: start;
	}

	.esca-prodotti .esca-mini__figura {
		grid-row: 1 / span 5;
		margin-bottom: 0;
	}

	.esca-prodotti .esca-mini__voce > :not(.esca-mini__figura) {
		grid-column: 2;
	}
}

.esca-mini__occhiello {
	margin-bottom: var(--esca-spazio-1);
	font-size: var(--esca-dim-mini);
	letter-spacing: normal;
}

.esca-mini__figura--vuota {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--esca-fondo-caldo);
}

/* Senza foto: la spirale del logo in oro tenue. */
.esca-mini__figura--vuota::before {
	content: "";
	width: 22%;
	aspect-ratio: 1;
	background: var(--esca-oro-tratto);
	opacity: 0.35;
	-webkit-mask: url("../img/spirale.svg") center / contain no-repeat;
	mask: url("../img/spirale.svg") center / contain no-repeat;
}

/* ── Ritmo del catalogo ───────────────────────────── */
/* Piu' fitto del ritmo editoriale: le prime referenze devono arrivare subito
   dopo introduzione e filtri, non dopo una seconda apertura. */
.esca-catalogo .esca-fascia,
.esca-catalogo.esca-fascia {
	padding-block: var(--esca-spazio-catalogo);
}

@media (max-width: 47.99rem) {
	.esca-catalogo .esca-fascia,
	.esca-catalogo.esca-fascia {
		padding-block: var(--esca-spazio-catalogo-mobile);
	}
}

/* ── Briciole ─────────────────────────────────────── */
.esca-briciole ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esca-spazio-2);
	margin: 0 0 var(--esca-spazio-5);
	padding: 0;
	list-style: none;
	font-size: var(--esca-dim-piccolo);
	color: var(--esca-testo-tenue);
}

.esca-briciole li + li::before {
	content: "/";
	margin-right: var(--esca-spazio-2);
	color: var(--esca-oro-tratto);
}