/**
 * Carrello, checkout e conferma d'ordine.
 *
 * WooCommerce classico arriva con la sua grafica del 2015: riquadri bianchi
 * con bordo azzurro, campi di sistema, pulsante viola. Su un tema a fondo
 * scuro il risultato e' illeggibile in mezza pagina, e questa e' l'unica del
 * sito in cui il cliente tira fuori la carta.
 *
 * Tutto costruito sui token del tema (--card, --ink, --line, --amber-fill),
 * che si ribaltano da soli in chiaro e in scuro: nessun colore fisso.
 */

/* Il contenitore delle pagine e' largo 820px, giusto per un testo da
   leggere. Carrello e checkout hanno due colonne e una tabella con cinque
   celle: in 820px il nome del prodotto andava a capo a ogni parola e il
   riepilogo finiva sopra la tabella. */
.woocommerce-cart .wrap,
.woocommerce-checkout .wrap,
.woocommerce-account .wrap,
.woocommerce-order-received .wrap{max-width:1140px;}

/* ------------------------------------------------------------------
   Impianto: dati a sinistra, riepilogo a destra che segue lo scorrimento.
   ------------------------------------------------------------------ */
.woocommerce-checkout form.checkout{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
  /* Le due righe vanno dichiarate: i dati di fatturazione occupano entrambe e,
     senza questo, il browser spalma la loro altezza fra le due. La seconda
     riga finiva a meta' pagina e il riepilogo nasceva li', lasciando un buco
     sotto "Il tuo ordine" che si chiudeva solo scorrendo, grazie allo sticky.
     Con "auto 1fr" la prima riga vale il titolo e la seconda prende il resto. */
  grid-template-rows:auto 1fr;
  gap:0 40px; align-items:start;
}
.woocommerce-checkout form.checkout > #customer_details{grid-column:1; grid-row:1 / span 2;}
.woocommerce-checkout form.checkout > #order_review_heading{grid-column:2; grid-row:1; margin:0 0 1rem;}
.woocommerce-checkout form.checkout > #order_review{grid-column:2; grid-row:2; position:sticky; top:96px;}
@media(max-width:900px){
  .woocommerce-checkout form.checkout{
    grid-template-columns:1fr; grid-template-rows:none; gap:28px;
  }
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review{grid-column:1; grid-row:auto; position:static;}
}
/* Le colonne interne di WooCommerce sono float al 48%: dentro la griglia
   lasciavano meta' spazio vuoto. */
.woocommerce #customer_details.col2-set{display:block;}
.woocommerce #customer_details .col-1,
.woocommerce #customer_details .col-2{width:100%; float:none;}

.woocommerce-checkout h3,
.woocommerce-cart h2,
#order_review_heading{
  font-family:var(--display); font-size:1.35rem; margin:0 0 1rem; color:var(--ink);
}

/* ------------------------------------------------------------------
   Avvisi: erano i riquadri bianchi col filetto azzurro di serie.
   ------------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-top:3px solid var(--amber);
  border-radius:14px; padding:1rem 1.2rem; margin:0 0 1.2rem;
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.woocommerce-message{border-top-color:var(--ok);}
.woocommerce-error{border-top-color:var(--ember);}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{position:static; margin:0; font-size:1.1rem;}
.woocommerce-message::before{color:var(--ok);}
.woocommerce-error::before{color:var(--ember);}
.woocommerce-info::before{color:var(--amber);}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a{color:var(--amber-ink);}
.woocommerce-message .button{margin-left:auto;}

/* ------------------------------------------------------------------
   Campi
   ------------------------------------------------------------------ */
.woocommerce form .form-row{margin:0 0 1.1rem; padding:0;}
.woocommerce form .form-row label{
  display:block; margin-bottom:.35rem;
  font-size:.88rem; font-weight:600; color:var(--ink);
}
.woocommerce form .form-row label .optional{color:var(--ink-2); font-weight:400;}
.woocommerce form .form-row .required{color:var(--ember); text-decoration:none;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single{
  width:100%; padding:.7rem .85rem !important;
  border:1px solid var(--line) !important; border-radius:10px !important;
  background:var(--card) !important; color:var(--ink) !important;
  font:inherit; font-size:.95rem; min-height:auto;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{color:var(--ink-2); opacity:1;}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none; border-color:var(--amber) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent);
}
/* Il riempimento automatico di Chrome ridipinge il campo di bianco: senza
   questo, su tema scuro, il testo inserito sparisce. */
