/*
 * DAS Detailing - WooCommerce
 *
 * Catalogo, scheda prodotto, carrello, pagamento, conferma ordine e area
 * cliente. Usa gli stessi token di theme.css: qui non si dichiarano colori.
 */

/* =========================================================
   MISURE PROPRIE DEL NEGOZIO
   ========================================================= */

:root{
  --filters-w:     260px;
  --gallery-w:     560px;
  --summary-w:     420px;
  --field-h-sm:    46px;
  --qty-w:         112px;
  --swatch:        44px;
}

/* =========================================================
   TESTATA E BARRA DEGLI STRUMENTI
   ========================================================= */

.shop-layout{ display: flex; flex-direction: column; gap: var(--sp-6); }

.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-5);
}
.breadcrumb a{ transition: color var(--dur) var(--ease); }
.breadcrumb a:hover{ color: var(--accent); }
.breadcrumb-sep{ color: var(--hairline-strong); }

.shop-head{ padding-top: var(--sp-6); }

.subcat-row{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }

.chip-subcat{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--sp-8);
  padding-inline: var(--sp-5);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--wt-medium);
  color: var(--indigo);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip-subcat:hover{ border-color: var(--indigo); background: var(--wash); }
.chip-count{ font-size: var(--fs-label); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Da mobile le pastiglie delle sottocategorie stanno su una riga sola e
   scorrono di lato: andando a capo occupavano mezzo schermo. Il rientro
   negativo le lascia scorrere fino al bordo, mentre da ferme restano
   allineate al testo. */
@media (max-width: 860px){
  .subcat-row{
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Senza, l'aggancio tira la prima pastiglia contro il bordo e si perde
       l'allineamento con il testo. */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .subcat-row::-webkit-scrollbar{ display: none; }
  .chip-subcat{ flex: 0 0 auto; scroll-snap-align: start; }
}

.shop-body{ display: flex; gap: var(--sp-7); align-items: flex-start; }
.shop-results{ flex: 1 1 auto; min-width: 0; }

.shop-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw) solid var(--hairline);
  margin-bottom: var(--sp-6);
}

.result-count{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.shop-toolbar-actions{ display: flex; align-items: center; gap: var(--sp-3); }

.woocommerce-ordering select,
.das-select{
  height: var(--field-h-sm);
  padding-inline: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.filters-open{ height: var(--field-h-sm); }

/* =========================================================
   FILTRI
   ========================================================= */

.shop-filters{
  flex: 0 0 var(--filters-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.shop-filters-head{ display: flex; align-items: center; justify-content: space-between; }
.filters-close{ display: none; border: none; background: transparent; color: var(--indigo); cursor: pointer; }

.shop-filters .widget{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--hairline);
}

.shop-filters .widget-title,
.shop-filters .wp-block-heading{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.shop-filters ul{ display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-filters li{ font-size: var(--fs-sm); color: var(--ink-soft); }
.shop-filters li a{ color: var(--indigo); transition: color var(--dur) var(--ease); }
.shop-filters li a:hover{ color: var(--accent-deep, var(--indigo)); text-decoration: underline; }
.shop-filters .count{ color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.shop-filters .chosen a,
.woocommerce-widget-layered-nav-list__item--chosen a{ font-weight: var(--wt-strong); }

/* Cursore del prezzo */
.price_slider_wrapper .ui-slider{
  height: var(--dot-h);
  border-radius: var(--r-pill);
  background: var(--hairline-strong);
  margin-block: var(--sp-4);
}
.price_slider_wrapper .ui-slider-range{ background: var(--accent); height: 100%; border-radius: var(--r-pill); }
.price_slider_wrapper .ui-slider-handle{
  width: var(--sp-5);
  height: var(--sp-5);
  margin-left: calc(-1 * var(--sp-2));
  border-radius: var(--r-pill);
  background: var(--indigo);
  cursor: grab;
}
.price_slider_amount{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); }
.price_slider_amount .button{ order: 2; }

/* =========================================================
   GRIGLIA DEL CATALOGO
   ========================================================= */

ul.products{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products li.product{ flex: 1 1 var(--card-product); min-width: 0; }
.slider-products ul.products{ display: contents; }

/* La scheda: il letto immagine e' quadrato e l-etichetta sta sulla foto */
.card-product .product-media{
  display: flex;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--wash);
}
.card-product .product-photo,
.card-product .product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--dur-l) var(--ease-out);
}
.card-product:hover .product-photo,
.card-product:hover .product-media img{ transform: scale(1.05); }

.card-product .product-name{
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--wt-strong);
  line-height: var(--lh-title);
  color: var(--indigo);
  margin-top: var(--sp-4);
}
.card-product .product-name a{ color: inherit; }

.card-product .price{
  font-family: var(--font-display);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  font-size: var(--fs-price);
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}
.card-product .price del{
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--wt-body);
  color: var(--ink-soft);
  margin-left: var(--sp-2);
}
.card-product .price ins{ text-decoration: none; }


/* =========================================================
   SCHEDA PRODOTTO
   ========================================================= */

.single-product .product-layout{ display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-start; }

.single-product .woocommerce-product-gallery{
  flex: 1 1 var(--gallery-w);
  min-width: 0;
  position: sticky;
  top: calc(var(--header-h-tight) + var(--sp-5));
}
.single-product .woocommerce-product-gallery__wrapper{ border-radius: var(--r-lg); overflow: hidden; background: var(--wash); }
.single-product .woocommerce-product-gallery img{ width: 100%; height: auto; }
.single-product .flex-control-thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}
.single-product .flex-control-thumbs li{ flex: 0 0 calc((100% - 3 * var(--sp-3)) / 4); }
.single-product .flex-control-thumbs img{
  border-radius: var(--r-sm);
  background: var(--wash);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--dur) var(--ease);
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{ opacity: 1; }

.single-product .summary{
  flex: 1 1 var(--summary-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.single-product .product_title{
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-title);
  font-size: var(--fs-h2);
  color: var(--indigo);
  margin: 0;
}

.single-product .summary .price{
  font-family: var(--font-display);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  font-size: var(--fs-h3);
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}
.single-product .summary .price del{ font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-soft); margin-right: var(--sp-2); }
.single-product .summary .price ins{ text-decoration: none; }

