/* Customize Sale Badge */
.woocommerce span.onsale {
    background-color: #78C043
}

/* Change Product Price Color in All WooCommerce Pages */
.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product .woocommerce-Price-amount {
    color: #78C043 !important; /* Set to your green color */
}

/* Change Category Page Product Price */
.woocommerce ul.products li.product .price {
    color: #78C043 !important;
}

/* Change the border color of WooCommerce buttons to match price color */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit, 
.woocommerce .woocommerce-Button {
    border: 2px solid #78C043 !important; /* Change border color */
    background-color: transparent !important; /* Keeps the background transparent */
    color: #78C043 !important; /* Sets text color */
}

/* Change the border color of the sorting dropdown */
.woocommerce .woocommerce-ordering select {
    border: 2px solid #78C043 !important;
}

/* Change the sale badge to be fully filled with #78C043 and text in white */
.woocommerce span.onsale {
    background-color: #78C043 !important; /* Full green background */
    color: #FFFFFF !important; /* White text */
    border-radius: 50px !important; /* Keeps the rounded shape */
    padding: 5px 12px !important; /* Adjust padding for better appearance */
    font-weight: bold !important; /* Make text bold */
    font-size: 14px !important; /* Adjust font size */
}

/* Change the border color of category page product prices */
.woocommerce ul.products li.product .price {
    color: #78C043 !important;
}

/* Force Woo tabs/accordion to be visible on mobile */
@media (max-width: 767px){
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce-tabs.wc-tabs-wrapper { display:block !important; visibility:visible !important; }

  /* Make the tab list scrollable instead of disappearing */
  .woocommerce div.product .woocommerce-tabs .wc-tabs { 
    display:flex !important; gap: .5rem; overflow:auto;
  }

  /* If the JS that toggles panels doesn't run, just show the content */
  .woocommerce div.product .woocommerce-tabs .panel,
  .woocommerce-Tabs-panel { display:block !important; opacity:1 !important; height:auto !important; }
}
@media (max-width: 767px){
  .woocommerce-Tabs-panel { display:none !important; }
  #tab-description.woocommerce-Tabs-panel { display:block !important; }
}