/* ============================================================
   Eastcliff SORT & FILTER

   File terpisah, class sendiri (.ecw-filter*), JS sendiri. Tidak
   berbagi satu baris pun dengan panel keranjang/akun - keduanya memang
   mirip bentuknya, tapi menyatukannya berarti mengubah salah satu
   selalu berisiko menggeser yang lain.
   ============================================================ */

:root,
body {
  --ecw-f-w: 420px;
  --ecw-f-bg: var(--ecw-surface);
  --ecw-f-fg: var(--ecw-ink);
  --ecw-f-muted: var(--ecw-muted);
  --ecw-f-line: var(--ecw-line);
  --ecw-f-accent: var(--ecw-ink);
  --ecw-f-overlay: rgba(0, 0, 0, 0.5);
  --ecw-f-speed: 380ms;
}

/* ------------------------------------------------------------
   TOMBOL
   ------------------------------------------------------------ */

.ecw-filter-wrap {
  --ecw-f-trigger-fg: var(--ecw-ink);
  --ecw-f-trigger-bg: var(--ecw-surface);
  --ecw-f-trigger-line: var(--ecw-ink);

  display: flex;
}

/* Class digandakan sampai 0-3-0.

   Kit Elementor menulis aturan untuk `button` dengan bobot 0-2-0
   (.elementor-kit-8 button) dan file itu dimuat SETELAH file ini. Tanpa
   penggandaan, tombol ini mewarisi latar hitam pekat milik Kit - jadi
   yang seharusnya kotak bergaris tipis malah tampil sebagai balok hitam.

   Tidak pakai !important supaya kalau suatu saat kamu benar-benar perlu
   mengunci satu warna dari Elementor, !important dari sana masih bisa
   menang di atas ini. */
.ecw-filter-trigger.ecw-filter-trigger.ecw-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ecw-sp-sm);
  padding: var(--ecw-sp-sm) var(--ecw-sp-md);
  border: 1px solid var(--ecw-f-trigger-line);
  border-radius: 0;
  background: var(--ecw-f-trigger-bg);
  color: var(--ecw-f-trigger-fg);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: 0.08em;
  line-height: var(--ecw-lh-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--ecw-t-base) ease, color var(--ecw-t-base) ease;
}

.ecw-filter-trigger.ecw-filter-trigger.ecw-filter-trigger:hover {
  background: var(--ecw-f-trigger-fg);
  color: var(--ecw-f-trigger-bg);
}

.ecw-filter__icon {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Angka filter aktif. Ada supaya orang yang sudah menggulir jauh tetap
   tahu daftar yang dilihatnya sedang tersaring. */
.ecw-filter-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--ecw-sp-2xs);
  background: var(--ecw-f-accent);
  color: var(--ecw-on-ink);
  font-size: var(--ecw-text-micro);
  line-height: 1;
}

/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */

.ecw-filter-panel {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.ecw-filter-panel[hidden] {
  display: none;
}

.ecw-filter-panel__overlay {
  position: absolute;
  inset: 0;
  background: var(--ecw-f-overlay);
  opacity: 0;
  transition: opacity var(--ecw-f-speed) ease;
}

.ecw-filter-panel.is-open .ecw-filter-panel__overlay {
  opacity: 1;
}

.ecw-filter-panel__box {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--ecw-f-w), 100vw);
  background: var(--ecw-f-bg);
  color: var(--ecw-f-fg);
  transition: transform var(--ecw-f-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.ecw-filter-panel--right .ecw-filter-panel__box {
  right: 0;
  transform: translateX(100%);
}

.ecw-filter-panel--left .ecw-filter-panel__box {
  left: 0;
  transform: translateX(-100%);
}

.ecw-filter-panel.is-open .ecw-filter-panel__box {
  transform: translateX(0);
}

html.ecw-filter-open {
  overflow: hidden;
}

.ecw-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ecw-sp-sm);
  padding: var(--ecw-sp-lg) var(--ecw-sp-lg);
  border-bottom: 1px solid var(--ecw-f-line);
}

.ecw-filter-panel__title {
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Class digandakan sampai 0-3-0.

   Elementor Kit menulis aturan untuk `button` dengan bobot 0-2-0
   (.elementor-kit-8 button) dan file itu dimuat setelah file ini.
   Tanpa penggandaan, tombol tutup mewarisi latar hitam milik Kit dan
   ikonnya hilang. Pelajaran yang sama sudah kena di panel keranjang. */
.ecw-filter-panel__close.ecw-filter-panel__close.ecw-filter-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ecw-f-fg);
  cursor: pointer;
}

