/* Generic carousel wrapper */
.am-carousel {
  position: relative;
  /* Use the block gap as a base spacing value. Falls back to 1rem if unset. */
  --am-gap: var(--wp--style--block-gap, 1rem);
}

/* The product list or query loop becomes a horizontal track */
.am-carousel .am-track {
  display: flex !important;
  gap: var(--am-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .25rem; /* breathing room for focus rings */
}

/* Four columns on large screens; adjust for medium and small */
.am-carousel .am-track > * {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--am-gap) * 3)) / 4);
}
@media (max-width: 1024px) {
  .am-carousel .am-track > * {
    flex-basis: calc((100% - var(--am-gap)) / 2);
  }
}
@media (max-width: 640px) {
  .am-carousel .am-track > * {
    flex-basis: 100%;
  }
}

/* Make each item stretch to fill the card height */
.am-carousel li,
.am-carousel .wp-block-woocommerce-product-template {
  height: 100%;
}

/* Navigation arrow container overlays the carousel */
.am-carousel-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* allow slide swipes and clicks through */
}
.am-carousel-nav .wp-block-button {
  pointer-events: auto; /* make buttons clickable */
}

/* Style the arrow links */
.am-carousel-nav .wp-block-button__link {
  line-height: 1;
  font-size: 24px;
  text-decoration: none;
}

/* Hide nav when there are too few items */
.am-carousel.am-no-nav .am-carousel-nav {
  display: none;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .am-carousel .am-track {
    scroll-behavior: auto;
  }
}