/* =============================
* File: assets/css/kcals-badge.css
* ============================= */
/*
* Basic, editable styles for the KCals badge. Feel free to edit or override
* in your theme (via the filter wc_kcals_badge_inline_css or custom CSS).
*/


/* Ensure the product card can position the badge */
.woocommerce ul.products li.product,
ul.products li.product { /* fallback selector */
position: relative;
}


/* The badge itself */
.kcals-badge {
position: absolute;
top: 12px;
left: 18px; /* switch to left:8px if you prefer */
z-index: 3;
display: inline-block;
padding: 6px 10px;
font-size: 12px;
line-height: 1;
font-weight: 600;
border-radius: 999px; /* pill */
background: #f8cc45;; /* soft yellow */
color: #222;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
pointer-events: none; /* avoid blocking clicks on product */
user-select: none;
}


/* Optional: keep text on one line and trim if too long */
.kcals-badge {
white-space: nowrap;
max-width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}