:root{
    --primary: #21D5A1;
    --secondary: #0F78C4; 
}

/* Product grid image */
.woocommerce ul.products li.product a img, #productGrid .woocommerce ul.products li.product a img{
    width: 100% !important;
    height: 180px !important;
    display: block !important;
    margin: 0 0 1em !important;
    object-fit: cover !important;
    box-shadow: none !important;
}
#productGrid .woocommerce ul.products li.product a img{
    height: 250px !important;
    object-fit: contain !important;

}
/* Single product */
.woocommerce .related ul.products li.product a img, .woocommerce .upsells ul.products li.product a img{
    height: 250px !important;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
    color: var(--secondary) !important;
}

/* Products archive filter and order */
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active > a, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active > label > a {
    color:var(--primary) !important;
}
.filter-title{
    font-weight: 600;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > a:hover, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > label > a:hover, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > a:hover, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > label > a:active {
    color: var(--primary) !important;
}
.term-label.tooltip-added span{
    display: none !important;
}

.woocommerce-ordering .orderby{
    padding: .5rem 1rem !important;
}
/* Mobile menu dropdown buttons */
.eael-simple-menu-container .eael-simple-menu .eael-simple-menu-indicator {
    height: 45px !important;
    width: 45px !important;
}
/* Esto checkout logos */
.esto-pay-logos-layout-columns-1 .esto-pay-logo{
    flex: unset !important;
}
    @media (max-width: 768px) {
        .esto-pay-logos-layout-columns-1 .esto-pay-logo{
        width: 45%;
    }
    .esto-pay-logo {
        padding: 5px !important;
    }
    .wc_payment_method.payment_method_esto_x{
        display: flex;
    }
    .wc_payment_method {
        margin-block: 5px !important;
    }
    .woocommerce-checkout-payment label{
        line-height: 2;
    }
}

/* Checkout button */
button[name="woocommerce_checkout_place_order"] {
  background-color: var(--primary) !important;
  color: #fff;
}
/* Billing fields  */
.woocommerce-billing-fields__field-wrapper input, .woocommerce-additional-fields textarea{
    border: unset !important;
}
/* Hide recaptcha banner */
.grecaptcha-badge{
    display: none !important;
}
/* Side cart icon color */
.xoo-wsc-sc-bki{
    color: var(--primary) !important;
}
.xoo-wsc-sc-count {
    background-color: #f7f7f7 !important;
    color: #333 !important;
}

/* Fixing the issue when using ajax filtering and result is appearing extra arrow to menu. Removing unnecessary */
/* Only show the first sub-arrow for all menu items with submenus */
.elementor-item.has-submenu .sub-arrow,
.elementor-sub-item.has-submenu .sub-arrow {
    display: none; /* hide all by default */
}

.elementor-item.has-submenu .sub-arrow:first-child,
.elementor-sub-item.has-submenu .sub-arrow:first-child {
    display: inline-block; /* show only the first one */
}

/* Images flag shortcode for events */
.event-images-shortcode{
    display: flex;
    flex-direction: column;
}
.event-image{
    max-width: 35px !important;  
    margin: 1px;
}
@media (max-width: 768px) {
        .event-images-shortcode{
        flex-direction: row;
        gap: 5px;
    }
}
.advent-styles{
    background-color: var(--primary);
    border-radius: 5px !important;
}
.locked, .disabled {
pointer-events: none;
  opacity: 0.5;
  filter: grayscale(50%);
  position: relative;
}

.locked::after {
  content: "🔒";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1em;
  opacity: 0.8;
}
.unlocked{
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
               0 8px 10px -6px rgb(0 0 0 / 0.1) !important; 
}
@media (max-width: 768px) {
    .locked::after{
        top: 5px;
        right:5px;
    }
}