/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* ==========================================
   VIVISTORE WOOCOMMERCE PRODUCT GALLERY
========================================== */


/* --------------------------------------------------
   MAIN PRODUCT IMAGE
   Keep the main image area the same size
-------------------------------------------------- */

.single-product
.woocommerce-product-gallery
.flex-viewport {

    height: auto !important;
    aspect-ratio: 1 / 1;

    overflow: hidden !important;
}


.single-product
.woocommerce-product-gallery__wrapper {

    height: 100% !important;
}


.single-product
.woocommerce-product-gallery__image {

    height: 100% !important;
    min-height: 100% !important;

    overflow: hidden !important;
}


.single-product
.woocommerce-product-gallery__image > a {

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

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


/* Main image */

.single-product
.woocommerce-product-gallery__image
> a
> img:not(.zoomImg) {

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

    object-fit: contain !important;
    object-position: center center !important;
}


/* ==================================================
   PRODUCT GALLERY THUMBNAILS
================================================== */

.single-product
.woocommerce-product-gallery
.flex-control-thumbs {

    display: grid !important;

    grid-template-columns: repeat(8, 1fr);

    gap: 8px;

    margin: 10px 0 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* Make all thumbnail boxes the same size */

.single-product
.woocommerce-product-gallery
.flex-control-thumbs li {

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

    aspect-ratio: 1 / 1;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative;

    overflow: hidden !important;

    cursor: pointer;
}


/* Thumbnail images */

.single-product
.woocommerce-product-gallery
.flex-control-thumbs li img {

    display: block !important;

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

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* =========================================
   KEEP NORMAL THUMBNAILS FULL COLOUR
========================================= */

.single-product
.woocommerce-product-gallery
.flex-control-thumbs li img{
opacity:1!important;
}

/* Only darken thumbnail 8 with +number */
.single-product
.woocommerce-product-gallery
.flex-control-thumbs
li.vivistore-gallery-more img{
opacity:.55!important;
}

/* ==================================================
   HIDE THUMBNAIL 9+
================================================== */

.single-product
.woocommerce-product-gallery
.flex-control-thumbs
li.vivistore-gallery-hidden {

    display: none !important;
}


/* ==================================================
   +NUMBER ON THUMBNAIL 8
================================================== */

.single-product
.woocommerce-product-gallery
.flex-control-thumbs
li.vivistore-gallery-more {

    position: relative !important;
}


.single-product
.woocommerce-product-gallery
.flex-control-thumbs
li.vivistore-gallery-more::after {

    content: attr(data-gallery-more);

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.58);

    color: #ffffff;

    font-size: 22px;
    font-weight: 600;

    line-height: 1;

    z-index: 10;

    pointer-events: none;
}

/* ==========================================
   VIVISTORE CUSTOM LIGHTBOX
========================================== */

.vivi-lightbox{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100vh!important;
background:rgba(0,0,0,.95)!important;
z-index:9999999!important;
overflow:hidden!important;
}

body.vivi-lightbox-open{
overflow:hidden!important;
}

/* IMAGE CONTAINER */
.vivi-lightbox-image-wrap{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
pointer-events:none;
}

/* FORCE IMAGE EXACTLY TO CENTRE */
.vivi-lightbox-image{
position:absolute!important;
top:50%!important;
left:50%!important;
transform:translate(-50%,-50%)!important;

display:block!important;

width:auto!important;
height:auto!important;

max-width:calc(100vw - 180px)!important;
max-height:calc(100vh - 80px)!important;

object-fit:contain!important;

margin:0!important;
padding:0!important;

pointer-events:auto;
}

/* COUNTER */
.vivi-lightbox-counter{
position:absolute!important;
top:18px!important;
left:18px!important;
color:#fff!important;
font-size:15px!important;
font-weight:500!important;
z-index:10!important;
}

/* CLOSE */
.vivi-lightbox-close{
position:absolute!important;
top:10px!important;
right:18px!important;

width:45px!important;
height:45px!important;

display:flex!important;
align-items:center!important;
justify-content:center!important;

background:none!important;
border:0!important;
box-shadow:none!important;

color:#fff!important;
font-size:38px!important;
line-height:1!important;

padding:0!important;
margin:0!important;

cursor:pointer!important;
z-index:10!important;
}

/* LEFT + RIGHT */
.vivi-lightbox-prev,
.vivi-lightbox-next{
position:absolute!important;
top:50%!important;
transform:translateY(-50%)!important;

width:60px!important;
height:80px!important;

display:flex!important;
align-items:center!important;
justify-content:center!important;

background:none!important;
border:0!important;
box-shadow:none!important;

color:#fff!important;
font-size:48px!important;
font-weight:300!important;
line-height:1!important;

padding:0!important;
margin:0!important;

cursor:pointer!important;
z-index:10!important;
}

.vivi-lightbox-prev{
left:15px!important;
}

.vivi-lightbox-next{
right:15px!important;
}

.vivi-lightbox-prev:hover,
.vivi-lightbox-next:hover,
.vivi-lightbox-close:hover{
background:none!important;
color:#fff!important;
}

/* MOBILE */
@media(max-width:767px){

.vivi-lightbox-image{
max-width:calc(100vw - 90px)!important;
max-height:calc(100vh - 70px)!important;
}

.vivi-lightbox-prev,
.vivi-lightbox-next{
width:42px!important;
font-size:40px!important;
}

.vivi-lightbox-prev{
left:2px!important;
}

.vivi-lightbox-next{
right:2px!important;
}

}

/* ===================================
   PRODUCT GALLERY THUMBNAILS - MOBILE
=================================== */

@media (max-width:767px){

    .woocommerce-product-gallery .flex-control-thumbs{
        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:6px !important;
        width:100% !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1/1;
        object-fit:cover;
    }
}


/* ===================================
   PRODUCT GALLERY THUMBNAILS - TABLET
=================================== */

@media (min-width:768px) and (max-width:1024px){

    .woocommerce-product-gallery .flex-control-thumbs{
        display:grid !important;
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:6px !important;
        width:100% !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1/1;
        object-fit:cover;
    }
}