/* ── Wishlist button – Basisstil ────────────────────────────────── */
.wcco-wishlist-btn {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: calc(var(--text-fs) - 2px);
	gap: 6px;
}
.wcco-wishlist-open:has(.wcco-wishlist-count[data-count="0"]) .wcco-wishlist-count {
	opacity: 0;
	width: 0;
}

/* ── Shortcode-Variante (Produktseite) ──────────────────────────── */
.wcco-wishlist-btn:not(.wcco-wishlist-btn--loop) {
	background: none;
	border: none;
	padding: 8px 14px;
	border-radius: 3px;
	color: var(--hs-darkblue);
	transition: all ease-in-out .3s;

	.bookmark-icon {
		width: 25px;
		height: 25px;
		fill: transparent;
		stroke: currentColor;s
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: fill .2s;
	}

    &:hover,
	&.wcco-wishlist-btn--active{
		background: var(--hs-darkblue);
        color: #fff;

        span {
            color: #fff;
        }
		.bookmark-icon {
			fill: currentColor;
		}
	}
}

/* ── Menu link / count badge ────────────────────────────────────── */
.wcco-wishlist-count {
	aspect-ratio: 1;
	background-color: var(--hs-darkblue);
	border-radius: 100%;
	color: #fff;
	font-size: clamp(12px,calc(var(--text-fs) - 6px) , 14px);
	height: 22px;
	transform: translateY(50%);
	text-align: center;
	width: auto;
}

/* ── Wishlist Popup content ─────────────────────────────────────── */
.wcco-wishlist-content {
    padding: clamp(10px, 2vw, 25px);

    .wcco-wishlist-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        list-style: none;
        margin: 0;
        padding: 0;

        .wcco-wishlist-item {
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
            display: grid;
            gap: 14px;
            grid-template-columns: clamp(100px, 20vw, 150px) auto 50px;
            padding: 10px;
            position: relative;

            &:last-child {
                border-bottom: none;
            }
            .wcco-wishlist-item__image img {
                aspect-ratio: 1;
                display: block;
                object-fit: cover;
                width: clamp(100px, 20vw, 150px);
            }
            .wcco-wishlist-item__info {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;

                .wcco-wishlist-item__title {
                    color: inherit;
					hyphens: auto;
                    font-weight: 600;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
                .wcco-wishlist-item__description {
					hyphens: auto;
                    font-size: clamp(12px, calc(var(--text-fs) - 4px), 18px);
                }
                .wcco-wishlist-item__sku {
                    color: var(--hs-gray);
                    font-size: clamp(12px, calc(var(--text-fs) - 4px), 18px);
                }
            }
        }
    }
}

/* ── Popup-Item: Aktions-Buttons (Vergleich + Entfernen) oben rechts ── */
.wcco-wishlist-item__actions {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	top: clamp(5px, 2vw, 15px);
	right: clamp(5px, 2vw, 15px);
	z-index: 0;

	.wcco-wishlist-btn--loop {
		position: static;
	}
}

/* ── Loop-Variante: Icon-only Button in der Shop-Übersicht ──────── */
.wcco-wishlist-btn--loop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
    border: 0;
	cursor: pointer;
    position: absolute;
    top: clamp(5px, 2vw, 15px);
    right: clamp(5px, 2vw, 15px);
    z-index: +1;

    &.wcco-wishlist-btn .bookmark-icon {
        width: 100%;
        height: 100%;
        fill: transparent;
        stroke: var(--hs-darkblue);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: all 0.3s ease-in-out;
    }
    &.wcco-wishlist-btn:hover .bookmark-icon,
    &.wcco-wishlist-btn--active .bookmark-icon {
        fill: var(--hs-darkblue);
    }
    &.wcco-wishlist-btn:hover .bookmark-icon {
		opacity: .8;
	}
}

/* ── Footer-Button-Variante (wishlist-spezifisch) ────────────────── */
.wcco-btn-clear-wishlist:hover {
    background: #fef2f2;
    border-color: #c00;
    color: #c00;
}

/* ── Wishlist Popup: Responsive ──────────────────────────────────── */
@media all and (max-width: 500px) {
	.wcco-wishlist-content {
		.wcco-wishlist-list {
			.wcco-wishlist-item {
				grid-template-columns: clamp(100px, 20vw, 150px) auto;
      			grid-template-rows: repeat(2, auto);

				.wcco-wishlist-item__image {
					grid-area: 1 / 1 / 2 / 2;
				}
				.wcco-wishlist-item__info {
					grid-area: 1 / 2 / 3 / 3;
				}
				.wcco-wishlist-item__actions {
					flex-direction: row;
					grid-area: 2 / 1 / 3 / 2;
					justify-content: center;
				}
			}
		}
	}
}