/* ============================================================
   Carrello e cassa. Il guscio condiviso (fascia, sistema form,
   pannello totali) sta in commerce.css.
   ============================================================ */

/* ---------- Impaginazione ----------
   .cart-layout, .cart-vuoto, .checkout-layout e .checkout-blocked stanno tutte
   sullo STESSO elemento che porta .container (main.css: padding: 0 clamp(1.25rem,
   4vw, 3rem)). Stessa specificità, questo foglio carica dopo: uno shorthand
   `padding: X 0` qui vincerebbe e azzererebbe il padding-left/right di .container,
   che a 1280px e sotto è l'unico margine laterale della pagina. Si dichiara quindi
   SOLO lo spazio verticale, con padding-block, lasciando sopravvivere il gutter
   orizzontale di .container. Non tornare allo shorthand `padding`. */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 980px) {
  .cart-layout { grid-template-columns: 1.6fr 1fr; }
}
/* woocommerce-layout.css impone float e larghezze fuori da ogni media query:
   sugli elementi di una grid i float sono inerti, le larghezze no. */
.cart-layout > .cart-layout__items,
.cart-layout > .cart-layout__side { float: none; width: auto; }

/* AGGIUNTA non presente nel testo dello Step 4 del brief, stesso schema di
   account.css: woocommerce-layout.css impone anche, più in profondità,
     .woocommerce .cart-collaterals .cart_totals,
     .woocommerce-page .cart-collaterals .cart_totals { float:right; width:48% }
   .cart_totals è la classe che il core cerca sul pannello totali (qui
   .totals-panel la porta insieme, vedi cart/cart-totals.php) ed è un
   discendente NORMALE di .cart-layout__side, non un item della grid: il float
   qui non è inerte, quindi senza contrastarlo il pannello si vedrebbe floated
   a destra e largo il 48% invece di riempire la colonna.
   Il selettore del core ha 3 classi, specificità (0,3,0). Un selettore a
   sole 2 classi (.cart-collaterals .cart_totals, specificità (0,2,0)) perde
   sempre contro di lui: a specificità diversa l'ordine di caricamento dei
   fogli di stile non conta, vince sempre il più specifico. Bisogna quindi
   ripetere lo stesso schema a 3 classi del core (.woocommerce / .woocommerce-page
   + .cart-collaterals .cart_totals): a quel punto la specificità è pari e
   decide l'ordine di caricamento, e shop.css carica dopo woocommerce-layout.css. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { float: none; width: auto; }

/* ---------- Riga: una confezione ---------- */
.cart-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .cart-line { grid-template-columns: 120px 1fr; gap: 1.75rem; }
}
.cart-line__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
}
.cart-line__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.cart-line__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.cart-line__qualifier {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}
.cart-line__badge {
  color: var(--bordeaux);
  border: 1px solid var(--bordeaux);
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
}
.cart-line__composition {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.cart-line__composition li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.cart-line__qty { color: var(--bordeaux); margin-right: 0.4rem; }

.cart-line__gift {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border-left: 3px solid var(--gold);
}
.cart-line__gift strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  margin-top: 0.25rem;
}
.cart-line__note {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

.cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.cart-line__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Contatore quantità: − campo + ----------
   I tre pezzi stanno dentro un unico riquadro: il bordo è del contenitore, il
   campo non ne ha uno proprio, e il fuoco accende tutto l'insieme.

   Il campo è un input[type=number] e finisce sotto il sistema form di
   commerce.css, che lo veste da campo indirizzo: `padding: .85rem 1rem` e
   `font-size: 1rem`. Ne usciva un riquadro alto e sproporzionato. La LARGHEZZA
   invece non era in discussione: il core impone
   `.woocommerce .quantity .qty { width: 3.631em }`, (0,3,0), che batteva già il
   `width: 100%` di commerce.css, (0,2,2) — tre classi contro due. Qui si
   riprendono entrambe con (0,3,1): le stesse tre classi del core più
   l'elemento, che decide a parità di classi. */
.woocommerce .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: #ffffff;
  transition: border-color 0.3s ease;
}
.woocommerce .quantity:focus-within { border-color: var(--bordeaux); }

