/* ============================================================================
   mg-shop.css — WooCommerce: archivi (negozio, categoria, tag) + scheda prodotto
   Redesign 2026 · MonkeysGod Torino
   ----------------------------------------------------------------------------
   Il tema NON ha override dei template WooCommerce (woocommerce/ non esiste):
   il markup lo emette il plugin. Questo file NON riscrive le classi: le stila.
   Tutti i selettori qui sotto sono stati estratti dall'HTML reale di produzione
   (curl 2026-07-08), non assunti. Vedi report per i grep di verifica.

   SCOPING — perche' ogni regola parte da `body.mg-redesign.woocommerce`
   ---------------------------------------------------------------------
   1. `mg-shop.css` viene accodato da functions.php su is_woocommerce() ||
      is_cart() || is_checkout() || is_account_page(), MA la classe
      `mg-redesign` (mg_redesign_body_class()) copre solo home, prodotto e
      archivi prodotto. Carrello, checkout e account ricevono questo CSS ma
      NON la classe: restano quindi sul look legacy, intatti. Voluto.
   2. Specificita': woocommerce-smallscreen.css usa
      `.woocommerce ul.products[class*=columns-] li.product` = (0,4,2).
      `body.mg-redesign.woocommerce ul.products li.product` = (0,4,3) → vince.
      E' anche l'ultimo foglio della coda (dipende da mg-design), quindi vince
      i pari-specificita' contro style.css. Risultato: zero !important.

   ORDINE DI CARICAMENTO (verificato in produzione)
   alux.min.css → font-awesome → style.css → mg-design.css → mg-nav → mg-shop

   CORE WEB VITALS — regola ferrea sulla gallery
   ---------------------------------------------
   Gli ultimi commit su main (8aaa243, e4c93b1) sono fix di CLS sulla gallery
   FlexSlider. Qui la gallery riceve SOLO proprieta' che non alterano il box
   model: outline, outline-offset, border-radius, box-shadow, background.
   Nessun aspect-ratio, nessuna height/min-height, nessun padding, nessun
   border, nessun cambio di overflow. Delta di layout = 0 per costruzione.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Contenitore e notices
   `main#main.grid.no-col.mt-1` arriva da woocommerce.php (non modificato).
   alux gli da' gia' max-width:1250px + padding:20px: non lo tocchiamo.
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce .woocommerce-notices-wrapper:empty {
  display: none; /* WC lo emette sempre, anche vuoto: evita spazio morto */
}

body.mg-redesign.woocommerce .woocommerce-message,
body.mg-redesign.woocommerce .woocommerce-info,
body.mg-redesign.woocommerce .woocommerce-error {
  background: var(--surface);
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
}


/* ---------------------------------------------------------------------------
   2. Testata archivio: conteggio risultati + select di ordinamento
   Markup reale: <p class="woocommerce-result-count"> e
   <form class="woocommerce-ordering"><select class="orderby">
   Restano flottanti (wc-layout.css): non li riposizioniamo, li ristiliamo.
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce .woocommerce-result-count {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}

body.mg-redesign.woocommerce .woocommerce-ordering {
  margin: 0 0 18px;
}

body.mg-redesign.woocommerce .woocommerce-ordering select.orderby {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  cursor: pointer;
}

body.mg-redesign.woocommerce .woocommerce-ordering select.orderby:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
   3. Griglia prodotti — da float a grid
   wc-layout.css:  ul.products li.product { float:left; width:22.05% }
   wc-small.css:   [class*=columns-] li.product { width:48%; float:left }
   Entrambe neutralizzate qui. `clear:none!important` di wc-small e' inerte:
   `clear` non si applica ai grid item.
   ATTENZIONE: wc-layout.css mette ::before/::after (clearfix, display:table)
   su ul.products. In un grid container diventerebbero due celle fantasma.
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

body.mg-redesign.woocommerce ul.products::before,
body.mg-redesign.woocommerce ul.products::after {
  display: none; /* neutralizza il clearfix di wc-layout.css (celle fantasma) */
}

