/**
 * Stili per la pagina archivio prodotti (Shop e Categorie)
 * VERSIONE PERFETTA: Matrice + Pseudo-elemento (Risolve effetto strano e doppi bordi)
 */

/* -----------------------------------------------------------
   1. RESET E LAYOUT GENERALE
----------------------------------------------------------- */

/* Override Kadence per full width assoluto */
.content-wrap,
.site-content,
.content-container,
.site-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Nascondi elementi WooCommerce default */
.woocommerce-products-header,
.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-breadcrumb {
    display: none !important;
}

/* Container principale sfondo */
.stemtech-category-page,
.stemtech-products-page {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: #f8f9fb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* Variabili CSS */
:root {
    --brand: #1e3a5f;
    --muted: #6b7280;
    --border-color: #e5e7eb; /* Colore grigio chiaro */
    --hover-color: #000000;  /* Colore nero per hover */
    --bg: #f8f9fb;
    --sidebar-width: 280px; 
    --container-padding: 25px; 
}

/* -----------------------------------------------------------
   2. BREADCRUMB E HERO SECTION
----------------------------------------------------------- */

.custom-breadcrumb {
    background: #f8fafc;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.breadcrumb-content {
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-item a {
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Allinea l'icona SVG (casetta) con il testo */
.breadcrumb-item a svg {
    vertical-align: middle;
    margin-top: 2px;
}

.breadcrumb-item a:hover {
    color: var(--brand);
}

.breadcrumb-separator {
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 0 4px;
}

.breadcrumb-current {
    color: var(--brand);
    font-weight: 600;
}

.category-hero {
    background: #fff;
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}

.hero-content, 
.category-hero-inner {
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.category-hero h1 {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--brand);
    margin: 0;
    line-height: 1.1;
}

/* -----------------------------------------------------------
   3. STRUTTURA GRIGLIA "MATRICE" CON HOVER PERFETTO
----------------------------------------------------------- */

/* Contenitore della griglia */
.products-grid, 
#grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 !important; 
    
    width: 100%;
    /* FONDAMENTALE: Le card devono poter "uscire" di 1px */
    overflow: visible !important; 
    
    /* Il contenitore disegna i bordi ALTO e SINISTRO della griglia */
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    
    padding: 0;
}

/* Singola Card Prodotto */
.product-card,
.card {
    background: white;
    border-radius: 0; 
    
    /* La card disegna SOLO i bordi DESTRO e BASSO */
    border: none; 
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    
    /* Reset Margini */
    margin: 0;
    
    /* FONDAMENTALE: Permette all'hover nero di uscire dai bordi */
    overflow: visible !important;
    
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- EFFETTO HOVER CHIRURGICO --- */
/* Usiamo ::after per creare un bordo nero sopraelevato */
.product-card:hover::after,
.card:hover::after {
    content: '';
    position: absolute;
    
    /* Si allarga di 1px in Alto e a Sinistra per coprire i vicini */
    top: -1px;
    left: -1px;
    
    /* La larghezza copre l'intera card + 1px per coprire il bordo destro */
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    
    /* Disegna il bordo nero */
    border: 1px solid var(--hover-color);
    box-sizing: border-box;
    
    /* Assicura che sia sopra tutto */
    z-index: 1000;
    pointer-events: none; /* Lascia passare i click */
}

.product-card:hover,
.card:hover {
    z-index: 100; /* Porta la card in primo piano */
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

/* -----------------------------------------------------------
   4. CONTENUTO INTERNO DELLA CARD
----------------------------------------------------------- */

.product-card a, 
.card a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Contenitore Immagine (Cornice dello zoom) */
.product-image,
.thumb {
    height: 260px; 
    background: #fff; /* Sfondo bianco pulito per lo zoom */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    position: relative;
    overflow: hidden; /* FONDAMENTALE: Taglia l'immagine che cresce */
}

/* L'immagine con transizione lenta e fluida */
.product-image img,
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Zoom lento 1.2s */
    will-change: transform;
}

/* Attivazione Zoom al passaggio del mouse sulla card */
.product-card:hover .product-image img,
.card:hover .thumb img {
    transform: scale(1.1); /* Ingrandimento del 10% */
}

/* Testi e Formattazione inferiore */
.product-content,
.pad {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: white; /* Assicura che il testo copra eventuali bordi dell'immagine */
    z-index: 2;
}

.product-title,
.title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 8px 0;
    line-height: 1.3;
    text-align: center;
}

.product-desc,
.meta {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
    flex: 1;
    text-align: center;
}

/* Prezzo */
.product-price,
.price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #000000;
    margin-top: auto;
    text-align: center;
}

.product-price .woocommerce-Price-amount.amount::before,
.price .woocommerce-Price-amount.amount::before { 
    content: "€ "; 
}

.product-price .woocommerce-Price-currencySymbol,
.price .woocommerce-Price-currencySymbol { 
    display: none; 
}

/* Nascondi elementi inutilizzati */
.product-badge, 
.product-actions, 
.btn-primary, 
.btn-wishlist { 
    display: none !important; 
}

/* -----------------------------------------------------------
   5. CONTAINERS E SIDEBAR
----------------------------------------------------------- */

.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: 30px;
    max-width: none;
    margin: 0 auto;
    padding: 30px var(--container-padding);
}

