/* product-3.css — dipindah dari comp/seller-product.php (baris 12120, 26 Okt 2026) agar bisa di-cache browser. */

/* <style > */
/*
 * Product detail offcanvas:
 * Desktop/tablet = image kiri, detail kanan.
 * Mobile = kembali vertikal.
 */
#productQtyModal .ic-product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: stretch;
  min-height: 100%;
}

#productQtyModal .ic-product-detail-media {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, .08);
  overflow: hidden;
}

#productQtyModal .ic-product-detail-media .ic-img-frame {
  width: 100%;
  max-width: none;
  height: calc(100dvh - 48px);
  min-height: 420px;
  max-height: none;
  margin: 0;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

#productQtyModal .ic-product-detail-media .ic-img-frame img {
  display:block;
  object-position:center;
  background:#fff;
}

/*
 * Landscape:
 * memenuhi lebar panel kiri.
 */
#productQtyModal
.ic-product-detail-media
.ic-img-frame
img.ic-modal-img-landscape{
  width:100%;
  height:auto;
  min-height:0;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

/*
 * Portrait:
 * memenuhi tinggi panel dari atas sampai bawah.
 * Kelebihan lebar dipotong simetris oleh frame.
 */
#productQtyModal
.ic-product-detail-media
.ic-img-frame
img.ic-modal-img-portrait{
  width:auto;
  height:100%;
  min-width:0;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

/*
 * Square:
 * memenuhi area semaksimal mungkin tanpa distorsi.
 */
#productQtyModal
.ic-product-detail-media
.ic-img-frame
img.ic-modal-img-square{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/*
 * Product detail media — dark mode.
 * Area kosong di sekitar gambar mengikuti panel detail.
 */
html[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media,
body[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media,
html[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media .ic-img-frame,
body[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media .ic-img-frame,
html[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media .ic-img-frame img,
body[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media .ic-img-frame img,
html[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media .ic-img-placeholder,
body[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media .ic-img-placeholder {
  background: #0f172a !important;
}

html[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media,
body[data-stf-mode="dark"]
#productQtyModal .ic-product-detail-media {
  border-right-color: rgba(255, 255, 255, .10) !important;
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}

#productQtyModal .ic-product-detail-info {
  min-width: 0;
  padding: 1.5rem;
  overflow-wrap: anywhere;
}

#productQtyModal .ic-product-detail-info #modalProdTitle {
  margin-bottom: .75rem;
}

#productQtyModal .ic-product-detail-info #modalProdDesc {
  line-height: 1.65;
}

@media (max-width: 767.98px) {
  #productQtyModal .ic-product-detail-layout {
    display: block;
    min-height: 0;
  }

  #productQtyModal .ic-product-detail-media {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  #productQtyModal .ic-product-detail-media .ic-img-frame {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img,
  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img.ic-modal-img-landscape,
  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img.ic-modal-img-portrait,
  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img.ic-modal-img-square{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }

  #productQtyModal #modalImgPrev {
    left: .75rem !important;
  }

  #productQtyModal #modalImgNext {
    right: .75rem !important;
  }

  #productQtyModal .ic-product-detail-info {
    padding: .75rem 1rem 1rem;
  }
}

/* <style id="ic-modal-image-fit-final"> */
@media (min-width:768px){
  #productQtyModal .ic-product-detail-media{
    min-height:0 !important;
    height:calc(100svh - 48px) !important;
    padding:0 !important;
    margin:0 !important;
    align-items:stretch !important;
  }

  #productQtyModal .ic-product-detail-media .ic-img-frame{
    width:100% !important;
    height:calc(100svh - 48px) !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  #productQtyModal .ic-product-detail-media .ic-img-frame img{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto !important;
    object-position:center center !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }

  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img.ic-modal-img-portrait{
    width:auto !important;
    height:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }

  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img.ic-modal-img-landscape{
    width:100% !important;
    height:auto !important;
    min-width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  #productQtyModal
  .ic-product-detail-media
  .ic-img-frame
  img.ic-modal-img-square{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
}