@media (min-width: 600px) {
  body.mg-redesign.woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 960px) {
  body.mg-redesign.woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ---------------------------------------------------------------------------
   4. La card prodotto = .mg-tile (mg-design.css:457)
   NB: in mg-design.css .mg-tile usa `border`, non `outline`. Replichiamo la
   fonte di verita' (il codice), non la parafrasi del brief.
   Struttura reale del markup (nessun wrapper .mg-tile-body disponibile):
     li.product
       > a.woocommerce-loop-product__link   (span.onsale, picture>img, h2, .price)
       > a.button.add_to_cart_button
       > span.screen-reader-text
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce ul.products li.product {
  position: relative; /* ancora per span.onsale (gia' impostato da wc-layout) */
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface) var(--newsprint);
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}

body.mg-redesign.woocommerce ul.products li.product:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

body.mg-redesign.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Media. <picture> lo genera EWWW (webp). Sta a display:inline di default:
   lo portiamo a block cosi' fa da contenitore dell'immagine e regge il filetto. */
body.mg-redesign.woocommerce ul.products li.product picture {
  display: block;
  border-bottom: var(--outline-w) solid var(--line);
}

/* Le thumb d'archivio sono quadrate (300x300; in 2 casi 270x270 — rapporto 1).
   width/height sono gia' negli attributi HTML → spazio riservato prima del
   caricamento. aspect-ratio:1 e' una cintura di sicurezza per eventuali thumb
   non quadrate: object-fit ritaglia, non sposta il layout.
   Neutralizza anche `margin: 0 0 1em` di style.css:685. */
body.mg-redesign.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  box-shadow: none;
}

/* Titolo. style.css:716 impone white-space:nowrap + ellipsis su una riga.
   Il design vuole due righe (.mg-tile-name, min-height 2.6em). */
body.mg-redesign.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  min-height: 2.6em; /* 2 righe riservate: card della stessa riga allineate */
  margin: 0;
  padding: 12px 13px 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Prezzo = .mg-tile-price (font-graff). Neutralizza style.css:694. */
body.mg-redesign.woocommerce ul.products li.product span.price {
  display: block;
  font-family: var(--font-graff);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  padding: 10px 13px 0;
}

/* Prezzo scontato: <del> vecchio + <ins> nuovo (markup reale, /snoop-dogg/).
   <del> ricalca .mg-tile-price small. */
body.mg-redesign.woocommerce ul.products li.product span.price del {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-3);
  text-decoration: line-through;
  margin-right: 6px;
  opacity: 1;
}

body.mg-redesign.woocommerce ul.products li.product span.price ins {
  background: none;
  text-decoration: none;
  color: var(--ink);
}


/* ---------------------------------------------------------------------------
   5. Badge "In offerta!" = .mg-tile-badge.sale
   Markup reale: <span class="onsale">In offerta!</span>, primo figlio del link
   nel loop; figlio diretto di div.product nella scheda.
   wc-main.css lo rende un cerchio giallo-oliva: qui diventa lo sticker del design.
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce ul.products li.product span.onsale,
body.mg-redesign.woocommerce div.product > span.onsale {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 4px 7px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  transform: rotate(-3deg);
}

body.mg-redesign.woocommerce div.product > span.onsale {
  top: 14px;
  left: 14px;
  padding: 5px 9px;
  font-size: 11px;
}

/* Esaurito: la classe .outofstock esiste sul <li> (verificata in /grollz/).
   Nessuna etichetta testuale inventata: solo smorzamento del media. */
body.mg-redesign.woocommerce ul.products li.product.outofstock img {
  opacity: .55;
  filter: grayscale(.4);
}


