/* ==========================================================================
   Le Scene — wishlist che compone. Bottone stella, contatore header, toast,
   e la pagina «Le tue scene». Oro solo la stella; petrolio l'interazione.
   ========================================================================== */

/* --- bottone «Aggiungi alla scena»: variante CARD (riusa .mzz-card__wish) --- */
.mzz-save { cursor: pointer; border: 0; background: transparent; color: inherit; }
.mzz-card__wish.mzz-save {
	position: absolute; top: 10px; right: 10px; z-index: 3;
	width: 38px; height: 38px; display: grid; place-items: center;
	background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
	border-radius: 50%; box-shadow: 0 2px 9px rgba(31,31,31,.18);
	color: var(--c-oro); opacity: 1; transition: color .25s, transform .25s, background .25s, box-shadow .25s;
}
/* sempre visibile anche su desktop: l'«aggiungi alla scena» è un'azione chiave,
   non il vecchio cuore che spariva finché non passavi sull'immagine */
@media (hover:hover) {
	.mzz-card:hover .mzz-card__wish.mzz-save,
	.mzz-card__wish.mzz-save:hover { opacity: 1; }
}
.mzz-card__wish.mzz-save svg { width: 18px; height: 18px; transition: transform .3s; }
/* stella oro piena su hover: l'aggiunta alla scena è un'azione, si distingue dal resto */
.mzz-card__wish.mzz-save:hover { color: #fff; background: var(--c-oro); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(166,132,46,.4); }
.mzz-card__wish.mzz-save.is-saved { color: #fff; background: var(--c-oro); box-shadow: 0 3px 12px rgba(166,132,46,.36); }
.mzz-card__wish.mzz-save.is-saved svg { transform: scale(1.12); }
.mzz-card__wish.mzz-save.is-loading { opacity: .5; }

/* --- variante PDP: sotto le azioni d'acquisto, discreta --- */
.mzz-save--pdp {
	display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; padding: 6px 2px;
	color: var(--c-text-soft); font-family: var(--font-label); font-weight: 500;
	font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; transition: color .25s;
}
.mzz-save--pdp .mzz-save__orn { width: 15px; height: 15px; color: var(--c-oro); display: inline-flex; transition: transform .3s; }
.mzz-save--pdp:hover { color: var(--c-title); }
.mzz-save--pdp.is-saved { color: var(--c-oro); }
.mzz-save--pdp.is-saved .mzz-save__orn { transform: scale(1.15) rotate(8deg); }

/* --- contatore nella stella dell'header --- */
.mzz-scene-count {
	position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
	display: grid; place-items: center; background: var(--c-oro); color: #fff;
	font-family: var(--font-data); font-size: 10px; line-height: 1; border-radius: 9px;
}

/* --- toast di conferma --- */
.mzz-scene-toast {
	position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
	z-index: 9999; max-width: 90vw; padding: 12px 22px;
	background: var(--c-petrolio); color: var(--c-avorio);
	font-family: var(--font-body); font-size: .92rem; border-radius: 3px;
	box-shadow: 0 8px 30px rgba(31,31,31,.22); opacity: 0; transition: opacity .3s, transform .3s;
}
.mzz-scene-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* --- pagina «Le tue scene» --- */
.scene-pagina { padding: clamp(40px,6vw,84px) 0; background: var(--c-plate); min-height: 60vh; }
.scene-pagina__in { max-width: 1040px; margin-inline: auto; padding-inline: clamp(20px,4vw,40px); }
.scene-pagina__head { text-align: center; max-width: 620px; margin: 0 auto clamp(30px,4vw,50px); }
.scene-pagina__k { color: var(--c-oro); }
.scene-pagina__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem,3.4vw,2.7rem);
	line-height: 1.15; letter-spacing: -.01em; color: var(--c-title); margin: .3rem 0 .7rem; }
