/* ============================================================
   Eastcliff WIDGET
   Semua nilai yang bisa diatur dari panel Style Elementor ditulis
   sebagai CSS custom property dengan nilai cadangan di sini. Jadi
   kalau kontrolnya belum pernah disentuh, tampilannya tetap benar
   (hitam-putih), dan begitu diatur, Elementor cukup menimpa
   variabelnya saja - tidak perlu selector yang saling berebut
   spesifisitas.
   ============================================================ */

:root,
body {
  --ecw-panel-bg: var(--ecw-surface);
  --ecw-panel-fg: var(--ecw-ink);
  --ecw-panel-muted: var(--ecw-muted);
  --ecw-panel-line: var(--ecw-line);
  --ecw-panel-pad: var(--ecw-sp-lg);
  --ecw-speed: var(--ecw-t-panel);

  --ecw-btn-bg: var(--ecw-ink);
  --ecw-btn-fg: var(--ecw-surface);
  --ecw-btn-bg-h: var(--ecw-ink-2);
  --ecw-btn-fg-h: var(--ecw-surface);

  --ecw-thumb-w: 80px;
  --ecw-thumb-ratio: 1;
  --ecw-thumb-bg: var(--ecw-surface-2);
  --ecw-thumb-radius: var(--ecw-r-md);

  --ecw-cross-w: 136px;

  --ecw-tab-fg: var(--ecw-muted);
  --ecw-tab-fg-active: var(--ecw-ink);
  --ecw-tab-line: var(--ecw-ink);

  --ecw-field-fg: var(--ecw-ink);
  --ecw-field-bg: var(--ecw-surface);
  --ecw-field-line: var(--ecw-line-strong);
  --ecw-field-line-focus: var(--ecw-ink);
  --ecw-field-radius: 0px;
}

.ecw-icon {
  display: block;
  flex: none;
}

/* ============================================================
   TOMBOL IKON (TRIGGER)
   ============================================================ */

.ecw-trigger-wrap {
  display: flex;
  align-items: center;
}

.ecw-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ecw-sp-xs);
  padding: 0;
  /* PENYEBAB TOMBOL "JEDAK-JEDUK" PAS HOVER:
     Sebelumnya di sini "border: 0" - artinya TIDAK ADA ruang border
     yang disiapkan sama sekali. Kontrol Style > Icon Button > Hover >
     Border Color di Elementor cuma mengganti WARNA border, tapi kalau
     di keadaan Normal border-nya memang belum ada (lebar 0), begitu
     hover aktif dan lebar border ikut muncul, ukuran kotak tombolnya
     jadi berubah - itu yang kelihatan seperti melompat/berdenyut.

     Diperbaiki dengan menyiapkan border 1px TRANSPARAN dari awal (jadi
     tidak kelihatan, tampilannya sama seperti border:0 sebelumnya) dan
     box-sizing:border-box supaya lebar border itu tidak pernah menambah
     ukuran luar tombol - baik di keadaan normal maupun hover, ukurannya
     sudah pasti sama persis. Hover jadi murni ganti warna, tidak pernah
     ganti ukuran lagi. */
  border: 1px solid transparent;
  box-sizing: border-box;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color var(--ecw-t-base) ease, background-color var(--ecw-t-base) ease, border-color var(--ecw-t-base) ease;
}

.ecw-trigger__icon {
  position: relative;
  display: inline-flex;
}

.ecw-trigger__label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ecw-trigger__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--ecw-sp-2xs);
  border-radius: 50%;
  background: var(--ecw-ink);
  box-shadow: 0 0 0 var(--ecw-sp-3xs) var(--ecw-surface);
  color: var(--ecw-on-ink);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Badge disembunyikan waktu keranjang kosong - tapi cuma kalau
   opsinya dinyalakan (class ada di pembungkus, lihat catatan di
   class-ecw-cart-widget.php). */
.ecw-trigger-wrap--hide-empty .ecw-trigger__badge[data-ecw-empty="1"] {
  display: none;
}

/* ============================================================
   PANEL (CANGKANG)
   ============================================================ */

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

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

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

.ecw-panel__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(var(--ecw-panel-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ecw-panel-bg);
  color: var(--ecw-panel-fg);
  transition: transform var(--ecw-speed) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  outline: none;
}

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

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

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

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

/* Kalau pengunjung menyalakan "kurangi animasi" di sistem operasinya,
   panel langsung muncul tanpa geser. */
@media (prefers-reduced-motion: reduce) {
  .ecw-panel__overlay,
  .ecw-panel__sheet {
    transition-duration: 0.01ms;
  }
}

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

/* Judul panel = judul seksi halaman keranjang: huruf biasa, semibold.
   Dua kelas (0-2-0) karena Kit Elementor menata h2 lewat
   `.elementor-kit-N h2` (0-1-1). */
.ecw-panel .ecw-panel__title {
  display: flex;
  align-items: center;
  gap: var(--ecw-sp-xs);
  margin: 0;
  color: inherit;
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-h3);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
  letter-spacing: var(--ecw-track-tight);
  text-transform: none;
}

.ecw-panel .ecw-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ecw-sp-lg);
  height: var(--ecw-sp-lg);
  padding: 0 var(--ecw-sp-xs);
  box-sizing: border-box;
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface-2);
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: var(--ecw-track-none);
  font-variant-numeric: tabular-nums;
}

/* Target sentuh 40px, ikon 20px. Dulu `margin: -var(...)` - CSS tidak
   valid, dibuang browser - dan ikonnya tidak punya ukuran sendiri. */