/* ---------------------------------------------------------------------------
   6. Bottone "Aggiungi al carrello" = .add-btn (mg-design.css:499)
   Nel markup il bottone e' fratello del link, non dentro un .mg-tile-foot:
   niente riga prezzo+bottone senza un override PHP. Scelta: bottone a piena
   larghezza sotto il prezzo. Nessun template override per un dettaglio estetico.
   Neutralizza style.css:645 (bordo/colore #862029, padding 20px, radius 0).
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce ul.products li.product a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 13px 13px;
  margin-top: auto; /* incolla il bottone al fondo della card */
  padding: 10px 12px 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: 2px 2px 0 var(--accent);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, background .14s;
}

body.mg-redesign.woocommerce ul.products li.product a.button:hover {
  color: var(--paper);
  background: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--accent);
}

body.mg-redesign.woocommerce ul.products li.product a.button:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--accent);
}

/* .added_to_cart: link "Visualizza carrello" iniettato da WooCommerce via AJAX
   DOPO l'add-to-cart. Non e' presente nell'HTML statico scaricato: selettore
   dedotto dal comportamento noto di WC, non verificabile via curl. Vedi report. */
body.mg-redesign.woocommerce ul.products li.product a.added_to_cart {
  display: block;
  margin: 0 13px 13px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink-2);
}


/* ---------------------------------------------------------------------------
   7. Paginazione
   Markup reale: nav.woocommerce-pagination > ul.page-numbers > li > a|span
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  list-style: none;
}

body.mg-redesign.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  margin: 0;
  border: 0;
  overflow: visible;
}

/* `li` nel selettore: anche la ul porta la classe .page-numbers. */
body.mg-redesign.woocommerce nav.woocommerce-pagination li .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

body.mg-redesign.woocommerce nav.woocommerce-pagination a.page-numbers:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

body.mg-redesign.woocommerce nav.woocommerce-pagination .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 2px 2px 0 var(--accent);
}

body.mg-redesign.woocommerce nav.woocommerce-pagination li .page-numbers.dots {
  min-width: 0;
  padding: 0 2px;
  background: none;
  border-color: transparent;
  box-shadow: none;
}


/* ===========================================================================
   SCHEDA PRODOTTO
   Figli diretti di div.product (enumerati sull'HTML reale):
     .woocommerce-product-gallery.images | .summary.entry-summary
     .woocommerce-tabs.wc-tabs-wrapper   | section.related.products
     span.onsale (position:absolute, fuori flusso)
     div.disclaimer (solo categorie ristrette — vedi functions.php)
   =========================================================================== */

/* 8. Due colonne. Sostituisce i float di wc-layout.css (images 48% / summary 48%).
   Il posizionamento e' esplicito: cosi' .disclaimer, i tab e i correlati non
   finiscono mai nella colonna sbagliata quando compaiono o spariscono.
   Il breakpoint 769px combacia con `media="max-width: 768px"` del <link> di
   woocommerce-smallscreen.css, che sotto quella soglia riporta gia'
   images/summary a width:100%, float:none. */
@media (min-width: 769px) {
  body.mg-redesign.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  body.mg-redesign.woocommerce div.product .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: auto;
  }

  body.mg-redesign.woocommerce div.product .summary.entry-summary {
    grid-column: 2;
    grid-row: 1;
    float: none;
    width: auto;
  }

  body.mg-redesign.woocommerce div.product > .disclaimer,
  body.mg-redesign.woocommerce div.product > .woocommerce-tabs,
  body.mg-redesign.woocommerce div.product > section.related {
    grid-column: 1 / -1;
  }
}