.scene-pagina__lead { color: var(--c-text-soft); font-size: 1.02rem; line-height: 1.7; }
.scene-pagina__nota { margin-top: 14px; color: var(--c-text-soft); font-family: var(--font-body); font-size: .92rem; line-height: 1.6; letter-spacing: normal; text-transform: none; }
.scene-pagina__nota a { color: var(--c-oro); }

/* ogni scena è un PANNELLO-progetto, delimitato e scandibile */
.mzz-scena { background: #fff; border: 1px solid var(--c-border-soft);
	padding: clamp(18px,2.6vw,32px); margin: 0 0 clamp(20px,2.6vw,30px); }
.mzz-scena__h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: 12px 22px; padding-bottom: 16px; margin-bottom: clamp(18px,2.2vw,24px);
	border-bottom: 1px solid var(--c-border-soft); }
.mzz-scena__id { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.mzz-scena__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem,2.1vw,1.6rem);
	color: var(--c-title); margin: 0; }
.mzz-scena__n { color: var(--c-text-soft); white-space: nowrap; }

/* i tuoi pezzi: le card riusano .mzz-card dello shop (immagine contenuta su
   bianco, titolo Montserrat). Qui solo la griglia e la × per rimuovere. */
.mzz-scena__lab { display: block; color: var(--c-text-soft); margin: 0 0 14px; }
.mzz-scena__griglia { list-style: none; margin: 0 0 clamp(22px,2.8vw,30px); padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: clamp(14px,1.8vw,22px); }
.mzz-scena__griglia .mzz-card { cursor: default; }
.mzz-scene-card__x { position: absolute; top: 8px; right: 8px; z-index: 4; width: 26px; height: 26px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--c-text-soft); font-size: 17px; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 5px rgba(31,31,31,.16); opacity: 0; transition: opacity .2s, color .2s; }
.mzz-scena__griglia .mzz-card:hover .mzz-scene-card__x, .mzz-scene-card__x:focus { opacity: 1; }
.mzz-scene-card__x:hover { color: var(--c-petrolio); }

/* segnaposto quando manca la foto: stella su avorio invece del vuoto bianco */
.mzz-card__ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-avorio); color: var(--c-oro); }
.mzz-card__ph svg { width: 34%; height: 34%; max-width: 46px; max-height: 46px; opacity: .4; }
.mzz-sugg__img .mzz-card__ph svg { max-width: 30px; max-height: 30px; }

.mzz-scene-vuoto { text-align: center; color: var(--c-text-soft); padding: 40px 0; font-size: 1.02rem; }

/* --- il consiglio: pannello su fondo avorio (custode + «cosa manca») --- */
.mzz-scena__intel:not(:empty) { background: var(--c-avorio); padding: clamp(18px,2.4vw,28px); }
.mzz-scena__intel.is-vuoto { display: none; }
.mzz-scena__consiglio-k { display: block; color: var(--c-oro); margin-bottom: 16px; }
.mzz-scena__custode { display: flex; gap: 12px; align-items: flex-start;
	padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(31,31,31,.07); }
.mzz-scena__custode-orn { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c-oro); margin-top: 2px; }
.mzz-scena__custode p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--c-text-soft); }

