/*
Theme Name: NXCQUADRO Child
Theme URI: 
Description: Tema Figlio per aggiungere WooCommerce e fix specifici.
Author: Marco
Author URI: 
Template: nxcquadro
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nxcquadro-child
*/

/************************************************************************
 * REGOLE AGGIUNTIVE 
 * tutte le regole per rendere compatibile il tema con woocommerce.
 ************************************************************************/
 
 
 


/* ================================================ */
/* CSS REGOLE AGGIUNTE    			 	 	 	    */
/* ================================================ */



/* ================================================ */
/* FIX STILE WOOCOMMERCE MINI-CART HEADER E FOOTER  */
/* ================================================ */

/* Stile Mini Carrello */

/* Correzione al mini carrello quando sono presenti molte ITEMS */
.wc-block-mini-cart__items {
    margin-bottom: 160px;
}
/* Posizionamento del footer del mini-carrello */
div.wp-block-woocommerce-mini-cart-footer-block.wc-block-mini-cart__footer {
    position: absolute;
    bottom: 0;
}
/* Rimpicciolisce h2 e titolo del mini-carrello */
h2.wc-block-mini-cart__title,
.wp-block-woocommerce-mini-cart-title-block.wc-block-mini-cart__title {
    line-height: 1.2 !important;
    font-size: 26px !important;
    margin-bottom: 5px !important; 
}

/* ============================================== */
/* FIX STILE WOOCOMMERCE BLOCKS (Cancella Filtri) */
/* ============================================== */

/* Forza il colore, bordo e sfondo del pulsante "Cancella Filtri" */
.wc-block-product-filter-clear-button .wp-block-button__link {
    color: #cd211d !important;
    border: 1px solid #cd211d !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Stile per l'hover del pulsante "Cancella Filtri" */
.wc-block-product-filter-clear-button .wp-block-button__link:hover {
    background-color: #cd211d !important;
    color: #fff !important;
}

/* Stile per il pulsante Outline generale (se usato) */
.wp-block-button.is-style-outline .wp-block-button__link {
    border-color: #cd211d;
    color: #cd211d;
}

/* Spazio intorno al blocco "Cancella Filtri" */
.wp-block-woocommerce-product-filter-clear-button {
    margin-top: 15px; 
    margin-bottom: 15px;
}


/*
 * Fix per layout pagina Prodotto Singolo.
 * Sposta il contenuto della pagina sotto la navbar fissa (alta 70px).
 */
.single-product .site-main,
.single-product #content {
    padding-top: 100px;
}


/*
 * Riduce l'interlinea del titolo del prodotto in pagina archivio (Shop).
 */
.woocommerce-loop-product__title {
    line-height: 1.2;
}


/* Forziamo lo sfondo bianco sotto le miniature del prodotto singolo */
.woocommerce div.product div.images .flex-control-thumbs li img {
    background-color: #ffffff !important;
}


/*
================================================================================
STILE E POSIZIONAMENTO ICONA CARRELLO (Desktop & Mobile)
================================================================================
*/

/* 1. Stile base per il widget mini-carrello (rimozione bordi/sfondi) */
.widget_shopping_cart {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Nasconde gli elementi superflui del widget (titolo, totali, pulsanti) */
.widget_shopping_cart .widget-title,
.widget_shopping_cart .woocommerce-mini-cart__total,
.widget_shopping_cart .woocommerce-mini-cart__buttons,
/* Nasconde la lista dei prodotti (deve apparire solo nel menu a tendina/pop-up) */
.widget_shopping_cart ul.woocommerce-mini-cart {
    display: none !important;
}

/* 3. Stile per il link/icona del carrello */
.widget_shopping_cart a, 
.header-cart-widget a {
    color: #000 !important;
    font-size: 24px; 
    line-height: 50px; 
    text-decoration: none !important;
    display: block; 
    height: 100%;
    width: 100%;
    text-align: center;
}

/* 4. Stile per l'icona Font Awesome (se usata) */
.widget_shopping_cart a i.fa-shopping-cart,
.header-cart-widget a i.fa-shopping-cart {
    font-size: 22px; 
    vertical-align: middle;
}

/* 5. Hover/Focus */
.widget_shopping_cart a:hover {
    color: #cd211d !important;
}


/* ================================================= */
/* GESTIONE VISIBILITÀ DESKTOP (>= 992px) */
/* ================================================= */

#header-cart-desktop-wrapper {
    display: block !important; 
    width: 50px; 
    height: 50px;
    visibility: visible !important;
}

