focused-product-gallery {
    display: block;
    position: relative
}
focused-product-gallery .swiper{
    padding-bottom: clamp(2rem, 10%, 60px);
}

focused-product-gallery .focused-product-gallery__content {
    display: flex;
    flex-direction: column;
    min-height: 90px;
    /* visibility: hidden; */
    padding: 15px 5px;
    text-align: center
}

@media screen and (min-width:768px) {
    focused-product-gallery .focused-product-gallery__content {
        padding: 15px 10px
    }
}

focused-product-gallery [data-active] .focused-product-gallery__content {
    visibility: visible
}

focused-product-gallery .focused-product-gallery__heading:not(:last-child), focused-product-gallery .focused-product-gallery__price:not(:last-child), focused-product-gallery .focused-product-gallery__subheading:not(:last-child), focused-product-gallery .focused-product-gallery__text:not(:last-child) {
    margin-bottom: 5px
}

focused-product-gallery .focused-product-gallery__button:not(:first-child) {
    margin-top: 5px
}

focused-product-gallery .focused-product-gallery__subheading {
    font-size: 12px
}

focused-product-gallery .focused-product-gallery__heading h3 {
    margin-bottom: 0
}

focused-product-gallery .focused-product-gallery__image {
    position: relative
}

focused-product-gallery .focused-product-gallery__image img {
    object-fit: cover
}

focused-product-gallery .focused-product-gallery__image-second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0
}

focused-product-gallery [data-active] .focused-product-gallery__image-second {
    opacity: 1;
    transition: opacity 1.5s ease
}

focused-product-gallery [data-active] .focused-product-gallery__image:has(.focused-product-gallery__image-second)>:not(.focused-product-gallery__image-second) {
    opacity: 0
}

focused-product-gallery .focused-product-gallery__image--tall img, focused-product-gallery .focused-product-gallery__image--tall svg {
    aspect-ratio: 2/3
}

focused-product-gallery .focused-product-gallery__image--wide img, focused-product-gallery .focused-product-gallery__image--wide svg {
    aspect-ratio: 4/3
}

focused-product-gallery .focused-product-gallery__image--square img, focused-product-gallery .focused-product-gallery__image--square svg {
    aspect-ratio: 1/1
}

focused-product-gallery .focused-product-gallery__image--circle img, focused-product-gallery .focused-product-gallery__image--circle svg {
    aspect-ratio: 1/1;
    border-radius: 50%
}

focused-product-gallery .focused-product-gallery__image--natural svg {
    aspect-ratio: 3/4
}

focused-product-gallery .focused-product-gallery__image--natural .focused-product-gallery__image-second .responsive-image-wrapper {
    height: 100%
}

focused-product-gallery .focused-product-gallery__image--natural .focused-product-gallery__image-second img {
    width: auto;
    max-height: 100%;
    border-radius: var(--block-border-radius)
}

@media screen and (min-width:768px) {
    focused-product-gallery .swiper-slide .focused-product-gallery__item {
        transform: translateY(120px)
    }
}

focused-product-gallery .swiper-slide[data-active] .focused-product-gallery__item {
    transform: translateY(0)
}

focused-product-gallery .swiper-slide[data-next] .focused-product-gallery__item, focused-product-gallery .swiper-slide[data-prev] .focused-product-gallery__item {
    transform: translateY(60px)
}

focused-product-gallery .swiper-slide:has(+[data-prev]) .focused-product-gallery__item, focused-product-gallery .swiper-slide[data-next]+.swiper-slide .focused-product-gallery__item {
    transform: translateY(90px)
}

focused-product-gallery .swiper-slide .focused-product-gallery__image {
    transform: translateY(20px);
    transition: transform .4s ease
}

focused-product-gallery .swiper-slide[data-active] .focused-product-gallery__image {
    transform: translateY(0);
    transition: transform 2s ease
}

@media (prefers-reduced-motion:reduce) {
    focused-product-gallery .swiper-slide .focused-product-gallery__image, focused-product-gallery .swiper-slide .focused-product-gallery__item {
        transform: none !important;
        transition: none !important
    }
}

focused-product-gallery.swiper-transitions-enabled .swiper-slide .focused-product-gallery__item {
    transition: transform .4s ease-in-out
}

focused-product-gallery.swiper-transitions-enabled .swiper-slide[data-active] .focused-product-gallery__item {
    transition-delay: .1s
}

@media screen and (max-width:767px) {
    focused-product-gallery .focused-product-gallery__navigation-arrows {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        padding-inline: 10px;
        z-index: 1;
    }
    .grid-view-item > div:has(.grid-view-item-image){
        width: 90%;
        margin-inline: auto;
    }

    focused-product-gallery .focused-product-gallery__arrow-next, focused-product-gallery .focused-product-gallery__arrow-prev {
        display: flex;
        align-items: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        justify-content: center!important;
        background: var(--primary-btn-bg-color);
        color: #fff;
        border-radius: 50%;
        padding: 10px;
        cursor: pointer;
        transition: all 0.3s ease;

    }
    .grid-view-item .grid-view-item-image:not(:last-child){
        margin-bottom: 0;
    }

    focused-product-gallery .focused-product-gallery__arrow-prev {
        justify-content: flex-end
    }

    focused-product-gallery .focused-product-gallery__arrow-next {
        justify-content: flex-start
    }
}

@media screen and (min-width:768px) and (pointer:coarse) {
    focused-product-gallery .swiper-btn--wrapper:not(.swiper-btn-layout__above) {
        opacity: 1 !important
    }

    focused-product-gallery .swiper-btn--wrapper.swiper-btn-layout__left-and-right .swiper-button--prev {
        transform: translateX(100%)
    }

    focused-product-gallery .swiper-btn--wrapper.swiper-btn-layout__left-and-right .swiper-button--next {
        transform: translateX(-100%)
    }
}
@media screen and (max-width:767px) {
    .focused-product-gallery .swiper-slide{
        width: 100%;
    }
}