.snap {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    & > div {
        scroll-snap-align: start;
    }
}

#maincontent .card{
    box-shadow:none;
    border-radius: 16px;
    @apply border border-gray-200 border-solid
}

#maincontent .card-interactive:hover,
#maincontent .product-item:hover .card-interactive{
    background-color: transparent;
}

#maincontent .card:not(.account-nav):not(.account-nav-content):hover, 
#maincontent .product-item:hover .card{
    box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
    background-color: transparent;
    @apply text-giftdesign
}

#maincontent .card:not(.account-nav):not(.account-nav-content):hover a:not(.btn-primary),
#maincontent .product-item:hover .card a:not(.btn-primary),
.js_slides .js_slide .card:hover p{
    @apply text-giftdesign
}

#maincontent .card.account-nav a:hover{
    @apply text-giftdesign
}

#maincontent .card:active{
    box-shadow: 0px 4px 20px 0px #efafa6;
    -webkit-box-shadow: 0px 4px 20px 0px #efafa6;
    -moz-box-shadow: 0px 4px 20px 0px #efafa6;
}

#maincontent .product-item:hover .hover_show
{
    display:block;
}

#maincontent .product-item:hover .hover_hidden
{
    display:none;
    height: 0;
    width: 0;
}


.nav-slider{
    position:absolute;
    top:0;
    bottom: 0;
    width: 102%;
    margin: auto;
    margin-left: -1%;
    height:0.1rem;
    display:flex;
    justify-content: space-between;
    align-items: center;

    @screen sm {
        width: 106%;
        margin-left: -3%;
    }

    @screen md{
        width: 102%;
        margin-left: -1%;
    }
}

.nav-slider>button{
    @apply bg-giftdesign text-white
}

.nav-slider>button.inactive{
    @apply bg-white text-giftdesign border-gray-200 border border-solid 
}

.photo img{
    margin:auto;
}


.textSlider{
    width: 100vw;
    font-size: 16px;
}

.textSlider .background{
    position: absolute;
    width:100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}



main#maincontent .textSlider .js_slides>.blok h1,
main#maincontent .textSlider .js_slides>.blok h2,
main#maincontent .textSlider .js_slides>.blok h3{
    @apply text-lg font-suse font-bold pb-3;
}
main#maincontent .textSlider .js_slides>.blok p{
    font-size: 0.8rem;
}
main#maincontent .textSlider .blok p{
    @apply text-gray;
}


main#maincontent .textSlider .blok a{
    @apply text-giftdesign;
}


.textSlider .nav-slider{
    @apply w-full m-auto;
}

.textSlider .nav-slider>button{
    @apply bg-transparent h-screen w-1/5 rounded-none border-none; 
}
.textSlider .nav-slider>button.inactive{
    height: 0px;
    padding:0px;
    cursor: default;
}

.full-img>.nav{
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:9;
    height:1px;
    @apply w-full absolute m-auto flex justify-between;
}
.full-img>.nav>button{
    width:40px;
    height:40px;
    @apply absolute bg-giftdesign rounded-full text-white aspect-square flex justify-center items-center;
}

.full-img button>svg{
    @apply block;
}

.full-img > .nav > .prev {
    left: -20px; 
}

/* Styl dla prawego przycisku */
.full-img > .nav > .next {
    right: -20px; 
}

.full-img>.nav>button.disable{
    @apply bg-white text-giftdesign border border-gray-200 cursor-default;
}


main#maincontent div.columns .product-slider h3{
    @apply text-4xl flex pt-8 pb-12 justify-center content-center
}

main#maincontent div.columns .product-slider h3::after{
    content:"";
    display:inline;
    position:relative;
    flex:1 1 auto;
    height:1px;
    margin:auto;
    margin-left: 1em;
    @apply bg-secondary;
}

main#maincontent div.columns .product-slider h3::before{
    content:"";
    display:inline;
    position:relative;
    flex:1 1 auto;
    min-width: 10%;
    height:1px;
    margin: auto;
    margin-right: 1em;
    @apply bg-secondary;
}