/* Komponen product-card. Kartu produk grid, plus gridnya sendiri.

   BUKAN porting. Tidak ada satu baris pun CSS sumber yang disalin.
   Angka di berkas ini adalah hasil ukur halaman koleksi sumber yang
   ditulis ulang memakai token situs ini.

   Satu berkas satu blok, pola yang sudah dipakai product-pushes dan
   ugc-grid. Nama bloknya .section-product-card, dan itu nama KOMPONEN,
   bukan nama halaman. Berkas ini boleh dimuat di halaman mana pun yang
   butuh kartu produk. Tidak ada satu rule pun di sini yang bergantung
   pada section lain, pada halaman koleksi, atau pada JS.

   Tidak butuh JS sama sekali. Hover, rasio, badge, dan status habis
   stok semuanya CSS. prefers-reduced-motion sudah tertangani lewat
   pemangkas transition-duration global di reset.css.

   Muat SEBELUM mega-nav.css, sama seperti berkas section lain. */

/* --- 1. Cangkang section --------------------------------------
   Terukur di sumber: padding vertikal section koleksi 8rem atas bawah
   di desktop. Mobile 2.4rem atas dan 4.8rem bawah, ada di blok mobile
   di bawah. */
.section-product-card {
  padding: 8rem 0;
}

/* Rel kiri 7 kolom, area konten kanan 15 kolom, sisa 2 kolom plus
   3 gutter jadi jarak di tengah. Pola 7+15 ini dipakai berulang di
   sumber (section koleksi dan section tabel perbandingan), jadi ikut
   dipakai di sini supaya terasa satu sistem, bukan 8+16 atau 6+18.
   Jaraknya tidak ditulis sebagai gap, tapi diserahkan ke
   space-between, supaya sisa pembulatan kisi jatuh di tengah dan
   bukan di tepi.

   Lebarnya sengaja PERSEN, bukan calc(7 * var(--col) + 6 * var(--gutter)).
   Alasannya nyata: --col dan --gutter berbasis vw dan terus tumbuh,
   sementara .u-container kena max-width 1680px. Versi calc melimpah
   keluar container begitu viewport lewat sekitar 1778px, sampai
   seratus piksel lebih. Persennya diturunkan dari angka kolom yang
   sama persis:
     rel  = (7 * 2.653 + 6 * 1.338) / 94.444 = 26.599 / 94.444 = 28.1633%
     grid = (15 * 2.653 + 14 * 1.338) / 94.444 = 58.527 / 94.444 = 61.9707%
   Di bawah cap hasilnya identik dengan versi calc, di atas cap dia
   ikut mengecil dan tidak melimpah. */
.section-product-card__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.section-product-card__rail {
  width: 28.1633%;
}

/* 1.6rem ini keputusan sendiri, bukan hasil ukur. Sumbernya tidak
   punya pasangan judul plus subjudul di rel kiri yang bisa diukur.
   Angkanya diambil dari ritme rem yang sudah dipakai section lain,
   bukan dikarang di luar skala. */
.section-product-card__heading {
  margin: 0 0 1.6rem;
  color: var(--black);
}

.section-product-card__intro {
  margin: 0;
}

/* --- 2. Grid --------------------------------------------------
   Jumlah kolom EKSPLISIT di dua tier. Sumbernya memakai flex row
   dengan flex:1 1 di desktop, jadi jumlah kolomnya mengikuti jumlah
   kartu dan empat produk langsung jadi empat kolom sempit dalam satu
   baris. Itu rapuh untuk koleksi yang isinya berubah ubah, jadi tidak
   ditiru.

   Cek lebar kartu terhadap hasil ukur:
     desktop = (15col + 14gutter - 2gutter) / 3 = 5col + 4gutter
             = 238.30px @1280, sama persis dengan hasil ukur
     mobile  = (grid-width - margin) / 2 = 187.48px @430, juga sama persis

   Jumlah kolom bisa diganti per halaman lewat atribut style, contohnya
   style="--cols-lg: 4", tanpa menyentuh berkas ini. Polanya meniru
   --n di .u-span, dan fallback-nya ditulis supaya lupa menyetel
   variabel tidak bikin grid ambruk. */
