/* Samakan posisi dan ukuran tombol aksi pada semua kartu produk */
.grid .card,
#catalog-grid .card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.grid .card-body,
#catalog-grid .card-body{
  flex:1;
  display:flex;
  flex-direction:column;
}
.grid .card-bottom,
#catalog-grid .card-bottom{
  margin-top:auto !important;
  min-height:52px;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 104px;
  align-items:end !important;
  gap:12px !important;
}
.grid .card-bottom > form,
#catalog-grid .card-bottom > form{
  width:104px;
  margin:0;
}
.grid .card-bottom button,
#catalog-grid .card-bottom button,
.grid .card-bottom .product-open,
#catalog-grid .card-bottom .product-open{
  width:104px !important;
  min-width:104px !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap;
  line-height:1 !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:800 !important;
}
.grid .card-bottom > strong,
#catalog-grid .card-bottom > strong,
.grid .card-bottom > .discount-price,
#catalog-grid .card-bottom > .discount-price{
  align-self:center;
  margin:0 !important;
  min-width:0;
}
.grid .card .desc,
#catalog-grid .card .desc{
  min-height:38px;
}
@media(max-width:640px){
  .grid .card-bottom,
  #catalog-grid .card-bottom{
    grid-template-columns:minmax(0,1fr) 88px !important;
    min-height:46px;
    gap:7px !important;
  }
  .grid .card-bottom > form,
  #catalog-grid .card-bottom > form{
    width:88px;
  }
  .grid .card-bottom button,
  #catalog-grid .card-bottom button,
  .grid .card-bottom .product-open,
  #catalog-grid .card-bottom .product-open{
    width:88px !important;
    min-width:88px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 7px !important;
    font-size:11px !important;
  }
  .grid .card .desc,
  #catalog-grid .card .desc{
    min-height:34px;
  }
}


/* THB mobile fix: beri jarak antara harga dan tombol pada kartu produk */
.grid .card-bottom,
#catalog-grid .card-bottom{
  column-gap:14px !important;
}
.grid .card-bottom > .discount-price,
#catalog-grid .card-bottom > .discount-price,
.grid .card-bottom > strong,
#catalog-grid .card-bottom > strong{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  padding-right:2px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.2 !important;
}
.grid .card-bottom .discount-new,
#catalog-grid .card-bottom .discount-new{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
@media(max-width:640px){
  .grid .card-bottom,
  #catalog-grid .card-bottom{
    grid-template-columns:minmax(0,1fr) 86px !important;
    column-gap:12px !important;
    align-items:center !important;
  }
  .grid .card-bottom > form,
  #catalog-grid .card-bottom > form{
    width:86px !important;
    min-width:86px !important;
  }
  .grid .card-bottom button,
  #catalog-grid .card-bottom button,
  .grid .card-bottom .product-open,
  #catalog-grid .card-bottom .product-open{
    width:86px !important;
    min-width:86px !important;
    font-size:11px !important;
    padding-inline:5px !important;
  }
  .grid .card-bottom > .discount-price,
  #catalog-grid .card-bottom > .discount-price{
    font-size:clamp(13px,3.8vw,16px) !important;
  }
}

/* Katalog.php: ruang harga dan tombol lebih aman pada kartu dua kolom di HP */
#catalog-grid .catalog-card .card-bottom {
  grid-template-columns: minmax(0, 1fr) 86px !important;
  column-gap: 12px !important;
  align-items: center !important;
}
#catalog-grid .catalog-card .card-bottom > .discount-price,
#catalog-grid .catalog-card .card-bottom > strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.2 !important;
}
#catalog-grid .catalog-card .card-bottom > form,
#catalog-grid .catalog-card .card-bottom > .product-open {
  width: 86px !important;
  min-width: 86px !important;
}
@media (max-width: 640px) {
  #catalog-grid .catalog-card .card-bottom > .discount-price,
  #catalog-grid .catalog-card .card-bottom > strong {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }
  #catalog-grid .catalog-card .card-bottom button,
  #catalog-grid .catalog-card .card-bottom .product-open {
    font-size: 11px !important;
    padding-inline: 4px !important;
  }
}