/* ============================================================
   LAYOUT - STILE PREMIUM UNIFICATO (MOBILE-FIRST)
   ============================================================ */

/* ==========================================
   SCUDO PROTETTIVO HEADER CUSTOM (FIX WOOCOMMERCE)
   ========================================== */

/* ==========================================
   FIX DEFINITIVO HEADER E SCROLL LATERALE
   ========================================== */

/* --- 1. BLOCCA LO SCROLL ORIZZONTALE (ANTI-SBAVATURE) --- */
/* Rimosso il tag 'html' per evitare il blocco del primo scroll verticale */
/* --- 1. FIX DEFINITIVO SCROLL LISCIO E ANTI-SBAVATURE --- */
/* Rimosso overflow dal body per sbloccare il primo scroll */
html, body {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.df-product-wrapper {
    overflow-x: clip; /* 'clip' taglia le sbavature laterali senza bloccare la rotellina del mouse! */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-top: 50px; 
}

/* Sfondo fisso */
.df-fixed-background, 
.df-bg-img {
    width: 100%; 
    max-width: 100%;
    pointer-events: none !important; /* FIX MAGICO: Impedisce allo sfondo di "catturare" la rotellina del mouse */
}

/* --- 1. SFONDO FISSO (FIX SCROLL) --- */
.df-fixed-background {
    position: fixed;
    top: -15vh; 
    left: 0;
    width: 100%; 
    height: 130vh; 
    z-index: -1;
    background-color: #fcfbf9;
    
    /* RIMOSSO IL TRANSLATE3D CHE BLOCCAVA LO SCROLL */
    backface-visibility: hidden;
    pointer-events: none;
}


/* --- 2. SCUDO HEADER (RISPETTA IL TEMA ORIGINALE) --- */
/* Rende panna i link del menu senza rompere la griglia */
/* --- 2. SCUDO HEADER (RISPETTA IL TEMA ORIGINALE) --- */
/* Rende panna i link del menu senza rompere la griglia */
body.single-product .site-header .clean-list li a,
body.single-product .site-header .wc-cursive,
body.single-product .site-header .wc-title {
    color: #fdfaf6 !important;
}

/* Protegge l'allineamento delle icone a destra (Carrello e Members Only) */
body.single-product .site-header .col-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Applichiamo il fix delle colonne testo SOLO su Desktop (min-width: 1025px) */
@media (min-width: 1025px) {
    body.single-product .site-header .col-nav-left,
    body.single-product .site-header .col-nav-right {
        display: flex !important;
        align-items: center;
    }
}
/* --- 1. SFONDO FISSO --- */
/* --- 1. SFONDO FISSO (FIX BUG NERO MOBILE) --- */
.df-fixed-background {
    position: fixed;
    top: -15vh; /* Lo facciamo sbordare in alto del 15% */
    left: 0;
    width: 100%; 
    height: 130vh; /* Lo facciamo alto il 130% dello schermo per assorbire i salti della barra */
    z-index: -1;
    background-color: #fcfbf9;
    
    /* Hardware Acceleration: impedisce i glitch e lo sfarfallio nero durante lo scroll */
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    backface-visibility: hidden;
    pointer-events: none;
}

.df-bg-img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
}

.df-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(252, 251, 249, 0.5); 
    z-index: 1;
}

/* --- 2. CONTENITORE PRINCIPALE --- */
.df-product-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0;
}

section.df-intro {
    background-color: transparent; 
    max-width: 1800px; 
    width: 96%;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}

/* --- 3. HERO TITOLO --- */
.df-intro-top {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
    opacity: 0;
    animation: fadeInUpLuxury 1s ease forwards 0.1s;
}

.df-main-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(48px, 6vw, 85px); 
    font-weight: 400;
    margin: 0;
    line-height: 1;
    background: linear-gradient(to right, #8e6a46 0%, #d4af37 50%, #8e6a46 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.2));
}

.df-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #555; 
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 600;
}

/* --- 4. GRIGLIA HERO (MOBILE-FIRST) --- */
.df-intro-grid {
    display: flex;
    flex-direction: column; /* Su mobile è tutto in una colonna */
    align-items: center;
    padding-top: 20px;
}

.df-col-left, .df-col-center, .df-col-right {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 40px;
}

