/* ==========================================================================
   3. FIX GLOBALI E RESPONSIVE
   ========================================================================== */
footer, #footer, .block_newsletter {
    width: 100% !important;
    clear: both !important;
    display: block !important;
}

@media (max-width: 991px) {
    body[id*="ets_blog"] #left-column, 
    body[id*="ets_blog"] #content-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body[id*="ets_blog"] .columns-container.container {
        flex-direction: column !important;
    }
}

/* --- STILE GRIGLIA CATEGORIE IL CRUSCAIOLO --- */

.category-grid-clean {
    margin: 2rem 0;
}

.cat-list {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}

.cat-list li {
    border-bottom: 1px solid #f0f0f0;
}

.cat-list li:last-child {
    border-bottom: none;
}

.cat-list li a {
    display: block;
    padding: 10px 12px;
    color: #333;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-left: 0 solid #a52a2a; /* Linea pronta per l'animazione */
}

/* Effetto Hover */
.cat-list li a:hover {
    background-color: #fcf8f8;
    color: #a52a2a;
    padding-left: 20px;
    border-left: 4px solid #a52a2a;
    text-decoration: none;
}

/* Pulsante Torna alla Libreria Personalizzato */
.btn-libreria {
    background-color: #a52a2a !important;
    border-color: #a52a2a !important;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.btn-libreria:hover {
    background-color: #802020 !important;
    transform: scale(1.05);
}

.text-center { text-align: center; }

/* Importazione del font Montserrat con pesi leggibili */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

.chi-siamo-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Citazione Hero */
.grande-citazione {
    font-size: 3.2rem !important;
    color: #a52a2a;
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    margin-bottom: 70px;
    text-align: center;
}

