/* PDP, hasil ukur coterie.com. Semua angka dalam rem karena desain
   mereka dikunci di 1440 desktop dan 375 mobile, jadi spacing-nya
   selalu rem bulat. Lihat 15_coterie-teardown.md

   Port dari clvn-desk src/components/pdp/pdp.css. Angka, urutan rule,
   dan komentar tidak diubah. Yang berubah HANYA nama kelas: dari gaya
   CSS module di sumbernya jadi BEM kebab-case situs ini, dan kelas
   status jadi berprefiks is- dengan tanda hubung.

   Blok akar memakai prefiks .section- sesuai konvensi. Sepuluh blok
   sisanya tetap blok sendiri dengan namespace .pdp-, bukan elemen dari
   blok akar, karena di sumbernya memang sebelas blok terpisah dan
   memaksanya jadi satu blok akan melahirkan elemen dari elemen. */

.section-pdp-hero { display: block; }
@media (min-width: 1024px) {
  .section-pdp-hero {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: var(--grid-width);
    /* TERUKUR di genericPdpHero_diptych: padding 4rem 0 dan margin
       0 var(--margin). Tanpa padding ini hero menempel langsung ke
       header dan ke section berikutnya, dan itu beda yang paling
       kelihatan mata di seluruh halaman.
       margin 0 auto setara dengan 0 var(--margin) karena grid-width
       adalah 94.444vw, sisanya persis 2.778vw di tiap sisi. */
    padding: 4rem 0;
    margin: 0 auto;
  }
}

/* --- Galeri, sticky di desktop -------------------------------- */
.section-pdp-hero__left { width: 100%; }
@media (min-width: 1024px) {
  .section-pdp-hero__left {
    /* 613.02px @1280 */
    width: calc(12 * var(--col) + 12 * var(--gutter));
    position: sticky;
    /* Terukur 94.05px = header-height-fixed + 4rem */
    top: calc(var(--header-height-fixed) + 4rem);
  }
}

/* Satu elemen memegang dua peran, sama seperti aslinya. */
.pdp-gallery { display: flex; flex-direction: column-reverse; }
@media (min-width: 1024px) {
  .pdp-gallery { flex-direction: row; gap: var(--col); }
}
.pdp-gallery__nav-item { display: flex; }

.pdp-gallery__nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  /* justify-content flex-start, TERUKUR. Nilai mobile-nya center dan
     kalau tidak ditimpa di sini thumbnail ikut tercetak di tengah nav
     yang tingginya 527.97 (ikut meregang setinggi gambar), padahal di
     aslinya menumpuk dari atas. */
  .pdp-gallery__nav { flex-direction: column; justify-content: flex-start; gap: 1.6rem; }
}

.pdp-gallery__thumb {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 0.4rem;
  overflow: clip;
}
@media (min-width: 1024px) {
  .pdp-gallery__thumb {
    /* 51.08px = 1 kolom + 1 gutter */
    width: calc(var(--col) + var(--gutter));
    height: calc(var(--col) + var(--gutter));
    border-radius: 0.8rem;
  }
}
/* Indikator aktif lewat ::before dengan inset 0. BUKAN border pada
   elemen, supaya garisnya menimpa gambar dan tidak menambah lebar. */
.pdp-gallery__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color 0.5s ease;
}
.pdp-gallery__thumb.is-active::before { border-color: var(--blue); }
/* Thumbnail sudah <button>, jadi Tab dan Enter atau Space jalan sendiri.
   Yang perlu ditambah cuma cincin fokusnya. Sumbernya memakai
   .button_focus:focus-visible { outline: 1px solid #141414 } TANPA offset.
   Di sini dipakai biru dengan offset 2px supaya seragam dengan
   .u-btn:focus-visible di tokens.css, yang tidak boleh diubah dari sini. */
.pdp-gallery__thumb:focus-visible,
.pdp-sizes__guide:focus-visible,
.pdp-rating:focus-visible,
.pdp-acc__head:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 2px;
}

/* Radius 0.8rem terukur di elemen media, bukan di container slideshow.
   Latar biru di situs asli datang dari FOTO produknya, bukan CSS, jadi
   placeholder abu polos memang perilaku yang benar di sini. */
.pdp-gallery__stage { flex: 1; aspect-ratio: 1 / 1; }
/* Radius dan clip di viewport, bukan di stage, supaya track yang
   lebarnya 6 kali stage bisa digeser tanpa terlihat meluber. */
/* TERUKUR, disalin apa adanya dari .Slideshow_container mereka:
     user-select: none; touch-action: pan-y
   plus .Slideshow_containerEnable { cursor: grab } dan
        .Slideshow_containerEnable:active { cursor: grabbing }
   touch-action pan-y itu kuncinya di layar sentuh: gulir vertikal tetap
   milik halaman, geser mendatar jadi milik galeri. */
.pdp-gallery__viewport {
  width: 100%;
  height: 100%;
  border-radius: 0.8rem;
  overflow: clip;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.pdp-gallery__viewport:active { cursor: grabbing; }
/* Pointer capture bikin :active lepas begitu kursor keluar dari kotak,
   padahal seretannya masih jalan. Class dari JS yang menambalnya. */
.pdp-gallery__viewport.is-dragging { cursor: grabbing; }
/* Track selebar jumlah slide, digeser dengan translate3d. Terukur di
   aslinya 3168px untuk 6 slide di stage 528. */
.pdp-gallery__track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.35s var(--ease-media);
}
/* Selama diseret track menempel ke jari, jadi transisinya dimatikan.
   Aslinya tidak ada transisi CSS sama sekali: posisi track dihitung di
   loop rAF dengan lerp 0.25 saat diseret dan 0.15 saat snap, friction
   0.5 per frame, berhenti di abs(velocity) < 0.3. transition 0.35s di
   atas adalah PENGGANTI lerp snap itu, bukan tiruan persisnya. */
.pdp-gallery__viewport.is-dragging .pdp-gallery__track { transition: none; }
.pdp-gallery__slide { flex: 0 0 100%; height: 100%; }
/* Sumbernya menghormati preferensi ini juga: multiplier turun ke 0.1
   dan friction naik ke 2.5, yang efektif membuat perpindahan langsung. */
@media (prefers-reduced-motion: reduce) {
  .pdp-gallery__track { transition: none; }
}

/* --- Panel beli ------------------------------------------------ */
.section-pdp-hero__right {
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
  padding: 0 var(--margin);
  text-align: center;
}
@media (min-width: 1024px) {
  .section-pdp-hero__right {
    /* 510.84px @1280 */
    width: calc(10 * var(--col) + 10 * var(--gutter));
    row-gap: 4rem;
    padding: 0;
    text-align: left;
    /* TERUKUR: margin 0 var(--col) 6rem calc(col + gutter).
       margin-bottom 6rem itu yang memberi jarak panel ke section di
       bawahnya, dan sebelumnya hilang sama sekali. */
    margin: 0 var(--col) 6rem calc(var(--col) + var(--gutter));
  }
}

/* Blok judul lebih SEMPIT dari panel, di-inset 5.75rem kiri kanan. */
.pdp-title { display: flex; flex-direction: column; row-gap: 1.6rem; }
/* TERUKUR: align-items center DAN text-align center, juga di desktop.
   Blok judul ini satu satunya bagian panel yang rata tengah. Sisanya
   (form, USP, accordion) rata kiri. Gampang salah kalau diasumsikan
   seluruh panel ikut satu perataan. */
@media (min-width: 1024px) {
  .pdp-title { margin: 0 5.75rem; align-items: center; text-align: center; }
}
.pdp-title__group { display: flex; flex-direction: column; gap: 0.8rem; }
/* Lapis untuk badge di samping judul. Gap 0.4rem terukur. */
.pdp-title__with-badge { display: flex; align-items: center; gap: 0.4rem; }
.pdp-title__h { margin: 0; }
.pdp-title__tagline { margin: 0; font-weight: 600; }
.pdp-title__desc { margin: 0; font-weight: 400; }
.pdp-title__price { margin: 0; font-weight: 600; }
/* Ruang widget pihak ketiga, disediakan supaya tidak layout shift.
   Terukur 409 x 36. Tingginya px, bukan rem, karena slot ini milik
   widget luar yang tidak ikut menskala dengan root font-size. */
