/* Section collection-head. Kepala halaman koleksi plus baris alat.

   BUKAN porting. Tidak ada CSS sumber untuk disalin: halaman koleksi
   sumber TIDAK punya baris filter maupun sort sama sekali, sudah dicek
   dua arah dan grid-nya menempel langsung di bawah judul. Jadi berkas
   ini CSS baru yang cuma memakai token yang sudah ada di tokens.css.

   Yang dipinjam dari hasil ukur cuma ritmenya, bukan angka baru:
     - padding vertikal section 8rem di desktop, 2.4rem di mobile
     - jarak judul ke grid di bawahnya 4.8rem desktop, 3.2rem mobile
     - rel teks kiri selebar 7 kolom dari 24, pola 7 + 15 yang dipakai
       berulang di halaman itu
   Bentuk pil filter meminjam tampilan chip pemilih di section tabel
   perbandingan (radius pil, border 1px, terpilih memakai blue-cgi),
   karena itu satu satunya bentuk toolbar yang benar benar terukur.

   Kenapa rel 7 kolom dipasang sebagai max-width pada blok intro dan
   BUKAN sebagai kolom grid dua tingkat: baris alat harus selebar
   penuh container supaya tepinya sejajar dengan grid produk berapa pun
   lebar yang dipakai section grid nanti. Dengan begitu berkas ini tidak
   mengunci section lain ke pembagian 7 + 15.

   Tidak ada penanganan khusus di atas 1680px. Container-nya memakai
   pola yang sama dengan section lain (width grid-width, max-width
   max-width), jadi di lebar itu dia berhenti melebar bersama section
   tetangganya. Rel 7 kolom hanya max-width, jadi tidak pernah bisa
   meluap keluar container walau --col terus tumbuh mengikuti vw. */

.section-collection-head {
  background: var(--white);
  /* Atas lebih rapat daripada bawah. Kepala halaman duduk tepat di
     bawah header, jadi napas atasnya sudah disediakan header itu. */
  padding: 2.4rem 0 3.2rem;
}

.section-collection-head__inner {
  width: var(--grid-width);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

/* --- Blok intro: judul, deskripsi, jumlah produk --------------- */
.section-collection-head__intro {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.section-collection-head__title {
  margin: 0;
  color: var(--black);
}

/* Deskripsi dan jumlah produk SENGAJA tidak punya rule di sini.
   Warnanya datang dari utility .u-black7 milik tokens.css, dipasang
   langsung di markup persis seperti editorial.html, dan margin nol-nya
   sudah diberikan reset.css. Kelas __desc dan __count tetap dipakai di
   markup sebagai kait penamaan untuk Fase 3, bukan sebagai kait gaya.
   Hierarki warnanya jadi: judul penuh, dua baris pendamping redup. */

/* --- Baris alat ------------------------------------------------
   Mobile menumpuk: deret filter dulu, lalu sort selebar penuh supaya
   sasaran sentuhnya tidak sempit. Desktop jadi satu baris, filter di
   kiri dan sort di kanan. */
.section-collection-head__toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* Membungkus, bukan menggeser horizontal. Deret filter yang bisa
   di-scroll butuh bleed sampai tepi layar supaya tidak terlihat
   terpotong, dan bleed itu memerlukan margin negatif sebesar
   var(--margin) yang gampang meleset saat token margin berubah di
   tiap breakpoint. Membungkus tidak punya masalah itu. */
.section-collection-head__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Pil filter memakai .u-btn dan .u-btn-secondary dari tokens.css.
   Yang di-override cuma padding horizontal: 3.2rem bawaan u-btn bikin
   lima pil memakan tiga baris di mobile. Vertikalnya sengaja TIDAK
   diubah supaya tingginya tetap sama dengan tombol lain di situs. */
.section-collection-head__filter {
  padding: 1.4rem 2rem;
}

/* Keadaan aktif. Tiga deklarasi ini sengaja mengulang isi
   .u-btn-selected di tokens.css, bukan memakai kelas itu langsung,
   karena konvensi situs ini menaruh status di kelas berprefiks is-.
   Kalau .u-btn-selected berubah, samakan yang di sini juga. */
.section-collection-head__filter.is-active {
  background: var(--blue-cgi);
  color: var(--blue);
  border-color: var(--hairline);
}

/* --- Sort. Elemen select biasa yang diberi gaya, bukan dropdown
   kustom. Daftar opsi tetap milik sistem operasi, jadi keyboard,
   pembaca layar, dan picker mobile bekerja tanpa satu baris JS pun. */
.section-collection-head__sort {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Warna label ikut .u-black7 di markup. Yang tersisa di sini cuma
   larangan bungkus: "Sort by" pecah dua baris di mobile sempit dan
   itu menaikkan tinggi seluruh baris alat. */
.section-collection-head__sort-label {
  white-space: nowrap;
}

/* Pembungkus posisi untuk chevron. WAJIB block, sama seperti
   .u-placeholder: sebagai inline dia mengabaikan ukuran dan chevron
   absolutnya kehilangan patokan. Di sini display diberikan eksplisit,
   tidak diserahkan ke blokifikasi flex. */
.section-collection-head__sort-field {
  position: relative;
  display: block;
  flex: 1 1 auto;
}

.section-collection-head__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  /* Kanan lebih lebar dari kiri karena chevron duduk di sana. */
  padding: 1.4rem 4rem 1.4rem 2rem;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--blue600);
  font-weight: 600;
  /* 0.9 menyamakan tingginya dengan pil filter, yang mewarisi
     line-height 0.9 dari .u-btn. */
  line-height: 0.9;
  cursor: pointer;
  transition:
    color 0.6s var(--ease-media),
    border-color 0.6s var(--ease-media);
}

.section-collection-head__select:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 2px;
}

.section-collection-head__chevron {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 1.2rem;
  height: auto;
  transform: translateY(-50%);
  /* Klik harus tembus ke select di bawahnya. */
  pointer-events: none;
  color: var(--blue600);
}

/* --- Desktop. Satu garis peralihan di 1024px, sama seperti seluruh
   proyek ini. Tidak ada tier menengah. */
@media (min-width: 1024px) {
  .section-collection-head {
    padding: 8rem 0 4.8rem;
  }

  .section-collection-head__inner {
    gap: 4.8rem;
  }

  /* Rel teks kiri 7 kolom dari kisi 24 kolom. Sebagai max-width, jadi
     di layar sempit dia tidak pernah memaksa lebar. */
  .section-collection-head__intro {
    max-width: calc(7 * var(--col) + 6 * var(--gutter));
    gap: 2rem;
  }

  .section-collection-head__toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
  }

  .section-collection-head__sort {
    flex-shrink: 0;
  }

  /* Di desktop select menyusut ke lebar isinya, tidak lagi selebar
     baris seperti di mobile. */
  .section-collection-head__sort-field {
    flex: 0 0 auto;
  }

  .section-collection-head__select {
    width: auto;
  }
}