/** Shopify CDN: Minification failed

Line 250:1 Expected "}" to go with "{"

**/
/* Container kartu harus relatif buat jangkar */
.card-wrapper {
  position: relative;
}

/* TERBANGKAN TOMBOL KE ATAS GAMBAR */
.rune-like-on-card {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 9999 !important; /* Di atas segalanya */
}

.rune-thumbnail-mode .rune-like-btn {
  position: relative !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: #fff !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.rune-heart-icon-container, 
.rune-heart-icon-container svg {
  pointer-events: none !important;
}

/* Sembunyikan elemen detail di mode thumbnail */
.rune-thumbnail-mode .rune-like-text,
.rune-thumbnail-mode .rune-count {
  display: none !important;
}

/* HOVER DESKTOP */
@media screen and (min-width: 750px) {
  .rune-like-on-card { opacity: 0; transition: 0.2s; visibility: hidden; }
  .card-wrapper:hover .rune-like-on-card { opacity: 1; visibility: visible; }
}

/* ==========================================
   WARNA ICON HATI - FIX TRANSPARENCY BUG
   ========================================== */

/* Ikon saat belum diklik: Solid Orange agar Sleek */
.icon-heart-outline { 
  color: #F69B07 !important; 
  display: block; 
  opacity: 1 !important; /* Menghilangkan efek transparan */
}

/* Ikon saat sudah diklik: Solid Red */
.icon-heart-filled { 
  color: #FF0000 !important; 
  display: none; 
}

.is-active .icon-heart-filled { display: block !important; }
.is-active .icon-heart-outline { display: none !important; }


/* ==========================================
   RUNE DETAIL PAGE MODE - PERFECT SYNC
   ========================================== */

.rune-detail-mode .rune-like-btn {
  width: 100% !important; 
  min-height: 4.6rem !important; /* Standar tinggi tombol Dawn */
  
  /* SINKRONISASI OTOMATIS DENGAN THEME SETTINGS */
  font-family: var(--font-body-family); /* Sama dengan Add to Cart */
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight-bold, 700); /* Mengambil bobot tebal dari setting theme */
  letter-spacing: 0.1rem; /* Spasi standar tombol Dawn */
  font-size: 1.5rem !important;
  
  /* ==========================================
   1. WARNA ICON HATI (SOLID & SHARP)
   ========================================== */
.icon-heart-outline { 
  color: #F69B07 !important; 
  display: block; 
  opacity: 1 !important; 
}

.icon-heart-filled { 
  color: #FF0000 !important; 
  display: none; 
}

.is-active .icon-heart-filled { display: block !important; }
.is-active .icon-heart-outline { display: none !important; }

/* ==========================================
   2. RUNE DETAIL PAGE MODE (PERFECT SYNC)
   ========================================== */
.rune-detail-mode .rune-like-btn {
  width: 100% !important; 
  min-height: 4.6rem !important; /* Tinggi standar tombol Dawn */
  
  /* SINKRONISASI FONT TOTAL DENGAN ADD TO CART */
  font-family: var(--font-body-family); 
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight-bold, 700);
  letter-spacing: 0.1rem; 
  font-size: 1.5rem !important;
  text-transform: uppercase;
  
  /* BENTUK & WARNA */
  border: 1px solid #F69B07 !important; 
  border-radius: var(--buttons-radius, 40px) !important;
  background: transparent !important; 
  color: #F69B07 !important;
  
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px;
  cursor: pointer; 
  margin: 15px 0 10px 0 !important;
  transition: all 0.3s ease;
}

/* HOVER SAAT BELUM DI-LIKE */
.rune-detail-mode .rune-like-btn:not(.is-active):hover {
  background: #F69B07 !important;
  color: #FFFFFF !important;
}
.rune-detail-mode .rune-like-btn:not(.is-active):hover .icon-heart-outline {
  color: #FFFFFF !important;
}

/* STATE SAAT SUDAH DI-LIKE (RESPECT GIVEN) */
.rune-detail-mode .rune-like-btn.is-active {
  background: #F69B07 !important; 
  color: #000 !important;
}

/* HOVER SAAT SUDAH DI-LIKE (TEKS JADI PUTIH) */
.rune-detail-mode .rune-like-btn.is-active:hover {
  background: #e58a00 !important; 
}
.rune-detail-mode .rune-like-btn.is-active:hover .rune-like-text,
.rune-detail-mode .rune-like-btn.is-active:hover .icon-heart-filled {
  color: #FFFFFF !important;
}

/* ==========================================
   3. SOCIAL PROOF UI (SLEEK & LEFT ALIGNED)
   ========================================== */
.rune-proof-sleek {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 5px;
  padding-left: 25px; /* Sejajar dengan ikon di dalam tombol */
  width: 100%;
  opacity: 0.8;
}

.rune-pulse-dot {
  width: 6px; height: 6px;
  background-color: #F69B07;
  border-radius: 50%;
  position: relative;
}

.rune-pulse-dot::after {
  content: ''; position: absolute;
  width: 100%; height: 100%;
  background-color: #F69B07; border-radius: 50%;
  animation: rune-ripple 2s infinite ease-out;
}

.rune-text-minimal {
  margin: 0; font-size: 1.3rem;
  color: #999; font-weight: 400;
  display: flex; gap: 4px;
}

.rune-text-minimal .rune-count {
  color: #F69B07; font-weight: 700;
}

@keyframes rune-ripple {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- UI SLEEK & CLEAN SOCIAL PROOF (RATA KIRI) --- */
.rune-proof-sleek {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Rata kiri sesuai diskusi */
  gap: 10px;
  margin-top: 5px;
  padding-left: 25px; /* Menyelaraskan posisi dengan ikon di dalam tombol */
  width: 100%;
  opacity: 0.8;
}

/* Indikator Pulse Dot Minimalis */
.rune-pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #F69B07;
  border-radius: 50%;
  position: relative;
}

.rune-pulse-dot::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #F69B07;
  border-radius: 50%;
  animation: rune-ripple 2s infinite ease-out;
}

.rune-text-minimal {
  margin: 0;
  font-size: 1.3rem;
  color: #999; 
  font-weight: 400;
  letter-spacing: 0.02em;
  display: flex;
  gap: 4px;
}

.rune-text-minimal .rune-count {
  color: #F69B07;
  font-weight: 700;
}

@keyframes rune-ripple {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(3); opacity: 0; }
}