/* =====================================================================
   LA FINESTRA "PRODOTTO AGGIUNTO AL CARRELLO"

   Il contenuto lo disegna themes/probusiness/modules/ps_shoppingcart/
   modal.tpl; qui c'e' solo l'aspetto.

   ⚠️ OGNI REGOLA E' FIGLIA DI #blockcart-modal, e non e' pignoleria.
   Il file che c'era prima portava dentro un <style> con dichiarazioni
   su `.btn`, `.total`, `.modal-body`: nomi che in un negozio
   PrestaShop esistono in venti altri posti. Quella finestra si stampa
   in fondo al <body> di OGNI pagina in cui si aggiunge qualcosa al
   carrello, quindi quelle regole valevano ovunque.

   Sul computer: due colonne, il prodotto a sinistra e il riepilogo a
   destra. Sul telefono: un foglio che sale dal basso, con totale e
   pulsante incollati in fondo.
   ===================================================================== */

#blockcart-modal {
    --sd-arancio: #ff9900;
    --sd-arancio-scuro: #e88a00;
    --sd-verde: #1e9e5a;
    --sd-inchiostro: #1f2328;
    --sd-grigio: #6e7479;
    --sd-linea: #e4e6e8;
    --sd-fondo: #f7f8f9;
}

/* Il velo dietro: piu' scuro di quello di Bootstrap, cosi' la finestra
   si stacca dalla pagina invece di galleggiarci sopra. */
.modal-backdrop.show {
    opacity: .45;
}

/*
  ⚠️ IL RIQUADRO PUO' ESSERE ALTO QUANTO LO SCHERMO, e non doveva
  scendere di cento pixel: il tema, ad apertura, lo spinge in giu' con
  una `transform` - roba della sua animazione d'ingresso - e quei cento
  pixel erano cento pixel in meno per il contenuto.
*/
#blockcart-modal .modal-dialog {
    display: flex;
    width: min(940px, calc(100vw - 40px));
    max-width: none;
    max-height: 92%;
    margin: 26px auto;
}

#blockcart-modal.in .modal-dialog,
#blockcart-modal.show .modal-dialog {
    transform: none !important;
}

#blockcart-modal .modal-content {
    /*
      ⚠️ transform: none, e serve davvero.

      Con la finestra rifatta il contenuto arrivava con
      `transform: scale(0)` addosso - misurato in Chrome vero: la
      scatola c'era, larga 940 e alta 801, ma disegnata a dimensione
      zero, quindi invisibile. Col modale di prima non succedeva, e
      nessuna regola dei fogli di stile la dichiara: e' roba che il
      tema mette al volo (gli effetti "float css3" del configuratore).
      Invece di inseguire chi la mette, qui la si annulla: dentro questa
      finestra non serve nessuna scala.
    */
    transform: none !important;
    display: flex;
    flex-direction: column;
    /*
      ⚠️ NIENTE vh QUI, E IL MOTIVO E' UNA RIGA DEL TEMA:

          @media (min-width: 1024px) { body { zoom: 0.8 } }

      su computer il negozio intero e' disegnato all'80%. Sotto quel
      zoom un "88vh" NON copre l'88 per cento dello schermo: copre
      l'88 per cento di una misura che poi viene rimpicciolita, cioe' il
      70. Ecco perche' la finestra restava bassa e i suggerimenti
      finivano fuori, da vedere scorrendo col mouse - segnalato.

      La percentuale invece si misura sul contenitore della finestra,
      che e' fissato ai quattro bordi dello schermo: il 100% e' il 100%
      vero, e resta giusto anche se un domani quel zoom cambia.
    */
    max-height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(20, 23, 26, .28);
}

/* --- intestazione --------------------------------------------------- */

#blockcart-modal .sd-mo-testa {
    display: flex;
    flex: none;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sd-linea);
}

#blockcart-modal .sd-mo-spunta {
    display: grid;
    flex: none;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--sd-verde);
}

#blockcart-modal .sd-mo-spunta svg {
    width: 13px;
    height: 13px;
}

#blockcart-modal .sd-mo-testa b {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
}

#blockcart-modal .sd-mo-chiudi {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--sd-grigio);
    font-size: 23px;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
}

/*
  ⚠️ IL SEGNO STORTO INTORNO ALLA X, SUL TELEFONO.

  Toccando la crocetta compariva attorno un alone irregolare. Sono due
  cose diverse che si sommano, e vanno tolte tutte e due:

  - il lampo del tocco (-webkit-tap-highlight-color), che il browser
    disegna seguendo il RIQUADRO dell'elemento, non il suo cerchio:
    di qui la forma sbilenca;
  - il contorno di messa a fuoco, che dopo il tocco resta acceso perche'
    il pulsante conserva il fuoco.

  Il contorno non sparisce del tutto: torna con :focus-visible, cioe'
  quando si naviga da tastiera, dove serve davvero per sapere dove si e'.
*/
#blockcart-modal .sd-mo-chiudi {
    -webkit-tap-highlight-color: transparent;
}

