/* ============================================================
   Cremeria delle Valli — Torte: tab categorie, carosello, calcolatore
   Usa i token di hero-scrub.css. Le foto sono 1:1 (a differenza
   delle card 4:5 di colombe e mignon).
   ============================================================ */

.torte{ background:var(--panna-alt); }

/* ---- tab categorie ------------------------------------------ */
.torta-tabs{
  display:flex; gap:10px; margin:38px 0 0; padding:4px 24px 14px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.torta-tabs::-webkit-scrollbar{ display:none; }
@media (min-width:901px){ .torta-tabs{ flex-wrap:wrap; justify-content:center; overflow:visible; padding-inline:0; } }

.torta-tab{
  flex:0 0 auto; scroll-snap-align:start;
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  padding:11px 20px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--cacao-soft);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.torta-tab:hover{ border-color:var(--oro); color:var(--cacao); }
.torta-tab:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.torta-tab.is-on{ background:var(--cacao); border-color:var(--cacao); color:var(--panna); }

.torta-desc{
  font-family:var(--mono); font-size:14px; line-height:1.7; color:var(--cacao-soft);
  max-width:640px; margin:18px auto 0; text-align:center; min-height:3em;
}

/* ---- carosello ---------------------------------------------- */
.torta-carousel{ position:relative; margin-top:26px; }

.torta-track{
  display:flex; gap:18px; overflow-x:auto; padding:4px 24px 18px;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* sfuma i bordi per suggerire che la fila continua */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.torta-track::-webkit-scrollbar{ display:none; }

.torta-slide{
  flex:0 0 78vw; max-width:340px; margin:0; scroll-snap-align:center;
  border-radius:14px; overflow:hidden; background:var(--panna);
  box-shadow:0 1px 2px rgba(42,26,18,.06), 0 12px 30px -18px rgba(42,26,18,.5);
}
@media (min-width:601px){ .torta-slide{ flex-basis:45vw; scroll-snap-align:start; } }
@media (min-width:901px){ .torta-slide{ flex-basis:340px; } }

.torta-slide img{
  width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; display:block;
  background:var(--line);
}

.torta-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  background:var(--panna); color:var(--cacao); border:1px solid var(--line);
  box-shadow:0 6px 20px -8px rgba(42,26,18,.45);
  transition:opacity .2s, background .2s;
}
@media (min-width:901px){ .torta-nav{ display:flex; } }
.torta-nav:hover{ background:var(--cacao); color:var(--panna); }
.torta-nav:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.torta-nav[disabled]{ opacity:.28; cursor:default; }
.torta-nav[disabled]:hover{ background:var(--panna); color:var(--cacao); }
.torta-nav.prev{ left:-8px; } .torta-nav.next{ right:-8px; }
.torta-nav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* ---- calcolatore -------------------------------------------- */
.calc{
  margin:54px auto 0; max-width:940px;
  background:var(--panna); border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3.4vw,40px);
  box-shadow:0 1px 2px rgba(42,26,18,.05), 0 24px 60px -40px rgba(42,26,18,.55);
}
.calc-head{ text-align:center; margin-bottom:28px; }
.calc-head h3{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(22px,3vw,30px); line-height:1.15; margin:10px 0 0;
}
.calc-head p{
  font-family:var(--mono); font-size:14px; line-height:1.7; color:var(--cacao-soft);
  max-width:520px; margin:12px auto 0;
}

/* etichetta di sezione dentro il calcolatore */
.calc-lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--caramello); margin:0 0 12px;
}

/* chip delle torte della casa */
.spec-row{
  display:flex; gap:9px; margin:0 0 30px; padding-bottom:8px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.spec-row::-webkit-scrollbar{ display:none; }
@media (min-width:901px){ .spec-row{ flex-wrap:wrap; overflow:visible; } }
.spec-chip{
  flex:0 0 auto; cursor:pointer; white-space:nowrap;
  font-family:var(--mono); font-size:12.5px; padding:9px 15px; border-radius:100px;
  border:1px solid var(--line); background:var(--panna-alt); color:var(--cacao-soft);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.spec-chip:hover{ border-color:var(--oro); color:var(--cacao); }
.spec-chip:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.spec-chip.is-on{ background:var(--oro); border-color:var(--oro); color:#fff; }
/* bollino allergeni sulla chip: la Caprese e' senza glutine */
.spec-gf{ margin-left:7px; padding:2px 7px; border-radius:100px; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; background:#2F6B4F; color:#fff; }
.spec-chip.is-on .spec-gf{ background:#fff; color:#2F6B4F; }

/* corpo: anteprima a sinistra, campi a destra */
.calc-body{ display:grid; gap:26px; grid-template-columns:minmax(0,1fr); }
/* minmax(0,1fr): senza il minimo a zero un'etichetta lunga ("Crema cheese
   (ricotta e formaggio spalmabile)") allarga la colonna e sfonda la scheda */
@media (min-width:861px){ .calc-body{ grid-template-columns:270px minmax(0,1fr); align-items:start; } }

.calc-preview{ text-align:center; }
@media (min-width:861px){ .calc-preview{ position:sticky; top:96px; } }
.mockup{ margin:0 auto; }
.mockup svg{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 18px 26px rgba(42,26,18,.18)); }
/* illustrazione della scelta: è la protagonista del pannello */
.scelta{
  margin:0; padding:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--panna-alt);
}
.scelta img{
  width:100%; height:auto; aspect-ratio:1/1; display:block;
  background:var(--panna); object-fit:cover;
}
.scelta figcaption{
  display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:12px 14px 14px; text-align:center;
}
.scelta .lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--caramello);
}
.scelta b{
  font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.2;
  color:var(--ink);
}

/* l'anteprima composta resta come riferimento, in piccolo */
.mia-torta{
  display:flex; align-items:center; gap:12px; margin:16px 0 0;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  text-align:left;
}
.mia-torta .mockup{ flex:0 0 84px; max-width:84px; margin:0; }
.mia-torta-lbl{
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--cacao-soft);
}

