/* ============================================================
   Kafraty Badge  –  badge.css  v1.1.0
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   SHOP / LOOP  –  Card badge (top ribbon)
   ──────────────────────────────────────────────────────────── */

/*
 * HOW IT WORKS (no JS needed):
 *  1. PHP post_class filter adds  .kaf-badge  and  .kaf-badge-{color}  to the <li>
 *  2. PHP wp_footer injects a <style> with  li.post-{id} { --kaf-badge-text:"…"; }
 *  3. CSS uses descendant selectors  li.kaf-badge div.product-wrapper  so the
 *     classes on the <li> drive the badge on the inner wrapper automatically.
 */

div.product-wrapper {
    position: relative;
}

/* Badge ribbon rendered via ::before on the inner wrapper.
   Matches both when the class is on the wrapper itself
   (`.kaf-badge.product-wrapper`) and when it is on an outer
   `li` (WoodMart) — `li.kaf-badge div.product-wrapper`. */
.kaf-badge.product-wrapper::before,
li.kaf-badge div.product-wrapper::before {
    content: var(--kaf-badge-text, "Badge");
    position: absolute;
    top: -35px;
    width: 100%;
    color: white;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    transition: all 0.3s ease;
    z-index: 10;
    overflow: hidden;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ── Color variants ── */
.kaf-badge.kaf-badge-red.product-wrapper::before,
li.kaf-badge.kaf-badge-red    div.product-wrapper::before { background: #D3020E; }
.kaf-badge.kaf-badge-blue.product-wrapper::before,
li.kaf-badge.kaf-badge-blue   div.product-wrapper::before { background: #0073aa; }
.kaf-badge.kaf-badge-green.product-wrapper::before,
li.kaf-badge.kaf-badge-green  div.product-wrapper::before { background: #4CAF50; }
.kaf-badge.kaf-badge-yellow.product-wrapper::before,
li.kaf-badge.kaf-badge-yellow div.product-wrapper::before { background: #FFC107; color: #333; }
.kaf-badge.kaf-badge-purple.product-wrapper::before,
li.kaf-badge.kaf-badge-purple div.product-wrapper::before { background: #9C27B0; }
.kaf-badge.kaf-badge-orange.product-wrapper::before,
li.kaf-badge.kaf-badge-orange div.product-wrapper::before { background: #FF9800; }
.kaf-badge.kaf-badge-pink.product-wrapper::before,
li.kaf-badge.kaf-badge-pink   div.product-wrapper::before { background: #E91E63; }
.kaf-badge.kaf-badge-custom.product-wrapper::before,
li.kaf-badge.kaf-badge-custom div.product-wrapper::before { background: #D3020E; }

/* ── Hover glow ── */
.kaf-badge.kaf-badge-red.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-red:hover    div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(211,2,14,.6), 0 0 20px rgba(211,2,14,.4), 0 0 30px rgba(211,2,14,.2);
}
.kaf-badge.kaf-badge-blue.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-blue:hover   div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(0,115,170,.6), 0 0 20px rgba(0,115,170,.4), 0 0 30px rgba(0,115,170,.2);
}
.kaf-badge.kaf-badge-green.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-green:hover  div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(76,175,80,.6), 0 0 20px rgba(76,175,80,.4), 0 0 30px rgba(76,175,80,.2);
}
.kaf-badge.kaf-badge-yellow.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-yellow:hover div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(255,193,7,.6), 0 0 20px rgba(255,193,7,.4), 0 0 30px rgba(255,193,7,.2);
}
.kaf-badge.kaf-badge-purple.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-purple:hover div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(156,39,176,.6), 0 0 20px rgba(156,39,176,.4), 0 0 30px rgba(156,39,176,.2);
}
.kaf-badge.kaf-badge-orange.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-orange:hover div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(255,152,0,.6), 0 0 20px rgba(255,152,0,.4), 0 0 30px rgba(255,152,0,.2);
}
.kaf-badge.kaf-badge-pink.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-pink:hover   div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(233,30,99,.6), 0 0 20px rgba(233,30,99,.4), 0 0 30px rgba(233,30,99,.2);
}
.kaf-badge.kaf-badge-custom.product-wrapper:hover::before,
li.kaf-badge.kaf-badge-custom:hover div.product-wrapper::before {
    box-shadow: 0 0 10px rgba(211,2,14,.6), 0 0 20px rgba(211,2,14,.4), 0 0 30px rgba(211,2,14,.2);
}

/* ── Shimmer sweep ── */
.kaf-badge.product-wrapper::after,
li.kaf-badge div.product-wrapper::after {
    content: "";
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(
        90deg,
        transparent 20%,
        rgba(255,255,255,.4) 50%,
        transparent 80%
    );
    transform: translateX(-100%) rotate(15deg);
    z-index: 11;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.kaf-badge.product-wrapper:hover::after,
li.kaf-badge:hover div.product-wrapper::after {
    opacity: 1;
    animation: kaf-shimmer 1.5s ease-in-out forwards;
}

@keyframes kaf-shimmer {
    0%   { transform: translateX(-100%) rotate(15deg); }
    50%  { transform: translateX(100%)  rotate(15deg); }
    100% { transform: translateX(100%)  rotate(15deg); opacity: 0; }
}

/* ── Card lift on hover ── */
.kaf-badge.product-wrapper:hover,
li.kaf-badge:hover div.product-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .kaf-badge.product-wrapper::before,
    li.kaf-badge div.product-wrapper::before {
        font-size: 13px;
        padding: 8px;
        top: -30px;
    }
    .kaf-badge.product-wrapper::after,
    li.kaf-badge div.product-wrapper::after {
        top: -30px;
        height: calc(100% + 30px);
    }
}


/* ────────────────────────────────────────────────────────────
   SINGLE PRODUCT PAGE  –  Icons bar (below title)
   ──────────────────────────────────────────────────────────── */

/* ── Container ── */
.kaf-product-icons-bar {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin: 10px 0 20px;
    padding: 16px 0;
    order:3;
}

/* ── Single icon tile ── */
.kaf-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
    flex: 0 0 auto;
    position: relative;   /* needed for the ::after overlay */
}

/* Transparent overlay — sits above the image, blocks right-click & drag */
.kaf-icon-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;   /* covers the image area only, not the label */
    z-index: 2;
    cursor: default;
}

/* ── Icon image ── */
.kaf-icon-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;

    /* Block pointer events — right-click hits the ::after overlay instead */
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.kaf-icon-item:hover .kaf-icon-img {
    transform: translateY(-3px);
}

/* ── Label ── */
.kaf-icon-label {
    font-size: 12px;
    line-height: 1.35;
    color: #555;
    text-align: center;
    max-width: 80px;
    word-break: break-word;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
    .kaf-icon-img { width: 64px; height: 64px; }
    .kaf-icon-item::after { height: 64px; }
    .kaf-product-icons-bar { gap: 16px; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .kaf-product-icons-bar { gap: 14px; padding: 12px 0; }
    .kaf-icon-img { width: 62px; height: 62px; }
    .kaf-icon-item::after { height: 62px; }
    .kaf-icon-label { font-size: 11px; max-width: 60px; }
}

/* ── Small mobile ── */
@media (max-width: 380px) {
    .kaf-icon-img { width: 44px; height: 44px; }
    .kaf-icon-item::after { height: 44px; }
    .kaf-product-icons-bar { gap: 12px; }
}