/* ==========================================================================
   FILE: catalogo.css - LAYOUT PRODOTTI & CATEGORIE
   ========================================================================== */

/* 3. GRIGLIE CATEGORIA (Taglio Diagonale Nuovo/Usato) */
.card-nuovo-container, .card-usato-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: transparent !important;
    border-radius: 1em;
}

.card-nuovo-container img, .card-usato-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
    transition: clip-path 0.4s ease !important;
}

.card-nuovo-container:hover img, .card-usato-container:hover img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Titolo del catalogo nuovo/usato */
.nuovo-section-title, .usato-section-title {
    margin-top: 3em !important;
    margin-bottom: 2em !important;
    text-align-last: center;
}

.usato-grid-layout {
    /*max-width: 75%;*/
    padding-left: 5%;
    padding-right: 5%;
}

/* Etichetta Testo sulle Categorie */
.card-category-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff !important;
    font-family: var(--font-oswald) !important;
    font-size: 1.8rem !important;
    text-transform: uppercase;
    pointer-events: none;
    /* Background moderno con sfumatura */
    padding: 0.5rem 1.5rem;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 2px;
}

/* ==========================================================================
   Catalogo: Layout Responsive (Desktop 3 Colonne / Mobile 1 Colonna)
   ========================================================================= */

