/* ==============================
   Wishlist Button (Heart)
============================== */

/* زر الويش لست */
.hs-wl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:0 !important;
  background:transparent !important;
  cursor:pointer;
  user-select:none;
  position:relative;
  z-index:10;
}

/* أثناء التحميل */
.hs-wl-btn.is-loading{
  opacity:.6;
  pointer-events:none;
}

/* الأيقونة نفسها (span فاضي) */
.hs-wl-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none; /* الكلك يروح للزر */
}

/* افتراضي: قلب فارغ */
.hs-wl-btn .hs-wl-icon::before{
  content:"♡";
  font-size:22px;
  line-height:1;
  color:#e53935;
  display:block;
}

/* عند التحديد: قلب مملي */
.hs-wl-btn.is-active .hs-wl-icon::before{
  content:"❤";
}

/* ==============================
   Loop Actions (Cart + Wishlist)
============================== */

li.product{
  position:relative;
}

/* الكونتينر اللي بيه زر السلة + القلب */
li.product .hs-loop-actions{
  display:flex;
  align-items:center;        /* توسيط عمودي */
  gap:12px;
  position:relative;
  z-index:5;
  isolation:isolate;         /* يمنع مشاكل stacking */
}

/* زر إضافة إلى السلة */
li.product .hs-loop-actions > a.add_to_cart_button,
li.product .hs-loop-actions > a.button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  position:relative;
  z-index:1;
}

/* تأكيد أن زر الويش لست فوقه */
li.product .hs-loop-actions > .hs-wl-btn{
  flex:0 0 auto;
  z-index:20;
  pointer-events:auto !important;
}

/* امنع أي ::before أو ::after من زر السلة يغطي */
li.product .hs-loop-actions > a.add_to_cart_button::before,
li.product .hs-loop-actions > a.add_to_cart_button::after,
li.product .hs-loop-actions > a.button::before,
li.product .hs-loop-actions > a.button::after{
  pointer-events:none !important;
}

/* ==============================
   Wishlist Page (Grid)
============================== */

.hs-wl-grid{
  display:grid;
  grid-template-columns: repeat(var(--hs-wl-cols, 4), minmax(0, 1fr));
  gap:14px;
}

.hs-wl-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.hs-wl-thumb{
  display:block;
}

.hs-wl-thumb img{
  width:100%;
  height:auto;
  display:block;
}

.hs-wl-info{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hs-wl-title{
  text-decoration:none;
  color:inherit;
  font-weight:600;
}

.hs-wl-price{
  opacity:.85;
}

.hs-wl-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.hs-wl-buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .7rem;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
  color:inherit;
}

.hs-wl-remove{
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:.75;
}

/* ==============================
   Empty State
============================== */

.hs-wl-empty{
  padding:14px;
  opacity:.8;
  text-align:center;
}