.pdp-title__slot {
  width: 100%;
  /* height tetap dulu 36px karena isinya kosong. Sekarang berisi tombol
     yang boleh membungkus di layar sempit, jadi jadi min-height supaya
     kotaknya ikut tumbuh, bukan memotong isinya. */
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
@media (min-width: 1024px) {
  /* Kolom info rata kiri di desktop, chipnya ikut. */
  .pdp-title__slot { justify-content: flex-start; }
}
.pdp-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.6rem;
  padding: 0 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  background: var(--blue-cgi);
  color: var(--blue);
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.3s var(--ease-media),
    color 0.3s var(--ease-media),
    border-color 0.3s var(--ease-media);
}
.pdp-ask__icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}
.pdp-ask:active,
.pdp-ask:focus-visible {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
@media (hover: hover) {
  .pdp-ask:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
  }
}

/* Dua sumbu jaraknya BEDA dan tidak boleh disatukan jadi satu `gap`.
   Terukur: jarak mendatar grup bintang ke pill 6.22px (0.7rem),
   sedangkan row-gap saat membungkus 5.33px (0.6rem). */
/* Elemennya <a> menuju anchor review, sama seperti aslinya. Warna dan
   garis bawah bawaan link dimatikan supaya baris ini terlihat persis
   seperti sebelum jadi link. */
.pdp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.7rem;
  row-gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}
/* Bintang dan teks review satu grup, gap 0.8rem. Grup ini terpisah dari
   pill sertifikasi yang jaraknya 0.7rem dari grup. Dua gap berbeda,
   gampang disamakan kalau tidak diukur. */
.pdp-rating__stars-reviews { display: flex; align-items: center; gap: 0.8rem; }
/* Bintang 11.55 x 13.48, gap 0.4rem. Jarak bintang ke teks PERSIS
   0.8rem, yaitu gap stars-reviews itu sendiri. Tidak ada margin
   tambahan di sini: 7.10px terukur langsung dari tepi kanan blok
   bintang ke tepi kiri teks. */
.pdp-rating__stars {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--black);
}
.pdp-rating__stars svg { width: 1.3rem; height: auto; aspect-ratio: 12 / 14; }
/* 11px dengan line-height 1.4 (15.4) plus padding-bottom 1.1px, ruang
   untuk garis bawah yang di aslinya digambar dari background-image dan
   baru melebar saat hover. Tinggi total 16.49, terukur. */
.pdp-rating__text { color: var(--black7); line-height: 1.4; padding-bottom: 1.1px; }
/* display flex, bukan inline. Tinggi 24.10 datang dari line-height 0.9
   (9.9) plus padding 0.8rem dua sisi, dan itu yang menentukan tinggi
   seluruh baris rating. */
.pdp-rating__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-cgi);
  color: var(--black);
  padding: 0.8rem;
  border-radius: 0.2rem;
  font-weight: 600;
  line-height: 0.9;
}

/* --- Form ------------------------------------------------------ */
.pdp-form { display: flex; flex-direction: column; row-gap: 2.4rem; }
.pdp-sizes { display: flex; flex-direction: column; gap: 1.6rem; }
.pdp-sizes__heading { display: flex; align-items: flex-end; justify-content: space-between; }
/* Label "Size" berat 400, TERUKUR. Bukan 600. Yang tebal di baris ini
   cuma tombol panduan ukuran di kanannya. */
.pdp-sizes__label { font-weight: 400; }
/* line-height 1, bukan 1.4 bawaan skala t-12. Tinggi tombolnya 12.09
   (11px teks plus 1.1px padding), terukur. Dengan 1.4 tingginya jadi
   16.48 dan garis bawahnya turun terlalu jauh dari baseline label. */
.pdp-sizes__guide {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--blue);
  font-weight: 600;
  line-height: 1;
  padding-bottom: 1.1px;
}

