/* =============================================================================
   DD BREAKPOINTS — intentionally separate layouts (NOT scaled desktop)
   Mobile ≤767 (anchor 390) · Tablet 768–1023 · Laptop 1024–1439 · Desktop 1440+
   Load last. Overrides legacy styles.css where needed.
   ============================================================================= */

/* ── Layout tokens per breakpoint ── */
:root {
  --dd-bp: mobile;
  --dd-gutter: 16px;
  --dd-section-y: 24px;
  --dd-grid-gap: 12px;
  --dd-grid-cols: 2;
  --dd-rail-card: 148px;
  --dd-rail-compact: 268px;
  --dd-content-max: 100%;
  --dd-hero-visual-max: min(52vh, 360px);
}

@media (min-width: 768px) {
  :root {
    --dd-bp: tablet;
    --dd-gutter: 24px;
    --dd-section-y: 32px;
    --dd-grid-gap: 20px;
    --dd-grid-cols: 3;
    --dd-rail-card: 192px;
    --dd-rail-compact: 300px;
    --dd-content-max: 720px;
    --dd-hero-visual-max: min(48vh, 440px);
  }
}

@media (min-width: 1024px) {
  :root {
    --dd-bp: laptop;
    --dd-gutter: 32px;
    --dd-section-y: 36px;
    --dd-grid-gap: 24px;
    --dd-grid-cols: 4;
    --dd-rail-card: 216px;
    --dd-rail-compact: 320px;
    --dd-content-max: 1200px;
    --dd-hero-visual-max: 280px;
  }
}

@media (min-width: 1440px) {
  :root {
    --dd-bp: desktop;
    --dd-gutter: 40px;
    --dd-section-y: 44px;
    --dd-grid-gap: 28px;
    --dd-content-max: 1280px;
    --dd-hero-visual-max: 320px;
  }
}

/* =============================================================================
   GLOBAL — kill black voids, empty slabs, overflow
   ============================================================================= */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

#productDetail.ls-pdp-page.page.active,
#productDetail.ls-pdp-page {
  background: var(--ls-bg, #f7f7f8) !important;
}

#productDetail.ls-pdp-page .top-shell,
#productDetail .top-shell {
  display: none !important;
}

#productDetail.ls-pdp-page #detailImageBox,
#productDetail.ls-pdp-page .pdp-gallery #detailImageBox,
#productDetail #detailImageBox {
  min-height: 0 !important;
  aspect-ratio: unset !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

@media (min-width: 1200px) {
  #productDetail.ls-pdp-page #detailImageBox,
  #productDetail #detailImageBox {
    min-height: 0 !important;
    max-width: 100% !important;
  }
}

#productDetail.ls-pdp-page .detail-main-visual,
#productDetail .detail-main-visual {
  min-height: 0 !important;
  max-height: none !important;
  background: #f7f7f8 !important;
  border-radius: var(--ls-r-sm, 8px);
  overflow: visible !important;
}

#productDetail.ls-pdp-page .detail-gallery-ck {
  min-height: 0 !important;
}

#productDetail.ls-pdp-page .detail-main-img,
#productDetail .detail-main-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
}

.pc__media,
.ls-frame,
.ls-hero-full__visual,
.ls-banner-large__media,
.ls-video-reel__frame {
  background: #f7f7f8 !important;
}

.ls-hero-full__visual {
  min-height: 0 !important;
  height: auto !important;
}

.ls-sec--premium-dark,
.ls-banner-large__bg,
.ls-hero-full__bg {
  background: transparent !important;
}

/* =============================================================================
   MOBILE ≤767 — anchor 390px
   ============================================================================= */

