/*
 Theme Name:   Royal Elementor Child
 Template:     royal-elementor-kit
*/

/* ============================================================
   1. GLOBAL & LAYOUT
   ============================================================ */

/* Contenitore Boxed Centrato */
.shop-products-boxed-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Forza la larghezza del contenuto */
.single-product .site-content, 
.single-product .content-area,
.single-product .ast-container {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    float: none !important; display: block !important;
}

/* ============================================================
   2. HEADER SHOP (Sfondo, Titolo, Breadcrumb)
   ============================================================ */

.woocommerce-products-header {
    background-image: url('/wp-content/uploads/2024/12/bgcontatti.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 100px 20px !important;
    margin-bottom: 40px !important;
    color: #ffffff;
    text-align: center;
    position: relative;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
}

.woocommerce-products-header h1 {
    color: #fff !important; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.6); 
    position: relative; z-index: 10; margin: 0 !important;
}

/* FIX BREADCRUMB */
nav.woocommerce-breadcrumb {
    margin: 10px 0 15px 0 !important; 
    padding: 0 15px !important; 
    background: transparent !important; border: none !important;
    display: block !important; text-align: left !important;
    width: 100% !important; max-width: 1280px !important;
    margin-left: auto !important; margin-right: auto !important;
    font-size: 12px !important; color: #777 !important;
}
nav.woocommerce-breadcrumb a { color: #333 !important; }

/* Nascondi breadcrumb su Shop e Archivi (lo vogliamo solo sul prodotto) */
.woocommerce-shop nav.woocommerce-breadcrumb,
.post-type-archive-product nav.woocommerce-breadcrumb,
.tax-product_cat nav.woocommerce-breadcrumb,
.archive.woocommerce nav.woocommerce-breadcrumb {
    display: none !important; 
}

/* ============================================================
   3. PAGINA ARCHIVIO / SHOP (Griglia & Features Bar)
   ============================================================ */

/* Barra Vantaggi (Icone) */
.shop-features-bar {
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center;
    background: #fff; padding: 20px 0; margin-bottom: 40px; width: 100%;
}
.feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.feature-icon { 
    width: 50px; height: 50px; background: #f9f9f9; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px; 
}
.feature-icon svg { width: 24px; height: 24px; color: #333; }
.feature-text h4 { font-size: 13px; font-weight: 700; margin: 0 0 5px 0; text-transform: uppercase; }
.feature-text p { font-size: 12px; color: #777; margin: 0; }

/* Griglia Prodotti 4 Colonne */
.woocommerce ul.products {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 25px !important;
    margin: 0 !important; padding: 0 !important; width: 100% !important; float: none !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; }

/* Card Prodotto */
.woocommerce ul.products li.product {
    width: 100% !important; margin: 0 !important; background: #fff; border: 1px solid #eee; border-radius: 8px;
    overflow: hidden; position: relative; transition: all 0.3s ease; padding: 0 !important; float: none !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); z-index: 5; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; padding: 20px 20px 70px 20px; }
.woocommerce ul.products li.product img { width: 100% !important; height: auto !important; margin: 0 auto 15px auto !important; }
.woocommerce ul.products li.product h2.woocommerce-loop-product__title { font-size: 16px !important; color: #333; margin-bottom: 5px; padding: 0; }
.woocommerce ul.products li.product .price { color: #000; font-weight: bold; font-size: 18px; display: block; }
.woocommerce ul.products li.product .button {
    position: absolute; bottom: -60px; left: 0; width: 100%; background: #000; color: #fff; padding: 15px 0;
    text-align: center; transition: all 0.3s ease; display: flex !important; justify-content: center;
    font-weight: 600; text-transform: uppercase; font-size: 12px; border-radius: 0;
}
.woocommerce ul.products li.product:hover .button { bottom: 0; }
.woocommerce-result-count, .woocommerce-ordering { display: none !important; }
.custom-loop-category { font-size: 10px; text-transform: uppercase; background: #f4f4f4; padding: 3px 6px; border-radius: 3px; color: #888; display: inline-block; margin-top: 5px; }


/* ============================================================
   4. PAGINA SINGOLO PRODOTTO - LAYOUT FLEXBOX (FIX COLONNE)
   ============================================================ */

/* Contenitore Flex Principale */
.single-product-layout div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Allinea in alto */
    margin-top: 20px !important;
    width: 100% !important;
}

/* Colonna Sinistra: Immagini (45%) */
.woocommerce-product-gallery { 
    width: 45% !important; max-width: 45% !important; flex: 0 0 45% !important;
    margin: 0 !important; padding: 0 !important;
    border: 1px solid #f0f0f0; border-radius: 8px; padding: 20px; box-sizing: border-box !important;
    order: 1 !important; /* Forza ordine visivo */
}

/* Colonna Destra: Informazioni (50%) */
.entry-summary { 
    width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
    display: flex; flex-direction: column; 
    box-sizing: border-box !important; padding: 0 !important; margin: 0 !important;
    order: 2 !important; /* Forza ordine visivo */
}

.product_title { font-size: 26px !important; line-height: 1.2; margin-bottom: 15px; color: #111; font-weight: 800; }

/* Prezzo Unitario Sotto Titolo */
.header-price-group { margin-bottom: 20px; width: 100%; }
.title-separator { width: 100%; height: 1px; background-color: #e5e5e5; margin: 0px 0 15px 0; }
.main-unit-price { font-size: 24px !important; font-weight: 700; color: #000; }
.main-unit-price .woocommerce-Price-amount { font-size: 24px; color: #000; }

.price-total-preview {
    width: 100%; 
    display: block; 
    margin-bottom: 10px; /* Spazio sotto il prezzo */
    font-size: 16px;     /* Grandezza giusta per un subtotale */
    color: #333; 
    font-weight: 600;
}

/* Descrizione Breve */
.woocommerce-product-details__short-description {
    font-size: 15px !important; color: #555; line-height: 1.6; margin-bottom: 25px;
}

/* Trust Badges */
.product-trust-badges { margin: 20px 0; padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.trust-icons-grid { display: flex; flex-direction: column; gap: 15px; }
.trust-item { display: flex; align-items: center; gap: 15px; }
.trust-item .t-icon svg { width: 32px; height: 32px; color: #333; stroke-width: 1.5; }
.t-text strong { display: block; font-size: 15px; color: #222; }
.t-text small { font-size: 14px; color: #777; }


/* ============================================================
   5. NUOVI STILI VARIAZIONI & QUANTITÀ (B2B/B2C FIX)
   ============================================================ */

/* Rendiamo visibili i contenitori principali */
table.variations { display: block !important; width: 100%; margin-bottom: 15px; border: none !important; }
.single_variation_wrap { display: block !important; }
.quantity { display: block !important; margin-right: 15px; }

/* FIX: RIMUOVI OPACITÀ E SFONDI SU HOVER */
table.variations tr, table.variations tr:hover, table.variations td { 
    background: transparent !important; opacity: 1 !important; border: none !important;
}

/* Nascondiamo elementi nativi (Select e Label) */
table.variations select { display: none !important; } 
table.variations th.label { display: none !important; } 
table.variations td { display: block !important; padding: 0 !important; text-align: left !important; }
table.variations label { font-weight: 600; margin-bottom: 8px; display: block; color:#222; font-size: 14px; }
a.reset_variations { display: none !important; } /* Nascondi "Svuota" */

/* Bottoni Variazione (generati dal JS) */
.custom-swatches-wrapper { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }

.swatch-btn {
    background: #fff; border: 1px solid #ccc; padding: 12px 20px; 
    border-radius: 6px; cursor: pointer; font-size: 14px; color: #555;
    transition: all 0.2s; font-weight: 500;
}
.swatch-btn:hover { border-color: #000; color: #000; }
.swatch-btn.active {
    background: #f0f7ff; border: 2px solid #2563eb; color: #2563eb; 
    font-weight: bold; padding: 11px 19px; /* Compensa bordo */
}

/* Stepper Quantità (+ / -) */
.qty-stepper-wrapper {
    display: inline-flex; align-items: center; border: 1px solid #ddd; 
    border-radius: 4px; overflow: hidden; margin-bottom: 0; vertical-align: middle; height: 45px;
}
.qty-stepper-wrapper input.qty {
    border: none !important; text-align: center; width: 50px; height: 45px; 
    font-size: 16px; font-weight: bold; padding: 0 !important; margin: 0 !important;
    -moz-appearance: textfield; background: #fff !important; color: #000 !important;
}
.qty-stepper-wrapper input.qty::-webkit-outer-spin-button,
.qty-stepper-wrapper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty-stepper-wrapper .stepper-btn {
    background: #f8f8f8; border: none; width: 40px; height: 45px; 
    font-size: 20px; cursor: pointer; color: #333; display: flex; 
    align-items: center; justify-content: center; transition: background 0.2s;
}
.qty-stepper-wrapper .stepper-btn:hover { background: #eee; }

/* Wrapper Generale Form e Bottone */
.amazon-qty-wrapper.style-clean {
    background: #fff; padding: 0; border: none; margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap;
}
/* ============================================================
   FIX LAYOUT: QUANTITÀ + BOTTONE + LOGHI
   ============================================================ */

/* 1. Contenitore Flessibile: "wrap" permette di andare a capo */
.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important; /* FONDAMENTALE: Permette agli elementi di scendere */
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
}

/* 2. Stile per il contenitore dell'immagine */
.custom-payment-sandwich {
    flex-basis: 100%; /* Forza a occupare tutta la riga nuova */
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
}

/* 3. Stile dell'immagine stessa */
.custom-payment-sandwich img {
    max-width: 200px;
    height: auto;
    display: block;
}
.single_add_to_cart_button {
    background: #2563eb !important; color: #fff !important;
    padding: 0 30px !important; height: 45px !important;
    font-size: 16px !important; font-weight: 600 !important;
    border-radius: 6px !important; margin-left: 0 !important; margin-top: 0 !important;
}

/* Prezzo Totale Dinamico (Basso) */
.price-total-preview {
    width: 100%; display: block; margin-top: 15px;
    font-size: 20px; color: #000; font-weight: 700;
}


/* ============================================================
   6. ACCORDION + SIDEBAR (Layout Custom)
   ============================================================ */

.custom-product-extra-grid {
    grid-column: 1 / -1 !important;
    display: flex !important; flex-wrap: nowrap !important;
    align-items: flex-start !important; justify-content: space-between !important; 
    gap: 0 !important; margin-top: 50px !important;
    border-top: 1px solid #eee !important; padding-top: 40px !important; 
    width: 100% !important; margin-bottom: 60px !important;
	order: 10 !important;
}

/* Colonna Sinistra */
.custom-content-col { width: 72% !important; flex: 0 0 72% !important; min-width: 0 !important; }
/* Colonna Destra */
.custom-sidebar-col { width: 25% !important; flex: 0 0 25% !important; margin: 0 !important; }

/* Accordion */
.accordion-item { border-bottom: 1px solid #eee; margin-bottom: 0; }
.accordion-header { padding: 15px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #555; text-transform: none; }
.accordion-content { display: none; padding-bottom: 30px; color: #555; line-height: 1.6; font-size: 15px; }
.accordion-content h2 { display: none; } 

/* Sidebar Products */
.sidebar-title {
    font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important;
    color: #222 !important; margin: 0 0 20px 0 !important; border-bottom: 1px solid #ddd;
    padding-bottom: 10px; display: block;
}
.custom-sidebar-col .related.products { width: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; }
.custom-sidebar-col ul.products { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 100% !important; }
.custom-sidebar-col li.product {
    width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 15px !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; margin-bottom: 0 !important;
}
.custom-sidebar-col li.product:hover { transform: none !important; }
.custom-sidebar-col li.product a img { width: 60px !important; height: 60px !important; object-fit: cover !important; margin: 0 !important; border-radius: 4px; flex: 0 0 60px !important; }
.custom-sidebar-col li.product a { display: flex; align-items: center; gap: 10px; width: 100%; }
.custom-sidebar-col .woocommerce-loop-product__title { font-size: 13px !important; margin: 0 0 5px 0 !important; font-weight: 600 !important; }
.custom-sidebar-col .price { font-size: 13px !important; color: #444 !important; }
.custom-sidebar-col .button, .custom-sidebar-col .custom-loop-category { display: none !important; }

/* KILLER SIDEBAR STANDARD (rimuove sidebar del tema) */
.single-product #secondary, .single-product #sidebar-primary, .single-product .widget-area { display: none !important; }


/* ============================================================
   7. MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* HEADER MOBILE */
    .woocommerce-products-header { padding: 15px 10px !important; height: auto !important; }
    .woocommerce-products-header h1 { font-size: 20px !important; line-height: 1.1 !important; }

    /* FEATURES BAR SCROLLABILE */
    .shop-features-bar {
        flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important;
        gap: 10px !important; padding: 5px 0 !important; margin-bottom: 25px !important;
    }
    .feature-item { flex: 0 0 auto !important; width: 80px !important; }
    .feature-text p { display: none !important; }

    /* SHOP 2 COLONNE */
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .woocommerce ul.products li.product .button { display: none !important; }

    /* SINGLE PRODUCT MOBILE */
    .single-product-layout div.product { display: block !important; }
    .single-product-layout .woocommerce-product-gallery,
    .single-product-layout .entry-summary { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    
    .product_title { font-size: 22px !important; }
    
    /* Layout Extra in colonna */
    .custom-product-extra-grid { flex-direction: column !important; gap: 30px !important; }
    .custom-content-col, .custom-sidebar-col { width: 100% !important; flex: 0 0 100% !important; }
    
    .custom-sidebar-col ul.products { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    .custom-sidebar-col li.product { flex-direction: column !important; align-items: flex-start !important; }
    .custom-sidebar-col li.product a img { width: 100% !important; height: auto !important; }
    .custom-sidebar-col li.product a { flex-direction: column !important; align-items: flex-start !important; }
}

.woocommerce-variation-price {
    display: none !important;
}

/* Opzionale: Se vuoi nascondere anche eventuali etichette "Prezzo:" */
.single_variation .price {
    display: none !important;
}

/* ============================================================
   FIX ESTETICI GALLERIA & NAVIGAZIONE
   ============================================================ */

/* 1. RIMUOVI FRECCE PREV/NEXT (Quelle brutte sotto le immagini) */
.ast-post-navigation, 
.product-navigation, 
.woocommerce-product-gallery .flex-direction-nav,
nav.post-navigation {
    display: none !important;
}

/* 2. GALLERIA: Niente opacità sulle miniature non selezionate */
.woocommerce-product-gallery .flex-control-thumbs li img {
    opacity: 1 !important; /* Sempre visibili al 100% */
    border: 2px solid transparent !important; /* Bordo invisibile di base per non far saltare il layout */
    transition: border-color 0.2s ease;
    padding: 0 !important; /* Rimuove spazi extra */
    margin-top: 10px;
}

/* 3. GALLERIA: Bordo colorato SOLO sull'immagine selezionata */
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border-color: #000 !important; /* Colore del bordo attivo (Nero) */
    /* Se vuoi il bordo blu come il tema, usa: #2563eb */
}

/* (Opzionale) Rimuove l'icona della lente d'ingrandimento se ti da fastidio */
.woocommerce-product-gallery__trigger {
    border-radius: 50% !important;
}

/* ============================================================
   FIX LAYOUT: QUANTITÀ + BOTTONE IN LINEA
   ============================================================ */

.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: nowrap !important; /* Impedisce di andare a capo */
    align-items: center !important; /* Allinea verticalmente al centro */
    gap: 15px !important; /* Spazio tra quantità e bottone */
    width: 100% !important;
}

/* Rimpiccioliamo il wrapper della quantità per fargli spazio */
.quantity {
    margin: 0 !important;
    flex: 0 0 auto !important; /* Non si espande */
}

/* Il bottone prende tutto lo spazio rimanente */
button.single_add_to_cart_button {
    width: auto !important;
    flex-grow: 1 !important; /* Si allarga per riempire la riga */
    margin: 0 !important;
    height: 45px !important; /* Assicurati che abbia la stessa altezza della qty */
}

/* ============================================================
   FIX ESTETICI: BORDI IMMAGINI
   ============================================================ */

/* Bordo e Padding immagine principale */
.woocommerce-product-gallery__image img {
    border: 1px solid #e1e1e1 !important;
    padding: 5px !important; /* Spazio bianco interno */
    border-radius: 4px !important;
    background-color: #fff;
}

/* Bordo e Padding miniature */
.woocommerce-product-gallery .flex-control-thumbs li img {
    border: 1px solid #e1e1e1 !important;
    padding: 3px !important;
    border-radius: 3px !important;
    background-color: #fff;
    opacity: 1 !important;
}

/* Bordo attivo (quando selezionata) */
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border-color: #000 !important; /* O il tuo colore primario */
    box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Leggero alone per evidenziare */
}

/* Container dello switch */
.login-switch-container {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

/* Stile dell'interruttore (Toggle) */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #2196F3; /* Cambia con il colore del tuo brand */
}
input:checked + .slider:before {
    transform: translateX(26px);
}
/* =========================================
   1. GESTIONE MESSAGGI WOOCOMMERCE (Avvisi/Errori)
   ========================================= */

/* Il contenitore dei messaggi deve stare SOPRA a tutto */
.woocommerce-notices-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px auto; /* Centra e lascia spazio sotto */
    display: block;
    position: relative;
    z-index: 999; /* Assicura che stia sopra l'interruttore e la card */
}

/* Stile estetico dei box messaggi */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 15px !important;
}

/* =========================================
   2. STILI CONTENITORE E POSIZIONAMENTO
   ========================================= */

/* Contenitore principale Login/Register */
#customer_login.custom-login-wrapper {
    position: relative;
    z-index: 1; /* Livello inferiore rispetto ai messaggi */
    
    /* GESTIONE SPAZIO BIANCO HEADER */
    /* Se usi questo negativo, assicurati che i messaggi sopra abbiano spazio */
    margin-top: -50px !important; 
    padding-top: 0;
}

/* Se c'è un messaggio di errore/avviso, spingiamo giù il login 
   per evitare sovrapposizioni visive brutte (funziona sui browser moderni) */
.woocommerce-notices-wrapper:not(:empty) + #customer_login.custom-login-wrapper {
    margin-top: 0 !important; /* Annulla il negativo se c'è un messaggio */
    transition: margin 0.3s ease;
}

/* Intestazione con lo switch */
.login-switcher-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
    font-weight: 600;
}

/* =========================================
   3. STILE INTERRUTTORE (SWITCH)
   ========================================= */

.flip-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    margin: 0;
    cursor: pointer;
}

.flip-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e4e4e4;
    transition: .4s;
    border-radius: 34px;
    pointer-events: none;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* STATO ATTIVO (Gestito da JS .switch-active) */
.flip-switch.switch-active .slider {
    background-color: #2196F3; /* Tuo colore blu */
}

.flip-switch.switch-active .slider:before {
    transform: translateX(30px);
}

/* =========================================
   4. STILI 3D FLIP CARD
   ========================================= */

.flip-container {
    perspective: 1000px;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    min-height: 550px; 
}

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
}

.flip-container.do-flip .flipper {
    transform: rotateY(180deg);
}

.front-face, .back-face {
    width: 100%;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}

.front-face {
    z-index: 2;
    transform: rotateY(0deg);
}

.back-face {
    transform: rotateY(180deg);
}

/* Nasconde titoli H2 duplicati */
.front-face h2, 
.back-face h2 {
    display: none;
}

/* Reset colonne WooCommerce */
.u-column1, .u-column2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* =========================================
   5. OVERRIDE PLUGIN B2B & CAMPI EXTRA
   ========================================= */

.af-dependable-field label,
.af-dependable-field br {
    display: none !important;
}

/* Classe per nascondere i campi via JS */
.hidden-field {
    display: none !important;
}

/* Forza nascondimento campi B2B */
.force-hide-b2b {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.force-hide-b2b label, 
.force-hide-b2b br {
    display: none !important;
}

/* ============================================================
   8. LAYOUT WIDE 1440px (Solo Scheda Prodotto)
   ============================================================ */
@media (min-width: 1500px) {
    .single-product .shop-products-boxed-container {
        max-width: 1440px !important;
        padding: 0 40px !important;
    }
}

/* ============================================================
   9. GRIGLIA QUANTITÀ B2C (COMPATTA & EQUAL HEIGHT)
   ============================================================ */
.b2c-qty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne esatte */
    gap: 8px; /* Spazio ridotto tra i box */
    margin-bottom: 20px;
    width: 100%;
}

.qty-box {
    border: 1px solid #ddd; /* Bordo più sottile */
    border-radius: 6px;
    padding: 10px 4px; /* Padding laterale ridotto al minimo */
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    background: #fff;
    
    /* Equal Height & Layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuisce il contenuto verticalmente */
    height: 100%; /* Forza altezza uguale nella cella grid */
    min-height: 90px; /* Altezza minima ridotta */
}

.qty-box:hover { border-color: #999; }
.qty-box.active {
    border-color: #2563eb;
    background-color: #f6faff;
    box-shadow: 0 0 0 1px #2563eb inset; /* Bordo interno colorato */
}

/* Titolo Box (es. "3 Pezzi") */
.box-qty-title {
    font-size: 13px; /* Testo più piccolo */
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
    display: block;
}

/* Prezzo Totale nel Box */
.box-total-price {
    font-size: 16px; /* Ridotto leggermente */
    font-weight: 800;
    color: #000;
    display: block;
    margin: 2px 0;
}

/* Prezzo Unitario e Sconto */
.box-unit-info {
    font-size: 11px;
    color: #666;
    line-height: 1.2;
}
.box-discount-label {
    color: #16a34a;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}

/* --- BOX 6 (Stepper Dinamico) --- */
.qty-box.is-stepper {
    cursor: default;
    padding-bottom: 5px;
}

.box-stepper-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Meno spazio tra + e - */
    margin: 5px 0;
    width: 100%;
}

.box-stepper-ui button {
    width: 24px; height: 24px; /* Bottoni più piccoli */
    background: #eee; border: none; border-radius: 4px;
    font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}

.box-stepper-ui input.grid-qty-display {
    width: 50px !important; /* ALLARGATO: Spazio per il numero */
    height: 24px !important;
    text-align: center; 
    border: 1px solid transparent; 
    background: transparent;
    font-weight: 800; font-size: 15px;
    padding: 0 !important; margin: 0 !important;
    pointer-events: none;
    color: #000;
}

/* Nasconde default */
.b2c-hidden-default { display: none !important; }

/* Pulsante ACQUISTA ORA */
.btn-buy-now {
    background-color: #000 !important;
    color: #fff !important;
    margin-left: 10px !important;
    border: 1px solid #000 !important;
    flex: 1; /* Si allarga se flessibile */
}

@media (max-width: 480px) {
    .b2c-qty-grid { grid-template-columns: repeat(2, 1fr); }
    .btn-buy-now { margin-left: 0 !important; margin-top: 10px !important; width: 100%; }
}

/* ============================================================
   11. CHECKOUT FINAL (Stable Coupon & Classic Payment)
   ============================================================ */

/* --- GRIGLIA LAYOUT --- */
.custom-checkout-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
}
.checkout-col-left {
    flex: 1 1 58%;
    min-width: 300px;
}
.checkout-col-right {
    flex: 1 1 38%;
    min-width: 300px;
}

/* --- COLONNA SINISTRA: CAMPI COMPATTI --- */
.woocommerce-billing-fields__field-wrapper, 
.woocommerce-shipping-fields__field-wrapper {
    margin-bottom: 15px;
}

/* Riduciamo lo spazio verticale tra i campi */
.woocommerce form p.form-row {
    margin-bottom: 10px !important;
    padding: 0 !important;
}

/* Label più piccole */
.woocommerce form .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    line-height: 1;
}

/* Input Fields */
.woocommerce form .form-row .input-text, 
.woocommerce form .form-row select {
    padding: 8px 10px !important;
    min-height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    box-shadow: none !important;
}
.woocommerce form .form-row .input-text:focus {
    border-color: #000;
}

/* Titoli Sezioni */
.woocommerce-billing-fields h3, 
#ship-to-different-address label {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    display: block;
}
.custom-shipping-section {
    margin-top: 25px;
}

/* --- COLONNA DESTRA: CARD RIEPILOGO --- */
#order_review {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin-top: 20px;
}
#order_review_heading {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* --- COUPON (Posizionato fuori dalla tabella) --- */
#custom-coupon-anchor {
    margin-bottom: 20px;
}

/* Form Coupon */
#custom-coupon-anchor .woocommerce-form-coupon {
    border: 1px solid #e5e5e5 !important;
    padding: 10px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 10px;
    background: #fff;
    border-radius: 8px;
    align-items: center;
}

/* Input Codice (Si allarga) */
#custom-coupon-anchor .input-text {
    flex: 1 !important; /* PRENDE TUTTO LO SPAZIO RIMANENTE */
    width: 100% !important;
    padding: 0 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    height: 45px;
    font-size: 14px;
    box-shadow: none !important;
}

/* Bottone Applica (Stretto) */
#custom-coupon-anchor .button {
    flex: 0 0 auto !important; /* Non si allarga */
    width: auto !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 0 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px;
    border-radius: 4px !important;
    height: 45px;
    line-height: 45px; /* Centra testo verticalmente */
    margin: 0 !important;
    cursor: pointer;
    transition: background 0.2s;
}
#custom-coupon-anchor .button:hover {
    background-color: #333 !important;
}

/* Pulizia elementi interni inutili del coupon */
#custom-coupon-anchor p { margin: 0 !important; padding: 0 !important; width: 100%; }
#custom-coupon-anchor .form-row-first { width: auto !important; float: none !important; flex: 1; }
#custom-coupon-anchor .form-row-last { width: auto !important; float: none !important; }

/* --- STILE TABELLA PRODOTTI (Clean) --- */
table.custom-order-summary {
    width: 100%;
    border-collapse: collapse;
    border: none !important;
}
table.custom-order-summary td, 
table.custom-order-summary th {
    border: none !important;
    background: transparent !important;
}
table.custom-order-summary tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Cella Prodotto */
.custom-product-block {
    padding: 12px 0 !important;
}
.cp-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}
.cp-title {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    line-height: 1.3;
}
.cp-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cp-qty-text {
    font-size: 12px;
    color: #888;
    background: #f7f7f7;
    padding: 2px 6px;
    border-radius: 3px;
}
.cp-price-text {
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

/* --- TOTALI --- */
tr.spacer-row th, tr.spacer-row td {
    border-top: 2px solid #eee !important;
    padding-top: 15px !important;
}
table.custom-order-summary tfoot th {
    text-align: left;
    color: #666;
    font-size: 13px;
    padding: 8px 0 !important;
    width: 60%;
}
table.custom-order-summary tfoot td {
    text-align: right;
    padding: 8px 0 !important;
    font-size: 14px;
    color: #222;
}
table.custom-order-summary .order-total th, 
table.custom-order-summary .order-total td {
    padding-top: 15px !important;
    font-size: 20px;
    color: #000;
    font-weight: 800;
    border-top: 1px solid #eee !important;
}

/* --- PAGAMENTO: STILE CLASSICO & PULITO --- */
#payment {
    margin-top: 25px;
    background: transparent;
}
#payment ul.payment_methods {
    border: none;
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
}