.single-product .woocommerce-product-details__short-description{
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.product-brandline{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Varianti */
.single-product table.variations{ width: 100%; border-collapse: collapse; }
.single-product table.variations th,
.single-product table.variations td{ display: block; text-align: left; padding: 0; }
.single-product table.variations th label{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
  display: block;
}
.single-product table.variations td{ margin-bottom: var(--sp-4); }
.single-product table.variations select{
  width: 100%;
  height: var(--field-h);
  padding-inline: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.single-product .reset_variations{ font-size: var(--fs-xs); color: var(--ink-soft); }

/* Quantita' e acquisto */
.single-product form.cart{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.single-product .quantity{ display: flex; align-items: center; }
.single-product .quantity input.qty{
  width: var(--qty-w);
  height: var(--field-h);
  padding-inline: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.single-product button.single_add_to_cart_button{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--field-h);
  padding-inline: var(--sp-7);
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wt-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.single-product button.single_add_to_cart_button:hover{ background: var(--accent-hi); }
.single-product button.single_add_to_cart_button:active{ transform: scale(0.97); }
.single-product button.single_add_to_cart_button:disabled{ opacity: 0.45; cursor: not-allowed; }

.single-product .stock{ font-size: var(--fs-sm); }
.single-product .stock.in-stock{ color: var(--ink-soft); }
.single-product .stock.out-of-stock{ color: var(--indigo); font-weight: var(--wt-strong); }

.single-product .product_meta{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.single-product .product_meta a{ color: var(--indigo); }

/* Schede informative */
.woocommerce-tabs{ margin-top: var(--sp-9); }
.woocommerce-tabs ul.tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
  padding: 0 0 var(--sp-3);
  border-bottom: var(--bw) solid var(--hairline);
  list-style: none;
}
.woocommerce-tabs ul.tabs li a{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-rule) solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover{ color: var(--indigo); border-color: var(--accent); }
.woocommerce-tabs .panel{ max-width: var(--measure); color: var(--ink-soft); }

.related.products,
.upsells.products{ margin-top: var(--sp-9); }
.related.products > h2,
.upsells.products > h2{
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  font-size: var(--fs-h2);
  color: var(--indigo);
  margin-bottom: var(--air-head);
}

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

.woocommerce-cart-form{ width: 100%; }
.shop_table{ width: 100%; border-collapse: collapse; }
.shop_table th{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw) solid var(--hairline-strong);
}
.shop_table td{ padding-block: var(--sp-5); border-bottom: var(--bw) solid var(--hairline); vertical-align: middle; }
.shop_table .product-thumbnail img{ width: var(--sp-9); height: auto; border-radius: var(--r-sm); background: var(--wash); }
.shop_table .product-name a{ font-weight: var(--wt-strong); color: var(--indigo); }
.shop_table .product-price,
.shop_table .product-subtotal{ font-variant-numeric: tabular-nums; color: var(--indigo); }
.shop_table .product-remove a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--hairline-strong);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shop_table .product-remove a:hover{ border-color: var(--indigo); color: var(--indigo); }

/* Due colonne come la pagina di pagamento: stesse proporzioni e stesso
   aggancio sotto l'header (i valori --checkout-* stanno nella sezione
   PAGAMENTO). A sinistra i prodotti, a destra il riepilogo fermo. */
:root{
  --carrello-thumb: 96px;
  --carrello-coupon-w: 420px;
}
@media (max-width: 640px){
  :root{ --carrello-thumb: 76px; }
}

/* La misura di lettura di .entry-content stringeva il carrello a 600px. */
body.woocommerce-cart .entry-content{ max-width: none; }

.cart-layout{ display: flex; gap: var(--checkout-gap); align-items: flex-start; }
.cart-main{ flex: var(--checkout-col-main) 1 0; min-width: 0; }
.cart-collaterals{
  flex: var(--checkout-col-review) 1 0;
  min-width: 0;
  position: sticky;
  top: var(--checkout-sticky-top);
  max-height: calc(100vh - var(--checkout-sticky-top) - var(--sp-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg);
}

@media (max-width: 860px){
  .cart-layout{ flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .cart-main,
  .cart-collaterals{ flex: none; }
  .cart-collaterals{ position: static; max-height: none; overflow: visible; }
}

/* Righe dei prodotti. Le classi doppie battono le regole generiche di
   .entry-content su liste, link e immagini. */
.woocommerce-cart-form .carrello-lista{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--bw) solid var(--hairline);
}
.woocommerce-cart-form .carrello-riga{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin: 0;
  padding-block: var(--sp-5);
  border-bottom: var(--bw) solid var(--hairline);
  list-style: none;
}
.carrello-foto{
  display: flex;
  flex: 0 0 var(--carrello-thumb);
  width: var(--carrello-thumb);
  height: var(--carrello-thumb);
  overflow: hidden;
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
}
.woocommerce-cart-form .carrello-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.carrello-corpo{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--carrello-thumb);
}
.carrello-testa{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.carrello-dati{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.woocommerce-cart-form .carrello-nome{
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  line-height: var(--lh-title);
  text-decoration: none;
}
.woocommerce-cart-form a.carrello-nome:hover{ text-decoration: underline; text-underline-offset: 3px; }
.carrello-dati .variation{
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-1);
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.carrello-dati .variation dt,
.carrello-dati .variation dd{ margin: 0; }
.carrello-dati .variation dd{ flex: 1 1 50%; }
.carrello-dati .variation dd p,
.carrello-dati .backorder_notification{ margin: 0; }
.carrello-unitario{
  color: var(--ink-soft);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
.carrello-totale{
  flex: 0 0 auto;
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carrello-piede{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}

/* Il campo quantita' nativo sta fra i pulsanti meno e piu' (.qta e
   .qta-bottone arrivano dal carrello laterale). */
.carrello-qta .quantity{ display: flex; height: 100%; }
.carrello-qta input.qty{
  width: var(--sp-7);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.carrello-qta input.qty::-webkit-outer-spin-button,
.carrello-qta input.qty::-webkit-inner-spin-button{ margin: 0; -webkit-appearance: none; }
.carrello-qta input.qty:focus-visible{
  outline: var(--bw-rule) solid var(--indigo);
  outline-offset: calc(var(--bw-rule) * -1);
  border-radius: var(--r-sm);
}

.woocommerce-cart-form .carrello-rimuovi{
  color: var(--ink-soft);
  font-size: var(--fs-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-cart-form .carrello-rimuovi:hover{ color: var(--indigo); }

.carrello-azioni{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
}
.carrello-azioni .coupon{
  display: flex;
  gap: var(--sp-2);
  flex: 1 1 auto;
  max-width: var(--carrello-coupon-w);
  margin: 0;
}
.carrello-azioni .coupon input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
  height: var(--field-h-sm);
  padding-inline: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
/* Con JavaScript il carrello si aggiorna da solo: il pulsante serve solo senza. */
.woocommerce-js .carrello-aggiorna{ display: none; }

/* Riepilogo: stessa grafica di quello della pagina di pagamento. */
.cart_totals{
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--wash);
}
.cart_totals .riepilogo-titolo{
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  font-size: var(--fs-h3);
  color: var(--indigo);
}
.cart_totals .riepilogo-totali{ padding-top: 0; border-top: 0; }
.cart_totals .riepilogo-nota{ margin: 0; color: var(--ink-soft); font-size: var(--fs-body); }

@media (max-width: 860px){
  .cart_totals{ padding: var(--sp-5); }
}

.wc-proceed-to-checkout{ display: flex; flex-direction: column; gap: var(--sp-3); }
.wc-proceed-to-checkout a.checkout-button{
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--field-h);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--indigo);
  font-family: var(--font-body);
  font-weight: var(--wt-strong);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.wc-proceed-to-checkout a.checkout-button:hover{ background: var(--accent-hi); }

.cart-empty-block{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }

/* =========================================================
   PAGAMENTO
   ========================================================= */

:root{
  --checkout-col-main: 7;
  --checkout-col-review: 5;
  --checkout-gap: var(--sp-8);
  /* Sotto l'intestazione ferma: barra promozionale, barra del logo e il suo
     filetto, piu' un respiro. */
  --checkout-sticky-top: calc(var(--promo-h) + var(--header-h-tight) + var(--bw) + var(--sp-5));
  --riepilogo-thumb: 64px;
  --riepilogo-badge: 22px;
}

/* La misura di lettura di .entry-content stringeva il modulo a 600px e il
   riepilogo finiva sotto i campi. */
body.woocommerce-checkout .entry-content{ max-width: none; }

/* Carrello e pagamento partono sotto l'header con lo stesso respiro di catalogo
   e scheda prodotto, non con quello delle sezioni della home. */
body.woocommerce-checkout .site-main > .tile,
body.woocommerce-cart .site-main > .tile{ padding-top: var(--sp-6); }

.checkout-layout{ display: flex; gap: var(--checkout-gap); align-items: flex-start; }
.checkout-main{
  flex: var(--checkout-col-main) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.checkout-fields{ min-width: 0; }
.checkout-pay{ display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.checkout-pay .checkout-pay-title{ margin: 0; }
/* .entry-content li mette il pallino a ogni voce: nei metodi di pagamento no. */
.checkout-pay .wc_payment_methods{ margin: 0; padding: 0; }
.checkout-pay .wc_payment_methods li{ margin: 0; list-style: none; }

/* Il riepilogo resta fermo mentre si compila. Se i prodotti sono tanti da
   superare lo schermo, scorre al suo interno invece di tagliarsi. */
.checkout-review{
  flex: var(--checkout-col-review) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: var(--checkout-sticky-top);
  max-height: calc(100vh - var(--checkout-sticky-top) - var(--sp-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--wash);
}
.checkout-review #order_review_heading{ margin: 0; }

/* Su mobile le colonne si impilano nell'ordine dati, riepilogo, pagamento:
   il contenitore di sinistra si scioglie perche' il riepilogo possa entrare
   in mezzo. */
@media (max-width: 860px){
  .checkout-layout{ flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .checkout-main{ display: contents; }
  .checkout-fields{ order: 1; }
  .checkout-review{
    order: 2;
    flex: none;
    position: static;
    max-height: none;
    overflow: visible;
    padding: var(--sp-5);
  }
  .checkout-pay{ order: 3; }
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.checkout-pay-title,
#order_review_heading{
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  font-size: var(--fs-h3);
  color: var(--indigo);
  margin: 0 0 var(--sp-5);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.form-row{ display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 100%; min-width: 0; margin: 0; }
.form-row-first,
.form-row-last{ flex: 1 1 var(--card-dept); }
.form-row label{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-row .required{ color: var(--indigo); text-decoration: none; }
/* Padding vero, non solo altezza: Stripe disegna i campi della carta
   copiando lo stile di #billing_first_name, e con padding verticale zero
   venivano sottili. */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row textarea,
.form-row select,
.select2-container .select2-selection--single{
  width: 100%;
  min-height: var(--field-h);
  padding: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.select2-container .select2-selection--single{ height: var(--field-h); padding-block: 0; }
.form-row textarea{ height: auto; min-height: calc(var(--field-h) * 2); padding-block: var(--sp-3); resize: vertical; }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus{ outline: var(--bw-rule) solid var(--indigo); outline-offset: var(--bw); }

.woocommerce-checkout-review-order{ display: flex; flex-direction: column; gap: var(--sp-5); }

/* Riepilogo: miniatura con la quantita' nel bollino, nome, prezzo di riga.
   Le classi doppie battono le regole generiche di .entry-content su liste e
   immagini. */
.riepilogo{ display: flex; flex-direction: column; gap: var(--sp-5); }
.riepilogo .riepilogo-lista{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.riepilogo .riepilogo-riga{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  list-style: none;
}
.riepilogo-foto{
  position: relative;
  display: flex;
  flex: 0 0 var(--riepilogo-thumb);
  width: var(--riepilogo-thumb);
  height: var(--riepilogo-thumb);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
}
.riepilogo .riepilogo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
}
.riepilogo-qta{
  position: absolute;
  top: calc(var(--riepilogo-badge) / -2);
  right: calc(var(--riepilogo-badge) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--riepilogo-badge);
  height: var(--riepilogo-badge);
  padding-inline: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--indigo);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--wt-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.riepilogo-dati{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
  min-width: 0;
}
.riepilogo-nome{
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-medium);
  line-height: var(--lh-title);
}
.riepilogo-dati .variation{
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-1);
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.riepilogo-dati .variation dt,
.riepilogo-dati .variation dd{ margin: 0; }
.riepilogo-dati .variation dd{ flex: 1 1 50%; }
.riepilogo-dati .variation dd p{ margin: 0; }
.riepilogo-prezzo{
  flex: 0 0 auto;
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.riepilogo-totali,
.riepilogo-totali tbody{ display: flex; flex-direction: column; width: 100%; margin: 0; }
.riepilogo-totali{
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--hairline-strong);
  border-collapse: collapse;
}
.riepilogo-totali tbody{ gap: var(--sp-3); }
.riepilogo-totali tr{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.riepilogo-totali th,
.riepilogo-totali td{
  display: block;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-body);
  line-height: var(--lh-body);
  text-transform: none;
  letter-spacing: normal;
}
.riepilogo-totali th{ flex: 0 0 auto; color: var(--ink-soft); text-align: left; }
.riepilogo-totali td{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--indigo);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.riepilogo-totali td p{ margin: 0; color: var(--ink-soft); }
.riepilogo-totali #shipping_method{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.riepilogo-totali #shipping_method li{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  list-style: none;
}
.riepilogo-totali .order-total{
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--hairline-strong);
}
.riepilogo-totali .order-total th{ color: var(--indigo); font-weight: var(--wt-strong); }
.riepilogo-totali .order-total strong,
.riepilogo-totali .order-total .amount{
  font-family: var(--font-display);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  font-size: var(--fs-h3);
  color: var(--indigo);
}
.riepilogo-totali .order-total small{
  display: block;
  font-size: var(--fs-body);
  color: var(--ink-soft);
}

:root{
  --pay-radio: 18px;
  --pay-mark-h: 26px;
}

/* Ogni metodo di pagamento e' un riquadro: si distingue dal testo intorno e
   la scelta fatta si vede dal bordo. */
.wc_payment_methods{ display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.wc_payment_method{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color var(--dur) var(--ease);
}
.wc_payment_method:hover{ border-color: var(--hairline-strong); }
.wc_payment_method:has(input:checked){ border-color: var(--indigo); }
.wc_payment_method > input[type="radio"]{
  flex: 0 0 auto;
  width: var(--pay-radio);
  height: var(--pay-radio);
  margin: 0;
  accent-color: var(--indigo);
}
.wc_payment_method > label{
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-medium);
  cursor: pointer;
}

/* I marchi accettati, allineati a destra dell'etichetta. */
.payment-marks{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-left: auto;
}
.payment-marks .payment-mark{ display: flex; }
.payment-marks .payment-svg{ display: block; height: var(--pay-mark-h); width: auto; }

/* Il modulo della carta sta dentro il riquadro del suo metodo, staccato da un
   filetto. I campi veri li disegna Stripe dentro i suoi riquadri: qui si
   governano spazi e testi intorno. */
.payment_box{
  flex: 1 1 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-4) 0 0;
  border-top: var(--bw) solid var(--hairline);
  color: var(--ink-soft);
  font-size: var(--fs-body);
}
.payment_box p{ margin: 0; }
.payment_box p + p{ margin-top: var(--sp-3); }
.payment_box fieldset{ margin: 0; padding: 0; border: 0; }
.payment_box .wc-stripe-upe-element{ margin-bottom: var(--sp-4); }
/* Le etichette qui dentro non sono etichette di campo del tema: senza questa
   riga "Ricorda informazioni di pagamento" esce in maiuscoletto spaziato. */
.payment_box label{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
}
.payment_box .form-row{ flex-direction: row; align-items: center; gap: var(--sp-3); }
.payment_box .form-row input[type="checkbox"]{ flex: 0 0 auto; width: var(--pay-radio); height: var(--pay-radio); margin: 0; accent-color: var(--indigo); }

@media (max-width: 640px){
  .wc_payment_method{ padding: var(--sp-4); }
  /* I marchi restano in riga con l'etichetta, appoggiati a destra; se lo
     schermo e' troppo stretto vanno a capo restando comunque a destra. */
  :root{ --pay-mark-h: 22px; }
}

#place_order{
  width: 100%;
  height: var(--field-h);
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wt-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#place_order:hover{ background: var(--accent-hi); }
#place_order:active{ transform: scale(0.99); }

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

.woocommerce-order{ display: flex; flex-direction: column; gap: var(--sp-7); }
.woocommerce-thankyou-order-received{
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-title);
  font-size: var(--fs-h2);
  color: var(--indigo);
}
.woocommerce-order-overview{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--wash);
  list-style: none;
  margin: 0;
}
.woocommerce-order-overview li{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 var(--card-dept);
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.woocommerce-order-overview li strong{
  font-family: var(--font-display);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  font-size: var(--fs-h4);
  letter-spacing: normal;
  text-transform: none;
  color: var(--indigo);
}

/* =========================================================
   AREA CLIENTE
   ========================================================= */

.woocommerce-account .woocommerce{ display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-start; }
.woocommerce-MyAccount-navigation{ flex: 0 0 var(--filters-w); }
.woocommerce-MyAccount-navigation ul{ display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a{
  display: block;
  padding-block: var(--sp-3);
  border-bottom: var(--bw) solid var(--hairline);
  font-size: var(--fs-sm);
  font-weight: var(--wt-medium);
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation li a:hover{ color: var(--indigo); }
.woocommerce-MyAccount-navigation li.is-active a{ color: var(--indigo); border-bottom-color: var(--accent); }
.woocommerce-MyAccount-content{ flex: 1 1 var(--col-copy); min-width: 0; }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-address-fields{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--col-copy);
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button,
.woocommerce-button,
button.button,
a.button,
input.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--field-h-sm);
  padding-inline: var(--sp-6);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wt-medium);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
button.button:hover,
a.button:hover,
input.button:hover,
.woocommerce-Button:hover{ border-color: var(--indigo); }
button.button:active,
a.button:active{ transform: scale(0.97); }
button.button.alt,
a.button.alt,
input.button.alt{ background: var(--accent); border-color: var(--accent); color: var(--indigo); font-weight: var(--wt-strong); }
button.button.alt:hover,
a.button.alt:hover{ background: var(--accent-hi); border-color: var(--accent-hi); }

.addresses{ display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.woocommerce-Address{ flex: 1 1 var(--card-course); min-width: 0; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--wash); }

/* =========================================================
   AVVISI
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  border-left: var(--bw-rule) solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--wash);
  color: var(--indigo);
  font-size: var(--fs-sm);
  list-style: none;
}
.woocommerce-error{ border-left-color: var(--indigo); }
.woocommerce-message .button,
.woocommerce-info .button{ margin-left: auto; }

.screen-reader-text{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   ADATTAMENTI
   ========================================================= */

@media (max-width: 1080px){
  .shop-body{ flex-direction: column; }
  .shop-filters{
    position: fixed;
    inset: 0;
    z-index: 60;
    flex: none;
    width: min(88vw, 360px);
    padding: var(--sp-6);
    background: var(--paper);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--dur-l) var(--ease-out);
  }
  .shop-filters.is-open{ transform: translateX(0); }
  .filters-close{ display: inline-flex; }
  .single-product .woocommerce-product-gallery{ position: static; }
}

@media (min-width: 1081px){
  .filters-open{ display: none; }
}

@media (max-width: 860px){
  .shop_table thead{ display: none; }
  .shop_table tr{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-block: var(--sp-4); border-bottom: var(--bw) solid var(--hairline); }
  .shop_table td{ border: none; padding: 0; }
  .shop_table td.product-name{ flex: 1 1 var(--card-dept); }
  .woocommerce-account .woocommerce{ flex-direction: column; }
  .woocommerce-MyAccount-navigation{ flex: 1 1 100%; }
}

/* =========================================================
   RINFORZI
   ========================================================= */

/* Difesa: se un foglio di WooCommerce tornasse attivo, il logo resta nella sua misura. */
.site-header .logo-img,
.site-footer .logo-img{ height: var(--logo-h); width: auto; }
.site-header.is-scrolled .logo-img{ height: var(--logo-h-sm); }

/* Valutazione a stelle: la disegnava woocommerce-general, ora la disegniamo noi. */
.star-rating{
  display: inline-block;
  position: relative;
  width: 5.4em;
  height: 1.2em;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--accent);
}
.star-rating span{
  position: absolute;
  inset: 0 auto auto 0;
  overflow: hidden;
  padding-top: 1.2em;
}
.star-rating::before,
.star-rating span::before{
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  inset: 0 auto auto 0;
  letter-spacing: 0.1em;
}
.star-rating::before{ color: var(--hairline-strong); }
.woocommerce-product-rating{ display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-soft); }

/* Il carrello e i filtri bloccano lo scorrimento del corpo quando sono aperti. */
body.filters-locked{ overflow: hidden; }

/* Select2 di WooCommerce, allineato ai campi del tema. */
.select2-container--default .select2-selection--single{
  display: flex;
  align-items: center;
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-md);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: normal;
  padding-left: 0;
}
.select2-dropdown{ border-color: var(--hairline-strong); border-radius: var(--r-md); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background: var(--indigo); }

/* =========================================================
   SCHEDA PRODOTTO AD ALTA FIDUCIA
   ========================================================= */

:root{
  --swatch-h:   44px;
  --badge-h:    28px;
}

.single-product .summary{ gap: var(--sp-5); }

/* Etichette sopra il titolo */
.summary-badges{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.summary-badges .badge-sale,
.badge-top,
.badge-out{
  display: inline-flex;
  align-items: center;
  height: var(--badge-h);
  padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.badge-top{ background: var(--indigo); color: var(--on-indigo); }
.badge-out{ background: var(--wash); color: var(--ink-soft); }

/* Riga valutazione */
.rating-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.rating-figure{ font-family: var(--font-display); font-weight: var(--wt-dept); font-stretch: var(--wd-display); color: var(--indigo); }
.rating-write{ color: var(--indigo); text-decoration: underline; text-underline-offset: 0.2em; }
.rating-write:hover{ color: var(--accent-deep, var(--indigo)); }

/* Righe informative a icone */
.spec-row,
.assurance-mini,
.credential-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.spec-row li,
.assurance-mini li,
.credential-row li{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  flex: 1 1 var(--card-dept);
  min-width: 0;
}
.spec-icon{ color: var(--accent); margin-top: var(--sp-1); flex: none; }
.spec-text{ display: flex; flex-direction: column; gap: 0; min-width: 0; }
.spec-label{
  font-family: var(--font-label);
  font-weight: var(--wt-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.spec-value{ font-size: var(--fs-sm); font-weight: var(--wt-medium); color: var(--indigo); }

.spec-row{ padding-block: var(--sp-4); border-block: var(--bw) solid var(--hairline); }
.assurance-mini{ padding-top: var(--sp-4); border-top: var(--bw) solid var(--hairline); }

/* Fascia credenziali sotto la scheda */
.credential-band{
  padding: var(--sp-6);
  margin-top: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--wash);
}

/* Varianti a pastiglie: il menu resta per WooCommerce, ma non si vede */
.swatch-row{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.swatch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--swatch-h);
  height: var(--swatch-h);
  padding-inline: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wt-medium);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.swatch:hover{ border-color: var(--indigo); }
.swatch.is-on{ border-color: var(--indigo); background: var(--indigo); color: var(--on-indigo); }
.swatch.is-off{ opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* Quando le pastiglie sono attive il menu sparisce alla vista, non al codice. */
.single-product table.variations .swatch-row + select,
.has-swatches .swatch-row + select{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   RECENSIONI
   ========================================================= */

.reviews-panel{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.reviews-summary{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  flex: 0 0 var(--card-dept);
  padding-right: var(--sp-6);
  border-right: var(--bw) solid var(--hairline);
}
.reviews-figure{
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--indigo);
}
.reviews-count{ font-size: var(--fs-xs); color: var(--ink-soft); }

.slider-reviews{ flex: 1 1 var(--col-copy); min-width: 0; --slide-basis: calc((100% - 2 * var(--sp-5)) / 3); }

.card-review{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  min-width: 0;
}
.review-text{
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--indigo);
}
.review-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.review-author{ font-weight: var(--wt-strong); color: var(--indigo); }

@media (max-width: 1080px){
  .reviews-summary{
    flex: 1 1 100%;
    padding-right: 0;
    padding-bottom: var(--sp-5);
    border-right: none;
    border-bottom: var(--bw) solid var(--hairline);
  }
  .slider-reviews{ --slide-basis: calc((100% - var(--sp-5)) / 2); }
}

@media (max-width: 640px){
  .slider-reviews{ --slide-basis: 100%; }
  .spec-row li,
  .assurance-mini li,
  .credential-row li{ flex: 1 1 100%; }
}

/* =========================================================
   GALLERIA: CONTENIMENTO

   FlexSlider mette tutte le diapositive in fila dentro .flex-viewport, che
   deve tagliarle. Era una regola dei fogli WooCommerce che abbiamo rimosso:
   senza, la pista della galleria allargava tutta la pagina.
   ========================================================= */

.single-product .woocommerce-product-gallery{ overflow: hidden; }

.single-product .flex-viewport{
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--wash);
}

.single-product .woocommerce-product-gallery__wrapper{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .woocommerce-product-gallery__image{ flex: 0 0 auto; }

/* Senza JavaScript resta visibile solo la prima immagine, non tutte in fila. */
.single-product .woocommerce-product-gallery:not(.flex-slider-initialized) .woocommerce-product-gallery__wrapper{
  flex-wrap: wrap;
}

/* =========================================================
   SCHEDA PRODOTTO — FIDUCIA (impianto rivisto)
   ========================================================= */

:root{
  --star: 18px;
  --fact-icon: 24px;
  --thumb: 84px;
  --star-lg: 24px;
  --disc: 56px;
  --disc-lg: 60px;
  --faq-sign: 32px;
  --reviews-summary: 220px;
  --card-review: 300px;
}

/* --- Stelle disegnate --- */
.stars-defs{ display: block; width: 0; height: 0; }
.stop-on{ stop-color: var(--accent); }
.stop-off{ stop-color: var(--hairline-strong); }

.stars{ display: inline-flex; align-items: center; gap: 2px; }
.star{ width: var(--star); height: var(--star); flex: 0 0 auto; }
.star.is-on{ fill: var(--accent); }
.star.is-off{ fill: var(--hairline-strong); }
.star.is-half{ fill: url(#das-mezza); }

/* --- Valutazione sotto il titolo --- */
.rating-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.rating-row .star{ width: var(--star-lg); height: var(--star-lg); }
.rating-figure{ font-weight: var(--wt-strong); color: var(--indigo); }
.rating-count{ color: var(--ink-soft); }
.rating-write{
  margin-left: auto;
  color: var(--indigo);
  font-weight: var(--wt-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rating-write:hover{ color: var(--accent-deep, var(--indigo)); }

/* --- Frase di apertura --- */
.product-claim{
  max-width: var(--measure);
  margin-top: var(--sp-4);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* --- Caratteristiche in icone tonde --- */
.prod-facts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.prod-fact{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.fact-disc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--disc);
  height: var(--disc);
  border-radius: var(--r-pill);
  background: var(--wash);
  color: var(--indigo);
}
.fact-icon{ width: var(--fact-icon); height: var(--fact-icon); }
.fact-value{
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wt-strong);
  line-height: var(--lh-body);
}
.fact-label{
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --- Acquisto in evidenza --- */
.single-product form.cart{ margin-top: var(--sp-6); }
.single-product form.cart .quantity{ flex: 0 0 auto; }
.single-product .single_add_to_cart_button{
  flex: 1 1 auto;
  justify-content: center;
  min-height: var(--field-h);
}

/* --- Garanzie sotto il pulsante --- */
.assurance-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: var(--bw) solid var(--hairline);
  list-style: none;
}
.assurance-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.assurance-disc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--disc);
  height: var(--disc);
  border-radius: var(--r-pill);
  background: var(--indigo);
  color: var(--accent);
}
.assurance-icon{ width: var(--fact-icon); height: var(--fact-icon); }
.assurance-value{
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wt-strong);
  line-height: var(--lh-body);
}
.assurance-label{
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* --- Fascia credenziali --- */
.credential-band{
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--wash);
}
.credential-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.credential-item{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

@media (min-width: 861px){
  .credential-item{ flex: 1 1 var(--card-dept); }
}
.credential-icon{
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex: 0 0 auto;
  color: var(--indigo);
}

/* --- Domande frequenti --- */
.das-block-faq{ margin-top: var(--sp-9); }
.faq-list{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--bw) solid var(--hairline);
}
.faq-item{ border-bottom: var(--bw) solid var(--hairline); min-width: 0; }
.faq-details{ width: 100%; }
.faq-q{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--wt-dept);
  line-height: var(--lh-title);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-q::-webkit-details-marker{ display: none; }
.faq-q:hover{ color: var(--accent-deep, var(--indigo)); }
.faq-text{ flex: 1 1 auto; min-width: 0; }
.faq-sign{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--faq-sign);
  height: var(--faq-sign);
  flex: 0 0 auto;
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--indigo);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-details[open] .faq-sign{
  transform: rotate(180deg);
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--on-indigo);
}
.faq-a{
  max-width: var(--measure);
  padding-bottom: var(--sp-5);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.faq-a p{ margin: 0; }
.faq-a a{ color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }

/* --- Recensioni --- */
.das-block-reviews{ margin-top: var(--sp-9); }
.reviews-summary{ flex: 0 0 var(--reviews-summary); }
.reviews-figure{
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--wt-display);
  line-height: 1;
}
.reviews-figure-vuota{ color: var(--hairline-strong); }
.reviews-cta{ margin-top: var(--sp-3); }
.reviews-nota,
.reviews-vuoto{
  flex: 1 1 var(--col-copy);
  min-width: 0;
  display: flex;
  align-items: center;
}
.reviews-vuoto-testo{
  max-width: var(--measure);
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.slider-reviews{ flex: 1 1 var(--col-copy); min-width: 0; }
.slider-reviews .slide{ flex: 0 0 var(--card-review); }
.card-review{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  height: 100%;
  padding-right: var(--sp-5);
  border-right: var(--bw) solid var(--hairline);
}
.review-text{
  margin: 0;
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.review-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: auto 0 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
}
.review-author{ font-weight: var(--wt-strong); color: var(--indigo); }

/* --- Adattamenti --- */
@media (max-width: 1080px){
  :root{ --disc: 48px; --fact-icon: 22px; --thumb: 68px; --card-review: 260px; --reviews-summary: 180px; }
}
@media (max-width: 720px){
  .prod-facts,
  .assurance-row{ gap: var(--sp-4) var(--sp-3); }
  .prod-fact,
  .assurance-item{ flex: 1 1 calc(50% - var(--sp-3)); }
  .rating-write{ margin-left: 0; }
  .faq-q{ font-size: var(--fs-body); }
  .reviews-summary{ flex: 1 1 100%; }
}

/* =========================================================
   GALLERIA: MINIATURE IN COLONNA

   Come nella scheda di riferimento: la striscia delle miniature sta a
   sinistra e la foto grande resta centrata nel suo quadrato, qualunque
   sia la proporzione del file caricato.
   ========================================================= */

.single-product .woocommerce-product-gallery{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.single-product .woocommerce-product-gallery__trigger{
  position: absolute;
  inset: var(--sp-4) var(--sp-4) auto auto;
  z-index: 2;
}
.single-product .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper{ order: 2; flex: 1 1 auto; min-width: 0; }
.single-product .flex-control-thumbs{
  order: 1;
  flex: 0 0 var(--thumb);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--sp-3);
  margin-top: 0;
}
.single-product .flex-control-thumbs li{ flex: 0 0 auto; width: 100%; }
.single-product .flex-control-thumbs img{ aspect-ratio: 1 / 1; object-fit: contain; }

.single-product .woocommerce-product-gallery__image{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
.single-product .woocommerce-product-gallery__image > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.single-product .woocommerce-product-gallery__image img{ max-height: 100%; object-fit: contain; }

@media (max-width: 640px){
  .single-product .woocommerce-product-gallery{ flex-wrap: wrap; }
  .single-product .flex-control-thumbs{
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .single-product .flex-control-thumbs li{ flex: 0 0 calc((100% - 3 * var(--sp-3)) / 4); }
}

/* =========================================================
   TESTIMONIANZE SUL NEGOZIO
   ========================================================= */

:root{
  --card-testimonial: 300px;
  --testimonial-badge: 56px;
  --testimonial-sm: 34px;
}

.testimonial-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.testimonial-item{ display: flex; flex: 1 1 var(--card-testimonial); min-width: 0; }

.card-testimonial{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-6);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--wash);
  text-align: center;
}

.testimonial-badge{ display: inline-flex; flex: 0 0 auto; }
.testimonial-badge svg{ width: var(--testimonial-badge); height: var(--testimonial-badge); display: block; }
.badge-plate{ fill: var(--accent); }
.badge-disc{ fill: var(--paper); }
.badge-star{ fill: var(--accent); }

.testimonial-text{
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: var(--sp-5) 0;
  border-top: var(--bw) solid var(--hairline-strong);
  border-bottom: var(--bw) solid var(--hairline-strong);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.testimonial-author{
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-style: italic;
}

@media (max-width: 860px){
  .testimonial-item{ flex: 1 1 100%; }
}

/* =========================================================
   TESTIMONIANZE: STESSO IMPIANTO DEL PANNELLO RECENSIONI

   Colonna di riepilogo a sinistra, schede divise da un filetto verticale.
   Sostituisce il blocco a riquadri della versione precedente.
   ========================================================= */

.reviews-panel{ background: var(--wash); }

.testimonial-row{ display: none; }

.reviews-summary .testimonial-badge svg{ width: var(--testimonial-badge); height: var(--testimonial-badge); }

.card-testimonial{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: 0 var(--sp-5) 0 0;
  border: 0;
  border-right: var(--bw) solid var(--hairline-strong);
  border-radius: 0;
  background: none;
  text-align: left;
}
.card-testimonial .testimonial-badge svg{ width: var(--testimonial-sm); height: var(--testimonial-sm); }
.card-testimonial .review-text{
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}
.card-testimonial .review-meta{ margin: 0; }
.card-testimonial .review-author{ font-weight: var(--wt-body); font-style: italic; color: var(--ink-soft); }

.slider-reviews .slide:last-child .card-testimonial{ border-right: 0; padding-right: 0; }

/* Da telefono le testimonianze impilate si leggono meglio di un carosello. */
@media (max-width: 860px){
  .das-block-reviews .slider-viewport{ flex-wrap: wrap; overflow-x: visible; }
  .das-block-reviews .slide{ flex: 1 1 100%; }
  .card-testimonial{
    padding: 0 0 var(--sp-5);
    border-right: 0;
    border-bottom: var(--bw) solid var(--hairline-strong);
  }
  .slider-reviews .slide:last-child .card-testimonial{ border-bottom: 0; padding-bottom: 0; }
}

/* =========================================================
   VALUTAZIONE: STELLE VERDI SU FONDO CHIARO
   ========================================================= */

:root{
  --green: #00B67A;
}

.star.is-on{ fill: var(--green); }
.stop-on{ stop-color: var(--green); }

.reviews-panel{
  background: var(--wash);
  border-color: var(--hairline);
}

.reviews-summary .star{ width: var(--star-lg); height: var(--star-lg); }
.card-testimonial .stars{ margin-bottom: var(--sp-1); }
.card-testimonial .star{ width: var(--star); height: var(--star); }

.testimonial-badge{ display: none; }

/* =========================================================
   DESCRIZIONE DEL REPARTO

   Negli archivi il testo del reparto occupa tutta la griglia, non la
   colonna stretta da lettura: e' una presentazione, non un articolo.
   ========================================================= */

.shop-head .tile-intro{
  max-width: 100%;
  font-size: var(--fs-body);
}

/* =========================================================
   ARCHIVI: NIENTE VUOTO SOTTO IL MENU

   Il ritmo verticale delle sezioni serve fra un blocco e l'altro, non in
   cima alla pagina: sugli archivi la briciola di pane parte subito sotto
   la barra, con il solo respiro dell'intestazione.
   ========================================================= */

.shop-layout{ padding-top: var(--sp-6); }
.shop-head{ padding-top: 0; }
/* Fra la descrizione del reparto e i prodotti bastano 48px: il margine
   della testata (16px) piu' lo spazio fra le sezioni della pagina (32px). */
.shop-head .tile-head{ margin-bottom: var(--sp-4); }

/* =========================================================
   SCHEDA DEL CATALOGO: IMPIANTO RIVISTO

   Il prezzo torna a essere una riga di testo invece di una barra con un
   pulsante in fondo, e l-acquisto rapido compare sulla foto al passaggio del
   mouse: cosi- la griglia resta calma finche- nessuno la tocca.
   ========================================================= */

.card-product .product-name a{ text-decoration: none; }

.card-product .product-formats{ margin-bottom: var(--sp-3); }

.product-price{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin: auto 0 0;
}
.price-from{
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
}
.price-now{
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
}
.price-was{
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-decoration: line-through;
}

/* =========================================================
   GRIGLIA DEL CATALOGO: RESPIRO E PREZZO

   Le righe si staccano di piu- fra loro, il prezzo torna sotto al testo
   invece di essere spinto in fondo alla scheda, e va in tondo normale:
   nella griglia conta leggerlo, non gridarlo.
   ========================================================= */

:root{
  --gap-catalogo-x: var(--sp-6);
  --gap-catalogo-y: var(--sp-7);
}

.product-row,
ul.products{
  column-gap: var(--gap-catalogo-x);
  row-gap: var(--gap-catalogo-y);
}

.product-row > *,
ul.products > li.product{
  flex: 0 1 calc((100% - 3 * var(--gap-catalogo-x)) / 4);
  max-width: calc((100% - 3 * var(--gap-catalogo-x)) / 4);
}
.product-row.cols-3 > *{
  flex-basis: calc((100% - 2 * var(--gap-catalogo-x)) / 3);
  max-width: calc((100% - 2 * var(--gap-catalogo-x)) / 3);
}

@media (max-width: 1080px){
  .product-row > *,
  ul.products > li.product{
    flex-basis: calc((100% - 2 * var(--gap-catalogo-x)) / 3);
    max-width: calc((100% - 2 * var(--gap-catalogo-x)) / 3);
  }
}
@media (max-width: 720px){
  :root{ --gap-catalogo-y: var(--sp-6); }
  .product-row > *,
  ul.products > li.product{
    flex-basis: calc((100% - var(--gap-catalogo-x)) / 2);
    max-width: calc((100% - var(--gap-catalogo-x)) / 2);
  }
}

/* Il prezzo segue il testo da vicino e non e- piu- incollato al fondo. */
.card-product .product-formats{ margin-bottom: 0; }

.product-price{ margin: var(--sp-3) 0 0; }

.price-now{
  font-family: var(--font-body);
  font-weight: var(--wt-body);
  font-stretch: normal;
  letter-spacing: normal;
}

/* =========================================================
   PREZZI SULLA STESSA ASSE

   Il prezzo torna ancorato al fondo della scheda, cosi- tutti i prezzi di
   una riga cadono sulla stessa linea. Perche- l-ancoraggio non riapra il
   buco di prima, il blocco di testo ha un-altezza fissa: due righe per il
   nome e una per i formati, riservate anche quando non servono.
   ========================================================= */

.card-product .product-name{
  min-height: calc(2 * var(--fs-h4) * var(--lh-title));
}

.card-product .product-formats{
  min-height: calc(var(--fs-xs) * var(--lh-body));
  margin-bottom: 0;
}

.product-price{
  margin: auto 0 0;
  padding-top: var(--sp-3);
}

/* =========================================================
   SCHEDA DEL CATALOGO: CORNICE E PIEDE

   Una cornice chiara tiene insieme foto, nome, formati e prezzo. Formati e
   prezzo formano un blocco solo, ancorato in fondo: i prezzi di una riga
   restano sulla stessa linea senza che il nome debba avere altezza fissa.
   ========================================================= */

.card-product{
  padding: var(--sp-4);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: transform var(--dur-l) var(--ease-out), border-color var(--dur) var(--ease);
}
.card-product:hover{ border-color: var(--hairline-strong); }

.card-product .product-media{ border-radius: var(--r-md); }

/* Il nome non ha piu- bisogno di altezza fissa: ad allineare i prezzi
   pensa il blocco in fondo. */
.card-product .product-name{
  min-height: 0;
  margin-top: var(--sp-4);
}

.product-detail{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-4);
}

.card-product .product-formats{
  min-height: 0;
  margin: 0;
}

.product-price{ margin: 0; padding: 0; }

@media (max-width: 720px){
  .card-product{ padding: var(--sp-3); }
}

/* =========================================================
   PREZZO DELLA GRIGLIA: MISURA E PESO

   Un passo sotto il nome del prodotto e in semigrassetto: si legge
   subito senza rubare la scena al titolo.
   ========================================================= */

.price-now{
  font-size: var(--fs-body);
  font-weight: var(--wt-medium);
}

/* =========================================================
   SCHEDA PRODOTTO: IMPAGINAZIONE A DUE COLONNE

   Proporzioni del riferimento: la galleria occupa poco piu- di meta-
   larghezza, la colonna d-acquisto il resto. Dentro la colonna destra la
   testata si divide a sua volta: identita- a sinistra, prezzo a destra.

   Il testo della colonna d-acquisto e- tutto a 16px: cambiano peso e
   colore, non la misura.
   ========================================================= */

:root{
  --gallery-gap: var(--sp-5);
  --help-radius: var(--r-lg);
}

.single-product .product-layout{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-8);
}

.single-product .woocommerce-product-gallery{
  flex: 52 1 0;
  min-width: 0;
  position: relative;
  overflow: visible;
  display: block;
}

.single-product .summary{
  flex: 47 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h-tight) + var(--sp-5));
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Mosaico della galleria --- */
.gallery-mosaico .woocommerce-product-gallery__wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery-mosaico .woocommerce-product-gallery__image{
  flex: 0 0 calc((100% - var(--gallery-gap)) / 2);
  max-width: calc((100% - var(--gallery-gap)) / 2);
  display: flex;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background: var(--wash);
  overflow: hidden;
}
.gallery-mosaico .woocommerce-product-gallery__image:first-child{
  flex-basis: 100%;
  max-width: 100%;
}
.gallery-mosaico .woocommerce-product-gallery__image a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.gallery-mosaico .woocommerce-product-gallery__image img{
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- Testata: identita- e prezzo --- */
.summary-head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
}
.summary-id{ flex: 1 1 220px; min-width: 0; }
.summary-money{
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.single-product .product_title{ margin-top: var(--sp-2); }

.summary-codes{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--fs-body);
}

.single-product .summary .price{
  margin: 0;
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-before{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--ink-soft);
  font-size: var(--fs-body);
}
.price-before del{ color: var(--ink-soft); }
.price-cut{
  display: inline-flex;
  align-items: center;
  height: var(--sp-6);
  padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--indigo);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  letter-spacing: var(--ls-nav);
}

/* --- Disponibilita- --- */
.stock-line{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-body);
}
.stock-line.is-ready .stock-icon,
.stock-line.is-ready .stock-text{ color: var(--green); }
.stock-line.is-out .stock-icon,
.stock-line.is-out .stock-text{ color: var(--ink-soft); }
.stock-text{ font-weight: var(--wt-strong); }
.stock-note{ color: var(--ink-soft); }

/* --- Scelta della variante --- */
.single-product table.variations{ margin: 0; }
.single-product table.variations th.label label{
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
}
.swatch{ font-size: var(--fs-body); }

/* --- Riga di acquisto --- */
.single-product form.cart{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}
.single-product form.cart .quantity{ flex: 0 0 auto; }
.single-product .single_add_to_cart_button{
  flex: 1 1 auto;
  justify-content: center;
  min-height: var(--field-h);
  font-size: var(--fs-body);
}

/* Da mobile quantita' e pulsante stanno sulla stessa riga: il pulsante prende
   lo spazio che resta invece di andare a capo. Su schermi molto stretti e' il
   testo ad andare su due righe, non il pulsante. */
@media (max-width: 860px){
  .single-product form.cart .single_add_to_cart_button{
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--sp-4);
    line-height: var(--lh-title);
    text-align: center;
  }
}
.single-product .variations_form .woocommerce-variation-add-to-cart{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}

/* --- Riquadro di aiuto --- */
.help-panel{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--help-radius);
  background: var(--wash);
}
.help-copy{ flex: 1 1 var(--card-dept); min-width: 0; }
.help-title{ margin: 0; color: var(--indigo); font-size: var(--fs-body); font-weight: var(--wt-strong); }
.help-text{ margin-top: var(--sp-1); color: var(--ink-soft); font-size: var(--fs-body); }
.help-button{ flex: 0 0 auto; }
.help-phone{ margin: 0; color: var(--ink-soft); font-size: var(--fs-body); }
.help-phone a{ color: var(--indigo); font-weight: var(--wt-medium); text-decoration: underline; text-underline-offset: 3px; }

/* Da mobile "Scrivici" va sotto la frase, non di fianco: sulla riga
   stretta del telefono il testo restava schiacciato in due righe. */
@media (max-width: 860px){
  .help-panel{ flex-direction: column; align-items: flex-start; }
  .help-copy{ flex: 1 1 auto; }
  .help-button{ align-self: flex-start; }
}

/* --- Garanzie: due colonne come nel riferimento --- */
.assurance-row{
  gap: var(--sp-5);
  margin: 0;
  padding-top: var(--sp-5);
}
.assurance-item{
  flex: 1 1 calc(50% - var(--sp-5));
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
  text-align: left;
}
.assurance-disc{
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex: 0 0 auto;
  border-radius: 0;
  background: none;
  color: var(--indigo);
}
.assurance-icon{ width: var(--icon-lg); height: var(--icon-lg); }
.assurance-value{ font-size: var(--fs-body); }
.assurance-label{ font-size: var(--fs-body); }

/* --- Il resto del testo della colonna, alla stessa misura --- */
.product-claim,
.fact-value,
.rating-row,
.summary .stock-note{ font-size: var(--fs-body); }

@media (max-width: 1080px){
  .single-product .summary{ position: static; }
}

@media (max-width: 860px){
  .single-product .product-layout{ gap: var(--sp-6); }
  .single-product .woocommerce-product-gallery,
  .single-product .summary{ flex-basis: 100%; }
  .summary-money{ align-items: flex-start; text-align: left; }
  .price-before{ justify-content: flex-start; }
  .assurance-item{ flex-basis: 100%; }
}

/* =========================================================
   CORREZIONI DELLA SCHEDA
   ========================================================= */

/* La lente dello zoom sta sopra la prima foto, non nell-angolo della pagina. */
.single-product .woocommerce-product-gallery__trigger{
  inset: var(--sp-4) var(--sp-4) auto auto;
  z-index: 2;
}

/* Titolo e dettaglio della garanzia, incolonnati accanto all-icona. */
.assurance-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* =========================================================
   RIFINITURE DELLA SCHEDA

   Etichetta sopra la foto, meno vuoto sotto le briciole di pane, stelle
   gialle nella valutazione e descrizioni tutte a 16px.
   ========================================================= */

/* L-etichetta sta sulla foto, in alto a sinistra. */
.gallery-flags{
  position: absolute;
  inset: var(--sp-4) auto auto var(--sp-4);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Le briciole di pane stanno piu- vicine al prodotto. */
.single-product .breadcrumb{ margin-bottom: 0; }
.single-product .product-layout{ margin-top: 0; }

/* Valutazione: stelle gialle e numeri sulla stessa riga. */
.rating-row .star.is-on{ fill: var(--accent); }
.rating-row .star.is-half{ fill: var(--accent); }
.rating-row .star.is-off{ fill: var(--hairline-strong); }
.rating-figure{ color: var(--indigo); font-weight: var(--wt-strong); }
.rating-sep{ color: var(--hairline-strong); }
.rating-count{ color: var(--ink-soft); }

/* Disponibilita-: solo la scritta verde. */
.stock-line.is-ready .stock-text{ color: var(--green); font-weight: var(--wt-strong); }

/* Tutte le descrizioni a 16px: WordPress le lasciava a 1,17em. */
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li,
.product-longform,
.product-longform p,
.product-longform li,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* WooCommerce stampa anche il suo "14 disponibili": e- gia-detto dalla riga verde. */
.single-product .summary p.stock{ display: none; }

/* =========================================================
   ALLINEAMENTI E MISURE DEI TITOLI
   ========================================================= */

/*
 * La galleria era passata da sticky a relativa per reggere la lente, ma si
 * portava dietro il -top- della vecchia regola: 86px di scarto che la
 * facevano partire sotto il marchio. Ora la foto parte alla stessa quota.
 */
.single-product .woocommerce-product-gallery{ top: auto; }

/*
 * Le definizioni del mezzo-stella sono un elemento a larghezza zero: dentro
 * una riga con spaziatura contavano comunque come voce, e spostavano le
 * stelle di 12px rispetto al titolo. Fuori dal flusso.
 */
.stars-defs{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Titoli piu- misurati nella scheda. */
.single-product .product_title{
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}
.single-product .tile-title,
.single-product .block-title,
.single-product .related > h2,
.single-product .up-sells > h2{
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
}

/* =========================================================
   ETICHETTA SCONTO A TINTA PIENA

   La foto del prodotto usa la fusione -multiply- per sposarsi con il
   fondo grigio. L-etichetta non era posizionata, quindi il suo sfondo
   veniva dipinto prima della foto e finiva moltiplicato: arancione
   sporco sopra il prodotto, pieno solo fuori. Posizionandola sale sopra
   la foto e resta del suo colore.
   ========================================================= */

.product-flags{
  position: relative;
  z-index: 2;
  justify-content: flex-end;
}

.badge-sale,
.badge-top,
.badge-out{ isolation: isolate; }

/* =========================================================
   FOTO IN COLONNA, ACQUISTO FERMO

   Le foto scendono una sotto l-altra a tutta larghezza; la colonna
   d-acquisto resta ferma mentre si scorre, finche- c-e- galleria.
   ========================================================= */

.gallery-mosaico .woocommerce-product-gallery__image,
.gallery-mosaico .woocommerce-product-gallery__image:first-child{
  flex-basis: 100%;
  max-width: 100%;
}

.single-product .summary{
  position: sticky;
  top: calc(var(--header-h-tight) + var(--sp-5));
  align-self: flex-start;
}

@media (max-width: 1080px){
  .single-product .summary{ position: static; }
}

/* =========================================================
   ETICHETTA NELL-ANGOLO DELLA CORNICE

   L-etichetta sale nell-angolo in alto a destra della scheda, dentro la
   curva della cornice, non piu- dentro il letto della foto. Qui la
   posizione assoluta e- la scelta giusta: e- un elemento piccolo
   sovrapposto, non una colonna del layout.
   ========================================================= */

.card-product{ position: relative; }

.card-product .product-flags{
  position: absolute;
  inset: var(--sp-2) var(--sp-2) auto auto;
  z-index: 2;
  height: auto;
  margin: 0;
  padding: 0;
}

/* =========================================================
   PREZZO PIENO UNA VOLTA SOLA

   WooCommerce barra il prezzo pieno accanto a quello scontato; sotto lo
   ripete gia' la riga "Prima era" con la percentuale. Ne basta uno.
   ========================================================= */

.single-product .summary .price del{ display: none; }
.single-product .summary .price ins{ text-decoration: none; }

/* =========================================================
   NIENTE DOPPIA IMMAGINE SULLA GALLERIA

   La lente di WooCommerce sovrappone alla foto una copia a piena
   risoluzione. Con le foto impilate e la fusione -multiply- si vedeva
   il doppione in trasparenza: lo zoom al passaggio del mouse e' spento,
   resta l-ingrandimento al clic.
   ========================================================= */

.single-product .woocommerce-product-gallery img.zoomImg{ display: none !important; }

/* =========================================================
   RESPIRO DENTRO IL LETTO DELLA FOTO

   La foto non tocca piu- i bordi del riquadro grigio: il prodotto sta
   dentro una cornice d-aria, come sulle schede del catalogo.
   ========================================================= */

:root{ --gallery-pad: var(--sp-7); }

@media (max-width: 860px){
  :root{ --gallery-pad: var(--sp-5); }
}

.gallery-mosaico .woocommerce-product-gallery__image > a,
.gallery-mosaico .woocommerce-product-gallery__image > img{
  padding: var(--gallery-pad);
}

/* =========================================================
   FOTO STACCATE DAVVERO

   Il letto quadrato lasciava fino a 134px di grigio vuoto sopra e sotto
   una foto larga e bassa: due riquadri di fila diventavano un unico
   blocco grigio e lo stacco non si vedeva. Ora il riquadro si adatta
   all-altezza della foto e fra uno e l-altro c-e- aria vera.
   ========================================================= */

:root{ --gallery-gap: var(--sp-6); }

.gallery-mosaico .woocommerce-product-gallery__image{
  aspect-ratio: auto;
  height: auto;
}
.gallery-mosaico .woocommerce-product-gallery__image > a{
  height: auto;
}
.gallery-mosaico .woocommerce-product-gallery__image img{
  max-height: none;
  height: auto;
}

/* =========================================================
   IL CONTENITORE DELLA GALLERIA NON HA FONDO

   Era rimasto grigio dai tempi del carosello a foto unica. Con le foto
   impilate riempiva anche lo spazio fra una e l-altra dello stesso
   colore: lo stacco c-era ma non si vedeva. Il grigio resta solo sotto
   ogni singola foto.
   ========================================================= */

.single-product .woocommerce-product-gallery__wrapper{
  background: none;
  border-radius: 0;
  overflow: visible;
}

/* =========================================================
   DA TELEFONO: FOTO GRANDE PIU- MINIATURE

   Impilare cinque foto a tutta larghezza su uno schermo stretto vuol
   dire far scorrere mezzo metro di pagina prima di arrivare al prezzo.
   Resta grande la prima, le altre diventano miniature in riga: toccarle
   apre l-ingrandimento.
   ========================================================= */

@media (max-width: 860px){
  :root{ --gallery-pad-mini: var(--sp-2); }

  .gallery-mosaico .woocommerce-product-gallery__wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .gallery-mosaico .woocommerce-product-gallery__image:first-child{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .gallery-mosaico .woocommerce-product-gallery__image:not(:first-child){
    flex: 0 0 calc((100% - 3 * var(--gallery-gap)) / 4);
    max-width: calc((100% - 3 * var(--gallery-gap)) / 4);
    aspect-ratio: 1 / 1;
  }
  .gallery-mosaico .woocommerce-product-gallery__image:not(:first-child) > a{
    height: 100%;
    padding: var(--gallery-pad-mini);
  }
  .gallery-mosaico .woocommerce-product-gallery__image:not(:first-child) img{
    max-height: 100%;
    object-fit: contain;
  }
}

/* =========================================================
   FILETTO FRA TITOLO E PREZZO

   Una riga verticale separa l-identita- del prodotto dal prezzo, come
   fra due colonne di una tabella. Da telefono il prezzo va sotto e si
   allinea a destra: li- il filetto non serve piu- e sparisce.
   ========================================================= */

.summary-head{ align-items: stretch; }

.summary-money{
  justify-content: flex-start;
  padding-left: var(--sp-5);
  border-left: var(--bw) solid var(--hairline);
}

@media (max-width: 860px){
  .summary-money{
    align-items: flex-end;
    text-align: right;
    padding-left: 0;
    border-left: 0;
  }
  .price-before{ justify-content: flex-end; }
}

/* =========================================================
   TELEFONO: PREZZO A DESTRA E GARANZIE A DUE COLONNE

   Il blocco del prezzo si allargava solo quanto il suo contenuto, cosi-
   -allinea a destra- non aveva spazio in cui allinearsi: ora prende
   tutta la riga. Le garanzie passano da una colonna sola a due per due.
   ========================================================= */

@media (max-width: 860px){
  .summary-money{
    flex: 1 1 100%;
    align-items: flex-end;
    text-align: right;
  }

  .assurance-row{ gap: var(--sp-4); }
  .assurance-item{
    flex: 0 1 calc((100% - var(--sp-4)) / 2);
    max-width: calc((100% - var(--sp-4)) / 2);
  }
}

/* =========================================================
   TELEFONO: PREZZO ACCANTO AL TITOLO

   Il prezzo resta in linea con il titolo, in alto a destra: a stringersi
   e- il titolo, che va a capo. Prima il blocco del prezzo prendeva tutta
   la riga e finiva sotto.
   ========================================================= */

@media (max-width: 860px){
  .summary-head{ flex-wrap: nowrap; }

  .summary-id{
    flex: 1 1 auto;
    min-width: 0;
  }

  .summary-money{
    flex: 0 0 auto;
    align-items: flex-end;
    text-align: right;
    padding-left: var(--sp-4);
    border-left: var(--bw) solid var(--hairline);
  }
  .price-before{ justify-content: flex-end; }
}

/* =========================================================
   CODICE E VALUTAZIONE SU UNA RIGA PROPRIA
   ========================================================= */

.summary-meta{
  flex: 1 1 100%;
  min-width: 0;
}
.summary-meta .summary-codes{ margin-top: 0; }
.summary-meta .rating-row{ margin-top: var(--sp-3); }

@media (max-width: 860px){
  .summary-head{ flex-wrap: wrap; }
  .summary-id{ flex: 1 1 0; }
}

/* =========================================================
   CREDENZIALI A SCORRIMENTO DA TELEFONO

   In colonna le quattro qualifiche occupavano mezza schermata. Diventano
   una fila che scorre col dito, con lo stesso comportamento degli altri
   caroselli del tema: scorrimento nativo, aggancio dolce, barra
   nascosta. Il riquadro perde il taglio laterale cosi- l-ultima voce
   arriva fino al bordo.
   ========================================================= */

:root{ --card-credenziale: 236px; }

@media (max-width: 860px){
  .credential-band{
    padding-inline: 0;
  }

  .credential-row{
    flex-wrap: nowrap;
    gap: var(--sp-5);
    padding-inline: var(--sp-6);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .credential-row .credential-item{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--card-credenziale);
    max-width: var(--card-credenziale);
    align-items: flex-start;
    scroll-snap-align: start;
  }
}

/* =========================================================
   GALLERIA E PREZZO NEL FORMATO IMPILATO

   Sotto gli 860px le miniature stanno strette: lo stacco scende da 32 a
   12px. Nella fascia tablet la colonna d-acquisto e- larga quanto la
   pagina e il prezzo, spinto all-estremo destro, restava lontano dal
   titolo: li- va sotto, in colonna.
   ========================================================= */

@media (max-width: 860px){
  :root{ --gallery-gap: var(--sp-3); }
}

@media (min-width: 641px) and (max-width: 860px){
  .summary-head{ flex-wrap: wrap; }

  .summary-id{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
  }

  .summary-money{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
    border-left: 0;
  }

  .price-before{ justify-content: flex-start; }
}

/* =========================================================
   CREDENZIALI IMPILATE E CENTRATE (TELEFONO)

   Icona sopra, testo sotto, tutto centrato: con l-icona di fianco il
   testo restava su una colonna di un centinaio di pixel e andava a capo
   a ogni parola. Le tessere si stringono e la fascia si avvicina al
   blocco che la precede.
   ========================================================= */

:root{ --card-credenziale-mini: 172px; }

@media (max-width: 860px){
  .credential-band{
    margin-top: var(--sp-5);
    padding-block: var(--sp-5);
  }

  .credential-row .credential-item{
    flex-basis: var(--card-credenziale-mini);
    max-width: var(--card-credenziale-mini);
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
  }

  .credential-item .spec-text{
    align-items: center;
    text-align: center;
  }
}

/* =========================================================
   NASTRO DELLE CREDENZIALI (TELEFONO E TABLET)

   Stesso impianto della fascia marchi in home: l-elenco esce due volte e
   il nastro scorre di meta', poi ricomincia senza salto. Si ferma al
   tocco e con la riduzione del movimento di sistema.
   ========================================================= */

:root{ --credenziali-time: 26s; }

.credential-copy{ display: none; }

@media (max-width: 860px){
  .credential-marquee{
    display: flex;
    overflow: hidden;
    width: 100%;
  }

  .credential-track{
    display: flex;
    flex: 0 0 auto;
    gap: var(--sp-5);
    animation: slide var(--credenziali-time) linear infinite;
  }
  .credential-marquee:hover .credential-track,
  .credential-marquee:active .credential-track{ animation-play-state: paused; }

  .credential-copy{ display: flex; }

  .credential-row{
    flex: 0 0 auto;
    overflow: visible;
    padding-inline: 0;
  }
  .credential-band{ padding-inline: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce){
  .credential-track{ animation: none; }
}

/* =========================================================
   TELEFONO E TABLET: PREZZO SOTTO IL TITOLO
   ========================================================= */

@media (max-width: 860px){
  .summary-head{ flex-wrap: wrap; }

  .summary-id{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
  }

  .summary-money{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
    border-left: 0;
  }

  .price-before{ justify-content: flex-start; }
}

/* =========================================================
   RITMO VERTICALE DELLA SCHEDA SU TELEFONO

   Il passo fra una sezione e l-altra e- pensato per lo schermo largo:
   su un telefono 128px di bianco diventano mezza schermata di nulla.
   Sotto gli 860px si dimezza abbondantemente.

   La linea sotto "Domande frequenti" invece partiva attaccata al
   titolo: ora respira.
   ========================================================= */

.das-block-faq .block-head{ margin-bottom: var(--sp-6); }

@media (max-width: 860px){
  .single-product .woocommerce-tabs,
  .single-product .das-block-faq,
  .single-product .das-block-reviews,
  .single-product .related{ margin-top: var(--sp-5); }

  .das-block-faq .block-head{ margin-bottom: var(--sp-5); }
}

/* =========================================================
   COMMUNITY: RIQUADRO IN EVIDENZA
   ========================================================= */

:root{
  --community-ratio: 16 / 9;
  --community-field-h: 48px;
}

.community-box{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--indigo);
  color: var(--on-indigo);
}

.community-media{
  display: flex;
  aspect-ratio: var(--community-ratio);
  overflow: hidden;
}
.community-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-body{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.community-titolo{
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--wt-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-title);
}

.community-testo{
  margin: 0;
  color: var(--on-indigo);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Form --- */
.community-box .wpcf7{ margin-top: var(--sp-3); }
.community-box .wpcf7 form{ display: flex; flex-direction: column; gap: var(--sp-4); }
.community-box .wpcf7 form > p{ margin: 0; }

.community-fields{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.community-field{
  flex: 1 1 var(--card-dept);
  min-width: 0;
}
.community-field .wpcf7-form-control-wrap{ display: block; }

.community-box input[type="text"],
.community-box input[type="email"]{
  width: 100%;
  height: var(--community-field-h);
  padding-inline: var(--sp-4);
  border: var(--bw) solid transparent;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.community-box input[type="text"]:focus,
.community-box input[type="email"]:focus{
  outline: var(--bw-rule) solid var(--accent);
  outline-offset: var(--bw);
}

.community-consent{
  color: var(--on-indigo-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.community-consent label{ display: flex; align-items: flex-start; gap: var(--sp-2); }
.community-consent input[type="checkbox"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}
.community-consent a{ color: var(--on-indigo); text-decoration: underline; text-underline-offset: 3px; }

.community-box .community-submit{
  width: 100%;
  height: var(--community-field-h);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.community-box .community-submit:hover{ background: var(--accent-hi); }
.community-box .community-submit:disabled{ opacity: 0.55; cursor: not-allowed; }

/* Messaggi di Contact Form 7 */
.community-box .wpcf7-not-valid-tip{
  margin-top: var(--sp-1);
  color: var(--accent-hi);
  font-size: var(--fs-body);
}
.community-box .wpcf7-response-output{
  margin: 0 !important;
  padding: var(--sp-3) var(--sp-4) !important;
  border-radius: var(--r-md);
  border-color: var(--accent) !important;
  color: var(--on-indigo);
  font-size: var(--fs-body);
}
.community-box .wpcf7-spinner{ margin: var(--sp-2) auto 0; }

@media (max-width: 720px){
  .community-body{ padding: var(--sp-5); }
  .community-field{ flex-basis: 100%; }
}

/* =========================================================
   DESCRIZIONE A DUE COLONNE CON LA COMMUNITY
   ========================================================= */

:root{ --descrizione-lato: 400px; }

.descrizione-layout{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-8);
}

.descrizione-testo{
  flex: 1 1 var(--col-copy);
  min-width: 0;
  max-width: var(--measure);
}

.descrizione-lato{
  flex: 0 1 var(--descrizione-lato);
  min-width: 0;
  margin-left: auto;
}

@media (max-width: 860px){
  .descrizione-layout{ gap: var(--sp-6); }
  .descrizione-lato{
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Il pannello della descrizione prende tutta la griglia: la larghezza da
   lettura resta sulla sola colonna del testo, accanto c-e- il riquadro. */
.single-product .woocommerce-Tabs-panel--description{ max-width: none; }

/* =========================================================
   COMMUNITY: META- E META-, TUTTO CENTRATO

   Il titolo stava a 16px perche- la regola "descrizioni a 16px"
   (.woocommerce-Tabs-panel p) vale piu- di una classe sola: qui i
   selettori ne hanno due. Lo spinner di Contact Form 7 e- invisibile ma
   occupava spazio sotto il pulsante: esce solo durante l-invio.
   ========================================================= */

@media (min-width: 861px){
  .descrizione-testo{
    flex: 1 1 0;
    max-width: none;
  }
  .descrizione-lato{
    flex: 1 1 0;
    margin-left: 0;
  }
}

.community-box .community-titolo{
  font-size: var(--fs-h2);
  text-align: center;
}
.community-box .community-testo{ text-align: center; }

.community-box input[type="text"],
.community-box input[type="email"]{ text-align: center; }

.community-box .community-consent{ text-align: center; }
.community-box .community-consent label{ justify-content: center; }
.community-box .community-consent .wpcf7-list-item{ margin: 0; }

.community-box .wpcf7-spinner{ display: none; }
.community-box form.submitting .wpcf7-spinner{
  display: block;
  margin: var(--sp-2) auto 0;
}

/* Campi a tutta larghezza, uno sotto l-altro. */
.community-box .community-field{
  display: block;
  flex-basis: 100%;
}
.community-box input[type="text"],
.community-box input[type="email"]{ display: block; }

/* =========================================================
   COMMUNITY IN FORMATO 4:3

   La foto diventa lo sfondo, sotto un velo indigo che tiene leggibile il
   testo bianco. Il riquadro e- 4:3 orizzontale; se un messaggio di errore
   del form aggiunge righe, cresce invece di tagliare il contenuto. Da
   telefono il 4:3 sarebbe alto 250px: li- si adatta al contenuto.
   ========================================================= */

:root{ --community-veil: color-mix(in srgb, var(--indigo) 86%, transparent); }

.community-box{
  aspect-ratio: 4 / 3;
  justify-content: center;
  background-color: var(--indigo);
  background-image: linear-gradient(var(--community-veil), var(--community-veil)), var(--community-photo, none);
  background-size: cover;
  background-position: center;
}

.community-box .community-body{
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-7);
}
.community-box .wpcf7{ margin-top: var(--sp-2); }
.community-box .wpcf7 form{ gap: var(--sp-3); }

@media (max-width: 860px){
  .community-box{ aspect-ratio: auto; }
  .community-box .community-body{ padding: var(--sp-6) var(--sp-5); }
}

/* =========================================================
   COMMUNITY 4:3: IL CONTENUTO CI STA

   Il titolo ereditava l-interlinea dei paragrafi (1,55): 89px per una
   riga sola. Con quella dei titoli sono 62. Il riquadro non taglia piu-
   il contenuto: un messaggio d-errore lo allunga invece di nascondere il
   pulsante.
   ========================================================= */

.community-box{ overflow: visible; }
.community-box .community-titolo{ line-height: var(--lh-title); }
.community-box .community-body{ padding-block: var(--sp-5); }
.community-box .wpcf7{ margin-top: 0; }

/* =========================================================
   COMMUNITY: FOTO PIU- VISIBILE, PULSANTE PIENO

   Il velo e- una sfumatura: leggero in alto, dove c-e- il titolo grande,
   piu- coprente in basso, dove stanno i campi e il testo del consenso.
   Il pulsante non si spegne piu- in attesa del consenso.
   ========================================================= */

:root{
  --community-veil-top: color-mix(in srgb, var(--indigo) 45%, transparent);
  --community-veil-bottom: color-mix(in srgb, var(--indigo) 82%, transparent);
  --community-ombra: color-mix(in srgb, var(--indigo-deep) 55%, transparent);
}

.community-box{
  background-image: linear-gradient(to bottom, var(--community-veil-top), var(--community-veil-bottom)), var(--community-photo, none);
}

.community-box .community-titolo,
.community-box .community-testo{ text-shadow: 0 1px 12px var(--community-ombra); }

.community-box .community-submit,
.community-box .community-submit:disabled{
  opacity: 1;
  background: var(--accent);
  color: var(--indigo);
  cursor: pointer;
}
.community-box .community-submit:hover{ background: var(--accent-hi); }
.community-box form.submitting .community-submit{ opacity: 0.7; cursor: progress; }

/* =========================================================
   CONSEGNA STIMATA
   ========================================================= */

.consegna-stimata{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.consegna-icona{
  flex: 0 0 auto;
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--accent);
}
.consegna-data{ font-weight: var(--wt-strong); }

/* =========================================================
   CONSEGNA STIMATA: IN EVIDENZA

   Una pastiglia verde, come la riga della disponibilita- sopra. Il
   furgone ondeggia come su strada, il disco manda un alone lento e la
   data entra dal basso quando e- stata calcolata. Tutto si ferma con
   la riduzione del movimento di sistema.
   ========================================================= */

:root{
  --consegna-fondo: color-mix(in srgb, var(--green) 9%, var(--paper));
  --consegna-bordo: color-mix(in srgb, var(--green) 30%, transparent);
  --consegna-alone: color-mix(in srgb, var(--green) 45%, transparent);
  --consegna-disco: 40px;
  --consegna-raggio-alone: 10px;
  --consegna-tempo-strada: 1.2s;
  --consegna-tempo-alone: 2.4s;
  --consegna-tempo-data: 0.55s;
}

.consegna-stimata{
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--consegna-bordo);
  border-radius: var(--r-md);
  background: var(--consegna-fondo);
}

.consegna-disco{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--consegna-disco);
  height: var(--consegna-disco);
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--paper);
  animation: consegna-alone var(--consegna-tempo-alone) var(--ease) infinite;
}

.consegna-disco .consegna-icona{
  width: var(--icon);
  height: var(--icon);
  color: currentColor;
  animation: consegna-strada var(--consegna-tempo-strada) ease-in-out infinite;
}

.consegna-testo{ color: var(--indigo); }
.consegna-data{
  display: inline-block;
  color: var(--indigo);
  font-weight: var(--wt-strong);
}
.consegna-stimata.is-pronta .consegna-data{
  animation: consegna-data var(--consegna-tempo-data) var(--ease-out) both;
}

@keyframes consegna-strada{
  0%, 100%{ transform: translate(calc(-1 * var(--bw)), 0); }
  25%{ transform: translate(0, calc(-1 * var(--bw))); }
  50%{ transform: translate(var(--bw), 0); }
  75%{ transform: translate(0, 0); }
}

@keyframes consegna-alone{
  0%{ box-shadow: 0 0 0 0 var(--consegna-alone); }
  70%{ box-shadow: 0 0 0 var(--consegna-raggio-alone) transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}

@keyframes consegna-data{
  from{ opacity: 0; transform: translateY(var(--sp-2)); }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .consegna-disco,
  .consegna-disco .consegna-icona,
  .consegna-stimata.is-pronta .consegna-data{ animation: none; }
}

.consegna-invito{ color: var(--green); font-weight: var(--wt-strong); }

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

:root{
  --cart-drawer-w: 440px;
  --cart-thumb: 76px;
  --cart-qta-h: 36px;
  --cart-overlay: color-mix(in srgb, var(--indigo-deep) 45%, transparent);
  --cart-z: 1000;
}

body.cart-locked{ overflow: hidden; }

.cart-drawer{
  position: fixed;
  inset: 0;
  z-index: var(--cart-z);
  display: flex;
  justify-content: flex-end;
}

.cart-drawer-overlay{
  position: absolute;
  inset: 0;
  background: var(--cart-overlay);
  opacity: 0;
  transition: opacity var(--dur-l) var(--ease);
}

.cart-drawer-panel{
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--cart-drawer-w), 100vw);
  height: 100%;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform var(--dur-l) var(--ease-out);
  outline: none;
}

.cart-drawer.is-open .cart-drawer-overlay{ opacity: 1; }
.cart-drawer.is-open .cart-drawer-panel{ transform: none; }

/* --- Testata --- */
.cart-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-bottom: var(--bw) solid var(--hairline);
}
.cart-drawer-titolo{
  margin: 0;
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
}
.cart-drawer-chiudi{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-7);
  height: var(--sp-7);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--indigo);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cart-drawer-chiudi:hover{ background: var(--wash); border-color: var(--indigo); }

/* --- Avvisi --- */
.cart-drawer-avvisi:empty{ display: none; }
.cart-drawer-avvisi{ padding: var(--sp-3) var(--sp-5) 0; }
.cart-avviso{
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.cart-avviso-ok{
  background: color-mix(in srgb, var(--green) 10%, var(--paper));
  color: var(--indigo);
}
.cart-avviso-errore{
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  color: var(--indigo);
}

/* --- Corpo --- */
.cart-drawer-corpo{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  transition: opacity var(--dur) var(--ease);
}
.cart-drawer-corpo.is-busy{ opacity: 0.55; pointer-events: none; }

.cart-drawer-stato{
  margin: 0;
  padding: var(--sp-6) var(--sp-5);
  color: var(--ink-soft);
  font-size: var(--fs-body);
}

.cart-drawer-scorre{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cart-lista{ margin: 0; padding: 0 var(--sp-5); list-style: none; }

.cart-riga{
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: var(--bw) solid var(--hairline);
}

.cart-riga-foto{
  display: flex;
  flex: 0 0 var(--cart-thumb);
  width: var(--cart-thumb);
  height: var(--cart-thumb);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--wash);
}
.cart-riga-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cart-riga-dati{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
  min-width: 0;
}
.cart-riga-nome{
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  line-height: var(--lh-title);
}
.cart-riga-dettagli{
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
}

.cart-riga-piede{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.qta{
  display: inline-flex;
  align-items: center;
  height: var(--cart-qta-h);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-pill);
}
.qta-bottone{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cart-qta-h);
  height: 100%;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.qta-bottone:hover{ background: var(--wash); }
.qta-bottone:disabled{ opacity: 0.35; cursor: not-allowed; background: transparent; }
.qta-valore{
  min-width: var(--sp-6);
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-riga-prezzo{
  color: var(--indigo);
  font-size: var(--fs-body);
  font-weight: var(--wt-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-riga-rimuovi{
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-riga-rimuovi:hover{ color: var(--indigo); }

/* --- Piede --- */
.cart-drawer-piede{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-top: var(--bw) solid var(--hairline);
  background: var(--paper);
}

.cart-coupon{ display: flex; gap: var(--sp-2); }
.cart-coupon-campo{
  flex: 1 1 auto;
  min-width: 0;
  height: var(--field-h);
  padding-inline: var(--sp-4);
  border: var(--bw) solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-transform: uppercase;
}
.cart-coupon-campo::placeholder{ text-transform: none; }
.cart-coupon-campo:focus{ outline: var(--bw-rule) solid var(--indigo); outline-offset: var(--bw); }
.cart-coupon-applica{
  flex: 0 0 auto;
  height: var(--field-h);
  padding-inline: var(--sp-5);
  border: var(--bw) solid var(--indigo);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--wt-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cart-coupon-applica:hover{ background: var(--indigo); color: var(--on-indigo); }

.cart-coupon-attivi{ display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cart-coupon-attivo{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--green) 10%, var(--paper));
  font-size: var(--fs-body);
}
.cart-coupon-codice{ color: var(--indigo); font-weight: var(--wt-strong); letter-spacing: var(--ls-label); }
.cart-coupon-valore{ margin-left: auto; color: var(--indigo); font-variant-numeric: tabular-nums; }
.cart-coupon-togli{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.cart-coupon-togli:hover{ background: var(--paper); color: var(--indigo); }

.cart-totali{ display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.cart-totale-riga{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--fs-body);
}
.cart-totale-riga dt,
.cart-totale-riga dd{ margin: 0; }
.cart-totale-riga dd{ font-variant-numeric: tabular-nums; }
.cart-totale-sconto{ color: var(--green); }
.cart-totale-finale{
  margin-top: var(--sp-1);
  color: var(--indigo);
  font-weight: var(--wt-strong);
}

.cart-nota{ margin: 0; color: var(--ink-soft); font-size: var(--fs-body); }

.cart-drawer-checkout{
  justify-content: center;
  width: 100%;
}

/* --- Vuoto --- */
.cart-drawer-vuoto{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex: 1 1 auto;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.cart-drawer-vuoto-testo{ margin: 0; color: var(--indigo); font-size: var(--fs-body); }
.cart-drawer-link{ color: var(--indigo); font-weight: var(--wt-strong); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .cart-drawer-overlay,
  .cart-drawer-panel{ transition: none; }
}

/* Con la barra di amministrazione il cassetto parte sotto di lei. */
:root{ --admin-bar-h: 32px; }
@media (max-width: 782px){ :root{ --admin-bar-h: 46px; } }
.admin-bar .cart-drawer{ top: var(--admin-bar-h); }

.cart-drawer[hidden]{ display: none; }

/* =========================================================
   CATALOGO: CARICAMENTO CONTINUO
   Al posto dei numeri di pagina. Il link resta visibile solo senza
   JavaScript o se uno scaricamento fallisce.
   ========================================================= */

:root{ --shop-altri-rotella: 28px; }

.shop-altri{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--field-h);
  margin-top: var(--sp-7);
}
.shop-altri-rotella{
  display: none;
  width: var(--shop-altri-rotella);
  height: var(--shop-altri-rotella);
  border: var(--bw-rule) solid var(--hairline);
  border-top-color: var(--indigo);
  border-radius: var(--r-pill);
  animation: shop-altri-gira 0.8s linear infinite;
}
.shop-altri.is-loading .shop-altri-rotella{ display: block; }

.shop-altri.is-auto .shop-altri-link,
.shop-altri.is-loading .shop-altri-link,
.shop-altri.is-finito .shop-altri-link{ display: none; }
.shop-altri.is-auto.is-errore .shop-altri-link{ display: inline-flex; }

.shop-altri.is-finito{ min-height: 0; margin-top: 0; }

/* Vedi shop-scroll.js: senza, chi e' sul footer mentre arrivano le schede
   resta agganciato li' e il caricamento non si ferma piu'. */
.das-scorrimento-continuo,
.das-scorrimento-continuo body{ overflow-anchor: none; }

@keyframes shop-altri-gira{
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .shop-altri-rotella{ animation-duration: 2.4s; }
}

/* =========================================================
   SCHEDA: PREZZO DI PARTENZA E PREZZO DELLA VARIANTE
   ========================================================= */

/* "da" davanti al prezzo piu' basso dei prodotti con varianti. */
.summary-money .price-from{
  font-size: var(--fs-body);
  font-weight: var(--wt-body);
  letter-spacing: normal;
}

/* Il prezzo della variante scelta si stacca dal riquadro verde della consegna. */
.single-product .woocommerce-variation.single_variation{ margin-bottom: var(--sp-4); }

/* =========================================================
   ELENCO DEI MARCHI
   ========================================================= */

.brand-index{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.brand-index .brand-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  flex: 1 1 var(--card-dept);
  min-width: 0;
  min-height: var(--sp-9);
  padding: var(--sp-5);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.brand-index .brand-card:hover{ border-color: var(--indigo); transform: translateY(-2px); }
.brand-card-logo{ max-width: 120px; height: auto; margin-bottom: var(--sp-3); }
.brand-card-nome{
  font-family: var(--font-display);
  font-weight: var(--wt-dept);
  font-stretch: var(--wd-display);
  font-size: var(--fs-h4);
  color: var(--indigo);
}
.brand-card-conta{ color: var(--ink-soft); font-size: var(--fs-body); }