/* NinetySeven FINAL: Trending dan Semua Kategori sejajar rapi. */

/* Lebar dan posisi section dibuat sama */
.container:has(> #popular-cards-container),
.container:has(> #semua-kategori),
.container:has(> #product-tabs) {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Judul Trending dan Semua Kategori */
.container:has(> #popular-cards-container) > .mb-5,
.container:has(> #semua-kategori) > .mb-5 {
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  text-align: left !important;
}

.container:has(> #popular-cards-container) > .mb-5 h3,
.container:has(> #semua-kategori) > .mb-5 h3 {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

.container:has(> #popular-cards-container) > .mb-5 p,
.container:has(> #semua-kategori) > .mb-5 p {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Trending, selalu membentuk barisan yang simetris */
#popular-cards-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 28px !important;
  column-gap: 18px !important;
  row-gap: 18px !important;
  align-items: stretch !important;
}

#popular-cards-container > li {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

#popular-cards-container > li img {
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

#popular-cards-container > li h2,
#popular-cards-container > li h3,
#popular-cards-container > li p {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Semua Kategori dan tombol tab ikut garis yang sama */
.container:has(> #product-tabs) {
  margin-top: 0 !important;
}

#product-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

#games-container:not([hidden]),
#pulsa-data-container:not([hidden]),
#ewallet-container:not([hidden]),
#voucher-container:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 30px !important;
  column-gap: 18px !important;
  row-gap: 22px !important;
  align-items: start !important;
}

#games-container:not([hidden]) > .card-tabs,
#ewallet-container:not([hidden]) > .card-tabs,
#pulsa-data-container:not([hidden]) > .card-tabs,
#voucher-container:not([hidden]) > .card-tabs {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .container:has(> #popular-cards-container),
  .container:has(> #semua-kategori),
  .container:has(> #product-tabs) {
    width: calc(100% - 24px) !important;
  }

  #popular-cards-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
  }

  #games-container:not([hidden]),
  #pulsa-data-container:not([hidden]),
  #ewallet-container:not([hidden]),
  #voucher-container:not([hidden]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 18px !important;
  }
}

@media (max-width: 560px) {
  .container:has(> #popular-cards-container),
  .container:has(> #semua-kategori),
  .container:has(> #product-tabs) {
    width: calc(100% - 14px) !important;
  }

  #popular-cards-container {
    column-gap: 10px !important;
    row-gap: 10px !important;
  }

  #popular-cards-container > li {
    min-height: 106px !important;
    padding: 10px !important;
  }

  #popular-cards-container > li img {
    flex-basis: 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }

  #games-container:not([hidden]),
  #pulsa-data-container:not([hidden]),
  #ewallet-container:not([hidden]),
  #voucher-container:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
  }
}