@layer theme_reset, parent_overrides, components, utilities, emergency;


 
@layer theme_reset {

}


@layer parent_overrides {

    
.product__brand-label {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important; /* Effetto Luxury */
    color: #888 !important;
    margin-bottom: 5px !important;
    display: block;
    text-align: center;
}    
/* ================================================
TITLE-STICKY
================================================= */
.product-header-mobile-first {
    position: sticky !important;
    top: 48px !important; 
    /* Qui imposta l'altezza esatta della tua navbar, es. 48px */
    z-index: 5 !important;
    width: 100% !important; /* Blindato al 100% */
    left: 0 !important;
    
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Transizione fluida su padding e altezza */
    transition: padding 0.5s ease, background-color 0.5s ease, 
    transform 0.4s ease !important;
    
    padding: 15px 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid transparent;
}

/* Stato SHRUNK: manteniamo 100% ma comprimiamo l'altezza */
.product-header-mobile-first.is-shrunk {
    /*padding: 6px 10px !important; /* Compressione millimetrica */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-bottom: 1px solid #eee !important;
    background-color: #f8f9fa !important;
}

.product-header-mobile-first .product__name {
    font-size: 1.2rem !important;
    transition: font-size 0.3s ease !important;
    margin: 0 !important;
    text-align: center;
    width: 100%;
}
    
/* Rimpicciolimento font nello stato compatto */
.product-header-mobile-first.is-shrunk .product__name {
    font-size: 0.95rem !important; /* Valore Premium richiesto */
    letter-spacing: 1px;
}

/* =======================================
BLOCCO PRICES 
======================================== */
    
/* 1. Trasformazione del Wrapper da Colonna a Riga */
.prices__wrapper {
    flex-direction: row !important; /* Elimina l'incolonnamento */
    flex-wrap: nowrap !important;   /* Forza tutto su una riga */
    align-items: center !important;
    justify-content: center !important; /* Centra l'intero blocco */
    gap: 15px !important;           /* Spazio elegante tra gli elementi */
    margin-bottom: 1.5rem !important;
}

/* 2. Eliminazione Tasse Incluse */
.product__tax-info {
    display: none !important;
}
/* 3. Styling del Prezzo ATTUALE (Il focus) */
.current-price span[itemprop="price"] {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #232323 !important; /* Nero Luxury */
    line-height: 1;
}
/* 4. Styling del Prezzo BARRATO (Il confronto) */
.page-product .product__price-regular {
    /* Rimuoviamo la linea orizzontale standard */
    position: relative !important;
    display: inline-block !important; 
    /* FONDAMENTALE: circoscrive l'area d'azione */
    text-decoration: none !important; 
    /* Rimuove la linea orizzontale nativa */
    color: #999 !important;
    font-size: 1rem !important;
    padding: 0 2px !important; /* Piccolo respiro laterale */
}
.page-product .product__price-regular::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important; /* Centratura verticale */
    width: 100% !important; /* Prende l'esatta larghezza del prezzo */
    height: 1.5px !important; /* Spessore linea */
    background-color: #d91b1b !important; /* Rosso alert dello sconto */
    
    /* Inclinazione: -15deg è l'angolo Luxury, 45deg è molto aggressivo */
    transform: translateY(-50%) rotate(-15deg) !important; 
    transform-origin: center !important;
    pointer-events: none !important; /* Evita interferenze col click */
}
/* 5. Il nuovo BADGE SCONTO (Ex "Risparmia X%") */
/* Nota: Useremo il selettore sulla classe dello sconto che hai nel wrapper */
.product__discount-percentage {
    background-color: #d91b1b !important;
    color: #fff !important;
    padding: 3px 12px !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(217, 27, 27, 0.2) !important;
}

/* ================================================
MOBILE 
================================================= */
@media (min-width: 992px) {
    .product-header-mobile-first {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .product-header-mobile-none {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .thumbnails__container {
        display: none;
    }
    .product__col {
        margin-top: 0 !important;
    }
    /* Padding di sicurezza per lo Sticky Carrello su Mobile */
    body#product {
    /* 50px (altezza barra) + 40px (respiro estetico per footer/legal) */
        padding-bottom: 60px !important; 
    }
} 

}/*END parent_overrides*/


