/*
COMPONENTE: GALLERY SINGLE PRODUCT
=========================================
VISIBLE: SINGLE-PRODUCT.PHP
ACA ESTA EL ESTILO DE TODO EL COMPONENTE.
- MUESTRA LA/S IMAGEN/ES DEL PRODUCTO O VARIACION DEL PRODUCTO
*/

.gallery-single-product {

    position: relative;

}

.gallery-single-product__viewport {

    width: 100%;

}

.gallery-single-product__track {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;

}

/*
ITEM
*/

.gallery-single-product__item {

    margin: 0;
    width: 100%;
    height: 412px;
    overflow: hidden;

}


/*
IMAGEN
*/

.gallery-single-product__item img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}


/*
1 SOLA IMAGEN
*/

.gallery-single-product__track:has(.gallery-single-product__item:only-child) {

    grid-template-columns: 1fr;

}

/* ==========================================
   UNA SOLA IMAGEN - DESKTOP
========================================== */

.gallery-single-product__track:has(.gallery-single-product__item:only-child)
.gallery-single-product__item {
    height: 412px;
}

.gallery-single-product__track:has(.gallery-single-product__item:only-child)
.gallery-single-product__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*FLECHAS*/
.gallery-single-product__arrow,
.gallery-single-product__arrow:hover,
.gallery-single-product__arrow:focus {
    background: var(--rosa-suave);
    color: var(--color-background);
    border: none;
    box-shadow: none;

}

.gallery-single-product__arrow{

    display:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    z-index:20;
    color:var(--color-secondary);

}


.gallery-single-product__arrow--prev{

    left:12px;

}

.gallery-single-product__arrow--next{

    right:12px;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .gallery-single-product__arrow{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .gallery-single-product__viewport{
        overflow:hidden;
        width:100%;
    }

    .gallery-single-product__track{
        display:flex;
        gap:0;
        transition:transform .35s ease;
    }

    .gallery-single-product__item{
        flex:0 0 100%;
        min-width:100%;
        height:auto;
    }

}