/*
Theme Name: Latteria Agricola Begozzo — Negozio
Theme URI: https://www.latteriabegozzo.it/
Template: forgepress-begozzo
Author: Dgitaly
Description: Tema figlio della Latteria Agricola Begozzo. Porta la barra del negozio e i template di WooCommerce. Il tema PADRE resta generato da ForgePress e non si tocca mai a mano: disattivare questo figlio riporta il sito allo stato precedente, senza il negozio ma integro.
Version: 0.1.0
Requires at least: 6.9
Requires PHP: 8.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: begozzo-shop
*/

/* ==========================================================================
   Il figlio NON ridichiara la palette.
   --------------------------------------------------------------------------
   I colori del padre arrivano tutti da `css/tokens.css` piu' l'overlay
   `css/preset.css` del preset «blu-latteria», gia' misurato: dodici coppie di
   testo in AA fra 5,20 e 14,63. Ridichiararli qui significherebbe una seconda
   sorgente di verita' per il colore, che al primo ritocco diverge.
   Qui sotto vive SOLO cio' che il negozio aggiunge e che il padre non conosce.
   ========================================================================== */

/* --- Il negozio in testata: due azioni compatte + un pannello che si apre --- */
/* ⚠⚠ Prima era una BANDA fissa sotto la testata. Misurato a 390x667: 240px dei 667 della prima schermata
   — piu' di un terzo di cio' che un visitatore vede prima di scorrere — occupati da reparti e ricerca, che
   servono dopo. Su desktop 91px di cromo sopra l'hero. Ora sono due pulsanti nella riga della testata, e
   il resto vive in un pannello. Nessuna destinazione persa: i reparti stanno nel pannello.
   ⚠ `.shop-bar__n` conserva il NOME DI PRIMA: e' il selettore che WooCommerce aggiorna via
   `woocommerce_add_to_cart_fragments`. Rinominarlo avrebbe lasciato il conteggio fermo a zero dietro una
   cache di pagina, senza nessun errore da nessuna parte. */
.shop-azioni { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: calc(var(--space-2) * -1); }
.shop-azioni__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 1px solid transparent;
  color: var(--brand); background: transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shop-azioni__btn:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.shop-azioni__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shop-azioni__btn[aria-expanded="true"] { background: var(--brand); color: var(--on-dark); }
/* Il conteggio e' una pastiglia sull'angolo dell'icona: a zero resta discreto, oltre lo zero e' d'accento. */
.shop-bar__n {
  position: absolute; top: -.15rem; inset-inline-end: -.15rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .28em; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: .68rem; font-weight: 700; line-height: 1;
  background: var(--accent-fill); color: var(--ink); border: 2px solid var(--paper);
}
/* A carrello vuoto la pastiglia non dice niente e chiama l'occhio: sparisce. */
.shop-bar__n[data-n="0"] { display: none; }

.shop-pannello { border-bottom: var(--border); background: var(--surface); }
.shop-pannello__row { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-4); flex-wrap: wrap; }
.shop-cerca { display: flex; gap: var(--space-2); flex: 1 1 22rem; }
.shop-cerca input {
  flex: 1; min-width: 0; border: var(--border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: .95rem;
}
.shop-cerca input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shop-reparti { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.shop-reparti a { color: var(--ink-muted); font-size: .92rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.shop-reparti a:hover { color: var(--brand); border-bottom-color: currentColor; }
@media (max-width: 720px) {
  .shop-pannello__row { gap: var(--space-3); }
  .shop-cerca { flex: 1 1 100%; }
}

/* --- Le regole di WooCommerce che TRAVOLGONO la testata del padre --- */
/* ⚠⚠ `woocommerce-layout.css` dichiara `.woocommerce img, .woocommerce-page img { height: auto }`.
   Specificita' (0,1,1) contro la (0,1,0) di `.wordmark__emblem`: su OGNI pagina del negozio l'emblema
   torna alla sua misura naturale — misurato, da 66px a 200px — e il marchio sale sopra il menu.
   Il difetto non esiste sulle pagine editoriali, quindi si vede solo entrando in un prodotto.
   Si riafferma con la specificita' che serve, e SOLO dentro la testata: le fotografie di prodotto devono
   continuare a comportarsi come vuole WooCommerce. */
.woocommerce .site-header .wordmark__emblem,
.woocommerce-page .site-header .wordmark__emblem { height: 66px; width: auto; }
@media (max-width: 640px) {
  .woocommerce .site-header .wordmark__emblem,
  .woocommerce-page .site-header .wordmark__emblem { height: 52px; }
}

/* --- WooCommerce: allineamento al sistema del padre --- */
/* ⚠ Il markup di WooCommerce e' SUO, non del verticale: le sue classi non passano dai pattern e quindi
   non ereditano niente. Qui si riconducono ai token del padre le sole superfici che si vedono. */
.woocommerce-page .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); list-style: none; padding: 0; }
@media (max-width: 900px) { .woocommerce-page .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .woocommerce-page .products { grid-template-columns: 1fr; } }
.woocommerce-page ul.products li.product { background: var(--paper); border: var(--border); border-radius: var(--radius); overflow: hidden; padding: 0; }
.woocommerce-page ul.products li.product img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block; }
.woocommerce-page ul.products li.product .woocommerce-loop-product__title { font-size: var(--text-lg); color: var(--ink); padding: var(--space-4) var(--space-4) 0; }
.woocommerce-page ul.products li.product .price { color: var(--accent-text); font-weight: 600; padding: 0 var(--space-4) var(--space-4); display: block; }
/* --- Pulsanti --- */
/* Il pulsante del negozio e' lo stesso oggetto del pulsante del sito: stessa forma, stessa risposta al
   passaggio del mouse, stesso anello di fuoco. Un negozio che si stacca dal sito si legge come un pezzo
   incollato. */
