/* Wishlist plugin — structural styles. Colours come from the active theme's tokens. */
.wl-card-toggle, .wl-product-toggle, .wl-page, .wl-toast {
    --wl-primary: var(--color-theme-primary, var(--theme-primary, #4f46e5));
    --wl-on-primary: var(--color-theme-on-primary, var(--theme-on-primary, #fff));
    --wl-text: var(--color-theme-text, var(--theme-text, #18181b));
    --wl-muted: var(--color-theme-muted, var(--theme-text-muted, #71717a));
    --wl-border: var(--color-theme-border, var(--theme-border, #e4e4e7));
    --wl-surface: var(--color-theme-surface, var(--theme-surface, #fff));
    --wl-heart: #e11d48;
}
.wl-card-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--wl-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); cursor: pointer; transition: color .15s, transform .15s; }
.wl-card-toggle:hover { color: var(--wl-heart); transform: scale(1.06); }
.wl-card-toggle svg, .wl-product-toggle svg { width: 1.125rem; height: 1.125rem; }
.wl-card-toggle.is-active, .wl-product-toggle.is-active { color: var(--wl-heart); }
.wl-card-toggle.is-active svg, .wl-product-toggle.is-active svg { fill: currentColor; }
.wl-product-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: .75rem; padding: .8rem 1.25rem; border: 1px solid var(--wl-border); border-radius: 999px; background: transparent; color: var(--wl-text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.wl-product-toggle:hover { border-color: var(--wl-heart); color: var(--wl-heart); }
.wl-card-toggle:disabled, .wl-product-toggle:disabled { opacity: .6; }
.wl-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 90; padding: .7rem 1.2rem; border-radius: 999px; background: var(--wl-text); color: var(--wl-surface); font-size: .875rem; opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); transition: opacity .2s, transform .2s; }
.wl-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.wl-page { color: var(--wl-text); }
.wl-page * { box-sizing: border-box; }
.wl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.wl-head h2 { margin: 0; font-family: var(--font-title, inherit); font-size: 1.75rem; font-weight: 600; }
.wl-muted { margin: .25rem 0 0; color: var(--wl-muted); }
.wl-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.wl-button { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.2rem; border: 1px solid var(--wl-primary); border-radius: 999px; background: var(--wl-primary); color: var(--wl-on-primary); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.wl-button-ghost { background: transparent; color: var(--wl-text); border-color: var(--wl-border); }
.wl-button:disabled { opacity: .6; cursor: default; }
.wl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (min-width: 1024px) { .wl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
.wl-cell { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.wl-remove { position: absolute; top: .75rem; right: .75rem; z-index: 25; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--wl-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); cursor: pointer; }
.wl-remove:hover { background: #dc2626; color: #fff; }
.wl-note { margin: 0; font-size: .8125rem; color: var(--wl-muted); }
.wl-drop { color: #059669; font-weight: 600; }
.wl-empty { padding: 4rem 1.5rem; border-radius: 1.5rem; background: var(--color-theme-surface-muted, #f4f4f5); text-align: center; }
.wl-empty h3 { margin: 0 0 .5rem; font-size: 1.5rem; font-family: var(--font-title, inherit); }
.wl-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px dashed var(--wl-border); border-radius: 1rem; font-size: .875rem; }
.wl-share input { flex: 1; min-width: 14rem; padding: .55rem .8rem; border: 1px solid var(--wl-border); border-radius: .6rem; background: transparent; color: var(--wl-text); font: inherit; }
.wl-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; cursor: pointer; }
.wl-switch { position: relative; display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid var(--wl-border); border-radius: .875rem; font-size: .9rem; color: var(--wl-text); cursor: pointer; transition: border-color .15s ease; }
.wl-switch:hover { border-color: color-mix(in srgb, var(--wl-primary) 45%, var(--wl-border)); }
.wl-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wl-switch-track { position: relative; flex-shrink: 0; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: var(--wl-border); transition: background-color .2s ease; }
.wl-switch-thumb { position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s ease; }
.wl-switch-input:checked + .wl-switch-track { background: var(--wl-primary); }
.wl-switch-input:checked + .wl-switch-track .wl-switch-thumb { transform: translateX(1.1rem); }
.wl-switch-input:focus-visible + .wl-switch-track { outline: 3px solid var(--wl-primary); outline-offset: 2px; }
.wl-standalone { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