.woocommerce .quantity input.qty {
  width: 2.75rem;
  border: 0;
  padding: 0.55rem 0.25rem;
  text-align: center;
  font-size: 0.95rem;
  /* Via le frecce native: il loro lavoro lo fanno i due pulsanti, e lasciarle
     significherebbe due comandi per la stessa cosa, uno dei quali invisibile
     finché non ci passi sopra. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Il fuoco lo mostra il riquadro intero (:focus-within qui sopra): un alone
   attorno al solo campo, dentro un bordo che già c'è, si vedrebbe doppio. */
.woocommerce .quantity input.qty:focus { outline: 0; }

.quantity__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.quantity__step:hover { background: var(--cream-deep); color: var(--bordeaux); }
.quantity__step:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: -2px; }
/* «Togli» usciva enorme, rosso e in grassetto. Il colpevole è il core, che
   tratta ogni `a.remove` come la crocetta tonda dei suoi carrelli:
     .woocommerce a.remove { display:block; font-size:1.5em; height:1em;
       width:1em; border-radius:100%; font-weight:700; color:var(--wc-red)!important }
   Vale (0,2,1) — due classi più l'elemento — contro la (0,1,0) di una sola
   classe nostra: perdeva su ogni dichiarazione, compresa la dimensione. Il
   nostro `a` porta entrambe le classi (`cart-line__remove remove`), quindi la
   regola lo prende in pieno.
   Qui si sale a (0,3,1), che batte il core senza dipendere dall'ordine dei
   fogli. Sul colore serve `!important`, perché `!important` si batte solo con
   `!important`; sul resto no. L'hover del core è (0,3,1) — le tre classi
   contano anche :hover — quindi il nostro hover ne aggiunge una: (0,4,1). */
.cart-line .cart-line__controls a.cart-line__remove {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faded) !important;
}
.cart-line .cart-line__controls a.cart-line__remove:hover {
  background: transparent;
  color: var(--bordeaux) !important;
  border-bottom-color: var(--bordeaux);
}

/* ---------- Azioni (coupon, aggiorna) ---------- */
/* I due blocchi stanno sulla stessa riga, ai due estremi. Il codice sconto può
   restringersi (`flex: 1 1`) perché con una base rigida i due insiemi
   superavano di pochi pixel la colonna e «Aggiorna il carrello» andava a capo
   da solo, allineato a destra sotto il nulla: era quel disallineamento.
   Quando lo schermo è davvero stretto la riga va a capo per davvero, e
   `space-between` lascia il secondo blocco a sinistra invece di spingerlo
   all'estremo opposto di una riga vuota — cosa che un margine automatico
   avrebbe fatto. */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-top: 1.75rem;
}
.cart-actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  flex: 1 1 18rem;
}

/* Il codice sconto finiva su tre righe — etichetta, campo, pulsante — perché
   il campo è un input[type=text] e prendeva `width: 100%` dal sistema form di
   commerce.css: da solo riempiva la riga del flex e spingeva giù il pulsante.
   Qui l'etichetta tiene una riga sua (è una micro-etichetta maiuscola, sta
   sopra come nel resto dei form) e campo e pulsante stanno affiancati.
   Stesso conto di specificità del campo quantità: tre classi più l'elemento. */
.cart-actions .coupon label { flex: 1 0 100%; }
/* Il prefisso `.woocommerce` non è decorativo: il sistema form ha una variante
   che parte dal <body>, `.woocommerce-page .site-main form input[type=text]`,
   che vale (0,3,2). Senza prefisso questa regola resterebbe a (0,3,1) e
   perderebbe, tornando a `width: 100%`. */
.woocommerce .cart-actions .coupon input.input-text { width: auto; flex: 1 1 8rem; min-width: 0; }