.pdp-sizes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Delapan ukuran dibagi empat kolom berarti tiap pill cuma dapat 63.8px
   ruang isi di 375, sedangkan sub-label terpanjang butuh sekitar 70px.
   Di layar sesempit ini pill dipecah jadi dua kolom supaya sub-label
   tetap satu baris dan pill tidak berubah jadi kotak teks dua baris
   yang lebih tinggi daripada label utamanya. */
@media (max-width: 399.98px) {
  .pdp-sizes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* position relative supaya radio yang di-absolute-kan tetap terkurung
   di dalam pill-nya sendiri, bukan lari ke ancestor lain. Terukur di
   aslinya, dan itu juga yang bikin fokus keyboard tidak menggeser
   scroll halaman. */
.pdp-size { display: block; position: relative; cursor: pointer; }
.pdp-size input { position: absolute; width: 0; height: 0; opacity: 0; }
.pdp-size__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Terukur 5.2rem dengan padding vertikal NOL. Yang diganti cuma
     `height` jadi `min-height`: dengan height mati, sub-label yang patah
     dua baris di layar sempit membuat isi pill 53.2px di kotak 50px, dan
     teksnya meluber keluar border.
     0.6rem dipilih justru supaya tinggi terukur TIDAK berubah di kasus
     normal: satu baris label plus satu baris sub cuma 50.4px termasuk
     padding, masih di bawah min-height, jadi pill tetap 52px persis
     @375. Padding baru terasa saat sub-nya memang patah dua baris, dan
     di situ dia yang mencegah teks menempel ke border. */
  min-height: 5.2rem;
  padding: 0.6rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  transition:
    border-color 0.4s var(--ease-media),
    background-color 0.4s var(--ease-media);
}
@media (min-width: 1024px) {
  /* Padding vertikal kembali NOL di sini, jadi tinggi terukur 46.2px
     @1280 tidak berubah sedikit pun oleh padding mobile di atas. Di
     desktop isi pill cuma 32.3px, jauh di bawah min-height, jadi
     pergantian height ke min-height juga tidak terasa. */
  .pdp-size__box { padding: 0 1.2rem; }
}
/* Terpilih: HANYA border yang berubah. Warna teks dan background tetap. */
.pdp-size.is-selected .pdp-size__box { border-color: var(--blue); }
.pdp-size__label { font-weight: 600; }
.pdp-size__sub { color: var(--black7); }
/* TERUKUR: .pdpSizeOptions_oos { color:#515151; background-color:#f5f5f5 }
   di kotaknya, dan pointer-events: none di LABEL-nya
   (.option_wrapper.option_disabled), bukan di kotak. Bedanya nyata:
   kalau none cuma di kotak, tepi label di luar kotak masih menangkap
   klik dan pill habis stok tetap bisa dipilih. */
.pdp-size.is-oos { pointer-events: none; }
.pdp-size.is-oos .pdp-size__box { background: var(--grey-oos); }
.pdp-size.is-oos .pdp-size__label,
.pdp-size.is-oos .pdp-size__sub { color: var(--black7); }
/* Radio disembunyikan, jadi cincin fokus harus dipinjamkan ke kotaknya.
   TERUKUR di sumbernya:
   .option_input:focus-visible ~ .option_option {
     border-color:#515151; outline:2px solid rgba(0,0,201,.2); outline-offset:0 } */
.pdp-size input:focus-visible ~ .pdp-size__box {
  border-color: var(--black7);
  outline: 2px solid rgba(0, 0, 201, 0.2);
  outline-offset: 0;
}
.pdp-plan input:focus-visible ~ .pdp-plan__box {
  border-color: var(--black7);
  outline: 2px solid rgba(0, 0, 201, 0.2);
  outline-offset: 0;
}

.pdp-form__help { margin: 0; text-align: center; font-weight: 600; }

/* --- Kartu plan ------------------------------------------------ */
.pdp-plans { display: flex; flex-direction: column; gap: 1.6rem; }
/* 1023.98px, bukan 1023px. Di lebar viewport pecahan (display scaling
   Windows 125 dan 150 persen bikin innerWidth jadi 1023.2 misalnya)
   aturan 1023px sudah mati sementara pasangannya min-width 1024px
   belum hidup, dan di celah satu piksel itu tidak ada aturan yang
   berlaku sama sekali. */