#blockcart-modal .sd-mo-chiudi:focus,
#blockcart-modal .sd-mo-chiudi:active {
    outline: none !important;
    box-shadow: none !important;
}

#blockcart-modal .sd-mo-chiudi:focus-visible {
    outline: 2px solid var(--sd-arancio, #f5a623) !important;
    outline-offset: 2px;
}

/*
  E il grigio del passaggio del mouse resta a chi un mouse ce l'ha: sul
  telefono restava acceso dopo il tocco, come una macchia dimenticata.
*/
@media (hover: hover) {
    #blockcart-modal .sd-mo-chiudi:hover {
        background: var(--sd-fondo);
        color: var(--sd-inchiostro);
    }
}

/* --- corpo ---------------------------------------------------------- */

/*
  NIENTE BARRE DI SCORRIMENTO A VISTA.

  Su Windows la barra c'e' sempre, anche quando non serve: quattro righe
  di contenuto e un binario grigio alto quanto la finestra. Si nasconde
  la barra ma NON lo scorrimento - rotella, dito e tastiera continuano a
  funzionare. Vale per la finestra (verticale) e per il carosello
  (orizzontale).
*/
#blockcart-modal .sd-mo-corpo {
    flex: 1;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#blockcart-modal .sd-mo-corpo::-webkit-scrollbar {
    display: none;
}

#blockcart-modal .sd-mo-alto {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 26px;
    padding: 22px 20px 24px;
}

#blockcart-modal .sd-mo-articolo {
    display: flex;
    gap: 15px;
    margin-bottom: 18px;
}

#blockcart-modal .sd-mo-mini {
    display: grid;
    flex: none;
    place-items: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 11px;
    background: var(--sd-fondo);
}

#blockcart-modal .sd-mo-mini img {
    max-width: 100%;
    max-height: 100%;
}

#blockcart-modal .sd-mo-testi h3 {
    margin: 0 0 7px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

#blockcart-modal .sd-mo-prezzo {
    color: var(--sd-arancio-scuro);
    font-size: 17px;
    font-weight: 700;
}

#blockcart-modal .sd-mo-quanti {
    margin-top: 6px;
    color: var(--sd-grigio);
    font-size: 12.5px;
}

#blockcart-modal .sd-mo-varianti {
    margin-top: 6px;
    color: var(--sd-grigio);
    font-size: 12.5px;
}

#blockcart-modal .sd-mo-varianti span {
    display: block;
}

/*
  SI APRE PIU' SVELTA.

  Il tema fa entrare la finestra con mezzo secondo scarso di movimento
  (transform 0.3s), e su un gesto che il cliente ha appena fatto - ha
  premuto "aggiungi al carrello" - quel terzo di secondo si sente tutto.
  Qui e' 0,14: si vede ancora che entra, ma non si aspetta.

  ⚠️ IL GROSSO DELL'ATTESA NON ERA QUESTO. Misurato: con un carrello da
  46 righe passavano SETTE SECONDI E MEZZO dal clic alla finestra, con
  tre richieste da due secondi l'una; con un carrello normale da tre
  righe le stesse tre richieste fanno 870 millisecondi in tutto. Non era
  la finestra a essere lenta, era il carrello di prova: PrestaShop, a
  ogni passaggio, ricalcola e ridisegna tutte le righe.
*/
#blockcart-modal.fade .modal-dialog {
    /*
      ⚠️ NIENTE MOVIMENTO, e non solo per fare presto: il tema fa entrare
      il riquadro da 25 punti piu' in alto, e finche' quel movimento e'
      in corso il riquadro STA davvero li' sopra - misurato: bordo alto a
      -144, cioe' fuori dallo schermo. Se la scheda del browser non e' in
      primo piano il movimento non parte nemmeno, e il riquadro resta
      fuori a tempo indeterminato. Senza movimento arriva subito al suo
      posto; a farlo comparire con garbo basta la dissolvenza, che resta.
    */
    transition: none !important;
}

/* --- le personalizzazioni ------------------------------------------- */

#blockcart-modal .sd-mo-pers {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 12px;
}

#blockcart-modal .sd-mo-pers > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    background: var(--sd-fondo);
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

#blockcart-modal .sd-mo-pers > summary::-webkit-details-marker {
    display: none;
}