/* Una sola altezza per i tre comandi della riga. Vengono da tre sistemi
   diversi — il campo dal sistema form di commerce.css, «Applica» dal bottone
   di WooCommerce, «Aggiorna il carrello» dal .btn del tema — ciascuno con il
   suo padding e il suo corpo di testo. Allineati in basso mostravano tre
   bordi superiori a quote diverse: era quel disallineamento.
   Il padding verticale scende sotto la soglia, così l'altezza la decide
   `min-height` per tutti e tre e nessuno la supera. Solo le longhand
   verticali: quelle orizzontali stanno nelle shorthand di origine e devono
   sopravvivere, altrimenti i bottoni perdono i loro 2rem ai lati. */
.woocommerce .cart-actions .coupon input.input-text,
.woocommerce .cart-actions .coupon .button,
.woocommerce .cart-actions > .btn {
  min-height: 3.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ---------- Pannello totali ---------- */
.totals-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.totals-panel__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0 0 1.25rem;
}
.totals-panel__rows { display: grid; gap: 0.85rem; }
.totals-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  color: var(--ink-soft);
}
.totals-panel__row .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: right; }
.totals-panel__note {
  margin: -0.25rem 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faded);
}
.totals-panel__row--total {
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
  margin-top: 0.35rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.wc-proceed-to-checkout { margin-top: 1.5rem; }
.wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; }

/* ---------- Carrello vuoto ----------
   Rinominate da .cart-empty a .cart-vuoto: .cart-empty è la classe che il core
   WooCommerce mette sul proprio messaggio (wc_empty_cart_message(), stampato
   dentro questo stesso container da cart-empty.php) — la stessa classe sulle due
   cose faceva prendere al messaggio del core il padding e il text-align:center
   pensati per il blocco del tema. */
.cart-vuoto { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.cart-vuoto__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* Cassa bloccata (woocommerce/checkout/cart-errors.php): lì sopra al pulsante
   c'è un nostro <p>, non il messaggio del core, e il pulsante gli stava addosso. */
.cart-vuoto > p + .cart-vuoto__actions { margin-top: 1.75rem; }

/* ---------- Cassa ---------- */

/* .checkout-intro avvolge woocommerce_before_checkout_form (login + coupon +
   notice), che prima di questa correzione uscivano fuori da ogni container, a
   filo schermo. commerce.css dà già a .woocommerce-notices-wrapper (quando non
   vuoto) una larghezza massima e un padding propri, pensati per emulare il
   container quando i notice escono fuori da tutto: dentro .checkout-intro
   (che è già un .container) quel trattamento si sommerebbe al padding del
   container, indentando i notice due volte. Lo riportiamo a larghezza e
   padding neutri.
   Specificità: 4 classi (.woocommerce-checkout, .checkout-intro,
   .woocommerce-notices-wrapper, lo pseudo :not(:empty), che vale come :empty)
   contro le 3 della regola equivalente in commerce.css — batte a prescindere
   dall'ordine di caricamento dei fogli. */
.woocommerce-checkout .checkout-intro .woocommerce-notices-wrapper:not(:empty) {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* checkout-blocked: unico contenuto della pagina quando la registrazione è
   obbligatoria e l'utente non è connesso (form-checkout.php esce con un
   return subito dopo). Spaziatura verticale e trattamento tipografico da
   lead. Stesso schema di .cart-vuoto qui sopra: padding-block, non lo
   shorthand, per non azzerare il gutter orizzontale di .container. */
.checkout-blocked { padding-block: clamp(3rem, 6vw, 5rem); }
.checkout-blocked p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 980px) {
  .checkout-layout { grid-template-columns: 1.6fr 1fr; }
}
.checkout-layout > .checkout-layout__main,
.checkout-layout > .checkout-layout__side { float: none; width: auto; }

/* col2-set è la coppia fatturazione/spedizione di WooCommerce: sopra i 980px
   sta già dentro la colonna sinistra, quindi le due sotto-colonne si impilano. */
