.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc {
  width: 100%;
}

.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__container {
  /* Less space above than below — pulls the title closer to the section
     above (Bestsellers) instead of sitting with equal breathing room on
     both sides. */
  padding-block: 1rem 2rem;
}

.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__title {
  margin: 0;
  color: var(--kombos-gray-900);
  text-align: left;
}

/* A real block with its own height, not a margin — guarantees the gap
   renders regardless of anything the row/title might do to a margin. */
.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__spacer {
  width: 100%;
  height: 1.5rem;
}

.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__viewport {
  position: relative;
}

/* Mobile: cards stay at a moderate, "own" size instead of near-filling the
   screen — about 1.5-2 cards visible at once, swipeable, with the next card
   peeking in to make it obvious there's more. */
.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: -1rem;
  padding-inline: 1rem;
  scroll-padding-inline: 1rem;
}

.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row::-webkit-scrollbar {
  display: none;
}

/* Targets the actual card by class (two-class selector so it reliably beats
   UgcVideoItem's own single-class ".kombos-ugc-item{width:100%}" regardless
   of build order), not a positional child combinator — IkasComponentRenderer
   wraps each list item in an invisible display:contents element (no box of
   its own), so ".kombos-ugc__row > *" only ever matched that non-rendering
   wrapper and had zero real effect; width was silently ignored and cards
   fell back to shrink-to-fit sizing. */
.cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row .kombos-ugc-item {
  flex: 0 0 auto;
  min-width: 0;
  /* One video fills the screen at a time, shorts/reels-style — just a
     sliver of the next one peeks in from the right edge. */
  width: 92%;
  scroll-snap-align: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row .kombos-ugc-item {
    width: 45%;
  }
}

/* Desktop: 3 videos visible */
@media (min-width: 1024px) {
  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__container {
    padding-block: 1.5rem 3rem;
  }

  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__title {
    text-align: center;
  }

  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__spacer {
    height: 2.25rem;
  }

  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .cc_Ipc5W68kmf_diB3HlxCsr .kombos-ugc__row .kombos-ugc-item {
    width: auto;
  }
}