/* =============================================================================
   CARRELLO — foglio di stile della pagina /cart
   Estratto da tpl/cart-page.html il 2026-08-01 (voce 5.9 del piano di refactor).

   IL FILE E' DIVISO IN DUE PARTI, e la divisione non e' cosmetica:

   PARTE 1 — BASE. Regole che descrivono il carrello in quanto tale: griglia,
             tipografia, aree di tocco, comportamento responsive. Sono
             riutilizzabili su un altro negozio cambiando solo i colori.

   PARTE 2 — ADATTAMENTI AL TEMA. Regole che esistono SOLO per neutralizzare
             il tema di questo sito. In un progetto vanilla non servono e anzi
             confondono: non c'e' nulla da annullare. NON vanno esportate.

   Codice rimosso in fase di estrazione perche' non usato da alcun markup:
   `.rowcart__title*`, `.rowcart__discount*` (il coupon e' passato al checkout
   con la 5.20), `.errorContainer`, `#errorModal .modal-footer*` (quel modale
   sta in checkout.html, non qui).
   ========================================================================== */


/* =============================================================================
   PARTE 1 — BASE (portabile)
   ========================================================================== */

/* -- Comandi a icona ---------------------------------------------------------
   L'icona resta di 22px, ma l'area sensibile al tocco arriva a 44x44 (linea
   guida Apple; il minimo WCAG 2.5.8 e' 24x24). Prima erano <div> di ~22px: su
   smartphone si sbagliava bersaglio, e i pulsanti + / - sono adiacenti.
   Niente margini negativi per "recuperare" l'altezza: farebbero sbordare l'area
   di tocco fuori dalla cella, sovrapponendola a quella della riga vicina - un
   problema peggiore del bersaglio piccolo. */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  /* Toglie il ritardo di attesa del doppio-tap-zoom e la selezione del testo
     durante i tocchi ripetuti. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.iconbtn > i {
  font-size: 22px;
  line-height: 1;
  pointer-events: none; /* il target del click e' sempre il button, non l'icona */
  transition: transform .08s ease-out;
}
/* Riscontro immediato al tocco: senza :hover (che sul touch non esiste)
   resterebbe il dubbio di non aver premuto. */
