/* ============================================================
   SWATCH VARIAN

   Menggantikan tampilan <select> varian WooCommerce. Select-nya
   sendiri tetap ada di DOM - lihat class-ecw-variation-swatches.php
   untuk alasannya.

   BACA INI SEBELUM MENGUBAH SELEKTOR DI BAWAH.

   Swatch ini hidup DI DALAM form yang dicetak widget Product Add To
   Cart milik Elementor Pro, dan widget itu menata SEMUA <button> di
   dalam dirinya. Waktu opsi "Align: Justify" aktif dia memasang kelas
   .elementor-add-to-cart--align-justify dan menyuruh tombolnya melar
   memenuhi lebar. Kit Elementor juga menata `button` global (latar,
   radius, tinggi minimum), dan tema Blocksy menambah lapisannya sendiri.

   Semua aturan itu bobotnya lebih tinggi dari .ecw-swatch (0-1-0).
   Versi pertama file ini mengabaikannya, dan hasilnya persis seperti
   yang terlihat di layar: lingkaran warna berubah jadi balok selebar
   kolom.

   Karena itu selektor tombolnya digandakan sampai 0-3-1
   (.ecw-swatches .ecw-swatches__list .ecw-swatch) dan properti
   yang biasanya diwarisi - flex, width, height, radius, background,
   border, shadow, font - dinolkan secara eksplisit.

   Bukan !important. !important menang atas SEMUANYA, termasuk
   pengaturan Style Elementor yang sah dan aturan di file ini sendiri;
   itu memindahkan masalahnya, bukan menyelesaikannya.

   Seluruh nilai di sini datang dari tokens.css.
   ============================================================ */

.ecw-swatches {
  margin: 0;
  font-family: var(--ecw-font);
}

/* Select asli: disembunyikan dari mata, tapi TIDAK dari form.
   Pola clip klasik, bukan display:none - elemen yang display:none
   tidak bisa difokuskan secara terprogram, dan nilainya tetap harus
   bisa disetel skrip. Yang mengeluarkannya dari urutan tab dan dari
   pohon aksesibilitas adalah atribut [inert] di markup-nya. */
.ecw-swatches__native {
  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-swatches .ecw-swatches__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecw-sp-xs);
  align-items: center;
  margin: 0;
  padding: 0;
}

.ecw-swatches .ecw-swatches__selected {
  margin: var(--ecw-sp-xs) 0 0;
  padding: 0;
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-medium);
  line-height: var(--ecw-lh-base);
  letter-spacing: var(--ecw-track-none);
  text-transform: none;
}

/* ------------------------------------------------------------
   DASAR TOMBOL - menetralkan gaya tombol milik Elementor dan tema
   ------------------------------------------------------------ */

.ecw-swatches .ecw-swatches__list .ecw-swatch {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  color: inherit;
  font-family: var(--ecw-font);
  line-height: 1;
  text-transform: none;
  letter-spacing: var(--ecw-track-none);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    box-shadow var(--ecw-t-base) var(--ecw-ease),
    border-color var(--ecw-t-base) var(--ecw-ease),
    color var(--ecw-t-base) var(--ecw-ease),
    background-color var(--ecw-t-base) var(--ecw-ease);
}

/* ------------------------------------------------------------
   SWATCH WARNA

   Warna latarnya datang dari atribut style inline (dicetak server dari
   ECW_Swatches), jadi `background` TIDAK boleh dinolkan lagi di sini -
   yang dinolkan di aturan dasar cuma background-image milik tema.
   ------------------------------------------------------------ */

.ecw-swatches .ecw-swatches__list .ecw-swatch--color {
  width: var(--ecw-swatch);
  height: var(--ecw-swatch);
  border-radius: var(--ecw-r-pill);

  /* Cincin dipisah dari latar supaya warna produknya tidak tersentuh:
     box-shadow menggambar batas DI LUAR lingkaran, jadi swatch putih
     tetap seluas swatch hitam dan barisnya tidak bergoyang. */
  box-shadow:
    inset 0 0 0 var(--ecw-border) var(--ecw-swatch-edge),
    0 0 0 var(--ecw-border) var(--ecw-line);
}

.ecw-swatches .ecw-swatches__list .ecw-swatch--color:hover {
  box-shadow:
    inset 0 0 0 var(--ecw-border) var(--ecw-swatch-edge),
    0 0 0 var(--ecw-sp-3xs) var(--ecw-line-strong);
}

/* Terpilih: cincin gelap dengan jeda putih di antaranya, supaya
   penandanya terlihat di atas warna apa pun - termasuk hitam, yang
   akan menelan cincin hitam tanpa jeda itu. */
.ecw-swatches .ecw-swatches__list .ecw-swatch--color[aria-checked="true"] {
  box-shadow:
    inset 0 0 0 var(--ecw-border) var(--ecw-swatch-edge),
    0 0 0 var(--ecw-sp-3xs) var(--ecw-surface),
    0 0 0 var(--ecw-sp-2xs) var(--ecw-ink);
}

/* Centang. Digambar sebagai mask supaya bentuknya satu dan cuma
   warnanya yang berganti. */
