.home-page,
.public-page {
    --hp-ink: var(--text);
    --hp-muted: var(--muted);
    --hp-soft: var(--bg);
    --hp-line: var(--line);
    --hp-orange: var(--accent);
    --hp-orange-dark: var(--accent-strong);
    --hp-green: var(--brand);
    --hp-green-soft: var(--brand-soft);
    --hp-page-bg: #F7F4EF;
    --hp-surface: #FFFDF7;
    --hp-surface-warm: #FFF8EC;
    --hp-border-strong: rgba(223, 212, 195, .82);
    --hp-shadow: 0 18px 50px rgba(27, 29, 24, .12);
    --hp-card-shadow: 0 12px 28px rgba(27, 29, 24, .08);
    --hp-premium-shadow: 0 14px 32px rgba(27, 29, 24, .075);
    --hp-soft-shadow: 0 8px 22px rgba(27, 29, 24, .055);
    --hp-page-x: 14px;
    --hp-content-max: 1680px;
    --hp-rail-card-width: clamp(148px, 39vw, 166px);
    --hp-home-card-min: 168px;
    --hp-offer-card-min: 158px;
    --hp-info-card-min: 244px;
    --hp-radius-sm: 10px;
    --hp-radius-md: 16px;
    --hp-radius-lg: 22px;

    --hp-space-1: clamp(3px, .8vw, 5px);
    --hp-space-2: clamp(6px, 1.6vw, 9px);
    --hp-space-3: clamp(10px, 2.7vw, 14px);
    --hp-space-4: clamp(14px, 3.7vw, 20px);
    --hp-space-5: clamp(22px, 5.8vw, 32px);

    --hp-font-2xs: .48rem;
    --hp-font-xs: .58rem;
    --hp-font-sm: .66rem;
    --hp-font-md: .78rem;
    --hp-font-lg: .86rem;
    --hp-font-xl: .92rem;
    --hp-font-section: .98rem;
    --hp-font-hero: 1.05rem;

    --hp-icon-xs: clamp(16px, 4.3vw, 19px);
    --hp-icon-sm: clamp(20px, 5.4vw, 24px);
    --hp-icon-md: clamp(24px, 6.4vw, 30px);
    --hp-icon-lg: clamp(34px, 9vw, 40px);
    --hp-hero-min: 238px;
    --hp-product-media-height: 101px;
    --hp-bottom-nav-height: 0px;

    color: var(--hp-ink);
    background: var(--hp-page-bg);
}

@media (min-width: 421px) {
    .home-page,
    .public-page {
        --hp-space-1: clamp(4px, 1.1vw, 8px);
        --hp-space-2: clamp(8px, 2vw, 14px);
        --hp-space-3: clamp(14px, 3.2vw, 24px);
        --hp-space-4: clamp(20px, 4.8vw, 36px);
        --hp-space-5: clamp(30px, 7vw, 58px);

        --hp-font-2xs: .56rem;
        --hp-font-xs: .66rem;
        --hp-font-sm: .75rem;
        --hp-font-md: .96rem;
        --hp-font-lg: 1rem;
        --hp-font-xl: 1.08rem;
        --hp-font-section: 1.44rem;
        --hp-font-hero: 2.28rem;

        --hp-icon-xs: clamp(19px, 5vw, 25px);
        --hp-icon-sm: clamp(22px, 6vw, 30px);
        --hp-icon-md: clamp(27px, 7.2vw, 44px);
        --hp-icon-lg: clamp(40px, 11.8vw, 68px);
        --hp-hero-min: clamp(260px, 44vw, 390px);
        --hp-product-media-height: clamp(185px, 49vw, 220px);
        --hp-bottom-nav-height: 0px;
        --hp-rail-card-width: clamp(172px, 31vw, 210px);
        --hp-home-card-min: 184px;
        --hp-offer-card-min: 168px;
        --hp-info-card-min: 252px;
    }
}

@media (min-width: 520px) {
    .home-page,
    .public-page {
        --hp-font-2xs: .72rem;
        --hp-font-xs: .86rem;
        --hp-font-sm: 1rem;
        --hp-font-md: 1.12rem;
        --hp-font-lg: 1.18rem;
        --hp-font-xl: 1.35rem;
        --hp-font-section: 1.9rem;
        --hp-font-hero: 3.15rem;
    }
}

@media (min-width: 900px) {
    .home-page,
    .public-page {
        --hp-space-1: 5px;
        --hp-space-2: 10px;
        --hp-space-3: 16px;
        --hp-space-4: 22px;
        --hp-space-5: 34px;
        --hp-font-xs: .68rem;
        --hp-font-sm: .78rem;
        --hp-font-md: .9rem;
        --hp-font-lg: 1rem;
        --hp-font-xl: 1.08rem;
        --hp-font-section: 1.45rem;
        --hp-font-hero: 2.65rem;
        --hp-icon-xs: 18px;
        --hp-icon-sm: 22px;
        --hp-icon-md: 30px;
        --hp-icon-lg: 42px;
        --hp-hero-min: 340px;
        --hp-product-media-height: 150px;
        --hp-bottom-nav-height: 0px;
        --hp-rail-card-width: 190px;
        --hp-home-card-min: 178px;
        --hp-offer-card-min: 176px;
        --hp-info-card-min: 256px;
    }
}