/* ================================================= */
/* GESTIONE VISIBILITÀ MOBILE (<= 991.98px)          */
/* ================================================= */
@media (max-width: 991.98px) {
    
    /* Configurazione generale del contenitore navbar */
    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Ordine e Posizionamento */
    .navbar-brand { order: 1; }
    
    /* Placeholder Carrello Mobile (Cruciale per i blocchi) */
    #mobile-cart-placeholder {
        display: flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        order: 2;
        height: 50px; 
        width: 40px; 
    }
    
    /* Wrapper Carrello Desktop (che contiene l'icona) */
    #header-cart-desktop-wrapper {
        order: 2; /* Posizione centrale su mobile */
        display: flex !important;
        justify-content: center;
        width: auto !important; 
        visibility: visible !important;
        z-index: 1035; 
    }
    
    /* Toggler Menu */
    .navbar-toggler { 
        order: 3;
        z-index: 1040 !important;
        display: block !important;
        background-color: transparent !important;
        border-color: rgba(255, 255, 255, 0.5); 
    }
    
    /* Blocco Social / Desktop */
    #header-block-desktop {
        order: 4; /* Muovi il blocco sotto gli elementi principali */
        display: flex !important;
        justify-content: left !important;
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
        z-index: 1030;
    }
    
    /* Menu a tendina */
    .navbar-collapse {
        order: 5;
        width: 100%;
        margin-top: 10px;
    }
}



/* =========================================================
   WOOCOMMERCE: STILI PAGINA IL MIO ACCOUNT (TEMA CHILD)
   ========================================================= */

/* 0. MARGINI GENERALI E PADDING DEL CONTENUTO */
.woocommerce-MyAccount-content {
    padding: 20px; 
}
.woocommerce-account .u-columns.col2-set {
    margin-top: 30px; 
    margin-bottom: 30px;
}

/* 1. Titoli */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-size: 1.5rem; 
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #cc0000;
}

/* 2. Tabelle */
.woocommerce-account table.shop_table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
    padding: 10px;
    vertical-align: top;
    line-height: 1.4;
    border-top: 1px solid #ccc;
}
.woocommerce-account .shop_table.my_account_orders tr:first-child {
    border-top: none;
}


/* ==============================================
   3. MENU DI NAVIGAZIONE A SINISTRA
   ============================================== */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
    background: none; 
}
.woocommerce-MyAccount-navigation ul li {
    padding: 0;
    border-bottom: 1px solid #eee;
}
.woocommerce-MyAccount-navigation a {
    display: block; 
    padding: 10px 15px;
    color: #263036;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
}
.woocommerce-MyAccount-navigation a:hover {
    background-color: #f0f0f0; 
    color: #263036; 
}
.woocommerce-MyAccount-navigation li.is-active a {
    font-weight: bold;
    background-color: #cc0000;
    color: #ffffff;
    border-radius: 0;
}


/* ========================================================
   4. FIX FORM E CAMPI (Risoluzione del problema di larghezza)
   ======================================================== */

/* Rimuove Flexbox dal contenitore principale per le form */
.woocommerce-MyAccount-content form .form-row {
    margin-bottom: 15px;
    /* Rimuove il Flexbox che crea problemi con i campi affiancati nelle form lunghe */
    display: block !important; 
    width: 100% !important;
}

