/*
 * WooCommerce — Product block: gallery (CSS)
 * Versione Ottimizzata: Apple Style Graphics & Performance
 */

/* 1. Layout Desktop (Griglia + Sticky) */
@media (min-width: 992px) {
    .single-product div.product {
        display: grid !important;
        grid-template-columns: 55% 45%;
        gap: 60px;
        align-items: start;
    }

    /* Reset float/width di default di Woo */
    .single-product .woocommerce-product-gallery,
    .single-product .product .summary.entry-summary {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Immagine Sticky + EFFETTI SPECIALI GRAFICI */
    .single-product .woocommerce-product-gallery {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-height-desktop, 52px) + 30px);
        z-index: 10;
        align-self: start;
        /* [Performance Engineer] Evita clipping dei thumbnails: scroll interno solo se serve. */
        max-height: calc(100vh - var(--header-height-desktop, 52px) - 60px);

        /* --- AGGIUNTE GRAFICHE APPLE STYLE --- */
        /* [Performance Engineer] Rimuoviamo !important sugli stili estetici (selettore già specifico). */
        background: radial-gradient(circle at center, #ffffff 0%, #f5f5f7 100%);
        /* Bordi e ombre uniformi con il resto delle card */
        border-radius: var(--bspc-radius-large, 18px);
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
        padding: 10px;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Legacy */
    }

    /* [UI] Nasconde scrollbar (WebKit) mantenendo lo scroll se necessario. */
    .single-product .woocommerce-product-gallery::-webkit-scrollbar {
        display: none;
    }


    /* Trattamento Immagine (Magic Blend) */
    .single-product .woocommerce-product-gallery img {
        mix-blend-mode: multiply; /* Fonde il bianco dell'immagine con lo sfondo */
        filter: contrast(1.02);
        border-radius: 20px;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform; /* Ottimizzazione prestazioni GPU */
    }


    /* Fix per sezioni full-width sotto */
    .single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ====================================================================
 * MOBILE GALLERY (<=991px)
 *
 * A differenza della versione desktop grigliata/sticky, su mobile la
 * galleria prodotto occupa tutta la larghezza disponibile e viene
 * racchiusa in un contenitore premium con bordi arrotondati e
 * leggero effetto glass. L'icona di ingrandimento viene resa più
 * evidente e tappabile con un target minimo di 44px. Gli spazi
 * verticali sopra e sotto sono ridotti per evitare vuoti eccessivi.
 */
@media (max-width: 991px) {
    /* Contenitore principale della galleria */
    .single-product .woocommerce-product-gallery {
        /* Centriamo la galleria tramite product.css; rimosso margin locale.
           Uniformiamo bordi e ombre con gli altri blocchi. */
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.04);
        border-radius: var(--bspc-radius-large, 18px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
        padding: 10px;
        position: relative;
    }
    /* Assicurati che figure non abbiano margini extra */
    .single-product .woocommerce-product-gallery figure {
        margin: 0;
    }
    /* Ingrossiamo il trigger di ingrandimento (icona lente) per renderlo tappabile */
    .single-product .woocommerce-product-gallery__trigger {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--bspc-blue-primary, #0071e3);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 5;
    }
    .single-product .woocommerce-product-gallery__trigger svg {
        width: 22px;
        height: 22px;
    }
    /* Nascondiamo la barra thumbnails se non ci stanno tutte */
    .single-product .flex-control-thumbs {
        margin-top: 16px;
        gap: 8px;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }
    .single-product .flex-control-thumbs li img {
        border-radius: 10px;
    }
}

/* [UI/UX] Hover premium solo su dispositivi con hover reale (evita side effect su touch). */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .single-product .woocommerce-product-gallery:hover {
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06);
    }

    .single-product .woocommerce-product-gallery:hover img {
        transform: scale(1.04);
    }
}

/* [Accessibility Specialist] Riduce animazioni: disattiva transizioni/zoom della galleria. */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .single-product .woocommerce-product-gallery,
    .single-product .woocommerce-product-gallery img {
        transition: none;
    }

    .single-product .woocommerce-product-gallery:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
    }

    .single-product .woocommerce-product-gallery:hover img {
        transform: none;
    }
}

/* 2. MINIATURE (Thumbnails) - Arrotondate e Moderne */
.single-product .flex-control-thumbs {
    display: flex !important;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.single-product .flex-control-thumbs li img {
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.single-product .flex-control-thumbs img.flex-active {
    border-color: #0071e3; /* Blu Apple */
    transform: translateY(-2px);
}