.ecw-filter-panel__close svg {
  width: 20px;
  height: 20px;
}

.ecw-filter-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ecw-sp-2xs) var(--ecw-sp-lg) var(--ecw-sp-xl);
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   FILTER AKTIF
   ------------------------------------------------------------ */

.ecw-filter-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ecw-sp-xs);
  padding: var(--ecw-sp-md) 0;
  border-bottom: 1px solid var(--ecw-f-line);
}

.ecw-filter-active__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecw-sp-xs);
  flex: 1;
}

.ecw-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ecw-sp-2xs);
  padding: var(--ecw-sp-2xs) var(--ecw-sp-xs);
  border: 1px solid var(--ecw-f-fg);
  color: var(--ecw-f-fg);
  font-size: var(--ecw-text-micro);
  line-height: 1;
  text-decoration: none;
}

.ecw-filter-chip svg {
  width: 11px;
  height: 11px;
}

.ecw-filter-chip:hover {
  background: var(--ecw-f-fg);
  color: var(--ecw-f-bg);
}

.ecw-filter-clear {
  color: var(--ecw-f-muted);
  font-size: var(--ecw-text-micro);
  text-decoration: underline;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   GRUP
   ------------------------------------------------------------ */

.ecw-filter-group {
  padding: var(--ecw-sp-lg) 0;
  border-bottom: 1px solid var(--ecw-f-line);
}

.ecw-filter-group:last-child {
  border-bottom: 0;
}

.ecw-filter-group__title {
  margin: 0 0 var(--ecw-sp-md);
  color: var(--ecw-f-fg);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ecw-filter-group__body--list {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-3xs);
}

.ecw-filter-group__body--size {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--ecw-sp-xs);
}

/* ------------------------------------------------------------
   PILIHAN
   ------------------------------------------------------------ */

.ecw-filter-opt {
  display: flex;
  align-items: center;
  gap: var(--ecw-sp-sm);
  padding: var(--ecw-sp-xs) 0;
  color: var(--ecw-f-fg);
  font-size: var(--ecw-text-sm);
  line-height: var(--ecw-lh-snug);
  text-decoration: none;
  cursor: pointer;
}

.ecw-filter-opt__label {
  flex: 1;
}

.ecw-filter-opt__count {
  color: var(--ecw-f-muted);
  font-size: var(--ecw-text-micro);
  font-variant-numeric: tabular-nums;
}

/* Kotak centang dan bulatan radio digambar dari border, bukan input
   asli - input bawaan tidak bisa diwarnai konsisten antar browser dan
   selalu membawa sudut membulat bawaan sistem. */
.ecw-filter-opt__box {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ecw-f-muted);
  background: transparent;
  transition: background-color var(--ecw-t-fast) ease, border-color var(--ecw-t-fast) ease;
}

.ecw-filter-opt__radio {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ecw-f-muted);
  border-radius: 50%;
  transition: border-color var(--ecw-t-fast) ease, box-shadow var(--ecw-t-fast) ease;
}

.ecw-filter-opt.is-on .ecw-filter-opt__box {
  border-color: var(--ecw-f-accent);
  background: var(--ecw-f-accent);
  box-shadow: inset 0 0 0 2px var(--ecw-f-bg);
}

.ecw-filter-opt.is-on .ecw-filter-opt__radio {
  border-color: var(--ecw-f-accent);
  box-shadow: inset 0 0 0 3px var(--ecw-f-bg), inset 0 0 0 9px var(--ecw-f-accent);
}

.ecw-filter-opt:hover .ecw-filter-opt__box,
.ecw-filter-opt:hover .ecw-filter-opt__radio {
  border-color: var(--ecw-f-accent);
}

/* -------- Warna -------- */

/* -------- Ukuran -------- */

.ecw-filter-opt--size {
  justify-content: center;
  padding: var(--ecw-sp-sm) var(--ecw-sp-2xs);
  border: 1px solid var(--ecw-f-line);
  font-size: var(--ecw-text-caption);
  text-align: center;
}

.ecw-filter-opt--size .ecw-filter-opt__label {
  flex: none;
}

