.campaign-product-card.border-lightgray {
    --product-gift-size: clamp(2.6rem, 4vw, 3.25rem);
    --product-ribbon-height: 2.2rem;
    border-color: #ead6d8;
}

.campaign-product-gallery.border-lightgray {
    --product-gift-size: clamp(3.2rem, 5vw, 4.75rem);
    --product-ribbon-height: 2.65rem;
    border: 0;
}

.campaign-product-card::before {
    content: "";
    position: absolute;
    top: .375rem;
    left: .375rem;
    z-index: 1;
    width: var(--product-gift-size);
    height: var(--product-gift-size);
    background: url("../category/campaign-gift.svg") center / contain no-repeat;
    pointer-events: none;
}

.campaign-product-gallery::before {
    top: calc(var(--product-ribbon-height) + .5rem);
}

.campaign-product-card .campaign-product-ribbon {
    --product-ribbon-angle: 135deg;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    height: var(--product-ribbon-height);
    max-width: calc(100% - var(--product-gift-size) - .625rem);
    color: #fff;
    text-align: center;
    font-weight: 700;
    pointer-events: none;
}

.campaign-product-gallery .campaign-product-ribbon {
    --product-ribbon-angle: 225deg;
    right: auto;
    left: 0;
    flex-direction: row-reverse;
}

.campaign-product-card .campaign-product-ribbon-label {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: .2rem .55rem .2rem .8rem;
    background: linear-gradient(var(--product-ribbon-angle), #353136, #121113);
    clip-path: polygon(0 0, 100% 0, 100% 100%, .6rem 100%);
    font-size: clamp(.65rem, .8vw, .85rem);
    font-style: italic;
    line-height: 1.05;
    text-transform: uppercase;
}

.campaign-product-card .campaign-product-ribbon-label > span {
    display: -webkit-box;
    max-width: 6.25rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.campaign-product-gallery .campaign-product-ribbon-label {
    padding: .2rem .8rem .2rem .55rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
}

.campaign-product-card .campaign-product-ribbon-percent {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: -.5rem;
    padding: 0 .45rem 0 .65rem;
    background: linear-gradient(var(--product-ribbon-angle), #d21e2a, #a40816);
    clip-path: polygon(.4rem 0, 100% 0, 100% 100%, 0 100%);
    font-size: clamp(.85rem, 1.05vw, 1.1rem);
}

.campaign-product-gallery .campaign-product-ribbon-percent {
    margin-right: -.5rem;
    margin-left: 0;
    padding: 0 .65rem 0 .45rem;
    clip-path: polygon(0 0, calc(100% - .4rem) 0, 100% 100%, 0 100%);
}

.campaign-product-card .campaign-product-actions {
    top: var(--product-ribbon-height);
}

.campaign-product-price,
.campaign-product-brand {
    color: #a40816;
}

.campaign-product-stock {
    background: linear-gradient(90deg, #49484c, #c21a27);
    color: #fff4f5;
}