ul.products li.product:has(.fbm-slot) { position: relative; }
body ul.products li.product:is(.sale,.outofstock):has(.fbm-slot)::before { content: none !important; display: none !important; }
body ul.products li.product:has(.fbm-slot):has(.onsale) span.onsale { display: none !important; }
.fbm-slot { position: absolute; top: 12px; right: 12px; z-index: 20; pointer-events: none; max-width: calc(100% - 24px); }
.fbm-slot:empty { display: none; }
.fbm-badge { display: inline-block; box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; padding: 7px 11px; border: 1px solid var(--fbm-fg); color: var(--fbm-fg); background: var(--fbm-bg); font: 800 11px/1.15 system-ui,sans-serif; letter-spacing: .4px; }
.fbm-rounded,.fbm-outline { border-radius: 9px; }
.fbm-pill { border-radius: 99px; }
.fbm-outline { background: transparent; }
.fbm-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,245px),1fr)); gap: 16px; max-width: 1100px; margin-top: 24px; }
.fbm-card { padding: 16px; border: 1px solid #ccd0d4; background: white; border-radius: 8px; }
.fbm-card legend { font-size: 16px; font-weight: 600; }
.fbm-card label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
.fbm-card input[type=text] { max-width: 68%; }
.fbm-sample { padding: 18px; background: #f1f3f4; text-align: right; }
@media(max-width:768px) { .fbm-slot { top: 8px; right: 8px; } .fbm-slot .fbm-badge { font-size: 10px; padding: 5px 8px; } }
.fbm-slot { left: 12px; right: 12px; max-width: none; display: flex; justify-content: space-between; gap: 6px; }
.fbm-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(50% - 3px); }
.fbm-stack-right { align-items: flex-end; margin-left: auto; }
.fbm-stack:empty { display: none; }
.fbm-stack:only-child { max-width: 100%; }
.fbm-card label { flex-wrap: wrap; }
.fbm-card select[multiple] { width: 100%; max-width: 100%; }
@media(max-width:768px) { .fbm-slot { left: 8px; } }

/* Shape padding is kept inside the silhouette, including on mobile. */
.fbm-badge.fbm-tag {
    border: 0;
    border-radius: 0;
    padding: 9px 19px 9px 11px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.fbm-badge.fbm-ribbon {
    border: 0;
    border-radius: 0;
    padding: 9px 17px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}
.fbm-badge.fbm-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    aspect-ratio: 1;
    padding: 13px;
    border-radius: 50%;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.15;
}
@media(max-width:768px) {
    .fbm-slot .fbm-badge.fbm-tag { padding: 7px 15px 7px 8px; }
    .fbm-slot .fbm-badge.fbm-ribbon { padding: 7px 13px; }
    .fbm-slot .fbm-badge.fbm-circle { width: 60px; padding: 10px; font-size: 9px; }
}

/* Decorative shapes use the badge's configured colors. */
.fbm-badge:is(.fbm-tab,.fbm-shield,.fbm-pennant,.fbm-scroll,.fbm-wave,.fbm-flag) {
    position: relative;
    isolation: isolate;
    border: 0;
    text-align: center;
    background-color: var(--fbm-bg);
    background-image: linear-gradient(180deg, rgb(255 255 255 / 24%), transparent 9px);
}
.fbm-badge:is(.fbm-tab,.fbm-shield,.fbm-pennant) {
    width: 74px;
    min-height: 60px;
    padding: 17px 9px;
}
.fbm-badge.fbm-tab {
    border-radius: 3px 3px 50% 50% / 3px 3px 25px 25px;
    box-shadow: inset 0 5px 0 rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 16%);
}
.fbm-badge.fbm-shield {
    padding-bottom: 22px;
    clip-path: polygon(0 0,100% 0,100% calc(100% - 15px),50% 100%,0 calc(100% - 15px));
}
.fbm-badge.fbm-pennant {
    padding-bottom: 22px;
    clip-path: polygon(0 0,100% 0,100% 100%,50% calc(100% - 13px),0 100%);
}
.fbm-badge.fbm-scroll {
    padding: 14px 13px 20px;
    border-radius: 7px 7px 12px 12px;
    box-shadow: inset 4px 0 6px rgb(0 0 0 / 15%);
}
.fbm-badge.fbm-scroll::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 0;
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(180deg,rgb(255 255 255 / 45%),transparent 45%,rgb(0 0 0 / 28%)),var(--fbm-bg);
}
.fbm-badge.fbm-wave {
    padding: 13px 14px;
    border-radius: 50% 15% 50% 15% / 14px 5px 14px 5px;
    background-image: linear-gradient(100deg,rgb(0 0 0 / 20%),transparent 25%,rgb(255 255 255 / 18%) 50%,transparent 75%,rgb(0 0 0 / 22%));
}
.fbm-badge.fbm-flag {
    padding: 11px 12px 11px 21px;
    clip-path: polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
    box-shadow: inset -6px 0 0 rgb(0 0 0 / 22%);
}
@media(max-width:768px) {
    .fbm-slot .fbm-badge:is(.fbm-tab,.fbm-shield,.fbm-pennant) { width: 64px; min-height: 52px; padding: 12px 7px 20px; }
    .fbm-slot .fbm-badge.fbm-scroll { padding: 10px 9px 17px; }
    .fbm-slot .fbm-badge.fbm-wave { padding: 11px 10px; }
    .fbm-slot .fbm-badge.fbm-flag { padding: 8px 9px 8px 17px; }
}