/*
 * TANKZONE_HOMEPAGE_UX_V1
 *
 * Conservative homepage UX layer.
 * It only affects elements that the JS marks explicitly.
 */

.tz-home-trust-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    margin:18px auto 28px;
    max-width:1200px;
    background:#242424;
    border:1px solid #242424;
    overflow:hidden;
}

.tz-home-trust-item{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:16px 18px;
    background:#0d0d0d;
}

.tz-home-trust-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    flex:0 0 32px;
    border:1px solid #3b3b3b;
    border-radius:999px;
    color:#fff;
    font-size:.9rem;
}

.tz-home-trust-copy{
    min-width:0;
}

.tz-home-trust-copy strong{
    display:block;
    margin:0 0 3px;
    color:#fff;
    font-size:.88rem;
    line-height:1.25;
}

.tz-home-trust-copy span{
    display:block;
    color:#979797;
    font-size:.68rem;
    line-height:1.45;
}

.tz-home-old-why-hidden{
    display:none !important;
}

.tz-home-reviews{
    scroll-margin-top:90px;
}

.tz-home-affiliate{
    max-width:1200px;
    margin-inline:auto;
}

.tz-home-affiliate [class*="stat"],
.tz-home-affiliate [class*="metric"]{
    opacity:.85;
}

@media(max-width:760px){

    /*
     * The customer should understand the page from the first screen:
     * modest spacing, one obvious hierarchy, no oversized gaps.
     */
    html.tz-modern-mobile .tz-home-hero{
        padding-bottom:18px !important;
    }

    html.tz-modern-mobile .tz-home-hero h1,
    html.tz-modern-mobile .tz-home-hero h2{
        line-height:1.05 !important;
        letter-spacing:-.02em !important;
    }

    html.tz-modern-mobile .tz-home-categories{
        padding-top:18px !important;
        padding-bottom:18px !important;
    }

    html.tz-modern-mobile .tz-home-bestsellers{
        padding-top:26px !important;
        padding-bottom:28px !important;
    }

    html.tz-modern-mobile .tz-home-reviews{
        padding-top:28px !important;
        padding-bottom:28px !important;
    }

    html.tz-modern-mobile .tz-home-tankpack{
        margin-top:0 !important;
    }

    .tz-home-trust-strip{
        grid-template-columns:1fr;
        gap:1px;
        margin:12px 10px 22px;
        border-radius:10px;
    }

    .tz-home-trust-item{
        grid-template-columns:30px 1fr;
        gap:9px;
        min-height:58px;
        padding:10px 12px;
    }

    .tz-home-trust-icon{
        width:30px;
        height:30px;
        font-size:.78rem;
    }

    .tz-home-trust-copy strong{
        font-size:.72rem;
        margin-bottom:2px;
    }

    .tz-home-trust-copy span{
        font-size:.58rem;
        line-height:1.35;
    }

    /*
     * Marketer program remains available, but no longer competes visually
     * with the main shopping journey.
     */
    html.tz-modern-mobile .tz-home-affiliate{
        margin:18px 10px 28px !important;
        padding:18px 14px !important;
        border:1px solid #292929 !important;
        border-radius:10px !important;
    }

    html.tz-modern-mobile .tz-home-affiliate h1,
    html.tz-modern-mobile .tz-home-affiliate h2{
        font-size:1.35rem !important;
        line-height:1.05 !important;
        margin-bottom:8px !important;
    }

    html.tz-modern-mobile .tz-home-affiliate p{
        max-width:36em;
        font-size:.68rem !important;
        line-height:1.5 !important;
    }

    /*
     * If the affiliate section contains a large metric block, keep it
     * available but visually secondary.
     */
    html.tz-modern-mobile .tz-home-affiliate [class*="stats"],
    html.tz-modern-mobile .tz-home-affiliate [class*="metrics"]{
        margin-top:12px !important;
        font-size:.85em !important;
    }
}