.section-product-card__grid {
  width: 61.9707%;
  display: grid;
  grid-template-columns: repeat(var(--cols-lg, 3), minmax(0, 1fr));
  column-gap: var(--gutter);
  /* Baris kedua tidak pernah terjadi di sumber, kartunya satu baris
     flex, jadi row-gap ini keputusan sendiri. 4.8rem dipinjam dari
     jarak judul ke grid yang terukur di desktop, bukan angka baru. */
  row-gap: 4.8rem;
}

/* minmax(0, 1fr) di atas plus min-width di sini menahan nama produk
   panjang tanpa spasi supaya tidak melebarkan kolomnya sendiri. */
.section-product-card__item {
  min-width: 0;
}

/* --- 3. Kartu -------------------------------------------------
   Seluruh kartu satu elemen a, persis seperti sumber. Tidak ada tombol
   di dalamnya, jadi tidak ada tautan atau tombol bersarang.

   Kartunya sendiri tanpa border, tanpa background, tanpa shadow, tanpa
   padding dalam, dan tanpa border-radius. Terukur begitu. Medianya
   menempel ke tepi kolom.

   gap 2rem menyiapkan slot CTA opsional di bawah badan kartu, terukur
   di sumber. Selama anak .section-product-card__card cuma satu, gap
   ini tidak menghasilkan jarak apa apa. */
.section-product-card__card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

/* Terukur 1.2rem di desktop, 0.8rem di mobile. */
.section-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* --- 4. Media -------------------------------------------------
   Pembungkus rasio dipisah dari kotak medianya karena badge dan
   penanda habis stok harus duduk di luar overflow: clip. Kalau tidak,
   sudut pilnya ikut terpotong dan pilnya ikut ter-scale saat hover. */
.section-product-card__media-wrap {
  position: relative;
}

.section-product-card__media {
  width: 100%;
  /* Rasio 1:1 persis, sama di kedua viewport. Terukur dari sizer
     padding-top 100% di semua kartu grid. */
  aspect-ratio: 1 / 1;
  overflow: clip;
  /* Radius cuma di DUA SUDUT ATAS, bawah siku. Detail kecil yang
     gampang terlewat tapi kelihatan jelas, karena teksnya duduk
     langsung di bawah tepi lurus itu. --radius-card = 0.8rem, sama
     dengan hasil ukur. */
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Anak langsung media: .u-placeholder sekarang, img nanti.
   .u-placeholder WAJIB elemen block seperti div. Sebagai span dia
   inline, width dan height diabaikan, dan kotaknya tidak muncul sama
   sekali. Ini bug nyata yang sudah pernah terjadi di repo ini. */
.section-product-card__media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-media);
}

/* Terukur: hover men-scale gambar 1.05 selama 0.6s. */
.section-product-card__card:hover .section-product-card__media > * {
  transform: scale(1.05);
}

/* --- 5. Badge dan penanda habis stok --------------------------
   Sumbernya TIDAK punya badge dan TIDAK punya kartu habis stok, jadi
   tidak ada yang bisa diukur untuk dua hal ini. Geometrinya dipinjam
   dari satu satunya pil yang memang terukur di halaman itu, yaitu pil
   tambah cepat di kartu carousel cross-sell: offset 1.4rem desktop dan
   1rem mobile, padding 1rem 1.6rem desktop dan 0.8rem 1.6rem mobile,
   radius pil penuh, border 1px, latar putih.

   Penempatannya yang keputusan sendiri: badge di kiri atas, penanda
   habis stok di kiri bawah, supaya keduanya tidak bertabrakan kalau
   satu kartu kebetulan memakai dua duanya. */
.section-product-card__badge,
.section-product-card__flag {
  position: absolute;
  left: 1.4rem;
  padding: 1rem 1.6rem;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-pill);
  background: var(--white);
  /* 600 mengikuti .u-btn. Pil sekecil ini susah dibaca di berat 400. */
  font-weight: 600;
}

.section-product-card__badge {
  top: 1.4rem;
  color: var(--black);
}

.section-product-card__flag {
  bottom: 1.4rem;
  color: var(--black7);
}

