/* ============================================================
   Eastcliff PRODUCT CARD — satu kartu produk

   File terpisah dari ecw-widget.css dengan sengaja. Widget ini tidak
   punya panel, tidak punya JS sendiri, dan tidak berbagi satu pun class
   dengan widget Eastcliff yang lain - jadi menambahnya tidak bisa mengubah
   tampilan keranjang, akun, menu, form, atau kartu kategori yang sudah
   jalan. Halaman yang tidak memasang widget ini juga tidak ikut memuat
   file ini sama sekali (lihat get_style_depends()).

   Semua nilai yang bisa diatur dari panel Style Elementor ditulis
   sebagai custom property dengan nilai cadangan di sini, jadi kartu ini
   sudah benar tampilannya sebelum satu kontrol pun disentuh.
   ============================================================ */

.ecw-pcard {
  --ecw-pc-gap: 10px;
  --ecw-pc-media-gap: 14px;
  --ecw-pc-align: left;
  --ecw-pc-items: flex-start;

  --ecw-pc-ratio: 1 / 1;
  --ecw-pc-fit: cover;
  --ecw-pc-media-bg: var(--ecw-surface-2);

  --ecw-pc-badge-top: 0;
  --ecw-pc-badge-bottom: auto;
  --ecw-pc-badge-left: 0;
  --ecw-pc-badge-right: auto;
  --ecw-pc-badge-items: flex-start;
  --ecw-pc-badge-offset: 10px;
  --ecw-pc-badge-bw: 0px;
  --ecw-pc-badge-line: var(--ecw-ink);

  --ecw-pc-badge-sale-bg: var(--ecw-ink);
  --ecw-pc-badge-sale-fg: var(--ecw-surface);
  --ecw-pc-badge-stock-bg: var(--ecw-muted);
  --ecw-pc-badge-stock-fg: var(--ecw-surface);
  --ecw-pc-badge-new-bg: var(--ecw-surface);
  --ecw-pc-badge-new-fg: var(--ecw-ink);
  --ecw-pc-badge-featured-bg: var(--ecw-ink);
  --ecw-pc-badge-featured-fg: var(--ecw-surface);
  --ecw-pc-badge-custom-bg: var(--ecw-ink);
  --ecw-pc-badge-custom-fg: var(--ecw-surface);

  --ecw-pc-star-size: 13px;
  --ecw-pc-star-on: var(--ecw-ink);
  --ecw-pc-star-off: var(--ecw-line-strong);
  --ecw-pc-rating-count-fg: var(--ecw-muted);

  --ecw-pc-cat-fg: var(--ecw-muted);
  --ecw-pc-title-fg: var(--ecw-ink);
  --ecw-pc-title-fg-h: var(--ecw-muted);
  --ecw-pc-title-lines: 0;

  --ecw-pc-price-fg: var(--ecw-ink);
  --ecw-pc-price-sale-fg: var(--ecw-ink);
  --ecw-pc-price-old-fg: var(--ecw-muted);
  --ecw-pc-price-dir: row;
  --ecw-pc-price-wrap: wrap;
  --ecw-pc-price-cross: baseline;

  --ecw-pc-btn-w: 100%;
  --ecw-pc-btn-bw: 1px;
  --ecw-pc-btn-bg: var(--ecw-surface);
  --ecw-pc-btn-fg: var(--ecw-ink);
  --ecw-pc-btn-line: var(--ecw-ink);
  --ecw-pc-btn-bg-h: var(--ecw-ink);
  --ecw-pc-btn-fg-h: var(--ecw-surface);
  --ecw-pc-btn-line-h: var(--ecw-ink);

  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: var(--ecw-pc-align);
}

.ecw-pcard__body {
  display: flex;
  flex-direction: column;
  align-items: var(--ecw-pc-items);
  gap: var(--ecw-pc-gap);
}

/* ------------------------------------------------------------
   GAMBAR
   ------------------------------------------------------------ */

.ecw-pcard__media {
  position: relative;
  width: 100%;
  margin-bottom: var(--ecw-pc-media-gap);
  aspect-ratio: var(--ecw-pc-ratio);
  background: var(--ecw-pc-media-bg);
  overflow: hidden;
  line-height: 0;
}

.ecw-pcard__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

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

.ecw-pcard__img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: var(--ecw-pc-fit);
}

/* Gambar kedua ditumpuk di atas yang pertama, bukan menggantikannya.
   Kalau ditukar lewat src, ada kedipan putih selama file keduanya
   diunduh - dengan ditumpuk, gambar keduanya sudah siap sebelum
   kursor sampai. */
