/* ===== Category showcase (Ali) ===== */
/* Zero padding all round: the cards sit perfectly flush to the section edges.
   The head carries its OWN vertical spacing so the hairline still breathes
   without forcing padding onto the edge-to-edge card track. */
.cc_xqaduz1e_FmH1GxpoX7 .ali-cats {
  padding: 0;
}

/* Head: a centered hairline rule (as in the reference) + optional title. */
.cc_xqaduz1e_FmH1GxpoX7 .ali-cats__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(32px, 6vw, 72px) 24px clamp(28px, 4vw, 48px);
  text-align: center;
}
.cc_xqaduz1e_FmH1GxpoX7 .ali-cats__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.cc_xqaduz1e_FmH1GxpoX7 .ali-cats__title {
  margin: 0;
}

/* Track: equal columns on desktop, edge-to-edge with no gap so the cards sit
   shoulder-to-shoulder (as in the reference).
   IkasComponentRenderer wraps the list in a single `display:contents` element,
   so the rendered CategoryCards become the track's real grid items (a `> *`
   flex rule would only ever hit the contents wrapper, never the cards — that
   left a dead gap on the right). A grid with equal auto-columns sizes every
   card to 1fr regardless of how many the merchant adds, with no leftover space. */
.cc_xqaduz1e_FmH1GxpoX7 .ali-cats__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cc_xqaduz1e_FmH1GxpoX7 .ali-cats__track::-webkit-scrollbar {
  display: none;
}

/* Mobile: EXACTLY 1.5 cards visible (100% / 1.5) so the next peeks in halfway,
   swipeable with scroll-snap. */
@media (max-width: 767px) {
  .cc_xqaduz1e_FmH1GxpoX7 .ali-cats__track {
    grid-auto-columns: calc(100% / 1.5);
    scroll-snap-type: x mandatory;
  }
  /* The cards sit under the renderer's display:contents wrapper, so snap-align
     must be applied a level down to land on the real scroll items. */
  .cc_xqaduz1e_FmH1GxpoX7 .ali-cats__track > *, .cc_xqaduz1e_FmH1GxpoX7 .ali-cats__track > * > * {
    scroll-snap-align: start;
  }
}