/* =====================================================================
   IL RIEPILOGO DEI PRODOTTI NEL CHECKOUT

   Quello che c'era: una tabella con l'aria di un foglio di calcolo -
   intestazione grigia col filetto azzurro, nomi in arancione grassetto,
   le scelte del cliente tutte in maiuscoletto fitto (che sembravano piu'
   importanti del prodotto), e i comandi della quantita' due frecce alte
   otto pixel.

   Quello che c'e' ora: una riga per prodotto - immagine, nome,
   riferimento, le scelte in chiaro - e a destra prezzo unitario,
   quantita' e totale incolonnati. Riquadro bianco con angoli morbidi,
   come le altre schede del sito.

   ⚠️ SOLO ASPETTO: nessun template di supercheckout e' stato toccato.
   Il riepilogo lo disegna il loro cart_summary.tpl, e nel checkout ogni
   modifica al carrello lo ridisegna: un template riscritto andrebbe
   rifatto a ogni loro aggiornamento, e un errore li' dentro vuol dire
   ordini persi. Qui si veste quello che loro stampano, e spegnendo
   l'interruttore torna com'era.

   ⚠️ I NOMI SONO I LORO, e li ho letti nella pagina viva prima di
   scrivere una riga: il primo tentativo era su nomi indovinati
   (.cart_quantity_up, una tabella di totali) che qui non esistono - la
   quantita' e' un "touchspin" di Bootstrap, il totale non e' una
   tabella, e la riga porta la classe `row`, che il tema fa gia'
   flessibile.

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

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

/* --- il riquadro ---------------------------------------------------- */

.opc_shoppingcart.custom-panel {
    overflow: hidden;
    border: 1px solid var(--sd-linea);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .04), 0 4px 14px rgba(31, 35, 40, .06);
}

/*
  L'intestazione era una fascia grigia con un filetto azzurro a sinistra,
  avanzo del tema di partenza. Serve !important: il tema la veste con
  regole sue, sfondo compreso.
*/
.opc_shoppingcart > h2 {
    display: flex !important;
    align-items: center;
    gap: 11px;
    margin: 0 !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sd-linea) !important;
    background: #fff !important;
    color: var(--sd-inchiostro) !important;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none !important;
}

/* Un carrello, non una spunta: qui il cliente sta ancora guardando cosa
   compra, non gli si dice "fatto". */
.opc_shoppingcart > h2::before {
    content: '' !important;
    display: block;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff7ea url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e88a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M2.5 3h2.2l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.4a1.6 1.6 0 0 0 1.6-1.2L21.5 7H6'/></svg>") no-repeat center/16px;
}

.opc_shoppingcart > h2 i {
    display: none !important;
}

/* --- una riga per prodotto ------------------------------------------ */

/*
  La riga porta la classe `row` di Bootstrap, che il tema fa gia'
  flessibile: senza !important vinceva lui e le colonne restavano quelle
  sue, larghe a percentuali fisse.
*/
.opc_shoppingcart .cart_list_item {
    display: grid !important;
    /*
      Le due colonne dei prezzi hanno una larghezza FISSA e non "auto":
      con auto ognuna si stringeva sul proprio numero, e su righe
      diverse - 9,50 e 137,00 - i prezzi finivano incolonnati storti.
    */
    /*
      ⚠️ CINQUE COLONNE, NON PIU' SEI: il prezzo unitario non si mostra
      piu' - basta il totale della riga, in arancione. Tenendolo
      nascosto ma lasciando la sua colonna, in mezzo alla riga restavano
      92 pixel di vuoto.
    */
    grid-template-columns: 88px minmax(0, 1fr) auto 110px 40px;
    /*
      ⚠️ LE RIGHE SI DICHIARANO, e non e' un capriccio: senza righe
      esplicite il "fino in fondo" (grid-row: 1 / -1) non ha un fondo a
      cui arrivare - il -1 conta dall'ultima riga DICHIARATA, e se non
      ce n'e' nessuna vale quanto niente. Sedici bastano per il nome piu'
      quattordici scelte del cliente; quelle che avanzano sono alte zero
      e non si vedono.
    */
    grid-template-rows: repeat(16, auto);
    align-items: center;
    column-gap: 16px;
    /* Spazio fra le righe zero: le quattordici che avanzano
       moltiplicherebbero il vuoto. La distanza fra le scelte la danno i
       margini dei paragrafi. */
    row-gap: 0;
    margin: 0 !important;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sd-linea);
}

