/* Embla Carousel Styles */
.embla {
  overflow: hidden;
  padding-top: clamp(12px, 2vh, 24px);
  padding-bottom: clamp(40px, 7vh, 65px);
  height: 100%;
  width: 100%;
  --gap: clamp(12px, 3vw, 24px);
}

.embla__container {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.embla__slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  /* Remove transition from base slide to prevent flying */
  transition: none;
  flex: 0 0 auto;
  width: calc((100% - (2 * var(--gap)))/3);
  min-width: 0;
}

.embla__slide:not(.is-selected) a {
  pointer-events: none;
}

.embla__slide a {
  text-decoration: none;
}

.embla__slide a:hover,
.embla__slide a:focus {
  text-decoration: none;
}

.product {
  position: relative;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product h2 {
  font-family: 'Raleway';
  font-weight: 600;
  font-size: clamp(22px, 4vw, 48px);
  color: #242F31;
  letter-spacing: -1.5px;
  margin-top: 0;
  transition: font-size 0.3s ease;
  position: relative;
  z-index: 99;
}

.product .main-img {
  position: relative;
  z-index: 9;
  max-height: clamp(320px, 48vh, 720px);
  border-radius: 12px;
  transition: max-height 0.45s cubic-bezier(.22,.61,.36,1), transform 0.45s cubic-bezier(.22,.61,.36,1), margin-bottom 0.3s ease;
  will-change: transform;
  margin-bottom: clamp(16px, 3vh, 28px);
}

.embla__slide.is-selected {
  /* Add smooth transition only to selected slide */
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.embla__slide.is-selected .main-img {
  max-height: 50vh;
  transform: scale(1.15);
  margin-bottom: clamp(28px, 5vh, 48px);
}

.buy-btn {
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 20px);
  background: #000;
  color: #fff;
  padding: 10px 65px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
  z-index: 9;
}

.buy-btn {
  text-decoration: none;
}

.buy-btn:hover {
  background: #444;
}

.tomato-btn {
  background-color: #B61E2A;
}

.bbq-btn {
  background-color: #5A3532;
}

.mayo-btn {
  background-color: #00A6DD;
}

.white-text {
  color: #000;
  transition: color 0.3s ease;
}

.active-white .white-text {
  color: #fff;
}

.active-white .product h2 {
  color: #fff;
}

/* Responsive styles */
@media (max-width: 768px) {
  .embla {
    --gap: 8px; /* Reduced gap for mobile */
  }
  
  .embla__container {
    gap: var(--gap);
    display: flex; /* Keep horizontal layout */
    padding-top: 0; /* Remove top padding */
  }
  
  .embla__slide {
    width: 85%; /* Show mostly one slide with peek of next */
    flex: 0 0 auto; /* Prevent shrinking */
  }
  
  .buy-btn {
    padding: 8px 18px;
  }
}

@media (max-width: 480px) {
  .embla__slide {
    width: 90%; /* Show even more of single slide on smaller screens */
  }
  
  .product h2 {
    font-size: clamp(18px, 5vw, 32px); /* Smaller text for mobile */
  }
  
  .product .main-img {
    max-height: clamp(250px, 35vh, 400px); /* Smaller images on mobile */
  }

  .embla__slide.is-selected .main-img {
    max-height: 60vh;
  }
}

/* Scale effects for adjacent slides - disabled to prevent scaling */
.embla__slide:not(.is-selected) {
  transform: scale(.95);
  /* Remove scaling to prevent visual flying */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .embla__slide:not(.is-selected) {
    transform: scale(1); /* No scaling on mobile to prevent visual issues */
  }
  
  .embla__slide.is-selected {
    transform: scale(1); /* Center slide normal size on mobile */
  }
}

@media (max-width: 480px) {
  .embla__slide:not(.is-selected) {
    transform: scale(0.92); /* Even less scaling on very small screens */
  }
}

/* Navigation buttons - transparent overlay style */
.embla__button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.33%; /* 1/3 of screen width */
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.embla__button--prev {
  left: 0;
}

.embla__button--next {
  right: 0;
}

.embla__button--next:hover,
.embla__button--next:focus {
  background-color: transparent;
}

/* Add hover effect for prev button */
.embla__button--prev:hover,
.embla__button--prev:focus {
  background-color: transparent;
}

.embla {
  position: relative;
}

/* Responsive navigation buttons */
@media (max-width: 768px) {
  .embla__button {
    width: 25%; /* Reduced width for mobile to show more slide content */
  }
}

@media (max-width: 480px) {
  .embla__button {
    width: 20%; /* Even smaller on very small screens */
  }
}