/* ===============================================================
   IL CARRELLO.

   Vale per i due mondi — la libreria retro e la pagina blu delle
   lattine — quindi qui dentro i colori sono scritti per esteso e non
   presi dalle variabili: i due fogli non hanno le stesse.

   Tre pezzi:
   1. il bottone sempre in vista, in basso a destra;
   2. la finestra del carrello, che quando si apre diventa un
      terminale verde su nero: si esce dal 1998 e si entra nel
      sistema di pagamento;
   3. l'avviso della soglia, che e' un dialogo di sistema con un
      rettiliano affacciato sopra. La riga gialla di prima si
      leggeva come una nota a pie' di pagina, cioe' non si leggeva.

   Regola dei due font rispettata: Silkscreen solo sulla cornice,
   Archivo su tutto cio' che si legge.
   =============================================================== */

/* ---------- 1. il bottone sempre in vista ---------- */
.sacca-fab{
  position:fixed;right:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,26px);z-index:65;
  display:flex;align-items:center;gap:9px;padding:9px 13px 9px 10px;cursor:pointer;
  background:#C0C0C0;color:#0A0A0A;font-family:inherit;
  border:2px solid;border-color:#FFFFFF #0A0A0A #0A0A0A #FFFFFF;
  box-shadow:inset 1px 1px 0 #EAEAEA, inset -1px -1px 0 #808080, 0 10px 26px rgba(0,0,0,.5);
  transition:transform .18s ease;
}
.sacca-fab:active{border-color:#0A0A0A #FFFFFF #FFFFFF #0A0A0A;box-shadow:none;transform:translateY(1px)}
.sacca-fab:hover{transform:translateY(-2px)}
.sacca-fab svg{width:34px;height:30px;display:block;flex:none}
.sacca-fab img{width:46px;height:auto;display:block;flex:none}  /* per quando arriva il disegno */
.sacca-fab .conto{
  min-width:23px;padding:3px 6px;background:#06256B;color:#fff;
  font-family:'Silkscreen','Archivo',monospace;font-size:11px;line-height:1.2;text-align:center;
  font-variant-numeric:tabular-nums;
}
.sacca-fab.pieno .conto{background:#8C1C0E}
.sacca-fab[hidden]{display:none}
/* quando il carrello e' aperto il bottone sparisce: ha gia' fatto il suo */
.sacca-aperta .sacca-fab{display:none}
@media (prefers-reduced-motion:reduce){ .sacca-fab{transition:none} }

/* ---------- 2. il terminale ---------- */
#carrello-overlay{background:rgba(0,7,3,.88)}
#carrello-overlay .pioggia{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
#carrello-overlay .win{
  position:relative;z-index:1;background:#04140A;
  border-color:#13963F #010804 #010804 #13963F;
  box-shadow:inset 1px 1px 0 #0C2E1A, inset -1px -1px 0 #010804,
             0 0 0 1px rgba(15,163,68,.18), 0 0 60px rgba(15,163,68,.22);
}
/* Il mondo blu ha un'altra cornice (.cart, senza barra del titolo): stesso
   terminale, montato sulla sua struttura. Il pagamento e' la stessa macchina
   da tutte e due le parti del sito, e deve sembrarlo. */
#carrello-overlay .cart{
  position:relative;z-index:1;background:#04140A;border:2px solid;
  border-color:#13963F #010804 #010804 #13963F;border-radius:2px;
  box-shadow:0 0 0 1px rgba(15,163,68,.18), 0 0 60px rgba(15,163,68,.22);
}
#carrello-overlay .cart h2{
  margin:-4px -4px 18px;padding:9px 12px;background:linear-gradient(90deg,#063D1E,#0E8A3C);
  color:#A8E8C0;text-shadow:0 0 8px rgba(15,163,68,.8);
}
#carrello-overlay .cart h2 .chiudi{
  background:#04140A;color:#A8E8C0;border:1px solid #13963F;border-radius:2px;
}
#carrello-overlay .cart h2 .chiudi:hover{border-color:#3FB873;background:#0A3A1E}
#carrello-overlay .cart .cart-rows,
#carrello-overlay .cart .totals{padding:0;background:none}
#carrello-overlay .cart .totals dl{padding:12px 14px}

