Untitled

{% style %}
.my-treasure-faq {
  max-width: 100%;
  margin: 30px auto;
  font-family: 'Montserrat', sans-serif;
  background-color: #fff5f0;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.my-treasure-faq__heading {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #000;
  position: relative;
  padding-bottom: 12px;
}

.my-treasure-faq__heading:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #f5a623, #f26e91);
  border-radius: 3px;
}

.my-treasure-faq__item {
  border-bottom: 1px solid rgba(242, 110, 145, 0.1);
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
}

.my-treasure-faq__item:hover {
  box-shadow: 0 2px 8px rgba(242, 110, 145, 0.1);
}

.my-treasure-faq__item--active {
  box-shadow: 0 4px 12px rgba(242, 110, 145, 0.15);
  border-left: 3px solid #f26e91;
}

.my-treasure-faq__question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 20px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  transition: all 0.3s ease;
}

.my-treasure-faq__question:hover {
  color: #f26e91;
}

.my-treasure-faq__item--active .my-treasure-faq__question {
  color: #f26e91;
}

.my-treasure-faq__question:focus {
  outline: none;
}

.my-treasure-faq__icon {
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform 0.4s ease;
}

.my-treasure-faq__icon:before,
.my-treasure-faq__icon:after {
  content: '';
  position: absolute;
  background-color: #f26e91;
  transition: all 0.3s ease;
}

.my-treasure-faq__icon:before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

.my-treasure-faq__icon:after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

.my-treasure-faq__item--active .my-treasure-faq__icon:after {
  transform: rotate(90deg);
  opacity: 0;
}

.my-treasure-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.44, 0.185, 0.575, 0.855), 
              padding 0.3s ease,
              opacity 0.3s ease;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  opacity: 0;
  padding: 0 20px;
}

.my-treasure-faq__item--active .my-treasure-faq__answer {
  max-height: 300px;
  padding: 0 20px 20px 20px;
  opacity: 1;
}

.my-treasure-faq__highlight {
  font-weight: 500;
  color: #f26e91;
  position: relative;
  display: inline-block;
}

.my-treasure-faq__highlight:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(242, 110, 145, 0.2));
  border-radius: 3px;
  z-index: -1;
}
{% endstyle %}

<div class="my-treasure-faq">
  <h2 class="my-treasure-faq__heading">Why Choose MyLove MyTreasure?</h2>
  
  <div class="my-treasure-faq__container">
    <div class="my-treasure-faq__item">
      <button class="my-treasure-faq__question" aria-expanded="false">
        What makes your jewelry non-tarnish?
        <span class="my-treasure-faq__icon"></span>
      </button>
      <div class="my-treasure-faq__answer">
        <p>Our pieces are made from premium stainless steel and coated with PVD 18k gold plating—the same technology used in high-end jewelry. It's built to last through sweat, water, and daily wear without fading.</p>
        <p>
          <span class="my-treasure-faq__highlight">We even include a lifetime color warranty—yes, it's that serious.</span>
        </p>
      </div>
    </div>
    
    <div class="my-treasure-faq__item">
      <button class="my-treasure-faq__question" aria-expanded="false">
        Can I shower, swim, or work out in it?
        <span class="my-treasure-faq__icon"></span>
      </button>
      <div class="my-treasure-faq__answer">
        <p>Yes! Every piece is waterproof, ocean-proof, and gym-proof.</p>
        <p>Wear it in the shower, pool, or sauna—our jewelry is made for your lifestyle.</p>
        <p>
          <span class="my-treasure-faq__highlight">You never have to take it off. Ever.</span>
        </p>
      </div>
    </div>
    
    <div class="my-treasure-faq__item">
      <button class="my-treasure-faq__question" aria-expanded="false">
        Will it irritate my skin?
        <span class="my-treasure-faq__icon"></span>
      </button>
      <div class="my-treasure-faq__answer">
        <p>Nope. All our pieces are hypoallergenic and nickel-free, so they're safe for even the most sensitive skin.</p>
        <p>
          <span class="my-treasure-faq__highlight">No green fingers, no itching—just daily glow.</span>
        </p>
      </div>
    </div>
    
    <div class="my-treasure-faq__item">
      <button class="my-treasure-faq__question" aria-expanded="false">
        What if I don't like it or pick the wrong size?
        <span class="my-treasure-faq__icon"></span>
      </button>
      <div class="my-treasure-faq__answer">
        <p>No stress—you're covered. We offer 30-day easy returns and most rings are adjustable or come in multiple sizes.</p>
        <p>
          <span class="my-treasure-faq__highlight">Plus, our team is here to help you get the perfect fit.</span>
        </p>
      </div>
    </div>
    
    <div class="my-treasure-faq__item">
      <button class="my-treasure-faq__question" aria-expanded="false">
        Why is this such a good deal?
        <span class="my-treasure-faq__icon"></span>
      </button>
      <div class="my-treasure-faq__answer">
        <p>Instead of charging €30 per piece like other brands, we let you build your own bundle of 5 for just €59,95. That's only €12 per piece, with premium quality.</p>
        <p>
          <span class="my-treasure-faq__highlight">Real gold glow. Not real gold prices.</span>
        </p>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const questions = document.querySelectorAll('.my-treasure-faq__question');
    
    questions.forEach(question => {
      question.addEventListener('click', function() {
        const item = this.parentElement;
        const isActive = item.classList.contains('my-treasure-faq__item--active');
        
        // Close all items with animation
        document.querySelectorAll('.my-treasure-faq__item').forEach(el => {
          el.classList.remove('my-treasure-faq__item--active');
          el.querySelector('.my-treasure-faq__question').setAttribute('aria-expanded', 'false');
        });
        
        // If the clicked item wasn't active, open it
        if (!isActive) {
          item.classList.add('my-treasure-faq__item--active');
          this.setAttribute('aria-expanded', 'true');
          
          // Smooth scroll to this item if it's not in view
          setTimeout(() => {
            const rect = item.getBoundingClientRect();
            const isInView = (
              rect.top >= 0 &&
              rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
            );
            
            if (!isInView) {
              item.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest'
              });
            }
          }, 300);
        }
      });
    });
    
    // Open first item by default
    if (questions.length > 0) {
      const firstItem = questions[0].parentElement;
      firstItem.classList.add('my-treasure-faq__item--active');
      questions[0].setAttribute('aria-expanded', 'true');
    }
  });
</script>