/* Riga Metodo */
#payment ul.payment_methods li.wc_payment_method {
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid #eee; /* Riga sottile */
    background: transparent;
}
#payment ul.payment_methods li.wc_payment_method:last-child {
    border-bottom: none;
}

/* Label (Radio + Testo) */
#payment ul.payment_methods li label {
    margin-left: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    width: auto;
}
#payment ul.payment_methods li input {
    margin-top: -2px;
    vertical-align: middle;
}

/* Icone (Visa, MC, PayPal) */
#payment ul.payment_methods li label img {
    float: none;
    vertical-align: middle;
    margin-left: 10px;
    max-height: 24px;
}

/* Box Descrizione (Appare sotto) */
#payment div.payment_box {
    background-color: #f9f9f9;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    padding: 15px;
    margin: 10px 0 10px 25px; /* Indentato */
    border-radius: 4px;
    position: relative;
}
#payment div.payment_box::before {
    content: "";
    display: block;
    border: 8px solid transparent;
    border-bottom-color: #f9f9f9;
    position: absolute;
    top: -16px;
    left: 10px;
}

/* Bottone Ordine */
#place_order {
    width: 100%;
    padding: 18px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}
#place_order:hover {
    background-color: #333;
}

/* Responsive */
@media (max-width: 900px) {
    .custom-checkout-grid {
        flex-direction: column;
    }
    .checkout-col-left, 
    .checkout-col-right {
        flex: 0 0 100%;
    }
}

