/* Ikon + badge, dari habits-site/SiteHeader.dc.html. */
/* Toggle adalah <a href>, jadi keadaan :visited dan :focus ditulis eksplisit.
   Tanpa itu, tautan ke /cart/ yang sudah pernah dibuka mewarisi ungu bawaan
   browser begitu ada satu deklarasi color yang gagal dihitung. */
.hbt-cart-toggle.hbt-cart-toggle,
.hbt-cart-toggle.hbt-cart-toggle:link,
.hbt-cart-toggle.hbt-cart-toggle:visited {
  position: relative;
  color: var(--hbt-ink); text-decoration: none;
  border: 0; background: none;
}
.hbt-cart-toggle.hbt-cart-toggle:hover,
.hbt-cart-toggle.hbt-cart-toggle:focus { color: var(--hbt-accent); }
.hbt-cart-toggle:focus { outline: none; }
.hbt-cart-toggle:focus-visible {
  outline: 2px solid var(--hbt-accent); outline-offset: 3px;
}
/*
 * Badge berpatokan pada IKON, bukan pada seluruh tautan.
 *
 * Di mode bertumpuk tautannya setinggi ikon + label; badge yang berpatokan
 * pada tautan akan melayang jauh di atas ikon, bukan menempel di pojoknya.
 * Pembungkus ini dicetak di kedua mode supaya angka offset badge di panel
 * Style berarti sama di mana pun widgetnya dipasang.
 */
.hbt-cart-toggle__icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

/*
 * Patokan badge dipindah HANYA di mode bertumpuk.
 *
 * Di mode ikon saja pembungkusnya sengaja dibiarkan `position: static` supaya
 * badge tetap berpatokan pada .hbt-cart-toggle seperti sebelumnya — kalau
 * tidak, badge di header bergeser 4px (selebar --hbt-icon-pad) hanya karena
 * markupnya dirapikan. Terukur: lama x=362 y=39, dengan patokan ikon x=358
 * y=43. Perubahan tampilan yang tidak diminta tetap perubahan tampilan.
 */
.hbt-cart-toggle--stacked .hbt-cart-toggle__icon { position: relative; }

.hbt-cart-toggle__badge {
  position: absolute; top: -5px; right: -7px;
  width: 15px; height: 15px;
  background: var(--hbt-accent); color: #fff;
  font-family: var(--hbt-font); font-size: 10px; line-height: 1;
  border-radius: 50%; display: grid; place-items: center;
}
.hbt-cart-toggle__badge[hidden] { display: none; }

/*
 * Bentuk bar navigasi bawah: ikon di atas, label di bawahnya.
 *
 * Kelas digandakan karena tautannya <a> dan aturan dasar .hbt-cart-toggle
 * di atas juga digandakan — kalau tidak, `display` di sana (0,2,0) menang
 * atas grid di sini (0,1,0) dan labelnya berdiri di samping ikon.
 */
.hbt-cart-toggle--stacked.hbt-cart-toggle--stacked {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
  /* Aturan ikon header di habits-core.css memakai content-box supaya kotak
     sentuhnya menempel isi. Di sel bar bawah lebarnya 100%, jadi padding
     yang ditambahkan di luar lebar itu membuatnya meluber keluar sel. */
  box-sizing: border-box;
}

/*
 * ==========================================================
 * PEMBUNGKUS WIDGET IKUT MENCIUT
 * ==========================================================
 * habits-core.css memberi .elementor-widget-container milik ikon keranjang
 * `display: inline-flex` — benar untuk header, karena ikon di sana memang
 * harus selebar isinya dan tidak boleh memuai memenuhi baris.
 *
 * Di bar navigasi bawah itu justru sumber masalah: `width: 100%` pada tautan
 * bertumpuk mengacu ke pembungkus yang sudah menciut duluan. Terukur di sel
 * grid 97,5px: pembungkus 60,3px, tautan ikut 60,3px — labelnya tidak duduk
 * di tengah selnya.
 *
 * Dipilih dengan :has() supaya aturan header tidak perlu disentuh sama
 * sekali: yang berubah hanya instance yang benar-benar memakai tata letak
 * bertumpuk, dikenali dari kelas pada tautannya sendiri.
 */
.elementor-widget-habits_cart_icon > .elementor-widget-container:has(.hbt-cart-toggle--stacked) {
  display: block;
  width: 100%;
}

