/* Slider: gruppo Gutenberg con classe mm-slider (vedi slider.js) */
.mm-slider-wrap { position: relative; }
/* slider.js sposta .mm-slider dentro .mm-slider-wrap: per hero/servizi il wrapper diventa il
   figlio diretto di .entry-content al posto del gruppo alignfull, quindi deve restare a tutta
   larghezza. Il carosello prodotti (dentro .mm-products) resta invece nella colonna standard. */
.entry-content > .mm-slider-wrap { max-width: none; margin-inline: calc(-1 * var(--mm-gutter)); }
.mm-slider { display: flex !important; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mm-slider::-webkit-scrollbar { display: none; }
/* Gruppo con layout predefinito/vincolato: WordPress avvolge le slide in un inner-container,
   che qui sparisce dal layout (le slide tornano elementi flex del gruppo). */
.mm-slider > .wp-block-group__inner-container { display: contents; }
.mm-slider > *, .mm-slider > .wp-block-group__inner-container > * { flex: 0 0 100%; max-width: none !important; margin: 0 !important; scroll-snap-align: start; }
.mm-slider__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; transform: translateY(-50%); }
.mm-slider__btn svg { width: 20px; height: 20px; }
.mm-slider__btn--prev { left: 16px; }
.mm-slider__btn--next { right: 16px; }
/* Pausa/riprendi dell'autoplay (slider.js): stesso pulsante delle frecce, in basso al centro. */
.mm-slider__btn--pause { top: auto; bottom: 16px; left: calc(50% - 22px); transform: none; }

/* Sezioni riusabili */
/* padding-inline: sotto i 1150px circa (--mm-wrap + i due margin-inline:auto sotto) il
   max-width dei figli smette di generare margine automatico e il testo tocca il bordo dello
   schermo (bug mobile). Il padding qui garantisce sempre almeno --mm-gutter ai lati; non serve
   scontarlo dal max-width dei figli perché sotto quella soglia sono comunque larghi 100%. */
.mm-section { padding-block: 80px; padding-inline: var(--mm-gutter); }
.mm-section > * { max-width: var(--mm-wrap); margin-inline: auto; }
/* Etichetta piccola sopra i titoli di sezione (Shop, Magazine, Premi): oliva, serif, non maiuscolo */
.mm-eyebrow { margin: 0 0 8px; color: var(--mm-olive-dark); font: 400 1rem var(--mm-serif); }
/* Titolo di sezione in stile "display": Poppins bold maiuscolo (Shop, Magazine, Premi).
   I titoli grandi in serif (hero, "Ti aspettiamo", "Io sono arte...", "Il regalo perfetto...")
   restano lo stile h2 di base, senza questa classe. */
