/**
 * RUNE CARD PRODUCT
 * CSS untuk card produk di halaman Shop
 * Digunakan oleh: rune-shop-display.php
 */
/* === CARD WRAPPER === */
.rune-shop-card {
    background:transparent; /* REVISI 1: Background menjadi transparan */
    border-radius:16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s;
}
.rune-shop-card:hover {
    transform: translateY(-4px);
}
/* === MEDIA / IMAGE AREA === */
.rune-shop-media {
    position: relative;
    height: 300px;
    background:transparent;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.rune-shop-media-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Shading bawah untuk dimensi */
.rune-shop-media-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background:linear-gradient(to bottom, transparent, rgba(26,26,26,0.95));
    pointer-events: none;
    z-index: 1;
}
/* === GAMBAR HELM === */
.rune-shop-img {
    max-width: 85%;
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* BAYANGAN FOTO — SAMA DI SEMUA LEBAR LAYAR (17 September 2026, keputusan admin).
       Dulu desktop memakai drop-shadow(0 8px 24px) + drop-shadow(0 2px 8px).
       Terukur di live pada lebar 1100-1440px, hasilnya SELALU sama:
         kotak foto 300px · foto 255px · ruang kosong atas & bawah 23px
         bayangan menjulur 8 + 24 = 32px  ->  9px TERAKHIR DIPOTONG RATA
       Karena latar kartu transparan, potongannya terlihat sebagai GARIS MENDATAR
       TEGAS tempat bayangan berhenti mendadak. Saat kursor di atas kartu foto
       membesar 4%, ruangnya tinggal ~17px, dan terpotongnya makin banyak.
       Nilai di bawah ini menjulur 4 + 10 = 14px — muat di ruang 23px maupun di
       ruang 17px saat hover. Nilai yang sama sudah dipakai di HP sejak
       7 September dan sudah disetujui admin, jadi sekarang seragam di semua
       lebar layar dan tidak ada lagi aturan terpisah untuk HP.
       🔴 Kelas ini dipakai kartu Shop DAN kartu Featured di Beranda. */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.85))
            drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    transition: transform .4s;
    pointer-events: none;
    display: block;
    position: relative;
    z-index: 0;
    margin: 0 auto;
}
.rune-shop-card:hover .rune-shop-img {
    transform: scale(1.04);
}
/* === BADGES (Category / New / Sale) === */
.rune-shop-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}
.rune-shop-badge {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius:30px;
    display: inline-block;
}
.rune-shop-badge.cat {
    background:rgba(246,155,7,.15);
    color:#F69B07;
    border:1px solid rgba(246,155,7,.4);
}
.rune-shop-badge.new {
    background:rgba(76,175,138,.15);
    color:#3BAF6B;
    border:1px solid rgba(76,175,138,.4);
}
.rune-shop-badge.sale {
    background:#cc1e1e;
    color:#fff;
}
/* 10 Sep 2026 — Best Seller. Datanya (tag produk "best-seller") sudah dikirim
   rune-shop-api.php sejak dulu, tapi kartunya belum pernah mencetaknya.
   Warnanya sengaja BEDA dari tiga badge lain: putih tipis, bukan oranye —
   supaya tidak menambah elemen oranye ke-7 di layar (lihat catatan banner
   blindness, 9 Sep) dan tidak bersaing dengan badge diskon merah. */
.rune-shop-badge.best {
    background:rgba(255,255,255,.10);
    color:#fff;
    border:1px solid rgba(255,255,255,.30);
}
/* === LIKE BUTTON (pojok kanan atas) === */
.rune-shop-media .rune-like-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}
/* === INFO SECTION === */
.rune-shop-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative; /* REVISI 2: Container patokan untuk posisi icon love inline */
}
/* === BARIS JUDUL: nama produk + icon love sejajar (REVISI 4) ===
   Sebelumnya icon love ditempel pakai position:absolute dan ruang untuk
   judul dibuat pakai padding-right pixel tetap (44px). Karena .rune-shop-name
   itu tag <a> (inline), padding-right hanya berlaku di ujung BARIS TERAKHIR,
   sehingga judul 2 baris tertimpa icon love di baris pertama.
   Sekarang keduanya ditata flex: judul mengisi sisa ruang, icon tidak menyusut. */