.opc_shoppingcart .cart_list_item:last-of-type {
    border-bottom: 0;
}

/* Le colonne di Bootstrap dentro la riga non servono piu': la
   disposizione la fa la griglia qui sopra. */
.opc_shoppingcart .cart_list_item > div[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    text-align: left !important;
}

/*
  TUTTO SULLA STESSA LINEA.

  Le celle di destra stavano ognuna a un'altezza diversa - il prezzo
  qui, la quantita' venti pixel piu' giu', il totale ancora sotto -
  perche' la riga e' alta quanto l'elenco delle personalizzazioni e
  ciascuna si sistemava per conto suo. Con align-self: center i centri
  coincidono, e la riga si legge da sinistra a destra come una riga
  sola.
*/
.opc_shoppingcart .cart_list_item > *,
.opc_shoppingcart .cart_list_item .bootstrap-touchspin > .input-group,
.opc_shoppingcart .cart_list_item a.remove-from-cart {
    align-self: center !important;
    margin: 0 !important;
}

/* ⚠️ Anche i contenuti dentro le celle dei prezzi: la cella era
   centrata ma il numero dentro restava in alto o in basso, e sulla riga
   si vedevano tre altezze diverse. */
.opc_shoppingcart .cart_list_item .shopping-product-price,
.opc_shoppingcart .cart_list_item .productTotalSection,
.opc_shoppingcart .cart_list_item .cart-product-price {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    align-self: center !important;
    height: auto !important;
    padding: 0 !important;
}

/*
  IL PREZZO UNITARIO NON SI MOSTRA PIU'. Il negoziante lo ha chiesto:
  sulla riga bastano il numero di pezzi e quanto viene in tutto, e due
  cifre vicine - una grigia e una arancione - si leggono come un prezzo
  barrato, cioe' come uno sconto che non c'e'.

  ⚠️ Con quantita' maggiore di uno il prezzo del singolo pezzo non e'
  piu' scritto da nessuna parte: e' una scelta, non una dimenticanza.

  ⚠️ E VA DICHIARATO QUI, DOPO. Messo piu' in alto non funzionava: la
  regola qui sopra rende flessibili le celle dei prezzi ed e' importante
  anche lei, con lo stesso peso di selettore. Fra due dichiarazioni pari
  vince l'ultima scritta.
*/
.opc_shoppingcart .cart_list_item > .shopping-product-price,
.opc_shoppingcart .cart_list_item .shopping-product-price {
    display: none !important;
}

/* Il separatore che il modulo mette per il telefono qui e' di troppo. */
.opc_shoppingcart .cart_list_item > .clear-mobile-div {
    display: none;
}