/* Titoli */
.title-gold {
    color: #8c7150;
    font-weight: 500;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Testo Principale Sezione Alta */
.testo-principale-enfasi {
    font-size: 1.15rem;
    line-height: 1.9;
    text-align: left;
}

/* Testo Generale */
.testo-principale {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Gestione Logo Quadrato a Destra */
.logo-container {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
}

.logo-quadrato {
    max-width: 100%;
    height: auto;
}

.shadow-light {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Elenchi e Note */
.lista-tesori {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.lista-tesori li {
    padding: 8px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid #f2f2f2;
}
.lista-tesori li::before {
    content: "•";
    color: #a52a2a;
    margin-right: 15px;
}

.nota-segreta {
    border-left: 4px solid #a52a2a;
    background: #f9f6f2;
    padding: 25px;
    margin-top: 20px;
    font-style: italic;
}

/* Cornici Immagini */
.image-frame {
    border: 1px solid #eee;
    padding: 10px;
    background: #fff;
}

.shadow {
    box-shadow: 0 15px 45px rgba(0,0,0,0.1) !important;
}

/* Sfondi e Separatori */
.bg-sepia {
    background-color: #fcf9f4;
    padding: 60px 30px;
    margin: 50px 0;
}

.border-top-classic {
    border-top: 1px solid #eee;
    padding-top: 60px;
    margin-top: 60px;
}

.invito-finale {
    font-size: 1.5rem;
    font-weight: 500;
    color: #a52a2a;
    margin-top: 40px;
}

/* Responsive */
@media (max-width: 767px) {
    .grande-citazione { font-size: 2rem !important; }
    .col-md-5 { margin-top: 40px; }
}

/* ==========================================================================
   4. STILE "IL CRUSCAIOLO" - ETEREO E LEGGERO
   ========================================================================== */

:root {
    --bg-etereo: #fefefb;      /* Un bianco seta, appena scaldato */
    --rosso-cruscaiolo: #a52a2a;
    --testo-leggero: #4a4a4a;   /* Grigio antracite morbido per non appesantire */
    --accento-oro: #b59b77;    /* Un oro pallido per dettagli discreti */
}

/* Sfondo generale: effetto seta, molto luminoso */
body {
    background-color: var(--bg-etereo) !important;
    color: var(--testo-leggero);
}

/* --- SCHEDE PRODOTTI (Visuale Eterea) --- */
.product-miniature {
    background: transparent !important; /* Rimuove lo stacco del box bianco */
    border: none !important;            /* Via il bordo tabellare */
    box-shadow: none !important;        /* Via le ombre pesanti di default */
    margin-bottom: 2rem;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Effetto al passaggio del mouse: il libro "si solleva" appena */
.product-miniature:hover {
    transform: translateY(-5px);
}

.product-miniature .thumbnail-container {
    background: transparent;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* Ombra leggerissima, quasi un soffio */
    padding: 10px;
    transition: box-shadow 0.3s ease;
}

.product-miniature:hover .thumbnail-container {
    box-shadow: 0 15px 45px rgba(165, 42, 42, 0.08); /* Ombra appena rosata */
}

/* --- TITOLI E TESTI (Manteniamo i tuoi font) --- */
.product-title a {
    color: var(--testo-leggero) !important;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.2px;
}

.product-title a:hover {
    color: var(--rosso-cruscaiolo) !important;
}

/* --- BOTTONI E ACCENTI --- */
.btn-primary, .add-to-cart {
    background-color: var(--rosso-cruscaiolo) !important;
    border: none !important;
    border-radius: 2px !important; /* Un minimo di smussatura per non essere taglienti */
    padding: 10px 20px;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    opacity: 0.9;
}

.btn-primary:hover, .add-to-cart:hover {
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(165, 42, 42, 0.2);
}

/* Prezzi: eleganti e sottili */
.current-price {
    color: var(--rosso-cruscaiolo) !important;
    font-weight: 500 !important;
}

/* Footer e Header più ariosi */
#header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px); /* Effetto vetro moderno e leggero */
    border-bottom: 1px solid rgba(165, 42, 42, 0.1);
}

#footer {
    border-top: 1px solid rgba(140, 113, 80, 0.1);
    background-color: #fff !important; /* Manteniamo il footer luminoso */
}

/* Badge: piccoli ed eleganti */
.badge {
    border-radius: 0;
    font-weight: 400;
    letter-spacing: 1px;
    background: var(--accento-oro) !important;
}

/* Banner superiore pagina Contatti */
.contact-header-banner {
    width: 100%;
    margin-top: 40px;    /* <--- Spazio sopra l'immagine */
    margin-bottom: 30px; /* Spazio sotto l'immagine */
    overflow: hidden;
    display: block;
}

.banner-contatti {
    width: 100%;
    height: auto;
    max-width: 1280px; 
    display: block;
    margin: 0 auto; 
    border-radius: 4px; /* Un leggero arrotondamento la rende più sobria */
    border: 1px solid #f0f0f0;
}

/* Regolazione per Mobile */
@media (max-width: 767px) {
    .contact-header-banner {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* ============================================================
   FIX ALTEZZA E SCROLL MENU MOBILE - HUMMINGBIRD
   ============================================================ */

@media (max-width: 991px) {
    /* 1. Forza la tendina a occupare tutta l'altezza e permettere lo scroll */
    .ps-mainmenu--mobile.offcanvas {
        height: 100vh !important; /* Occupa tutta l'altezza del display */
        max-height: 100vh !important;
        overflow-y: auto !important; /* Abilita lo scroll verticale se i link sono tanti */
        display: flex !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
    }

    /* 2. Assicura che il corpo del menu sia visibile e scorrevole */
    .ps-mainmenu__mobile {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Rende lo scroll fluido su iPhone */
    }

    /* 3. Forza la visibilità dei link (Nero su Bianco) */
    .ps-mainmenu--mobile .menu__link,
    .ps-mainmenu--mobile .menu__list li a {
        color: #000000 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        padding: 18px 20px !important; /* Aumenta l'area cliccabile */
        border-bottom: 1px solid #eeeeee !important;
        min-height: 50px !important; /* Spazio garantito per ogni voce */
    }

    /* 4. Fix per la "X" di chiusura che a volte sparisce in alto */
    .offcanvas-header {
        background: #ffffff !important;
        position: sticky !important;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid #ddd;
    }
}

/* Forza l'altezza automatica della lista interna per mostrare tutti i link */
.ps-mainmenu__mobile ul.menu__list {
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
    visibility: visible !important;
}

/* Rimuove eventuali margini negativi che spingono i link fuori schermo */
.ps-mainmenu__mobile li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ============================================================
   RIFINITURA ESTETICA MENU MOBILE - IL CRUSCAIOLO
   ============================================================ */

@media (max-width: 991px) {
    /* 1. Stile dei link: aggiungiamo un po' di eleganza */
    .ps-mainmenu--mobile .menu__link {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 500 !important;
        color: #333 !important;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }

    /* 2. Effetto al tocco (feedback visivo) */
    .ps-mainmenu--mobile .menu__link:active {
        background-color: #fdfaf5 !important; /* Colore carta antica */
        color: #a52a2a !important; /* Rosso bordeaux */
    }

    /* 3. Sistema la testata del menu (dove c'è la X) */
    .offcanvas-header {
        border-bottom: 2px solid #a52a2a !important; /* Linea bordeaux di separazione */
        padding: 1.5rem 1rem !important;
    }

    /* 4. Colore del numero nel carrello (badge) per mobile */
    .header-block__badge {
        background-color: #a52a2a !important;
        color: #ffffff !important;
    }
}

/* 5. FIX DEFINITIVO PER IL LOGO SU MOBILE */
/* Evita che il logo sia gigante o minuscolo */
.header-bottom__logo img {
    height: auto !important;
    width: auto !important;
    max-height: 45px !important; /* Dimensione ideale per Hummingbird mobile */
}