#blockcart-modal .sd-mo-conta {
    color: var(--sd-grigio);
    font-size: 12.5px;
    font-weight: 400;
}

/* La freccia sono due bordi girati, e gira quando il riquadro si apre. */
#blockcart-modal .sd-mo-pers > summary::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: -3px;
    margin-left: auto;
    border-right: 1.8px solid #9aa0a6;
    border-bottom: 1.8px solid #9aa0a6;
    transform: rotate(45deg);
    transition: transform .15s, margin-top .15s;
}

#blockcart-modal .sd-mo-pers[open] > summary::after {
    margin-top: 2px;
    transform: rotate(-135deg);
}

#blockcart-modal .sd-mo-righe {
    padding: 6px 15px 13px;
}

/*
  ⚠️ LE ETICHETTE DELLE SCELTE SONO ISTRUZIONI LUNGHE, non nomi: una di
  queste - "DIMENSIONI PERSONALIZZATE. Indicare altezza adesivo (in cm).
  Non specificando nulla gli adesivi verranno realizzati nelle dimensioni
  standard del modello in questione" - da sola occupava SEI righe, e il
  riquadro delle scelte arrivava a 528 pixel: era lui a far uscire la
  finestra dallo schermo. Ora l'etichetta si ferma a due righe coi
  puntini; il testo intero resta nel suggerimento del mouse, e il VALORE
  scelto dal cliente - che e' quello che conta rileggere - si vede sempre
  per intero.
*/
#blockcart-modal .sd-mo-eti {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#blockcart-modal .sd-mo-riga {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sd-linea);
    font-size: 13px;
}

#blockcart-modal .sd-mo-riga:last-child {
    border-bottom: 0;
}

/*
  ⚠️ L'ETICHETTA PRENDE TUTTO LO SPAZIO CHE AVANZA, e prima no: aveva un
  tetto del 52 per cento della riga, e su un telefono voleva dire
  incolonnarla in quattro righe da due parole - "DESCRIZIONE / DELLA /
  COLORAZIONE / DESIDERATA" - con ottantaquattro pixel di bianco in mezzo
  alla riga. Misurato: etichetta larga 165 su 316 disponibili, valore 68,
  vuoto 84.

  Ora l'etichetta si allarga fino a dove comincia il valore, e a essere
  limitato e' il VALORE, che di suo e' corto: se capita lungo va a capo
  invece di schiacciare l'etichetta.
*/
#blockcart-modal .sd-mo-riga span {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--sd-grigio);
}

#blockcart-modal .sd-mo-riga b {
    flex: 0 1 auto;
    max-width: 45%;
    font-weight: 600;
    text-align: right;
}

#blockcart-modal .sd-mo-immagine {
    max-width: 80px;
    height: auto;
    border-radius: 4px;
}

/* --- il riepilogo --------------------------------------------------- */

#blockcart-modal .sd-mo-riepilogo {
    position: sticky;
    top: 0;
    height: fit-content;
    padding: 17px;
    border: 1px solid var(--sd-linea);
    border-radius: 12px;
}

#blockcart-modal .sd-mo-riepilogo h4 {
    margin: 0 0 13px;
    font-size: 14px;
    font-weight: 700;
}

#blockcart-modal .sd-mo-rr {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    color: var(--sd-grigio);
    font-size: 13.5px;
}

#blockcart-modal .sd-mo-rr b {
    color: var(--sd-inchiostro);
    font-weight: 600;
}

#blockcart-modal .sd-mo-tot {
    margin-top: 9px;
    padding-top: 12px;
    border-top: 1px solid var(--sd-linea);
    color: var(--sd-inchiostro);
    font-size: 15px;
}

#blockcart-modal .sd-mo-tot b {
    font-size: 21px;
    font-weight: 700;
}

#blockcart-modal .sd-mo-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--sd-arancio);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

#blockcart-modal .sd-mo-cta:hover,
#blockcart-modal .sd-mo-cta:focus {
    background: var(--sd-arancio-scuro);
    color: #fff;
    text-decoration: none;
}

#blockcart-modal .sd-mo-continua {
    display: block;
    width: 100%;
    padding: 11px 0 0;
    border: 0;
    background: none;
    color: var(--sd-grigio);
    font-size: 13.5px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

#blockcart-modal .sd-mo-continua:hover {
    color: var(--sd-inchiostro);
}

/* --- i prodotti suggeriti ------------------------------------------- */

/*
  Il contenuto lo mette ets_crosssell dentro .modal-body: qui si veste
  la fascia che li contiene. Se il modulo non ha niente da suggerire il
  contenitore resta vuoto, e allora non deve nemmeno vedersi - da cui
  :empty.
*/
/*
  Lo spazio attorno alle linguette era troppo: sopra un vuoto grande
  quanto una riga e sotto un altro, prima delle schede. La fascia adesso
  comincia subito.
*/
#blockcart-modal .sd-mo-basso {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--sd-linea);
    background: var(--sd-fondo);
}

