/* ============================================================================
   La vetrina: la prima pagina del negozio, prima del menu.
 *
 * Tre copertine, un foglio solo. Le classi stanno tutte sotto `.vt` perche'
 * questo foglio lo carica sia la pagina del cliente sia l'anteprima nella
 * console, e nella console gira dentro una pagina che ha gia' i suoi stili.
 *
 * I colori arrivano da fuori come tre variabili, messe sull'elemento `.vt`:
 *   --vt-1    il principale del negozio, la parte alta dei bottoni e gli aloni
 *   --vt-2    l'accento, la parte bassa dei bottoni
 *   --vt-ink  il testo colorato, gia' scurito dal server finche' non si legge
 * Non si ricavano qui: il conto del contrasto sta nel server, in un posto solo.
   ========================================================================== */

.vt{
  --vt-1:#ff8a3d; --vt-2:#e8386d; --vt-ink:#c8325c;
  --vt-surf:#ffffff; --vt-ink0:#131a24; --vt-mut:#5f6d80;
  --vt-line:rgba(19,26,36,.09);
  --vt-sh:0 14px 30px -22px rgba(19,26,36,.7);
  position:relative;color:var(--vt-ink0);
}
.vt *{box-sizing:border-box}

/* Gli aloni sfocati dietro alla parte alta: sono la pelle del prodotto, non un
   effetto di questa pagina. Stanno dietro a tutto e non prendono i tocchi. */
.vt-aloni{position:absolute;inset:0 0 auto;height:360px;pointer-events:none;z-index:0;overflow:hidden}
.vt-aloni i{position:absolute;display:block;border-radius:50%;filter:blur(72px);opacity:.28}
.vt-aloni i:first-child{width:240px;height:240px;left:-104px;top:-96px;background:var(--vt-1)}
.vt-aloni i:last-child{width:210px;height:210px;right:-92px;top:-64px;background:var(--vt-2)}

.vt-pag{position:relative;z-index:1}
.vt-dentro{padding:0 18px}

/* ---------- copertina FOTOGRAFICA ---------- */
.vt-A{position:relative;height:430px;overflow:hidden;margin:0 -18px}
.vt-A .vt-sfondo{width:100%;height:100%;object-fit:cover;display:block}
/* Il colore del negozio NON tocca la foto del cibo: provato con un blu, la
   pizza diventava grigia. Il velo e' solo nero, e serve a leggere il nome. */
.vt-A .vt-velo{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,10,14,.92) 6%,rgba(8,10,14,.55) 38%,rgba(8,10,14,.06) 78%)}
/* Il pannello dei bottoni sale di 30 px a coprire il bordo della foto: il testo
   deve stare piu' in alto di cosi', o il sottotitolo finisce sotto il vetro. */
.vt-A .vt-testo{position:absolute;left:0;right:0;bottom:0;padding:0 18px 54px;color:#fff}
.vt-A .vt-marchio{width:64px;height:64px;border-radius:17px;background:#fff;display:grid;
  place-items:center;overflow:hidden;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);margin-bottom:12px}
.vt-A h1{margin:0;font-size:31px;line-height:1.05;font-weight:820;letter-spacing:-.035em;
  text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.vt-A .vt-tipo{margin:5px 0 0;font-size:13px;font-weight:600;opacity:.88;
  text-transform:uppercase;letter-spacing:.14em}

/* ---------- copertina PULITA ---------- */
.vt-B{padding:38px 0 4px}
.vt-B .vt-marchio{width:74px;height:74px;border-radius:20px;background:var(--vt-surf);display:grid;
  place-items:center;overflow:hidden;box-shadow:var(--vt-sh);margin-bottom:18px}
.vt-B h1{margin:0;font-size:34px;line-height:1.03;font-weight:830;letter-spacing:-.04em;text-wrap:balance}
.vt-B .vt-tipo{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--vt-ink);
  text-transform:uppercase;letter-spacing:.16em}

/* ---------- copertina CALDA ---------- */
.vt-C{padding:28px 0 4px;text-align:center}
.vt-C .vt-tondo{width:168px;height:168px;margin:0 auto 4px;border-radius:50%;overflow:hidden;
  box-shadow:0 26px 48px -26px rgba(19,26,36,.85),0 0 0 7px var(--vt-surf);position:relative}
.vt-C .vt-tondo img{width:100%;height:100%;object-fit:cover;display:block}
.vt-C .vt-marchio{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;
  place-items:center;overflow:hidden;margin:-34px auto 12px;position:relative;
  box-shadow:0 8px 20px -8px rgba(19,26,36,.7);border:3px solid var(--vt-surf)}