/* 4a. Campi larghi (come la maggior parte degli indirizzi) */
.woocommerce-MyAccount-content form .form-row.form-row-wide,
.woocommerce-MyAccount-content form .form-row.form-row-first,
.woocommerce-MyAccount-content form .form-row.form-row-last {
    /* Forziamo ogni campo al 100% per un layout pulito a colonna singola */
    width: 100% !important; 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    margin-left: 0 !important; /* Rimuove il margine del form-row-last */
}

/* 4b. Stile input */
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form .select2-container,
.woocommerce-MyAccount-content form textarea {
    width: 100% !important; 
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: auto;
}

/* 4c. Fix per il wrapper dei campi indirizzo (se c'è) */
.woocommerce-address-fields,
.woocommerce-address-fields__field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important; /* Molto importante se Flexbox causava il problema */
}


/* 4d. Label dei campi */
.woocommerce-MyAccount-content form label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}


/* ===========================================================
   5. FIX LAYOUT COLONNE PRINCIPALI (Navigazione 25% / Contenuto 75%)
   =========================================================== */

/* 5a. Navigazione Account (Menu a sinistra) */
.woocommerce-account #customer_login .col-1 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 5b. Contenuto Account (Dati a destra) */
.woocommerce-account #customer_login .col-2 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 5c. Fix Indirizzi Affiancati (Riepilogo) */
.woocommerce-Addresses .col-1.woocommerce-Address,
.woocommerce-Addresses .col-2.woocommerce-Address {
    flex: 0 0 49% !important;
    max-width: 49% !important;
    padding: 0 10px; 
    box-sizing: border-box;
}

/* 5d. Layout Mobile */
@media (max-width: 991.98px) { 
    .woocommerce-account #customer_login .col-1,
    .woocommerce-account #customer_login .col-2,
    .woocommerce-Addresses .col-1.woocommerce-Address,
    .woocommerce-Addresses .col-2.woocommerce-Address {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
}










/* =========================================================
   WOOCOMMERCE: STILI PAGINA IL MIO ACCOUNT (TEMA FIGLIO FIX)
   ========================================================= */

/* 0. MARGINI GENERALI E PADDING DEL CONTENUTO - PAGINA ACCOUNT */
.woocommerce-MyAccount-content {
    /* Aggiunge padding interno per distanziare il contenuto dal bordo della colonna */
    padding: 20px; 
}
.woocommerce-account .u-columns.col2-set {
    /* Aggiunge margine in alto e in basso per separare dal header/footer */
    margin-top: 30px; 
    margin-bottom: 30px;
}

/* 0b. FIX: MARGINI PAGINA ORDINE RICEVUTO (Grazie) */
/* Applica i margini verticali (30px) al contenitore principale della pagina "Ordine Ricevuto" */
.woocommerce-order-received .woocommerce .woocommerce-order {
    margin-top: 30px !important; 
    margin-bottom: 30px !important;
    margin-left: 30px !important; 
    margin-right: 30px !important;
}
.woocommerce-order-received .woocommerce-order {
    padding-left: 30px ; 
    padding-right: 30px ; 
}


/* 1. Titoli */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-size: 1.5rem; 
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #cc0000;
}

/* 2. Tabelle */
.woocommerce-account table.shop_table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
    padding: 10px;
    vertical-align: top;
    line-height: 1.4;
    border-top: 1px solid #ccc;
}
.woocommerce-account .shop_table.my_account_orders tr:first-child {
    border-top: none;
}


/* ==============================================
   3. MENU DI NAVIGAZIONE A SINISTRA
   ============================================== */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
    background: none; 
}
.woocommerce-MyAccount-navigation ul li {
    padding: 0;
    border-bottom: 1px solid #eee;
}
.woocommerce-MyAccount-navigation a {
    display: block; 
    padding: 10px 15px;
    color: #263036;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
}
.woocommerce-MyAccount-navigation a:hover {
    background-color: #f0f0f0; 
    color: #263036; 
}
.woocommerce-MyAccount-navigation li.is-active a {
    font-weight: bold;
    background-color: #cc0000;
    color: #ffffff;
    border-radius: 0;
}


