/* ============================================================
   DART — carrello, checkout, conferma e schermate di attesa

   Sta in un foglio a parte perché è il flusso d'acquisto: si tocca
   di rado e, quando si tocca, conviene sapere che si sta mettendo
   le mani dove passano i soldi.
   ============================================================ */

.carrello,
.checkout-guscio,
.conferma { padding-block: 34px 60px; }

.carrello .sezione-testa h1,
.checkout-guscio .sezione-testa h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 400;
  margin: 8px 0 10px;
}

/* ========================= CARRELLO ========================= */

.carrello-righe {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-l);
  overflow: hidden;
}
.carrello .riga-carrello { border-bottom: 1px solid var(--linea); padding: 16px; }
.carrello .riga-carrello:last-of-type { border-bottom: 0; }

.rc-foto { flex: none; width: 74px; display: block; }
.rc-foto img { width: 74px; height: 92px; object-fit: cover; border-radius: var(--raggio); }
.carrello .rc-info h4 a { text-decoration: none; }
.carrello .rc-info h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* «Rimuovi» è una parola, non la × rossa di WooCommerce: il suo stile
   (cerchio di 1em) la spezzava in «Ri / m». Il colore di WooCommerce ha
   !important, e solo un !important lo scavalca. */
.woocommerce-js .riga-carrello a.remove.rimuovi {
  display: inline;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  font-size: 13px; font-weight: 400; line-height: inherit;
  text-align: left;
  color: var(--tenue) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-js .riga-carrello a.remove.rimuovi:hover {
  background: none;
  color: var(--terra) !important;
}
/* …e Astra ci disegna attorno un cerchio con ::before. */
.woocommerce-js .riga-carrello a.remove.rimuovi::before,
.woocommerce-js .riga-carrello a.remove.rimuovi::after { content: none; display: none; }

/* --- totali --- */
.carrello-totali { margin-top: 22px; }
/* WooCommerce mette i totali a destra al 48%: dentro la nostra colonna
   diventavano larghi due parole. La colonna la decide già il guscio. */
.woocommerce-js .carrello-totali .cart_totals { float: none; width: 100%; }
.cart_totals h2 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 600;
  margin: 0 0 12px;
}
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th,
.cart_totals td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
  font-weight: 400;
  font-size: 14.5px;
  vertical-align: top;
}
.cart_totals td { text-align: right; }
.cart_totals th { color: var(--tenue); }
.cart_totals .order-total th,
.cart_totals .order-total td {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--inchiostro);
  border-bottom: 0;
  padding-top: 15px;
}
ul#shipping_method { list-style: none; margin: 0; padding: 0; }
/* Astra rientra il testo con padding e text-indent negativo, pensati per
   un'impaginazione a blocco: con la riga in flex il pallino finiva sopra
   la prima lettera. */
ul#shipping_method li {
  padding: 4px 0;
  margin: 0;
  display: flex; gap: 8px; align-items: baseline; justify-content: flex-end;
  text-align: right;
}
ul#shipping_method li input[type="radio"] {
  margin: 0;
  flex: none;
  accent-color: var(--inchiostro);
  position: relative; top: 2px;
}
ul#shipping_method li label { text-indent: 0; padding: 0; margin: 0; }

.wc-proceed-to-checkout { margin-top: 20px; }
/* Il selettore è lungo apposta: Astra colora «.woocommerce-js a.button»,
   che con uno meno specifico vinceva e rendeva il bottone blu. */
.woocommerce-js .wc-proceed-to-checkout a.checkout-button,
.woocommerce-js .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-js .wc-proceed-to-checkout a.checkout-button:focus {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--crema);
  text-decoration: none;
  font-size: 15px; font-weight: 500;
}
.woocommerce-js .wc-proceed-to-checkout a.checkout-button:hover { opacity: .9; }

/* --- carrello vuoto --- */
.stato-vuoto { text-align: center; padding: 70px 20px; }
.stato-vuoto svg { width: 34px; height: 34px; color: var(--linea-forte); }
.stato-vuoto h1 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin: 16px 0 8px; }
.stato-vuoto p { color: var(--tenue); margin: 0 auto 24px; max-width: 34ch; }

