/* Centered homepage category badges matching the approved mockup. */

.ior-premium-category-card {
    --category-badge-bg: #14553b;
    --category-badge-fg: #f4d66f;
    --category-accent: #2d764c;
    border-top: 0;
    overflow: visible;
    position: relative;
}

.ior-premium-category-card--coffee {
    --category-badge-bg: #14553b;
    --category-badge-fg: #f3cf58;
    --category-accent: #28744c;
}

.ior-premium-category-card--spices {
    --category-badge-bg: #14553b;
    --category-badge-fg: #f3cf58;
    --category-accent: #28744c;
}

.ior-premium-category-card--wood {
    --category-badge-bg: #14553b;
    --category-badge-fg: #f3cf58;
    --category-accent: #28744c;
}

.ior-premium-category-card--produce {
    --category-badge-bg: #14553b;
    --category-badge-fg: #f3cf58;
    --category-accent: #28744c;
}

.ior-premium-category-card__image {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    position: relative;
}

.ior-premium-category-card__image::after {
    background: linear-gradient(180deg, rgba(4, 18, 43, 0.02) 44%, rgba(4, 18, 43, 0.3) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.ior-premium-category-card__badge {
    align-items: center;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.13), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--category-badge-bg) 90%, #fff 10%), var(--category-badge-bg));
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(4, 18, 43, 0.24);
    color: var(--category-badge-fg);
    display: flex;
    height: 58px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 164px;
    transform: translate(-50%, -50%);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    width: 58px;
    z-index: 5;
}

.ior-premium-category-card__badge::after {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    content: "";
    inset: 5px;
    pointer-events: none;
    position: absolute;
}

.ior-premium-category-card__badge svg {
    height: 25px;
    position: relative;
    stroke-width: 2.1;
    width: 25px;
    z-index: 1;
}

.ior-premium-category-card:hover .ior-premium-category-card__badge {
    box-shadow: 0 16px 34px rgba(4, 18, 43, 0.32);
    transform: translate(-50%, -54%) scale(1.04);
}

.ior-premium-category-card__body {
    padding-top: 38px;
}

.ior-premium-category-card h3::after {
    display: none;
}

@media (max-width: 1199.98px) {
    .ior-premium-category-card__badge {
        top: 174px;
    }
}

@media (max-width: 767.98px) {
    .ior-premium-category-card__badge {
        height: 56px;
        top: 184px;
        width: 56px;
    }

    .ior-premium-category-card__badge svg {
        height: 24px;
        width: 24px;
    }
}
