/* wishlist — @tokens: --wishlist-size, --wishlist-padding-x, --wishlist-padding-y

   A styled save/favorite toggle: a bare <button> heart that flips between an
   empty outline (unsaved) and a filled accent heart (saved). Interactive
   sibling family to the commerce controls — it owns its OWN root + tokens, it
   does NOT borrow icon-button's or chip's dials. STYLED CONTROL ONLY: the
   toggle is cosmetic (JS flips .is-active + aria-pressed and emits an event);
   persistence / storage / server sync are intentionally out of scope.

   Token-only: the box dimension and the labeled-variant padding pair have no
   semantic token in the scale, so they are component tokens with a literal
   fallback — the same dial pattern icon-button.css / chip.css use. Everything
   else reads a semantic / L1 token. */
.hzo-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wishlist-size, 40px);
    height: var(--wishlist-size, 40px);
    padding: 0;
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-base) ease, border-color var(--transition-base) ease, background var(--transition-base) ease;
}

/* Icon wrapper — centers the heart glyph; the svg is drawn as an outline
   (fill:none; stroke:currentColor set in the markup) so it inherits the
   button's color. */
.hzo-wishlist__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hzo-wishlist__icon > svg {
    display: block;
    width: 60%;
    height: 60%;
}

/* Hover — border firms up to brand, ink darkens to heading (still empty). */
.hzo-wishlist:hover {
    border-color: var(--brand);
    color: var(--text-heading);
}

/* Saved — the one state vocab (.is-active); markup carries aria-pressed="true".
   Accent ink + border, and the heart fills to a solid accent silhouette. */
.hzo-wishlist.is-active {
    color: var(--accent);
    border-color: var(--accent);
}
.hzo-wishlist.is-active .hzo-wishlist__icon > svg {
    fill: currentColor;
}

/* Labeled variant — becomes a pill with trailing text (e.g. "Save"). Width
   relaxes to the content, component-token padding + a small gap. Minimal. */
.hzo-wishlist--labeled {
    width: auto;
    gap: var(--space-2xs);
    padding: var(--wishlist-padding-y, 8px) var(--wishlist-padding-x, 12px);
    border-radius: var(--radius-pill);
}
.hzo-wishlist__label {
    font-size: var(--fs-75);
    line-height: var(--lh-none);
}

/* A11y — required. Focus ring on the button; disabled state. Reduced-motion is
   also handled globally by components/_base/a11y.css. */
.hzo-wishlist:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-wishlist[disabled],
.hzo-wishlist[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-wishlist { transition: none; }
}