@media (max-width: 1023.98px) {
  .pdp-plans { gap: 0; }
}
.pdp-plans__heading { display: flex; align-items: center; justify-content: space-between; }
.pdp-plans__save {
  background: var(--blue-cgi);
  color: var(--black);
  padding: 0.4rem 0.8rem;
  border-radius: 0.2rem;
  font-weight: 600;
  line-height: 0.9;
  text-transform: uppercase;
}
.pdp-plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .pdp-plans__grid { grid-template-columns: repeat(3, 1fr); column-gap: 0.8rem; }
}
/* Badge in-flow, radius hanya dua sudut atas. Terisi 99.5 x 20.55,
   kosong 10.66 x 19.54. Yang kosong murni spacer, tingginya datang
   dari min-height 2.2rem karena tidak punya line-box sendiri. */
.pdp-plan__badge {
  display: block;
  width: fit-content;
  color: var(--white);
  padding: 0.6rem;
  border-radius: 0.2rem 0.2rem 0 0;
  font-weight: 600;
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0 1.6rem 0 0.8rem;
  min-height: 2.2rem;
}
.pdp-plan__badge.is-filled { background: var(--blue); }

/* Ketiga kartu sama tinggi. Itu tujuan badge kosong sebagai spacer,
   jadi kartunya harus ikut meregang mengisi baris grid. */
.pdp-plans__grid > li { display: flex; flex-direction: column; }
.pdp-plan { display: flex; flex: 1; cursor: pointer; }
.pdp-plan input { position: absolute; width: 0; height: 0; opacity: 0; }
.pdp-plan__box {
  display: flex;
  flex: 1;
  width: 100%;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.8rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  text-align: left;
  transition: border-color 0.4s var(--ease-media);
}
@media (min-width: 1024px) {
  /* min-height 12.4rem (110.15) TERUKUR di container kartu. Gunanya
     menjaga kartu dengan satu feature saja tetap punya badan, bukan
     menyusut jadi setengah tinggi tetangganya. */
  .pdp-plan__box { padding: 1.2rem; min-height: 12.4rem; }
}
.pdp-plan.is-selected .pdp-plan__box { border-color: var(--blue); }

/* Desktop nama dan harga BERTUMPUK sebagai dua blok biasa TANPA gap,
   mobile SEJAJAR space-between. Terukur: tinggi head 35.28 persis dua
   baris 17.64, jadi kalau dipasang gap 0.8rem kartunya kelebihan
   7.11px dan seluruh grid plan ikut meleset. */
.pdp-plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.1rem; }
@media (min-width: 1024px) {
  .pdp-plan__head { display: block; }
}
.pdp-plan__name { font-weight: 600; display: block; }
/* Pembungkus harga harus block. Di mobile dia ikut ter-blockify sendiri
   karena head-nya flex, tapi di desktop head jadi block sehingga span
   ini balik inline kalau tidak ditulis. Tingginya 17.64, terukur. */
.pdp-plan__prices { display: block; }
.pdp-plan__price { color: var(--blue); }
.pdp-plan__old { color: var(--black7); text-decoration: line-through; }

.pdp-plan__features { display: flex; flex-direction: column; gap: 0.4rem; }
.pdp-plan__feature { display: flex; flex-direction: row; gap: 0.6rem; color: var(--black7); }
/* line-height 1.2, bukan 1.4 bawaan skala t-12. Terukur 13.2 untuk
   teks 11px, dan itu yang bikin feature dua baris jadi 26.41. Selisih
   0.2 per baris kelihatan begitu kartu punya feature yang membungkus. */
.pdp-plan__feature > span { line-height: 1.2; }
@media (min-width: 1024px) {
  .pdp-plan__feature { gap: 1rem; }
}
.pdp-plan__feature svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; color: var(--blue); }

