/* =========================================================
   NINOSEPO — SINGLE PRODUCT
   ========================================================= */


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

.ninosepo-single-gallery{
    width:100%;
    min-width:0;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.ninosepo-single-gallery__main{
    position:relative;

    --ninosepo-gallery-surface:#f4f2ee;

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

    width:100%;
    aspect-ratio:1/1;

    overflow:hidden;

    background:var(--ninosepo-gallery-surface);

    isolation:isolate;
}


.ninosepo-single-gallery__main::before{
    content:"";

    position:absolute;
    z-index:0;

    inset:-9%;

    background-image:
        var(--ninosepo-gallery-bg);

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    filter:
        blur(26px)
        brightness(1.08)
        saturate(.92)
        contrast(.94);

    transform:scale(1.1);

    opacity:.88;

    pointer-events:none;

    transition:
        opacity .36s ease,
        filter .5s ease,
        transform 1.1s cubic-bezier(.22,1,.36,1);

    will-change:
        transform,
        filter;
}


.ninosepo-single-gallery__main::after{
    content:"";

    position:absolute;
    z-index:1;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.08) 24%,
            rgba(255,255,255,.08) 76%,
            rgba(255,255,255,.30) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.12) 0%,
            transparent 64%,
            rgba(255,255,255,.18) 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(23,20,16,.055);

    pointer-events:none;
}


.ninosepo-single-gallery__main
> img.ninosepo-single-gallery__main-image{

    position:relative;
    z-index:2;

    display:block;

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

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

    margin:0;
    padding:0;

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

    border:0;
    border-radius:0;

    transition:
        opacity .24s ease,
        filter .42s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

    filter:
        drop-shadow(0 18px 36px rgba(28,22,14,.12));

    user-select:none;
    -webkit-user-drag:none;
}


.ninosepo-single-gallery__main-image.is-changing{
    opacity:0;
}


@media(hover:hover){

    .ninosepo-single-gallery__main:hover::before{
        filter:
            blur(23px)
            brightness(1.1)
            saturate(1)
            contrast(.96);

        transform:scale(1.14);
    }


    .ninosepo-single-gallery__main:hover
    > img.ninosepo-single-gallery__main-image{
        filter:
            drop-shadow(0 22px 42px rgba(28,22,14,.15));

        transform:scale(1.008);
    }
}


/* =========================================================
   THUMBNAIL NAVIGATION
   ========================================================= */

.ninosepo-single-gallery__navigation{
    position:relative;

    width:100%;

    margin-top:8px;

    overflow:hidden;
}


.ninosepo-single-gallery__thumb-viewport{
    width:100%;

    overflow:hidden;
}


.ninosepo-single-gallery__thumb-track{
    display:flex;

    width:100%;

    gap:0;

    transform:
        translate3d(0,0,0);

    transition:
        transform .28s ease;

    will-change:transform;
}


.ninosepo-single-gallery__thumb{
    position:relative;

    flex:0 0 33.333333%;
    width:33.333333%;

    aspect-ratio:1/1;

    margin:0;
    padding:0;

    overflow:hidden;

    border:0;
    border-radius:0;

    background:#fff;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    opacity:.58;

    transition:
        opacity .2s ease,
        filter .2s ease;
}


.ninosepo-single-gallery__thumb:hover,
.ninosepo-single-gallery__thumb.is-active{
    opacity:1;
}


.ninosepo-single-gallery__thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border:0;
    border-radius:0;

    user-select:none;
    -webkit-user-drag:none;
}


/* =========================================================
   GALLERY ARROWS
   ========================================================= */

.ninosepo-single-gallery__arrow{
    position:absolute;
    z-index:10;

    top:0;
    bottom:0;

    display:flex;

    width:46px;
    height:100%;

    margin:0;
    padding:0;

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

    border:0;
    border-radius:0;

    background:
        rgba(255,255,255,.38);

    color:#111;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:none;

    transition:
        background .2s ease,
        opacity .2s ease;
}


.ninosepo-single-gallery__arrow--prev{
    left:0;
}


.ninosepo-single-gallery__arrow--next{
    right:0;
}


.ninosepo-single-gallery__arrow:hover{
    background:
        rgba(255,255,255,.58);
}


.ninosepo-single-gallery__arrow:disabled{
    opacity:.22;

    cursor:default;
}


.ninosepo-single-gallery__arrow svg{
    display:block;

    width:20px;
    height:52px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.05;

    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;
}


.ninosepo-single-gallery__arrow:hover,
.ninosepo-single-gallery__arrow:focus,
.ninosepo-single-gallery__arrow:focus-visible{
    color:#111;

    outline:none;

    box-shadow:none;
}


@media(prefers-reduced-motion:reduce){

    .ninosepo-single-gallery__main::before,
    .ninosepo-single-gallery__main-image{
        transition:none !important;
    }
}