* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

.main-section-wrapper {
	max-width: 1598px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.rotate-screen {
    position: fixed;
    inset: 0;
    background: #000;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 9999999999999;
}

.rotate-content {
    font-size: 20px;
}

.rotate-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

@media (max-height: 500px) and (orientation: landscape) {
    .rotate-screen {
        display: flex;
    }
}

/* ============================================================
   HONOR 3 promocija – landing
   The whole composition scales from a single variable: --phone-w.
   Bubble / gift offsets are expressed in % of the phone box,
   so changing --phone-w per breakpoint resizes everything.
   ============================================================ */

/* ---------- HERO ----------
   Illustration is a background. The div keeps its full 550px height (the
   image's native height) on desktop and does NOT shrink until <= 1199px,
   where the height starts reducing gradually (see media-query.css). */
.honor-hero {
    height: 550px;
    background-image: url("/custom/honor-3-promocija/assets/images/illustration.jpg");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    /* gentle slide up from below + fade on page load */
    animation: honorHeroSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes honorHeroSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- PRODUCTS ---------- */
.honor-products {
    --phone-w: 300px;
    padding: 80px 16px 40px;
}

.honor-product {
    margin: 0 auto 100px;
}

.honor-product:last-child {
    margin-bottom: 60px;
}

/* the phone is the base; bubble + gift are positioned over it.
   The stage is an <a> wrapping the whole device + add-ons in one link. */
.honor-product__stage {
    display: block;
    position: relative;
    width: var(--phone-w);
    margin: 0 auto;
}

.honor-product__phone {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.honor-product__bubble,
.honor-product__gift {
    position: absolute;
    height: auto;
}

.honor-product__bubble {
    z-index: 3;
}

.honor-product__gift {
    z-index: 2;
}

/* HONOR 400 5G – bubble upper-left, dm card lower-left.
   The bubble overflows far left, so the stage is shifted right by half
   that overflow to keep the whole composition centered on the page. */
.honor-product--400 .honor-product__stage {
    transform: translateX(calc(23.5% - 50px));
}

.honor-product--400 .honor-product__bubble {
    width: 66%;
    top: 15%;
    left: -44%;
}

.honor-product--400 .honor-product__gift {
    width: 95%;
    bottom: 5%;
    left: -29%;
}

/* HONOR X7d – bubble mid-left, charger lower-left (in front of phone).
   Bubble overflows left; stage shifted right to keep composition centered. */
.honor-product--x7 .honor-product__stage {
    transform: translateX(calc(22% - 50px));
}

.honor-product--x7 .honor-product__bubble {
    width: 68%;
    top: 26%;
    left: -37%;
}

.honor-product--x7 .honor-product__gift {
    width: 46%;
    bottom: -2%;
    left: -25%;
}

/* HONOR Magic 8 Lite – bubble upper-right (tail left), soccer ball bottom-right.
   The ball sits BEHIND the phone (z-index below it); the bubble overflows right,
   so the stage is shifted left to keep the composition centered. */
.honor-product--magic8 .honor-product__stage {
    transform: translateX(-19%);
}

.honor-product--magic8 .honor-product__bubble {
    width: 58%;
    top: 10%;
    right: -45%;
}

.honor-product--magic8 .honor-product__gift {
    width: 90%;
    bottom: 2%;
    right: -43%;
    left: auto;
    z-index: 0;
}

/* note under each product */
.honor-product__note {
    margin-top: 7px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    color: #1a1a1a;
}

/* ---------- Add-on "pop" animations ----------
   When a product scrolls into view, JS adds .is-visible to it. The bubble
   then the gift pop in one after another (staggered transition-delay).
   The phone is the trigger and stays static. */
.honor-product__bubble,
.honor-product__gift {
    opacity: 0;
    transform: scale(0.4);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease;
    will-change: transform, opacity;
}

.honor-product.is-visible .honor-product__bubble {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.15s;   /* first */
}

.honor-product.is-visible .honor-product__gift {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s;    /* then, after the bubble */
}

/* respect users who prefer no motion: show everything, no animation */
@media (prefers-reduced-motion: reduce) {
    .honor-hero {
        animation: none;
    }

    .honor-product__bubble,
    .honor-product__gift {
        opacity: 1;
        transform: none;
        transition: none;
    }
}