/* --- Tombol ---------------------------------------------------- */
/* align-self center bikin baris ini MENYUSUT ke isinya, bukan
   meregang mengisi panel. Terukur 306.5 sebelum ukuran dipilih, sama
   persis dengan lebar tombolnya. Tanpa ini flex item default meregang
   ke 510.84. Secara visual tombolnya tetap di tengah dua duanya, jadi
   ini beda yang cuma ketahuan kalau diukur. */
/* Wrapper selebar panel. Row di dalamnya yang memeluk isinya.
   row-gap 1rem terukur, dipakai saat ada CTA sticky mobile menyusul
   di bawah baris tombol. */
.pdp-form__buttons { display: flex; flex-direction: column; align-items: center; row-gap: 1rem; }
/* align-self center bikin row MENYUSUT ke isinya (306.5), bukan
   meregang mengisi wrapper (510.84). width: 100% membatalkan itu,
   jadi jangan dipasang di sini. */
.pdp-form__buttons-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  align-self: center;
}
@media (min-width: 1024px) {
  /* Arah row di KEDUA state. Terukur: aslinya tidak pernah column di
     desktop. Sebelum ukuran dipilih isinya cuma satu tombol jadi
     hasilnya sama saja, tapi arahnya tetap ditulis benar supaya tombol
     kedua tidak mendadak turun ke bawah saat state berubah. */
  .pdp-form__buttons-row { flex-direction: row; }
  /* Lebar baris tombol BERBEDA antara dua state, dan gampang tertukar.
     Sebelum ukuran dipilih barisnya memeluk isinya (306.5), tombolnya
     sendiri yang selebar 6 kolom.
     Sesudah dipilih barisnya calc(100% + 1rem), sengaja melebihi panel
     4.44px kiri kanan supaya tepi LUAR kedua tombol sejajar dengan grid
     pill di atasnya meski ada gap 1rem di tengah. */
  .pdp-form__buttons-row.is-ready {
    flex-direction: row;
    gap: 1rem;
    align-self: stretch;
    width: calc(100% + 1rem);
    margin: 0 -0.5rem;
  }
  /* Sesudah ukuran dipilih: 2 tombol 255.42 masing-masing. */
  .pdp-form__buttons-row.is-ready .u-btn { flex: 1 1 0; }
  /* Sebelum dipilih: 1 tombol mati selebar 306.51, yaitu 6 kolom
     plus 6 gutter. Bukan lebar isi, jadi harus ditulis eksplisit. */
  .pdp-form__buttons-row:not(.is-ready) .u-btn {
    width: calc(6 * var(--col) + 6 * var(--gutter));
  }
}
.pdp-form__buttons-row .u-btn { width: 100%; }
@media (min-width: 1024px) {
  .pdp-form__buttons-row .u-btn { width: auto; }
}

/* --- Trust badge ----------------------------------------------- */
/* margin-bottom 0.6rem, TERUKUR di sumbernya. Ini yang membuat total
   panel 880.52 padahal jumlah anak plus tiga gap 4rem cuma 875.20.
   Selisih 5.32 persis 0.6rem. Kalau ini hilang, panel selalu kurang
   tinggi dan gampang disalahartikan sebagai row-gap yang salah. */
/* .pdp-usp cuma memegang margin-bottom. Layout row-nya di __entries,
   sesuai pemisahan di aslinya. */
.pdp-usp { margin: 0 0 0.6rem; }
.pdp-usp__entries {
  display: flex;
  /* align-items center, terukur. Tanpa ini item dengan caption 1 baris
     dan 2 baris tidak sejajar vertikal. */
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  column-gap: 0.872rem;
  row-gap: 3rem;
}
.pdp-usp__entries li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
  width: 16.66rem;
}
/* Override desktop menempel di __entries, BUKAN di .pdp-usp. .pdp-usp
   itu display block jadi gap apa pun di sana mati begitu saja, dan
   nilai mobile 0.872rem tetap terpakai tanpa ketahuan. Terukur di
   aslinya: column-gap 1.815rem, row-gap tidak diset. */
