/* === Sidebar Categorie WooCommerce Personalizzata === */
/* Layout 2 colonne: SINISTRA 25% sidebar | DESTRA 75% content */
/* Sidebar STICKY: parte allineata al content, si blocca a 160px quando scrolla */

/* =============================================
   LAYOUT 2 COLONNE - Desktop
   ============================================= */

/* Main content wrap - contenitore flex a 2 colonne */
.main-content-wrap {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow: visible !important; /* IMPORTANTE per sticky */
    /* Assicura che il contenitore abbia almeno l'altezza della sidebar + spazio per scroll */
    min-height: 100vh;
}

/* Rimuovi padding-top dal main annidato usato nel blocco CATEGORIE
   dentro le pagine archivio WooCommerce, così non raddoppia lo
   spazio sotto l'header fisso. */
.woocommerce-page.archive #main.column1.wide.clearfix {
    padding-top: 0 !important;
}

/* COLONNA SINISTRA - Sidebar 25% - STICKY */
/* Parte alla sua posizione naturale, si blocca a 160px quando scrolla */
.custom-category-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 160px !important;
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25%;
    height: max-content !important; /* Forza l'altezza ad adattarsi al contenuto per permettere lo slide */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0 !important;
    margin-top: 30px !important;
    box-sizing: border-box;
    background: #fff;
    align-self: flex-start;
    order: -1; /* Sidebar a sinistra */
    z-index: 10; /* Sopra il content quando è sticky */
    /* Nasconde la scrollbar ma mantiene lo scroll */
    scrollbar-width: none; /* Firefox */
}

/* Sticky: nessun genitore deve avere overflow hidden o clip (altrimenti sticky non funziona) */
.woocommerce-page.archive .main-content-wrap,
.woocommerce-page.archive .main-content-wrap > .row,
.woocommerce-page.archive #main,
.woocommerce-page.archive #primary,
.woocommerce-page.archive .page-wrapper,
.woocommerce-page.archive .container {
    overflow: visible !important;
    contain: none !important;
}
/* Su body usare clip al posto di hidden evita bug di horizontal scroll e mantiene lo sticky funzionante */
html.woocommerce-page,
body.woocommerce-page {
    overflow-x: clip !important;
}

.custom-category-sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* COLONNA DESTRA - Content 75% */
.main-content-wrap > .main-content {
    width: 75% !important;
    max-width: 75% !important;
    flex: 0 0 75%;
    box-sizing: border-box;
    padding-top: 0 !important;
    margin-top: 30px !important;
}