/*
  ⚠️ IL POSTO DI OGNI PEZZO SI DICE A MANO.

  Lasciando fare alla griglia, i pezzi si mettono nell'ordine in cui
  stanno nel documento - e li' dentro l'ordine non e' quello che si
  vede: le classi di Bootstrap portano con se' degli spostamenti
  (`order`), e la quantita' finiva prima dell'immagine. Dicendo a
  ciascuno la sua colonna, l'ordine e' quello voluto e non dipende piu'
  da come il modulo li ha scritti.
*/
/*
  ⚠️ E LA RIGA SI DICE, NON SI LASCIA INDOVINARE.

  Assegnate le colonne, la griglia era ancora sparpagliata su QUATTRO
  righe: prezzo in alto, quantita' venti pixel sotto, totale ancora piu'
  giu'. Il motivo e' l'ordine nel documento - il prezzo sta scritto
  prima della quantita', mentre a schermo va dopo - e la griglia, quando
  incontra una colonna piu' a sinistra di quella appena riempita, apre
  una riga nuova invece di tornare indietro.

  Dicendo a tutti "riga 1" il problema sparisce: le sei caselle stanno
  su una linea sola, e l'ordine resta quello scritto nelle colonne.
*/
/*
  IL NOME DEL PRODOTTO COMINCIA DOVE COMINCIA L'IMMAGINE.

  Prima nome e scelte stavano tutti nella colonna di fianco
  all'immagine, e il nome partiva ottantasei pixel piu' a destra del
  bordo della figura: le due cose non erano in squadra. Ora il nome sta
  sopra, largo quanto immagine piu' testo, e sotto di lui la figura a
  sinistra con le scelte del cliente a fianco.

  ⚠️ SI FA CON display: contents. Il nome, nel documento, e' dentro il
  blocco della descrizione: da li' non potrebbe mai occupare anche la
  colonna dell'immagine, perche' un figlio non esce dalla casella del
  padre. `contents` fa sparire il contenitore lasciando dentro i suoi
  paragrafi, che diventano caselle della griglia come tutti gli altri.
  E' lo stesso trucco gia' usato qui sotto per il cestino.
*/
.opc_shoppingcart .cart_list_item > .shopping-cart-description {
    display: contents !important;
}

.opc_shoppingcart .cart_list_item .shopping-cart-description > .product-title {
    grid-column: 1 / 3;
    grid-row: 1;
    margin: 0 0 8px !important;
}

/* Le scelte del cliente si accodano da sole, una riga per ciascuna,
   nella colonna di fianco all'immagine. */
.opc_shoppingcart .cart_list_item .shopping-cart-description > p {
    grid-column: 2;
}

/* L'immagine parte dalla seconda riga - sotto il nome - e da li' scende
   fino in fondo, cosi' le scelte del cliente le restano a fianco.
   align-self: start la tiene in alto invece di centrarla nel vuoto. */
.opc_shoppingcart .cart_list_item > .Cart-product-Image {
    grid-column: 1;
    grid-row: 2 / -1;
    align-self: start !important;
    order: 0;
}

/*
  ⚠️ display: contents SULLA QUANTITA', e serve per il cestino.

  Il cestino, nel documento, sta DENTRO il gruppo della quantita': da
  li' non potrebbe mai finire in fondo alla riga. `display: contents`
  fa sparire il contenitore lasciando dentro i suoi figli, che
  diventano caselle della griglia come tutti gli altri: cosi' il gruppo
  del meno-piu' va al terzo posto e il cestino all'ultimo, senza
  spostare niente nel documento.
*/
.opc_shoppingcart .cart_list_item > .quantity-section {
    display: contents;
}

/* Il cestino sta due livelli piu' sotto: si rende trasparente anche il
   contenitore di mezzo, e i suoi due figli - il gruppo meno-piu' e il
   cestino - diventano caselle della griglia. */
/* ⚠️ !important: il tema fa flessibile ogni .input-group, e questo lo
   e' anche lui - restava una casella sola con dentro quantita' e
   cestino, e le colonne assegnate ai figli non contavano niente. */
.opc_shoppingcart .cart_list_item .quantity-section > .bootstrap-touchspin,
.opc_shoppingcart .cart_list_item .bootstrap-touchspin {
    display: contents !important;
}

/*
  I QUATTRO COMANDI DI DESTRA VANNO DALLA PRIMA RIGA ALL'ULTIMA, e
  align-self li mette a meta' altezza: cosi' restano incolonnati fra
  loro e centrati rispetto a tutta la scheda, che sia alta due righe o
  otto.
*/
.opc_shoppingcart .cart_list_item .bootstrap-touchspin > .input-group {
    grid-column: 3;
    grid-row: 1 / -1;
}

.opc_shoppingcart .cart_list_item a.remove-from-cart {
    grid-column: 5;
    grid-row: 1 / -1;
    justify-self: end;
}

.opc_shoppingcart .cart_list_item > .productTotalSection {
    grid-column: 4;
    grid-row: 1 / -1;
    order: 0;
    text-align: right !important;
}

