/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 25 2026 | 08:35:05 */
/* =========================================
   UKURAN GAMBAR SINGLE PRODUCT
========================================= */

/* DESKTOP */
@media (min-width: 1025px) {

    .single-product .woocommerce-product-gallery,
    .single-product .images {
        transform: scale(0.68);
        transform-origin: top left;
    }

}

/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {

    .single-product .woocommerce-product-gallery,
    .single-product .images {
        transform: scale(0.82);
        transform-origin: top center;
    }

}

/* MOBILE BESAR */
@media (min-width: 481px) and (max-width: 767px) {

    .single-product .woocommerce-product-gallery,
    .single-product .images {
        transform: scale(0.83);
        transform-origin: top center;
    }

}

/* MOBILE KECIL */
@media (max-width: 480px) {

    .single-product .woocommerce-product-gallery,
    .single-product .images {
        transform: scale(0.76);
        transform-origin: top center;
    }

}





/* =========================================
   THUMBNAIL SLIDER
========================================= */

/* wrapper */
.thumbs-outer-wrapper {

    position: relative;
    width: 100%;

    box-sizing: border-box;
}

/* strip thumbnail */
.single-product .flex-control-nav.flex-control-thumbs {

    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scroll-behavior: smooth;

    scrollbar-width: none;

    list-style: none;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box;
}

/* hide scrollbar */
.single-product .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

/* image */
.single-product .flex-control-nav.flex-control-thumbs img {

    width: 100% !important;
    height: auto !important;

    display: block;

    border-radius: 6px;
}





/* =========================================
   DESKTOP + TABLET
   4 THUMBNAIL BESAR
========================================= */
@media (min-width: 768px) {

    /* wrapper */
    .thumbs-outer-wrapper {
        padding: 0 28px;
    }

    /* strip */
    .single-product .flex-control-nav.flex-control-thumbs {

        gap: 8px;

        margin-top: 18px !important;
    }

    /* thumbnail */
    .single-product .flex-control-nav.flex-control-thumbs li {

        flex: 0 0 calc((100% - 24px) / 4) !important;
        max-width: calc((100% - 24px) / 4) !important;

        margin: 0 !important;
    }

    /* panah */
    .thumb-arrow {

        width: 26px;
        height: 26px;

        font-size: 16px;
    }

}





/* =========================================
   MOBILE
   4 THUMBNAIL
========================================= */
@media (max-width: 767px) {

    .thumbs-outer-wrapper {
        padding: 0 36px;
    }

    .single-product .flex-control-nav.flex-control-thumbs {

        gap: 10px;

        margin-top: 14px !important;
    }

    .single-product .flex-control-nav.flex-control-thumbs li {

        flex: 0 0 calc((100% - 30px) / 4) !important;
        max-width: calc((100% - 30px) / 4) !important;

        margin: 0 !important;
    }

}





/* =========================================
   PANAH
========================================= */

.thumb-arrow {

    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    z-index: 999;

    width: 30px;
    height: 30px;

    border: none;
    border-radius: 50%;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    font-size: 18px;
    font-weight: bold;
}

/* kiri */
.thumb-prev {
    left: 0;
}

/* kanan */
.thumb-next {
    right: 0;
}