/*
 * Aperina Wishlist — heart buttons and the empty state.
 * Uses the Aperina theme's role tokens, with fallbacks so it works under any theme.
 */
.wishlist-toggle {
  position: relative; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  padding: 0; border: 0; background: none; color: var(--text, #322D29); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 36px visible square inside a 44px touch target */
.wishlist-toggle::before {
  content: ""; position: absolute; inset: 4px; border-radius: 12px;
  background: color-mix(in oklab, var(--bg-raised, #F7F3EE) 90%, transparent); box-shadow: var(--shadow-1, 0 1px 2px rgb(50 45 41 / 0.06));
  transition: background-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.wishlist-toggle__icon {
  position: relative; inline-size: 20px; block-size: 20px;
  fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round;
  transition: fill var(--dur-base, 240ms) var(--ease-out, ease), scale var(--dur-base, 240ms) var(--ease-out, ease);
}
.wishlist-toggle:hover::before { background: var(--bg-raised, #F7F3EE); }
.wishlist-toggle:active .wishlist-toggle__icon { scale: 0.86; }
.wishlist-toggle[aria-pressed="true"] { color: var(--primary, #72383D); }
.wishlist-toggle[aria-pressed="true"] .wishlist-toggle__icon { fill: currentColor; }
.wishlist-toggle[aria-busy="true"] { cursor: progress; }
.wishlist-toggle:focus-visible { outline: 2px solid var(--focus-ring, #72383D); outline-offset: -1px; border-radius: 14px; }

/* With a label (product page) */
.wishlist-toggle--text {
  display: inline-flex; gap: var(--space-2, 8px); inline-size: auto; block-size: auto; min-height: 48px;
  padding-inline: var(--space-4, 16px) var(--space-5, 20px);
  border: 1px solid var(--border-strong, #8A7E73); border-radius: var(--radius-cta, 14px);
  font-size: var(--text-label, 0.875rem); font-weight: 500;
  transition: background-color var(--dur-base, 240ms) var(--ease-out, ease), border-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.wishlist-toggle--text::before { display: none; }
.wishlist-toggle--text:hover { border-color: var(--text, #322D29); }
.wishlist-toggle--text[aria-pressed="true"] { background: var(--accent-tint, #E7D8D5); border-color: var(--primary, #72383D); color: var(--on-accent-tint, #72383D); }
.wishlist-toggle--text:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wishlist-toggle__icon, .wishlist-toggle::before, .wishlist-toggle--text { transition: none; }
}

/* Empty list */
.wishlist-empty { display: grid; justify-items: center; gap: var(--space-2, 8px); padding: var(--space-10, 40px) var(--space-4, 16px); text-align: center; }
.wishlist-empty[hidden] { display: none; }
.wishlist-empty__icon { inline-size: 40px; block-size: 40px; margin-block-end: var(--space-2, 8px); fill: transparent; stroke: var(--text-muted, #6B6159); stroke-width: 1.2; stroke-linejoin: round; }
.wishlist-empty__title { margin: 0; font-size: var(--text-title, 1.25rem); font-weight: 600; line-height: 1.6; }
.wishlist-empty__text { margin: 0 0 var(--space-3, 12px); max-width: 40ch; font-size: var(--text-small, 0.9375rem); color: var(--text-muted, #6B6159); }

/* Announcements for screen readers; fixed and anchored so it never widens an RTL page. */
.wishlist-live { position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }