/* ═══════════════════════════════════════════════════════════════════════════
   IL CARRELLO CHE STA IN UN ANGOLO
   ═══════════════════════════════════════════════════════════════════════════
   Un pallino in basso a destra, sopra tutto il resto. Chiuso è un cerchio col
   numero; toccandolo si allunga verso sinistra e dice quanto fa, quante cose e
   dove si va. Non copre mai il contenuto: sta in un angolo, e da vuoto non
   esiste affatto.

   Sopra la barra di casa dei telefoni con la tacca: `safe-area-inset-bottom`.

   ═══ SI CHIAMA `cesto` E NON `cr` ═══════════════════════════════════════════
   `.cr` nel sito c'è già: è una cifra della landing, con bordo e imbottitura.
   Chiamandosi così, il carrello se li prendeva addosso — e attorno al pallino
   compariva una cornice che qui non era scritta da nessuna parte. Un pezzo che
   sta su OGNI pagina non può prendersi un nome di due lettere. */

/* ═══ UNA MISURA SOLA ══════════════════════════════════════════════════════
   Il pallino è grande quanto è ALTO il bottone «Apri il carrello» — la stessa
   misura, non una che gli somiglia. Il bianco intorno al bottone ha la sua
   imbottitura, quindi la pastiglia che si apre resta un filo più alta del
   pallino: è giusto così, il pallino è il bottone, non il suo contenitore.

   La misura sta scritta una volta sola, qui: cambiandola si muovono insieme. */
/* ═══ LA SCATOLA È GRANDE QUANTO IL PALLINO ═════════════════════════════════
   Non quanto il pallino più la pastiglia. Prima erano in fila dentro la stessa
   scatola: appoggiata all'angolo destro non si vedeva — cresceva verso sinistra
   — ma dopo un trasloco la scatola è tenuta per il fianco SINISTRO, e aprendo
   la pastiglia il pallino scappava di due dita verso destra. Uno lo posa in un
   punto, lo tocca, e quello si sposta da solo.

   La pastiglia adesso è appoggiata FUORI, agganciata al fianco del pallino: la
   scatola resta un cerchio di 34 pixel, quello che si posa è quello che si
   misura, e aprire non muove niente. */
.cesto{ --alto:34px;

  position:fixed; z-index:1150;
  right:.9rem; bottom:calc(.9rem + env(safe-area-inset-bottom));
  width:var(--alto); height:var(--alto); }
.cesto[hidden]{ display:none; }

/* ── IL PALLINO ──────────────────────────────────────────────────────────── */
.cesto-pallino{ position:relative; flex:none;
  width:var(--alto); height:var(--alto);
  border:0; border-radius:50%; box-shadow:none;
  background:linear-gradient(160deg, var(--gold, #ffd98a), var(--coral, #ef8f3a));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  color:#3a2205;
  /* Il dito che parte da qui lo sta spostando, non sta scorrendo la pagina:
     senza questo, su un telefono il trascinamento non comincia nemmeno —
     il browser si prende il gesto e scorre. */
  touch-action:none; }

.cesto-pallino:active{ transform:scale(.94); }

.cesto-segno{ width:19px; height:19px; }

/* Il numero: piccolo, staccato, e c'è sempre — è il motivo per cui uno guarda
   il pallino invece di ignorarlo. */
.cesto-n{ position:absolute; top:-4px; right:-4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:#1b2733; color:#fff; font-size:.64rem; font-weight:800;
  box-shadow:0 0 0 2px rgba(255,255,255,.9); }

/* ── QUELLO CHE SI APRE ──────────────────────────────────────────────────── */
/* Chiuso non è nascosto con `display:none`: è largo zero. Così l'apertura è un
   movimento, e non una cosa che compare di colpo accanto al pollice. */
/* Appesa al fianco del pallino, fuori dalla scatola: `right:100%` vuol dire
   «il tuo bordo destro sta dove comincia il pallino», quindi crescendo va verso
   sinistra senza spostarlo di un pixel. */
.cesto-dentro{ position:absolute; z-index:-1;
  top:50%; transform:translateY(-50%);
  right:calc(100% + .45rem);
  overflow:hidden; max-width:0; opacity:0;
  display:flex; align-items:center; gap:.6rem;
  padding:0; border-radius:999px; background:#fff;
  box-shadow:0 6px 18px -8px rgba(16,32,48,.6);
  transition:max-width .22s ease, opacity .18s ease, padding .22s ease; }

.cesto.cesto-su .cesto-dentro{ max-width:74vw; opacity:1;
  padding:.3rem .3rem .3rem .8rem; }

.cesto-conti{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.cesto-conti b{ font-size:.92rem; color:#161f27; }
.cesto-conti span{ font-size:.68rem; font-weight:700; color:#8a94a0; }

/* Il bottone dà la misura a tutto il resto: è alto `--alto`, e il pallino è
   grande uguale. */
.cesto-vai{ flex:none; height:var(--alto); padding:0 .85rem;
  display:inline-flex; align-items:center;
  border-radius:999px; background:#1b2733; color:#fff; text-decoration:none;
  font-size:.78rem; font-weight:800; white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   NON DEVE DARE FASTIDIO — E CI VA CAMMINANDO
   ═══════════════════════════════════════════════════════════════════════════
   Nel suo angolo ci può stare un bottone di una pagina che del carrello non sa
   niente. Il copione calcola quanto deve salire — un gradino, due, fino a
   quattro — e ce lo manda scivolando. Di lato non va mai: sta sempre a destra,
   perché un pallino che cambia lato è un pallino da cercare, e la mano lo va a
   prendere dove l'ha lasciato l'ultima volta.

   Il movimento non è un vezzo: è quello che dice all'occhio che è LO STESSO
   pallino che si è spostato. Saltando da un angolo all'altro sembrerebbe un
   guasto, o un secondo pallino comparso da un'altra parte. La curva parte piano
   e arriva morbida, come una cosa che si toglie di mezzo per educazione — non
   come una cosa che scappa. */
.cesto-cammina{ transition:top .34s cubic-bezier(.22,.75,.3,1); }

/* ═══ SI PRENDE E SI SPOSTA ═════════════════════════════════════════════════
   Mentre è in mano non si anima niente: un pallino che insegue il dito con due
   decimi di ritardo sembra scivoloso, e chi lo sta posando non capisce dove
   andrà a finire. Sotto il dito è un filo più grande — è il modo in cui una
   cosa dice «ti sto seguendo». */
/* Sotto il dito non si anima niente: inseguire con due decimi di ritardo fa
   sembrare il pallino scivoloso, e chi lo sta posando non capisce dove andrà a
   finire. La camminata è per quando si muove DA SOLO. */
.cesto-in-mano{ transition:none; cursor:grabbing; }
.cesto-in-mano .cesto-pallino{ transform:scale(1.12);
  box-shadow:0 10px 22px -10px rgba(16,32,48,.7); }

@media (prefers-reduced-motion:reduce){
  .cesto-dentro, .cesto-cammina{ transition:none; }
}