:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,system-ui,sans-serif;

  /* Palette + elevazione */
  --bg:#fbfcfe;
  --glass:rgba(255,255,255,.84);
  --stroke:rgba(0,0,0,.07);
  --text:#111318;
  --muted:#5f6977;
  --brand:#0a84ff;
  --shadow:0 18px 50px rgba(16,24,40,.08);

  /* Carosello (default desktop) */
  --thumb:92px;
  --thumb-radius:18px;
  --thumb-gap:10px;

  /* Gutter laterali per frecce (desktop) */
  --gutter:42px;

  /* Altezza pannelli (desktop) */
  --panel-h:170px;

  /* Larghezza voci menù inferiore (mobile) */
  --dock-width:clamp(200px, 10vw, 420px);

  /* Tipografia base */
  --fs-12:12.5px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-16:16px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:400;-webkit-text-size-adjust:100%}

/* Stage: 100dvh evita “salti” su mobile */
.stage{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
#viewer{position:absolute;inset:0;width:100%;height:100%;display:block;background:#fff;z-index:0}

/* Hint di caricamento */
.load-hint{position:absolute;left:16px;bottom:16px;background:#fff;color:#111;padding:8px 12px;border-radius:12px;border:1px solid var(--stroke);box-shadow:var(--shadow);font-size:12px;z-index:5}

/* Glass generico (usato solo dove serve, NON per dock) */
.glass{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--stroke);box-shadow:var(--shadow)}

/* Topbar (desktop/tablet default) */
.topbar{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  border-radius:16px;padding:10px 12px;max-width:min(96vw,1200px);z-index:3;
}
.pill-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--stroke);padding:8px 12px;border-radius:999px}
.pill span{color:var(--muted);font-size:var(--fs-13)}
.pill strong{font-weight:500;font-size:var(--fs-14)}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--stroke);background:#fff;color:#111;cursor:pointer}

