/*-- The root styles must go in the element of the structure with the name "Product price". --*/

.card-product-5__price{

  /*-- Styles applied to the "price" class that don't have a child element with the "del" tag, in this way, you can give styles to the regular price without applying to those with sale prices. --*/
  .price:not(:has(del)) bdi {
    color: var(--dark);
    font-weight: 700;
  }
}

/* ---- ADDITIONAL INFORMATION FOR SALE TAG ----

- The element in the "Sale container" structure, which is the sale tag, needs to have a "Dynamic data" condition added, and the dynamic data field should be "" and not equal (!=). This way, the tag will only be displayed when it has a sale price.

- */

document.addEventListener('DOMContentLoaded', (event) => {
  setTimeout(() => {
    
    // Get full slider class ID (change if you have changed it manually)
  const idComplete = document.querySelector(".product-5__slider");
    // Obtaining the required object ID for the const mySlider
	const idSlider = idComplete.getAttribute('data-script-id');
    
    const mySlider = window.bricksData?.splideInstances[idSlider] || false
    
    // Please replace the button classes to suit your scenario
    const myPrevBtn = document.querySelector('.product-5__arrow-left')
    const myNextBtn = document.querySelector('.product-5__arrow-right')

    if (mySlider && myPrevBtn && myNextBtn) {
      
      // Add click event handlers for your custom buttons
      myPrevBtn.addEventListener('click', function () {
        mySlider.go('-1') // go() function by SplideJS
      })
      myNextBtn.addEventListener('click', function () {
        mySlider.go('+1') // go() function by SplideJS
      })
    }
  }, 250)
})