.iconbtn:active > i {
  transform: scale(.88);
}
.iconbtn:focus-visible {
  outline: 2px solid #1f6feb;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Durante la chiamata all'API il pulsante e' disabilitato: evita i tocchi
   ripetuti che facevano perdere un incremento. */
.iconbtn[disabled] {
  opacity: .45;
  cursor: default;
}
.iconbtn[disabled] > i {
  transform: none;
}

/* -- Stepper quantita' ------------------------------------------------------ */
.qt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.qt .qtminus,
.qt .qtplus,
.productdel {
  cursor: pointer;
}

/* -- Righe e totali --------------------------------------------------------- */
.rowcart {
  padding: 1rem 0rem;
  border-bottom: 1px solid #e1e1e1;
}
.column__price {
  text-align: right;
}
.rowcart__total,
.rowcart__total_discount {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-areas: "totaltitle totaltitle totaltitle totaltitle totaltitle totaltitle totaltitle totaltitle totalprice totalprice";
}
@media screen and (max-width: 909px) {
  .rowcart__total,
  .rowcart__total_discount {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas: "totaltitle totaltitle totaltitle totaltitle totaltitle totalprice totalprice totalprice totalprice";
  }
}
.rowcart__total .total__title,
.rowcart__total_discount .total__title_discount {
  grid-area: totaltitle;
}
.rowcart__total .total__price,
.rowcart__total_discount .total__price_discount {
  grid-area: totalprice;
  white-space: nowrap;
  padding-right: 20px;
  color: #000;
}

/* -- Tasto di avanzamento ----------------------------------------------------
   Desktop: allineato a destra, sulla stessa colonna dei totali che stanno
   sopra, e staccato dalla lista prodotti. */
.cartcta {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5rem;
}
.cartcta .confirmcart {
  margin: 0;
}

/* Su smartphone e tablet il tasto e' una barra che segue la pagina: con piu'
   prodotti finiva sotto la piega e bisognava scorrere fino in fondo. */
@media screen and (max-width: 1199.98px) {
  .cartcta {
    position: fixed;   /* vedi PARTE 2: sticky non funziona su questo tema */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    /* Il margine serve solo al desktop: qui la barra e' ancorata al viewport e
       un margine la staccherebbe dal bordo inferiore. */
    margin-top: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e7e7e7;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
  }
  .cartcta .confirmcart {
    width: 100%;
  }
}

/* -- Carrello a schede sotto i 1200px ----------------------------------------
   Modello di riferimento: il carrello mobile di Amazon - immagine a sinistra,
   nome e prezzo incolonnati a destra sullo stesso asse, comandi raggruppati in
   fondo alla scheda, pesi tipografici leggeri.

   Soglia 1199.98px, MISURATA: la tabella entra nel contenitore solo da 1200px
   in su (1170 su 1170). Vedi PARTE 2 per il perche' del valore. */
@media screen and (max-width: 1199.98px) {

  .table-cart,
  .table-cart tbody,
  .table-cart tr,
  .table-cart td {
    display: block;
    width: auto;
  }

  /* Intestazioni tolte alla vista ma NON all'accessibilita': con display:none
     le colonne perderebbero il nome anche per gli screen reader, che grazie ai
     role= dichiarati nel markup continuano invece a leggere la tabella. */
  .table-cart thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-cart tr.cartrow {
    display: grid;
    /* col1 = immagine, col2 = testo, col3 = spazio elastico, col4 = importo.
       Servono quattro tracce perche' nell'ultima riga convivono stepper,
       cestino e totale, e lo stepper deve partire dal bordo sinistro della
       scheda e non dalla colonna del testo.
       minmax(0,1fr) sulla centrale: senza il minimo a 0 non scende sotto il
       min-content del nome prodotto e spinge fuori le altre. */
    grid-template-columns: 96px auto 1fr auto;
    grid-template-areas:
      "img    name        name       name"
      "img    price       price      price"
      "qtcell qtcell      productdel priceqt";
    column-gap: 1rem;
    row-gap: 0.375rem;
    align-items: start;
    padding: 1.5rem 1.25rem;
    border: 0;
    border-bottom: 1px solid #e7e7e7;
    background: #fff;
  }
  .table-cart tr.cartrow:last-child {
    border-bottom: 0;
  }

  /* display:contents scioglie la cella prodotto: immagine e nome stanno nello
     stesso <td> e non potrebbero finire in due aree diverse della griglia.
     Cosi' diventano essi stessi elementi della griglia, senza spezzare il
     markup ne' cambiare il numero di colonne - il che avrebbe richiesto di
     toccare anche desktop e <thead>. */
  .table-custom.table-cart tr.cartrow > td.cartproduct {
    display: contents;
  }

  .table-cart td.cartproduct .table-cart-figure {
    grid-area: img;
    align-self: start;
    display: block;
    width: 96px;
    max-width: 96px;
    line-height: 0;   /* toglie lo spazio fantasma sotto l'immagine */
  }
  .table-cart td.cartproduct .table-cart-figure picture {
    display: block;
    line-height: 0;
  }
  .table-cart td.cartproduct .table-cart-figure img {
    width: 100%;
    height: auto;
    max-height: 96px;
    object-fit: contain;
  }

  .table-cart td.cartproduct .table-cart-link {
    grid-area: name;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;      /* il nome non e' un titolo: niente grassetto */
    line-height: 1.45;
    color: #151515;
    overflow-wrap: break-word;
  }

  /* Prezzo unitario: e' l'informazione cercata per prima, quindi piu' grande -
     ma in semibold, non in nero pieno. */
  .table-cart td.price {
    grid-area: price;
    margin-top: 0.125rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: #151515;
  }
  /* Suffisso "cad.": senza, il prezzo sotto al nome veniva letto come importo
     della riga, e la scheda mostrava due cifre non distinguibili. Sta in
     ::after e non nel markup perche' su desktop e' superfluo: li' c'e' la
     colonna "Prezzo" a dirlo. */
  .table-cart td.price[data-unit]::after {
    content: " " attr(data-unit);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #767676;
    white-space: nowrap;
  }

  /* Riga dei comandi: staccata dal blocco testo, elementi sulla stessa base. */
  .table-cart td.qtcell,
  .table-cart td.productdel,
  .table-cart td.priceqt {
    margin-top: 1.125rem;
    align-self: center;
  }

  /* Stepper come pillola bordata, sul modello del riferimento. */
  .table-cart td.qtcell {
    grid-area: qtcell;
    justify-self: start;
  }
  .table-cart td.qtcell .qt {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d5d9d9;
    border-radius: 999px;
    background: #fff;
    padding: 0 0.25rem;
  }
  .table-cart td.qtcell .qtnumber {
    min-width: 2rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #151515;
  }

  /* Cestino: stessa forma della pillola, accanto allo stepper.
     `width: 44px` esplicita: con justify-self:end la cella diventa fit-content
     e si dimensionerebbe sul contenuto intrinseco dell'icona (~8px), lasciando
     sbordare il pulsante da 44px sopra i comandi vicini. */
  .table-cart td.productdel {
    grid-area: productdel;
    justify-self: start;
  }
  .table-cart td.productdel .delrowcart {
    border: 1px solid #d5d9d9;
    border-radius: 999px;
    background: #fff;
  }

  /* Totale di riga: qui l'etichetta serve, altrimenti sarebbe un secondo
     importo indistinguibile dal prezzo unitario. */
  .table-cart td.priceqt {
    grid-area: priceqt;
    justify-self: end;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: #151515;
    white-space: nowrap;
  }
  .table-cart td.priceqt[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #767676;
  }
}

/* -- Tabella carrello, versione desktop (da 1200px) ------------------------- */
@media screen and (min-width: 1200px) {
  /* Righe divisorie continue: con `border-collapse: collapse` il bordo sulle
     celle produce una linea unica che attraversa la riga dalla foto fino al
     subtotale. Sulla riga (`tr`) non funzionerebbe: in una tabella collapsed i
     bordi di riga vengono assorbiti da quelli di cella. */
  .table-cart tbody tr.cartrow > td {
    border-bottom: 1px solid #e7e7e7;
  }
  .table-cart tbody tr.cartrow:last-child > td {
    border-bottom: 0;
  }
}

/* -- Utility ---------------------------------------------------------------- */
/* Visibile agli screen reader, non a schermo. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* =============================================================================
   PARTE 2 — ADATTAMENTI AL TEMA (NON esportare)

   Tutto quello che segue esiste per annullare regole del tema di questo sito.
   Su un progetto nuovo non serve: non c'e' nulla da annullare, e copiarlo
   porterebbe complessita' senza il motivo che l'ha generata.
   ========================================================================== */

@media screen and (max-width: 1199.98px) {

  /* [ANTI-TEMA] Il contenitore del tema fa scorrere la tabella in orizzontale.
     Nel layout a schede non c'e' piu' nulla da far scorrere. */
  .table-custom-responsive {
    overflow-x: visible;
  }

  /* [ANTI-TEMA] LA REGOLA CHIAVE.
     La larghezza della tabella non la faceva il contenuto, ma il tema:
       .table-custom td            { min-width: 170px }
       .table-cart td:first-child  { width: 50%;  min-width: 280px }
       .table-cart td:nth-child(2),(4) { width: 13%; min-width: 100px }
       .table-cart td:nth-child(3) { min-width: 150px }
     Sono queste a produrre gli 850px minimi che mandavano la tabella a 787px
     dentro un contenitore di 335px. Accorciare i testi non serviva a nulla.
     La specificita' (0,4,1) supera sia `.table-cart td:first-child` (0,2,1)
     sia `.table-cart tbody tr td`. */
  .table-custom.table-cart tr.cartrow > td {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: transparent;
    font-size: 1rem;   /* >= 16px: sotto, iOS ingrandisce la pagina */
  }

  /* [ANTI-TEMA] `.table-cart-figure` del tema ha un fondo grigio #f5f5f5. */
  .table-cart td.cartproduct .table-cart-figure {
    background: transparent;
  }

  /* [ANTI-TEMA] Il tema ha `* + img { margin-top: 30px }`: qui scentrava
     l'immagine e allungava la scheda. */
  .table-cart td.cartproduct .table-cart-figure img {
    margin-top: 0;
  }

  /* [ANTI-TEMA] `.column__price { text-align: right }` e' pensata per la
     colonna prezzo della tabella; nella scheda il prezzo va allineato al nome. */
  .table-cart td.price {
    text-align: left;
  }

  /* [ANTI-TEMA] Il tema tiene i bottoni su una riga sola: con il conteggio
     ("Procedi all'ordine (3 articoli)") l'etichetta si allunga e su schermi
     stretti va mandata a capo invece che troncata. */
  .cartcta .confirmcart {
    white-space: normal;
  }

  /* [ANTI-TEMA] ⚠️ `position: sticky` NON funziona su questo tema: l'antenato
     `div.page` ha `overflow: hidden`, il che lo rende lo scrollport di
     riferimento e annulla l'aggancio al viewport. Il difetto e' silenzioso -
     l'elemento resta nel flusso e sembra solo "non funzionare".
     Da qui il `position: fixed` della PARTE 1, che pero' richiede di
     compensare l'ingombro della barra perche' non copra il fondo del footer. */
  .page {
    padding-bottom: 6rem;
  }
}

@media screen and (min-width: 1200px) {
  /* [ANTI-TEMA] Stesso fondo grigio della figura, anche in versione tabella:
     con le righe divisorie la separazione fra i prodotti la danno le linee. */
  .table-cart tr.cartrow .table-cart-figure {
    background: transparent;
  }
}

/* [ANTI-TEMA] NOTA SENZA REGOLA — la cella prodotto si chiama `cartproduct` e
   non `product` perche' il tema ha `.product::before`, pensata per le schede
   prodotto del negozio, che disegna un rettangolo #f5f5f5 in
   `position:absolute; inset:0`: applicata alla cella del carrello riempiva di
   grigio tutta la colonna foto+nome. Rinominare e' preferibile a neutralizzare
   la regola del tema caso per caso. Se un giorno si esporta questo foglio, il
   nome puo' tornare `product`. */