/* =========================================================
   JPA1981 — Phase 8.3 PLP/Search responsive UX fix
   Scope: category/search product-list pages only.
   Goals:
   - prevent horizontal overflow on mobile
   - normalize desktop grid and pager
   - keep product card response/markup contract untouched
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

#plp_container,
#plp_container * {
  box-sizing: border-box;
}

#plp_container {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  background: #fff;
}

#plp_container .wrap {
  width: min(100%, 1440px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: clamp(10px, 2vw, 28px) !important;
  direction: rtl !important;
}

#plp_container .shell,
#plp_container .products,
#plp_container .cards {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#plp_container .shell {
  overflow: visible !important;
}

#plp_container .cards {
  display: grid !important;
  justify-content: stretch !important;
  align-items: start !important;
}

#plp_container .plp-card,
#plp_container .plp-card .media,
#plp_container .plp-card .swiper,
#plp_container .plp-card .swiper-wrapper,
#plp_container .plp-card .swiper-slide {
  min-width: 0 !important;
  max-width: 100% !important;
}

#plp_container .plp-card img {
  max-width: 100% !important;
}

/* Desktop: stable clothing-grid rhythm without leaving empty left space. */
@media (min-width: 901px) {
  #plp_container.grid-2 .cards {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  }

  #plp_container.grid-4 .cards {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 18px !important;
  }

  #plp_container.grid-8 .cards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 12px !important;
  }

  #plp_container .plp-card {
    border-radius: 16px !important;
    overflow: hidden;
  }

  #plp_container .plp-card .media {
    border-radius: 16px 16px 0 0;
  }

  #plp_container .plp-card .hover-cta.is-open,
  #plp_container .plp-card:hover .hover-cta {
    pointer-events: auto !important;
  }

  #plp_container .plp-card .hover-cta .cta-interact,
  #plp_container .plp-card .hover-cta .cta-sz,
  #plp_container .plp-card .hover-cta .add-to-basket {
    pointer-events: auto !important;
  }

  #plp_container .plp-card.is-hover .cover-link,
  #plp_container .plp-card:hover .cover-link {
    pointer-events: none !important;
  }
}

/* Tablet/mobile: force 2 columns; old CSS used 4 columns and created horizontal drift. */
@media (max-width: 900px) {
  #plp_container {
    overflow-x: hidden !important;
  }

  #plp_container .wrap {
    padding-inline: 10px !important;
  }

  #plp_container.grid-2 .cards,
  #plp_container.grid-4 .cards,
  #plp_container.grid-8 .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #plp_container .plp-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(16,24,40,.08) !important;
  }

  #plp_container .plp-card .swiper {
    width: 100% !important;
    min-width: 0 !important;
  }

  #plp_container .plp-card .row-top-mobile {
    min-height: 38px !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  #plp_container .plp-card .title-mobile a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden !important;
  }

  #plp_container .plp-searchbar .row-top {
    padding-inline: 0 !important;
  }

  #plp_container .plp-searchbar .wrap .right,
  #plp_container .plp-searchbar .wrap .left {
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  #plp_container .wrap {
    padding-inline: 8px !important;
  }

  #plp_container.grid-2 .cards,
  #plp_container.grid-4 .cards,
  #plp_container.grid-8 .cards {
    gap: 8px !important;
  }

  #plp_container .plp-card .meta {
    padding: 8px 8px 10px !important;
  }
}

/* Pager: desktop should be calm and non-sticky; mobile should not fight bottom nav. */
#plpPager,
.jpa-plp .plp-pager {
  width: min(100%, 1440px) !important;
  max-width: calc(100% - 20px) !important;
  margin: 24px auto 56px !important;
  position: static !important;
  direction: rtl !important;
}

#plpPager .controls,
#plpPager .nums,
.jpa-plp .plp-pager .controls,
.jpa-plp .plp-pager .nums {
  max-width: 100% !important;
}

@media (max-width: 640px) {
  #plpPager,
  .jpa-plp .plp-pager {
    margin-bottom: 110px !important;
    border-radius: 18px !important;
    overflow: hidden;
  }
}