/**
 Theme Name: Natura da Bere
 Template: astra
 Version: 1.0
 Author: Mose
 Description: Tema child di Astra
*/

/* Nasconde l'SVG del carrello di default */
.ast-site-header-cart-li svg#ast-bag-icon-svg {
    display: none;
}
/* Mostra un'immagine personalizzata come icona del carrello */
.ast-site-header-cart-li {
    background-image: url('https://staging.naturadabere.it/wp-content/uploads/2025/04/icona-per-carrello-Natura-da-Bere.png');
    background-repeat: no-repeat;
    background-size: 95%; /*24px 24px;  oppure auto, o 100% */
    background-position: center;
    width: 50px;  /* regola dimensioni */
    height: 50px;
    display: inline-block;
}
/* Fine di Nasconde l'SVG del carrello di default */

/* Nasconde l'icona utente di default e la sostituisce con quella personalizzata*/
.ast-header-account-inner-wrap svg,
.ast-header-account-link svg {
    display: none !important;
}
/* Mostra l'immagine personalizzata */
.ast-header-account-link {
    background-image: url('https://staging.naturadabere.it/wp-content/uploads/2025/04/icona-login-utente.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    width: 50px;
    height: 50px;
}
.ast-header-account-text {
    background-color: rgba(240, 228, 251, 0.8);  /* sfondo semitrasparente */
    color: purple;
    font-weight: bold;
    font-size: 16px;
	text-align: center;
    /* padding: 2px 6px;*/
    margin-top: 10px;
    margin-bottom: 4px; 
    z-index: 2; 
}
/* allinea al centro la scritta ACCEDI sull'immagine dell'utente */
@media  {
    .ast-desktop .ast-primary-header-bar.main-header-bar, .ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar
 {
        padding-top: .5em;
        padding-bottom: .5em;
        line-height: normal;
    }
}
/* FINE Nasconde l'icona utente di default e la sostituisce con quella personalizzata*/




/**************************************************
/* modifica css per visualizzare il titolo all'inizio per la versione mobile
/* --- Gestione layout pagina prodotto - staging.naturadabere.it --- */
/* 1. IMPOSTAZIONE DI DEFAULT (MOBILE) */
.single-product .summary .product_title,
.single-product .woocommerce-breadcrumb {
    display: none;
}
.single-product .ast-post-social-sharing {
    align-items: center !important;
}
/* 2. IMPOSTAZIONE PER DESKTOP (schermi larghi almeno 769px) */
@media (min-width: 768px) {
    /* Nascondiamo l'header superiore del tema */
    .single-product .entry-header {
        display: none;
    }   
    /* Mostriamo gli elementi di WooCommerce che erano nascosti su mobile */
    .single-product .summary .product_title,
    .single-product .woocommerce-breadcrumb {
        display: block;
    }
    /* --- NUOVA SEZIONE: RIORDINO VISIVO DEGLI ELEMENTI --- */
    /* 1. Trasformiamo l'area del prodotto in un contenitore flessibile a colonna */
    .single-product .summary {
        display: flex;
        flex-direction: column;
    }
    /* 2. Assegniamo un ordine numerico a ogni elemento. 
       Il browser li mostrerà dal più basso al più alto. */  
    .single-product .summary .woocommerce-breadcrumb { order: 1; }
    .single-product .summary .product_title { order: 2; }
    .single-product .summary .immagine-biologico { order: 3; }
    .single-product .summary .woocommerce-product-rating { order: 4; }
    .single-product .summary .price { order: 5; }
    .single-product .summary .woocommerce-product-details__short-description { order: 6; }
    .single-product .summary form.cart { order: 7; }
    /* --- REGOLE MODIFICATE (con il selettore corretto) --- */
    /* Usiamo la classe corretta .ast-single-product-payments che hai trovato */
    .single-product .summary .ast-single-product-payments { order: 8; }  
    /* Spostiamo la meta (categorie) alla fine della sequenza */
    .single-product .summary .product_meta { order: 9; }
}
/* fine modifica css per visualizzare il titolo all'inizio per la versione mobile
/**************************************************




/**************************************************
/* --- INIZIO Miglioramento visivo dei Tab Prodotto su Mobile --- */
/* --- Stile dei Tab Prodotto su Mobile (Layout a 3 colonne, stile Outline/Pieno) --- */
@media (max-width: 768px) {
    /* 1. Il contenitore dei tab: impostiamo la spaziatura */
    .woocommerce-tabs .wc-tabs {
        display: flex;
        gap: 8px;
        list-style: none;
        padding-left: 0;
        margin-bottom: 2em;
    }
    /* 2. Ogni singolo tab (<li>): si adatta per occupare 1/3 dello spazio */
    .woocommerce-tabs .wc-tabs li {
        flex: 1;
        margin: 0;
        display: flex;
    }
    /* 3. Il link (<a>): questo definisce lo stile per i tab INATTIVI */
    .woocommerce-tabs .wc-tabs li a {
        flex-grow: 1;
        padding: 10px 8px;
        text-decoration: none;
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        font-weight: 200 !important; /* --- MODIFICATO: Impostato il nuovo peso e forzato con !important --- */
        border-radius: 5px;
        text-align: center;
        line-height: 1.3;
        transition: all 0.2s ease-in-out;
        background-color: #ffffff;
        color: #333333;
        border: 2px solid #5f3b7b;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
    }
    /* 4. Rimuoviamo il bordo di default del tema */
    .woocommerce-tabs .wc-tabs li.active {
        border-bottom: none !important;
    }
    /* 5. Stile del tab ATTIVO: sovrascriviamo le regole per renderlo "pieno" */
    .woocommerce-tabs .wc-tabs li.active a {
        background-color: #5f3b7b;
        color: #ffffff !important;
        border-color: #5f3b7b;
        /* --- MODIFICATO: Rimossa la riga font-weight: bold; --- */
    }
}
/* --- FINE Miglioramento visivo dei Tab Prodotto su Mobile --- */
/**************************************************

/**************************************************
/* --- INIZIO centratura miniature immagini nel dettaglio del prodotto --- */
/* Centra il contenitore delle miniature della galleria prodotto */
.ast-single-product-thumbnails {
    display: flex;
    justify-content: center;
}
/* --- FINE centratura miniature immagini nel dettaglio del prodotto --- */
/**************************************************/


/**************************************************
/* --- INIZIO PERSONALIZZAZIONE CSS DELLA PAGINA DEL NEGOZIO --- */
/* Controlla lo spazio tra i singoli prodotti (colonne e righe) */
@media (min-width: 768px) {
	ul.products {
    margin: 0 -10px; /* Margine negativo per compensare il padding dei singoli prodotti */
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    /* Manteniamo le impostazioni di layout di base, se necessario */
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: 20px; 
}
/* Regola lo spazio tra le righe di prodotti */
.ast-archive-post ul.products {
    /* Il codice qui sopra con il padding sull'elemento <li>
     * gestisce già lo spazio tra le righe.
     * Se hai bisogno di maggiore controllo, puoi aggiungere un margin-bottom
     * a ogni singola riga (in base alla tua struttura HTML).
     */
}
/* Aggiunge un margine superiore e inferiore alla griglia di prodotti */
.woocommerce-js .products ul, .woocommerce-js ul.products {
    margin: 2em 3em 1em 3em;
    padding: 0;
    list-style: none outside;
    clear: both;
}
/* Modifica il font del titolo del prodotto nella griglia di prodotti */
.woocommerce-js ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    margin-bottom: .5em;
    padding: 0;
    font-size: 1.3em;
}
.wpfFilterWrapper {
    margin-top: 7px;
    margin-bottom: 7px;
}
}
/* --- FINE PERSONALIZZAZIONE CSS DELLA PAGINA DEL NEGOZIO --- */
/**************************************************/