.ecw-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ecw-trigger-h);
  height: var(--ecw-trigger-h);
  padding: 0;
  margin: calc(var(--ecw-sp-xs) * -1);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.ecw-panel .ecw-panel__close .ecw-icon {
  width: var(--ecw-icon);
  height: var(--ecw-icon);
}

.ecw-panel__close:hover,
.ecw-panel__close:focus,
.ecw-panel__close:active {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.ecw-panel__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ecw-panel__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ecw-panel-bg) 70%, transparent);
}

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

.ecw-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--ecw-panel-line);
  border-top-color: var(--ecw-panel-fg);
  border-radius: 50%;
  animation: ecw-spin 0.7s linear infinite;
}

@keyframes ecw-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Kunci scroll halaman waktu panel terbuka.
   CATATAN: di situs ini elemen yang benar-benar men-scroll adalah
   <body>, bukan <html> - jadi dua-duanya dikunci sekaligus supaya
   aman apa pun strukturnya. */
body.ecw-panel-open,
html.ecw-panel-open {
  overflow: hidden !important;
}

/* ============================================================
   TOMBOL
   ============================================================ */

.ecw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--ecw-sp-md) var(--ecw-sp-lg);
  border: 0;
  background: var(--ecw-btn-bg);
  color: var(--ecw-btn-fg);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ecw-t-base) ease, color var(--ecw-t-base) ease;
}

.ecw-btn:hover,
.ecw-btn:focus-visible {
  background: var(--ecw-btn-bg-h);
  color: var(--ecw-btn-fg-h);
}

.ecw-btn--ghost {
  background: transparent;
  color: var(--ecw-panel-fg);
  border: 1px solid var(--ecw-panel-line);
}

.ecw-btn--ghost:hover {
  background: transparent;
  color: var(--ecw-panel-fg);
  border-color: var(--ecw-panel-fg);
}

.ecw-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* Tombol DI DALAM PANEL: bentuk yang sama dengan tombol halaman keranjang
   dan checkout - huruf biasa, sudut 4px, tinggi seragam. Tombol form
   login/register di halamannya sendiri tidak disentuh. Padding dan
   radius juga punya kontrol di panel Elementor (Panel: Buttons). */
.ecw-panel .ecw-btn {
  box-sizing: border-box;
  min-height: calc(var(--ecw-control-h) + var(--ecw-sp-2xs));
  border-radius: var(--ecw-r-md);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-base);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
}

.ecw-panel .ecw-btn--ghost {
  border: 1px solid var(--ecw-line-strong);
}

.ecw-panel .ecw-btn--ghost:hover,
.ecw-panel .ecw-btn--ghost:focus-visible {
  border-color: var(--ecw-panel-fg);
  background: var(--ecw-surface-2);
  color: var(--ecw-panel-fg);
}

/* ============================================================
   ISI PANEL KERANJANG

   Satu keluarga dengan widget Cart Items / Cart Summary: foto kecil
   bersudut, nama huruf biasa, total baris di kanan, jumlah dalam kotak
   bergaris, dan kaki panel (subtotal + tombol) yang menempel di dasar.
   ============================================================ */

/* Isi panel jadi kolom flex supaya kaki panel bisa didorong ke dasar
   (margin-top:auto) saat isinya pendek, dan menempel (sticky) saat
   isinya panjang. */
.ecw-panel .ecw-panel__body[data-ecw-cart-body] {
  display: flex;
  flex-direction: column;
}

.ecw-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ecw-sp-sm);
  margin: auto 0;
  padding: calc(var(--ecw-panel-pad) * 2) var(--ecw-panel-pad);
  text-align: center;
}

.ecw-cart__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ecw-sp-2xl) + var(--ecw-sp-md));
  height: calc(var(--ecw-sp-2xl) + var(--ecw-sp-md));
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface-2);
  color: var(--ecw-panel-fg);
}

.ecw-cart__empty-icon .ecw-icon {
  width: calc(var(--ecw-icon) * 1.4);
  height: calc(var(--ecw-icon) * 1.4);
  stroke-width: 1.6;
}

.ecw-cart__empty-text {
  margin: 0 0 var(--ecw-sp-xs);
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-medium);
}

.ecw-panel .ecw-cart__empty .ecw-btn {
  width: auto;
  padding-inline: var(--ecw-sp-xl);
}

.ecw-cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecw-cart__item {
  display: flex;
  gap: var(--ecw-sp-md);
  margin: 0;
  padding: var(--ecw-sp-md) var(--ecw-panel-pad);
  border-bottom: 1px solid var(--ecw-panel-line);
}

/* Item terakhir tanpa garis bawah - rekomendasi atau kaki panel di
   bawahnya sudah membawa garis atasnya sendiri. */
.ecw-cart__item:last-child {
  border-bottom: 0;
}

.ecw-cart__thumb {
  flex: none;
  width: var(--ecw-thumb-w);
  aspect-ratio: 1 / var(--ecw-thumb-ratio);
  overflow: hidden;
  background: var(--ecw-thumb-bg);
  border-radius: var(--ecw-thumb-radius);
}

.ecw-cart__thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.ecw-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ecw-cart__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-3xs);
}

.ecw-cart__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ecw-sp-sm);
}

.ecw-panel .ecw-cart__name {
  margin: 0;
  color: var(--ecw-panel-fg);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
  overflow-wrap: break-word;
}

.ecw-cart__name a {
  color: inherit;
  text-decoration: none;
}

.ecw-cart__name a:hover {
  text-decoration: underline;
  text-underline-offset: var(--ecw-sp-2xs);
}

