/* Virdemlux — carrello, cassa e area cliente.
   Nessun template di WooCommerce sovrascritto: si veste il suo markup.
   Meno codice da mantenere e nessun rischio di rompere la logica di
   acquisto, che e la lezione imparata riscrivendo variable.php. */

/* =====================================================================
   TABELLE (carrello e riepiloghi)
   ===================================================================== */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;border:0;border-radius:0;
  margin:0 0 26px;font-size:14.5px;
}
.woocommerce table.shop_table th{
  padding:0 14px 12px;border-bottom:1px solid var(--line-2);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;
}
.woocommerce table.shop_table td{
  padding:18px 14px;border-top:0;border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.woocommerce table.shop_table tbody tr:last-child td{border-bottom:1px solid var(--line-2)}

/* La riga degli strumenti (coupon, aggiorna) non e una riga di dati.
   I float di WooCommerce restano: provando a farne una fila flex, il
   campo e i due bottoni si incolonnavano a sinistra. */
.woocommerce table.cart td.actions{padding:20px 0 0;border:0}

/* Miniatura e nome */
.woocommerce table.shop_table td.product-thumbnail{width:88px}
.woocommerce table.shop_table td.product-thumbnail img{
  width:72px;height:72px;object-fit:contain;
  background:var(--tint);border-radius:10px;
}
.woocommerce table.shop_table td.product-name{line-height:1.45}
.woocommerce table.shop_table td.product-name a{
  color:var(--ink);font-weight:600;text-decoration:none;
}
.woocommerce table.shop_table td.product-name a:hover{color:var(--verde-testo)}
/* Le opzioni scelte sotto al nome del prodotto.
   Il markup non e il dl.variation di WooCommerce: le stampa il plugin
   degli extra (woo-custom-product-addons) come <ul class="wcpa_cart_meta">,
   e il suo CSS le mette a 15px con l'etichetta in grassetto — piu grandi
   del nome del prodotto. Qui tornano piccole e discrete come le varianti
   normali, etichetta e valore sulla stessa riga. */
.woocommerce table.shop_table .wcpa_cart_meta{
  list-style:none;margin:5px 0 0;padding:0;font-size:12.5px;color:var(--muted);
}
.woocommerce table.shop_table .wcpa_cart_meta .wcpa_cart_meta_item{
  display:flex;flex-wrap:wrap;gap:0 5px;margin:0 0 2px;padding:0;border:0;min-height:0;
}
.woocommerce table.shop_table .wcpa_cart_meta .wcpa_cart_meta_item-label{
  font-weight:500;color:var(--text);margin:0;
}
.woocommerce table.shop_table .wcpa_cart_meta .wcpa_cart_meta_item-value,
.woocommerce table.shop_table .wcpa_cart_meta .wcpa_cart_meta_item-value p{
  margin:0;gap:5px;
}

/* Le varianti scelte: sotto al nome, piccole e discrete. */
.woocommerce table.shop_table td.product-name dl.variation{
  margin:5px 0 0;font-size:12.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:2px 10px;
}
.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd{margin:0;display:inline}
.woocommerce table.shop_table dl.variation dd p{margin:0;display:inline}
.woocommerce table.shop_table dl.variation dt{font-weight:600}

/* Prezzi */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal{white-space:nowrap}
.woocommerce table.shop_table td.product-subtotal{font-weight:600;color:var(--ink)}

/* Rimuovi: un tondo neutro, non una x rossa gigante. */
.woocommerce table.shop_table td.product-remove{width:44px}
.woocommerce a.remove{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--tint);color:var(--muted) !important;
  font-size:17px;line-height:1;text-decoration:none;
}
.woocommerce a.remove:hover{background:var(--red);color:#fff !important}

/* Il campo quantita non si veste qui: le sue regole stanno in base.css,
   perche lo stesso gruppo meno/numero/piu si usa nella scheda prodotto,
   nel carrello e alla cassa. Qui davo al campo una forma tutta sua e nel
   carrello i due bottoni restavano nudi. */

/* =====================================================================
   BOTTONI
   ===================================================================== */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 26px;
  border:2px solid var(--line-2);border-radius:var(--pill);
  background:#fff;color:var(--ink);
  font-size:14.5px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;transition:.2s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover{background:var(--tint);border-color:var(--line-2);color:var(--ink)}

/* Le azioni che portano avanti l'acquisto sono verdi. */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order{
  background:var(--verde-azione);border-color:var(--verde-azione);color:#fff;
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.woocommerce .button:disabled,
.woocommerce button.button:disabled{opacity:.5;cursor:not-allowed}

/* "Procedi con l'ordine": WooCommerce lo scrive a 1.25em con 1em di
   padding, e il suo selettore (.wc-proceed-to-checkout a.checkout-button)
   e piu specifico del nostro, quindi vinceva: il bottone usciva a 20px,
   fuori scala con tutto il resto del sito. Qui si ripete il suo stesso
   selettore per riportarlo alla misura dei bottoni del tema. */
#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button{
  font-size:14.5px;padding:12px 26px;margin-bottom:0;
}
.woocommerce .wc-proceed-to-checkout{padding:0}

/* =====================================================================
   CARRELLO: colonna dei totali
   ===================================================================== */
.woocommerce .cart-collaterals{display:block}
.woocommerce .cart-collaterals .cart_totals{
  float:none;width:100%;max-width:420px;margin-left:auto;
  border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;background:var(--tint);
}
.woocommerce .cart_totals h2{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;
}
.woocommerce .cart_totals table.shop_table{margin:0;font-size:14.5px}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  padding:11px 0;border-bottom:1px solid var(--line);
  text-transform:none;letter-spacing:normal;font-size:14.5px;
  color:var(--text);text-align:left;
}
.woocommerce .cart_totals table.shop_table th{font-weight:400;color:var(--muted)}
.woocommerce .cart_totals table.shop_table td{text-align:right}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td{
  border-bottom:0;padding-top:15px;font-size:17px;font-weight:600;color:var(--ink);
}
.woocommerce .cart_totals .checkout-button{width:100%;margin-top:16px}
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping-calculator-button{font-size:13px;color:var(--muted)}

