/**
 * Kokken — Product loop badges (NEW + Out-of-stock)
 * Φορτώνεται site-wide όπου εμφανίζονται προϊόντα (shop, κατηγορίες, αρχική,
 * related, search). Μοντέρνα pill badges — NEW πάνω-αριστερά (πράσινο),
 * Εξαντλήθηκε πάνω-δεξιά (κόκκινο) ώστε να μην επικαλύπτονται.
 * Υψηλό specificity (ul.products li.product …) για να μην παρακάμπτεται.
 */

ul.products li.product {
    position: relative;
}

ul.products li.product .kk-loop-new,
ul.products li.product .kk-loop-oos {
    position: absolute;
    top: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    pointer-events: none;
    white-space: nowrap;
}

/* ── NEW (πάνω-αριστερά, πράσινο) ── */
ul.products li.product .kk-loop-new {
    left: 12px;
    background: linear-gradient(135deg, #1ea257, #127a3f);
}

/* ── Εξαντλήθηκε (πάνω-δεξιά, κόκκινο) ── */
ul.products li.product .kk-loop-oos {
    right: 12px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* ══════════════════════════════════════════════════════════
   ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΟΣ — overlay badges πάνω στην εικόνα
   ══════════════════════════════════════════════════════════ */
.single-product div.product {
    position: relative;
}

.single-product div.product > .kk-single-new,
.single-product div.product > .kk-single-oos {
    position: absolute;
    top: 16px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    pointer-events: none;
    white-space: nowrap;
}
.single-product div.product > .kk-single-new {
    left: 16px;
    background: linear-gradient(135deg, #1ea257, #127a3f);
}
.single-product div.product > .kk-single-oos {
    right: 16px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}