.ecw-filter-opt--size:hover {
  border-color: var(--ecw-f-accent);
}

.ecw-filter-opt--size.is-on {
  border-color: var(--ecw-f-accent);
  background: var(--ecw-f-accent);
  color: var(--ecw-f-bg);
}

/* -------- Hasil nol --------

   Ditampilkan tapi dimatikan, bukan dihapus. Pengunjung tetap melihat
   ukuran atau warna itu memang ada di toko - cuma tidak tersedia untuk
   kombinasi yang sedang dipilih. Dihapus diam-diam malah bikin katalog
   terlihat lebih miskin dari aslinya. */
.ecw-filter-opt.is-dead {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   SEDANG MENGAMBIL HASIL BARU

   Dua tempat, dua cara - dan bedanya disengaja.

   GRID dapat skeleton sungguhan: kartunya diganti kotak kosong. Jumlah
   dan bentuk hasil memang berubah setelah difilter, jadi menahan kartu
   lama di layar malah menampilkan sesuatu yang sudah pasti salah.

   PANEL tidak diganti DOM-nya, cuma tulisannya disamarkan lewat CSS.
   Susunan pilihan di panel hampir tidak berubah antar filter, dan
   membangun ulang isinya akan menghilangkan posisi gulir - persis
   masalah yang sudah susah payah dijaga di swapPanel().
   ============================================================ */

.ecw-filter-busy {
  pointer-events: none;
}

/* -------- Kerangka kartu -------- */

/* min-height di sini cuma jaring pengaman. Nilai sebenarnya ditulis
   inline oleh JS dari tinggi kartu yang sedang tampil, supaya tinggi
   halaman tidak berubah sedikit pun saat hasil lama diganti kerangka
   lalu diganti hasil baru. Yang di CSS dipakai kalau pengukurannya
   gagal - misalnya grid sedang kosong. */
.ecw-skel-card {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-sm);
  min-height: 260px;
}

.ecw-skel {
  background-color: var(--ecw-line);
  border-radius: 0;
}

.ecw-skel--media {
  flex: 1;
  min-height: 120px;
}

.ecw-skel--line {
  height: 10px;
}

.ecw-skel--title {
  width: 70%;
}

.ecw-skel--price {
  width: 35%;
}

/* -------- Panel: teks disamarkan, bukan dihapus -------- */

.ecw-filter-panel.is-busy .ecw-filter-opt__label,
.ecw-filter-panel.is-busy .ecw-filter-opt__count,
.ecw-filter-panel.is-busy .ecw-filter-chip span {
  color: transparent;
  background-color: var(--ecw-line);
  border-radius: 0;
}

.ecw-filter-panel.is-busy .ecw-filter-panel__body {
  pointer-events: none;
}

/* -------- Kilau -------- */

@keyframes ecw-skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.ecw-skel,
.ecw-filter-panel.is-busy .ecw-filter-opt__label,
.ecw-filter-panel.is-busy .ecw-filter-opt__count,
.ecw-filter-panel.is-busy .ecw-filter-chip span {
  background-image: linear-gradient(
    90deg,
    var(--ecw-line) 25%,
    var(--ecw-surface-2) 37%,
    var(--ecw-line) 63%
  );
  background-size: 200% 100%;
  animation: ecw-skel-shimmer 1.4s linear infinite;
}

/* Kilau dimatikan untuk yang minta gerakan dikurangi. Warna dasarnya
   tetap ada, jadi kerangkanya masih terbaca sebagai "sedang dimuat" -
   cuma tidak bergerak. */
@media (prefers-reduced-motion: reduce) {
  .ecw-skel,
  .ecw-filter-panel.is-busy .ecw-filter-opt__label,
  .ecw-filter-panel.is-busy .ecw-filter-opt__count,
  .ecw-filter-panel.is-busy .ecw-filter-chip span {
    background-image: none;
    animation: none;
  }
}

/* ------------------------------------------------------------
   LAYAR KECIL
   ------------------------------------------------------------ */

