/* ==========================================================================
   EXTRAOLIO - MASTER CSS FILE
   Versione: 2.0 (Ottimizzata per PageSpeed & Mobile First)
   
   INDICE:
   1. VARIABILI GLOBALI (Colori, Font, Ombre)
   2. RESET & BASE (Impostazioni di pagina)
   3. UTILITY CLASSES (Spaziature, Colori, Testo - "Il coltellino svizzero")
   4. TIPOGRAFIA & BOTTONI
   5. LAYOUT & GRIGLIE (Container e strutture)
   6. COMPONENTI: CARDS (Topic, Image, Guide, Myth, ecc.)
   7. SEZIONI SPECIFICHE (Tabelle, Grafici, Accordion FAQ, Stats)
   8. HEADER & FOOTER
   9. MOBILE OVERRIDES (Regole esclusive per smartphone)
   ========================================================================== */

/* =========================================
   1. VARIABILI GLOBALI
   ========================================= */
:root {
    /* Palette Lusso */
    --primary-dark: #0f2b15;  /* Verde scurissimo */
    --primary: #2e5c1d;       /* Verde Oliva Bosco */
    --accent: #d4af37;        /* Oro Metallico */
    --accent-glow: #f9e6b6;   /* Oro Chiaro per bagliori */
    
    /* Sfondi & Testi */
    --bg-body: #fdfbf7;       /* Crema caldissimo */
    --bg-white: #ffffff;
    --bg-light-gray: #f4f5f0;
    --text-main: #1a1a1a;
    --text-muted: #666666;
    
    /* UI & Animazioni */
    --shadow-card: 0 15px 35px rgba(15, 43, 21, 0.08);
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* System Fonts (100/100 PageSpeed - Zero chiamate esterne) */
    --font-heading: ui-serif, "Georgia", "Cambria", "Times New Roman", Times, serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Previene scroll orizzontali accidentali */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.6;
}

ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* =========================================
   3. UTILITY CLASSES (Il coltellino svizzero)
   ========================================= */