/* Snapshot */
.topshot{margin-top:10px;background:#fff;border:1px solid var(--stroke);border-radius:14px;overflow:hidden}
.topshot-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
.topshot-head span{font-size:var(--fs-14);color:#111;font-weight:500}
.topshot-body{display:grid;gap:8px;padding:10px}
.topshot-body img{width:100%;height:auto;border-radius:10px;border:1px solid var(--stroke)}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--stroke);background:#fff;color:#111;cursor:pointer}
.btn.ghost{background:#fff}

/* Bottone “Scarica anteprima” */
.dl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  /* sovrascrivo le dimensioni fisse di .icon-btn */
  width:auto;
  height:auto;
  min-height:32px;

  padding:6px 12px;
  border-radius:999px;
  font-size:var(--fs-13);

  text-decoration:none;         /* niente underline sul link intero */
}

.dl-text{
  white-space:nowrap;
  text-decoration:underline;    /* underline solo sul testo */
}

.dl-icon{
  font-size:14px;
  line-height:1;
}


/* ---------- DOCK (menù inferiore) ---------- */
.dock-wrap{
  position:absolute;left:0;right:0;bottom:12px;
  height:var(--panel-h);
  display:grid;justify-items:center;align-content:end;
  pointer-events:none;z-index:3;

  /* NESSUN contenitore glass dietro */
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;

  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* qualunque “glass” dentro il dock viene neutralizzato */
.dock-wrap.glass,
#dock.glass,
.dock.glass{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* DESKTOP / TABLET: voci allineate orizzontalmente */
.dock{
  display:flex;
  flex-direction:row;      /* ← orizzontale */
  flex-wrap:wrap;          /* se non ci stanno, vanno a capo */
  gap:12px;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  pointer-events:auto;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background-image:none !important;
}

/* Voci menù inferiore (desktop/tablet): pill orizzontali */
.dock-item{
  display:grid;
  grid-template-columns:28px auto;
  align-items:center;
  column-gap:10px;

  background:#fff;
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
  color:#111;
  font-size:var(--fs-16);
  line-height:1;
  box-shadow:var(--shadow);
  min-height:44px; /* touch target */

  /* Larghezza “auto” ma con base minima, così stanno bene in riga */
  min-width:150px;
  max-width:220px;
}
.dock-item .plus{
  width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:#f0f3f6;color:#111;font-weight:600
}
.dock-item .label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:left;          /* ← testo allineato da sinistra */
  justify-self:start;       /* ← parte sempre nella stessa posizione */
}
body.exp-open .dock{display:none}

/* ---------- EXPANDER (pannello aperto) ---------- */
.expander{
  margin-top:10px;border-radius:16px;padding:8px;pointer-events:auto;max-width:min(96vw,1200px);
  transform-origin:center bottom; z-index:4; animation:sheetIn .28s cubic-bezier(.22,.61,.36,1)
}
.expander.closing{animation:sheetOut .26s cubic-bezier(.4,.14,.3,1) forwards}
@keyframes sheetIn{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes sheetOut{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(10px) scale(.98);opacity:0}}
.exp-head{position:relative;display:flex;align-items:center;justify-content:center;padding:4px 6px 8px}
.exp-title{font-size:var(--fs-16);font-weight:600;color:#111;text-align:center}
.exp-head .icon-btn{position:absolute;right:6px;top:2px}

/* Corpo pannello */
.exp-body{padding:4px 4px 6px;min-height:var(--panel-h);display:block}

/* ---------- CAROUSEL ---------- */
.carousel{position:relative}
.swatch-row{
  display:flex;gap:var(--thumb-gap);overflow:auto;
  padding:6px var(--gutter);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none
}
.swatch-row::-webkit-scrollbar{display:none}
.swatch{flex:0 0 auto;width:var(--thumb);scroll-snap-align:center}
.thumb{
  width:var(--thumb);height:var(--thumb);border-radius:var(--thumb-radius);
  border:1px solid var(--stroke);background-size:cover;background-position:center;
  cursor:pointer;transition:transform .08s, outline .08s;background-color:#fff;pointer-events:auto
}
.swatch.active .thumb{outline:3px solid var(--brand);outline-offset:-3px}
.name{
  margin-top:6px;font-size:var(--fs-12);color:#111;text-align:center;
  white-space:normal;word-break:break-word;min-height:2.6em;font-weight:400
}

/* paging dots – centrati */
.dots{display:flex;gap:6px;flex-wrap:wrap;padding:6px;justify-content:center}
.dot{width:6px;height:6px;border-radius:999px;background:#c7cdd6}
.dot.active{background:#111}

/* Frecce (solo desktop) */
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.9);color:#111;font-size:18px;display:grid;place-items:center;cursor:pointer;opacity:.6}
.car-btn.prev{left:8px}
.car-btn.next{right:8px}
@media (max-width:1024px){ .car-btn{display:none} }

/* Toggle — stile iOS, allineato perfettamente */
.toggle{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 4px;
}

.toggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}

/* Track */
.slider{
  position:relative;
  flex-shrink:0;
  display:inline-block;
  width:52px;
  height:28px;
  border-radius:999px;
  background:#e4e7ec;
  border:1px solid #d0d5dd;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.16);
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

/* Knob */
.slider::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 2px 4px rgba(15,23,42,.24);
  transform:translateX(0);
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}

/* Stato ON */
.toggle input:checked + .slider{
  background:linear-gradient(90deg,#0a84ff,#3fa5ff);
  border-color:#0a84ff;
  box-shadow:
    0 0 0 1px rgba(10,132,255,.25),
    0 6px 12px rgba(10,132,255,.32);
}

.toggle input:checked + .slider::before{
  transform:translateX(22px);
}

/* Etichetta testo */
.tlabel{
  display:inline-block;
  font-size:var(--fs-14);
  color:#111;
  line-height:1.3;
}

/* ─────────────────────────────────────────────────────────────── */
/*                        RESPONSIVE BREAKPOINTS                   */
/* ─────────────────────────────────────────────────────────────── */

/* Tablet orizzontale (≤ 1200px) */
@media (max-width:1200px){
  :root{ --gutter:28px; --thumb:92px; --thumb-radius:16px; --panel-h:180px; }
  .topbar{max-width:96vw;padding:8px 10px}
}

/* Tablet (≤ 1024px) */
@media (max-width:1024px){
  :root{ --thumb:96px; --thumb-gap:10px; --panel-h:186px; }
  .topbar{left:50%;transform:translateX(-50%);top:12px}
  .expander{padding:8px}
  .name{font-size:13px}
}

/* Tablet verticale / telefoni grandi (≤ 840px) */
@media (max-width:840px){
  :root{
    --thumb:90px;
    --thumb-radius:16px;
    --gutter:18px;
    --panel-h:190px;
    --dock-width:clamp(180px, 20vw, 420px);
  }
  .topbar{top:10px}
  .exp-title{font-size:15px}
}

/* Desktop / tablet: le 3 voci topbar SEMPRE su una riga */
@media (min-width:600px){
  .pill-row{
    flex-wrap:nowrap;       /* niente wrapping */
    justify-content:center; /* le tiene in linea centrata */
  }
}

/* ── MOBILE (≤ 600px): topbar scomposta, dock VERTICALE ─ */
@media (max-width:600px){
  :root{
    --thumb:84px; --thumb-gap:8px; --thumb-radius:14px; --gutter:14px;
    --panel-h:196px;
    --fs-12:12px; --fs-13:12.5px; --fs-14:13.5px; --fs-16:15px;

    --dock-width:min(40vw, 180px);
  }

  /* Topbar senza contenitore unico */
  .topbar{
    position:absolute; left:0; right:0; top:8px;
    transform:none; padding:0; margin:0;
    max-width:none; border-radius:0; background:transparent;
    box-shadow:none; border:0; backdrop-filter:none;
  }
  .topbar.glass{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .pill-row{
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .pill{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:fit-content; max-width:calc(100vw - 32px);
    margin-inline:auto;
    padding:10px 14px;
    border-radius:999px; background:#fff; border:1px solid var(--stroke);
    box-shadow:0 10px 24px rgba(16,24,40,.06);
  }
  .pill span, .pill strong{ text-align:center }
  .pill strong{ font-weight:700; font-size:var(--fs-16) }

  .pill-row > .icon-btn{
    width:48px; height:48px; align-self:center;
    background:#fff; border:1px solid var(--stroke);
    box-shadow:0 10px 24px rgba(16,24,40,.06);
  }

  /* Snapshot responsive su mobile */
  #topShot{
    max-width:calc(100vw - 24px);
    margin-top:8px;
    margin-inline:auto;
  }

  #topShotImg{
    max-height:48vh;
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .topshot-body{
    max-height:56vh;
    overflow:auto;
  }

  /* QUI: dock torna verticale, pill sotto una all'altra */
  .dock{
    flex-direction:column;
    align-items:center;
  }

  .dock-item{
    width:var(--dock-width);
    max-width:var(--dock-width);
    margin-inline:auto;
    padding:12px 16px;
  }

  .topbar + .topshot{ margin-top:6px; }
  .dock-wrap{ bottom:8px }
  .swatch-row{ padding:6px var(--gutter) }
  .name{ min-height:2.4em }

  .glass, .dock-item, .topbar, .thumb, .btn, .slider:before { box-shadow: 0 10px 24px rgba(16,24,40,.06); }
}

/* Mobile piccolo (≤ 380px) */
@media (max-width:380px){
  :root{ --thumb:78px; --thumb-gap:8px; --panel-h:200px; }
  .pill-row{gap:8px}
  .pill span{font-size:12px}
  .pill strong{font-size:13.5px}
}

/* Preferenze utente */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* Nascondi overlay Babylon (eventuali plugin) */
#babylonjsLoadingDiv,.babylonjsLoadingImg,.babylonjsLoadingText{
  display:none !important; opacity:0 !important; visibility:hidden !important;
}

/* ==============================
   Powered by SolveX AI3D — SEO Backlink
   ============================== */

#viewer {
  position: relative; /* necessario */
}

.solvex-brand {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  padding: 6px 6px;
  border-radius: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  text-decoration: none;
}

.solvex-brand img {
  width: 18px;
  height: 18px;
  display: block;
}

.solvex-brand span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}

.pb-black {
  color: #000; /* Powered by in nero */
}

.pb-brand {
  color: #45b6fe; /* Azzurro brand SolveX */
  font-weight: 600;
}

/* Mobile: mostra solo il logo */
@media (max-width: 768px) {
  .solvex-brand span {
    display: none; /* nasconde il testo su mobile */
  }

  .solvex-brand img {
    width: 22px;
    height: 22px; /* leggermente più grande per mobile */
  }
}

/* Desktop + Tablet: mostra tutto */
@media (min-width: 769px) {
  .solvex-brand span {
    display: flex; /* mostra testo e layout normale */
  }
}

/* ──────────────────────────────────────────────
   Boot overlay elegante configuratore 3D
   ────────────────────────────────────────────── */

body.viewer-booting #viewer{
  opacity:0;
}

body.viewer-ready #viewer{
  opacity:1;
  transition:opacity .45s ease-out;
}

.boot-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  pointer-events:auto;
  /* leggero veil + blur in linea con lo stile glass */
  background:radial-gradient(circle at top, rgba(255,255,255,.95), rgba(245,247,252,.96));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:1;
  transform:translateY(0);
  transition:opacity .45s ease-out, transform .45s ease-out;
}

.boot-overlay.hide{
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
}

.boot-card{
  min-width:260px;
  max-width:360px;
  padding:22px 26px 20px;
  border-radius:24px;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  background:var(--glass);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  color:var(--text);
}

.boot-spinner{
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(10,132,255,.18);
  border-top-color:var(--brand);
  margin:0 auto 6px;
  animation:bootSpin .9s linear infinite;
}

.boot-title{
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
}

.boot-sub{
  font-family:var(--font);
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

@keyframes bootSpin{
  to{ transform:rotate(360deg); }
}

/* su mobile stringiamo un filo la card */
@media (max-width:768px){
  .boot-card{
    width:calc(100% - 40px);
    padding:18px 18px 16px;
    border-radius:20px;
  }
}