@layer vendor {
  .block--facets {
    .facetwp-facet {
      margin: 0;
    }
  }

  .block--overview {
    --overview-type: auto-fill;

    .facetwp-template-static,
    .facetwp-template {
      display: grid;
      gap: var(--overview-gap, var(--space-4));
      grid-template-columns: repeat(var(--overview-type), minmax(min(var(--overview-item-size), 100%), 1fr));
    }

    &.auto-fit {
      --overview-type: auto-fit;
    }

    &.scrollable {
      .block-overview__items {
        overflow-x: auto;
        position: relative;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        /* Better touch scrolling on iOS */
        -webkit-overflow-scrolling: touch;

        /* Prevent momentum scrolling from overshooting */
        overscroll-behavior-x: contain;

        .facetwp-template-static,
        .facetwp-template {
          grid-template-rows: 1fr;
          overflow-x: visible;
          width: max-content;
        }
      }

      .facetwp-template > *,
      .facetwp-template-static > * {
        scroll-snap-align: center;
        scroll-snap-stop: normal;
      }
    }
  }
}