/*
Theme Name: WebNet 2026
Theme URI: https://www.webnet-italia.com
Version: 3.6
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Description: Smart. Fast. Flexible. Beautiful. Light. WebNet WordPress Theme is the most powerful theme in our collection.
Author: Tommaso Capretti
Author URI: https://www.webnet-italia.com
Template: Divi
*/
@import url(../Divi/style.css);
#main-header { box-shadow: none !important; } /* --- Tolgo la linea dal menù principlae --- */
.container.et_menu_container { margin-top: 10px; } /* --- Abbasso di 10px il menù principale --- */

/* ==============================
   Select2 “searchable dropdown” perfettamente in stile Divi
   ============================== */

/* 1) Reset base e larghezza full */
.select2-container {
  width: 100% !important;
  font-family: inherit !important;
}

body > .select2-container {
    max-width: 33% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
}

/* 2) Contenitore singola selezione */
.select2-container--default .select2-selection--single {
  background-color: #ffffff !important;   /* sfondo bianco Divi */
  border: 1px solid #333 !important;     /* bordo grigio chiaro */
  border-radius: 3px !important;           /* arrotondamento Divi */
  height: 48px !important;                 /* altezza standard Divi */
  padding: 0 14px !important;              /* padding interno */
  box-shadow: none !important;             /* senza ombreggiature extra */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1 !important;
}

/* 3) Testo (valore o placeholder) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important;            /* allinea testo */
  font-size: 16px !important;              /* font Divi */
  color: #000000 !important;               /* colore testo */
  margin-right: 24px !important;           /* spazio per la freccia */
}

/* ===================================================================
   Stile personalizzato per la freccia nativa di Select2
   =================================================================== */

/* Freccia normale (punta verso il basso) */
.select2-container--default .select2-selection__arrow b {
    border-color: #333 transparent transparent transparent !important; /* Colore più scuro */
    border-width: 6px 6px 0 6px !important; /* Dimensioni maggiori */
    margin-left: -6px !important; /* Centra la freccia più grande */
    margin-top: 6px !important;  /* Centra la freccia più grande */
}

/* Freccia quando il menù è aperto (punta verso l'alto) */
.select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent #333 transparent !important; /* Colore più scuro */
    border-width: 0 6px 6px 6px !important; /* Dimensioni maggiori e invertita */
}

/* ===================================================================
   FIX FINALE ARROW - Gestione frecce di Divi e Select2
   =================================================================== */

/* 1. Nasconde le frecce di default di Divi (sulla cella E sullo span) */
.et_pb_wc_add_to_cart form.cart .variations td.value:after,
.et_pb_wc_add_to_cart form.cart .variations td.value span:after {
    display: none !important;
}

/* 6) Stile dropdown (lista opzioni) */
.select2-container--default .select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  margin-top: 4px !important;
}

/* 7) Singola opzione */
.select2-container--default .select2-results__option {
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #383838 !important;
}

/* 8) Hover/selezione opzione */
.select2-container--default .select2-results__option--highlighted {
  background-color: #f2f2f2 !important;
  color: #383838 !important;
}

/* 9) Scrollbar dropdown (opzionale: aspetto più leggero) */
.select2-container--default .select2-results__options {
  max-height: 300px;
  overflow-y: auto;
}
.select2-container--default .select2-results__options::-webkit-scrollbar {
  width: 6px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}
/* 1) Rimuovo la freccia nativa di Divi dalla cella della tabella */
.et_pb_wc_add_to_cart form.cart .variations td.value:after {
  display: none !important;
}

/* 4) Colore del placeholder (sempre opaco) */
.dfw-6-add-to-cart .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #000 !important;
  opacity: 1 !important;
}
/* ==============================
   Aumento altezza campo di ricerca nella dropdown Select2
   ============================== */

/* Contenitore del search box (dropdown) */
.dfw-6-add-to-cart .select2-container--default .select2-search--dropdown {
  padding: 6px 0 !important;           /* un po’ di spazio sopra/sotto */
}

