/** Shopify CDN: Minification failed

Line 63:126 Unexpected ")"

**/
.GridHeading {
    padding: var(--GlobalPadding)
}
.CardMediaWrapper {
    width: 100%;
    aspect-ratio: var(--ProductAspectRatio);
    display: block;
    position: relative;
    overflow: hidden;
    /* &:hover {
        clip-path: inset(10px)
    } */
    .VideoWrapper {
        width: 100%;
        height: 100%;
        & video {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
        }
    }
    .keen-slider{
        height: 100%;
        z-index: 3;
        position: relative;
    }
}
.GridCard {
    display: flex;
    flex-direction: column;
    position: relative;
}
.GridCard img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--MainTransition);
}
.CardDetails {
    display: flex;
    flex-direction: column;
    gap: var(--DetailsGap);
    padding: var(--GlobalPadding);
    &:not(.AfterLeft, .BeforeLeft, .AfterCenter, .BeforeCenter, .AfterRight, .BeforeRight) {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    &:not(.TopLeft, .TopCenter, .TopRight, .MiddleLeft, .MiddleCenter, .MiddleRight, .BottomLeft, .BottomCenter, .BottomRight,) {
        justify-content: flex-start;
    }
    
}

.GridCard {
    .PLPHoverMediaWrapper, .PLPSwatchMediaWrapper, .VideoWrapper{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        transition: var(--MainTransition);
        /* top: 50%;
        left: 50%;
        translate: -50% -50%; */
    }
}
.PLPHoverMediaWrapper {
    opacity: 0;
    filter: blur(20px);
    height: 100%;
    width: 100%;
    & img, & video {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    &.CarouselComponent {
        z-index: 2;
    }
    @media screen and (max-width: 769px){
        filter: blur(0px);  
        opacity: 1;
    }
}

.CardMediaWrapper:hover .PLPHoverMediaWrapper {
    opacity: 1;
    filter: blur(0px);
}

.PLPBadgeWrapper {
    pointer-events: none;
    &.Vertical {
        .CardBadge {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
    }
    .CardBadge {
        position: static;
    }
    &:not(.InDetails) {
        display: flex;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        flex-direction: column;
    }
}
.CardBadge {
    background: var(--Background);
    color: var(--Text);
    display: block;
    position: absolute;
    z-index: 1;
    padding: var(--GlobalPadding);
    top: 0;
    left: 0;
    @media screen and (max-width: 769px){
        z-index: 7;
    }
}

.SwatchHoverImage {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    &[data-active=true] {
        z-index: 5;
    }
}
.SwatchHoverImage[data-active=false] img {
    opacity: 0;
    /* filter: blur(20px); */
}
.SwatchHoverImage[data-active=true] img {
    opacity: 1;
    /* filter: blur(0px); */
}

.CardQuickView {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 100%;
    z-index: 3;
    transition: var(--MainTransition);
    width: 100%;
    border-radius: unset;
    margin: 0;
} 
.CardMediaWrapper:hover .CardQuickView {
    translate: -50% 0%;
}

.CardQuickView .QuickViewProductWrapper {
    display: none ;
    position: static;
    max-width: 100px;
    max-height: 300px;
    height: 100%;
    width: 100%;
}

.CardSwatches {
    display: flex;
    flex-direction: column;
    padding: var(--GlobalPadding);
    &:not(.InDetails){
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 6;
        flex-direction: column;
        padding: var(--GlobalPadding);
        pointer-events: none;
    }

}

.SwatchWrapper {
    display: flex;
    flex-direction: column;
    gap: var(--Gap);
    pointer-events: all;
    &.Row {
        flex-direction: row;
    }
}

.ViewProduct{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 7;
    position: absolute;
    top: 0;
    left: 0;
    * {
        pointer-events: all;
    }
}