/* Coupon.
   WooCommerce fa galleggiare campo e bottoni con float e veste il campo
   con un bordo e un padding suoi, da selettori piu specifici dei nostri
   (table.cart td.actions .coupon .input-text): il campo restava basso e
   quadrato accanto a due bottoni a pillola alti 48px. Qui si ripetono i
   suoi stessi selettori e la riga diventa una fila flex. */
.woocommerce .coupon{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.woocommerce .coupon label{display:none}
.woocommerce .coupon .input-text{
  min-height:48px;padding:0 18px;min-width:200px;
  border:1px solid var(--line-2);border-radius:var(--pill);
  background:#fff;font-size:14.5px;
}

#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text{
  min-height:48px;padding:0 18px;min-width:220px;width:auto;margin:0;
  border:1px solid var(--line-2);border-radius:var(--pill);
  background:#fff;font-size:14.5px;color:var(--ink);
}

/* =====================================================================
   CASSA
   ===================================================================== */
/* Due colonne: dati a sinistra, riepilogo a destra.
   Titolo e riepilogo sono due fratelli nel modulo di WooCommerce, quindi
   erano due celle in due righe diverse: la colonna dei dati ne
   attraversava due e la sua altezza gonfiava la prima riga, spingendo il
   riepilogo a meta pagina (e le righe flessibili non aiutano: la parte
   intrinseca di un elemento che attraversa piu tracce va sempre a quelle
   automatiche). Ora i due stanno in un involucro solo, .vdl-review,
   aggiunto con gli hook della cassa in inc/woocommerce.php. */
.woocommerce-checkout .woocommerce form.checkout{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,400px);
  gap:40px;align-items:start;
}
.woocommerce-checkout .vdl-review{grid-column:2;min-width:0}

/* I due elementi di servizio che stanno tra i figli del modulo — il
   contenitore vuoto di PayPal e i campi nascosti di attribuzione ordine —
   non devono prendersi una cella della griglia. */
.woocommerce-checkout form.checkout > #paypal-standard-container{grid-column:1 / -1}
.woocommerce-checkout form.checkout > wc-order-attribution-inputs{display:none}

/* WooCommerce affianca fatturazione e spedizione con due float al 48%:
   dentro alla colonna di sinistra restavano due colonnine da 230px, coi
   campi illeggibili. Una sotto l'altra, a piena larghezza. */
.woocommerce-checkout #customer_details.col2-set{display:block;width:100%}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{float:none;width:100%;max-width:none}
.woocommerce-checkout #customer_details .col-2:not(:empty){margin-top:30px}
.woocommerce-checkout #customer_details{min-width:0;grid-column:1}