/* Input di ricerca vero e proprio */
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 30px !important;             /* imposta l’altezza desiderata */
  line-height: 30px !important;        /* per allineare verticalmente il testo */
  padding: 0 14px !important;          /* padding orizzontale come il campo principale */
  font-size: 16px !important;          /* stessa dimensione dei testi Divi */
  border-radius: 3px !important;       /* bordi arrotondati uguali al container */
  border: 1px solid #111 !important;   /* bordo grigio chiaro */
  box-shadow: none !important;
}
/* ==============================================
   Variations table: collapse e riduzione spazi fra colonne
   ============================================== */

/* 1) Rimuovo gli spacing di default e non allargo la tabella */
.dfw-6-add-to-cart .variations {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: auto !important;             /* si restringe al contenuto */
}

/* 2) Padding minimo per tutte le celle */
.dfw-6-add-to-cart .variations td,
.dfw-6-add-to-cart .variations th {
  padding: 4px 6px !important;         /* 4px sopra/sotto, 6px dx/sx */
}

/* 3) Label a destra, valori a sinistra */
.dfw-6-add-to-cart .variations td.label {
  text-align: right !important;
  white-space: nowrap;               /* evita wrap */
  padding-right: 6px !important;
  width: 1% !important;              /* occupa solo lo spazio del contenuto */
}
.dfw-6-add-to-cart .variations td.value {
  padding-left: 6px !important;
}
/* ==============================================
   Responsive: riduco l'interlinea per le label nella tab responsive
   ============================================== */
@media (max-width: 767px) {
  /* Selettore generico per tutte le label nelle variations,
     o specifico per quella del modello-cellulare */
  .dfw-6-add-to-cart .variations label,
  .dfw-6-add-to-cart .variations label[for="pa_modello-cellulare"] {
    line-height: 1.2 !important;   /* o 1.1 / 1.3 a piacere */
    margin-bottom: 4px !important; /* spazio inferiore controllato */
    display: block;                /* assicura il wrapping corretto */
  }
}
/* FINE CODICE */

