/* ==========================================
   FLOMART PRODUCT CAROUSEL
   ========================================== */

.fpc-carousel-ready.wc-block-product-template {

    display: flex !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    gap: 16px !important;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding-bottom: 15px !important;

    cursor: grab;

    -webkit-user-select: none;

    user-select: none;

}


/* ==========================================
   HIDE SCROLLBAR
   ========================================== */

.fpc-carousel-ready.wc-block-product-template::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   PRODUCT
   ========================================== */

.fpc-carousel-ready.wc-block-product-template
.wc-block-product {

    flex: 0 0 calc((100% - 80px) / 6) !important;

    width: calc((100% - 80px) / 6) !important;

    max-width: none !important;

    margin: 0 !important;

    scroll-snap-align: start;

}


/* ==========================================
   IMAGE
   ========================================== */

.fpc-carousel-ready.wc-block-product-template img {

    -webkit-user-drag: none;

    user-select: none;

}


/* ==========================================
   DESKTOP DRAG
   ========================================== */

.fpc-carousel-ready.wc-block-product-template.fpc-is-dragging {

    cursor: grabbing;

    scroll-behavior: auto;

    scroll-snap-type: none;

}


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

@media (max-width: 1024px) {

    .fpc-carousel-ready.wc-block-product-template
    .wc-block-product {

        flex: 0 0 calc((100% - 48px) / 4) !important;

        width: calc((100% - 48px) / 4) !important;

    }

}


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

@media (max-width: 767px) {

    .fpc-carousel-ready.wc-block-product-template {

        gap: 12px !important;

        /*
         * Native mobile scrolling.
         *
         * Browser menangani touch sendiri.
         */

        touch-action: auto;

        /*
         * Swipe tidak terlalu terkunci.
         */

        scroll-snap-type: x proximity;

        /*
         * Jangan gunakan cursor grab
         * di touchscreen.
         */

        cursor: default;

        /*
         * Native iOS scrolling.
         */

        -webkit-overflow-scrolling: touch;

    }


    .fpc-carousel-ready.wc-block-product-template
    .wc-block-product {

        flex: 0 0 calc((100% - 12px) / 2) !important;

        width: calc((100% - 12px) / 2) !important;

    }

}


/* ==========================================
   WRAPPER
   ========================================== */

.fpc-carousel-wrapper {

    position: relative;

    width: 100%;

}


/* ==========================================
   BUTTON
   ========================================== */

.fpc-carousel-button {

    position: absolute;

    top: 42%;

    z-index: 20;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border-radius: 50%;

    border: 1px solid #e5e5e5;

    background: #ffffff;

    color: #0b7c84;

    cursor: pointer;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.12);

    transition:
        opacity .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

    appearance: none;

    -webkit-appearance: none;

}


/* ==========================================
   LEFT
   ========================================== */

.fpc-carousel-prev {

    left: -22px;

}


/* ==========================================
   RIGHT
   ========================================== */

.fpc-carousel-next {

    right: -22px;

}


/* ==========================================
   HOVER
   ========================================== */

.fpc-carousel-button:hover {

    transform: scale(1.08);

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.16);

}


/* ==========================================
   DISABLED
   ========================================== */

.fpc-carousel-button.is-disabled {

    opacity: 0;

    pointer-events: none;

}


/* ==========================================
   SVG
   ========================================== */

.fpc-carousel-button svg {

    width: 22px;

    height: 22px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    pointer-events: none;

}


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

@media (max-width: 767px) {

    .fpc-carousel-button {

        width: 38px;

        height: 38px;

    }

    .fpc-carousel-prev {

        left: -10px;

    }

    .fpc-carousel-next {

        right: -10px;

    }

}