@layer components {
    
/* COUNTDOWN Sconto */
.promo-expiry {
font-size: 0.85rem;
color: #d9534f; /* Colore alert/rosso */
margin-top: 5px;
font-weight: 600;
}
.discount-countdown-wrapper {
background-color: #fef2f2; /* Sfondo leggermente rosato */
border: 1px solid #fee2e2;
padding: 10px;
border-radius: 4px;
display: inline-block;
width: 100%;
text-align: center;
}
.countdown-timer {
    font-weight: bold;
    color: #d91b1b; /* Rosso urgenza */
    font-variant-numeric: tabular-nums; /* Evita il salto dei numeri */
}

.carousel-inner img.img-fluid{
    border: 0.85px solid #888;
}

/* ================================================
WHISHLIST
================================================= */

/* Nascondiamo la versione della Wishlist iniettata nel carrello */
.product-add-to-cart .wishlist-button-add {
    display: none !important;
}

/* 1. Reset e Posizionamento del Wrapper Luxury */
.wishlist-button-luxury-wrapper {
    position: absolute !important;
    top: 0.635rem !important;   /* Speculare al bottom della lente */
    right: 0.635rem !important; /* Stesso allineamento laterale */
    z-index: 11 !important;    /* Leggermente sopra tutto */
}

/* 2. Unificazione dello stile con la lente */
.wishlist-button-luxury-wrapper .wishlist-button-add {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    background-color: #fff !important;
    /* Ombra identica alla lente per coerenza */
    box-shadow: .125rem .125rem .25rem 0 rgba(0,0,0,.2) !important; 
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform .2s ease-out !important;
    margin: 0 !important; /* Rimuoviamo il margin-left precedente */
}

/* 3. Effetto Hover Premium */
.wishlist-button-luxury-wrapper .wishlist-button-add:hover {
    transform: scale(1.1) !important;
    color: #d91b1b !important; /* Colore rosso all'hover */
}

/* 4. Icona interna */
.wishlist-button-luxury-wrapper .material-icons {
    font-size: 1.2rem !important;
    color: #333;
}

}/* END LAYER */

@layer utilities {
    
/* ==================================
STICKY CART
=================================== */
@media (max-width: 991.98px) {
    
    /* 1. Stato Normale: Deve essere quasi INVISIBILE a livello di layout */
    .js-sticky-action-bar {
        position: relative !important;
        width: 100% !important;
        margin: 15px 0 !important; /* Diamo un po' di respiro naturale */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        /* RIMOSSI: box-shadow, background e padding fissi che sporcavano l'inizio */
    }

    /* 2. Stato Sticky: Qui attiviamo tutta l'estetica "Premium" */
    .js-sticky-action-bar.is-sticky-active {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #ffffff !important; /* Il fondo bianco appare solo ora */
        padding: 10px 15px calc(10px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -10px 25px rgba(0,0,0,0.15) !important; /* L'ombra appare solo ora */
        margin: 0 !important;
        
        /* Animazione di comparsa dal basso */
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* 3. FUSIONE DEI BORDI: Rendiamo il blocco un unico pezzo d'acciaio */
    
    /* Parte Sinistra (Quantità) */
    .js-sticky-action-bar .product-actions__quantity {
        flex: 0 0 110px !important;
        padding: 0 !important;
    }
    .js-sticky-action-bar .input-group {
        border-radius: 6px 0 0 6px !important; /* Arrotonda solo esterno sinistro */
        border: 1px solid #ddd !important;
        border-right: none !important; /* Elimina il confine interno */
        height: 50px !important;
        margin: 0 !important;
    }

    /* Parte Destra (Pulsante) */
    .js-sticky-action-bar .product-actions__button {
        flex: 1 1 auto !important;
        padding: 0 !important;
    }
    .js-sticky-action-bar .btn-primary {
        /* border-radius: 0 6px 6px 0 !important; 
        Arrotonda solo esterno destro */
        height: 50px !important;
        width: 100% !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
    }
    /* Colpiamo l'input solo quando è dentro la nostra barra d'acquisto */
    .js-sticky-action-bar .quantity-button input#quantity_wanted {
        height: 50px !important;    
        /* Deve essere identica all'altezza del tasto blu */
        border: none !important;     
        /* Rimuoviamo bordi interni che creano spessore */
        padding: 0 !important;       
        /* Centratura perfetta del numero */
        line-height: 50px !important;
        background-color: #ffffff !important;
        font-size: 1.1rem !important;
    }

    /* Allineamento dei tasti + e - */
    .js-sticky-action-bar .quantity-button .btn-touchspin {
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #f8f9fa !important;
        border: none !important;
    }
}



}/* END LAYER utilities */

@layer emergency {
/* Il tuo codice qui vince su tutto il resto nel custom.css */


}