/* ============================================================
   SHOPAALE HEADER ICONS — Standard styles (2026-10-04)
   One consistent look for cart + profile icons site-wide.
   ============================================================ */
.shp-std-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #3a2b4d;
  text-decoration: none;
  padding: 6px !important;
  margin: 2px !important;
}
.shp-std-icon .shp-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}
.shp-std-icon[data-shp-done] > small {
  display: none; /* hide text labels on standardized icons only */
}
.shp-cart-badge {
  position: absolute !important;
  top: -2px !important;
  right: -4px !important;
  background: #6e1597 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 4px !important;
  line-height: 1 !important;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
/* Mobile: slightly smaller */
@media (max-width: 820px) {
  .shp-std-icon .shp-icon {
    width: 24px;
    height: 24px;
  }
}

/* Mobile header overflow fix (2026-10-04) - prevent cart icon cutoff */
@media (max-width: 820px) {
  .header-main, .site-header .header-main {
    padding-left: 8px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .header-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-right: 2px !important;
  }
  .header-actions a, .shp-std-icon {
    padding: 6px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .shp-cart-badge {
    right: 0px !important;
    top: 0px !important;
  }
  /* Ensure search doesn't push icons off */
  .header-main .search-form, .site-header .search-form {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* Aggressive mobile header fix (2026-10-04) - cart cutoff */
@media (max-width: 820px) {
  body {
    overflow-x: hidden !important;
  }
  .site-header, header.site-header {
    overflow: visible !important;
    max-width: 100vw !important;
  }
  .header-main {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-right: 14px !important;
  }
  .header-actions {
    padding-right: 4px !important;
  }
  .shp-std-icon {
    flex-shrink: 0 !important;
  }
  /* Badge positioned safely within viewport */
  .shp-cart-badge, .cart-count-badge {
    right: 0px !important;
    top: 0px !important;
    transform: none !important;
  }
}

/* ============================================================
   Wishlist heart: instant active state + pop animation (2026-10-04)
   Global fallback so every product-card heart turns red instantly.
   ============================================================ */
.wishlist-icon.active i.fa-heart,
.wishlist-icons.active i.fa-heart {
  color: #e91e63 !important;
  font-weight: 900 !important;
}
.wishlist-icon.active svg path,
.wishlist-icons.active svg path {
  fill: #e91e63 !important;
  stroke: #e91e63 !important;
}
@keyframes shpHeartPop {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.wishlist-icon.shp-pop,
.wishlist-icons.shp-pop,
#wishlist_btn.shp-pop {
  animation: shpHeartPop 0.35s ease !important;
}