/* ---------- Hero height steps (mirrors the site's .main-slide behaviour) ----------
   Background stays cover/center; only the height steps down per breakpoint:
   550px (default) -> 460px (992–1199) -> 330px (768–991) -> 170px (<=767) */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
    .honor-hero {
        height: 460px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .honor-hero {
        height: 330px;
        margin-top: 76px;
    }
}

/* ---------- Desktop (small) ---------- */
@media only screen and (max-width: 1199px) {
    .honor-products {
        --phone-w: 280px;
        padding-top: 70px;
    }

    .honor-product {
        margin-bottom: 90px;
    }
}

/* ---------- Tablet ---------- */
@media only screen and (max-width: 991px) {
    .honor-products {
        --phone-w: 250px;
        padding-top: 60px;
    }

    .honor-product {
        margin-bottom: 80px;
    }

    /* devices 1 & 2 shift left by 25px on tablet/mobile (50px on desktop) */
    .honor-product--400 .honor-product__stage {
        transform: translateX(calc(23.5% - 25px));
    }

    .honor-product--x7 .honor-product__stage {
        transform: translateX(calc(22% - 25px));
    }
}

/* ---------- Mobile ---------- */
@media only screen and (max-width: 767px) {
    .honor-hero {
        height: 260px; /* 170px + 25% */
        margin-top: 61.05px;
    }

    .honor-products {
        --phone-w: 210px;
        padding-top: 48px;
    }

    .honor-product {
        margin-bottom: 64px;
    }

    .honor-product__note {
        margin-top: 22px;
        font-size: 12px;
    }
}

/* ---------- Small mobile ---------- */
@media only screen and (max-width: 400px) {
    .honor-products {
        --phone-w: 180px;
    }
}