/* Spaziature (Margini) */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-auto { margin-top: auto; }
.mb-5 { margin-bottom: 5px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spaziature (Padding) */
.no-padding { padding: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-20 { padding-bottom: 20px !important; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.section-padding { padding: 90px 0; }

/* Sfondi */
.bg-white { background-color: var(--bg-white); }
.bg-cream { background-color: var(--bg-body); }
.bg-light-gray { background-color: var(--bg-light-gray); }
.bg-dark { background-color: var(--primary-dark); }
.bg-primary { background-color: var(--primary); }

/* Colori Testo */
.text-white { color: var(--bg-white); }
.text-dark { color: var(--primary-dark); }
.text-primary { color: var(--primary); }
.text-primary-dark { color: var(--primary-dark); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-light-gray { color: #cccccc; }
.text-danger { color: #cc0000; }

/* Testo Stile */
.text-center { text-align: center; }
.text-left { text-align: left; }
.font-bold { font-weight: 700; }
.italic { font-style: italic; }
.text-xs { font-size: 0.85rem; }
.text-sm { font-size: 0.95rem; }
.text-lg { font-size: 1.8rem; }
.text-xl { font-size: 2.5rem; }
.lh-11 { line-height: 1.1; }
.lh-15 { line-height: 1.5; }

/* Flexbox Helpers */
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap-center { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.flex-item-center { display: flex; align-items: center; gap: 15px; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.flex-1 { flex: 1; min-width: 300px; }
.flex-shrink-0 { flex-shrink: 0; }

/* Bordi e Divisori */
.border-gold-thick { border: 4px solid var(--accent); }
.border-bottom-gold { border-bottom: 4px solid var(--accent); }
.border-bottom-accent { border-bottom: 1px solid var(--accent); }
.border-top-light { border-top: 1px solid #e0e0e0; }
.divider-light { border: 0; border-top: 1px solid #eee; }

/* Accessibilità e Icone */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.emoji-large { font-size: 1.5rem; line-height: 1; display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.emoji-huge { font-size: 3.5rem; line-height: 1; display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }


/* Aggiunte Utility & Griglie */
.block { display: block; }
.underline { text-decoration: underline; }
.uppercase { text-transform: uppercase; }

/* Griglia fissa a 3 colonne per gli abbinamenti */
.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Box Abbinamenti (Pulisce gli stili inline) */
.pairing-box {
    background: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: var(--transition);
}
.pairing-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    border-color: rgba(212, 175, 55, 0.3); /* Leggero bordo dorato in hover */
}



/* =========================================
   4. TIPOGRAFIA & BOTTONI
   ========================================= */
h1, h2, h3, h4, .logo, .stat-big, .font-heading { 
    font-family: var(--font-heading); 
}

.section-header { margin-bottom: 60px; }
.section-header h2 { font-size: 3rem; margin-bottom: 15px; color: var(--primary-dark); line-height: 1.1; }
.section-header p { color: var(--text-muted); font-size: 1.2rem; max-width: 700px; margin: 0 auto; }

/* Tags (Etichette Sopra i Titoli) */
.tag-small { 
    background: var(--primary-dark); color: var(--accent); 
    padding: 6px 12px; font-size: 0.75rem; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 1px; border-radius: 2px; 
    display: inline-block; margin-bottom: 20px;
}
.tag-inverted { background: var(--accent); color: var(--primary-dark); }
.tag-black { background: #000; color: #fff; }
.tag-gray { background: #e0e0e0; color: #555; }
.tag-gold-text { color: var(--accent); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; }

/* Bottoni (Standardizzati) */
.btn { 
    display: inline-block; padding: 16px 40px; border-radius: 4px; 
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px; 
    font-size: 0.9rem; transition: var(--transition); cursor: pointer; text-align: center;
}
.btn-primary { background: var(--accent); color: var(--primary-dark); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); }
.btn-primary:hover { background: var(--bg-white); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4); }
.btn-outline { border: 1px solid var(--bg-white); color: var(--bg-white); background: transparent; }
.btn-outline:hover { background: var(--bg-white); color: var(--primary-dark); }
.btn-outline-dark { border: 2px solid var(--primary-dark); color: var(--primary-dark); background: transparent; }
.btn-outline-dark:hover { background: var(--primary-dark); color: var(--bg-white); }
.btn-dark-gold { background: var(--primary-dark); color: var(--accent); }
.btn-dark-gold:hover { background: #000; color: #fff; }
.btn-block { display: block; padding: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; transition: var(--transition); }
.btn-gold-glow { background: var(--accent); color: var(--primary-dark); font-weight: 800; padding: 18px 40px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); display: inline-block; }
.btn-gold-glow:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 0 30px rgba(212, 175, 55, 0.6); }


/* =========================================
   5. LAYOUT & GRIGLIE GLOBALI
   ========================================= */
.container { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
.max-w-800 { max-width: 800px; }

/* Griglie Standard */
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cards-grid, .myth-grid, .guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 50px; }
.guide-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 0;}

/* Layout Diviso a Metà (Immagine/Testo) */
.split-layout { display: flex; gap: 60px; }


/* --- INDICE TEMATICO (TOC) --- */
.toc-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--primary-dark);
    border-bottom: 3px solid var(--accent);
}

.toc-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.75);
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s, color 0.2s;
}

.toc-nav__item:last-child { border-right: none; }
.toc-nav__item:hover { background: rgba(255,255,255,0.07); color: var(--accent); }
.toc-nav__item span:first-child { font-size: 1.3rem; }

.toc-nav__item--cta { 
    background: var(--accent); 
    color: var(--primary-dark);
    font-weight: 800;
}
.toc-nav__item--cta:hover { background: var(--accent-glow); color: var(--primary-dark); }

@media (max-width: 600px) {
    .toc-nav { grid-template-columns: repeat(3, 1fr); }
    .toc-nav__item:nth-child(3) { border-right: none; }
    .toc-nav__item { border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.65rem; }
    .toc-nav__item:nth-child(4),
    .toc-nav__item:nth-child(5),
    .toc-nav__item:nth-child(6) { border-bottom: none; }
}



/* =========================================
   6. COMPONENTI: CARDS
   ========================================= */
/* Base condivisa per tutte le card */
.topic-card, .myth-card, .test-card {
    background: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: none;
}
.topic-card:hover, .myth-card:hover, .test-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(15, 43, 21, 0.15); }

/* Header Scuro delle Card */
.card-header-dark, .test-card__header {
    background: var(--primary-dark);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.test-card__header { height: 120px; box-shadow: inset 0 -3px 0 var(--accent); transition: var(--transition); }
.test-card:hover .test-card__header { background: var(--accent); }

/* Corpo delle Card */
.card-body-padded, .test-card__body { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.test-card:hover .btn-block { background-color: var(--primary-dark); }

/* Image Cards (Territorio - 2 col Desktop, 1 col Mobile) */
.image-cards-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
@media (min-width: 768px) { .image-cards-grid { grid-template-columns: 1fr 1fr; } }

.image-card { background: var(--bg-white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.03); text-decoration: none; }
.image-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(15, 43, 21, 0.12); }
.image-card__figure { width: 100%; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background-color: #f4f5f0; border-bottom: 3px solid var(--accent); }
.image-card__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.image-card:hover .image-card__figure img { transform: scale(1.05); }
.image-card__body { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.image-card__title { font-family: var(--font-heading); font-size: 1.6rem; color: var(--primary-dark); margin: 0 0 15px 0; line-height: 1.2; }

/* Guide Cards (Icone grandi senza JS) */
.guide-card { background: var(--bg-white); padding: 30px 20px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; text-decoration: none; }
.guide-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); outline: none; }
.guide-img-wrapper { height: 130px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 0 0 20px 0; }
.guide-img-wrapper img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }

/* Master Card (SEO Definition) */
.master-card { display: flex; flex-wrap: wrap; background: var(--bg-white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-card); }
.master-card__aside { background: var(--primary-dark); color: var(--accent); padding: 40px; flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.master-card__aside h2 { color: #fff; margin-top: 20px; font-size: 2.5rem; line-height: 1.1; }
.master-card__content { padding: 40px; flex: 2; min-width: 300px; }
.feature-col h4 { color: var(--primary-dark); display: inline-block; margin-bottom: 10px; }
.feature-col .border-gold { border-bottom: 2px solid var(--accent); }
.feature-col .border-gray { border-bottom: 2px solid #ccc; }
.master-card__footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; font-size: 0.9rem; color: #888; }

/* Quiz Card Premium */
.featured-card-wrapper { flex: 1; min-width: 300px; }
.quiz-card-premium { border: 4px solid var(--accent); border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); overflow: hidden; background: var(--bg-white); }
.quiz-card-premium__header { background: var(--accent); color: var(--primary-dark); padding: 20px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.quiz-card-premium__body { padding: 40px; text-align: center; }




/* --- LISTE NELLE CARD (Specializzazioni) --- */
.feature-list { list-style: none; padding: 0; margin-bottom: 20px; font-size: 0.85rem; color: var(--text-muted); text-align: left; }
.feature-list li { margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }




/* =========================================
   7. SEZIONI SPECIFICHE (Scienza, FAQ, Legge)
   ========================================= */

/* Tabella Legge Europea */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.law-table { width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body); }
.law-table th { background: var(--primary-dark); color: var(--bg-white); text-align: left; padding: 15px; border-bottom: 4px solid var(--accent); font-family: var(--font-heading); }
.law-table td { padding: 15px; border-bottom: 1px solid #ddd; color: var(--text-main); }
.row-evo { background: rgba(212, 175, 55, 0.15); }
.row-lampante { background: #fff0f0; }
.law-table tbody tr:hover { background-color: #fafafa; }
.row-evo:hover { background: rgba(212, 175, 55, 0.25); }
.card-footer-gray { padding: 20px 40px 40px 40px; background: #fafafa; border-top: 1px solid #eee; }
.bio-highlight { background: var(--bg-white); border-left: 4px solid var(--primary); padding: 20px; border-radius: 0 4px 4px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }

/* Scienza (Grafico Polifenoli) */
.chart-container { background: #fff; padding: 30px; border-radius: 8px; box-shadow: var(--shadow-card); border: 1px solid #eee; }
.bar-group { margin-bottom: 25px; }
.bar-label { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; text-transform: uppercase; }
.bar-track { background: #eee; height: 12px; border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; width: 0; transition: width 1.5s ease-out; }
.supermarket { background: #ccc; width: 25%; }
.extraolio { background: var(--primary); width: 90%; box-shadow: 0 0 10px rgba(46, 92, 29, 0.4); }
.citation { font-size: 1.2rem; font-family: var(--font-heading); color: var(--primary); margin-top: 20px; border-left: 3px solid var(--accent); padding-left: 15px; }

/* Benefici Medici */
.health-benefits-box { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 40px; box-shadow: 0 10px 25px rgba(0,0,0,0.02); }
.check-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.check-list-grid li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: #555; }
.check-icon { font-weight: bold; font-size: 1.1rem; margin-top: -2px; }

/* Piramide e Estrazione (Tecnica Olearia) */
.quality-row { display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #eee; }
.level-top { background: #f0fdf4; border-left: 5px solid var(--primary); }
.level-mid { background: #fffbf0; border-left: 5px solid orange; }
.level-low { background: #f9f9f9; border-left: 5px solid #ccc; }
.level-bad { background: #fff5f5; border-left: 5px solid #e74c3c; }
.q-badge { font-size: 0.7rem; font-weight: bold; padding: 4px 8px; border-radius: 4px; background: var(--primary); color: #fff; }
.badge-gray { background: #999; }
.badge-red { background: #e74c3c; }

.extraction-comparison { display: flex; gap: 20px; }
.ex-col { flex: 1; text-align: center; }
.olive-side { border-right: 1px dashed #ccc; padding-right: 10px; }
.process-step { background: #f4f4f4; padding: 8px; border-radius: 4px; font-size: 0.85rem; border: 1px solid #ddd; }
.highlight-step { background: #e8f5e9; color: var(--primary); border-color: var(--primary); font-weight: bold; }
.warning-step { background: #fff3e0; color: #d35400; border-color: orange; font-weight: bold; }
.result-box { margin-top: 15px; padding: 10px; border-radius: 6px; }
.result-good { background: var(--primary); color: #fff; }
.result-bad { background: #555; color: #fff; }

/* Statistiche (3 Livelli, 12 Moduli) */
.stats-list { display: flex; gap: 20px; align-items: center; margin: 0; }
.stat-item { text-align: center; }
.stat-item dt { display: block; font-size: 2rem; color: var(--accent); font-weight: bold; font-family: var(--font-heading); }
.stat-item dd { font-size: 0.8rem; text-transform: uppercase; margin: 0; }
.stat-divider { width: 1px; height: 40px; background: #444; }

/* Accordion Nativi (FAQ senza JS) */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-native { background: var(--bg-white); border-radius: 6px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid transparent; transition: var(--transition); }
.faq-native:hover { border-color: rgba(212, 175, 55, 0.3); }
.faq-native > summary::-webkit-details-marker { display: none; }
.faq-native > summary { list-style: none; }
.faq-summary { padding: 20px 25px; font-weight: 700; font-size: 1.05rem; color: var(--primary-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.faq-native .faq-icon { color: var(--accent); font-size: 0.8rem; transition: transform 0.3s; }
.faq-native[open] .faq-icon { transform: rotate(-180deg); }
.faq-content { padding: 0 25px 25px 25px; color: var(--text-muted); font-size: 0.95rem; animation: slideDown 0.3s ease-out forwards; }
@keyframes slideDown { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }

/* Gamification Badge */
.badge-glass { display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 50px; color: #ccc; font-size: 0.9rem; backdrop-filter: blur(5px); }

/* Banner Esame */
.exam-banner-dark { background: linear-gradient(135deg, var(--primary-dark) 0%, #000 100%); color: #fff; border: 2px solid var(--accent); border-radius: 8px; padding: 50px 30px; margin: 60px 0 0 0; text-align: center; position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.exam-split-layout { display: flex; align-items: center; gap: 50px; text-align: left; }
.exam-text-col { flex: 1; z-index: 2; }
.exam-img-col { flex: 1; max-width: 600px; }
.exam-img-col img { width: 100%; height: auto; object-fit: cover; border-radius: 6px; border: 2px solid var(--accent); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }
.exam-icon-big { font-size: 4rem; margin-bottom: 20px; display: inline-block; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3)); animation: floatIcon 3s ease-in-out infinite; }
@keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Latta Call To Action */
.product-preview { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; background: var(--bg-white); padding: 40px; border-radius: 12px; box-shadow: var(--shadow-card); max-width: 900px; margin: 0 auto; }
.latta-mockup { background: #f4f5f0; padding: 30px; border-radius: 8px; border: 2px dashed #ccc; text-align: center; margin: 0; }

/* --- SOCIAL ACTION CARD (Pre-Footer) --- */
.pre-footer-section { background-color: var(--bg-body); padding: 80px 0; border-top: 1px solid #eee; }
.social-action-card {
    background: var(--bg-white);
    max-width: 900px; margin: 0 auto; padding: 50px;
    border-radius: 8px; border: 2px solid var(--accent);
    box-shadow: var(--shadow-card); text-align: center;
}
.share-buttons-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; margin-top: 30px; }

.btn-social-large {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 30px; border-radius: 6px; color: #fff; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; min-width: 200px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-social-large:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); color: #fff; }

/* Colori Brand Social */
.btn-wa { background-color: #25D366; }
.btn-fb { background-color: #1877F2; }
.btn-li { background-color: #0A66C2; }
.btn-social-large span { font-size: 1.4rem; font-family: var(--font-body); font-weight: 900; } /* Fallback testo per icone */

.favorites-divider { height: 1px; background: #eee; margin: 30px 0; width: 100%; }
.fav-tip { font-size: 0.95rem; color: var(--text-muted); background: var(--bg-light-gray); padding: 10px 20px; border-radius: 50px; display: inline-block; margin-bottom: 30px; }

/* --- RECENSIONI --- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.review-card { background: var(--bg-body); padding: 30px; border-radius: 8px; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.review-stars { color: var(--accent); font-size: 1.2rem; margin-bottom: 15px; display: block; }
.review-body { font-style: italic; color: var(--text-muted); font-size: 1rem; margin-bottom: 20px; line-height: 1.6; }
.review-author { font-weight: 700; color: var(--primary-dark); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

/* Mobile Overrides Addizionali */
@media (max-width: 768px) {
    .social-action-card { padding: 30px 20px; }
    .btn-social-large { width: 100%; }
}

/* =========================================
   8. HEADER & FOOTER
   ========================================= */
/* Hero Interna */
.internal-hero { background: linear-gradient(180deg, #0f2b15 0%, #1a4a25 100%); color: #fff; padding: 120px 0 80px 0; text-align: center; border-bottom: 4px solid var(--accent); }
.internal-hero h1 { font-size: 3.5rem; color: var(--accent); margin-bottom: 20px; }
.breadcrumb { color: #888; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 30px; }
.breadcrumb a { color: #fff; border-bottom: 1px solid var(--accent); }



/* =========================================
   8. HEADER & NAVIGAZIONE
   ========================================= */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    position: sticky; /* Rimane in alto scrollando */
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* Effetto vetro elegante */
    z-index: 9999;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: -1px;
    font-family: var(--font-heading);
}

.desktop-nav ul { display: flex; gap: 35px; }
.desktop-nav a { 
    font-weight: 700; font-size: 0.9rem; text-transform: uppercase; 
    letter-spacing: 1px; color: var(--primary-dark); position: relative;
}
/* Effetto sottolineatura lusso */
.desktop-nav a::after {
    content: ''; position: absolute; width: 0; height: 2px; 
    bottom: -5px; left: 0; background-color: var(--accent); transition: var(--transition);
}
.desktop-nav a:hover::after { width: 100%; }

/* Hamburger Menu Button (Senza bordi brutti) */
.mobile-toggle { 
    display: none; font-size: 2rem; color: var(--primary-dark); 
    background: none; border: none; cursor: pointer; padding: 5px;
}

/* =========================================
   8.3 HERO SECTION & TICKER (HOME PAGE)
   ========================================= */

/* Hero Principale */
.hero {
    position: relative;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Inserisci qui il percorso della tua immagine di sfondo */
    background: url('../img/hero-olive.jpg') center/cover no-repeat;
    background-color: #111; /* Fallback scuro di sicurezza prima del caricamento */
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Gradiente verde scuro -> trasparente */
    background: linear-gradient(180deg, rgba(15,43,21,0.85) 0%, rgba(15,43,21,0.4) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Sta sopra l'overlay */
    max-width: 900px;
    padding: 0 20px;
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    text-shadow: 0 10px 30px rgba(0,0,0,0.6); /* Ombra per staccare dal fondo */
}

.hero-subtitle {
    font-size: 1.3rem;
    max-width: 750px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
    line-height: 1.6;
}

/* Ticker (Barretta) */
.live-ticker {
    background: var(--primary-dark);
    color: var(--bg-white);
    padding: 18px 20px;
    border-bottom: 3px solid var(--accent);
    font-size: 1.05rem;
    text-align: center;
}

.ticker-icon {
    letter-spacing: 1px;
    font-size: 1.1rem;
}

.ticker-content {
    /* Questa transizione permette al JS di far "sfumare" morbidamente le frasi */
    transition: opacity 0.5s ease-in-out; 
}


/* Footer */
footer { background-color: #0f2b15; color: #fff; padding: 60px 0 30px; border-top: 4px solid var(--accent); margin-top: 60px; }
.footer-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-col h4 { color: var(--accent); margin-bottom: 20px; font-size: 1.5rem; font-family: var(--font-heading); }
.footer-col a { color: #cccccc; text-decoration: none; }
.footer-col a:hover { color: var(--accent); padding-left: 5px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; }


/* =========================================
   8.1 FOOTER COMPONENTS (Testimonianze, Social, Badge)
   ========================================= */

/* Box Testimonianze (Effetto Vetro Scuro) */
.testimonial-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px 20px;
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    min-height: 160px;
    position: relative;
    margin-bottom: 15px;
}

/* Gestione dello Slider via CSS */
.testimonial-slide {
    display: none; /* Nasconde tutte le slide di base */
    animation: fadeIn 0.6s ease-in-out;
}
.testimonial-slide.active {
    display: block; /* Mostra solo quella con classe .active (messa dal tuo JS) */
}

.testimonial-slide p {
    color: #eee;
    font-size: 0.95rem;
    margin-bottom: 15px;
    font-style: italic;
    line-height: 1.6;
}

.testimonial-slide cite {
    display: block;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-style: normal;
    letter-spacing: 0.5px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Icone Trust */
.trust-icons span { font-size: 1.2rem; letter-spacing: 2px; }
.trust-icons small { color: #aaa; margin-left: 5px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }

/* Box Pagamenti */
.payments-box { margin-top: 40px; }
.payments-box small { display: block; margin-bottom: 15px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.pay-icons { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.pay-icons span { font-size: 1.1rem; color: #ccc; }

/* Bottoni Social (Annullano l'effetto link standard del footer) */
.social-links { display: flex; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
.social-links a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff !important; /* Forza il colore bianco */
    transition: var(--transition);
}
.social-links a:hover {
    background: var(--accent);
    color: var(--primary-dark) !important;
    border-color: var(--accent);
    padding-left: 18px !important; /* Disinnesca lo spostamento laterale dei link standard */
    transform: translateY(-3px);
}

/* Copyright Bar e Badge AI */
.copyright-bar {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    margin-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}
.copyright-bar p { margin-bottom: 20px; }
.copyright-bar a { color: var(--accent); font-weight: bold; }

/* Badge Imweb + AI */
.credits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(15, 43, 21, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    color: #aaa;
    transition: var(--transition);
    backdrop-filter: blur(5px);
}
.credits-badge:hover {
    border-color: var(--accent);
    background: var(--primary-dark);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
    transform: translateY(-2px);
}
.dev-part a { color: #fff; font-weight: 700; text-decoration: none; }
.dev-part a:hover { color: var(--accent); }
.divider { color: #444; font-size: 0.9rem; }
.ai-part { color: var(--accent); font-weight: 600; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }

/* Scintillio Magico Icona AI */
.ai-icon { display: inline-block; font-size: 1rem; animation: sparkle 2s infinite alternate ease-in-out; }
@keyframes sparkle {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 5px rgba(255,255,255,0.8)); }
}

/* Overrides Mobile Esclusivi per Footer */
@media (max-width: 768px) {
    .testimonial-box { text-align: left; } /* Meglio a sinistra anche su mobile per leggibilità */
    .social-links { justify-content: center; }
    .pay-icons { justify-content: center; }
    .credits-badge { flex-direction: column; gap: 8px; padding: 15px 20px; border-radius: 12px; width: 100%; max-width: 300px; margin: 0 auto; }
    .divider { display: none; } /* Nascondiamo la stanghetta su mobile, andranno a capo */
}



/* =========================================
   8.2 COOKIE BANNER
   ========================================= */
.cookie-banner {
    position: fixed;
    bottom: -100%; /* Nascosto di default */
    left: 0;
    width: 100%;
    background: var(--primary-dark);
    padding: 20px 0;
    z-index: 10000;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
    transition: bottom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.cookie-banner.show { bottom: 0; } /* Classe attivata dal JS */
.cookie-banner .underline { text-decoration: underline; }
.btn-small { padding: 10px 20px; font-size: 0.8rem; }
.justify-between { justify-content: space-between; }


/* =========================================
   10. NUOVE CLASSI — AGGIUNTE STRATEGICHE
   (Aggiungere in fondo al Master CSS)
   ========================================= */

/* --- SEZIONE PADDING RIDOTTA (Shop in Home) --- */
.section-padding-sm { padding: 60px 0; }

/* --- SHOP IN HOME GRID (Puro HTML5 Semantico) --- */
.shop-home-title {
    font-size: 2.8rem;
    color: var(--primary-dark);
    line-height: 1.1;
}

.shop-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.shop-home-card {
    background: var(--bg-white);
    border-radius: 8px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: var(--shadow-card);
    border: 2px solid transparent;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.shop-home-card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(15, 43, 21, 0.12);
}

/* Card in evidenza (flagship) */
.shop-home-card--featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, #fff 0%, #fffdf5 100%);
    position: relative; /* Serve solo per posizionare il badge "PIÙ VENDUTO" */
}

.shop-home-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: var(--primary-dark);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-bottom-left-radius: 6px;
}

.shop-home-card__icon a {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 20px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    display: inline-block;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.shop-home-card:hover .shop-home-card__icon a {
    transform: scale(1.15) rotate(-5deg);
}

.shop-home-card__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.shop-home-card__title a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.2s;
}

.shop-home-card__title a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.shop-home-card__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

.shop-home-card__cta {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: auto;
    text-decoration: none;
    transition: var(--transition);
}

.shop-home-card__cta:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- SEPARATORI NARRATIVI --- */
.narrative-separator {
    background: var(--bg-cream);
    padding: 20px 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.narrative-separator--accent {
    background: var(--primary-dark);
}

.narrative-separator--close {
    background: var(--primary-dark);
}

.narrative-separator__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.narrative-separator__text {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-muted);
    white-space: nowrap;
}

.narrative-separator--accent .narrative-separator__text,
.narrative-separator--close .narrative-separator__text {
    color: var(--accent);
}

.narrative-separator__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
    max-width: 300px;
}

.narrative-separator--accent .narrative-separator__line,
.narrative-separator--close .narrative-separator__line {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* --- SEZIONE TESTIMONIANZE --- */
.testimonials-section { /* usa .reviews-grid già esistente nel CSS */ }

.trust-bar {
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.trust-bar__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--primary-dark);
}

.trust-bar__icon {
    font-size: 1.6rem;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.trust-bar__sep {
    width: 1px;
    height: 30px;
    background: #ddd;
}







/* ==========================================================================
   ARTICOLI MAGAZINE (articolo.njk)
   ========================================================================== */

/* Breadcrumb Articolo */
.article-breadcrumb-wrapper {
    background: var(--bg-light-gray, #f4f4f4);
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}
.article-breadcrumb-nav {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
}
.article-breadcrumb-nav a {
    color: var(--primary, #28a745);
    text-decoration: none;
}
.article-breadcrumb-nav a:hover {
    text-decoration: underline;
}
.breadcrumb-sep {
    margin: 0 8px;
}

/* Hero Articolo */
.article-hero {
    background: linear-gradient(180deg, var(--primary-dark, #0f2b15) 0%, #1a3d0e 100%);
    padding: 60px 0 40px;
    border-bottom: 4px solid var(--accent, #d4af37);
}
.article-container {
    max-width: 800px;
    margin: 0 auto;
}
.article-title {
    color: #fff;
    font-size: 2.8rem;
    margin: 15px 0 20px;
    line-height: 1.1;
}
.article-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* Corpo Articolo */
.article-main-wrapper {
    margin: 60px auto;
    padding: 0 20px;
}
.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

/* Box Marketing Automatico (La Trappola WAA) */
.marketing-box {
    background: var(--bg-light-gray, #f4f4f4);
    border: 2px solid var(--primary-dark, #0f2b15);
    border-radius: 8px;
    padding: 40px;
    margin-top: 60px;
}
.marketing-box-title {
    color: var(--primary-dark, #0f2b15);
    margin-top: 0;
    font-size: 1.4rem;
}
.marketing-box-desc {
    color: var(--text-muted, #666);
    margin-bottom: 20px;
}
.marketing-divider {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}
.marketing-product-card {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    max-width: 400px;
    margin: 0 auto;
}
.marketing-product-name {
    font-size: 1.2rem;
    display: block;
    color: var(--primary-dark, #0f2b15);
    margin-bottom: 10px;
    font-weight: bold;
}
.marketing-product-price {
    color: var(--accent, #d4af37);
    font-size: 2rem;
    font-weight: 900;
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-heading, inherit);
}
.marketing-product-note {
    color: var(--text-muted, #666);
    display: block;
    margin-bottom: 20px;
}

/* Quiz Correlati */
.related-quizzes-section {
    margin-top: 60px;
}
.related-quizzes-title {
    color: var(--primary-dark, #0f2b15);
    border-left: 4px solid var(--accent, #d4af37);
    padding-left: 15px;
}
.related-quiz-card {
    padding: 20px;
    text-decoration: none;
    display: block;
}
.related-quiz-name {
    color: var(--primary-dark, #0f2b15);
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
.related-quiz-meta {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
}

/* Adattamenti Mobile */
@media (max-width: 768px) {
    .article-title { font-size: 2.2rem; }
    .marketing-box { padding: 25px; }
    .article-main-wrapper { margin: 40px auto; }
}

/* ==========================================================================
   PAGINA PRODOTTO MARKETPLACE (prodotto.njk)
   ========================================================================== */

/* Layout Principale */
.product-section {
    padding: 60px 20px;
    background: var(--bg-body, #fafafa);
}
.product-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Colonna Contenuto (Sinistra) */
.product-content-col {
    flex: 2;
    min-width: 300px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
}
.product-image-wrapper {
    margin-bottom: 40px;
    text-align: center;
}
.product-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Colonna Acquisto Sticky (Destra) */
.product-buy-col {
    flex: 1;
    min-width: 300px;
}
.product-buy-box {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.product-title {
    color: var(--primary-dark, #0f2b15);
    margin: 15px 0;
    font-size: 2rem;
    line-height: 1.1;
}
.product-price-block {
    margin: 20px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.product-price-amount {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent, #d4af37);
    font-family: var(--font-heading, inherit);
    display: block;
}
.product-price-note {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted, #666);
    margin-top: 8px;
}

/* Bottoni e Moduli Interni */
.btn-checkout {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    padding: 18px;
    background: var(--primary-dark, #0f2b15);
    color: var(--accent, #d4af37);
    font-weight: 800;
    text-decoration: none;
    border-radius: 4px;
    text-transform: uppercase;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(15, 43, 21, 0.3);
}
.checkout-disabled {
    background: var(--bg-light-gray, #f4f4f4);
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted, #666);
}

/* Alert e Box Informativi */
.upsell-alert {
    background: #fff8e1;
    border-left: 5px solid #ffc107;
    padding: 20px 25px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 40px;
}
.upsell-alert-title {
    color: #7d5a00;
    margin: 0 0 8px;
    font-size: 1.1rem;
}
.guarantee-box {
    background: var(--bg-light-gray, #f4f4f4);
    border-left: 5px solid var(--accent, #d4af37);
    border-radius: 0 8px 8px 0;
    padding: 30px;
    margin-top: 50px;
}

/* Sticky behavior per Desktop */
@media (min-width: 900px) {
    .product-buy-box {
        position: sticky;
        top: 20px; /* Evita che si sovrapponga all'header se hai un header fisso */
    }
}
@media (max-width: 768px) {
    .product-buy-col {
        order: -1; /* Su mobile il box acquisto va SOPRA la descrizione lunga */
    }
}



/* ==========================================================================
   LAYOUT QUIZ (quiz.njk)
   ========================================================================== */

/* Hero del Quiz */
.quiz-hero-section {
    background: linear-gradient(180deg, var(--primary-dark, #0f2b15) 0%, #1a3d0e 100%);
    padding: 50px 0 30px;
    border-bottom: 4px solid var(--accent, #d4af37);
}
.quiz-hero-breadcrumb {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}
.quiz-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.quiz-hero-breadcrumb a:hover {
    text-decoration: underline;
    color: #fff;
}
.quiz-hero-breadcrumb span {
    color: var(--accent, #d4af37);
}
.quiz-tags-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.quiz-tag-level {
    background: var(--accent, #d4af37);
    color: var(--primary-dark, #0f2b15);
}
.quiz-tag-questions {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.quiz-hero-title {
    color: #fff;
    font-size: 2.2rem;
    margin: 0;
    line-height: 1.2;
}
.quiz-hero-desc {
    color: rgba(255, 255, 255, 0.75);
    margin: 15px 0 0;
    font-size: 1rem;
    max-width: 700px;
    line-height: 1.5;
}

/* Corpo e Navigazione */
.quiz-main-content {
    padding-top: 40px;
    padding-bottom: 40px;
}
.quiz-pagination-wrapper {
    background: var(--bg-light-gray, #f4f4f4);
    border-top: 1px solid #e0e0e0;
    padding: 25px 0;
}
.quiz-pagination-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.quiz-nav-link {
    color: var(--primary, #28a745);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
}
.quiz-nav-link:hover {
    text-decoration: underline;
}
.quiz-nav-all {
    color: var(--text-muted, #666);
    font-size: 0.85rem;
    text-decoration: underline;
}

/* Upsell Box (Da Accademia a Dispensa) */
.quiz-upsell-section {
    background: var(--primary-dark, #0f2b15);
    padding: 50px 0;
    border-top: 4px solid var(--accent, #d4af37);
}
.quiz-upsell-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.quiz-upsell-title {
    color: #fff;
    font-size: 1.8rem;
    margin: 0 0 10px;
}
.quiz-upsell-desc {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 30px;
}
.quiz-upsell-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--accent, #d4af37);
    border-radius: 8px;
    padding: 30px;
    display: inline-block;
    min-width: 300px;
}
.quiz-upsell-name {
    color: #fff;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 8px;
}
.quiz-upsell-price {
    color: var(--accent, #d4af37);
    font-size: 2.2rem;
    font-weight: 900;
    display: block;
    margin-bottom: 5px;
}
.quiz-upsell-note {
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 20px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .quiz-hero-title { font-size: 1.8rem; }
    .quiz-upsell-card { min-width: 100%; width: 100%; }
}


/* ==========================================================================
   HUB CATEGORIA QUIZ (hub-quiz.njk)
   ========================================================================== */

/* Hero Hub */
.hub-hero-section {
    background: linear-gradient(180deg, var(--primary-dark, #0f2b15) 0%, #1a3d0e 100%);
    padding: 60px 0 40px;
    border-bottom: 4px solid var(--accent, #d4af37);
}
.hub-breadcrumb {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}
.hub-breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.hub-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.hub-breadcrumb span {
    color: var(--accent, #d4af37);
}
.hub-hero-tag {
    background: var(--accent, #d4af37);
    color: var(--primary-dark, #0f2b15);
    margin-bottom: 15px;
    display: inline-block;
}
.hub-hero-title {
    color: #fff;
    font-size: 2.5rem;
    margin: 10px 0 15px;
    line-height: 1.1;
}
.hub-hero-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    max-width: 650px;
    line-height: 1.6;
    margin: 0;
}

/* Banner Accademia */
.hub-info-banner {
    background: var(--bg-light-gray, #f4f4f4);
    border-left: 5px solid var(--accent, #d4af37);
    padding: 25px 30px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 60px;
}
.hub-info-title {
    color: var(--primary-dark, #0f2b15);
    margin: 0 0 8px;
    font-size: 1.1rem;
}
.hub-info-text {
    margin: 0;
    color: var(--text-muted, #666);
    font-size: 0.95rem;
    line-height: 1.6;
}
.hub-info-link {
    color: var(--primary, #28a745);
    font-weight: 700;
    text-decoration: none;
}
.hub-info-link:hover {
    text-decoration: underline;
}

/* Esplora Altre Aree */
.hub-explore-wrapper {
    margin-top: 70px;
}
.hub-explore-title {
    color: var(--primary-dark, #0f2b15);
    border-left: 4px solid var(--accent, #d4af37);
    padding-left: 15px;
    margin-bottom: 25px;
}
.hub-explore-card {
    text-align: center;
    padding: 25px 15px;
    text-decoration: none;
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;
}
.hub-explore-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.hub-explore-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}
.hub-explore-name {
    color: var(--primary-dark, #0f2b15);
    display: block;
    font-weight: bold;
}

@media (max-width: 768px) {
    .hub-hero-title { font-size: 2rem; }
}

/* ==========================================================================
   CSS SPECIFICO MODULO QUIZ & TRIADE (WAA Architecture)
   ========================================================================== */

/* Mappatura Variabili Locali su Globali (Per consistenza col tema) */
:root {
    --q-bg-body: var(--bg-body, #fdfbf7);
    --q-primary: var(--primary, #2e5c1d);
    --q-dark: var(--primary-dark, #0f2b15);
    --q-accent: var(--accent, #d4af37);
    --q-white: var(--bg-white, #ffffff);
    --q-text: var(--text-main, #1a1a1a);
    --q-shadow: var(--shadow-card, 0 15px 35px rgba(15, 43, 21, 0.08));
}

/* --- CONTENITORE PRINCIPALE --- */
.quiz-section { 
    padding: 40px 0; 
}

.quiz-card {
    background: var(--q-white);
    border-radius: 8px; /* Uniformato al Master CSS */
    box-shadow: var(--q-shadow);
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- HEADER DEL QUIZ --- */
.quiz-header {
    background: var(--q-dark); /* Fallback */
    background: linear-gradient(135deg, var(--q-dark) 0%, #000 100%);
    color: var(--q-accent);
    padding: 40px 30px;
    text-align: center;
    border-bottom: 4px solid var(--q-accent);
}

.quiz-header h2 { 
    font-family: var(--font-heading); 
    font-size: 2.2rem; 
    margin: 15px 0 0 0; 
    color: #fff; 
    line-height: 1.2;
}

.quiz-header .badge-level {
    background: var(--q-accent); 
    color: var(--q-dark); 
    padding: 6px 16px;
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    font-weight: 800; 
    border-radius: 4px;
    display: inline-block;
}

.quiz-body { 
    padding: 50px 40px; 
}

/* --- PROGRESS BAR LUSSO --- */
.progress-container { margin-bottom: 50px; }
.progress-info { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 12px; 
    font-family: var(--font-body); 
    font-size: 0.9rem; 
    color: #666; 
    font-weight: 600; 
}

.progress-track { 
    height: 6px; 
    background: #f0f0f0; 
    width: 100%; 
    border-radius: 10px;
    overflow: visible; /* Per mostrare il pallino */
    position: relative; 
}

.progress-fill { 
    height: 100%; 
    background: var(--q-primary); 
    width: 0%; 
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
    border-radius: 10px;
    position: relative; 
}

/* Il "pallino" dorato alla fine della barra */
.progress-fill::after { 
    content: ''; 
    position: absolute; 
    right: -6px; 
    top: -4px; 
    width: 14px; 
    height: 14px; 
    background: var(--q-accent); 
    border-radius: 50%; 
    box-shadow: 0 0 10px rgba(212,175,55,0.6); 
    z-index: 2;
}

/* --- DOMANDE --- */
.question-box { 
    display: none; 
    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1); 
}
.question-box.active { display: block; }

.question-text { 
    font-family: var(--font-heading); 
    font-size: 1.8rem; 
    font-weight: 500; 
    margin-bottom: 40px; 
    line-height: 1.3; 
    color: var(--q-dark); 
    border-left: 4px solid var(--q-accent); 
    padding-left: 25px;
}

/* --- OPZIONI (Bottoni di risposta) --- */
.options-list { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.option-btn {
    background: #fff; 
    border: 1px solid #e0e0e0; 
    color: var(--q-text);
    padding: 25px; 
    border-radius: 8px; 
    cursor: pointer; 
    text-align: left; 
    transition: all 0.3s; 
    display: flex; 
    align-items: flex-start; 
    gap: 20px; 
    position: relative;
}

.option-btn:hover { 
    border-color: var(--q-primary); 
    background: #fcfdfc; 
    transform: translateX(5px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.option-marker {
    font-family: var(--font-heading); 
    font-size: 1.6rem; 
    color: #ccc; 
    font-weight: 400; 
    min-width: 30px;
    line-height: 1;
}
.option-btn:hover .option-marker { color: var(--q-primary); }

.option-content strong { 
    display: block; 
    font-size: 1.1rem; 
    margin-bottom: 6px; 
    color: var(--q-dark); 
}
.option-content p { 
    font-size: 0.95rem; 
    color: #666; 
    margin: 0; 
    line-height: 1.5; 
}

/* --- AREA RISULTATI --- */
.result-box { 
    display: none; 
    animation: slideUp 0.8s; 
    padding: 10px; 
    text-align: left; 
}

.result-header { 
    border-bottom: 1px solid #eee; 
    padding-bottom: 20px; 
    margin-bottom: 30px; 
}

.result-score { 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.9rem; 
    display: block;
    margin-bottom: 10px;
}

.result-title { 
    font-size: 2.8rem; 
    color: var(--q-dark); 
    margin: 0; 
    line-height: 1.1; 
}

.profile-desc { 
    font-size: 1.15rem; 
    color: #444; 
    margin-bottom: 40px; 
    line-height: 1.7; 
}

/* ==========================================================================
   SEZIONE PROFILI / PILLOLE (Tra Social e FAQ)
   ========================================================================== */
.profiles-section {
    padding: 60px 0;
    background-color: #fff; /* Stacco dal grigio delle FAQ */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.profiles-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.profiles-header h2 {
    font-family: var(--font-heading); /* Playfair Display o simile */
    color: var(--primary-dark);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.profiles-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Griglia a 3 colonne */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* Card della singola "Pillola" */
.profile-card-preview {
    background: #fdfbf7; /* Crema chiaro */
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card-preview:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(15, 43, 21, 0.08);
    border-color: rgba(212, 175, 55, 0.3); /* Oro */
}

/* Icone */
.p-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
}

.pc-label { color: #d93025; } /* Rosso per errori/chimica */
.pc-price { color: #e67e22; } /* Arancio per costi */
.pc-visual { color: var(--primary); } /* Verde per verità */

.profile-card-preview h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.profile-card-preview p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* ==========================================================================
   CSS "TRIADE DI USCITA" (NAVIGAZIONE SFERICA)
   Griglia specifica per i 3 box finali (Shop, Edu, Game)
   ========================================================================== */
.triad-container {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default desktop 3 colonne */
    gap: 20px;
}

.triad-col {
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.triad-col:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Etichetta sopra i titoli (es. "Rimedia Subito") */
.triad-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 12px;
    font-weight: 800;
}

.triad-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--q-dark);
    margin-bottom: 8px;
    line-height: 1.2;
}

/* --- STILE SPECIFICO: COLONNA SHOP (Evidenziata) --- */
.triad-shop {
    background: var(--q-bg-body); /* Crema */
    border: 2px solid var(--q-accent);
    position: relative;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);
}

.triad-price {
    display: block;
    color: var(--q-accent);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Piccola nota sotto il bottone shop */
.triad-shop small {
    display: block;
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #888;
}

/* --- STILE SPECIFICO: COLONNE LINK (Edu & Game) --- */
.triad-link {
    background: #fff;
    border: 1px solid #eee;
}

.triad-link:hover {
    border-color: #ddd;
}

/* Link testuali nelle colonne secondarie */
.triad-link a.underline {
    margin-top: auto; /* Spinge il link in fondo se il testo è corto */
    font-weight: 700;
    font-size: 0.9rem;
    padding-top: 15px;
    display: inline-block;
}

/* --- ANIMAZIONI --- */
@keyframes fadeIn { 
    from { opacity:0; transform: translateY(20px); } 
    to { opacity:1; transform: translateY(0); } 
}
@keyframes slideUp { 
    from { transform:translateY(40px); opacity:0; } 
    to { transform:translateY(0); opacity:1; } 
}

/* --- MEDIA QUERIES (Mobile) --- */
@media (max-width: 900px) {
    .quiz-body { padding: 30px 20px; }
    .question-text { font-size: 1.4rem; padding-left: 15px; }
    .option-btn { padding: 20px; }
    .result-title { font-size: 2rem; }
    
    /* Triade su Mobile: Diventa una colonna unica */
    .triad-container { 
        grid-template-columns: 1fr; 
        gap: 25px;
    }
    
    /* Lo Shop va sempre per primo su mobile per conversione */
    .triad-shop { 
        order: -1; 
        padding: 30px 20px; /* Più grande su mobile */
    }
}


/* ==========================================================================
   CARDS E-COMMERCE SEMANTICHE (Puro HTML5, zero trucchi CSS)
   ========================================================================== */

/* Card Base Prodotti Secondari */
.semantic-shop-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.semantic-shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--accent);
}
.semantic-shop-title { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 8px; }
.semantic-shop-title a { color: var(--primary-dark); text-decoration: none; transition: color 0.2s; }
.semantic-shop-title a:hover { color: var(--primary); text-decoration: underline; }
.semantic-shop-desc { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 15px; line-height: 1.5; flex: 1; }
.semantic-shop-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.semantic-shop-price { color: var(--accent); font-size: 1.3rem; font-weight: 900; }
.semantic-shop-link { color: var(--primary); font-weight: 700; font-size: 0.85rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s; }
.semantic-shop-link:hover { color: var(--primary-dark); text-decoration: underline; }

/* Stili specifici per la FLAGSHIP (La Latta) */
.flagship-card {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flagship-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2);
}
.flagship-title { font-size: 1.6rem; margin: 10px 0 8px; font-family: var(--font-heading); }
.flagship-title a { color: var(--primary-dark); text-decoration: none; transition: color 0.2s; }
.flagship-title a:hover { color: var(--primary); }
.flagship-btn {
    display: inline-block; margin-top: 15px; padding: 12px 25px;
    background: var(--primary-dark); color: var(--accent);
    font-weight: 800; border-radius: 4px; text-decoration: none;
    text-transform: uppercase; letter-spacing: 1px;
    transition: background 0.3s, transform 0.2s;
}
.flagship-card:hover .flagship-btn { background: #000; }
.flagship-btn:hover { transform: translateY(-2px); }

/* Stili specifici Aromatizzati */
.flavor-card {
    background: #fff; border-radius: 6px; padding: 20px;
    text-align: center; border: 1px solid #e0e0e0; transition: all 0.3s;
}
.flavor-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.flavor-title { font-size: 0.95rem; margin-bottom: 10px; }
.flavor-title a { color: var(--primary-dark); text-decoration: none; }
.flavor-link { 
    display: inline-block; background: var(--primary-dark); color: var(--accent); 
    padding: 6px 15px; border-radius: 4px; font-size: 0.9rem; font-weight: 700; 
    text-decoration: none; transition: background 0.3s; 
}
.flavor-link:hover { background: #000; }





/* =========================================
   9. MOBILE OVERRIDES (Regole Responsive Globali)
   ========================================= */
@media (max-width: 900px) {
    /* Tipografia e Spaziature ridotte */
    .section-header h2 { font-size: 2.2rem; }
    .text-xl { font-size: 2rem; }
    .internal-hero h1 { font-size: 2.5rem; }
    .section-padding { padding: 60px 0; }
    .container { width: 95%; padding: 0 15px; }
    
    /* Disinnesco dei Layout a Colonne Affiancate */
    .split-layout, .exam-split-layout { flex-direction: column; gap: 30px; text-align: center; }
    .grid-2-col, .cards-grid, .myth-grid, .guide-grid { grid-template-columns: 1fr; }
    
    /* Master Card */
    .master-card__aside, .master-card__content { padding: 30px 20px; min-width: 100%; }
    
    /* Stats & Health Box */
    .stats-list { justify-content: center; }
    .health-benefits-box { padding: 30px 20px; }
    .check-list-grid { grid-template-columns: 1fr; }
    
    /* Estrazione (Tecnica) */
    .extraction-comparison { flex-direction: column; gap: 30px; }
    .olive-side { border-right: none; border-bottom: 1px dashed #ccc; padding-right: 0; padding-bottom: 20px; }
    
    /* Esame Banner */
    .exam-split-layout { flex-direction: column-reverse; }
    .exam-img-col { max-width: 100%; }
    .exam-banner-dark { padding: 40px 20px; }
    
    /* Tabelle (Aggiustamento padding) */
    .px-40 { padding-left: 15px; padding-right: 15px; }
    .card-footer-gray { padding: 20px; }
    
    /* Footer */
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-links li { border-bottom: none; }
    
    /* Gamification & CTA */
    .flex-wrap-center { flex-direction: column; text-align: center; }
    .product-preview { flex-direction: column; padding: 20px; gap: 20px; }
}

@media (max-width: 480px) {
    /* Smartphone Piccoli (iPhone SE, ecc) */
    h2, h3 { word-wrap: break-word; hyphens: auto; }
    .btn { width: 100%; display: block; } /* Pulsanti full-width comodi da tappare */
    .quiz-card-premium__body { padding: 20px; }
}


/* =========================================
   OVERRIDE MOBILE PER HEADER
   (Aggiungere nella SEZIONE 9 del Master CSS)
   ========================================= */
@media (max-width: 900px) {
    .mobile-toggle { display: block; z-index: 10001; }
    
    .desktop-nav {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: var(--primary-dark);
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        opacity: 0; pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }
    
    .desktop-nav.open { opacity: 1; pointer-events: auto; }
    
    .desktop-nav ul { flex-direction: column; gap: 40px; text-align: center; }
    .desktop-nav a { font-size: 1.5rem; color: var(--bg-white); }
    .desktop-nav a::after { display: none; } /* Tolgo la riga su mobile */
    
    .cookie-banner .flex-wrap-center { flex-direction: column; text-align: center; gap: 15px; }
}


/* =========================================
   OVERRIDE MOBILE PER HERO & TICKER
   (Aggiungere alla SEZIONE 9: Mobile Overrides)
   ========================================= */
@media (max-width: 768px) {
    .hero { 
        height: auto; 
        min-height: auto;
        padding: 140px 0 80px 0; /* Più spazio sopra per via dell'header sticky */
    }
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.1rem; }
    
    /* I bottoni vanno a capo occupando il 100% della larghezza */
    .hero-content .flex-wrap-center { flex-direction: column; width: 100%; }
    .hero-content .btn { width: 100%; }

    /* Il ticker va a capo per non stringere il testo */
    .live-ticker .flex-center { flex-direction: column; gap: 5px; }
}


/* =========================================
   FIX PAGINA PRODOTTO MOBILE
   ========================================= */
@media (max-width: 768px) {
    /* Centra matematicamente gli elementi nel flexbox e riduce il gap enorme di 50px */
    .product-layout {
        justify-content: center;
        gap: 30px; 
    }

    /* Rimuove il blocco rigido a 300px che causa l'overflow e lo slittamento a destra.
       Con 100% si adatteranno perfettamente alla griglia mobile lasciando i margini intatti. */
    .product-content-col,
    .product-buy-col {
        min-width: 100%;
    }

    /* (Consiglio Performance Visiva) 
       40px di padding interno su mobile sono troppi per schermi da 350px,
       soffocherebbero il testo stringendolo troppo al centro. Così respira: */
    .product-buy-box {
        padding: 30px 20px;
    }


/* Spegne il doppio padding: fa respirare il contenuto recuperando 40px di larghezza! */
    .product-section {
        padding-left: 0;
        padding-right: 0;
    }
}