.ecw-pcard__img--swap {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* ------------------------------------------------------------
   BADGE
   ------------------------------------------------------------ */

.ecw-pcard__badges {
  position: absolute;
  top: var(--ecw-pc-badge-top);
  right: var(--ecw-pc-badge-right);
  bottom: var(--ecw-pc-badge-bottom);
  left: var(--ecw-pc-badge-left);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: var(--ecw-pc-badge-items);
  gap: var(--ecw-sp-2xs);
  margin: var(--ecw-pc-badge-offset);
  pointer-events: none;
}

/* Kalau gambar dimatikan, badge tidak punya tempat menempel - dia
   kembali jadi baris biasa di atas judul. */
.ecw-pcard__badges--inline {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0 var(--ecw-pc-gap);
}

.ecw-pcard__badge {
  display: inline-block;
  padding: var(--ecw-sp-2xs) var(--ecw-sp-xs);
  border: var(--ecw-pc-badge-bw) solid var(--ecw-pc-badge-line);
  border-radius: 0;
  background: var(--ecw-pc-badge-sale-bg);
  color: var(--ecw-pc-badge-sale-fg);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.08em;
  line-height: var(--ecw-lh-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

.ecw-pcard__badge--stock {
  background: var(--ecw-pc-badge-stock-bg);
  color: var(--ecw-pc-badge-stock-fg);
}

.ecw-pcard__badge--new {
  background: var(--ecw-pc-badge-new-bg);
  color: var(--ecw-pc-badge-new-fg);
}

.ecw-pcard__badge--featured {
  background: var(--ecw-pc-badge-featured-bg);
  color: var(--ecw-pc-badge-featured-fg);
}

/* Badge kustom dari plugin Eastcliff Badge + Flashsale. Warnanya ditulis
   terpisah, bukan dibiarkan mewarisi warna badge diskon dari aturan dasar
   di atas - kalau warna diskon diubah, badge kustom ikut berubah tanpa ada
   yang menyentuhnya. */
.ecw-pcard__badge--custom {
  background: var(--ecw-pc-badge-custom-bg);
  color: var(--ecw-pc-badge-custom-fg);
}

/* ------------------------------------------------------------
   KATEGORI & JUDUL
   ------------------------------------------------------------ */

.ecw-pcard__cat {
  color: var(--ecw-pc-cat-fg);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: 0.1em;
  line-height: var(--ecw-lh-tight);
  text-transform: uppercase;
}

.ecw-pcard__title {
  margin: 0;
  color: var(--ecw-pc-title-fg);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-bold);
  letter-spacing: 0.06em;
  line-height: var(--ecw-lh-snug);
  text-transform: uppercase;
}

/* Batas baris judul.

   Nilai 0 berarti "tanpa batas". Itu bukan angka yang sah untuk
   line-clamp, jadi browser membuang deklarasinya dan judul tampil utuh
   - persis yang diinginkan, tanpa perlu aturan kedua. */
.ecw-pcard__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ecw-pc-title-lines);
  line-clamp: var(--ecw-pc-title-lines);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: color var(--ecw-t-base) ease;
}

.ecw-pcard__title a:hover,
.ecw-pcard__title a:focus-visible {
  color: var(--ecw-pc-title-fg-h);
}

/* ------------------------------------------------------------
   RATING

   Dua lapis bintang: lapisan abu-abu di bawah, lapisan berwarna di
   atasnya yang lebarnya dipotong sesuai nilai rata-rata. Cara ini bisa
   menampilkan setengah bintang tanpa gambar tambahan, dan angkanya
   ditulis sekali di inline style oleh PHP.
   ------------------------------------------------------------ */

.ecw-pcard__rating {
  display: flex;
  align-items: center;
  gap: var(--ecw-sp-2xs);
}

.ecw-pcard__stars {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.ecw-pcard__stars-off,
.ecw-pcard__stars-on {
  display: inline-flex;
  gap: 1px;
}

.ecw-pcard__stars-off {
  color: var(--ecw-pc-star-off);
}

.ecw-pcard__stars-on {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--ecw-pc-star-on);
}

.ecw-pcard__star {
  flex: none;
  width: var(--ecw-pc-star-size);
  height: var(--ecw-pc-star-size);
  fill: currentColor;
}

.ecw-pcard__rating-count {
  color: var(--ecw-pc-rating-count-fg);
  font-size: var(--ecw-text-micro);
  line-height: 1;
}

/* ------------------------------------------------------------
   HARGA
   ------------------------------------------------------------ */