#blockcart-modal .sd-mo-basso:empty {
    display: none;
}

/*
  I VUOTI SOPRA E SOTTO LE LINGUETTE NON ERANO NOSTRI.

  Misurati uno per uno: il blocco di ets_crosssell si porta 30 pixel di
  margine sopra (e due margini NEGATIVI ai lati, avanzo della griglia
  Bootstrap), il contenitore delle linguette altri 15 sotto, e l'elenco
  dei prodotti 45 in fondo. Sommati facevano una fascia mezza vuota.
  Qui dentro si azzerano: lo spazio lo decide la fascia, una volta sola.
*/
#blockcart-modal .sd-mo-basso .ets_crosssell_block,
#blockcart-modal .sd-mo-basso .ets_crosssell_tab_content,
#blockcart-modal .sd-mo-basso .featured-products {
    margin: 0 !important;
}

#blockcart-modal .sd-mo-basso .ets_crosssell_title {
    margin: 0 0 14px;
    font-size: 15px !important;
    font-weight: 700;
}

/* --- le linguette --------------------------------------------------- */

/*
  Le linguette le fa gia' ets_crosssell: "Indispensabili", "Di
  tendenza", "Novita'" sono suoi elenchi, decisi nella sua
  configurazione. Qui si cambia solo come si vedono - pastiglie, quella
  in uso scura - e non si tocca un suo file: cosi' un suo aggiornamento
  non porta via niente e spegnendo l'interruttore del tema torna il suo
  aspetto di prima.
*/
#blockcart-modal .ets_crosssell_nav_tabs {
    display: flex;
    gap: 7px;
    margin: 0 0 16px;
    padding: 0 0 2px;
    overflow-x: auto;
    border: 0;
    list-style: none;
    scrollbar-width: none;
}

#blockcart-modal .ets_crosssell_nav_tabs::-webkit-scrollbar {
    display: none;
}

#blockcart-modal .ets_crosssell_nav_tabs > li {
    float: none;
    margin: 0;
}

/*
  ⚠️ SERVONO LE FORZATURE. Il tema veste queste linguette con sfondo
  trasparente e testo bianco per quella scelta: su una fascia chiara
  voleva dire testo bianco su bianco, cioe' illeggibile - ed e'
  esattamente quello che si vedeva. Le forzature valgono solo dentro la
  finestra del carrello.
*/
/* --- le linguette -------------------------------------------------- */

/*
  ⚠️ QUESTE LINGUETTE NON SONO QUELLE DEL MODULO.

  Le sue restano nel documento - il clic glielo giriamo, e' lui che sa
  cosa caricare - ma nascoste. Queste le costruisce sdspeedypack.js
  (segnaLeLinguette) con nomi che nessuna regola del tema conosce.

  Il motivo e' scritto per esteso nel JavaScript, e in breve e' questo:
  rivestire le sue non ha mai tenuto, perche' il modulo le ridipinge da
  se' a ogni cambio e vinceva chi scriveva per ultimo. Si vedevano due
  linguette su quattro col testo dello stesso colore dello sfondo.
*/
.sd-mo-linguette-loro {
    display: none !important;
}

#blockcart-modal .sd-mo-linguette {
    display: flex;
    align-items: center;
    /* In mezzo, sul computer come sul telefono. */
    justify-content: center;
    gap: 7px;
    margin: 0 0 12px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#blockcart-modal .sd-mo-linguette::-webkit-scrollbar {
    display: none;
}

#blockcart-modal .sd-mo-linguetta {
    flex: none;
    padding: 9px 18px;
    border: 1px solid var(--sd-linea);
    border-radius: 999px;
    background: #fff;
    color: var(--sd-tenue);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}

#blockcart-modal .sd-mo-linguetta:hover {
    border-color: var(--sd-arancio);
    background: #fff7ea;
    color: var(--sd-arancio-scuro);
}

#blockcart-modal .sd-mo-linguetta:focus-visible {
    outline: 2px solid var(--sd-arancio-scuro);
    outline-offset: 2px;
}

/* L'arancione del sito, non un nero che qui dentro sarebbe un colore
   che sul negozio non esiste da nessuna parte. */
/* Quella scelta: piena, con un'ombra tenue che la solleva dalle altre. */
#blockcart-modal .sd-mo-linguetta-scelta,
#blockcart-modal .sd-mo-linguetta-scelta:hover {
    border-color: var(--sd-arancio);
    background: var(--sd-arancio);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 153, 0, .35);
}