.opc_shoppingcart .Cart-product-Image img {
    width: 88px !important;
    height: 88px !important;
    max-width: none !important;
    border: 1px solid var(--sd-linea);
    border-radius: 10px;
    background: var(--sd-fondo);
    object-fit: contain;
}

/* --- nome, riferimento, scelte -------------------------------------- */

/* Il titolo era centrato (regola del tema) e partiva molto piu' a
   destra delle righe sotto: adesso nome e scelte cominciano tutti dallo
   stesso punto. */
.opc_shoppingcart .shopping-cart-description,
.opc_shoppingcart .shopping-cart-description p,
.opc_shoppingcart .shopping-cart-description .product-title {
    margin: 0;
    text-align: left !important;
}

.opc_shoppingcart .shopping-cart-description .product-title a {
    color: var(--sd-inchiostro) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.opc_shoppingcart .shopping-cart-description .product-title a:hover {
    color: var(--sd-arancio-scuro) !important;
}

.opc_shoppingcart .product_reference {
    display: block;
    margin-top: 2px;
    color: #9aa0a6;
    font-size: 12.5px;
}

/*
  LE SCELTE DEL CLIENTE. Erano tutte in maiuscoletto grassetto: cinque
  righe che gridavano piu' del nome del prodotto. Qui l'etichetta e'
  grigia e leggera, il valore resta scuro - si legge "cosa" e "quanto"
  in un colpo d'occhio.
*/
.opc_shoppingcart .shopping-cart-description p b {
    color: var(--sd-grigio);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.opc_shoppingcart .shopping-cart-description p:not(.product-title) {
    margin-top: 3px;
    color: var(--sd-inchiostro);
    font-size: 13px;
    line-height: 1.45;
}

/* --- prezzo unitario ------------------------------------------------ */

.opc_shoppingcart .shopping-product-price,
.opc_shoppingcart .productTotalSection {
    text-align: right !important;
    white-space: nowrap;
}

/*
  VIA LE DICITURE DENTRO LE RIGHE. "Prezzo unitario" e "Totale" ripetuti
  su ogni articolo non dicono niente che non si capisca dalla posizione,
  e su un carrello di dieci righe sono venti scritte in piu'.
*/
.opc_shoppingcart .unit-price-text,
.opc_shoppingcart .total-price-text {
    display: none !important;
}

.opc_shoppingcart .cart-product-price .price {
    color: var(--sd-grigio);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Il totale della riga e' quello che conta: arancione e piu' grande del
   prezzo unitario. */
.opc_shoppingcart .productTotalSection .price,
.opc_shoppingcart .productTotalSection .cart-product-price {
    color: var(--sd-arancio-scuro);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* --- quantita' ------------------------------------------------------ */

/*
  La quantita' e' un "touchspin" di Bootstrap: due pulsanti dentro
  altrettanti span, con in mezzo il campo. Si vestono in modo che
  sembrino un gruppo solo: meno, numero, piu'.
*/
/*
  ⚠️ IL CAMPO DELLA QUANTITA' ERA LARGO 137 PIXEL. E' un .form-control
  di Bootstrap, che di regola occupa tutta la larghezza disponibile: in
  una colonna larga si allargava di conseguenza, e il gruppo
  meno-numero-piu' diventava una barra da 200 pixel in mezzo alla riga.
  Qui il gruppo si stringe sul contenuto e il campo ha una misura sua.
*/
.opc_shoppingcart .cart_list_item .bootstrap-touchspin > .input-group {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    max-width: none;
}

/* I due campi nascosti che il touchspin si porta dietro non devono
   occupare spazio. */
.opc_shoppingcart .cart_list_item .bootstrap-touchspin > .input-group > input:not(.quantitybox) {
    display: none !important;
}

.opc_shoppingcart .quantity-section input.quantitybox {
    flex: none !important;
    width: 46px !important;
    max-width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid var(--sd-linea);
    border-radius: 8px;
    background: #fff;
    color: var(--sd-inchiostro);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.opc_shoppingcart .quantity-section .input-group-btn > button,
.opc_shoppingcart .quantity-section .input-group-btn > * {
    display: grid !important;
    place-items: center;
    width: 34px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 15px !important;
    border: 1px solid var(--sd-linea) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--sd-inchiostro) !important;
    box-shadow: none !important;
    transition: border-color .15s, color .15s;
}

.opc_shoppingcart .quantity-section .input-group-btn > *:hover {
    border-color: var(--sd-arancio) !important;
    color: var(--sd-arancio-scuro) !important;
}

/* --- il cestino ----------------------------------------------------- */

/*
  Grigio finche' non lo si guarda, rosso quando ci si passa sopra:
  togliere un articolo non deve essere un gesto distratto.

  ⚠️ IL DISEGNO DEL CESTINO STAVA PIU' IN ALTO DEGLI ALTRI, e la casella
  era gia' centrata: a essere fuori posto era il segno dentro la
  casella, appoggiato in cima alla propria riga di testo (il carattere
  e' alto 14 pixel dentro uno spazio da 27). Il contenitore diventa
  flessibile e il segno si centra da se'.
*/
.opc_shoppingcart a.remove-from-cart,
.opc_shoppingcart .quantity-section a,
.opc_shoppingcart .cart_quantity_delete {
    /* ⚠️ !important sul display: il tema rende blocco ogni ancora, e
       misurato vinceva lui - il contenitore restava un blocco, il
       centraggio non si applicava e il disegno del cestino restava
       appoggiato in cima. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 34px;
    height: 34px;
    margin-left: 6px;
    border-radius: 8px;
    color: #9aa0a6;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.opc_shoppingcart a.remove-from-cart > i,
.opc_shoppingcart .quantity-section a > i {
    display: block;
    line-height: 1;
}

.opc_shoppingcart a.remove-from-cart:hover,
.opc_shoppingcart .quantity-section a:hover,
.opc_shoppingcart .cart_quantity_delete:hover {
    background: #fdeceb;
    color: #c0392b;
}

/* =====================================================================
   I TOTALI IN FONDO

   ⚠️ .shopping-cart-totals NON SONO I TOTALI: e' il contenitore
   dell'ELENCO dei prodotti - il nome se l'e' scelto supercheckout, e ha
   dentro le 43 righe, non una cifra. I totali veri sono due elementi
   piu' sotto, e sono ancora un altro paio di maniche:

       table.supercheckout-totals   parziale, spedizione, IVA
       .rewardsection .form-coupon  il buono sconto
       .rewardsection .totalAmount  l'importo totale

   Com'era: ognuno di questi largo quanto tutto il riquadro, con
   l'importo totale steso da un bordo all'altro - l'etichetta appiccicata
   a sinistra e la cifra appiccicata a destra, a ottocento pixel di
   distanza - e i numeri che toccavano il bordo del riquadro.

   Com'e': una colonnina da 340 pixel appoggiata a destra, dove le tre
   voci, il buono e il totale sono incolonnati fra loro e staccati dal
   bordo. Il totale e' arancione e grande come nel carrellino in alto:
   la stessa cifra si veste allo stesso modo in tutto il negozio.
   ===================================================================== */

.opc_shoppingcart .shopping-cart-totals {
    padding: 16px 20px 18px;
    border-top: 1px solid var(--sd-linea);
    background: var(--sd-fondo);
}

.opc_shoppingcart .shopping-cart-totals table {
    width: 100%;
    margin: 0;
}

.opc_shoppingcart .shopping-cart-totals td,
.opc_shoppingcart .shopping-cart-totals .cart_total_label {
    padding: 6px 0;
    border: 0;
    color: var(--sd-grigio);
    font-size: 14px;
}

.opc_shoppingcart .shopping-cart-totals td:last-child,
.opc_shoppingcart .shopping-cart-totals .cart_total_price {
    color: var(--sd-inchiostro);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* --- la colonnina delle voci ----------------------------------------- */

.opc_shoppingcart table.supercheckout-totals {
    /* ⚠️ max-width con i venti pixel gia' tolti: su un riquadro stretto
       la colonnina da 340 lo riempiva tutto, e le etichette finivano
       appiccicate al bordo sinistro. Cosi' il respiro c'e' da tutte e
       due le parti, a qualunque larghezza. */
    width: 340px !important;
    max-width: calc(100% - 40px);
    margin: 4px 20px 0 auto !important;
    border: 0 !important;
}

.opc_shoppingcart table.supercheckout-totals td {
    padding: 5px 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px;
}

.opc_shoppingcart table.supercheckout-totals td.title {
    color: var(--sd-grigio);
    font-weight: 400;
    text-align: left !important;
}

.opc_shoppingcart table.supercheckout-totals td.value {
    width: 130px;
    color: var(--sd-inchiostro);
    font-weight: 600;
    text-align: right !important;
    white-space: nowrap;
}

/* --- il buono sconto -------------------------------------------------- */

.opc_shoppingcart .rewardsection .form-coupon {
    margin: 0 !important;
}

.opc_shoppingcart .rewardsection .form-coupon .input-group {
    width: 340px !important;
    max-width: calc(100% - 40px);
    margin: 10px 20px 0 auto !important;
}

/* --- l'importo totale ------------------------------------------------- */

.opc_shoppingcart .rewardsection .totalAmount h3 {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    /* Su uno schermo stretto l'etichetta e' lunga: invece di uscire dal
       riquadro, la cifra va a capo. */
    flex-wrap: wrap;
    gap: 4px 14px;
    width: 340px;
    max-width: calc(100% - 40px);
    margin: 12px 20px 4px auto !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--sd-linea);
    color: var(--sd-inchiostro);
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.opc_shoppingcart .rewardsection .totalAmount h3 .amountMoney {
    color: var(--sd-arancio-scuro) !important;
    font-size: 21px !important;
    font-weight: 700;
    white-space: nowrap;
}

.opc_shoppingcart .rewardsection .totalAmount {
    padding-bottom: 6px;
}

/* =====================================================================
   TELEFONO - la scheda si apre in verticale

   ⚠️ QUI IL TELEFONO ERA ROTTO, e non per la modifica di oggi: nel
   riquadro da 375 pixel la colonna del testo risultava larga ZERO
   (misurata), col nome del prodotto incolonnato una lettera per riga e
   i prezzi che sbordavano fuori dalla scheda. Il motivo: qui si
   ridicevano solo le colonne - due invece di sei - ma i pezzi
   continuavano a chiedere la terza, la quarta, la quinta. La griglia
   quelle colonne le crea lo stesso, in fondo, e le ricava dallo spazio
   dell'unica elastica, che si e' ristretta fino a sparire.
   Ora il posto di ogni pezzo si ridice per intero.
   ===================================================================== */

@media (max-width: 767px) {

    /*
      QUATTRO COLONNE, E LA RIGA DI FONDO STA SU UNA LINEA SOLA.

      Prima erano tre, e i due prezzi finivano incolonnati uno sopra
      l'altro a destra: il prezzo unitario si ritrovava da solo su una
      riga vuota, la quantita' su un'altra, e la scheda sembrava
      sparpagliata - segnalato. Con una colonna in piu' quantita',
      prezzo unitario e totale stanno tutti e tre sulla stessa linea, in
      fondo alla scheda, come sul computer.

      I conti su 375 pixel: 14 di margine per parte lasciano 347; la
      figura ne prende 64, i due prezzi un centinaio in due, e al testo
      ne restano 130 - piu' i 12 di distanza fra una colonna e l'altra.
      La riga della quantita', che occupa le prime due colonne, ne ha
      206 per un gruppo che ne chiede 99.
    */
    .opc_shoppingcart .cart_list_item {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        column-gap: 12px;
        padding: 14px;
    }

    .opc_shoppingcart .Cart-product-Image img {
        width: 64px !important;
        height: 64px !important;
    }

    /* Il nome resta in cima e comincia dal bordo della figura, come sul
       computer; il cestino gli sta all'altezza, in fondo a destra. */
    .opc_shoppingcart .cart_list_item .shopping-cart-description > .product-title {
        grid-column: 1 / 3;
    }

    .opc_shoppingcart .cart_list_item .shopping-cart-description > p {
        grid-column: 2 / -1;
    }

    .opc_shoppingcart .cart_list_item a.remove-from-cart {
        grid-column: 3;
        grid-row: 1;
        align-self: start !important;
        margin: 0 !important;
    }

    /* In fondo alla scheda, tutti e tre sulla stessa linea: la
       quantita' a sinistra, il prezzo unitario e il totale a destra. */
    .opc_shoppingcart .cart_list_item .bootstrap-touchspin > .input-group {
        grid-column: 1 / 3;
        grid-row: 15;
        justify-self: start;
        margin-top: 10px !important;
    }

    .opc_shoppingcart .cart_list_item > .productTotalSection {
        grid-column: 3;
        grid-row: 15;
        margin-top: 10px !important;
    }

    /* La figura si ferma sopra la riga dei prezzi. */
    .opc_shoppingcart .cart_list_item > .Cart-product-Image {
        grid-row: 2 / 15;
    }

    /*
      IL GRUPPO DELLA QUANTITA' SI STRINGE. Sui 347 pixel utili di un
      telefono i tre pezzi della riga di fondo - quantita', prezzo
      unitario, totale - stavano dentro per nove pixel: il prezzo
      finiva appiccicato al pulsante "piu'". Qui i pulsanti passano da
      34 a 30 e il numero da 46 a 40: si guadagnano venti pixel, che
      diventano lo spazio fra i due gruppi.
    */
    /* ⚠️ Un quinto piu' piccoli di quelli del computer, su richiesta: su
       un telefono in mano il gruppo meno-numero-piu' occupava troppa
       riga. Sotto queste misure il dito comincia a sbagliare bersaglio,
       quindi non si scende oltre. */
    .opc_shoppingcart .quantity-section input.quantitybox {
        width: 32px !important;
        max-width: 32px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    .opc_shoppingcart .quantity-section .input-group-btn > button,
    .opc_shoppingcart .quantity-section .input-group-btn > * {
        width: 24px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    .opc_shoppingcart .cart_list_item .bootstrap-touchspin > .input-group {
        gap: 4px;
    }

    .opc_shoppingcart > h2 {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }

    .opc_shoppingcart .shopping-cart-totals {
        padding: 14px 16px 16px;
    }
}


/* ====================================================================
   IL CARRELLO VUOTO

   Era una riga di testo in mezzo al bianco - "Il tuo carrello e'
   vuoto." - e nessuna strada per uscirne se non il tasto indietro. E'
   una pagina che capita spesso: basta un clic sul carrello per
   curiosita'. Ora ha un riquadro e due strade.
   ==================================================================== */

/* ⚠️ QUI NON SI METTE NIENTE ADDOSSO AL CONTENITORE. supercheckout lo
   stampa SEMPRE, anche con il carrello pieno: dandogli un'imbottitura
   si apriva una striscia bianca di novanta pixel in cima al checkout,
   fra il menu e il carrello. Vista sul sito vero. Lo spazio lo prende
   il nostro riquadro, che esiste solo quando il carrello e' vuoto. */

.sd-vuoto {
    max-width: 520px;
    margin: 30px auto 60px;
    padding: 34px 28px;
    border: 1px solid #e4e6e8;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.sd-vuoto-ic {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 17px;
    background: #fff7ea;
}

.sd-vuoto-ic svg {
    width: 27px;
    height: 27px;
    stroke: #d98200;
    fill: none;
}

.sd-vuoto b {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 700;
    color: #1f2328;
}

.sd-vuoto p {
    margin: 0 auto 20px;
    max-width: 400px;
    font-size: 14px;
    line-height: 1.6;
    color: #6e7479;
}

.sd-vuoto-strade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-vuoto-btn {
    padding: 12px 24px;
    border-radius: 10px;
    background: #f5a623;
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
}

.sd-vuoto-btn:hover {
    background: #d98200;
}

.sd-vuoto-alt {
    padding: 12px 20px;
    border: 1px solid #e4e6e8;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #3a4046 !important;
    text-decoration: none !important;
}

.sd-vuoto-alt:hover {
    border-color: #c8ccd0;
}