/**
 * Gaya dasar halaman produk.
 *
 * Yang ada di sini cuma yang TIDAK BISA diatur dari Elementor: perilaku
 * (menempel, menggeser, popup), dan menyembunyikan bagian bawaan
 * WooCommerce yang tidak dipakai.
 *
 * Warna, tipografi, jarak, dan sudut sengaja dibiarkan kosong - semuanya
 * punya kontrol di panel Style. Menuliskannya di sini akan berperang
 * dengan CSS per-elemen Elementor, dan Elementor menang, jadi hasilnya
 * cuma aturan mati yang membingungkan orang berikutnya.
 *
 * Palet bawaannya hitam-putih. Tidak ada warna aksen sama sekali.
 */

:root {
  --arc-pdp-line: #000;
  --arc-pdp-muted: #6b6b6b;
  --arc-pdp-soft: #ededed;
  --arc-pdp-frame: #e7e7e7;

  /* Garis diam: abu-abu. Yang hitam cuma yang sedang terpilih, jadi mata
     langsung tahu mana pilihannya tanpa membaca. */
  --arc-pdp-border: #d6d6d6;
}

/* ============================================================
   PESAN DI EDITOR
   ============================================================ */

.arc-pdp-notice {
  padding: 14px 16px;
  border: 1px dashed #b5b5b5;
  background: #fafafa;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================================
   GALERI
   ============================================================ */

.arc-pdp-gallery__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arc-pdp-gallery__item {
  position: relative;
  background: var(--arc-pdp-frame);
  overflow: hidden;
}

/* Rasio dipasang lewat padding-top, bukan aspect-ratio, supaya tingginya
   sudah benar sebelum gambar selesai diunduh. Dengan aspect-ratio saja,
   browser lama tetap melompat saat gambar masuk. */
.arc-pdp-gallery[style*="--arc-pdp-ratio"] .arc-pdp-gallery__item::before {
  content: "";
  display: block;
  padding-top: calc(100% / var(--arc-pdp-ratio));
}

.arc-pdp-gallery[style*="--arc-pdp-ratio"] .arc-pdp-gallery__item > * {
  position: absolute;
  inset: 0;
}

.arc-pdp-gallery__item img,
.arc-pdp-gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arc-pdp-gallery__progress {
  display: none;
}

/* Panggung: pegangan posisi untuk panah. Di desktop galeri berupa kolom
   foto, jadi panahnya memang tidak pernah muncul di sana. */
.arc-pdp-gallery__stage {
  position: relative;
}

.arc-pdp-gallery__nav {
  display: none;
}

@media (max-width: 767px) {
  /* PANAH KIRI-KANAN (mobile)
   *
   * Selector-nya sengaja dua kelas. Tema memasang gaya ke semua
   * [type=button] - padding, border, dan background pink saat :hover
   * dengan bobot (0,2,0). Tanpa bobot yang setara, panah ini berubah jadi
   * kotak pink begitu disentuh di ponsel, karena di layar sentuh :hover
   * menempel setelah ketukan.
   */
  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav,
  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav:hover,
  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav:focus,
  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav:active {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease;
  }

  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav--prev {
    left: 8px;
  }

  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav--next {
    right: 8px;
  }

  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /* Di gambar pertama tidak ada "sebelumnya", di gambar terakhir tidak
     ada "berikutnya". Disembunyikan, bukan diredupkan - panah pudar yang
     tidak bisa ditekan cuma mengundang ketukan yang tidak terjadi apa-apa. */
  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__nav:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Bar gulir disembunyikan tapi geseran tetap jalan - di ponsel bar itu
       tidak pernah dipakai untuk menggeser, cuma menghabiskan ruang. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__list::-webkit-scrollbar {
    display: none;
  }

  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* TINGGI GALERI HARUS TERBACA OLEH ELEMENTOR.
   *
   * Di luar mode slider, tinggi item datang dari ::before ber-padding
   * persen sementara isinya diangkat keluar alur (position:absolute).
   * Di kolom itu tidak masalah. Begitu list jadi baris yang bisa digeser,
   * kotak Elementor pembungkus widget berhenti melihat tinggi itu:
   * .elementor-widget-container kolaps ke ~20px sementara isinya tetap
   * digambar setinggi aslinya, jadi galeri menimpa kolom info di bawahnya.
   *
   * Diukur di halaman produk live, lebar 390px:
   *   sebelum -> widget offsetHeight=20,  scrollHeight=473
   *   sesudah -> widget offsetHeight=473, scrollHeight=473
   *
   * Perbaikannya memberi item rasio yang sesungguhnya dan mengembalikan
   * isinya ke alur normal. Dua-duanya perlu - hanya memasang
   * aspect-ratio sambil membiarkan isinya absolut tetap kolaps.
   */
  .arc-pdp-gallery[style*="--arc-pdp-ratio"].arc-pdp-gallery--slider-mobile
  .arc-pdp-gallery__item::before {
    display: none;
  }

  .arc-pdp-gallery[style*="--arc-pdp-ratio"].arc-pdp-gallery--slider-mobile
  .arc-pdp-gallery__item {
    aspect-ratio: var(--arc-pdp-ratio);
  }

  .arc-pdp-gallery[style*="--arc-pdp-ratio"].arc-pdp-gallery--slider-mobile
  .arc-pdp-gallery__item > * {
    position: static;
  }

  .arc-pdp-gallery--slider-mobile .arc-pdp-gallery__progress {
    display: block;
    height: 2px;
    margin-top: 8px;
    background: var(--arc-pdp-soft);
    overflow: hidden;
  }

  .arc-pdp-gallery__bar {
    display: block;
    height: 100%;
    background: var(--arc-pdp-line);
    transition: transform 0.15s linear;
  }
}

/* ============================================================
   JUDUL, HARGA, RATING
   ============================================================ */

.arc-pdp-title__text {
  margin: 0;
}

.arc-pdp-title__text a,
.arc-pdp-rating__box {
  color: inherit;
  text-decoration: none;
}

.arc-pdp-price__value del {
  opacity: 0.55;
  margin-right: 6px;
}

.arc-pdp-price__value ins {
  text-decoration: none;
}

.arc-pdp-rating__box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bintang dibuat dari karakter, bukan gambar atau font ikon. Tidak ada
   berkas tambahan yang diunduh, dan ukurannya ikut font-size. */
.arc-pdp-rating__stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: var(--arc-pdp-soft);
  white-space: nowrap;
}