.woocommerce-page .button, .woocommerce-page button.button, .woocommerce-page input.button,
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce-page a.button {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--on-dark); border-radius: 999px; padding: .85em 1.7em; font-weight: 600; border: 0;
  letter-spacing: .01em; line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 18px rgba(18,56,95,.20); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); }
.woocommerce .button:hover, .woocommerce-page .button:hover,
.woocommerce a.button:hover, .woocommerce-page a.button:hover,
.woocommerce button.button:hover, .woocommerce-page button.button:hover {
  color: var(--on-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,56,95,.28); filter: saturate(1.08); }
.woocommerce .button:focus-visible, .woocommerce-page .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .woocommerce .button, .woocommerce-page .button { transition: none; }
  .woocommerce .button:hover, .woocommerce-page .button:hover { transform: none; }
}

/* ⚠ Il pulsante d'accento porta inchiostro SCURO: la paglia chiara (#D9A441) fa 6,90 con --ink e 1,9 col
   bianco. Bianco sopra sarebbe la violazione che i temi di categoria fanno sempre. */
.woocommerce-page .single_add_to_cart_button, .woocommerce .single_add_to_cart_button {
  background: linear-gradient(180deg, var(--accent-fill) 0%, #C7913A 100%); color: var(--ink);
  box-shadow: 0 6px 18px rgba(154,107,20,.26); font-size: 1.02rem; }
.woocommerce-page .single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button:hover {
  background: linear-gradient(180deg, var(--accent-fill-hover) 0%, var(--accent-fill) 100%); color: var(--ink);
  box-shadow: 0 12px 28px rgba(154,107,20,.32); }
/* Il pulsante spento DEVE sembrare spento: senza, si preme e non succede niente. */
.woocommerce .single_add_to_cart_button.disabled, .woocommerce-page .single_add_to_cart_button.disabled {
  filter: grayscale(.55); opacity: .6; box-shadow: none; }

/* --- Avvisi --- */
.woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info,
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info {
  border-top: 0; border-inline-start: 4px solid var(--brand); border-radius: var(--radius);
  background: linear-gradient(120deg, var(--sage-tint, #F6EBD6) 0%, var(--surface) 100%); color: var(--ink); }
.woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error {
  border-top: 0; border-inline-start: 4px solid #9A2B1F; border-radius: var(--radius); background: var(--surface); color: var(--ink); }

/* --- Prezzi --- */
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--brand); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.woocommerce div.product .woocommerce-variation-price .amount { color: var(--brand); font-family: var(--font-display); }

/* --- Carrello --- */
/* Una tabella di sistema non si legge come il resto del sito: qui prende le superfici, i raggi e i filetti
   del padre, e su telefono le righe diventano SCHEDE (una tabella a 6 colonne su 390px non si legge). */
.woocommerce table.shop_table { border: var(--border); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--paper); }
.woocommerce table.shop_table th { background: var(--surface); color: var(--ink); font-weight: 600; padding: var(--space-4); border-bottom: var(--border); }
.woocommerce table.shop_table td { padding: var(--space-4); border-bottom: var(--border); vertical-align: middle; }
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { border-radius: var(--radius); width: 84px; height: auto; }
.woocommerce .cart_totals, .woocommerce-checkout .woocommerce-checkout-review-order {
  background: linear-gradient(168deg, var(--surface) 0%, var(--paper) 100%); border: var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-family: var(--font-display); font-weight: 400; color: var(--brand); }
.woocommerce .quantity input.qty { border: var(--border); border-radius: var(--radius); padding: var(--space-2); background: var(--paper); color: var(--ink); }
.woocommerce .coupon input[type="text"], .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border: var(--border); border-radius: var(--radius); padding: var(--space-3); background: var(--paper); color: var(--ink); }
.woocommerce form .form-row input.input-text:focus-visible, .woocommerce form .form-row textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 720px) {
  .woocommerce table.shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .woocommerce table.shop_table tr { display: block; border-bottom: var(--border); padding: var(--space-3); }
  .woocommerce table.shop_table td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-2) 0; }
  .woocommerce table.shop_table td::before { content: attr(data-title); font-weight: 600; color: var(--ink); }
}