/* ========================= CHECKOUT ========================= */

.checkout-colonne { display: grid; gap: 34px; }

/* Astra, da tablet in su, affianca modulo e riepilogo con float e
   percentuali (55% e 40%). Dentro le nostre colonne li stringeva di nuovo:
   il modulo diventava largo un terzo e il riepilogo usciva dalla pagina
   (visto il 18 settembre a 1024 px). Le colonne le fa già .checkout-colonne.
   Selettori lunghi apposta: quelli di Astra hanno un id e tre classi. */
.woocommerce-js.woocommerce-checkout .checkout-colonne #customer_details.col2-set,
.woocommerce-js.woocommerce-checkout .checkout-colonne #customer_details .col-1,
.woocommerce-js.woocommerce-checkout .checkout-colonne #customer_details .col-2,
.woocommerce-js.woocommerce-checkout .checkout-colonne #order_review_heading,
.woocommerce-js.woocommerce-checkout .checkout-colonne #order_review {
  float: none;
  width: 100%;
}
.woocommerce-js.woocommerce-checkout .checkout-colonne #order_review { margin: 0; padding: 0; }

.checkout-riepilogo h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#ship-to-different-address {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 600;
  margin: 26px 0 14px;
}
.checkout-riepilogo h3 { margin-top: 0; }

.woocommerce-checkout .form-row { margin-bottom: 12px; }
.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13px;
  color: var(--tenue);
  margin-bottom: 5px;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--crema);
  font: inherit;
  font-size: 16px;             /* sotto i 16px iOS ingrandisce da solo */
  color: var(--inchiostro);
}
.woocommerce-checkout textarea { min-height: 90px; }
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: 2px solid var(--salvia);
  outline-offset: -1px;
  border-color: var(--salvia);
}
.woocommerce-checkout .required { color: var(--terra); text-decoration: none; }

.checkout-riepilogo {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-l);
  padding: 20px;
  align-self: start;
}
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  font-weight: 400;
  font-size: 14.5px;
  vertical-align: top;
}
.woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--inchiostro);
  border-bottom: 0;
}

.wc_payment_methods { list-style: none; margin: 20px 0 0; padding: 0; }
/* WooCommerce mette il pallino prima dell'etichetta, non dentro: lo portiamo nel riquadro. */
.wc_payment_method { position: relative; }
.woocommerce-checkout #payment .wc_payment_method > input[type="radio"] {
  position: absolute; left: 15px; top: 16px; margin: 0;
}
.wc_payment_method > label {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 15px 15px 46px; margin-bottom: 9px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--sabbia);
  cursor: pointer;
  font-size: 15px;
}
.wc_payment_method input[type="radio"] {
  accent-color: var(--inchiostro);
  width: 19px; height: 19px; flex: none;
}
.wc_payment_method .payment_box {
  background: var(--sabbia-2);
  border-radius: var(--raggio);
  padding: 13px 15px;
  font-size: 13.5px;
  color: var(--testo);
  margin: -4px 0 12px;
}
.wc_payment_method .payment_box p { margin: 0 0 6px; }
.wc_payment_method .payment_box p:last-child { margin-bottom: 0; }

#place_order {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--crema);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
}
#place_order:hover,
#place_order:focus { background: var(--inchiostro); color: var(--crema); opacity: .9; }
#place_order:disabled { opacity: .5; cursor: default; }
.woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--tenue); }

/* ========================= CONFERMA ========================= */

.conferma-testa { text-align: center; padding: 20px 0 34px; }
.conferma .segno {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--salvia-soft);
  color: var(--salvia);
  display: grid; place-items: center;
  margin: 0 auto 22px;
}
.conferma .segno svg { width: 30px; height: 30px; }
.conferma .segno--errore { background: var(--terra-soft); color: var(--terra); }
.conferma-testa h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 400;
  margin-bottom: 12px;
}
.conferma-testa p { color: var(--tenue); margin: 0 auto; max-width: 42ch; }
.conferma-azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.conferma-riepilogo {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-l);
  overflow: hidden;
}
.conferma-riepilogo li {
  background: var(--crema);
  padding: 15px 18px;
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
.conferma-riepilogo .k { color: var(--tenue); font-size: 14px; }
.conferma-riepilogo strong {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--inchiostro);
  font-weight: 400;
  text-align: right;
}