.ecw-cart__line {
  flex: 0 0 auto;
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ecw-cart__line del {
  display: none;
}

.ecw-cart__line ins {
  background: none;
  text-decoration: none;
}

.ecw-cart__price {
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-caption);
  font-variant-numeric: tabular-nums;
}

.ecw-cart__price del {
  opacity: 1;
  margin-right: var(--ecw-sp-2xs);
}

.ecw-cart__meta,
.ecw-cart__meta p {
  margin: 0;
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-caption);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
}

.ecw-cart__meta dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ecw-sp-2xs);
  margin: 0;
}

.ecw-cart__meta dt,
.ecw-cart__meta dd {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: var(--ecw-w-regular);
}

.ecw-cart__meta dd + dt {
  margin-left: var(--ecw-sp-sm);
}

.ecw-cart__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ecw-sp-sm);
  margin-top: auto;
  padding-top: var(--ecw-sp-xs);
}

/* -------- Jumlah --------
   Kotak bergaris - sama dengan stepper halaman keranjang dan halaman
   produk. Tombolnya <button> (sudah dari dulu), jadi reset gaya Kit dan
   warnanya ada di blok PEREDAM GAYA TOMBOL di bawah.

   Selector ditulis dobel (.ecw-qty.ecw-qty) supaya menang specificity-nya
   berapa pun urutan file CSS lain dimuat. */
.ecw-qty.ecw-qty {
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  height: calc(var(--ecw-control-h) - var(--ecw-sp-xs));
  overflow: hidden;
  border: 1px solid var(--ecw-line-strong);
  border-radius: var(--ecw-r-md);
  background: var(--ecw-panel-bg);
  box-shadow: none;
  font-size: var(--ecw-text-sm);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
}

.ecw-qty__btn.ecw-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  box-shadow: none;
  outline: none;
}

.ecw-qty__btn .ecw-icon {
  width: 14px;
  height: 14px;
}

.ecw-qty__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Label "Jumlah" tidak digambar - tombol − / + sudah menjelaskan
   dirinya - tapi tetap ada untuk screen reader dan dibaca widget.js. */
.ecw-panel .ecw-qty__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ecw-qty__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--ecw-sp-lg) + var(--ecw-sp-2xs));
  color: var(--ecw-panel-fg);
  font-weight: var(--ecw-w-semibold);
  font-variant-numeric: tabular-nums;
}

/* -------- Tombol Hapus --------
   Tautan kecil bergaris bawah - tanda yang sama dengan halaman keranjang. */
.ecw-cart__remove.ecw-cart__remove {
  padding: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--ecw-panel-muted);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-regular);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: var(--ecw-sp-3xs);
  cursor: pointer;
  box-shadow: none;
}

/* -------- Kaki panel -------- */

.ecw-cart__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-sm);
  margin-top: auto;
  padding: var(--ecw-sp-md) var(--ecw-panel-pad) var(--ecw-panel-pad);
  border-top: 1px solid var(--ecw-panel-line);
  background: var(--ecw-panel-bg);
}

.ecw-cart__totals {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-2xs);
}

.ecw-cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ecw-sp-md);
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-medium);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
}

.ecw-cart__subtotal-value {
  font-size: var(--ecw-text-lg);
  font-weight: var(--ecw-w-semibold);
  font-variant-numeric: tabular-nums;
}

.ecw-cart__note {
  margin: 0;
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-caption);
  line-height: var(--ecw-lh-base);
}

.ecw-cart__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-xs);
}

/* ============================================================
   REKOMENDASI PRODUK

   Trek selebar panel (padding kiri-kanan di dalam trek, bukan di
   section), jadi kartu terakhir terlihat terpotong di tepi layar - tanda
   bahwa daftarnya bisa digeser - tanpa scrollbar bawaan browser.
   Panah di kanan judul untuk mouse; jari/trackpad cukup menggeser.
   ============================================================ */

.ecw-cross {
  padding: var(--ecw-panel-pad) 0;
  border-top: 1px solid var(--ecw-panel-line);
}

.ecw-cross__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ecw-sp-sm);
  margin: 0 0 var(--ecw-sp-sm);
  padding: 0 var(--ecw-panel-pad);
}

.ecw-panel .ecw-cross__title {
  margin: 0;
  color: var(--ecw-panel-fg);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
}

.ecw-cross__nav {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--ecw-sp-2xs);
}

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

.ecw-cross__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ecw-sp-xl);
  height: var(--ecw-sp-xl);
  box-sizing: border-box;
  border: 1px solid var(--ecw-line-strong);
  border-radius: var(--ecw-r-pill);
  color: var(--ecw-panel-fg);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--ecw-t-base) var(--ecw-ease),
    color var(--ecw-t-base) var(--ecw-ease),
    border-color var(--ecw-t-base) var(--ecw-ease);
}

.ecw-cross__arrow:hover {
  border-color: var(--ecw-panel-fg);
  background: var(--ecw-panel-fg);
  color: var(--ecw-panel-bg);
}

.ecw-cross__arrow[aria-disabled="true"],
.ecw-cross__arrow[aria-disabled="true"]:hover {
  border-color: var(--ecw-panel-line);
  background: none;
  color: var(--ecw-line-strong);
  cursor: default;
}

.ecw-cross__arrow:focus-visible {
  outline: 2px solid var(--ecw-panel-fg);
  outline-offset: 2px;
}

.ecw-cross__arrow .ecw-icon {
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
}

.ecw-cross__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--ecw-cross-w);
  gap: var(--ecw-sp-sm);
  padding: 0 var(--ecw-panel-pad) var(--ecw-sp-3xs);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ecw-panel-pad);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.ecw-cross__track::-webkit-scrollbar {
  display: none;
}