/* ========================================================
   4. FIX FORM E CAMPI (Risoluzione del problema di larghezza)
   ======================================================== */

/* Rimuove Flexbox dal contenitore principale per le form */
.woocommerce-MyAccount-content form .form-row {
    margin-bottom: 15px;
    display: block !important; 
    width: 100% !important;
}

/* 4a. Campi larghi (come la maggior parte degli indirizzi) */
.woocommerce-MyAccount-content form .form-row.form-row-wide,
.woocommerce-MyAccount-content form .form-row.form-row-first,
.woocommerce-MyAccount-content form .form-row.form-row-last {
    /* Forziamo ogni campo al 100% per un layout pulito a colonna singola */
    width: 100% !important; 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    margin-left: 0 !important;
}

/* 4b. Stile input */
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form .select2-container,
.woocommerce-MyAccount-content form textarea {
    width: 100% !important; 
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: auto;
}

/* 4c. Fix per il wrapper dei campi indirizzo (se c'è) */
.woocommerce-address-fields,
.woocommerce-address-fields__field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}


/* 4d. Label dei campi */
.woocommerce-MyAccount-content form label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}


/* ===========================================================
   5. FIX LAYOUT COLONNE PRINCIPALI (Navigazione 25% / Contenuto 75%)
   =========================================================== */

/* 5a. Navigazione Account (Menu a sinistra) */
.woocommerce-account #customer_login .col-1 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 5b. Contenuto Account (Dati a destra) */
.woocommerce-account #customer_login .col-2 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 5c. Fix Indirizzi Affiancati (Riepilogo) */
.woocommerce-Addresses .col-1.woocommerce-Address,
.woocommerce-Addresses .col-2.woocommerce-Address {
    flex: 0 0 49% !important;
    max-width: 49% !important;
    padding: 0 10px; 
    box-sizing: border-box;
}

/* 5d. Layout Mobile */
@media (max-width: 991.98px) { 
    .woocommerce-account #customer_login .col-1,
    .woocommerce-account #customer_login .col-2,
    .woocommerce-Addresses .col-1.woocommerce-Address,
    .woocommerce-Addresses .col-2.woocommerce-Address {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
}

.woocommerce-column--billing-address.col-1,
.woocommerce-column--shipping-address.col-2 	{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
	
    }

.woocommerce-column--billing-address.col-1 > h2,
.woocommerce-column--shipping-address.col-2 > h2 	{
    font-size: 1.1rem; 
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #cc0000;
    }
 
 /* 5e. Icona menu Account */

.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon {
	font-size: 0.75em; 
}




/* BLINDA IL CARRELLO CONTRO GLI SCRIPT DEL PADRE */


/* Impedisce alla barra di sparire durante il ricaricamento dei frammenti */
.wc-block-mini-cart__drawer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important; 
    /* Rimuove qualsiasi transizione che possa causare il flash visivo 
    transition: none !important; 
    animation: none !important;*/
}

/* Evita che l'overlay (lo sfondo scuro) lampeggi */
.wc-block-mini-cart__overlay {
    display: block !important;
    opacity: 1 !important;
    transition: none !important;
}


/* Evita il flash del mini-cart block */
.wc-block-mini-cart {
    display: block !important;
}

/* Se il carrello appare "esploso" all'inizio, forziamo lo stato iniziale */
.wc-block-mini-cart__drawer {
    visibility: hidden;
}

/* Quando WooCommerce aggiunge la classe di attivazione, lo rendiamo visibile */
.wc-block-mini-cart__drawer.is-active {
    visibility: visible !important;
}

/* Rimuovi eventuali conflitti di visibilità del tema padre sul wrapper del carrello */
#header-cart-desktop-wrapper, 
#header-cart-mobile-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
}