@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@400;500&display=swap');

/* --- 1. SETTAGGI GLOBALI --- */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #1a1a1a; background-color: #f9f7f2; }

/* --- 2. HEADER E NAVIGAZIONE --- */
.header { padding: 60px 5% 30px 5%; display: flex; flex-direction: column; align-items: center; }
.logo { height: 240px; width: auto; margin-bottom: 30px; display: block; }
nav { border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: 15px 0; width: 100%; max-width: 800px; margin: 0 auto; display: flex; justify-content: center; gap: 30px; background-color: #f9f7f2; position: sticky; top: 0; z-index: 10000; }
nav a { text-decoration: none; color: #1a1a1a; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1rem; font-weight: 600; transition: 0.4s ease; display: inline-block; }
nav a:hover { color: #3e1b08; transform: scale(1.1); }

/* --- 3. HERO --- */
.hero { padding: 40px 10%; max-width: 1000px; margin: 0 auto; }
.hero-img { width: 100%; max-height: 450px; object-fit: cover; border: 1px solid #e0ddd5; margin-bottom: 35px; }
.hero-text h1 { text-align: center; font-weight: 400; font-size: 1.6rem; margin-bottom: 30px; text-transform: uppercase; }

/* --- 4. ABOUT US --- */
.section-title { text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 40px 0 25px 0; font-weight: bold; font-size: 1.1rem; }
.about-box { display: flex; align-items: center; gap: 25px; background: white; padding: 25px; margin-bottom: 20px; border: 1px solid #e0ddd5; border-radius: 4px; }
.about-thumb { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.about-info h3 { text-transform: uppercase; margin-bottom: 8px; font-size: 1rem; }

/* --- 5. CATALOGO --- */
.catalog-filters { display: flex; justify-content: center; gap: 12px; margin-bottom: 35px; flex-wrap: wrap; }
.filter-btn { background-color: #f9f7f2; color: #3e1b08; border: none; padding: 10px 22px; text-transform: uppercase; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: 0.4s ease; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.filter-btn:hover, .filter-btn.active { background-color: #3e1b08; color: #f9f7f2; transform: scale(1.1); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.product-card { background: white; padding: 10px; border: 1px solid #e0ddd5; transition: transform 0.3s ease; overflow: hidden; }
.product-card:hover { transform: scale(1.05); }
.product-card img { width: 100%; height: 350px; object-fit: cover; display: block; }

/* --- 6. PAGINA PRODOTTO --- */
.product-container { display: flex; gap: 40px; padding: 40px 5%; max-width: 1400px; margin: 0 auto; align-items: flex-start; }
.product-media { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; }
.slider-wrapper { position: relative; width: 100%; border: 1px solid #e0ddd5; background: #fff; cursor: zoom-in; }
#main-photo { width: 100%; display: block; height: auto; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.7); border: none; padding: 10px; cursor: pointer; z-index: 10; font-size: 20px; }
.slider-arrow:hover { background: #3e1b08; color: white; }
.prev { left: 5px; } .next { right: 5px; }
.thumbnail-container { display: flex; gap: 8px; overflow-x: auto; padding: 5px 0; }
.thumb { width: 60px; height: 60px; object-fit: cover; border: 1px solid #e0ddd5; cursor: pointer; }
.thumb.active { border: 2px solid #3e1b08; }
.product-info-text { flex: 2; position: sticky; top: 100px; }
.product-description { white-space: pre-wrap; color: #4a4540; line-height: 1.6; margin-bottom: 30px; }
.contact-btn { display: inline-block; background-color: #f9f7f2; color: #3e1b08; border: 1px solid #3e1b08; padding: 12px 25px; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: 0.4s; }
.contact-btn:hover { background-color: #3e1b08; color: #f9f7f2; transform: scale(1.1); }

/* LIGHTBOX */
.lightbox { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); justify-content: center; align-items: center; }
.lightbox-content { max-width: 90%; max-height: 90%; object-fit: contain; }
.close-lightbox { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }

/* --- 7. FOOTER --- */
#contacts { padding: 60px 5%; text-align: center; background-color: #e9e1d3; border-top: 1px solid #000; margin-top: 50px; }
.social-links { display: flex; justify-content: center; gap: 25px; margin-top: 25px; }
.social-links img { width: 30px; transition: 0.4s; opacity: 0.6; }
.social-links a:hover img { transform: scale(1.3); opacity: 1; }

/* --- 8. OTTIMIZZAZIONE MOBILE --- */
@media (max-width: 768px) {
    .header { padding: 30px 5% 20px 5%; }
    .logo { height: 140px; }
    
    nav { gap: 15px; padding: 10px; flex-wrap: wrap; justify-content: center; }
    nav a { font-size: 0.8rem; letter-spacing: 1px; }

    .hero { padding: 20px 5%; }
    .hero-text h1 { font-size: 1.3rem; }

    .about-box { flex-direction: column; text-align: center; padding: 20px; }
    
    .catalog-filters { gap: 8px; margin-bottom: 25px; padding: 0 10px; }
    .filter-btn { padding: 8px 14px; font-size: 0.75rem; }

    .product-grid { grid-template-columns: 1fr; gap: 15px; padding: 0 10px; }
    .product-card img { height: 300px; }

    /* --- Correzione Definitiva Foto e Larghezza Mobile --- */
    .product-container { 
        flex-direction: column; 
        padding: 20px 5%; 
        width: 100% !important; 
        overflow-x: hidden; 
    }

    .product-media { 
        min-width: 100% !important; 
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    .slider-wrapper { 
        width: 85% !important; 
        max-width: 350px !important; 
        margin: 0 auto !important; 
    }

    #main-photo { 
        width: 100% !important; 
        height: auto !important;
        display: block;
    }

    .thumbnail-container {
        width: 85% !important;
        justify-content: center;
    }

    .product-info-text { 
        position: static; 
        padding-top: 20px; 
        width: 100%;
    }
}