/* ==========================================================================

   RUNE MASTER GLOBAL PRODUCT CARD STYLESHEET (CLEAN FLAT UNIFIED)

   Kiblat Utama Desain Kartu Produk Universal - 100% Sesuai Image 1

   ========================================================================== */



/* 1. SEAMLESS CONTAINER KARTU */

.rune-shop-card {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    display: flex !important;

    flex-direction: column !important;

    position: relative !important;

    height: 100% !important;

    width: 100% !important;

    box-sizing: border-box !important;

    overflow: visible !important; /* Membebaskan bayangan pop-out */

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}

.rune-shop-card:hover {

    transform: translateY(-4px) !important;

}



/* 2. MEDIA FRAME PLATFORM */

.rune-shop-media {

    position: relative !important;

    height: 300px !important;

    width: 100% !important;

    background: transparent !important;

    cursor: pointer !important;

    text-decoration: none !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;

}



/* 3. GAMBAR PRODUCT WEBP PURE TRANSPARENT */

.rune-shop-img {

    max-width: 85% !important;

    max-height: 85% !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.50)) !important; /* Shading studio alami */

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease !important;

    pointer-events: none !important;

    display: block !important;

    margin: 0 auto !important;

}

/* Efek 3D Pop-Out Sesuai Kesepakatan */

.rune-shop-card:hover .rune-shop-img {

    transform: scale(1.08) translateY(-14px) !important;

    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.70)) !important;

}



/* 4. DETAIL INFORMASI (SEAMLESS - TANPA KOTAK BACKGROUND) */

.rune-shop-info {

    padding: 16px 0 0 0 !important; /* Polos rata kiri tanpa boks abu-abu */

    display: flex !important;

    flex-direction: column !important;

    flex: 1 !important;

    position: relative !important;

    background: transparent !important; /* 100% Polos Transparan mengikuti Image 1 */

    z-index: 4 !important;

    box-sizing: border-box !important;

}



/* Baris Judul & Posisi Icon Like Kecil */

.rune-shop-title-row {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    width: 100% !important;

    margin-bottom: 8px !important;

}

.rune-shop-name {

    font-family: 'Lato', sans-serif !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    color: #fff !important;

    margin: 0 !important;

    text-decoration: none !important;

    line-height: 1.2 !important;

    flex: 1 !important;

}



/* 5. KATEGORI TAGS & HARGA KUSTOM */

.rune-shop-cats { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; margin-bottom: 12px !important; }

.rune-shop-cat-tag { font-size: 9px !important; color: #666 !important; background: #1a1a1a !important; padding: 3px 8px !important; border-radius: 10px !important; display: inline-block !important; font-family: 'Roboto', sans-serif !important; text-transform: uppercase; }

.rune-shop-price-row { display: flex !important; align-items: baseline !important; gap: 8px !important; margin-bottom: 14px !important; }

.rune-shop-regular { font-size: 11px !important; color: #444 !important; text-decoration: line-through !important; display: inline-block !important; font-family: 'Lato', sans-serif !important; }

.rune-shop-price { font-family: 'Lato', sans-serif !important; font-size: 26px !important; font-weight: 900 !important; color: #F69B07 !important; line-height: 1 !important; }



/* 6. TOMBOL AKSI PREMIUM OUTLINE (IMAGE 1 STYLE) */

.rune-shop-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: auto !important; width: 100% !important; }

.rune-shop-shipping { font-size: 10px !important; color: #4caf8a !important; margin: 0 !important; font-family: 'Roboto', sans-serif !important; }



.rune-shop-card .rune-shop-bottom a.rune-btn-global,

.rune-shop-card .rune-shop-bottom a.rune-shop-btn { 

    font-family: 'Lato', sans-serif !important; 

    font-size: 11px !important; 

    font-weight: 800 !important; 

    letter-spacing: 1px !important; 

    text-transform: uppercase !important; 

    padding: 10px 24px !important; 

    border-radius: 50px !important; 

    background: transparent !important; 

    color: #F69B07 !important; 

    border: 1px solid #F69B07 !important; 

    text-decoration: none !important; 

    transition: all 0.3s !important; 

    display: inline-block !important; 

    flex-shrink: 0 !important; 

}

.rune-shop-card .rune-shop-bottom a.rune-btn-global:hover,

.rune-shop-card .rune-shop-bottom a.rune-shop-btn:hover { 

    background: #F69B07 !important; 

    border-color: #F69B07 !important; 

    color: #111 !important; 

}



/* 7. FLOATING BADGES & HEART BUTTON RULES */

.rune-shop-badges { position: absolute !important; top: 12px !important; left: 12px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; z-index: 5 !important; }

.rune-shop-badge { font-family: 'Lato', sans-serif !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 20px !important; display: inline-block !important; }

.rune-shop-badge.cat { background: rgba(246,155,7,.12) !important; color: #F69B07 !important; border: 1px solid rgba(246,155,7,.25) !important; }

.rune-shop-badge.new { background: rgba(76,175,138,.12) !important; color: #4caf8a !important; border: 1px solid rgba(76,175,138,.25) !important; }

.rune-shop-badge.sale { background: #cc1e1e !important; color: #fff !important; }



/* Floating Heart Icon (Top Right Frame) */

.rune-shop-card .rune-like-btn {

    position: absolute !important;

    top: 12px !important;

    right: 12px !important;

    width: 32px !important;

    height: 32px !important;

    padding: 0 !important;

    background: transparent !important;

    border: 1px solid rgba(255,255,255,0.15) !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    z-index: 10 !important;

    cursor: pointer !important;

    transition: all 0.2s !important;

}

.rune-shop-card .rune-like-btn:hover {

    border-color: #cc1e1e !important;

}

.rune-shop-card .rune-like-btn svg {

    width: 14px !important;

    height: 14px !important;

    fill: transparent !important;

    stroke: rgba(255,255,255,0.4) !important;

    stroke-width: 2px !important;

}

.rune-shop-card .rune-like-btn.liked svg {

    fill: #cc1e1e !important;

    stroke: #cc1e1e !important;

}



/* Inline Small Heart (Next to Title) */

.rune-shop-card .rune-shop-like-inline {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    font-size: 11px !important;

    color: #444 !important;

    margin-left: 8px !important;

}

.rune-shop-card .rune-shop-like-inline svg {

    width: 12px !important;

    height: 12px !important;

    stroke: #cc1e1e !important;

    fill: #cc1e1e !important;

}



/* 8. MOBILE RESPONSIBER PROTECTION */

@media(max-width:1023px) {

    .rune-shop-media { height: 240px !important; }

    .rune-shop-card:hover .rune-shop-img { transform: scale(1.05) translateY(-6px) !important; }

}

@media(max-width:480px) {

    .rune-shop-media { height: 200px !important; }

}