/* Wrapper interno - NON forzare position:relative per permettere sticky sul parent */
/* Il wrapper interno è solo un contenitore normale, lo sticky funziona su .custom-category-sidebar */
.custom-category-sidebar .sidebar-sticky-wrapper {
    /* Rimossi override position:relative che impedivano sticky */
    /* Il wrapper deve essere statico per permettere lo sticky sul parent */
    position: static !important;
    width: 100%;
    box-sizing: border-box;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Override stili inline del plugin Porto che potrebbero interferire */
/* Su desktop, disabilitiamo completamente il plugin sticky di Porto per usare CSS sticky nativo */
@media (min-width: 992px) {
    .custom-category-sidebar .sidebar-sticky-wrapper.sticky-active,
    .custom-category-sidebar .sidebar-sticky-wrapper[style*="position: fixed"],
    .custom-category-sidebar .sidebar-sticky-wrapper[style*="position:absolute"] {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
    }
}

/* Contenuto sidebar - no scrollbar */
.custom-category-sidebar .custom-sidebar-content {
    overflow: visible;
}

/* Widget nella sidebar */
.custom-category-sidebar .widget {
    margin-bottom: 25px;
}

.custom-category-sidebar .widget:last-child {
    margin-bottom: 0;
}

/* Toggle per mobile */
.custom-category-sidebar .sidebar-toggle {
    display: none;
}

/* Pulsante "Chiudi filtri" (×) solo su mobile: su desktop non serve (sidebar sempre visibile) */
.hk-sidebar-close-fixed {
    display: none !important;
}

/* =============================================
   Barra filtri mobile: bottone al centro a sinistra
   ============================================= */
.hk-mobile-filter-bar {
    display: none;
}

/* =============================================
   RESPONSIVE - Mobile (< 992px)
   ============================================= */
@media (max-width: 991px) {
    /* Con tab filtri aperta: blocca scroll della pagina, scorre solo il pannello filtri */
    html.sidebar-opened {
        overflow: hidden !important;
    }
    html.sidebar-opened body {
        overflow: hidden !important;
        height: 100% !important;
    }

    /*
     * Disattiva le regole .mobile-sidebar del tema parent (porto/scss/part/media-mobile-sidebar.scss 8-24).
     * Override esplicito così non si applicano width: 290px e gli altri stili Porto; vale il nostro pannello 100vw.
     */

    .custom-category-sidebar.mobile-sidebar,
    .sidebar.mobile-sidebar.custom-category-sidebar {
        margin-top: 0 !important;
        height: 100% !important;
        width: 100vw !important;
        max-width: 100vw !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 9001 !important;
        transition: transform 0.35s ease-out;
        background: var(--porto-body-bg, #fff);
    }

    /* Layout a colonna singola */
    .main-content-wrap {
        flex-direction: column;
    }

    /* Filtri su mobile: bottone fixed a sinistra, centrato verticalmente (non list/grid view) */
    .hk-mobile-filter-bar {
        position: fixed !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 9000 !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .hk-mobile-filter-bar .hk-mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: #E74338;
        color: #fff;
        border: none;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: background 0.2s, opacity 0.2s;
    }
    .hk-mobile-filter-bar .hk-mobile-filter-toggle:hover {
        background: #c93a30;
        color: #fff;
    }
    .hk-mobile-filter-bar .hk-mobile-filter-toggle i.fa {
        font-size: 16px;
    }
    /* Badge numero filtri applicati sul toggle mobile */
    .hk-mobile-filter-bar .hk-mobile-filter-count {
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        margin-left: 6px;
        background: #fff;
        color: #E74338;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        border-radius: 10px;
    }
    .hk-mobile-filter-bar .hk-mobile-filter-count:not(:empty) {
        display: inline-flex;
    }

    /* Sidebar filtri: pannello full-width (100vw) che si apre al click */
    .custom-category-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100vh !important;
        transform: translateX(-100%);
        transition: transform 0.35s ease-out;
        z-index: 9001;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 40px !important;
        margin: 0 !important;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    }
    html.sidebar-opened .custom-category-sidebar {
        transform: translateX(0);
    }

    /* Nasconde scrollbar barra filtri mobile (scroll abilitato) */
    .custom-category-sidebar,
    .custom-category-sidebar .sidebar-content,
    .custom-category-sidebar .custom-sidebar-content {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .custom-category-sidebar::-webkit-scrollbar,
    .custom-category-sidebar .sidebar-content::-webkit-scrollbar,
    .custom-category-sidebar .custom-sidebar-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Overlay sotto il pannello filtri (click chiude) */
    .sidebar-overlay {
        z-index: 9000;
    }

    /* X per chiudere la sidebar filtri: fixed in alto a destra (resta visibile durante lo scroll) */
    .custom-category-sidebar .sidebar-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 50%;
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
        color: #333 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 9002 !important;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    html.sidebar-opened .custom-category-sidebar .sidebar-toggle,
    body.sidebar-opened .custom-category-sidebar .sidebar-toggle {
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .custom-category-sidebar .sidebar-toggle:hover {
        background: #f5f5f5 !important;
        color: #111 !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important;
    }
    .custom-category-sidebar .sidebar-toggle i:before {
        content: "\f00d" !important; /* fa-times */
    }

    /* X chiusura fuori dalla sidebar (sempre visibile quando pannello aperto, non soggetto a transform) */
    .hk-sidebar-close-fixed {
        display: none !important;
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
        color: #333 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 9002 !important;
    }
    html.sidebar-opened .hk-sidebar-close-fixed,
    body.sidebar-opened .hk-sidebar-close-fixed {
        display: flex !important;
    }
    .hk-sidebar-close-fixed:hover {
        background: #f5f5f5 !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important;
    }

    .custom-category-sidebar .sidebar-content.custom-sidebar-content {
        overflow-x: hidden;
        overflow-y: visible;
        height: auto !important;
        max-height: none;
    }
    
    /* Content full width su mobile */
    .main-content-wrap > .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

.woocommerce-page .sidebar-content .widget-title, .woocommerce-page .widget_block .wp-block-heading {
    line-height: unset !important;
}

/* Rimuovi padding inferiore dalle sidebar sinistra/destra */
.left-sidebar,
.right-sidebar {
    padding-bottom: 0 !important;
}

/* === Widget Filtri Sidebar / Barra filtri 100% custom === */

/* Wrapper barra custom: stessi stili della sidebar filtri */
.hk-custom-filter-bar {
    width: 100%;
    box-sizing: border-box;
}
.hk-custom-filter-bar .widget.hk-custom-filter-widget.widget_layered_nav,
.hk-custom-filter-bar .widget_layered_nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.hk-custom-filter-bar .hk-custom-filter-bar-sliders {
    margin-top: 0;
    margin-bottom: 15px;
}


/* Lista filtri - 3 colonne stessa larghezza (widget e barra custom) */
.woocommerce-widget-layered-nav-list,
.hk-custom-filter-bar .woocommerce-widget-layered-nav-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.woocommerce-widget-layered-nav-list li {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Count (18) nascosto momentaneamente */
.woocommerce-widget-layered-nav-list .count,
.hk-custom-filter-bar .count {
    display: none !important;
}

.woocommerce-widget-layered-nav-list li a {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    color: #333 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    border-color: #333 !important;
}

.woocommerce-widget-layered-nav-list li a:hover,
.woocommerce-widget-layered-nav-list li.chosen a,
.woocommerce-widget-layered-nav-list li.woocommerce-widget-layered-nav-list__item--chosen a,
li.chosen a, .chosen a {
    background: #E74338 !important;
    color: #fff !important;
    outline: none !important;
    transform: none !important;
}

/* Forza visibilità filtri attivi - NON nasconderli mai */
.woocommerce-widget-layered-nav-list li.chosen {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.woocommerce-widget-layered-nav-list li.chosen a .color-name {
    color: #fff !important;
}

.woocommerce-widget-layered-nav-list li.chosen a .color-swatch {
    border-color: #fff !important;
}

/* Toggle "Scegli di più" - nasconde elementi oltre il 12° */
.woocommerce-widget-layered-nav-list li.filter-hidden {
    display: none !important;
}

.woocommerce-widget-layered-nav-list.filter-expanded li.filter-hidden {
    display: block !important;
}

/* Filtri disabilitati:
 * la logica aggiornata nasconde i termini incompatibili lato PHP,
 * quindi non serve più un trattamento visivo speciale (opacità 0.4).
 * Manteniamo le classi per compatibilità ma senza regole intrusive.
 */
.woocommerce-widget-layered-nav-list li.filter-disabled,
.woocommerce-widget-layered-nav-list li.filter-same-category {
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Popup filtri disabilitati (count 0) */
.hk-filter-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0.2s, opacity 0.2s;
}
.hk-filter-popup.is-open {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.hk-filter-popup-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.hk-filter-popup-modal {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.hk-filter-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #222;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.hk-filter-popup-close:hover {
    background: rgba(0, 0, 0, 0.12);
}
.hk-filter-popup-body {
    padding: 22px 18px 18px;
}
.hk-filter-popup-title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 8px;
}
.hk-filter-popup-message {
    font-size: 14px;
    color: #333;
    margin: 0;
}
.hk-filter-popup-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}
.hk-filter-popup-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    background: #222;
    color: #fff;
    cursor: pointer;
}
.hk-filter-popup-btn:hover {
    background: #000;
}

/* Widget espande con contenuto */
.woocommerce-widget-layered-nav-list.filter-expanded {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Contenitore widget si espande */
.widget_layered_nav,
.woocommerce-widget-layered-nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Pulsante toggle */
.filter-toggle-btn {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 10px 15px 0 15px !important;
    background: transparent !important;
    color: black !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.filter-toggle-btn:hover {
    color: #E74338 !important;
}

.filter-toggle-btn i {
    margin-left: 5px !important;
}

/* === Filtro Colori - 2 colonne con swatch === */
.filter-colore .woocommerce-widget-layered-nav-list {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Animazione spinner per AJAX loading */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.archive-products,
.products-container {
    position: relative;
}

.hk-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    z-index: 9999 !important;
    display: none !important;
}

.hk-loading-overlay .hk-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Loader a schermo intero su mobile */
@media (max-width: 991px) {
    .hk-loading-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding-top: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Cerchietto colore */
.color-swatch {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    border: 1px solid #ddd !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    line-height: normal !important;
}

/* Nome colore */
.color-name {
    vertical-align: middle !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    min-width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    word-break: break-all !important;
}

/* Layout interno link colore */
.filter-colore .woocommerce-widget-layered-nav-list li a {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* === Bottone Elimina filtri STICKY === */
.sidebar-filter-buttons {
    position: sticky !important;
    bottom: 0 !important;
    padding: 15px 15px 0 15px !important;
    margin: 20px -20px -20px -20px !important;
    z-index: 10 !important;
}

.sidebar-filter-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.btn-clear-filters {
    background: #E74338 !important;
    color: #fff !important;
    border: 1px solid #E74338 !important;
}

.btn-clear-filters:hover {
    background: #c9352b !important;
    border-color: #c9352b !important;
    color: #fff !important;
}

/* === Slider prezzo - colore rosso === */
.hk-slider .ui-slider-range,
.ui-slider .ui-slider-range {
    background: #E74338 !important;
}

/* === Slider prezzo - colore rosso brand - OVERRIDE FORTE === */
.custom-category-sidebar .hk-unit-price-filter .hk-slider .ui-slider-handle,
.custom-category-sidebar .hk-unit-price-filter .hk-slider .ui-slider-range,
.custom-category-sidebar .widget_price_filter .ui-slider .ui-slider-handle,
.custom-category-sidebar .widget_price_filter .ui-slider .ui-slider-range {
    background: #E74338 !important;
}

/* === Nasconde descrizione categoria === */
.term-description {
    display: none !important;
}

/* Rimuovi bordo inferiore dalla barra sopra il loop prodotti (risultati/ordinamento/paginazione) */
.woocommerce-page.archive .shop-loop-before {
    border-bottom: none !important;
}

/* Rimuove il bordo inferiore dai widget nella sidebar archivio WooCommerce */
.woocommerce-page.archive .sidebar-content aside.widget {
    border-bottom: none !important;
}