/* M-Pellet — POMPEI "L'anfiteatro". Solo regole di questa pagina, sopra prodotto.css.
   Movimento circolare e verticale: anelli concentrici dietro il prodotto, selettore delle tre configurazioni
   con taglio laser orizzontale.
   Immagini (28/10/2026, docs/strategia-immagini-2026-10-28.md): POMPEI è gruppo B. I tre render restano INTERI
   sul loro sfondo bianco originale, dentro il pannello .p-visual--pannello di prodotto.css: nessuno scontorno,
   nessuna luce finta tra le lamelle, nessun drop-shadow. 1080 px: il limite di misura lo applica --px. */

body.pompei{--blu:#16233a;--brace:#5a2a10}

/* ---------- HERO: l'arena ---------- */
.pm-hero .p-hero__cat{letter-spacing:.12em}
.pm-arena{isolation:isolate;background:
  radial-gradient(38% 30% at 50% 30%,rgba(242,140,40,.16) 0%,transparent 70%),
  radial-gradient(48% 46% at 50% 62%,var(--blu) 0%,rgba(22,35,58,.35) 45%,transparent 72%)}
/* pannello del render: quadrato, alto al massimo ~74vh compresi margini e didascalia */
.pm-arena .p-visual--hero{position:relative;z-index:2;max-width:min(100%,520px,calc(74vh - 100px))}
/* anelli concentrici: le gradinate dell'anfiteatro viste dall'alto */
.pm-arena__rings{position:absolute;left:50%;top:56%;width:min(92%,640px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;pointer-events:none;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 34px,rgba(244,244,242,.07) 34px 35px);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.pm-arena__rings::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(242,210,10,.22)}
.pm-hero .nota-richiesta a{color:var(--ink)}
@media (max-width:900px){.pm-arena__rings{top:50%;width:min(96%,420px)}.pm-arena .p-visual--hero{max-width:min(100%,460px,calc(60vh - 80px))}}

/* ---------- TRE CONFIGURAZIONI ---------- */
.pm-conf__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);max-width:860px}
.pm-tab{appearance:none;background:transparent;border:0;border-right:1px solid var(--line);color:var(--muted);font:800 clamp(14px,1.4vw,18px)/1.1 var(--display);font-stretch:112%;letter-spacing:.01em;text-transform:uppercase;
  padding:18px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;position:relative;text-align:left;min-height:64px;transition:color .3s,background .3s}
.pm-tab:last-child{border-right:0}
.pm-tab span{font:600 11px var(--mono);color:var(--dim);letter-spacing:.1em}
.pm-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pm-tab:hover{color:var(--ink)}
.pm-tab[aria-selected="true"]{color:var(--ink);background:#18181a}
.pm-tab[aria-selected="true"] span{color:var(--yellow)}
.pm-tab[aria-selected="true"]::after{transform:none}
.pm-tab:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}

