/* 
 * css/custom/products.css 
 * Sovrascritture per la pagina products
 */

/* ============================================
   flat-title-page inner - Header pagina
   ============================================ */
.flat-title-page.inner {
    position        : relative !important;
    padding         : 40px 0 !important;
    background      : linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    margin-bottom   : 40px !important;
}

/* Overlay */
.flat-title-page.inner .overlay {
    position        : absolute !important;
    top             : 0 !important;
    left            : 0 !important;
    width           : 100% !important;
    height          : 100% !important;
    background      : rgba(0, 0, 0, 0.05) !important;
}

/* Contenitore principale */
.flat-title-page.inner .container {
    position        : relative !important;
    z-index         : 1 !important;
}

/* Titolo pagina */
.flat-title-page.inner .page-title-heading {
    text-align      : center !important;
}

.flat-title-page.inner .heading {
    font-size       : 2.5rem !important;
    font-weight     : 600 !important;
    margin          : 0 0 16px 0 !important;
    color           : #333 !important;
}

/* Breadcrumb */
.flat-title-page.inner .breadcrumbs {
    display         : flex !important;
    justify-content : center !important;
    gap             : 8px !important;
    list-style      : none !important;
    padding         : 0 !important;
    margin          : 0 !important;
}

.flat-title-page.inner .breadcrumbs li {
    font-size       : 0.9rem !important;
    color           : #666 !important;
}

.flat-title-page.inner .breadcrumbs li:not(:last-child)::after {
    content         : "/" !important;
    margin-left     : 8px !important;
    color           : #999 !important;
}

.flat-title-page.inner .breadcrumbs a {
    color           : #ff5f1f !important;
    text-decoration : none !important;
    transition      : color 0.2s ease !important;
}

.flat-title-page.inner .breadcrumbs a:hover {
    color           : #e04e0e !important;
    text-decoration : underline !important;
}

.flat-title-page.inner .breadcrumbs span {
    color           : #666 !important;
}

/* ============================================
   Responsive
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    .flat-title-page.inner {
        padding         : 30px 0 !important;
        margin-bottom   : 30px !important;
    }
    
    .flat-title-page.inner .heading {
        font-size       : 1.8rem !important;
    }
    
    .flat-title-page.inner .breadcrumbs li {
        font-size       : 0.8rem !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .flat-title-page.inner {
        padding         : 25px 0 !important;
        margin-bottom   : 25px !important;
    }
    
    .flat-title-page.inner .heading {
        font-size       : 1.5rem !important;
    }
    
    .flat-title-page.inner .breadcrumbs {
        flex-wrap       : wrap !important;
        gap             : 5px !important;
    }
}


/* ============================================
   SEZIONE PRINCIPALE flat-shop
   ============================================ */
.flat-shop {
    padding-bottom  : 60px !important;
}

/* ============================================
   SIDEBAR SINISTRA
   ============================================ */
.sidebar-shop {
    background      : #fff !important;
    border-radius   : 0px !important;
    padding         : 10px !important;

    box-shadow      : 0 2px 12px rgba(0, 0, 0, 0.08) !important;

    margin-bottom   : 10px !important;
}

/* Widget generico */
.widget {
    margin-bottom   : 24px !important;
}

.widget:last-child {
    margin-bottom   : 0 !important;
}

/* Widget filtro categorie */
.widget-filter.style-1 {
    margin-bottom   : 24px !important;
}

/** TITOLO: 'Categorie' */ 
.widget-title {
    font-size       : 1.4rem !important;
    font-weight     : 400 !important;
    margin-bottom   : 10px !important;
    padding-bottom  : 5px !important;

    /** border-bottom   : 1px solid #ff5f1f !important; */ 

    display         : inline-block !important;
    color           : #333 !important;
}

/* Lista items filtri */
.list-filter {
    list-style      : none !important;
    padding         : 0 !important;
    margin          : 0 !important;
}

/** .. margine bottom tra gli items */ 
.list-filter li {
    margin-bottom   : 5px !important;
}

