/* Optimized CSS for Salla Platform */
.triangle-overlay:after {
    position: absolute;
    bottom: -50%;
    left: -50%;
    align-items: center;
    height: 0rem;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    content: "";
}
.main-nav-container .sides-wrap { 
    background-color: #81193B;
}
salla-slider.photos-slider .swiper-slide {
    position: relative;
    max-width: 100%;
    overflow: hidden;  
  align-items: center;
}
}
}
[dir="rtl"] .header-icon-button .icon {
    margin-left: 0rem;
    color: #fff;}
[dir="rtl"] .s-cart-summary-wrapper .s-cart-summary-total:before {
    content: "السلة";
    color: #fff;}
a {
    color: #81193b;}
.grid {
    display: grid;}
.humb {
    BACKGROUND-COLOR: #e5e7eb;
        border-radius: 0.375rem 6px;
}.sicon-shopping-bag:before {
    content: "\ef36";
    COLOR: #e5e7eb;}
    
    /* ✨ Comfort Enhancements for Salla Spice Shop ✨ */

// Smooth fade-in when scrolling
document.addEventListener("scroll", () => {
  const elements = document.querySelectorAll(".fade-in");
  const windowHeight = window.innerHeight;

  elements.forEach(el => {
    const position = el.getBoundingClientRect().top;
    if (position < windowHeight - 100) {
      el.classList.add("visible");
    }
  });
});

// Navbar color change on scroll
const navbar = document.querySelector(".main-nav-container");
window.addEventListener("scroll", () => {
  if (window.scrollY > 50) {
    navbar.style.backgroundColor = "#6b1533"; // slightly darker maroon
  } else {
    navbar.style.backgroundColor = "#81193B";
  }
});

// Add-to-cart pop animation
document.querySelectorAll(".add-to-cart, .btn-add-to-cart").forEach(button => {
  button.addEventListener("click", () => {
    button.classList.add("clicked");
    setTimeout(() => button.classList.remove("clicked"), 300);
  });
});

// Back-to-top button
const backToTop = document.createElement("button");
backToTop.innerText = "⬆";
backToTop.className = "back-to-top";
document.body.appendChild(backToTop);

window.addEventListener("scroll", () => {
  backToTop.style.display = window.scrollY > 400 ? "block" : "none";
});

backToTop.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});