/* ============================================================
   12. NUOVO LAYOUT SHOP (Light Theme + Mobile Logic)
   ============================================================ */

/* HEADER CHIARO & PULITO */
.shop-custom-header.light-theme {
    background-color: #f9fafb; /* Grigio chiarissimo, quasi bianco */
    border-bottom: 1px solid #eee;
    padding: 30px 0;
    margin-bottom: 30px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    left: 0;
}

.shop-custom-header .header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: left;
}

.shop-custom-header h1 {
    color: #111 !important; /* Testo Scuro */
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.2;
}

.shop-custom-header p {
    color: #555; /* Testo Grigio scuro */
    font-size: 16px;
    font-weight: 400;
    max-width: 600px;
    margin: 0;
}

/* WRAPPER SEZIONI */
.shop-section-wrapper {
    margin-bottom: 60px;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin-bottom: 25px;
    display: block;
    text-align: left;
}

/* GRIGLIA DESKTOP (Standard 3 colonne) */
.shop-mixed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    align-items: stretch;
}

/* CARD IMMAGINE CATEGORIA */
.category-promo-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Altezza Desktop */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0 !important; /* Fix per liste woo */
}

/* Immagini */
.card-combustibili {
    background-image: url('https://www.industrielom.com/wp-content/uploads/2025/12/comustibili_industrielom_prodotti.jpg');
}
.card-alcoli {
    background-image: url('https://www.industrielom.com/wp-content/uploads/2025/12/alcoli_industrielom_prodotti.jpg');
}

