/* ConfrontaListini · Lo scaffale */
@font-face{font-family:'Archivo';src:url('font/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Chivo Mono';src:url('font/chivo-mono-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --carta:#FAF3E8; --carta-alta:#FFFBF2; --carta-ombra:#F1E7D6; --riga:#E2D5BE;
  --inchiostro:#1C1814; --inchiostro-2:#5A5046;
  --biro:#2549B0; --biro-scuro:#1B3785; --biro-velo:#C9D4F2;
  --evid:#F4E53B;
  --errore:#A32A18;
  --ombra:4px 4px 0 var(--inchiostro);
  --testo:'Archivo','Helvetica Neue',Arial,sans-serif;
  --fumetto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 0 0-7.3 12.8L1.5 18.5l4.4-1.1A8.5 8.5 0 1 0 10 1.5z'/%3E%3C/svg%3E");
  --cifre:'Chivo Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* Scala del testo: etichetta, piccolo, corpo, forte. Sopra ci sono solo i titoli e le cifre. */
  --t-etichetta:.875rem; --t-piccolo:.9375rem; --t-corpo:1.0625rem; --t-forte:1.25rem;
  --bordo:clamp(20px,5vw,48px);
  --largo:1120px;
  --stacco:clamp(72px,11vw,136px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--inchiostro-2) var(--carta-ombra)}
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:var(--testo);font-size:var(--t-corpo);line-height:1.5;caret-color:var(--biro)}
::selection{background:var(--evid);color:var(--inchiostro)}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:4px}
a:hover{text-decoration-thickness:3px}
/* WhatsApp: un fumetto verde davanti al link. Il verde serve solo a farlo riconoscere, non è un colore d'azione. */
.wa{display:inline-flex;align-items:center;gap:7px;font-weight:700;--wa:#128C4B}
.wa::before{content:"";flex:none;width:18px;height:18px;background:var(--wa);-webkit-mask:var(--fumetto) center/contain no-repeat;mask:var(--fumetto) center/contain no-repeat}
.prova .wa{--wa:#25D366}
:focus-visible{outline:3px solid var(--biro);outline-offset:3px;border-radius:2px}
.salta{position:absolute;left:-999px;top:8px;background:var(--evid);padding:8px 12px;font-weight:700;z-index:50}
.salta:focus{left:8px}
.dentro{max-width:var(--largo);margin-inline:auto;padding-inline:var(--bordo)}
.stretto{max-width:66ch}

h1,h2{font-weight:800;font-stretch:78%;letter-spacing:-.02em;word-spacing:.1em;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.15rem + 6.4vw,5.75rem);line-height:.98}
h2{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);line-height:1.02}
h3{font-size:var(--t-forte);font-weight:750;font-stretch:88%;line-height:1.2}
mark{background:var(--evid);color:inherit;padding:0 .12em;margin:0 -.03em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.debole{color:var(--inchiostro-2)}
.piccolo{font-size:var(--t-piccolo)}

/* Bottoni: scendono nella loro ombra */
.btn{display:inline-block;font:inherit;font-weight:750;font-size:var(--t-forte);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;color:#fff;background:var(--biro);border:2px solid var(--inchiostro);border-radius:6px;padding:14px 26px;box-shadow:var(--ombra);transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:var(--biro-scuro)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--inchiostro)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn-carta{background:var(--carta-alta);color:var(--inchiostro)}
.btn-carta:hover{background:var(--evid)}

/* Testata */
.testata{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.marca{font-weight:800;font-stretch:80%;font-size:var(--t-forte);letter-spacing:-.01em;text-decoration:none}
.marca b{background:var(--evid);padding:0 3px;font-weight:800}
.testata nav{display:flex;align-items:center;gap:24px}
.testata .wa{display:none}
.testata .btn{display:none;font-size:var(--t-corpo);padding:9px 16px;box-shadow:3px 3px 0 var(--inchiostro)}
.testata .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--inchiostro)}

/* Apertura */
.apertura{padding-top:clamp(8px,3vw,40px);padding-bottom:var(--stacco)}
.apertura .sotto{margin-top:12px;max-width:40ch;color:var(--inchiostro-2)}
.apertura .sotto strong{color:var(--inchiostro);font-weight:650}
.azioni{display:none;margin-top:28px;align-items:center;gap:20px;flex-wrap:wrap}

/* Lo scaffale */
.scaffale{margin-top:18px}
.ripiano{padding-bottom:12px}
.prodotto{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px;font-weight:650;padding-bottom:6px}
.prodotto span{font-weight:400;font-size:var(--t-piccolo);color:var(--inchiostro-2);white-space:nowrap}
.guida{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:3px solid var(--inchiostro)}
.cart{background:var(--carta-alta);border:1.5px solid var(--inchiostro);border-top:0;padding:7px 10px 8px;min-height:68px}
.cart .chi{display:block;font-size:var(--t-etichetta);font-weight:650;letter-spacing:.02em;font-stretch:75%;white-space:nowrap;text-transform:uppercase;color:var(--inchiostro-2);line-height:1.3}
.cart .prezzo{display:block;font-family:var(--cifre);font-weight:600;font-size:1.375rem;line-height:1.15;font-variant-numeric:tabular-nums}
.cart .eur{font-family:var(--testo,inherit);font-size:.62em;font-weight:650}
.cart .esito{display:block;font-size:var(--t-etichetta);font-weight:650;line-height:1.3}
.cart.ok{background:var(--evid);border-width:2px;box-shadow:var(--ombra);transform:translateY(5px);animation:atterra .24s steps(2,end) both;animation-delay:calc(.45s + var(--n,0) * .12s)}
.cart.ok .chi{color:var(--inchiostro)}
@keyframes atterra{from{background:var(--carta-alta);box-shadow:0 0 0 var(--inchiostro);transform:translateY(0)}}

/* Barra fissa su telefono */
.barra{position:fixed;inset:auto 0 0 0;z-index:20;background:var(--carta);border-top:1.5px solid var(--riga);padding:10px var(--bordo) calc(10px + env(safe-area-inset-bottom));transition:transform .24s cubic-bezier(.22,1,.36,1)}
.barra .btn{display:block}
.barra p{margin-top:7px;text-align:center;font-size:var(--t-piccolo);color:var(--inchiostro-2)}
.barra.via{transform:translateY(110%);visibility:hidden;transition:transform .24s cubic-bezier(.22,1,.36,1),visibility 0s .24s}
body{padding-bottom:112px}

/* Sezioni */
.sezione{padding-block:var(--stacco)}
.sezione + .sezione{padding-top:0}
.sezione h2 + p{margin-top:20px}
.fascia{background:var(--carta-ombra);padding-block:var(--stacco)}
.fascia + .sezione{padding-top:var(--stacco)}

/* Righe di scaffale: etichetta a sinistra, contenuto a destra, appese a una guida */
.guide{margin-top:28px;border-bottom:1.5px solid var(--inchiostro)}
.guide > li{border-top:3px solid var(--inchiostro);display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0 16px}
.guide .voce{font-weight:800;font-stretch:80%;font-size:var(--t-forte);line-height:1.15}
.guide ul li + li{border-top:1.5px solid var(--riga);margin-top:8px;padding-top:8px}

/* Il caso */
.caso .stretto{margin-top:20px}
.caso p + p{margin-top:14px}
/* Prima e adesso: una riga per argomento, i due tempi uno accanto all'altro */
.cambio{margin-top:40px;border-bottom:1.5px solid var(--inchiostro)}
.cambio > li{border-top:3px solid var(--inchiostro);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 0 18px}
.cambio h3{font-weight:800;font-stretch:80%;font-size:var(--t-forte);line-height:1.15}
.cambio p + p{margin-top:0}
.cambio b{display:block;font-size:var(--t-etichetta);font-weight:650;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.cambio .prima{color:var(--inchiostro-2)}
.cambio .adesso{font-weight:600}

/* Come funziona */
.passi{margin-top:40px;display:grid;gap:44px;counter-reset:passo}
.passi > li{border-top:3px solid var(--inchiostro);display:grid;grid-template-columns:minmax(0,1fr);gap:20px;counter-increment:passo}
.passi figure{min-width:0}
.passi .testo::before{content:counter(passo);display:inline-block;font-family:var(--cifre);font-weight:600;background:var(--inchiostro);color:var(--carta);padding:6px 13px 7px;margin-bottom:14px}
.passi h3 + p{margin-top:8px}
.schermo{border:2px solid var(--inchiostro);box-shadow:var(--ombra);background:var(--carta-alta);overflow:hidden}
a.apri{display:block;cursor:zoom-in}
/* La lente: l'immagine a tutta finestra, si chiude con Chiudi, Esc o un tocco fuori */
.lente{border:2px solid var(--inchiostro);padding:0;background:var(--carta-alta);color:var(--inchiostro);box-shadow:var(--ombra);width:min(96vw,1500px);max-width:none;max-height:94dvh;overflow:hidden}
.lente[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.lente::backdrop{background:rgba(28,24,20,.82)}
.lente form{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:2px solid var(--inchiostro);background:var(--carta)}
.lente form p{font-size:var(--t-piccolo);color:var(--inchiostro-2)}
.lente form .btn{font-size:var(--t-corpo);padding:9px 16px;box-shadow:3px 3px 0 var(--inchiostro)}
.lente form .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--inchiostro)}
.lente-corpo{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lente-corpo img{display:block;width:max(100%,900px);max-width:none;height:auto}
figcaption{margin-top:12px;font-size:var(--t-piccolo);color:var(--inchiostro-2)}
.tocca{display:inline}
.foglio{width:100%;border-collapse:collapse;font-size:var(--t-piccolo);background:var(--carta-alta)}
.foglio th,.foglio td{border:1px solid var(--riga);padding:9px 10px;text-align:left}
.foglio th{font-size:var(--t-etichetta);font-weight:650;letter-spacing:.05em;text-transform:uppercase;background:var(--carta-ombra)}
.foglio td{font-family:var(--cifre);font-variant-numeric:tabular-nums}
.foglio td:nth-child(2){font-family:var(--testo);font-weight:550}
.foglio .num{text-align:right}
.foglio td.ordine{background:var(--evid);font-weight:600}
.foglio .ean{display:none}
.scorre{overflow-x:auto}

/* Oggi e in arrivo */
.sotto-elenco{margin-top:36px}
.sotto-elenco .schermo{width:100%;height:auto}
.guide ul{max-width:64ch}
.arrivo-testa{margin-top:var(--stacco)}
.arrivo{margin-top:28px;border-top:3px solid var(--inchiostro);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.arrivo li{border:2px dashed var(--inchiostro);border-top:0;padding:16px 16px 18px;display:grid;gap:10px;align-content:start}
.arrivo p{color:var(--inchiostro-2)}
.ultima{margin-top:24px;max-width:66ch}
.richiamo{margin-top:28px}

/* Il modulo: campo blu a tutta pagina */
.prova{background:var(--biro);color:#fff;padding-block:var(--stacco)}
.prova ::selection{background:var(--evid);color:var(--inchiostro)}
.prova :focus-visible{outline-color:var(--evid)}
.prova .sotto{margin-top:16px;color:var(--biro-velo);max-width:44ch}
.modulo{margin-top:36px;display:grid;gap:24px;max-width:680px}
.campo{display:grid;gap:6px}
.campo label,.modulo legend{font-weight:700;padding:0}
.campo label span,.modulo legend span{font-weight:400;color:var(--biro-velo)}
.aiuto{font-size:var(--t-piccolo);color:var(--biro-velo)}
.modulo input[type=text],.modulo input[type=email],.modulo select,.modulo textarea{font:inherit;color:var(--inchiostro);background:var(--carta-alta);border:2px solid var(--inchiostro);border-radius:4px;padding:13px 12px;width:100%;min-height:54px}
.modulo input[type=file]{font:inherit;font-size:var(--t-piccolo);color:#fff;width:100%;border:2px dashed var(--biro-velo);border-radius:4px;padding:12px}
.modulo input[type=file]::file-selector-button{font:inherit;font-weight:700;color:var(--inchiostro);background:var(--carta-alta);border:2px solid var(--inchiostro);border-radius:4px;padding:8px 12px;margin-right:12px;cursor:pointer}
.opzioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.opzioni label{position:relative;cursor:pointer}
.opzioni input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opzioni span{display:flex;align-items:center;gap:10px;background:transparent;color:#fff;border:2px solid var(--biro-velo);border-radius:4px;padding:10px 14px;font-weight:600}
/* La casella dentro il cartellino: quadrata se se ne possono scegliere più d'una, tonda se una sola */
.opzioni span::before{content:"";flex:none;width:18px;height:18px;border:2px solid currentColor;border-radius:3px}
.opzioni input[type=radio] + span::before{border-radius:50%}
.opzioni input:checked + span::before{background:var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.6 2.6 5-5.6' fill='none' stroke='%23F4E53B' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}
.opzioni input[type=radio]:checked + span::before{background:var(--inchiostro);box-shadow:inset 0 0 0 3px var(--evid)}
.opzioni input:checked + span{background:var(--evid);color:var(--inchiostro);border-color:var(--inchiostro);box-shadow:3px 3px 0 var(--inchiostro)}
.opzioni input:focus-visible + span{outline:3px solid var(--evid);outline-offset:3px}
.consenso{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.consenso input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--evid)}
.modulo textarea{display:block;resize:vertical;line-height:1.4}
.consenso .obbligo{color:var(--biro-velo)}
.scelti li{font-size:var(--t-piccolo);padding:6px 0;border-top:1px solid var(--biro-velo);overflow-wrap:anywhere}
.scelti button{font:inherit;font-size:var(--t-piccolo);font-weight:700;color:#fff;background:none;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* Il bivio: i campi compaiono con la scelta; dove :has non c'è restano tutti visibili */
.modulo:has(#p-file:not(:checked)) .se-file,.modulo:has(#p-sito:not(:checked)) .se-sito{display:none}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esito-modulo{font-weight:700;min-height:1.5em}
.oppure{color:var(--biro-velo)}
.oppure a{color:#fff}
.esito-modulo.male{background:var(--carta-alta);color:var(--errore);padding:12px 14px;border:2px solid var(--inchiostro);border-radius:4px}
.fatto{background:var(--evid);color:var(--inchiostro);border:2px solid var(--inchiostro);box-shadow:var(--ombra);padding:20px;max-width:680px;margin-top:36px}
.fatto p{margin-top:6px}
.veloci{margin-top:32px}
.veloci-testa{font-weight:700;font-size:var(--t-forte);font-stretch:88%}
.altro summary{cursor:pointer;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.altro[open] summary{margin-bottom:20px}
.altro .campo + .campo{margin-top:20px}

/* Domande */
.domande{margin-top:32px;border-bottom:1.5px solid var(--inchiostro)}
.domande details{border-top:1.5px solid var(--inchiostro)}
.domande summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr 22px;gap:16px;align-items:center;padding:16px 0;font-weight:700}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"";width:18px;height:18px;background:linear-gradient(var(--inchiostro),var(--inchiostro)) center/100% 3px no-repeat,linear-gradient(var(--inchiostro),var(--inchiostro)) center/3px 100% no-repeat}
.domande details[open] summary::after{background:linear-gradient(var(--inchiostro),var(--inchiostro)) center/100% 3px no-repeat}
.domande details p{padding:0 0 18px;max-width:62ch;color:var(--inchiostro-2)}

/* Piede */
.piede{background:var(--inchiostro);color:var(--carta);padding-block:48px}
.piede .marca b{color:var(--inchiostro)}
.piede p{margin-top:10px;color:#CFC3B2}
.piede a{color:var(--carta)}
.piede :focus-visible{outline-color:var(--evid)}

/* Pagina di testo (privacy) */
.pagina{padding-block:clamp(24px,6vw,72px) var(--stacco)}
.pagina h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,3.6rem)}
.pagina h2{font-size:var(--t-forte);font-stretch:88%;letter-spacing:0;word-spacing:normal;margin-top:30px}
.pagina p{margin-top:8px;max-width:66ch}
.pagina ul{margin-top:8px;padding-left:1.2em;list-style:disc;max-width:66ch}
.pagina li + li{margin-top:6px}

@media (min-width:720px){
  body{padding-bottom:0}
  .barra{display:none}
  .azioni{display:flex}
  .testata .btn{display:inline-block}
  .testata .wa{display:inline-flex}
  .apertura .sotto{font-size:var(--t-forte);line-height:1.45;max-width:48ch;margin-top:20px}
  .scaffale{margin-top:48px}
  .ripiano{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);column-gap:28px;border-top:3px solid var(--inchiostro);padding-bottom:26px}
  .prodotto{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:2px;font-size:var(--t-forte);padding:12px 0 0}
  .guida{border-top:0;gap:12px}
  .cart{padding:10px 14px 12px;min-height:84px}
  .cart .chi{letter-spacing:.05em;font-stretch:100%}
  .cart .prezzo{font-size:1.75rem}
  .guide > li{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:28px;align-items:baseline}
  .cambio > li{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:28px;align-items:start;padding:14px 0 22px}
  .passi > li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  .passi figure{padding-top:26px}
  .tocca{display:none}
  .lente form p{visibility:hidden}
  .foglio .ean{display:table-cell}
  .arrivo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
}
@media (min-width:1040px){
  .arrivo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.2fr)}
  .prova .dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .prova-testa{position:sticky;top:40px}
  .prova .modulo{margin-top:6px}
  .prova .fatto{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}