ul.products li.product {
position: relative;
}
ul.products li.product .yaroo-product-availability-badge {
position: absolute;
top: 1.55rem;
right: 1.55rem;
z-index: 8;
display: inline-flex;
align-items: center;
gap: 0.38rem;
max-width: calc(100% - 3.1rem);
padding: 0.38rem 0.68rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(16, 16, 20, 0.88);
color: #fff;
font-size: 0.72rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
pointer-events: none;
}
ul.products li.product .yaroo-product-availability-badge__dot {
width: 0.48rem;
height: 0.48rem;
border-radius: 999px;
flex: 0 0 auto;
background: currentColor;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
ul.products li.product .yaroo-product-availability-badge--available {
border-color: rgba(82, 220, 132, 0.42);
background: linear-gradient(135deg, rgba(42, 154, 84, 0.94), rgba(25, 112, 61, 0.9));
}
ul.products li.product .yaroo-product-availability-badge--unavailable {
border-color: rgba(255, 122, 0, 0.42);
background: linear-gradient(135deg, rgba(255, 122, 0, 0.95), rgba(164, 70, 0, 0.9));
} .shop-actions-row {
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.shop-actions-row > :not(.yaroo-product-availability-filter):not(.shop-sort-bar) {
order: 10;
}
.yaroo-product-availability-filter {
order: 20;
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 46px;
padding: 0.42rem 0.5rem 0.42rem 0.85rem;
border: 1px solid rgba(255, 122, 0, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.035);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.yaroo-product-availability-filter label {
color: var(--text-soft, #bdbdc7);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.yaroo-product-availability-filter select {
min-height: 36px;
padding: 0 2.2rem 0 0.9rem;
border: 1px solid rgba(255, 122, 0, 0.26);
border-radius: 999px;
background: var(--bg-card, #17171c);
color: var(--text, #fff);
font: inherit;
font-size: 0.88rem;
font-weight: 750;
cursor: pointer;
outline: none;
}
.yaroo-product-availability-filter select:focus-visible {
border-color: rgba(255, 122, 0, 0.72);
box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.14);
} .yaroo-availability-duplicate-filter {
display: none !important;
}
.yaroo-product-availability-filter.yaroo-availability-duplicate-filter {
display: inline-flex !important;
}
.shop-sort-bar {
order: 30;
}
@media (max-width: 680px) {
ul.products li.product .yaroo-product-availability-badge {
top: 1.35rem;
right: 1.35rem;
padding: 0.34rem 0.58rem;
font-size: 0.66rem;
}
.yaroo-product-availability-filter {
width: 100%;
justify-content: space-between;
border-radius: 16px;
}
.yaroo-product-availability-filter select {
flex: 1 1 auto;
min-width: 0;
}
} ul.products li.product .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge {
top: 0.72rem !important;
right: 0.85rem !important;
max-width: calc(100% - 1.7rem) !important;
z-index: 20 !important;
padding: 0.32rem 0.58rem !important;
font-size: 0.68rem !important;
line-height: 1 !important;
}
@media (max-width: 680px) {
ul.products li.product .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge {
top: 0.5rem !important;
right: 0.58rem !important;
max-width: calc(100% - 1.16rem) !important;
padding: 0.26rem 0.42rem !important;
font-size: 0.56rem !important;
letter-spacing: 0.01em !important;
}
ul.products li.product .yaroo-product-availability-badge__dot,
.woocommerce ul.products li.product .yaroo-product-availability-badge__dot,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge__dot {
width: 0.36rem !important;
height: 0.36rem !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
}
} ul.products li.product .yaroo-loop-image-frame,
.woocommerce ul.products li.product .yaroo-loop-image-frame,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame {
overflow: visible !important;
}
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge {
top: -2.05rem !important;
right: 0.18rem !important;
max-width: calc(100% - 0.36rem) !important;
z-index: 30 !important;
padding: 0.3rem 0.56rem !important;
font-size: 0.66rem !important;
line-height: 1 !important;
white-space: nowrap !important;
}
@media (max-width: 680px) {
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge {
top: -1.56rem !important;
right: 0.12rem !important;
max-width: calc(100% - 0.24rem) !important;
padding: 0.22rem 0.36rem !important;
font-size: 0.48rem !important;
letter-spacing: 0 !important;
}
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot {
width: 0.28rem !important;
height: 0.28rem !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
} ul.products li.product .yaroo-loop-image-frame,
.woocommerce ul.products li.product .yaroo-loop-image-frame,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame {
position: relative !important;
overflow: hidden !important;
padding-top: clamp(2.28rem, 2.4vw, 2.62rem) !important;
}
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
ul.products li.product .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge {
top: 0.62rem !important;
right: 0.72rem !important;
left: auto !important;
bottom: auto !important;
z-index: 45 !important;
max-width: calc(100% - 1.44rem) !important;
padding: 0.34rem 0.64rem !important;
border-radius: 999px !important;
font-size: 0.66rem !important;
line-height: 1 !important;
letter-spacing: 0.015em !important;
white-space: nowrap !important;
transform: none !important;
}
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
ul.products li.product .yaroo-product-availability-badge__dot,
.woocommerce ul.products li.product .yaroo-product-availability-badge__dot,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge__dot {
width: 0.42rem !important;
height: 0.42rem !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14) !important;
}
@media (max-width: 680px) {
ul.products li.product .yaroo-loop-image-frame,
.woocommerce ul.products li.product .yaroo-loop-image-frame,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame {
padding-top: 1.78rem !important;
}
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge,
ul.products li.product .yaroo-product-availability-badge,
.woocommerce ul.products li.product .yaroo-product-availability-badge,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge {
top: 0.42rem !important;
right: 0.46rem !important;
max-width: calc(100% - 0.92rem) !important;
padding: 0.2rem 0.34rem !important;
font-size: 0.46rem !important;
letter-spacing: 0 !important;
}
ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
.woocommerce ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
.woocommerce-page ul.products li.product .yaroo-loop-image-frame .yaroo-product-availability-badge__dot,
ul.products li.product .yaroo-product-availability-badge__dot,
.woocommerce ul.products li.product .yaroo-product-availability-badge__dot,
.woocommerce-page ul.products li.product .yaroo-product-availability-badge__dot {
width: 0.26rem !important;
height: 0.26rem !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
}