/**************************************************/
/* --- INIZIO PERSONALIZZAZIONE CSS DELLA sidebar PAGINA DEL NEGOZIO --- */
/* Stile del contenitore generale della sidebar */
#secondary {
    /* Spaziatura esterna (spazio tra la sidebar e il resto del sito) */
    margin-top: 0em;
    margin-bottom: 0em;
	line-height: 1.5;
    /* Regole per l'aspetto */
    background-color: transparent; /* Colore di sfondo trasparente */
    /*border-radius: 8px; Angoli leggermente arrotondati */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); Rimuove l'ombra */
}
#secondary, #secondary button, #secondary input, #secondary select, #secondary textarea {
    padding-right: 5px;
    padding-left: 5px; 
}
/* Regolazioni per Desktop (schermi con larghezza maggiore di 992px) */
@media (min-width: 768px) {
    .ast-left-sidebar #secondary {
        /*
         * Spaziatura interna (spazio tra il bordo della sidebar e il suo contenuto).
         * Regolala in base alle tue preferenze.
         */
        padding-top: 50px;
        padding-right: 5%;
        padding-bottom: 40px;
        padding-left: 5%; 
        /*
         * Regola la larghezza della sidebar. Ricorda che la somma
         * della larghezza della sidebar e del contenuto principale
         * deve essere inferiore al 100% per evitare problemi di layout.
         */
        /* max-width: 300px; Larghezza massima in pixel */
        /* width: 25%; Oppure in percentuale */
    }
}
/* --- FINE PERSONALIZZAZIONE CSS DELLA sidebar PAGINA DEL NEGOZIO --- */
/**************************************************/

/**************************************************/
/* --- INIZIO PERSONALIZZAZIONE CSS DELLA testata della pagina del singolo prodotto SOLO SU MOBILE. Serve a aggiungere un po' di spazio fra barra del menu e breadcrumbs ed evitare che siano troppo distanziati --- */
/* Applica lo stile solo su schermi con larghezza massima di 768px (mobile) */
@media (max-width: 768px) {
    /* Selettore più diretto per l'header che contiene i breadcrumbs nella pagina prodotto */
    .single-product header.entry-header {
        margin-top: 1em !important; /* Forza il margine superiore a 1em */
    }
}
/* --- FINE PERSONALIZZAZIONE CSS DELLA testata della pagina del singolo prodotto SOLO SU MOBILE. Serve a aggiungere un po' di spazio fra barra del menu e breadcrumbs ed evitare che siano troppo distanziati --- */
/**************************************************/