/* DESKTOP E TABLET: Attiva il layout a 3 colonne */
@media (min-width: 769px) {
    /* Forza la griglia di Blocksy/WooCommerce a 3 colonne su desktop */
    .products.columns-4 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2.5rem 2rem !important; /* Spazio generoso tra le righe e le colonne */
    }

    /* Sblocca la larghezza delle singole card ereditata dal layout a 4 colonne del tema */
    .products.columns-4 .product {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* MOBILE: Forza il ritorno a 1 colonna per evitare lo schiacciamento */
@media (max-width: 768px) {
    .products.columns-4 {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Mette i prodotti uno sotto l'altro, larghi e leggibili */
        gap: 1.5rem !important;
    }

    .products.columns-4 .product {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* Contenitore principale delle informazioni sotto l'immagine */
.product-loop-content.text-left {
    padding: 1.5rem 1.25rem !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 10.5rem !important; 
    box-sizing: border-box !important;
}

/* 1. Categoria del prodotto (in alto, discreta e distanziata) */
.product-loop-content .woocommerce-loop-product__category {
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.product-loop-content .woocommerce-loop-product__category a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 0.75rem !important; 
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #8e8e93 !important;
    text-decoration: none !important;
}

/* 2. Titolo del prodotto (Oswald, compatto e geometrico) */
.product-loop-content .woocommerce-loop-product__title {
    margin: 0 0 auto 0 !important; 
    padding: 0 !important;
    line-height: 1.2 !important;
}

.product-loop-content .woocommerce-loop-product__title a {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.4rem !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #1c1c1e !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    display: block !important;
}

/* 3. Blocco Prezzo (Ancorato sul fondo, nitido) */
.product-loop-content .product-loop-meta.no-transform,
.product-loop-content .animated-meta {
    margin: 0.8rem 0 0 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Cifra del prezzo */
.product-loop-content .price,
.product-loop-content .price .woocommerce-Price-amount {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.6rem !important; 
    font-weight: 700 !important;
    color: #1a4d2e !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Simbolo dell'euro */
.product-loop-content .price .woocommerce-Price-currencySymbol {
    margin-right: 0.15rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Catalogo: Specs at a Glance (Box Info, Griglia e Icone SVG)
   ========================================================================= */

/* Il contenitore grigio chiaro di sfondo */
.cb-product-specs-box {
    margin-top: auto !important; 
    background: #f6f6f7 !important; 
    border-radius: 6px !important;
    padding: 0.75rem 0.85rem !important;
    box-sizing: border-box !important;
}

/* Titolo minuscolo sopra il box delle specifiche */
.cb-specs-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #8e8e93 !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
}

/* Griglia interna per disporre le icone una di fianco all'altra */
.cb-specs-grid {
    display: block !important;
    text-align: left !important;
    font-size: 0 !important; 
}

/* Singolo elemento (Icona + Testo) */
.cb-spec-item {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 33.333% !important; 
    box-sizing: border-box !important;
    padding-right: 0.25rem !important;
}

/* Struttura del testo (Valore sopra in grassetto, etichetta sotto) */
.cb-spec-text {
    display: inline-block !important;
    vertical-align: middle !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1.1 !important;
    width: calc(100% - 22px) !important; 
}

.cb-spec-text strong {
    display: block !important;
    font-size: 0.75rem !important; 
    color: #1c1c1e !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; 
}

.cb-spec-text span {
    display: block !important;
    font-size: 0.6rem !important; 
    color: #8e8e93 !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   ICONE VETTORIALI (SVG Generati via CSS Background)
   ========================================================================= */
.cb-spec-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    opacity: 0.7 !important; 
}

/* Icona 1: Taglia (Simbolo di Misurazione Geometrica / Squadra e Metro) */
.cb-icon-size {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM7 6v4M11 6v3M15 6v4M19 6v3'/%3E%3C/svg%3E") !important;
} 

/* Icona 2: Telaio (Struttura esatta dal mockup originale) */
.cb-icon-frame {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    opacity: 0.7 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Linee del telaio --%3E%3Cline x1='5' y1='17' x2='9' y2='7' /%3E%3Cline x1='9' y1='7' x2='19' y2='9' /%3E%3Cline x1='19' y1='9' x2='13' y2='19' /%3E%3Cline x1='13' y1='19' x2='5' y2='17' /%3E%3Cline x1='9' y1='7' x2='13' y2='19' /%3E%3C!-- Tubo sella sporgente --%3E%3Cline x1='9' y1='7' x2='8' y2='4' /%3E%3C!-- Snodi/Giunzioni circolari --%3E%3Ccircle cx='5' cy='17' r='1.5' fill='%23f6f6f7' /%3E%3Ccircle cx='9' cy='7' r='1.5' fill='%23f6f6f7' /%3E%3Ccircle cx='19' cy='9' r='1.5' fill='%23f6f6f7' /%3E%3Ccircle cx='13' cy='19' r='1.5' fill='%23f6f6f7' /%3E%3C/svg%3E") !important;
}

/* Icona 3: Freni (Simbolo del Freno a Disco Meccanico/Tecnico) */
.cb-icon-brakes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8' stroke-dasharray='4 2'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E") !important;
}

/* 4. COMPONENTI PREZZO E BADGE */
.price {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
    padding: 1rem 0.5rem !important;
}

.price .amount { font-family: var(--font-oswald) !important; }

.badge-custom {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    border-radius: 3px !important;
}

.badge-offerta { background: var(--color-arancio) !important; }

/* 5. PULSANTI FILTRO USATO */
.cat-button-usato {
    font-family: var(--font-oswald) !important;
    font-size: 1.25rem !important;
    text-transform: uppercase !important;
    padding: 1.5rem 2rem !important;
    border: 2px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    transition: all 0.3s ease;
}

.cat-button-usato:hover {
    border-color: var(--color-arancio) !important;
    color: var(--color-arancio) !important;
    transform: translateY(-4px) !important;
}

/* ==========================================================================
   Sezioni Correlate & Up-Sells (Prodotti correlati, Ti potrebbero interessare)
   ========================================================================== */
.up-sells {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 3rem !important;
    margin-top: 4rem !important;
}

.related h2,
.up-sells h2,
.related > h2:first-of-type,
.up-sells > h2:first-of-type {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #1c1c1e !important;
    margin-bottom: 2rem !important;
}

/* Personalizzazione Esclusiva Sezione "Prodotti Correlati" con Sfondo Verde Tenue */
.related.products {
    background-color: #f2f7f4 !important; /* Elegante sfondo verde tecnico tenue e desaturato */
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 4rem 1.5rem !important; /* Spazio interno per valorizzare la griglia */
    margin-top: 5rem !important;
    border-radius: 8px !important;
}

/* Card bianche pulite senza bordi per fondersi fluidamente con la sezione verde tenue */
.related.products .products .product {
    background-color: #ffffff !important;
    border: none !important; /* Rimosso il bordo per un look minimale e perfetto */
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Effetto elevazione tech al passaggio del mouse */
.related.products .products .product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   Personalizzazione Esclusiva Sezione "Prodotti Visti di Recente"
   ========================================================================== */
.woostify-product-recently-viewed-section {
    background-color: #f8f9fa !important; /* Sfondo grigio-tech chiaro */
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 4rem 0 !important;
    margin-top: 5rem !important;
}

.woostify-product-recently-viewed-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #1c1c1e !important;
    margin-bottom: 2.5rem !important;
}

.woostify-product-recently-viewed-section .products .product {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woostify-product-recently-viewed-section .products .product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}