.woocommerce-checkout h3{
  font-size:17px;letter-spacing:-.02em;margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.woocommerce-checkout #order_review_heading{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;border:0;padding:0;
}
.woocommerce-checkout #order_review{
  border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;background:var(--tint);
}
.woocommerce-checkout #order_review table.shop_table{margin:0;font-size:14.5px}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{
  padding:11px 0;border-bottom:1px solid var(--line);
  text-transform:none;letter-spacing:normal;font-size:14.5px;
}
.woocommerce-checkout #order_review tfoot tr:last-child th,
.woocommerce-checkout #order_review tfoot tr:last-child td{
  border-bottom:0;font-size:17px;font-weight:600;color:var(--ink);padding-top:15px;
}
.woocommerce-checkout #payment{background:none;border-radius:0;margin-top:18px}
.woocommerce-checkout #payment ul.payment_methods{
  padding:0;border:0;list-style:none;margin:0 0 16px;
}
.woocommerce-checkout #payment ul.payment_methods li{
  padding:13px 15px;margin:0 0 8px;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:14.5px;
}
.woocommerce-checkout #payment ul.payment_methods li label{font-weight:500;cursor:pointer}
.woocommerce-checkout #payment ul.payment_methods li img{max-height:26px;width:auto;display:inline}
.woocommerce-checkout #payment div.payment_box{
  background:var(--tint);border-radius:10px;margin:10px 0 0;padding:13px 15px;
  font-size:13.5px;color:var(--muted);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment .place-order{padding:0;margin-top:6px}
.woocommerce-checkout #place_order{width:100%}

/* La riga delle condizioni: WooCommerce la fa galleggiare a sinistra con
   un selettore che ha un ID dentro, quindi vince. Qui torna in colonna,
   con la casella allineata alla prima riga del testo invece che a meta. */
.woocommerce #payment .terms,
.woocommerce #payment .wc-terms-and-conditions{float:none;padding:0;margin:0 0 14px}

.woocommerce form .form-row label.checkbox input[type=checkbox],
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox input[type=checkbox],
.woocommerce #payment .wc-terms-and-conditions input[type=checkbox]{
  flex:none;width:17px;height:17px;margin:2px 0 0;
}

.woocommerce-privacy-policy-text p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* =====================================================================
   CAMPI DEI MODULI (cassa, account, spedizione)
   ===================================================================== */
.woocommerce form .form-row{padding:0;margin:0 0 16px;display:block}
.woocommerce form .form-row label{
  display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;
}
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox{
  display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text);
}
.woocommerce form .form-row .required{color:var(--red);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;min-height:46px;height:auto;
  border:1px solid var(--line-2);border-radius:8px;
  padding:12px 13px;background:#fff;
  font-size:14.5px;color:var(--ink);
}
.woocommerce form .form-row textarea{min-height:110px;resize:vertical;line-height:1.55}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--ink);outline:2px solid var(--focus);outline-offset:1px;
}
/* I due campi affiancati di WooCommerce (nome/cognome). */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:calc(50% - 9px);display:inline-block;vertical-align:top}
.woocommerce form .form-row-first{margin-right:14px}

/* select2, che WooCommerce usa per paese e provincia. */
.woocommerce .select2-container .select2-selection--single{display:flex;align-items:center}
.woocommerce .select2-container .select2-selection__rendered{padding:0;line-height:1.4;color:var(--ink)}
.woocommerce .select2-container .select2-selection__arrow{top:50%;transform:translateY(-50%);right:8px}

/* =====================================================================
   AREA CLIENTE
   ===================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none;width:100%;margin:0 0 26px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:inline-flex;padding:9px 17px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:#fff;color:var(--text);font-size:13.5px;font-weight:500;
  text-decoration:none;transition:.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--tint)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--verde-azione);border-color:var(--verde-azione);color:#fff;
}
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}

/* I due riquadri accesso/registrazione. */
.woocommerce-account .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{width:100%;float:none}
.woocommerce form.login,
.woocommerce form.register{
  border:1px solid var(--line);border-radius:var(--r);padding:26px;margin:0;
}

/* Carrello e cassa non hanno una fascia introduttiva: i 60px che .sec
   mette sopra al blocco, sommati allo spazio del titolo di pagina,
   spingevano la tabella troppo in basso. */
.woocommerce-cart .main > .wrap.sec,
.woocommerce-checkout .main > .wrap.sec,
.woocommerce-account .main > .wrap.sec{padding-top:0}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .woocommerce-checkout .woocommerce form.checkout{grid-template-columns:1fr;gap:30px}
  .woocommerce-checkout .vdl-review,
  .woocommerce-checkout #customer_details{grid-column:1}
  .woocommerce .cart-collaterals .cart_totals{max-width:none;margin-left:0}
  .woocommerce-account .u-columns.col2-set{grid-template-columns:1fr}
}

@media (max-width:600px){
  /* WooCommerce ha il suo layout a schede per le tabelle sotto i 768px:
     qui gli si sistemano solo i bordi, senza combatterlo. */
  .woocommerce table.shop_table_responsive tbody tr{
    border:1px solid var(--line);border-radius:12px;
    display:block;margin-bottom:12px;padding:6px 12px;
  }
  .woocommerce table.shop_table_responsive tbody td{border-bottom:1px solid var(--line);padding:11px 0}
  .woocommerce table.shop_table_responsive tbody tr td:last-child{border-bottom:0}
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;display:block;margin-right:0}
}