@media (min-width: 1024px) {
  .pdp-usp__entries { column-gap: 1.815rem; row-gap: 0; }
  .pdp-usp__entries li { width: 8.7rem; }
}
.pdp-usp__icon { width: 4rem; height: 4rem; overflow: clip; }
.pdp-usp__text { color: var(--black7); }

/* --- Accordion -------------------------------------------------- */
.pdp-acc { border-top: 1px solid var(--hairline); }
.pdp-acc__entry { border-bottom: 1px solid var(--hairline); }
.pdp-acc__entry:last-child { border-bottom: 0; }
.pdp-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--black);
  /* Padding 2rem. Tinggi header ditentukan IKON (2.2rem span), bukan
     teks yang cuma 1.764rem. */
  padding: 2rem 0;
  text-align: left;
}
.pdp-acc__cross {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
}
.pdp-acc__cross svg {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.6s var(--ease-in-overshoot);
}
/* Panel pakai grid-template-rows, cara menganimasikan height auto
   tanpa mengukur di JS. Sumbernya menulis tinggi konkret lewat library,
   hasilnya sama: durasi konsisten untuk semua panjang isi, tidak ada
   jeda mati seperti trik max-height. */
.pdp-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: clip;
  visibility: hidden;
  transition:
    grid-template-rows 0.4s var(--ease-media),
    visibility 0.4s;
}
.pdp-acc__panel[data-open='true'] { grid-template-rows: 1fr; visibility: visible; }
.pdp-acc__inner { min-height: 0; }
.pdp-acc__inner p { margin: 0; padding: 2rem 0 0; color: var(--black7); }
@media (min-width: 1024px) {
  .pdp-acc__inner { padding-right: 5.75rem; }
}

/* --- Hover ------------------------------------------------------
   Semua dibungkus @media (hover: hover) persis seperti sumbernya.
   Di layar sentuh tanpa pembungkus ini state hover nyangkut setelah
   tap dan baru hilang saat elemen lain disentuh.

   POLA: durasi dasar 0.6s (lihat .u-btn di tokens.css), durasi hover
   ditimpa jadi 0.2s. Asimetri itu disengaja di sumbernya: masuk cepat,
   keluar pelan. */
@media (hover: hover) {
  /* [CSS] .option_option:hover { border-color: #515151 }.
     Sengaja TANPA :not(.is-selected). Di sumbernya rule hover ditulis
     pada byte 63446 sedangkan rule :checked pada 61950, spesifisitas
     sama, jadi yang belakangan menang: pill yang sudah terpilih pun
     berubah abu saat kursor di atasnya. Transisinya 0.4s
     cubic-bezier(.26,1.04,.54,1), sudah ada di .pdp-size__box. */
  .pdp-size:hover .pdp-size__box { border-color: var(--black7); }

  /* Kartu plan HANYA saat belum terpilih, beda dari pill ukuran.
     rgba(39,39,39,0.3) hasil ukur, bukan var(--hairline) yang
     rgba(20,20,20,0.1). */
  .pdp-plan:not(.is-selected):hover .pdp-plan__box { border-color: rgba(39, 39, 39, 0.3); }

  /* [CSS] .button_primary:hover { background-color:#0000f5; transition-duration:.2s } */
  .section-pdp-hero .u-btn-primary:hover { background: var(--blue600); transition-duration: 0.2s; }
  /* [CSS] .button_secondary:hover { color:#0000a3; background-color:#fff;
           border-color:#515151; transition-duration:.2s } */
  .section-pdp-hero .u-btn-secondary:hover {
    color: var(--blue800);
    background: var(--white);
    border-color: var(--black7);
    transition-duration: 0.2s;
  }
}

/* Ditulis ULANG sesudah blok hover. tokens.css diimpor lebih dulu dan
   :active di sana spesifisitasnya sama dengan :hover di sini, jadi tanpa
   pengulangan ini tombol yang sedang DITEKAN sambil di-hover tetap
   memakai warna hover, bukan warna tekan. */
.section-pdp-hero .u-btn-primary:active { background: var(--blue800); transition-duration: 0.2s; }
.section-pdp-hero .u-btn-secondary:active {
  color: var(--blue800);
  border-color: var(--blue800);
  transition-duration: 0.2s;
}