.hbt-cart-toggle__label {
  font-family: var(--hbt-font);
  font-size: 11px;
  line-height: 1.2;
  /* Label dua kata tidak boleh melebarkan sel grid dan mendorong item lain. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Baris item — dipakai panel dan halaman keranjang. */
.hbt-cart__list, .hbt-cart__items { font-family: var(--hbt-font); }
.hbt-cart__list.is-busy, .hbt-cart__items.is-busy { opacity: .55; pointer-events: none; }

.hbt-cart__row {
  --hbt-cart-thumb: 100px;
  display: grid; grid-template-columns: var(--hbt-cart-thumb) 1fr auto;
  gap: 22px; padding: 22px 0;
  border-bottom: 1px solid var(--hbt-border-2);
  align-items: start;
}
/*
 * ==========================================================
 * TIGA GARIS YANG MENUMPUK DI DRAWER
 * ==========================================================
 * Di drawer, tiga pemisah berbeda kebetulan berdiri berdekatan:
 *
 *   1. garis bawah baris item terakhir   (.hbt-cart__row)
 *   2. garis atas kaki panel             (.hbt-panel__foot)
 *   3. garis atas baris Total            (.hbt-sum__total)
 *
 * Dulu ketiganya tidak terlihat menumpuk karena di antaranya ada baris
 * subtotal dan ongkir. Begitu dua baris itu dibuang dari drawer, yang
 * tersisa tiga garis dengan ruang kosong di antaranya.
 *
 * Yang benar tinggal satu: garis kaki panel. Dua lainnya dimatikan pada
 * posisi di mana mereka tidak memisahkan apa pun.
 */

/* Garis bawah baris terakhir tidak memisahkan apa pun — di bawahnya sudah
   ujung daftar. */
.hbt-panel--cart .hbt-cart__row:last-child { border-bottom: 0; }

/* Total yang jadi baris pertama ringkasan berarti tidak ada baris rincian di
   atasnya untuk dipisahkan; garisnya cuma mengulang garis kaki panel. Di
   halaman keranjang Total tetap punya garis karena ada subtotal di atasnya. */
.hbt-cart__totals .hbt-sum__total:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.hbt-cart__media {
  aspect-ratio: 1; border-radius: var(--hbt-radius-sm);
  background: var(--hbt-surface); border: 1px solid var(--hbt-border);
  overflow: hidden;
}
/* Ukuran thumbnail diatur aturan bersama di habits-core.css. */

.hbt-cart__name { font-size: 16px; font-weight: 500; color: var(--hbt-ink); text-decoration: none; }
.hbt-cart__name:hover { color: var(--hbt-accent); }
.hbt-cart__variant { font-size: 13px; color: var(--hbt-muted); margin-top: 5px; }
.hbt-cart__variant p { margin: 0; }

.hbt-cart__actions { display: flex; align-items: center; gap: 18px; margin-top: 16px; }

.hbt-qty {
  display: flex; align-items: center;
  height: 38px; border: 1px solid #E2E2DE; border-radius: var(--hbt-pill);
}
.hbt-qty__btn,
.hbt-qty__btn:hover,
.hbt-qty__btn:focus,
.hbt-qty__btn:active {
  width: 36px; height: 100%;
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--hbt-ink); font-family: inherit;
}
.hbt-qty__btn:hover { background: var(--hbt-surface); color: var(--hbt-accent); }
.hbt-qty__btn:focus { outline: none; }
.hbt-qty__btn:focus-visible { outline: 2px solid var(--hbt-accent); outline-offset: -2px; }
input.hbt-qty__value {
  width: 34px; height: auto; margin: 0; padding: 0;
  text-align: center;
  border: 0; border-radius: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--hbt-ink);
  -moz-appearance: textfield;
}
input.hbt-qty__value:focus { border: 0; box-shadow: none; }
.hbt-qty__value::-webkit-outer-spin-button,
.hbt-qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hbt-cart__remove,
.hbt-cart__remove:hover,
.hbt-cart__remove:focus,
.hbt-cart__remove:active {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--hbt-muted);
  text-decoration: underline;
}
.hbt-cart__remove:hover,
.hbt-cart__remove:focus { color: var(--hbt-ink); }
.hbt-cart__remove:focus { outline: none; }
.hbt-cart__remove:focus-visible { outline: 2px solid var(--hbt-accent); outline-offset: 2px; }