.pm-conf__stage{position:relative;overflow:hidden;padding-bottom:36px} /* spazio per l'ombra del pannello */
.pm-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.pm-panel[hidden]{display:none}
/* le tre configurazioni: stesso pannello, stessa misura, stessa inquadratura (render 1080 x 1080) */
.pm-panel__fig.p-visual{justify-self:center;max-width:min(100%,480px,calc(64vh - 60px))}
.pm-panel__txt{display:grid;gap:18px;max-width:520px}
.pm-panel__txt>p{color:#d6d6d2;font-size:clamp(16px,1.2vw,18px)}
.pm-panel__txt b{color:var(--ink)}
.pm-panel__name{font-size:clamp(38px,4.4vw,72px)}
/* taglio laser orizzontale che attraversa il palco al cambio di configurazione */
.pm-cut{position:absolute;left:0;right:0;top:0;height:2px;background:var(--yellow);box-shadow:0 0 18px 2px rgba(242,210,10,.55),0 0 2px #fff;opacity:0;pointer-events:none;z-index:3}
@media (max-width:900px){
  .pm-panel{grid-template-columns:1fr}
  .pm-panel__fig.p-visual{max-width:min(100%,420px)}
}
@media (max-width:560px){
  .pm-tab{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 10px;font-size:13px}
}

/* ---------- DRINK SERVICE ---------- */
.pm-drink{background:
  radial-gradient(60% 70% at 85% 10%,rgba(22,35,58,.85) 0%,transparent 70%),var(--void)}
.pm-drink__quote{display:grid;gap:18px;max-width:1100px}
.pm-drink__quote .display{line-height:.98}
.pm-drink__quote .line-mask:nth-child(2)>span{color:var(--muted)}
.pm-drink__feat li{background:rgba(12,12,13,.86)}

/* ---------- PREZZO (chiusura): componente .p-prezzo di prodotto.css (regole 28/10/2026).
   pompei.js mostra il blocco della configurazione attiva (Drink Service con prezzo campagna, braciere e barbecue su richiesta). */
.pm-buy{display:grid;gap:clamp(22px,3vw,34px);max-width:1180px}
.pm-buy .p-prezzo[hidden]{display:none}
.pm-buy__richiesta{padding:clamp(20px,3vw,34px);border:1px solid var(--line)}
.pm-panel__txt .p-prezzo{max-width:460px}

/* ---------- OPTIONAL: riepilogo e CTA ---------- */
.pm-opt-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.pm-opt-cta__sel{font-size:12px;color:var(--muted);max-width:60ch}
@media (max-width:560px){.pm-opt-cta .btn{flex:1 1 100%;justify-content:center}}

/* ---------- SCHEDA TECNICA: quote disegnate attorno al render ----------
   Render intero su bianco in un pannello; le quote stanno fuori dal pannello e seguono l'ingombro del prodotto
   nel render 1080 x 1080 (x 233-860, y 134-1009 px: 21,6% / 20,4% ai lati, 12,4% sopra, 6,6% sotto). */
.pm-scheda{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center}
.pm-quote{position:relative;margin:0 auto;width:min(100%,380px);padding:0 64px 54px 0}
.pm-quote__tela{position:relative;display:block;background:#fff;box-shadow:0 34px 60px -34px rgba(0,0,0,.7)}
.pm-quote img{display:block;width:100%;height:auto;max-width:702px}
.pm-quote__h,.pm-quote__w{position:absolute;display:block}
.pm-quote__h{left:calc(100% + 30px);top:12.4%;bottom:6.6%;width:1px}
.pm-quote__w{top:calc(100% + 28px);left:21.6%;right:20.4%;height:1px}
.pm-quote i{position:absolute;inset:0;background:var(--yellow);transform-origin:center}
.pm-quote__h i{transform:scaleY(var(--q,1))}
.pm-quote__w i{transform:scaleX(var(--q,1))}
.pm-quote__h::before,.pm-quote__h::after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:var(--yellow)}
.pm-quote__h::before{top:0}.pm-quote__h::after{bottom:0}
.pm-quote__w::before,.pm-quote__w::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:var(--yellow)}
.pm-quote__w::before{left:0}.pm-quote__w::after{right:0}
.pm-quote b{position:absolute;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;background:#111112;padding:2px 6px}
.pm-quote__h b{top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.pm-quote__w b{left:50%;top:50%;transform:translate(-50%,-50%)}
@media (max-width:900px){.pm-scheda{grid-template-columns:1fr}.pm-quote{width:min(78%,320px)}}

@media (prefers-reduced-motion:reduce){.pm-tab::after{transition:none}}

/* ---------- CORRELATI: correzione locale ----------
   Colonne vincolate (un'immagine con larghezza intrinseca grande non deve allargare la pagina su mobile).
   Il render ETNA è già su tela 4:5 uniforme (base del prodotto al 94%): riempie il riquadro come i pannelli
   e le provvisorie, così le tre schede hanno la stessa proporzione e la stessa linea di base.
   Solo figli diretti (>img): le immagini dentro .p-visual seguono le regole del componente. */
.pompei .p-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pompei .p-grid>li{min-width:0}
.pompei .p-card{grid-template-columns:minmax(0,1fr)}
.pompei .p-card__img{position:relative;min-width:0}
.pompei .p-card__img>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}

/* barra mobile: "Richiedi disponibilità" non si comprime (regole 28/10/2026); il testo a sinistra va a capo */
.buybar .btn{flex:none}
.buybar span{line-height:1.35}