@media (max-width: 767px) {
  .ls-block__inner,
  .ls-block--flush {
    padding-left: max(var(--dd-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--dd-gutter), env(safe-area-inset-right, 0px)) !important;
    padding-top: var(--dd-section-y) !important;
    padding-bottom: var(--dd-section-y) !important;
  }

  .ls-block--flush .ls-hero-full {
    margin: 0;
  }

  /* Hero: vertical — image first, copy below */
  .ls-hero-full__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "visual" "copy" !important;
    gap: var(--dd-grid-gap) !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .ls-hero-full__visual {
    aspect-ratio: 4 / 3 !important;
    max-height: var(--dd-hero-visual-max) !important;
    border-radius: var(--ls-r-md, 16px);
    border: 1px solid var(--ls-line, #e8e8ec);
  }

  .ls-hero-full__copy {
    padding: 0 !important;
  }

  .ls-hero-full__glass {
    padding: var(--dd-gutter) !important;
  }

  .ls-hero-full__actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .ls-hero-full__actions .ls-btn--primary {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Spotlight banner: stack */
  .ls-banner-large__grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "media" "copy" !important;
    gap: 0 !important;
  }

  .ls-banner-large__media {
    aspect-ratio: 16 / 10 !important;
    max-height: 220px !important;
    min-height: 0 !important;
    border-radius: var(--ls-r-md, 16px) var(--ls-r-md, 16px) 0 0;
  }

  .ls-banner-large__copy {
    padding: var(--dd-gutter) !important;
  }

  .ls-banner-large__copy .ls-btn {
    width: 100%;
    min-height: 48px;
  }

  /* Video feature: compact card */
  .ls-video-reel {
    aspect-ratio: 16 / 10 !important;
    max-height: 240px !important;
  }

  /* Product grids: 2-up */
  .ls-pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
  }

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

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

  /* Rails: horizontal scroll */
  .ls-pc-rail,
  .pc-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: var(--dd-grid-gap) !important;
    scroll-padding-inline: var(--dd-gutter);
    padding-bottom: 8px;
  }

  .ls-pc-rail > .pc,
  .pc-rail > .pc {
    flex: 0 0 var(--dd-rail-card) !important;
    width: var(--dd-rail-card) !important;
    min-width: 0;
  }

  .ls-pc-rail > .pc--compact,
  .pc-rail > .pc--compact {
    flex: 0 0 var(--dd-rail-compact) !important;
    width: var(--dd-rail-compact) !important;
  }

  /* Cards: no clip */
  .pc__title {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .pc__btn {
    min-height: 44px;
    font-size: 0.8125rem;
  }

  .pc__body {
    padding: 12px;
    gap: 6px;
  }

  /* PDP mobile: single column stack */
  .pdp-shell {
    padding: var(--dd-gutter) !important;
    padding-bottom: calc(var(--dd-gutter) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pdp-shell__upper {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dd-grid-gap) !important;
  }

  .pdp-gallery {
    order: 1;
    padding: var(--ls-s1, 8px);
  }

  .pdp-shop {
    order: 2;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pdp-shell__flow {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dd-grid-gap) !important;
    margin-top: var(--dd-grid-gap) !important;
  }

  .grab-deal-btn,
  .pdp-cta-primary,
  .cart-btn-detail {
    width: 100%;
    min-height: 48px;
  }

  #productDetail.ls-pdp-page .pdp-sticky-bar.detail-sticky-cta {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 999998;
  }

  body.product-detail-sticky-on:has(#productDetail.ls-pdp-page.active) {
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pdp-shell__below {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  #moreProductsList.pdp-related-stack,
  .pdp-section__rail.pdp-related-stack {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    gap: 12px !important;
  }

  #moreProductsList.pc-rail:not(.pdp-related-stack),
  .pdp-section__rail:not(.pdp-related-stack) {
    display: flex !important;
    overflow-x: auto !important;
  }

  /* Search / category: single-column list feel on narrow phones */
  #search #searchResults.products-grid.search-results-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dd-grid-gap) !important;
    padding: 0 var(--dd-gutter);
  }

  #search #searchResults .pc--compact {
    width: 100%;
    max-width: 100%;
  }

  .category-block {
    padding: 0 var(--dd-gutter);
    margin-top: var(--dd-section-y);
  }

  .category-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
  }

  .category-tile-img {
    height: 88px !important;
    object-fit: contain !important;
    background: #f7f7f8 !important;
    border: 1px solid #e8e8ec;
  }

  .category-see-more {
    min-height: 36px;
    padding: 8px 14px;
  }
}

