/* KHF marked-position final fix
   Fokus: posisi chip card produk + live market bar. Frontend only. */

/* ===== Product hero live bar: jangan keluar kotak, jangan kepotong ===== */
.product-page-body .pd-live-card{
  position:relative !important;
  overflow:hidden !important;
  min-width:0 !important;
}
.product-page-body .pd-live-card .pd-ring-box,
.product-page-body .pd-live-card .pd-ring,
.product-page-body .pd-live-card .pd-ring-core{
  position:relative !important;
  inset:auto !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  flex:0 0 auto !important;
}
.product-page-body .pd-live-rows{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
.product-page-body .pd-live-rows .pd-live-row{
  min-width:0 !important;
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* ===== Product cards: chip yang ditandain dibuat sejajar dan rapi ===== */
.product-page-body .pd-product-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:13px !important;
  align-items:start !important;
}
.product-page-body .pd-product-card{
  min-width:0 !important;
  height:auto !important;
  min-height:360px !important;
  padding:14px !important;
  gap:0 !important;
}
.product-page-body .pd-chip-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 0 10px !important;
}
.product-page-body .pd-chip-row span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 6px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.product-page-body .pd-chip-row span:nth-child(3){
  grid-column:1 / -1 !important;
  justify-self:stretch !important;
  height:29px !important;
}
.product-page-body .pd-package-strip{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  max-height:54px !important;
  overflow:hidden !important;
  margin:0 0 11px !important;
}
.product-page-body .pd-package-strip em{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  height:27px !important;
  padding:0 7px !important;
  font-size:10px !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
.product-page-body .pd-product-card h2{
  min-height:40px !important;
  margin:0 0 9px !important;
  font-size:18px !important;
  line-height:1.08 !important;
  letter-spacing:-.05em !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.product-page-body .pd-price-row{
  min-height:58px !important;
  margin-top:auto !important;
  margin-bottom:10px !important;
}
.product-page-body .pd-price-row strong{
  font-size:21px !important;
  letter-spacing:-.05em !important;
}
.product-page-body .pd-order-btn{
  min-height:39px !important;
}

/* Script card: list jangan tabrakan ke kotak harga */
.product-page-body .pd-product-card.script{
  min-height:410px !important;
}
.product-page-body .pd-script-preview{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  max-height:112px !important;
  overflow:hidden !important;
  margin:0 0 11px !important;
}
.product-page-body .pd-script-preview div{
  min-height:35px !important;
  padding:8px 9px !important;
  box-sizing:border-box !important;
}
.product-page-body .pd-script-preview b,
.product-page-body .pd-script-preview small{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:640px){
  .product-page-body .pd-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:22px 16px 16px !important;
  }

  /* Live market dibuat compact: lingkaran count masuk ke kanan, status full di bawah */
  .product-page-body .pd-live-card{
    width:100% !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 68px !important;
    grid-template-areas:
      "top ring"
      "eq ring"
      "rows rows" !important;
    gap:8px 10px !important;
    align-items:center !important;
    padding:12px !important;
    border-radius:22px !important;
    margin:0 !important;
  }
  .product-page-body .pd-live-top{
    grid-area:top !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  .product-page-body .pd-live-top div{min-width:0 !important;}
  .product-page-body .pd-live-top small{
    font-size:8px !important;
    letter-spacing:.16em !important;
    white-space:nowrap !important;
  }
  .product-page-body .pd-live-top b{
    font-size:13px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .product-page-body .pd-live-top span{
    flex:0 0 auto !important;
    font-size:9px !important;
    padding:6px 8px !important;
  }
  .product-page-body .pd-ring-box{
    grid-area:ring !important;
    width:66px !important;
    height:66px !important;
    min-height:66px !important;
    display:grid !important;
    place-items:center !important;
    justify-self:end !important;
    align-self:center !important;
    margin:0 !important;
  }
  .product-page-body .pd-ring{
    width:64px !important;
    height:64px !important;
  }
  .product-page-body .pd-ring::after{inset:7px !important;}
  .product-page-body .pd-ring-core{
    width:50px !important;
    height:50px !important;
  }
  .product-page-body .pd-ring-core b{
    font-size:16px !important;
    line-height:1 !important;
  }
  .product-page-body .pd-ring-core small{
    font-size:6px !important;
    line-height:1 !important;
    margin-top:1px !important;
  }
  .product-page-body .pd-eq{
    grid-area:eq !important;
    justify-content:flex-start !important;
    height:25px !important;
    min-width:0 !important;
    gap:4px !important;
    margin:0 !important;
    padding-left:2px !important;
  }
  .product-page-body .pd-eq i{
    width:6px !important;
    max-width:6px !important;
    flex:0 0 6px !important;
  }
  .product-page-body .pd-live-rows{
    grid-area:rows !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
  }
  .product-page-body .pd-live-row{
    min-height:34px !important;
    padding:0 10px !important;
    border-radius:13px !important;
    font-size:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
  }
  .product-page-body .pd-live-row span,
  .product-page-body .pd-live-row b{
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Card tetap 1 baris 2 produk, tapi chip tidak ngambang/geser */
  .product-page-body .pd-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .product-page-body .pd-product-card{
    min-height:365px !important;
    padding:12px !important;
    border-radius:23px !important;
  }
  .product-page-body .pd-product-card.script{
    min-height:410px !important;
  }
  .product-page-body .pd-card-head{
    gap:7px !important;
    margin-bottom:9px !important;
  }
  .product-page-body .pd-icon-box{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    flex-basis:46px !important;
  }
  .product-page-body .pd-card-head > span{
    max-width:62px !important;
    height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 8px !important;
    font-size:8px !important;
  }
  .product-page-body .pd-product-card h2{
    min-height:39px !important;
    font-size:17px !important;
    line-height:1.1 !important;
    margin-bottom:8px !important;
  }
  .product-page-body .pd-chip-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    margin-bottom:10px !important;
  }
  .product-page-body .pd-chip-row span{
    height:27px !important;
    min-height:27px !important;
    font-size:8.2px !important;
    padding:0 5px !important;
  }
  .product-page-body .pd-chip-row span:nth-child(3){
    grid-column:1 / -1 !important;
    height:28px !important;
  }
  .product-page-body .pd-package-strip{
    max-height:55px !important;
    gap:5px !important;
    margin-bottom:10px !important;
  }
  .product-page-body .pd-package-strip em{
    height:26px !important;
    min-width:31px !important;
    max-width:51px !important;
    padding:0 6px !important;
    font-size:9px !important;
  }
  .product-page-body .pd-price-row{
    min-height:56px !important;
    padding:9px !important;
    border-radius:15px !important;
  }
  .product-page-body .pd-price-row small{font-size:9px !important;}
  .product-page-body .pd-price-row strong{font-size:20px !important;}
  .product-page-body .pd-order-btn{
    min-height:38px !important;
    font-size:10px !important;
    border-radius:14px !important;
  }
}

@media (max-width:380px){
  .product-page-body .pd-product-grid{gap:10px !important;}
  .product-page-body .pd-product-card{padding:10px !important;min-height:358px !important;}
  .product-page-body .pd-product-card.script{min-height:400px !important;}
  .product-page-body .pd-icon-box{width:42px !important;height:42px !important;min-width:42px !important;flex-basis:42px !important;}
  .product-page-body .pd-card-head > span{max-width:56px !important;font-size:7.2px !important;padding:0 6px !important;}
  .product-page-body .pd-product-card h2{font-size:15.8px !important;min-height:36px !important;}
  .product-page-body .pd-chip-row span{font-size:7.6px !important;height:26px !important;}
  .product-page-body .pd-package-strip em{min-width:29px;max-width:47px;font-size:8.4px !important;}
  .product-page-body .pd-price-row strong{font-size:18px !important;}
}