/* ==========================================================================
   Aiutami a scegliere (inc/scegli.php, 14/10/2026): pannello a destra su computer,
   foglio dal basso sul telefono. Stessa lingua dei filtri (petrolio, beige, oro).
   ========================================================================== */
.mzz-sc-btn svg{ width:15px; height:15px; color:var(--c-oro); }

/* la barra flottante (stessa della scheda prodotto, .mzz-assist__dock): prende il posto del globo */
body:has(.mzz-sc-dock) .mzz-cerca-fab{ display:none !important; }
.mzz-sc-dock{ position:fixed; left:50%; bottom:24px; z-index:400;
	display:flex; align-items:stretch; padding:4px; border:1px solid var(--c-border-soft); border-radius:999px;
	background:#FCFAF6; color:var(--c-title);
	box-shadow:0 14px 36px -14px rgba(47,62,70,.42), 0 2px 8px rgba(47,62,70,.10);
	opacity:0; pointer-events:none; transform:translate(-50%,90px);
	transition:transform .55s cubic-bezier(.2,.85,.25,1), opacity .45s ease, bottom .35s ease; }
.mzz-sc-dock.is-on{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
/* il bottone «Filtri» flottante (telefono) resta suo: la barra gli sale sopra */
body:has(.shop-filter-fab.is-visible) .mzz-sc-dock{ bottom:80px; }
html.ha-cerca .mzz-sc-dock,
html.mzz-sc-aperto .mzz-sc-dock,
body.mzz-filters-open .mzz-sc-dock,
body:has(.mzz-added.is-on) .mzz-sc-dock,
body.oc-open .mzz-sc-dock,
body.mzz-oc-open .mzz-sc-dock,
body.pf-open .mzz-sc-dock,
body.bs-open .mzz-sc-dock,
body.mzz-story-open .mzz-sc-dock{ opacity:0 !important; pointer-events:none !important; transform:translate(-50%,90px) !important; }
.mzz-sc-dock__v{ display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 18px; margin:0;
	background:none; border:0; border-radius:999px; cursor:pointer; color:inherit;
	font-family:var(--font-label); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; line-height:1;
	white-space:nowrap; transition:background .25s ease; }
.mzz-sc-dock__v + .mzz-sc-dock__v{ position:relative; }
.mzz-sc-dock__v + .mzz-sc-dock__v::before{ content:""; position:absolute; left:0; top:11px; bottom:11px; width:1px; background:var(--c-border-soft); }
.mzz-sc-dock__v:hover{ background:var(--c-avorio); }
.mzz-sc-dock__v:hover::before, .mzz-sc-dock__v:hover + .mzz-sc-dock__v::before{ opacity:0; }
.mzz-sc-dock__v:focus-visible{ outline:2px solid var(--c-oro); outline-offset:1px; }
.mzz-sc-dock__ic{ flex:0 0 auto; width:17px; height:17px; display:inline-flex; }
.mzz-sc-dock__ic svg{ width:100%; height:100%; display:block; }
.mzz-sc-dock__ic--oro{ color:var(--c-oro); }
.mzz-sc-dock__l--corto{ display:none; }
@media (max-width:560px){
	/* centrato (18/10/2026): il bottone dei cookie in basso a sinistra non c'è più (i cookie stanno nel piè di pagina) */
	.mzz-sc-dock{ bottom:16px; left:50%; }
	body:has(.shop-filter-fab.is-visible) .mzz-sc-dock{ bottom:72px; }
	.mzz-sc-dock__v{ padding:0 14px; gap:7px; font-size:.6rem; letter-spacing:.12em; min-height:42px; }
	.mzz-sc-dock__l--lungo{ display:none; }
	.mzz-sc-dock__l--corto{ display:inline; }
}
@media (prefers-reduced-motion:reduce){ .mzz-sc-dock{ transition:opacity .3s ease; } }
.mzz-sc[hidden]{ display:none; }
.mzz-sc{ position:fixed; inset:0; z-index:100002; }
.mzz-sc__velo{ position:absolute; inset:0; background:rgba(20,26,29,.42); opacity:0; transition:opacity .3s; }
.mzz-sc.is-aperto .mzz-sc__velo{ opacity:1; }
.mzz-sc__box{ position:absolute; top:0; right:0; bottom:0; width:min(460px,100vw); display:grid; grid-template-rows:auto 1fr auto;
	background:var(--c-bg, #f4f1ed); box-shadow:-18px 0 50px rgba(0,0,0,.18); transform:translateX(102%); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.mzz-sc.is-aperto .mzz-sc__box{ transform:none; }
html.mzz-sc-aperto{ overflow:hidden; }

.mzz-sc__testa{ position:relative; padding:22px 24px 14px; border-bottom:1px solid var(--c-border-soft); }
.mzz-sc__k{ margin:0 0 4px; color:var(--c-oro); }
.mzz-sc__t{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.6rem; line-height:1.15; color:var(--c-title); }
.mzz-sc__passo{ margin:8px 0 0; font-family:var(--font-label); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-data); }
/* la croce: un bottone vero, tondo e bordato, che si vede subito */
.mzz-sc__x{ position:absolute; top:16px; right:16px; width:42px; height:42px; display:grid; place-items:center;
	border:1px solid var(--c-border-soft); border-radius:50%; background:var(--c-surface, #fff); color:var(--c-title); cursor:pointer;
	box-shadow:0 2px 8px rgba(47,62,70,.08); transition:border-color .2s; }
.mzz-sc__x:hover{ border-color:var(--c-title); }
.mzz-sc__x:focus-visible{ outline:2px solid var(--c-oro); outline-offset:2px; }
.mzz-sc__x svg{ width:20px; height:20px; }
.mzz-sc__testa{ padding-right:72px; }
/* con la barra di WordPress (utenti collegati) il pannello parte sotto */
body.admin-bar .mzz-sc__box{ top:var(--wp-admin--admin-bar--height, 32px); }
/* aperto il pannello, il bottone dei cookie non ci finisce sopra */
html.mzz-sc-aperto #CookiebotWidget{ visibility:hidden; }

.mzz-sc__corpo{ overflow-y:auto; overscroll-behavior:contain; padding:18px 24px; }
.mzz-sc__d{ margin:0 0 14px; font-family:var(--font-display); font-size:1.25rem; line-height:1.3; color:var(--c-title); }
.mzz-sc__attesa{ margin:0; font-family:var(--font-body); font-size:.86rem; font-style:italic; color:var(--c-text-soft); }
.mzz-sc__opz{ display:grid; gap:8px; }
.mzz-sc__o{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:10px 14px;
	border:1px solid var(--c-border-soft); background:var(--c-surface, #fff); cursor:pointer; text-align:left;
	font-family:var(--font-body); font-size:.94rem; color:var(--c-title); transition:border-color .2s, background .2s; }
.mzz-sc__o:hover{ border-color:var(--c-petrolio); }
.mzz-sc__o:focus-visible{ outline:2px solid var(--c-oro); outline-offset:2px; }
.mzz-sc__o b{ font-family:var(--font-data); font-weight:400; font-size:.78rem; color:var(--c-data); }
.mzz-sc__o.is-on{ border-color:var(--c-petrolio); background:rgba(47,62,70,.07); }
.mzz-sc__o.is-tue{ border-color:var(--c-oro); }
.mzz-sc__o em{ font-style:normal; margin-left:6px; padding:2px 7px; border-radius:999px; background:rgba(176,141,87,.16); font-family:var(--font-label); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-oro); }
.mzz-sc__o--salta{ background:transparent; border-style:dashed; color:var(--c-text-soft); }
.mzz-sc__indietro{ margin-top:14px; padding:6px 0; border:0; background:none; cursor:pointer; font-family:var(--font-label); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-data); }

.mzz-sc__piede{ display:grid; gap:14px; padding:14px 24px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--c-border-soft); background:var(--c-bg, #f4f1ed); }
.mzz-sc__vai{ width:100%; min-height:50px; border:0; background:var(--c-petrolio); color:#fff; cursor:pointer; font-family:var(--font-label); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }
.mzz-sc__vai:disabled{ opacity:.55; cursor:default; }
.mzz-sc__vai:focus-visible{ outline:2px solid var(--c-oro); outline-offset:2px; }
.mzz-sc__parole label{ display:block; margin-bottom:6px; font-family:var(--font-label); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-data); }
.mzz-sc__campo{ display:flex; border:1px solid var(--c-border-soft); background:var(--c-surface, #fff); }
.mzz-sc__campo input{ flex:1; min-width:0; min-height:44px; padding:0 12px; border:0; background:transparent; font-family:var(--font-body); font-size:16px; color:var(--c-title); } /* 16px: sotto, iPhone fa lo zoom */
.mzz-sc__campo input:focus{ outline:none; }
.mzz-sc__campo:focus-within{ border-color:var(--c-petrolio); }
.mzz-sc__campo button{ width:44px; border:0; background:none; cursor:pointer; color:var(--c-petrolio); }
.mzz-sc__campo button svg{ width:20px; height:20px; }

@media (max-width:760px){
	/* foglio dal basso: alto quanto serve, mai oltre l'82% dello schermo; la maniglia dice che è un foglio */
	.mzz-sc__box, body.admin-bar .mzz-sc__box{ top:auto; left:0; width:100%; max-height:82vh; max-height:82dvh; border-radius:18px 18px 0 0; transform:translateY(105%); box-shadow:0 -18px 50px rgba(0,0,0,.18); }
	.mzz-sc__testa{ padding:22px 72px 10px 20px; }
	.mzz-sc__testa::before{ content:""; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--c-border-soft); }
	.mzz-sc__x{ top:14px; right:14px; width:40px; height:40px; }
	.mzz-sc__t{ font-size:1.35rem; }
	.mzz-sc__passo{ margin-top:6px; }
	.mzz-sc__corpo{ padding:14px 20px; }
	.mzz-sc__d{ font-size:1.1rem; margin-bottom:12px; }
	.mzz-sc__opz{ gap:6px; }
	.mzz-sc__o{ min-height:46px; padding:9px 14px; font-size:.92rem; }
	.mzz-sc__piede{ gap:10px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); }
	.mzz-sc__vai{ min-height:48px; }
	.mzz-sc__parole label{ margin-bottom:4px; }
	.mzz-sc__campo input{ min-height:42px; }
}
@media (prefers-reduced-motion:reduce){ .mzz-sc__box, .mzz-sc__velo{ transition:none; } }

/* ==========================================================================
   v2 (15/10/2026) — la stessa lingua dell'assistente della scheda: chi parla in
   alto, le domande come messaggi, le scelte fatte come risposte, le risposte pronte
   come bottoni; in fondo, fissi, il campo «a parole» e «Vedi i N prodotti».
   ========================================================================== */
.mzz-sc__box{ background:var(--c-bg, #F4F1ED); }
.mzz-sc__testa{ display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:12px; align-items:center;
	padding:16px 66px 12px 20px; background:#FCFAF6; }
.mzz-sc__avatar{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--c-petrolio); color:var(--c-oro); }
.mzz-sc__avatar svg{ width:18px; height:18px; }
.mzz-sc__chi{ min-width:0; }
.mzz-sc__k{ margin:0 0 2px; font-size:.56rem; }
.mzz-sc__t{ font-size:1.15rem; line-height:1.2; }
.mzz-sc__passo{ grid-column:1 / -1; margin:10px 0 0; }
.mzz-sc__x{ top:14px; right:14px; }

.mzz-sc__corpo{ display:flex; flex-direction:column; gap:12px; padding:18px 20px; scroll-behavior:smooth; }
.mzz-sc__turno{ display:flex; flex-direction:column; gap:6px; }
.mzz-sc__msg, .mzz-sc__d{ align-self:flex-start; max-width:90%; margin:0; padding:11px 14px; background:#fff; border:1px solid var(--c-border-soft);
	border-radius:4px 16px 16px 16px; font-family:var(--font-body); font-size:.95rem; line-height:1.5; color:var(--c-title); }
.mzz-sc__tua{ align-self:flex-end; max-width:80%; margin:0; padding:9px 14px; background:var(--c-petrolio); color:var(--c-avorio);
	border-radius:16px 16px 4px 16px; font-family:var(--font-body); font-size:.9rem; line-height:1.4; }
.mzz-sc__attesa{ padding-left:4px; }
/* le risposte pronte: bottoni a pillola, a capo, col numero dei prodotti */
.mzz-sc__opz{ display:flex; flex-wrap:wrap; gap:8px; }
.mzz-sc__o{ width:auto; min-height:40px; padding:8px 14px; gap:8px; border-radius:999px; font-size:.88rem; justify-content:flex-start; }
.mzz-sc__o b{ font-size:.72rem; color:var(--c-text-soft); }
.mzz-sc__o:hover{ background:#fff; }
.mzz-sc__o--salta{ border-style:dashed; }
.mzz-sc__indietro{ align-self:flex-start; margin-top:2px; }

.mzz-sc__piede{ gap:10px; background:#FCFAF6; }
.mzz-sc__campo{ border-radius:999px; padding:0 4px 0 6px; background:#fff; border-color:var(--c-beige); }
.mzz-sc__campo button{ width:40px; height:40px; margin:3px 0; border-radius:50%; background:var(--c-petrolio); color:var(--c-avorio); display:grid; place-items:center; }
.mzz-sc__campo button svg{ width:18px; height:18px; }
.mzz-sc__vai{ border-radius:2px; }
@media (max-width:760px){
	.mzz-sc__testa{ padding:22px 62px 10px 16px; grid-template-columns:36px minmax(0,1fr); column-gap:10px; }
	.mzz-sc__avatar{ width:36px; height:36px; }
	.mzz-sc__t{ font-size:1.08rem; }
	.mzz-sc__corpo{ padding:14px 16px; }
	.mzz-sc__piede{ padding:10px 16px calc(12px + env(safe-area-inset-bottom)); }
}
/* a parole, nella chat: i prodotti trovati come risposta dell'assistente */
.mzz-sc__trovati{ width:90%; display:grid; gap:8px; }
.mzz-sc__trovati p{ margin:0; }
.mzz-sc__trovati ul{ list-style:none; margin:0; padding:0; display:grid; }
.mzz-sc__trovati li + li{ border-top:1px solid var(--c-border-soft); }
.mzz-sc__trovati a{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 0; text-decoration:none; color:var(--c-title); }
.mzz-sc__trovati img, .mzz-sc__trovati a > span:first-child{ width:48px; height:48px; object-fit:contain; background:var(--c-bg, #F4F1ED); }
.mzz-sc__tn{ font-size:.84rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mzz-sc__trovati a:hover .mzz-sc__tn{ text-decoration:underline; text-underline-offset:3px; }
.mzz-sc__tp{ font-family:var(--font-data); font-size:.8rem; white-space:nowrap; }
.mzz-sc__tutti{ justify-self:start; padding:6px 0; border:0; background:none; cursor:pointer; font-family:var(--font-label); font-weight:600;
	font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-petrolio); }
.mzz-sc__tutti:focus-visible{ outline:2px solid var(--c-oro); outline-offset:2px; }
/* la frase capita dall'IA, in testa alla risposta */
.mzz-sc__capito{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 4px; font-size:.84rem; font-weight:600; color:var(--c-title); }
.mzz-sc__capito span{ padding:2px 9px; border-radius:999px; border:1px solid var(--c-beige); background:#FCFAF6; font-weight:400; font-size:.78rem; }
.mzz-sc__tp del{ display:block; font-size:.72rem; color:var(--c-text-soft); }
/* la risposta dell'IA: il perché sotto il nome */
.mzz-sc__ia > p{ line-height:1.5; }
.mzz-sc__tn small{ display:block; margin-top:2px; font-size:.74rem; line-height:1.3; color:var(--c-oro); font-style:italic; -webkit-line-clamp:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mzz-sc__tn--ia{ display:grid; gap:2px; -webkit-line-clamp:unset; overflow:visible; }
.mzz-sc__tnn{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }