/* Keep age selector geometry identical in default, hover and active states. */
.hero-age-zone {
    min-width: 0 !important;
    min-height: 66px !important;
    box-sizing: border-box !important;
    border-width: 2px !important;
    border-color: transparent !important;
}

.hero-age-zone.active {
    border-width: 2px !important;
    border-color: #f59e0b !important;
}

.hero-age-zone-sub,
.hero-age-zone.active .hero-age-zone-sub {
    font-weight: 600 !important;
}

@media (max-width: 600px) {
    .hero-age-zone {
        height: 68px !important;
        min-height: 68px !important;
        padding: 8px 4px !important;
    }

    .hero-age-zone-title {
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .hero-age-zone-sub,
    .hero-age-zone.active .hero-age-zone-sub {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 1.1em !important;
        overflow: hidden !important;
        font-size: clamp(0.5rem, 2.35vw, 0.64rem) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }
}