/*styles from customizer*/
/* Mihai START added 06.02.2025 ( Milan Petrović upwork )- page speed optimizations */
.woocommerce-product-gallery {
    opacity: 1 !important;
}
.woocommerce-product-gallery-thumbnails__wrapper {
    content-visibility: hidden;
}
.flex-viewport .woocommerce-product-gallery-thumbnails__wrapper {
    content-visibility: auto;
}
@media only screen and (max-width: 768px) {
    .woocommerce-product-gallery-thumbnails__wrapper {
        max-height: calc((100vw - 70px) / 4);
    }
    .woocommerce-product-gallery,
    .flex-viewport
    .woocommerce-product-gallery__image {
        max-width: calc(100vw - 40px);
    }
}
.woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image:not(:first-child),
div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    display: none;
}
/* Mihai end */


.woocommerce-js div.product div.images img{
    width: 100%;
}
.woocommerce-js div.product div.images .flex-active-slide a{
    height: 100%!important;
}

.woocommerce-js .woocommerce-result-count{
    display: none;
}

.di-tabs {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 50px;
}

.di-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid black;
    overflow: visible;
    font-size: 23px;
    font-weight: bold;
    color: #121212;
    background-color: #ffffff;
}

.di-tab.active{
    color: #F391C2;
}

.di-tab::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 5;
    height: 5px;
    width: 0;
    background-color: #F391C2;
    transition: width 0.4s ease-in-out;
}

.di-tab.active::before,
.di-tab.passed::before {
    width: 100%;
}

.di-tab.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scale(0); /* Începe de la 0 */
    width: 16px;
    height: 16px;
    background-color: #F391C2; /* Circle color */
    border-radius: 50%;
    animation: growCircle 0.4s ease-in-out forwards; /* Animația cercului */
}

.di-tab.passed {
    border-color: transparent; /* Ascundem bordura neagră */
}

/* Definim animația pentru cerc */
@keyframes growCircle {
    0% {
        transform: translateX(-50%) scale(0); /* Cercul este invizibil */
    }
    50% {
        transform: translateX(-50%) scale(1.2); /* Cercul crește ușor mai mare */
    }
    100% {
        transform: translateX(-50%) scale(1); /* Cercul ajunge la dimensiunea finală */
    }
}

.di-tab-content .di-tab-pane {
    display: none;
}
.di-tab-content .di-tab-pane.active {
    display: block;
}

.di-tab-pane h2{
    font-size: 22px;
}

.di-tab-pane h3{
    font-size: 18px;
}

@media(max-width: 768px){
    .di-tab{
        font-size: 16px;
    }
}
@media(max-width: 520px){
    .di-tab{
        font-size: 14px;
    }
}

.filter-option >.facet-wrap{
    width: 100%;
}

/*Out of stock*/

.woocommerce-js div.product .out-of-stock{
    color: #E55236;
}

.woocommerce-js div.product .out-of-stock:before{
    content:url('/wp-content/themes/astra-child-skinguru24/assets/images/out-of-stock.svg');
    width: 20px;
    height: 20px;
}
/*
  This CSS hides the "Add to Cart" button on product grids displayed
  specifically on the homepage. It targets both WooCommerce Blocks
  and the default WooCommerce product grid used by the Astra theme.
*/
.home .wc-block-grid__product .wp-block-button,
.home .woocommerce ul.products li.product .button {
    display: none !important;
}