.arc-pdp-rating__stars::before,
.arc-pdp-rating__on::before {
  content: "\2605\2605\2605\2605\2605";
}

.arc-pdp-rating__on {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--arc-pdp-line);
}

/* ============================================================
   PEMILIH ATRIBUT
   ============================================================ */

.arc-pdp-attr__label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-pdp-muted);
  margin-bottom: 8px;
}

.arc-pdp-attr__stock {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.arc-pdp-attr__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/*
 * SATU ATURAN YANG TIDAK BOLEH DILANGGAR DI BLOK INI:
 * berpindah keadaan tidak boleh mengubah ukuran tombol.
 *
 * Menebalkan garis saat terpilih terlihat wajar di layar desain, tapi di
 * halaman asli deretan tombolnya jadi bergeser tiap kali pembeli memilih -
 * dan pergeseran itu terbaca sebagai halaman yang rusak, bukan sebagai
 * penanda pilihan.
 *
 * Jadi yang berubah antar keadaan hanya WARNA. Lebar, tinggi, padding, dan
 * tebal garis tetap. box-sizing dipasang eksplisit supaya tidak bergantung
 * pada tema - kalau tema memakai content-box, garis 1px akan menambah
 * ukuran luar dan janji di atas batal.
 */
/*
 * KENAPA SEMUA SELECTOR TOMBOL DI BAWAH DIAWALI .arc-pdp-attr
 *
 * Elementor Kit menata SETIAP <button> di situs:
 *
 *     .elementor-kit-8 button { border-color: ...; background-color: ...; }
 *
 * Bobotnya (0,1,1). Selector satu kelas seperti .arc-pdp-attr__opt bobotnya
 * (0,1,0) - kalah, dan warna bawaan di sini tidak pernah sampai ke layar.
 * Gejalanya menyesatkan: tombol tampil dengan warna yang tidak ada di
 * mana pun dalam berkas ini.
 *
 * Menambah satu kelas induk menaikkannya ke (0,2,0), cukup untuk menang
 * atas Kit tapi tetap kalah dari kontrol Style Elementor yang bobotnya
 * (0,4,0) - jadi panel Style tetap bisa menimpa semuanya.
 */
.arc-pdp-attr .arc-pdp-attr__opt {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid var(--arc-pdp-border);
  border-radius: 0;
  background: #fff;
  color: var(--arc-pdp-line);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}

/* Garis menghitam saat disentuh - penanda "ini bisa diklik" tanpa mengubah
   satu piksel pun ukurannya. */
.arc-pdp-attr .arc-pdp-attr__opt:hover {
  border-color: var(--arc-pdp-line);
  background: #fff;
}

.arc-pdp-attr .arc-pdp-attr__opt.is-active,
.arc-pdp-attr .arc-pdp-attr__opt.is-active:hover {
  background: var(--arc-pdp-line);
  border-color: var(--arc-pdp-line);
  color: #fff;
}

/*
 * Yang habis dicoret, bukan disembunyikan.
 *
 * Menyembunyikannya membuat deretan ukuran berubah panjang tiap warna
 * diganti, dan pembeli membaca perubahan itu sebagai halaman yang rusak -
 * bukan sebagai informasi stok.
 */
.arc-pdp-attr .arc-pdp-attr__opt.is-disabled {
  color: var(--arc-pdp-muted);
  border-color: var(--arc-pdp-soft);
  background: #fff;
  cursor: not-allowed;
  position: relative;
}

.arc-pdp-attr .arc-pdp-attr__opt.is-disabled::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  border-top: 1px solid currentColor;
  transform: rotate(-14deg);
  opacity: 0.6;
}