.woocommerce-checkout .col2-set { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 { float: none; width: auto; }

/* CORREZIONE rispetto al testo del brief: woocommerce-layout.css porta anche,
   sullo stesso .col2-set, il clearfix storico per il layout a float:
     .woocommerce .col2-set::after, .woocommerce .col2-set::before,
     .woocommerce-page .col2-set::after, .woocommerce-page .col2-set::before
     { content:" "; display:table }
   Un elemento generato da ::before/::after NON è invisibile al motore di grid:
   per la spec (i chip generati da pseudo-elementi entrano nell'albero dei box
   come se fossero figli reali) diventa un grid item a tutti gli effetti. Qui
   .col2-set non dichiara grid-template-columns, quindi ha una sola colonna
   implicita e ogni item finisce su una riga propria: col-1 e col-2 sarebbero
   preceduti e seguiti da due righe fantasma (il carattere spazio del clearfix),
   ciascuna alta quanto una riga di testo più il gap impostato sopra — uno
   spazio vuoto indesiderato sopra la fatturazione e sotto la spedizione.
   Specificità del core: due classi + uno pseudo-elemento, (0,2,1). La pareggiamo
   con .woocommerce-checkout (invece di .woocommerce/.woocommerce-page) + .col2-set
   + lo stesso pseudo-elemento, stessa (0,2,1): a parità decide l'ordine di
   caricamento, e shop.css carica dopo woocommerce-layout.css. Il clearfix non
   serve comunque più: i figli sono già float:none. */
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after { display: none; }

/* woocommerce.css (core WC) impone, sull'h3 che checkout/form-shipping.php genera
   sempre quando il carrello richiede un indirizzo di spedizione:
     .woocommerce-checkout .checkout .col-2 h3#ship-to-different-address
     { float:left; clear:none }
   Specificità (1,3,1): 1 ID, 3 classi (.woocommerce-checkout, .checkout, .col-2),
   1 elemento (h3). La neutralizzazione di col2-set qui sopra copre solo i figli
   diretti (col-1/col-2), non i loro discendenti: l'h3 resta floated. Ripetiamo lo
   stesso selettore — stessa specificità (1,3,1), quindi almeno pari — e decide
   l'ordine di caricamento: shop.css carica dopo il CSS del core. */
.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address { float: none; }

/* Ristretto ai soli titoli della colonna dati cliente (Fatturazione/Spedizione):
   prima toccava .woocommerce-checkout h3 senza restrizioni, specificità (0,1,1),
   che batteva .totals-panel__title (0,1,0) anche sul titolo del riepilogo,
   condiviso via markup con il carrello (cart/cart-totals.php). */
.woocommerce-checkout .col2-set h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0 0 1.25rem;
}

/* ---------- Riepilogo ordine (cassa) ----------
   Le righe le rende ora checkout/review-order.php, sovrascritto: schede come
   nel carrello invece della tabella a due colonne dell'originale, dove la
   composizione finiva dentro un <dl> e in colonna stretta si sfaldava. I
   totali riusano le classi .totals-panel__* del carrello. */
.order-review__items {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.order-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.25rem 0.85rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.order-line:last-child { padding-bottom: 0; border-bottom: 0; }

.order-line__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
}
.order-line__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}
.order-line__name .product-quantity { font-weight: 400; color: var(--ink-faded); }
.order-line__price {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}
.order-line__composition {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.order-line__gift {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--bordeaux);
}

/* La fascia introduttiva sta fra la testata «Cassa» e il modulo. Senza spazio
   sopra, il messaggio del codice promozionale toccava il bordo della fascia;
   sotto invece se ne sommavano due (il margine del messaggio e il padding
   della griglia), e il distacco era il doppio di quello sopra. */