.ecw-pcard__price {
  display: flex;
  flex-direction: var(--ecw-pc-price-dir);
  flex-wrap: var(--ecw-pc-price-wrap);
  align-items: var(--ecw-pc-price-cross);
  gap: var(--ecw-sp-xs);
  color: var(--ecw-pc-price-fg);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
}

.ecw-pcard__price--sale .ecw-pcard__price-now {
  color: var(--ecw-pc-price-sale-fg);
}

.ecw-pcard__price-old {
  color: var(--ecw-pc-price-old-fg);
  text-decoration: line-through;
}

/* WooCommerce membungkus angkanya sendiri dengan .woocommerce-Price-*.
   Warnanya sengaja dibiarkan diwarisi dari pembungkus di atas, supaya
   satu kontrol warna cukup untuk semua bentuk harga. */
.ecw-pcard__price .woocommerce-Price-amount,
.ecw-pcard__price .woocommerce-Price-currencySymbol {
  color: inherit;
}

/* Rentang harga produk variable memakai <del>/<ins> bawaan
   WooCommerce - diselaraskan dengan harga tunggal supaya dua jenis
   produk tidak terlihat berbeda di dalam satu grid. */
.ecw-pcard__price del {
  color: var(--ecw-pc-price-old-fg);
  text-decoration: line-through;
}

.ecw-pcard__price ins {
  color: var(--ecw-pc-price-sale-fg);
  background: none;
  text-decoration: none;
}

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

   Class-nya sendiri, BUKAN .ecw-btn. Tombol .ecw-btn milik panel
   keranjang/form: latarnya hitam pekat dan lebarnya selalu penuh.
   Kartu produk butuh garis tipis dan lebar yang bisa diatur - kalau
   menumpang class yang sama, mengatur salah satunya pasti menggeser
   yang lain.
   ------------------------------------------------------------ */

.ecw-pcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ecw-pc-btn-w);
  margin-top: var(--ecw-sp-2xs);
  padding: var(--ecw-sp-sm) var(--ecw-sp-md);
  border: var(--ecw-pc-btn-bw) solid var(--ecw-pc-btn-line);
  border-radius: 0;
  background: var(--ecw-pc-btn-bg);
  color: var(--ecw-pc-btn-fg);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: 0.08em;
  line-height: var(--ecw-lh-tight);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--ecw-t-base) ease, color var(--ecw-t-base) ease, border-color var(--ecw-t-base) ease;
}

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

/* Keadaan yang dipasang WooCommerce sendiri lewat wc-add-to-cart:
   'loading' selama permintaan berjalan, 'added' setelah berhasil. */
.ecw-pcard__btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Link "View cart" yang disisipkan WooCommerce sesudah berhasil
   menambah - disembunyikan karena keranjang di situs ini dibuka lewat
   panel Eastcliff, bukan lewat halaman. */
.ecw-pcard .added_to_cart {
  display: none;
}

/* ------------------------------------------------------------
   HABIS
   ------------------------------------------------------------ */

.ecw-pcard--soldout .ecw-pcard__media {
  opacity: 0.55;
}

/* ------------------------------------------------------------
   EFEK HOVER

   Cuma di perangkat yang benar-benar punya kursor melayang. Di HP,
   :hover ikut menyala setelah disentuh dan gambarnya tertinggal dalam
   keadaan membesar (atau tertukar) sampai disentuh yang lain - efek
   yang di layar sentuh cuma terlihat seperti bug.
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .ecw-pcard--zoom .ecw-pcard__img img {
    transition: transform 0.5s ease;
  }

  .ecw-pcard--zoom .ecw-pcard__media:hover .ecw-pcard__img img {
    transform: scale(1.04);
  }

  .ecw-pcard--swap .ecw-pcard__img--swap {
    transition: opacity 0.35s ease;
  }

  .ecw-pcard--swap .ecw-pcard__media:hover .ecw-pcard__img--swap {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecw-pcard__img img,
  .ecw-pcard__img--swap {
    transition: none !important;
  }

  .ecw-pcard--zoom .ecw-pcard__media:hover .ecw-pcard__img img {
    transform: none;
  }
}

/* ------------------------------------------------------------
   PESAN DI EDITOR

   Hanya dicetak di dalam Elementor Editor (lihat editor_notice()),
   tidak pernah sampai ke pengunjung.
   ------------------------------------------------------------ */

.ecw-pcard-notice {
  padding: var(--ecw-sp-lg);
  border: 1px dashed var(--ecw-line-strong);
  background: var(--ecw-surface-2);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-sm);
  line-height: var(--ecw-lh-base);
  text-align: center;
}