/* KHF CLEAN LIVE BAR FINAL
   Fokus hanya merapikan live market bar pada halaman produk.
   Tidak menyentuh backend, payment, database, atau file data. */

.product-page-body .pd-hero{
  overflow:hidden !important;
}

/* Live card dibuat stabil: kiri informasi, kanan ring, bawah status */
.product-page-body .pd-live-card{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 82px !important;
  grid-template-areas:
    "top ring"
    "eq ring"
    "rows rows" !important;
  align-items:center !important;
  gap:10px 12px !important;
  padding:15px !important;
  border-radius:24px !important;
}

.product-page-body .pd-live-card::after{
  pointer-events:none !important;
}

.product-page-body .pd-live-top{
  grid-area:top !important;
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:0 !important;
}

.product-page-body .pd-live-top div{
  min-width:0 !important;
}

.product-page-body .pd-live-top small{
  display:block !important;
  max-width:100% !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.product-page-body .pd-live-top b{
  display:block !important;
  margin-top:6px !important;
  font-size:16px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.product-page-body .pd-live-top span{
  flex:0 0 auto !important;
  align-self:flex-start !important;
  white-space:nowrap !important;
  font-size:10px !important;
  line-height:1 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
}

/* Ring wajib overlap rapi: ring luar + angka di tengah, bukan turun ke bawah */
.product-page-body .pd-ring-box{
  grid-area:ring !important;
  position:relative !important;
  inset:auto !important;
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  min-height:82px !important;
  max-width:82px !important;
  max-height:82px !important;
  display:grid !important;
  place-items:center !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:visible !important;
}

.product-page-body .pd-ring,
.product-page-body .pd-ring-core{
  grid-area:1 / 1 !important;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
}

.product-page-body .pd-ring{
  width:78px !important;
  height:78px !important;
  min-width:78px !important;
  min-height:78px !important;
  border-radius:999px !important;
}

.product-page-body .pd-ring::after{
  inset:8px !important;
}

.product-page-body .pd-ring-core{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  align-content:center !important;
  z-index:3 !important;
}

.product-page-body .pd-ring-core b{
  display:block !important;
  font-size:19px !important;
  line-height:1 !important;
  margin:0 !important;
  text-align:center !important;
}

.product-page-body .pd-ring-core small{
  display:block !important;
  font-size:7px !important;
  line-height:1 !important;
  margin-top:2px !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.product-page-body .pd-eq{
  grid-area:eq !important;
  min-width:0 !important;
  width:100% !important;
  height:28px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:5px !important;
  margin:0 !important;
  padding:0 0 0 2px !important;
  overflow:hidden !important;
}

.product-page-body .pd-eq i{
  flex:0 0 6px !important;
  width:6px !important;
  max-width:6px !important;
  border-radius:999px !important;
}

/* Wrapper rows harus ikut grid parent; sebelumnya child row dipaksa area langsung, itu yang bikin tabrakan */
.product-page-body .pd-live-rows{
  grid-area:rows !important;
  min-width:0 !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  z-index:5 !important;
}

.product-page-body .pd-live-row,
.product-page-body .pd-live-row.khf-live-row-1,
.product-page-body .pd-live-row.khf-live-row-2{
  grid-area:auto !important;
  min-width:0 !important;
  width:100% !important;
  min-height:35px !important;
  height:35px !important;
  margin:0 !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  font-size:10px !important;
  line-height:1 !important;
}

.product-page-body .pd-live-row span,
.product-page-body .pd-live-row b{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1 !important;
}

.product-page-body .pd-live-row span{
  flex:1 1 auto !important;
  color:rgba(226,232,240,.78) !important;
}

.product-page-body .pd-live-row b{
  flex:0 1 auto !important;
  color:#bbf7d0 !important;
}

@media (max-width:640px){
  .product-page-body .pd-live-card{
    grid-template-columns:minmax(0, 1fr) 76px !important;
    grid-template-areas:
      "top ring"
      "eq ring"
      "rows rows" !important;
    gap:8px 10px !important;
    padding:12px !important;
    border-radius:22px !important;
  }

  .product-page-body .pd-live-top small{
    font-size:9px !important;
    letter-spacing:.14em !important;
  }

  .product-page-body .pd-live-top b{
    font-size:14px !important;
    margin-top:5px !important;
  }

  .product-page-body .pd-live-top span{
    font-size:9px !important;
    padding:6px 9px !important;
  }

  .product-page-body .pd-ring-box{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    min-height:76px !important;
    max-width:76px !important;
    max-height:76px !important;
  }

  .product-page-body .pd-ring{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
  }

  .product-page-body .pd-ring-core{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
  }

  .product-page-body .pd-ring-core b{
    font-size:18px !important;
  }

  .product-page-body .pd-ring-core small{
    font-size:6.5px !important;
  }

  .product-page-body .pd-eq{
    height:25px !important;
    gap:4px !important;
  }

  .product-page-body .pd-eq i{
    flex-basis:6px !important;
    width:6px !important;
  }

  .product-page-body .pd-live-rows{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  .product-page-body .pd-live-row,
  .product-page-body .pd-live-row.khf-live-row-1,
  .product-page-body .pd-live-row.khf-live-row-2{
    height:33px !important;
    min-height:33px !important;
    padding:0 8px !important;
    border-radius:13px !important;
    font-size:9px !important;
    gap:6px !important;
  }
}

@media (max-width:380px){
  .product-page-body .pd-live-card{
    grid-template-columns:minmax(0, 1fr) 66px !important;
    gap:7px 8px !important;
    padding:11px !important;
  }

  .product-page-body .pd-live-top{
    gap:7px !important;
  }

  .product-page-body .pd-live-top small{
    font-size:8px !important;
  }

  .product-page-body .pd-live-top b{
    font-size:13px !important;
  }

  .product-page-body .pd-live-top span{
    font-size:8px !important;
    padding:6px 7px !important;
  }

  .product-page-body .pd-ring-box{
    width:66px !important;
    height:66px !important;
    min-width:66px !important;
    min-height:66px !important;
    max-width:66px !important;
    max-height:66px !important;
  }

  .product-page-body .pd-ring{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    min-height:62px !important;
  }

  .product-page-body .pd-ring-core{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }

  .product-page-body .pd-ring-core b{
    font-size:16px !important;
  }

  .product-page-body .pd-ring-core small{
    font-size:6px !important;
  }

  .product-page-body .pd-live-row,
  .product-page-body .pd-live-row.khf-live-row-1,
  .product-page-body .pd-live-row.khf-live-row-2{
    font-size:8px !important;
    padding:0 7px !important;
  }
}