/* ============================================================
   coherence.css — livello di COERENZA design MonteSoprano
   Caricato PER ULTIMO su OGNI pagina (page-template + WooCommerce).
   Unifica tipografia, spaziatura, sub-hero, colore/componenti, mobile, chrome.
   Popolato dall'audit multi-agente 2026-07-18.
   ============================================================ */

/* ============================================================
   coherence.css — DIMENSIONE: TIPOGRAFIA
   MonteSoprano · Design System "Allevatori Editoriale"
   Caricato PER ULTIMO su OGNI pagina.
   Scopo: UNA sola scala tipografica per tutto il sito.
   Nota specificità: molti titoli sono impostati da regole
   .subhero:not(.hero) h1 (0,2,1) o da <style> inline nel <head>
   con ordine di cascata non garantito → dove serve garantire il
   risultato uso !important (consentito dal brief).
   Nota font-family: uso stack concreti 'Fraunces'/'Inter' e non i
   token, perché il sito mescola --serif/--sans e --ms-serif/--ms-sans;
   così la famiglia è corretta ovunque anche se un token manca.
   ============================================================ */

:root{
  /* ---- SCALA TIPOGRAFICA UNIFICATA (fonte di verità unica) ---- */
  --ct-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --ct-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Hero display: SOLO home + pagine "pillar" a tutto schermo */
  --ct-hero:clamp(3rem,10.5vw,9.5rem);

  /* Titolo pagina interna (sub-hero): UNA misura per TUTTE
     le secondarie (menu, chi-siamo, ristoranti, contatti, camere, shop) */
  --ct-h1:clamp(2.6rem,7vw,6rem);
  --ct-h1-mobile:clamp(2.2rem,9vw,3.6rem);      /* <=640px */

  /* Titolo di pagina "contenuto" (PDP, carrello, checkout) */
  --ct-h1-content:clamp(2.2rem,5vw,3.6rem);

  /* Titolo di sezione */
  --ct-h2:clamp(2rem,5vw,3.6rem);
  /* Sotto-titolo / nome card grande */
  --ct-h3:clamp(1.4rem,2.4vw,1.9rem);

  /* Eyebrow */
  --ct-eyebrow-fs:.72rem;
  --ct-eyebrow-ls:.16em;                        /* era .18em / .10em → .16em (spec) */
  --ct-eyebrow-onDark:#e6e0d5;                  /* unico colore on-dark */
}

/* ------------------------------------------------------------
   1) LINE-HEIGHT & LETTER-SPACING BASE DEI TITOLI
   Il base globale mette 1.03 a h1/h2/h3 (troppo stretto per h2/h3).
   Riallineo ai valori del design system, mantenendo h1 compatto.
   Stessa specificità del base (0,0,1) ma sorgente successiva → vince.
   ------------------------------------------------------------ */
h1{line-height:1.06;letter-spacing:-.02em}
h2{line-height:1.12;letter-spacing:-.015em}
h3{line-height:1.2;letter-spacing:-.005em}

/* ------------------------------------------------------------
   2) HERO DISPLAY — home e pagine pillar a tutto schermo
   Resta grande e IDENTICO tra home e agriturismo (già coerente).
   ⚠️ agriturismo eredita questo hero: se lo si vuole allineare
   alle altre pagine interne, aggiungere nel markup di agriturismo
   una classe (es. class="hero subhero") — non risolvibile via CSS
   perché i template non emettono body_class().
   ------------------------------------------------------------ */
.hero h1{
  font-family:var(--ct-serif);
  font-size:var(--ct-hero);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.02;
}

/* ------------------------------------------------------------
   3) TITOLO PAGINA INTERNA (SUB-HERO) — UNA misura per tutte
   Copre: .subhero h1, il global .subhero:not(.hero) h1 (0,2,1),
   il caso camere .hero.subhero h1, e lo shop hero .ms-shop-hero h1.
   !important per battere la guerra di specificità + <style> inline.
   ------------------------------------------------------------ */
.subhero h1,
.subhero:not(.hero) h1,
.hero.subhero h1,
.ms-shop-hero h1{
  font-family:var(--ct-serif)!important;
  font-size:var(--ct-h1)!important;
  font-weight:500!important;
  letter-spacing:-.03em!important;
  line-height:1.05!important;
}

/* Mobile: ORA si applica davvero (prima era battuto da .subhero:not(.hero) h1).
   Selettori a specificità piena + !important così vince nel range. */
@media(max-width:640px){
  .subhero h1,
  .subhero:not(.hero) h1,
  .hero.subhero h1,
  .ms-shop-hero h1{
    font-size:var(--ct-h1-mobile)!important;
  }
}

/* ------------------------------------------------------------
   4) TITOLO PAGINA "CONTENUTO" — PDP, carrello, checkout
   Tier più piccolo e coerente tra loro (era 3.1 / 3.6 misti).
   ------------------------------------------------------------ */
.pdp__title,
.single-product div.product .summary .product_title,
.single-product div.product .summary h1.product_title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-products-header__title.page-title{
  font-family:var(--ct-serif)!important;
  font-size:var(--ct-h1-content)!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
  line-height:1.08!important;
}

/* ------------------------------------------------------------
   5) TITOLO DI SEZIONE (H2) — un'unica misura per il ruolo
   Unifica section__head / story / intro / agri / news (erano 3→4rem).
   Solo tipografia: NON tocco i colori (es. .news h2 su fondo scuro).
   ------------------------------------------------------------ */
.section__head h2,
.story h2,
.intro h2,
.agri h2,
.news h2{
  font-family:var(--ct-serif);
  font-size:var(--ct-h2);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
}

/* ------------------------------------------------------------
   6) SOTTO-TITOLI / NOMI CARD GRANDI (H3) — coerenti tra pagine
   world__t / saga__t / place-card / room / place name erano
   sparsi 2.1 / 2.5 / 2.6 / 2.9rem. Unico valore H3.
   ------------------------------------------------------------ */
.world__t,
.saga__t,
.ms-place-card__name,
.room__name{
  font-family:var(--ct-serif);
  font-size:var(--ct-h3);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.005em;
}

/* ------------------------------------------------------------
   7) EYEBROW — tracking/size/weight uniformi ovunque
   Un solo valore per .eyebrow (template/site) e per lo shop hero.
   ------------------------------------------------------------ */
.eyebrow,
.ms-shop-hero__eyebrow{
  font-family:var(--ct-sans);
  font-size:var(--ct-eyebrow-fs);
  font-weight:600;
  letter-spacing:var(--ct-eyebrow-ls);
  line-height:1.4;
  text-transform:uppercase;
}
/* Trattino-accento: un solo colore (ocra) su tutte le pagine
   (prima: rosso nello shop, ocra altrove) */
