/* Cupcup, lapisan gerak.
   Reveal saat elemen masuk layar, parallax foto, header sticky, plus
   sentuhan hover pada kartu dan tautan.

   File ini dimuat PALING BELAKANG di antara stylesheet snippet, jadi
   beberapa koreksi akhir yang perlu mengalahkan CSS lain juga diletakkan
   di sini, dan ditandai jelas.

   PENTING: keadaan reveal (tersembunyi lalu muncul) TIDAK ditulis di
   sini. Itu dipasang sebagai inline style oleh motion.js, karena CSS
   dasar atomic Elementor memakai selector ".elementor .e-heading-base"
   yang berbobot 0,2,0 dan dimuat setelah snippet ini, sehingga kelas
   biasa akan kalah pada sebagian elemen saja dan hasilnya tidak
   konsisten.

   PENTING KEDUA, soal cara menargetkan elemen Elementor: di dalam loop
   produk, atribut data-id DIACAK untuk setiap item yang dirender
   (1fy5tsp, 0v85995, dan seterusnya), sementara id template-nya pindah
   ke data-interaction-id. Jadi selector berbasis [data-id] TIDAK PERNAH
   mengenai kartu produk di loop, hanya elemen statis. Selalu pakai
   [data-interaction-id], yang ada di keduanya.

   Konsekuensi yang disengaja: kalau JavaScript mati, tidak ada satu pun
   elemen yang tersembunyi, halaman tampil utuh tanpa animasi. */

.cc-parallax { will-change: transform; }

/* Header sticky. Bar pengumuman menggulung naik setelah pengunjung
   menggulir, sehingga bar utama dengan navigasi dan cart tetap ada
   tanpa memakan tinggi layar.

   JANGAN pakai ".e-con:first-child" di sini. Sudah dicoba dan salah:
   selector itu juga mengenai container INDUK header, sehingga seluruh
   header ikut terpotong 120px dan hilang sepenuhnya saat digulir,
   termasuk navigasi dan cart. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.elementor-location-header [data-interaction-id="e11f6da"] {
  max-height: 90px;
  overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-head-shrink .elementor-location-header [data-interaction-id="e11f6da"] {
  max-height: 0;
  padding-block-start: 0;
  padding-block-end: 0;
}

/* Foto kartu produk dan kategori: skala sangat pelan, dipadu scrim
   brightness yang sudah ada. Lambat supaya terbaca bernapas, bukan zoom. */
[data-interaction-id="4148ac52"] img,
[data-interaction-id="65286b5f"] img,
[data-interaction-id="686251ce"] img,
[data-interaction-id="28ed3189"] img,
[data-interaction-id="1a5e79c0"] img,
[data-interaction-id="2b38ca54"] img,
[data-interaction-id="40cbfa58"] img,
[data-interaction-id="7abfb82a"] img {
  transition: transform 1.15s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-interaction-id="4148ac52"]:hover img,
[data-interaction-id="65286b5f"]:hover img,
[data-interaction-id="686251ce"]:hover img,
[data-interaction-id="28ed3189"]:hover img,
[data-interaction-id="1a5e79c0"]:hover img,
[data-interaction-id="2b38ca54"]:hover img,
[data-interaction-id="40cbfa58"]:hover img,
[data-interaction-id="7abfb82a"]:hover img {
  transform: scale(1.04);
}

/* Kategori di halaman detail produk. Tag terms WooCommerce menghasilkan
   tautan, dan tautan itu tidak mewarisi tipografi induknya karena
   Elementor me-reset link. Dipaksa mewarisi supaya barisnya menyatu. */
[data-interaction-id="9e2b4cb"] a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
}

/* Garis bawah yang menyapu masuk pada nav dan tautan footer.
   Memakai background-image supaya tidak ada pergeseran tata letak. */
.elementor-nav-menu--main .elementor-item,
.elementor-location-footer a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition:
    background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-location-footer a:hover {
  background-size: 100% 1px;
}

/* KOREKSI AKHIR, diletakkan di sini karena file ini dimuat paling
   belakang. Tombol WooCommerce berbentuk blok dirender sebagai <a>, dan
   tema memberinya garis bawah, sehingga tombol Proceed to Checkout
   tampil bergaris bawah di dalam kotak hitamnya. Terukur di halaman
   keranjang: textDecorationLine "underline" pada elemen <a>. */
.woocommerce a.button,
.woocommerce a.button.alt,
.wc-block-components-button,
.wp-element-button,
a.wc-block-components-button {
  text-decoration: none !important;
}

/* Hormati pengunjung yang mematikan animasi di sistem operasinya.
   motion.js sudah berhenti sebelum memasang reveal dan parallax kalau
   preferensi ini menyala; aturan di bawah menutup sisa transisi CSS. */
@media (prefers-reduced-motion: reduce) {
  .cc-parallax { transform: none !important; }

  [data-interaction-id="4148ac52"]:hover img,
  [data-interaction-id="65286b5f"]:hover img,
  [data-interaction-id="686251ce"]:hover img,
  [data-interaction-id="28ed3189"]:hover img,
  [data-interaction-id="1a5e79c0"]:hover img,
  [data-interaction-id="2b38ca54"]:hover img,
  [data-interaction-id="40cbfa58"]:hover img,
  [data-interaction-id="7abfb82a"]:hover img {
    transform: none;
  }

  .elementor-location-header [data-interaction-id="e11f6da"],
  .elementor-nav-menu--main .elementor-item,
  .elementor-location-footer a { transition: none; }
}