/* sito.css — www.arcadiagames.eu. Prima il telefono (da 320 px), poi si allarga. Proposta grafica approvata il
   26/10/2026 (seconda versione): retino e tagli obliqui del logo, sezioni scure, un colore per mondo. */
@font-face{font-family:'Chakra Petch';src:url(/static/fonts/ChakraPetch-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(/static/fonts/ChakraPetch-700.woff2) format('woff2');font-weight:700;font-display:swap}
/* Testo in Bricolage Grotesque (scelta del PM, 2/11/2026). Licenza SIL Open Font License, servito da noi. */
@font-face{font-family:'Bricolage';src:url(/static/fonts/Bricolage-latino.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage';src:url(/static/fonts/Bricolage-latino-esteso.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --inchiostro:#0F1720; --notte:#0B0F1A; --blu:#0B5A8A; --blu-scuro:#08405F; --arancio:#FFB020;
  --grigio:#4A5563; --linea:#DDE3EA; --fondo:#F2F5F8; --bianco:#FFFFFF;
  --retro-f:#EDE7FF; --retro-t:#3B2399; --carte-f:#E2F5EB; --carte-t:#0E5A35; --fumetti-f:#FFE9E0; --fumetti-t:#9A3110;
  --funko-f:#FFF1CC; --funko-t:#6E4700; --video-f:#E3F0F9; --video-t:#0B5A8A; --tavolo-f:#FDE7F3; --tavolo-t:#8A1C57;
  --titoli:'Chakra Petch',system-ui,sans-serif; --testo:'Bricolage',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bianco);color:var(--inchiostro);font-family:var(--testo);font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--blu)} a:hover{color:var(--blu-scuro)}