/* le righe del tubo, anche qui: e' sempre uno schermo */
#carrello-overlay .win::after,
#carrello-overlay .cart::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px);
}
#carrello-overlay .titlebar{background:linear-gradient(90deg,#063D1E,#0E8A3C);color:#A8E8C0}
#carrello-overlay .titlebar h2{text-shadow:0 0 8px rgba(15,163,68,.8)}
#carrello-overlay .sq{background:#04140A;color:#3FB873;border-color:#13963F #010804 #010804 #13963F}
#carrello-overlay .body-area{
  background:#04140A;border-color:#010804 #13963F #13963F #010804;
  box-shadow:inset 1px 1px 0 #000, inset -1px -1px 0 #0C2E1A;
}
#carrello-overlay .cart-rows,
#carrello-overlay .totals{background:#020C06}
#carrello-overlay .empty-note{color:#1E8C4A;text-shadow:0 0 10px rgba(15,163,68,.45)}
#carrello-overlay .row{
  background:#06190E;border-color:#010804 #13963F #13963F #010804;
  box-shadow:inset 1px 1px 0 #000, inset -1px -1px 0 #0C2E1A;
}
/* Le copertine e i pack NON si tingono di verde: un prodotto nel carrello
   deve avere lo stesso colore che ha nel catalogo, altrimenti chi compra non
   riconosce quello che ha scelto. Il terminale e' la cornice, non un filtro
   sulla merce. */
#carrello-overlay .row img{filter:none}
#carrello-overlay .ttl{color:#5FC98A;text-shadow:0 0 9px rgba(15,163,68,.35)}
#carrello-overlay .meta{color:#2A8A55}
#carrello-overlay .qty button{background:#06190E;color:#5FC98A;border-color:#13963F #010804 #010804 #13963F}
#carrello-overlay .qty button:active{border-color:#010804 #13963F #13963F #010804}
#carrello-overlay .qty output{background:#010804;color:#18B04E;border-color:#0C2E1A #13963F #13963F #0C2E1A}
#carrello-overlay .line{color:#18B04E;text-shadow:0 0 10px rgba(15,163,68,.5)}
#carrello-overlay .totals dl{background:#06190E}
#carrello-overlay .totals dt{color:#2F9E5E}
#carrello-overlay .totals dd{color:#5FC98A}
#carrello-overlay .totals .big dt,
#carrello-overlay .totals .big dd{border-top-color:#1A5C33;color:#18B04E;text-shadow:0 0 12px rgba(15,163,68,.55)}
#carrello-overlay .totals dt.hint,
#carrello-overlay .totals dd.hint{color:#25683F}
#carrello-overlay .inv{
  background:#06190E;border-color:#010804 #13963F #13963F #010804;
  box-shadow:inset 1px 1px 0 #000, inset -1px -1px 0 #0C2E1A;
}
#carrello-overlay .inv legend{color:#3FB873}
#carrello-overlay .check span{color:#5FC98A}
#carrello-overlay .check input,
#carrello-overlay .inv input[type="checkbox"]{accent-color:#0E8A3C}
#carrello-overlay .inv .law{color:#2A8A55}
#carrello-overlay .fields span{color:#2F9E5E}
#carrello-overlay .fields input{
  background:#010804;color:#18B04E;caret-color:#18B04E;
  border-color:#0C2E1A #13963F #13963F #0C2E1A;
}
#carrello-overlay .fields input:focus-visible{outline:2px solid #18B04E;outline-offset:1px}
#carrello-overlay .checkout .btn{
  background:#0A3A1E;color:#5FC98A;border-color:#13963F #010804 #010804 #13963F;
  box-shadow:inset 1px 1px 0 #0C5A2B, inset -1px -1px 0 #010804, 0 0 22px rgba(15,163,68,.3);
  text-shadow:0 0 9px rgba(15,163,68,.6);
}
#carrello-overlay .checkout .btn.primary{outline-color:#18B04E}
#carrello-overlay .checkout .btn:active{border-color:#010804 #13963F #13963F #010804;box-shadow:none}
#carrello-overlay .checkout .btn[disabled]{color:#2A6B45;text-shadow:none;box-shadow:none}
#carrello-overlay .checkout .safe{color:#2A8A55}
#carrello-overlay .statusbar{background:#04140A}
#carrello-overlay .statusbar .cell{color:#2F9E5E;border-color:#0C2E1A #13963F #13963F #0C2E1A}

