html {
    scroll-behavior: smooth;
}

.product-images img {
    border-radius: var(--radius)
}

/*.product-variations.fixed{*/
/*   scroll-margin-top: 120px !important;*/
/*position: fixed;
}*/
.product-variations img {
    border-radius: var(--radius-md)
}

@media only screen and (max-width: 440px) {
    .product-images img {
        border-radius: var(--radius-sm)
    }

    .product-variations img {
        border-radius: var(--radius-xs) !important;
    }
}


.product-variations .header h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.product-variations .price {
    font-size: 1.5rem;
}

.product-variations .variations {
    display: none;
}

.color-selector .color-sample {
    position: absolute;
    right: 10px;
    bottom: 10px;
}


.color-selector img {
    opacity: 1;
    padding: 3px;

}


    .color-selector.active img,
    .color-selector img:hover {
        opacity: 1;
    }

.color-selector.active img {
    border: 1px solid var(--primary-color-700);
    /*    solid var(--primary-color-100);*/
    box-shadow: 0px 0px 9px -2px var(--primary-color-900);
    /*    padding: 5px;*/
}


@media only screen and (min-width: 441px) {

    .product-image-collection {
        display: flex;
        flex-wrap: wrap;
    }

    .product-image-item {
        cursor: zoom-in;
        margin-bottom: .5rem;
        padding: 1rem;
        width: 33.33%;
    }


        .product-image-item[data-image-index="0"],
        .product-image-item[data-image-index="1"] {
            width: 50%;
        }
}
@media only screen and (max-width: 991px) {
    .product-variations-column {
        padding: 1rem 1rem 0rem !important;
    }
}
    @media only screen and (max-width: 440px) {

        .product-image-collection {
            border-radius: var(--radius) !important;
            display: flex;
            gap: 20px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color-900) var(--primary-color-100);
            scrollbar-arrow-color: var(--primary-color-900);
        }

        .product-image-item {
            flex-basis: calc((100% - 10px) / 1.5);
            flex: 0 0 calc((100% - 120px) / 1);
            /*        flex: 0 0 calc((100% - 120px) / 6.5);*/
        }
    }



    .selected-size {
        display: inline-block;
        direction: ltr;
    }
    /* =========================================================
   Semantic UI Modal
   ========================================================= */
    .product-image-modal {
        width: 90% !important;
        max-width: 1200px !important;
        height: 90vh;
        margin: 0 auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }


        /*
 * Semantic UI adds .content with padding.
 */

        .product-image-modal > .content {
            height: 100%;
            padding: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }


    /* =========================================================
   Close Button
   ========================================================= */

    .product-image-modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
        color: #fff !important;
        font-size: 1.5rem !important;
        cursor: pointer;
    }


    /* =========================================================
   Splide
   ========================================================= */

    .product-image-slider {
        width: 100%;
        height: 100%;
    }


        .product-image-slider .splide__track {
            width: 100%;
            height: 100%;
        }


        .product-image-slider .splide__list {
            height: 100%;
        }


        .product-image-slider .splide__slide {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }


    /* =========================================================
   Large Image
   ========================================================= */

    .product-slider-image {
        display: block;
        max-width: 100%;
        max-height: 85vh;
        width: auto;
        height: auto;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
    }


    /* =========================================================
   Splide Arrows
   ========================================================= */

    .product-image-slider .splide__arrow {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.95);
        opacity: 1;
    }


        .product-image-slider .splide__arrow:hover {
            background: #fff;
        }


        .product-image-slider .splide__arrow svg {
            width: 18px;
            height: 18px;
        }


    /* =========================================================
   Pagination
   ========================================================= */

    .product-image-slider .splide__pagination {
        bottom: 10px;
    }


    .product-image-slider .splide__pagination__page {
        width: 8px;
        height: 8px;
    }


    /* =========================================================
   Mobile
   ========================================================= */

    @media (max-width: 767px) {

        .product-image-modal {
            width: 100% !important;
            height: 100vh;
            max-width: none !important;
        }


            .product-image-modal > .content {
                padding: 40px 5px 20px !important;
            }


        .product-slider-image {
            max-width: calc(100vw - 20px);
            max-height: calc(100vh - 80px);
        }


        .product-image-slider .splide__arrow {
            width: 36px;
            height: 36px;
        }


        .product-image-slider .splide__arrow--prev {
            left: 5px;
        }


        .product-image-slider .splide__arrow--next {
            left: 5px;
        }


        .product-image-modal-close {
            top: 8px;
            right: 8px;
        }
    }

    .specs-sticky-menu,
    .specs-sticky-menu .ui.menu {
        background: var(--primary-color-300);
        border: none;
    }


        .specs-sticky-menu .ui.menu {
            display: flex;
            padding: 10px 0px;
            box-shadow: none;
        }

        .specs-sticky-menu .menu .item {
            flex: 1;
            margin-left: 10px;
            margin-right: 10px;
            font-family: estedad;
            font-weight: bold;
            justify-content: center;
        }

            .specs-sticky-menu .menu .item:not(.basic) {
                color: var(--primary-color-100);
            }

            .specs-sticky-menu .menu .item:before {
                background: none;
            }

            .specs-sticky-menu .menu .item:first-child {
                margin-right: 0px;
            }

            .specs-sticky-menu .menu .item:last-child {
                margin-left: 0px;
            }

    .measurment-helper {
        float: left;
        display: flex;
        align-items: center;
    }

        .measurment-helper img {
            border-radius: 0;
            margin-left: 5px;
        }

        .measurment-helper a {
            color: var(--primary-color-900);
            text-decoration: underline;
            margin-top: -5px;
            font-weight: bold;
        }

    .grid.sizes button {
        font-weight: bold !important;
    }

        .grid.sizes button i:not(.check) {
            width: 0 !important;
        }

    .specs-title,
    .specs-value {
        padding: .5rem 1rem !important;
    }

    .specs-title {
        font-weight: bold;
        border-left: 2px solid var(--primary-color-900);
    }

    .product-descriptions {
        padding-top: 30px;
        padding-bottom: 60px;
    }

        .product-descriptions:nth-child(2n+1) {
            background: #f5f5f5;
        }

    .product-descriptions {
        scroll-margin-top: 160px;
    }

    .specs-accordion {
    }

        .specs-accordion .title {
            background: var(--primary-color-100);
            color: var(--primary-color-900);
            padding: .5rem 1rem !important;
            border-radius: 20px;
            display: flex;
            margin-top: 10px;
            border: 1px solid var(--primary-color-300);
        }

            .specs-accordion .title.active {
                background: var(--primary-color-700);
                color: var(--primary-color-100) !important;
            }

            .specs-accordion .title span {
                flex: 1;
            }

    .variation-hint {
        font-style: italic;
        color: var(--primary-color-500);
    }

    .purchase-box-wrapper .purchase-box:not(.active) {
        display: none;
    }

    .purchase-button:not(.basic) {
        box-shadow: 0px 0px 16px -6px var(--primary-color-900) !important;
        background: linear-gradient(to right, var(--primary-color-500), var(--primary-color-700)) !important;
    }

.gradient-btn {
    position: relative;
    padding: 12px 28px;
    border: none;
    border-radius: 999px;
    background: #111;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 0;
    overflow: hidden;
}

    /* Animated gradient border */
    .gradient-btn::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        background: conic-gradient( from 0deg, #8aff82, #ff9646, #8aff82, #ff9646, #8aff82, #ff9646);
        animation: rotate-border 3s linear infinite;
        z-index: -1;
        height: 1100%;
        margin-top: -55%;
    }

    /* Cover the center so only the border remains */
    .gradient-btn::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: inherit;
        background: var(--primary-color-900);
        z-index: -1;
    }

@keyframes rotate-border {
    to {
        transform: rotate(360deg);
    }
}

    @media only screen and (max-width: 440px) {
        .purchase-button-wrapper {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100%;
            background: #FFF;
            padding: .5rem;
            box-shadow: 0px -1px 4px 0px var(--primary-color-900);
            z-index: 1;
        }
    }

    .product-colors.grid .column {
        padding: .3rem !important;
    }

        
        @media only screen and (max-width: 440px){
            .copy-right{
                padding-bottom: 80px;
            }
        }