.mockup-nota{
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--cacao-soft);
  margin:14px auto 0; max-width:260px;
}

.calc-grid{ display:grid; gap:18px; grid-template-columns:1fr; align-content:start; }
@media (min-width:701px){ .calc-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

/* tendina con miniatura: veste la select nativa, che resta sotto */
.picker{ position:relative; }
.picker-native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.picker-btn{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  font-family:var(--mono); font-size:15px; color:var(--cacao); text-align:left;
  padding:9px 38px 9px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--panna-alt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4E22' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
.picker-btn:hover{ border-color:var(--oro); }
.picker-btn:focus-visible{ outline:2px solid var(--oro); outline-offset:1px; }
.picker-btn[disabled]{ cursor:default; opacity:1; color:var(--cacao-soft); }
.picker-thumb{
  flex:0 0 40px; width:40px; height:40px; border-radius:7px;
  object-fit:cover; background:var(--panna);
}
.picker-val{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.picker-list{
  position:absolute; z-index:12; top:calc(100% + 6px); left:0; right:0;
  margin:0; padding:6px; list-style:none; max-height:308px; overflow-y:auto;
  border-radius:12px; border:1px solid var(--line); background:var(--panna);
  box-shadow:0 18px 44px -18px rgba(42,26,18,.5);
}
.picker-opt{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:6px 8px; border-radius:8px;
  font-family:var(--mono); font-size:14px; color:var(--cacao);
}
.picker-opt img{
  flex:0 0 40px; width:40px; height:40px; border-radius:7px;
  object-fit:cover; background:var(--panna-alt);
}
.picker-vuoto{
  flex:0 0 40px; width:40px; height:40px; border-radius:7px;
  background:var(--panna-alt); border:1px dashed var(--line);
}
.picker-opt:hover{ background:var(--panna-alt); }
.picker-opt.is-on{ background:var(--cacao); color:var(--panna); }

/* pastiglie colore panna */
.swatches{ display:flex; flex-wrap:wrap; gap:9px; }
.swatch{
  width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0;
  background:var(--tinta); border:1px solid rgba(42,26,18,.22);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.swatch:hover{ transform:scale(1.1); }
.swatch:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }
.swatch.is-on{ box-shadow:0 0 0 2px var(--panna), 0 0 0 4px var(--cacao); }

/* aggiunte: caselle affiancate */
.checks{ display:flex; flex-wrap:wrap; gap:9px; }
.calc-check.mini{ padding:9px 13px; font-size:13px; gap:9px; flex:0 0 auto; }
.calc-check.mini[hidden]{ display:none; }
.calc-check.mini input{ width:16px; height:16px; }

.calc-field label em{ font-style:normal; text-transform:none; letter-spacing:0;
  color:var(--cacao-soft); font-size:11px; }

.calc-field{ display:flex; flex-direction:column; gap:8px; }
/* un campo che la torta scelta non prevede sparisce: display esplicito perche'
   [hidden] da solo perde contro il display:flex qui sopra */
.calc-field[hidden], .calc-check[hidden]{ display:none; }
.calc-field.wide{ grid-column:1/-1; }
/* la casella cialda sta in griglia accanto al contatore: allineala in basso,
   dove stanno i controlli e non le etichette */
.calc-field.bottom{ justify-content:flex-end; }
.calc-field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--caramello);
}
.calc-field select,
.calc-field input[type="text"]{
  font-family:var(--mono); font-size:15px; color:var(--cacao);
  padding:13px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panna-alt); width:100%;
  appearance:none; -webkit-appearance:none;
}
.calc-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4E22' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  padding-right:38px;
}
.calc-field select:focus-visible,
.calc-field input:focus-visible{ outline:2px solid var(--oro); outline-offset:1px; }

.calc-step{ display:flex; align-items:stretch; gap:8px; }
.calc-step input{ text-align:center; }
.calc-step button{
  flex:0 0 46px; border-radius:10px; cursor:pointer; font-size:20px; line-height:1;
  border:1px solid var(--line); background:var(--panna-alt); color:var(--cacao);
  font-family:var(--mono); transition:background .2s, border-color .2s;
}
.calc-step button:hover{ background:var(--cacao); border-color:var(--cacao); color:var(--panna); }
.calc-step button:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }

/* esito */
.calc-out{
  margin-top:28px; padding:24px; border-radius:14px;
  background:var(--cacao); color:var(--panna); text-align:center;
}
.calc-out .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--oro);
}
.calc-out .formato{
  font-family:var(--serif); font-size:clamp(28px,5vw,42px); line-height:1.05;
  margin:10px 0 0; color:var(--panna);
}
.calc-out .peso{
  font-family:var(--mono); font-size:15px; margin:10px 0 0; color:rgba(246,236,224,.82);
}
.calc-out .prezzo{
  font-family:var(--serif); font-size:clamp(22px,3.4vw,30px); line-height:1;
  margin:18px 0 0; color:var(--oro); cursor:help;
}
.calc-out .prezzo::before{
  content:'preventivo'; display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(246,236,224,.5);
}

.calc-out .banda{
  font-family:var(--mono); font-size:13px; margin:10px 0 0; color:rgba(246,236,224,.6);
}

/* avviso: il prezzo si chiude al peso, non qui */
.calc-out .avviso{
  display:flex; align-items:flex-start; gap:11px; text-align:left;
  max-width:520px; margin:22px auto 0; padding:13px 16px;
  border-radius:11px; border:1px solid rgba(198,149,47,.42);
  background:rgba(198,149,47,.12);
  font-family:var(--mono); font-size:13px; line-height:1.6;
  color:rgba(246,236,224,.9);
}
.calc-out .avviso svg{
  flex:0 0 auto; width:19px; height:19px; margin-top:1px;
  fill:none; stroke:var(--oro); stroke-width:1.7; stroke-linecap:round;
}
.calc-out .avviso b{ color:var(--oro); font-weight:500; }

/* cialda stampata: checkbox su una riga sola */
.calc-check{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:13px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panna-alt);
  font-family:var(--mono); font-size:14px; letter-spacing:0;
  text-transform:none; color:var(--cacao); line-height:1.5;
}
.calc-check input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--oro); cursor:pointer; }
.calc-check b{ color:var(--caramello); font-weight:500; white-space:nowrap; }
.calc-check:hover{ border-color:var(--oro); }
.calc-check:focus-within{ outline:2px solid var(--oro); outline-offset:1px; }

.calc-field select[disabled]{ opacity:1; color:var(--cacao-soft); cursor:default; }
.calc-out .nota{
  font-family:var(--mono); font-size:13px; line-height:1.65; margin:16px auto 0;
  max-width:460px; color:rgba(246,236,224,.62);
}
.calc-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.calc-ctas .btn svg{ width:18px; height:18px; }
.calc-legal{
  font-family:var(--mono); font-size:12px; line-height:1.65; color:var(--cacao-soft);
  text-align:center; margin:18px auto 0; max-width:560px;
}

@media (prefers-reduced-motion:reduce){
  .torta-track{ scroll-behavior:auto; }
  .torta-tab, .torta-nav, .calc-step button{ transition:none; }
}

/* Bersagli da pollice sui chip delle specialità (vedi site.css) */
@media (max-width:600px){
  .spec-chip{ min-height:44px; }
  .spec-gf{ font-size:10.5px; }
  .picker-native{ min-height:44px; }
  .swatch{ width:40px; height:40px; }
  /* la casella e' 16 px, ma si tocca l'etichetta: e' quella che deve essere grande */
  .calc-check{ min-height:44px; display:flex; align-items:center; }
}

/* Calcolatore sul telefono (01.10.2026): vedi il blocco «Ordina sul telefono»
   in site.css. Niente scatola attorno, un'immagine sola invece di due, e le
   tendine native: su iPhone la rotella di sistema e' piu' comoda della lista
   a comparsa, che apriva una finestra dentro la pagina a ogni campo. */
@media (max-width:600px){
  .calc{ margin-top:44px; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
  .calc-head{ margin-bottom:20px; }
  .calc-head p, .mia-torta, .mockup-nota{ display:none; }
  .spec-row{ margin:0 -18px 22px; padding:0 18px 8px; }
  .torta-tabs{ margin-left:-18px; margin-right:-18px; }
  .calc-body{ gap:20px; }
  .scelta{ max-width:240px; margin:0 auto; border:0; background:none; }
  .scelta img{ border-radius:14px; }
  .scelta figcaption{ padding:10px 0 0; }
  /* sotto i 16 px Safari ingrandisce la pagina al tocco del campo e non torna indietro */
  .calc-field select, .calc-field input[type="text"]{ font-size:16px; }
  .picker-btn, .picker-list{ display:none; }
  .picker-native{ position:static; width:100%; height:auto; margin:0; overflow:visible;
    clip:auto; white-space:normal; }
  .calc-out{ margin:24px -18px 0; border-radius:0; padding:28px 18px; }
  .calc-ctas{ flex-direction:column; }
  .calc-ctas .btn{ justify-content:center; width:100%; }
}