/* ==========================================================================
   Featured Band (Roller Up / Roller Up XL)
   ========================================================================== */

.featured-band {
  padding-block: 30px;
}

/* Header */
.featured-band__header {
  text-align: center;
  margin-block-end: var(--space-7);
}

.featured-band__title {
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: 5px;
}

.featured-band__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 544px;
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

.featured-band .featured-band__subtitle {
  max-width: 300px;
  line-height: normal;
}

.featured-band__cta {
  /* extends .btn .btn--primary */
}

/* Swiper container */
.featured-band__swiper {
  overflow: visible;
}

/* Product grid */
.featured-band__grid {
  /* gap set per context: grid on desktop, spaceBetween on mobile via Swiper */
}

.featured-band__grid > li {
  min-width: 0;
}

/* Cap swatch row to 1 line in carousel context — prevents variable-height cards */
.featured-band__grid .swatch-row {
  flex-wrap: nowrap;
  overflow: hidden;
  height: 20px;
}

/* Pagination dots */
.featured-band__pagination {
  margin-top: var(--space-4);
}

.featured-band__pagination .swiper-pagination-bullet {
  background-color: var(--color-border);
  opacity: 1;
  transition: background-color 0.2s, transform 0.2s;
}

.featured-band__pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  transform: scale(1.25);
}

/* Mobile: Swiper carousel — bleed edge-to-edge, offset first slide via JS slidesOffsetBefore */
@media (width < 768px) {
  .featured-band__swiper {
    overflow: hidden;
    margin-inline: calc(-1 * var(--space-5));
  }
}

/* Desktop: restore CSS grid, reset any Swiper inline overrides */
@media (width >= 768px) {
  .featured-band__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    transform: none !important;
    transition: none !important;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .featured-band__grid > li {
    width: auto !important;
    margin-right: 0 !important;
  }

  .featured-band__pagination {
    display: none;
  }
}

/* XL variant */
.featured-band--xl .featured-band__grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (width >= 768px) {
  .featured-band--xl .featured-band__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width >= 1024px) {
  .featured-band--xl .featured-band__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Lifestyle banner responsive (≤ 1024px) */
@media (width <= 1024px) {
  .lifestyle-banner__content {
    position: absolute;
    bottom: 20px;
  }

  .lifestyle-banner__title {
    font-size: 36px !important;
    font-weight: 500 !important;
    color: #fff !important;
    line-height: 1.2 !important;
  }

  .lifestyle-banner__sub {
    font-size: 18px !important;
    color: #fff !important;
    max-width: 540px !important;
    margin-bottom: 20px !important;
    line-height: normal !important;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    text-align:center;
  }
  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 10px;
    width: 10px;
    height: 10px;
  }
  .featured-band__pagination .swiper-pagination-bullet-active{
    transform:unset;
  }
  .lifestyle-banner__content{
    width:100%;
  }
}

/* Product card overrides specific to the featured-band context live in product-card.css */