/*
 * TANKZONE_HOMEPAGE_HERO_COMPACT_V1
 */

.tz-hero-rewards-compact{
    display:none;
}

@media(max-width:760px){

    /*
     * The hero should explain the store and give one obvious action.
     * Remove artificial vertical height after the large collage is hidden.
     */
    html.tz-modern-mobile .tz-hero-compact-active{
        min-height:0 !important;
        height:auto !important;
        padding-bottom:18px !important;
        overflow:hidden !important;
    }

    html.tz-modern-mobile
    .tz-hero-compact-active
    .tz-hero-large-media{
        display:none !important;
    }

    html.tz-modern-mobile
    .tz-hero-compact-active
    .tz-hero-original-rewards{
        display:none !important;
    }

    /*
     * Reduce large gaps left by older hero layout wrappers.
     */
    html.tz-modern-mobile
    .tz-hero-compact-active
    [class*="hero"]{
        min-height:0 !important;
    }

    html.tz-modern-mobile
    .tz-hero-compact-active
    h1{
        margin-bottom:10px !important;
        line-height:1.03 !important;
    }

    html.tz-modern-mobile
    .tz-hero-compact-active
    p{
        line-height:1.45;
    }

    /*
     * Main shop CTA remains visually dominant.
     */
    html.tz-modern-mobile
    .tz-hero-compact-active
    .tz-hero-primary-cta{
        width:100% !important;
        min-height:46px !important;
        margin-top:14px !important;
        margin-bottom:8px !important;
    }

    /*
     * Rewards becomes one small horizontal card, not a second hero.
     */
    .tz-hero-rewards-compact{
        display:grid;
        grid-template-columns:34px minmax(0,1fr) auto;
        align-items:center;
        gap:9px;
        width:100%;
        margin:9px 0 4px;
        padding:9px 10px;
        border:1px solid rgba(255,255,255,.15);
        border-radius:9px;
        background:rgba(10,10,10,.78);
        color:#fff;
        text-decoration:none;
        -webkit-tap-highlight-color:transparent;
    }

    .tz-hero-rewards-icon{
        display:grid;
        place-items:center;
        width:34px;
        height:34px;
        border-radius:8px;
        background:#d51c25;
        font-size:.9rem;
    }

    .tz-hero-rewards-copy{
        min-width:0;
        text-align:start;
    }

    .tz-hero-rewards-copy strong{
        display:block;
        margin:0 0 2px;
        color:#fff;
        font-size:.68rem;
        line-height:1.25;
    }

    .tz-hero-rewards-copy span{
        display:block;
        overflow:hidden;
        color:#aaa;
        font-size:.54rem;
        line-height:1.35;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .tz-hero-rewards-arrow{
        color:#fff;
        font-size:.8rem;
        opacity:.9;
    }

    /*
     * Track-order remains available but visually secondary.
     */
    html.tz-modern-mobile
    .tz-hero-compact-active
    .tz-hero-track-link{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        min-height:28px !important;
        margin-top:3px !important;
        padding:3px 6px !important;
        font-size:.58rem !important;
        opacity:.8;
    }
}