.mm-title { color: var(--mm-ink); font: 700 1.4rem var(--mm-sans); text-transform: uppercase; letter-spacing: .02em; }
.mm-section .wp-block-buttons { margin-top: 30px; }
/* Variante pulsante nero (es. CTA di servizio-clienti), classe sul blocco wp:button core */
.mm-button-dark .wp-block-button__link { background: #000; color: #fff; }
.mm-button-dark .wp-block-button__link:hover { background: #292929; color: #fff; }

/* Hero: slide a tutta larghezza con testo centrato, frecce in basso al centro */
.mm-hero .wp-block-cover { min-height: 100vh; padding: 180px 8vw 100px; }
/* Velatura locale solo dietro al testo (non sull'intera foto, che resta chiara come sul live):
   il background è dell'inner-container stesso, quindi dipinge dietro al testo senza bisogno
   di pseudo-elementi/z-index. dimRatio della cover torna a 40 su tutte le slide. */
.mm-hero .wp-block-cover__inner-container {
  max-width: 640px; margin-inline: auto; color: #fff; text-align: center;
  padding: 32px 40px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, 0) 75%);
}
.mm-hero h2 { color: #fff; }
.mm-hero .mm-eyebrow { color: #fff; font: 700 1rem var(--mm-sans); text-transform: uppercase; letter-spacing: .04em; }
.mm-hero .wp-block-buttons { justify-content: center; }
/* slider.js mette i pulsanti come FRATELLI della track dentro .mm-slider-wrap, non come suoi
   discendenti: ".mm-hero .mm-slider__btn" non li trova mai. Li seleziona il fratello successivo.
   Il centraggio in basso è solo da tablet in su: sotto i 768px le frecce restano ancorate ai
   bordi come negli altri caroselli (regola generica già in @media max-width:767px). */
@media (min-width: 768px) {
  .mm-hero ~ .mm-slider__btn { top: auto; bottom: 32px; transform: none; }
  .mm-hero ~ .mm-slider__btn--prev { left: calc(50% - 52px); right: auto; }
  .mm-hero ~ .mm-slider__btn--next { left: calc(50% + 8px); right: auto; }
  /* hero in autoplay: pulsante pausa al centro, frecce ai suoi lati */
  .mm-slider--autoplay.mm-hero ~ .mm-slider__btn--prev { left: calc(50% - 74px); }
  .mm-slider--autoplay.mm-hero ~ .mm-slider__btn--next { left: calc(50% + 30px); }
}
/* I pulsanti dell'hero finiscono sul bordo bianco curvo qui sotto (la pausa sempre, al centro):
   sfondo scuro pieno come nello slider servizi, così icona e cerchio restano a contrasto sul bianco. */
.mm-hero ~ .mm-slider__btn { background: rgba(8, 8, 8, .7); }
/* Bordo bianco curvo in fondo all'hero, come sul live (nice-to-have via maschera CSS).
   Raggio verticale esplicito invece di sporgere oltre il viewport (causerebbe overflow-x). */
.mm-slider-wrap:has(.mm-hero)::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 60px;
  background: #fff; border-radius: 50% 50% 0 0 / 60px 60px 0 0; pointer-events: none;
}

/* Media & Text con foto a tutta altezza (servizi, contact hero, arte, regalo): opzione "Riempi"
   del core (imageFill -> .is-image-fill-element), che rende la foto assoluta e in cover dentro
   la figure alta quanto la riga. Qui solo l'altezza minima delle righe. */

/* Slider servizi: immagine a sinistra, contenuto centrato su bianco. */
.mm-services .wp-block-media-text { min-height: 600px; }
.mm-services .wp-block-media-text__content {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 60px 8vw; margin: 0;
}
.mm-services .wp-block-buttons { justify-content: center; }
/* La freccia "next" cade sul pannello di testo bianco: lo sfondo grigio chiaro di base
   (nero al 35%) non basta contro il bianco. Sfondo scuro pieno per entrambe le frecce
   (stesso selettore "fratello successivo" del punto 1). */
.mm-services ~ .mm-slider__btn { background: rgba(8, 8, 8, .7); }

/* Hero servizio clienti / consumatore / rivenditore: foto a sinistra a piena altezza, testo (e
   blocco "Scrivici" al posto del modulo, non ancora ricostruibile) a destra, allineato a sinistra
   come sul live (non centrato: a differenza di .mm-services, qui il live non centra né il testo
   né i pulsanti). */
.mm-contact-hero .wp-block-media-text { min-height: 480px; margin-bottom: 0; }
.mm-contact-hero .wp-block-media-text__content { display: flex; flex-direction: column; justify-content: center; padding: 60px 8vw; margin: 0; }
.mm-contact-hero .wp-block-buttons { margin-top: 10px; }

/* Citazione */
.mm-quote { text-align: center; font-family: var(--mm-serif); font-size: 1.2em; }
.mm-quote__author { color: var(--mm-olive-dark); font: 600 .9rem var(--mm-sans); letter-spacing: .1em; text-transform: uppercase; }

/* Shop: fascia grigio chiaro, eyebrow+titolo a sinistra e categorie a cerchi a destra */
.mm-shop { background: var(--mm-light); }
.mm-shop-top { align-items: center; margin-bottom: 20px; }
.mm-cats { display: flex !important; flex-wrap: wrap; gap: 20px; margin: 0; }
.mm-cats figure { width: 70px; margin: 0; text-align: center; }
.mm-cats img { display: block; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.mm-cats figcaption { margin-top: 8px; font: 600 .7rem var(--mm-sans); text-transform: uppercase; }

/* Premi: loghi in griglia 5x2 */
.mm-awards { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 30px 20px; margin-block: 40px; text-align: center; }
.mm-awards figure { margin: 0; text-align: center; }
.mm-awards img { max-height: 110px; width: auto; }
.mm-awards figcaption { font: 600 .75rem var(--mm-sans); text-transform: uppercase; }

/* Carosello prodotti: shortcode avvolto in .mm-products, trasformato in carosello da slider.js
   (selettore esteso in slider.js). Card bianche arrotondate, prezzo in basso a sinistra,
   pulsante carrello rotondo in basso a destra (styling di base; la scheda completa è fase 2). */
.mm-products { position: relative; margin-top: 40px; }
.mm-products ul.products {
  display: flex !important; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; list-style: none; margin: 0; padding: 4px;
}
.mm-products ul.products::-webkit-scrollbar { display: none; }
.mm-products ul.products::before, .mm-products ul.products::after { display: none !important; }
.mm-products ul.products li.product {
  position: relative; flex: 0 0 calc(25% - 15px); scroll-snap-align: start;
  float: none !important; width: auto !important; margin: 0 !important; text-align: center;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  padding: 20px 20px 64px;
}
.mm-products ul.products li.product img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; }
.mm-products ul.products li.product a { text-decoration: none; }
.mm-products ul.products .woocommerce-loop-product__title { font: 400 1rem var(--mm-serif); }
.mm-products ul.products .price { position: absolute; left: 20px; bottom: 20px; font: 700 .95rem var(--mm-sans); color: var(--mm-ink); }
.mm-products ul.products a.button {
  position: absolute; right: 20px; bottom: 16px; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; background: var(--mm-olive-dark); color: #fff; font-size: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.mm-products ul.products a.button::after { content: "+"; font-size: 22px; }
.mm-products ul.products a.button:hover { background: var(--mm-olive-darker); }
@media (min-width: 1240px) {
  .mm-products .mm-slider-wrap { margin-inline: 44px; }
  .mm-products .mm-slider__btn--prev { left: -44px; }
  .mm-products .mm-slider__btn--next { right: -44px; }
}

/* "Io sono arte che si versa": fascia lilla chiaro, foto a destra (colore campionato dal live) */
.mm-art { background: #EEEDF5; }
.mm-art .wp-block-media-text { min-height: 480px; }

/* Magazine + regalo: due colonne, lista articoli senza immagine con separatori */
.mm-magazine-regalo { gap: 60px; }
.mm-posts-list { list-style: none; margin: 24px 0 0; padding: 0; }
.mm-posts-list li { border-top: 1px solid #e5e5e5; padding-block: 16px; }
.mm-posts-list li:first-child { border-top: 0; padding-top: 0; }
.mm-posts-list .wp-block-latest-posts__post-title { display: block; font: 400 1.1rem var(--mm-serif); text-decoration: none; }
.mm-regalo { min-height: 280px; }
.mm-regalo .wp-block-media-text__media img { border-radius: 8px; }
.mm-regalo .wp-block-heading { font-size: 1.3rem; }

/* Pagine prodotto (il frantoio, il nostro olio, singoli oli): hero chiaro con testo + foto
   prodotto, box "note di gusto" con bordo, testo guida più grande, firma citazione. */
/* padding-inline: .mm-tasting non ha (a differenza di .mm-section) un elemento interno con
   max-width+margin:auto, quindi senza questo il testo tocca il bordo a ogni larghezza, non
   solo sotto 1150px (bug trovato verificando il punto 3 della revisione: stesso sintomo,
   contenitore diverso). */
.mm-tasting { background: var(--mm-light); padding-inline: var(--mm-gutter); }
.mm-tasting .wp-block-column:last-child { display: flex; align-items: center; justify-content: center; }
.mm-tasting img { max-width: 340px; }
.mm-highlight { margin: 20px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--mm-olive); font-weight: 600; }
.mm-lead { font: 400 1.5rem/1.4 var(--mm-serif); color: var(--mm-charcoal); }
.mm-signature { display: block; margin-top: 12px; font: 600 .8rem var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-olive-dark); }

/* Colore per tipo di olio, campionato dal live (stesso valore per lo sfondo della riga su
   il-nostro-olio e per l'hero della pagina di dettaglio, verificato via DOM sul live: sono
   identici). --mm-oil-text è scuro (--mm-ink) di default; passa a bianco dove il fondo non
   basta per l'AA su testo normale con inchiostro (solo Fumo: 3.84:1 con --mm-ink contro
   5.21:1 con bianco — gli altri 6 restano tra 6.9:1 e 14.2:1 con --mm-ink). */
.mm-oil--fruttato-intenso { --mm-oil: #c0c37b; --mm-oil-text: var(--mm-ink); }
.mm-oil--fruttato-medio   { --mm-oil: #c9c1c6; --mm-oil-text: var(--mm-ink); }
.mm-oil--biologico        { --mm-oil: #dadbbc; --mm-oil-text: var(--mm-ink); }
.mm-oil--denocciolato     { --mm-oil: #a09a50; --mm-oil-text: var(--mm-ink); }
.mm-oil--aromatici        { --mm-oil: #b5c6c3; --mm-oil-text: var(--mm-ink); }
.mm-oil--grand-cru        { --mm-oil: #c6a684; --mm-oil-text: var(--mm-ink); }
.mm-oil--fumo             { --mm-oil: #955f50; --mm-oil-text: #fff; }

.mm-tasting[class*="mm-oil--"] { background: var(--mm-oil); }
.mm-tasting[class*="mm-oil--"] :is(h1, h2, p) { color: var(--mm-oil-text); }
.mm-tasting[class*="mm-oil--"] .mm-highlight { border-left-color: var(--mm-oil-text); }

/* Citazione su foto (es. "i segreti della molitura a regola d'arte"): un'unica cover a tutta
   larghezza dietro sia alla galleria di foto sia al testo (due colonne nello stesso
   inner-container, come sul live: un solo background-image di sezione dietro a entrambe),
   testo bianco su cover scura. */
.mm-cover-quote .wp-block-cover { min-height: 560px; }
.mm-cover-quote .wp-block-cover__inner-container { width: 100%; max-width: none; padding: 48px 6vw; color: #fff; }
.mm-cover-quote h2, .mm-cover-quote h3, .mm-cover-quote .mm-lead { color: #fff; }
.mm-cover-quote .mm-signature { color: #fff; }
.mm-story-gallery .wp-block-image { margin: 0 0 16px; }
.mm-story-gallery .wp-block-image:last-child { margin-bottom: 0; }

/* Fascia foto a tutta larghezza con titolo centrato, con o senza pulsante video (es. "Io sono un
   Capatosta", "Un ponte tra culture"). */
.mm-video-band .wp-block-cover { min-height: 480px; }
.mm-video-band .wp-block-cover__inner-container { max-width: 640px; margin-inline: auto; color: #fff; text-align: center; }
.mm-video-band h2, .mm-video-band h3 { color: #fff; }
.mm-video-band .wp-block-buttons { justify-content: center; margin-top: 24px; }

/* il-nostro-olio: righe immagine/testo, una per tipo di olio, sfondo colore-per-olio (vedi sopra). */
.mm-oil-rows .wp-block-media-text { min-height: 420px; align-items: stretch; margin-bottom: 0; background: var(--mm-light); }
.mm-oil-rows .wp-block-media-text[class*="mm-oil--"] { background: var(--mm-oil); }
.mm-oil-rows .wp-block-media-text[class*="mm-oil--"] :is(h2, p) { color: var(--mm-oil-text); }
.mm-oil-rows .wp-block-media-text__media { display: flex; align-items: center; justify-content: center; padding: 40px; }
.mm-oil-rows .wp-block-media-text__media img { max-height: 320px; width: auto; }
.mm-oil-rows .wp-block-media-text__content { display: flex; flex-direction: column; justify-content: center; padding: 60px 6vw; }

/* Griglia articoli correlati (Query Loop a card con foto+estratto+pulsante "Scopri di più"):
   usata dove il live mostra una card per articolo invece del semplice elenco mm-posts-list
   (es. elisir-di-lunga-vita). Query Loop invece di Latest Posts: il blocco post-excerpt non
   aggiunge da solo nessun link "Read more" (a differenza del vecchio wp:latest-posts, che lo
   genera in inglese via get_the_excerpt() e non è traducibile da qui) — il pulsante è invece
   un blocco read-more separato, con testo scelto da noi. */
.mm-posts-grid.wp-block-query { display: block; }
.mm-posts-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.mm-posts-grid li.wp-block-post { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.mm-posts-grid .wp-block-post-featured-image { margin: 0; }
.mm-posts-grid .wp-block-post-featured-image img { display: block; width: 100%; height: 220px; object-fit: cover; }
.mm-posts-grid .wp-block-post-title { margin: 0; padding: 20px 20px 4px; font: 400 1.1rem var(--mm-serif); }
.mm-posts-grid .wp-block-post-title a { text-decoration: none; color: var(--mm-ink); }
.mm-posts-grid .wp-block-post-excerpt { margin: 0; padding: 0 20px; font-size: .9rem; color: var(--mm-charcoal); }
.mm-posts-grid .wp-block-post-excerpt__excerpt { margin: 0; }
.mm-posts-grid .wp-block-read-more { display: block; padding: 8px 20px 20px; font: 700 .8rem var(--mm-sans); text-transform: uppercase; letter-spacing: .02em; color: var(--mm-olive-dark); text-decoration: none; }
@media (max-width: 767px) {
  .mm-posts-grid .wp-block-post-template { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .mm-awards { grid-template-columns: repeat(3, 1fr); }
  .mm-products ul.products li.product { flex-basis: calc(33.33% - 14px); }
}
@media (max-width: 767px) {
  .mm-section { padding-block: 50px; }
  .mm-awards { grid-template-columns: repeat(2, 1fr); }
  .mm-hero .wp-block-cover { padding: 140px 24px 90px; }
  /* Il testo dello slider servizi occupa quasi tutta l'altezza dello slide: le frecce centrate
     verticalmente ci finiscono sopra. Le ancoriamo in basso (l'hero ha già le sue, sempre in basso). */
  .mm-slider__btn { top: auto; bottom: 24px; transform: none; }
  .mm-products ul.products li.product { flex-basis: calc(66% - 8px); padding: 16px 16px 56px; }
  .mm-tasting .wp-block-column:last-child { padding-top: 24px; }
  .mm-tasting img { max-width: 220px; }
  .mm-cover-quote .wp-block-cover, .mm-video-band .wp-block-cover { min-height: 360px; }
  .mm-lead { font-size: 1.2rem; }
}
/* Media & Text impilato: il core passa a una colonna sotto i 600px (non 767), quindi anche queste
   regole; sopra resta il layout a due colonne con la foto a tutta altezza. Selettori con
   > .wp-block-media-text__media per superare il min-height:250px di .is-image-fill-element. */
@media (max-width: 600px) {
  .mm-services .wp-block-media-text,
  .mm-art .wp-block-media-text,
  .mm-contact-hero .wp-block-media-text,
  .mm-regalo { min-height: auto; }
  .mm-services .wp-block-media-text > .wp-block-media-text__media,
  .mm-art .wp-block-media-text > .wp-block-media-text__media,
  .mm-contact-hero .wp-block-media-text > .wp-block-media-text__media { min-height: 260px; }
  .mm-regalo.wp-block-media-text > .wp-block-media-text__media { min-height: 200px; }
  .mm-services .wp-block-media-text__content,
  .mm-contact-hero .wp-block-media-text__content { padding: 32px 24px; }
  .mm-oil-rows .wp-block-media-text { min-height: auto; }
  .mm-oil-rows .wp-block-media-text__media img { max-height: 200px; }
  .mm-oil-rows .wp-block-media-text__content { padding: 32px 24px; }
}

/* Iframe bloccati da Cookiebot (data-cookieblock-src) finché manca il consenso o Cookiebot non è
   caricato: nascosti invece di lasciare un riquadro vuoto; resta il link alternativo nel contenuto. */
iframe[data-cookieblock-src]:not([src]) { display: none; }