.ecw-swatches .ecw-swatches__list .ecw-swatch--color[aria-checked="true"]::after {
  content: "";
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
  background-color: var(--ecw-on-ink);
  -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='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></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='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Centang putih di atas swatch putih tidak terlihat sama sekali - dan
   yang hilang bukan hiasan, melainkan satu-satunya penanda mana yang
   sedang dipilih. Kelas is-light dipasang server dari luminance WCAG
   warnanya, bukan dari tebakan nama. */
.ecw-swatches .ecw-swatches__list .ecw-swatch--color.is-light[aria-checked="true"]::after {
  background-color: var(--ecw-ink);
}

/* ------------------------------------------------------------
   SWATCH TEKS (ukuran, bahan, apa pun yang bukan warna)
   ------------------------------------------------------------ */

.ecw-swatches .ecw-swatches__list .ecw-swatch--label {
  min-width: var(--ecw-control-h);
  height: var(--ecw-control-h);
  padding: 0 var(--ecw-sp-sm);
  border: var(--ecw-border) solid var(--ecw-line-strong);
  border-radius: var(--ecw-r-sm);
  background: var(--ecw-surface);
  color: var(--ecw-ink);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-semibold);
  letter-spacing: var(--ecw-track-label);
  text-transform: uppercase;
}

.ecw-swatches .ecw-swatches__list .ecw-swatch--label:hover {
  border-color: var(--ecw-ink);
}

.ecw-swatches .ecw-swatches__list .ecw-swatch--label[aria-checked="true"] {
  border-color: var(--ecw-ink);
  background: var(--ecw-ink);
  color: var(--ecw-on-ink);
}

/* ------------------------------------------------------------
   KEADAAN BERSAMA
   ------------------------------------------------------------ */

/* Fokus keyboard harus terlihat DI ATAS cincin terpilih, jadi memakai
   outline (yang digambar di luar box-shadow), bukan box-shadow lagi. */
.ecw-swatches .ecw-swatches__list .ecw-swatch:focus-visible {
  outline: var(--ecw-sp-3xs) solid var(--ecw-ink);
  outline-offset: var(--ecw-sp-2xs);
}

/* Tidak tersedia untuk kombinasi yang sedang dipilih.
   Tetap terlihat dan tetap bisa difokuskan - lihat catatan aria-disabled
   di swatches.js. Garis miring memberi tahu "ada, tapi tidak sekarang",
   yang merupakan informasi; menghilangkannya justru menyembunyikan
   bahwa warna itu ada. */
.ecw-swatches .ecw-swatches__list .ecw-swatch[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.35;
}

.ecw-swatches .ecw-swatches__list .ecw-swatch--color[aria-disabled="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    var(--ecw-ink) calc(50% - 1px),
    var(--ecw-ink) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.ecw-swatches .ecw-swatches__list .ecw-swatch--label[aria-disabled="true"] {
  text-decoration: line-through;
}

/* ------------------------------------------------------------
   BARIS ATRIBUT

   WooCommerce mencetak atribut varian sebagai <table>. Blok ini
   mengubahnya jadi tumpukan blok biasa supaya label duduk rapi di atas
   swatch-nya.

   :has() dipakai supaya aturan ini HANYA menyentuh tabel yang benar-
   benar berisi swatch kita. Tabel varian lain di situs ini - dari tema
   atau plugin lain - tidak tersentuh sama sekali.

   Browser tanpa :has() melewatkan seluruh blok ini dan tetap mendapat
   tabel bawaan WooCommerce yang berfungsi penuh; yang hilang cuma
   kerapiannya, bukan kemampuannya.
   ------------------------------------------------------------ */

.variations:has(.ecw-swatches) {
  display: block;
  width: 100%;
  margin: 0 0 var(--ecw-sp-md);
  border: 0;
  border-collapse: collapse;
}

.variations:has(.ecw-swatches) tbody,
.variations:has(.ecw-swatches) tr,
.variations:has(.ecw-swatches) th,
.variations:has(.ecw-swatches) td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.variations:has(.ecw-swatches) tr + tr {
  margin-top: var(--ecw-sp-md);
}

/* Label atribut ("Color", "Size") disamakan dengan label field di
   seluruh plugin: kapital kecil ber-tracking lebar. */
.variations:has(.ecw-swatches) th.label,
.variations:has(.ecw-swatches) th.label label {
  margin: 0 0 var(--ecw-sp-xs);
  color: var(--ecw-ink);
  font-family: var(--ecw-font);
  font-size: var(--ecw-text-micro);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-tight);
  letter-spacing: var(--ecw-track-label);
  text-transform: uppercase;
}

/* "Clear" hanya muncul setelah ada pilihan - itu WooCommerce yang
   mengatur, jadi di sini cuma soal bentuk. Ditaruh sebagai baris
   sendiri di bawah swatch supaya tidak menempel di ujung deretan warna
   dan tidak ikut terhimpit waktu warnanya banyak. */
.variations:has(.ecw-swatches) .reset_variations {
  display: inline-block;
  margin-top: var(--ecw-sp-xs);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
  text-decoration: underline;
  text-underline-offset: var(--ecw-sp-3xs);
}

.variations:has(.ecw-swatches) .reset_variations:hover {
  color: var(--ecw-ink);
}

/* Gerak dimatikan untuk yang memintanya. Swatch berpindah keadaan
   karena pembeli mengklik, jadi transisinya tidak membawa informasi
   apa pun yang hilang kalau dihapus. */
@media (prefers-reduced-motion: reduce) {
  .ecw-swatches .ecw-swatches__list .ecw-swatch {
    transition: none;
  }
}