/* ============================ Telefono: i due traboccamenti di WooCommerce ============================ */
/* Misurati a 390px con il menu APERTO: il pannello e' `position: fixed` largo quanto la finestra, e se la
   PAGINA e' piu' larga il browser rimpicciolisce la vista — il pannello smette di coprire lo schermo e
   sotto si legge il contenuto. Non e' un difetto del menu: e' il trabocco orizzontale della pagina.
   1) Il blocco «prodotti» che WooCommerce mette sotto il carrello e il pagamento apre le sue gronde con
      margini NEGATIVI: 406px dentro una finestra di 390 (misurato, 8px di trabocco).
   2) La tabella delle varianti sulla scheda prodotto non si piega: 598px, con il menu a tendina del
      formato largo 337px dentro una cella di 482 (misurato, 208px di trabocco). Su telefono le sue righe
      diventano blocchi, come gia' fanno quelle del carrello. */
.wc-block-grid__products { margin-left: 0; margin-right: 0; max-width: 100%; }
@media (max-width: 720px) {
  .woocommerce table.variations,
  .woocommerce table.variations tbody,
  .woocommerce table.variations tr,
  .woocommerce table.variations th,
  .woocommerce table.variations td { display: block; width: auto; max-width: 100%; padding-inline: 0; }
  .woocommerce table.variations th { text-align: left; background: transparent; border: 0; padding-block: var(--space-2) var(--space-1); }
  .woocommerce table.variations td { border: 0; padding-block: 0 var(--space-4); }
  /* ⚠ `display: block`, non solo `width: 100%`: il menu a tendina di WooCommerce e' `inline-block`, e a
     larghezza piena la riga di testo che lo contiene aggiunge lo spazio dei nodi bianchi intorno —
     misurati 403px di contenuto in una cella di 390. Fuori dal flusso in linea il problema non esiste. */
  /* ⚠⚠ La specificita' va MISURATA, non stimata: WooCommerce dichiara
     `.woocommerce div.product form.cart .variations select { display: inline-block }` (0,4,1), e un
     `.woocommerce table.variations select` (0,2,1) perde in silenzio — la regola c'e', il difetto pure.
     Questo selettore fa (0,4,4) e vince. E' il difetto piu' ricorrente della flotta: WP che prevale. */
  .woocommerce div.product form.cart table.variations td select { display: block; width: 100%; max-width: 100%; }
  .woocommerce .woocommerce-variation-add-to-cart .quantity { margin-bottom: var(--space-3); }
}
/* 3) L'ingranditore della galleria clona la fotografia a misura piena (1200px) e la fa scorrere dentro la
      cornice: senza ritaglio sulla cornice, quel clone allarga la pagina di 13px su telefono. Il ritaglio
      e' anche il modo in cui l'effetto deve funzionare — si guarda dentro una finestra, non si sborda. */
.woocommerce-product-gallery__image, .woocommerce-product-gallery__wrapper { overflow: hidden; }

