:root {
    --site-page-lead-gap: 20px;
    --site-page-lead-gap-mobile: 12px;
}

.site-page-main {
    padding-top: var(--site-page-lead-gap);
    padding-bottom: 24px;
}

/* Hero-led category landing keeps the desktop banner flush with Top Chrome.
   Its page title still owns the shared lead gap after the hero. */
@media (min-width: 768px) {
    body.categories-view--has-banner > main.site-page-main {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .site-page-main {
        padding-top: var(--site-page-lead-gap-mobile);
    }
}