/* =========================================================
   DYNAMIC BEST SELLERS
   FUNCTIONALITY ADDITIONS ONLY
========================================================= */


/* =========================================================
   DESKTOP HORIZONTAL SCROLL

   Visually still shows the same 6 cards.
========================================================= */

.lp-bestsellers-section
.lp-products-grid {

    grid-template-columns:
        none;

    grid-auto-flow:
        column;

    grid-auto-columns:
        calc(
            (
                100%
                -
                85px
            )
            /
            6
        );

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:
        none;

    overscroll-behavior-inline:
        contain;
}


.lp-bestsellers-section
.lp-products-grid::-webkit-scrollbar {

    display:
        none;
}


.lp-bestsellers-section
.lp-product-card {

    scroll-snap-align:
        start;
}



/* =========================================================
   IMAGE HOVER EYE
========================================================= */

.lp-bs-product-eye {

    width:
        44px;

    height:
        44px;

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(
            -50%,
            -42%
        )
        scale(
            0.88
        );

    border:
        1px solid
        rgba(
            11,
            75,
            49,
            0.10
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.12
        );

    color:
        var(--lp-green);

    opacity:
        0;

    visibility:
        hidden;

    text-decoration:
        none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.lp-bs-product-eye svg {

    width:
        21px;

    height:
        21px;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.lp-product-card:hover
.lp-bs-product-eye,

.lp-bs-product-eye:focus-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            1
        );
}


.lp-bs-product-eye:hover {

    background:
        var(--lp-green);

    color:
        #ffffff;
}



/* =========================================================
   VIEW CART BUTTON
========================================================= */

.lp-bs-view-cart {

    gap:
        6px;
}


.lp-bs-view-cart svg {

    width:
        17px;

    height:
        17px;

    flex:
        0 0 17px;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.lp-bs-view-cart span {

    pointer-events:
        none;
}



/* =========================================================
   LAPTOP
========================================================= */

@media (
    max-width: 1200px
) {

    .lp-bestsellers-section
    .lp-products-grid {

        grid-auto-columns:
            calc(
                (
                    100%
                    -
                    60px
                )
                /
                6
            );
    }

}



/* =========================================================
   TABLET

   Preserve your existing fixed card widths.
========================================================= */

@media (
    max-width: 900px
) {

    .lp-bestsellers-section
    .lp-products-grid {

        display:
            flex;

        grid-auto-flow:
            initial;

        grid-auto-columns:
            initial;
    }


    .lp-bs-product-eye {

        width:
            40px;

        height:
            40px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .lp-bs-product-eye {

        width:
            37px;

        height:
            37px;
    }


    .lp-bs-product-eye svg {

        width:
            19px;

        height:
            19px;
    }

}



/* =========================================================
   TOUCH DEVICES

   No hover is available, so keep eye accessible.
========================================================= */

@media (
    hover: none
) {

    .lp-bs-product-eye {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                1
            );
    }

}