.arc-pdp-attr .arc-pdp-attr__list.is-hiding .arc-pdp-attr__opt.is-disabled {
  display: none;
}

/* Deretan menyatu: satu garis di antara tombol, bukan dua yang bertumpuk. */
.arc-pdp-attr__list.is-joined {
  gap: 0;
}

.arc-pdp-attr .arc-pdp-attr__list.is-joined .arc-pdp-attr__opt + .arc-pdp-attr__opt {
  border-left-width: 0;
}

.arc-pdp-attr .arc-pdp-attr__list--image .arc-pdp-attr__opt,
.arc-pdp-attr .arc-pdp-attr__list--color .arc-pdp-attr__opt {
  width: 56px;
  height: 56px;
  padding: 3px;
}

.arc-pdp-attr .arc-pdp-attr__list--image .arc-pdp-attr__opt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Swatch gambar tidak boleh berubah jadi kotak hitam saat terpilih - itu
 * justru menutupi barang yang sedang dilihat. Penandanya cuma warna garis:
 * abu-abu jadi hitam, tetap 1px.
 */
.arc-pdp-attr .arc-pdp-attr__list--image .arc-pdp-attr__opt.is-active,
.arc-pdp-attr .arc-pdp-attr__list--color .arc-pdp-attr__opt.is-active {
  background: #fff;
  border-color: var(--arc-pdp-line);
}

.arc-pdp-attr__dot {
  display: block;
  width: 100%;
  height: 100%;
}

.arc-pdp-attr.is-orphan {
  opacity: 0.45;
  pointer-events: none;
}

/* ============================================================
   PANDUAN UKURAN
   ============================================================ */

.arc-pdp-sg .arc-pdp-sg__trigger {
  appearance: none;
  border: 1px solid transparent;
  background: var(--arc-pdp-soft);
  color: var(--arc-pdp-line);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  cursor: pointer;
}

.arc-pdp-sg__modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.arc-pdp-sg__modal[hidden] {
  display: none;
}

.arc-pdp-sg__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.arc-pdp-sg__box {
  position: relative;
  background: #fff;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  outline: none;
}

.arc-pdp-sg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--arc-pdp-soft);
  position: sticky;
  top: 0;
  background: #fff;
}

.arc-pdp-sg .arc-pdp-sg__close {
  appearance: none;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--arc-pdp-line);
  padding: 0 4px;
}

.arc-pdp-sg__body {
  padding: 16px;
}

.arc-pdp-sg__img {
  display: block;
  width: 100%;
  height: auto;
}

.arc-pdp-sg__note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--arc-pdp-muted);
}

/* Halaman di belakang popup dikunci supaya tidak ikut tergulir. */
html.arc-pdp-modal-open,
html.arc-pdp-modal-open body {
  overflow: hidden;
}

/* ============================================================
   ADDITIONAL INFO
   ============================================================ */

.arc-pdp-info__label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-pdp-muted);
  margin-bottom: 8px;
}

.arc-pdp-info__row {
  margin: 0 0 4px;
  font-size: 12px;
}

/*
 * Badge, bukan tautan bergaris bawah.
 *
 * Garis bawah membuatnya terbaca sebagai tautan di dalam kalimat -
 * setara dengan kata biasa yang kebetulan bisa diklik. Bentuk kotak
 * memisahkannya dari kalimat dan membacanya sebagai tombol, yang memang
 * perannya.
 */
