/*
Theme Name: GioielleriaNicolis
Template: shoptimizer
Version: 1.0
Description: Child theme of Shoptimizer
Author: CommerceGurus
*/

/* ------------------------------------------------------------------------------------ */
/* --- 1. RESET E CORREZIONI GLOBALI (Immagini, Icone, Elementi Base) ----------------- */
/* ------------------------------------------------------------------------------------ */


/* Disattiva pulsante video nello slider */
.ms-slide-vpbtn {
    display: none;
}

/* Bandiere lingue (WPML) */
.wpml-ls-flag {
    width: 18px;
    height: 12px;
    display: inline-block;
}

/* Fix specifico per l'icona SVG nel top-bar-right della homepage */
.home .top-bar-right .custom-html-widget svg {
    width: 24px !important;
    height: 24px !important;
    position: relative !important;
    top: 5px !important;
    transform: none !important;
    font-size: 24px !important;
}

/* Fix aggiuntivo per stili inline sull'icona SVG */
.home .top-bar-right .custom-html-widget a[style*="padding: 9px"] svg {
    width: 24px !important;
    height: 24px !important;
}


/* ------------------------------------------------------------------------------------ */
/* --- 2. LAYOUT E SPACING (Elementor/Slider/Header) ---------------------------------- */
/* ------------------------------------------------------------------------------------ */

/* Ottimizzazione titolo brand (desktop) */
.woocommerce-products-header__title {
    min-height: 70px;
}

/* SPAZIATURA DEL TESTO "NOVITÀ DELLA GIOIELLERIA NICOLIS" */

/* Sezione Elementor contenente il testo */
.elementor-section.elementor-element-35c91f1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Contenitore del widget titolo */
.elementor-element.elementor-element-15e7188 .elementor-widget-container {
    margin-top: 50px !important;
}

/* Immagine hero del brand (solo Desktop) */
@media (min-width: 993px) {
    header.woocommerce-products-header {
        display: block;
    }
    .term-description {
        min-width: 100%;
    }
    header.woocommerce-products-header img {
        max-width: 500px;
        margin: 0 auto 20px auto;
    }
    /* Impedisce salto slider (Desktop) */
    .elementor-widget-slides, 
    .elementor-element-f676a1f { 
        min-height: 904px !important;
    }
}


/* Elementor Slider: Dimensionamento e Aspect Ratio (Desktop) */
.elementor-section[data-id="aac7a6f"] { 
    aspect-ratio: 1900 / 571; /* Proporzioni Desktop */
    position: relative;
    overflow: hidden;
}

/* Assicura che l'immagine di sfondo si adatti bene */
.elementor-section[data-id="aac7a6f"] .elementor-slides-wrapper,
.elementor-section[data-id="aac7a6f"] .swiper-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fix per slider background Elementor con WP Rocket */
.elementor-background-slideshow {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
}

.elementor-background-slideshow-wrapper {
    overflow: hidden !important;
    min-height: 100vh !important;
}


/* ------------------------------------------------------------------------------------ */
/* --- 3. STILI WOOCOMMERCE E PRODOTTI ------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */

/* Regola esistente per le immagini prodotto */
body ul.products li.product img {
    object-fit: contain !important;
}

/* Mantiene immagine prodotto quadrata e con bordi (Dettaglio) */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce div.product div.woocommerce-product-gallery img,
.woocommerce-page ul.products li.product img,
img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; 
    object-fit: contain !important;
    display: block !important;
}

.woocommerce ul.products li.product a img {
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* Prezzo prodotto (Dettaglio) */
.product-details-wrapper .price > .woocommerce-Price-amount bdi,
.product-details-wrapper ins > .woocommerce-Price-amount bdi {
    font-weight: bold;
    font-size: 120%;
    color: #c16504;
}

/* CORREZIONE CONTRASTO: Prezzo barrato (originale) in offerta */
.product p.price del {
    color: #333 !important;
}

/* Etichetta 'Prezzo:' sul dettaglio prodotto */
.product-details-wrapper p.price::before {
    color: #008615;
    padding-right: 10px;
    font-weight: bold;
    content: attr(data-label);
}
html[lang="it-IT"] .product-details-wrapper p.price::before {
    content: "Prezzo:";
}
html[lang="en-US"] .product-details-wrapper p.price::before {
    content: "Price:";
}

/* Avviso esaurito */
.stock.out-of-stock {
    font-size: 1.5em;
    font-weight: bold;
}

/* cambio colore testo prezzo arancio piu scuro (Override del Colore Accento del Tema) */
.price ins, 
.summary .yith-wcwl-add-to-wishlist a::before, 
.site .commercekit-wishlist a i::before, 
.commercekit-wishlist-table .price, 
.commercekit-wishlist-table .price ins, 
.commercekit-ajs-product-price, 
.commercekit-ajs-product-price ins, 
.widget-area .widget.widget_categories a:hover, 
#secondary .widget ul li a:hover, 
#secondary.widget-area .widget li.chosen a, 
.widget-area .widget a:hover, 
#secondary .widget_recent_comments ul li a:hover, 
.woocommerce-pagination .page-numbers li .page-numbers.current, 
div.product p.price, 
body:not(.mobile-toggled) .main-navigation ul.menu li.full-width.menu-item-has-children ul li.highlight > a, 
body:not(.mobile-toggled) .main-navigation ul.menu li.full-width.menu-item-has-children ul li.highlight > a:hover, 
#secondary .widget ins span.amount, 
#secondary .widget ins span.amount span, 
.search-results article h2 a:hover {
    color: #e69900 !important; /* Nuovo colore arancio scuro */
}

.woocommerce ul.products li.product .price del {
    color: #43454b !important;
    opacity: .5;
    display: inline-block;
}

/* ------------------------------------------------------------------------------------ */
/* --- 4. MEDIA QUERIES (Mobile/Tablet) ----------------------------------------------- */
/* ------------------------------------------------------------------------------------ */

/* Correzione per il debordo orizzontale sul mobile/tablet (max-width: 992px) */
@media (max-width: 992px) {

    /* Correggi le sezioni Elementor con lo stile inline problematico (Slider e Prodotti) */
    .elementor-element-f676a1f, 
    .elementor-element-98032ad {
        left: 0 !important; 
        width: 100% !important; 
    }
    
    /* Pulizia contenitori principali e menu mobile come misura di sicurezza */
    .mobile-extra, 
    .menu-primary-menu-container,
    .hfeed.site { 
        max-width: 100vw !important; 
        overflow-x: hidden !important;
    }
    
    /* Pulizia dei margini sui widget interni */
    .mobile-extra .widget {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Menu mobile: Spaziatura freccia per menu con sottomenu */
    .col-full-nav #menu-primary-menu li.menu-item-has-children > .main-menu-link {
        display: inline-block !important;
        width: auto !important;
        padding-right: 10px;
    }
    .col-full-nav #menu-primary-menu li.menu-item-has-children span.caret {
        position: relative !important;
        font-weight: bold;
    }
}

