.lumi-glow-mark {
    position: absolute;
    z-index: 3;
    top: 11px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(195, 255, 86, 0.72);
    border-radius: 15px;
    color: #c8ff67;
    background:
        radial-gradient(circle at 65% 28%, rgba(201, 255, 100, 0.17), transparent 35%),
        linear-gradient(145deg, rgba(21, 40, 26, 0.97), rgba(6, 13, 9, 0.97));
    box-shadow:
        0 0 0 4px rgba(188, 255, 82, 0.08),
        0 7px 18px rgba(4, 18, 8, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

.lumi-glow-mark::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(201, 255, 104, 0.16);
    border-radius: 11px;
}

.lumi-glow-mark .fa-moon {
    position: relative;
    z-index: 1;
    font-size: 20px;
    transform: rotate(-16deg);
    filter: drop-shadow(0 0 5px rgba(192, 255, 80, 0.52));
}

.lumi-glow-mark-star {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    color: #fff7b0;
    font-size: 8px;
    filter: drop-shadow(0 0 4px rgba(255, 247, 176, 0.8));
}

.lumi-glow-mark.is-large {
    top: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
}

.lumi-glow-mark.is-large .fa-moon {
    font-size: 24px;
}

.lumi-glow-mark.is-large .lumi-glow-mark-star {
    top: 9px;
    right: 9px;
    font-size: 9px;
}

.lumi-glow-mark.is-compact {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    box-shadow:
        0 0 0 3px rgba(188, 255, 82, 0.07),
        0 5px 14px rgba(4, 18, 8, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lumi-glow-mark.is-compact::before {
    inset: 5px;
    border-radius: 8px;
}

.lumi-glow-mark.is-compact .fa-moon {
    font-size: 16px;
}

.lumi-glow-mark.is-compact .lumi-glow-mark-star {
    top: 6px;
    right: 6px;
    font-size: 7px;
}

/* Єдине оформлення люмінесцентного товару в загальних добірках. */
.csm-card-lumi,
.smcp-lumi-product-card,
.spv2-related-card.is-lumi-product,
.smcp-related-card--lumi {
    border-color: rgba(126, 177, 45, 0.3);
    background: linear-gradient(180deg, #ffffff 0%, #f7faef 100%);
    box-shadow: 0 9px 26px rgba(46, 78, 24, 0.09);
}

.csm-card-lumi:hover,
.smcp-lumi-product-card:hover,
.spv2-related-card.is-lumi-product:hover,
.smcp-related-card--lumi:hover {
    border-color: rgba(112, 165, 32, 0.48);
    box-shadow: 0 14px 34px rgba(46, 78, 24, 0.15);
}

.csm-card-lumi .csm-img,
.smcp-lumi-product-card .smcp-product-img,
.spv2-related-card.is-lumi-product .spv2-related-img,
.smcp-related-card--lumi .smcp-related-media {
    background:
        radial-gradient(circle at 78% 13%, rgba(198, 255, 91, 0.12), transparent 34%),
        #f7f8f3;
}

.csm-card-lumi .csm-badge {
    max-width: calc(100% - 76px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.csm-card-lumi .csm-badge-lumi {
    border: 1px solid rgba(199, 255, 79, 0.34);
    color: #e7ffb3;
    background: rgba(21, 40, 26, 0.94);
}

@media (max-width: 575px) {
    .lumi-glow-mark {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .lumi-glow-mark::before {
        inset: 5px;
        border-radius: 8px;
    }

    .lumi-glow-mark .fa-moon {
        font-size: 17px;
    }

    .lumi-glow-mark-star {
        top: 6px;
        right: 6px;
        font-size: 7px;
    }

    .lumi-glow-mark.is-large {
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .lumi-glow-mark.is-large .fa-moon {
        font-size: 19px;
    }

    .lumi-glow-mark.is-large .lumi-glow-mark-star {
        top: 7px;
        right: 7px;
        font-size: 7px;
    }

    .lumi-glow-mark.is-compact {
        top: 6px;
        right: 6px;
        width: 29px;
        height: 29px;
        border-radius: 9px;
    }

    .lumi-glow-mark.is-compact::before {
        inset: 4px;
        border-radius: 6px;
    }

    .lumi-glow-mark.is-compact .fa-moon {
        font-size: 14px;
    }

    .lumi-glow-mark.is-compact .lumi-glow-mark-star {
        top: 5px;
        right: 5px;
        font-size: 6px;
    }

    .csm-card-lumi .csm-badge {
        max-width: calc(100% - 58px);
    }
}