.ecw-cross__card {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-3xs);
  min-width: 0;
  scroll-snap-align: start;
}

.ecw-cross__media {
  position: relative;
  margin-bottom: var(--ecw-sp-2xs);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ecw-thumb-bg);
  border-radius: var(--ecw-thumb-radius);
}

.ecw-cross__media a {
  display: block;
  width: 100%;
  height: 100%;
}

.ecw-cross__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ecw-t-slow) var(--ecw-ease-out);
}

.ecw-cross__card:hover .ecw-cross__media img {
  transform: scale(1.03);
}

.ecw-cross__add .ecw-icon {
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
}

.ecw-cross__add.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.ecw-panel .ecw-cross__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ecw-panel-fg);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-medium);
  line-height: var(--ecw-lh-snug);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ecw-panel .ecw-cross__name:hover {
  text-decoration: underline;
  text-underline-offset: var(--ecw-sp-3xs);
}

.ecw-cross__price,
.ecw-cross__price .sale-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ecw-sp-2xs);
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: var(--ecw-track-none);
  font-variant-numeric: tabular-nums;
}

.ecw-cross__price ins {
  order: 0;
  background: none;
  text-decoration: none;
}

.ecw-cross__price del {
  order: 1;
  margin: 0;
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-regular);
  opacity: 1;
}

.ecw-cross__price .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ecw-cross__track {
    scroll-behavior: auto;
  }

  .ecw-cross__media img {
    transition: none;
  }
}

/* ============================================================
   PANEL AKUN
   ============================================================ */

.ecw-tabs {
  display: flex;
  gap: var(--ecw-sp-lg);
  padding: var(--ecw-panel-pad) var(--ecw-panel-pad) 0;
}

.ecw-tabs__btn {
  position: relative;
  padding: 0 0 var(--ecw-sp-sm);
  border: 0;
  background: none;
  color: var(--ecw-tab-fg);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ecw-t-base) ease;
}

.ecw-tabs__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ecw-tab-line);
  transform: scaleX(0);
  transition: transform var(--ecw-t-slow) ease;
}

.ecw-tabs__btn.is-active {
  color: var(--ecw-tab-fg-active);
}

.ecw-tabs__btn.is-active::after {
  transform: scaleX(1);
}

.ecw-form {
  display: none;
  flex-direction: column;
  gap: var(--ecw-sp-md);
  padding: var(--ecw-panel-pad);
}

.ecw-form.is-active {
  display: flex;
}

.ecw-field {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-xs);
}

.ecw-field__label {
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecw-panel-muted);
}

.ecw-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ecw-field__wrap .ecw-field__input {
  width: 100%;
}

.ecw-field__input {
  width: 100%;
  padding: var(--ecw-sp-md);
  border: 1px solid var(--ecw-field-line);
  border-radius: var(--ecw-field-radius);
  background: var(--ecw-field-bg);
  color: var(--ecw-field-fg);
  font-size: var(--ecw-text-base);
  line-height: var(--ecw-lh-snug);
  transition: border-color var(--ecw-t-base) ease;
}

.ecw-field__input:focus {
  outline: none;
  border-color: var(--ecw-field-line-focus);
}

.ecw-field__input--has-icon {
  padding-left: var(--ecw-sp-2xl);
}

/* PADDING FIELD HARUS MENANG DARI TEMA.
 *
 * Hello Elementor menata input lewat selector atribut:
 *
 *   input[type="email"], input[type="password"], input[type="text"], ...
 *   { padding: .5rem 1rem }
 *
 * Bobotnya (0,1,1) - lebih tinggi dari .ecw-field__input (0,1,0) - dan
 * memakai shorthand `padding`, yang menimpa padding field ini. Akibatnya
 * terukur di /register: padding jadi .5rem 1rem, tidak sama dengan field
 * di panel akun, dan dua form yang seharusnya kembar jadi beda tinggi.
 *
 * Ditambah satu class di depan supaya bobotnya (0,2,0) dan menang tanpa
 * !important. Nilainya sengaja sama dengan aturan di atas - ini bukan
 * perubahan desain, cuma mengembalikan yang sudah dimaksudkan.
 */
.ecw-field .ecw-field__input {
  padding: var(--ecw-sp-md);
}

.ecw-field__toggle {
  position: absolute;
  right: 10px;
  display: inline-flex;
  padding: var(--ecw-sp-2xs);
  border: 0;
  background: none;
  color: var(--ecw-panel-muted);
  cursor: pointer;
}

.ecw-field__toggle .ecw-icon {
  width: 17px;
  height: 17px;
}

.ecw-field__help {
  margin: 0;
  font-size: var(--ecw-text-micro);
  line-height: var(--ecw-lh-base);
  color: var(--ecw-panel-muted);
}

.ecw-field.has-error .ecw-field__input {
  border-color: var(--ecw-danger);
}

.ecw-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ecw-sp-sm);
  flex-wrap: wrap;
}

.ecw-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ecw-sp-xs);
  font-size: var(--ecw-text-caption);
  color: var(--ecw-panel-muted);
  cursor: pointer;
}

