/* Token desain habits — spec §6.
   Tiap nilai bisa ditimpa dari panel Style Elementor; token hanya menetapkan default. */
:root {
  --hbt-ink:       #171717;
  --hbt-accent:    #4F6350;
  --hbt-surface:   #F4F4F2;
  --hbt-surface-2: #F2F2F0;
  --hbt-border:    #E8E8E4;
  --hbt-border-2:  #EDEDED;
  --hbt-muted:     #8A8A84;
  --hbt-muted-2:   #9A9A93;
  --hbt-body:      #55554F;
  --hbt-star:      #C9971B;
  --hbt-sale:      #D92D20;
  --hbt-radius:    8px;
  --hbt-radius-sm: 6px;
  --hbt-radius-xs: 4px;
  --hbt-pill:      999px;
  --hbt-font:      'Inter', sans-serif;
}

.hbt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * Kotak pemberitahuan. Dipakai widget yang bisa berada di halaman tanpa
 * prasyaratnya — keranjang yang belum siap, WooCommerce yang belum aktif.
 * Ditaruh di core karena tiga widget memakainya; sebelumnya kelasnya milik
 * My Account dan dipinjam Cart Page, yang tidak memuat CSS itu sama sekali,
 * jadi kotaknya tampil tanpa gaya apa pun.
 */
.hbt-notice {
  padding: 24px; text-align: center;
  font-family: var(--hbt-font); font-size: 13.5px; line-height: 1.6;
  color: var(--hbt-muted);
  border: 1px dashed var(--hbt-border); border-radius: var(--hbt-radius);
}

/*
 * Baris "tidak ada hasil". Dicetak Habits_Query::render_results(), yang
 * melayani dua tempat berbeda — sidebar Filter dan halaman pencarian. Karena
 * markupnya satu, gayanya juga harus satu, dan satu-satunya berkas yang pasti
 * termuat di kedua tempat itu adalah core.
 */
.hbt-results-none {
  font-family: var(--hbt-font);
  font-size: 14px;
  color: var(--hbt-muted);
  padding: 32px 0;
}

/*
 * ==========================================================
 * KEBAL DARI THEME STYLE → LINK
 * ==========================================================
 * Elementor menulis setelan Theme Style → Typography → Link sebagai
 * `{{WRAPPER}} a`, yang di kit jadi `.elementor-kit-N a` — spesifisitas
 * (0,1,1). Selektor komponen kita yang cuma satu kelas, seperti `.hbt-btn`
 * (0,1,0), KALAH dari itu.
 *
 * Akibatnya satu setelan warna tautan akan ikut mengecat teks tombol pil,
 * ikon header, dan tautan kartu produk — padahal semuanya kebetulan berupa
 * <a>, bukan tautan teks. Itu yang membuat warna link di Site Settings
 * terasa tidak bisa dipakai.
 *
 * Kelas digandakan (0,2,0) supaya tetap menang tanpa !important. Dengan
 * begitu Theme Style → Link bebas dipakai untuk tautan teks — tempat yang
 * memang benar untuk mengaturnya — dan komponen ini tidak ikut terseret.
 */

