/* =============================================================================
   BREAKPOINT LAYOUT GRIDS — separate decisions per viewport
   Mobile: 320–767 | Tablet: 768–1023 | Laptop: 1024–1439 | Desktop: 1440+
   ============================================================================= */

.ls-sec--flash,
.ls-sec--new,
.ls-sec--cashback,
.ls-sec--magazine,
.ls-sec--lookbook,
.ls-sec--premium-dark,
.ls-sec--recommended,
.ls-sec--duo,
.ls-sec--editorial,
.ls-sec--masonry,
.ls-sec--brand,
.ls-sec--slider,
.ls-sec--bestsellers,
.ls-sec--creator {
  display: block;
  width: 100%;
}

.ls-sec--premium-dark {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.ls-sec--cashback {
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.ls-pc-grid {
  display: grid;
  gap: var(--ls-s2, 16px);
  width: 100%;
  align-items: stretch;
  grid-auto-rows: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ls-pc-grid > .pc {
  height: auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.ls-pc-grid--1 {
  grid-template-columns: 1fr;
}

.ls-pc-grid--duo,
.ls-pc-grid--magazine {
  grid-template-columns: 1fr;
}

.ls-pc-rail {
  display: flex;
  gap: var(--ls-s2, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ls-s2, 16px);
  padding-bottom: var(--ls-s1, 8px);
  -webkit-overflow-scrolling: touch;
  width: 100%;
  scrollbar-width: none;
}

.ls-pc-rail::-webkit-scrollbar {
  display: none;
}

.ls-pc-rail > .pc {
  flex: 0 0 168px;
  width: 168px;
  height: auto;
  scroll-snap-align: start;
}

.ls-staff-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-s2, 16px);
  align-items: start;
  padding: var(--ls-s2, 16px) 0;
  border-bottom: 1px solid var(--ls-line, #e8e8ec);
}

.ls-staff-row .pc {
  height: auto;
  max-width: 360px;
  justify-self: center;
  width: 100%;
}

@media (min-width: 768px) {
  .ls-pc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ls-s3, 24px);
  }

  .ls-pc-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ls-pc-grid--magazine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ls-pc-grid--dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ls-pc-rail > .pc {
    flex-basis: 200px;
    width: 200px;
  }

  .ls-staff-row {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
  }

  .ls-staff-row--flip {
    grid-template-columns: 1.1fr 1fr;
  }

  .ls-staff-row--flip .ls-staff-quote {
    order: 2;
  }

  .ls-staff-row .pc {
    justify-self: stretch;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .ls-pc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ls-pc-grid--editorial,
  .ls-pc-grid--brand,
  .ls-pc-grid--magazine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ls-sec--slider .ls-pc-rail,
  .ls-sec--bestsellers .ls-pc-rail,
  .ls-sec--creator .ls-pc-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    gap: var(--ls-s3, 24px);
    padding-bottom: 0;
  }

  .ls-sec--slider .ls-pc-rail > .pc,
  .ls-sec--bestsellers .ls-pc-rail > .pc,
  .ls-sec--creator .ls-pc-rail > .pc {
    flex: none;
    width: auto;
    height: 100%;
  }
}

@media (min-width: 1440px) {
  .ls-pc-grid--dense {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ls-sec--slider .ls-pc-rail,
  .ls-sec--bestsellers .ls-pc-rail,
  .ls-sec--creator .ls-pc-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.pc--size-xl,
.pc--size-sm,
.ls-masonry__wide,
.ls-masonry__tall,
.ls-layout-feature-grid__lead {
  grid-column: auto !important;
  grid-row: auto !important;
}

.pc--size-xl .pc__media,
.pc--size-sm .pc__media,
.ls-masonry__tall .pc__media,
.ls-layout-feature-grid__lead .pc__media {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

.ls-layout-asym,
.ls-layout-brand,
.ls-layout-feature-grid,
.ls-masonry {
  display: grid;
  gap: var(--ls-s2, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-height: 0 !important;
}

@media (min-width: 768px) {
  .ls-layout-asym,
  .ls-layout-feature-grid,
  .ls-masonry,
  .ls-layout-brand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ls-layout-asym__stack,
  .ls-layout-brand__side {
    display: contents;
  }
}

/* PDP related products: vertical stack (not horizontal rail) */
@media (min-width: 1024px) {
  #moreProductsList.pdp-related-stack,
  .pdp-section__rail.pdp-related-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: var(--ls-s3, 16px) !important;
    padding-bottom: 0 !important;
  }

  #moreProductsList.pdp-related-stack .pc,
  .pdp-section__rail.pdp-related-stack .pc {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #moreProductsList.pc-rail:not(.pdp-related-stack),
  .pdp-section__rail:not(.pdp-related-stack) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    gap: var(--ls-s3, 24px);
    padding-bottom: 0;
  }

  #moreProductsList.pc-rail:not(.pdp-related-stack) .pc,
  .pdp-section__rail:not(.pdp-related-stack) .pc {
    flex: none;
    width: auto;
    height: 100%;
  }
}

@media (min-width: 1440px) {
  #moreProductsList.pc-rail:not(.pdp-related-stack),
  .pdp-section__rail:not(.pdp-related-stack) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}