.ecw-link {
  font-size: var(--ecw-text-caption);
  color: var(--ecw-panel-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ecw-form__terms {
  margin: 0;
  font-size: var(--ecw-text-micro);
  line-height: var(--ecw-lh-base);
  color: var(--ecw-panel-muted);
}

/* Teks kebijakan privasi TIDAK dicetak oleh widget ini - datangnya dari
   WooCommerce lewat do_action('woocommerce_register_form'), jadi dia lolos
   dari .ecw-form__terms di atas dan memakai ukuran teks bawaan tema. Di
   antara field yang rapat, paragraf seukuran itu terbaca seperti isi
   halaman, bukan keterangan. Disamakan dengan .ecw-field__help supaya
   semua teks penjelas di form ini satu ukuran.

   Selector <p>-nya ikut disebut: WooCommerce membungkus kalimatnya di
   dalam <p>, dan margin bawaan <p> itu yang bikin jaraknya melebar. */
.ecw-form .woocommerce-privacy-policy-text,
.ecw-form .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: var(--ecw-text-micro);
  line-height: var(--ecw-lh-base);
  color: var(--ecw-panel-muted);
}

/* Tautannya sendiri dibuat kontras dan digarisbawahi. Warna bawaan tema
   (merah muda) di atas teks abu berukuran 11px nyaris tidak terbaca
   sebagai tautan, dan tanpa garis bawah satu-satunya penanda "ini bisa
   diklik" tinggal warna - yang gagal untuk pembaca buta warna. */
.ecw-form .woocommerce-privacy-policy-text a {
  color: var(--ecw-ink);
  text-decoration: underline;
}

/* ============================================================
   KOTAK PESAN AUTH (bentuk Alert ala shadcn/ui)

   BENTUKNYA: kotak putih, garis tepi tipis 1px, sudut 8px, ikon 16px
   di kolom kiri, teks di kolom kanan. Rata dengan field di bawahnya,
   bukan menjorok. Datar - tanpa bayangan, tanpa blok warna penuh -
   supaya pesannya terbaca sebagai keterangan, bukan spanduk.

   KENAPA DIUBAH DARI YANG LAMA: margin kiri-kanannya dulu dipatok
   var(--ecw-panel-pad). Benar di panel off-canvas yang isinya memang
   menjorok, salah di halaman /login dan /register - kotaknya jadi 24px
   lebih sempit di tiap sisi daripada field, dan margin-bawah nol bikin
   menempel di label berikutnya.

   IKONNYA LEWAT CSS MASK, BUKAN MARKUP. Isi kotak ini ditulis JS pakai
   textContent (lihat showMessage() di ecw-widget.js) - apa pun elemen
   yang ditaruh di dalamnya akan terhapus tiap kali pesan berganti.
   Digambar dari ::before, jadi JS tidak perlu tahu soal ikon sama
   sekali. mask + background-color bikin warnanya ikut currentColor,
   jadi varian ok/error cukup mengganti satu properti warna.

   FONT: Inter di-self-host di tokens.css, yang jadi dependensi file
   ini - jadi di sini cukup var(--ecw-font) dan tidak ada satu pun
   permintaan font tambahan.
   ============================================================ */
.ecw-auth__msg {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: var(--ecw-sp-sm);
  margin: 0 0 var(--ecw-sp-lg);
  padding: var(--ecw-sp-sm) var(--ecw-sp-md);
  border: 1px solid var(--ecw-danger-line);
  border-radius: var(--ecw-r-lg);
  background: var(--ecw-surface);
  color: var(--ecw-danger);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-medium);
  line-height: var(--ecw-lh-base);
  letter-spacing: -0.005em;
}

.ecw-auth__msg::before {
  content: "";
  width: 16px;
  height: 16px;
  /* 1px turun: garis tengah ikon jadi sejajar dengan garis tengah baris
     teks pertama, bukan dengan tepi atas kotaknya. */
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center / 16px 16px no-repeat;
}

/* Di dalam panel, kotak ini berdiri di luar .ecw-form (yang punya
   padding sendiri), jadi jaraknya ke tepi panel diurus di sini. */
.ecw-panel .ecw-auth__msg {
  margin: var(--ecw-panel-pad) var(--ecw-panel-pad) 0;
}

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

.ecw-auth__msg--ok {
  border-color: var(--ecw-success-line);
  color: var(--ecw-success);
}

.ecw-auth__msg--ok::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
}

.ecw-account__greet {
  display: flex;
  align-items: center;
  gap: var(--ecw-sp-sm);
  padding: var(--ecw-panel-pad);
  border-bottom: 1px solid var(--ecw-panel-line);
}

.ecw-account__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ecw-control-h);
  height: var(--ecw-control-h);
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-panel-fg);
  color: var(--ecw-panel-bg);
  font-size: var(--ecw-text-lg);
  font-weight: var(--ecw-w-semibold);
}

.ecw-account__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ecw-account__hello {
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-caption);
}

.ecw-account__name,
.ecw-account__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecw-account__name {
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-semibold);
}

.ecw-account__email {
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-caption);
}

.ecw-account__menu {
  list-style: none;
  margin: 0;
  padding: var(--ecw-sp-xs) 0;
}

.ecw-account__menu-item {
  margin: 0;
}

.ecw-account__menu-item a {
  display: flex;
  align-items: center;
  gap: var(--ecw-sp-sm);
  padding: var(--ecw-sp-sm) var(--ecw-panel-pad);
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-medium);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
  text-decoration: none;
  transition: background-color var(--ecw-t-fast) ease;
}

.ecw-account__menu-item a:hover,
.ecw-account__menu-item a:focus-visible {
  background: var(--ecw-surface-2);
}

.ecw-account__icon {
  display: inline-flex;
  flex: none;
  width: var(--ecw-icon);
  color: var(--ecw-panel-muted);
}

.ecw-account__icon .ecw-icon,
.ecw-account__chev .ecw-icon {
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
}

.ecw-account__label {
  flex: 1;
  min-width: 0;
}

.ecw-account__chev {
  display: inline-flex;
  color: var(--ecw-line-strong);
}