.arc-pdp-info__link {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 9px;
  background: var(--arc-pdp-soft);
  color: inherit;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  vertical-align: middle;
}

/* ============================================================
   VIEW MORE
   ============================================================ */

.arc-pdp-viewmore {
  display: flex;
  flex-direction: column;
}

.arc-pdp-viewmore__item {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--arc-pdp-soft);
  color: var(--arc-pdp-line);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Satu garis di antara baris, bukan dua yang bertumpuk jadi tebal. */
.arc-pdp-viewmore__item + .arc-pdp-viewmore__item {
  border-top-width: 0;
}

/* ============================================================
   RECOMMENDED
   ============================================================ */

.arc-pdp-rec__heading {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.arc-pdp-rec__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.arc-pdp-rec__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.arc-pdp-rec__media {
  display: block;
  background: var(--arc-pdp-frame);
  margin-bottom: 8px;
}

.arc-pdp-rec__media img {
  display: block;
  width: 100%;
  height: auto;
}

.arc-pdp-rec__name {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
}

.arc-pdp-rec__price {
  display: block;
  font-size: 11px;
  color: var(--arc-pdp-muted);
  margin-top: 2px;
}

@media (max-width: 767px) {
  .arc-pdp-rec__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/*
 * Bagian bawaan WooCommerce yang tidak dipakai.
 *
 * Select-nya TIDAK dihapus dari DOM dan tidak diberi display:none pada
 * elemennya sendiri - wc-add-to-cart-variation.js membaca dan menulis ke
 * situ. Yang disembunyikan pembungkusnya.
 */
.arc-pdp-cart .variations,
.arc-pdp-cart .reset_variations,
.arc-pdp-cart .woocommerce-variation-description {
  display: none !important;
}

.arc-pdp-cart--no-qty .quantity {
  display: none !important;
}

.arc-pdp-cart--no-varinfo .woocommerce-variation-price,
.arc-pdp-cart--no-varinfo .woocommerce-variation-availability {
  display: none !important;
}

/*
 * KENAPA KEADAAN MATI IKUT DITULIS DI SELECTOR YANG SAMA
 *
 * WooCommerce punya aturan khusus untuk tombol yang sedang mati:
 *
 *     .woocommerce ... button.button.disabled { padding: .618em 1em; }
 *
 * Bobotnya (0,3,1) - :where() di dalamnya tidak menambah bobot apa pun.
 * Aturan di bawah tanpa .disabled bobotnya (0,2,1), jadi kalah, dan
 * padding tombol berubah begitu pilihan dikosongkan.
 *
 * Akibatnya terukur: tinggi tombol 31,3px saat mati dan 50px saat nyala.
 * Tombolnya melompat tiap pembeli mengganti pilihan - dan yang dibaca
 * bukan "belum lengkap", melainkan halaman yang goyang.
 *
 * Menyebut .disabled dan :disabled di selector yang sama menaikkan bobot
 * seluruh blok ini ke (0,3,1). Seri dengan WooCommerce, dan berkas ini
 * dimuat belakangan - jadi yang ini yang berlaku, untuk KEDUA keadaan
 * dengan nilai yang sama persis.
 *
 * Kontrol di panel Style Elementor bobotnya (0,5,1), jadi tetap menang
 * atas semuanya dan mengubah dua keadaan sekaligus.
 */
.arc-pdp-cart button.single_add_to_cart_button,
.arc-pdp-cart button.single_add_to_cart_button.disabled,
.arc-pdp-cart button.single_add_to_cart_button:disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  /* WooCommerce memasang float:left lewat selector yang bobotnya jauh di
     atas ini; dibiarkan, tombolnya keluar dari alur dan pembungkusnya
     kehilangan tinggi. */
  float: none;
}

.arc-pdp-cart button.single_add_to_cart_button.disabled,
.arc-pdp-cart button.single_add_to_cart_button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Produk habis: WooCommerce mencetak <p class="stock out-of-stock"> di
   tempat tombol. Diberi huruf yang sama dengan tombol dan SIZE GUIDE
   supaya terbaca sebagai status produk, bukan pesan error yang nyasar.
   Warnanya dibiarkan milik WooCommerce - merah memang tepat di sini. */
.arc-pdp-cart p.stock {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* -------- Menempel di bawah (mobile) -------- */

@media (max-width: 767px) {
  /* PEMBUNGKUS TIDAK MENGGAMBAR APA PUN.
   *
   * Dulu di sini ada background putih, padding ruang-aman, dan garis
   * box-shadow di sisi atas. Ketiganya terlihat: garis terang di atas bar,
   * dan pita putih di bawah tombol setinggi ruang aman perangkat.
   *
   * Sekarang bar diisi penuh oleh tombolnya sendiri, jadi warnanya selalu
   * ikut apa pun yang diset di panel Style Elementor - tanpa warna kedua
   * yang harus disamakan manual.
   */
  .arc-pdp-cart--sticky-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    background: transparent;
  }

  /* Ruang aman (bilah gestur) ditambahkan ke padding TOMBOL, bukan
     pembungkus. Di pembungkus, area itu memakai warna pembungkus dan
     muncul sebagai pita di bawah tombol; di dalam tombol, area itu ikut
     berwarna tombol dan tetap bisa ditekan.
     18px = padding dasar tombol, lihat blok .arc-pdp-cart button di atas.
     Selector .disabled/:disabled ikut disebut supaya bobotnya seri dengan
     aturan dasar yang (0,3,1) - tanpa itu, tombol nonaktif kehilangan
     ruang amannya. */
  .arc-pdp-cart--sticky-mobile button.single_add_to_cart_button,
  .arc-pdp-cart--sticky-mobile button.single_add_to_cart_button.disabled,
  .arc-pdp-cart--sticky-mobile button.single_add_to_cart_button:disabled {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* WooCommerce memberi form keranjang margin-bawah 2em. Di halaman biasa
     itu jarak ke blok berikutnya; di dalam bar yang menempel, margin itu
     jadi 32px kosong di bawah tombol - persis pita yang dulu terlihat
     putih karena pembungkusnya berlatar putih.
     Aturan WooCommerce-nya .woocommerce div.product form.cart, jadi
     selector di sini sengaja dibuat lebih berbobot. */
  /* BOBOT SELECTOR. Aturan WooCommerce-nya .woocommerce div.product
   * form.cart = (0,3,2). Versi sebelumnya menulis
   * .arc-pdp-cart.arc-pdp-cart--sticky-mobile form.cart = (0,3,1) - kalah
   * satu elemen, jadi untuk produk SIMPLE (keychain) margin 2em tetap
   * berlaku dan bar punya 32px kosong tembus pandang di bawah tombol,
   * memperlihatkan konten halaman di bawah ADD TO BAG. Produk variabel
   * lolos karena selector form.variations_form.cart punya satu kelas
   * lebih. Diukur di live: form.cart margin-bottom=32px, bar 82px untuk
   * tombol 50px.
   *
   * Kelas pembungkus disebut dua kali supaya bobotnya (0,4,1) - menang
   * tanpa !important dan tanpa bergantung urutan berkas CSS. */
  .arc-pdp-cart.arc-pdp-cart--sticky-mobile.arc-pdp-cart--sticky-mobile form.variations_form.cart,
  .arc-pdp-cart.arc-pdp-cart--sticky-mobile.arc-pdp-cart--sticky-mobile form.cart {
    margin-bottom: 0;
  }

  /* Teks stok di dalam bar yang menempel.
   *
   * Untuk produk tanpa ukuran (keychain), template WooCommerce mencetak
   * <p class="stock">12 in stock</p> di atas tombol - DI DALAM pembungkus
   * yang menempel. Pembungkus itu tidak berlatar (bar hitamnya milik
   * tombol), jadi teks itu melayang di atas foto galeri. Disembunyikan di
   * sini; produk berukuran menampilkan stok di baris "SIZE - 4 in stock".
   * Produk yang habis tidak kena aturan ini karena memang tidak dibuat
   * menempel - lihat ARC_PDP_Cart::render(). */
  .arc-pdp-cart--sticky-mobile p.stock {
    display: none;
  }

  /* Tombol WhatsApp (plugin Click to Chat, #ht-ctc-chat) ditaruh plugin
   * itu di pojok kanan bawah lewat gaya inline - tepat di atas ujung
   * kanan ADD TO BAG. Selama bar menempel ada, tombol itu dinaikkan di
   * atasnya. !important karena posisinya ditulis inline di elemennya. */
  body.arc-pdp-has-sticky-cart #ht-ctc-chat {
    bottom: calc(var(--arc-pdp-sticky-h, 64px) + 12px) !important;
  }

  /* Ruang di dasar halaman supaya isi terakhir tidak tertutup tombol.
     Tingginya diukur JavaScript - teks yang membungkus dua baris membuat
     angka tetap di sini selalu salah. */
  body.arc-pdp-has-sticky-cart {
    padding-bottom: var(--arc-pdp-sticky-h, 64px);
  }
}