.woocommerce form .form-row input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 60px var(--card) inset;
}
.woocommerce form .form-row .description{color:var(--ink-2); font-size:.85rem;}

/* Dati per il documento fiscale (blocco del plugin WooFic) */
.woofic-checkout{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:1.2rem 1.3rem; margin:0 0 1.4rem; color:var(--ink);
}
.woofic-checkout > h3,
.woofic-checkout > p:first-child{margin-top:0;}
/* ------------------------------------------------------------------
   Riepilogo dell'ordine
   ------------------------------------------------------------------ */
.woocommerce table.shop_table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin:0 0 1.2rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:.85rem 1.1rem; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); text-align:left;
}
.woocommerce table.shop_table thead th{
  background:color-mix(in srgb, var(--amber) 7%, var(--card));
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2);
}
.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child{text-align:right; white-space:nowrap;}
.woocommerce table.shop_table tfoot th{font-weight:500; color:var(--ink-2);}
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td{
  border-bottom:0; font-size:1.1rem; font-weight:700; color:var(--ink);
  background:color-mix(in srgb, var(--amber) 7%, var(--card));
}
.woocommerce table.shop_table .product-name a{color:var(--ink); font-weight:600;}

/* ------------------------------------------------------------------
   Pagamento
   ------------------------------------------------------------------ */
.woocommerce-checkout #payment{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--line); padding:1rem 1.1rem;
}
.woocommerce-checkout #payment ul.payment_methods li{
  margin:0 0 .4rem; list-style:none; color:var(--ink);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child{margin-bottom:0;}
.woocommerce-checkout #payment ul.payment_methods label{
  color:var(--ink); font-weight:600;
}
.woocommerce-checkout #payment div.payment_box{
  background:color-mix(in srgb, var(--ink) 5%, var(--card));
  color:var(--ink); border:1px solid var(--line); border-radius:12px;
  margin:.7rem 0 .2rem; padding:1rem;
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #payment div.payment_box p{color:var(--ink);}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{
  color:var(--ink-2); font-size:.85rem;
}
.woocommerce-checkout #payment .place-order{padding:1.1rem;}

/* Pulsanti: quello d'ordine era viola di sistema. */
/* Stessa forma dei pulsanti del resto del sito (.btn): raggio 10px, non a
   pillola. Erano gli unici tondi e si vedeva. */
.woocommerce #payment #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--amber-fill); color:var(--on-amber);
  border:1px solid transparent; border-radius:10px; padding:.9rem 1.6rem;
  font-family:var(--sans); font-size:1rem; font-weight:700; line-height:1.2;
  cursor:pointer; transition:filter .15s ease, background .15s ease;
}
.woocommerce #payment #place_order{width:100%; font-size:1.05rem; padding:1rem 1.7rem;}
/* WooCommerce colora l'hover dei pulsanti "alt" con il suo viola (#a46497),
   e lo fa con un selettore piu' pesante del nostro: senza elencare anche le
   varianti .alt e .checkout-button il pulsante d'acquisto diventava viola al
   passaggio del mouse. */
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus,
.woocommerce a.checkout-button:hover,
.woocommerce a.checkout-button:focus,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #payment #place_order:hover,
.woocommerce #payment #place_order:focus{
  background:var(--amber-fill); color:var(--on-amber);
  filter:brightness(1.06);
}
/* Il ritorno indietro e l'aggiorna restano secondari anche in hover. */
.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover{
  background:transparent; color:var(--ink); border-color:var(--amber); filter:none;
}
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"]{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}
.woocommerce button[name="update_cart"]:disabled{opacity:.45;}

/* ------------------------------------------------------------------
   Carrello
   ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);
  gap:40px; align-items:start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1;}
.woocommerce-cart form.woocommerce-cart-form{grid-column:1; min-width:0;}
/* Sotto una certa larghezza la tabella scorre nel suo riquadro invece di
   sfondare la colonna. */
.woocommerce-cart form.woocommerce-cart-form{overflow-x:auto;}
.woocommerce-cart .cart-collaterals{grid-column:2; width:100%; float:none; position:sticky; top:96px;}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%; float:none;}
@media(max-width:900px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr; gap:24px;}
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{grid-column:1; position:static;}
}
/* I piani sono virtuali e senza foto: la colonna immagine e' una colonna di
   segnaposto grigi. */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail{display:none;}
