/* ============================================================
   Overlay panel panduan ukuran, dibuka dari hero PDP.
   Hasil ukur langsung dari halaman produk di sumber (coterie.com).
   Dua titik ukur: 375 (root font 10.0013px) dan 1280 (root font 8.8832px).
   Setiap angka px di komentar adalah hasil getBoundingClientRect atau
   getComputedStyle di sumber, bukan perkiraan.
   Yang BELUM terukur ditandai eksplisit.

   Disalin apa adanya dari clvn-desk/src/components/pdp/sizeguide.css.
   Yang berubah cuma nama kelas: blok lama jadi .section-pdp-size-guide,
   nama elemen camelCase jadi kebab-case, dan kelas status jadi is-*.
   Angkanya TIDAK berubah. Jangan dirapikan, jangan dibulatkan,
   jangan disusun ulang.
   ============================================================ */

.section-pdp-size-guide {
  /* Easing keluar cubic-bezier(0.66, 0, 0.34, 1) terukur di sumber, tapi
     tidak ada di tokens.css dan tokens.css tidak boleh disentuh. Jadi
     dideklarasikan lokal di sini. Easing masuk memakai token yang sudah
     ada, --ease-in-overshoot, yang nilainya persis sama dengan sumber. */
  --pdp-size-guide-ease-exit: cubic-bezier(0.66, 0, 0.34, 1);
  --pdp-size-guide-dur: 0.5s;

  position: fixed;
  inset: 0;
  /* Sumber memakai var(--screen) yang isinya 100svh. Token itu tidak ada
     di repo ini, jadi nilainya ditulis langsung. */
  height: 100svh;
  /* Panel tertutup diparkir di luar layar kanan. clip menahannya supaya
     tidak memicu scroll horizontal di dokumen. */
  overflow: clip;
  /* z-index 25 terukur di sumber (overlay panel dasar 11, panel panduan
     ukuran menaikkannya ke 25). */
  z-index: 25;
  visibility: hidden;
  /* visibility ditransisikan supaya panel tetap terlihat selama animasi
     keluar 0.5s, baru hilang setelahnya. */
  transition: visibility var(--pdp-size-guide-dur);
}
.section-pdp-size-guide.is-open {
  visibility: visible;
}

/* --- Backdrop -------------------------------------------------
   Terukur rgba(20, 20, 20, 0.2), persis var(--overlay).
   Klik menutup panel, terverifikasi di sumber. */
.section-pdp-size-guide__backdrop {
  position: absolute;
  inset: 0;
  background-color: transparent;
  transition: background-color var(--pdp-size-guide-dur) var(--pdp-size-guide-ease-exit);
}
.section-pdp-size-guide.is-open .section-pdp-size-guide__backdrop {
  background-color: var(--overlay);
  transition: background-color var(--pdp-size-guide-dur) var(--ease-in-overshoot);
}

/* --- Panel ----------------------------------------------------
   Muncul dari SISI KANAN. Terukur di 1280: x 640, lebar 640, tinggi 900.
   Terukur di 375: x 0, lebar 375, tinggi 812.

   Sumber memakai trik margin-left: 100% lalu transform translateX(-100%)
   di desktop, dan left: 100vw lalu translateX(-100vw) di mobile.
   Geometrinya identik dengan absolute right 0 plus translateX(100%),
   jadi dipakai yang lebih sederhana. */
.section-pdp-size-guide__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: var(--white);
  overflow-y: scroll;
  /* Scroll di dalam panel tidak menular ke halaman di belakangnya.
     Ini pengganti data-lenis-prevent milik sumber, karena repo ini
     tidak memakai Lenis. */
  overscroll-behavior: contain;
  scrollbar-width: none;
  transform: translateX(100%);
  transition: transform var(--pdp-size-guide-dur) var(--pdp-size-guide-ease-exit);
}
.section-pdp-size-guide__panel::-webkit-scrollbar {
  display: none;
}
.section-pdp-size-guide.is-open .section-pdp-size-guide__panel {
  transform: translateX(0);
  transition: transform var(--pdp-size-guide-dur) var(--ease-in-overshoot);
}

@media (min-width: 1024px) {
  /* Terukur 640px di viewport 1280. Sumber menulisnya 50% !important
     untuk menimpa lebar default varian fixed. */
  .section-pdp-size-guide__panel {
    width: 50%;
  }
}