/* COLONNA BOTTIGLIA (Su mobile va per prima in alto) */
.df-col-center {
    order: -1; 
    margin-bottom: 60px;
    margin-top: 20px;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center; 
}

/* Alone di luce dietro la bottiglia */
.df-col-center::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; 
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1; 
    filter: blur(40px); 
    opacity: 0.6; 
    pointer-events: none;
}

.df-bottle-img {
    height: auto;
    width: auto;
    max-height: 60vh; /* Più contenuta su smartphone */
    max-width: 100%;
    transform-origin: center top;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.25));
    animation: zoomInBottle 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* COLONNE TESTO (Mobile) */
.df-col-left {
    text-align: center; /* Su mobile il testo è centrato */
    opacity: 0; 
    animation: fadeInUpLuxury 1s ease forwards 0.3s;
}

.df-col-right {
    text-align: left;
    opacity: 0; 
    animation: fadeInUpLuxury 1s ease forwards 0.6s;
}

.df-vintage-box span {
    font-family: 'Cinzel', serif;
    font-size: 30px; /* Più piccolo su mobile */
    color: #1a1a1a;
    display: inline-block;
    margin-bottom: 30px;
    border-bottom: 2px solid #a64d18; 
    padding-bottom: 5px;
}

.df-description p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #2c2c2c;
    font-weight: 400;
    text-align: left; /* FIX: Allinea il testo a sinistra per chiudere il buco */
}

.df-description p:first-of-type::first-letter {
    float: left;
    font-family: 'Cinzel', serif;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 10px;
    padding-top: 4px;
    color: #a64d18; 
}

.df-data-item {
    margin-bottom: 30px; 
    border-bottom: 1px dashed #cbbfa8; 
    padding-bottom: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.df-data-item:hover {
    border-bottom: 1px solid #a64d18;
    padding-left: 5px; 
}

.df-data-item h4 {
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a64d18; 
    margin: 0 0 6px 0;
    font-weight: 800; 
}

.df-data-item .text {
    font-family: 'Cinzel', serif;
    font-size: 18px; 
    color: #1a1a1a;
    line-height: 1.3;
    font-weight: 500;
}

/* ============================================================
   5. SEZIONE CITAZIONE DI STACCO
   ============================================================ */
.df-transition-quote {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 100px 20px 80px; 
    
    /* FIX BUG NERO MOBILE: Sfondo panna con leggerissima texture che "tappa" il vuoto del tema */
    background-color: #fcfbf9;
    background-image: linear-gradient(rgba(252, 251, 249, 0.85), rgba(252, 251, 249, 0.85)), url('../img/texture-homepage.webp');
    background-size: cover;
    background-position: center;
}
.quote-container {
    max-width: 900px;
    margin: 0 auto;
}

.quote-icon {
    font-family: serif;
    font-size: 50px;
    color: #cb6219; 
    display: block;
    line-height: 0.5;
    margin-bottom: 20px;
    opacity: 0.5;
}

.df-transition-quote blockquote {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 4vw, 36px); 
    color: #1a1a1a;
    margin: 0 0 30px 0;
    line-height: 1.4;
}

.df-transition-quote cite {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #666;
    font-style: normal;
    font-weight: 700;
}

.df-tasting-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: #cb6219; 
    margin-top: 30px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   6. SEZIONE TENUTA E ORIGINI (Mobile-First)
   ============================================================ */
.df-estate-section {
    background-color: #fdfaf6; 
    position: relative;
    z-index: 10;
}

.df-estate-grid {
    display: grid;
    grid-template-columns: 1fr; 
}

.df-estate-media {
    width: 100%;
    height: 60vh; 
}

.df-estate-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desktop-only { display: none; }

.df-estate-text {
    padding: 60px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    background-image: linear-gradient(rgba(253, 250, 246, 0.85), rgba(253, 250, 246, 0.85)), url('../img/texture-homepage.webp'); 
    background-size: cover;
    background-position: center;
}

.df-estate-text-inner { max-width: 500px; }

.estate-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #2c2c2c;
    margin-bottom: 10px;
    line-height: 1.1;
}

.estate-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    margin-bottom: 30px;
    font-weight: 400;
}

.estate-content {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

/* ============================================================
   7. SEZIONE ETICHETTA ZOOM (Mobile-First)
   ============================================================ */
.df-label-section {
    position: relative;
    z-index: 10;
}

.df-label-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.df-label-media {
    background-image: linear-gradient(rgba(253, 250, 246, 0.5), rgba(253, 250, 246, 0.5)), url('../img/texture-homepage.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 30px;
}

.df-label-media img {
    max-width: 70%;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15)); 
}

