/**
 * Mercuriale PAN — pagina /mercuriale/.
 * Tutto è dentro .pmerc per non toccare il resto del tema.
 */

/* Il tema mette overflow:hidden e altezza ~viewport su #primary, che su una
   pagina lunga come questa taglia il contenuto e blocca lo scroll.
   Stesso rimedio già usato dalle pagine del plugin sponsorizzazioni. */
body.pan-mercuriale-page #primary,
body.pan-mercuriale-page #primary.site-main {
	overflow: visible !important;
	height: auto !important;
	min-height: 0 !important;
}
body.pan-mercuriale-page .entry-content {
	display: block !important;
	height: auto !important;
	padding-top: 0 !important;
}
body.pan-mercuriale-page .entry-title { display: none !important; }

.pmerc {
	--pan: #43579E;
	--ink: #111;
	--mut: #8A8F9C;
	--mut2: #B4B9C6;
	--line: #e9ecf1;
	--soft: #F5F7FB;
	background: #fff;
	color: var(--ink);
}
.pmerc *, .pmerc *::before, .pmerc *::after { box-sizing: border-box; }
.pmerc .num { font-variant-numeric: tabular-nums; }

/* ---------- HERO ---------- */
.pmerc .pm-hero { background: var(--pan); color: #fff; padding: 84px 60px 42px; text-align: center; }
.pmerc .pm-hero-in { max-width: 1240px; margin: 0 auto; }
.pmerc .pm-kick { font-size: 11.5px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 20px; }
.pmerc .pm-hero h1 { margin: 0; color: #fff; font-size: clamp(48px, 9vw, 96px); font-weight: 900; line-height: 1; letter-spacing: -2.5px; }
.pmerc .pm-when { margin: 20px auto 0; font-size: 20px; font-weight: 300; color: rgba(255,255,255,.85); max-width: 640px; line-height: 1.5; }
.pmerc .pm-when b { font-weight: 800; color: #fff; }
.pmerc .pm-wave { display: block; line-height: 0; font-size: 0; background: var(--pan); overflow: hidden; }
.pmerc .pm-wave svg { display: block; width: 100%; height: 80px; }

/* ---------- STRISCIA DEI PREZZI ---------- */
/* Prende il posto dei numeri riassuntivi: è la parte "viva" della pagina.
   Vive dentro il blu, subito sotto il titolo, come un tabellone di borsa.
   Il bordo sta sul contenitore perché la sfumatura ai lati (mask) mangerebbe
   anche quello se fosse sull'elemento che scorre. */
/* Fascia bianca dentro il blu: risalta molto più di prima, e su fondo chiaro
   ogni prezzo può portare il colore del suo prodotto. Lo sfondo sta sul
   contenitore e la sfumatura ai lati sull'elemento che scorre, così a sfumare
   sono solo le scritte e la fascia resta piena da bordo a bordo. */
.pmerc .pm-tickwrap { margin: 40px -60px 0; background: #fff; padding: 18px 0; }
.pmerc .pm-tick {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pmerc .pm-tick-track { display: flex; width: max-content; animation: pmSlide 110s linear infinite; }
.pmerc .pm-tick:hover .pm-tick-track { animation-play-state: paused; }
@keyframes pmSlide { to { transform: translateX(-50%); } }
.pmerc .pm-tick-i { display: flex; align-items: baseline; gap: 12px; padding: 0 28px; white-space: nowrap; border-right: 1px solid var(--line); }
.pmerc .pm-tick-i .nm { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: #3d4250; }
.pmerc .pm-tick-i .p { font-size: 24px; font-weight: 900; letter-spacing: -.9px; }

/* ---------- BARRA RICERCA ---------- */
.pmerc .pm-bar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 14px 60px; }
.pmerc .pm-bar-in { max-width: 1240px; margin: 0 auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pmerc .pm-srch { flex: 1; min-width: 240px; position: relative; }
.pmerc .pm-srch input { width: 100%; border: 2px solid var(--line); border-radius: 100px; padding: 13px 18px 13px 47px; font: inherit; font-size: 15px; outline: none; transition: border-color .2s; background: #fff; }
.pmerc .pm-srch input:focus { border-color: var(--pan); }
.pmerc .pm-srch input::placeholder { color: var(--mut2); }
.pmerc .pm-srch svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--mut2); fill: none; stroke-width: 2; }
.pmerc .pm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pmerc .pm-tab { border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 100px; padding: 10px 17px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .16s; white-space: nowrap; }
.pmerc .pm-tab:hover { border-color: var(--pan); color: var(--pan); }
.pmerc .pm-tab.on { background: var(--pan); border-color: var(--pan); color: #fff; }

/* ---------- GRIGLIA ---------- */
.pmerc .pm-board { max-width: 1240px; margin: 0 auto; padding: 28px 60px 90px; }
.pmerc .pm-cnt { font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mut2); margin: 0 0 20px; }
.pmerc .pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }

/* Altezza fissa: la tessera è sempre lo stesso rettangolo, che il nome stia
   su una riga o su due. Senza questo le tessere basse lasciavano buchi. */
.pmerc .pm-tile {
	position: relative; border: 0; padding: 20px 12px; border-radius: 18px; cursor: pointer; font: inherit; text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden;
	height: 190px;
	transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.pmerc .pm-tile::after { content: ''; position: absolute; inset: 0; border-radius: 18px; border: 2.5px solid transparent; transition: border-color .18s; pointer-events: none; }
.pmerc .pm-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,22,28,.13); }
.pmerc .pm-tile:hover img { transform: scale(1.09); }
.pmerc .pm-tile.on::after { border-color: currentColor; }
.pmerc .pm-tile img { width: 78px; height: 78px; flex: none; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(20,22,28,.17)); transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.pmerc .pm-tile .ph { width: 78px; height: 78px; flex: none; display: grid; place-items: center; font-size: 34px; font-weight: 900; opacity: .5; }
/* Il nome del prodotto è la cosa che si cerca: deve leggersi da lontano.
   Lo spazio è sempre di due righe, così le tessere restano tutte uguali. */
.pmerc .pm-tile .nm {
	width: 100%; height: 2.3em; flex: none;
	display: flex; align-items: center; justify-content: center;
	font-size: 21px; font-weight: 900; letter-spacing: -.7px; line-height: 1.12;
}
.pmerc .pm-tile .nm > span {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; overflow-wrap: break-word; hyphens: auto;
}

/* ---------- PANNELLO DEL PRODOTTO ---------- */
.pmerc .pm-panel { grid-column: 1/-1; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; margin: 6px 0 10px; box-shadow: 0 18px 44px rgba(20,22,28,.09); animation: pmPop .26s cubic-bezier(.2,.8,.3,1); }
@keyframes pmPop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.pmerc .pm-caret { position: absolute; top: -8px; width: 15px; height: 15px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); border-radius: 3px 0 0 0; }
.pmerc .pm-ph { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.pmerc .pm-pic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0; font-weight: 900; }
.pmerc .pm-pic img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(20,22,28,.14)); }
/* Nel pannello restano solo icona e nome del prodotto. */
.pmerc .pm-pt { flex: 1; min-width: 0; }
.pmerc .pm-pt h3 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.9px; }
.pmerc .pm-x { border: 0; background: var(--soft); width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer; flex-shrink: 0; color: var(--mut); line-height: 1; }
.pmerc .pm-x:hover { background: #e6eaf3; color: var(--ink); }
.pmerc .pm-pb { padding: 4px 22px 18px; }

.pmerc .pm-q { display: flex; align-items: center; gap: 20px; padding: 16px 8px; border-bottom: 1px solid #f2f4f8; transition: background .14s; border-radius: 8px; }
.pmerc .pm-q:last-child { border-bottom: 0; }
.pmerc .pm-q:hover { background: var(--soft); }
.pmerc .pm-ql { flex: 1; min-width: 0; }
.pmerc .pm-qv { font-size: 16px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; }
.pmerc .pm-qd { margin-top: 4px; font-size: 12px; color: var(--mut); font-weight: 600; }
.pmerc .pm-qd i { font-style: normal; color: var(--mut2); padding: 0 4px; }
.pmerc .pm-qog { display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--pan); background: rgba(67,87,158,.09); border-radius: 6px; padding: 5px 10px; white-space: nowrap; }
/* Prezzo e variazione tutti a destra: si scorre la colonna dei prezzi con l'occhio. */
.pmerc .pm-qr { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-shrink: 0; }
.pmerc .pm-qp { font-size: 38px; font-weight: 900; letter-spacing: -1.8px; white-space: nowrap; line-height: 1; }
.pmerc .pm-qp u { text-decoration: none; font-size: 13px; color: var(--mut2); font-weight: 700; margin-left: 4px; letter-spacing: 0; }
.pmerc .pm-d { font-size: 15px; font-weight: 900; letter-spacing: -.2px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; min-width: 92px; text-align: center; }
.pmerc .pm-d.up { background: rgba(30,140,60,.1); color: #1d8c3c; }
.pmerc .pm-d.down { background: rgba(190,40,60,.09); color: #be283c; }
.pmerc .pm-d.flat { background: var(--soft); color: var(--mut2); }

/* ---------- RISULTATI DI RICERCA ---------- */
.pmerc .pm-hits { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pmerc .pm-hit { display: flex; align-items: center; gap: 15px; padding: 13px 18px; border-bottom: 1px solid #f2f4f8; }
.pmerc .pm-hit:last-child { border-bottom: 0; }
.pmerc .pm-hit img { width: 38px; height: 38px; object-fit: contain; border-radius: 11px; padding: 4px; flex-shrink: 0; }
.pmerc .pm-hit-l { flex: 1; min-width: 0; }
.pmerc .pm-hit-n { font-size: 17px; font-weight: 900; letter-spacing: -.4px; }
.pmerc .pm-hit-d { font-size: 11.5px; color: var(--mut); font-weight: 600; margin-top: 3px; }
.pmerc .pm-hit-r { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.pmerc .pm-hit-p { font-size: 30px; font-weight: 900; letter-spacing: -1.4px; white-space: nowrap; line-height: 1; color: var(--pan); }
.pmerc .pm-hit-p u { text-decoration: none; font-size: 12px; color: var(--mut2); font-weight: 700; margin-left: 3px; letter-spacing: 0; }
.pmerc .pm-none { text-align: center; padding: 90px 20px; color: var(--mut2); font-size: 15px; }

/* ---------- PROVA GRATUITA ---------- */
.pmerc .pm-trial { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; background: rgba(67,87,158,.06); border: 1px solid rgba(67,87,158,.18); border-radius: 14px; padding: 12px 18px; margin: 0 0 20px; font-size: 13.5px; }
.pmerc .pm-trial b { font-weight: 900; }
.pmerc .pm-trial.urgent { background: rgba(190,40,60,.06); border-color: rgba(190,40,60,.22); }
.pmerc .pm-cta { display: inline-block; background: var(--pan); color: #fff; border-radius: 100px; padding: 11px 24px; font-size: 13.5px; font-weight: 900; text-decoration: none; }
.pmerc .pm-cta:hover { background: #35467f; color: #fff; }

.pmerc .pm-wall { border: 2px dashed rgba(67,87,158,.35); background: rgba(67,87,158,.05); border-radius: 20px; padding: 44px 26px; text-align: center; margin-bottom: 24px; }
.pmerc .pm-wall h2 { margin: 0 0 10px; font-size: 26px; font-weight: 900; letter-spacing: -.7px; }
.pmerc .pm-wall p { margin: 0 auto 20px; font-size: 15px; color: #5c6070; line-height: 1.6; max-width: 480px; }
.pmerc .pm-wall .pm-alt { display: block; margin-top: 14px; font-size: 13px; color: var(--mut); }
.pmerc .pm-locked .pm-tile { filter: grayscale(.25); }

/* Popup di benvenuto */
.pm-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgba(17,19,26,.55); animation: pmFade .2s ease-out; }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
.pm-modal-box { background: #fff; border-radius: 22px; max-width: 440px; width: 100%; padding: 34px 30px 28px; text-align: center; box-shadow: 0 26px 70px rgba(20,22,28,.3); font-family: 'Mulish', sans-serif; }
.pm-modal-box .pm-badge { display: inline-block; background: rgba(67,87,158,.1); color: #43579E; border-radius: 100px; padding: 6px 14px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; }
.pm-modal-box h2 { margin: 0 0 12px; font-size: 25px; font-weight: 900; letter-spacing: -.8px; line-height: 1.15; }
.pm-modal-box p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #5c6070; }
.pm-modal-box .pm-cta { display: inline-block; background: #43579E; color: #fff; border-radius: 100px; padding: 13px 28px; font-size: 14px; font-weight: 900; text-decoration: none; }
.pm-modal-box button { display: block; margin: 14px auto 0; border: 0; background: none; color: #8A8F9C; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* ---------- MOBILE ---------- */
@media (max-width: 860px) {
	/* Il primo rigo restava incollato sotto l'header del tema: gli diamo aria. */
	.pmerc .pm-hero { padding: 92px 22px 30px; }
	.pmerc .pm-hero h1 { letter-spacing: -1.4px; }
	.pmerc .pm-tickwrap { margin: 32px -22px 0; padding: 14px 0; }
	.pmerc .pm-tick-i { gap: 9px; padding: 0 18px; }
	.pmerc .pm-tick-i .nm { font-size: 16px; }
	.pmerc .pm-tick-i .p { font-size: 19px; }
	.pmerc .pm-bar { padding: 12px 20px; }
	.pmerc .pm-board { padding: 22px 20px 70px; }
	/* Numero di colonne deciso a mano invece che da minmax: così la griglia
	   non cambia impaginazione a ogni manciata di pixel di larghezza. */
	.pmerc .pm-grid { grid-template-columns: repeat(3, 1fr); gap: 11px; }
	.pmerc .pm-tile { padding: 16px 10px; height: 158px; gap: 10px; }
	.pmerc .pm-tile img, .pmerc .pm-tile .ph { width: 60px; height: 60px; }
	.pmerc .pm-tile .ph { font-size: 28px; }
	.pmerc .pm-tile .nm { font-size: 17px; letter-spacing: -.4px; }
	.pmerc .pm-pb { padding: 4px 16px 16px; }
	.pmerc .pm-ph { padding: 16px; }
	.pmerc .pm-q { flex-wrap: wrap; gap: 10px; }
	.pmerc .pm-ql { flex-basis: 100%; }
	.pmerc .pm-qr { width: 100%; justify-content: space-between; gap: 10px; }
	.pmerc .pm-qp { font-size: 32px; letter-spacing: -1.4px; }
	.pmerc .pm-d { font-size: 14px; min-width: 0; }
	.pmerc .pm-hit { flex-wrap: wrap; }
	.pmerc .pm-hit-r { width: 100%; justify-content: space-between; }
	.pmerc .pm-hit-p { font-size: 26px; }
}
/* Telefono in verticale: due colonne. */
@media (max-width: 560px) {
	.pmerc .pm-grid { grid-template-columns: repeat(2, 1fr); }
	.pmerc .pm-tile { height: 166px; }
	.pmerc .pm-tile img, .pmerc .pm-tile .ph { width: 64px; height: 64px; }
	.pmerc .pm-tile .nm { font-size: 18px; }
}

.pmerc .pm-legal { max-width: 1240px; margin: 0 auto; padding: 0 60px 60px; font-size: 12px; color: var(--mut2); line-height: 1.75; }
.pmerc .pm-legal-t { display: block; color: var(--mut); font-weight: 700; margin-bottom: 6px; }
@media (max-width: 860px) { .pmerc .pm-legal { padding: 0 20px 44px; } }

@media (prefers-reduced-motion: reduce) {
	.pmerc .pm-tick-track { animation: none; }
	.pmerc .pm-panel { animation: none; }
}


/* -------------------------------------------------------------------------
 * Banner sponsorizzato dentro il pannello prodotto
 * Sta in cima, sopra il nome: si vede senza rubare la scena ai prezzi,
 * che restano il motivo per cui la gente apre il pannello.
 * ---------------------------------------------------------------------- */
.pm-adv {
	position: relative;
	margin: 0 0 14px;
	border-radius: 10px;
	overflow: hidden;
	background: #F1F1F1;
	line-height: 0;            /* niente spazio fantasma sotto l'immagine */
}
.pm-adv img {
	display: block;
	width: 100%;
	height: auto;
}
.pm-adv-tag {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 1.6;
	text-transform: uppercase;
	pointer-events: none;      /* la scritta non deve rubare il clic */
}
@media (max-width: 600px) {
	.pm-adv { margin-bottom: 10px; }
	.pm-adv-tag { font-size: 9px; padding: 1px 5px; }
}