@media (max-width: 480px) {
  .ecw-filter-panel__box {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecw-filter-panel__box,
  .ecw-filter-panel__overlay {
    transition: none;
  }
}

/* ============================================================
   RENTANG HARGA

   Dua <input type="range"> ditumpuk di atas satu batang. Itu satu-
   satunya cara membuat slider dua gagang tanpa menarik pustaka, dan
   caranya menuntut tiga hal yang mudah terlewat:

   1. Input-nya sendiri tidak menerima klik (pointer-events: none),
      hanya GAGANGNYA. Tanpa itu, input yang ada di atas menutupi
      seluruh lebar batang dan gagang di bawahnya tidak bisa diraih
      sama sekali - slider terlihat utuh tapi separuhnya mati.
   2. Track bawaan browser disembunyikan; yang terlihat adalah <span>
      milik kita, supaya warnanya ikut token.
   3. Gagangnya digambar dua kali - sekali untuk WebKit, sekali untuk
      Firefox. Aturan yang digabung dalam satu selektor akan dibuang
      seluruhnya oleh browser yang tidak mengenal salah satunya.
   ============================================================ */

.ecw-filter-group--price .ecw-price {
  display: block;
  margin: 0;
  padding: 0 var(--ecw-sp-sm) var(--ecw-sp-sm);
}

/* Slider hanya ada kalau JS memasangnya. Tanpa JS yang tersisa adalah
   dua kotak angka dan tombol Terapkan - dan itu memang cukup. */
.ecw-filter-group--price .ecw-price__slider {
  display: none;
}

.ecw-filter-group--price .ecw-price.has-slider .ecw-price__slider {
  position: relative;
  display: block;
  height: var(--ecw-sp-lg);
  margin-bottom: var(--ecw-sp-xs);
}

.ecw-filter-group--price .ecw-price__track,
.ecw-filter-group--price .ecw-price__fill {
  position: absolute;
  top: 50%;
  height: var(--ecw-sp-3xs);
  border-radius: var(--ecw-r-pill);
  transform: translateY(-50%);
}

.ecw-filter-group--price .ecw-price__track {
  left: 0;
  right: 0;
  background: var(--ecw-line);
}

.ecw-filter-group--price .ecw-price__fill {
  background: var(--ecw-ink);
}

.ecw-filter-group--price .ecw-price__range {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.ecw-filter-group--price .ecw-price__range:focus {
  outline: 0;
}

.ecw-filter-group--price .ecw-price__range::-webkit-slider-thumb {
  width: var(--ecw-sp-md);
  height: var(--ecw-sp-md);
  border: var(--ecw-border) solid var(--ecw-ink);
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.ecw-filter-group--price .ecw-price__range::-moz-range-thumb {
  width: var(--ecw-sp-md);
  height: var(--ecw-sp-md);
  border: var(--ecw-border) solid var(--ecw-ink);
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface);
  cursor: grab;
  pointer-events: auto;
}

.ecw-filter-group--price .ecw-price__range::-moz-range-track {
  background: none;
  border: 0;
}

.ecw-filter-group--price .ecw-price__fields {
  display: flex;
  align-items: flex-end;
  gap: var(--ecw-sp-xs);
}

.ecw-filter-group--price .ecw-price__field {
  flex: 1 1 0;
  display: block;
  min-width: 0;
}

.ecw-filter-group--price .ecw-price__field-label {
  display: block;
  margin-bottom: var(--ecw-sp-3xs);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: var(--ecw-track-label);
  text-transform: uppercase;
}

.ecw-filter-group--price .ecw-price__input {
  box-sizing: border-box;
  width: 100%;
  height: var(--ecw-control-h);
  margin: 0;
  padding: 0 var(--ecw-sp-xs);
  border: var(--ecw-border) solid var(--ecw-line-strong);
  border-radius: var(--ecw-r-sm);
  background: var(--ecw-surface);
  color: var(--ecw-ink);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-sm);
}

.ecw-filter-group--price .ecw-price__input:focus {
  border-color: var(--ecw-ink);
  outline: 0;
}

.ecw-filter-group--price .ecw-price__dash {
  padding-bottom: var(--ecw-sp-sm);
  color: var(--ecw-muted);
}

.ecw-filter-group--price .ecw-price__apply {
  display: block;
  width: 100%;
  height: var(--ecw-control-h);
  margin-top: var(--ecw-sp-xs);
  padding: 0 var(--ecw-sp-sm);
  border: 0;
  border-radius: var(--ecw-r-sm);
  background: var(--ecw-ink);
  color: var(--ecw-on-ink);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: var(--ecw-track-label);
  text-transform: uppercase;
  cursor: pointer;
}

.ecw-filter-group--price .ecw-price__apply:hover {
  background: var(--ecw-ink-2);
}