/* ---------- 3. l'avviso della soglia ---------- */
/* Niente nota gialla: e' un dialogo di sistema, e sopra c'e' qualcuno
   che ci tiene. `overflow:visible` e il margine in alto servono al
   rettiliano, che sborda dalla cornice. */
#carrello-overlay .nudge,
.nudge{
  /* il margine in alto e' la stanza del rettiliano: se e' piu' basso di
     lui, gli finisce addosso la riga del totale */
  position:relative;margin:clamp(92px,17vw,124px) 0 0;padding:0;
  background:none;border:0;color:inherit;overflow:visible;
}
.nudge[hidden]{display:none}
.nudge::before{
  content:'';position:absolute;left:6px;bottom:100%;z-index:2;
  width:clamp(64px,13%,92px);aspect-ratio:1/1.233;margin-bottom:-5px;
  /* la figura e' alta il doppio della finestrella: si vede la testa e la
     spalla, il resto lo taglia il bordo alto del dialogo. Una retta. */
  /* LA TESTA INTERA, chiusa in basso dal bordo del dialogo. Qui, a differenza
     della home, la creatura non deve combaciare con niente a sinistra: sbuca
     da sopra una finestra, quindi si mostra tutta la faccia e non una fetta.
     Misure sull'alpha del file: la faccia sta fra il 43,3% e il 99,5% della
     larghezza e fra lo 0 e il 34% dell'altezza. Con l'immagine larga 172,4%
     ancorata a destra si vede da x=42%, e l'altezza 1,233 volte la larghezza
     la ferma al 34%, cioe' al mento. L'arto resta fuori: sta a sinistra del
     42% a tutte le altezze che si vedono. */
  background:url('img/lore/rettiliano-giallo.png') no-repeat right top / 172.4% auto;
  transform-origin:bottom center;
  animation:sbircia 4.2s ease-in-out infinite;
}
@keyframes sbircia{
  0%,74%,100%{transform:rotate(-5deg) translateY(0)}
  82%        {transform:rotate(-2deg) translateY(-6px)}
  92%        {transform:rotate(-7deg) translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){ .nudge::before{animation:none;transform:rotate(-5deg)} }
.nudge .bolla{
  display:block;position:relative;z-index:1;background:#C0C0C0;padding:3px;
  border:2px solid;border-color:#FFFFFF #0A0A0A #0A0A0A #FFFFFF;
  box-shadow:inset 1px 1px 0 #EAEAEA, inset -1px -1px 0 #808080, 0 12px 30px rgba(0,0,0,.6);
}
.nudge .cap{
  display:block;padding:4px 8px;background:linear-gradient(90deg,#8C1C0E,#D2552E);color:#fff;
  font-family:'Silkscreen','Archivo',monospace;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.nudge .testo{
  display:flex;gap:11px;align-items:center;padding:13px 14px;
  background:#C0C0C0;color:#141414;font-size:13.5px;line-height:1.4;
}
.nudge .testo::before{
  content:'!';flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:#C62E12;color:#fff;font-family:'Silkscreen','Archivo',monospace;font-size:15px;
  animation:batte 1.1s steps(1,end) infinite;
}
@keyframes batte{50%{background:#F7B733;color:#3A1A06}}
@media (prefers-reduced-motion:reduce){ .nudge .testo::before{animation:none} }
/* I nodi di testo sciolti dentro un contenitore flex diventano ognuno un
   elemento a se', con il `gap` in mezzo: la frase si spezzava in colonne.
   Una sola `.frase` e il flex torna ad avere due figli, il bollino e il testo. */
.nudge .testo .frase{flex:1 1 auto;min-width:0}
.nudge b{font-weight:800;font-variant-numeric:tabular-nums}

/* consenso al download immediato degli ebook (26/10/2026): compare solo
   quando nel carrello c'e' un ebook, e finche' non e' spuntato il
   pagamento resta spento */
#carrello-overlay .check.recesso{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;
  font-size:12px;line-height:1.5;cursor:pointer}
#carrello-overlay .check.recesso input{margin:2px 0 0;flex:none;width:15px;height:15px}