/* =====================================================================
   Ronelle Perfume — Premium Wishlist (Phase 11)
   ---------------------------------------------------------------------
   Token-driven, RTL via logical props. Served directly (no Tailwind build).
   Extends the frozen product card with a heart (no card redesign) + the
   wishlist page grid. Reduced-motion honored.
   ===================================================================== */

/* ---- Heart on the product card ---- */
.rui-pcard__media { position: relative; }
.rui-pcard__wish {
  position: absolute;
  inset-block-start: var(--rui-space-xs);
  inset-inline-end: var(--rui-space-xs);
  z-index: 3;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rui-radius-pill);
  border: 1px solid var(--rui-border);
  background: color-mix(in srgb, var(--rui-bg, #fff) 88%, transparent);
  backdrop-filter: blur(4px);
  color: var(--rui-text-muted);
  cursor: pointer;
  transition: color var(--rui-duration-fast, 150ms) var(--rui-ease-standard, ease),
              border-color var(--rui-duration-fast, 150ms) var(--rui-ease-standard, ease),
              transform var(--rui-duration-fast, 150ms) var(--rui-ease-soft, ease),
              background-color var(--rui-duration-fast, 150ms) var(--rui-ease-standard, ease);
}
.rui-pcard__wish svg { fill: none; transition: fill var(--rui-duration-fast, 150ms) var(--rui-ease-standard, ease); }
.rui-pcard__wish:hover { color: var(--rui-accent); border-color: var(--rui-accent); transform: scale(1.06); }
.rui-pcard__wish:focus-visible { outline: 2px solid var(--rui-accent); outline-offset: 2px; }
.rui-pcard__wish.is-saved { color: var(--rui-accent); border-color: var(--rui-accent); }
.rui-pcard__wish.is-saved svg { fill: currentColor; }
.rui-pcard__wish.is-saved { animation: rcw-pop var(--rui-duration-base, 250ms) var(--rui-ease-soft, ease); }
.rui-pcard__wish.is-loading { pointer-events: none; opacity: 0.6; }
.rui-pcard__wish.is-loading svg { animation: rcw-pulse 0.8s ease-in-out infinite; }
@keyframes rcw-pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes rcw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- Heart on the product details page ---- */
.rui-product-purchase__wish {
  margin-block-start: var(--rui-space-sm);
  display: inline-flex; align-items: center; gap: var(--rui-space-xs);
  width: 100%; justify-content: center;
  border: 1px solid var(--rui-border); border-radius: var(--rui-radius-pill);
  background: transparent; color: var(--rui-text); cursor: pointer;
  padding: var(--rui-space-sm) var(--rui-space-md); font-size: 0.9rem; font-weight: 600;
  transition: var(--rui-transition-base, all .2s);
}
.rui-product-purchase__wish svg { fill: none; transition: fill var(--rui-duration-fast, 150ms) var(--rui-ease-standard, ease); }
.rui-product-purchase__wish:hover { border-color: var(--rui-accent); color: var(--rui-accent-strong, var(--rui-accent)); }
.rui-product-purchase__wish:focus-visible { outline: 2px solid var(--rui-accent); outline-offset: 2px; }
.rui-product-purchase__wish.is-saved { border-color: var(--rui-accent); color: var(--rui-accent-strong, var(--rui-accent)); }
.rui-product-purchase__wish.is-saved svg { fill: currentColor; }
.rui-product-purchase__wish.is-loading { opacity: 0.6; pointer-events: none; }

/* ---- Navbar badge (mirrors the cart count) ---- */
#wishlist-count-badge[hidden] { display: none; }

/* ---- Wishlist page grid ---- */
.rcw-count { color: var(--rui-text-muted); font-weight: 600; font-size: 0.7em; }
.rcw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rui-space-md); }
@media (min-width: 768px) { .rcw-grid { grid-template-columns: repeat(3, 1fr); gap: var(--rui-space-lg); } }
@media (min-width: 1280px) { .rcw-grid { grid-template-columns: repeat(4, 1fr); } }
.rcw-item { min-width: 0; transition: opacity var(--rui-duration-base, 250ms) var(--rui-ease-standard, ease),
              transform var(--rui-duration-base, 250ms) var(--rui-ease-standard, ease); }
.rcw-item.is-removing { opacity: 0; transform: scale(0.92); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rui-pcard__wish, .rui-pcard__wish.is-saved, .rui-pcard__wish.is-loading svg, .rcw-item { animation: none; transition: none; }
}