.elementor-invisible {
  opacity: 0;
}

.elementor-animate {
  opacity: 1;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes slideInLeft {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slideInLeft { animation-name: slideInLeft; }
.slideInRight { animation-name: slideInRight; }

/* --- MD: Elementor invisibile -> gestito senza Elementor runtime --- */
.elementor-invisible {
  visibility: hidden !important;
  opacity: 0 !important;
}

.elementor-visible {
  visibility: visible !important;
  opacity: 1 !important;
}

.elementor-animate {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* animazioni base usate nel tuo HTML */
@keyframes slideInLeft {
  from { transform: translateX(-50px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(50px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.slideInLeft  { animation-name: slideInLeft; }
.slideInRight { animation-name: slideInRight; }
/* --- /MD --- */

/**************************/

/* ===== MondoDesign FAQ (md-faq) ===== */

.md-faq{
  color: #d6b25e; /* oro base */
}

.md-faq__q{
  color: #d6b25e;              /* oro */
  font-weight: 700;
  font-size: 18px;             /* regola se vuoi */
  line-height: 1.25;
}

.md-faq__q[aria-expanded="true"]{
  color: #fff6d6;              /* oro chiarissimo quasi bianco */
}

.md-faq__icon{
  color: currentColor;         /* triangolo prende il colore del testo */
}

/* risposta */
.md-faq__a{
  color: #ffffff;              /* testo risposta bianco */
  font-size: 14px;             /* più piccolo */
  line-height: 1.35;           /* interlinea minore */
  padding-left: 28px;
}

/* riduci spazi tra paragrafi/liste nella risposta */
.md-faq__a p{ margin: 8px 0 6px; }
.md-faq__a ul{ margin: 6px 0 0; padding-left: 18px; }
.md-faq__a li{ margin: 2px 0; }


/***************************/

.md-faq { width: 100%; }

.md-faq__item { margin-bottom: 12px; }

.md-faq__q{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.md-faq__icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
}

/* triangolino */
.md-faq__icon::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
  transition: transform 250ms ease;
}

/* ruota quando aperto */
.md-faq__q[aria-expanded="true"] .md-faq__icon::before{
  transform: translate(-50%, -50%) rotate(90deg);
}

.md-faq__a{
  overflow: hidden;
  height: 0;
  transition: height 280ms ease;
  will-change: height;
  padding-left: 28px; /* allinea testo sotto la domanda, dopo l’icona */
}

.md-faq__a > :first-child { margin-top: 10px; }
.md-faq__a > :last-child { margin-bottom: 0; }

/* Force transition for FAQ panel (vendor.css is setting duration to 0s) */
.md-faq__a{
  transition-duration: 280ms !important;
  transition-property: height !important;
  transition-timing-function: ease !important;
}

/**************************/

/***********************
 OVERRIDES – HEADER LOGO
************************/

/* Logo: forza dimensione e rimuove clamp del tema */
.aux-widget-logo .aux-logo-anchor > img{
  width: 700px;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
}

/* Mobile: evita che esploda */
@media (max-width: 768px){
  .aux-widget-logo .aux-logo-anchor > img{
    width: 100%;
    max-width: 260px; /* cambia a piacere */
  }
}

/* Testi logo (titolo + descrizione): il tema spesso li nasconde */
.aux-widget-logo .aux-logo-text{
  display: block !important;
}
.aux-widget-logo .aux-logo-text .site-title,
.aux-widget-logo .aux-logo-text .site-description{
  display: block !important;
}

/* Elimina la scrollbar interna: #inner-body non deve essere scroll container */
#inner-body{
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Hero title */
.md-hero-main{
  color: #FCDFB4;
  font-weight: 300;
}

.md-hero-highlight{
  color: #da5e0c; /* giallo evidenziatore */
  font-weight: 700;
}

/* --- 
}

/* STATO NORMALE */
.elementor-element-9b85885 a.aux-button{
  background: #da5e0c !important;        /* <-- non background-color */
  background-color: #da5e0c !important;  /* ridondanza voluta */
  border-color: #da5e0c !important;
}

.elementor-element-9b85885 a.aux-button .aux-overlay{
  background: #da5e0c !important;
  background-color: #da5e0c !important;
}

.elementor-element-9b85885 a.aux-button .aux-text{
  color: #160900 !important;
  font-weight: 700 !important;
}

/* STATO HOVER */
.elementor-element-9b85885 a.aux-button:hover{
  background: #160900 !important;
  background-color: #160900 !important;
  border-color: #160900 !important;
}

.elementor-element-9b85885 a.aux-button:hover .aux-overlay{
  background: #160900 !important;
  background-color: #160900 !important;
}

.elementor-element-9b85885 a.aux-button:hover .aux-text{
  color: #FCDFB4 !important;
  font-weight: 700 !important;
}

/* elimina spazio extra “post-footer” generato da padding/margini */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

body{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* alcuni temi aggiungono spazio sotto ai wrapper */
.aux-wrapper, .aux-content, .aux-page, #main, #content{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

html, body { background: #000000 !important; }  /* usa il colore reale del footer */

/* evita contenitori a 100vh / scroll interni che allungano o spezzano la pagina */
.aux-wrapper,
.elementor,
.elementor-section,
.elementor-container,
.elementor-widget-wrap{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
/* il logo sticky NON deve occupare spazio nel layout */
.aux-logo-sticky { position: absolute !important; }
.aux-widget-logo { position: relative !important; }

.aux-logo-sticky,
.aux-logo-sticky img{
  position: absolute !important;
}
.aux-widget-logo{ position: relative !important; }

/*************************/
.sfondochiaro{
  background-image: linear-gradient(180deg, #000000 60%, #000000 100%);
}

.dot{
  display:inline-block;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#da5e0c; /* colore */
}

/* =========================================================
   MONDO DESIGN – SEZIONE 3 RIQUADRI (FEATURE CARDS)
   ========================================================= */

/* SEZIONE */
.md-feature-cards-sezione-riquadri{
  background: #000000;
  padding: 0 0 40px 0;               /* ↓ meno aria sopra/sotto */
}

/* CONTAINER */
.md-feature-cards-sezione-riquadri > .elementor-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 0 0;
  box-sizing: border-box;

  display: flex;
  gap: 36px;                      /* ↓ meno distanza tra card */
  justify-content: center;
}

/* CARD ESTERNA (ombra) */
.md-feature-cards-sezione-riquadri .elementor-column{
  flex: 1 1 0;
  max-width: 540px;

  background: #FCDFB4;           /* stesso colore sezione */
  border-radius: 18px;
  padding: 10px;                 /* ↓ meno “intermezzo” */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  box-sizing: border-box;
}

/* CORNICE INTERMEDIA: ora è VOLUTA e visibile (stacca dal fondo) */
.md-feature-cards-sezione-riquadri .aux-widget-modern-heading{
  background: rgba(0,0,0,0.06);  /* cornice “neutra” (non dipende dal colore) */
  border-radius: 16px;
  padding: 10px;                /* ↓ cornice più sottile */
  box-sizing: border-box;
}

/* PANNELLO INTERNO (bianco/chiaro) */
.md-feature-cards-sezione-riquadri .aux-widget-inner{
  background: #F6F0E6;
  border-radius: 12px;
  padding: 16px 16px;           /* ↓ riduce altezza */
  box-shadow: none;
  box-sizing: border-box;
}

/* NUMERO 01/02/03 */
.md-feature-cards-sezione-riquadri .aux-widget-inner > p{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;                  /* ↓ più compatto */
  height: 44px;
  border-radius: 12px;

  background: #d19a5a;
  color: #ffffff;

  font-size: 18px;              /* ↓ */
  font-weight: 800;
  line-height: 1;
  margin: 0 0 10px;             /* ↓ */
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* TITOLO (riduci “aria” e altezza) */
.md-feature-cards-sezione-riquadri .aux-widget-inner .aux-modern-heading-secondary{
  margin: 0 0 8px !important;
  color: #111 !important;
  font-size: 17px !important;   /* ↓ */
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* TESTO DESCRITTIVO */
.md-feature-cards-sezione-riquadri .aux-widget-inner .aux-modern-heading-description{
  color: #000 !important;
  font-size: 14px !important;   /* ↓ */
  line-height: 1.35 !important; /* ↓ compatta */
  margin: 0 !important;
}

/* (opzionale) Limita altezza totale e uniforma le 3 card */
.md-feature-cards-sezione-riquadri .aux-widget-inner{
  min-height: 220px;            /* <-- riduci/aumenta per uniformare */
}

/* RESPONSIVE */
@media (max-width: 900px){
  .md-feature-cards-sezione-riquadri > .elementor-container{
    flex-wrap: wrap;
    gap: 18px;
  }

  .md-feature-cards-sezione-riquadri .elementor-column{
    flex: 0 0 100%;
    max-width: 520px;
  }
}

/* =========================================================
   MONDO DESIGN - Layered Card Effect (2 layers)
   Funziona anche se l'img NON è figlio diretto.
   I layer restano SEMPRE dietro all'immagine.
   ========================================================= */

.md-layered-card{
  /* ---- Parametri ---- */
  --layer1-end-x: 18px;
  --layer1-end-y: 24px;
  --layer2-end-x: 34px;
  --layer2-end-y: 34px;

  --layer1-start-x: 70px;
  --layer1-start-y: 52px;
  --layer2-start-x: 105px;
  --layer2-start-y: 78px;

  --layer1-delay: 1100ms;
  --layer2-delay: 1280ms;

  --layer1-dur: 650ms;
  --layer2-dur: 650ms;

  --layer1-bg: rgba(94,74,0,0.33);
  --layer1-border: rgba(0,0,0,0.16);

  --layer2-bg: rgba(54,34,0,222.10);
  --layer2-border: rgba(0,0,0,0.16);

  /* ---- Base ---- */
  position: relative;
  display: inline-block;
  overflow: visible;

  /* stacking robusto */
  isolation: isolate;
  z-index: 0;
}

/* QUALSIASI img dentro md-layered-card sta sopra */
.md-layered-card img{
  position: relative;
  z-index: 5 !important;
  display: block;
}

/* Layer: sempre dietro (z-index negativo) */
.md-layered-card::before,
.md-layered-card::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: 0;

  /* dietro all'immagine, sempre */
  z-index: -1;
}

/* Layer 1 (più vicino) */
.md-layered-card::before{
  background: var(--layer1-bg);
  border: 0px solid var(--layer1-border);

  transform: translate(var(--layer1-start-x), var(--layer1-start-y));
  animation: mdLayer1In var(--layer1-dur) cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--layer1-delay);
}

/* Layer 2 (più lontano) */
.md-layered-card::after{
  background: var(--layer2-bg);
  border: 0px solid var(--layer2-border);

  transform: translate(var(--layer2-start-x), var(--layer2-start-y));
  animation: mdLayer2In var(--layer2-dur) cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--layer2-delay);

  /* ancora più dietro */
  z-index: -2;
}

@keyframes mdLayer1In{
  to{
    opacity: 1;
    transform: translate(var(--layer1-end-x), var(--layer1-end-y));
  }
}

@keyframes mdLayer2In{
  to{
    opacity: 1;
    transform: translate(var(--layer2-end-x), var(--layer2-end-y));
  }
}

/* Se vengono tagliati da un parent, sblocca (solo se serve)
.aux-media-hint-frame,
.widget-container.aux-widget-image,
.aux-media-image{
  overflow: visible !important;
}
*/

/* ===========================
   MD CTA (riutilizzabile)
   =========================== */

.md-cta{
  width: 100%;
  max-width: var(--md-cta-maxw, 560px);
  padding: var(--md-cta-pad-y, 12px) var(--md-cta-pad-x, 0px);
  background: var(--md-cta-bg, transparent);
  border-radius: var(--md-cta-radius, 0px);
}

.md-cta__inner{
  display: flex;
  flex-direction: column;
  gap: var(--md-cta-gap, 12px);
}

.md-cta__title{
  color: var(--md-cta-title-color, #111);
  font-size: var(--md-cta-title-size, 18px);
  font-weight: var(--md-cta-title-weight, 700);
  line-height: 1.15;
}

/* Se vuoi nascondere il titolo senza toccare HTML:
   aggiungi class="md-cta md-cta--no-title" al wrapper */
.md-cta--no-title .md-cta__title{
  display: none;
}

.md-cta__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Pulsante con overlay hover (effetto “pellicola” sopra) */
.md-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 10px 16px;

  border-radius: 4px;
  border: 1px solid var(--md-btn-border, rgba(0,0,0,.15));
  background: var(--md-btn-bg, #f39c12);
  color: var(--md-btn-text, #111);

  text-decoration: none;
font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  overflow: hidden;
  user-select: none;
}

.md-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-btn-overlay, rgba(255,255,255,.22));
  transform: translateX(-120%);
  transition: transform .22s ease;
  pointer-events: none;
}

.md-btn:hover{
  background: var(--md-btn-hover-bg, #111);
  color: var(--md-btn-hover-text, #fff);
  border-color: transparent;
}

.md-btn:hover::after{
  transform: translateX(0%);
}

/* Variante secondaria (se vuoi differenziare i due pulsanti)
   Puoi cambiare i colori SOLO qui, senza toccare il primo */
.md-btn--secondary{
  background: #04ab00;
  color: var(--md-btn-hover-bg, #111);
}

.md-btn--secondary:hover{
  background: var(--md-btn-hover-bg, #111);
  color: var(--md-btn-hover-text, #fff);
}

/* Responsive: su schermi stretti, pulsanti a tutta larghezza */
@media (max-width: 520px){
  .md-cta{
    max-width: 100%;
  }
  .md-cta__buttons{
    flex-direction: column;
  }
  .md-btn{
    width: 100%;
  }
}

.md-gradient {
  background: linear-gradient(
    to bottom,
    var(--grad-top, #fff) 0%,
    var(--grad-mid, #f5f5f5) 10%,
    var(--grad-mid, #f5f5f5) 90%,
    var(--grad-bottom, #fff) 100%
  );
}

/* Footer contatti: compatta titolo + descrizione (forza override tema) */
.elementor-element-d78342e .aux-widget-modern-heading .aux-widget-inner,
.elementor-element-d78342e .aux-widget-modern-heading .aux-widget-inner *{
  /* niente qui: solo per aumentare specificità in cascata */
}

/* h2: annulla margini default + compattazione */
.elementor-element-d78342e .aux-widget-modern-heading h2.aux-modern-heading-primary{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* distanza tra titolo e testo: la metto sulla descrizione (più stabile) */
.elementor-element-d78342e .aux-widget-modern-heading .aux-modern-heading-description{
  margin: 3px 0 0 0 !important; /* cambia 3px se vuoi */
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* elimina margini dei <p> dentro descrizione (email ecc.) */
.elementor-element-d78342e .aux-widget-modern-heading .aux-modern-heading-description p{
  margin: 0 !important;
  padding: 0 !important;
}

/* link/bold: evita che ereditino line-height “strano” */
.elementor-element-d78342e .aux-widget-modern-heading .aux-modern-heading-description a,
.elementor-element-d78342e .aux-widget-modern-heading .aux-modern-heading-description b,
.elementor-element-d78342e .aux-widget-modern-heading .aux-modern-heading-description strong{
  line-height: inherit !important;
}

/* ===========================
   MENU TOP: solo HOVER (minimo)
   =========================== */

/* prova a colpire i link del menu senza toccare il colore base */
header nav a:hover,
header nav a:focus-visible,
header nav li:hover > a,
header nav li:focus-within > a{
  color: var(--link-hover) !important;
}

/* se il testo del menu è dentro span */
header nav a:hover span,
header nav a:focus-visible span,
header nav li:hover > a span,
header nav li:focus-within > a span{
  color: inherit !important;
}

/* =====================================================
   FOOTER COPYRIGHT — LINK UNIFICATI E HOVER BIANCO
   ===================================================== */

/* Colori gestibili qui */
.elementor-element-d78342e{
  --footer-link: #f39c12;       /* colore normale */
  --footer-link-hover: #ffffff;/* colore hover */
}

/* Stato normale */
.elementor-element-d78342e a.footer-link{
  color: var(--footer-link) !important;
  opacity: 1 !important;
  filter: none !important;
  text-decoration: underline !important;
  text-decoration-thickness: 0.12em !important;
  text-underline-offset: 0.18em !important;
  position: relative;
  z-index: 5; /* sopra eventuali overlay */
  transition: color .18s ease;
}

/* Hover / focus */
.elementor-element-d78342e a.footer-link:hover,
.elementor-element-d78342e a.footer-link:focus-visible{
  color: var(--footer-link-hover) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Neutralizza qualsiasi overlay del tema */
.elementor-element-d78342e a.footer-link::before,
.elementor-element-d78342e a.footer-link::after{
  content: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Se il testo è wrappato */
.elementor-element-d78342e a.footer-link span,
.elementor-element-d78342e a.footer-link strong,
.elementor-element-d78342e a.footer-link b{
  color: inherit !important;
}

/* ============================================================
   MD — CONTATTI (scoped)
   Controllo completo via variabili
   ============================================================ */

.md-page-contatti {
  --md-bg: #ffffff;
  --md-text: #111;
  --md-muted: #666;

  --md-accent: #ff9638;
  --md-accent-2: #066aab;

  --md-border: rgba(0,0,0,.14);
  --md-field-bg: #fff;

  --md-radius: 14px;
  --md-radius-sm: 10px;

  --md-shadow: 0 12px 30px rgba(0,0,0,.10);

  --md-pad: 16px;
  --md-gap: 14px;

  --md-focus: 0 0 0 4px rgba(255,150,56,.25);
}

/* contenitore visivo del form */
.md-page-contatti .md-contact-form {
  background: var(--md-bg);
  color: var(--md-text);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  padding: 22px;
}

/* grid */
.md-page-contatti .md-grid {
  display: grid;
  gap: var(--md-gap);
}
.md-page-contatti .md-grid--2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .md-page-contatti .md-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* campi */
.md-page-contatti .md-field {
  display: grid;
  gap: 8px;
  margin-bottom: var(--md-gap);
}

.md-page-contatti .md-field label,
.md-page-contatti .md-fieldset > legend {
  font-weight: 600;
  font-size: 14px;
  color: var(--md-text);
}

.md-page-contatti .md-field input,
.md-page-contatti .md-field textarea {
  width: 100%;
  background: var(--md-field-bg);
  color: var(--md-text);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
}

.md-page-contatti .md-field textarea {
  resize: vertical;
  min-height: 140px;
}

.md-page-contatti .md-field input:focus,
.md-page-contatti .md-field textarea:focus {
  border-color: var(--md-accent);
  box-shadow: var(--md-focus);
}

/* fieldset radio */
.md-page-contatti .md-fieldset {
  border: 1px dashed var(--md-border);
  border-radius: var(--md-radius-sm);
  padding: 12px 12px;
  margin: 0 0 var(--md-gap) 0;
}

.md-page-contatti .md-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--md-text);
}
.md-page-contatti .md-radio input {
  transform: scale(1.05);
}

/* checkbox */
.md-page-contatti .md-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px 0;
  color: var(--md-text);
}
.md-page-contatti .md-check input {
  margin-top: 3px;
}

/* azioni */
.md-page-contatti .md-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.md-page-contatti .md-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  background: var(--md-accent);
  color: #111;
}

.md-page-contatti .md-btn:hover {
  filter: brightness(0.98);
}

.md-page-contatti .md-form-note {
  font-size: 13px;
  color: var(--md-muted);
}

/* alert */
.md-page-contatti .md-contact-alert {
  border-radius: var(--md-radius-sm);
  padding: 14px 14px;
  margin: 0 0 14px 0;
  border: 1px solid var(--md-border);
}

.md-page-contatti .md-contact-alert--success {
  background: rgba(0, 180, 90, .08);
  border-color: rgba(0, 180, 90, .25);
}

.md-page-contatti .md-contact-alert--error {
  background: rgba(220, 40, 40, .08);
  border-color: rgba(220, 40, 40, .25);
}

.md-page-contatti .md-contact-alert ul {
  margin: 0;
  padding-left: 18px;
}

/* honeypot invisibile */
.md-page-contatti .md-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* CONTATTI: elimina colonna destra (mappa/vuoto) e allarga tutto a 100% */
.md-page-contatti .elementor-element-18ff087{
  display: none !important;
}

.md-page-contatti .elementor-element-aee6e16{
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* assicura che il widget HTML del form non abbia limiti strani */
.md-page-contatti .elementor-element-b2edb3f,
.md-page-contatti .elementor-element-b2edb3f .elementor-widget-container{
  width: 100% !important;
}

/* dimensione form: se lo vuoi “molto largo”, alza max-width o metti none */
.md-page-contatti .md-contact-form{
  width: 100%;
  max-width: 980px;
  margin: 0; /* se lo vuoi centrato: margin: 0 auto; */
}

/* =========================================================
   MD — TYPOGRAPHY BASE (globale)
   Serve a rendere leggibili TUTTE le pagine (prodotti inclusi)
   ========================================================= */

/* Default testo su layout scuro */
body.md-page{
  color: #FCDFB4;              /* testo base */
}

/* Testo generico (evita “nero su nero”) */
body.md-page :where(p, li, dt, dd, small, label, input, textarea, select){
  color: inherit;
}

/* Headings HTML standard */
body.md-page :where(h1, h2, h3, h4, h5, h6){
  color: #FCDFB4;
}

/* Headings/descrizioni “Phlox/Auxin” (quelli che usate davvero) */
body.md-page .aux-widget-modern-heading :where(
  .aux-modern-heading-primary,
  .aux-modern-heading-secondary,
  .aux-modern-heading-description,
  .aux-modern-heading-divider
){
  color: inherit;
}

/* Spesso il tema imposta colori hardcoded sulle modern heading */
body.md-page .aux-modern-heading-primary,
body.md-page .aux-modern-heading-secondary,
body.md-page .aux-modern-heading-description{
  color: inherit !important;
}

/* Link: base + hover (se già gestisci altrove, questo resta neutro) */
body.md-page a{
  color: inherit;
}
body.md-page a:hover{
  opacity: .9;
}

/* =========================================================
   MD — GLOBAL IMAGE FRAME
   - Default: tutte le immagini hanno bordo + radius
   - Opt-out: .md-img-reset annulla tutto
   - Variant: .md-img-alt cambia parametri e vince

class="md-img-reset"
class="md-img-alt"

   ========================================================= */

/* 1) Valori globali (li setti UNA VOLTA qui) */
:root{
  --md-img-border-width: 10px;
  --md-img-border-style: solid;
  --md-img-border-color: rgba(0,0,0,.1);
  --md-img-radius: 50px;
}

/* 2) Applica a TUTTE le immagini del sito
   (escludo automaticamente: svg, icone/emoji e roba tiny, se serve) */
body.md-page img:not([src$=".svg"]){
  border: var(--md-img-border-width) var(--md-img-border-style) var(--md-img-border-color);
  border-radius: var(--md-img-radius);
  box-sizing: border-box;
}

/* 3) OPT-OUT: se metti questa classe su IMG o su un suo contenitore,
   l'immagine torna "pulita" (nessun bordo/radius) */
.md-img-reset img,
img.md-img-reset{
  border: 0 !important;
  border-radius: 0 !important;
}

/* 4) VARIANTE: se metti questa classe su IMG o su un contenitore,
   sovrascrive i valori globali */
.md-img-alt img,
img.md-img-alt{
  border-width: 4px !important;
  border-style: solid !important;
  border-color: #da5e0c !important;
  border-radius: 22px !important;
}

/* =========================================================
   MD — LEGAL PAGES (privacy / cookie)
   ========================================================= */

.md-page-privacy-policy,
.md-page-cookie-policy{
  --md-bg: #ffffff;
  --md-text: #111;
  --md-muted: #666;
  --md-border: rgba(0,0,0,.14);
  --md-radius: 14px;
  --md-radius-sm: 10px;
  --md-shadow: 0 10px 30px rgba(0,0,0,.10);
  --md-gap: 18px;
}

.md-legal-wrap{
  max-width: 980px;
  margin: 30px auto 80px;
  padding: 0 14px;
}

.md-legal-card{
  background: var(--md-bg);
  color: var(--md-text);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  padding: 22px;
  margin-bottom: var(--md-gap);
}

.md-legal-h{
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.2;
}

.md-legal-p{
  margin: 0 0 12px;
  line-height: 1.65;
}

.md-legal-ul{
  margin: 0 0 14px 18px;
  line-height: 1.65;
}

.md-legal-note{
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--md-radius-sm);
  background: rgba(0,0,0,.04);
  color: var(--md-muted);
  font-size: 14px;
  line-height: 1.55;
}

.md-legal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 768px){
  .md-legal-grid{ grid-template-columns: 1fr; }
}

.md-legal-item{
  padding: 12px 14px;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  background: rgba(0,0,0,.02);
}

.md-legal-k{
  font-size: 13px;
  color: var(--md-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.md-legal-v{
  font-size: 15px;
}