/* ---------------------------------------------------------------------------
   9. Gallery — SOLO proprieta' neutre rispetto al layout
   Vietati qui: aspect-ratio, height, min-height, padding, border, overflow.
   `outline` non partecipa al box model → FlexSlider misura esattamente la
   stessa larghezza che misurerebbe senza queste regole. Delta = 0.
   outline-offset negativo disegna la cornice DENTRO il box, cosi' non deborda.
   Le regole CLS-critiche di style.css (__wrapper / .flex-viewport) NON sono
   toccate: quel file non e' di mia proprieta' e la storia dice di non toccarlo.
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce div.product .woocommerce-product-gallery {
  background: var(--surface);
  border-radius: var(--radius);
  outline: var(--outline-w) solid var(--line);
  outline-offset: calc(var(--outline-w) * -1);
  box-shadow: var(--shadow);
}

/* .flex-control-thumbs e' generato a runtime da FlexSlider: non e' nell'HTML
   statico (verificato: 0 occorrenze). Anche qui solo `outline` — un `border`
   aggiungerebbe altezza alla striscia delle thumb e sposterebbe il contenuto
   sottostante nel momento dell'init. Vedi report. */
body.mg-redesign.woocommerce div.product .flex-control-thumbs img {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--line);
  outline-offset: -2px;
  cursor: pointer;
}

body.mg-redesign.woocommerce div.product .flex-control-thumbs img.flex-active {
  outline-color: var(--accent-2);
}


/* ---------------------------------------------------------------------------
   10. Summary: titolo, prezzo, short description, disclaimer
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce div.product .summary.entry-summary {
  margin-bottom: 2em;
}

body.mg-redesign.woocommerce div.product h1.product_title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Neutralizza style.css:701 (color #333, font-size 1.25em). */
body.mg-redesign.woocommerce div.product p.price {
  font-family: var(--font-graff);
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 18px;
}

body.mg-redesign.woocommerce div.product p.price del {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink-3);
  text-decoration: line-through;
  margin-right: 8px;
  opacity: 1;
}

body.mg-redesign.woocommerce div.product p.price ins {
  background: none;
  text-decoration: none;
  color: var(--ink);
}

body.mg-redesign.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  border-top: var(--dash);
  border-bottom: var(--dash);
  padding: 14px 0;
  margin: 0 0 20px;
}

body.mg-redesign.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* Blocco avviso per prodotti solo-store. Badge + titolo (danger) + testo.
   Sostituisce il vecchio .disclaimer, nella colonna summary. */
body.mg-redesign.woocommerce div.product .mg-solo-store-block {
  position: relative;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 2px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  margin: 0 0 20px;
}

body.mg-redesign.woocommerce div.product .mg-solo-store-badge {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--danger);
  color: #fff;
  padding: 4px 7px;
  border-radius: 6px;
}

body.mg-redesign.woocommerce div.product .mg-solo-store-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--danger);
  margin: 28px 0 12px;
  padding: 0;
}

body.mg-redesign.woocommerce div.product .mg-solo-store-text {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  padding: 0;
}

/* .disclaimer: deprecato. Conservato per compatibilità verso usage esterni.
   Leggi .mg-solo-store-block sopra. */
body.mg-redesign.woocommerce div.product .disclaimer {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-press);
  padding: 10px 14px;
  margin: 0 0 20px;
}


/* ---------------------------------------------------------------------------
   11. Form add-to-cart: quantita', varianti, bottone
   Markup reale: form.cart > .quantity > input.qty + button.single_add_to_cart_button
   Varianti: table.variations > th.label / td.value > select, a.reset_variations
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}

/* I prodotti variabili hanno tabella varianti + .single_variation_wrap:
   hanno bisogno del flusso normale, non del flex a riga. */
body.mg-redesign.woocommerce div.product form.cart.variations_form {
  display: block;
}

/* Neutralizza style.css:727 (56x56). */
body.mg-redesign.woocommerce div.product .quantity input.qty {
  width: 72px;
  height: 48px;
  padding: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}

/* Bottone principale = .mg-btn-primary. Neutralizza style.css:645. */
body.mg-redesign.woocommerce div.product button.single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 14px 22px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}

