/* ==========================================================
   DECOENLIGNE - IMAGE PRODUIT COMMUNE
   REGLE UNIQUE POUR TOUTES LES FICHES WOOCOMMERCE

   - contour doré 2 px
   - contour à 2 px de l'image
   - aucune loupe
   - aucune ouverture de l'image
   - zoom au survol
   - rien d'autre
   ========================================================== */

body.single-product{
    --del-product-gold:#b58a49;
}


/* ==========================================================
   1. REMISE A ZERO DES ANCIENNES FINITIONS LOCALES
   ========================================================== */

body.single-product #Content
.woocommerce-product-gallery,

body.single-product #Content
.woocommerce-product-gallery .flex-viewport,

body.single-product #Content
.woocommerce-product-gallery__wrapper,

body.single-product #Content
.woocommerce-product-gallery__image,

body.single-product #Content
.woocommerce-product-gallery__image > a,

body.single-product #Content
.woocommerce-product-gallery__image > a > img,

body.single-product #Content
.del-premium-frame-target,

body.single-product #Content
.del-luxe-frame-target,

body.single-product #Content
.del-essentielle-frame-target,

body.single-product #Content
.del-bureau-frame-target,

body.single-product #Content
.del-global-product-frame{
    border:0 !important;
    border-radius:0 !important;

    outline:0 !important;

    box-shadow:none !important;

    background:transparent !important;
}


/* ==========================================================
   2. CADRE DORE : 2 PX A 2 PX DE L'IMAGE
   ========================================================== */

/*
 * Galerie WooCommerce initialisée avec FlexSlider :
 * le viewport correspond exactement à l'image visible.
 */
body.single-product #Content
div.product
.woocommerce-product-gallery
.flex-viewport{
    position:relative !important;

    overflow:hidden !important;

    outline:2px solid var(
        --del-product-gold
    ) !important;

    outline-offset:2px !important;
}


/*
 * Image unique ou galerie pas encore transformée par FlexSlider :
 * le wrapper est encore l'enfant direct de la galerie.
 */
body.single-product #Content
div.product
.woocommerce-product-gallery
> .woocommerce-product-gallery__wrapper{
    position:relative !important;

    overflow:hidden !important;

    outline:2px solid var(
        --del-product-gold
    ) !important;

    outline-offset:2px !important;
}


/* ==========================================================
   3. AUCUNE LOUPE WOOCOMMERCE
   ========================================================== */

body.single-product #Content
.woocommerce-product-gallery__trigger,

body.single-product #Content
.woocommerce-product-gallery
img.zoomImg{
    display:none !important;

    visibility:hidden !important;

    opacity:0 !important;

    pointer-events:none !important;
}


/* ==========================================================
   4. AUCUNE OUVERTURE AU CLIC
   ========================================================== */

body.single-product #Content
.woocommerce-product-gallery__image{
    overflow:hidden !important;
}

body.single-product #Content
.woocommerce-product-gallery__image > a{
    display:block !important;

    overflow:hidden !important;

    pointer-events:none !important;

    cursor:default !important;
}


/* ==========================================================
   5. ZOOM AU SURVOL
   Même principe visuel que la fiche Perspective.
   ========================================================== */

body.single-product #Content
.woocommerce-product-gallery__image > a > img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    transform:scale(1) !important;
    transform-origin:center center !important;

    transition:
        transform .28s ease-out !important;

    will-change:transform;
}


@media (hover:hover) and (pointer:fine){

    body.single-product #Content
    .woocommerce-product-gallery__image:hover
    > a > img{
        transform:scale(1.50) !important;
    }
}


/* ==========================================================
   6. MOBILE : PAS DE ZOOM TACTILE
   ========================================================== */

@media (hover:none), (pointer:coarse){

    body.single-product #Content
    .woocommerce-product-gallery__image
    > a > img{
        transform:scale(1) !important;

        transition:none !important;

        will-change:auto !important;
    }
}