.conferma-passi { margin-bottom: 34px; }
.conferma-passi h2,
.conferma-dettagli h2 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 600;
  margin: 0 0 16px;
}
.conferma-passi ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.conferma-passi li { display: flex; gap: 14px; align-items: flex-start; }
.conferma-passi .numero {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--crema);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}
.conferma-passi strong { display: block; color: var(--inchiostro); font-size: 15.5px; }
.conferma-passi p { margin: 3px 0 0; font-size: 14.5px; color: var(--tenue); }

.conferma-dettagli { margin-bottom: 26px; }
.conferma-dettagli table { width: 100%; border-collapse: collapse; }
.conferma-dettagli th,
.conferma-dettagli td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
  font-weight: 400;
  font-size: 14.5px;
}
.conferma-dettagli td { text-align: right; }
.conferma-dettagli tfoot tr:last-child th,
.conferma-dettagli tfoot tr:last-child td {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--inchiostro);
}

.conferma-aiuto {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--salvia-soft);
  color: #46543F;
  border-radius: var(--raggio-l);
  padding: 16px 18px;
  font-size: 14.5px;
}
.conferma-aiuto svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.conferma-aiuto strong { display: block; color: var(--inchiostro); }
.conferma-aiuto p { margin: 3px 0 0; }

/* Come pagare: il contenuto lo stampa il gateway (coordinate del bonifico,
   istruzioni della carta), il contenitore è nostro. Vestire il markup del
   gateway direttamente non regge agli aggiornamenti di WooCommerce. */
.conferma-pagamento {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--salvia);
  border-radius: var(--raggio-l);
  padding: 18px 20px;
  margin-bottom: 26px;
}
.conferma-pagamento h2 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 600;
  margin: 0 0 12px;
}
.conferma-pagamento p,
.conferma-pagamento li {
  font-size: 15px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.conferma-pagamento ul,
.conferma-pagamento ol { list-style: none; margin: 0; padding: 0; }
.conferma-pagamento h3,
.conferma-pagamento .wc-bacs-bank-details-heading {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 14px 0 8px;
}

/* --- richiesta di fattura ---
   I due campi compaiono solo spuntando «Mi serve la fattura»: chi non la
   chiede vede il checkout di sempre. Niente JavaScript, basta :has().
   Sui browser che non lo conoscono i campi restano sempre visibili, che è
   un difetto estetico e non un blocco. */
.dart-fattura-scelta label.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--testo);
  cursor: pointer;
}
.dart-fattura-scelta input[type="checkbox"] {
  width: 19px; height: 19px;
  accent-color: var(--inchiostro);
  flex: none;
  margin: 0;
}
form.checkout:has(#billing_dart_fattura:not(:checked)) .dart-fattura-campo { display: none; }
.dart-fattura-campo .description { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 4px; }

/* Le schermate di attesa e lo scheletro del pannello stanno in dart.css:
   servono anche in catalogo e sulla scheda, non solo qui. */

/* =========================== DESKTOP =========================== */

@media (min-width: 860px) {
  .checkout-colonne {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }
  .checkout-riepilogo { position: sticky; top: 26px; }

  .carrello-guscio {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }
  .carrello-totali { margin-top: 0; position: sticky; top: 26px; }

  .conferma-riepilogo { grid-template-columns: repeat(2, 1fr); }
}

/* Ritiro in negozio: l'avviso «su appuntamento» sotto le opzioni di
   spedizione, nel carrello e al pagamento. Compare solo quando il cliente
   sceglie il ritiro, quindi deve saltare all'occhio senza spaventare. */
tr.dart-ritiro td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--linea);
  background: var(--sabbia-2, var(--sabbia));
  border-radius: var(--raggio);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--testo);
}