body.mg-redesign.woocommerce div.product button.single_add_to_cart_button:hover {
  color: var(--accent-ink);
  background: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

body.mg-redesign.woocommerce div.product button.single_add_to_cart_button:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

body.mg-redesign.woocommerce div.product table.variations {
  width: 100%;
  margin: 0 0 16px;
  border: 0;
}

body.mg-redesign.woocommerce div.product table.variations th.label {
  padding: 0 0 6px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}

body.mg-redesign.woocommerce div.product table.variations td.value {
  padding: 0 0 12px;
}

body.mg-redesign.woocommerce div.product table.variations td.value select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

body.mg-redesign.woocommerce div.product a.reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink-3);
}

body.mg-redesign.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}


/* ---------------------------------------------------------------------------
   12. Meta prodotto (categoria / tag)
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce div.product .product_meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
  border-top: var(--dash);
  padding-top: 14px;
}

body.mg-redesign.woocommerce div.product .product_meta .posted_in,
body.mg-redesign.woocommerce div.product .product_meta .tagged_as {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  letter-spacing: .3px;
}

body.mg-redesign.woocommerce div.product .product_meta a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}


/* ---------------------------------------------------------------------------
   13. Tab (in pratica, su questo catalogo, solo "Recensioni")
   Neutralizza style.css:751-769 (li bordo #c5976a su fondo #862029).
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce div.product .woocommerce-tabs {
  margin-top: 56px;
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none; /* wc-main.css disegna angoli/curve: fuori dal linguaggio visivo */
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: none;
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--ink);
  box-shadow: 2px 2px 0 var(--accent);
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--paper);
}

/* style.css:762 porta gli <a> dei tab a #bbb in hover: qui restano leggibili. */
body.mg-redesign.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
  color: var(--ink);
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
}

body.mg-redesign.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 14px;
}

body.mg-redesign.woocommerce .woocommerce-Reviews .woocommerce-noreviews {
  font-family: var(--font-ui);
  color: var(--ink-2);
}

body.mg-redesign.woocommerce .woocommerce-Reviews .comment-reply-title {
  font-family: var(--font-ui);
  font-weight: 800;
}


/* ---------------------------------------------------------------------------
   14. Prodotti correlati
   Markup reale: <section class="related products"><h2>Prodotti correlati</h2>
   La griglia interna eredita le regole delle sezioni 3 e 4 (ul.products).
   Neutralizza style.css:801 (margin-top 55px).
   --------------------------------------------------------------------------- */

body.mg-redesign.woocommerce div.product section.related {
  margin-top: 56px;
  padding-top: 28px;
  border-top: var(--dash);
}

body.mg-redesign.woocommerce div.product section.related > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 22px;
}

/* --------------------------------------------------------------------------
   ARCHIVIO CATEGORIA — titolo e descrizione (term description)
   --------------------------------------------------------------------------
   Il titolo archivio e' h1.page-title: style.css lo veste in "Sorts Mill Goudy"
   serif #222. Lo portiamo al display del tema. La descrizione della categoria
   (.term-description) e' testo inserito da backend, con <h3><span style=
   "color:#ff0000">: rosso puro fuori palette. Non tocchiamo il testo del
   cliente; la avvolgiamo in una card "attenzione" e ricoloriamo il rosso inline
   sul --danger del tema (l'unico caso in cui !important e' legittimo: battere
   uno stile inline). -------------------------------------------------------- */
body.mg-redesign.woocommerce .page-title,
body.mg-redesign.woocommerce-page .page-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1;
  margin: 0 0 18px;
}

/* Richiesta cliente 07/2026: la card centrata occupava troppo schermo.
   Diventa una NOTA compatta allineata a sinistra: testi piccoli, dorso
   giallo, niente centratura (gli inline text-align:center del contenuto
   vengono battuti con !important, come i colori). */
