/* ============================================================
   Homepage (Track A) — gap-filling tweaks only.
   Theme CSS (section-hero.css, section-popular-products.css,
   base.css, component-card.css) does the heavy lifting; these
   rules only fill small gaps left by the static reproduction.
   ============================================================ */

/* Sections butt directly against each other on the homepage,
   matching the reference (popular-products section padding = 0). */
.index .popular-products-section {
  padding: 0;
}

/* Keep the Ronin row header on one line at mobile (title left,
   arrows + Shop Ronin right) like the reference. */
.index .popular-products-header {
  flex-wrap: nowrap;
}
.index .popular-products-header .heading-group__left {
  width: auto;
}

/* The popular-products list is display:flex; before Swiper marks the
   container .swiper-initialized, clip overflow so the 2-up mobile row
   never spills horizontally (prevents page-wide scroll on ~390px). */
.index .js-popular-products-slider {
  overflow: hidden;
}
.index .js-popular-products-slider:not(.swiper-initialized) .popular-products__list--slider {
  flex-wrap: nowrap;
}

/* Tertiary "Shop Ronin" button: keep label compact next to the arrows. */
.index .popular-products-header__button {
  white-space: nowrap;
}

/* Every homepage hero now renders its label with the SAME element/classes
   (.hero__heading .h5, centered) so all four read at one uniform size. The
   .h5 rule in base.css governs the font-size; just ensure the label reads on
   the dark color-background-3 overlay. */
.index .hero__heading {
  color: rgb(var(--color-foreground));
}