/* Sticky add to cart PDP, hasil ukur coterie.com 24 Agustus 2026.
   Diukur di 375x812 dan 900x812 lewat getComputedStyle plus CSS mentah
   yang diambil dari <style> CSS module `pdpStickyCta_stickyCta__HD0Tp`.

   Aturan asli mereka, disalin apa adanya sebagai pembanding:
     display:flex; position:fixed; z-index:11; bottom:0; left:0;
     width:100%; height:80px; align-items:center; justify-content:center;
     background-color:#fff; border-top:1px solid hsla(0,0%,8%,.1);
     transform:translateY(100%) translateZ(0);
     transition:transform 1s cubic-bezier(.16,1.08,.38,.98),visibility 1s;
     will-change:transform;
   dan `.isShown { transform:translateY(0) translateZ(0) }`,
   `.submit { width: var(--grid-width) }`.
   Kutipan tiga baris terakhir memakai nama kelas milik sumber dan
   sengaja tidak diterjemahkan supaya tetap sah sebagai pembanding. Di
   klon ini `.isShown` jadi `.section-pdp-sticky-cta.is-shown` dan
   `.submit` jadi `.section-pdp-sticky-cta__btn`.
   ============================================================ */

:root {
  /* Fallback. Modul js/pdp-sticky-cta.js menaikkan ini ke 80px saat bar
     tampil. */
  --pdp-sticky-cta-h: 0px;
}

.section-pdp-sticky-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  /* TERUKUR 80px, dan sengaja TIDAK dijadikan rem.
     Di sumber angkanya literal `height:80px` tanpa media query.
     Terverifikasi tetap 80px di 375 (root 10.0013px) maupun di 900
     (root 11.718px). Kalau ditulis 8rem, di 900 hasilnya 93.7px dan
     itu meleset dari hasil ukur. */
  height: 80px;

  /* TERUKUR 11. */
  z-index: 11;

  /* TERUKUR rgb(255,255,255) dan 1px hsla(0,0%,8%,.1), yaitu #141414
     pada alpha 0.1, persis --hairline di tokens.css. */
  background: var(--white);
  border-top: 1px solid var(--hairline);

  /* TERUKUR translateY(100%), bukan translateY(80px). Sama sama menutup
     karena tinggi border-box-nya 81px (80 + border 1px), tapi 100% yang
     benar benar dikirim sumber. translateZ(0) ikut disalin. */
  transform: translateY(100%) translateZ(0);

  /* MENYIMPANG DARI SUMBER, disengaja.
     Coterie menulis `visibility 1s` di transition tapi tidak pernah
     menyetel visibility di mana pun, jadi di situs mereka bar yang
     tersembunyi masih bisa dijangkau Tab. Di sini visibility benar
     benar dipakai supaya tombol tidak bisa difokus saat tak terlihat.
     Perilaku transisinya cocok: menuju visible berlaku seketika,
     menuju hidden ditahan sampai slide 1 detik selesai. */
  visibility: hidden;

  /* TERUKUR transform 1s cubic-bezier(0.16,1.08,0.38,0.98) plus
     visibility 1s. Bezier-nya sama dengan --ease-in-overshoot. */
  transition:
    transform 1s var(--ease-in-overshoot),
    visibility 1s;
  will-change: transform;
}

.section-pdp-sticky-cta.is-shown {
  transform: translateY(0) translateZ(0);
  visibility: visible;
}

/* Sumber memakai class `lg:hidden` yang HANYA terdefinisi di dalam
   @media (min-width: 1024px), jadi bar-nya ikut tampil di seluruh
   rentang tablet, di bawah buy box yang sudah punya tombol sendiri.
   Terverifikasi di 900: display flex, is-shown hidup, tombol 862.49px.
   Kemungkinan besar itu BUG di sumber, bukan desain yang disengaja.
   Ditiru supaya clone-nya jujur. Untuk memperbaiki, ganti 1024px
   di baris berikut jadi 768px. */
@media (min-width: 1024px) {
  .section-pdp-sticky-cta {
    display: none;
  }
}

/* TERUKUR: 343px @375 dan 862.49px @900, keduanya persis --grid-width.
   Sumbernya juga menulis `width: var(--grid-width)`, bukan angka tetap.
   Selektor dua class supaya menang atas `width: fit-content` di .u-btn
   tanpa bergantung pada urutan <link> stylesheet di head halaman. */
.section-pdp-sticky-cta .section-pdp-sticky-cta__btn {
  width: var(--grid-width);
}

/* Sisa geometri tombol datang dari .u-btn plus .u-btn-primary di
   tokens.css dan tidak perlu ditulis ulang. Sudah dicocokkan:
     TERUKUR tinggi 41.7px  = padding 14.0017 x2 + line-height 11.7
                              + border 1px x2. Itu 1.4rem, 0.9, 1px.
     TERUKUR font 13px weight 600 = clamp(11.7px, 1.3rem, 13px) di 375.
     TERUKUR radius 60.0075px = 6rem = --radius-pill.
     TERUKUR background rgb(0,0,201) = --blue, teks putih, border transparan.
   Jarak vertikal 19.65px di atas dan bawah tombol BUKAN padding.
   Computed padding bar-nya 0px. Angka itu hasil turunan: border-top 1px
   lalu align-items center, jadi 0.5 + (80 - 41.7) / 2 = 19.65. */

/* Bar tidak boleh menutupi konten terakhir halaman.
   --pdp-sticky-cta-h dinaikkan ke 80px oleh modul saat bar tampil, dan
   padding ini menempel di <body> supaya ruangnya jatuh SETELAH footer,
   bukan di antara main dan footer. Kalau tidak diinginkan, hapus satu
   rule ini saja, sisanya tetap jalan. */
/* MENYIMPANG DARI SUMBER, terpaksa. Di sumber selektornya
   `.clone-body`, sebuah class di <body>. Di situs ini <body> milik
   berkas halaman dan berkas halaman tidak boleh disentuh dari sini,
   jadi penandanya dipasang modul sebagai atribut data saat section ini
   benar benar ada di halaman. Efeknya sama, dan halaman tanpa bar tidak
   ikut kena. */
/* Dibatasi ke bawah 1024px, mengikuti media query
   .section-pdp-sticky-cta di atas. Tanpa batas ini, --pdp-sticky-cta-h
   tetap dinaikkan ke 80px oleh modul saat tombol beli tergulir lewat,
   padahal barnya display none di desktop. Gejalanya pita kosong 80px di
   bawah footer PDP di layar lebar. */
@media (max-width: 1023.98px) {
  body[data-pdp-sticky-cta] {
    padding-bottom: var(--pdp-sticky-cta-h);
  }
}

/* Rule 5: matikan transisi kalau visitor minta gerak dikurangi.
   Bar tetap muncul dan hilang, cuma tanpa slide. */
@media (prefers-reduced-motion: reduce) {
  .section-pdp-sticky-cta {
    transition: none;
  }
}