body.mg-redesign.woocommerce .term-description {
  max-width: 720px;
  margin: 0 0 22px;
  padding: 12px 16px;
  background: var(--surface) var(--newsprint);
  border: var(--outline-w) solid var(--line);
  border-left-width: 8px;
  border-left-color: var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  text-align: left;
}
body.mg-redesign.woocommerce .term-description h1,
body.mg-redesign.woocommerce .term-description h2,
body.mg-redesign.woocommerce .term-description h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.2;
  font-size: 16px;
  margin: 0 0 6px;
  text-align: left !important;
}
body.mg-redesign.woocommerce .term-description p {
  margin: 0 0 6px;
  font-size: 13px;
  text-align: left !important;
}
/* L'h4 del contenuto e' in realta' un paragrafo lungo travestito da titolo:
   riceve il trattamento da testo corrente, non da heading. */
body.mg-redesign.woocommerce .term-description h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 6px;
  text-align: left !important;
}
/* Il grassetto d'epoca su interi paragrafi pesa troppo per una nota. */
body.mg-redesign.woocommerce .term-description p strong,
body.mg-redesign.woocommerce .term-description h4 strong { font-weight: 600; }
body.mg-redesign.woocommerce .term-description p:last-child { margin-bottom: 0; }
/* Ricolora il rosso #ff0000 inline sul bordeaux del tema (--danger). !important:
   e' l'unico modo di battere uno stile inline; giustificato. */
body.mg-redesign.woocommerce .term-description [style*="color"] {
  color: var(--danger) !important;
}

/* --------------------------------------------------------------------------
   RECENSIONI PRODOTTO (#reviews)
   --------------------------------------------------------------------------
   Il box della singola recensione (.comment-text) usa il default WooCommerce:
   bordo 1px grigio + radius 4px. La sua regola ha 2 ID di specificita'
   (#reviews #comments), quindi la battiamo con (2,4,3) aggiungendo ol.commentlist
   + le due classi del body. Lo portiamo alla card outlinata del tema, le stelle
   al giallo --accent (piu' coerente col tono "oro"), l'avatar a cerchio ink. -- */
body.mg-redesign.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  padding: 16px 20px;
}
body.mg-redesign.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  padding: 0;
}
body.mg-redesign.woocommerce #reviews .star-rating {
  color: var(--accent);
}
body.mg-redesign.woocommerce #reviews .comment-text p.meta {
  font-family: var(--font-ui);
  color: var(--ink-3);
  font-size: 13px;
}
body.mg-redesign.woocommerce #reviews .comment-text .description {
  font-family: var(--font-ui);
  color: var(--ink);
  line-height: 1.5;
}

/* ==========================================================================
   FLUSSO TRANSAZIONALE — account, carrello, checkout
   --------------------------------------------------------------------------
   Da quando mg_redesign_body_class() aggiunge body.mg-redesign anche a queste
   pagine, qui sotto le vestiamo col design. Tutto scoped a
   body.mg-redesign.woocommerce; i bottoni prodotto (add_to_cart) hanno regole
   piu' specifiche piu' su e restano invariati.
   ========================================================================== */

/* --- Bottoni WooCommerce generici (Accedi, Registrati, Applica coupon,
       Aggiorna carrello, Procedi, Effettua ordine) -> bottone giallo tema --- */
body.mg-redesign.woocommerce-page .button,
body.mg-redesign.woocommerce-page button.button,
body.mg-redesign.woocommerce-page input.button,
body.mg-redesign.woocommerce-page a.button,
body.mg-redesign.woocommerce-page .woocommerce-Button,
body.mg-redesign.woocommerce-page #place_order {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  line-height: 1.1;
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 13px 22px;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
body.mg-redesign.woocommerce-page .button:hover,
body.mg-redesign.woocommerce-page button.button:hover,
body.mg-redesign.woocommerce-page input.button:hover,
body.mg-redesign.woocommerce-page a.button:hover,
body.mg-redesign.woocommerce-page .woocommerce-Button:hover,
body.mg-redesign.woocommerce-page #place_order:hover {
  color: var(--accent-ink);
  background: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}