@media (max-width: 980px) {
#logo {max-height: 100% !important;margin-top: 10px !important;max-width: 100% !important;}
#main-header {height: 115px;}
}
.mobile_menu_bar:before {color: #000000 !important; font-size: 37px;}
#main-header .et_mobile_menu {background-color: #FFFFFF !important;}
.et_mobile_menu {border-color: #e42c37 !important;}
/* Pulsanti carrello widget */
.et-db #et-boc .et-l .et_pb_widget_area .et_pb_widget a { font-size: 14px; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background-color: #E42C37; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: #000; }
.woocommerce .widget_price_filter .price_slider_amount .button { font-size: 13px; border: 1px #000 solid; color: #000; }

/* Selettore principale del widget di ricerca prodotti di WooCommerce */
.widget_product_search .woocommerce-product-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* INIZIO Stile per il campo di input della ricerca */
.widget_product_search .woocommerce-product-search input.search-field {
    width: 100%;
    height: 50px; /* Altezza del campo */
    padding: 10px 60px 10px 20px; /* Spaziatura interna: top right bottom left */
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 30px; /* Bordi arrotondati */
    background-color: #f9f9f9;
    box-shadow: none;
    -webkit-appearance: none; /* Rimuove stili di default su iOS */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Stile per il campo di input quando è in focus (cliccato) */
.widget_product_search .woocommerce-product-search input.search-field:focus {
    outline: none;
    border-color: #7f54b3; /* Colore viola di WooCommerce, puoi cambiarlo */
    box-shadow: 0 0 0 2px rgba(127, 84, 179, 0.2); /* Ombra leggera */
}

/* Stile per il pulsante di ricerca */
.widget_product_search .woocommerce-product-search button[type="submit"] {
    position: absolute;
    right: 5px; /* Posizionamento a destra dentro il campo */
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%; /* Pulsante circolare */
    background-color: #E42C37;
    color: #fff;
    font-size: 0; /* Nasconde il testo del pulsante */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stile per il pulsante al passaggio del mouse */
.widget_product_search .woocommerce-product-search button[type="submit"]:hover {
    background-color: #666666; /* Versione rosso logo */
}

/* Aggiunta dell'icona di ricerca SVG direttamente nel CSS */
.widget_product_search .woocommerce-product-search button[type="submit"]::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Personalizzazione del placeholder */
.widget_product_search .woocommerce-product-search input.search-field::placeholder {
    color: #999;
    font-style: italic;
}
/* FINE Stile per il campo di input della ricerca */

/* INIZIO WP-PageNavi */
/* Contenitore principale della paginazione */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap; /* Permette agli elementi di andare a capo su schermi piccoli */
    justify-content: center;
    align-items: center;
    gap: 8px; /* Spazio tra i pulsanti */
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Stile base per tutti gli elementi della paginazione (link e span) */
.wp-pagenavi a,
.wp-pagenavi span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 42px; /* Larghezza minima */
    height: 42px; /* Altezza */
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Bordi leggermente arrotondati */
    font-size: 16px;
    font-weight: 600;
    color: #555;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* Stile per i link al passaggio del mouse */
.wp-pagenavi a:hover {
    background-color: #f5f5f5;
    border-color: #E42C37; /* Colore primario (rosso) per il bordo */
    color: #E42C37; /* Colore primario (rosso) per il testo */
}

/* Stile per la pagina corrente */
.wp-pagenavi span.current {
    background-color: #E42C37; /* Colore primario (rosso) per lo sfondo */
    border-color: #E42C37;
    color: #ffffff; /* Testo bianco */
    box-shadow: 0 4px 10px rgba(228, 44, 55, 0.3); /* Ombra basata sul rosso */
    transform: translateY(-2px);
}

/* Stile per i puntini di sospensione (...) */
.wp-pagenavi span.extend {
    border: 1px dashed #e0e0e0;
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Stile per l'informativa 'Pagina X di Y' */
.wp-pagenavi span.pages {
    border: none;
    background-color: transparent;
    color: #000;
    font-weight: normal;
    padding: 0 15px;
    box-shadow: none;
    transform: none;
}

/* Stili per i link "Precedente" e "Successivo" con icone */
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
    font-size: 0; /* Nasconde il testo originale (es. « e ») */
}

.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: #555; /* Colore dell'icona */
    transition: background-color 0.3s ease;
}

.wp-pagenavi .previouspostslink:hover::before,
.wp-pagenavi .nextpostslink:hover::before {
    background-color: #E42C37; /* Colore dell'icona in hover (rosso) */
}

/* Icona "freccia a sinistra" */
.wp-pagenavi .previouspostslink::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

/* Icona "freccia a destra" */
.wp-pagenavi .nextpostslink::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}

/* =================================================================== */
/* Stili RESPONSIVE per Mobile (fino a 767px)                          */
/* =================================================================== */
@media (max-width: 767px) {
    .wp-pagenavi {
        gap: 6px; /* Riduciamo lo spazio tra i pulsanti */
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /* Riduciamo la dimensione dei pulsanti per gli schermi piccoli */
    .wp-pagenavi a,
    .wp-pagenavi span {
        min-width: 38px;
        height: 38px;
        font-size: 14px;
        padding: 0 8px;
    }

    /* Testo "Pagina X di Y": lo rendiamo visibile e lo centriamo */
    .wp-pagenavi span.pages {
        /* Rimosso 'display: none;' */
        width: 100%; /* Occupa tutta la larghezza per andare a capo */
        order: 99; /* Proprietà flexbox: lo forza ad essere l'ultimo elemento */
        text-align: center; /* Centra il testo al suo interno */
        margin-top: 10px; /* Aggiunge spazio sopra, separandolo dai numeri */
		color: #000;
    }
}
/* FINE WP-PageNavi */

/* ============================================= */
/* === Stile Checkout Professionale by Gemini === */
/* ============================================= */

/* --- 1. Layout generale a due colonne (solo per desktop) --- */
@media (min-width: 981px) {
  .wp-block-woocommerce-checkout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }
  
  /* Colonna sinistra per i dettagli */
  .wp-block-woocommerce-checkout-fields-block {
    flex: 2; /* Dà più peso a questa colonna */
  }

  /* Colonna destra per il riepilogo */
  .wp-block-woocommerce-checkout-totals-block {
    flex: 1; /* Occupa lo spazio rimanente */
  }
}

/* --- 2. Box Riepilogo Ordine --- */
.wp-block-woocommerce-checkout-totals-block {
  background-color: #f7f8f9;
  border: 1px solid #e0e2e4;
  padding: 30px;
  border-radius: 8px;
  position: -webkit-sticky; /* Per Safari */
  position: sticky; /* Rende il box "flottante" durante lo scroll */
  top: 120px; /* Distanza dall'alto quando si scrolla (considera l'header fisso) */
}

/* --- 3. Titoli delle sezioni --- */
.wp-block-woocommerce-checkout h2 {
  font-size: 22px;
  color: #333;
  padding-bottom: 10px;
  margin-bottom: 25px;
  border-bottom: 2px solid #2ea3f2; /* Usa il colore principale del tuo tema */
  font-weight: 600; /* Più leggibile */
}

/* --- 4. Stile per i campi del form (input) --- */
.wc-block-components-text-input input,
.woocommerce-checkout .select2-selection {
  border: 1px solid #dcdfe2 !important;
  border-radius: 5px !important;
  padding: 12px 15px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  height: auto !important; /* Sovrascrive eventuali altezze fisse */
}

/* Effetto al focus (quando ci clicchi dentro) */
.wc-block-components-text-input input:focus,
.woocommerce-checkout .select2-container--open .select2-selection {
  border-color: #2ea3f2 !important; /* Colore principale del tema */
  box-shadow: 0 0 0 2px rgba(46, 163, 242, 0.2) !important;
  outline: none !important;
}

/* --- 5. Pulsante "Effettua Ordine" --- */
.wc-block-checkout__place-order-button {
  background-color: #2ea3f2 !important; /* Colore principale ben visibile */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: uppercase;
  border-radius: 5px !important;
  padding: 15px !important;
  width: 100%;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.wc-block-checkout__place-order-button:hover {
  background-color: #1a8ad8 !important; /* Un blu leggermente più scuro al passaggio del mouse */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 6. Sezione Metodi di Pagamento --- */
.wc-block-checkout__payment-methods {
  list-style: none !important;
  padding: 0 !important;
}
.wc-block-checkout__payment-method {
  background-color: #fff;
  border: 1px solid #e0e2e4;
  padding: 20px;
  margin-bottom: 15px !important;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}
.wc-block-checkout__payment-method--active {
  border-color: #2ea3f2 !important; /* Evidenzia il metodo di pagamento selezionato */
}

/* ===================================================================
   CSS CORRETTO PER CONTACT FORM 7 + DIVI (inkwoodlab.com)
   Colore principale: #E42C37
   =================================================================== */

/* --- Stile Generale dei Campi (Testo, Email, Textarea, ecc.) --- */
/* Targeting del contenitore .et_pb_contact che avvolge il form */
.et_pb_contact .wpcf7-form-control:not(.wpcf7-submit) {
    background-color: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 14px !important;
    color: #333 !important;
    font-size: 16px;
    width: 100% !important;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.3s ease-in-out;
}

/* Rimuove lo stile specifico per il file input per uniformarlo agli altri */
.et_pb_contact input[type="file"] {
    background-color: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
}

/* --- Effetto quando un campo è attivo (focus) --- */
.et_pb_contact .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: #E42C37 !important;
    box-shadow: 0 0 8px rgba(228, 44, 55, 0.4);
    outline: none;
}

/* --- Colore del testo placeholder --- */
.et_pb_contact ::placeholder { 
  color: #888;
  opacity: 1; /* Firefox */
}
.et_pb_contact :-ms-input-placeholder {
  color: #888;
}
.et_pb_contact ::-ms-input-placeholder {
  color: #888;
}

/* --- Stile Etichette e Testo Normale nel Form --- */
.et_pb_contact p {
    color: #444; /* Colore per testo come "Allega documento..." */
}

/* --- Stile Checkbox Privacy e Relativa Etichetta --- */
/* Contenitore della checkbox privacy */
.et_pb_contact .wpcf7-acceptance {
    display: inline-flex;
    align-items: center;
}

/* Stile della checkbox (usa il colore principale del tema) */
.et_pb_contact input[type="checkbox"] {
    -webkit-appearance: checkbox; /* Ripristina l'aspetto nativo */
    appearance: checkbox;
    width: 1.3em;
    height: 1.3em;
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
    accent-color: #E42C37; /* Colore della spunta */
}

/* Etichetta della checkbox (incluso il link) */
.et_pb_contact .wpcf7-list-item-label {
    color: #444; /* Colore del testo come da tuo stile inline */
    font-size: 14px;
}
.et_pb_contact .wpcf7-list-item-label a {
    color: #666 !important; /* Colore del link */
    text-decoration: underline !important;
	font-size: 14px;
}


/* --- Pulsante di Invio --- */
.et_pb_contact .wpcf7-submit {
    width: auto;
    background-color: #E42C37 !important;
    color: #FFFFFF !important;
    border: 2px solid #E42C37 !important;
    border-radius: 4px !important;
    padding: 12px 28px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer;
    margin: 8px 0 0 !important; /* Rimosso auto per allineare a sx */
    float: none !important;
    transition: all 0.3s ease;
}

/* --- Effetto al passaggio del mouse sul pulsante --- */
.et_pb_contact .wpcf7-submit:hover {
    background-color: #c3232d !important;
    border-color: #c3232d !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


/* --- Messaggi di Risposta del Form (questi erano già corretti) --- */
.wpcf7 form .wpcf7-response-output {
    font-size: 16px;
    font-weight: bold;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 4px;
    padding: 15px !important;
    margin: 20px 0 0 0 !important; /* Aggiunto spazio sopra */
    clear: both;
}

/* Successo */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450 !important;
    background-color: #f0fff1;
    color: #2b7530;
}

/* Errore */
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900 !important;
    background-color: #fff8e1;
    color: #8a6d3b;
}

/* Evidenziazione campo non valido */
.wpcf7-not-valid {
    border: 1px solid #E42C37 !important;
}
/* FINE CF7 CSS */

/* DIVI PAGINATION */
/* ================================
   PAGINAZIONE DIVI/WOO → STILE "WP-PageNavi-like"
   Target: <nav.woocommerce-pagination> <ul.page-numbers> …
   ================================ */

/* Contenitore */
.woocommerce .woocommerce-pagination,
nav.woocommerce-pagination {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Lista numeri: layout a griglia flessibile */
.woocommerce .woocommerce-pagination .page-numbers,
nav.woocommerce-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;           /* va a capo su schermi piccoli */
  justify-content: center;
  align-items: center;
  gap: 8px;                  /* spazio tra i pulsanti */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Elementi base (link e span) */
.woocommerce .woocommerce-pagination .page-numbers a,
.woocommerce .woocommerce-pagination .page-numbers span,
nav.woocommerce-pagination .page-numbers a,
nav.woocommerce-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  background-color: #fff;
  transition: all 0.3s ease;
  line-height: 1;            /* centra perfettamente il numero */
}

/* Hover */
.woocommerce .woocommerce-pagination .page-numbers a:hover,
nav.woocommerce-pagination .page-numbers a:hover {
  background-color: #f5f5f5;
  border-color: #E42C37;
  color: #E42C37;
  text-decoration: none;
}

/* Focus accessibile */
.woocommerce .woocommerce-pagination .page-numbers a:focus-visible,
nav.woocommerce-pagination .page-numbers a:focus-visible {
  outline: 2px solid #E42C37;
  outline-offset: 2px;
}

/* Pagina corrente */
.woocommerce .woocommerce-pagination .page-numbers .current,
nav.woocommerce-pagination .page-numbers .current {
  background-color: #E42C37;
  border-color: #E42C37;
  color: #fff;
  box-shadow: 0 4px 10px rgba(228, 44, 55, 0.3);
  transform: translateY(-2px);
}

/* Puntini di sospensione (…) */
.woocommerce .woocommerce-pagination .page-numbers .dots,
nav.woocommerce-pagination .page-numbers .dots {
  border: 1px dashed #e0e0e0;
  background-color: transparent;
  box-shadow: none;
  transform: none;
  color: #888;
}

/* Precedente / Successivo: sostituisco il glifo con icone via mask */
.woocommerce .woocommerce-pagination .page-numbers .prev,
.woocommerce .woocommerce-pagination .page-numbers .next,
nav.woocommerce-pagination .page-numbers .prev,
nav.woocommerce-pagination .page-numbers .next {
  font-size: 0;              /* nasconde il carattere «/→ mantenendo l’accessibilità */
  min-width: 42px;
  padding: 0;                /* allineamento icona */
}

/* Base icone */
.woocommerce .woocommerce-pagination .page-numbers .prev::before,
.woocommerce .woocommerce-pagination .page-numbers .next::before,
nav.woocommerce-pagination .page-numbers .prev::before,
nav.woocommerce-pagination .page-numbers .next::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #555; /* colore icona */
  transition: background-color 0.3s ease;
}
/* Freccia sinistra (<) */
.woocommerce .woocommerce-pagination .page-numbers .prev::before,
nav.woocommerce-pagination .page-numbers .prev::before {
  transform: translate(3px, 0px); /* X negativo = verso sinistra */
}

/* Freccia destra (>) */
.woocommerce .woocommerce-pagination .page-numbers .next::before,
nav.woocommerce-pagination .page-numbers .next::before {
  transform: translate(5px, 0px); /* X positivo = verso destra */
}

/* Hover icone */
.woocommerce .woocommerce-pagination .page-numbers .prev:hover::before,
.woocommerce .woocommerce-pagination .page-numbers .next:hover::before,
nav.woocommerce-pagination .page-numbers .prev:hover::before,
nav.woocommerce-pagination .page-numbers .next:hover::before {
  background-color: #E42C37;
}

/* Icona sinistra */
.woocommerce .woocommerce-pagination .page-numbers .prev::before,
nav.woocommerce-pagination .page-numbers .prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

/* Icona destra */
.woocommerce .woocommerce-pagination .page-numbers .next::before,
nav.woocommerce-pagination .page-numbers .next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 6-1.41 1.41L13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 6-1.41 1.41L13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}

/* Stato disabilitato (se presente) */
.woocommerce .woocommerce-pagination .page-numbers .prev.disabled,
.woocommerce .woocommerce-pagination .page-numbers .next.disabled,
nav.woocommerce-pagination .page-numbers .prev.disabled,
nav.woocommerce-pagination .page-numbers .next.disabled {
  pointer-events: none;
  opacity: 0.45;
}
/* Rimuove il bordo predefinito da WooCommerce */
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
    border: none !important;
}
/* =========================
   RESPONSIVE (max 767px)
   ========================= */
@media (max-width: 767px) {
  .woocommerce .woocommerce-pagination,
  nav.woocommerce-pagination {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .woocommerce .woocommerce-pagination .page-numbers,
  nav.woocommerce-pagination .page-numbers {
    gap: 6px;
  }

  .woocommerce .woocommerce-pagination .page-numbers a,
  .woocommerce .woocommerce-pagination .page-numbers span,
  nav.woocommerce-pagination .page-numbers a,
  nav.woocommerce-pagination .page-numbers span {
    min-width: 38px;
    height: 38px;
    font-size: 14px;
    padding: 0 8px;
  }
}
/* DIVI PAGINATION END */
/* Colore link su widget */
.et-db #et-boc .et-l .et_pb_widget_area .et_pb_widget a { color: #666 !important;}