/* =====================================================================
   Blocco 3D stand C2 - Didacta Lanciano 2026
   Tutto e' sotto .s3d-root: non tocca il resto della pagina.
   Firma di forma C2 "3+1": tre angoli tondi, quello in basso a destra vivo.
   ===================================================================== */
.s3d-root{
  --s3d-blue:#0074C5; --s3d-navy:#003E87; --s3d-yellow:#F7B32B;
  --s3d-ink:#0d2440; --s3d-muted:#4f6580; --s3d-line:#e3eaf3;
  --s3d-r:14px;
  position:relative; width:100%; height:100%; min-height:300px;
  overflow:hidden; isolation:isolate;
  font-family:"Montserrat",Arial,sans-serif; color:var(--s3d-ink);
  background:linear-gradient(180deg,#dfe9f5 0%,#edf2f8 55%,#f5f7fa 100%);
  border-radius:var(--s3d-r) var(--s3d-r) 0 var(--s3d-r);
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.s3d-root *,.s3d-root *::before,.s3d-root *::after{box-sizing:border-box}
.s3d-root canvas{display:block; position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; outline:none}
.s3d-root.s3d-grab canvas{cursor:grab}
.s3d-root.s3d-dragging canvas{cursor:grabbing}
.s3d-root.s3d-hot canvas{cursor:pointer}

/* ---- focus visibile ovunque ---- */
.s3d-root :focus-visible{outline:3px solid var(--s3d-yellow); outline-offset:2px}

/* ---- caricamento / errore ---- */
.s3d-msg{position:absolute; inset:0; display:grid; place-items:center; z-index:9;
  font-size:13px; font-weight:600; color:var(--s3d-muted); text-align:center; padding:16px}

/* ---- aree: legenda in alto (anche accesso da tastiera) ---- */
.s3d-chips{position:absolute; left:12px; right:12px; top:12px; z-index:5;
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; pointer-events:none}
.s3d-chips::-webkit-scrollbar{display:none}
.s3d-chip{pointer-events:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  border:0; cursor:pointer; font:inherit; font-size:12px; font-weight:700; color:var(--s3d-navy);
  background:rgba(255,255,255,.92); padding:6px 11px 6px 6px;
  border-radius:10px 10px 0 10px; box-shadow:0 4px 14px -6px rgba(0,62,135,.45);
  transition:transform .12s, box-shadow .12s, background .12s}
.s3d-chip b{display:inline-grid; place-items:center; min-width:24px; height:20px; padding:0 4px;
  font-size:11px; font-weight:800; color:#fff; background:var(--z,#0074C5); border-radius:6px 6px 0 6px}
.s3d-chip:hover,.s3d-chip.s3d-on{background:#fff; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(0,62,135,.6)}
.s3d-chip.s3d-on{box-shadow:inset 0 -3px 0 var(--z), 0 8px 18px -8px rgba(0,62,135,.6)}

/* ---- pin sopra la zona ---- */
.s3d-pins{position:absolute; inset:0; z-index:4; pointer-events:none}
.s3d-pin{position:absolute; left:0; top:0; transform:translate(-50%,-100%) translateY(6px);
  display:flex; flex-direction:column; align-items:center; border:0; background:none; padding:0;
  font:inherit; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s}
.s3d-pin.s3d-on{opacity:1; pointer-events:auto; transform:translate(-50%,-100%)}
.s3d-pin-b{display:flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--z,#0074C5); color:#fff; font-size:13px; font-weight:700;
  padding:7px 12px 7px 7px; border-radius:12px 12px 0 12px;
  box-shadow:0 10px 24px -10px rgba(0,30,70,.75)}
.s3d-pin-b b{display:inline-grid; place-items:center; height:22px; min-width:26px; padding:0 5px;
  background:#fff; color:var(--z,#0074C5); font-size:11px; font-weight:800; border-radius:7px 7px 0 7px}
.s3d-pin-b i{font-style:normal; font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  opacity:.85; border-left:1px solid rgba(255,255,255,.4); padding-left:8px}
.s3d-pin[data-accent] .s3d-pin-b{box-shadow:inset 0 -3px 0 var(--s3d-yellow), 0 10px 24px -10px rgba(0,30,70,.75)}
.s3d-pin-s{width:2px; height:18px; background:var(--z,#0074C5); opacity:.7}
.s3d-pin-d{width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--z,#0074C5)}
.s3d-pin:hover .s3d-pin-b{filter:brightness(1.08)}

/* ---- comandi ---- */
.s3d-hud{position:absolute; right:12px; bottom:12px; z-index:5; display:flex; gap:6px}
.s3d-btn{width:40px; height:40px; border:0; cursor:pointer; display:grid; place-items:center;
  background:#fff; color:var(--s3d-navy); font:inherit; font-size:18px; font-weight:800; line-height:1;
  border-radius:12px 12px 0 12px; box-shadow:0 6px 16px -6px rgba(0,62,135,.5);
  transition:transform .12s, background .12s, color .12s}
.s3d-btn:hover{background:var(--s3d-blue); color:#fff; transform:translateY(-1px)}
.s3d-btn svg{width:18px; height:18px}
.s3d-btn--wide{width:auto; padding:0 13px; font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.s3d-btn--ppl{display:inline-flex; gap:7px; align-items:center}
.s3d-btn--ppl[aria-pressed="false"]{background:var(--s3d-navy); color:#fff}
.s3d-btn--ppl[aria-pressed="false"] svg{opacity:.7}
.s3d-hint{position:absolute; left:14px; bottom:16px; z-index:5; max-width:calc(100% - 420px);
  font-size:11.5px; font-weight:600; color:var(--s3d-muted); line-height:1.35; pointer-events:none}
.s3d-hint kbd{font:inherit; font-size:10.5px; font-weight:700; color:var(--s3d-navy);
  background:#fff; border-radius:5px 5px 0 5px; padding:1px 6px; box-shadow:0 2px 6px -2px rgba(0,62,135,.4)}

/* ---- popup della zona ---- */
/* 05/10: senza prodotti il popup è alto quanto il testo (prima occupava tutta l'altezza) */
.s3d-pop{position:absolute; z-index:8; top:58px; right:12px; max-height:calc(100% - 70px);   /* sotto la barra delle aree */
  width:min(380px, calc(100% - 24px)); display:flex; flex-direction:column;
  background:#fff; border-radius:18px 18px 0 18px; overflow:hidden;
  box-shadow:0 28px 70px -24px rgba(0,40,90,.6);
  opacity:0; transform:translateX(16px); pointer-events:none; visibility:hidden;
  transition:opacity .22s, transform .22s, visibility 0s .22s;
  -webkit-user-select:text; user-select:text}
.s3d-pop.s3d-on{opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .22s, transform .22s}
.s3d-pop-h{position:relative; padding:16px 54px 14px 16px; color:#fff; background:var(--z,#0074C5);
  display:flex; align-items:center; gap:12px; flex:0 0 auto}
.s3d-pop[data-accent] .s3d-pop-h{box-shadow:inset 0 -5px 0 var(--s3d-yellow)}
.s3d-pop-n{flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px;
  background:#fff; color:var(--z,#0074C5); font-size:20px; font-weight:800; border-radius:13px 13px 0 13px}
.s3d-pop-h h3{margin:0; font-size:19px; font-weight:800; line-height:1.15; color:#fff}
.s3d-pop-h p{margin:3px 0 0; font-size:12px; font-weight:600; opacity:.9}
.s3d-x{position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; font:inherit; font-size:20px; font-weight:700; line-height:1;
  border-radius:10px 10px 0 10px; display:grid; place-items:center}
.s3d-x:hover{background:#fff; color:var(--z,#0074C5)}
.s3d-pop-b{padding:16px 18px 18px; overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto}
.s3d-txt{margin:0; font-size:14.5px; line-height:1.6; font-weight:500; color:#33475f}
.s3d-prov{display:inline-block; margin-right:4px; padding:1px 7px; font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#7a4b00; background:#FFF1D2;
  border:1px dashed #E0A532; border-radius:6px 6px 0 6px; vertical-align:1px}
.s3d-pop-k{margin:0 0 9px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#003E87}
.s3d-prods{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.s3d-prod{display:flex; flex-direction:column; border:1px solid var(--s3d-line); background:#fff;
  border-radius:12px 12px 0 12px; overflow:hidden}
.s3d-prod-img{aspect-ratio:1/1; background:#fff; display:grid; place-items:center; border-bottom:1px solid var(--s3d-line)}
.s3d-prod-img img{width:100%; height:100%; object-fit:contain; display:block}
.s3d-prod-img span{font-size:11px; font-weight:700; color:#9aabbf}
.s3d-prod-t{padding:9px 10px 0; flex:1 1 auto}
.s3d-prod-t h4{margin:0; font-size:12.5px; font-weight:700; line-height:1.3; color:#003E87}
.s3d-prod-t small{display:block; margin-top:4px; font-size:11px; font-weight:600; color:var(--s3d-muted)}
.s3d-go{margin:9px 10px 10px; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:34px; padding:6px 10px; text-decoration:none; text-align:center;
  font-size:11.5px; font-weight:700; color:#fff; background:#0074C5; border-radius:9px 9px 0 9px;
  transition:background .12s}
.s3d-go:hover{background:#003E87}
.s3d-go svg{width:12px; height:12px; flex:0 0 auto}

/* ---- contenitori stretti (telefono): popup a tutta larghezza in basso ---- */
.s3d-root.s3d-narrow .s3d-pop{top:auto; left:0; right:0; bottom:0; width:auto; max-height:90%;
  transform:translateY(24px); border-radius:18px 18px 0 18px}
.s3d-root.s3d-narrow .s3d-pop.s3d-on{transform:none}
.s3d-root.s3d-narrow .s3d-prods{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:9px;
  padding-bottom:4px; margin:0 -16px; padding-left:16px; padding-right:16px; scroll-padding-left:16px}
.s3d-root.s3d-narrow .s3d-prod{flex:0 0 236px; scroll-snap-align:start; display:grid;
  grid-template-columns:78px 1fr; grid-template-rows:1fr auto; align-items:start}
.s3d-root.s3d-narrow .s3d-prod-img{grid-row:1 / span 2; height:100%; min-height:96px; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--s3d-line)}
.s3d-root.s3d-narrow .s3d-prod-t{padding:8px 9px 0}
.s3d-root.s3d-narrow .s3d-prod-t h4{font-size:12px}
.s3d-root.s3d-narrow .s3d-go{margin:7px 9px 9px; min-height:30px; font-size:11px}
.s3d-root.s3d-narrow .s3d-txt{font-size:13.5px; line-height:1.55; margin-bottom:0}
.s3d-root.s3d-narrow .s3d-pop-h{padding:12px 50px 11px 12px}
.s3d-root.s3d-narrow .s3d-pop-n{width:40px; height:40px; font-size:17px}
.s3d-root.s3d-narrow .s3d-pop-h h3{font-size:17px}
.s3d-root.s3d-narrow .s3d-hint{display:none}
.s3d-root.s3d-narrow .s3d-btn{width:36px; height:36px; font-size:16px}
.s3d-root.s3d-narrow .s3d-btn--wide{width:auto; font-size:11px; padding:0 11px}
.s3d-root.s3d-narrow .s3d-chip{font-size:11px; padding:5px 9px 5px 5px}
.s3d-root.s3d-narrow .s3d-pin-b i{display:none}

@media (prefers-reduced-motion:reduce){
  .s3d-root *{transition:none !important}
}
.s3d-root.s3d-narrow .s3d-btn--ppl span{display:none}
/* telefono: la fascia delle aree si trascina di lato e sfuma a destra per far capire che continua */
.s3d-root.s3d-narrow .s3d-chips{pointer-events:auto;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}