.rune-shop-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
/* Nama produk */
.rune-shop-name {
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color:#fff;
    margin: 0 0 8px;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
    transition: color .2s ease;
    /* 14 September 2026 — JUDUL SELALU MENGAMBIL RUANG TEPAT 2 BARIS.
       Judul 1 baris tetap diberi ruang 2 baris; judul lebih dari 2 baris
       dipotong "…" (nama lengkap tetap ada di halaman produk & atribut title).
       Tujuannya: tinggi kartu jadi PASTI, tidak tergantung panjang nama —
       sehingga (1) kerangka memuat (rune-performance.php 3x) bisa dibuat
       sama tinggi dengan kartu asli tanpa angka salinan, halaman tidak
       meloncat saat data REST tiba; (2) harga & tombol sejajar di semua
       kartu dalam satu baris grid. Disetujui admin lewat
       mockup-kerangka-kartu.html.
       2lh = dua kali line-height elemen ini (1.272, dikunci rune-performance
       3i) — kalau line-height diubah, ruangnya ikut. Baris 2.544em di atasnya
       cadangan untuk browser lama yang belum kenal satuan lh. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.544em;
    min-height: 2lh;
}
/* 8 September 2026 — JUDUL KARTU HARUS BEREAKSI DI LAYAR SENTUH JUGA.
   Sebelumnya hanya :hover. Di HP tidak ada hover: jari mengetuk lalu halaman
   langsung pindah, jadi judul tidak pernah terlihat berubah warna — sementara
   tautan lain terlihat menyala. Sekarang :active (saat jari MENEKAN) dan :focus
   (setelah diketuk / lewat papan ketik) ikut memberi warna yang sama persis.
   Kategori 2 taksonomi hover Rune: ganti warna saja, TANPA garis bawah. */
.rune-shop-name:hover,
.rune-shop-name:active,
.rune-shop-name:focus,
.rune-shop-name:focus-visible {
    color:#F69B07 !important;
    text-decoration: none !important;
}
/* === CATEGORY TAGS === */
.rune-shop-cats {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.rune-shop-cat-tag {
    font-size: 12px;
    color:#888;
    background:#1D1D1D;
    padding: 3px 8px;
    border-radius:12px;
}
/* === HARGA === */
.rune-shop-regular {
    font-size: 12px;
    color:#8A8A8A;
    text-decoration: line-through;
    display: inline-block; /* REVISI 2: Hapus display: block agar sejajar dengan harga utama */
    /* 14 Sep 2026 — line-height 1: tanpa ini kotak harga coret (19px, line-height
       1.618 warisan body) menonjol 3px di bawah garis dasar harga besar (26px,
       line-height 1), sehingga baris harga = 29px pada produk diskon tapi 26px
       pada produk biasa. Diukur di Featured. Dengan line-height 1, baris harga
       SELALU 26px — tinggi kartu tidak lagi tergantung ada/tidaknya diskon,
       dan kerangka memuat bisa menirunya tepat. Posisi teksnya tidak berubah
       (tetap rata garis dasar). */
    line-height: 1;
}
/* === BARIS: harga besar + like count === */
.rune-shop-price-row {
    display: flex;
    align-items: baseline; /* REVISI 2: Sejajarkan harga coret ke garis bawah harga besar */
    gap: 8px;
    margin-bottom: 10px;
}
.rune-shop-price {
    font-family: 'Lato', sans-serif;
    font-size: 26px;
    font-weight: 900;
    color:#F69B07;
    line-height: 1;
}
.rune-shop-like-inline {
    /* REVISI 4: ikut alur flex .rune-shop-title-row (tidak lagi absolute) */
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color:#9A9A9A;
}
.rune-shop-like-inline svg {
    width: 14px;
    height: 14px;
    stroke: #cc1e1e;
    fill: #cc1e1e;
    flex-shrink: 0;
}
/* === BOTTOM ROW: free shipping di atas, tombol full-width di bawah (REVISI 3: selalu ditumpuk, tidak tergantung lebar layar, karena card di section ini memang selalu sempit) === */
.rune-shop-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}
.rune-shop-bottom .rune-btn-global,
.rune-shop-bottom .rune-shop-btn {
    width: 100%;
    text-align: center;
}
/* .rune-shop-shipping DIHAPUS 6 September 2026. Badge "Free shipping ID" di kartu
   produk ternyata teks yang diketik kaku di kode, bukan hasil setelan pengiriman
   WooCommerce — zona yang ada cuma "International Shipping / Everywhere / Flat rate",
   tidak ada metode Free Shipping untuk negara mana pun. Jadi badge itu tampil ke
   SEMUA pembeli termasuk yang tidak dapat gratis ongkir: menyesatkan. Badge-nya
   dihapus dari rune-shop-display.php dan rune-featured-display.php, jadi aturan ini
   sudah tidak dipakai siapa pun. */
.rune-shop-btn {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 22px;
    border-radius:30px;
    background:transparent;
    color:#F69B07;
    border:1px solid #F69B07;
    text-decoration: none;
    transition: .2s;
    display: inline-block;
    flex-shrink: 0;
}
.rune-shop-btn:hover,
.rune-shop-btn:active,
.rune-shop-btn:focus {
    background:#F69B07;
    color:#111;
}
/* 🔴 11 Okt 2026 — :active di atas ditulis 8 September dan BENAR, tapi
   TIDAK PERNAH MENYALA DI iPHONE selama sebulan lebih: Safari iOS hanya
   menerapkan :active pada elemen yang punya penangan sentuh. Penangannya baru
   dipasang 11 Okt, di daftar bersama rune-shared.php.
   transition:none ditambahkan karena aturan dasarnya memakai transition .2s —
   pada ketukan cepat itu terbaca sebagai kedipan, bukan sebagai tekanan. */
.rune-shop-btn:active { transition: none; }
.rune-shop-name:active { transition: none; }
/* === EMPTY & LOADING STATE === */
.rune-shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color:#8A8A8A;
}
.rune-shop-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color:#8A8A8A;
}
/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .rune-shop-media {
        height: 240px;
    }
}
@media (max-width: 480px) {
    .rune-shop-media {
        height: 200px;
    }
}
/* ============================================================
   BAYANGAN FOTO PRODUK — RIWAYAT
   ============================================================
   7 September 2026 — dikecilkan HANYA untuk HP. Keluhan admin (diuji di
   iPhone 13 asli): bayangan foto terlalu lebar sehingga fotonya terlihat
   TERPOTONG di tepi bawah kartu. Terukur di lebar 390px: kotak foto 200px,
   foto ~170px, sisa ruang ~15px, bayangan menjulur ~32px.

   17 September 2026 — gejala yang SAMA ternyata ada juga di desktop, dan
   terukur: ruang 23px, bayangan 32px, 9px dipotong rata. Keputusan admin:
   "samakan saja seperti yang digunakan pada tampilan mobile".
   Nilainya sekarang ditulis SEKALI di aturan .rune-shop-img di atas, jadi
   blok khusus HP di sini TIDAK DIPERLUKAN LAGI dan sudah dihapus —
   menyisakannya berarti dua tempat yang harus diubah bersamaan.

   Breakpoint HP project tetap 921px untuk aturan lain di berkas ini. */