/* =============================================================================
   TABLET 768–1023 — centered editorial layout
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .ls-block__inner {
    max-width: var(--dd-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero: stacked hero card, centered */
  .ls-hero-full__grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "visual" "copy" !important;
    max-width: var(--dd-content-max) !important;
    margin: 0 auto !important;
    gap: var(--dd-grid-gap) !important;
    padding: var(--dd-gutter) !important;
  }

  .ls-hero-full__visual {
    aspect-ratio: 16 / 10 !important;
    max-height: var(--dd-hero-visual-max) !important;
    border-radius: var(--ls-r-md, 16px);
  }

  .ls-hero-full__copy {
    padding: 0 !important;
  }

  .ls-hero-full__actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .ls-hero-full__actions .ls-btn--primary {
    width: auto !important;
    min-width: 160px;
  }

  .ls-banner-large__grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "media" "copy" !important;
    max-width: var(--dd-content-max);
    margin: 0 auto;
    gap: var(--dd-grid-gap);
  }

  .ls-banner-large__media {
    max-height: 320px !important;
    border-radius: var(--ls-r-md, 16px);
  }

  /* Grids: 3 columns */
  .ls-pc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
  }

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

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

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

  /* Rails: scroll, wider cards */
  .ls-pc-rail,
  .pc-rail {
    display: flex !important;
    overflow-x: auto !important;
  }

  .ls-pc-rail > .pc,
  .pc-rail > .pc {
    flex: 0 0 var(--dd-rail-card) !important;
    width: var(--dd-rail-card) !important;
  }

  /* PDP: balanced 2-column */
  .pdp-shell {
    padding: var(--dd-gutter) !important;
    max-width: var(--dd-content-max);
  }

  .pdp-shell__upper {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--dd-grid-gap) !important;
  }

  .pdp-shop {
    position: sticky !important;
    top: calc(var(--ls-header, 88px) + 12px) !important;
    max-height: calc(100vh - var(--ls-header, 88px) - 24px) !important;
    overflow-y: auto !important;
    padding: var(--dd-gutter) !important;
    background: var(--ls-surface, #fff) !important;
    border: 1px solid var(--ls-line, #e8e8ec) !important;
    border-radius: var(--ls-r-md, 16px) !important;
  }

  .pdp-shell__flow {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--dd-grid-gap) !important;
  }

  .pdp-block--desc {
    grid-column: 1 / -1;
  }

  .detail-gallery-ck,
  .pdp-gallery .detail-gallery-ck {
    flex-direction: column !important;
  }

  .detail-thumb-strip {
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  /* Search: stacked compact rows */
  #search #searchResults.products-grid.search-results-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--dd-grid-gap) !important;
    max-width: var(--dd-content-max);
    margin: 0 auto;
  }

  .category-block-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
  }

  .category-tile-img {
    height: 100px !important;
    object-fit: contain !important;
  }
}

/* =============================================================================
   LAPTOP 1024–1439 — split layouts, grid rails
   ============================================================================= */