/* ⚠⚠ GRONDA LATERALE DEL NEGOZIO. Misurato a 390px: su TUTTE le pagine di WooCommerce — scheda prodotto,
   negozio, carrello, pagamento, area riservata — il testo tocca i due bordi dello schermo, margine 0px da
   una parte e dall'altra. A 1440 invece la gronda c'e' (130px) perche' il contenuto e' piu' stretto della
   finestra: e' l'illusione che nasconde il difetto, e si vede solo scendendo di misura.
   Le pagine editoriali la gronda ce l'hanno da `.container`; quelle di WooCommerce usano il layout
   `is-layout-constrained` di WordPress, che sotto la larghezza di contenuto non mette alcun padding.
   Si mette sul `main`: il layout vincolato centra dentro la scatola gia' rientrata, quindi sopra la soglia
   non cambia nulla di visibile. */
.woocommerce-page main.wp-block-group,
.woocommerce main.wp-block-group { padding-inline: var(--gutter); }

/* --- Le schede del negozio parlano la lingua delle schede editoriali --------------------------------- */
/* ⚠ Prima le fotografie galleggiavano sul fondo pagina, titolo e prezzo centrati, il pulsante sospeso: il
   negozio sembrava un altro sito. Qui la scheda prende la stessa forma di `.jar` — stessi token di raggio,
   filetto e rilievo — e lo stesso allineamento a sinistra del resto del sito.
   ⚠⚠ Le fotografie del catalogo hanno inquadrature DIVERSE (una e' un primo piano, le altre riprese piu'
   larghe): dentro una cornice a rapporto fisso con `cover` la scala torna una sola per tutte. Senza, la
   riga di schede mostra sei formaggi di sei dimensioni diverse e sembra un errore di fotografia. */
.woocommerce ul.wc-block-product-template,
.wc-block-product-template { gap: var(--tile-gap); }
li.wc-block-product {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--jar-border, var(--border));
  border-radius: var(--jar-radius, var(--radius));
  box-shadow: var(--jar-shadow, none);
  overflow: hidden; text-align: start;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
li.wc-block-product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { li.wc-block-product:hover { transform: none; } }
li.wc-block-product > * { margin: 0; }
li.wc-block-product .wc-block-components-product-image {
  aspect-ratio: var(--jar-ratio, 3 / 2); overflow: hidden;
  background: var(--jar-media-bg, var(--surface)); margin: 0;
}
li.wc-block-product .wc-block-components-product-image a,
li.wc-block-product .wc-block-components-product-image__inner-container { display: block; height: 100%; }
li.wc-block-product .wc-block-components-product-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur) var(--ease);
}
li.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
/* Titolo, prezzo e pulsante vivono in una colonna con la stessa imbottitura della scheda editoriale. */
li.wc-block-product > :not(.wc-block-components-product-image) { padding-inline: var(--space-5); }
li.wc-block-product > :nth-child(2) { padding-top: var(--space-5); }
li.wc-block-product .wp-block-post-title {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-muted); line-height: 1.3; text-align: start; margin-bottom: var(--space-2);
}
li.wc-block-product .wp-block-post-title a { color: inherit; text-decoration: none; }
li.wc-block-product .wp-block-post-title a:hover .jar__eta { color: var(--brand-deep); }
li.wc-block-product .wc-block-components-product-price {
  text-align: start !important; color: var(--ink); font-weight: 600; font-size: .95rem;
  margin-bottom: var(--space-4);
}
/* ⚠ Il pulsante porta `align-center` come CLASSE di blocco: un `text-align` sul contenitore non lo sposta,
   perche' e' il blocco stesso a centrarsi. Si annulla dove serve, con la specificita' che serve. */
li.wc-block-product .wc-block-components-product-button { margin-top: auto; padding-bottom: var(--space-5); }
/* ⚠ Due trappole in fila su questo solo pulsante.
   1) `.wp-block-button` e `.wc-block-components-product-button` sono lo STESSO elemento, non uno dentro
      l'altro: un selettore discendente non aggancia nulla, e il pulsante resta centrato in silenzio.
   2) Il contenitore e' `flex-direction: column`. Su una colonna e' `align-items` a governare l'asse
      ORIZZONTALE, non `justify-content` — che infatti risultava gia' `flex-start` mentre il pulsante
      restava al centro: la regola c'era, l'asse era l'altro. Misurato: titolo e prezzo a 25px dal bordo
      della scheda, il pulsante a 146. */
li.wc-block-product .wc-block-components-product-button.wp-block-button { text-align: start; align-items: flex-start; }
li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius);
  background: var(--brand); color: var(--on-dark); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem; text-decoration: none;
}
li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover { background: var(--brand-deep); }
li.wc-block-product .wc-block-components-product-button .wp-block-button__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }