/* Product Listing Page CSS Module */

.site-content > *,
.site-content > * > *,
.site-content > * > * > * {
    height: 100%;
}

.product-slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* justify-content: center; */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 44rem;
    height: 100%;
}

.product-slider__wrapper {
    width: 100%;
    /* max-width: 68.75rem; */
    max-width: 55rem;
    /* padding-inline: 3.75rem; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-block:  6.25rem  3.125rem;
}

.product-slider__wrapper .phone-image {
    margin: auto;
    z-index: 1;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    width: 72%;
}

.product-slider-item {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
}

.product-slider-item .product-shortname {
    --shadow: rgb(101 119 127 / 0.5);
    position: absolute;
    font-family: var(--font-orbitron);
    font-weight: 700;
    /* font-size: 10rem; */
    font-size: calc(min(55rem, 100vw) * 14.5 / 100);
    color: var(--light-blue);
    /* left: 3.5rem; */
    left: 2rem;
    /* top: 1.5rem; */
    top: 3rem;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    text-shadow:
        0.75rem 0.375rem 0 var(--shadow),
        0.6875rem 0.375rem 0 var(--shadow),
        0.625rem 0.3125rem 0 var(--shadow),
        0.5625rem 0.3125rem 0 var(--shadow),
        0.5rem 0.25rem 0 var(--shadow),
        0.4375rem 0.25rem 0 var(--shadow),
        0.375rem 0.1875rem 0 var(--shadow),
        0.3125rem 0.1875rem 0 var(--shadow),
        0.25rem 0.125rem 0 var(--shadow),
        0.1875rem 0.125rem 0 var(--shadow),
        0.125rem 0.0625rem 0 var(--shadow),
        0.0625rem 0.0625rem 0 var(--shadow);
    -webkit-transform: rotate3d(100, -76, 106, 80deg) translate(0, -120%);
            transform: rotate3d(100, -76, 106, 80deg) translate(0, -120%);
    opacity: 0;
    -webkit-transition:
        opacity 500ms linear,
        -webkit-transform 500ms linear;
    transition:
        opacity 500ms linear,
        -webkit-transform 500ms linear;
    -o-transition:
        transform 500ms linear,
        opacity 500ms linear;
    transition:
        transform 500ms linear,
        opacity 500ms linear;
    transition:
        transform 500ms linear,
        opacity 500ms linear,
        -webkit-transform 500ms linear;
}

.product-slider-item.active .product-shortname {
    -webkit-transform: rotate3d(100, -76, 106, 80deg) translate(0, 0);
            transform: rotate3d(100, -76, 106, 80deg) translate(0, 0);
    opacity: 0.5;
    -webkit-transition:
        opacity 200ms linear,
        -webkit-transform 900ms linear;
    transition:
        opacity 200ms linear,
        -webkit-transform 900ms linear;
    -o-transition:
        transform 900ms linear,
        opacity 200ms linear;
    transition:
        transform 900ms linear,
        opacity 200ms linear;
    transition:
        transform 900ms linear,
        opacity 200ms linear,
        -webkit-transform 900ms linear;
}

.product-slider-item .preview-image-group {
    position: absolute;
    width: 40%;
    left: 50%;
    top: 2%;
    z-index: 2;
    -webkit-transform: rotate(-23deg) translate(100vw, 0);
        -ms-transform: rotate(-23deg) translate(100vw, 0);
            transform: rotate(-23deg) translate(100vw, 0);
    opacity: 0;
    -webkit-transition:
        opacity 250ms linear,
        -webkit-transform 1000ms ease-in;
    transition:
        opacity 250ms linear,
        -webkit-transform 1000ms ease-in;
    -o-transition:
        transform 1000ms ease-in,
        opacity 250ms linear;
    transition:
        transform 1000ms ease-in,
        opacity 250ms linear;
    transition:
        transform 1000ms ease-in,
        opacity 250ms linear,
        -webkit-transform 1000ms ease-in;
}

.product-slider-item .preview-image-group img {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-transition: -webkit-transform 400ms ease-in;
    transition: -webkit-transform 400ms ease-in;
    -o-transition: transform 400ms ease-in;
    transition: transform 400ms ease-in;
    transition: transform 400ms ease-in, -webkit-transform 400ms ease-in;
}

.product-slider-item.active .preview-image-group {
    -webkit-transform: rotate(-23deg) translate(0, 0);
        -ms-transform: rotate(-23deg) translate(0, 0);
            transform: rotate(-23deg) translate(0, 0);
    opacity: 1;
    -webkit-transition:
        /* transform 2000ms cubic-bezier(.46,.99,.79,.9), */
        opacity 400ms linear,
        -webkit-transform 2000ms cubic-bezier(.18,.96,1,1);
    transition:
        /* transform 2000ms cubic-bezier(.46,.99,.79,.9), */
        opacity 400ms linear,
        -webkit-transform 2000ms cubic-bezier(.18,.96,1,1);
    -o-transition:
        /* transform 2000ms cubic-bezier(.46,.99,.79,.9), */
        transform 2000ms cubic-bezier(.18,.96,1,1),
        opacity 400ms linear;
    transition:
        /* transform 2000ms cubic-bezier(.46,.99,.79,.9), */
        transform 2000ms cubic-bezier(.18,.96,1,1),
        opacity 400ms linear;
    transition:
        /* transform 2000ms cubic-bezier(.46,.99,.79,.9), */
        transform 2000ms cubic-bezier(.18,.96,1,1),
        opacity 400ms linear,
        -webkit-transform 2000ms cubic-bezier(.18,.96,1,1);
}

.product-slider-item.active .preview-image-group img {
    -webkit-transition: -webkit-transform 2400ms cubic-bezier(.18,.96,1,1);
    transition: -webkit-transform 2400ms cubic-bezier(.18,.96,1,1);
    -o-transition: transform 2400ms cubic-bezier(.18,.96,1,1);
    transition: transform 2400ms cubic-bezier(.18,.96,1,1);
    transition: transform 2400ms cubic-bezier(.18,.96,1,1), -webkit-transform 2400ms cubic-bezier(.18,.96,1,1);
}

/* With 2 images */

.product-slider-item.active .preview-image-group.with-2-images .card-1 {
    -webkit-transform: translate(-1rem, 1rem);
        -ms-transform: translate(-1rem, 1rem);
            transform: translate(-1rem, 1rem);
}

.product-slider-item.active .preview-image-group.with-2-images .card-2 {
    -webkit-transform: translate(1rem, -1rem);
        -ms-transform: translate(1rem, -1rem);
            transform: translate(1rem, -1rem);
}

/* With 3 image */

.product-slider-item.active .preview-image-group.with-3-images .card-1 {
    -webkit-transform: translate(-2rem, 2rem);
        -ms-transform: translate(-2rem, 2rem);
            transform: translate(-2rem, 2rem);
}

.product-slider-item.active .preview-image-group.with-3-images .card-2 {
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
}

.product-slider-item.active .preview-image-group.with-3-images .card-3 {
    -webkit-transform: translate(2rem, -2rem);
        -ms-transform: translate(2rem, -2rem);
            transform: translate(2rem, -2rem);
}

/* With 4 image */

.product-slider-item.active .preview-image-group.with-4-images .card-1 {
    -webkit-transform: translate(-2.25rem, 2.25rem);
        -ms-transform: translate(-2.25rem, 2.25rem);
            transform: translate(-2.25rem, 2.25rem);
}

.product-slider-item.active .preview-image-group.with-4-images .card-2 {
    -webkit-transform: translate(-0.75rem, 0.75rem);
        -ms-transform: translate(-0.75rem, 0.75rem);
            transform: translate(-0.75rem, 0.75rem);
}

.product-slider-item.active .preview-image-group.with-4-images .card-3 {
    -webkit-transform: translate(0.75rem, -0.75rem);
        -ms-transform: translate(0.75rem, -0.75rem);
            transform: translate(0.75rem, -0.75rem);
}

.product-slider-item.active .preview-image-group.with-4-images .card-4 {
    -webkit-transform: translate(2.25rem, -2.25rem);
        -ms-transform: translate(2.25rem, -2.25rem);
            transform: translate(2.25rem, -2.25rem);
}

/* With 5 image */

.product-slider-item.active .preview-image-group.with-5-images .card-1 {
    -webkit-transform: translate(-3rem, 3rem);
        -ms-transform: translate(-3rem, 3rem);
            transform: translate(-3rem, 3rem);
}

.product-slider-item.active .preview-image-group.with-5-images .card-2 {
    -webkit-transform: translate(-1.5rem, 1.5rem);
        -ms-transform: translate(-1.5rem, 1.5rem);
            transform: translate(-1.5rem, 1.5rem);
}

.product-slider-item.active .preview-image-group.with-5-images .card-3 {
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
}

.product-slider-item.active .preview-image-group.with-5-images .card-4 {
    -webkit-transform: translate(1.5rem, -1.5rem);
        -ms-transform: translate(1.5rem, -1.5rem);
            transform: translate(1.5rem, -1.5rem);
}

.product-slider-item.active .preview-image-group.with-5-images .card-5 {
    -webkit-transform: translate(3rem, -3rem);
        -ms-transform: translate(3rem, -3rem);
            transform: translate(3rem, -3rem);
}

.product-slider-item .product-info {
    display: none;
}

.product-slider-item.active .product-info {
    display: block;
    position: absolute;
    width: 60%;
    height: 80%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2;
    background-color: #1F282EA1;
    border-radius: 7%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 1em;
    font-family: var(--font-orbitron);
    font-size:  3.125rem;
    font-weight: 400;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.product-slider__nav {
    font-family: var(--font-orbitron);
    font-size: 2.5rem;
    font-weight: 700;
    line-height:  3.125rem;
}

.product-slider__nav .prev,
.product-slider__nav .next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    cursor: pointer;
    width: 2.5rem;
    text-align: center;
    background: none;
    border: none;
    color: var(--light-blue);
}

.product-slider__nav .prev {
    left: 0.625rem;
}

.product-slider__nav .next {
    right: 0.625rem;
}

.product-slider__dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.25rem;
}

.product-slider__dots .dot {
    background: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid white;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.product-slider__dots .dot:hover,
.product-slider__dots .dot:focus,
.product-slider__dots .dot:focus-visible {
    background-color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
}

.product-slider__dots .dot.active {
    background-color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    cursor: auto;
}

.product-slider__tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.product-slider__tabs .tab {
    position: relative;
}

.product-slider__tabs .tab.active {
    color: var(--dark-blue);
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
}

.product-slider__tabs .tab .animated-price {
    font-size: 1.25rem;
    color: var(--accent-orange);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(-100%);
    transition:
        transform 300ms ease-in-out,
        opacity 200ms linear;
}

.product-slider__tabs .tab.active .animated-price {
    opacity: 1;
    transform: translateY(1rem);
    transition:
        transform 300ms ease-in-out,
        opacity 400ms linear;
}

@media screen and (max-width: 480px) {

    .site-main {
        margin-top: 3vh;
    }

    .product-slider-item .product-shortname {
        top: 10rem;
    }
    
    .product-slider__wrapper .phone-image {
        width: 100%;
    }

    .product-slider__nav .prev {
        left: -0.5rem;
        display: none;
    }

    .product-slider__nav .next {
        right: -0.5rem;
        display: none;
    }

    .product-slider-item .preview-image-group {
        width: 51%;
        left: 38%;
        top: 4%;
    }

}