/* Testo su Immagine */
.promo-content {
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    width: 100%;
    padding: 20px;
    color: #fff;
}
.promo-content h3 { color: #fff !important; font-size: 20px; font-weight: 700; margin: 0; }
.promo-content p { color: rgba(255,255,255,0.9); font-size: 13px; margin: 0; }


/* ============================================================
   RESPONSIVE MOBILE (LOGICA SPECIFICA RICHIESTA)
   ============================================================ */
@media (max-width: 768px) {
    
    /* Regola generale Header Mobile */
    .shop-custom-header h1 { font-size: 26px; }

    /* --- 1. COMBUSTIBILI (2 Prodotti + Immagine Nascosta) --- */
    .section-combustibili .shop-mixed-grid {
        grid-template-columns: 1fr 1fr; /* 2 Prodotti affiancati */
        gap: 10px;
    }
    
    /* NASCONDI IMMAGINE COMBUSTIBILI */
    .section-combustibili .card-combustibili {
        display: none !important; 
    }

    /* --- 2. ALCOLI (Immagine Visibile + Prodotto) --- */
    .section-alcoli .shop-mixed-grid {
        grid-template-columns: 1fr 1fr; /* 2 Colonne (Immagine | Prodotto) */
        gap: 10px;
    }

    /* Adatta l'immagine per stare bene nella griglia piccola */
    .section-alcoli .card-alcoli {
        min-height: 250px; /* Altezza ridotta per mobile */
        height: auto;
    }
    
    /* Riduci testo promozionale su mobile */
    .promo-content { padding: 10px; }
    .promo-content h3 { font-size: 14px; }
    .promo-content p { display: none; } /* Nasconde descrizione per pulizia */
}

/* --- CUSTOM SWATCHES STYLE (Override Plugin) --- */

/* Contenitore generale */
.variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px !important;
}

