/* =========================================================
   DAISY DESIGN — configuratore 3D
   ========================================================= */

.daisy3d {
	position: relative;
	background: var(--daisy-cream-soft, #f1ede5);
	border: 1px solid var(--daisy-line, #e6e1d7);
	margin-bottom: 18px;
	/* la scena arriva vuota e si riempie: senza questo la pagina sobbalza */
	min-height: 320px;
}

.daisy3d__scena {
	width: 100%;
	/* leggermente più alta che larga: i tavolini si fotografano in verticale e
	   così la colonna della scena arriva quasi all'altezza di quella d'acquisto,
	   invece di fermarsi un centinaio di pixel prima lasciando un vuoto */
	aspect-ratio: 6 / 7;
	display: block;
	cursor: grab;
	touch-action: none; /* il trascinamento gira il tavolo, non scorre la pagina */
}

.daisy3d__scena:active {
	cursor: grabbing;
}

.daisy3d__scena canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* Finché three.js non ha disegnato, mostriamo un'attesa discreta invece del vuoto. */
.daisy3d:not(.is-pronto)::after {
	content: "Sto costruendo il tavolino…";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	letter-spacing: 0.04em;
	color: var(--daisy-muted, #6b6960);
}

.daisy3d__aiuto {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.06em;
	/* #6b6960 sulla sabbia dava 4,35: sotto la soglia di 4,5 per un testo piccolo */
	color: #605C4E;
	text-align: center;
	margin: 0;
	padding: 0 14px 14px;
}

/* Su tocco la rotella non esiste: cambiamo il suggerimento. */
@media (hover: none) {
	.daisy3d__aiuto {
		font-size: var(--t-mini);
	}
}

/* Il configuratore prende il posto della fotografia: il JS lo sposta dentro
   la colonna della galleria, quindi qui basta occuparla per intero. Le foto
   vere scivolano sotto, come riscontro di come il pezzo esce dal laboratorio. */
.daisy3d {
	width: 100%;
}

.daisy3d ~ .woocommerce-product-gallery {
	margin-top: 18px;
}