@media (min-width: 1024px) and (max-width: 1439px) {
  .ls-block__inner,
  .ls-block--flush {
    max-width: var(--dd-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero: horizontal split */
  .ls-hero-full__grid {
    grid-template-columns: 0.95fr 1.05fr !important;
    grid-template-areas: "copy visual" !important;
    align-items: center !important;
    gap: var(--dd-grid-gap) !important;
    padding: 0 !important;
  }

  .ls-hero-full__visual {
    aspect-ratio: 16 / 10 !important;
    max-height: var(--dd-hero-visual-max) !important;
  }

  .ls-banner-large__grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "copy media" !important;
    align-items: center !important;
    gap: var(--dd-grid-gap) !important;
    min-height: 0 !important;
  }

  .ls-banner-large__media {
    max-height: 280px !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* Grids: 4 columns default */
  .ls-pc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
  }

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

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

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

  /* Rails → static grids on laptop */
  .ls-sec--slider .ls-pc-rail,
  .ls-sec--bestsellers .ls-pc-rail,
  .ls-sec--creator .ls-pc-rail,
  #moreProductsList.pc-rail,
  .pdp-section__rail {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    gap: var(--dd-grid-gap) !important;
  }

  .ls-sec--slider .ls-pc-rail > .pc,
  .ls-sec--bestsellers .ls-pc-rail > .pc,
  .ls-sec--creator .ls-pc-rail > .pc,
  #moreProductsList.pc-rail > .pc,
  .pdp-section__rail > .pc {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* PDP: gallery + sticky buy */
  .pdp-shell__upper {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: var(--dd-grid-gap) !important;
  }

  .pdp-shop {
    position: sticky !important;
    top: calc(var(--ls-header, 96px) + 16px) !important;
  }

  .detail-gallery-ck {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .detail-thumb-strip {
    flex-direction: column !important;
    width: 72px !important;
    flex: 0 0 72px !important;
    flex-shrink: 0 !important;
    max-height: min(480px, 65vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 3 !important;
    position: relative !important;
  }

  .detail-main-visual {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    z-index: 1 !important;
  }

  #productDetail.ls-pdp-page .pdp-sticky-bar {
    display: none !important;
  }

  /* Search: 2-column grid of compact cards */
  #search #searchResults.products-grid.search-results-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
    max-width: var(--dd-content-max);
    margin: 0 auto;
  }

  .category-block-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* =============================================================================
   DESKTOP 1440+ — wide intentional layout
   ============================================================================= */

@media (min-width: 1440px) {
  .ls-block__inner,
  .ls-block--flush,
  .pdp-shell,
  .ck-home-trust,
  #search .search-page-shell {
    max-width: var(--dd-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ls-hero-full__grid {
    grid-template-columns: 1fr 1.2fr !important;
    gap: calc(var(--dd-grid-gap) + 8px) !important;
  }

  .ls-hero-full__visual {
    max-height: var(--dd-hero-visual-max) !important;
  }

  .ls-hero-full__copy h1 {
    font-size: 1.5rem !important;
  }

  .ls-pc-grid {
    gap: var(--dd-grid-gap) !important;
  }

  .ls-pc-grid--dense,
  .ls-pc-grid--new,
  .ls-pc-grid--collection-full {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

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

  .pdp-shell {
    padding: var(--dd-gutter) !important;
  }

  .pdp-shell__upper {
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: calc(var(--dd-grid-gap) + 8px) !important;
  }

  #search #searchResults.products-grid.search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
  }

  .category-block {
    padding: 0;
    max-width: var(--dd-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  .category-tile-img {
    height: 112px !important;
  }
}

/* =============================================================================
   ALIGNMENT & SPACING — all breakpoints
   ============================================================================= */

.ls-block__content,
.ls-sec {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ls-pc-grid > .pc,
.ls-pc-rail > .pc {
  align-self: stretch;
  height: auto !important;
}

.pc__prices,
.pc__meta,
.pc__body {
  min-width: 0;
  overflow: visible;
}

.ls-price,
.ls-block-head__title {
  overflow-wrap: anywhere;
}

.ls-btn,
.pc__btn,
.detail-sticky-cta__primary,
.category-see-more {
  box-sizing: border-box;
  touch-action: manipulation;
}

.ls-category-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ls-muted, #64656b);
  margin-bottom: 4px;
}

/* Legacy product grid on category views — scoped columns */
@media (max-width: 767px) {
  #home .products-grid:not(#searchResults),
  #deals .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dd-grid-gap) !important;
    padding: 0 var(--dd-gutter) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #home .products-grid:not(#searchResults),
  #deals .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  #home .products-grid:not(#searchResults),
  #deals .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  #home .products-grid:not(#searchResults),
  #deals .products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}