.hbt-cart__price { text-align: right; }
.hbt-cart__line  { font-size: 16px; font-weight: 500; }
.hbt-cart__was   { font-size: 12.5px; color: var(--hbt-muted-2); text-decoration: line-through; margin-top: 4px; }

/* Ringkasan. */
.hbt-sum__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; font-size: 14px; font-family: var(--hbt-font);
}
.hbt-sum__label { color: var(--hbt-body); }
.hbt-sum__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbt-sum__drop,
.hbt-sum__drop:hover,
.hbt-sum__drop:focus,
.hbt-sum__drop:active {
  border: 0; background: transparent; cursor: pointer;
  color: var(--hbt-muted); font-size: 15px; line-height: 1; padding: 0 0 0 4px;
}
.hbt-sum__drop:hover,
.hbt-sum__drop:focus { color: var(--hbt-sale); }
.hbt-sum__drop:focus { outline: none; }
.hbt-sum__drop:focus-visible { outline: 2px solid var(--hbt-accent); outline-offset: 2px; }
.hbt-sum__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--hbt-border-2);
  margin-top: 12px; padding-top: 18px;
  font-family: var(--hbt-font);
}
.hbt-sum__total-label { font-size: 14.5px; }
.hbt-sum__total-value { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Kode promo. */
.hbt-coupon { display: flex; gap: 10px; margin-top: 16px; }
/* `input` disertakan supaya menang atas reset.css tema — lihat catatan di
   habits-newsletter.css. */
input.hbt-coupon__input {
  flex: 1; min-width: 0; width: auto; height: 46px;
  margin: 0; padding: 0 20px;
  border: 1px solid #E2E2DE; border-radius: var(--hbt-pill);
  font-family: var(--hbt-font); font-size: 13.5px; color: var(--hbt-ink);
  background: #fff; outline: 0;
}
input.hbt-coupon__input:focus { border-color: var(--hbt-ink); box-shadow: none; }
.hbt-coupon__input::placeholder { color: #A0A0A0; }
.hbt-coupon__btn,
.hbt-coupon__btn:active {
  height: 46px; padding: 0 24px;
  border-radius: var(--hbt-pill); border: 1px solid var(--hbt-ink);
  background: transparent; color: var(--hbt-ink);
  font-family: var(--hbt-font); font-size: 14px; cursor: pointer; white-space: nowrap;
}
.hbt-coupon__btn:hover,
.hbt-coupon__btn:focus { background: var(--hbt-ink); color: #fff; }
.hbt-coupon__btn:focus { outline: none; }
.hbt-coupon__btn:focus-visible { outline: 2px solid var(--hbt-accent); outline-offset: 2px; }

/* Panel. */
.hbt-panel--cart .hbt-cart__row { grid-template-columns: 72px 1fr; gap: 14px; padding: 16px 0; }
.hbt-panel--cart .hbt-cart__price { grid-column: 2; text-align: left; margin-top: 10px; }
.hbt-panel--cart .hbt-cart__name  { font-size: 14.5px; }
.hbt-panel--cart .hbt-cart__line  { font-size: 15px; }
.hbt-panel--cart .hbt-panel__foot { display: flex; flex-direction: column; gap: 12px; }
.hbt-panel--cart .hbt-cart__checkout { width: 100%; }
.hbt-cart__link.hbt-cart__link {
  text-align: center; font-size: 13.5px;
  color: var(--hbt-muted); text-decoration: underline;
}
.hbt-cart__link.hbt-cart__link:hover { color: var(--hbt-ink); }

/* Keranjang kosong bukan kondisi error: pesan ramah + tombol ke Shop. */
.hbt-cart__empty {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 40px 0; text-align: center;
  font-family: var(--hbt-font); font-size: 14px; color: var(--hbt-muted);
}
.hbt-cart__empty[hidden] { display: none; }
.hbt-cart__empty p { margin: 0; }

.hbt-cart__msg { margin: 0; font-size: 13px; min-height: 1em; font-family: var(--hbt-font); color: var(--hbt-accent); }
.hbt-cart__msg.is-err { color: var(--hbt-sale); }

@media (max-width: 820px) {
  .hbt-cart__row { grid-template-columns: var(--hbt-cart-thumb, 76px) 1fr; }
  .hbt-cart__price { grid-column: 2; text-align: left; margin-top: 12px; }
}