/* Cupcup, pemilih varian produk.

   Kenapa ditulis sendiri: Elementor 4.3.0-beta2 tidak punya SATU PUN widget
   WooCommerce, shortcode, atau HTML, jadi form varian bawaan WooCommerce
   tidak bisa dimasukkan ke template produk lewat editor. Lihat variations.js
   untuk cara kerjanya.

   Bentuknya sengaja pil, bukan dropdown: pilihannya biasanya sedikit (Silver
   dan Gold), dan pil menampilkan seluruh pilihan sekaligus tanpa klik dua
   kali. Kalau client nanti membuat atribut dengan banyak nilai, pil tetap
   jalan dan membungkus ke baris berikutnya. */

.cc-variations {
  margin-block-start: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cc-variation-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-variation-label {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-faint, #A39C8F);
}

.cc-variation-label .cc-variation-chosen {
  color: var(--cc-ink, #1A1815);
  margin-inline-start: 8px;
  letter-spacing: 0.16em;
}

.cc-variation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cc-variation-option {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-ink, #1A1815);
  background: transparent;
  border: 1px solid var(--cc-hairline, rgba(26, 24, 21, 0.18));
  border-radius: 0;
  padding: 13px 22px;
  cursor: pointer;
  transition: border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-variation-option:hover {
  border-color: var(--cc-ink, #1A1815);
}

.cc-variation-option[aria-pressed="true"] {
  background-color: var(--cc-ink, #1A1815);
  border-color: var(--cc-ink, #1A1815);
  color: var(--cc-bone, #F3F0E9);
}

/* Varian yang stoknya habis tetap terlihat, supaya pengunjung tahu modelnya
   ada, tapi tidak bisa dipilih. */
.cc-variation-option[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  text-decoration: line-through;
}

.cc-variation-option[disabled]:hover {
  border-color: var(--cc-hairline, rgba(26, 24, 21, 0.18));
}

/* Tombol beli saat varian terpilih habis. Tombolnya milik Elementor, jadi
   yang disentuh hanya keadaannya, bukan gayanya. */
.cc-add-disabled {
  opacity: 0.35;
  pointer-events: none;
}