/* --- Header ---------------------------------------------------
   Sticky di puncak area scroll panel.
   375:  tinggi 52.59 (ikut konten), padding 16.00px 16.00px = 1.6rem var(--margin)
   1280: tinggi 86.94 = var(--header-height), padding 0 33.96px = 0 var(--col) */
.section-pdp-size-guide__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem var(--margin);
  background-color: var(--white);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__header {
    height: var(--header-height);
    padding: 0 var(--col);
  }
}

/* Judul header. Terukur 12.6px, letter-spacing 0.252px (0.02em),
   line-height 17.64px, warna #515151. Itu persis .t-14 + .lg-t-14 + black7. */
.section-pdp-size-guide__head-title {
  margin: 0;
  color: var(--black7);
}

/* Tombol tutup. Ikon terukur 16px @375 dan 14.2px @1280, keduanya 1.6rem. */
.section-pdp-size-guide__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}
.section-pdp-size-guide__close svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}
.section-pdp-size-guide__close:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 2px;
}

/* --- Konten ---------------------------------------------------
   375:  padding 30.00px 16.00px = 3rem var(--margin), gap 30.00px = 3rem
   1280: padding 35.53px 35.56px = 4rem var(--margin), gap 35.53px = 4rem
   Catatan: padding vertikal memakai rem, padding horizontal memakai
   var(--margin) yang berbasis vw. Di 1280 keduanya kebetulan hampir sama
   (35.53 lawan 35.56), dan selisih 0.03px itu yang membuktikan rumusnya
   memang beda. */
.section-pdp-size-guide__content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3rem var(--margin);
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__content {
    gap: 4rem;
    padding: 4rem var(--margin);
  }
}

/* --- Tab ------------------------------------------------------
   Baris tab bisa digeser horizontal, scrollbar disembunyikan.
   Di 375 ketiga tab total 262.2px dan masih muat di 343px, jadi
   scroll-nya cuma jaring pengaman untuk label yang lebih panjang. */
.section-pdp-size-guide__tabs {
  display: flex;
  width: 100%;
  flex-direction: row;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-pdp-size-guide__tabs::-webkit-scrollbar {
  display: none;
}
/* gap antar tab terukur 0.8rem (8.00px @375, 7.11px @1280). */
.section-pdp-size-guide__tab-scroll {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
}

/* Tab. Terukur:
   375  tinggi 34.8, padding 8.00px 12.00px, radius 60.01px, font 12.00px
   1280 tinggi 31.6, padding 7.11px 10.66px, radius 53.30px, font 11px
   Semuanya sama dalam rem: padding 0.8rem 1.2rem, radius 6rem.
   Tingginya beda karena line-height ikut ukuran font, bukan karena
   ada tinggi tetap. */
.section-pdp-size-guide__tab {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  /* Tidak terpilih: putih, teks --blue600, border --grey-border. Terukur. */
  background: var(--white);
  color: var(--blue600);
  border: 1px solid var(--grey-border);
  transition:
    color 0.6s var(--ease-media),
    background-color 0.6s var(--ease-media),
    border-color 0.6s var(--ease-media);
}
/* Terpilih: #D1E3FB, teks #0000C9, border rgba(20,20,20,.1). Terukur. */
.section-pdp-size-guide__tab.is-selected {
  background: var(--blue-cgi);
  color: var(--blue);
  border-color: var(--hairline);
}
.section-pdp-size-guide__tab:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 2px;
}

.section-pdp-size-guide__tab-panel {
  display: flex;
  flex-direction: column;
}
.section-pdp-size-guide__tab-panel:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 2px;
}

/* TAMBAHAN, bukan hasil ukur, dan satu satunya rule yang tidak ada di
   sumber. Di sumber React panel tab yang tidak aktif tidak dirender sama
   sekali. Di markup statis ketiganya ada di DOM sekaligus dan yang tidak
   aktif dimatikan dengan atribut hidden. Rule ini wajib karena
   display: flex di atas menang atas display: none bawaan browser untuk
   [hidden], jadi tanpa baris ini ketiga panel tampil bertumpuk. */
.section-pdp-size-guide__tab-panel[hidden] {
  display: none;
}

/* --- Judul section --------------------------------------------
   Terukur 18.00px @375 dan 21.6px @1280, itu .t-18 + .lg-t-24.
   margin-bottom 0 di mobile dan 2rem di desktop. Terukur, bukan salah
   baca: di sumber judul memang menempel ke tabel saat mobile. */