body.mg-redesign.woocommerce-page .button:active,
body.mg-redesign.woocommerce-page #place_order:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

/* --- Campi form (login, registrazione, indirizzi, checkout) -> outline tema --- */
body.mg-redesign.woocommerce-page form .input-text,
body.mg-redesign.woocommerce-page input.input-text,
body.mg-redesign.woocommerce-page .woocommerce-Input input,
body.mg-redesign.woocommerce-page input[type="text"],
body.mg-redesign.woocommerce-page input[type="email"],
body.mg-redesign.woocommerce-page input[type="password"],
body.mg-redesign.woocommerce-page input[type="tel"],
body.mg-redesign.woocommerce-page input[type="number"],
body.mg-redesign.woocommerce-page select,
body.mg-redesign.woocommerce-page textarea,
body.mg-redesign.woocommerce-page .select2-container .select2-selection {
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 11px 13px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
}
body.mg-redesign.woocommerce-page form .input-text:focus,
body.mg-redesign.woocommerce-page input.input-text:focus,
body.mg-redesign.woocommerce-page select:focus,
body.mg-redesign.woocommerce-page textarea:focus {
  outline: 3px solid var(--accent-2);
  outline-offset: 1px;
}

/* --- Titoli delle pagine transazionali -> display font --- */
body.mg-redesign.woocommerce-account h1,
body.mg-redesign.woocommerce-account h2,
body.mg-redesign.woocommerce-cart h1,
body.mg-redesign.woocommerce-checkout h1,
body.mg-redesign.woocommerce-checkout h3,
body.mg-redesign.woocommerce-page .cart_totals h2,
body.mg-redesign.woocommerce-page #order_review_heading {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
  line-height: 1.05;
}

/* --- Riquadri (login/registrati, form indirizzi) -> card outlinata --- */
body.mg-redesign.woocommerce-page .woocommerce-form-login,
body.mg-redesign.woocommerce-page .woocommerce-form-register,
body.mg-redesign.woocommerce-page .woocommerce-Address .u-column1,
body.mg-redesign.woocommerce-page .woocommerce-EditAccountForm {
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  padding: 24px;
}

/* --- Messaggi/notice WooCommerce -> stile tema --- */
body.mg-redesign.woocommerce-page .woocommerce-message,
body.mg-redesign.woocommerce-page .woocommerce-info,
body.mg-redesign.woocommerce-page .woocommerce-error {
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  border-top: none;
  background: var(--surface);
  font-family: var(--font-ui);
}
body.mg-redesign.woocommerce-page .woocommerce-message { border-left: 5px solid var(--ok); }
body.mg-redesign.woocommerce-page .woocommerce-info { border-left: 5px solid var(--accent-2); }
body.mg-redesign.woocommerce-page .woocommerce-error { border-left: 5px solid var(--danger); }

/* --- Navigazione "Il mio account" -> chip tema --- */
body.mg-redesign.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.mg-redesign.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
body.mg-redesign.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --- Tabelle (carrello, ordini) -> outline tema --- */
body.mg-redesign.woocommerce-page table.shop_table {
  border: var(--outline-w) solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
}
body.mg-redesign.woocommerce-page table.shop_table th {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 13px;
  background: var(--surface-2);
}
body.mg-redesign.woocommerce-page table.cart td,
body.mg-redesign.woocommerce-page table.shop_table td,
body.mg-redesign.woocommerce-page table.shop_table th {
  border-top: 1px solid var(--surface-2);
}

/* --------------------------------------------------------------------------
   CARD LOOP SU MOBILE — titoli clampati
   --------------------------------------------------------------------------
   A 2 colonne i titoli chilometrici allungavano le card: 2 righe con
   ellissi, il titolo completo resta sulla scheda prodotto. Il bottone corto
   ("Aggiungi") lo fa .mg-atc-tail in mg-design.css + functions.php. */
@media (max-width: 680px) {
  body.mg-redesign.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}