/* =====================================================================
   IL CARRELLINO IN ALTO A DESTRA

   Quello che c'era: un elenco di righe "2X Nome del prodotto" col
   prezzo di fianco, che si apriva al passaggio del mouse, senza modo di
   cambiare la quantita' e con un pulsante "Check Out" che portava alla
   pagina del carrello.

   Quello che c'e' ora: una tendina con una scheda per articolo -
   figura, nome su due righe al massimo, le scelte del cliente in
   chiaro, il piu' e il meno, la crocetta - e in fondo i totali con due
   pulsanti distinti, il pagamento e la pagina del carrello.

   ⚠️ SI APRE CON UN CLIC, non piu' al passaggio del mouse. Il mouse sul
   telefono non esiste: la vecchia tendina li' non si poteva vedere.
   Sotto i 640 pixel diventa un foglio che sale dal basso.

   ⚠️ NIENTE CARATTERI DA SCARICARE. Il disegno di partenza chiedeva due
   famiglie da Google; qui si usa quella del negozio, perche' un
   carattere in piu' e' una richiesta in piu' su OGNI pagina, e questa
   tendina sta in tutte.

   Tutte le regole sono figlie di .sd-cc: fuori di li' non cambia
   niente.
   ===================================================================== */

.sd-cc {
    --sd-arancio: #f5a623;
    --sd-arancio-scuro: #d98200;
    --sd-rosso: #c7302b;
    --sd-inchiostro: #1f2328;
    --sd-grigio: #6e7479;
    --sd-linea: #e4e6e8;
    --sd-fondo: #f7f8f9;

    position: relative;
}

/* --- prima di tutto: le difese contro il tema ------------------------ */

/*
  ⚠️ IL TEMA IMBOTTISCE E FA GALLEGGIARE OGNI COLLEGAMENTO DI QUESTO
  BLOCCO, e non e' un dettaglio di stile: la prima prova aveva il piu' e
  il meno larghi 45 pixel invece di 26, con 45 pixel di imbottitura a
  sinistra - cioe' il segno spinto fuori dal riquadro. Le regole sono

      #_desktop_cart .header a           { padding-left: 45px }
      #_desktop_cart .header a,
      #_desktop_cart .header a *         { float: left }
      #header .remove-from-cart          { width: 18px; height: 18px }

  e cominciano tutte con un id: pesano piu' di qualunque regola nostra
  scritta in modo normale. Erano fatte per il vecchio elenco, dove ogni
  riga era un collegamento con l'icona a sinistra. Qui si annullano una
  per una, e solo DENTRO la tendina: il pulsante in alto continua a
  galleggiare come vuole il tema, altrimenti si sposterebbe la barra.
*/
.sd-cc .sd-cc-tendina a,
.sd-cc .sd-cc-tendina a * {
    float: none !important;
}

.sd-cc .sd-cc-tendina a {
    padding-left: 0 !important;
}

/*
  ⚠️ E IL CESTINO ERA BIANCO SU BIANCO - segnalato come "manca il
  cestino", ed era proprio invisibile. La stessa regola del tema che
  dipinge di bianco il pulsante in alto (dove va bene, la barra e' nera)
  colpisce anche i disegni dentro la tendina, perche' dice `a *`: il
  contorno del cestino veniva bianco sulla scheda bianca. Il colore del
  collegamento glielo passa il contenitore; qui si dice al disegno di
  prenderlo da lui invece che dal tema.

  ⚠️ E SERVE ANCHE `svg *`: il primo tentativo vestiva solo il disegno,
  e il cestino restava invisibile lo stesso. Il contorno lo tracciano i
  path, che sono figli - la regola del tema dice `a *` e prende anche
  loro - e il `currentColor` di un path guarda il colore del PATH, non
  quello del disegno. Misurato: svg grigio, path bianchi.
*/
.sd-cc .sd-cc-tendina a svg,
.sd-cc .sd-cc-tendina a svg * {
    color: inherit !important;
}

/* --- il pulsante in alto -------------------------------------------- */

