/* Homepage merchandising: keep the four popular ingredients in one touch-friendly track. */
.popular-ingredients-section .section-body {
  width: 100%;
  min-width: 0;
}

.popular-ingredients-section .ingredients-section {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.25rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* The Webflow export separates the main and secondary cards into two lists.
   Flatten those wrappers so all four cards share one horizontal scroll track. */
.popular-ingredients-section .ingredients-section > .w-dyn-list,
.popular-ingredients-section .ingredients-section .ingredients-list {
  display: contents;
}

.popular-ingredients-section .ingredients-section .w-dyn-item {
  flex: 0 0 clamp(280px, 31vw, 380px);
  min-width: 0;
  scroll-snap-align: start;
}

.popular-ingredients-section .ingredients-section .w-dyn-empty {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .popular-ingredients-section .ingredients-section {
    gap: 1.25rem;
  }

  .popular-ingredients-section .ingredients-section .w-dyn-item {
    flex-basis: min(76vw, 340px);
  }
}