.eyebrow::before,
.ms-shop-hero__eyebrow::before{
  background:var(--ochre,#C8873A)!important;
}
/* Eyebrow su fondo scuro: un solo colore (prima #c9c2b6 vs #e6e0d5) */
.eyebrow.on-dark,
.subhero .eyebrow.on-dark,
.hero .eyebrow.on-dark{
  color:var(--ct-eyebrow-onDark);
}

/* ------------------------------------------------------------
   8) SAFETY FONT-FAMILY — evita default browser se un token manca
   Alcune regole in woocommerce.css usano var(--ms-serif)/var(--ms-sans)
   senza fallback. Riaggancio le famiglie sui nodi tipografici chiave.
   ------------------------------------------------------------ */
body{font-family:var(--ct-sans)}
h1,h2,h3,h4,.display,.pdp__title,.product_title{font-family:var(--ct-serif)}

/* =====================================================================
   coherence.css — DIMENSIONE: SPAZIATURA & RITMO
   MonteSoprano (hello-child). Caricato PER ULTIMO su ogni pagina
   (inc/woo-skin.php) => a pari specificità vince per ordine sorgente.
   Standard di riferimento = pagine editoriali "Allevatori Editoriale"
   (site.css + *.php self-contained). Obiettivo: portare le pagine
   WooCommerce allo STESSO ritmo verticale, container e gap.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) SCALA DI SPAZIATURA CANONICA (single source of truth)
   Ridefinita qui cosi' ogni regola sotto punta alle stesse variabili.
   Valori presi dall'editoriale, che e' lo standard del design system.
   --------------------------------------------------------------------- */
:root{
  --container: 1280px;                       /* larghezza unica container */
  --pad-inline: clamp(20px, 5vw, 64px);      /* padding orizzontale .wrap  */
  --section-y: clamp(72px, 11vw, 150px);     /* RITMO VERTICALE sezione     */
  --section-head-gap: clamp(40px, 6vw, 72px);/* stacco titolo->contenuto    */
  --grid-gap: 18px;                          /* gap griglie prodotto desktop*/
  --grid-gap-sm: 14px;                       /* gap griglie prodotto mobile */
  --block-gap: clamp(30px, 5vw, 80px);       /* gap blocchi 2 colonne       */
}

/* ---------------------------------------------------------------------
   2) CONTAINER UNICO — 1280px ovunque (blocca la divergenza latente
   fra --container e --msb-container in woocommerce.css:65/2026).
   --------------------------------------------------------------------- */
.wrap,
.hero__inner, .subhero__inner,
.woocommerce, .woocommerce-page,
.single-product.woocommerce div.product,
.single-product .woocommerce div.product{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------
   3) RITMO VERTICALE DI SEZIONE — un solo valore su tutto il sito
   (le pagine editoriali gia' lo usano; qui lo "blocco").
   --------------------------------------------------------------------- */
.section{ padding: var(--section-y) 0; }
.section__head{ margin-bottom: var(--section-head-gap); }

/* ---------------------------------------------------------------------
   4) WOOCOMMERCE — allinea shop/PDP al ritmo editoriale.
   FIX finding #2: il wrapper contenuto Woo era definito due volte
   (padding-top max 48px vs 44px). Unifico al valore piu' arioso.
   Uso la selettivita' del blocco "msb" (.single-product.woocommerce...)
   perche' e' quello che vince a runtime.
   --------------------------------------------------------------------- */
/* ⚠️ `:not(body)` NON è pignoleria: WordPress mette `woocommerce` E
   `woocommerce-page` sul <body>, non solo sul contenitore del contenuto. Senza
   l'esclusione questa regola dava al <body> un padding-top di 56px, mentre la
   barra fissa in cima ne occupa 104 (36 di topbar + 68 di nav): fra i 36 e i 56
   px non dipingeva nessuno e attraverso la nav semitrasparente si vedeva il
   fondo crema — la "striscia bianca" sotto il banner, su TUTTE le pagine
   WooCommerce. Il caso della scheda prodotto era già stato tamponato più sotto
   con `body.single-product.woocommerce-page{padding-top:0}`; shop e archivi no.
   Qui si toglie la causa, così quel tampone non serve più. */
.woocommerce:not(body), .woocommerce-page:not(body),
.single-product.woocommerce div.product{
  padding-top: clamp(28px, 4vw, 56px);   /* leggermente piu' aria dell'attuale 44/48 */
}

/* ---------------------------------------------------------------------
   5) SCHEDA PRODOTTO 2 COLONNE — FIX finding #1: consolido i DUE
   layout duplicati (76px/1.02-.98fr vs 72px/54-46%) in UN solo set.
   Replico la selettivita' del blocco vincente cosi' l'ordine sorgente
   (coherence caricato per ultimo) chiude entrambe le varianti.
   --------------------------------------------------------------------- */
.single-product div.product,
.single-product.woocommerce div.product,
.single-product .woocommerce div.product{
  grid-template-columns: minmax(0, 54%) minmax(0, 46%);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(28px, 4vw, 44px);
}

/* ---------------------------------------------------------------------
   6) SOTTO-SEZIONI WOO (tabs / correlati / upsell) — FIX finding #4:
   avevano margin-top e padding-top diversi tra loro e troppo compressi
   rispetto all'editoriale. Le porto a UN ritmo unico, piu' ampio, cosi'
   la PDP "respira" come le pagine editoriali.
   --------------------------------------------------------------------- */
.single-product div.product .woocommerce-tabs,
.single-product .related.products,
.single-product .up-sells.upsells{
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: clamp(44px, 5.5vw, 72px);
  border-top: 1px solid var(--border, #E3DBCE);
}

/* ---------------------------------------------------------------------
   7) GRIGLIE PRODOTTO — FIX finding #3: stesso gap tra HOME e SHOP.
   Desktop 18px, mobile 14px, per TUTTE le griglie prodotto.
   (chiude .prods gap:12px vs ul.products gap:14px in mobile).
   --------------------------------------------------------------------- */
.prods,
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products[class*="columns-"]{
  gap: var(--grid-gap);
}
/* Il collasso a 2 colonne avveniva a breakpoint diversi (640 vs 820):
   uniformo il gap mobile su entrambi i sistemi a 14px. coherence e'
   ultimo => vince a pari specificita' per .prods; per ul.products
   pareggio la specificita' col selettore [class*].                     */
@media (max-width: 820px){
  .prods,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products[class*="columns-"]{
    gap: var(--grid-gap-sm);
  }
}

/* ---------------------------------------------------------------------
   8) MARGINE DI CHIUSURA GRIGLIA — allineo il margin-bottom della
   lista prodotti allo stacco editoriale (gia' clamp 40/72, lo blocco
   sulla stessa variabile per coerenza col ritmo di sezione).
   --------------------------------------------------------------------- */
.woocommerce ul.products{
  margin-bottom: var(--section-head-gap);
}

/* ---------------------------------------------------------------------
   9) BLOCCHI 2 COLONNE EDITORIALI (story/saga/intro/manifesto) —
   gap unico cosi' i moduli analoghi tra pagine diverse hanno lo stesso
   respiro orizzontale. (story__grid:80px, saga__block:84px erano vicini
   ma non identici tra chi-siamo e landing.)
   --------------------------------------------------------------------- */
.story__grid,
.saga__block,
.intro__grid,
.manifesto__grid{
  gap: var(--block-gap);
}

/* =========================================================================
   COHERENCE.CSS — DIMENSIONE: SUB-HERO / APERTURE PAGINA
   Caricato PER ULTIMO su ogni pagina. Nessun !important necessario:
   i selettori qui hanno specificita' >= agli inline e vincono per ordine sorgente.

   MODELLO UNICO:
   - 1 solo BRAND-HERO a piena altezza: la HOME (.hero SENZA .subhero). Resta 100svh
     + scroll indicator + h1 grande. NON toccato.
   - 1 solo pattern SUB-HERO EDITORIALE (con immagine) per TUTTE le altre pagine:
       template .subhero:not(.hero)   -> chi-siamo, menu, ristoranti, contatti
       .hero.subhero                  -> camere (+ agriturismo dopo il fix markup, vedi NOTA)
       .ms-shop-hero                  -> shop
     Tutte a 62svh, stessa foto scurita, stesso overlay 4 stop, stesso h1, niente scroll.
   - Il CART (.subhero flat, SENZA immagine) resta la variante 'piatta' transazionale:
     ne uniformo solo tipografia/eyebrow, non l'altezza. Uso :has(.subhero__bg) per
     NON dargli l'altezza immagine.

   NOTA MARKUP (1 riga, va fatta a mano — audit di sola lettura):
     agriturismo.php riga 471: <header class="hero">  ->  <header class="hero subhero">
     Cosi' agriturismo smette di clonare la home (100svh + scroll) ed entra nel pattern
     sub-hero come camere. Senza questo, agriturismo NON e' targettabile via CSS
     (usa .hero identico alla home, nessun discriminante di pagina).
   ========================================================================= */

/* ---- gruppo target: SUB-HERO EDITORIALE CON IMMAGINE ---- */

/* 1) ALTEZZA UNICA 62svh (uccide 52vh shop, 82svh camere; svh = stabile su mobile).
   :has(.subhero__bg) esclude il cart flat che non ha immagine. */
.subhero:not(.hero):has(.subhero__bg),
.hero.subhero,
.ms-shop-hero{
  min-height:62svh;
  display:flex;
  align-items:flex-end;
}

/* 2) FOTO SCURITA UGUALE per tutti (era .5 shop / .62 camere-agri / .6 editoriali) */
.subhero:not(.hero) .subhero__bg img,
.hero.subhero .hero__bg img,
.ms-shop-hero__bg img{
  filter:brightness(.6) contrast(1.05) saturate(.92);
}

/* 3) OVERLAY GRADIENT 4 STOP UNICO (fixa lo shop che era a 3 stop) */
.subhero:not(.hero) .subhero__bg::after,
.hero.subhero .hero__bg::after,
.ms-shop-hero__bg::after{
  background:linear-gradient(180deg,
    rgba(18,16,14,.55) 0%,
    rgba(18,16,14,.15) 35%,
    rgba(18,16,14,.35) 60%,
    rgba(18,16,14,.92) 100%);
}

/* 4) TITOLO — stessa scala Fraunces (6rem) su tutte le aperture secondarie.
   Il font-size lo do anche al cart flat (coerenza tipografica).
   max-width + margin-top solo alle sub-hero con immagine (il cart ha i crumbs). */
.subhero:not(.hero) h1,
.hero.subhero h1,
.ms-shop-hero h1{
  font-size:clamp(2.6rem,8vw,6rem);
  line-height:1.04;
  letter-spacing:-.03em;
}
.subhero:not(.hero):has(.subhero__bg) h1,
.hero.subhero h1,
.ms-shop-hero h1{
  max-width:20ch;              /* toglie il cap unico 16ch di chi-siamo, uniforma il wrap */
  margin-top:clamp(18px,2.6vw,30px);
}

/* 5) SOTTOTITOLO — stessa larghezza/scala (uniforma 46ch di camere a 52ch) */
.subhero:not(.hero) .subhero__sub,
.hero.subhero .hero__sub,
.ms-shop-hero__sub{
  max-width:52ch;
  font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.65;
}

/* 6) SPAZIATURA eyebrow -> titolo: una sola meccanica (il margin-top dell'h1 sopra).
   Azzero i margin-bottom dei wrapper eyebrow per non sommare due gap diversi. */
.subhero .subhero__eyebrow,
.hero.subhero .hero__eyebrow,
.ms-shop-hero__eyebrow{
  margin-bottom:0;
}

/* 7) EYEBROW su fondo scuro — colore unico leggibile su TUTTE le aperture
   (era #c9c2b6 su home/agri/camere/shop, #e6e0d5 sui sub-hero editoriali) */
.hero .eyebrow.on-dark,
.subhero .eyebrow.on-dark,
.ms-shop-hero__eyebrow{
  color:#e6e0d5;
}
/* trattino eyebrow ocra ovunque (lo shop lo aveva rosso, fuori standard) */
.ms-shop-hero__eyebrow::before{
  background:var(--ochre,#C8873A);
}

/* 8) SCROLL INDICATOR — solo sul brand-hero della HOME.
   Nascosto su ogni apertura secondaria (camere lo mostrava; agriturismo dopo il fix markup). */
.hero.subhero .hero__scroll,
.hero.subhero .subhero__scroll,
.subhero .hero__scroll,
.subhero .subhero__scroll,
.ms-shop-hero .hero__scroll{
  display:none;
}

/* 9) INNER — clearance nav e baseline uniformi sulle sub-hero con immagine
   (contatti aveva padding-top fino a 140px, le altre 0). Escludo il cart flat. */
.subhero:not(.hero):has(.subhero__bg) .subhero__inner,
.hero.subhero .hero__inner,
.ms-shop-hero__inner{
  padding-top:clamp(88px,11vw,120px);
  padding-bottom:clamp(46px,6vw,84px);
}

/* ---- MOBILE: altezza e titolo d'apertura coerenti (<=640px) ---- */
@media (max-width:640px){
  .subhero:not(.hero):has(.subhero__bg),
  .hero.subhero,
  .ms-shop-hero{
    min-height:58svh;
  }
  .subhero:not(.hero) h1,
  .hero.subhero h1,
  .ms-shop-hero h1{
    font-size:clamp(2.4rem,11vw,3.8rem);
  }
}

/* ============================================================================
   coherence.css  ·  DIMENSIONE: COLORE & COMPONENTI  (MonteSoprano)
   Design system "Allevatori Editoriale".
   Caricato PER ULTIMO su OGNI pagina -> vince a pari specificita' per ordine
   sorgente. !important usato SOLO dove un CSS inline del template e' >= specifico
   o usa gia' !important. Nessuna dipendenza esterna.
   ============================================================================ */

/* ------------------------------------------------------------------
   0) TOKEN — riallineo al design system e unifico i due naming
      (--x dei template inline/site  +  --ms-x di ms-tokens/ms-components)
   ------------------------------------------------------------------ */
:root{
  /* Rosso brand: unico e identico nei due sistemi */
  --red:#D41119;        --ms-red:#D41119;
  --red-ink:#9A0B10;    --ms-red-ink:#9A0B10;
  --red-hover:#B00E15;  --ms-red-hover:#B00E15;

  /* Bordo: valore unico allineato allo standard (era #E5DFD4) */
  --border:#E3DBCE;     --ms-border:#E3DBCE;

  /* UNA SOLA OMBRA HOVER — canonizzo sul valore gia' dominante (19 usi).
     Cosi' ogni box-shadow:var(--shadow)/var(--ms-shadow) coincide col resto. */
  --shadow:0 18px 40px rgba(35,33,29,.13);
  --ms-shadow:0 18px 40px rgba(35,33,29,.13);

  /* Accenti decorativi (dove prima si usava impropriamente il rosso) */
  --ochre:#C8873A;
  --olive:#6E7250;
}

/* ============================================================================
   1) DISCIPLINA DEL ROSSO — il rosso resta SOLO su CTA e PREZZI.
      Ogni uso decorativo qui sotto viene neutralizzato verso ink/olive/ochre.
      (Legit e quindi INTOCCATO: .btn-primary/.ms-btn--primary, add_to_cart /
       single_add_to_cart, .card__add:hover, bande CTA .news/.ms-cta,
       .qcard--red, e TUTTI i prezzi .price/.amount/.card__price/.room__price/
       .ms-*__price/.bk-sum-item.total .v.)
   ------------------------------------------------------------------ */

/* 1a) Numeri-statistica e numeri vcard: sono editoriali, non prezzi -> INK */
.stat__n,
.vcard__n{ color:var(--ink); }

/* 1b) Etichette kicker/categoria: colore unico = OLIVA (come .card__cat e
       come da design system "olive per eyebrow/accenti"). Toglie il rosso
       decorativo da .ms-cat__h h3 e .saga__k. */
.ms-cat__h h3,
.saga__k{ color:var(--olive); }

/* 1c) Grassetti enfatici dentro badge/lead: enfasi con il peso, non col rosso */
.story__badge b,
.intro__badge b,
.manifesto__lead b,
.ms-place-card__tag b{ color:var(--ink); font-weight:600; }

/* 1d) Pallini/indicatori decorativi -> OCRA (accento, non azione) */
.trust .dot,
.book__note .dot,
.legal .dot,
.hero__scroll .line::after{ background:var(--ochre); }

/* 1e) Timeline "red": diventa accento oliva coerente (dot + anno + alone) */
.tl__item--red .tl__dot{
  border-color:var(--olive);
  background:var(--olive);
  box-shadow:0 0 0 5px rgba(110,114,80,.18);
}
.tl__item--red .tl__yr{ color:var(--olive); }

/* 1f) Icone informative (contatti/place-card): decorative -> OLIVA.
       Restano rossi solo i pulsanti/CTA veri. */
.sede__ic,
.cinfo__ic,
.qcard__ic,
.ms-place-card__row .ic{ color:var(--olive); }

/* 1g) Blocco "world--red": era rosso nei template inline e oliva nel Woo
       (site.css:360). Unifico su OLIVA ovunque -> niente sezione rossa decorativa. */
.world--red{ background:var(--olive); }
.world--red .world__n{ color:rgba(255,255,255,.72); }
.world--red .world__d{ color:rgba(255,255,255,.92); }

/* ------------------------------------------------------------------
   2) EYEBROW — un solo componente su tutte le pagine
      Testo = muted (accessibile su crema); trattino = OCRA (non rosso);
      tracking = .16em (target design system). Copre sia .eyebrow generico
      sia la variante shop-hero, sia la definizione rossa di ms-tokens.
   ------------------------------------------------------------------ */
.eyebrow,
.ms-shop-hero__eyebrow{
  color:var(--muted);
  letter-spacing:.16em;
}
.eyebrow.on-dark,
.subhero .eyebrow.on-dark{ color:#c9c2b6; }        /* stesso grigio-crema ovunque */

.eyebrow::before,
.ms-shop-hero__eyebrow::before{
  background:var(--ochre);                          /* trattino unico = ocra */
}

/* ------------------------------------------------------------------
   3) BOTTONI — un solo linguaggio per i due sistemi (.btn* e .ms-btn*)
   ------------------------------------------------------------------ */
/* Primario: rosso -> hover rosso scuro, identico ovunque */
.btn-primary,
.ms-btn--primary,
.woocommerce ul.products li.product a.button.add_to_cart_button,
.single-product div.product form.cart .single_add_to_cart_button{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  border-radius:2px;
}
.btn-primary:hover,
.ms-btn--primary:hover,
.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:hover{
  background:var(--red-hover);
  border-color:var(--red-hover);
  color:#fff;
}
/* Ghost: bordo 1px + testo INK ovunque (ms-btn--ghost non e' piu' rosso ne' 1.5px) */
.btn-ghost,
.ms-btn--ghost{
  border:1px solid currentColor;
  color:var(--ink);
  border-radius:2px;
}
.btn-ghost.on-dark{ color:var(--cream); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-ghost.on-dark:hover{ background:var(--cream); color:var(--ink); }

/* ------------------------------------------------------------------
   4) RADIUS — tutto a 2px (design system). Azzero i 3px/4px superstiti
      su card, media, gallerie, box editoriali e box shop/checkout.
      Pill (999px) e cerchi (50%) restano intenzionali.
   ------------------------------------------------------------------ */
.card, .ms-card, .ms-room-card, .ms-service-card, .ms-place-card,
.world, .story__media, .saga__media, .intro__media, .intro__media--stack figure,
.vcard, .sede, .cinfo, .qcard,
.card__img, .ms-card__img, .ms-room-card__img, .ms-place-card__media,
.ms-gallery figure, .gal figure, .gal__main, .gal__thumb, .lightbox img,
.ship, .shipbar, .crow__thumb, .summary, .opt__box, .paychip,
.step, .rcard, .pickup__i, .panel, .book__form{
  border-radius:2px;
}

/* ------------------------------------------------------------------
   5) OMBRA HOVER UNICA — allineo gli outlier al valore canonico.
      (Le card che usano var(--shadow)/var(--ms-shadow) sono gia' allineate
       dal punto 0; qui fisso quelle che avevano valori hard-coded diversi.)
   ------------------------------------------------------------------ */
.card:hover, .ms-card:hover, .ms-room-card:hover, .ms-service-card:hover,
.ms-place-card:hover, .story__media:hover,
.woocommerce ul.products li.product.ms-card:hover{
  box-shadow:0 18px 40px rgba(35,33,29,.13);
}

/* ============================================================
   coherence.css — SEZIONE: COERENZA MOBILE (≈390px)
   Unifica clamp titoli, collasso griglie, tap target e sub-hero
   tra le pagine editoriali e le pagine WooCommerce.
   Caricato PER ULTIMO -> a pari specificità vince per ordine sorgente.
   ============================================================ */

/* ------------------------------------------------------------
   1) CARD PRODOTTO — stesso collasso su shop e home
   Prima: shop 2col a 390 (QA !important) ma home .prods 1col a ≤420,
   e lo shop saltava 2col->1col alla soglia 380/381.
   Dopo: UN solo comportamento -> 2 colonne fino a 381px, 1 colonna ≤380.
   ------------------------------------------------------------ */
@media(min-width:381px) and (max-width:640px){
  .prods,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products[class*="columns-"]{
    grid-template-columns:1fr 1fr !important;
    gap:12px;
  }
}
@media(max-width:380px){
  .prods,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products[class*="columns-"]{
    grid-template-columns:1fr !important;
  }
}

/* ------------------------------------------------------------
   2) SUB-HERO MOBILE — resuscita il tuning mobile (era morto per
   specificità di `.subhero:not(.hero)` senza media query).
   Usa la stessa specificità 0,2,1 dentro la media query: caricato
   per ultimo -> vince. Unifica titolo e altezza su TUTTE le pagine
   (annulla anche il 13vw di contatti e gli 82svh di chi-siamo/camere).
   ------------------------------------------------------------ */
@media(max-width:640px){
  .subhero:not(.hero) h1,
  .subhero h1{
    font-size:clamp(2.3rem,11vw,3.6rem); /* valore mobile unico */
    letter-spacing:-.03em;
  }
  .subhero:not(.hero),
  .subhero{
    min-height:56svh; /* altezza sub-hero mobile unica (no più 62/60/50/82) */
  }
  .subhero__inner{
    padding-bottom:clamp(40px,10vw,60px); /* padding-bottom sub-hero unico */
  }
}

/* ------------------------------------------------------------
   3) GALLERY FOTO — stessa densità su mobile (entrambe 2 colonne).
   Prima: .ms-gallery(agriturismo) 1col a ≤480, .gal(camere) 2col.
   ------------------------------------------------------------ */
@media(max-width:480px){
  .ms-gallery{columns:2;}                 /* era columns:1 su agriturismo */
}
@media(max-width:380px){
  .ms-gallery{columns:1;}                 /* 1 colonna solo sotto 380 */
  .gal{grid-template-columns:1fr;}
  .gal figure:nth-child(1){grid-column:1;}
}

/* ------------------------------------------------------------
   4) LIGHTBOX NAV — tap target ≥44px e misura unica su ogni gallery.
   Prima: camere 42px (<44), agriturismo 44px.
   ------------------------------------------------------------ */
@media(max-width:640px){
  .lightbox__nav{
    width:44px; height:44px;            /* uniforme e conforme al minimo touch */
  }
  .lightbox__nav.prev{left:10px;}
  .lightbox__nav.next{right:10px;}
}

/* ------------------------------------------------------------
   5) FORM A 2 COLONNE — stesso breakpoint di collasso.
   Prima: .book__fields 1col a ≤480, .cform 1col a ≤520.
   Dopo: entrambi 1 colonna già da ≤560px.
   ------------------------------------------------------------ */
@media(max-width:560px){
  .book__fields,
  .cform{
    grid-template-columns:1fr !important;
  }
}

/* ------------------------------------------------------------
   6) MENU — tab-sede: risolve le 3 regole contraddittorie sul label.
   Sul telefono il sottotitolo città resta visibile (distingue le due
   sedi di Milano) con una sola dimensione coerente.
   ------------------------------------------------------------ */
@media(max-width:640px){
  .ms-loctabs .ms-loctab small{
    display:block;
    font-size:.62rem;                    /* unico valore, chiude il conflitto .66/.6 */
    opacity:.72;
    letter-spacing:.04em;
    line-height:1.15;
  }
}

/* ------------------------------------------------------------
   7) COERENZA CTA MOBILE — i gruppi di bottoni impilano full-width
   in modo identico ovunque (già così su hero/book/place-card, qui
   reso esplicito e uniforme anche per eventuali varianti mancanti).
   ------------------------------------------------------------ */
@media(max-width:640px){
  .hero__actions,
  .book__actions,
  .ms-place-card__cta{
    flex-direction:column;
    align-items:stretch;
  }
  .hero__actions .btn,
  .book__actions .btn,
  .ms-place-card__cta .btn{
    width:100%;
    justify-content:center;
    padding:1.05em 1.6em;
    min-height:48px;                     /* tap target CTA coerente */
  }
}

/* ============================================================================
   COHERENCE.CSS  —  DIMENSIONE: CHROME CONDIVISO (nav · footer · top-bar)
   MonteSoprano · caricato PER ULTIMO su OGNI pagina.
   Scopo: nav, footer e barra annunci IDENTICI tra i page-template
   self-contained (landing/menu/ristoranti/chi-siamo/contatti/agriturismo/camere)
   e le pagine WooCommerce (header.php + footer.php + site.css/woocommerce.css).

   Ordine di caricamento verificato:
   - Page-template: il loro <style> inline sta PRIMA di wp_head() (es. landing.php:13-391,
     wp_head a :392) -> coherence.css vince a pari specificita' per ordine sorgente.
   - Pagine Woo: coherence.css e' enqueued a priorita' 99, DOPO site.css/woocommerce.css -> vince.
   - ECCEZIONE: la top-bar e' iniettata in wp_footer (DOPO coherence.css). Per batterla
     serve specificita' > (0,1,0): uso 'body .ms-topbar'.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   [CHROME-1]  Superficie scura del chrome unificata (un solo "carbone")
   PROBLEMA: la barra annunci usa var(--ink) #23211D, mentre footer, menu mobile
   (mnav) e sub-hero usano var(--charcoal-2) #12100E -> due neri diversi.
   FIX: allineo la top-bar alla stessa superficie scura di footer + menu mobile
   (che sono la maggioranza e condividono la tonalita' con hero/sub-hero).
   NB: la riconciliazione del TOKEN globale (#12100E di --charcoal-2 vs #23211D
   documentato dal design system) e' una scelta a monte da fare su ms-tokens;
   qui risolvo solo la parita' del chrome senza toccare il token condiviso.
   --------------------------------------------------------------------------- */
body .ms-topbar{ background:var(--charcoal-2,#12100E); }


/* ---------------------------------------------------------------------------
   [CHROME-2]  NAV — valori canonici condivisi (page-template  ≡  WooCommerce)
   I valori oggi coincidono nelle 3 copie; li fisso qui come fonte di verita'
   unica cosi' le copie inline/site.css/woocommerce.css non possono divergere.
   (NON tocco 'top': lo governa la top-bar con --ms-topbar-h.)
   --------------------------------------------------------------------------- */
.nav{ z-index:100;
      padding:clamp(14px,2vw,22px) clamp(20px,5vw,64px);
      transition:background .4s, backdrop-filter .4s, padding .4s, box-shadow .4s; }
.nav.scrolled{ background:rgba(245,240,232,.86); backdrop-filter:blur(14px);
      box-shadow:0 1px 0 var(--border,#E5DFD4); padding-top:12px; padding-bottom:12px; }
.nav .nav__logo{ height:38px; width:auto; transition:height .4s; }   /* batte anche .woocommerce-page img{height:auto} */
.nav.scrolled .nav__logo{ height:32px; }
.nav__menu{ gap:2rem; font-size:.86rem; font-weight:500; letter-spacing:.02em; transition:color .4s; }
.nav__cta{ gap:1.2rem; }
.nav__cta .btn{ padding:.6em 1.2em; font-size:.82rem; }

/* Stato "scrolled" = stato Woo: le pagine WooCommerce montano la nav gia'
   .scrolled (fondo chiaro). Voci e burger scuri in ENTRAMBI i mondi. */
.nav.scrolled .nav__menu,
.nav.scrolled .nav__menu a,
.ms-shared .nav__menu,
.ms-shared .nav__menu a{ color:var(--ink,#23211D); }
.nav.scrolled .nav__burger span,
.ms-shared .nav__burger span{ background:var(--ink,#23211D); }

/* Menu mobile (mnav): stessa superficie scura del footer, voci coerenti.
   (già allineato nei sorgenti; congelato qui.) */
.mnav{ background:var(--charcoal-2,#12100E); }
.mnav a .ar{ color:var(--red,#D41119); }


/* ---------------------------------------------------------------------------
   [CHROME-3]  FOOTER — valori canonici condivisi
   Griglia, colori e barra inferiore identici ovunque (7 template inline +
   footer.php via site.css). Fisso i valori-chiave e ripulisco la scala
   responsive (nei sorgenti c'e' un breakpoint 520px "morto", sovrascritto
   piu' in basso da un 640px -> ladder ambigua). Qui: ladder pulita e UNICA.
   --------------------------------------------------------------------------- */
.foot{ background:var(--charcoal-2,#12100E); color:#cfc8bc; }
.foot__logo{ height:40px; width:auto; margin-bottom:20px; }
.foot h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em;
          text-transform:uppercase; color:#7d766a; margin:0 0 16px; }
.foot__sedi{ font-size:.86rem; line-height:1.7; }
.foot__sedi b{ color:var(--cream,#F5F0E8); font-weight:600; }
.foot__bar{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px;
            font-size:.76rem; color:#7d766a; }

/* Link footer: colore = testo footer in ENTRAMBI i mondi (niente blu-WP che
   possa filtrare su pagine Woo), hover crema. */
.foot a{ color:inherit; }
.foot a:hover{ color:var(--cream,#F5F0E8); text-decoration:underline; text-underline-offset:3px; }

/* Parita' del logo footer sia avvolto in <a href="/"> (ristoranti/contatti)
   sia come <img> nudo: nessun gap baseline, resa identica.
   NB: la vera correzione dell'href/interazione va fatta nel markup. */
.foot a:has(> .foot__logo){ display:inline-block; line-height:0; }

/* Scala responsive del footer UNICA e identica editorial ≡ Woo. */
.foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }


/* ---------------------------------------------------------------------------
   [CHROME-4]  Nota per il fix NON-CSS (footer "Naviga")
   Le voci del footer "Naviga" divergono per numero/target/ordine e su home +
   pagine Woo sono ancore rotte (#shop/#menu/#agri/#story). Il CSS non puo'
   riscrivere gli href: unificare nel MARKUP (footer.php + 7 template) a un
   unico elenco con URL reali e stesso ordine:
     /shop/ · /menu/ · /agriturismo/ · /ristoranti/ · /chi-siamo/
   Idem: aggiungere id="sedi" al <footer> ovunque (oggi manca su
   menu/ristoranti/chi-siamo/contatti) e uniformare il wrap <a> del logo.
   --------------------------------------------------------------------------- */

/* ============================================================
   FIX overflow mobile ristoranti (sezione .book "Prenota un tavolo")
   Il <select> Sede con opzioni lunghe forzava min-width:auto del
   grid-item oltre il viewport (+20px a 390). min-width:0 + width:100%.
   ============================================================ */
@media(max-width:640px){
  .book__grid{grid-template-columns:1fr}
  .book__aside,.book__form{min-width:0}
  .book__fields{grid-template-columns:1fr}
  .book__fields .field,.book__fields select,.book__fields input{min-width:0; max-width:100%; width:100%}
}

/* link legali nel footer bottom bar */
.foot__legal a{color:inherit; opacity:.85}
.foot__legal a:hover{opacity:1; text-decoration:underline}


/* ============================================================
   AUDIT WOO 2026-07-19 — fix pagine WooCommerce (5 aree)
   ============================================================ */
/* ===== SHOP / ARCHIVIO (/shop/ + /product-category/*) ===== */
/* =====================================================================
   COHERENCE.CSS — append in fondo. SHOP / ARCHIVIO — fix audit 2026-07-19
   coherence.css e' caricato per ULTIMO -> vince per ordine sorgente.
   ===================================================================== */

/* [SHOP-1] FIX doppio "+" (severita' ALTA) — deliverable principale.
   Ogni bottone del loop (.add_to_cart_button, presente su TUTTE le card:
   13 variabili + 3 box) riceveva DUE glifi: il "+" voluto dal ::before
   (ricetta card, woocommerce.css:3483 a 1,25rem) E un secondo "+" dal
   ::after legacy (woocommerce.css:1677, content:"+"!important a 1,5rem,
   absolute inset:0). Due "+" di misura diversa sovrapposti = glifo
   sdoppiato/sfocato. Neutralizzo il ::after: il glifo resta SOLO il ::before.
   Specificita' 0,5,4 (aggiungo .button) > 1677 (0,4,4) e !important per
   battere il content!important della regola legacy. */
.woocommerce ul.products li.product a.button.add_to_cart_button::after{
  content:"" !important;
  display:none !important;
}

/* [SHOP-2] TOOLBAR archivio su UNA riga (severita' MEDIA).
   Conteggio risultati a sinistra, ordinamento a destra, allineati; sotto
   la griglia. Su mobile restano impilati (nessuna media query = default). */
@media (min-width:768px){
  .woocommerce .woocommerce-result-count{ float:left; margin:.6em 0 0; }
  .woocommerce .woocommerce-ordering{ float:right; margin-bottom:0; }
  .woocommerce ul.products{ clear:both; }   /* la griglia scende sotto la toolbar floattata */
}

/* [SHOP-3] PAGINAZIONE centrata + stacco coerente dalla griglia
   (severita' BASSA). Non dipendere dal solo core WC per il centraggio. */
.woocommerce nav.woocommerce-pagination{
  text-align:center;
  margin-top:clamp(28px,4vw,44px);
}

/* ---------------------------------------------------------------------
   NOTE (non nel CSS attivo — indicazioni di pulizia, severita' BASSA):
   [SHOP-4] Rimuovere in woocommerce.css la media query morta a riga 142
     (@media max-width:420 -> 1fr) e valutare l'accorpamento di :1612
     con coherence.css:624 (entrambe 2col sotto i 640): 3 regole per lo
     stesso comportamento sono cruft. Nessun cambiamento visivo.
   [SHOP-5] Robustezza footer card: se in futuro un box non avra' ne'
     _ms_price_kg ne' short description, .ms-card__meta non viene stampato
     e il footer non resta ancorato in basso. Fix preventivo pulito =
     spostare l'auto sul footer invece che sul meta:
       .woocommerce ul.products li.product .ms-card__meta{ margin:0; }
       .woocommerce ul.products li.product .ms-card__f{ margin-top:auto; }
     (NON incluso sopra perche' oggi tutti i 16 prodotti hanno il meta e
      la doppia modifica va testata per non introdurre un doppio margin
      auto — applicarla solo insieme alla rimozione dell'auto dal meta.)
   --------------------------------------------------------------------- */

/* ===== SCHEDA PRODOTTO (PDP) — content-single-product.php ===== */
/* =============================================================================
   PDP FIX — MonteSoprano. Appendere IN CODA a assets/css/coherence.css
   (coherence e' caricato per ULTIMO -> vince a pari specificita').
   Verificato su /product/salame (variabile), /product/polpette-di-cavallo
   (variabile "a numero"), /product/box-grigliata-siciliana (semplice, fisso).
   ============================================================================= */

/* --- FIX 1 (ALTA): la foto riempie il frame gallery, niente banda vuota crema.
   Batte '.single-product .woocommerce-product-gallery img{height:auto}'
   (woocommerce.css:2092, spec 0,2,1) alzando la specificita' con .gal__main. --- */
.single-product .gal__main .woocommerce-product-gallery,
.single-product .gal__main .woocommerce-product-gallery__wrapper,
.single-product .gal__main .woocommerce-product-gallery__image,
.single-product .gal__main .woocommerce-product-gallery__image a{
  height:100%;
}
.single-product .gal__main .woocommerce-product-gallery img{
  height:100%;
  object-fit:cover;          /* crop centrato: riempie il 4/5 desktop e l'1/1 mobile */
}

/* --- FIX 4 (BASSA): elimina il doppio bordo. Il frame .gal__main gia' incornicia:
   annullo bordo/radius/bg del div interno .__image (woocommerce.css:2088). --- */
.single-product .gal__main .woocommerce-product-gallery__image{
  border:0;
  border-radius:0;
  background:none;
}

/* --- FIX 2 (MEDIA): ripristina il box .ship della PDP come card a bordo pieno.
   Annulla la collisione col '.ship' delle prenotazioni (woocommerce.css:3429:
   border-top dashed + padding-top:16px + margin-top:18px). --- */
.single-product .pdp .ship{
  margin:1.6em 0;
  padding:20px 22px;
  border:1px solid var(--border);   /* riafferma tutti e 4 i lati... */
  border-top:1px solid var(--border);/* ...e in particolare azzera il dashed ereditato */
}

/* --- FIX 3 (MEDIA): riduce lo spazio vuoto in cima alla PDP. Lo .ms-nav-spacer
   (112px su ms-shared) libera gia' la nav fissa: la sezione PDP non deve ripetere
   il padding-top pieno di sezione. Solo il top; il bottom resta il ritmo di sezione.
   Specificita' 0,2,1 batte '.section' (coherence.css:229, 0,1,0). --- */
.single-product main.pdp{
  padding-top:clamp(20px,3vw,40px);
}
/* Storico: serviva perche' la regola sopra colpiva il <body>. Dal 2026-08-11 la
   regola ha `:not(body)`, quindi questo azzeramento e' ridondante — lo si lascia
   perche' e' innocuo e documenta il difetto, ma NON e' piu' lui a tenere in piedi
   la spaziatura della scheda prodotto. */
body.single-product.woocommerce-page{
  padding-top:0;
}

/* =============================================================================
   NOTE (nessuna modifica necessaria, gia' corretti — non re-implementare):
   - Gallery/zoom/flexslider/photoswipe: enqueue nativi presenti e attivi.
   - Bottone "Aggiungi al carrello" disabilitato finche' non scegli il Formato:
     stato :disabled/.disabled a opacity:.55 (woocommerce.css:2226-2228) applicato,
     l'opacity vince anche sul background !important -> il rosso appare smorzato. OK.
   - Select "Formato" on-brand (woocommerce.css:3505), reset_variations rosso,
     prezzo-variazione serif rosso (3508). OK su salame e polpette.
   - Box a prezzo fisso (box-grigliata): niente form varianti, .pdp__kg nascosto,
     add-to-cart semplice + qty presenti. OK.
   - Accordion (.acc): toggle JS in assets/js/site.js:75-86 (open, +/-, max-height),
     CSS 3039-3045. Funziona. OK.
   Opzionale (micro): il fix 5 (grid inerte coherence.css:250-256) puo' essere
   ripulito spostando 'grid-template-columns' su '.pdp__grid' o rimuovendolo,
   dato che la griglia reale (.pdp__grid 1.02/.98, woocommerce.css:2998) e' gia' ok.
   ============================================================================= */

/* ===== Carrello (/cart/) — template classico .crow + stat ===== */
/* =====================================================================
   FIX CARRELLO — MonteSoprano. 1 file PHP nuovo + blocco CSS.
   ===================================================================== */

/* --------------------------------------------------------------------
   [1] STATO VUOTO — nuovo template override (risolve il finding #alta).
   File NUOVO: woocommerce/cart/cart-empty.php
   (Woo carica QUESTO a carrello vuoto, non cart.php: qui ricreiamo
    heading editoriale + icona + copy + CTA nel design system.)
-------------------------------------------------------------------- */
/* [carrello vuoto] template PHP -> woocommerce/cart/cart-empty.php */

/* --------------------------------------------------------------------
   [2] CSS — append in coherence.css (caricato per ULTIMO).
   Copre: stato vuoto (nuovo markup + fallback default), riga azioni
   desktop, input coupon, reset variante <dl>, wrapper qty mobile.
-------------------------------------------------------------------- */

/* --- Stato vuoto (nuovo template .cart-empty-ms) --- */
.cart--empty{padding:clamp(40px,7vw,80px) 0 clamp(80px,10vw,120px)}
.cart-empty-ms{max-width:560px;margin:0 auto;text-align:center}
.cart-empty-ms__icon{width:60px;height:60px;margin:0 auto 24px;color:var(--border)}
.cart-empty-ms__icon svg{width:100%;height:100%}
.cart-empty-ms .eyebrow{color:var(--olive);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;margin-bottom:14px}
.cart-empty-ms h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.05;margin-bottom:.45em}
.cart-empty-ms h1 em{font-style:italic;font-weight:400}
.cart-empty-ms p{color:var(--muted);font-size:1.02rem;line-height:1.6;
  max-width:44ch;margin:0 auto 2em}
.cart-empty-ms .btn{padding:1.05em 2em}

/* Fallback difensivo: se l'override cart-empty.php non fosse attivo,
   rendi almeno presentabile il markup di default (niente heading, ma centrato) */
.woocommerce-cart .wc-empty-cart-message{max-width:520px;margin:clamp(40px,7vw,72px) auto 0;text-align:center}
.woocommerce-cart .return-to-shop{text-align:center;margin-top:24px}
.woocommerce-cart .return-to-shop .button{display:inline-flex;align-items:center;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:2px;
  padding:.95em 1.8em;font-weight:600;text-decoration:none}
.woocommerce-cart .return-to-shop .button br{display:none}

/* --- Riga azioni desktop/tablet (finding #media): coupon sx, aggiorna dx --- */
.cart__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.cart__coupon{display:flex;gap:8px;align-items:center}
.cart__actions button[name="update_cart"]{margin-left:auto}

/* --- Input coupon coerente col design system (tutti i viewport) --- */
.cart__coupon .input-text,
.cart__coupon input#coupon_code{height:44px;min-width:200px;padding:0 14px;
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--border);border-radius:2px;transition:border-color .25s,box-shadow .25s}
.cart__coupon input#coupon_code::placeholder{color:#a8a196}
.cart__coupon input#coupon_code:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(35,33,29,.07)}

/* --- Reset variante 'Formato' come riga inline (finding #media) --- */
.crow__meta dl.variation{margin:0;display:flex;flex-wrap:wrap;gap:.35em .5em}
.crow__meta dl.variation dt{margin:0;font-weight:600;color:var(--ink)}
.crow__meta dl.variation dd{margin:0}
.crow__meta dl.variation dd p{margin:0;display:inline}

/* --- Mobile: allinea il wrapper reale .crow__qty (non .quantity annidato) --- */
@media(max-width:640px){
  .crow__qty{grid-area:qty;align-self:center;justify-self:start}
}

/* Nota finding #bassa (btn-ghost neutralizzato): decisione di design.
   Se si vuole l'OUTLINE come da template, aggiungere:
   .cart__actions button[name="apply_coupon"],
   .cart__actions button[name="update_cart"]{background:transparent;color:var(--ink);border-color:currentColor}
   .cart__actions button[name="apply_coupon"]:hover,
   .cart__actions button[name="update_cart"]:hover{background:var(--ink);color:var(--cream)}
   Altrimenti lasciare i due bottoni pieni-scuri attuali (già coerenti tra loro). */

/* ===== CHECKOUT (/checkout/ — WooCommerce Block Checkout  ===== */
/* ============================================================================
   COHERENCE.CSS — append in fondo (file caricato per ULTIMO, prio 99)
   BLOCK CHECKOUT SKIN — MonteSoprano "Allevatori Editoriale"
   Motivo: /checkout/ usa il Block Gutenberg (woocommerce/checkout). Le classi
   .wc-block-* NON sono vestite: titoli, input, bottone, prezzi e riepilogo
   restano look default WooCommerce. Qui portiamo il brand sul Block.
   Tutto scoped sotto body.woocommerce-checkout per non toccare cart/altro.
   Tokens gia' presenti: --paper --cream --ink --red --red-hover --olive
   --muted --border --serif --sans (fallback inline per sicurezza).
   ============================================================================ */

/* 0 · Sfondo pagina crema + tipografia base blocco */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout{
  font-family:var(--sans,'Inter',sans-serif);
  color:var(--ink,#23211D);
}
body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wc-block-components-address-card,
body.woocommerce-checkout .wc-block-components-text-input p{
  color:var(--muted,#6B6459);
}

/* 1 · TITOLI SEZIONE step (Informazioni di contatto / Indirizzo / Opzioni di
   pagamento) in Fraunces, coerenti con gli h2/h3 del resto del sito */
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-checkout-step__heading .wc-block-components-title{
  font-family:var(--serif,'Fraunces',serif);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink,#23211D);
}
/* numero step (pallino) on-brand oliva invece del blu default */
body.woocommerce-checkout .wc-block-components-checkout-step__heading-content{
  color:var(--olive,#6E7250);
}

/* 2 · INPUT / SELECT / TEXTAREA — pattern label flottante del Block.
   Border --border, radius 2px, focus --ink, label --muted -> --ink al focus */
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.woocommerce-checkout .wc-block-components-address-form input,
body.woocommerce-checkout .wc-block-components-combobox-control input,
body.woocommerce-checkout .wc-block-components-select input,
body.woocommerce-checkout .wc-block-components-textarea{
  border:1px solid var(--border,#E3DBCE);
  border-radius:2px;
  background:var(--paper,#fff);
  color:var(--ink,#23211D);
  font-family:var(--sans,'Inter',sans-serif);
  box-shadow:none;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active input,
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-address-form input:focus,
body.woocommerce-checkout .wc-block-components-combobox-control input:focus,
body.woocommerce-checkout .wc-block-components-select .components-form-token-field__input:focus{
  border-color:var(--ink,#23211D);
  outline:none;
  box-shadow:0 0 0 1px var(--ink,#23211D);
}
/* label flottante */
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-combobox-control label,
body.woocommerce-checkout .wc-block-components-select label{
  color:var(--muted,#6B6459);
  font-family:var(--sans,'Inter',sans-serif);
}
body.woocommerce-checkout .wc-block-components-text-input.is-active label{
  color:var(--ink,#23211D);
}
/* stato errore rosso, valido oliva (coerente col classic) */
body.woocommerce-checkout .wc-block-components-text-input.has-error input{
  border-color:var(--red,#D41119);
  box-shadow:0 0 0 1px var(--red,#D41119);
}
body.woocommerce-checkout .wc-block-components-validation-error{
  color:var(--red,#D41119);
}
/* Campo custom Codice Fiscale: eredita lo stile input sopra (stessa classe
   .wc-block-components-text-input) -> gia' allineato agli altri campi. */

/* 3 · CHECKBOX / RADIO — accent brand */
body.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"]{
  accent-color:var(--ink,#23211D);
}
body.woocommerce-checkout .wc-block-components-radio-control__input{
  accent-color:var(--red,#D41119);
}
/* metodo pagamento selezionato (Bonifico / Ritiro) evidenziato */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
body.woocommerce-checkout .wc-block-components-radio-control__option{
  border:1px solid var(--border,#E3DBCE);
  border-radius:2px;
}
body.woocommerce-checkout .wc-block-components-radio-control__option--checked,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked){
  border-color:var(--ink,#23211D);
  background:var(--cream,#F5F0E8);
}

/* 4 · SIDEBAR / RIEPILOGO ORDINE — card crema on-brand */
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar{
  background:var(--cream,#F5F0E8);
  border:1px solid var(--border,#E3DBCE);
  border-radius:2px;
  padding:clamp(18px,2.2vw,26px);
}
/* nome prodotto in serif, meta in muted */
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name{
  font-family:var(--serif,'Fraunces',serif);
  font-weight:600;
  color:var(--ink,#23211D);
}
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity{
  color:var(--muted,#6B6459);
}

/* 5 · PREZZI ROSSI (brand: rosso solo CTA/prezzi) — Block money markup */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--serif,'Fraunces',serif);
  font-weight:600;
  color:var(--red,#D41119);
}
/* label totali (Subtotale, Spedizione, Totale) in ink sans, non rosse */
body.woocommerce-checkout .wc-block-components-totals-item__label{
  font-family:var(--sans,'Inter',sans-serif);
  color:var(--ink,#23211D);
}
/* riga Totale finale piu' marcata */
body.woocommerce-checkout .wc-block-components-totals-footer-item{
  border-top:1px solid var(--border,#E3DBCE);
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:1.35rem;
}

/* 6 · BOTTONE "EFFETTUA ORDINE" — rosso pieno full-width (classe Block reale,
   NON #place_order che appartiene al checkout classic e non esiste qui) */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-button.contained{
  background:var(--red,#D41119);
  border:1px solid var(--red,#D41119);
  border-radius:2px;
  color:#fff;
  font-family:var(--sans,'Inter',sans-serif);
  font-weight:600;
  font-size:1rem;
  padding:1.1em 1.6em;
  box-shadow:none;
  width:100%;
  justify-content:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout .wc-block-components-button.contained:hover{
  background:var(--red-hover,#B00E15);
  border-color:var(--red-hover,#B00E15);
  color:#fff;
  transform:translateY(-2px);
}
body.woocommerce-checkout .wc-block-components-button__text{ color:#fff; }

/* 7 · TERMINI E PRIVACY — link leggibili ink sottolineati */
body.woocommerce-checkout .wc-block-checkout__terms a,
body.woocommerce-checkout .wc-block-components-checkout-step a{
  color:var(--ink,#23211D);
  text-decoration:underline;
  text-underline-offset:2px;
}
body.woocommerce-checkout .wc-block-checkout__terms a:hover{ color:var(--red,#D41119); }

/* 8 · NOTICE/ERRORI del blocco gia' vestiti in woocommerce.css:1076 (ok) */

/* 9 · RESPONSIVE
   Desktop: la sidebar sticky la gestisce WC. Tablet/Mobile: il Block impila
   automaticamente main+sidebar; qui garantiamo bottone full-width e padding
   sidebar ridotto. Il riepilogo su mobile e' il pannello collassabile nativo
   del Block (order summary in cima) — non lo forziamo, lo lasciamo funzionare. */
@media (max-width:768px){
  body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-checkout__sidebar{
    padding:16px 14px;
    position:static; /* niente sticky su mobile */
  }
}
@media (max-width:480px){
  body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
  body.woocommerce-checkout .wc-block-components-button.contained{
    font-size:.95rem; padding:1.05em 1.2em;
  }
  body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    font-size:1.2rem;
  }
}

/* ----------------------------------------------------------------------------
   AZIONE PHP CONSIGLIATA (non CSS) — pulizia dead code:
   1) form-checkout.php e' un override classic MAI renderizzato (la pagina usa
      il Block). Va RIMOSSO da woocommerce/checkout/ per evitare confusione,
      OPPURE — se si vuole davvero il checkout editoriale classic — sostituire
      il Block con lo shortcode replicando il filtro del cart in woo-skin.php:
        add_filter('the_content', function($c){
          if ( is_checkout() && ! is_wc_endpoint_url('order-received')
               && has_block('woocommerce/checkout',$c) ) {
            return do_shortcode('[woocommerce_checkout]');
          }
          return $c;
        });
      ATTENZIONE: forzando il classic si PERDE il campo CF, registrato via
      woocommerce_register_additional_checkout_field (API SOLO-Block). Percio'
      la via consigliata resta: TENERE il Block + questa skin CSS.
   2) woocommerce-consistency.css non e' enqueued da nessun file: se non serve,
      eliminarlo; le sue regole checkout targetano comunque il classic morto.
   ---------------------------------------------------------------------------- */

/* ===== Componenti WooCommerce trasversali — notice, botto ===== */
/* ============================================================================
   APPEND a coherence.css — DIMENSIONE: COMPONENTI WOO TRASVERSALI
   (notice · bottoni · input/select/qty · focus/accessibilità · block-checkout)
   Caricato PER ULTIMO -> vince per ordine sorgente. !important SOLO dove serve
   battere gli outline:none sparsi e le regole inline high-specificity dei blocchi.
   Rispetta il design system: rosso solo CTA/prezzi.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   [WOO-A] FIX finding #1 — FOCUS-VISIBLE UNICO su TUTTI i controlli Woo.
   Stesso stile del resto del sito (site.css:308 -> 2px --red). Batte gli
   outline:none di woocommerce.css. :focus-visible = solo tastiera (nessun ring
   fastidioso al click mouse). --red = coerente con il focus dei .btn del sito.
   ---------------------------------------------------------------------------- */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce ul.products li.product a.button:focus-visible,
.single-product div.product form.cart .single_add_to_cart_button:focus-visible,
.wc-proceed-to-checkout .checkout-button:focus-visible,
#place_order:focus-visible,
.ms-fpill:focus-visible,
.woocommerce .woocommerce-ordering select:focus-visible,
.single-product div.product form.cart .variations select:focus-visible,
.woocommerce .quantity input.qty:focus-visible,
.woocommerce .quantity .plus:focus-visible,
.woocommerce .quantity .minus:focus-visible,
.crow .quantity .qty:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible,
.wc-block-components-button:focus-visible,
.wc-block-components-text-input input:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible{
  outline:2px solid var(--red,#D41119)!important;
  outline-offset:2px!important;
}

/* ----------------------------------------------------------------------------
   [WOO-B] FIX finding #3 — Bottone "Ritorna al negozio" (carrello vuoto).
   Diventa la CTA primaria rossa (è l'unica azione della pagina vuota) e neutralizzo
   il <br> che WooCommerce inserisce dentro l'anchor.
   ---------------------------------------------------------------------------- */
.woocommerce-cart .return-to-shop .button{
  display:inline-block; text-decoration:none;
  background:var(--red,#D41119); border:1px solid var(--red,#D41119); color:#fff;
  border-radius:2px; font-family:var(--sans); font-weight:600;
  padding:.95em 1.9em; line-height:1.2;
  transition:background .3s,border-color .3s,transform .5s var(--ease,ease);
}
.woocommerce-cart .return-to-shop .button:hover{
  background:var(--red-hover,#B00E15); border-color:var(--red-hover,#B00E15);
  color:#fff; transform:translateY(-2px);
}
.woocommerce-cart .return-to-shop .button br{ display:none; }   /* riga vuota Woo */

/* ----------------------------------------------------------------------------
   [WOO-C] FIX finding #4 — Tap target >= 44px su mobile: select ordinamento + pill.
   (qty già 46/48px, checkout input 48px: qui allineo i due outlier.)
   ---------------------------------------------------------------------------- */
@media(max-width:640px){
  .woocommerce .woocommerce-ordering select,
  .woocommerce-page .woocommerce-ordering select{ min-height:44px; }
  .ms-fpill{ min-height:44px; }   /* era 40px */
}

/* ----------------------------------------------------------------------------
   [WOO-D] FIX finding #5 — Notice a BLOCCHI: differenzia lo stato + tinte on-brand.
   Uniforma la banner block al look della notice classica (bordo-sx colorato,
   icona ricolorata, niente tinte gialle/verdi di default).
   NB: dipende dal DOM del block-checkout -> attivo con [WOO-E].
   ---------------------------------------------------------------------------- */
.wc-block-components-notice-banner{ background:var(--cream-card)!important; box-shadow:none!important; }
.wc-block-components-notice-banner.is-error{ border-left:3px solid var(--red,#D41119)!important; }
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning{ border-left:3px solid var(--olive,#6E7250)!important; }
.wc-block-components-notice-banner.is-error svg{ fill:var(--red,#D41119)!important; }
.wc-block-components-notice-banner.is-success svg,
.wc-block-components-notice-banner.is-info svg,
.wc-block-components-notice-banner.is-warning svg{ fill:var(--olive,#6E7250)!important; }

/* ----------------------------------------------------------------------------
   [WOO-E] FIX finding #2 — SKIN BLOCK CHECKOUT (Gutenberg).
   Il checkout è a blocchi: le regole classiche (.form-row input.input-text,
   #place_order) NON toccano il DOM renderizzato. Qui porto input/bottone/totali/
   radio nel design system. !important perché i blocchi Woo hanno spec. alta.
   Nomi classi = API stabile WooCommerce Blocks.
   ---------------------------------------------------------------------------- */
/* Input / textarea / select dei blocchi */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form input,
.wc-block-checkout .wc-block-components-text-input input{
  font-family:var(--sans)!important; font-size:16px!important;   /* 16px = niente zoom iOS */
  border-radius:2px!important; border-color:var(--border,#E3DBCE)!important;
  color:var(--ink,#23211D)!important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus{
  border-color:var(--ink,#23211D)!important; box-shadow:0 0 0 3px rgba(35,33,29,.07)!important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label{ color:var(--muted,#6B6459)!important; }

/* Bottone "Effettua ordine" + bottoni contained dei blocchi = primario rosso */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained{
  background:var(--red,#D41119)!important; border-color:var(--red,#D41119)!important; color:#fff!important;
  border-radius:2px!important; font-family:var(--sans)!important; font-weight:600!important;
  box-shadow:none!important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover{
  background:var(--red-hover,#B00E15)!important; border-color:var(--red-hover,#B00E15)!important;
}

/* Radio spedizione/pagamento + checkbox = accento brand (radio rosso, check ink) */
.wc-block-components-radio-control__input{ accent-color:var(--red,#D41119); }
.wc-block-components-checkbox__input{ accent-color:var(--ink,#23211D); }

/* Totale finale = rosso serif, come nel carrello classico */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-formatted-money-amount.wc-block-components-totals-item__value{
  font-family:var(--serif,'Fraunces',Georgia,serif)!important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--red,#D41119)!important;
}

/* NB manutenzione (fuori CSS): woocommerce-consistency.css NON è enqueued
   (woo-skin.php carica solo woocommerce.css). Va cancellato o allineato per non
   indurre a editare il file sbagliato. */

/* === correzioni post-verifica audit Woo (2026-07-19) === */
/* [carrello vuoto] nascondi l'empty-state del Block cart (resta il mio .cart-empty-ms brandizzato) */
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .wc-block-cart__empty-cart{display:none!important}
/* [PDP foto] l'img della gallery era display:inline -> collassava a 16px; block la fa riempire il frame */
.single-product .gal__main .woocommerce-product-gallery img{display:block!important; width:100%; height:100%; object-fit:cover}

/* [PDP foto] fix robusto: frame ad altezza AUTO = si adatta all'immagine (no banda vuota, no collasso height:100% su aspect-ratio) */
.single-product .gal__main{aspect-ratio:auto!important; height:auto!important}
.single-product .gal__main .woocommerce-product-gallery,
.single-product .gal__main .woocommerce-product-gallery__wrapper,
.single-product .gal__main .woocommerce-product-gallery__image,
.single-product .gal__main .woocommerce-product-gallery__image a{height:auto!important}
.single-product .gal__main .woocommerce-product-gallery img{display:block!important; width:100%!important; height:auto!important; object-fit:initial!important}

/* [PDP] il "cerchione" era l'emoji 🔍 del trigger-zoom (img.emoji) gonfiata dal rule generico:
   nascondi il trigger e sizea SOLO la foto vera (__image img), non ogni img della gallery */
.single-product .gal__main .woocommerce-product-gallery__trigger{display:none!important}
.single-product .gal__main img.emoji{width:1em!important;height:1em!important;display:inline!important;object-fit:initial!important}
.single-product .gal__main .woocommerce-product-gallery__image img{display:block!important;width:100%!important;height:auto!important;object-fit:initial!important}
.single-product .gal__main{align-self:start} /* non stirare la colonna foto all'altezza della colonna info */

/* [PDP] stato disabled del bottone (variabile: prima scegli il FORMATO) -> grigio neutro, non rosso slavato */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed{
  background:#EDE7DC!important;color:#9A9284!important;cursor:not-allowed;opacity:1!important;box-shadow:none!important}

/* === [CARRELLO] fix layout: il template è custom (.subhero + main.cart > .cart__grid) === */
/* Il vecchio layout default applicava display:grid 1.6fr/.9fr al wrapper .woocommerce
   riservando una colonna fantasma per .cart-collaterals (non usata dal template custom):
   strozzava main.cart a ~663px. Neutralizzo: il wrapper torna block, il layout 2-colonne
   lo fa .cart__grid dentro il template. */
.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce{display:block!important}

/* === [CARRELLO/CHECKOUT] subhero compatta === */
/* La subhero editoriale (.subhero:not(.hero){min-height:62svh} + padding-top 120-180px)
   è pensata per header CON foto di sfondo. Su carrello/checkout (senza foto) diventa un
   vuoto nero da 620px. La rendo una fascia compatta che libera la nav fissa. */
.woocommerce-cart .subhero,
.woocommerce-checkout .subhero{min-height:0!important; padding:118px 0 clamp(30px,4vw,46px)!important}

/* === [CARRELLO] colonne: articoli elastici + riepilogo a larghezza fissa === */
.cart__grid{grid-template-columns:minmax(0,1fr) 348px!important}
@media(max-width:900px){.cart__grid{grid-template-columns:1fr!important}}

/* === [CARRELLO] fix definitivi griglia + titolo === */
/* wpautop rimosso via PHP; belt-and-suspenders: nascondi eventuali figli vuoti della griglia */
.woocommerce-cart .cart__grid > :empty{display:none!important}
/* colonne robuste: articoli elastici + riepilogo fisso; posizionamento esplicito */
.woocommerce-cart .cart__grid{grid-template-columns:minmax(0,1fr) 348px!important}
.woocommerce-cart .cart__grid > .cart__main{grid-column:1!important; min-width:0!important}
.woocommerce-cart .cart__grid > .cart__aside{grid-column:2!important; min-width:0!important}
@media(max-width:900px){
  .woocommerce-cart .cart__grid{grid-template-columns:1fr!important}
  .woocommerce-cart .cart__grid > .cart__main,
  .woocommerce-cart .cart__grid > .cart__aside{grid-column:1!important}
}
/* titolo subhero leggibile (una regola h1 globale lo forzava a ink scuro su fondo nero) */
.woocommerce-cart .subhero h1,.woocommerce-checkout .subhero h1,
.woocommerce-cart .subhero h1 span,.woocommerce-cart .subhero h1 em,
.woocommerce-checkout .subhero h1 span,.woocommerce-checkout .subhero h1 em{color:var(--cream,#F5F0E8)!important}

/* [mobile] la drawer .mnav (position:fixed; transform:translateX(100%)) genera scroll
   orizzontale su carrello/checkout, dove site.css (con body{overflow-x:hidden}) non è
   caricato. Ripristino il clip su quelle pagine. */
body.woocommerce-cart,body.woocommerce-checkout{overflow-x:hidden}

/* [CARRELLO mobile] la riga coupon (input + "Applica codice") e le azioni non si
   restringevano sotto ~460px -> overflow. Stack a colonna piena su schermi stretti. */
@media(max-width:600px){
  .woocommerce-cart .cart__actions{flex-direction:column; align-items:stretch; gap:10px}
  .woocommerce-cart .cart__coupon{flex-wrap:wrap; width:100%; gap:8px}
  .woocommerce-cart .cart__coupon .input-text{flex:1 1 100%; width:100%; min-width:0}
  .woocommerce-cart .cart__coupon .btn,
  .woocommerce-cart .cart__coupon button,
  .woocommerce-cart .cart__actions>button,
  .woocommerce-cart .cart__actions>.btn{width:100%}
}


/* ====== AUDIT ULTRACODE round 1 — piano consolidato (2026-07-20) ====== */
/* ============================================================
   MonteSoprano — APPEND a coherence.css (piano consolidato)
   Design system "Allevatori Editoriale" — ROSSO = SOLO CTA/prezzi
   coherence.css è caricato per ultimo → queste regole vincono.
   ============================================================ */

/* ---------- GLOBALE · firma editoriale (corsivo Fraunces su <em> nei titoli) ----------
   Richiede <em> nel markup H2 (vedi php ristoranti); altrove è no-op. */
.section__head h2 em,
.book__aside h2 em{ font-style:italic; font-weight:400; font-family:var(--serif, 'Fraunces', Georgia, serif); }

/* ---------- GLOBALE · fasce di chiusura CTA (home .news + menu .ms-cta) ----------
   DEDUP di 3 finding (Newsletter + cta-band trasversale): UN solo trattamento
   = charcoal + bottone rosso (come chi-siamo). Rosso tolto dallo SFONDO,
   restituito al SOLO bottone. Input BIANCO per contrasto reale (scelto vs
   la variante translucida, meno leggibile). */
.ms-cta,
.news{ background:var(--charcoal-2,#12100E)!important; }
.news p{ color:#d9d2c6; }
.ms-cta .btn,
.ms-cta a.btn-primary{ background:var(--red,#D41119); border-color:var(--red,#D41119); color:#fff; }
.news__form input{ background:#fff; color:var(--ink,#23211D); border:1px solid var(--border,#E3DBCE); }
.news__form input::placeholder{ color:var(--muted,#6B6459); }
.news__form button{ background:var(--red,#D41119)!important; color:#fff!important; }
.news__form button:hover{ background:var(--red-hover,#B00E15)!important; }

/* ---------- GLOBALE · topbar annunci: pallino ocra come trust-bar ----------
   Iniettato in wp_footer DOPO coherence → serve specificità > (0,1,1). */
body .ms-topbar__msg::before{ background:var(--ochre,#C8873A)!important; }

/* ---------- HOME (landing.php) ---------- */
/* mosaico 5 mondi: 5a card a piena riga nel range tablet (vince su regola inline) */
@media(min-width:521px) and (max-width:820px){
  .worlds .world:nth-child(5){ grid-column:1 / -1 !important; }
}
/* chip servizi agriturismo: rimuove l'enfasi ocra applicata a caso (3/5 chip) */
.agri__srv .chip b{ color:inherit; font-weight:inherit; }

/* ---------- CHI SIAMO (chi-siamo.php) ---------- */
/* titolo values: niente <br> forzato su mobile (parola 'famiglia' orfana) */
@media(max-width:640px){ .values .section__head h2 br{ display:none; } }
/* manifesto: allinea la prima riga del body alla prima riga del lead (desktop) */
@media(min-width:821px){ .manifesto__body{ margin-top:calc(1rem + .7em); } }

/* ---------- MENU (menu.php) ---------- */
/* misura da lettura: niente leader chilometrici su 1440 */
.ms-menu{ max-width:860px; margin-left:auto; margin-right:auto; }
/* prezzo+leader all'ULTIMA riga dei nomi lunghi; prezzo in ROSSO (come lo shop) */
.ms-dish-line{ align-items:flex-end; }
.ms-dish-name{ flex:0 1 auto; }
.ms-dish-price{ flex:0 0 auto; color:var(--red); }
.ms-dish-leader{ align-self:flex-end; transform:none; margin-bottom:.34em;
  border-bottom-width:1px; border-bottom-style:dotted; border-color:rgba(35,33,29,.30); }
/* meta sede su due righe (richiede split markup, vedi php menu.php) */
.ms-menu__meta{ flex-direction:column; gap:.35em; }
.ms-menu__hours{ font-size:.86rem; color:var(--muted); }

/* ---------- RISTORANTI (ristoranti.php) ---------- */
/* copy sede: paragrafo descrizione (richiede markup + copy cliente) */
.ms-place-card__desc{ color:var(--muted); font-size:.95rem; line-height:1.55;
  margin:0 0 clamp(18px,2vw,24px); max-width:42ch; }
/* card Cerami: la 3a CTA su riga piena pulita (no wrap accidentale 2+1) */
.ms-place-card:nth-child(4) .ms-place-card__cta .btn:last-child{ flex:1 0 100%; justify-content:center; }

/* ---------- AGRITURISMO (agriturismo.php) ---------- */
/* intro h2: bilancia il wrap, elimina orfani 'strada,'/'vera.' su desktop */
.intro h2{ text-wrap:balance; }
.intro__grid > div:last-child{ min-width:0; }
/* servizi bento: immagini non-wide ad altezza fissa → baseline dei corpi allineate */
.svc .ms-service-card:not(.ms-service-card--wide) .ms-service-card__img{ aspect-ratio:auto; height:clamp(200px,20vw,300px); }
.svc .ms-service-card:not(.ms-service-card--wide) .ms-service-card__img img{ height:100%; object-fit:cover; }
/* card camere: interim finché manca il prezzo — evita il link solo sbilanciato.
   Il :not(:has()) si auto-disattiva quando .ms-room-card__price viene aggiunto. */
.ms-room-card__f:not(:has(.ms-room-card__price)){ justify-content:flex-end; }

/* ---------- SHOP archivio (body.woocommerce-shop / tax-product_cat) ----------
   Scoped alle sole archive per NON toccare i correlati in PDP. */
body.woocommerce-shop ul.products li.product .ms-card__meta:has(.woocommerce-Price-amount),
body.tax-product_cat ul.products li.product .ms-card__meta:has(.woocommerce-Price-amount){ margin:auto 0 4px; min-height:0; line-height:1.2; }
body.woocommerce-shop ul.products li.product:has(.ms-card__meta .woocommerce-Price-amount) .ms-card__f,
body.tax-product_cat ul.products li.product:has(.ms-card__meta .woocommerce-Price-amount) .ms-card__f{ margin-top:0; }
/* filtri categoria: fade sul bordo destro segnala lo scroll (mobile) */
@media(max-width:640px){ .ms-shopfilters{ -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent); } }
/* toolbar: conteggio centrato sull'altezza del select ordinamento */
@media(min-width:768px){ .woocommerce .woocommerce-result-count{ margin:0; min-height:40px; display:inline-flex; align-items:center; } }

/* ---------- SHOP coerenza hero/nav (trasversale) ---------- */
/* chrome nav su hero scuro = chiaro come le editoriali + scrim di sicurezza */
body.woocommerce-shop .nav:not(.scrolled) .nav__menu,
body.woocommerce-shop .nav:not(.scrolled) .nav__menu a{ color:var(--cream,#F5F0E8)!important; }
body.woocommerce-shop .nav:not(.scrolled) .nav__burger span{ background:var(--cream,#F5F0E8)!important; }
body.woocommerce-shop .nav:not(.scrolled){ position:relative; }
body.woocommerce-shop .nav:not(.scrolled)::before{ content:""; position:absolute; inset:0 0 -60px 0; background:linear-gradient(180deg,rgba(18,16,14,.6),rgba(18,16,14,0)); z-index:-1; pointer-events:none; }
/* hero shop full-bleed come le altre secondarie (esce dal container Woo) */
body.woocommerce-shop .ms-shop-hero{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-top:calc(-1 * clamp(28px,4vw,56px)); }
/* tono coerente: scurire la foto shop (più chiara delle altre) + gradient */
body.woocommerce-shop .ms-shop-hero__bg img{ filter:brightness(.46) contrast(1.06) saturate(.9)!important; }
body.woocommerce-shop .ms-shop-hero__bg::after{ background:linear-gradient(180deg,rgba(18,16,14,.6) 0%,rgba(18,16,14,.28) 40%,rgba(18,16,14,.55) 65%,rgba(18,16,14,.96) 100%)!important; }
/* breadcrumb: rimosso per coerenza con le altre secondarie */
.woocommerce .woocommerce-breadcrumb{ display:none; }

/* ---------- PDP scheda prodotto (.single-product) ---------- */
/* buybar: azzera l'altezza forzata (166px di vuoto), stringi lo stacco verso .ship */
.single-product .pdp .buybar{ align-items:flex-start; min-height:0; }
.single-product .pdp .buybar form.cart{ align-items:flex-start; min-height:0; height:auto; }
.single-product .pdp .buybar .single_variation:empty{ display:none; }
.single-product .pdp .ship{ margin-top:1.2em; }
/* colonna foto sticky: mitiga il vuoto sotto l'immagine unica (rimedio vero = più foto) */
@media(min-width:821px){
  .single-product .pdp .gal{ position:sticky; top:120px; align-self:start; }
  .single-product .pdp__grid{ align-items:start; }
}
/* stato disabilitato on-brand: ghost, non grigio-fango (variabile senza formato scelto) */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed{ background:transparent!important; color:var(--muted,#6B6459)!important; border:1px solid var(--border,#E3DBCE)!important; box-shadow:none!important; opacity:1!important; }
/* select FORMATO: chevron custom + hover (controllo-cardine reso editoriale) */
.single-product .buybar .variations select{ padding:.85em 40px .85em 1em; min-height:52px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2323211D' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.single-product .buybar .variations select:hover{ border-color:var(--ink,#23211D); }
/* badge 'Nessun allergene' = oliva (positivo), non ocra (che legge come warning) */
.single-product .badge--all .bd{ background:var(--olive,#6E7250); }
/* correlati: su tablet 2 colonne (mai orfano), centrati con pochi item */
@media(min-width:641px) and (max-width:900px){ .single-product .related.products ul.products{ grid-template-columns:repeat(2,1fr)!important; } }
.single-product .related.products ul.products{ justify-content:center; }

/* ---------- CARRELLO (body.woocommerce-cart) ---------- */
/* cestino: quadrato ink (no cerchio rosso decorativo), tap target pieno */
body.woocommerce-cart .crow .crow__rm.remove{ width:34px!important; height:34px!important; color:var(--muted)!important; border-radius:2px; font-size:0; }
body.woocommerce-cart .crow .crow__rm.remove:hover{ background:var(--red); border-color:var(--red); color:#fff!important; }
@media(max-width:640px){ body.woocommerce-cart .crow .crow__rm.remove{ width:40px!important; height:40px!important; } }
/* progress spedizione: oliva a riposo, non rosso decorativo */
body.woocommerce-cart .shipbar__fill{ background:linear-gradient(90deg,var(--olive),#8a8f63)!important; }
/* messaggio spedizione: rosso SOLO sull'importo mancante */
body.woocommerce-cart .shipbar__msg b{ color:var(--ink); }
body.woocommerce-cart .shipbar__msg #shipMissing{ color:var(--red); }
/* CTA solide: nessun underline che trapela */
.summary .checkout-button,
.cart-empty-ms .btn,
.woocommerce-cart .return-to-shop .button{ text-decoration:none!important; }
/* prezzo unitario = riferimento muted (non un secondo rosso accanto al subtotale) */
body.woocommerce-cart .crow__unit{ color:var(--muted); }
body.woocommerce-cart .crow__unit .woocommerce-Price-amount,
body.woocommerce-cart .crow__unit .amount,
body.woocommerce-cart .crow__unit b{ color:var(--muted)!important; font-family:var(--sans); font-weight:400; font-size:.82rem; }
/* azioni carrello: coupon + aggiorna entrambi ghost-outline quieti (linguaggio Allevatori) */
.cart__actions button[name="apply_coupon"],
.cart__actions button[name="update_cart"]{ background:transparent!important; border:1px solid var(--ink)!important; color:var(--ink)!important; border-radius:2px; box-shadow:none!important; }
.cart__actions button[name="apply_coupon"]:hover,
.cart__actions button[name="update_cart"]:not(:disabled):hover{ background:var(--ink)!important; color:var(--cream)!important; }
.cart__actions button[name="update_cart"]{ margin-left:auto; border-color:var(--border)!important; color:var(--muted)!important; }
.cart__actions button[name="update_cart"]:disabled{ opacity:.6; cursor:not-allowed; }
/* riga prodotto tablet/mobile (≤960): stack pulito, niente orfani tipografici */
@media(max-width:960px){
  body.woocommerce-cart .crow{ position:relative; grid-template-columns:72px 1fr; grid-template-areas:"thumb info" "qty sub"; gap:12px 16px; padding:18px; align-items:start; background:var(--cream-card, #FBF8F2); border:1px solid var(--border); border-radius:2px; }
  body.woocommerce-cart .crow__thumb{ grid-area:thumb; width:72px; height:72px; }
  body.woocommerce-cart .crow__info{ grid-area:info; padding-right:44px; min-width:0; }
  body.woocommerce-cart .crow__qty,
  body.woocommerce-cart .crow .quantity{ grid-area:qty; align-self:center; justify-self:start; }
  body.woocommerce-cart .crow__sub{ grid-area:sub; align-self:center; text-align:right; }
  body.woocommerce-cart .crow .crow__rm.remove{ position:absolute; top:14px; right:14px; }
}

/* ---------- CHECKOUT (body.woocommerce-checkout) ---------- */
/* P0: ricentra il block checkout su mobile/tablet (annulla il full-bleed -80px dei WC Blocks) */
@media(max-width:768px){
  body.woocommerce-checkout .wp-block-woocommerce-checkout,
  body.woocommerce-checkout .wc-block-checkout{ margin-left:0!important; margin-right:0!important; max-width:100%!important; }
}
/* riepilogo riga: un solo prezzo rosso (totale riga), via il prezzo unitario ridondante */
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices{ display:none; }
/* radio pagamento su ink (rosso solo su prezzi e 'Effettua ordine') */
body.woocommerce-checkout .wc-block-components-radio-control__input{ accent-color:var(--ink,#23211D); }
/* stopgap: nasconde il riepilogo peek DUPLICATO in cima su mobile/tablet
   (rimuovere quando il blocco duplicato è tolto dal contenuto pagina Checkout). */
@media(max-width:768px){ body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary{ display:none; } }

/* ---------- CONTATTI (contatti.php) ---------- */
/* disciplina rosso: link consenso e freccia card Email in ink (rosso solo hover) */
.contact .cform .consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--olive); }
.contact .cform .consent a:hover{ color:var(--red); }
.quick .qcard:not(.qcard--red) .qcard__v .ar{ color:var(--ink); }
/* card info più corta: centrata verticalmente contro il form su desktop (no vuoto ~150px) */
@media(min-width:821px){ .contact .contact__grid{ align-items:center; } }


/* ====== AUDIT ULTRACODE round 2 — delta rifinitura (2026-07-20) ====== */
/* =============================================================================
   COHERENCE — DELTA ROUND 2 (append in coda a coherence.css)
   coherence.css è enqueued a priority 99 = SEMPRE ultimo (inc/woo-skin.php:214),
   quindi questi override vincono per source-order a pari specificità.
   Nessun 100vw / nessun full-bleed introdotto.
   ============================================================================= */

/* [R2-1] HOME hero · indicatore SCORRI vs CTA (collisione 641–960px).
   site.css:238 lo nasconde solo <=640, ma la CTA resta in riga fino a ~900px.
   Estendo l'occultamento a tutto il range tablet. Decorativo, nessuna perdita. */
@media(max-width:960px){ .hero__scroll{ display:none; } }

/* [R2-2] HOME mosaico · numero '05' card oliva: da bianco .72 (contrasto ~3.2:1)
   a crema, allineato al colore del titolo card. Batte coherence.css:531 e
   l'inline landing.php:153 per source-order (spec 0,2,0). */
.world--red .world__n{ color:var(--cream,#F5F0E8); }

/* [R2-3] CHI SIAMO · spina timeline .tl::before: rimuove lo stop ROSSO centrale
   (inline chi-siamo.php:313, rgba(212,17,25,.6)) → ocra→oliva→ocra, coerente col
   pallino/anno 'Oggi' già oliva. Spec 0,1,1, coherence dopo l'inline → vince. */
.tl::before{ background:linear-gradient(180deg, rgba(200,135,58,.15), rgba(110,114,80,.55) 55%, rgba(200,135,58,.15)); }

/* [R2-4] CHI SIAMO · timeline a bandiera sinistra: annulla il margin-left:auto
   dell'inline (.tl{margin:0 auto}, chi-siamo.php:312) mantenendo max-width:900 e
   margin-right:auto → i pallini si allineano al bordo dell'header di sezione.
   Spec 0,2,0 > .tl 0,1,0. Sotto ~980px (contenuto <900px) nessun effetto. */
.tline .tl{ margin-left:0; }

/* [R2-5] MENU · tab-bar sede allineata alla colonna portate: .ms-menu è capato a
   860px centrato (coherence.css:1547) ma .ms-loctabs restava a larghezza container.
   Solo desktop (>=641) per NON toccare l'edge-bleed mobile (menu.php:287, <=640). */
@media(min-width:641px){
  .ms-loctabs{ max-width:860px; margin-left:auto; margin-right:auto; }
}

/* [R2-6] SHOP · nav sull'hero (dedup findings 6+12): la R2 pose position:relative
   a coherence.css:1592 mandando la nav in-flow → banda crema orfana sotto la topbar.
   Ripristino position:fixed = default site.css, identico a menu/contatti. Pari
   specificità (0,3,1) + source-order → vince su :1592. Il ::before scrim (:1593,
   position:absolute) resta contenuto perché fixed è positioned-ancestor. */
body.woocommerce-shop .nav:not(.scrolled){ position:fixed; }

/* [R2-7] PDP · buybar form.cart: azzera il padding ereditato dalla regola generica
   .cart{padding:clamp(48px,7vw,84px)...} (woocommerce.css:3102) che iniettava ~84px
   sopra e ~140px sotto di vuoto. Estende la regola già presente a coherence.css:1605
   (aggiunge SOLO la dichiarazione mancante). Spec 0,4,1 batte .cart 0,1,0. */
.single-product .pdp .buybar form.cart{ padding:0; }

/* [R2-8] CARRELLO/CHECKOUT · bottone del notice (es. 'Visualizza carrello'): era
   lavanda default WooCommerce (per cart/checkout manca la regola; single-product è
   già gestito a woo-consistency.css:711). → ghost ink, coerente (rosso = solo CTA
   primaria/prezzi). */
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .woocommerce-info .button,
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button{
  background:transparent; color:var(--ink,#23211D);
  border:1px solid var(--ink,#23211D); border-radius:2px;
  box-shadow:none; text-shadow:none;
}
body.woocommerce-cart .woocommerce-message .button:hover,
body.woocommerce-cart .woocommerce-info .button:hover,
body.woocommerce-checkout .woocommerce-message .button:hover,
body.woocommerce-checkout .woocommerce-info .button:hover{
  background:var(--ink,#23211D); color:var(--cream,#F5F0E8);
}

/* [R2-9] CARRELLO/CHECKOUT · icona di stato del notice: la spunta ::before (oliva)
   default è a left:~1.5em (~24px) mentre il testo parte prima → si sovrappone.
   Libero un gutter dedicato. Su cart il padding base è 15px 18px (woo-consistency
   :748): imposto solo il left. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info{ padding-left:48px; }
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before{ left:18px; }

/* [R2-10] CARRELLO · icona cestino riga a riposo: più presente (ink) invece di
   muted, più leggibile nel box bianco. NB: risolve conflitto con coherence.css:1628
   che imponeva color:var(--muted)!important (spec 0,4,1): serve pari specificità +
   !important + source-order per vincere. Hover rosso invariato (:1629). */
body.woocommerce-cart .crow .crow__rm.remove{ color:var(--ink,#23211D)!important; }

/* ============================================================
   FIX VIOLA/FUCSIA WooCommerce (#7f54b3) — link e pulsanti (2026-07-20)
   Il viola default WC filtra su .button.alt, slider filtro-prezzo,
   focus/link dei block checkout. Riporto tutto ai colori brand.
   ============================================================ */
/* pulsanti primari .alt → rosso brand (mai viola) */
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce .button.alt,
body.woocommerce-cart a.button.alt, body.woocommerce-checkout a.button.alt{
  background-color:var(--red,#D41119)!important; color:#fff!important; border-color:var(--red,#D41119)!important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce .button.alt:hover{
  background-color:var(--red-hover,#B00E15)!important; color:#fff!important;
}
/* slider filtro prezzo → oliva */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{ background-color:var(--olive,#6E7250)!important; }
/* link nelle sezioni woo: hover rosso, MAI viola (esclude i .button già gestiti) */
/* red-discipline (2026-07-22): rimosso l'hover rosso globale sui link woo.
   Base: body a{color:inherit} + :where(.site-main) a:hover{color:ink}. Feedback
   specifico su titoli/breadcrumb/meta/footer/pill definito nelle rispettive regole. */
/* checkout/cart BLOCK: link, accenti, focus, radio, spinner → brand (via custom props + override) */
.wc-block-checkout, .wc-block-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-cart{
  --wc-primary:#D41119; --wp--preset--color--primary:#D41119;
}
.wc-block-components-checkout-step a, .wc-block-components-order-summary a,
.wc-block-components-totals-coupon-link, .wc-block-components-panel__button,
.wc-block-components-address-card__edit, .wc-block-components-totals-item a{
  color:var(--ink,#23211D)!important;
}
.wc-block-components-checkout-step a:hover, .wc-block-components-totals-coupon-link:hover,
.wc-block-components-panel__button:hover, .wc-block-components-address-card__edit:hover{
  color:var(--red,#D41119)!important;
}
.wc-block-components-button:not(.is-secondary){ background:var(--red,#D41119)!important; color:#fff!important; }
.wc-block-components-button:not(.is-secondary):hover{ background:var(--red-hover,#B00E15)!important; }
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title-container,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button{ accent-color:var(--red,#D41119); }
.wc-block-components-text-input.is-active label, .wc-block-components-text-input input:focus{
  border-color:var(--ink,#23211D)!important; color:var(--ink)!important;
}


/* ============================================================
   TOAST conferma carrello (sostituisce il box "aggiunto" in alto)
   ============================================================ */
.ms-toast{
  position:fixed; left:24px; bottom:24px; z-index:200;
  display:flex; align-items:center; gap:.65em;
  background:var(--ink,#23211D); color:var(--cream,#F5F0E8);
  font-family:'Inter',system-ui,sans-serif; font-size:.92rem; font-weight:500;
  padding:.82em 1.05em; border-radius:2px; box-shadow:0 16px 44px rgba(20,16,14,.34);
  transform:translateY(180%); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.ms-toast.show{ transform:none; opacity:1; pointer-events:auto; }
.ms-toast__ic{ width:18px; height:18px; color:var(--olive,#6E7250); flex:none; }
.ms-toast__a{ color:#fff; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--red,#D41119); margin-left:.35em; font-weight:600; white-space:nowrap; }
.ms-toast__a:hover{ color:var(--red,#D41119); }
@media(max-width:600px){ .ms-toast{ left:16px; right:16px; bottom:88px; justify-content:center; } }
/* nasconde eventuali notice svuotati (messaggio add-to-cart rimosso) */
.woocommerce-message:empty,.woocommerce-info:empty,.woocommerce-notices-wrapper:empty{ display:none!important; }

/* ============================================================
   DRAWER mobile/tablet .mnav — restyle editoriale
   (meno grande, meno basic: eyebrow, tipografia raffinata, utility, firma)
   ============================================================ */
.mnav{
  padding:calc(var(--ms-topbar-h,36px) + 74px) clamp(26px,7vw,46px) 40px !important;
  gap:0 !important; justify-content:flex-start !important;
  background:linear-gradient(180deg,#17130F 0%,#100D0B 100%) !important;
}
.mnav::before{
  content:"Naviga"; display:block; font-family:'Inter',system-ui,sans-serif;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:#8a8275; margin-bottom:1.15rem;
}
.mnav a:not(.btn){
  font-family:var(--serif,'Fraunces',Georgia,serif) !important;
  font-size:clamp(1.32rem,5vw,1.55rem) !important; font-weight:400 !important;
  letter-spacing:-.01em; color:var(--cream,#F5F0E8) !important;
  padding:.6em 0 !important; border-bottom:1px solid rgba(245,240,232,.09) !important;
  display:flex; align-items:center; justify-content:space-between;
}
.mnav a:not(.btn) .ar{
  color:#8a8275 !important; font-size:.8rem !important; font-style:normal;
  transition:transform .35s cubic-bezier(.22,1,.36,1), color .3s;
}
.mnav a:not(.btn):hover .ar,.mnav a:not(.btn):active .ar{ color:var(--red,#D41119) !important; transform:translateX(5px); }
/* voce carrello: utility a fine lista (Inter, più piccola, senza riga) */
.mnav a[href*="cart"]{
  font-family:'Inter',system-ui,sans-serif !important; font-size:1rem !important;
  color:#cfc8bc !important; letter-spacing:.01em; margin-top:.55rem;
  border-bottom:none !important;
}
/* CTA Prenota */
.mnav .btn{ margin-top:1.3rem !important; font-size:1rem !important; padding:1.05em !important; justify-content:center; }
/* firma in fondo */
.mnav::after{
  content:"Allevatori in cucina · dal 1950"; display:block;
  margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid rgba(245,240,232,.07);
  font-family:'Inter',system-ui,sans-serif; font-size:.72rem; letter-spacing:.04em; color:#7a7266;
}

/* ============================================================
   LA PRIMA BAG — sezione promo in cima allo /shop/ (2026-07-21)
   Self-contained (hex espliciti). Red-discipline: rosso solo su
   prezzo e CTA. Blocco "cosa c'è dentro" su charcoal per contrasto.
   ============================================================ */
.ms-bag-promo{background:var(--ms-cream,#F5F0E8);padding:clamp(40px,6vw,84px) 0}
.ms-bag-promo *{box-sizing:border-box}
.ms-bag-promo__wrap{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:stretch}
.ms-bag-promo__media{position:relative;border-radius:3px;overflow:hidden;min-height:440px;background:#efe7d8}
.ms-bag-promo__media img{width:100%;height:100%;object-fit:cover;display:block}
.ms-bag-promo__ribbon{position:absolute;top:16px;left:16px;background:#23211D;color:#EFE8DC;font-family:'Inter',system-ui,sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:2px;font-weight:500;margin:0}
.ms-bag-promo__provini{position:absolute;bottom:14px;left:16px;background:rgba(245,240,232,.92);color:#23211D;font-family:'Fraunces',Georgia,serif;font-size:.74rem;padding:6px 12px;border-radius:2px;margin:0}
.ms-bag-promo__body{min-width:0}
.ms-bag-promo .bag-eb{display:flex;align-items:center;gap:.6em;font-family:'Fraunces',Georgia,serif;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:#B0812F;margin:0 0 .7rem}
.ms-bag-promo .bag-eb::before{content:"";width:26px;height:1.5px;background:#B0812F;display:inline-block;flex:none}
.ms-bag-promo h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.03;letter-spacing:-.01em;margin:0 0 .5rem;color:#23211D;text-wrap:balance}
.ms-bag-promo__sub{color:#5f584d;font-size:1.02rem;line-height:1.55;max-width:52ch;margin:0 0 1.4rem;font-family:'Inter',system-ui,sans-serif}
.ms-bag-promo .bag-inside{background:#23211D;color:#EFE8DC;border-radius:3px;padding:22px 24px 20px;margin:0 0 1.5rem}
.ms-bag-promo .bag-inside__h{font-family:'Fraunces',Georgia,serif;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#c9b892;margin:0 0 .85rem}
.ms-bag-promo .bag-inside ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ms-bag-promo .bag-inside li{position:relative;padding-left:20px;font-size:.96rem;color:#e7e0d4;line-height:1.35;font-family:'Inter',system-ui,sans-serif}
.ms-bag-promo .bag-inside li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:#C8873A}
.ms-bag-promo .bag-inside li b{color:#fff;font-weight:600}
.ms-bag-promo .bag-inside__foot{margin:.95rem 0 0;padding-top:.85rem;border-top:1px solid rgba(245,240,232,.14);font-family:'Fraunces',Georgia,serif;font-size:1.02rem;color:#fff}
.ms-bag-promo .bag-inside__note{margin:.5rem 0 0;font-size:.82rem;color:#b3ab9d;line-height:1.45;font-style:italic;font-family:'Inter',system-ui,sans-serif}
.ms-bag-promo .bag-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0 0 .35rem}
.ms-bag-promo .bag-price__now{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:2.5rem;color:#D41119;line-height:1}
.ms-bag-promo .bag-price__per{font-size:.92rem;color:#8b8378;font-family:'Inter',system-ui,sans-serif}
.ms-bag-promo .bag-price__per::before{content:"·";margin-right:.5rem;color:#c9c0b0}
.ms-bag-promo .bag-price__mini{font-size:.9rem;color:#5f584d;margin:0 0 1.15rem;font-family:'Inter',system-ui,sans-serif}
.ms-bag-promo .bag-price__mini b{color:#23211D;font-weight:600}
.ms-bag-promo .bag-cta{display:inline-flex;align-items:center;gap:.6em;background:#D41119;color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1.02rem;padding:1.02em 1.7em;border-radius:2px;text-decoration:none;border:0;cursor:pointer;transition:background .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.ms-bag-promo .bag-cta:hover{background:#B00E15;color:#fff;transform:translateY(-2px)}
.ms-bag-promo .bag-cta .ar{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ms-bag-promo .bag-cta:hover .ar{transform:translateX(4px)}
.ms-bag-promo .bag-trust{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:1.35rem 0 0;list-style:none;padding:0}
.ms-bag-promo .bag-trust li{display:flex;align-items:center;gap:.45em;font-size:.8rem;color:#5f584d;font-family:'Inter',system-ui,sans-serif}
.ms-bag-promo .bag-trust svg{width:14px;height:14px;stroke:#C8873A;fill:none;flex:none}
@media(max-width:820px){
  .ms-bag-promo__wrap{grid-template-columns:1fr;gap:22px}
  .ms-bag-promo__media{aspect-ratio:16/10;min-height:0}
}
@media(max-width:560px){
  .ms-bag-promo .bag-cta{width:100%;justify-content:center}
  .ms-bag-promo .bag-price__now{font-size:2.2rem}
}
@media(prefers-reduced-motion:reduce){
  .ms-bag-promo .bag-cta,.ms-bag-promo .bag-cta .ar{transition:none}
}

/* ============================================================
   NUOVA IA SHOP (2026-07-22): hero-bag flagship (assorbe hero) +
   band box "della settimana" (1 featured "box di ora" + 2) + Il banco.
   Self-contained (hex). Red-discipline: rosso solo su prezzo+CTA.
   ============================================================ */
.ms-shero{background:#23211D;color:#EFE8DC;padding:clamp(96px,11vh,140px) 0 clamp(46px,6vw,82px);min-height:74svh;display:flex;align-items:center}
.ms-shero *{box-sizing:border-box}
.ms-shero__wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,32px);width:100%}
.ms-shero__grid{display:grid;grid-template-columns:.94fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.ms-shero__media{background:#F5F0E8;border-radius:2px;padding:18px}
.ms-shero__media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block;border-radius:1px}
.ms-shero__pl{margin:.7rem 0 0;font-family:'Fraunces',Georgia,serif;font-size:.72rem;color:#8a8378;text-align:center}
.ms-shero__eb{font-family:'Inter',system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#c9b892;margin:0 0 1.2rem}
.ms-shero__mk{font-family:'Inter',system-ui,sans-serif;font-size:.8rem;letter-spacing:.05em;color:#b3ab9d;margin:0 0 .6rem}
.ms-shero__mk b{font-family:'Fraunces',Georgia,serif;color:#C8873A;font-size:1rem;margin-right:.45em;font-weight:600}
.ms-shero h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.015em;margin:0 0 .5rem;color:#EFE8DC}
.ms-shero h1 em{font-style:italic;font-weight:400}
.ms-shero__sig{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.3rem;color:#EFE8DC;margin:0 0 1rem}
.ms-shero__spec{font-family:'Inter',system-ui,sans-serif;font-size:1rem;color:#d9d2c6;max-width:46ch;line-height:1.5;margin:0 0 1.15rem}
.ms-shero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem;padding:0;list-style:none}
.ms-shero__chips li{border:1px solid rgba(239,232,220,.22);border-radius:2px;padding:.4em .8em;font-size:.78rem;color:#d9d2c6;font-family:'Inter',system-ui,sans-serif}
.ms-shero__price{display:flex;align-items:baseline;gap:.7rem;margin:0 0 1.25rem;flex-wrap:wrap}
.ms-shero__price b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:2.4rem;color:#D41119;line-height:1}
.ms-shero__price small{font-size:.85rem;color:#a49c8f;font-family:'Inter',system-ui,sans-serif}
.ms-shero__cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin:0}
.ms-shero__cta .btn-red{display:inline-flex;align-items:center;gap:.5em;background:#D41119;color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1rem;padding:1em 1.55em;border-radius:2px;text-decoration:none;border:0;transition:background .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.ms-shero__cta .btn-red:hover{background:#B00E15;color:#fff;transform:translateY(-2px)}
.ms-shero__cta .btn-red .ar{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ms-shero__cta .btn-red:hover .ar{transform:translateX(4px)}
.ms-shero__cta .btn-ghost{display:inline-flex;align-items:center;gap:.5em;border:1px solid rgba(239,232,220,.35);color:#EFE8DC;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:.95rem;padding:1em 1.4em;border-radius:2px;text-decoration:none;background:transparent;transition:border-color .3s}
.ms-shero__cta .btn-ghost:hover{border-color:#EFE8DC;color:#EFE8DC}
.ms-shero__re{margin:1.15rem 0 0;font-family:'Inter',system-ui,sans-serif;font-size:.84rem;color:#a49c8f;display:flex;gap:1.2rem;flex-wrap:wrap;padding:0;list-style:none}

.ms-shop-conn{background:#F5F0E8;text-align:center;padding:clamp(28px,4vw,48px) 24px 0}
.ms-shop-conn p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.22rem;color:#544e44;margin:0 auto;max-width:640px}

.ms-boxsec{background:#F5F0E8;padding:clamp(26px,3.5vw,44px) 0 clamp(8px,2vw,18px)}
.ms-boxsec__wrap,.ms-banco-head__wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.ms-sechead{margin:0 0 1.8rem}
.ms-sechead .num{font-family:'Inter',system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#6B6459}
.ms-sechead h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;margin:.4rem 0 .35rem;letter-spacing:-.01em;color:#23211D}
.ms-sechead .dek{font-family:'Inter',system-ui,sans-serif;color:#6B6459;font-size:1.02rem;margin:0}
.ms-boxes{display:grid;grid-template-columns:1.32fr 1fr;gap:18px}
.ms-boxcol{display:grid;gap:18px}
.ms-boxcard{background:#FBF8F1;border:1px solid #E5DFD4;border-radius:2px;overflow:hidden;position:relative;transition:box-shadow .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.ms-boxcard:hover{box-shadow:0 18px 40px rgba(35,33,29,.13);transform:translateY(-3px)}
.ms-boxcard__ribbon{position:absolute;top:15px;left:15px;background:#23211D;color:#EFE8DC;font-family:'Inter',system-ui,sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:2px;font-weight:600;z-index:2;margin:0}
.ms-boxcard__occh{font-family:'Inter',system-ui,sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#6E7250;font-weight:600}
.ms-boxcard h3{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:.35rem 0 .45rem;color:#23211D;line-height:1.1}
.ms-boxcard__list{font-family:'Inter',system-ui,sans-serif;font-size:.88rem;color:#575147;line-height:1.5;margin:0 0 .5rem}
.ms-boxcard__trust{font-family:'Inter',system-ui,sans-serif;font-size:.76rem;color:#6B6459;margin:0 0 .9rem}
.ms-boxcard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto}
.ms-boxcard__price{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.45rem;color:#D41119}
.ms-boxcard__add{display:inline-flex;align-items:center;gap:.5em;background:#D41119;color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:.88rem;padding:.72em 1.15em;border-radius:2px;text-decoration:none;border:0;transition:background .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.ms-boxcard__add:hover{background:#B00E15;color:#fff;transform:translateY(-2px)}
.ms-boxfeat{display:grid;grid-template-columns:1.05fr 1fr}
.ms-boxfeat .ms-boxcard__media{min-height:320px}
.ms-boxfeat .ms-boxcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.ms-boxfeat .ms-boxcard__body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.ms-boxfeat h3{font-size:1.85rem}
.ms-boxsm{display:grid;grid-template-columns:128px 1fr}
.ms-boxsm .ms-boxcard__media img{width:100%;height:100%;object-fit:cover;display:block;min-height:100%}
.ms-boxsm .ms-boxcard__body{padding:17px 19px;display:flex;flex-direction:column}
.ms-boxsm h3{font-size:1.22rem}
.ms-boxsm .ms-boxcard__list{font-size:.82rem}
.ms-banco-head{background:#F5F0E8;padding:clamp(6px,1.5vw,16px) 0 clamp(12px,2vw,20px)}

@media(max-width:900px){
  .ms-shero__grid{grid-template-columns:1fr;gap:24px}
  .ms-shero__media{order:-1}
  .ms-boxes{grid-template-columns:1fr}
  .ms-boxfeat{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ms-boxsm{grid-template-columns:1fr}
  .ms-boxsm .ms-boxcard__media img{aspect-ratio:16/9}
  .ms-shero__cta{flex-direction:column;align-items:stretch}
  .ms-shero__cta .btn-red,.ms-shero__cta .btn-ghost{justify-content:center}
  .ms-shero__price b{font-size:2.1rem}
}
@media(prefers-reduced-motion:reduce){
  .ms-boxcard,.ms-boxcard__add,.ms-shero__cta .btn-red,.ms-shero__cta .btn-red .ar{transition:none}
}

/* ============================================================
   FIX FUCSIA definitivo (2026-07-22): la paginazione WooCommerce
   in hover/focus/current lasciava passare il background lavanda
   #e9e6ed del core (il tema sovrascriveva solo il colore testo).
   Ora hover+current = box INK pieno (nessun viola). !important per
   battere la specificità del core WC (0,3,4).
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--ink,#23211D) !important;
  color:var(--cream,#F5F0E8) !important;
  border-color:var(--ink,#23211D) !important;
}

/* Box card cliccabili verso la PDP (immagine + titolo = link al prodotto) */
.ms-boxcard__media{display:block;overflow:hidden}
.ms-boxcard__media img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ms-boxcard:hover .ms-boxcard__media img{transform:scale(1.04)}
.ms-boxcard h3 a{color:inherit;text-decoration:none}
.ms-boxcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   NUOVA HERO SHOP "Il Numero di Apertura" (.ms-fh) — 2026-07-22
   Sostituisce .ms-shero (che resta dead/fallback). Charcoal full-bleed,
   foto laterale sfumata nel buio, faro CSS, "01" outline, cluster commerce.
   Red-discipline: rosso solo su prezzo + CTA. ============================================================ */
.ms-fh{position:relative;background:#23211D;min-height:90vh;overflow:hidden;display:flex;isolation:isolate}
.ms-fh *{box-sizing:border-box}
.ms-fh__photo{position:absolute;top:0;right:0;bottom:0;width:47%;z-index:0;margin:0}
.ms-fh__photo img{width:100%;height:100%;object-fit:cover;object-position:60% center;display:block}
.ms-fh__photo.prov img{filter:grayscale(.34) contrast(1.04) brightness(.66) saturate(.9)}
.ms-fh__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#23211D 0%,rgba(35,33,29,.82) 26%,rgba(35,33,29,.32) 55%,transparent 82%)}
.ms-fh__photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(35,33,29,.5),transparent 40%)}
.ms-fh__faro{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 58% 62% at 31% 44%,rgba(245,240,232,.11),rgba(255,224,178,.06) 42%,transparent 72%)}
.ms-fh__col{position:relative;z-index:2;width:57%;min-height:90vh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(96px,12vh,128px) clamp(24px,5vw,88px) clamp(40px,6vh,72px)}
.ms-fh__eb{font-family:'Inter',system-ui,sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.6);margin:0}
.ms-fh__mast{position:relative;margin:0}
.ms-fh__01{position:absolute;left:-.04em;top:-.52em;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(130px,17vw,240px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(245,240,232,.2);z-index:-1;pointer-events:none;letter-spacing:-.02em}
.ms-fh h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(64px,8.2vw,128px);line-height:.9;letter-spacing:-.02em;color:#F5F0E8;margin:0}
.ms-fh h1 em{font-style:italic;font-weight:400}
.ms-fh__hr{width:min(100%,480px);height:1px;background:rgba(245,240,232,.2);margin:1.3rem 0 1.15rem}
.ms-fh__deck{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(1.15rem,1.7vw,1.55rem);color:rgba(245,240,232,.86);line-height:1.15;margin:0}
.ms-fh__supp{font-family:'Inter',system-ui,sans-serif;font-size:.94rem;color:rgba(245,240,232,.56);max-width:44ch;margin:.75rem 0 0;line-height:1.5}
.ms-fh__cluster{display:flex;flex-direction:column;gap:.9rem}
.ms-fh__pricerow{display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.ms-fh__price{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(2.1rem,3vw,2.6rem);color:#D41119;line-height:1}
.ms-fh__meta{font-family:'Inter',system-ui,sans-serif;font-size:.78rem;color:rgba(245,240,232,.48);letter-spacing:.02em;padding-bottom:.35em}
.ms-fh__ctarow{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.ms-fh__btn{display:inline-flex;align-items:center;gap:.55em;background:#D41119;color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1rem;padding:1em 1.7em;border-radius:2px;text-decoration:none;border:0;transition:background .25s,transform .4s cubic-bezier(.16,1,.3,1)}
.ms-fh__btn:hover{background:#B00E15;color:#fff;transform:translateY(-2px)}
.ms-fh__btn .ar{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ms-fh__btn:hover .ar{transform:translateX(4px)}
.ms-fh__ghost{font-family:'Inter',system-ui,sans-serif;font-size:.92rem;color:rgba(245,240,232,.8);text-decoration:none;border-bottom:1px solid rgba(245,240,232,.3);padding-bottom:2px;transition:border-color .3s}
.ms-fh__ghost:hover{border-color:#F5F0E8;color:rgba(245,240,232,.95)}
.ms-fh__re{font-family:'Inter',system-ui,sans-serif;font-size:.78rem;color:rgba(245,240,232,.46);margin:0}
@media(max-width:900px){
  .ms-fh{min-height:auto;flex-direction:column}
  .ms-fh__photo{position:relative;width:100%;height:46vh;top:auto;right:auto;bottom:auto}
  .ms-fh__photo::after{background:linear-gradient(0deg,#23211D 0%,rgba(35,33,29,.4) 34%,transparent 72%)}
  .ms-fh__photo::before{display:none}
  .ms-fh__col{width:100%;min-height:auto;padding:clamp(20px,5vw,32px) clamp(20px,6vw,32px) clamp(34px,7vw,44px);gap:1.4rem;margin-top:-8vh}
  .ms-fh__faro{background:radial-gradient(ellipse 80% 40% at 50% 62%,rgba(245,240,232,.1),transparent 70%)}
  .ms-fh__01{font-size:clamp(78px,22vw,120px);top:-.62em}
  .ms-fh__btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.ms-fh__btn,.ms-fh__btn .ar{transition:none}}

/* Anti-zoom iOS universale (2026-07-22): input <16px fanno zoomare iOS al focus.
   Alcune pagine (ristoranti) avevano la regola erroneamente in <noscript>. */
@media(max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{ font-size:16px !important; }
}

/* Gallery PDP: WooCommerce la parte a opacity:0 e aspetta il JS (flexslider) per
   rivelarla → l'immagine prodotto lampeggia vuota / resta invisibile se il JS tarda.
   I nostri prodotti hanno 1 sola immagine: la blindo visibile (reveal-must-enhance). */
.woocommerce-product-gallery{ opacity:1 !important; }

/* ============================================================
   FIX FUCSIA #2 (2026-07-22): il WC core ha `a:focus{background:#e9e6ed;
   color:#816f98}` (lavanda/viola) che colora OGNI link/bottone al focus o
   click su pagine woo (accordion PDP incluso). La fix paginazione non copriva
   il bare a:focus. Neutralizzato + focus-visible ring brand. ============================================================ */
.woocommerce a:focus, .woocommerce-page a:focus,
.acc__h:focus, .acc__h:active, .acc__h:hover{
  background:transparent !important; color:var(--ink,#23211D) !important;
}
.woocommerce a:focus-visible, .woocommerce-page a:focus-visible,
.acc__h:focus-visible{ outline:2px solid var(--red,#D41119); outline-offset:2px; }

/* Lightbox disattivata ovunque (2026-07-22): le foto non si aprono. Rimuovo
   l'affordance di clic (cursor + hint "+") dalle gallery. La .lightbox/#lightbox
   resta nel DOM ma non viene mai aperta (binding JS rimosso). */
.gal figure, #gallery-grid figure{ cursor:default !important; }
.gal figure::after, #gallery-grid figure::after{ display:none !important; }
.lightbox, dialog#lightbox{ display:none !important; }

/* ============================================================
   Gallery prodotto SENZA JS (lightbox/slider/zoom disattivati 2026-07-22):
   il markup flexslider di woocommerce_show_product_images() attende un JS che
   non c'è più → forzo l'immagine singola a mostrarsi come blocco statico.
   ============================================================ */
.woocommerce-product-gallery{opacity:1 !important}
.woocommerce-product-gallery__wrapper{display:block !important;transform:none !important;width:auto !important;height:auto !important}
.woocommerce-product-gallery__image{display:block !important;width:100% !important;margin:0 !important;float:none !important}
.woocommerce-product-gallery__image img{display:block !important;width:100% !important;height:auto !important;opacity:1 !important}
.woocommerce-product-gallery__image:not(:first-child){display:none !important}
.woocommerce-product-gallery .flex-viewport{height:auto !important;overflow:visible !important}
.woocommerce-product-gallery__trigger,.flex-control-nav,.flex-control-thumbs{display:none !important}

/* Filtri shop ora sono <button> (filtro in-pagina, niente redirect) */
button.ms-fpill{ cursor:pointer; -webkit-appearance:none; appearance:none; }

/* ============================================================
   LCP FIX (2026-07-23) — la HERO/SUB-HERO è above-the-fold:
   MAI nascosta dietro il JS reveal (site.js deferito nel footer).
   Prima: hero h1 .mask>span era translateY(110%) fino a .vis →
   su mobile 4G l'LCP (titolo) appariva a 6,5s. Ora è istantaneo;
   il reveal resta attivo per tutto ciò che è sotto la piega.
   ============================================================ */
.hero [data-reveal],.hero .mask>span,
.subhero [data-reveal],.subhero .mask>span{
  opacity:1!important;transform:none!important;transition:none!important
}

/* ============================================================
   FIX QA DESIGN (2026-07-23, screenshot Luigi IMG_9226→9232)
   ============================================================ */

/* [3] X/burger del menu: MAI sfondo su focus/active/tap (era fucsia da uno
   stato UA/WC). Mantengo solo un ring rosso su focus da tastiera. */
html{ -webkit-tap-highlight-color:transparent; }
.nav__burger,.nav__burger:hover,.nav__burger:focus,.nav__burger:active,
.nav__burger:focus-visible,button.nav__burger{
  background:transparent!important; -webkit-tap-highlight-color:transparent!important;
  outline:none!important; box-shadow:none!important; border:none!important;
}
.nav__burger:focus-visible{ outline:2px solid var(--red,#D41119)!important; outline-offset:3px; }

/* [1] Ghost button "Scopri l'agriturismo" sulle place-card (sfondo chiaro):
   forzo bordo+testo scuri = ben visibile (currentColor poteva ereditare chiaro). */
.ms-place-card__cta .btn-ghost,
.ms-place-card__cta .btn.btn-ghost{
  border:1px solid var(--ink,#23211D)!important; color:var(--ink,#23211D)!important;
  background:transparent!important;
}
.ms-place-card__cta .btn-ghost:hover{ background:var(--ink,#23211D)!important; color:var(--cream,#F5F0E8)!important; }

/* [2] Campo DATA (input type=date): su iOS il valore/placeholder "esce fuori" e
   l'altezza differisce dalle select. Normalizzo come gli altri campi. */
.field input[type="date"]{
  -webkit-appearance:none; appearance:none; min-height:44px; width:100%;
  line-height:1.2; box-sizing:border-box; display:flex; align-items:center;
}
.field input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; padding:0; }
.field input[type="date"]::-webkit-calendar-picker-indicator{ margin-left:auto; opacity:.55; }
.field input[type="date"]::-webkit-datetime-edit{ padding:0; line-height:1.2; }

/* [5] Filtri: UNA riga che scorre in orizzontale (niente wrap su più righe),
   coerente col menù. Vale per lo shop e ogni barra filtri simile. */
.ms-shopfilters{
  display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important;
  gap:10px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-bottom:2px; scroll-snap-type:x proximity;
}
.ms-shopfilters::-webkit-scrollbar{ display:none; }
.ms-shopfilters .ms-fpill{ flex:0 0 auto!important; white-space:nowrap; scroll-snap-align:start; }

/* [7] NOTA: il padding orizzontale del contenuto Woo NON va messo su
   .woocommerce (si somma a quello di .wrap interno = doppio, e rompe la hero
   shop full-bleed). Il gutter è già gestito dai .wrap dentro i template woo. */

/* [4] Footer su mobile: spacing troppo ampio. La causa reale è
   site.css:326 (.foot ul{gap:14px} + .foot ul a{padding:8px 0} = ~30px).
   Stringo gap+padding delle voci. */
@media(max-width:640px){
  .foot__grid{ gap:30px 36px!important; }
  .foot ul{ gap:6px!important; margin:.2rem 0 0!important; }
  .foot ul a{ padding:3px 0!important; }
  .foot h4{ margin-bottom:.7rem!important; }
}

/* [1/7] PLACE-CARD sfora a destra su mobile → bottoni ("Scopri l'agriturismo"
   ecc.) tagliati fuori. Causa: grid 1fr = minmax(auto,1fr) non si restringe
   sotto il min-content di un figlio. Fix universale: minmax(0,1fr)+min-width:0. */
.ms-place-card{ min-width:0!important; max-width:100%; }
.ms-place-card > *{ min-width:0!important; }
@media(max-width:860px){
  .ms-place-card, .ms-place-card:nth-child(even){ grid-template-columns:minmax(0,1fr)!important; }
}
/* stessa protezione per le altre griglie editoriali con media grande */
.card, .ms-card, .story__media, .world__img, .book__grid{ min-width:0; }

/* [1b] CTA place-card: i 3 bottoni DEVONO impilarsi a colonna su mobile.
   La media query del template non vinceva (coherence caricato dopo). Forzo. */
@media(max-width:640px){
  .ms-place-card__cta{ flex-direction:column!important; align-items:stretch!important; flex-wrap:nowrap!important; }
  .ms-place-card__cta .btn{ width:100%!important; max-width:100%!important; white-space:normal; }
}
/* campo data: stessa altezza esatta delle select accanto */
.field input[type="date"]{ min-height:50px; padding-top:.7em; padding-bottom:.7em; }

/* [7b] CARRELLO doppio padding → testo a 53px (home=22px). Causa:
   body.woocommerce-cart .woocommerce ha già padding-inline 21.5, e la hero usa
   un .wrap interno con ALTRI 21.5. Tolgo il padding ridondante del .wrap sul cart
   così l'inset laterale = home. */
body.woocommerce-cart .woocommerce .wrap{ padding-left:0!important; padding-right:0!important; }

/* [7c] Allinea l'inset laterale woo alla HOME (~21.5px). Il wrapper Hello
   Elementor main.site-main aggiunge 10px extra oltre al gutter woo (la home usa
   un template custom senza site-main). Azzero il site-main solo su woo. */
body.woocommerce-cart main.site-main,
body.woocommerce-checkout main.site-main{ padding-left:0!important; padding-right:0!important; }
body.woocommerce-cart .entry-title, body.woocommerce-cart .page-header,
body.woocommerce-checkout .entry-title, body.woocommerce-checkout .page-header{ padding-left:0!important; padding-right:0!important; }

/* [8] CARD CORRELATI/UPSELL = identiche allo SHOP. La card related è più stretta
   (177 vs 199px) e .ms-card__f{flex-wrap:wrap} mandava il bottone "+" a capo sotto
   il prezzo. Forzo prezzo+bottone SEMPRE inline (come shop); il prezzo si restringe. */
.single-product .related.products li.product .ms-card__f,
.single-product .up-sells li.product .ms-card__f{ flex-wrap:nowrap!important; gap:8px!important; }
.single-product .related.products li.product .ms-card__f .price,
.single-product .up-sells li.product .ms-card__f .price{ flex:0 1 auto!important; min-width:0!important; white-space:nowrap; }

/* ============================================================================
   COERENZA PAGINE WOOCOMMERCE ↔ VETRINA  (append in coda a coherence.css)
   Causa-radice: il tema padre Hello Elementor mette max-width:1280px + margin
   auto sul <body> delle pagine Woo (classi hello-elementor-default). Ogni figlio
   in-flow del body (footer, hero .ms-fh, banda box, hero categoria .ms-shop-hero)
   viene "inscatolato" a 1280 con margini crema ai lati, invece che full-bleed
   come in vetrina. Le pagine vetrina sono template canvas (niente classe .ms-shared)
   → questo blocco NON le tocca. Il contenuto resta centrato via i .wrap interni.
   ============================================================================ */
body.ms-shared{ max-width:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; }

/* La vecchia regola one-off full-bleed su .ms-shop-hero usava width:100vw (rischio
   overflow da scrollbar ora che il body è a piena larghezza): con il body liberato
   basta width:auto per andare edge-to-edge, senza 100vw. */
body.ms-shared .ms-shop-hero{ width:auto !important; margin-left:0 !important; margin-right:0 !important; }

/* --- Rifinitura #5 (PDP mobile): nella griglia "Ti potrebbe piacere" a 2 colonne
   il simbolo € del prezzo era coperto dal bottone "+". Sotto 400px la riga va a capo. */
@media(max-width:400px){
  body.ms-shared.single-product .related.products li.product .ms-card__f{ flex-wrap:wrap !important; gap:6px !important; }
  body.ms-shared.single-product .related.products li.product .ms-card__f .price{ white-space:normal; font-size:.95rem; }
}

/* --- Rifinitura #11 (carrello): la freccia del link generico "Continua lo shopping"
   era rossa → red-discipline: il rosso resta a CTA e prezzi. */
body.woocommerce-cart .cart__continue .ar{ color:var(--ink) !important; }

/* --- Rifinitura #13 (checkout): nel riepilogo anche il Subtotale intermedio era
   rosso → resta rosso solo il Totale finale, gli intermedi in ink. */
body.woocommerce-checkout .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value{ color:var(--ink,#23211D) !important; font-weight:500; }

/* --- FIX MENÙ (2026-07-24): fascia CTA di chiusura ".ms-cta" — l'hover del bottone
   lasciava il testo BIANCO su sfondo CREMA (illeggibile): la base era stata girata a
   rosso/bianco dalla red-discipline (coherence.css:1520) senza aggiornare l'hover, che
   restava quello vecchio inline in menu.php (.ms-cta .btn:hover{background:var(--cream)}).
   Ora l'hover scurisce il rosso e mantiene il testo bianco (come il bottone newsletter). */
.ms-cta .btn:hover,
.ms-cta a.btn-primary:hover{ background:var(--red-hover,#B00E15); border-color:var(--red-hover,#B00E15); color:#fff; }

/* ============ PAGINE LEGALI — coerenza col design (2026-07-24) ============
   Privacy(210) / Termini(211) / Cookie(212). Erano già coerenti nei font
   (Fraunces/Inter/ink) ma: (a) niente sub-hero → titolo incollato sotto la nav;
   (b) testo a tutta larghezza (~1140px) = misura illeggibile; (c) ritmo sezioni
   stretto. Le allineo al linguaggio delle pagine interne. Scoped ai 3 page-id
   per NON toccare le pagine Woo che condividono .page-header/.site-main. */

body.page-id-210 .site-main,
body.page-id-211 .site-main,
body.page-id-212 .site-main{ max-width:none; }

/* --- sub-hero header: occhiello + titolo centrato + respiro + filo di chiusura --- */
body.page-id-210 .page-header,
body.page-id-211 .page-header,
body.page-id-212 .page-header{
  text-align:center;
  padding:clamp(46px,7vw,92px) 20px clamp(26px,4vw,42px);
  border-bottom:1px solid var(--border,#E3DBCE);
  margin:0 0 clamp(32px,5vw,56px);
}
body.page-id-210 .page-header::before,
body.page-id-211 .page-header::before,
body.page-id-212 .page-header::before{
  content:"INFORMATIVA LEGALE";
  display:block; font-family:var(--ms-sans,Inter),system-ui,sans-serif;
  font-weight:600; font-size:.72rem; letter-spacing:.16em;
  color:var(--muted,#6B6459); margin:0 0 14px;
}
body.page-id-210 .page-header .entry-title,
body.page-id-211 .page-header .entry-title,
body.page-id-212 .page-header .entry-title{
  font-size:clamp(2.1rem,4.5vw,3rem); line-height:1.06; margin:0;
}

/* --- colonna di lettura leggibile e centrata --- */
body.page-id-210 .page-content,
body.page-id-211 .page-content,
body.page-id-212 .page-content{
  max-width:760px; margin-inline:auto;
  padding:0 20px clamp(64px,9vw,120px);
}

/* --- ritmo sezioni + leggibilità --- */
body.page-id-210 .page-content h2,
body.page-id-211 .page-content h2,
body.page-id-212 .page-content h2{
  font-size:clamp(1.35rem,2.6vw,1.65rem); line-height:1.2;
  margin:clamp(34px,5vw,50px) 0 12px;
}
body.page-id-210 .page-content h3,
body.page-id-211 .page-content h3,
body.page-id-212 .page-content h3{ font-size:1.05rem; margin:26px 0 8px; }
body.page-id-210 .page-content p,
body.page-id-211 .page-content p,
body.page-id-212 .page-content p,
body.page-id-210 .page-content li,
body.page-id-211 .page-content li,
body.page-id-212 .page-content li{ line-height:1.72; }
body.page-id-210 .page-content ul,
body.page-id-211 .page-content ul,
body.page-id-212 .page-content ul{ margin:0 0 16px; padding-left:1.2em; }

/* ============================================================================
   BATCH AUDIT — design & coerenza (2026-07-25). Append a coherence.css.
   Tutti scoped; nessun impatto sulle vetrine-canvas altrui o sul tema padre.
   ============================================================================ */

/* [1] HOME — fallback sfondo sul media storia (evita il buco se l'immagine non carica) */
.story__media{ background:var(--cream-card,#FBF8F2); }

/* [4] CHI SIAMO — pallini timeline riallineati alla spina (clamp era invertito) */
.tline .tl__dot{ left:clamp(-52px,-6vw,-28px); }

/* [5] Menu mobile — scroll-lock del body a menu aperto (mancava sui template canvas) */
body.menu-open{ overflow:hidden; }

/* [9]/[20] Ancore sotto la nav fissa su TUTTE le pagine canvas (agriturismo/camere/chi-siamo…) */
body:not(.ms-shared) [id]{ scroll-margin-top:calc(76px + var(--ms-topbar-h,36px) + 16px); }

/* [7] MENU — tap target selettore sede ≥44px su touch */
@media(pointer:coarse){ .ms-loctab{ min-height:44px; padding:.85em 1.25em; } }

/* [8] MENU — contrasto micro-badge filiera/allergeni */
.ms-cat .ms-badge-filiera{ color:#54583A; }
.ms-cat .ms-chip-allerg{ color:#585349; font-size:.72rem; }

/* [10] AGRITURISMO — card servizio wide: immagine non gonfiata, testo ancorato in alto */
@media(min-width:901px){
  .svc .ms-service-card--wide{ min-height:300px; max-height:420px; }
  .svc .ms-service-card--wide .ms-service-card__img{ min-height:0; align-self:stretch; }
  .svc .ms-service-card--wide .ms-service-card__b{ justify-content:flex-start; }
}

/* [15] CONTATTI — hover link contatto fuori dalla red-discipline → ink/underline */
.sedi .sede__meta a:hover,
.contact .cinfo__v a:hover,
.contact .cform .consent a:hover{
  color:var(--ink,#23211D); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--olive,#6E7250);
}

/* [23] SHOP — CTA box card allineata al "banco": ink→rosso solo in hover (una sola macchia rossa = prezzo) */
.ms-boxcard__add{ background:var(--ink,#23211D); color:var(--cream,#F5F0E8); }
.ms-boxcard__add:hover{ background:var(--red,#D41119); color:#fff; }

/* [24] SHOP — contrasto testo secondario hero bag su fondo scuro */
.ms-fh__meta{ color:rgba(245,240,232,.64); }
.ms-fh__re{ color:rgba(245,240,232,.64); }

/* [25] SHOP — foto hero meno scurita su mobile (dove non c'è testo sopra) */
@media(max-width:900px){
  .ms-fh__photo.prov img{ filter:grayscale(.12) contrast(1.03) brightness(.9) saturate(1); }
}

/* [26] PRODUCT — la colonna acquisto non deve ereditare la card di cart/checkout */
.single-product .pdp__info.summary,
.single-product .pdp__info.entry-summary{
  background:none; border:0; border-radius:0; padding:0; position:static;
}

/* [30] CART — sub-hero scuro full-bleed (era boxed dentro il container 1280) */
body.woocommerce-cart .subhero,
body.woocommerce-checkout .subhero{
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
body.woocommerce-cart, body.woocommerce-checkout{ overflow-x:clip; }

/* [31] CART/CHECKOUT — riepilogo checkout uniformato alla card cream-card del carrello */
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar{
  background:var(--cream-card,#FBF8F2); border-radius:3px;
}

/* [32] CART — pallino conteggio prodotti da rosso decorativo → oliva */
body.woocommerce-cart .subhero__count .dot{ background:var(--olive,#6E7250); }

/* [33] CART — "Aggiorna carrello": enabled leggibile e distinto dal disabled */
.cart__actions button[name="update_cart"]:not(:disabled){
  color:var(--ink,#23211D)!important; border-color:var(--ink,#23211D)!important;
}
.cart__actions button[name="update_cart"]:disabled{ opacity:.5; }

/* [36] CHECKOUT — metodo pagamento selezionato: bordo oliva invece che ink pesante */
body.woocommerce-checkout .wc-block-components-radio-control__option--checked,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked){
  border-color:var(--olive,#6E7250); background:var(--cream,#F5F0E8);
}

/* [39]/[40] LEGALI — titolo agganciato al token 'contenuto' + centrato full-width sull'asse */
body.page-id-210 .page-header .entry-title,
body.page-id-211 .page-header .entry-title,
body.page-id-212 .page-header .entry-title{
  font-size:var(--ct-h1-content, clamp(2.2rem,5vw,3.6rem));
  max-width:none; margin-inline:auto;
}

/* [42] LEGALI/footer — spazio sotto la bottom-bar così il carrello flottante non copre i link legali */
.ms-shared .foot__bar{ padding-bottom:80px; }
@media(max-width:600px){ .ms-shared .foot{ padding-bottom:96px; } }

/* --- Hero shop .ms-fh (2026-07-25): sfondo/foto full-bleed OK, ma il CONTENUTO
   testuale deve stare nella colonna centrata 1280 come gli altri hero (col body a
   piena larghezza il testo si sparpagliava a tutto schermo sui monitor larghi). --- */
.ms-fh__wrap{display:contents}
@media(min-width:901px){
  .ms-fh__wrap{display:flex;position:relative;z-index:2;width:100%;max-width:var(--container,1280px);margin-inline:auto;align-items:stretch}
}
/* ============================================================================
   BATCH AUDIT round 2 (2026-07-25). Append a coherence.css. Tutti scoped.
   ============================================================================ */

/* [2] AGRITURISMO — i titoli .mask tagliavano i discendenti (p/g/j): recupero spazio */
.section__head h2.mask, .intro h2.mask, .book h2.mask, .story h2.mask{ padding-bottom:.12em; }

/* [5] CONTATTI — checkbox consenso privacy: accent ink (era rosso, fuori red-discipline) */
.contact .cform .consent input{ accent-color:var(--ink,#23211D); }

/* [8] SHOP — hero .ms-fh su svh (coerente col resto del sito, mobile stabile) */
.ms-fh{ min-height:90svh; }
@media(max-width:900px){
  .ms-fh__photo{ height:46svh; }
  .ms-fh__col{ margin-top:-8svh; }
}

/* [9] PRODUCT — icona accordion aperto: ink invece di rosso (red-discipline) */
.single-product .acc__item.open .acc__ic{ color:var(--ink,#23211D); }

/* [10] PRODUCT — stringi lo stacco tra select FORMATO e qty/CTA nella buybar */
.single-product .pdp .buybar table.variations{ margin-bottom:6px; }
.single-product .pdp .buybar .single_variation_wrap{ margin-top:0; }
.single-product .pdp .buybar form.cart{ row-gap:8px; }
.single-product .pdp .buybar .woocommerce-variation-add-to-cart{ margin:0; }

/* [11] PRODBAG — card correlata in saldo (mobile): riga prezzo+"+" su una riga,
   del/ins impilati nella colonna prezzo (il "+" non va più a capo) */
@media(max-width:400px){
  body.ms-shared.single-product .related.products li.product .ms-card__f{ flex-wrap:nowrap !important; align-items:flex-end; gap:8px !important; }
  body.ms-shared.single-product .related.products li.product .ms-card__f .price{ flex:1 1 auto; min-width:0; white-space:normal; font-size:.9rem; line-height:1.15; }
  body.ms-shared.single-product .related.products li.product .ms-card__f .price del,
  body.ms-shared.single-product .related.products li.product .ms-card__f .price ins{ display:block; }
}

/* [12] CATEGORIA — l'occhiello categoria della card duplicava il titolo hero (7x) → nascondi */
body.tax-product_cat ul.products li.product .ms-card__cat{ display:none; }

/* [14] CHECKOUT — su mobile il riepilogo ordine appariva DUE volte: quello nella
   colonna main (che desktop già nasconde) restava visibile su mobile. Lo nascondo
   ovunque → un solo riepilogo (sidebar), coerente con desktop. */
body.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block{ display:none; }

/* --- Credito NEXUMA in fondo al footer (riga dedicata, centrata, sobria) --- */
.foot__by{ flex-basis:100%; text-align:center; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06); font-size:.74rem; letter-spacing:.04em; color:#7d766a; }
.foot__by a{ color:#a89f90; font-weight:600; letter-spacing:.08em; transition:color .3s; }
.foot__by a:hover{ color:var(--cream,#F5F0E8); }

/* [CLS mobile] Riserva ferrea dell'altezza del box foto hero shop: su mobile la foto
   caricava tardi (dietro il CSS) e faceva saltare la colonna testo. Blindato l'ingombro. */
@media(max-width:900px){
  body.woocommerce-shop .ms-fh__photo{ height:46svh !important; min-height:46svh; flex:0 0 auto; contain:layout paint; }
  body.woocommerce-shop .ms-fh__photo img{ width:100%; height:100%; object-fit:cover; }
}
/* ============================================================================
   FASE 3 — DIFETTI MOBILE FOTOGRAFATI (2026-07-26)
   Appeso a coherence.css. Backup server: .bak-fase3-2026-07-26/
   Ogni blocco cita la causa radice verificata, non il sintomo.
   ========================================================================== */

/* [F3-1] CARRELLO/CHECKOUT — gutter del sub-hero ripristinato.
   CAUSA (catena di 3 regole, non un errore singolo):
     woocommerce.css:1046-1051  .woocommerce-cart .woocommerce  -> padding-inline clamp(20px,5vw,64px)  [il gutter di pagina]
     coherence.css:2221         .woocommerce-cart .woocommerce .wrap -> padding 0 !important            [20/07: toglieva il doppio gutter]
     coherence.css:2399-2402    .subhero -> margin-inline:calc(50% - 50vw)                              [24/07: full-bleed]
   Il fix [30] ha portato il sub-hero FUORI dal contenitore che aveva il gutter,
   ma il suo .wrap era gia' stato azzerato dal fix [7b] -> testo a x=0.
   Il sub-hero full-bleed deve riavere il gutter sul .wrap interno. */
body.woocommerce-cart .subhero .wrap,
body.woocommerce-checkout .subhero .wrap{
  padding-left:clamp(20px,5vw,64px)!important;
  padding-right:clamp(20px,5vw,64px)!important;
}

/* [F3-1b] Il paragrafo del sub-hero non deve leggersi come una frase monca.
   Il badge conteggio e' un flex item a se'; la frase ora e' autonoma e va a capo
   pulita su tutta la riga (vedi anche il fix di copy in cart.php). */
body.woocommerce-cart .subhero__sub{ align-items:flex-start; }
body.woocommerce-cart .subhero__sub .subhero__lead{ flex:1 1 100%; min-width:0; }

/* [F3-2] CHECKOUT — il blocco Woo Blocks non ha NESSUN gutter.
   CAUSA: <div class="wp-block-woocommerce-checkout"> e' figlio diretto di
   .page-content, SENZA il wrapper .woocommerce che invece esiste su /cart/.
   Tutte le regole di gutter del child (woocommerce.css:1046, :2411) puntano a
   selettori che su questa pagina non esistono; coherence.css:1667 azzera solo i
   margini e non ripristina mai un padding -> titoli e input partono da x=0. */
body.woocommerce-checkout .wp-block-woocommerce-checkout{
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
  box-sizing:border-box;
}
/* le colonne interne del blocco non devono sommare un secondo gutter */
body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar{
  padding-left:0; padding-right:0;
}

/* [F3-3] CARRELLO — il "riquadro bianco" accanto al cestino.
   CAUSA: la regola core .woocommerce a.remove (bianco, 1em x 1em, border-radius
   100%, font-size 1.5em) vince per specificita' su .crow__rm del tema, e l'icona
   SVG resta incollata al bordo superiore della scatola.
   Fix: ricostruire il bottone come target quadrato con l'icona centrata. */
body.woocommerce-cart a.crow__rm.remove,
body.woocommerce-cart .crow a.remove{
  display:grid!important; place-items:center!important;
  width:40px!important; height:40px!important;
  font-size:0!important; line-height:0!important;
  background:transparent!important; border-radius:3px!important;
  color:var(--ink,#23211D)!important;
  transition:background .18s ease, color .18s ease;
}
body.woocommerce-cart a.crow__rm.remove svg,
body.woocommerce-cart .crow a.remove svg{ width:18px; height:18px; display:block; }
body.woocommerce-cart a.crow__rm.remove:hover,
body.woocommerce-cart a.crow__rm.remove:focus-visible{
  background:rgba(35,33,29,.06)!important;
  color:var(--red,#D41119)!important;
}
@media(pointer:coarse){
  body.woocommerce-cart a.crow__rm.remove{ width:44px!important; height:44px!important; }
}

/* [F3-6a] CARRELLO FLOTTANTE — su iPhone il bottone finisce sotto la home-bar.
   Mancava env(safe-area-inset-bottom). Il valore base e' bottom:24px, dichiarato
   inline in inc/woo-skin.php:100 (stampato a wp_footer) -> serve !important. */
.ms-cartbtn{
  bottom:calc(24px + env(safe-area-inset-bottom, 0px))!important;
}
@supports(padding:max(0px)){
  .ms-shared .foot__bar{ padding-bottom:max(80px, calc(80px + env(safe-area-inset-bottom,0px))); }
}

/* [F3-6b] Nome prodotto e breadcrumb sottolineati: eredita' di hello-elementor,
   che mette text-decoration:underline sugli <a> dentro il contenuto Woo. */
body.woocommerce-cart .crow__title a,
body.woocommerce-cart .crow__info a,
body.ms-shared .woocommerce-breadcrumb a,
body.ms-shared .crumbs a{ text-decoration:none; }
body.woocommerce-cart .crow__title a:hover,
body.ms-shared .woocommerce-breadcrumb a:hover,
body.ms-shared .crumbs a:hover{ text-decoration:underline; text-underline-offset:.18em; }

/* [F3-6c] CARRELLO/CHECKOUT — ~290px di vuoto sopra la piega su mobile.
   Il sub-hero ha padding-top 118px fisso (coherence.css:1458-1459) pensato per
   la nav desktop; su mobile la nav e' piu' bassa e il risultato e' una banda vuota. */
@media(max-width:640px){
  body.woocommerce-cart .subhero,
  body.woocommerce-checkout .subhero{
    padding-top:clamp(84px,22vw,104px)!important;
    padding-bottom:clamp(22px,6vw,32px)!important;
  }
}

/* [F2-1] Stati vuoti (ricerca senza risultati / categoria vuota).
   Prima la ricerca serviva l'intero teatro dello shop col messaggio Woo grigio
   sepolto al 72% della pagina. */
.ms-empty{ padding:clamp(64px,12vw,140px) 0 clamp(48px,9vw,110px); text-align:center; }
.ms-empty h2{ font-family:'Fraunces',Georgia,serif; font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.08;
  letter-spacing:-.02em; color:var(--ink,#23211D); margin:0 0 .5em; }
.ms-empty p{ max-width:52ch; margin:0 auto 1.1em; color:#6b6459; font-size:clamp(1rem,1.4vw,1.08rem); }
.ms-empty__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* [F2-2] Box esaurita: la card resta visibile (il cliente deve vedere cosa manca)
   ma smette di sembrare acquistabile. */
.ms-boxcard__add.is-out{ background:transparent; color:#8a8377; border:1px solid var(--border,#e2dbcd);
  cursor:default; pointer-events:none; }

/* [F2-3] Foto prodotto caricate dal telefono: rapporto fisso e ritaglio, così una
   foto verticale non sfonda la griglia; sfondo crema se l'immagine manca del tutto. */
.ms-card__img, .ms-boxcard__media{ background:var(--cream-card,#FBF8F2); overflow:hidden; }
.ms-card__img img, .ms-boxcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* [F2-4] Prodotto esaurito: WooCommerce applica già la classe .outofstock e
   nasconde la CTA, ma nel tema non c'era nessuno stile → la card sembrava
   acquistabile come le altre. Segnale visivo, senza nascondere il prodotto
   (il cliente deve vedere cosa gli manca a scaffale). */
.products li.product.outofstock .ms-card__img{ position:relative; }
.products li.product.outofstock .ms-card__img::after{
  content:"Esaurito"; position:absolute; left:12px; top:12px; z-index:2;
  font-family:'Inter',system-ui,sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink,#23211D);
  background:rgba(251,248,242,.94); padding:.42em .7em; border-radius:2px;
}
.products li.product.outofstock .ms-card__img img{ filter:saturate(.55); opacity:.72; }
.single-product.outofstock .stock.out-of-stock,
.woocommerce div.product .stock.out-of-stock{
  display:inline-block; font-family:'Inter',system-ui,sans-serif; font-weight:600;
  color:var(--ink,#23211D); background:var(--cream-card,#FBF8F2);
  border:1px solid var(--border,#e2dbcd); padding:.6em 1em; border-radius:2px; margin:.4em 0 0;
}


/* [F5-2] La banda crema sotto il footer: NON e' un elemento (verificato, il footer
   chiude esattamente a fine documento su tutte le pagine). E' il fondo del <body>
   che Safari mostra durante l'overscroll elastico. Si risolve dando all'<html> il
   colore degli estremi della pagina (topbar e footer sono scuri) e lasciando il
   crema al solo <body>. */
html{ background-color:#12100E; }
body{ background-color:var(--cream,#F5F0E8); }

/* [F5-3] CHECKOUT — il riepilogo aveva i valori attaccati al bordo della tabella:
   il blocco totali di WooCommerce non porta padding orizzontale proprio. */
/* ⚠️ CORRETTO 2026-07-27: qui c'era un padding-inline sulle RIGHE dei totali,
   messo per staccare i valori dal bordo. Ma il gutter ce l'ha già il contenitore
   del pannello: il risultato era che le righe (Subtotale/Consegna/Totale) stavano
   16px più dentro del titolo "Riepilogo dell'ordine" — misurato titolo x=20,
   righe x=36. Il padding va a UN SOLO livello, e quel livello è il contenitore. */
body.woocommerce-checkout .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-components-totals-footer-item,
body.woocommerce-checkout .wc-block-components-order-summary__content,
body.woocommerce-checkout .wc-block-components-totals-coupon,
body.woocommerce-checkout .wc-block-components-panel__button{
  padding-inline: 0;
}
/* il gutter del pannello, una volta sola */
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{
  padding-inline: 0;
}
body.woocommerce-checkout .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__value{ min-width:0; }
body.woocommerce-checkout .wc-block-components-totals-wrapper:empty{ display:none; }

/* ============================================================================
   CONTENITORI — UN SOLO GUTTER (sessione dedicata 2026-07-26)
   ============================================================================
   REGOLA: un solo gutter, identico e allineato fra header, contenuto e footer,
   su tutte le pagine e a tutti i viewport. Canonico = quello del footer:
       .wrap { max-width:1280px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px) }
   che dà 20px @390 · 38px @768 · 144px @1440.

   CAUSA COMUNE DEL DISALLINEAMENTO (misurata, non ipotizzata):
   main.site-main del TEMA PADRE hello-elementor (theme.css:1) è un container a
   gradini — max-width 500/600/800/1140 + padding-inline 10px sotto 576px — che
   nessuno ha scelto e che si SOMMA al gutter vero. Da lì venivano:
     shop  10 / 84 / 150      PDP  30 / 122 / 214
     cart  20 / 122 / 214     checkout 20 / 122 / 134
   ⚠️ Non si neutralizza globalmente: ogni superficie ha un anello diverso sotto,
   e lo shop non ha nessun .wrap interno (le card finirebbero a x=0).
   ========================================================================== */

/* ---- PDP: sotto .site-main c'è già un .wrap, che diventa l'unico anello ---- */
body.ms-shared.single-product main#main.site-main,
body.ms-shared.single-product main#content.site-main{
  max-width:none !important;
  padding-inline:0 !important;
  margin-inline:0 !important;
}

/* ---- SHOP e CATEGORIA ----------------------------------------------------
   Qui NON esiste un .wrap sotto .site-main: la catena è
   main.site-main > ul.products > li.product (diretta). Quindi si azzera il
   container del tema padre E si dà il gutter alla griglia, che diventa l'anello.
   Le sezioni editoriali (hero, band Box, "Al banco") sono figlie dirette del
   body — non passano da .site-main — e hanno già un anello interno proprio:
   vanno solo riportate alla stessa formula, non spaziate una seconda volta. */
body.ms-shared.post-type-archive-product main#main.site-main,
body.ms-shared.post-type-archive-product main#content.site-main,
body.ms-shared.tax-product_cat main#main.site-main,
body.ms-shared.tax-product_cat main#content.site-main{
  max-width:none !important;
  padding-inline:0 !important;
  margin-inline:0 !important;
}
body.ms-shared.post-type-archive-product ul.products,
body.ms-shared.tax-product_cat ul.products{
  max-width:var(--container,1280px);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,64px);
  box-sizing:border-box;
}
/* le sezioni full-bleed dello shop: stessa formula del footer, un anello solo */
body.ms-shared .ms-boxsec__wrap,
body.ms-shared .ms-banco-head__wrap,
body.ms-shared .ms-shop-conn,
body.ms-shared .ms-shop-hero__inner{
  max-width:var(--container,1280px);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,64px);
  box-sizing:border-box;
}

/* ---- HERO FLAGSHIP dello shop: stessa formula del footer ------------------
   .ms-fh__col aveva un gutter tutto suo — clamp(24px,5vw,88px) da desktop
   (coherence.css:2048) e clamp(20px,6vw,32px) da mobile (:2074) — che dava
   23px @390 e 152px @1440 contro i 20/144 del footer.
   ⚠️ Il gutter va messo QUI e non su .ms-fh__wrap: quello è display:contents
   sotto 901px (:2441) e un padding lì verrebbe ignorato in silenzio. */
.ms-fh__col{ padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px); }
@media(max-width:900px){
  .ms-fh__col{ padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px); }
}

/* ---- CARRELLO e CHECKOUT -------------------------------------------------
   La catena più intricata: main.site-main (capped 1140 dal tema padre) >
   div.woocommerce (padding 64) > .wrap (azzerato da coherence.css:2221).
   Il risultato netto era 122 @768 e 214 @1440 — irraggiungibile il 144 del
   footer, perché dentro un cap di 1140 il massimo avvicinamento è 150 - padding.
   Si toglie il cap del tema padre, si toglie il gutter al wrapper intermedio e
   si restituisce l'anello al .wrap, come su tutte le altre superfici.
   NB: azzerando .site-main il genitore del sub-hero diventa full width, quindi
   il suo calc(50% - 50vw) va a 0 da solo e il full-bleed resta corretto. */
body.woocommerce-cart main#content.site-main,
body.woocommerce-cart main#main.site-main,
body.woocommerce-checkout main#content.site-main,
body.woocommerce-checkout main#main.site-main{
  max-width:none !important;
  padding-inline:0 !important;
  margin-inline:0 !important;
}
/* il wrapper intermedio cede il gutter al .wrap sottostante */
body.woocommerce-cart .woocommerce{
  max-width:none !important;
  padding-inline:0 !important;
}
/* .wrap torna a essere l'anello unico (annulla coherence.css:2221 sul carrello) */
body.woocommerce-cart .woocommerce .wrap{
  padding-left:clamp(20px,5vw,64px) !important;
  padding-right:clamp(20px,5vw,64px) !important;
}
/* checkout a blocchi: non ha .wrap, l'anello è il blocco stesso */
body.woocommerce-checkout .wp-block-woocommerce-checkout{
  max-width:var(--container,1280px);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,64px);
  box-sizing:border-box;
}

/* ---- NAV: dal bordo del viewport al contenitore canonico -----------------
   La nav era l'UNICO elemento ancorato al viewport (padding-inline, nessun
   max-width): coincideva col footer fino a 1280px e divergeva sopra —
   64 vs 144 @1440, 64 vs 384 @1920.
   Non si risolve con un calc sulla nav: è position:fixed e il suo sfondo
   (blur + ombra) deve restare a tutta larghezza, e un calcolo su 100vw sfasa
   di ~7px per via della scrollbar (misurato). Serve un anello interno, ed è
   il .wrap canonico: aggiunto in header.php e nei 7 template vetrina.
   La nav resta full-bleed per lo sfondo; il .wrap dentro porta il gutter. */
.nav{ padding-left:0 !important; padding-right:0 !important; }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:1rem;
}

/* ---- MENU MOBILE: stesso gutter del resto -------------------------------
   .mnav aveva una formula propria — clamp(28px,9vw,56px) da site.css:88 e
   clamp(26px,7vw,46px) da coherence.css:1843 (!important) — che dava 27,3px a
   390 contro i 20 di logo, contenuto e footer. A menu aperto il salto si vede,
   perché il logo resta visibile sopra. */
.mnav{
  padding-left:clamp(20px,5vw,64px) !important;
  padding-right:clamp(20px,5vw,64px) !important;
}

/* ============================================================================
   COERENZA — lotto 1: P1 a rischio nullo/basso (audit misurato 2026-07-26)
   Ogni voce cita il numero misurato che la giustifica.
   ========================================================================== */

/* [C1] I <button class="btn"> rendevano con il FONT DI SISTEMA.
   Causa: .btn dichiara font-weight e font-size ma NON font-family (site.css:47 e
   woocommerce.css:3076), e <button> non eredita il font dal body (regola UA
   font:400 13.3333px Arial). Misurati 5 bottoni fuori brand su home/camere/contatti:
   accanto agli <a class="btn"> che invece rendono Inter — stesso bottone, due font. */
.btn, .ms-btn, button.btn,
input[type="submit"], input[type="button"]{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* [C2] CHECKOUT — le due fasce vuote sopra/sotto "Riepilogo dell'ordine".
   MISURATO: la barra del titolo ha margin-top 16px + padding 20px 0 + un
   border-top E un border-bottom propri; sommati al padding 16px della card
   danno 32px di vuoto sopra e altrettanti sotto. Non erano :empty, per questo
   il tentativo precedente non le prendeva. Si tocca solo la cromatura della
   barra: il pannello resta espandibile. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__title{
  margin-top:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:44px;              /* il toggle resta un tap target valido */
  display:flex; align-items:center;
}

/* [C3] SUB-HERO di carrello e checkout: stesso ritmo delle altre 7 superfici.
   Erano 118px di padding-top contro gli 88 del canonico, e sotto i 640px
   .subhero__inner ne sommava altri 40 (23,4 + 40 = 63,4 invece di 46).
   ⚠️ Il secondo blocco è obbligatorio: senza, i due anelli si sommano. */
body.woocommerce-cart .subhero,
body.woocommerce-checkout .subhero{
  min-height:0 !important;
  padding-top:clamp(88px,11vw,120px) !important;
  padding-bottom:clamp(46px,6vw,84px) !important;
}
@media(max-width:640px){
  body.woocommerce-cart .subhero__inner,
  body.woocommerce-checkout .subhero__inner{ padding-bottom:0 !important; }
}

/* [C4] Anello di focus da tastiera: uno solo, su tutto il sito.
   Serviva un anello unico dichiarato nel file che raggiunge sia le vetrine sia
   le superfici WooCommerce. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--red,#D41119);
  outline-offset:3px;
  border-radius:2px;
}

/* [C5] Red-discipline: il rosso resta su CTA e prezzi.
   Il prezzo BARRATO non è un prezzo attivo → grigio, non rosso. */
.ms-boxcard__price del, .ms-boxcard__price del .amount,
.ms-fh__price del, .ms-fh__price del .amount,
.ms-card__price del, .ms-card__price del .amount,
.price del, .price del .amount{
  color:var(--muted,#6B6459) !important;
  font-size:.62em;
  font-weight:400;
}

/* [C6] Placeholder: un solo colore, e opacity 1 (Firefox la abbassa da sé). */
input::placeholder, textarea::placeholder{
  color:var(--muted,#6B6459) !important;
  opacity:1;
}

/* [C7] Campi form: 16px sotto i 1024px, non solo sotto i 640.
   Sotto i 16px iOS fa zoom automatico al focus: il guard esisteva ma si fermava
   a 640px e lasciava i campi a 13-15px sul tablet. */
@media(max-width:1024px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{ font-size:16px; }
}

/* [C8] Card prodotto: raggio 2px come ogni altra superficie del sito
   (era l'unica a 3px, su 59 superfici misurate). */
.woocommerce ul.products li.product.ms-card{ border-radius:2px; }

/* [C9] Card Box: token invece di esadecimali scritti a mano. */
.ms-boxcard{
  background:var(--paper,#fff);
  border-color:var(--border,#E3DBCE);
}

/* ============================================================================
   COERENZA — lotto 2: IL CAMPO DI TESTO. Un ruolo, un aspetto.
   ============================================================================
   MISURATO: 12 altezze distinte per lo stesso ruolo — 33,5 / 44 / 46 / 50 /
   52,1 / 52,8 / 53,2 / 56 / 56,4 / 56,8 / 59,6 px — e 3 corpi diversi
   (14,7 / 15,2 / 16). Nessuna di queste differenze è una scelta: nascono da
   clamp e padding scritti a mano superficie per superficie.
   Canonico: min-height 52px, padding in em (così scala col testo), 16px di
   corpo (sotto i 16 iOS fa zoom al focus), bordo e raggio già di sistema.
   ========================================================================== */
.field input:not([type=checkbox]):not([type=radio]),
.field select,
.field textarea,
.bk-field input,
.bk-field select,
.news__form input,
.variations select,
.buybar .variations select,
.cart__coupon .input-text,
.woocommerce-cart .coupon .input-text,
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-select__select{
  min-height:52px;
  padding:.8em 1em;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.35;
  border:1px solid var(--border,#E3DBCE);
  border-radius:2px;
  background:var(--paper,#fff);
  color:var(--ink,#23211D);
  box-sizing:border-box;
}
.field textarea, .bk-field textarea{ min-height:132px; }

/* focus: lo stesso anello del resto del sito, niente sei trattamenti diversi */
.field input:focus, .field select:focus, .field textarea:focus,
.bk-field input:focus, .news__form input:focus,
.variations select:focus, .cart__coupon .input-text:focus,
.wc-block-components-text-input input:focus{
  outline:2px solid var(--red,#D41119);
  outline-offset:2px;
  border-color:var(--ink,#23211D);
}

/* label del campo: una sola tipografia */
.field label, .bk-field label, .variations label, .buybar .variations label{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted,#6B6459);
}

/* ---- lotto 2b: i residui misurati (da 12 varianti a 7, questi sono i 7) ----
   camere 57px = input[type=date] con un padding proprio (coherence.css:2215);
   carrello 46 e 52/14,72 = coupon e campo quantità; checkout 42 = il selettore
   quantità dei Blocks; PDP 56 = la select del formato. */
.field input[type="date"],
.bk-field input[type="date"]{
  min-height:52px !important;
  padding-top:.8em !important; padding-bottom:.8em !important;
}
.woocommerce-cart .coupon .input-text,
.cart__coupon .input-text{ min-height:52px !important; }
.quantity input.qty,
.crow__qty input.qty,
.buybar .quantity input.qty{
  min-height:52px !important;
  font-size:16px !important;
  border-radius:2px;
}
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector input{ min-height:44px; font-size:16px; }
.variations select,
.buybar .variations select,
.single-product .variations select{ min-height:52px !important; }

/* ============================================================================
   AUDIT VISIVO 2026-07-27 — P1 a rischio nullo/basso
   Ogni voce ha il numero misurato che la giustifica.
   ========================================================================== */

/* [V1] /ristoranti/ @390 — il terzo bottone della card Cerami diventava alto
   178,7px contro i 48 degli altri due, usciva dal fondo della card e la scritta
   veniva tagliata dall'overflow:hidden (87px di spill). */
@media(max-width:640px){
  .ms-place-card__cta .btn:last-child{ flex:0 0 auto !important; }
}

/* [V2] /camere/ @390 — la foto della room era 416px dentro una card da 348:
   68px (16,3%) tagliati solo a destra, il soggetto scentrato. È la traccia a px
   fissi del breakpoint mobile senza min-width:0 sui grid item. */
.room{ grid-template-columns:minmax(0,1fr); }
.room > *{ min-width:0; }
.room__media img{ width:100%; max-width:100%; }

/* [V3] /shop/ e categorie — la toolbar del catalogo (pill filtri, "Visualizzazione
   di N risultati", select Ordinamento) era l'unica fascia fuori dal gutter:
   left=0 e right=viewport mentre le card stavano a 144/38/20. */
.ms-shopfilters,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
  box-sizing:border-box;
}
/* il -4px serviva a non far tagliare il focus-ring della prima pill: si ottiene
   con scroll-padding, senza spostare la pill fuori dal gutter */
.ms-shopfilters{ margin-left:0; scroll-padding-inline-start:4px; }

/* [V4] Pagine CATEGORIA — la nav restava color ink sopra una hero fotografica
   luminosa: voci di menu a 1,62-2,24:1 di contrasto (illeggibili) contro il
   16,76:1 dello shop, che il fix aveva già coperto. */
body.tax-product_cat .nav:not(.scrolled) .nav__menu a,
body.tax-product_cat .nav:not(.scrolled) .nav__logo ~ * a{ color:var(--cream,#F5F0E8) !important; }
body.tax-product_cat .nav:not(.scrolled) .nav__burger span{ background:var(--cream,#F5F0E8) !important; }

/* [V5] PDP VARIABILE — campo quantità e CTA si toccavano (gap 0px), mentre sul
   prodotto semplice il gap è 12px. Causa: .woocommerce-variation-add-to-cart è
   display:block e non eredita il flex del form. */
.woocommerce-variation-add-to-cart{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
/* e a 390 la CTA era 222px dentro una colonna da 350: 128px di crema morta */
@media(max-width:600px){
  .woocommerce-variation-add-to-cart .single_add_to_cart_button{ flex:1 1 100%; width:100%; }
}

/* [V6] CHECKOUT @1440 — la scheda riepilogo aveva DUE cornici concentriche a 1px
   distanti 1px, con raggi (3px e 5px) e colori diversi. Si tiene solo quella
   interna del blocco, che è già completa. */
body.woocommerce-checkout .wc-block-checkout__sidebar{
  border:0; background:transparent; padding-left:0; padding-right:0; border-radius:0;
}

/* [V7] /contatti/ @768 — le card sede e "Il modo più veloce" restavano a una
   colonna larga 691px con il contenuto fermo a 340-383px: metà card vuota, ×7. */
@media(min-width:640px){
  .sedi{ grid-template-columns:repeat(2,1fr); }
  .quick{ grid-template-columns:repeat(3,1fr); }
}

/* [V8] /agriturismo/ @768 — griglie a 2 colonne con un numero dispari di card:
   l'ultima restava sola e lasciava un buco di 354×572px; e nelle camere la terza
   card andava a piena larghezza con una foto alta il doppio delle altre. */
@media(min-width:700px) and (max-width:1023px){
  .svc > *:last-child{ grid-column:1 / -1; }
  .rooms{ grid-template-columns:repeat(2,1fr); }
  .rooms > *:last-child{ grid-column:1 / -1; }
  .rooms > *:last-child .ms-room-card__img{ aspect-ratio:21/9; }
  .ms-service-card__img{ aspect-ratio:16/10; }
}

/* ---- correzioni ai tre fix che non avevano attecchito (misurate) --------- */

/* [V2b] .room__media ha width:416px SCRITTA, dentro una card da 350: azzerare
   le colonne della griglia non bastava. */
.room__media{ width:100% !important; max-width:100% !important; }
.room__media img{ width:100% !important; max-width:100% !important; }

/* [V3b] Il padding c'era già, ma mancava il contenitore: a 1440 il gutter
   canonico è 144 (80 di centratura + 64 di padding), non 64. Stessa formula
   di ul.products, che è l'anello a cui la toolbar deve allinearsi. */
.ms-shopfilters,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  max-width:var(--container,1280px);
  margin-inline:auto;
}

/* [V8b] .svc è una griglia a 12 colonne e le card usano span espliciti che
   battevano grid-column:1/-1. Serve la stessa specificità con !important. */
@media(min-width:700px) and (max-width:1023px){
  .svc > *:last-child{ grid-column:1 / -1 !important; }
  .rooms > *:last-child{ grid-column:1 / -1 !important; }
}

/* [V3c] Residui: il conteggio risultati non prendeva il contenitore perché il
   selettore aveva il prefisso .woocommerce, che su /shop non avvolge quel nodo;
   e la prima pill restava a 4px per un vecchio padding-left di compensazione. */
.woocommerce-result-count,
.woocommerce-ordering{
  max-width:var(--container,1280px);
  margin-inline:auto;
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
  box-sizing:border-box;
}
.ms-shopfilters{ padding-left:clamp(20px,5vw,64px) !important; }
.ms-shopfilters .ms-fpill:first-child{ margin-left:0; }

/* [V3d] La toolbar del catalogo, per davvero.
   CAUSA misurata: .woocommerce-result-count è display:inline-flex, e su un
   elemento inline `margin-inline:auto` NON centra — quindi max-width:1280 non
   produceva nulla e il testo restava a 64px invece che a 144.
   Soluzione senza centratura: il padding porta dentro anche la quota di
   contenitore. A 1440 → (1440-1280)/2 + 64 = 144; sotto i 1280 il secondo
   termine è negativo e vince il clamp, quindi 38 a 768 e 20 a 390. */
.ms-shopfilters,
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:max(clamp(20px,5vw,64px), calc((100% - var(--container,1280px)) / 2 + clamp(20px,5vw,64px))) !important;
  padding-right:max(clamp(20px,5vw,64px), calc((100% - var(--container,1280px)) / 2 + clamp(20px,5vw,64px))) !important;
  box-sizing:border-box;
}

/* ============================================================================
   AUDIT VISIVO — lotto P2 (2026-07-27). Contrasti misurati, non stimati.
   ========================================================================== */

/* [P2-1] HOME — i numeri 01…05 delle card sparivano su 3 card su 5: le card
   hanno uno scrim in basso (per questo i titoli si leggono) ma niente in alto,
   dove sta il numero. Misurato: card 02 = 2,09:1 · card 03 = 1,52:1 ·
   card 04 = 2,41:1 (soglia AA per 14,4px = 4,5:1; sotto 3:1 non si vede). */
.world{ position:relative; }
.world::before{
  content:""; position:absolute; inset:0 0 auto 0; height:46%;
  background:linear-gradient(180deg, rgba(18,16,14,.58), transparent);
  pointer-events:none; z-index:1;
}
.world__n, .world__t{ position:relative; z-index:2; }

/* [P2-2] HOME @1440 — newsletter e footer sono lo stesso identico nero senza
   divisore: 1059px di scuro ininterrotto e la newsletter perde identità. */
.foot{ border-top:1px solid rgba(245,240,232,.12); }
@media(min-width:1024px){ .section.news{ padding-bottom:clamp(64px,7vw,96px); } }

/* [P2-3] Il carrello flottante copriva la riga finale del footer (il credit
   NEXUMA cadeva dentro il box del bottone). Si compensa solo quando c'è. */
body:has(.ms-cartbtn:not(.is-empty)) .foot{ padding-bottom:104px; }

/* [P2-4] /agriturismo/ — badge "SOLO AGRITURISMO": bianco su ocra = 3,01:1 a
   9,92px. Serve 4,5:1. */
.ms-badge{ background:#8A5A22; color:#fff; font-size:11px; }

/* [P2-5] SHOP — il prezzo promo era SOTTOLINEATO in rosso: sembra un link, ed
   era l'unico prezzo sottolineato del sito. E il prezzo barrato ereditava due
   volte il moltiplicatore em, finendo a 8,92px. */
.woocommerce ins, .ms-boxcard ins, .ms-card__price ins{ text-decoration:none; background:none; }
.ms-boxcard del, .ms-boxcard del .woocommerce-Price-amount, .ms-boxcard del bdi,
.ms-card__price del bdi{ font-size:.875rem; }

/* [P2-6] CARRELLO — "Aggiorna carrello" disabilitato era a 1,74:1: sotto anche
   la soglia che si concede a un controllo inattivo. */
form.woocommerce-cart-form button[name="update_cart"][disabled]{
  opacity:1; color:#6B6459; border-color:#E3DBCE; background:transparent;
}

/* [P2-7] PAGINE LEGALI — non usavano il gutter unificato: testo a 30px @390 e
   a 24px @768 contro i 20 e 38,4 di logo e footer. */
/* [rimossa] prima versione del P2-7: selettore .page-content NUDO, si applicava
   anche al checkout. Sostituita dal blocco piu' sotto. */

/* [P2-8] CHECKOUT @1440 — le due colonne si toccavano: il bordo destro dei
   campi era esattamente sul bordo sinistro del riepilogo (gap 0px). */
@media(min-width:1024px){
  body.woocommerce-checkout .wc-block-checkout__main{ padding-right:40px; }
}

/* [P2-9] /camere/ @768 — il pannello di prenotazione arrivava a 6px dai bottoni
   dell'hero (a 390 sono 14px, a 1440 32: il tablet era il caso peggiore). */
@media(max-width:1023px){ .hero__actions{ margin-bottom:32px; } }

/* [P2-10] /menu/ @390 — il selettore sede è uno scroller con il 42% fuori
   schermo e nessun segnale che si possa scorrere. */
@media(max-width:640px){
  .ms-loctabs{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    scroll-snap-type:x proximity;
  }
  .ms-loctab{ scroll-snap-align:start; }
}

/* [P2-11] SHOP @390 — nella card il prezzo e il "+" non stavano più sulla stessa
   riga: 131px utili contro 84+8+46 richiesti. */
@media(max-width:430px){
  .woocommerce ul.products li.product{ padding-inline:14px; }
  .woocommerce ul.products li.product .ms-card__f{ flex-wrap:nowrap; gap:8px; justify-content:space-between; }
  .woocommerce ul.products li.product .price{ font-size:1rem; }
}

/* [P2-12] HERO SHOP e CATEGORIA su mobile/tablet — il logo e l'occhiello stanno
   sopra la foto senza velo: marchio a 2,32-2,74:1 e occhiello a 2,16:1. */
@media(max-width:900px){
  .ms-fh__photo::after, .ms-shop-hero__bg::after{
    content:""; position:absolute; inset:0 0 auto 0; height:150px;
    background:linear-gradient(180deg, rgba(18,16,14,.60), transparent);
    pointer-events:none;
  }
  /* ⚠️ NIENTE position:relative qui: .ms-shop-hero__bg e .ms-fh__photo sono già
     absolute, quindi sono già contenitore per il proprio ::after. Metterlo li
     riportava nel flusso e mandava il titolo della categoria a x=220 (@390) e
     x=507 (@768) invece di 20/38. Errore introdotto e corretto il 2026-07-27. */
}
.ms-shop-hero__eyebrow{ text-shadow:0 1px 12px rgba(18,16,14,.7); }

/* [P2-13] SHOP — le intestazioni delle Box erano diverse fra loro.
   MISURATO: .ms-boxfeat padding 28/26 e titolo 29,6px · .ms-boxsm padding 19/17
   e titolo 19,52px. È una gerarchia voluta e a 1440 funziona (645px contro 489).
   Ma a 390 e 768 le card hanno la STESSA larghezza (350 e 691) e sono impilate
   in colonna singola: lì la gerarchia non è più leggibile e restano solo due
   card costruite in modo diverso. Si uniformano dove sono impilate. */
@media(max-width:1023px){
  .ms-boxsec .ms-boxcard__body{ padding:26px 28px; }
  .ms-boxsec .ms-boxcard h3{ font-size:29.6px; line-height:1.12; }
  .ms-boxsec .ms-boxcard__occh{ font-size:.72rem; letter-spacing:.14em; }
}

/* [P2-7b] Legali: colonna di lettura a 760px, allineata al gutter del sito.
   ⚠️ NON si puo' scoprire dalla classe del body: sul checkout il body e' solo
   "page-template-default", SENZA woocommerce-checkout — un :not(.woocommerce-checkout)
   non lo esclude e il blocco Woo si ritrova max-width 760 (misurato: contenuto a
   632px, Woo Blocks passa a layout "is-small" e IMPILA le due colonne).
   Si esclude in base al CONTENUTO: se dentro c'e' un blocco WooCommerce, questa
   non e' una pagina di testo. Errore introdotto e corretto il 2026-07-27. */
.page-content:not(:has(.wp-block-woocommerce-checkout)):not(:has(.wp-block-woocommerce-cart)):not(:has(.woocommerce)){
  max-width:calc(760px + 2 * clamp(20px,5vw,64px));
  margin-inline:auto;
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
  box-sizing:border-box;
}


/* [P2-7c] Il cap da 760px va ANNULLATO dove la pagina ospita un blocco
   WooCommerce. Non basta non applicarlo: due regole preesistenti hanno
   `.page-content` NUDO in testa (una e' l'elenco delle pagine legali, dove il
   primo selettore ha perso lo scope) e continuano a imporlo.
   MISURATO: senza questo, il blocco checkout resta a 632px, Woo Blocks passa al
   layout "is-small" e IMPILA le due colonne su un desktop da 1440. */
.page-content:has(.wp-block-woocommerce-checkout),
.page-content:has(.wp-block-woocommerce-cart),
.page-content:has(.woocommerce){
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ============================================================================
   AVVISI WOOCOMMERCE — .woocommerce-error non era mai stato vestito
   ============================================================================
   Tutte le regole per .woocommerce-error stanno in woocommerce-consistency.css,
   che NON è mai caricato (verificato: 0 byte sulla pagina). E il fix dell'icona
   in coherence.css:1758-1765 copre solo .woocommerce-message e .woocommerce-info.
   Risultato: sull'errore il pallino rosso finiva SOPRA la prima lettera e il box
   usciva a tutta larghezza mentre la pagina ha il gutter a 20px.
   ========================================================================== */
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.ms-shared .woocommerce-error{
  /* stesso contenitore del resto della pagina. max-width da solo non basta:
     sotto i 1280 il box resta a piena larghezza e tocca i bordi. Serve la
     larghezza col gutter già sottratto. */
  width:min(100% - 2 * clamp(20px,5vw,64px), var(--container,1280px));
  margin-inline:auto;
  margin-block:clamp(16px,3vw,28px);
  box-sizing:border-box;
  /* il gutter interno lascia posto all'icona senza sovrapporla */
  padding:16px 20px 16px 52px;
  position:relative;
  background:var(--cream-card,#FBF8F2);
  border:1px solid var(--red,#D41119);
  border-left-width:3px;
  border-radius:2px;
  list-style:none;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink,#23211D);
}
/* il pallino con il punto esclamativo: incolonnato nel gutter, non sul testo */
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before,
body.ms-shared .woocommerce-error::before{
  left:20px;
  top:18px;
  margin:0;
  color:var(--red,#D41119);
}
body.ms-shared .woocommerce-error li{ list-style:none; margin:0; }
/* il link dentro l'avviso segue il sito, non il default di WooCommerce */
body.ms-shared .woocommerce-error a{
  color:var(--red,#D41119);
  text-decoration:underline;
  text-underline-offset:.18em;
  font-weight:600;
}
body.ms-shared .woocommerce-error a:hover{ color:var(--red-hover,#B00E15); }

/* =============================================================================
   ALTEZZA DELLA BARRA FISSA — UNA SOLA VERITÀ   (NEXUMA, 2026-08-11)

   Prima di oggi la stessa misura era scritta in sei posti che non si parlavano:
   36 (topbar) · 68 (altezza reale della nav) · 76 (--nav-h in site.css) ·
   96 (padding della colonna hero) · 112 (--nav-h su .ms-shared) · 56 (il
   padding-top che la regola Woo dava per sbaglio al <body>).
   Il risultato si vedeva: sotto il banner nero compariva una striscia chiara,
   e togliendola veniva fuori il difetto che nascondeva — l'occhiello dell'hero
   dello shop finiva SOTTO la nav, perché 96 < 104.

   Qui la misura si dichiara una volta e le altre regole la derivano.
   --ms-nav-h è l'altezza della nav nello stato PIÙ ALTO (non "scrolled":
   quando si arrotola diventa 56, e un contenuto che sta bene a 68 sta bene
   anche a 56).
   ============================================================================= */
:root{
  --ms-nav-h: 68px;
  --ms-chrome-h: calc(var(--ms-topbar-h, 36px) + var(--ms-nav-h));   /* = 104px */
}

/* Hero affiancato (da 901px in su): la colonna del testo deve partire SOTTO la
   barra fissa. Sotto i 900px l'hero si impila con la foto in cima e la nav ci
   passa sopra di proposito, quindi lì non si tocca niente. */
@media (min-width: 901px){
  .ms-fh__col{
    padding-top: max( clamp(96px, 12vh, 128px), calc(var(--ms-chrome-h) + 24px) );
  }
}

/* =============================================================================
   CHECKOUT — DISTACCO FRA LE DUE COLONNE   (NEXUMA, 2026-08-11)

   CAUSA, non sintomo. WooCommerce separa modulo e riepilogo con un
   `padding-left:2.2641%` su `.wc-block-components-sidebar`: è quello — e solo
   quello — a fare da corridoio fra le due colonne. Alla riga 1182 di questo
   file il tema lo sostituisce con `padding:clamp(18px,2.2vw,26px)` per dare al
   riepilogo l'aspetto di una scheda crema con bordo. La scheda viene bene, ma
   il corridoio sparisce: il bordo del riepilogo finisce appoggiato ai campi del
   modulo (misurato: ~3px fra i due riquadri a 1200px di viewport).

   Qui il distacco si ripristina come MARGINE (fuori dal bordo, quindi non tocca
   l'aspetto della scheda) e la larghezza delle due colonne si riduce di metà
   corridoio ciascuna, così la somma resta esattamente 100% e nessuna delle due
   va a capo:  (65% − g/2) + (35% − g/2) + g = 100%.

   Solo da 783px in su: sotto i 782px WooCommerce impila le colonne
   (`flex-direction:column`) e un margine laterale sarebbe spazio sprecato.
   ============================================================================= */
@media (min-width: 783px){
  body.woocommerce-checkout .wc-block-components-sidebar-layout{
    --ms-checkout-gap: clamp(24px, 2.6vw, 44px);
  }
  body.woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-main{
    width: calc(65% - (var(--ms-checkout-gap) / 2));
  }
  body.woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-sidebar{
    width: calc(35% - (var(--ms-checkout-gap) / 2));
    margin-left: var(--ms-checkout-gap);
  }
}
