Hello world!
[wishlist_button]
/* ================================================================
Wishlist / Favorite Button — matches your screenshot style
Paste this in: Bricks > Settings > Custom Code > CSS
OR in your child theme style.css
================================================================ */
/* Base button reset */
.wl-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: 4px 2px;
font-family: inherit;
line-height: 1;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Count number — dark blue/navy like in the screenshot */
.wl-count {
font-size: 15px;
font-weight: 600;
color: #1a2e4a; /* navy — matches the "4" in your screenshot */
min-width: 14px;
text-align: right;
transition: color 0.2s ease;
}
/* Heart SVG */
.wl-heart {
width: 22px;
height: 22px;
fill: none;
stroke: #e8453c; /* red outline — inactive state */
stroke-width: 2px;
transition: fill 0.25s ease, stroke 0.25s ease, transform 0.2s ease;
}
/* Active / filled heart */
.wl-btn.wl-active .wl-heart {
fill: #e8453c;
stroke: #e8453c;
}
.wl-btn.wl-active .wl-count {
color: #e8453c; /* count turns red when active */
}
/* Hover — slight scale */
.wl-btn:hover .wl-heart {
transform: scale(1.15);
}
/* Pop animation on click */
@keyframes wl-pop {
0% { transform: scale(1); }
40% { transform: scale(1.35); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.wl-btn.wl-pop .wl-heart {
animation: wl-pop 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
/* Focus ring for accessibility */
.wl-btn:focus-visible {
outline: 2px solid #e8453c;
outline-offset: 3px;
border-radius: 4px;
}