/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

/*
 * ============================================================
 * WooCommerce Product Gallery - Thumbnail Dots
 * ============================================================
 */

/* Thumbnail navigation container */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Individual thumbnail */
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    position: relative !important;

    float: none !important;

    width: 12px !important;
    height: 12px !important;

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

    cursor: pointer !important;
}


/*
 * Keep WooCommerce thumbnail in the DOM.
 * It remains clickable, but is invisible.
 */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 12px !important;
    height: 12px !important;

    opacity: 0 !important;

    cursor: pointer !important;
}


/* ============================================================
 * DOT
 * ============================================================ */

.single-product .woocommerce-product-gallery .flex-control-thumbs li::before {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 9px !important;
    height: 9px !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    background-color: #d2d2d2 !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease !important;

    pointer-events: none !important;
}


/* ============================================================
 * ACTIVE DOT
 * ============================================================ */

.single-product .woocommerce-product-gallery
.flex-control-thumbs li.dot-active::before {

    background-color: #ff9f1c !important;

    transform: translate(-50%, -50%) scale(1.35) !important;
}


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

.single-product .woocommerce-product-gallery
.flex-control-thumbs li:hover::before {

    background-color: #777777 !important;

}


/* Active dot should remain orange on hover */
.single-product .woocommerce-product-gallery
.flex-control-thumbs li.dot-active:hover::before {

    background-color: #ff9f1c !important;

}


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

@media (max-width: 768px) {

    .single-product .woocommerce-product-gallery
    .flex-control-thumbs {

        gap: 7px !important;
        margin-top: 12px !important;

    }


    .single-product .woocommerce-product-gallery
    .flex-control-thumbs li {

        width: 11px !important;
        height: 11px !important;

    }


    .single-product .woocommerce-product-gallery
    .flex-control-thumbs li img {

        width: 11px !important;
        height: 11px !important;

    }


    .single-product .woocommerce-product-gallery
    .flex-control-thumbs li::before {

        width: 8px !important;
        height: 8px !important;

    }

}