/* mentre l'LLM compone il consiglio: maschera con la stella e i punti che «pensano» */
.mzz-scena__compl.is-pending { min-height: 84px; }
.mzz-scena__pensa { display: flex; align-items: center; gap: 13px; padding: 12px 0; color: var(--c-text-soft); font-size: .95rem; }
.mzz-scena__pensa-orn { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c-oro); animation: mzz-pensa-orn 2.6s ease-in-out infinite; }
.mzz-dots { display: inline-flex; gap: 6px; }
.mzz-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-oro); animation: mzz-dots 1.2s ease-in-out infinite; }
.mzz-dots i:nth-child(2) { animation-delay: .18s; }
.mzz-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes mzz-dots { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes mzz-pensa-orn { 0%,100% { opacity: .5; transform: rotate(0); } 50% { opacity: 1; transform: rotate(20deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mzz-dots i, .mzz-scena__pensa-orn { animation: none; opacity: .7; } }
.mzz-scena__manca-k { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--c-title); margin-bottom: 14px; }
.mzz-scena__introllm { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 18px;
	font-size: 1rem; line-height: 1.62; color: var(--c-title); }
.mzz-scena__introllm .mzz-scena__custode-orn { margin-top: 3px; }
.mzz-manca { margin-bottom: 18px; }
.mzz-manca:last-child { margin-bottom: 0; }
.mzz-manca__k { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--c-title); margin-bottom: 10px; }
.mzz-manca__g { list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.mzz-sugg { position: relative; background: #fff; border: 1px solid var(--c-border-soft); padding-bottom: 8px; }
.mzz-sugg__img { display: block; aspect-ratio: 1/1; background: var(--c-avorio); }
.mzz-sugg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mzz-sugg__t { display: block; padding: 8px 8px 2px; font-size: .76rem; line-height: 1.35; color: var(--c-title); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mzz-sugg__t:hover { color: var(--c-oro); }
.mzz-sugg__p { display: block; padding: 0 8px; font-family: var(--font-data); font-size: .74rem; color: var(--c-text-soft); }
.mzz-sugg__add { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%;
	background: var(--c-petrolio); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 5px rgba(31,31,31,.2); transition: background .2s, transform .2s; }
.mzz-sugg__add:hover { background: var(--c-oro); transform: scale(1.08); }
.mzz-sugg__add:disabled { opacity: .5; cursor: default; }

/* --- picker «in quale scena?» (popover flottante) --- */
.mzz-pick {
	position: fixed; z-index: 10000; width: 260px; max-width: calc(100vw - 20px);
	background: #fff; border: 1px solid var(--c-border-soft);
	box-shadow: 0 12px 40px rgba(31,31,31,.18); padding: 14px;
}
.mzz-pick__k { margin: 0 0 10px; color: var(--c-oro); }
.mzz-pick__l { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.mzz-pick__s {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
	padding: 9px 11px; border: 0; background: var(--c-avorio); cursor: pointer; text-align: left;
	color: var(--c-title); font-family: var(--font-body); font-size: .9rem; transition: background .18s;
}
.mzz-pick__s:hover { background: var(--c-plate); }
.mzz-pick__sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzz-pick__sc { flex: 0 0 auto; color: var(--c-text-soft); }
.mzz-pick__n { display: flex; gap: 6px; border-top: 1px solid var(--c-border-soft); padding-top: 10px; }
.mzz-pick__i { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--c-border-soft);
	font-family: var(--font-body); font-size: .88rem; color: var(--c-title); }
.mzz-pick__i:focus { outline: none; border-color: var(--c-oro); }
.mzz-pick__crea { flex: 0 0 auto; padding: 8px 14px; border: 0; background: var(--c-petrolio); color: #fff;
	font-family: var(--font-label); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
	transition: background .2s; }
.mzz-pick__crea:hover { background: var(--c-oro); }
/* su mobile il picker è un pannellino centrato con velo dietro, non un popover ancorato */
.mzz-pick__backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(31,31,31,.32); }
.mzz-pick--center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 32px)); }
/* input a 16px su mobile: sotto i 16px iOS fa auto-zoom al focus (lo «scatto zoom») */
@media (max-width: 600px) { .mzz-pick__i { font-size: 16px; } }

