.kbb-origin-badge {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    line-height: 0;
}

.kbb-origin-badge img {
    display: block;
    width: 100%;
    height: auto;
}

.kbb-origin-badge--shape-round { width: 112px; }
.kbb-origin-badge--shape-rectangular { width: 320px; }
.kbb-origin-badge--inline { margin-block: 16px; }

/* Managed factory-hero placements. */
.kbb-origin-badges-enabled .kbb-v2-hero-media,
.kbb-origin-badges-enabled .kbb-about-hero-media {
    position: relative;
}

.kbb-origin-badge--hero {
    position: absolute;
    z-index: 4;
    bottom: clamp(20px, 2vw, 34px);
    left: clamp(20px, 2vw, 34px);
    filter: drop-shadow(0 10px 22px rgba(23, 42, 51, 0.2));
    pointer-events: none;
}

.kbb-origin-badge--hero.kbb-origin-badge--shape-round {
    width: clamp(112px, 8vw, 136px);
}

.kbb-origin-badge--hero.kbb-origin-badge--shape-rectangular {
    width: clamp(260px, 24vw, 350px);
}

/* Managed product identity placements.
 *
 * Blocksy provides a `top` value for its optional sticky product summary. The
 * summary is normally statically positioned, so that value is inert. Keep it
 * that way: making the summary relative would activate the offset and create a
 * large blank area above the product title. The hero supplies the positioning
 * context for the round badge instead.
 */
.kbb-origin-badges-enabled.kbb-trade-product-page .kbb-pp-hero {
    position: relative;
}

.kbb-origin-badges-enabled.kbb-trade-product-page .summary.entry-summary {
    position: static;
}

.kbb-origin-badge--product.kbb-origin-badge--shape-round {
    position: absolute;
    z-index: 2;
    top: clamp(22px, 3vw, 52px);
    right: 0;
    width: clamp(92px, 7.2vw, 108px);
}

.kbb-origin-badge--product.kbb-origin-badge--shape-rectangular {
    width: min(290px, 100%);
    margin: 0 0 20px auto;
}

.summary.entry-summary > .kbb-origin-badge--shape-round ~ .kbb-pp-eyebrow,
.summary.entry-summary > .kbb-origin-badge--shape-round ~ .kbb-pp-title {
    padding-right: 128px;
}

/* Keep the longest About hero word inside its blue column. */
@media (min-width: 1200px) {
    .kbb-about-2026 .kbb-about-hero h1 {
        font-size: clamp(3rem, 4.3vw, 4.9rem) !important;
    }
}

@media (max-width: 1180px) {
    .kbb-origin-badge--hero.kbb-origin-badge--shape-round { width: 112px; }
    .kbb-origin-badge--hero.kbb-origin-badge--shape-rectangular { width: 270px; }
    .kbb-origin-badge--product.kbb-origin-badge--shape-round { width: 92px; }

    .summary.entry-summary > .kbb-origin-badge--shape-round ~ .kbb-pp-eyebrow,
    .summary.entry-summary > .kbb-origin-badge--shape-round ~ .kbb-pp-title {
        padding-right: 108px;
    }
}

@media (max-width: 999px) {
    .kbb-origin-badge--hero {
        bottom: 24px;
        left: 24px;
    }
}

@media (max-width: 689px) {
    .kbb-origin-badge--hero.kbb-origin-badge--shape-round {
        top: 18px;
        right: 18px;
        bottom: auto;
        left: auto;
        width: 100px;
    }

    .kbb-origin-badge--hero.kbb-origin-badge--shape-rectangular {
        right: 18px;
        bottom: 18px;
        left: 18px;
        width: auto;
        max-width: 280px;
    }

    .kbb-origin-badge--product.kbb-origin-badge--shape-round,
    .kbb-origin-badge--product.kbb-origin-badge--shape-rectangular {
        position: static;
        width: min(240px, 100%);
        margin: 0 0 18px auto;
    }

    .kbb-origin-badge--product.kbb-origin-badge--shape-round { width: 100px; }

    .summary.entry-summary > .kbb-origin-badge--shape-round ~ .kbb-pp-eyebrow,
    .summary.entry-summary > .kbb-origin-badge--shape-round ~ .kbb-pp-title {
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kbb-origin-badge { transition: none; }
}