/** .. margine ultimo item */ 
.list-filter li:last-child {
    margin-bottom   : 0 !important;
}

.list-filter li a {
    display         : block !important;

    padding         : 7px 0px !important;

    color           : #555 !important;
    text-decoration : none !important;
    border-radius   : 0px !important;
    /** transition      : all 0.2s ease !important; */ 
    font-size       : 1.2rem !important;

}


/* Hover sui link */
.list-filter li a:hover {
    background-color: #fff5f0 !important;
    color           : #ff5f1f !important;
    border-bottom   : 1px solid #ff5f1f !important;
    /** transform       : translateX(4px) !important; */ 
}

/* Link attivo (categoria selezionata) */
.list-filter li.active a {
    background-color: #ff5f1f !important;
    color           : #fff !important;
    font-weight     : 400 !important;
}



/* ============================================
   SIDEBAR - LARGHEZZA RIDOTTA
   ============================================ */

/* Riduci il padding interno della sidebar */
.sidebar-shop {
    padding  : 10px !important;  /* Da 20px a 16px */
}

/* Riduci il font dei link per risparmiare spazio */
.list-filter li a {
    padding         : 6px 10px !important;
    font-size       : 1.0rem !important;
}

.widget-title {
    font-size       : 1.4rem !important;

    margin-bottom   : 12px !important;
}












/* ============================================
   WIDGET BANNER (opzionale)
   ============================================ */
.widget-banner {
    margin-top      : 20px !important;
}

.banner-box {
    border-radius   : 12px !important;
    overflow        : hidden !important;
}

.banner-box .media img {
    width           : 100% !important;
    height          : auto !important;
    display         : block !important;
}

/* ============================================
   COLONNA PRODOTTI
   ============================================ */
/* La colonna destra (.col-lg-9 .col-md-8) 
   non necessita di stili aggiuntivi, 
   la gestione della griglia sarà in card-product.css */

/* ============================================
   DESCRIZIONE CATEGORIA (footer)
   ============================================ */
.category-description {
    margin-top      : 40px !important;
    padding-top     : 20px !important;
    border-top      : 1px solid #eee !important;
}

.category-description .card {
    background      : #f8f9fa !important;
    border          : none !important;
    border-radius   : 12px !important;
    padding         : 20px !important;
}

.category-description .card-title {
    color           : #ff5f1f !important;
    font-size       : 1.3rem !important;
    margin-bottom   : 12px !important;
}

.category-description .card-text {
    color           : #666 !important;
    line-height     : 1.6 !important;
    margin          : 0 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet (max 992px) */
@media (max-width: 992px) {
    .sidebar-shop {
        margin-bottom   : 30px !important;
    }
    
    .widget-title {
        font-size       : 1.1rem !important;
    }
    
    .list-filter li a {
        padding         : 6px 10px !important;
        font-size       : 0.9rem !important;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .flat-shop {
        padding-bottom  : 40px !important;
    }
    
    .sidebar-shop {
        padding         : 16px !important;
        margin-bottom   : 24px !important;
    }
    
    .widget-title {
        font-size       : 1rem !important;
        margin-bottom   : 12px !important;
        padding-bottom  : 8px !important;
    }
    
    .list-filter li {
        margin-bottom   : 8px !important;
    }
    
    .list-filter li a {
        padding         : 6px 10px !important;
        font-size       : 0.85rem !important;
    }
    
    .category-description {
        margin-top      : 30px !important;
    }
    
    .category-description .card {
        padding         : 16px !important;
    }
    
    .category-description .card-title {
        font-size       : 1.1rem !important;
    }
}

/* Mobile piccoli (max 480px) */
@media (max-width: 480px) {
    .sidebar-shop {
        padding         : 12px !important;
    }
    
    .widget-title {
        font-size       : 0.95rem !important;
    }
    
    .list-filter li a {
        padding         : 5px 8px !important;
        font-size       : 0.8rem !important;
    }
}