/* --- azioni della scena (nell'intestazione: carrello pieno + condividi ghost) --- */
.mzz-scena__azioni { display: flex; align-items: center; gap: 6px 16px; flex-shrink: 0; flex-wrap: wrap; }
.mzz-scena__cta {
	padding: 11px 22px; border: 0; background: var(--c-petrolio); color: var(--c-avorio); cursor: pointer;
	font-family: var(--font-label); font-weight: 500; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
	transition: background .22s, transform .22s;
}
.mzz-scena__cta:hover { background: var(--c-oro); transform: translateY(-1px); }
.mzz-scena__cta:disabled { opacity: .55; cursor: default; transform: none; }
.mzz-scena__link {
	border: 0; background: transparent; cursor: pointer; padding: 4px 2px; text-decoration: none;
	color: var(--c-text-soft); font-family: var(--font-label); font-weight: 500; font-size: .6rem;
	letter-spacing: .14em; text-transform: uppercase; transition: color .2s;
}
.mzz-scena__link:hover { color: var(--c-title); }
.mzz-scena__link:disabled { opacity: .55; cursor: default; }
/* elimina l'intera scena: azione distruttiva, tenuta discreta finché non ci passi sopra */
.mzz-scena__del {
	border: 0; background: transparent; cursor: pointer; padding: 4px 2px; margin-left: auto;
	color: var(--c-text-soft); font-family: var(--font-label); font-weight: 500; font-size: .58rem;
	letter-spacing: .14em; text-transform: uppercase; transition: color .2s;
}
.mzz-scena__del:hover { color: #b23b2e; }
.mzz-scena__del:disabled { opacity: .55; cursor: default; }

/* --- scena condivisa (destinatario del link): l'azione sta in fondo, centrata --- */
.mzz-scena--cond .mzz-scena__azioni { justify-content: center; margin-top: 4px; }

/* --- touch: niente hover, quindi i controlli devono essere sempre visibili e
       comodi da toccare (la × spariva su mobile, il «+» era piccolo) --- */
@media (hover: none) {
	.mzz-scene-card__x { opacity: 1; width: 34px; height: 34px; font-size: 20px; }
	.mzz-sugg__add { width: 34px; height: 34px; font-size: 20px; }
}

/* --- mobile: le azioni della scena a tutta larghezza (prima «Condividi» usciva
       oltre il pannello) e il carrello con un'area di tocco più generosa --- */
@media (max-width: 560px) {
	.mzz-scena__h { align-items: flex-start; }
	.mzz-scena__azioni { width: 100%; gap: 10px 14px; }
	.mzz-scena__cta { flex: 1 1 auto; text-align: center; padding-top: 14px; padding-bottom: 14px; }
	.mzz-scena__link { padding: 10px 4px; }
}

/* --- voce «Le tue scene» nel menù laterale: il badge dev'essere inline (non
       il badge assoluto della stella-header) --- */
.oc__util-link .mzz-scene-count { position: static; top: auto; right: auto;
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; }

/* --- pillola flottante «Le tue scene»: solo mobile, dove la stella non è in
       header. Scivola dentro in basso a sinistra quando la scena ha pezzi. --- */
.mzz-scene-fab { display: none; }
@media (max-width: 960px) {
	.site-action--scene { display: none; }   /* mobile: l'accesso è nel menù + pillola */
	.mzz-scene-fab {
		/* bottom: 74px, non 16 → sta SOPRA il badge cookie (Cookiebot) che vive
		   in basso a sinistra (48px, z-index massimo) e altrimenti lo coprirebbe. */
		position: fixed; left: 16px; bottom: 74px; z-index: 8000;
		display: inline-flex; align-items: center; gap: 8px;
		height: 48px; padding: 0 16px 0 13px; border-radius: 26px;
		background: var(--c-petrolio); color: var(--c-avorio); text-decoration: none;
		box-shadow: 0 6px 22px rgba(31,31,31,.28);
		transform: translateY(150%); opacity: 0; pointer-events: none;
		transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s;
	}
	.mzz-scene-fab.is-on { transform: none; opacity: 1; pointer-events: auto; }
	.mzz-scene-fab__orn { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-oro); display: inline-flex; }
	.mzz-scene-fab .mzz-scene-count { position: static; top: auto; right: auto;
		min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .mzz-scene-fab { transition: opacity .2s; } }