/* Hickmann Wunschliste
   Farben/Radien kommen aus den Theme-Tokens (Cusio). Die Füllfarbe des aktiven Herzens
   lässt sich über --hk-wl-active ändern. */

:root {
    --hk-wl-active: #cc0000;
}

/* ---------- Herz-Button ---------- */

.hk-wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wp--preset--color--contrast-2, #302c2c);
    border-radius: var(--wp--custom--radius--md, 8px);
    background: transparent;
    color: var(--wp--preset--color--contrast-2, #302c2c);
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hk-wl-btn:hover {
    background-color: var(--wp--preset--color--base-3, #f6f4f2);
}

.hk-wl-btn:focus-visible,
.hk-wl-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Produktseite: quadratisch, gleiche Höhe wie der Warenkorb-Button */
.hk-wl-btn--pdp {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
}

/* Produktkachel: runder Knopf oben rechts auf dem Bild (Bild-Wrapper ist position: relative) */
.hk-wl-btn--card {
    position: absolute;
    top: .625rem;
    right: .625rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-color: transparent;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
}

.hk-wl-btn--card:hover {
    background-color: #fff;
}

/* ---------- Icon: erst Kontur, aktiv gefüllt ---------- */

.hk-wl-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill .15s ease, stroke .15s ease;
}

.hk-wl-btn[aria-pressed="true"] .hk-wl-icon {
    fill: var(--hk-wl-active);
    stroke: var(--hk-wl-active);
    animation: hk-wl-pop .28s ease;
}

.hk-wl-btn--card .hk-wl-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@keyframes hk-wl-pop {
    0%   { transform: scale(.8); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hk-wl-icon { animation: none !important; transition: none; }
}

/* ---------- Header: Herz mit Zähler (analog Mini-Cart) ---------- */

.hk-wl-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 39px;
    min-height: 39px;
    padding: 0 8px;
    border-radius: var(--wp--custom--radius--md, 8px);
    color: inherit;
    text-decoration: none;
}

.hk-wl-link .hk-wl-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.6;
}

.hk-wl-count {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 .3em;
    border-radius: 999px;
    background-color: var(--wp--preset--color--error, #c73636);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.6em;
    text-align: center;
}

.hk-wl-count[hidden] {
    display: none;
}

/* ---------- Wunschliste-Seite ---------- */

.hk-wl-notice {
    margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
    padding: var(--wp--preset--spacing--xs, .75rem) var(--wp--preset--spacing--sm, 1rem);
    border-radius: var(--wp--custom--radius--md, 8px);
    background: var(--wp--preset--color--base-3, #f6f4f2);
    font-size: var(--wp--preset--font-size--sm, .9rem);
}

.hk-wl-notice a {
    text-decoration: underline;
}

.hk-wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--wp--preset--spacing--md, 1.5rem);
}

.hk-wl-empty {
    margin: 0;
    color: var(--wp--preset--color--contrast-4, #787676);
}

.hk-wl-card {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs, .75rem);
}

.hk-wl-card__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--md, 8px);
    background: var(--wp--preset--color--base-3, #f6f4f2);
    aspect-ratio: 1 / 1;
}

.hk-wl-card__img {
    display: block;
    width: 100%;
    height: 100%;
}

.hk-wl-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hk-wl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .25rem;
}

.hk-wl-card__title {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.hk-wl-card__title:hover {
    text-decoration: underline;
}

.hk-wl-card__price {
    font-size: var(--wp--preset--font-size--sm, .9rem);
}

.hk-wl-card__price del {
    color: var(--wp--preset--color--contrast-4, #787676);
}

.hk-wl-card__price ins {
    color: var(--wp--preset--color--sale, #cc0000);
    font-weight: 600;
    text-decoration: none;
}

.hk-wl-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    padding: .625rem 1rem;
    border-radius: var(--wp--custom--radius--md, 8px);
    background: var(--wp--preset--color--contrast-2, #302c2c);
    color: #fff;
    font-size: var(--wp--preset--font-size--sm, .9rem);
    font-weight: 500;
    text-decoration: none;
}

.hk-wl-card__cta:hover {
    opacity: .88;
}

.hk-wl-card__cta--off {
    background: var(--wp--preset--color--base-4, #e6e4e2);
    color: var(--wp--preset--color--contrast-4, #787676);
    cursor: default;
}

.hk-wl-card__cta--off:hover {
    opacity: 1;
}

/* ---------- Editor-Platzhalter ---------- */

.hk-wl-editor {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px dashed currentColor;
    border-radius: 8px;
    font-size: .875rem;
}