.main-container {
    max-width: none; 
    margin: 0 auto;
    padding: 30px var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
}

.main-container.has-filters {
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: 30px;
}

.main-sidebar, 
.filters {
    background: white;
    padding: 20px;
    border: 1px solid var(--border-color);
    height: fit-content;
}

/* Stili filtri */
.filter-group { 
    border-top: 1px solid var(--border-color); 
    padding-top: 15px; 
    margin-top: 15px; 
}

.filter-head { 
    font-weight: 700; 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 10px; 
    font-size: 0.95rem; 
}

.opts { 
    display: grid; 
    gap: 8px; 
}

.chk { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.9rem; 
    cursor: pointer; 
    color: #374151; 
}

.chk:hover { 
    color: var(--brand); 
}

.btn-clear { 
    border: none; 
    background: transparent; 
    color: var(--brand); 
    font-weight: 600; 
    font-size: 12px; 
    cursor: pointer; 
}

/* Mobile Toolbar */
.mobile-toolbar { 
    display: none; 
    padding: 15px var(--container-padding); 
    background: white; 
    border-bottom: 1px solid var(--border-color); 
}

.btn-filters { 
    background: white; 
    border: 1px solid var(--border-color); 
    padding: 8px 20px; 
    font-weight: 600; 
    color: var(--brand); 
    cursor: pointer; 
}

/* -----------------------------------------------------------
   6. RESPONSIVE
----------------------------------------------------------- */

@media (max-width: 1300px) {
    .products-grid, 
    #grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
}

@media (max-width: 900px) {
    .layout, 
    .main-container.has-filters {
        grid-template-columns: 1fr !important;
        gap: 20px; 
        padding: 20px;
    }
    
    .main-sidebar, 
    .filters { 
        display: none; 
        margin-bottom: 20px; 
    }
    
    .mobile-toolbar { 
        display: block !important; 
    }
    
    .products-grid, 
    #grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    
    .hero-content, 
    .breadcrumb-content { 
        padding: 0 20px; 
    }
    
    .category-hero h1 { 
        font-size: 2.2rem; 
    }
}

@media (max-width: 500px) {
    .products-grid, 
    #grid { 
        grid-template-columns: 1fr !important; 
    }
}

.no-results { 
    grid-column: 1 / -1; 
    text-align: center; 
    padding: 40px; 
    color: var(--muted); 
    border: 1px dashed var(--border-color); 
}


/* --- STILE LISTA SOTTOCATEGORIE (Modifica aspetto link) --- */

/* 1. Toglie i puntini e rientra il testo */
.main-sidebar ul, 
.widget_product_categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Spaziatura tra le voci */
.main-sidebar ul li, 
.widget_product_categories ul li {
    margin-bottom: 12px !important; /* Spazio tra le righe */
    padding: 0 !important;
}

/* 3. Aspetto del testo: Nero, Grassetto, Niente sottolineatura */
.main-sidebar ul li a, 
.widget_product_categories ul li a {
    color: #000000 !important;      /* Nero */
    font-weight: 700 !important;    /* Grassetto */
    text-decoration: none !important; /* Toglie la riga sotto */
    font-size: 15px !important;     /* Grandezza testo */
    display: block;
}

/* 4. Effetto mouse sopra (opzionale: diventa grigio scuro) */
.main-sidebar ul li a:hover, 
.widget_product_categories ul li a:hover {
    color: #444 !important;
    text-decoration: none !important;
}