/* Sama persis dengan .u-btn-selected dan dengan chip terpilih di
   section tabel perbandingan: latar --blue-cgi, teks --blue, border
   --hairline. Dipakai untuk penanda baru. */
.section-product-card__badge--accent {
  background: var(--blue-cgi);
  color: var(--blue);
  border-color: var(--hairline);
}

/* --- 6. Blok teks ---------------------------------------------
   Hierarki warnanya, terukur: nama penuh dan tebal, deskriptor redup
   dan regular, harga penuh dan regular. Tidak ada rating, tidak ada
   swatch warna, tidak ada tombol di dalam kartu grid.
   Warna redup deskriptor datang dari kelas .u-black7 di markup, bukan
   dari berkas ini, supaya kartu tetap satu bahasa dengan section lain. */
.section-product-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.section-product-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.section-product-card__name {
  margin: 0;
  font-weight: 600;
  color: var(--black);
}

.section-product-card__desc {
  margin: 0;
}

.section-product-card__price {
  margin: 0;
  color: var(--black);
}

/* --- 7. Status habis stok -------------------------------------
   Kartunya tetap tautan hidup, halaman produknya masih boleh dibuka.
   Yang berubah cuma tampilan: latar media diredam ke --grey-oos,
   isinya turun ke separuh, hover dimatikan, dan harga ikut redup.
   Teks "Sold out" ada di dalam pil, jadi statusnya terbaca pembaca
   layar tanpa atribut tambahan. */
.section-product-card__card.is-sold-out .section-product-card__media {
  background: var(--grey-oos);
}

.section-product-card__card.is-sold-out .section-product-card__media > * {
  opacity: 0.5;
}

.section-product-card__card.is-sold-out:hover .section-product-card__media > * {
  transform: none;
}

.section-product-card__card.is-sold-out .section-product-card__price {
  color: var(--black7);
}

/* --- 8. Mobile, satu garis di 1024 ----------------------------
   1023.98 bukan 1023, supaya viewport pecahan di antara keduanya tidak
   jatuh ke celah tanpa aturan. */
@media (max-width: 1023.98px) {
  /* Terukur 2.4rem atas dan 4.8rem bawah. */
  .section-product-card {
    padding: 2.4rem 0 4.8rem;
  }

  .section-product-card__inner {
    flex-direction: column;
  }

  /* Judul pindah ke atas grid. Jaraknya 3.2rem, hasil ukur. */
  .section-product-card__rail {
    width: 100%;
    margin-bottom: 3.2rem;
  }

  .section-product-card__grid {
    width: 100%;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    /* Gap kolomnya sengaja --margin, BUKAN --gutter. Terukur 18.35px
       @430, yaitu margin tepi halaman, bukan 11.15px gutter kisi.
       Mereka memang menyamakannya dengan margin. */
    column-gap: var(--margin);
    /* Terukur 3.2rem, hampir dua kali gap kolomnya, jadi barisnya
       terbaca jelas terpisah. */
    row-gap: 3.2rem;
  }

  .section-product-card__body {
    gap: 0.8rem;
  }

  .section-product-card__text {
    gap: 0.2rem;
  }

  .section-product-card__badge,
  .section-product-card__flag {
    left: 1rem;
    padding: 0.8rem 1.6rem;
  }

  .section-product-card__badge {
    top: 1rem;
  }

  .section-product-card__flag {
    bottom: 1rem;
  }
}

/* --- 9. Varian lebar penuh ------------------------------------
   Untuk halaman yang tidak memakai rel 7+15, misalnya hasil pencarian
   atau daftar produk polos yang judulnya sudah dipegang section lain.
   Judul pindah ke atas grid dengan jarak 4.8rem hasil ukur, dan grid
   memakai lebar container penuh. Jumlah kolomnya diatur dari markup,
   contohnya style="--cols-lg: 4".
   Cuma perlu blok desktop: di mobile susunannya sudah bertumpuk dan
   gridnya sudah 100 persen. */
@media (min-width: 1024px) {
  .section-product-card__inner--wide {
    flex-direction: column;
  }

  .section-product-card__inner--wide .section-product-card__rail {
    width: 100%;
    margin-bottom: 4.8rem;
  }

  .section-product-card__inner--wide .section-product-card__grid {
    width: 100%;
  }
}