/* =============================================================================
   Mercuriale — vestito 2026

   Non sostituisce assets/mercuriale.css: gli sta sopra e ne riscrive i pezzi
   che stonavano col resto del sito. Si carica solo dal template di anteprima,
   dopo l'altro foglio, così vince senza bisogno di !important.

   PERCHÉ NON RISCRIVERE mercuriale.css
   Le classi .pm-* le stampa assets/mercuriale.js, non il PHP. Rinominarle o
   ristrutturarle vorrebbe dire mettere le mani nel JavaScript che pesca i
   prezzi, filtra, apre i pannelli e gestisce la prova di quindici giorni:
   tanto lavoro e tanto rischio per un cambio di colori. Qui si tocca solo
   l'aspetto, e i dati continuano ad arrivare come sempre.

   IL COLORE DELLE TESSERE NON SI TOCCA
   Ogni tessera ha già il colore del suo prodotto, scritto dal JavaScript
   leggendo la stessa tavolozza della Community (inc/community-colors.php).
   Era già la cosa giusta: qui si cambia solo la forma perché somigli alle
   card della Community.
   ============================================================================= */


/* ------------------------------------------------------------- cornice -- */

.xpan .pmerc { background: #fff; }

/* Il nastro dei prezzi della pagina sparisce: nell'intestazione del sito
   ce n'è già uno, e due nastri con gli stessi numeri a mezzo schermo di
   distanza sono un errore, non una ridondanza utile. */
.xpan .pmerc .pm-tickwrap { display: none; }

/* Niente onde: la testata nera finisce e comincia la barra. */
.xpan .pmerc .pm-wave { display: none; }


/* --------------------------------------------------- barra e filtri -- */

.xpan .pmerc .pm-bar {
	position: sticky; top: 0; z-index: 40;
	padding: 14px var(--section-x);
	background: #fff;
	backdrop-filter: none;
	border-bottom: var(--rule);
}
.xpan .pmerc .pm-bar-in {
	max-width: none; gap: 10px;
}

.xpan .pmerc .pm-srch input {
	border: var(--rule); border-radius: 0;
	padding: 14px 18px 14px 46px;
	font-size: 16px; background: var(--cream);
}
.xpan .pmerc .pm-srch input:focus { border-color: var(--purple); }
.xpan .pmerc .pm-srch svg { stroke: var(--black); }

.xpan .pmerc .pm-tab {
	border: var(--rule); border-radius: 0;
	padding: 11px 15px;
	font-size: 10px; font-weight: var(--fw-bold);
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--black); background: #fff;
}
.xpan .pmerc .pm-tab:hover { background: var(--yellow); border-color: var(--black); color: var(--black); }
.xpan .pmerc .pm-tab.on { background: var(--black); border-color: var(--black); color: #fff; }


/* --------------------------------------------------------- tessere -- */

.xpan .pmerc .pm-board { padding: 46px var(--section-x) 70px; }

.xpan .pmerc .pm-cnt {
	margin: 0 0 26px; color: var(--text-mut);
	font-size: 11px; font-weight: var(--fw-bold);
	letter-spacing: .08em; text-transform: uppercase;
}

.xpan .pmerc .pm-grid {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}

/* La tessera diventa la card della Community: angoli vivi, filo nero,
   icona in alto a sinistra, nome grande sotto. Il fondo e il colore del
   testo restano quelli che scrive il JavaScript. */
.xpan .pmerc .pm-tile {
	height: auto; min-height: 190px;
	padding: 20px; border: var(--rule); border-radius: 0;
	flex-direction: column; align-items: flex-start; justify-content: flex-start;
	gap: 0; text-align: left;
	transition: transform .18s, box-shadow .18s;
}
.xpan .pmerc .pm-tile:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--black);
}
.xpan .pmerc .pm-tile::after { border-radius: 0; }
.xpan .pmerc .pm-tile.on::after { border-width: 4px; border-color: var(--black); }

.xpan .pmerc .pm-tile img,
.xpan .pmerc .pm-tile .ph {
	width: 56px; height: 56px; margin-bottom: auto;
	filter: none;
}
.xpan .pmerc .pm-tile:hover img { transform: none; }

/* Il nome era centrato dentro un flex alto due righe fisse: qui torna a
   sinistra e prende l'altezza che gli serve, come nelle card della
   Community. Il taglio a due righe resta, serve con «Cicoria witloof». */
.xpan .pmerc .pm-tile .nm {
	width: 100%; height: auto; min-height: 0;
	margin-top: 18px;
	display: block;
	font-size: 25px; line-height: 1.05;
	font-weight: var(--fw-bold); letter-spacing: -.035em;
	text-align: left;
}


/* ------------------------------------------------ pannello del prodotto -- */

.xpan .pmerc .pm-panel { border: var(--rule); border-radius: 0; }
.xpan .pmerc .pm-badge,
.xpan .pmerc .pm-cta { border-radius: 0; }
.xpan .pmerc .pm-cta {
	background: var(--purple); color: #fff;
	font-weight: var(--fw-bold); text-transform: uppercase;
	font-size: 12px; letter-spacing: .06em;
}

.xpan .pmerc .pm-hits { gap: 12px; }
.xpan .pmerc .pm-hit { border: var(--rule); border-radius: 0; }

/* Il muro della prova scaduta: stessa faccia degli altri riquadri. */
.xpan .pmerc .pm-wall,
.xpan .pmerc .pm-trial { border: var(--rule); border-radius: 0; background: var(--cream); }

.xpan .pmerc .pm-modal-box { border: var(--rule); border-radius: 0; }


/* --------------------------------------------------------- nota legale -- */

.xpan .pmerc .pm-legal {
	max-width: none; margin: 0;
	padding: 34px var(--section-x) 50px;
	border-top: var(--rule); background: var(--cream);
	font-size: 12px; line-height: 1.65; color: var(--text-soft);
}
.xpan .pmerc .pm-legal-t {
	display: block; margin-bottom: 8px;
	color: var(--black); font-weight: var(--fw-bold);
}


/* ------------------------------------------------------------ telefono -- */

@media (max-width: 560px) {
	.xpan .pmerc .pm-board { padding: 34px 20px 50px; }
	.xpan .pmerc .pm-bar { padding: 12px 20px; }
	.xpan .pmerc .pm-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.xpan .pmerc .pm-tile { min-height: 150px; padding: 14px; }
	.xpan .pmerc .pm-tile img,
	.xpan .pmerc .pm-tile .ph { width: 42px; height: 42px; }
	.xpan .pmerc .pm-tile .nm { margin-top: 12px; font-size: 18px; }
	.xpan .pmerc .pm-legal { padding: 28px 20px 40px; }
}