Jossy

/* -- The root styles must go in the element of the structure with the name "Single product"(Section). --*/

/* -- Border radius to the main photo of the gallery -- */
.single-product-4__gallery{
  .flex-viewport, .woocommerce-product-gallery__image{
    border-radius: var(--radius-m);
  }
}

.single-product-4__add-cart{
  /* Styles for when the product is sold individually */
  &:has(.input-text[type="hidden"]){
    .woocommerce-variation-add-to-cart, .cart{
      flex-direction: column;
    }
  }

  /*-- Styles applied to the container containing the quantity form and the button may vary depending on whether it has variations or not. --*/
  .variations_button, .cart:not(:has(.variations_button)){
    display:flex;
    gap: var(--space-xs);

    /*-- Button styles "Add to cart" --*/
    .button{
      margin-top:0;
      flex: 1;
    }

    /*-- Mobile Styles --*/
    @media(max-width: 766px){
      flex-direction:column;
    }
  }

  /*- Border radius styles in quantity input -*/
  .quantity{
    .action.minus{
      border-radius: var(--radius-s) 0 0  var(--radius-s);
    }

    .action.plus{
      border-radius: 0  var(--radius-s)  var(--radius-s) 0;
    }
  }
}

/* The purpose of the script is to have the aria-expanded and aria-controls attributes for web accessibility. 
 You can remove this script and the accordion will still work. */
const btnFaq = document.querySelectorAll('.single-product-4__accordion-heading');
const contentFaq = document.querySelectorAll('.single-product-4__accordion-description');

btnFaq.forEach((button) => {
  button.addEventListener('click', () => {
    // Gets the current state of the button
    const isExpanded = button.getAttribute('aria-expanded') === 'true';

    // Reset all buttons to "false".
    btnFaq.forEach((currentBtn) => {
      currentBtn.setAttribute('aria-expanded', 'false');
    });

    // Changes the status of the current button
    button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
  });
});

// Load function after HTML content is loaded
document.addEventListener('DOMContentLoaded', function () {
  // Make a tour on each button there is
  btnFaq.forEach((button, i) => {
    const contentId = contentFaq[i].getAttribute('id');
    button.setAttribute('aria-controls', contentId);
  });
});