/*
  ⚠️ IL PULSANTE NON ERA IN LINEA CON LE VOCI DEL MENU: stava NOVE pixel
  piu' in basso del centro della barra nera, e sul telefono sei.

  Il tema appende il blocco sotto al suo contenitore

      #_desktop_cart { position: absolute; top: 100%; margin-top: 12px }
      @media (max-width: 991px) { #_desktop_cart { margin-top: 8px } }

  e quei due numeri erano misurati sulla pastiglia di prima, alta una
  riga. La nostra e' alta 46 pixel (46 sul telefono 44), quindi scende
  piu' in basso e il margine va accorciato di altrettanto. I due
  scaglioni sono i SUOI, non inventati da noi: se un domani cambia il
  suo, si ritrova qui accanto.
*/
#_desktop_cart {
    margin-top: 1px !important;
}

@media (max-width: 991px) {

    #_desktop_cart {
        margin-top: 2px !important;
    }
}

/*
  ⚠️ !important quasi ovunque qui sopra: la barra nera del tema veste
  questo collegamento con regole a tre selettori (#header .header-nav
  .blockcart a), che vincono su qualunque regola nostra scritta in modo
  normale.
*/
/* ⚠️ Lo spazio fra icona e scritta e' 18 e non 11 come nel disegno: il
   pallino col numero sporge di 8 pixel a destra dell'icona, e con 11 di
   spazio finiva SOPRA la C di CARRELLO. Misurato: cinque pixel di
   sovrapposizione, e con 18 ne restavano tre di respiro - troppo pochi
   per non sembrare un errore. */
.sd-cc .sd-cc-bottone {
    display: flex !important;
    align-items: center;
    gap: 26px;
    padding: 9px 12px !important;
    border-radius: 10px;
    color: inherit !important;
    text-decoration: none !important;
    transition: background-color .15s;
}

.sd-cc .sd-cc-bottone:hover,
.sd-cc.sd-cc-aperto .sd-cc-bottone {
    background: rgba(255, 255, 255, .12);
}

.sd-cc .sd-cc-icona {
    position: relative;
    flex: none;
    line-height: 0;
}

.sd-cc .sd-cc-icona svg {
    width: 26px;
    height: 26px;
}

/* Il pallino col numero. Il bordo e' del colore della barra: serve a
   staccarlo dall'icona quando ci si appoggia sopra.

   ⚠️ LA CIFRA DENTRO IL CERCHIETTO NON ERA CENTRATA: due pixel e mezzo
   piu' in basso e quattro piu' a destra (misurati sul glifo, non sulla
   casella). Il tema da' a questo span line-height: 20px in un cerchio
   da 19, e l'imbottitura laterale spostava il numero. Ora l'interlinea
   e' quella del carattere, l'imbottitura non c'e' e il centraggio lo fa
   il flex - che sul testo funziona meglio della griglia. */