/* Reset dello stile del singolo item */
.variable-item.button-variable-item {
    border-radius: 0 !important; /* Squadrati */
    box-shadow: none !important;
    background: #fff;
    border: 1px solid #ddd !important;
    color: #333;
    padding: 8px 15px !important;
    min-width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.2s ease;
    height: auto !important; /* Fix altezza plugin */
}

/* Stato: HOVER */
.variable-item.button-variable-item:hover {
    border-color: #999 !important;
}

/* Stato: SELEZIONATO (Nero come il tuo vecchio stile) */
.variable-item.button-variable-item.selected {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    font-weight: 600;
}
.variable-item.button-variable-item.selected:hover {
    background-color: #333 !important;
}

/* Stato: DISABILITATO (Blur with Cross style fix) */
.variable-item.button-variable-item.disabled {
    opacity: 0.5;
    background-color: #f9f9f9;
    border-color: #eee !important;
    cursor: not-allowed;
    /* La croce viene aggiunta dal plugin, qui gestiamo solo l'aspetto base */
}

/* =========================================
   OVERRIDE PLUGIN SWATCHES (Stile Morbido Theme-Match)
   ========================================= */

/* Reset contenitore */
ul.variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}

/* STILE BOTTONE BASE (Arrotondato 6px) */
ul.variable-items-wrapper .variable-item:not(.radio-variable-item) {
    border-radius: 6px !important;       /* MORBIDO */
    border: 1px solid #ccc !important;   /* Bordo grigio */
    background-color: #fff !important;   /* Sfondo bianco */
    color: #333 !important;              /* Testo scuro */
    box-shadow: none !important;
    padding: 8px 15px !important;
    min-width: 40px !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    transition: all 0.2s ease-in-out;
}

