.wpi-wrap {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 28px;
	align-items: start;
}
@media (max-width: 860px) {
	.wpi-wrap { grid-template-columns: 1fr; }
}

/* Planimetria: nessun bordo/sfondo, l'immagine appoggia direttamente
   sullo sfondo della pagina, come nel progetto di riferimento. */
.wpi-plan-col {
	background: transparent;
	border: none;
	padding: 0;
	position: sticky;
	top: 24px;
	text-align: center;
	min-height: 200px;
}
.wpi-plan-img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.wpi-plan-hint {
	font-size: 12px;
	color: #8a8478;
	margin: 12px 0 0;
}

.wpi-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}
.wpi-tab {
	border: 1px solid #cfc9ba;
	background: #fff;
	color: #2b2925;
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 2px;
	cursor: pointer;
	letter-spacing: .02em;
}
.wpi-tab:hover { border-color: #cbb93a; }
.wpi-tab.active {
	background: #e3d94a;
	border-color: #cbb93a;
	color: #2b2925;
}

.wpi-table-scroll { overflow-x: auto; }

table.wpi-table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	font-size: 13px;
}
table.wpi-table thead th {
	text-align: left;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b6558;
	padding: 12px;
	background: #f0eee7;
	border-bottom: 1px solid #d9d3c4;
	white-space: nowrap;
}
table.wpi-table tbody td {
	padding: 14px 12px;
	border-bottom: 1px solid #d9d3c4;
	white-space: nowrap;
}
table.wpi-table tbody tr { cursor: default; transition: background .12s ease; }
table.wpi-table tbody tr:hover,
table.wpi-table tbody tr.active { background: #e7e4da; }

/* Immobile venduto: intera riga in rosso chiaro trasparente, sopra
   qualunque stato hover/active (deve restare visibile anche al passaggio
   del mouse). */
table.wpi-table tbody tr.wpi-sold { background: #c1443b; }
table.wpi-table tbody tr.wpi-sold:hover,
table.wpi-table tbody tr.wpi-sold.active { background: #c1443b; }

/* Legenda sotto la tabella (mostrata solo se almeno un immobile del piano
   è segnato come venduto). */
.wpi-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
	font-size: 12px;
	color: #6b6558;
}
.wpi-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: #c1443b;
	flex-shrink: 0;
}

.wpi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 3px;
	color: #3a3320;
	text-decoration: none;
}

/* Cella/bottone di apertura dettagli: esiste solo per il layout mobile,
   su desktop resta invisibile e non occupa spazio. */
.wpi-toggle-cell { display: none; }
.wpi-toggle-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #cfc9ba;
	background: #fff;
	color: #2b2925;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.wpi-icon-close { display: none; }

/* =========================================================
 * MOBILE: ogni immobile è una riga compatta (Scala + N. Appartamento
 * + Pianta + Contatto + freccia), che si espande al tap mostrando
 * Piano e le tre superfici. La planimetria resta sopra l'elenco.
 * ========================================================= */
@media (max-width: 640px) {
	.wpi-plan-col { position: static; }

	.wpi-table-scroll { overflow-x: visible; }

	table.wpi-table thead { display: none; }

	table.wpi-table,
	table.wpi-table tbody {
		display: block;
		width: 100%;
	}

	table.wpi-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid #d9d3c4;
		padding: 12px 4px;
		row-gap: 14px;
		transition: background .12s ease;
	}
	table.wpi-table tbody tr:last-child { border-bottom: none; }
	table.wpi-table tbody tr.expanded { border-radius: 4px; }

	table.wpi-table tbody td {
		border-bottom: none;
		padding: 0;
		white-space: normal;
	}

	/* --- riga sempre visibile: Scala, N. Appartamento, icone, freccia --- */
	table.wpi-table tbody td:nth-child(1),
	table.wpi-table tbody td:nth-child(3),
	table.wpi-table tbody td:nth-child(7),
	table.wpi-table tbody td:nth-child(8),
	table.wpi-table tbody .wpi-toggle-cell {
		flex: 0 0 auto;
	}
	table.wpi-table tbody td:nth-child(1) { order: 1; font-weight: 600; }
	table.wpi-table tbody td:nth-child(3) { order: 2; font-weight: 600; }
	table.wpi-table tbody td:nth-child(7) { order: 3; }
	table.wpi-table tbody td:nth-child(8) { order: 4; }
	table.wpi-table tbody .wpi-toggle-cell { order: 5; margin-left: auto; }

	table.wpi-table tbody td:nth-child(1)::before { content: "Scala "; font-weight: 400; color: #6b6558; }
	table.wpi-table tbody td:nth-child(3)::before { content: "Appartamento "; font-weight: 400; color: #6b6558; }

	.wpi-toggle-cell { display: flex; }

	/* --- dettagli: nascosti finché la riga non è "expanded" --- */
	table.wpi-table tbody td:nth-child(2),
	table.wpi-table tbody td:nth-child(4),
	table.wpi-table tbody td:nth-child(5),
	table.wpi-table tbody td:nth-child(6) {
		display: none;
		flex: 1 1 33%;
		order: 10;
		min-width: 110px;
	}
	table.wpi-table tbody td:nth-child(2) { order: 6; flex-basis: 100%; }

	table.wpi-table tbody tr.expanded td:nth-child(2),
	table.wpi-table tbody tr.expanded td:nth-child(4),
	table.wpi-table tbody tr.expanded td:nth-child(5),
	table.wpi-table tbody tr.expanded td:nth-child(6) {
		display: block;
	}

	table.wpi-table tbody td:nth-child(2)::before,
	table.wpi-table tbody td:nth-child(4)::before,
	table.wpi-table tbody td:nth-child(5)::before,
	table.wpi-table tbody td:nth-child(6)::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #6b6558;
		font-weight: 600;
		margin-bottom: 4px;
	}
}