.vt-C h1{margin:0;font-size:28px;line-height:1.08;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.vt-C .vt-tipo{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--vt-ink);
  text-transform:uppercase;letter-spacing:.16em}

.vt-marchio img{max-width:80%;max-height:80%;object-fit:contain;display:block}

/* ---------- il pannello che tutte e tre hanno ---------- */
.vt-azioni{margin:16px 0 0;padding:16px;border-radius:24px;background:var(--vt-surf);
  box-shadow:var(--vt-sh);border:1px solid var(--vt-line);position:relative;overflow:hidden}
.vt-azioni::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.vt-azioni.vt-sovra{margin-top:-30px}
.vt-stato{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.vt-stato i{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 9px}
.vt-stato.vt-chiuso{color:#c8443a}
.vt-stato.vt-aperto{color:#0f9a67}
.vt-bottoni{display:flex;gap:10px;margin-top:14px}
.vt-bt{flex:1;padding:15px 10px;border-radius:16px;font-size:15px;font-weight:750;text-align:center;
  border:none;cursor:pointer;font-family:inherit;text-decoration:none;display:block}
.vt-bt.vt-pieno{color:#fff;background:linear-gradient(180deg,var(--vt-1),var(--vt-2));
  box-shadow:0 14px 26px -14px var(--vt-2)}
.vt-bt.vt-vuoto{background:transparent;color:var(--vt-ink0);border:1.5px solid var(--vt-line);
  flex:0 0 108px;line-height:1.2}

/* ---------- le certificazioni, subito sotto il nome ---------- */
.vt-cert{margin:14px 0 0;padding:14px 15px;border-radius:20px;background:var(--vt-surf);
  border:1px solid var(--vt-line);box-shadow:var(--vt-sh);display:flex;gap:12px;align-items:flex-start}
.vt-cert + .vt-cert{margin-top:10px}
.vt-cert .vt-bollo{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;
  place-items:center;background:linear-gradient(180deg,var(--vt-1),var(--vt-2));color:#fff;font-size:19px}
.vt-cert b{display:block;font-size:14px;font-weight:750;line-height:1.25}
.vt-cert span{display:block;font-size:12.5px;color:var(--vt-mut);margin-top:3px;line-height:1.4}

/* ---------- cosa si trova, e gli assaggi ---------- */
.vt-titoletto{margin:24px 0 10px;font-size:11.5px;font-weight:750;color:var(--vt-mut);
  text-transform:uppercase;letter-spacing:.15em}
.vt-elenco{display:flex;flex-wrap:wrap;gap:8px}
.vt-elenco span{padding:9px 14px;border-radius:999px;background:var(--vt-surf);
  border:1px solid var(--vt-line);font-size:13.5px;font-weight:600;box-shadow:var(--vt-sh)}
/* La striscia sta gia' fuori da .vt-dentro: il suo margine e' zero e l'incavo lo fa il padding,
   cosi' scorre fino al bordo dello schermo senza sporgere oltre. */
.vt-striscia{display:flex;gap:11px;overflow-x:auto;padding:0 18px 6px;margin:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vt-striscia::-webkit-scrollbar{height:0}
.vt-striscia figure{margin:0;flex:0 0 132px}
.vt-striscia img{width:132px;height:100px;object-fit:cover;border-radius:17px;display:block;
  box-shadow:var(--vt-sh);background:rgba(19,26,36,.05)}
.vt-striscia figcaption{font-size:12.5px;font-weight:650;margin-top:7px;line-height:1.25}
.vt-striscia small{display:block;color:var(--vt-mut);font-weight:500;font-size:12px}

/* ---------- i dati dell'attivita' ----------
   Per la vendita a distanza devono esserci, e devono leggersi: non in grigio a
   sei pixel in fondo, dove ci sono per l'avvocato e non per il cliente. */
.vt-legge{margin:26px 0 0;padding:16px 16px 18px;border-radius:20px;border:1px solid var(--vt-line);
  background:var(--vt-surf)}
.vt-legge h2{margin:0 0 9px;font-size:11.5px;font-weight:750;color:var(--vt-mut);
  text-transform:uppercase;letter-spacing:.15em}
.vt-legge dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px}
.vt-legge dt{color:var(--vt-mut)}
.vt-legge dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.vt-legge .vt-nota{margin:11px 0 0;font-size:11.5px;color:var(--vt-mut);line-height:1.45}
.vt-legge a{color:inherit}

.vt-coda{height:26px}