/* HOVER */
ul.variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
    border-color: #000 !important;
    background-color: #f9f9f9 !important;
}

/* SELEZIONATO (Nero) */
ul.variable-items-wrapper .variable-item.selected:not(.radio-variable-item) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    font-weight: 600 !important;
}

/* =========================================
   LOGICA DI VISIBILITÀ (Nascondi Errori)
   ========================================= */

/* 1. TIPOLOGIA (Secondo attributo): Se disabilitata -> SPARIRE */
ul[data-attribute_name*="tipologia"] li.variable-item.disabled {
    display: none !important;
}

/* 2. FORMATO (Primo attributo): Sempre Visibile e Pulito */
ul[data-attribute_name*="formato"] li.variable-item.disabled {
    display: flex !important;
    opacity: 1 !important;
    background-color: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
}

/* Rimuovi la "X" dal Formato se presente */
ul[data-attribute_name*="formato"] li.variable-item.disabled::before,
ul[data-attribute_name*="formato"] li.variable-item.disabled::after {
    display: none !important;
}


/* =========================================
   NASCONDI TIPOLOGIA SOLO PER B2C
   ========================================= */

/* Nasconde la label e la riga della Tipologia */
body.is-b2c-user table.variations tr:nth-child(2), /* Se è la seconda riga */
body.is-b2c-user .label[for*="tipologia"],         /* Se ci sono label esterne */
body.is-b2c-user ul[data-attribute_name*="tipologia"] {
    position: absolute !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: -1;
}

/* FIX: Assicuriamoci che la prima riga (Formato) non abbia bordi strani sotto */
body.is-b2c-user table.variations tr:first-child {
    border-bottom: none !important;
}