#blockcart-modal .sd-mo-linguetta:hover {
    border-color: var(--sd-arancio);
    color: var(--sd-arancio-scuro);
}

/* --- le schede dei suggeriti ---------------------------------------- */

/*
  ⚠️ QUI DENTRO C'E' UNO SCORRIMENTO SLICK, e va spento.

  ets_crosssell mette i prodotti in una giostra (slick): otto prodotti
  veri e dodici copie, con larghezze e spostamenti scritti a mano negli
  attributi style. In una finestra si vedono quattro schede alla volta e
  per vedere le altre bisogna trascinare - in un modale, dove il gesto
  serve gia' a scorrere, e' scomodo. Le vogliamo tutte in griglia.

  Lo spegnimento vero lo fa sdspeedypack.js (slick('unslick')), che
  toglie le copie e ripulisce gli attributi. Queste righe servono
  all'istante prima: senza, per un momento si vedrebbe la giostra.
*/
#blockcart-modal .sd-mo-basso .slick-list,
#blockcart-modal .sd-mo-basso .slick-track {
    width: auto !important;
    transform: none !important;
}

/* Nella scheda resta un pulsante solo: il "+". L'occhio (l'anteprima
   veloce) apriva una finestra dentro la finestra, e nel disegno non
   c'e'. Ne esistono due versioni a seconda di come il modulo ridisegna:
   si tolgono tutte e due. */
/*
  Nella scheda non resta nessun pulsante: via l'occhio dell'anteprima
  veloce (apriva una finestra dentro la finestra) e via anche il "+" di
  aggiunta rapida. Chi vuole un prodotto suggerito ci clicca sopra e lo
  compra dalla sua pagina, dove ci sono le scelte da fare - qui
  sarebbero finite nel carrello senza personalizzazioni.
*/
#blockcart-modal .sd-mo-basso .quick-view,
#blockcart-modal .sd-mo-basso .view_product,
#blockcart-modal .sd-mo-basso .button-container-product,
#blockcart-modal .sd-mo-basso .highlighted-informations,
#blockcart-modal .sd-mo-basso .atc_div,
#blockcart-modal .sd-mo-basso .add-to-cart,
#blockcart-modal .sd-mo-basso button.add_to_cart {
    display: none !important;
}

/* Di slick non resta niente: se per un istante compare qualcosa di suo
   - frecce, pallini, copie delle schede - non si deve vedere. */
#blockcart-modal .sd-mo-basso .slick-arrow,
#blockcart-modal .sd-mo-basso .slick-dots,
#blockcart-modal .sd-mo-basso .slick-cloned {
    display: none !important;
}

/*
  IL CAROSELLO: UNA RIGA CHE SCORRE.

  Non e' piu' la giostra di slick - le sue misure qui dentro non
  tornavano mai, e si vedeva una scheda sola larga mezza finestra. E'
  una riga con lo scorrimento del browser: le schede sono larghe un
  quarto (due sul telefono), si agganciano al bordo quando ci si ferma,
  e sul telefono si trascinano col dito senza bisogno di niente, perche'
  e' scorrimento vero. Il resto - avanzare da solo, le frecce - lo fa
  sdspeedypack.js.

  ⚠️ Le larghezze sono PERCENTUALI di proposito: cosi' non c'e' niente
  da misurare al momento giusto, che e' esattamente il punto su cui
  slick continuava a sbagliare.
*/

#blockcart-modal .sd-mo-basso .sd-mo-carosello {
    display: flex;
    /* ⚠️ nowrap forzato: il tema fa andare a capo gli elenchi di
       prodotti, e le schede invece di scorrere si incolonnavano su piu'
       righe - il carosello non scorreva perche' non c'era niente da
       scorrere. */
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

#blockcart-modal .sd-mo-basso .sd-mo-carosello::-webkit-scrollbar {
    display: none;
}

/* Mentre si tira col mouse, il puntatore lo dice. */
#blockcart-modal .sd-mo-basso .sd-mo-carosello:active {
    cursor: grabbing;
}

/*
  ⚠️ LE SCHEDE OLTRE LA QUARTA ERANO NASCOSTE.

  Il modulo ne mostra quattro e lascia le altre con display: none -
  erano la giostra a farle sfilare. Smontata la giostra restavano
  invisibili, e la riga non aveva niente da scorrere: otto prodotti, ma
  larghezza esattamente uguale al contenitore. Qui si riaccendono tutte.
*/
#blockcart-modal .sd-mo-basso .sd-mo-carosello > article.product-miniature {
    display: flex !important;
    flex: 0 0 calc(25% - 9px);
    max-width: calc(25% - 9px);
    scroll-snap-align: start;
}

