/* pj-base 0.40: la testata comune ai siti Plastic Jumper (2026-11-05): marchio con logo e riga sotto, menu principale con il tasto
   «Menu» sul telefono, menu di servizio sottile in alto, briciole di navigazione e carrello a icona. Si carica dopo pj-base.css e prima
   del foglio del sito. Colori solo da variabili: --testata (sfondo), --testata-testo, --testata-testo-2, --testata-linea; se il sito non
   le ha valgono --superficie, --testo, --testo-2 e --linea. Il logo: il sito scrive nel suo foglio
   .marchio-logo{-webkit-mask-image:url("../img/logo.svg");mask-image:url("../img/logo.svg")} (maschera, colorata da --testata-testo; il
   percorso va scritto lì: in una variabile si leggerebbe a partire da questo file). Markup: vedi README, «La testata comune». */
.testata{background:var(--testata,var(--superficie));color:var(--testata-testo,var(--testo));border-bottom:1px solid var(--testata-linea,var(--linea))}
.testata-riga{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding-top:.55rem;padding-bottom:.55rem}
.marchio{display:inline-flex;align-items:center;gap:.6rem;margin-right:.6rem;color:var(--testata-testo,var(--testo));text-decoration:none}
.marchio:hover .marchio-nome{text-decoration:underline}
.marchio-logo{display:inline-block;flex:none;width:2.7rem;height:2.7rem;background:var(--testata-testo,var(--testo));
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.marchio-testo{display:flex;flex-direction:column;line-height:1.1}
.marchio-nome{font-size:1.45rem;font-weight:700;letter-spacing:.01em}
.marchio-sotto{font-size:.8rem;font-weight:400;font-style:italic;color:var(--testata-testo-2,var(--testo-2))}
.nav-principale{flex:1 1 auto}
.nav-principale ul{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-principale a{display:block;padding:.5rem .7rem;min-height:2.75rem;border-radius:.35rem;color:var(--testata-testo,var(--testo));text-decoration:none;font-weight:500}
.nav-principale a:hover{text-decoration:underline}
.nav-principale a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.35em}
.testata .menu-apri{display:none}
@media (max-width:47.5em){
  .testata .menu-apri{display:inline-flex}
  .marchio{margin-right:auto}
  .nav-principale{display:none;width:100%;order:5}
  .nav-principale.aperto{display:block}
  .nav-principale ul{flex-direction:column}
}
/* il menu di servizio: striscia sottile sopra la testata, voci a sinistra */
.nav-servizio{background:var(--fondo,var(--superficie));border-bottom:1px solid var(--testata-linea,var(--linea));font-size:.85rem}
.nav-servizio ul{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 .25rem;list-style:none;margin-block:0;padding-top:0;padding-bottom:0}
.nav-servizio a{display:block;padding:.35rem .6rem;min-height:1.75rem;color:var(--testo-2);text-decoration:none}
.nav-servizio li:first-child a{padding-left:0}
.nav-servizio a:hover{color:var(--testo);text-decoration:underline}
.nav-servizio a[aria-current="page"]{color:var(--testo);font-weight:700;text-decoration:underline}
/* le briciole di navigazione (pj_base/_briciole.html) */
.briciole{margin:0 0 .8rem;font-size:.9rem;color:var(--testo-2)}
.briciole ol{display:flex;flex-wrap:wrap;gap:.1rem .35rem;list-style:none;margin:0;padding:0}
.briciole li+li::before{content:"›";margin-right:.35rem;color:var(--testo-2)}
.briciole a{color:var(--testo-2)}
.briciole [aria-current="page"]{color:var(--testo);font-weight:600}
/* il carrello (pj_negozio/_icona_carrello.html): ultima icona tonda, con il bollino del numero come la campanella */
.icona-carrello .carrello-numero{position:absolute;top:0;right:0;min-width:clamp(16px,1rem,20px);height:clamp(16px,1rem,20px);padding:0 .15rem;
  border-radius:999px;background:var(--pulsante,var(--accento));color:var(--pulsante-testo,#fff);font-size:clamp(10px,.65rem,12px);font-weight:700;
  line-height:clamp(16px,1rem,20px);text-align:center}
/* gli strumenti sulla pagina per chi gestisce (pj_base/_azioni_pagina.html) */
.azioni-pagina{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 1rem;padding:.4rem .6rem;border:1px dashed var(--linea);border-radius:.4rem;background:var(--superficie)}
.azioni-pagina .etichetta{font-size:.8rem;color:var(--testo-2);margin-right:.3rem}
.azioni-pagina form{display:inline;margin:0}
/* i tasti a destra (0.40): «Aa», «Entra», campanella, carrello e menu utente hanno la stessa famiglia di forme: tondi da 36–48 px (il tasto «Aa» di
   pj-aspetto è più grande di suo: qui si porta alla misura delle icone), «Entra» e il menu utente a pillola, bordo sottile, evidenza al passaggio */
.testata .aspetto{display:inline-flex;align-items:center}
.testata .asp-apri{width:clamp(36px,2.25rem,48px);height:clamp(36px,2.25rem,48px);border:1px solid var(--testata-linea,var(--linea));background:transparent;
  color:var(--testata-testo,var(--testo));font-size:clamp(14px,.95rem,18px);transition:border-color .2s ease}
.testata .asp-apri:hover,.testata .asp-apri[aria-expanded="true"]{border-color:var(--accento);background:var(--testata-evidenza,var(--campo))}
.testata .entra{display:inline-flex;align-items:center;min-height:2.25rem;border-radius:999px;border:1px solid var(--testata-linea,var(--linea));
  background:transparent;color:var(--testata-testo,var(--testo));transition:border-color .2s ease}
.testata .entra:hover{border-color:var(--accento);background:var(--testata-evidenza,var(--campo))}
.testata .menu-utente{margin-left:0}
.testata .menu-utente-apri.pillola{border:1px solid var(--testata-linea,var(--linea));background:transparent;color:var(--testata-testo,var(--testo));transition:border-color .2s ease}
.testata .menu-utente-apri.pillola:hover,.testata .menu-utente-apri.pillola[aria-expanded="true"]{border-color:var(--accento);background:var(--testata-evidenza,var(--campo))}
.testata .pillola .menu-utente-ruolo{color:var(--testata-testo-2,var(--testo-2))}
/* il pannello del menu utente: angoli larghi, bordo, ombra, largo come le voci */
.testata .menu-utente-voci{top:calc(100% + .5rem);width:min(22rem,calc(100vw - 2rem));max-height:calc(100vh - 6rem);max-height:calc(100dvh - 6rem);overflow:auto;
  padding:.8rem 1rem .6rem;background:var(--superficie);border:1px solid var(--linea);border-radius:.75rem;box-shadow:0 .75rem 2rem var(--ombra,#0003)}
.testata .menu-utente-chi{margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:1px solid var(--linea)}
.testata .menu-utente-voci ul{border-top:0;padding:.1rem 0}
.testata .menu-utente-voci ul+ul{border-top:1px solid var(--linea);margin-top:.3rem;padding-top:.4rem}
@media (max-width:40em){.testata .menu-utente-voci{width:auto;top:auto;max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem)}}
@media (prefers-reduced-motion:reduce){.testata .asp-apri,.testata .entra,.testata .menu-utente-apri.pillola{transition:none}}