.woocommerce-cart table.cart td.product-remove a.remove{
  color:var(--ink-2) !important; font-size:1.1rem;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover{
  color:var(--ember) !important; background:transparent;
}
.woocommerce-cart .cart_totals table.shop_table{margin-bottom:1rem;}
.woocommerce-cart .wc-proceed-to-checkout{padding:0;}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:block; width:100%; text-align:center; font-size:1.05rem;
}
.woocommerce-cart .coupon{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.woocommerce-cart .coupon input#coupon_code{width:auto; flex:1 1 160px;}

/* Conferma d'ordine */
.woocommerce-order .woocommerce-order-overview{
  list-style:none; display:flex; flex-wrap:wrap; margin:0 0 2rem; padding:0;
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.woocommerce-order .woocommerce-order-overview li{
  flex:1 1 150px; padding:1rem .9rem; text-align:center; margin:0;
  border:0 !important; border-left:1px solid var(--line) !important;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2);
}
.woocommerce-order .woocommerce-order-overview li:first-child{border-left:0 !important;}
.woocommerce-order .woocommerce-order-overview li strong{
  display:block; margin-top:.35rem; font-size:1.05rem;
  text-transform:none; letter-spacing:0; color:var(--ink); font-weight:600;
}
.woocommerce-order address{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.2rem; font-style:normal; color:var(--ink);
}

/* Riga del codice sconto.
   Era la parte piu' rumorosa del carrello: campo bianco su fondo scuro e un
   pulsante ambra pieno grande quanto la CTA vera, che quindi non si capiva
   piu' quale fosse. Il codice sconto lo usa una minoranza: sta li' se serve,
   ma non compete con "Procedi con l'ordine". */
.woocommerce-cart table.cart td.actions{padding:1rem 1.1rem;}
.woocommerce-cart table.cart td.actions .coupon{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; float:none;
}
.woocommerce-cart table.cart td.actions input#coupon_code{
  flex:1 1 180px; min-width:160px; max-width:260px; margin:0;
  padding:.7rem .85rem !important;
  border:1px solid var(--line) !important; border-radius:10px !important;
  background:var(--card) !important; color:var(--ink) !important;
  font:inherit; font-size:.95rem;
}
.woocommerce-cart table.cart td.actions input#coupon_code::placeholder{
  color:var(--ink-2); opacity:1;
}
.woocommerce-cart table.cart td.actions input#coupon_code:focus{
  outline:none; border-color:var(--amber) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent);
}
.woocommerce-cart table.cart td.actions .coupon button.button{
  flex:none; background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font-size:.92rem; font-weight:600; padding:.7rem 1.2rem;
}
.woocommerce-cart table.cart td.actions .coupon button.button:hover{
  border-color:var(--amber); color:var(--amber-ink); filter:none;
}

/* Qui si vendono solo licenze, e di una licenza se ne compra una: la colonna
   della quantita' resta vuota e "Aggiorna carrello" nasce disattivato, perche'
   non c'e' niente da aggiornare. Due elementi che occupano spazio e non fanno
   nulla. */
.woocommerce-cart table.cart td.actions button[name="update_cart"],
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity{display:none;}

/* Riquadri di WooCommerce che restano vuoti su un negozio di licenze:
   niente spedizione da calcolare, niente prodotti correlati. */
.woocommerce-cart .cart-collaterals .cross-sells:empty,
.woocommerce-cart .cart_totals .woocommerce-shipping-totals:empty,
.woocommerce-cart .shipping-calculator-form:empty{display:none;}

/* Pagamenti rapidi fuori dal carrello.
   Apple Pay, Google Pay e Link portano dritti al pagamento saltando il
   modulo, quindi senza ragione sociale, partita IVA e scelta fra fattura e
   ricevuta. Su un prodotto che vende proprio la fatturazione non e'
   accettabile. Sono gia' spenti nelle impostazioni di Stripe; questa regola
   copre le pagine servite dalla cache prima della modifica. */
.woocommerce-cart .wc-stripe-express-checkout-element,
.woocommerce-cart #wc-stripe-express-checkout-element,
.woocommerce-cart #wc-stripe-express-checkout-button-separator,
.woocommerce-cart .wcpay-payment-request-wrapper,
.woocommerce-cart .wc-proceed-to-checkout > .wcpay-payment-request-wrapper{display:none !important;}