/* Tombol pil dipakai beberapa widget: Flash Sale, Cart Page, auth. */
.hbt-btn.hbt-btn {
  display: inline-grid; place-items: center;
  height: 50px; padding: 0 40px;
  border-radius: var(--hbt-pill);
  border: 1px solid var(--hbt-ink);
  background: transparent;
  color: var(--hbt-ink); text-decoration: none;
  font-family: var(--hbt-font); font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.hbt-btn.hbt-btn:hover,
.hbt-btn.hbt-btn:focus { background: var(--hbt-ink); color: #fff; }
.hbt-btn:focus { outline: none; }
.hbt-btn:focus-visible { outline: 2px solid var(--hbt-accent); outline-offset: 3px; }

.hbt-btn--solid.hbt-btn--solid { background: var(--hbt-ink); color: #fff; }
.hbt-btn--solid.hbt-btn--solid:hover,
.hbt-btn--solid.hbt-btn--solid:focus { background: var(--hbt-accent); border-color: var(--hbt-accent); color: #fff; }

.hbt-btn[disabled] { opacity: .6; cursor: default; }


/*
 * Elementor membuat setiap widget di dalam container flex memuai
 * (--container-widget-flex-grow: 1 diwarisi dari container). Untuk ikon
 * header itu tidak pernah benar: gap container boleh 10px, tapi tiap widget
 * tetap mengambil sepertiga baris dan ikonnya terlempar berjauhan.
 *
 * Percobaan sebelumnya memakai :where() supaya setelan pengguna gampang
 * menang. Spesifisitasnya nol, jadi aturan Elementor sendiri yang menang dan
 * perbaikannya tidak pernah berlaku. Sekarang ditulis dengan spesifisitas
 * yang cukup, dan pengguna tetap bisa menimpanya lewat setelan Width di tab
 * Advanced karena Elementor mencetaknya dengan id elemen.
 */
.e-con > .elementor-widget-habits_cart_icon,
.e-con > .elementor-widget-habits_account_icon,
.e-con > .elementor-widget-habits_menu,
.e-con-inner > .elementor-widget-habits_cart_icon,
.e-con-inner > .elementor-widget-habits_account_icon,
.e-con-inner > .elementor-widget-habits_menu,
.elementor-widget-habits_cart_icon,
.elementor-widget-habits_account_icon,
.elementor-widget-habits_menu {
  --container-widget-width: auto;
  --container-widget-flex-grow: 0;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

/* Isi widget ikon juga tidak boleh melar. */
.elementor-widget-habits_cart_icon > .elementor-widget-container,
.elementor-widget-habits_account_icon > .elementor-widget-container {
  display: inline-flex;
  align-items: center;
}


/*
 * Kotak sentuh ikon header — burger, keranjang, akun.
 *
 * Ditulis satu kali untuk ketiganya. Sebelumnya burger punya kotak tetap
 * 34x34 dan margin-left: -6px sementara dua lainnya cuma ikon telanjang,
 * jadi jaraknya terlihat timpang walau gap containernya sama.
 *
 * Kotaknya menempel isi: lebar dan tinggi mengikuti ukuran ikon, lalu
 * ditambah padding. Jadi mengubah ukuran ikon di panel Style tidak pernah
 * merusak keselarasan ketiganya.
 */
.hbt-menu__burger,
.hbt-cart-toggle,
.hbt-account-toggle {
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--hbt-icon-pad, 4px);
  line-height: 0;
  box-sizing: content-box;
}


/*
 * ==========================================================
 * NOTICE WOOCOMMERCE — DISEJAJARKAN DENGAN KOLOM ISI HALAMAN
 * ==========================================================
 * WooCommerce mencetak .woocommerce-notices-wrapper di luar container
 * Elementor (tepat setelah </header>), jadi kotaknya melebar sampai tepi
 * layar sementara seluruh isi halaman duduk di kolom ber-gutter. Di ponsel
 * bedanya paling terasa: notice menempel ke kiri dan kanan layar.
 *
 * Angka di bawah menyalin geometri container situs ini — diukur dari halaman
 * produk yang sudah tayang: container padding 10px, dan .e-con-inner
 * max-width 90% diatas breakpoint ponsel, 100% di bawahnya. Keduanya ditulis
 * sebagai token, jadi kalau lebar container di Site Settings diubah, yang
 * perlu disesuaikan cuma dua nilai ini — bukan berburu selector.
 */
.woocommerce-notices-wrapper {
  box-sizing: border-box;
  padding-inline: var(--hbt-notice-gutter, 10px);
}
.woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-notices-wrapper > .woocommerce-error {
  box-sizing: border-box;
  max-width: var(--hbt-notice-width, 90%);
  margin-inline: auto;
}

/* Di bawah breakpoint ponsel Elementor (767px) kolom isi memakai lebar penuh
   dikurangi gutter — notice mengikuti supaya tepinya sejajar. */
@media (max-width: 767px) {
  .woocommerce-notices-wrapper > .woocommerce-message,
  .woocommerce-notices-wrapper > .woocommerce-info,
  .woocommerce-notices-wrapper > .woocommerce-error {
    max-width: 100%;
  }
}


/*
 * ==========================================================
 * GAMBAR YANG HARUS MEMENUHI KOTAKNYA
 * ==========================================================
 * Elementor mencetak `.elementor img { height: auto }` — spesifisitas
 * (0,1,1). Aturan gambar kita yang cuma satu kelas, seperti `.hbt-gal__img`
 * (0,1,0), KALAH dari itu di setiap halaman yang dibangun Elementor. Karena
 * `height` jatuh ke auto, kotaknya tidak lagi punya tinggi tetap dan
 * `object-fit: cover` tidak punya apa pun untuk dipotong: foto potret jadi
 * lebih tinggi dari kotaknya.
 *
 * Selama kotak induknya `overflow: hidden`, kelebihan itu cuma terpotong di
 * bawah tanpa terlihat salah — sampai kotak yang sama jadi wadah yang bisa
 * digulir (jalur geser galeri), dan kelebihannya berubah jadi scroll
 * vertikal yang bisa ditarik pengunjung.
 *
 * Kelas digandakan (0,2,0) supaya menang tanpa !important. Ditulis sekali di
 * sini, bukan diulang di tiap berkas komponen: yang menyebabkannya satu, dan
 * perbaikannya sebaiknya juga satu.
 */
.hbt-gal__img.hbt-gal__img,
.hbt-gal__thumb.hbt-gal__thumb img,
.hbt-cart__img.hbt-cart__img,
.hbt-cats__img.hbt-cats__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}