.ecw-account__menu-item--customer-logout {
  margin-top: var(--ecw-sp-xs);
  padding-top: var(--ecw-sp-xs);
  border-top: 1px solid var(--ecw-panel-line);
}

.ecw-account__menu-item--customer-logout a,
.ecw-account__menu-item--customer-logout .ecw-account__icon {
  color: var(--ecw-danger);
}

/* ============================================================
   MENU WIDGET: DESKTOP TEXT vs HAMBURGER SWITCH
   Breakpoints match Elementor's own default Tablet (<=1024px) /
   Desktop (>=1025px) and Mobile (<=767px) boundaries, so switching
   lines up with how the rest of the site already responds.
   ============================================================ */

.ecw-menu-widget {
  display: contents;
}

.ecw-menu-nav {
  display: none;
  align-items: center;
  gap: var(--ecw-sp-xl);
}

.ecw-menu-nav__link {
  color: var(--ecw-ink);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ecw-t-base) ease;
}

/* Always hamburger (default fallback + explicit "Never" choice) */
.ecw-menu--switch-always_hamburger .ecw-trigger-wrap {
  display: flex;
}

/* Always text, never hamburger */
.ecw-menu--switch-always_text .ecw-trigger-wrap {
  display: none;
}

.ecw-menu--switch-always_text .ecw-menu-nav {
  display: flex;
}

/* Text menu from Desktop (>=1025px) up, hamburger below that */
.ecw-menu--switch-tablet .ecw-menu-nav {
  display: none;
}

@media (min-width: 1025px) {
  .ecw-menu--switch-tablet .ecw-trigger-wrap {
    display: none;
  }

  .ecw-menu--switch-tablet .ecw-menu-nav {
    display: flex;
  }
}

/* Text menu from Tablet (>=768px) up, hamburger on mobile only */
.ecw-menu--switch-mobile .ecw-menu-nav {
  display: none;
}

@media (min-width: 768px) {
  .ecw-menu--switch-mobile .ecw-trigger-wrap {
    display: none;
  }

  .ecw-menu--switch-mobile .ecw-menu-nav {
    display: flex;
  }
}

/* ============================================================
   PANEL MENU
   ============================================================ */

.ecw-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecw-menu__item {
  margin: 0;
  border-bottom: 1px solid var(--ecw-panel-line);
}

.ecw-menu__link {
  display: block;
  padding: var(--ecw-sp-md) var(--ecw-panel-pad);
  color: var(--ecw-panel-fg);
  font-size: var(--ecw-text-lg);
  font-weight: var(--ecw-w-medium);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
  text-decoration: none;
  transition: background-color var(--ecw-t-fast) ease;
}

.ecw-menu__link:hover,
.ecw-menu__link:focus-visible {
  background: var(--ecw-surface-2);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .ecw-panel__sheet {
    width: 100vw;
  }

  .ecw-cart__item {
    gap: var(--ecw-sp-sm);
  }

  .ecw-cart__thumb {
    width: min(var(--ecw-thumb-w), 90px);
  }
}


/* ============================================================
   PEREDAM GAYA TOMBOL GLOBAL ELEMENTOR (KIT)

   MASALAHNYA. Elementor Kit menulis aturan ini ke setiap halaman:

     .elementor-kit-8 button, ... { background-color:#000; color:#fff;
       border:1px solid #000; border-radius:5px; }
     .elementor-kit-8 button:hover, .elementor-kit-8 button:focus { ... }

   Selector itu berbobot 0-2-0 (satu class + satu elemen). Aturan di
   file ini yang ditulis sebagai satu class saja - ".ecw-panel__close",
   ".ecw-trigger" - berbobot 0-1-0, jadi KALAH telak berapa pun urutan
   pemuatan file-nya. Akibatnya tiap <button> di dalam widget diam-diam
   mewarisi kotak hitam, border, radius 5px, dan hover yang membalik
   warna.

   Itulah asal usul tiga gejala yang kelihatan tidak berhubungan:
   tombol X berlatar hitam, ikon cart/user "kadang" memunculkan border
   kotak (itu state :hover milik Kit), dan tombol-tombol panel yang
   ikut membalik warna saat disentuh.

   PERBAIKANNYA. Class digandakan (0-3-0 bersama pembungkusnya) supaya
   menang telak atas Kit tanpa perlu !important - jadi kontrol Style
   Elementor milik widget ini sendiri tetap bisa menimpa di atasnya
   kalau kamu mengaturnya dari panel.

   Trik penggandaan class ini sudah dipakai sejak awal di .ecw-qty__btn
   dan .ecw-cart__remove; di sini cuma diseragamkan ke semua tombol.
   ============================================================ */

.ecw-panel .ecw-panel__close.ecw-panel__close,
.ecw-panel .ecw-qty__btn.ecw-qty__btn,
.ecw-panel .ecw-cart__remove.ecw-cart__remove,
.ecw-panel .ecw-cross__add.ecw-cross__add,
.ecw-trigger-wrap .ecw-trigger.ecw-trigger {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
}

/* -------- Tombol tutup (X) --------
   Latar mengikuti panel (putih), BUKAN kotak hitam. Latarnya sengaja
   tidak berubah sama sekali saat hover - yang berubah cuma ikonnya,
   dari abu ke hitam pekat. */
.ecw-panel .ecw-panel__close.ecw-panel__close {
  background: var(--ecw-panel-bg);
  color: var(--ecw-panel-muted);
  transition: color var(--ecw-t-base) ease;
}

.ecw-panel .ecw-panel__close.ecw-panel__close:hover,
.ecw-panel .ecw-panel__close.ecw-panel__close:focus,
.ecw-panel .ecw-panel__close.ecw-panel__close:active {
  background: var(--ecw-panel-bg);
  color: var(--ecw-panel-fg);
  border: 0;
  box-shadow: none;
  outline: none;
}