#blockcart-modal .sd-mo-basso article.product-miniature {
    width: auto !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 11px;
    background: #fff;
    transition: box-shadow .16s, transform .16s;
}

#blockcart-modal .sd-mo-basso article.product-miniature:hover {
    box-shadow: 0 4px 16px rgba(31, 35, 40, .09);
    transform: translateY(-2px);
}

/* La scheda si riempie tutta: cosi' il prezzo puo' stare in fondo anche
   quando il nome accanto occupa una riga in piu'. */
#blockcart-modal .sd-mo-basso .thumbnail-container {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
}

/*
  ⚠️ LA FIGURA E' PIU' BASSA DI UN QUADRATO, e non e' un vezzo: con le
  schede quadrate la finestra non ci stava nello schermo e bisognava
  scorrere col mouse per vedere i suggerimenti - segnalato. Quattro terzi
  invece di uno a uno tolgono una sessantina di pixel per riga, che sono
  esattamente quelli che mancavano.
*/
#blockcart-modal .sd-mo-basso .image_item_product {
    aspect-ratio: 3 / 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--sd-fondo);
}

#blockcart-modal .sd-mo-basso .image_item_product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
  PREZZO E PULSANTE SULLA STESSA RIGA.

  Nel disegno stanno affiancati in fondo alla scheda, ma nel documento
  sono due elementi FRATELLI e lontani: il prezzo in
  .product-price-and-shipping, il pulsante dentro
  .highlighted-informations. Metterli in riga con flex vorrebbe dire
  spostarli col JavaScript. Con una griglia a due colonne non si tocca
  niente: il titolo occupa tutta la riga di sopra, prezzo e pulsante si
  dividono quella di sotto.
*/
/* Senza il pulsante la scheda ha una colonna sola, e tutto sta in
   mezzo: e' quello che chiedeva il disegno. */
#blockcart-modal .sd-mo-basso .product-description {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    height: auto;
    padding: 9px 10px 11px;
    text-align: center;
}

/* Il prezzo scende in fondo: con nomi di lunghezza diversa i prezzi
   restano comunque incolonnati fra una scheda e l'altra. */
#blockcart-modal .sd-mo-basso .product-price-and-shipping {
    /* !important perche' il tema mette un margine suo su questo blocco:
       senza, il prezzo resta appiccicato al nome e su una scheda col
       nome piu' corto sale di una riga rispetto alle vicine. */
    margin-top: auto !important;
}

/*
  IL TITOLO FINO A TRE RIGHE.

  ⚠️ ERA TAGLIATO A META' DELLA SECONDA RIGA, e si leggeva "Spatola Per"
  invece di "Spatola per l'incollaggio degli adesivi". Il nome intero c'e'
  sempre stato nella pagina: a mangiarlo era un'altezza FISSA di 34
  pixel, misurata sul carattere da 12,5. Basta che il testo venga
  disegnato un po' piu' grande - un ingrandimento del browser, un
  carattere di sistema diverso, il telefono - e in 34 pixel non ci stanno
  piu' due righe: la seconda viene tranciata a meta', e nemmeno i puntini
  si vedono, perche' stanno in fondo alla riga tagliata.

  Ora l'altezza e' in `em`, cioe' cresce col testo: minimo due righe
  (cosi' prezzo e bordo restano allineati fra le schede), massimo tre.
  I nomi qui sono lunghi - "Scaldacollo Tubolare Multifunzione
  SpeedyDecal - Slopline" - e tre righe ne mostrano abbastanza da
  riconoscere l'articolo.
*/
/*
  ⚠️⚠️ E IL TAGLIO A META' RIGA AVEVA UNA CAUSA PRECISA, che ha retto
  due tentativi: il taglio elegante coi puntini (-webkit-line-clamp)
  QUI NON HA MAI FUNZIONATO. Vuole che l'elemento sia un
  `display: -webkit-box`, e noi glielo dicevamo pure - con
  !important - ma il nome e' figlio di un contenitore flessibile, e un
  figlio di flex viene "blocchificato": il browser gli cambia il display
  sotto il naso. Misurato: chiesto -webkit-box, il calcolato rispondeva
  `flow-root`. Senza clamp restava solo un'altezza massima con
  l'eccedenza nascosta - cioe' una ghigliottina, che taglia dove capita,
  anche a meta' di una lettera.

  Il rimedio e' spostare il taglio sul COLLEGAMENTO dentro il titolo:
  quello non e' figlio di un flex, quindi il -webkit-box gli resta e i
  puntini compaiono davvero, a fine terza riga.
*/
#blockcart-modal .sd-mo-basso .product-description .product-title {
    display: block !important;
    width: 100%;
    min-height: 2.7em;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center !important;
}