.section-pdp-size-guide__section-title {
  margin: 0;
  font-weight: 400;
  color: var(--black);
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__section-title {
    margin-bottom: 2rem;
  }
}

/* --- Tabel ----------------------------------------------------
   Lebar tabel selalu penuh: 343px @375 dan 568.9px @1280, sama dengan
   lebar konten setelah dikurangi padding.
   Border cuma di bawah tiap sel, 1px var(--hairline), border-collapse.
   Padding sel:
     vertikal   2rem @375 (20.00px), 1.5rem @1280 (13.32px)
     horizontal 4.86px @375 dan 8.56px @1280, keduanya = var(--gutter) / 2
   Sel pertama tanpa padding kiri, sel terakhir tanpa padding kanan,
   jadi teks tabel rata dengan tepi konten. */
.section-pdp-size-guide__table {
  width: 100%;
  border-collapse: collapse;
}
/* Varian tabel konversi. Terukur table-layout fixed, lima kolom sama rata
   113.8px @1280 (568.9 / 5). */
.section-pdp-size-guide__table.is-fixed {
  table-layout: fixed;
}

.section-pdp-size-guide__th,
.section-pdp-size-guide__td {
  padding: 2rem calc(var(--gutter) / 2);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__th,
  .section-pdp-size-guide__td {
    padding-block: 1.5rem;
  }
}
.section-pdp-size-guide__th.is-first,
.section-pdp-size-guide__td.is-first {
  padding-left: 0;
  text-align: left;
}
.section-pdp-size-guide__th:last-child,
.section-pdp-size-guide__td:last-child {
  padding-right: 0;
}

/* Header kolom terukur warna #515151, isi baris #141414. */
.section-pdp-size-guide__th {
  color: var(--black7);
}
.section-pdp-size-guide__td {
  color: var(--black);
}

/* --- Fit Guide ------------------------------------------------
   Wrapper flex column, gap 30.00px @375 (3rem) dan 35.53px @1280 (4rem). */
.section-pdp-size-guide__fit {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__fit {
    gap: 4rem;
  }
}

/* Judul dan list di dalam blok prose. margin-bottom terukur 10.00px @375
   (1rem) dan 17.77px @1280 (2rem), berlaku untuk judul maupun list. */
.section-pdp-size-guide__fit-title {
  margin: 0 0 1rem;
  font-weight: 400;
  color: var(--black);
}
.section-pdp-size-guide__list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.section-pdp-size-guide__list:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__fit-title,
  .section-pdp-size-guide__list {
    margin-bottom: 2rem;
  }
  .section-pdp-size-guide__list:last-child {
    margin-bottom: 0;
  }
}

/* Butir list. padding kiri terukur 26.00px @375 dan 23.10px @1280,
   keduanya 2.6rem. Warna #515151. Bullet-nya bukan list-style bawaan
   (sumber memakai list-style: none), jadi digambar sendiri.
   BELUM TERUKUR: diameter dan offset bullet di sumber. Nilai di bawah
   dipilih supaya seimbang dengan line-height, bukan hasil ukur. */
.section-pdp-size-guide__list-item {
  position: relative;
  padding-left: 2.6rem;
  color: var(--black7);
}
.section-pdp-size-guide__list-item::before {
  content: '';
  position: absolute;
  left: 0.8rem;
  top: 0.7em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* Blok video Fit Guide. Tinggi terukur 240px @375 (24rem) dan
   319.8px @1280 (36rem). Lebar selalu penuh.
   Overlay caption di sumber (judul putih plus tombol play) sengaja tidak
   dibangun: tanpa aset video, tombol itu jadi kontrol mati. */
.section-pdp-size-guide__video {
  width: 100%;
  height: 24rem;
}
@media (min-width: 1024px) {
  .section-pdp-size-guide__video {
    height: 36rem;
  }
}

/* --- Reduced motion -------------------------------------------
   Panel tetap muncul dan tetap menutup, cuma tanpa slide dan tanpa fade. */
@media (prefers-reduced-motion: reduce) {
  .section-pdp-size-guide,
  .section-pdp-size-guide__backdrop,
  .section-pdp-size-guide__panel,
  .section-pdp-size-guide.is-open .section-pdp-size-guide__backdrop,
  .section-pdp-size-guide.is-open .section-pdp-size-guide__panel,
  .section-pdp-size-guide__tab {
    transition-duration: 0.01ms;
  }
}