/* -------- Ikon header (cart / user / menu) --------
   Border 1px transparan tetap dipertahankan supaya ukuran kotak tombol
   tidak pernah berubah (lihat catatan panjang di .ecw-trigger di atas),
   tapi warnanya dikunci transparan di SEMUA state - termasuk :hover dan
   :focus, dua state yang selama ini dibajak Kit dan memunculkan kotak. */
.ecw-trigger-wrap .ecw-trigger.ecw-trigger {
  border: 1px solid transparent;
}

.ecw-trigger-wrap .ecw-trigger.ecw-trigger:hover,
.ecw-trigger-wrap .ecw-trigger.ecw-trigger:focus,
.ecw-trigger-wrap .ecw-trigger.ecw-trigger:active {
  border-color: transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline: none;
}

/* -------- Stepper qty, Hapus, dan tombol + rekomendasi --------
   Semuanya <button>, jadi bentuknya ditulis di sini - SESUDAH reset di
   atas yang bobotnya sama (0-3-0) - supaya reset tidak menghapusnya. */
.ecw-panel .ecw-qty__btn.ecw-qty__btn {
  width: var(--ecw-sp-xl);
  color: var(--ecw-panel-fg);
  transition: background-color var(--ecw-t-fast) ease;
}

.ecw-panel .ecw-qty__btn.ecw-qty__btn:hover {
  opacity: 1;
  background: var(--ecw-surface-2);
  color: var(--ecw-panel-fg);
}

.ecw-panel .ecw-qty__btn.ecw-qty__btn:disabled,
.ecw-panel .ecw-qty__btn.ecw-qty__btn:disabled:hover {
  background: none;
  color: var(--ecw-panel-muted);
}

.ecw-panel .ecw-cart__remove.ecw-cart__remove {
  color: var(--ecw-panel-muted);
  transition: color var(--ecw-t-base) ease;
}

.ecw-panel .ecw-cart__remove.ecw-cart__remove:hover {
  opacity: 1;
  color: var(--ecw-danger);
}

.ecw-panel .ecw-cross__add.ecw-cross__add {
  position: absolute;
  right: var(--ecw-sp-xs);
  bottom: var(--ecw-sp-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ecw-sp-xl);
  height: var(--ecw-sp-xl);
  padding: 0;
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface);
  box-shadow: 0 0 0 1px var(--ecw-line);
  color: var(--ecw-ink);
  cursor: pointer;
  transition: background-color var(--ecw-t-base) ease, color var(--ecw-t-base) ease;
}

.ecw-panel .ecw-cross__add.ecw-cross__add:hover {
  background: var(--ecw-ink);
  color: var(--ecw-on-ink);
}

/* -------- Fokus keyboard --------
   Hover tidak boleh memunculkan garis apa pun; fokus keyboard beda
   perkara. Tanpa penanda ini, orang yang menavigasi pakai Tab tidak
   punya cara tahu sedang di tombol mana. :focus-visible hanya aktif
   untuk navigasi papan ketik, tidak muncul saat diklik mouse. */
.ecw-panel .ecw-panel__close.ecw-panel__close:focus-visible,
.ecw-panel .ecw-qty__btn.ecw-qty__btn:focus-visible,
.ecw-panel .ecw-cart__remove.ecw-cart__remove:focus-visible,
.ecw-panel .ecw-cross__add.ecw-cross__add:focus-visible,
.ecw-trigger-wrap .ecw-trigger.ecw-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ============================================================
   PANEL AKUN SAAT BELUM LOGIN
   Ikon, satu kalimat, dua tombol yang mengantar ke halaman /login dan
   /register. Form-nya sendiri sudah tidak tinggal di panel lagi.
   ============================================================ */

.ecw-auth-links {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-xs);
  padding: calc(var(--ecw-panel-pad) * 1.5) var(--ecw-panel-pad);
  text-align: center;
}

.ecw-auth-links__icon {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: calc(var(--ecw-sp-2xl) + var(--ecw-sp-md));
  height: calc(var(--ecw-sp-2xl) + var(--ecw-sp-md));
  margin-bottom: var(--ecw-sp-xs);
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface-2);
  color: var(--ecw-panel-fg);
}

.ecw-auth-links__icon .ecw-icon {
  width: calc(var(--ecw-icon) * 1.4);
  height: calc(var(--ecw-icon) * 1.4);
  stroke-width: 1.6;
}

.ecw-auth-links__intro {
  margin: 0 0 var(--ecw-sp-sm);
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-sm);
  line-height: var(--ecw-lh-base);
  text-wrap: balance;
}

/* ============================================================
   FORM AUTH BERDIRI SENDIRI (widget Eastcliff Login / Eastcliff Register)

   Panel off-canvas punya cangkang sendiri yang mengurus lebar,
   padding, dan latar. Di halaman biasa cangkang itu tidak ada, jadi
   bagian tersebut dikerjakan di sini. Yang TIDAK diulang: gaya field,
   tombol, tab, dan pesan error - semuanya sudah didefinisikan di atas
   dan dipakai apa adanya, supaya form di halaman dan form di panel
   tidak pernah berbeda tampilan.
   ============================================================ */

.ecw-auth {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  color: var(--ecw-panel-fg);
}