#blockcart-modal .sd-mo-basso .product-description .product-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

#blockcart-modal .sd-mo-basso .product-title a {
    color: var(--sd-inchiostro);
    text-decoration: none;
}

#blockcart-modal .sd-mo-basso .product-title {
    text-align: center;
}

/* Prezzo e pulsante sulla stessa riga, in fondo alla scheda. */
/* Il prezzo in mezzo alla scheda, come chiesto. */
#blockcart-modal .sd-mo-basso .product-price-and-shipping {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    text-align: center;
}

#blockcart-modal .sd-mo-basso .product-price-and-shipping .price {
    color: var(--sd-arancio-scuro);
    font-size: 13.5px;
    font-weight: 700;
}

/*
  IL PULSANTE C'ERA MA NON SI VEDEVA.

  Nel tema `.highlighted-informations` - il contenitore del pulsante
  "Aggiungi al carrello" - nasce con display: none e si accende al
  passaggio del mouse sulla scheda. In una finestra dove le schede sono
  quattro e il gesto e' il tocco, un pulsante che appare solo col mouse
  non esiste: qui si vede sempre.

  Si scrive `.product-description .highlighted-informations` e non la
  sola classe perche' quel nome ce l'ha anche il contenitore della lente
  di ingrandimento, che invece va tenuto nascosto: due regole con lo
  stesso peso e tutte e due !important si sarebbero contese il posto.
*/
#blockcart-modal .sd-mo-basso .product-description .highlighted-informations {
    display: block !important;
    margin: 0;
    padding: 0;
}

/* Il tema da' alle schede un'altezza fissa pensata per la griglia del
   catalogo: qui la decide il contenuto. */
#blockcart-modal .sd-mo-basso article.product-miniature,
#blockcart-modal .sd-mo-basso .thumbnail-container,
#blockcart-modal .sd-mo-basso .product-description {
    height: auto !important;
}

#blockcart-modal .sd-mo-basso .atc_div form {
    margin: 0;
}

/*
  IL PULSANTE DIVENTA UN "+" TONDO. Il testo "Aggiungi al carrello" non
  ci sta in una scheda larga un quarto di finestra: si spegne con
  font-size 0 e si disegna il segno con ::after. Il testo resta nel
  documento, quindi chi usa un lettore di schermo lo sente per intero.
*/
/* Le targhette del tema (Novita', Saldi...) come nel disegno: piccole,
   in alto a sinistra sull'immagine. */
#blockcart-modal .sd-mo-basso .product-flags {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

#blockcart-modal .sd-mo-basso .product-flag {
    position: static;
    margin: 0 0 4px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #eaf7ef;
    color: #14713f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

#blockcart-modal .sd-mo-basso .thumbnail-container {
    position: relative;
}

/* Sul computer il totale col pulsante sta nel riepilogo: la barra in
   fondo non serve. */
#blockcart-modal .sd-mo-piede {
    display: none;
}

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

