/* Angka diambil dari habits-site/Shop.dc.html dan Home.dc.html. */
/*
 * height:100% supaya kartu mengisi penuh tinggi barisnya. Equal Height di
 * Loop Grid hanya menyamakan tinggi container loop item — tanpa ini isinya
 * tetap setinggi dirinya sendiri, dan sakelar itu terlihat tidak berpengaruh.
 */
.hbt-card.hbt-card {
  display: flex; flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hbt-border);
  border-radius: var(--hbt-radius);
  overflow: hidden;
  color: var(--hbt-ink);
  text-decoration: none;
  font-family: var(--hbt-font);
}
.hbt-card:hover { border-color: var(--hbt-ink); }

.hbt-card__media {
  position: relative; aspect-ratio: 1;
  background: var(--hbt-surface);
  display: grid; place-items: center;
  overflow: hidden;
}
.hbt-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}

.hbt-card__badge {
  --hbt-badge-offset: 10px;
  position: absolute; top: var(--hbt-badge-offset); right: var(--hbt-badge-offset);
  background: var(--hbt-ink); color: #fff;
  font-size: 12px; line-height: 1.4; padding: 4px 9px;
  border-radius: var(--hbt-radius-xs);
}
.hbt-card__badge--tl { right: auto; left: var(--hbt-badge-offset); }
.hbt-card__badge--br { top: auto; bottom: var(--hbt-badge-offset); }
.hbt-card__badge--bl { top: auto; bottom: var(--hbt-badge-offset); right: auto; left: var(--hbt-badge-offset); }
.hbt-card__badge--new  { background: var(--hbt-accent); }
.hbt-card__badge--sale { background: var(--hbt-sale); }

/* Badan memuai dan harga didorong ke dasarnya, jadi harga sejajar antar
   kartu walau judulnya beda jumlah baris. */
.hbt-card__body  {
  --hbt-card-gap: 0px;
  display: flex; flex-direction: column;
  flex: 1;
  padding: 16px 18px 20px;
}
.hbt-card__title { font-size: 15.5px; font-weight: 500; line-height: 1.4; }
.hbt-card__rating {
  display: flex; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--hbt-muted);
  margin-top: calc(6px + var(--hbt-card-gap));
}
.hbt-card__star { color: var(--hbt-star); }
.hbt-card__rate { color: var(--hbt-ink); }
.hbt-card__price-was {
  font-size: 12.5px; color: var(--hbt-muted-2);
  text-decoration: line-through;
  margin-top: calc(10px + var(--hbt-card-gap));
}
.hbt-card__price { font-size: 17px; margin-top: auto; padding-top: 2px; }

/* Harga coret menempel tepat di atas harga aktif, bukan ikut terdorong. */
.hbt-card__price-was + .hbt-card__price { margin-top: 0; }
.hbt-card__price-was { margin-top: auto; }

/* get_price_html() mencetak <del><ins>; harga coret sudah punya barisnya sendiri. */
.hbt-card__price del { display: none; }
.hbt-card__price ins { text-decoration: none; }

.hbt-card--empty {
  padding: 24px; color: var(--hbt-muted); font-size: 13.5px;
  border-style: dashed; text-align: center;
}

@media (max-width: 640px) {
  .hbt-card__body  { padding: 11px 12px 14px; }
  .hbt-card__title { font-size: 13.5px; line-height: 1.35; }
  .hbt-card__price { font-size: 15px; }
  .hbt-card__price-was { font-size: 11.5px; }
  .hbt-card__badge { font-size: 10px; padding: 3px 6px; }
}


/*
 * Rantai tinggi dari container Elementor sampai ke kartu. Widget wrapper dan
 * .elementor-widget-container ada di antaranya; kalau salah satu tidak
 * meneruskan tingginya, height:100% pada kartu tidak punya acuan.
 */
.elementor-widget-habits_product_card,
.elementor-widget-habits_product_card > .elementor-widget-container {
  height: 100%;
}