.apparel-banner {
    position: relative;
    width: 100%;
    min-height: clamp(260px, 38vw, 520px);
    overflow: hidden;
    isolation: isolate;
    background: var(--apparel-ink, #111827);
}

.apparel-banner__image {
    position: absolute;
    inset: 0;
    background-image: var(--banner-image);
    background-size: cover;
    background-position: var(--banner-position, center center);
    background-repeat: no-repeat;
    transform: scale(1.01);
}

.apparel-banner__overlay {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 5vw, 72px) 16px;
    text-align: center;
}

.apparel-banner__overlay--dark {
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.52) );
}

.apparel-banner__overlay--light {
    background: rgba(255, 255, 255, 0.08);
}

.apparel-banner__title {
    max-width: min(100%, 1000px);
    margin-bottom: clamp(6px, 1.6vw, 16px);
    color: var(--apparel-surface, var(--apparel-surface));
    font-family: "Bevan", serif;
    font-size: clamp(1.45rem, 6vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: clamp(0.015em, 0.6vw, 0.045em);
    text-transform: uppercase;
    text-wrap: balance;
}

.apparel-banner__subtitle {
    max-width: min(100%, 760px);
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(0.85rem, 2.2vw, 1.12rem);
    font-weight: 700;
    line-height: 1.45;
    text-wrap: balance;
}

.apparel-banner__overlay--light .apparel-banner__title {
    color: var(--apparel-green-dark, var(--apparel-green-dark));
}

.apparel-banner__overlay--light .apparel-banner__subtitle {
    color: var(--apparel-ink, #111827);
}

.apparel-banner__title {
    max-width: min(100%, 1000px);
    margin-bottom: clamp(6px, 1.6vw, 16px);
    font-family: "Bevan", serif;
    font-size: clamp(1.45rem, 6vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: clamp(0.015em, 0.6vw, 0.045em);
    text-transform: uppercase;
    text-wrap: balance;
}

.apparel-banner__subtitle {
    max-width: min(100%, 760px);
    font-size: clamp(0.85rem, 2.2vw, 1.12rem);
    font-weight: 700;
    line-height: 1.45;
    text-wrap: balance;
}

@media (max-width: 760px) {
    .apparel-banner--compact-mobile {
        min-height: clamp(150px, 28vw, 220px);
        height: auto;
        max-height: none;
    }

    .apparel-banner__overlay {
        padding: 16px 12px;
    }

    .apparel-banner__title {
        font-size: clamp(1.25rem, 7.4vw, 2.35rem);
        line-height: 1.03;
    }

    .apparel-banner__subtitle {
        font-size: clamp(0.78rem, 3.2vw, 0.98rem);
        line-height: 1.35;
    }
}

@media (max-width: 420px) {
    .apparel-banner--compact-mobile {
        min-height: clamp(125px, 32vw, 170px);
    }

    .apparel-banner__title {
        font-size: clamp(1.05rem, 7.6vw, 1.75rem);
        letter-spacing: 0.015em;
    }

    .apparel-banner__subtitle {
        font-size: clamp(0.72rem, 3.3vw, 0.88rem);
    }
}