.checkout-intro { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.checkout-intro > :last-child { margin-bottom: 0; }
.woocommerce-checkout .checkout-layout { padding-top: clamp(1.5rem, 3vw, 2rem); }

/* Il testo sulla privacy è una nota, non un paragrafo di pari peso: prima
   aveva lo stesso corpo della descrizione del metodo di pagamento e le
   rubava la scena. */
.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

#payment { margin-top: 1.5rem; }
#payment .place-order { margin-top: 1.25rem; }

/* woocommerce.css (core WC) impone, sullo stesso blocco pagamento:
     #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment
     { background: rgba(129,110,153,.14); border-radius: 5px }
   specificità (1,1,0): 1 ID (#payment) + 1 classe (.woocommerce-checkout). Il
   tema dichiara solo `#payment { margin-top: 1.5rem }` qui sopra, (1,0,0), e non
   tocca mai il background: il pannello pagamento resta un riquadro lilla ad
   angoli arrotondati dentro .totals-panel (--paper, angoli vivi). Pareggiamo la
   specificità con lo stesso prefisso .woocommerce-checkout già usato altrove in
   questo file (vedi #place_order più sotto): a quel punto decide l'ordine di
   caricamento, e shop.css carica dopo woocommerce.css.
   Stessa famiglia, stesso trattamento, per non pagarli due volte più avanti:
   - `.woocommerce #payment .form-row select { width: auto }` (core, (1,2,1))
     batte il sistema form condiviso di commerce.css: riportato a larghezza piena.
   - `ul.payment_methods { border-bottom: 1px solid rgba(104,87,125,.14) }` (core,
     stesso prefisso, (1,2,1)): sulla palette del tema (--line).
   - `div.payment_box { background-color: #dcd7e2 }` (core, (1,2,1)) e il suo
     ::before (il triangolino che punta al metodo selezionato): sulla palette
     del tema (--paper). */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment .form-row select {
  width: 100%;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--line);
}

/* Rientri laterali di troppo dentro il pannello. Il core mette `padding: 1em`
   su contenitori annidati — l'elenco dei metodi e il riquadro descrittivo — e
   quel rientro si somma a quello che .totals-panel ha già. Restano i soli
   spazi verticali: i laterali li dà il pannello, una volta sola.
   Le regole del core valgono (1,2,1): un ID, due classi, un elemento. Si
   ripetono con la stessa forma e decide l'ordine di caricamento, perché
   shop.css entra dopo woocommerce.css. */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.payment_box {
  padding-left: 0;
  padding-right: 0;
}

/* La riga finale — nota sulla privacy e «Effettua ordine» — è l'ULTIMA cosa
   dentro il pannello, e si portava dietro due spazi che nessuno vedeva
   sommarsi: `padding: 1em` dal core e `margin-bottom: 1.25rem` dal nostro
   sistema form, che la riconosce come `.form-row`. Sotto il pulsante restavano
   36px prima ancora del padding del pannello, cioè il fondo valeva il doppio
   dei lati. Azzerati entrambi: la distanza dal bordo la decide il pannello,
   come per ogni altro lato. Lo stacco in alto resta, e lo dà
   `#payment .place-order` qui sotto. */
.woocommerce-checkout #payment div.form-row {
  padding: 0;
  margin-bottom: 0;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 0;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--paper);
}

/* CORREZIONE rispetto al testo del brief: `#payment #place_order { width: 100%; }`
   da solo non basta. woocommerce-layout.css impone:
     .woocommerce #payment #place_order, .woocommerce-page #payment #place_order
     { float: right }
   due ID + una classe, specificità (2,1,0). Un selettore sui due soli ID,
   (2,0,0), perde SEMPRE contro questa regola, indipendentemente dall'ordine
   di caricamento dei fogli — a specificità diversa l'ordine non conta (stesso
   principio già applicato a .cart_totals qui sopra e in account.css). Senza
   questo aggiustamento il pulsante resterebbe floated a destra: essendo fuori
   dal flusso, .place-order non si espanderebbe più per contenerlo e il
   bottone finirebbe a cavallo del bordo inferiore di .totals-panel. Si
   aggiunge .woocommerce-checkout per pareggiare la specificità a (2,1,0):
   a quel punto decide l'ordine di caricamento, e shop.css carica dopo
   woocommerce-layout.css. */
.woocommerce-checkout #payment #place_order { float: none; width: 100%; }