h1,h2,h3{font-family:var(--titoli);margin:0;letter-spacing:.2px;line-height:1.1}
:focus-visible{outline:3px solid var(--arancio);outline-offset:2px}
.salta{position:absolute;left:-9999px}.salta:focus{left:12px;top:12px;z-index:50;background:#fff;padding:10px 14px;border-radius:10px}
.nascosto{position:absolute!important;left:-9999px!important}

/* motivi del logo */
.retino{background-image:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.4px);background-size:9px 9px}
.retino-blu{background-image:radial-gradient(rgba(11,90,138,.14) 1.1px,transparent 1.4px);background-size:9px 9px}
.taglio{clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.giu-obliquo{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
.su-obliquo{clip-path:polygon(0 26px,100% 0,100% 100%,0 100%)}

.contenitore{max-width:1280px;margin:0 auto;padding:0 16px}
.anteprima{background:#9A3110;color:#fff;font-size:13px;font-weight:700;text-align:center;padding:6px 12px}

/* barra in cima: la spedizione gratuita */
.barra-cima{margin:0;background:var(--arancio);color:var(--inchiostro);font-size:14px;font-weight:800;min-height:36px;padding:6px 16px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.25}
.barra-cima svg{flex:0 0 auto;width:18px;height:18px}
.barra-cima svg path,.barra-cima svg circle{stroke:var(--inchiostro)}

/* testata */
.testata{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.testata>.contenitore{display:flex;align-items:center;gap:12px;min-height:60px;flex-wrap:wrap}
.logo img{height:34px;width:auto}
.menu-alto{display:none;gap:22px}
.menu-alto a{color:var(--inchiostro);text-decoration:none;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.menu-alto a[aria-current="page"]{color:var(--blu)}
.ricerca{flex:1 1 100%;order:3;display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;margin-bottom:10px;border-radius:14px;background:var(--fondo);border:1.5px solid var(--linea);color:var(--grigio)}
.ricerca input{border:0;background:transparent;font:inherit;font-size:16px;color:var(--inchiostro);width:100%;outline:none}
.ricerca button{border:0;background:transparent;color:var(--grigio);min-width:44px;min-height:44px;cursor:pointer}
.bottone-club{margin-left:auto;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;border-radius:12px;background:var(--blu);color:#fff;font-weight:800;text-decoration:none;font-size:14px}
.bottone-club:hover{color:#fff;background:var(--blu-scuro)}

/* barra in basso, solo telefono */
.barra-basso{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom)}
.barra-basso a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font-size:11px;font-weight:700;color:var(--grigio);text-decoration:none}
.barra-basso a[aria-current="page"]{color:var(--blu)}
main{padding-bottom:84px}

/* pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:12px;font-weight:800;text-decoration:none;border:0;font:inherit;font-weight:800;cursor:pointer}
.btn-arancio{background:var(--arancio);color:var(--inchiostro)} .btn-arancio:hover{color:var(--inchiostro);filter:brightness(.96)}
.btn-chiaro{border:1.5px solid rgba(255,255,255,.65);color:#fff;background:transparent} .btn-chiaro:hover{color:#fff;background:rgba(255,255,255,.08)}
.btn-bordo{border:1.5px solid var(--blu);color:var(--blu);background:#fff}
.occhiello{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}

/* sezioni */
.sezione{padding-top:30px}
.sezione-testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.sezione-testa h2{font-size:24px}
.sezione-testa a{font-weight:800;font-size:14px;white-space:nowrap}
.sottotitolo{margin:-6px 0 12px;color:var(--grigio);font-size:15px}

/* vetrina in alto */
.vetrina{background-color:var(--notte);color:#fff;padding:28px 0 56px}
.vetrina h1{font-size:36px;margin-top:10px}
.vetrina p{color:#C9D2DC;font-size:16px;max-width:560px;margin:12px 0 0}
.vetrina .azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.vetrina .azioni .btn{flex:1 1 160px}

/* vetrina a scorrimento: riquadri 1600×640 (5 a 2) dal gestionale, fatti scorrere dal cliente e mai da soli. Al
   telefono il riquadro successivo si vede per l'8%: dice che ce n'è un altro. */
.vetrina-scorre{background-color:var(--notte);padding:14px 0 18px}
.vetrina-mezzo{padding-top:30px}
.riquadri-vetrina{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
.riquadro-vetrina{flex:0 0 calc(92% - 8px);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background-color:#151C2C;color:#fff;text-decoration:none}
.riquadro-vetrina:hover{color:#fff}
.riquadri-vetrina.uno .riquadro-vetrina{flex-basis:100%}
.riquadro-vetrina img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover}
.testo-riquadro{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px 14px}
.testo-riquadro strong{font-family:var(--titoli);font-size:20px;line-height:1.15}
.testo-riquadro span:not(.btn){color:#C9D2DC;font-size:14px;line-height:1.35}
.testo-riquadro .btn{margin-top:8px;min-height:42px;padding:0 18px;font-size:15px}
/* Pallini e frecce del browser, dove li sa fare (Chrome, Edge). Niente pallini fatti di collegamenti: a ogni tocco
   la pagina salterebbe fino al riquadro. Altrove si scorre col dito, o con la barra di scorrimento. */
@supports selector(::scroll-marker){
  .riquadri-vetrina{scroll-marker-group:after}
  .riquadri-vetrina.uno{scroll-marker-group:none}
  .riquadri-vetrina::scroll-marker-group{display:flex;justify-content:center;gap:2px;padding-top:6px}
  .riquadro-vetrina::scroll-marker{content:'';width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#8A95A3 0 4px,transparent 5px)}
  .riquadro-vetrina::scroll-marker:target-current{background:radial-gradient(circle,var(--arancio) 0 6px,transparent 7px)}
}
.reparti-preordini{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px}
.reparti-preordini a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--linea);color:var(--inchiostro);font-weight:700;text-decoration:none}
.reparti-preordini a[aria-current]{border-color:var(--inchiostro);background:var(--inchiostro);color:#fff}

/* garanzie in fila (home e scheda) */
.sezione-garanzie{padding-top:18px}
.garanzie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.garanzie li{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;background:var(--fondo);border:1px solid var(--linea);font-size:14px;line-height:1.3}
.garanzie li svg{flex:0 0 auto;margin-top:1px}
.garanzie li b{display:block;font-weight:800}
.garanzie li small{display:block;color:var(--grigio);font-size:13px;margin-top:2px}
.garanzie.in-scheda{margin-top:18px}
.nota-iva{margin:8px 2px 0;font-size:13px;color:var(--grigio)}
@media (min-width:900px){.sezione-garanzie .garanzie{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* mondi */
.mondi{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.mondo{flex:0 0 150px;min-height:170px;border-radius:16px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;font-family:var(--titoli);font-weight:700;font-size:19px;line-height:1.1;scroll-snap-align:start}
.mondo small{font-family:var(--testo);font-size:13px;font-weight:600;line-height:1.35}
.m-retro{background-color:var(--retro-f);color:var(--retro-t)} .m-carte{background-color:var(--carte-f);color:var(--carte-t)}
.m-fumetti{background-color:var(--fumetti-f);color:var(--fumetti-t)} .m-videogiochi{background-color:var(--video-f);color:var(--video-t)}
.m-tavolo{background-color:var(--tavolo-f);color:var(--tavolo-t)} .m-funko{background-color:var(--funko-f);color:var(--funko-t)}

/* schede prodotto (lista) */
/* file di schede che scorrono di lato, a scatti (nessuno script): al telefono due schede e mezzo per schermata, la
   mezza dice "scorri"; sul computer cinque. Il selettore è sui figli diretti: dentro .carta-con la .carta è in colonna. */
.scorre{position:relative}
.fila{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
.fila>.carta,.fila>.carta-con{flex:0 0 calc((100% - 2*12px)/2.5);scroll-snap-align:start}
.griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
.carta{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--inchiostro);min-width:0}
.carta:hover{color:var(--inchiostro)} .carta:hover .copertina{filter:brightness(1.08)}
.copertina{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background-color:#151C2C;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:10px}
.copertina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.copertina .etichetta-finta{position:relative;font-family:var(--titoli);font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;opacity:.85}
.piattaforma{position:relative;align-self:flex-start;max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 7px;border-radius:5px;background:#fff;color:var(--inchiostro);font-size:11px;font-weight:800;letter-spacing:.4px;z-index:1}
.bollino{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:800;z-index:1;background:#fff;color:var(--inchiostro)}
.bollino.caldo{background:var(--arancio)}
.carta .console-carta{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--blu);margin-bottom:-4px}
.carta .nome{font-weight:700;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.carta .cond{font-size:13px;color:var(--grigio)}
.prezzo{font-family:var(--titoli);font-size:20px;font-weight:700}
.prezzo small{font-family:var(--testo);font-size:12px;font-weight:600;color:var(--grigio)}
.contiene{display:flex;gap:4px}
.contiene span{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--video-f);color:var(--blu)}
.contiene span.manca{background:var(--fondo);color:#8A95A3}

/* stato col pallino */
.stato-carta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--inchiostro)}
.stato-carta i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#8A95A3}
.s-disponibile i{background:#1E8E4E} .s-disponibile{color:#17663A}
.s-pochi i{background:#C26A00} .s-pochi{color:#8A4B00}
.s-preordine i{background:var(--arancio);box-shadow:0 0 0 2px #7A5200 inset} .s-preordine{color:#6E4700}
.s-esaurito i{background:#8A95A3} .s-esaurito{color:var(--grigio)}
.stato-carta.in-scheda{margin:6px 0 0;font-size:15px}
.limite{font-size:12px;color:var(--grigio);font-weight:600}
.avvisami .btn{width:100%}

/* riepilogo dopo "Aggiungi" */
.riepilogo-aggiunto{border:2px solid #1E8E4E;border-radius:16px;padding:14px;margin:0 0 18px;background:#EFF9F2}
.riepilogo-aggiunto .conferma{margin:0 0 12px}
.due-pulsanti{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.due-pulsanti .btn{width:100%}

/* "Lo trovi anche a…" */
.altrove{margin-top:20px;padding:16px;border-radius:16px;border:1px solid var(--linea);background:#fff}
.altrove h2{font-size:20px}
.altrove .sottotitolo{margin:6px 0 10px}
.altrove ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.altrove li{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--linea)}
.altrove li:first-child{border-top:0;padding-top:0}
.altrove li span{color:var(--grigio);font-size:14px}
.azioni-altrove{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.azioni-altrove .btn{min-height:44px;padding:0 14px;font-size:14px}
.azioni-altrove svg{width:18px;height:18px}

/* pulsante fisso della scheda: compare quando le scelte escono dallo schermo (solo dove il browser lo sa fare) */
.barra-compra{display:none}
@supports (animation-timeline: view()){
  body{timeline-scope:--scelte}
  .opzioni{view-timeline-name:--scelte}
  .barra-compra{display:flex;position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:25;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#fff;border-top:1px solid var(--linea);box-shadow:0 -6px 18px rgba(15,23,32,.08);text-decoration:none;color:var(--inchiostro);
    animation:compare-barra linear both;animation-timeline:--scelte;animation-range:exit 0% exit 100%}
  .barra-compra b{font-family:var(--titoli);font-size:20px}
  .barra-compra .btn{min-height:46px}
  main:has(.barra-compra){padding-bottom:150px}
  @media (min-width:900px){.barra-compra{display:none} main:has(.barra-compra){padding-bottom:84px}}
}
@keyframes compare-barra{from{opacity:0;visibility:hidden;transform:translateY(100%)}to{opacity:1;visibility:visible;transform:none}}

/* recensioni dei negozi */
.voti{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.voto-negozio{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;border:1px solid var(--linea);background:var(--fondo)}
.voto-negozio strong{font-family:var(--titoli);font-size:20px}
.voto-negozio .stelle{font-size:18px;color:#8A4B00}
.voto-negozio .stelle b{font-family:var(--titoli);font-size:26px;color:var(--inchiostro)}
.voto-negozio blockquote{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#fff;font-size:14px}
.voto-negozio blockquote p{margin:0}
.voto-negozio blockquote footer{margin-top:6px;font-size:12px;color:var(--grigio)}
.voto-negozio a{font-weight:800;font-size:14px;min-height:44px;display:inline-flex;align-items:center}

/* catalogo */
/* filtri come nei siti di riferimento: due pulsanti affiancati, pannello a tutto schermo, sezioni a fisarmonica */
.barra-filtri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:14px 0 10px;position:relative}
.barra-filtri>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;border:1.5px solid var(--inchiostro);background:#fff;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-filtri>details>summary::-webkit-details-marker{display:none}
.pannello-filtri .apri{display:inline-flex;align-items:center;gap:8px}
.pannello-filtri .chiudi{display:none}
.pannello-filtri .conta{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--arancio);color:var(--inchiostro);font-size:12px}
/* aperto: il pannello copre lo schermo e il pulsante diventa "Chiudi" in alto a destra */
.pannello-filtri[open]>summary{position:fixed;top:10px;right:12px;z-index:62;min-height:44px;border:0;background:var(--fondo);font-size:14px}
.pannello-filtri[open] .apri{display:none}
.pannello-filtri[open] .chiudi{display:inline}
.foglio{position:fixed;inset:0;z-index:61;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.testa-foglio{flex:0 0 auto;display:flex;align-items:center;min-height:64px;padding:0 16px;border-bottom:1px solid var(--linea)}
.testa-foglio h2{font-size:22px}
.filtri{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.sez{border-bottom:1px solid var(--linea)}
.sez>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;font-weight:800;font-size:16px}
.sez>summary::-webkit-details-marker{display:none}
.sez>summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.sez[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.n-scelti{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--blu);color:#fff;font-size:12px}
.lista{display:flex;flex-direction:column;padding:0 16px 12px}
.lista>label,.lista .altre>label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;cursor:pointer}
.lista input[type=checkbox],.lista input[type=radio]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--blu);margin:0}
.lista label small{margin-left:auto;color:var(--grigio);font-size:13px;font-weight:600}
.lista .altre>summary{cursor:pointer;list-style:none;color:var(--blu);font-weight:800;font-size:14px;min-height:44px;display:flex;align-items:center}
.lista .altre>summary::-webkit-details-marker{display:none}
.lista .altre[open]>summary{display:none}
.campo-marca{display:flex;flex-direction:column;gap:6px;margin-top:6px;font-size:14px;font-weight:700}
.campo-marca input{min-height:44px;border:1.5px solid #C5CFDA;border-radius:10px;font:inherit;font-weight:400;padding:0 12px}
.prezzi{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.prezzi label{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.prezzi input{width:90px;min-height:44px;border:1.5px solid #C5CFDA;border-radius:10px;font:inherit;padding:0 10px}
.piede-filtri{position:sticky;bottom:0;margin-top:auto;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linea);box-shadow:0 -6px 18px rgba(15,23,32,.06)}
.piede-filtri .btn{min-height:50px;white-space:nowrap}
.piede-filtri .btn-bordo{flex:0 0 auto;padding:0 14px}
.piede-filtri .btn-arancio{flex:1 1 auto}
/* ordina: menu a discesa sotto il pulsante */
.menu-ordina{position:static}
.menu-ordina>summary b{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.voci-ordina{position:absolute;right:0;left:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 12px 28px rgba(15,23,32,.14);padding:6px}
.voci-ordina a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;color:var(--inchiostro);text-decoration:none;font-weight:700}
.voci-ordina a[aria-current]{background:var(--fondo);color:var(--blu)}
.voci-ordina a[aria-current]::after{content:'✓';margin-left:auto}
@media (min-width:900px){
  .barra-filtri{grid-template-columns:auto auto;justify-content:start}
  .foglio{right:auto;width:420px;box-shadow:12px 0 40px rgba(15,23,32,.2)}
  .pannello-filtri[open]>summary{left:308px;right:auto}
  .voci-ordina{left:auto;width:280px}
}
body:has(.pannello-filtri[open]){overflow:hidden}
.intestazione-cat{padding:18px 0 34px}
.intestazione-cat h1{font-size:30px}
.intestazione-cat nav{font-size:13px;margin-bottom:6px}
.intestazione-cat nav a{color:inherit;opacity:.9}
.carta-con{display:flex;flex-direction:column;gap:8px;min-width:0}
.carta-con .carta{flex:1}
.aggiungi-carta{margin:0}
.esce-il{font-size:13px;color:#4A5563;text-align:center;font-weight:600}
.aggiungi-carta .btn,a.aggiungi-carta{width:100%;min-height:42px;padding:0 10px;font-size:14px;justify-content:center}
.attivi{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.attivi a{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 6px 0 12px;border-radius:18px;background:var(--inchiostro);color:#fff;text-decoration:none;font-size:13px;font-weight:700}
.attivi a.togli-tutti{background:transparent;color:var(--blu)}
.vuoto{padding:40px 0;text-align:center;color:var(--grigio)}
.pagine{display:flex;justify-content:center;gap:8px;margin:28px 0}
.pagine a,.pagine span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px solid #C5CFDA;text-decoration:none;font-weight:800;color:var(--inchiostro)}
.pagine span[aria-current]{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}

/* scheda */
.foto-bordo{margin:0 -16px}
.foto-grande{position:relative;aspect-ratio:4/3;max-height:440px;width:100%;background-color:#151C2C;display:flex;align-items:center;justify-content:center;color:#C9D2DC;overflow:hidden}
.foto-grande img{width:100%;height:100%;object-fit:contain}
.etichette{display:flex;gap:6px;flex-wrap:wrap}
.etichetta{padding:3px 8px;border-radius:6px;font-size:12px;font-weight:800;background:var(--fondo);color:#2B3440}
.acquisto{padding-top:16px;min-width:0}
.sotto-foto{min-width:0}
.trama{margin-top:24px}
.trama h2{font-size:18px;margin-bottom:8px}
.trama p,.trama li{line-height:1.6;color:#2B3440}
.trama p{margin:0 0 12px}
.trama ul{margin:0 0 12px;padding-left:20px}
.trama li{margin-bottom:6px}
.opzioni{display:flex;flex-direction:column;gap:10px}
.opzione{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1.5px solid #C5CFDA;background:#fff}
.opzione .riga{display:flex;align-items:center;gap:12px}
.opzione .riga strong{flex:1}
.opzione.finita{background:#F7F9FB}
.prezzo-da{margin:6px 0 0;font-size:15px;color:var(--grigio)}
.prezzo-da b{font-family:var(--titoli);font-size:26px;color:var(--inchiostro)}
.riga-compra{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.riga-compra .quanti{font-size:13px;color:var(--grigio);font-weight:600}
.riga-compra .pochi{font-size:13px;color:#9A3110;font-weight:700}
.aggiungi{display:flex;align-items:center;gap:8px;margin-left:auto}
.aggiungi .btn{min-height:44px;padding:0 16px;white-space:nowrap}
.aggiungi .quantita input{width:58px;min-height:44px;border:1.5px solid #C5CFDA;border-radius:10px;font:inherit;padding:0 8px;text-align:center}
.dati-scheda{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:20px 0 0;background:var(--linea);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.dati-scheda div{background:#fff;padding:10px 14px}
.dati-scheda dt{font-size:12px;color:var(--grigio);font-weight:600}
.dati-scheda dd{margin:2px 0 0;font-weight:700}
.include{display:flex;gap:6px;flex-wrap:wrap}
.include span{padding:4px 9px;border-radius:8px;background:var(--video-f);color:var(--blu);font-size:12px;font-weight:700}
.include span.manca{background:var(--fondo);color:#6B7684;text-decoration:line-through}
.info{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:var(--fondo);margin-top:18px}
.info div{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.info svg{flex:0 0 22px}
.chiedi{margin-top:18px;padding:14px;border-radius:16px;background:#fff;border:1.5px solid var(--linea);display:flex;flex-direction:column;gap:10px}

/* negozi */
.sedi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sedi a{min-height:56px;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;border-radius:12px;background:var(--fondo);color:var(--inchiostro);text-decoration:none;font-weight:800;font-size:14px}
.sedi a small{font-weight:500;color:var(--grigio)}
.stato{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:800}
.stato.aperto{background:#E7F6EC;color:#11613A} .stato.chiuso{background:#FFE9E0;color:#9A3110} .stato.ignoto{background:var(--fondo);color:var(--grigio)}
.stato i{width:8px;height:8px;border-radius:4px;background:currentColor}
.azioni-sede{display:flex;gap:10px;margin-top:-30px;position:relative}
.azioni-sede a{flex:1;min-height:66px;border-radius:14px;background:#fff;color:var(--inchiostro);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:800;box-shadow:0 1px 0 var(--linea),0 6px 18px rgba(11,15,26,.10)}
.orari div{display:flex;justify-content:space-between;min-height:40px;align-items:center;border-bottom:1px solid #EEF1F4}
.orari div.oggi{font-weight:800;color:var(--blu)}
.avviso{padding:12px 14px;border-radius:12px;background:#FFF6E5;font-size:14px;line-height:1.45}

/* club */
.club{background-color:var(--blu);color:#fff;padding:50px 0 32px;margin-top:34px}
.club h2{font-size:28px;margin-top:8px}
.livelli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.livelli div{padding:10px;border-radius:12px;background:rgba(255,255,255,.12)}
.livelli b{font-family:var(--titoli);display:block}
.livelli small{color:#E3F0F9}

/* pagina fissa */
.testo-pagina{max-width:720px;padding-top:24px}
.testo-pagina h1{font-size:32px;margin-bottom:16px}
.testo-pagina h2{font-size:22px;margin:26px 0 8px}
.testo-pagina p{margin:0 0 14px}
.avviso-bozza{background:#FFF4D6;border:1px solid var(--arancio);border-radius:8px;padding:8px 12px;font-weight:600}
.testo-pagina ul{margin:0 0 14px;padding-left:22px}
.testo-pagina li{margin:0 0 6px}
.testo-pagina a{color:var(--blu);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

/* piede */
.piede{background-color:var(--notte);color:#C9D2DC;margin-top:40px;padding:26px 0 30px;font-size:14px;line-height:1.6}
.piede .contenitore{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.piede nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:700}
.piede a{color:#fff}


/* carrello e cassa */
.icona-carrello{position:relative;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--inchiostro);border-radius:12px}
.icona-carrello span{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--arancio);color:var(--inchiostro);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pagina-stretta{max-width:720px;padding-top:20px}
.titolo-pagina{font-size:28px;margin:4px 0 14px}
.conferma{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:#E7F6EC;color:#11613A;font-weight:700}
.errore{padding:12px 14px;border-radius:12px;background:#FFE9E0;color:#9A3110;font-weight:700}
.riga-carrello{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea);align-items:flex-start}
.riga-carrello .mini{width:72px;height:72px;flex:0 0 72px;border-radius:10px;background-color:#151C2C;overflow:hidden}
.riga-carrello .mini img{width:100%;height:100%;object-fit:cover}
.riga-testo{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.problema{color:#9A3110;font-weight:700;font-size:14px}
.riga-quantita{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.riga-quantita input{width:64px;min-height:40px;border:1.5px solid #C5CFDA;border-radius:10px;font:inherit;padding:0 8px}
button.link{border:0;background:transparent;color:var(--blu);font:inherit;font-weight:700;min-height:40px;cursor:pointer;padding:0 4px}
.riquadro{display:block;margin-top:18px;padding:14px;border:1.5px solid var(--linea);border-radius:16px}
.riquadro h2,.riquadro legend{font-family:var(--titoli);font-size:18px;font-weight:700;padding:0 4px}
.riquadro p{display:flex;align-items:center;gap:8px;margin:8px 0}
.soglia{margin-top:10px;padding:12px 14px;border-radius:12px;background:#FFF6E5;font-size:14px}
.barra{margin-top:8px;height:8px;border-radius:4px;background:#F3DDB0}.barra div{height:8px;border-radius:4px;background:#B26B00}
.totali{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.totali div{display:flex;justify-content:space-between;gap:12px}
.totali div span:last-child{white-space:nowrap}
.totali .totale{padding-top:10px;border-top:1px solid var(--linea);font-weight:800;font-size:18px}
.totali .totale span:last-child{font-family:var(--titoli);font-size:24px}
.totali small{color:var(--grigio)}
.totali h2{font-size:16px;margin:10px 0 0}
.blocco-carrello h2{font-size:18px;margin:18px 0 8px}
.blocco-carrello .subtotale{display:flex;justify-content:space-between;gap:12px;font-weight:700;margin-top:6px}
.scelta-spedizioni fieldset{border:0;padding:0;margin:0 0 12px;min-width:0}
.scelta-spedizioni legend{font-weight:700}
.ordine-legato{margin-top:18px}
.ordine-legato h2{font-size:18px}
.btn.largo{display:flex;width:100%;margin-top:18px;min-height:54px;font-size:17px}
.nota-sicura svg{flex:0 0 16px}
.nota-sicura{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;color:var(--grigio);font-size:13px;text-align:center}
.modulo-cassa fieldset,.compra fieldset{min-width:0}
.modulo-cassa input:not([type=radio]):not([type=checkbox]),.modulo-cassa textarea{width:100%}
.modulo-cassa label{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-weight:600;font-size:14px}
.modulo-cassa input:not([type=radio]):not([type=checkbox]),.modulo-cassa textarea{font:inherit;font-size:16px;min-height:46px;padding:8px 12px;border:1.5px solid #C5CFDA;border-radius:12px;background:#fff;color:var(--inchiostro)}
.modulo-cassa small{font-weight:500;color:var(--grigio)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scelta-grande{display:flex!important;flex-direction:row!important;align-items:center;gap:12px;padding:14px;margin-top:10px;border:1.5px solid #C5CFDA;border-radius:14px;cursor:pointer}
.scelta-grande:has(input:checked){border:2px solid var(--blu);background:#F2F8FC}
.scelta-grande input{width:22px;height:22px;accent-color:var(--blu);flex:0 0 22px}
.scelta-grande span{display:flex;flex-direction:column;flex:1}
.scelta-grande small{font-weight:500;color:var(--grigio)}
.prezzo-piccolo{flex:0 0 auto!important;font-family:var(--titoli);font-weight:700}
.accetto{flex-direction:row!important;align-items:flex-start;gap:10px!important;margin-top:18px!important;font-weight:500!important}
.accetto input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--blu)}
.compra{margin-top:18px;display:flex;flex-direction:column}
.compra .scegli{border:0;padding:0;margin:0}
.compra .scegli legend{font-family:var(--titoli);font-size:18px;font-weight:700}
.compra .quantita{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:700}
.compra .quantita input{width:72px;min-height:44px;border:1.5px solid #C5CFDA;border-radius:10px;font:inherit;padding:0 8px}

@media (min-width:760px){
  .menu-alto{display:flex}
  .barra-basso{display:none}
  main{padding-bottom:0}
  .ricerca{flex:1 1 260px;order:0;margin-bottom:0}
  .logo img{height:44px}
  .testata>.contenitore{min-height:78px;gap:24px;flex-wrap:nowrap}
  .contenitore{padding:0 32px}
  .vetrina{padding:56px 0 100px}
  .vetrina h1{font-size:60px;max-width:820px}
  .vetrina .azioni .btn{flex:0 0 auto}
  .mondi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));overflow:visible}
  .mondo{min-height:190px;font-size:23px}
  .griglia{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:24px 16px}
  .fila{gap:16px}
  .fila>.carta,.fila>.carta-con{flex-basis:calc((100% - 3*16px)/3.5)}
  .vetrina-scorre{padding:24px 0 28px}
  .vetrina-mezzo{padding-top:48px}
  .riquadro-vetrina{position:relative}
  .testo-riquadro{position:absolute;top:0;bottom:0;left:0;justify-content:flex-end;width:60%;padding:28px 32px;background:linear-gradient(90deg,rgba(11,15,26,.9) 40%,rgba(11,15,26,0))}
  .testo-riquadro strong{font-size:32px}
  .testo-riquadro span:not(.btn){font-size:16px;color:#E3E8EE}
  .sezione{padding-top:48px}
  .sezione-testa h2{font-size:32px}
  .sedi{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .scheda-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"foto acquisto" "trama acquisto";grid-template-rows:auto 1fr;gap:0 40px;padding-top:32px;align-items:start}
  .scheda-due>.foto-bordo{grid-area:foto}
  .scheda-due>.acquisto{grid-area:acquisto;padding-top:0}
  .scheda-due>.sotto-foto{grid-area:trama}
  .foto-bordo{margin:0}
  .foto-grande{border-radius:20px;aspect-ratio:1/1}
  .club h2{font-size:36px}
}
@media (prefers-reduced-motion:no-preference){
  .carta .copertina{transition:filter .15s ease}
  .btn{transition:filter .15s ease,background .15s ease}
}

/* menu dei reparti: tendina a colonne sul computer col mouse, pannello a tutto schermo altrove (nessuno script) */
.reparti{display:none;position:relative;border-top:1px solid var(--linea);background:#fff}
.voci-reparti{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.voce-reparto{display:inline-flex;align-items:center;gap:7px;min-height:50px;padding:0 12px;border-bottom:3px solid transparent;font-weight:800;font-size:15px;color:var(--inchiostro);text-decoration:none}
.voce-reparto::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.reparto:hover>.voce-reparto,.reparto:focus-within>.voce-reparto{color:var(--blu);border-bottom-color:var(--blu)}
.tendina{position:absolute;left:0;right:0;top:100%;z-index:25;background:#fff;border-top:1px solid var(--linea);box-shadow:0 24px 40px rgba(15,23,32,.16);max-height:70vh;overflow:auto;visibility:hidden;opacity:0;transition:opacity .12s,visibility 0s .12s}
.reparto:hover>.tendina,.reparto:focus-within>.tendina{visibility:visible;opacity:1;transition:opacity .12s .08s,visibility 0s .08s}
.colonne{columns:4 200px;column-gap:44px;column-rule:1px solid var(--linea);padding:28px 0 6px}
.colonna{break-inside:avoid;margin-bottom:24px}
.titolo-col{display:block;margin-bottom:8px;font-weight:800;font-size:16px;color:var(--inchiostro);text-decoration:none}
.colonna ul{list-style:none;margin:0;padding:0}
.colonna li a{display:block;padding:5px 0;font-size:15px;color:var(--grigio);text-decoration:none}
.colonna a:hover{color:var(--blu);text-decoration:underline}
.vedi-tutto{display:inline-block;margin:0 0 24px;font-weight:800;color:var(--blu)}
.menu-telefono>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-10px;color:var(--inchiostro)}
.menu-telefono>summary::-webkit-details-marker{display:none}
.menu-telefono .chiudi{display:none}
.menu-telefono[open]>summary{position:fixed;top:10px;right:12px;z-index:62;margin:0;padding:0 14px;border-radius:22px;background:var(--fondo);font-weight:700;font-size:14px}
.menu-telefono[open] .apri{display:none}
.menu-telefono[open] .chiudi{display:inline}
.corpo-menu{flex:1;overflow:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.riga-menu{display:flex;align-items:center;min-height:56px;padding:0 16px;border-bottom:1px solid var(--linea);font-weight:800;font-size:16px;color:var(--inchiostro);text-decoration:none}
.menu-telefono .dentro{padding:2px 16px 18px 30px}
.menu-telefono .titolo-col{font-size:15px}
.menu-telefono .colonna{margin-bottom:16px}
.menu-telefono .titolo-col{margin-bottom:2px}
.menu-telefono .colonna li a{padding:9px 0}
.menu-telefono .vedi-tutto{margin:0}
body:has(.menu-telefono[open]){overflow:hidden}
/* il pannello sta dentro la testata: la testata deve passare sopra la barra in basso */
body:has(.menu-telefono[open]) .testata{z-index:70}
@media (min-width:900px){.menu-telefono[open]>summary{left:308px;right:auto}}
@media (min-width:900px) and (hover:hover){.reparti{display:block}.menu-telefono{display:none}}
/* sul computer: cinque schede per fila, e le frecce del browser per scorrere file e vetrina (dove ci sono) */
@media (min-width:1100px){.fila>.carta,.fila>.carta-con{flex-basis:calc((100% - 4*16px)/5)}}
@supports selector(::scroll-button(*)){
  @media (min-width:760px) and (hover:hover){
    .fila::scroll-button(*),.riquadri-vetrina::scroll-button(*){position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--inchiostro);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(15,23,32,.18)}
    .fila::scroll-button(*):disabled,.riquadri-vetrina::scroll-button(*):disabled{opacity:0;pointer-events:none}
    .fila::scroll-button(left),.riquadri-vetrina::scroll-button(left){content:'‹' / 'Indietro';left:-14px}
    .fila::scroll-button(right),.riquadri-vetrina::scroll-button(right){content:'›' / 'Avanti';right:-14px}
    .fila::scroll-button(*){top:96px}
    .riquadri-vetrina::scroll-button(*){top:calc(50% - 40px)}
    .riquadri-vetrina.uno::scroll-button(*){display:none}
  }
}
.tutti-sotto{margin:10px 0 0;text-align:right;font-weight:800;font-size:14px}