.products-catalog {
  padding: clamp(3.5rem, 2.95rem + 2.75vw, 6.25rem) 0 3.125rem 0;
}

.products-coffee-machine {
  padding-block: clamp(3.5rem, 2.95rem + 2.75vw, 6.25rem);
}

.products-capsules {
  padding-block: clamp(4.625rem, 4.35rem + 1.375vw, 6.25rem);
}

.products-capsules .section-title::after {
  left: var(--container-gutter);
  width: calc(100% + var(--space-s) - var(--container-gutter));
}

.products-coffee-machine__list,
.products-capsules__list {
  display: flex;
  gap: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
  padding-inline: var(--container-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: stretch;
}

.products-coffee-machine__list::-webkit-scrollbar,
.products-capsules__list::-webkit-scrollbar {
  display: none;
}

.products-coffee-machine__list .product-card,
.products-capsules__list .product-card {
  scroll-snap-align: center;
  flex: 0 0 calc(100% - var(--container-gutter) * 2 - var(--space-m));
  max-width: 350px;
}

.products-capsules__realted-products {
  padding-block: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.product-item {
  height: 100%;
}

.card-capsules .product-card__order {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.card-capsules .product-card__plus {
  border-right: 2px solid var(--color-primary);
}

.products-catalog__title {
  font-family: var(--font-heading-semibold);
  font-size: clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
  line-height: 105%;
}

.products-catalog__list {
  /**
   * User input values.
   */
  --grid-layout-gap: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
  --grid-column-count: 4;
  --grid-item--min-width: 280px;

  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );

  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
}

/* Поріг = 4 картки по 350px (max) + 3 gap (max 24px) + 2 container-gutter (max 30px)
   = 1400 + 72 + 60 = 1532px — мінімальна ширина, де 4 картки гарантовано влазять
   в один ряд без слайдера. */
@media (min-width: 1532px) {
  .products-coffee-machine__list,
  .products-capsules__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    padding-inline: var(--container-gutter);
  }
  .products-coffee-machine__list .product-card,
  .products-capsules__list .product-card {
    max-width: none;
  }
}