@media (max-width: 820px) {

    /*
      IL FOGLIO STA ATTACCATO IN BASSO.

      Il primo tentativo era `position: absolute; bottom: 0`, e il foglio
      finiva a meta' schermo: Bootstrap sposta il riquadro con una
      `transform` per farlo entrare in scena, e quella transform sposta
      anche un elemento posizionato. Invece di rincorrerla, si fa del
      contenitore una riga flessibile allineata in fondo: dove sta il
      riquadro lo decide il contenitore, e la transform non c'entra piu'.

      La regola vale solo quando la finestra e' aperta - `.in` e' la
      classe di Bootstrap 3, `.show` quella della 4 - altrimenti un
      display: flex la farebbe vedere sempre.
    */
    #blockcart-modal.in,
    #blockcart-modal.show {
        display: flex !important;
        align-items: flex-end;
        padding: 0 !important;
    }

    /* ⚠️ !important, e non per abitudine: la larghezza generale del
       riquadro (min(940px, 100vw - 40px)) e quella del tema (max-width:
       90%) lascerebbero una striscia vuota di lato sul telefono. Qui
       vince questa perche' viene scritta dopo, ma l'ordine e' una
       garanzia fragile: una riga spostata domani e la striscia torna. */
    #blockcart-modal .modal-dialog {
        position: static;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    #blockcart-modal .modal-content {
        max-height: 94vh;
        border-radius: 18px 18px 0 0;
    }

    #blockcart-modal .sd-mo-alto {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 14px 14px 16px;
    }

    /*
      IL RIQUADRO DELLE SCELTE PRENDE TUTTA LA LARGHEZZA.

      Stava nella colonna di fianco alla figura, e sotto la figura
      restava una striscia vuota alta quanto tutto l'elenco - su un
      telefono, mezzo schermo di niente. Ora figura e testo stanno
      affiancati solo in cima, e il riquadro delle scelte scende sotto
      tutti e due, da bordo a bordo.

      ⚠️ Si fa con display: contents, come nel riepilogo del checkout: il
      riquadro sta DENTRO la colonna del testo, e da li' non potrebbe mai
      allargarsi sopra la colonna della figura. Facendo sparire il
      contenitore, i suoi pezzi diventano caselle della griglia e ognuno
      si prende la sua colonna.
    */
    #blockcart-modal .sd-mo-articolo {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        column-gap: 13px;
        row-gap: 0;
        margin-bottom: 14px;
    }

    #blockcart-modal .sd-mo-testi {
        display: contents;
    }

    #blockcart-modal .sd-mo-mini {
        grid-column: 1;
        grid-row: 1 / span 4;
        align-self: start;
        width: 84px;
        height: 84px;
    }

    #blockcart-modal .sd-mo-testi > h3,
    #blockcart-modal .sd-mo-testi > .sd-mo-prezzo,
    #blockcart-modal .sd-mo-testi > .sd-mo-quanti,
    #blockcart-modal .sd-mo-testi > .sd-mo-varianti {
        grid-column: 2;
    }

    #blockcart-modal .sd-mo-testi > h3 {
        font-size: 15px;
    }

    #blockcart-modal .sd-mo-pers {
        grid-column: 1 / -1;
        margin-top: 12px;
    }

    /*
      SUL TELEFONO L'ETICHETTA SI LEGGE PER INTERO. Sul computer e'
      tagliata a due righe perche' li' lo spazio in altezza e' quello
      dello schermo e la finestra non deve uscirne; qui la finestra
      scorre gia' per conto suo, quindi tagliare non serve a niente e si
      leggeva "FINITURA (Lucidi o..." con mezza riga vuota accanto.
    */
    #blockcart-modal .sd-mo-eti {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    /* Piu' compatto: le righe delle scelte stanno strette. */
    #blockcart-modal .sd-mo-pers > summary {
        padding: 11px 13px;
    }

    #blockcart-modal .sd-mo-righe {
        padding: 4px 13px 10px;
    }

    #blockcart-modal .sd-mo-riga {
        padding: 7px 0;
        gap: 12px;
    }

    #blockcart-modal .sd-mo-riepilogo {
        position: static;
    }

    /* Nel riepilogo i due pulsanti sparirebbero sotto la piega: li
       rifa' la barra in fondo, che resta ferma. */
    #blockcart-modal .sd-mo-riepilogo .sd-mo-cta,
    #blockcart-modal .sd-mo-riepilogo .sd-mo-continua {
        display: none;
    }

    #blockcart-modal .sd-mo-piede {
        display: block;
        flex: none;
        padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--sd-linea);
        background: #fff;
    }

    /*
      ⚠️ IL TOTALE NELLA BARRA IN FONDO NON C'E' PIU'. Sul telefono era
      scritto due volte: una nel riquadro "Il tuo carrello", che da
      quando le scelte sono a tutta larghezza si vede per intero, e una
      qui sotto. Due volte lo stesso numero non rassicura, confonde - e
      la barra in fondo serve al pulsante, non a ripetere i conti.
    */
    #blockcart-modal .sd-mo-piede-tot {
        display: none;
    }

    #blockcart-modal .sd-mo-piede .sd-mo-cta {
        margin-top: 0;
    }

    /*
      ⚠️ LE LINGUETTE VANNO A CAPO INVECE DI USCIRE DALLO SCHERMO. Sul
      computer stanno in fila e scorrono di lato se non ci stanno; sul
      telefono quello scorrimento non si vede - segnalato: "Frequently
      bought together" occupava mezza riga e "New" restava fuori, tagliato
      a meta'. Nessuno va a cercare col dito una linguetta che non sa che
      esiste.

      Qui vanno a capo su due righe, tutte leggibili, con un filo di
      imbottitura e di carattere in meno per starci in due righe e non in
      tre.
    */
    #blockcart-modal .sd-mo-linguette {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        overflow-x: visible;
    }

    #blockcart-modal .sd-mo-linguetta {
        padding: 7px 13px;
        font-size: 12px;
    }

    /* Due schede per volta, come nel disegno. */
    #blockcart-modal .sd-mo-basso .sd-mo-carosello > article.product-miniature {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    #blockcart-modal .sd-mo-basso {
        padding: 14px 16px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #blockcart-modal * {
        transition: none !important;
    }
}