.ecw-auth__title {
  margin: 0 0 var(--ecw-sp-lg);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

.ecw-auth__note {
  margin: 0 0 var(--ecw-sp-lg);
  color: var(--ecw-panel-muted);
  line-height: var(--ecw-lh-base);
}

.ecw-auth__alt {
  display: block;
  margin-top: var(--ecw-sp-lg);
  color: var(--ecw-panel-muted);
  font-size: var(--ecw-text-sm);
  text-align: center;
}

/* Di dalam panel, .ecw-form sudah diberi padding oleh cangkangnya.
   Di halaman, form ini yang mengatur jaraknya sendiri. */
.ecw-auth .ecw-form {
  padding: 0;
}

/* Form login & register di panel saling bergantian lewat class
   is-active. Sebagai widget berdiri sendiri cuma ada satu form di
   halaman, jadi dia harus selalu tampil - tanpa aturan ini, widget
   Eastcliff Register yang formnya tidak pernah mendapat is-active dari klik
   tab akan terlihat kosong.

   HARUS flex, bukan block: .ecw-form mengandalkan flex-direction:column
   + gap untuk jarak antar-field. Diganti block, semua field menempel
   tanpa jarak sama sekali. */
.ecw-auth .ecw-form {
  display: flex;
}


/* ============================================================
   IKON MENGIKUTI TERANG/GELAP BACKGROUND

   Class ecw-on-dark / ecw-on-light dipasang oleh JS ke pembungkus
   ikon, berdasarkan section bertanda ecw-bg-dark / ecw-bg-light yang
   sedang ada di belakangnya. Tidak ada section bertanda = class ini
   tidak pernah dipasang = warna ikon tetap seperti yang kamu atur di
   Elementor.

   Warnanya lewat variabel supaya bisa ditimpa dari Elementor tanpa
   menyentuh file ini.
   ============================================================ */

.ecw-trigger-wrap.ecw-on-dark,
.ecw-menu-widget.ecw-on-dark {
  color: var(--ecw-on-dark-fg, var(--ecw-on-ink));
}

.ecw-trigger-wrap.ecw-on-light,
.ecw-menu-widget.ecw-on-light {
  color: var(--ecw-on-light-fg, var(--ecw-ink));
}

/* Ikon, teks, dan badge ditulis LANGSUNG, bukan lewat pewarisan.
   
   KENAPA BEGINI JELEK TAPI PERLU. Kontrol Style Elementor menulis warna
   ikon ke tombolnya sendiri dengan selector sepanjang ini:
   
     .elementor-263 .elementor-element.elementor-element-b689dc7 .ecw-trigger
   
   Bobotnya 0-4-0, dan file CSS-nya (post-263.css) dimuat SETELAH file
   ini. Dua hal itu berarti: mewarnai pembungkus tidak ada gunanya
   (aturan yang menyasar tombol langsung selalu mengalahkan warna
   warisan), dan bobot 0-4-0 pun masih kalah karena urutan muat.
   
   Jadi class digandakan sampai 0-5-0. Tidak pakai !important supaya
   kalau nanti kamu benar-benar butuh mengunci satu warna, !important
   dari Elementor masih bisa menang di atas ini.
   
   Kalau suatu saat ikon berhenti berubah warna lagi setelah update
   Elementor, di sinilah tempat pertama yang harus dicek: hitung ulang
   bobot selector yang ditulis Elementor. */

.ecw-trigger-wrap.ecw-on-dark .ecw-trigger.ecw-trigger.ecw-trigger,
.ecw-trigger-wrap.ecw-on-light .ecw-trigger.ecw-trigger.ecw-trigger,
.ecw-menu-widget.ecw-on-dark .ecw-menu-nav__link.ecw-menu-nav__link.ecw-menu-nav__link,
.ecw-menu-widget.ecw-on-light .ecw-menu-nav__link.ecw-menu-nav__link.ecw-menu-nav__link {
  color: inherit;
}

/* Badge jumlah keranjang ikut membalik juga - kalau tidak, lingkaran
   putih berisi angka putih jadi tidak terbaca. Bobotnya dinaikkan
   dengan alasan yang sama: Elementor menulis background DAN warna
   badge dari kontrol Style widget cart. */
.ecw-trigger-wrap.ecw-on-dark .ecw-trigger__badge.ecw-trigger__badge.ecw-trigger__badge {
  background: var(--ecw-on-dark-fg, var(--ecw-surface));
  color: var(--ecw-on-light-fg, var(--ecw-ink));
}

.ecw-trigger-wrap.ecw-on-light .ecw-trigger__badge.ecw-trigger__badge.ecw-trigger__badge {
  background: var(--ecw-on-light-fg, var(--ecw-ink));
  color: var(--ecw-on-dark-fg, var(--ecw-on-ink));
}

/* Perpindahan warnanya dihaluskan supaya tidak berkedip saat batas
   antar-section lewat di belakang ikon. */
.ecw-trigger-wrap,
.ecw-menu-widget {
  transition: color var(--ecw-t-slow) ease;
}

/* ============================================================
   CATATAN EDITOR

   Cuma dicetak waktu halaman dibuka di editor Elementor (lihat
   ECW_Forms::editor_note()). Pengunjung tidak pernah melihatnya.

   Warnanya memakai token peringatan supaya jelas ini pesan alat,
   bukan bagian desain toko - yang memasang widget harus langsung
   tahu bahwa kotak ini tidak akan ikut tampil di halaman jadi.
   ============================================================ */
.ecw-editor-note {
  margin: var(--ecw-sp-sm) 0 0;
  padding: var(--ecw-sp-sm);
  border: var(--ecw-border) dashed var(--ecw-warn-line);
  border-radius: var(--ecw-r-md);
  background: var(--ecw-warn-bg);
  color: var(--ecw-warn);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-caption);
  line-height: var(--ecw-lh-base);
}