.df-label-text {
    padding: 60px 30px;
    color: #fff;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.label-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.1;
}

.label-content {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    max-width: 500px;
}

/* ============================================================
   10. SEZIONE ABBINAMENTI (Mobile-First)
   ============================================================ */
.df-pairing-section {
    position: relative;
    z-index: 10;
}

.df-pairing-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.df-pairing-media {
    width: 100%;
    height: 50vh; /* Immagine quadrata/rettangolare su mobile */
}

.df-pairing-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.df-pairing-text {
    padding: 60px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #111; /* Contrasto scuro molto luxury */
    color: #fff;
}

.df-pairing-text-inner { 
    max-width: 500px; 
}

.pairing-eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #cb6219;
    display: block;
    margin-bottom: 15px;
}

.pairing-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.1;
}

.pairing-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 30px;
    font-weight: 400;
}

.pairing-content {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
}

/* ============================================================
   8. MEDIA QUERIES (OVERRIDE DESKTOP)
   ============================================================ */
@media (min-width: 992px) {
    
    /* OVERRIDE HERO */
    .df-intro-grid {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 80vh;
        padding-top: 40px;
    }

    .df-col-left {
        flex: 0 0 28%;
        text-align: left;
        padding-right: 30px; padding-left: 40px; padding-top: 60px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 100%);
        border-radius: 4px;
    }

    .df-col-center {
        flex: 0 0 38%;
        order: 0; /* Rimette la bottiglia al centro su desktop */
        margin-bottom: 0; margin-top: 0;
    }

    .df-bottle-img { max-height: 78vh; } /* Alta e slanciata */

    .df-col-right {
        flex: 0 0 28%;
        padding-left: 30px; padding-right: 40px; padding-top: 60px;
        background: linear-gradient(to left, rgba(255,255,255,0.7), rgba(255,255,255,0));
        border-radius: 4px;
    }

    .df-vintage-box span { font-size: 36px; }
    .df-description p { font-size: 17px; }

    /* OVERRIDE TENUTA ED ETICHETTA */
    .df-estate-grid, .df-label-grid {
        grid-template-columns: 50% 50%; 
        position: relative;
    }
    
    .df-estate-media { height: 100vh; }
    
    .df-estate-text, .df-label-text {
        text-align: left; 
        padding: 80px 100px;
    }

    .df-estate-floating-bottle.desktop-only {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        height: 75vh; 
        filter: drop-shadow(15px 15px 30px rgba(0,0,0,0.3));
    }
    
    .df-estate-floating-bottle img { height: 100%; width: auto; }
    .df-estate-text-inner { margin-left: auto; max-width: 450px; }
    .df-label-grid { min-height: 80vh; }

    /* OVERRIDE ABBINAMENTI (da incollare DENTRO la media query desktop) */
    .df-pairing-grid {
        grid-template-columns: 50% 50%;
    }
    
    .df-pairing-media { height: 80vh; }
    
    .df-pairing-text {
        text-align: left;
        padding: 80px 100px;
        order: -1; /* Magia: su desktop sposta il testo a sinistra e l'immagine a destra */
    }
    
    .df-pairing-text-inner { margin-left: 0; margin-right: auto; }
}

/* ============================================================
   9. ANIMAZIONI KEYFRAMES
   ============================================================ */
@keyframes fadeInUpLuxury {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomInBottle {
    from { opacity: 0; transform: scale(0.95); } 
    to { opacity: 1; transform: scale(1); } 
}

/* ==========================================
   FIX DEFINITIVO COLONNA DESTRA E MARGINI
   ========================================== */

/* 1. Forza il browser a INCLUDERE i padding dentro la larghezza, senza espanderla */
.df-col-left, 
.df-col-center, 
.df-col-right,
.df-data-item {
    box-sizing: border-box !important;
}

/* 2. Overrride per Desktop: Diamo più respiro a destra come suggerito */
@media (min-width: 992px) {
    .df-col-right {
        padding-right: 100px !important; /* Aumentato drasticamente per allontanarlo dal margine */
        max-width: 30% !important; /* Recinto invalicabile per il testo */
    }
}