.woohoo .woohoo-wishlist-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}
.woohoo .woohoo-wishlist-icon a[aria-busy="true"] { opacity: .55; }
/* A ring spins over the heart icon while the click is in flight, as
 * CommerceKit's ckit-rotate does. Scoped to the two icon layouts (each
 * already positions its <em> absolutely) so a generic selector cannot
 * override that positioning. */
@keyframes woohoo-wishlist-spin { 100% { transform: rotate(360deg); } }
.woohoo .woohoo-wishlist-icon.mini a[aria-busy="true"] em::after,
.single-product .summary .woohoo-wishlist-icon.full a[aria-busy="true"] em::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-left-color: #fff;
    border-radius: 50%;
    animation: woohoo-wishlist-spin 450ms linear infinite;
}
.woohoo .woohoo-wishlist-icon.mini a[aria-busy="true"] em::after {
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
}
.single-product .summary .woohoo-wishlist-icon.full a[aria-busy="true"] em::after {
    top: -2px;
    left: -24px;
}
.woohoo .woohoo-wishlist-icon.full { margin: 0 0 15px; }
.woohoo .woohoo-wishlist-icon.full a { justify-content: flex-start; }
.single-product .summary .woohoo-wishlist-icon.full {
    display: block;
    clear: both;
    float: none;
    width: auto;
    /* Padding, not margin: live's grid wrapper around this row keeps the
     * 15px from collapsing into the next block's top margin. */
    margin: 0 0 0 22px;
    padding-bottom: 15px;
}
.single-product .summary .woohoo-wishlist-icon.full a {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: auto;
    gap: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 19.5px;
    color: #111;
}
.single-product .summary .woohoo-wishlist-icon.full em {
    position: absolute;
    top: 1px;
    left: 0;
    width: 0;
    height: 0;
    flex: 0 0 0;
}
.single-product .summary .woohoo-wishlist-icon.full em::before {
    position: absolute;
    top: 0;
    left: -22px;
    background: #333;
}
.woohoo .woohoo-wishlist-icon.full a:hover span { text-decoration: underline; }
.woohoo .woohoo-wishlist-icon em { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; }
.woohoo .woohoo-wishlist-icon em::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('../icons/heart.svg?v=0.1.90') center/contain no-repeat;
}
.woohoo .woohoo-wishlist-icon .cg-wishlist-t::before { background-color: #ec008c; }
.woohoo ul.products li.product { position: relative; }
.woohoo ul.products li.product > .woohoo-wishlist-icon.mini {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
}
.woohoo .woohoo-wishlist-icon.mini a {
	position: relative;
	gap: 0;
	padding: 0;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
}
.woohoo .woohoo-wishlist-icon.mini a span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.woohoo .woohoo-wishlist-icon.mini em {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: 0;
	transform: translate(-50%, -50%);
}
.woohoo .woohoo-remove-wishlist.wsl-remove { font-size: 0; }
.woohoo .woohoo-remove-wishlist.wsl-remove::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('../icons/x.svg') center/contain no-repeat;
}

/* Stock meter presentation. */
.woohoo .woohoo-stock-bar {
    display: inline-block;
    position: relative;
    width: 45%;
    margin-bottom: 15px;
    vertical-align: top;
    line-height: 1.25;
}
.woohoo .woohoo-stock-bar[hidden] { display: none; }
.woohoo .woohoo-stock-bar > .title { font-size: 13px; }
.woohoo .woohoo-stock-bar .progress-bar {
    position: relative;
    float: none;
    width: 100%;
    height: 10px;
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    border-radius: 5px;
    background-color: #e2e2e2;
    transition: all 0.4s ease;
}
.woohoo .woohoo-stock-bar .progress-bar > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 3s ease;
}
/* The bar renders full width, then product.js's inventory observer drops
 * `full-bar` on the shopper's first interaction or intersection, so the span
 * drains down to its true width over the transition above. */
.woohoo .woohoo-stock-bar .progress-bar.full-bar > span {
    width: 100% !important;
}
@media (max-width: 500px) {
    .woohoo .woohoo-stock-bar {
        display: block;
        width: 100%;
        margin-top: 20px;
        border: 0;
    }
}
@media (max-width: 770px) {
    .woohoo :is(section.related.products, section.upsells.products, div.cross-sells) ul.products li.product > .woohoo-wishlist-icon.mini {
        top: 3px;
        right: 3px;
        width: 44px;
        height: 44px;
    }
    .woohoo :is(section.related.products, section.upsells.products, div.cross-sells) ul.products li.product > .woohoo-wishlist-icon.mini a {
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 600px) {
    .woohoo ul.products li.product > .woohoo-wishlist-icon.mini { top: 10px; right: 10px; }
}
@media (min-width: 993px) {
    .woohoo ul.products li.product > .woohoo-wishlist-icon.mini { top: 15px; right: 30px; opacity: 0; }
    .woohoo ul.products li.product:hover > .woohoo-wishlist-icon.mini,
    .woohoo ul.products li.product:focus-within > .woohoo-wishlist-icon.mini { opacity: 1; }
}