.sd-cc .sd-cc-pallino {
    position: absolute !important;
    top: -6px;
    right: -6px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center;
    border: 2px solid #111;
    border-radius: 999px;
    background: var(--sd-arancio) !important;
    color: #111 !important;
    font-size: 11px !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sd-cc .sd-cc-et {
    text-align: left;
    line-height: 1.25;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.sd-cc .sd-cc-et .cart-products-label {
    display: block;
    text-transform: uppercase;
}

.sd-cc .sd-cc-riassunto {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    opacity: .72;
}

/* --- la tendina ------------------------------------------------------ */

.sd-cc .sd-cc-tendina {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    width: 392px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 14px;
    background: #fff;
    color: var(--sd-inchiostro);
    text-align: left;
    box-shadow: 0 18px 50px rgba(20, 23, 26, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s cubic-bezier(.32, .72, 0, 1),
                transform .2s cubic-bezier(.32, .72, 0, 1),
                visibility .2s;
}

.sd-cc.sd-cc-aperto .sd-cc-tendina {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* La punta verso il pulsante. */
.sd-cc .sd-cc-tendina::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 34px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--sd-linea);
    border-left: 1px solid var(--sd-linea);
    background: #fff;
    transform: rotate(45deg);
}

/* Stessa storia dell'intestazione: 78 pixel per una riga di testo. */
.sd-cc .sd-cc-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    line-height: 1.3 !important;
    padding: 13px 17px 11px;
    border-bottom: 1px solid var(--sd-linea);
}

.sd-cc .sd-cc-testa b {
    color: var(--sd-inchiostro);
    font-size: 15.5px;
    font-weight: 700;
}

.sd-cc .sd-cc-testa span {
    color: var(--sd-grigio);
    font-size: 12.5px;
}

/* --- l'elenco -------------------------------------------------------- */

/*
  L'altezza massima e' quella del disegno; oltre, si scorre. Su un
  carrello da quaranta righe - capita, qui si vendono adesivi a pezzi -
  senza questo la tendina uscirebbe dallo schermo.
*/
/*
  ⚠️ IL BIANCO IN FONDO ALL'ELENCO SI FA COL MARGINE, non solo con
  l'imbottitura, e la differenza conta.

  L'imbottitura sta DENTRO l'area che scorre: si vede solo quando si e'
  arrivati in fondo alla lista. Nel mezzo dello scorrimento l'ultima riga
  visibile resta tagliata di netto contro la fascia grigia dei totali -
  ed e' proprio li' che il negoziante l'ha vista mancare, due volte.

  Il margine invece sta FUORI: e' una striscia bianca fissa fra l'elenco
  e i totali, che c'e' sempre, a qualunque punto dello scorrimento.
  Si tengono tutte e due: dieci pixel sempre, sei in piu' alla fine.
*/
.sd-cc .sd-cc-lista {
    max-height: 322px;
    margin: 0 0 10px !important;
    padding: 0 0 6px !important;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.sd-cc .sd-cc-riga {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 !important;
    padding: 13px 17px !important;
    border-bottom: 1px solid var(--sd-linea);
    list-style: none;
}

.sd-cc .sd-cc-riga:last-child {
    border-bottom: 0;
}

.sd-cc .sd-cc-mini {
    display: grid;
    place-items: center;
    flex: none;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 9px;
    background: var(--sd-fondo);
}

.sd-cc .sd-cc-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sd-cc .sd-cc-mid {
    flex: 1;
    min-width: 0;
}

/* Il nome si ferma a due righe: sono nomi lunghissimi - marca, modello,
   anno e tipo di adesivo - e per intero riempirebbero la tendina. */
.sd-cc .sd-cc-nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 3px !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.35;
}

.sd-cc .sd-cc-nome a {
    color: var(--sd-inchiostro) !important;
    text-decoration: none !important;
}

.sd-cc .sd-cc-nome a:hover {
    color: var(--sd-arancio-scuro) !important;
}

.sd-cc .sd-cc-dett {
    overflow: hidden;
    margin: 0 0 7px !important;
    color: var(--sd-grigio);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sd-cc .sd-cc-linea-q {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sd-cc .sd-cc-qta {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 7px;
}

.sd-cc .sd-cc-passo {
    display: grid !important;
    line-height: 1 !important;
    place-items: center;
    width: 26px !important;
    height: 27px !important;
    padding: 0 !important;
    color: var(--sd-grigio) !important;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color .12s, color .12s;
}

.sd-cc .sd-cc-passo:hover {
    background: var(--sd-fondo);
    color: var(--sd-inchiostro) !important;
}

/* ⚠️ Il tema da' a questi span line-height: 50px - roba della vecchia
   riga alta - e in una casella da 27 la cifra finiva mezza fuori, sotto
   il bordo. Misurato: il glifo cadeva 12 pixel piu' in basso della sua
   casella. */
.sd-cc .sd-cc-numero {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 27px;
    line-height: 1 !important;
    border-right: 1px solid var(--sd-linea);
    border-left: 1px solid var(--sd-linea);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sd-cc .sd-cc-pz {
    margin-left: auto;
    color: var(--sd-arancio-scuro) !important;
    font-size: 14px !important;
    font-weight: 700;
    white-space: nowrap;
}

/* Il cestino: grigio finche' non lo si guarda, rosso quando ci si passa
   sopra. Togliere un articolo non deve essere un gesto distratto.
   E' lo stesso disegno del riepilogo nel checkout: la stessa azione si
   fa con lo stesso segno in tutte e due le pagine. */
/* ⚠️ Il tema la mette in posizione ASSOLUTA a 70 pixel dall'alto, con
   un fondo grigio: era la crocetta del vecchio elenco, agganciata
   all'angolo della riga. Qui e' una casella come le altre. */
.sd-cc .sd-cc-x {
    display: grid !important;
    place-items: center;
    position: static !important;
    background: none !important;
    line-height: 1 !important;
    flex: none;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    /* Il cestino si allinea alla PRIMA RIGA DEL NOME, non al bordo alto
       della scheda: stava undici pixel piu' su, e sembrava appeso per
       conto suo invece che appartenere all'articolo. */
    margin-top: 9px;
    border-radius: 7px;
    color: #b4b8bc !important;
    font-size: 17px;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

/*
  ⚠️ QUI SERVE L'ID, ed e' l'unico posto in tutto il foglio.

  La regola del tema e'

      #header .remove-from-cart { position: absolute !important; top: 50% }

  ed e' importante anche lei. Fra due dichiarazioni entrambe importanti
  non vince l'ultima scritta: vince quella col selettore piu' pesante, e
  un id pesa piu' di qualunque numero di classi. Senza questa riga la
  crocetta continuava a staccarsi dalla riga e ad andarsi a mettere a
  meta' altezza - misurato: 44 pixel sotto il bordo, invece che in cima.
*/
#_desktop_cart .sd-cc .sd-cc-x {
    position: static !important;
    top: auto !important;
}

.sd-cc .sd-cc-x svg {
    width: 15px;
    height: 15px;
}

.sd-cc .sd-cc-x:hover {
    background: #fdeceb !important;
    color: var(--sd-rosso) !important;
}

/* --- i totali e i due pulsanti --------------------------------------- */

/*
  ⚠️ LE RIGHE DEI TOTALI ERANO ALTE 58 PIXEL L'UNA, e non per colpa di
  quello che c'e' scritto qui: il tema da' a questi elementi
  un'interlinea da mezzo centinaio di pixel, la stessa che gia' ci aveva
  spostato la cifra dentro il pallino del carrello. Quattro righe cosi'
  facevano un piede da 347 pixel su uno schermo da 716 - piu' della
  meta' del foglio - e all'elenco dei prodotti ne restavano 210, cioe'
  UNA riga e mezza. Segnalato: con piu' di un articolo l'elenco resta
  tagliato e l'effetto e' brutto.

  Con l'interlinea del carattere ogni riga scende a poco piu' di venti
  pixel, e quello che si guadagna va tutto all'elenco.
*/
.sd-cc .sd-cc-piede {
    padding: 12px 17px 14px;
    border-top: 1px solid var(--sd-linea);
    background: var(--sd-fondo);
}

.sd-cc .sd-cc-rr {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: var(--sd-grigio);
    font-size: 13px;
    line-height: 1.35 !important;
}

.sd-cc .sd-cc-rr b {
    color: var(--sd-inchiostro);
    font-weight: 600;
}

.sd-cc .sd-cc-iva {
    color: #9aa0a6;
    font-size: 12px;
}

.sd-cc .sd-cc-sconto b {
    color: var(--sd-rosso);
}

.sd-cc .sd-cc-totale {
    align-items: baseline;
    margin-top: 7px;
    padding-top: 9px;
    border-top: 1px solid var(--sd-linea);
    color: var(--sd-inchiostro);
    font-size: 14.5px;
}

.sd-cc .sd-cc-totale b {
    color: var(--sd-arancio-scuro);
    font-size: 20px;
    line-height: 1.2 !important;
    font-weight: 700;
}

.sd-cc .sd-cc-cta {
    display: block !important;
    width: 100%;
    margin-top: 11px;
    padding: 12px !important;
    line-height: 1.2 !important;
    border-radius: 10px;
    background: var(--sd-arancio) !important;
    color: #1f2328 !important;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background-color .15s, color .15s;
}

.sd-cc .sd-cc-cta:hover,
.sd-cc .sd-cc-cta:focus {
    background: var(--sd-arancio-scuro) !important;
    color: #fff !important;
}

/* --- carrello vuoto -------------------------------------------------- */

.sd-cc .sd-cc-vuoto {
    padding: 44px 20px;
    text-align: center;
}

.sd-cc .sd-cc-vuoto b {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.sd-cc .sd-cc-vuoto p {
    margin: 0;
    color: var(--sd-grigio);
    font-size: 12.5px;
}

/* =====================================================================
   TELEFONO — un foglio che sale dal basso
   ===================================================================== */

@media (max-width: 640px) {

    .sd-cc .sd-cc-tendina {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        border: 0;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .sd-cc .sd-cc-tendina::before {
        display: none;
    }

    /*
      ⚠️ IL FOGLIO NON DEVE ESSERE PIU' ALTO DELLO SCHERMO. Con l'elenco
      a un'altezza fissa il totale - intestazione, elenco, totali e due
      pulsanti - arrivava a 783 pixel su uno schermo alto 716: la testa
      finiva 67 pixel sopra il bordo, cioe' il titolo e le prime righe
      non si vedevano. Ora il foglio si ferma a nove decimi dello
      schermo e a stringersi e' l'elenco, che tanto scorre gia'.
    */
    .sd-cc .sd-cc-tendina {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }

    .sd-cc .sd-cc-testa,
    .sd-cc .sd-cc-piede {
        flex: none;
    }

    .sd-cc .sd-cc-lista {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    /* Sul telefono il pulsante mostra solo icona e pallino: la scritta
       CARRELLO con il riassunto occuperebbe mezza barra. */
    .sd-cc .sd-cc-et {
        display: none;
    }

    /*
      ⚠️ E L'ICONA VA RIMESSA, altrimenti sul telefono il carrello
      SPARISCE - segnalato, e verificato in un riquadro da 375: al posto
      del pulsante restava un buco da 24 pixel. La colpa e' di

          #_desktop_cart .header > a > span:not(.cart-products-count-absolution)
          { display: none }   (sotto i 479 pixel)

      scritta per l'elenco di prima, dove la figurina del carrello era
      una <i> - non uno span - e quindi sopravviveva. La nostra e' uno
      span, e spariva con tutto il resto.

      (Il colore invece va bene com'e': il tema dipinge di bianco tutto
      quello che sta in quel collegamento, dando per scontato che dietro
      ci sia una barra scura. Controllato a 375, 820 e 2689 pixel
      leggendo il colore di quello che c'e' davvero sotto il pulsante:
      nero in tutti e tre i casi - sul telefono e' la barra del MENU, sul
      computer quella del megamenu.)
    */
    .sd-cc .sd-cc-icona {
        display: block !important;
    }
}


/* =====================================================================
   IL PULSANTE DELLA PERSONALIZZAZIONE SI TOGLIE DI MEZZO

   ⚠️ RESTAVA SOPRA IL CARRELLO, e sul telefono copriva proprio "VAI AL
   CHECKOUT": il pulsante fisso #customization-button-container ha
   z-index 9999, la tendina del carrello 1200. Non e' una gara che si
   vince alzando il numero - nel giro dopo qualcuno alzerebbe il suo -
   quindi finche' il carrello e' aperto quel pulsante non si mostra.

   Il segno lo mette il JavaScript sul corpo della pagina quando la
   tendina si apre, e lo toglie quando si chiude.

   La stessa cosa vale per la finestra "prodotto aggiunto al carrello",
   e li' il segno c'e' gia': `modal-open` lo mette Bootstrap da se'.
   ===================================================================== */

body.sd-carrellino-aperto #customization-button-container,
body.modal-open #customization-button-container {
    display: none !important;
}