/* Fix per slider background Elementor (max-width: 768px) */
@media (max-width: 768px) {
    .elementor-background-slideshow-wrapper {
        min-height: 50vh !important;
    }
    
    .elementor-background-slideshow {
        object-position: center center !important;
    }
    
    /* Elementor Slider: Aspect Ratio per Tablet/Mobile */
    .elementor-section[data-id="aac7a6f"] { 
        aspect-ratio: 768 / 400; /* Esempio di proporzione mobile/tablet */
    }
}

/* Elementor Slider: Aspect Ratio per Smartphone (max-width: 480px) */
@media (max-width: 480px) { 
    .elementor-section[data-id="aac7a6f"] { 
        aspect-ratio: 400 / 300; /* Esempio di proporzione smartphone */
    }
}

/* Correzioni specifiche per prodotti in Home Page (max-width: 600px) */
@media (max-width: 600px) {

    body.home li.product {
        margin-bottom: 10px !important;
    }

    /* CORREZIONE BADGE "NEW" */
    body.home .wpcbm-wrapper .wpcbm-badge-inner {
        width: 30px !important; height: 30px !important; line-height: 30px !important; 
        font-size: 0.5em !important; top: 2px !important; right: 2px !important; z-index: 100 !important; 
    }
    
    /* CORREZIONE TESTO CATEGORIE */
    body.home .product__categories {
        font-size: 11px !important; 
        line-height: 1.1 !important;
        margin-bottom: 3px !important; 
    }

    /* CORREZIONE NOME PRODOTTO */
    body.home li.product .woocommerce-loop-product__title {
        font-size: 14px !important; 
        line-height: 1.2 !important; 
        margin-bottom: 5px !important; 
        font-weight: 500 !important; 
    }
    
    /* CORREZIONE PREZZO */
    body.home li.product .price {
        font-size: 16px !important; 
        line-height: 1.2 !important; 
    }
}


/* Rimuove forzatamente il padding interno della colonna Elementor */
.elementor-widget-wrap,
.elementor-element-populated {
    padding: 0 !important;
}



/* ------------------------------------------------------------------------------------ */
/* --- 5. CORREZIONE PERFORMANCE LCP: FORZA font-display: swap per IBM Plex Sans ------ */
/* ------------------------------------------------------------------------------------ */

/* Regola per il font-weight 400 (Normale) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400; /* Peso del font normale */
  src: url('https://www.gioiellerianicolis.it/wp-content/fonts/ibm-plex-sans/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2') format('woff2'); 
	
/* 🛑 Questa è la soluzione! */
  font-display: swap !important; /* Uso !important per massima priorità */
}

/* Nota: Se il tema carica anche il 500 e il 700 (lo fa quasi sicuramente), 
   devi ripetere il blocco per ogni peso, cambiando solo 'font-weight' e 'src' 



/* Correggi lo spostamento della barra di ricerca */
div.site-search > div.widget > form.woocommerce-product-search {
    min-height: 40px; /* Imposta un'altezza minima per riservare lo spazio */
}

/* Correggi lo spostamento delle bandiere WPML (già nel tuo CSS, ma potresti dover forzare) */
.wpml-ls-flag {
    width: 18px !important; 
    height: 12px !important;
    display: inline-block;
}




/* Correzione per Logo, Badge "New" e Widget fluttuanti su Mobile */
@media (max-width: 768px) {
    /* Forza l'altezza massima del logo per Shoptimizer/Elementor */
    .site-header .custom-logo-link img, 
    .site-header img.custom-logo,
    .site-header .elementor-image img { 
        max-height: 35px !important; 
        width: auto !important; 
    }



/*
 * 1. Mira tutte le immagini (loghi) all'interno dei widget immagine nelle pagine di Archivio.
 * 2. ESCLUDE l'immagine del logo principale (presumibilmente in .site-header)
 */
.archive .elementor-widget-image img {
    /* Imposta la dimensione massima desiderata per i loghi */
    max-width: 30px !important; 
    height: auto !important; 
    
    /* Forza la sovrascrittura di width/height che Elementor o il tema inserisce nell'HTML */
    width: auto !important; 
    
    /* Per un aspetto più pulito: Centra e rendi l'immagine un blocco */
    display: block !important; 
    margin: 0 auto !important;
}

/* REGOLA AGGIUNTIVA DI SICUREZZA: Assicura che il logo del sito non venga toccato */
.site-header img {
    max-width: 100% !important; /* Riporta alla dimensione originale */
    width: auto !important;
    height: auto !important;
}