/* Content-led page rhythm: keep the storefront dense enough to reveal useful content. */
.catalog-hero {
    padding-top: clamp(34px, 4vw, 54px) !important;
    padding-bottom: clamp(30px, 3.5vw, 46px) !important;
}

.catalog {
    padding-top: clamp(26px, 3vw, 40px) !important;
}

.brands-hero,
.terpenes-hero,
.effects-hero,
.loyalty-hero,
.affiliate-hero {
    min-height: 0;
    padding-top: clamp(44px, 5vw, 70px) !important;
    padding-bottom: clamp(44px, 5vw, 70px) !important;
}

.taxonomy-hero,
.account-dashboard-hero,
.contact-hero {
    min-height: 0;
    padding-top: clamp(38px, 4vw, 60px) !important;
    padding-bottom: clamp(38px, 4vw, 60px) !important;
}

.page-hero.compact,
.cart-hero,
.checkout-hero {
    padding-top: clamp(24px, 3vw, 38px) !important;
    padding-bottom: clamp(22px, 3vw, 36px) !important;
}

/* Static pages nest their hero inside a section; avoid applying section spacing twice. */
.static-page.section {
    padding-top: 0 !important;
    padding-bottom: clamp(44px, 5vw, 72px) !important;
}

.static-page > .page-hero.compact {
    padding-top: clamp(30px, 3.5vw, 48px) !important;
    padding-bottom: clamp(18px, 2vw, 28px) !important;
}

.static-page > .static-page-body {
    padding-top: clamp(16px, 2vw, 24px);
    border-top: 0;
}

.taxonomy-detail-hero,
.terpene-profile-hero,
.effect-profile-hero {
    padding-top: clamp(32px, 4vw, 52px) !important;
    padding-bottom: clamp(40px, 4.5vw, 64px) !important;
}

.brands-directory,
.terpenes-directory,
.effects-directory,
.account-section,
.cart-workspace,
.checkout-layout {
    padding-top: clamp(28px, 3.5vw, 48px) !important;
}

@media (max-width: 700px) {
    .catalog-hero,
    .brands-hero,
    .terpenes-hero,
    .effects-hero,
    .loyalty-hero,
    .affiliate-hero,
    .taxonomy-hero,
    .taxonomy-detail-hero,
    .terpene-profile-hero,
    .effect-profile-hero {
        padding-top: 32px !important;
        padding-bottom: 36px !important;
    }

    .catalog,
    .brands-directory,
    .terpenes-directory,
    .effects-directory,
    .account-section,
    .cart-workspace,
    .checkout-layout {
        padding-top: 24px !important;
    }

    .static-page > .page-hero.compact {
        padding-top: 26px !important;
        padding-bottom: 16px !important;
    }
}