{"id":119054,"date":"2026-06-15T12:43:57","date_gmt":"2026-06-15T05:43:57","guid":{"rendered":"https:\/\/jblstore.co.id\/?page_id=119054"},"modified":"2026-06-15T15:21:17","modified_gmt":"2026-06-15T08:21:17","slug":"our-story","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/our-story\/","title":{"rendered":"Our Story"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"119054\" class=\"elementor elementor-119054\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8606d4c elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"8606d4c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f07168f\" data-id=\"f07168f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-986152d elementor-widget elementor-widget-shortcode\" data-id=\"986152d\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t    <style>\n        @media (max-width: 767px) {\n            .is-desktop {\n                display: none !important;\n            }\n        }\n\n        @media (min-width: 768px) {\n            .is-mobile {\n                display: none !important;\n            }\n        }\n\n        .cta:not(:disabled),\n        .cta:not(.active) {\n            transition: all .2s ease-in;\n        }\n\n        .cta:not(:disabled):focus,\n        .cta:not(.active):focus,\n        .cta:not(:disabled):hover,\n        .cta:not(.active):hover {\n            outline: none;\n            opacity: 0.8;\n        }\n\n        #title {\n            display: none;\n        }\n\n        .our-story-80th {\n            max-width: var(--sizing-max-page);\n            margin-inline: auto;\n            position: relative;\n            overflow: hidden;\n\n            #hero {\n                position: relative;\n\n                .inside {\n                    width: 100%;\n\n                    .img-wrapper {\n                        width: 100%;\n                        height: auto;\n                        position: relative;\n\n                        img {\n                            width: 100%;\n                            height: auto;\n                            display: block;\n                        }\n                    }\n\n                    .text-wrapper {\n                        position: absolute;\n                        top: 0;\n                        left: 0;\n                        bottom: 0;\n                        right: 0;\n                        text-align: center;\n                        color: #fff;\n                        display: grid;\n                        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);\n                        max-width: 95%;\n                        margin: auto;\n\n                        @media (max-width: 767px) {\n                            max-width: 90%;\n                            grid-template-columns: 1fr;\n                            grid-template-rows: minmax(0, 0.8fr) minmax(0, 1fr);\n                        }\n\n                        .text-wrapper-inner {\n                            display: flex;\n                            flex-direction: column;\n                            justify-content: center;\n                        }\n\n                        .logo-wrapper {\n                            margin-bottom: 20px;\n\n                            img {\n                                width: auto;\n                            }\n                        }\n\n                        .title-section {\n                            font-size: 24px;\n                            font-weight: bold;\n                            margin-bottom: 20px;\n                        }\n\n                        .mycta {\n                            display: inline-block;\n                            padding: 4px 16px;\n                            color: var(--jblorange);\n                            background-color: #fff;\n                            text-decoration: none;\n                            width: fit-content;\n                            margin-inline: auto;\n                            font-family: Grostesk-Regular, Arial, Helvetica, sans-serif;\n                        }\n                    }\n                }\n            }\n\n            #intro {\n                position: relative;\n\n                .inside {\n                    width: 70%;\n                    margin: auto;\n                    padding: 80px 20px;\n                    text-align: center;\n\n                    @media (max-width: 767px) {\n                        width: 90%;\n                        padding: 40px 20px;\n                    }\n\n                    .description-section {\n                        font-family: \"Kostic - Roc Grotesk Condensed Bold\", Arial, Helvetica, sans-serif;\n                        font-size: clamp(1.75rem, 2.288vw + 1.158rem, 3.625rem);\n                        color: black;\n                        margin: 0;\n                        margin-bottom: 40px;\n                        line-height: 100%;\n                        text-transform: uppercase;\n                        text-align: center;\n                    }\n\n                    .title-section {\n                        font-family: Grostesk-Bold, Arial, Helvetica, sans-serif;\n                        font-size: clamp(2.125rem, 3.509vw + 1.217rem, 5rem);\n                        color: black;\n                        margin: 0;\n                        text-transform: uppercase;\n                        text-align: center;\n                    }\n\n                    .marked {\n                        color: var(--jblorange);\n                        transition: color .3s;\n                    }\n                }\n\n                .decor {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    bottom: 0;\n                    right: 0;\n                    pointer-events: none;\n\n                    @media (max-width: 767px) {\n                        position: static;\n                        padding: 50px 20px;\n                        padding-top: 0;\n                        display: flex;\n                        flex-direction: column;\n                        justify-content: center;\n                        align-items: center;\n                    }\n\n                    .mics {\n                        position: absolute;\n                        bottom: 100px;\n                        left: 50px;\n                        width: 150px;\n                        height: auto;\n\n                        @media (max-width: 767px) {\n                            display: none;\n                        }\n                    }\n\n                    .made-to-be-heard {\n                        position: absolute;\n                        bottom: 50px;\n                        right: 100px;\n                        width: 200px;\n                        height: auto;\n\n                        @media (max-width: 767px) {\n                            position: static;\n                        }\n                    }\n                }\n            }\n\n            #trailer {\n                position: relative;\n\n                .inside {\n                    width: 100%;\n                    display: flex;\n                }\n            }\n\n            #histories {\n                position: relative;\n\n                .inside {\n                    width: 100%;\n\n                    .title-section {\n                        font-family: Grostesk-ExtraBold, Arial, Helvetica, sans-serif;\n                        font-size: clamp(2.125rem, 4.729vw + 0.901rem, 6rem);\n                        color: black;\n                        margin: 0;\n                        text-transform: uppercase;\n                        text-align: center;\n                        padding: 80px 20px;\n\n                        @media (max-width: 767px) {\n                            padding: 40px 20px;\n                        }\n\n                        span {\n                            color: var(--jblorange);\n                            display: block;\n                        }\n                    }\n\n                    .histories-wrapper {\n                        padding-bottom: 20px;\n                        margin-bottom: 40px;\n\n                        .histories-wrapper-inner {\n                            box-sizing: border-box;\n                            display: flex;\n                            gap: 20px;\n\n                            .slick-list {\n                                margin-left: -12px;\n                                margin-right: -12px;\n                            }\n\n                            .slick-slide {\n                                box-sizing: border-box;\n                            }\n\n                            .slick-track {\n                                display: flex !important;\n                                gap: 32px;\n                                align-items: stretch;\n                            }\n\n                            .history-item {\n                                height: auto !important;\n                                display: flex !important;\n                                flex-direction: column;\n                                box-sizing: border-box;\n\n                                .history-card {\n                                    width: 100%;\n                                    height: 100%;\n                                    display: flex;\n                                    flex-direction: column;\n                                    box-sizing: border-box;\n                                    background-color: #f5f5f5;\n                                    border-radius: 8px;\n                                    border: 4px solid var(--jblorange);\n\n                                    .history-image-wrapper {\n                                        width: 100%;\n                                        height: auto;\n                                        flex-shrink: 0;\n\n                                        img {\n                                            width: 100%;\n                                            height: auto;\n                                            display: block;\n                                        }\n                                    }\n\n                                    .content-wrapper {\n                                        flex: 1;\n                                        height: 100%;\n                                        display: flex;\n                                        flex-direction: column;\n                                        box-sizing: border-box;\n                                        padding: 20px;\n                                        position: relative;\n\n                                        .decor {\n                                            margin-bottom: 10px;\n\n                                            .history-decor-wrapper {\n                                                position: absolute;\n                                                top: 0;\n                                                right: 20px;\n                                                width: 50px;\n                                                height: auto;\n\n                                                img {\n                                                    width: 100%;\n                                                    height: auto;\n                                                    display: block;\n                                                }\n                                            }\n                                        }\n\n                                        .history-year {\n                                            font-family: Grostesk-Medium, Arial, Helvetica, sans-serif;\n                                            font-size: 14px;\n                                            background-color: var(--jblorange);\n                                            text-transform: uppercase;\n                                            margin-bottom: 5px;\n                                            display: block;\n                                            padding: 6px 9px;\n                                            font-weight: 700;\n                                            width: fit-content;\n                                            color: #fff;\n                                        }\n\n                                        .history-title {\n                                            font-family: Grostesk-ExtraBold, Arial, Helvetica, sans-serif;\n                                            font-size: var(--f-xl, 1.875rem);\n                                            color: black;\n                                            margin-top: var(--spacing-m);\n                                            font-variation-settings: \"wght\" 750, \"wdth\" 100;\n                                            margin-bottom: 0;\n                                            text-transform: uppercase;\n                                        }\n\n                                        .history-description {\n                                            font-family: Grostesk-Regular, Arial, Helvetica, sans-serif;\n                                            font-size: 14px;\n                                            color: black;\n                                            font-size: var(--f-m);\n                                            margin-top: 0;\n                                            margin-bottom: 0;\n                                            padding-top: 16px;\n                                            padding-bottom: var(--spacing-s);\n                                            line-height: 120%;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n\n                        .histories-controller {\n                            display: flex;\n                            align-items: center;\n                            gap: 12px;\n                            padding-inline: 40px;\n                            margin-top: 40px;\n\n                            .histories-nav {\n                                display: flex;\n                                align-items: center;\n                                gap: 24px;\n\n                                .cta {\n                                    width: 32px;\n                                    height: 32px;\n                                    display: flex;\n                                    justify-content: center;\n                                    align-items: center;\n                                    padding: 0;\n\n                                    svg {\n                                        width: 12px;\n                                        height: 22px;\n                                        stroke: #fff;\n                                    }\n\n                                    &:disabled {\n                                        opacity: 0.5;\n                                        cursor: not-allowed;\n                                    }\n                                }\n                            }\n\n                            .histories-line {\n                                width: 100%;\n                                height: 4px;\n                                background-color: #e0e0e0;\n                                position: relative;\n\n                                .histories-line-progress {\n                                    width: 0%;\n                                    height: 100%;\n                                    background-color: black;\n                                    position: absolute;\n                                    top: 0;\n                                    left: 0;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            #e-catalog {\n                position: relative;\n                background-color: #FBF6F0;\n\n                .inside {\n                    width: 100%;\n                    max-width: 80%;\n                    padding: 80px 20px;\n                    margin: auto;\n                }\n            }\n\n            #promo {\n                background-color: #FF4712;\n                background-image: url('\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-bg.webp');\n                background-size: cover;\n                background-position: center;\n                background-repeat: no-repeat;\n                position: relative;\n\n                @media (max-width: 767px) {\n                    background-image: url('\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-bg-mobile.webp');\n                }\n\n                .inside {\n                    width: 100%;\n                    padding: 80px 20px;\n\n                    @media (max-width: 767px) {\n                        padding: 40px 20px;\n                    }\n\n                    .title-section {\n                        font-family: Grostesk-ExtraBold, Arial, Helvetica, sans-serif;\n                        font-size: clamp(2.125rem, 4.729vw + 0.901rem, 6rem);\n                        color: #fff;\n                        margin: 0;\n                        text-transform: uppercase;\n                        text-align: center;\n                        margin-bottom: 60px;\n\n                        @media (max-width: 767px) {\n                            margin-bottom: 40px;\n                        }\n                    }\n\n                    a.cta {\n                        color: white;\n                        display: block;\n                        background-color: #ff3400;\n                        width: fit-content;\n                        padding: 10px 20px;\n                        border-radius: 50px;\n                        line-height: 100%;\n                        margin: 0 auto;\n                        text-transform: uppercase;\n                        font-family: \"Kostic - Roc Grotesk Bold\", Arial, Helvetica, sans-serif;\n                        \/* font-size: clamp(14px, calc(0.875rem + ((1vw - 3.93px) * 0.8674)), 21px); *\/\n                        \/* 1024 - 1920 => 16px - 21px *\/\n                        font-size: calc(1rem + ((1vw - 10.24px) * 0.558));\n                        min-height: 0vw;\n                        \/* margin-top: 50px; *\/\n\n                        @media (min-width: 1920px) {\n                            font-size: 21px;\n                        }\n                        @media (max-width: 768px) {\n                            \/* margin-top: 40px; *\/\n                            font-size: 16px;\n                            font-family: \"Kostic - Roc Grotesk Medium\", Arial, Helvetica, sans-serif;\n                        }\n                    }\n\n                    .promotion {\n                        background-color: white !important;\n                        padding-bottom: 20px !important;\n                    }\n\n                    .product-recom {\n                        min-height: 529px;\n                        position: relative;\n                        padding-bottom: 100px;\n                        padding-top: 20px;\n\n                        @media (max-width: 768px) {\n                            padding-bottom: 50px;\n                            min-height: 346px;\n                        }\n\n                        &::before,\n                        &::after {\n                            content: '';\n                            position: absolute;\n                            top: 0;\n                            width: 10%;\n                            height: 100%;\n                            z-index: 2;\n                            pointer-events: none;\n                        }\n                        .prev-btn, .prev-btn-special,\n                        .next-btn, .next-btn-special {\n                            position: absolute;\n                            top: 50%;\n                            transform: translateY(-50%);\n                            z-index: 3;\n                        }\n\n                        .prev-btn, .prev-btn-special {\n                            left: 4%;\n                        }\n\n                        .next-btn, .next-btn-special {\n                            right: 4%;\n                        }\n\n                        #recommendedProducts, #specialOffers {\n                            width: 85%;\n                            margin: 0 auto;\n                        }\n                    }\n\n                    .product-grid-wrapper,\n                    .product-scroll-wrapper {\n                        display: grid;\n                        grid-template-columns: repeat(2, 1fr);\n                        gap: 20px;\n                        width: 90%;\n                        margin: auto;\n\n                        @media (max-width: 767px) {\n                            grid-template-columns: repeat(1, 1fr);\n                        }\n\n                        .product-item {\n                            padding: 20px;\n                            display: flex;\n                            flex-direction: column;\n                            align-items: center;\n                            text-align: center;\n\n                            .product-image-wrapper {\n                                width: 100%;\n                                height: auto;\n                                margin-bottom: 40px;\n                                max-width: 80%;\n\n                                @media (max-width: 767px) {\n                                    max-width: 90%;\n                                }\n\n                                img {\n                                    width: 100%;\n                                    height: auto;\n                                    display: block;\n                                }\n                            }\n\n                            .product-info {\n                                .product-name {\n                                    font-family: \"Kostic - Roc Grotesk Wide Bold\", Arial, Helvetica, sans-serif;\n                                    font-size: clamp(1.5rem, 0.611vw + 1.342rem, 2rem);\n                                    color: white;\n                                    margin-top: 0;\n                                    margin-bottom: 20px;\n                                    text-transform: uppercase;\n                                }\n\n                                .product-description {\n                                    font-family: Grostesk-Medium, Arial, Helvetica, sans-serif;\n                                    font-size: clamp(1.125rem, 0.458vw + 1.006rem, 1.5rem);\n                                    color: white;\n                                    margin-top: 0;\n                                    margin-bottom: 20px;\n                                    text-transform: uppercase;\n                                    line-height: 120%;\n                                }\n\n                                .cta {\n                                    display: inline-block;\n                                    padding: 4px 16px;\n                                    background-color: #8FB880;\n                                    color: #fff;\n                                    text-decoration: none;\n                                    width: fit-content;\n                                    font-size: clamp(0.875rem, 0.305vw + 0.918rem, 1.125rem);\n                                    font-family: Grostesk-Medium, Arial, Helvetica, sans-serif;\n                                }\n                            }\n                        }\n                    }\n\n                    .product-scroll-wrapper {\n                        display: none;\n                    }\n\n                    @media (max-width: 767px) {\n                        .product-grid-wrapper {\n                            display: none;\n                        }\n\n                        .product-scroll-wrapper {\n                            display: block;\n                        }\n                    }\n\n                    .product-scroll-controller {\n                        display: none;\n                        margin-top: 20px;\n                        align-items: center;\n                        gap: 12px;\n\n\n                        @media (max-width: 767px) {\n                            display: flex;\n                        }\n\n                        .product-scroll-nav {\n                            display: flex;\n                            align-items: center;\n                            gap: 24px;\n\n                            .cta {\n                                width: 32px;\n                                height: 32px;\n                                display: flex;\n                                justify-content: center;\n                                align-items: center;\n                                padding: 0;\n                                color: #fff;\n\n                                svg {\n                                    width: 12px;\n                                    height: 22px;\n                                    stroke: #fff;\n                                }\n\n                                &:disabled {\n                                    opacity: 0.5;\n                                    cursor: not-allowed;\n                                }\n                            }\n                        }\n\n                        .product-scroll-line {\n                            width: 100%;\n                            height: 4px;\n                            background-color: rgba(255, 255, 255, 0.4);\n                            position: relative;\n\n                            .product-scroll-line-progress {\n                                width: 0%;\n                                height: 100%;\n                                background-color: black;\n                                position: absolute;\n                                top: 0;\n                                left: 0;\n                                background-color: #fff;\n                            }\n                        }\n                    }\n                }\n            }\n\n            #moments {\n                position: relative;\n\n                .inside {\n                    background-color: #fff;\n                    padding: 80px 20px;\n\n                    @media (max-width: 767px) {\n                        padding: 40px 20px;\n                    }\n\n                    .title-wrapper {\n                        margin-bottom: 60px;\n\n                        .title-section {\n                            font-family: Grostesk-ExtraBold, Arial, Helvetica, sans-serif;\n                            font-size: clamp(2.125rem, 4.729vw + 0.901rem, 6rem);\n                            color: black;\n                            margin: 0;\n                            text-transform: uppercase;\n                            text-align: center;\n                            margin-bottom: 20px;\n                            line-height: 100%;\n                            margin-bottom: 0;\n\n                            @media (max-width: 767px) {\n                                margin-bottom: 10px;\n                            }\n                        }\n\n                        .description-section {\n                            font-family: Grostesk-Medium, Arial, Helvetica, sans-serif;\n                            \/* 24 -> 64 | 414 -> 1724 *\/\n                            font-size: clamp(1.5rem, 3.053vw + 0.71rem, 4rem);\n                            color: var(--jblorange);\n                            margin: 0;\n                            line-height: 100%;\n                            text-align: center;\n                            text-transform: uppercase;\n                        }\n                    }\n                }\n\n                .moments-wrapper {\n                    position: relative;\n                    display: flex;\n                    gap: 20px;\n                    overflow: hidden;\n                    width: 100%;\n\n                    .moments-scroll-wrapper {\n                        width: 100%;\n                        flex: 1 1 auto;\n                        min-width: 0;\n                        max-width: 100%;\n\n                        .slick-list {\n                            margin-left: -16px;\n                            margin-right: -16px;\n                        }\n\n                        .slick-slide {\n                            padding-left: 16px;\n                            padding-right: 16px;\n                            box-sizing: border-box;\n                        }\n\n                        .video-wrapper {\n                            width: 100%;\n                            overflow: hidden;\n                        }\n\n                        .video-container {\n                            margin: 0 -10px;\n                        }\n\n                        .video-item {\n                            box-sizing: border-box;\n                            position: relative;\n                        }\n\n                        .video-item video {\n                            width: 100%;\n                            aspect-ratio: 9 \/ 16;\n                            object-fit: cover;\n                            border-radius: 4px;\n                            display: block;\n                            background: #000;\n                            cursor: pointer;\n                        }\n\n                        .video-container .slick-slide {\n                            padding: 0 8px;\n                            box-sizing: border-box;\n                        }\n\n                        .video-container .slick-list {\n                            margin: 0 -8px;\n                        }\n\n                        .video-item video {\n                            width: 100%;\n                            aspect-ratio: 9 \/ 16;\n                            object-fit: cover;\n                            display: block;\n                            border-radius: 6px;\n                        }\n\n                        .control-wrapper {\n                            position: absolute;\n                            bottom: var(--spacing-xs);\n                            left: var(--spacing-xs);\n                            right: var(--spacing-xs);\n                            display: flex;\n                            justify-content: flex-end;\n                            transition: .1s ease-in-out;\n                            opacity: .5;\n\n                            .js-playback {\n                                top: auto;\n                                left: auto;\n                                bottom: auto;\n                                right: auto;\n                                position: relative;\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                                width: 48px;\n                                aspect-ratio: 1 \/ 1;\n                                z-index: 9;\n                                pointer-events: all;\n                                color: var(--c-em-full);\n                                border: 0;\n                                outline: 0;\n                                background-color: transparent;\n                                text-transform: none !important;\n                                --c-em-full: #fff;\n\n                                &:before {\n                                    font-family: var(--font-icon);\n                                    font-weight: 400;\n                                    font-style: normal;\n                                    font-size: 1em;\n                                    line-height: 1;\n                                    letter-spacing: normal;\n                                    text-transform: none;\n                                    display: inline-block;\n                                    white-space: nowrap;\n                                    word-wrap: normal;\n                                    direction: ltr;\n                                    vertical-align: sub;\n                                    -webkit-font-feature-settings: \"liga\";\n                                    -webkit-font-smoothing: antialiased;\n                                    transition: transform var(--ds-transition);\n                                    will-change: transform clip-path;\n                                    content: \"pause\";\n                                    font-size: 28px;\n                                    font-variation-settings: \"FILL\" 1;\n                                    padding: 3px;\n                                }\n\n                                &:not(:hover):before {\n                                    background-color: #000;\n                                }\n\n                                &.mute[data-state=paused]:before {\n                                    content: \"volume_off\";\n                                }\n\n                                &.mute[data-state=playing]:before {\n                                    content: \"volume_up\";\n                                }\n\n                                &[data-state=paused]:before {\n                                    content: \"play_arrow\";\n                                }\n                            }\n                        }\n\n                        .video-item:hover .control-wrapper {\n                            opacity: 1;\n\n                            .js-playback:hover:before {\n                                background-color: var(--c-accent);\n                            }\n                        }\n\n                        .socmed-controller {\n\n                            .arrow-wrapper {\n                                display: flex;\n                                align-items: center;\n                                gap: 12px;\n                                padding: 12px 30px;\n                                padding-left: 0;\n\n                                .slider-btn {\n                                    width: 28px;\n                                    height: 28px;\n                                    display: flex;\n                                    align-items: center;\n                                    justify-content: center;\n                                    background: none;\n                                    border: none;\n                                    color: #333;\n                                    padding: 0;\n                                }\n                            }\n                        }\n                    }\n\n                    .moments-controller {\n                        flex: 0 0 auto;\n                        display: flex;\n                        justify-content: center;\n                        align-items: center;\n\n                        .prev-moments,\n                        .next-moments {\n                            background-color: transparent;\n                            border: none;\n                            color: black;\n\n                            &:hover {\n                                background-color: transparent;\n                            }\n                        }\n                    }\n                }\n\n                .social-media-wrapper {\n                    display: flex;\n                    justify-content: end;\n                    align-items: center;\n                    gap: 20px;\n                    margin-top: 40px;\n                    width: 92%;\n                    margin-inline: auto;\n\n                    @media (max-width: 767px) {\n                        justify-content: center;\n                    }\n\n                    .social-media-item {\n                        width: 48px;\n                        height: 48px;\n                        display: flex;\n                        justify-content: end;\n                        align-items: center;\n\n                        img {\n                            width: 100%;\n                            height: auto;\n                            display: block;\n                        }\n                    }\n                }\n            }\n\n            #information {\n                position: relative;\n\n                .inside {\n                    width: 98%;\n                    margin: auto;\n                    padding: 20px 0 80px;\n                    box-sizing: border-box;\n\n                    @media (max-width: 767px) {\n                        padding: 40px 20px;\n                    }\n\n                    .information-grid-wrapper, .information-scroll-wrapper {\n                        display: grid;\n                        grid-template-columns: repeat(2, 1fr);\n                        \/* grid-template-columns: repeat(3, 1fr); *\/\n                        gap: 20px;\n\n                        @media (max-width: 1023px) {\n                            \/* grid-template-columns: repeat(2, 1fr); *\/\n                        }\n\n                        @media (max-width: 767px) {\n                            grid-template-columns: 1fr;\n                            display: none;\n                        }\n\n                        .information-card {\n                            padding: 20px;\n                            height: 28em;\n                            display: flex;\n                            flex-direction: column;\n                            justify-content: end;\n\n                            .information-image-wrapper {\n                                width: 100%;\n                                height: auto;\n                                max-width: 70%;\n                                margin-bottom: 20px;\n                                margin-inline: auto;\n\n                                img {\n                                    width: 100%;\n                                    height: auto;\n                                    display: block;\n                                }\n                            }\n\n                            .information-title {\n                                font-family: \"Kostic - Roc Grotesk Condensed Bold\", Arial, Helvetica, sans-serif;\n                                font-size: clamp(1.75rem, 2.288vw + 1.158rem, 3.625rem);\n                                color: white;\n                                margin: 0;\n                                margin-bottom: 12px;\n                                line-height: 100%;\n                                text-transform: uppercase;\n                                text-wrap: balance;\n                            }\n\n                            .information-content {\n                                display: flex;\n                                flex-direction: column;\n                                gap: 12px;\n\n                                .information-description {\n                                    font-family: Grostesk-Regular, Arial, Helvetica, sans-serif;\n                                    font-size: clamp(0.75rem, 0.458vw + 0.631rem, 1.125rem);\n                                    color: white!important;\n                                    margin-top: 0;\n                                    margin-bottom: 20px;\n                                    line-height: 120%;\n                                }\n\n                                button {\n                                    display: inline-block;\n                                    border: 2px solid #fff;\n                                    padding: 4px 16px;\n                                    color: black;\n                                    background-color: #fff;\n                                    text-decoration: none;\n                                    width: fit-content;\n                                    font-size: clamp(0.875rem, 0.305vw + 0.918rem, 1.125rem);\n                                    font-family: Grostesk-Medium, Arial, Helvetica, sans-serif;\n                                }\n                            }\n                        }\n\n                        .information-card:hover button {\n                            border: 2px solid #fff;\n                            background-color: transparent;\n                            color: #fff;\n                        }\n                    }\n\n                    .information-controller {\n                        display: none;\n                        align-items: center;\n                        gap: 12px;\n                        margin-top: 30px;\n\n                        @media (max-width: 767px) {\n                            display: flex;\n                        }\n\n                        .information-nav {\n                            display: flex;\n                            align-items: center;\n                            gap: 24px;\n\n                            .cta {\n                                width: 32px;\n                                height: 32px;\n                                display: flex;\n                                justify-content: center;\n                                align-items: center;\n                                padding: 0;\n\n                                svg {\n                                    width: 12px;\n                                    height: 22px;\n                                    stroke: #fff;\n                                }\n\n                                &:disabled {\n                                    opacity: 0.5;\n                                    cursor: not-allowed;\n                                }\n                            }\n                        }\n\n                        .information-line {\n                            width: 100%;\n                            height: 4px;\n                            background-color: #e0e0e0;\n                            position: relative;\n\n                            .information-line-progress {\n                                width: 0%;\n                                height: 100%;\n                                background-color: black;\n                                position: absolute;\n                                top: 0;\n                                left: 0;\n                            }\n                        }\n                    }\n\n                    .information-scroll-wrapper {\n                        display: none;\n\n                        @media (max-width: 767px) {\n                            display: block;\n                        }\n                    }\n                }\n            }\n\n            #product-categories {\n                position: relative;\n\n                .inside {\n                    position: relative;\n\n                    .title-wrapper {\n                        border-top: 1.5px solid var(--jblorange);\n                        border-bottom: 1.5px solid var(--jblorange);\n                        padding: 20px 0 10px;\n\n                        .title-wrapper-inner {\n                            max-width: 95%;\n                            margin: auto;\n\n                            .title-section {\n                                font-size: clamp(40px, 5vw, 72px);\n                                margin: 0;\n                                color: #000;\n                                text-transform: uppercase;\n                                font-weight: 700;\n                                line-height: 100%;\n                                font-family: \"Kostic - Roc Grotesk Condensed Medium\", sans-serif;\n                            }\n                        }\n                    }\n\n                    .categories-wrapper {\n                        padding: 0 0 60px;\n\n                        .categories-inner {\n                            display: flex;\n\n                            .category-item {\n                                display: flex;\n                                flex-direction: column;\n                                align-items: center;\n                                text-align: center;\n                                padding: 20px;\n\n                                .category-image-wrapper {\n                                    width: 100%;\n                                    height: auto;\n                                    margin-bottom: 20px;\n\n                                    img {\n                                        width: 100%;\n                                        height: auto;\n                                        display: block;\n                                    }\n                                }\n\n                                .category-title {\n                                    font-family: Grostesk-Medium, Arial, Helvetica, sans-serif;\n                                    font-size: clamp(0.75rem, 0.458vw + 0.631rem, 1.125rem);\n                                    color: black;\n                                    margin-top: 0;\n\n                                    &:after {\n                                        font-family: var(--font-icon);\n                                        font-weight: 400;\n                                        font-style: normal;\n                                        font-size: 1em;\n                                        line-height: 1;\n                                        letter-spacing: normal;\n                                        text-transform: none;\n                                        display: inline-block;\n                                        white-space: nowrap;\n                                        word-wrap: normal;\n                                        direction: ltr;\n                                        vertical-align: sub;\n                                        -webkit-font-feature-settings: \"liga\";\n                                        -webkit-font-smoothing: antialiased;\n                                        font-variation-settings: \"FILL\" 1;\n                                        transition: transform var(--ds-transition);\n                                        will-change: transform clip-path;\n                                        content: \"arrow_forward\";\n                                        font-size: 1.2em;\n                                        margin-left: 3px;\n                                    }\n                                }\n                            }\n\n                            .category-item:not(:last-child) {\n                                border-right: 1px solid var(--jblorange);\n                            }\n\n                            .category-item:hover .category-title:after {\n                                margin-left: 7px;\n                            }\n                        }\n\n                        .categories-controller {\n                            width: 95%;\n                            margin: auto;\n                            margin-top: 30px;\n                            display: flex;\n                            align-items: center;\n                            gap: 12px;\n\n                            .categories-nav {\n                                display: flex;\n                                align-items: center;\n                                gap: 24px;\n\n                                .cta {\n                                    width: 32px;\n                                    height: 32px;\n                                    display: flex;\n                                    justify-content: center;\n                                    align-items: center;\n                                    padding: 0;\n\n                                    svg {\n                                        width: 12px;\n                                        height: 22px;\n                                        stroke: #fff;\n                                    }\n\n                                    &:disabled {\n                                        opacity: 0.5;\n                                        cursor: not-allowed;\n                                    }\n                                }\n                            }\n\n                            .categories-line {\n                                width: 100%;\n                                height: 4px;\n                                background-color: #e0e0e0;\n                                position: relative;\n\n                                .categories-line-progress {\n                                    width: 0%;\n                                    height: 100%;\n                                    background-color: black;\n                                    position: absolute;\n                                    top: 0;\n                                    left: 0;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            #product-recommendation {\n                background-color: #ffffff;\n                padding: 60px 0 30px 0;\n                position: relative;\n\n                @media (max-width: 768px) {\n                    padding-top: 40px;\n                    padding-bottom: 20px;\n                }\n\n                .inside {\n                    .title-section {\n                        text-align: center;\n                        color: #000000;\n                        font-family: \"Kostic - Roc Grotesk Condensed Black\", Arial, Helvetica, sans-serif;\n                        text-transform: uppercase;\n                        font-size: clamp(34px, calc(2.125rem + ((1vw - 3.7px) * 2.8387)), 78px);\n                        min-height: 0vw;\n                        margin-bottom: 0;\n                        letter-spacing: 6px;\n                    }\n\n                    a.cta {\n                        color: white;\n                        display: block;\n                        background-color: #ff3400;\n                        width: fit-content;\n                        padding: 10px 20px;\n                        border-radius: 50px;\n                        line-height: 100%;\n                        margin: 0 auto;\n                        text-transform: uppercase;\n                        font-family: \"Kostic - Roc Grotesk Bold\", Arial, Helvetica, sans-serif;\n                        font-size: clamp(14px, calc(0.875rem + ((1vw - 3.93px) * 0.8674)), 21px);\n                        min-height: 0vw;\n                        \/* margin-top: 50px; *\/\n\n                        @media (max-width: 768px) {\n                            \/* margin-top: 40px; *\/\n                            font-family: \"Kostic - Roc Grotesk Medium\", Arial, Helvetica, sans-serif;\n                        }\n                    }\n\n                    .promotion {\n                        background-color: white;\n                        margin: 8px !important;\n                        display: flex;\n                        flex-direction: column;\n                    }\n\n                     .promotion>div {\n                        display: flex;\n                        flex-direction: column;\n                        height: 100%;\n                        justify-content: space-between;\n                    }\n\n                    .btn-switcher {\n                        display: flex;\n\n                        .mycta {\n                            color: white;\n                            width: 50%;\n                            padding: 10px;\n                            font-family: \"Kostic - Roc Grotesk Condensed Black\", Arial, Helvetica, sans-serif;\n                            text-transform: uppercase;\n                            font-size: clamp(24px, calc(1.5rem + ((1vw - 3.93px) * 2.4783)), 44px);\n                            min-height: 0vw;\n\n                            @media (max-width: 768px) {\n                                padding: 20px;\n                            }\n                        }\n\n                        button {\n                            will-change: opacity;\n                            opacity: 0.4;\n                        }\n\n                        [data-lists=\"her\"] {\n                            background-color: #8aaeff;\n                        }\n\n                        [data-lists=\"him\"] {\n                            background-color: #83b97a;\n                        }\n\n                        [data-lists=\"kids\"] {\n                            background-color: #ff7f00;\n                        }\n\n                        .selected {\n                            opacity: 1;\n                        }\n                    }\n\n                    .product-container-xmas {\n                        background-color: white;\n\n                        .title-best {\n                            font-size: clamp(34px, calc(2.125rem + ((1vw - 3.93px) * -1.2392)), 24px);\n                            min-height: 0vw;\n                            font-family: Grostesk-Bold, Arial, Helvetica, sans-serif;\n                            text-transform: uppercase;\n                            text-align: center;\n                            padding: 40px;\n                            letter-spacing: 5px;\n                            position: relative;\n                            margin: 0;\n\n                            @media (max-width: 768px) {\n                                padding: 35px;\n                            }\n\n                            &::after {\n                                content: \"\";\n                                position: absolute;\n                                bottom: 30%;\n                                background-color: #F04C24;\n                                width: 120px;\n                                height: 4px;\n                                left: 50%;\n                                transform: translateX(-50%);\n\n                                @media (max-width: 768px) {\n                                    width: 164px;\n                                    height: 5px;\n                                    bottom: 25%;\n                                }\n                            }\n                        }\n                    }\n\n                    .product-recom {\n                        min-height: 529px;\n                        position: relative;\n                        background-color: white;\n                        padding-bottom: 100px;\n                        padding-top: 20px;\n\n                        @media (max-width: 768px) {\n                            padding-bottom: 50px;\n                            min-height: 346px;\n                        }\n\n                        &::before,\n                        &::after {\n                            content: '';\n                            position: absolute;\n                            top: 0;\n                            width: 10%;\n                            height: 100%;\n                            z-index: 2;\n                            pointer-events: none;\n                        }\n\n                        &::before {\n                            left: 0;\n                            background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 100%);\n                        }\n\n                        &::after {\n                            right: 0;\n                            background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 100%);\n                        }\n\n                        .prev-btn, .prev-btn-special,\n                        .next-btn, .next-btn-special {\n                            position: absolute;\n                            top: 50%;\n                            transform: translateY(-50%);\n                            z-index: 3;\n                        }\n\n                        .prev-btn, .prev-btn-special {\n                            left: 4%;\n                        }\n\n                        .next-btn, .next-btn-special {\n                            right: 4%;\n                        }\n\n                        #recommendedProducts, #specialOffers {\n                            width: 85%;\n                            margin: 0 auto;\n                        }\n                    }\n                }\n            }\n        }\n    <\/style>\n    <div class=\"our-story-80th\">\n        <section id=\"hero\">\n            <div class=\"inside\">\n                <div class=\"img-wrapper\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-scaled.webp\" alt=\"Hero Background 80th\" class=\"is-desktop\">                    <img fetchpriority=\"high\" decoding=\"async\" width=\"750\" height=\"1242\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile.webp\" class=\"is-mobile\" alt=\"Hero Background 80th\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile.webp 750w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-181x300.webp 181w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-618x1024.webp 618w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-7x12.webp 7w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-220x364.webp 220w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-516x855.webp 516w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-600x994.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-539x892.webp 539w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-404x669.webp 404w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-344x570.webp 344w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-300x497.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-106x175.webp 106w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-227x376.webp 227w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-214x355.webp 214w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-375x621.webp 375w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-348x576.webp 348w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-280x463.webp 280w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-279x462.webp 279w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-249x412.webp 249w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-435x721.webp 435w, \/wp-content\/uploads\/2026\/06\/ourstory80th-hero-bg-mobile-194x322.webp 194w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/>                <\/div>\n                <div class=\"text-wrapper\">\n                    <div class=\"text-wrapper-inner\">\n                        <div class=\"logo-wrapper\">\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-logo.webp\" alt=\"Our Story 80th Logo\">                        <\/div>\n                        <h1 class=\"title-section hidden\">80 Years Powering Voices<\/h1>\n                        <a href=\"#\"\n                            title=\"Explore Anniversary Collection\"\n                            class=\"cta mycta\">\n                            Explore Anniversary Collection                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"intro\">\n            <div class=\"inside\">\n                <p class=\"description-section\">\n                    For over 80 years, JBL has been behind the sound that fills arenas, fuels creators, and brings music into everyday life. From the world\u2019s biggest stages to the most personal moments, helping artists, creators, and fans share their sound.                <\/p>\n\n                <h2 class=\"title-section\">\n                    This is JBL.                <\/h2>\n            <\/div>\n\n            <div class=\"decor\">\n                <div class=\"mics\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-intro-decormics.webp\" alt=\"Mics Decoration\" class=\"is-desktop\">                <\/div>\n\n                <div class=\"made-to-be-heard\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-intro-decormadetobeheard.webp\" alt=\"Made To Be Heard Decoration\">                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"trailer\">\n            <div class=\"inside\">\n                <iframe width=\"930\" height=\"523\" src=\"https:\/\/www.youtube.com\/embed\/iu8eeLiBisU\" title=\"80 Years Powering Voices | JBL\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n            <\/div>\n        <\/section>\n\n        <section id=\"histories\">\n            <div class=\"inside\">\n                <h2 class=\"title-section\">\n                    Bold From <span>The Beginning<\/span>                <\/h2>\n\n                <div class=\"histories-wrapper\">\n                    <div class=\"histories-wrapper-inner\">\n                                                    <div class=\"history-item\">\n                                <div class=\"history-card\">\n                                    <div class=\"history-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-hellojbl.webp\" alt=\"Hello JBL Image\">                                    <\/div>\n\n                                    <div class=\"content-wrapper\">\n                                        <div class=\"decor\">\n                                            <div class=\"history-decor-wrapper\">\n                                                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-handshakehearttangerinecoloroutline.svg\" alt=\"Hello JBL Decoration\">                                            <\/div>\n                                        <\/div>\n\n                                        <span class=\"history-year\">1946<\/span>\n                                        <h3 class=\"history-title\">Hello JBL<\/h3>\n                                        <p class=\"history-description\">James B. Lansing (JBL!) builds loudspeakers designed to carry sound farther, clearer, louder. JBL is born.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"history-item\">\n                                <div class=\"history-card\">\n                                    <div class=\"history-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-inthestudio.webp\" alt=\"In the Studio Image\">                                    <\/div>\n\n                                    <div class=\"content-wrapper\">\n                                        <div class=\"decor\">\n                                            <div class=\"history-decor-wrapper\">\n                                                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-soundmixingmatchacoloroutline.svg\" alt=\"In the Studio Decoration\">                                            <\/div>\n                                        <\/div>\n\n                                        <span class=\"history-year\">1962<\/span>\n                                        <h3 class=\"history-title\">In the Studio<\/h3>\n                                        <p class=\"history-description\">Artists record the tracks. Engineers shape the mix. And JBL studio monitors fill the recording studio as the songs come alive.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"history-item\">\n                                <div class=\"history-card\">\n                                    <div class=\"history-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-woodstock.webp\" alt=\"Woodstock Image\">                                    <\/div>\n\n                                    <div class=\"content-wrapper\">\n                                        <div class=\"decor\">\n                                            <div class=\"history-decor-wrapper\">\n                                                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-peaceperiwinklecoloroutline.svg\" alt=\"Woodstock Decoration\">                                            <\/div>\n                                        <\/div>\n\n                                        <span class=\"history-year\">1969<\/span>\n                                        <h3 class=\"history-title\">Woodstock<\/h3>\n                                        <p class=\"history-description\">Peace, love and loud. Music fills the fields around Woodstock, carried across the legendary crowd through JBL speakers.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"history-item\">\n                                <div class=\"history-card\">\n                                    <div class=\"history-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-vroomvroom.webp\" alt=\"Vroom Vroom Image\">                                    <\/div>\n\n                                    <div class=\"content-wrapper\">\n                                        <div class=\"decor\">\n                                            <div class=\"history-decor-wrapper\">\n                                                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-directionsmatchacoloroutline.svg\" alt=\"Vroom Vroom Decoration\">                                            <\/div>\n                                        <\/div>\n\n                                        <span class=\"history-year\">1980<\/span>\n                                        <h3 class=\"history-title\">Vroom Vroom<\/h3>\n                                        <p class=\"history-description\">Windows down. Highway stretching ahead. JBL sound is officially in cars, so drivers can tune into unfiltered sound, wherever the road takes them.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"history-item\">\n                                <div class=\"history-card\">\n                                    <div class=\"history-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-turnuptheaction.webp\" alt=\"Turn Up the Action Image\">                                    <\/div>\n\n                                    <div class=\"content-wrapper\">\n                                        <div class=\"decor\">\n                                            <div class=\"history-decor-wrapper\">\n                                                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-diskperiwinklecoloroutline.svg\" alt=\"Turn Up the Action Decoration\">                                            <\/div>\n                                        <\/div>\n\n                                        <span class=\"history-year\">2020<\/span>\n                                        <h3 class=\"history-title\">Turn Up the Action<\/h3>\n                                        <p class=\"history-description\">Footsteps behind you. Teammates call from your left. An explosion ahead. JBL Quantum debuts to put players inside the action.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"history-item\">\n                                <div class=\"history-card\">\n                                    <div class=\"history-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-jblmusicacademy.webp\" alt=\"JBL Music Academy Image\">                                    <\/div>\n\n                                    <div class=\"content-wrapper\">\n                                        <div class=\"decor\">\n                                            <div class=\"history-decor-wrapper\">\n                                                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-histories-brandedheadphonestangerinecoloroutline.svg\" alt=\"JBL Music Academy Decoration\">                                            <\/div>\n                                        <\/div>\n\n                                        <span class=\"history-year\">2022<\/span>\n                                        <h3 class=\"history-title\">JBL Music Academy<\/h3>\n                                        <p class=\"history-description\">JBL and Martin Garrix invite emerging artists to the JBL Music Academy, where they build tracks, explore the industry, and step into the spotlight.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\n                    <div class=\"histories-controller\">\n                        <div class=\"histories-nav\">\n                            <button class=\"cta prev-btn\" disabled\n aria-label=\"Previous History\">\n                                <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M10.1211 1.5L1.75578 10.7948C1.39998 11.1901 1.41588 11.7948 1.79196 12.1709L10.1211 20.5\"\n                                        stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                                <\/svg>\n                            <\/button>\n                            <button class=\"cta next-btn\"\n                                aria-label=\"Next History\">\n                                <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M1.5 1.5L9.86532 10.7948C10.2211 11.1901 10.2052 11.7948 9.82913 12.1709L1.5 20.5\"\n                                        stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                        <div class=\"histories-line\">\n                            <div class=\"histories-line-progress\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"e-catalog\">\n            <div class=\"inside\">\n                <div style=\"position: relative; width: 100%; padding-top: 56.25%; \/* 16:9 *\/\">\n                    <iframe\n                        src=\"https:\/\/heyzine.com\/flip-book\/2280188dfa.html\"\n                        style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;\"\n                        allowfullscreen\n loading=\"lazy\">\n                    <\/iframe>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"promo\">\n            <div class=\"inside\">\n                <h2 class=\"title-section\">\n                    Anniversary Specials                <\/h2>\n\n                <div class=\"product-grid-wrapper\" style=\"display: none;\">\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp\" class=\"attachment-full size-full\" alt=\"Anniversary Home Kit Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Anniversary Home Kit<\/h3>\n                                <p class=\"product-description\">Go 4 + Bar 300MK2<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Anniversary Home Kit\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp\" class=\"attachment-full size-full\" alt=\"Legendary Party Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Legendary Party Bundle<\/h3>\n                                <p class=\"product-description\">Partybox 520 + Partylight Stick<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Legendary Party Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp\" class=\"attachment-full size-full\" alt=\"Open Sound Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Open Sound Bundle<\/h3>\n                                <p class=\"product-description\">Soundgear Clips + Charge 6<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Open Sound Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp\" class=\"attachment-full size-full\" alt=\"Sound Evolution Travel Pack Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Sound Evolution Travel Pack<\/h3>\n                                <p class=\"product-description\">Grip + Tune 780NC<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Sound Evolution Travel Pack\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n\n                <div class=\"product-scroll-wrapper\" style=\"display: none;\">\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp\" class=\"attachment-full size-full\" alt=\"Anniversary Home Kit Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Anniversary Home Kit<\/h3>\n                                <p class=\"product-description\">Go 4 + Bar 300MK2<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Anniversary Home Kit\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp\" class=\"attachment-full size-full\" alt=\"Legendary Party Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Legendary Party Bundle<\/h3>\n                                <p class=\"product-description\">Partybox 520 + Partylight Stick<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Legendary Party Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp\" class=\"attachment-full size-full\" alt=\"Open Sound Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Open Sound Bundle<\/h3>\n                                <p class=\"product-description\">Soundgear Clips + Charge 6<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Open Sound Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp\" class=\"attachment-full size-full\" alt=\"Sound Evolution Travel Pack Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Sound Evolution Travel Pack<\/h3>\n                                <p class=\"product-description\">Grip + Tune 780NC<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Sound Evolution Travel Pack\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n\n                <div class=\"product-scroll-controller\" style=\"display: none;\">\n                    <div class=\"product-scroll-nav\">\n                        <button class=\"cta prev-btn-product-scroll\" disabled\n aria-label=\"Previous History\">\n                            <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path\n                                    d=\"M10.1211 1.5L1.75578 10.7948C1.39998 11.1901 1.41588 11.7948 1.79196 12.1709L10.1211 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                        <button class=\"cta next-btn-product-scroll\"\n                            aria-label=\"Next History\">\n                            <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M1.5 1.5L9.86532 10.7948C10.2211 11.1901 10.2052 11.7948 9.82913 12.1709L1.5 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"product-scroll-line\">\n                        <div class=\"product-scroll-line-progress\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"product-recom\">\n                    <button class=\"prev-btn cta\">\n                        <svg width=\"58\" height=\"59\" viewbox=\"0 0 58 59\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <rect width=\"58\" height=\"58\" rx=\"29\" transform=\"matrix(-1 0 0 1 58 0.507812)\" fill=\"#FFFFFF\" \/>\n                            <path\n                                d=\"M44.1797 29.2656C45.0081 29.2656 45.6797 29.9372 45.6797 30.7656C45.6797 31.5941 45.0081 32.2656 44.1797 32.2656V29.2656ZM12.7597 31.8263C12.1739 31.2405 12.1739 30.2908 12.7597 29.705L22.3056 20.159C22.8914 19.5732 23.8411 19.5732 24.4269 20.159C25.0127 20.7448 25.0127 21.6946 24.4269 22.2803L15.9416 30.7656L24.4269 39.2509C25.0127 39.8367 25.0127 40.7864 24.4269 41.3722C23.8411 41.958 22.8914 41.958 22.3056 41.3722L12.7597 31.8263ZM44.1797 32.2656H13.8203V29.2656H44.1797V32.2656Z\"\n                                fill=\"black\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div id=\"recommendedProducts\" class=\"popularProductsHer her owl-carousel owl-carousel-1 owl-theme\">\n                                                    \n                                                                                                                                        <div>\n                                            <div class=\"promotion hover-visible-area\">\n                                                <div>\n                                                    <div>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/\">\n                                                            <div class=\"promotion-product-image\">\n\n                                                                <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"\/wp-content\/uploads\/2025\/05\/originals-300x300.png\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" srcset=\"\/wp-content\/uploads\/2025\/05\/originals-300x300.png 300w, \/wp-content\/uploads\/2025\/05\/originals-1024x1024.png 1024w, \/wp-content\/uploads\/2025\/05\/originals-150x150.png 150w, \/wp-content\/uploads\/2025\/05\/originals-768x768.png 768w, \/wp-content\/uploads\/2025\/05\/originals-1536x1536.png 1536w, \/wp-content\/uploads\/2025\/05\/originals-12x12.png 12w, \/wp-content\/uploads\/2025\/05\/originals-855x855.png 855w, \/wp-content\/uploads\/2025\/05\/originals-800x800.png 800w, \/wp-content\/uploads\/2025\/05\/originals-600x600.png 600w, \/wp-content\/uploads\/2025\/05\/originals-100x100.png 100w, \/wp-content\/uploads\/2025\/05\/originals-50x50.png 50w, \/wp-content\/uploads\/2025\/05\/originals-892x892.png 892w, \/wp-content\/uploads\/2025\/05\/originals-669x669.png 669w, \/wp-content\/uploads\/2025\/05\/originals-570x570.png 570w, \/wp-content\/uploads\/2025\/05\/originals.png 1605w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n                                                                                                                                                                                                            <div class=\"blurb-position\">\n                                                                            <div>\n                                                                                <span\n                                                                                    class=\"blurb-item\">10%<\/span>\n                                                                            <\/div>\n                                                                        <\/div>\n                                                                                                                                    \n                                                                <div class=\"promotion-product-image-fg\"><\/div>\n                                                            <\/div>\n                                                        <\/a>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/\">\n                                                            <div class=\"promotion-product-name\">\n                                                                JBL Flip 7                                                            <\/div>\n                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"color-price-wrapper\">\n                                                    <div>\n                                                        <div class=\"promotion-product-colors-container\">\n                                                            <ul class=\"product-colors-wrapper\">\n                                                                <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/?color=black\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black\" title=\"black\" data-title=\"black\" data-value=\"black\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#000000;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/?color=black-orange\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black-orange\" title=\"black-orange\" data-title=\"black-orange\" data-value=\"black-orange\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:https:\/\/jblstore.co.id\/wp-content\/uploads\/2024\/12\/black-orange-colors.webp;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/?color=blue\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-blue\" title=\"blue\" data-title=\"blue\" data-value=\"blue\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#396bdf;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/?color=pink\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-pink\" title=\"pink\" data-title=\"pink\" data-value=\"pink\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#ffc0cb;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/?color=purple\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-purple\" title=\"purple\" data-title=\"purple\" data-value=\"purple\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#552583;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/\" style=\"text-decoration: none;\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-red\" title=\"more\" data-title=\"more\" data-value=\"red\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><div style=\"margin-top: -3px; color: var(--colorMain); display: flex; justify-content: center; align-items: center; height: 100%;\">+<\/div><\/div><\/li><\/a>                                                            <\/ul>\n                                                        <\/div>\n                                                                                                                    <div class=\"promotion-product-price\">\n                                                                <ins><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>2.519.100<\/bdi><\/span><\/ins> <del><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>2.799.000<\/bdi><\/span><\/del>                                                            <\/div>\n                                                                                                            <\/div>\n                                                    <div class=\"button-add-to-cart-buy-now\">\n                                                        <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-flip-7\/\" class=\"cta mycta\">\n                                                            Shop Now                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                                                                                                                                    \n                                                                                                                                        <div>\n                                            <div class=\"promotion hover-visible-area\">\n                                                <div>\n                                                    <div>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-pulse-5\/\">\n                                                            <div class=\"promotion-product-image\">\n\n                                                                <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"\/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-300x300.webp\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" srcset=\"\/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-300x300.webp 300w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-150x150.webp 150w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-768x768.webp 768w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-12x12.webp 12w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-855x855.webp 855w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-800x800.webp 800w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-600x600.webp 600w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1-100x100.webp 100w, \/wp-content\/uploads\/2024\/09\/JBL2520Pulse252052520_Black_l41ydmrf1.webp 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n                                                                                                                                                                                                            <div class=\"blurb-position\">\n                                                                            <div>\n                                                                                <span\n                                                                                    class=\"blurb-item\">25%<\/span>\n                                                                            <\/div>\n                                                                        <\/div>\n                                                                                                                                    \n                                                                <div class=\"promotion-product-image-fg\"><\/div>\n                                                            <\/div>\n                                                        <\/a>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-pulse-5\/\">\n                                                            <div class=\"promotion-product-name\">\n                                                                JBL Pulse 5                                                            <\/div>\n                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"color-price-wrapper\">\n                                                    <div>\n                                                        <div class=\"promotion-product-colors-container\">\n                                                            <ul class=\"product-colors-wrapper\">\n                                                                <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-pulse-5\/?color=black\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black\" title=\"black\" data-title=\"black\" data-value=\"black\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#000000;\"><\/span><\/div><\/li><\/a>                                                            <\/ul>\n                                                        <\/div>\n                                                                                                                    <div class=\"promotion-product-price\">\n                                                                <ins><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>3.599.250<\/bdi><\/span><\/ins> <del><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>4.799.000<\/bdi><\/span><\/del>                                                            <\/div>\n                                                                                                            <\/div>\n                                                    <div class=\"button-add-to-cart-buy-now\">\n                                                        <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-pulse-5\/\" class=\"cta mycta\">\n                                                            Shop Now                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                                                                                                                                    \n                                                                                                                                        <div>\n                                            <div class=\"promotion hover-visible-area\">\n                                                <div>\n                                                    <div>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-one-m2\/\">\n                                                            <div class=\"promotion-product-image\">\n\n                                                                <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"\/wp-content\/uploads\/2024\/09\/JBL2520Tour2520One2520M2_Black_grkpi1evr-600x600-1-300x300.webp\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" srcset=\"\/wp-content\/uploads\/2024\/09\/JBL2520Tour2520One2520M2_Black_grkpi1evr-600x600-1-300x300.webp 300w, \/wp-content\/uploads\/2024\/09\/JBL2520Tour2520One2520M2_Black_grkpi1evr-600x600-1-150x150.webp 150w, \/wp-content\/uploads\/2024\/09\/JBL2520Tour2520One2520M2_Black_grkpi1evr-600x600-1-12x12.webp 12w, \/wp-content\/uploads\/2024\/09\/JBL2520Tour2520One2520M2_Black_grkpi1evr-600x600-1-100x100.webp 100w, \/wp-content\/uploads\/2024\/09\/JBL2520Tour2520One2520M2_Black_grkpi1evr-600x600-1.webp 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n                                                                                                                                                                                                            <div class=\"blurb-position\">\n                                                                            <div>\n                                                                                <span\n                                                                                    class=\"blurb-item\">50%<\/span>\n                                                                            <\/div>\n                                                                        <\/div>\n                                                                                                                                    \n                                                                <div class=\"promotion-product-image-fg\"><\/div>\n                                                            <\/div>\n                                                        <\/a>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-one-m2\/\">\n                                                            <div class=\"promotion-product-name\">\n                                                                JBL Tour One M2                                                            <\/div>\n                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"color-price-wrapper\">\n                                                    <div>\n                                                        <div class=\"promotion-product-colors-container\">\n                                                            <ul class=\"product-colors-wrapper\">\n                                                                <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-one-m2\/?color=black\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black\" title=\"black\" data-title=\"black\" data-value=\"black\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#000000;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-one-m2\/?color=pearl-champagne\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-pearl-champagne\" title=\"pearl-champagne\" data-title=\"pearl-champagne\" data-value=\"pearl-champagne\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#cdb193;\"><\/span><\/div><\/li><\/a>                                                            <\/ul>\n                                                        <\/div>\n                                                                                                                    <div class=\"promotion-product-price\">\n                                                                <ins><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>2.749.500<\/bdi><\/span><\/ins> <del><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>5.499.000<\/bdi><\/span><\/del>                                                            <\/div>\n                                                                                                            <\/div>\n                                                    <div class=\"button-add-to-cart-buy-now\">\n                                                        <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-one-m2\/\" class=\"cta mycta\">\n                                                            Shop Now                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                                                                                                                                    \n                                                                                                                                        <div>\n                                            <div class=\"promotion hover-visible-area\">\n                                                <div>\n                                                    <div>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/\">\n                                                            <div class=\"promotion-product-image\">\n\n                                                                <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"\/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-300x300.webp\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" srcset=\"\/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-300x300.webp 300w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-1024x1024.webp 1024w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-150x150.webp 150w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-768x768.webp 768w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-1536x1536.webp 1536w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-12x12.webp 12w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-855x855.webp 855w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-800x800.webp 800w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-600x600.webp 600w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-100x100.webp 100w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-50x50.webp 50w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-892x892.webp 892w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-669x669.webp 669w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black-570x570.webp 570w, \/wp-content\/uploads\/2025\/07\/ls-jbl-sense-lite-product-image-hero-black.webp 1605w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n                                                                                                                                                                                                            <div class=\"blurb-position\">\n                                                                            <div>\n                                                                                <span\n                                                                                    class=\"blurb-item\">10%<\/span>\n                                                                            <\/div>\n                                                                        <\/div>\n                                                                                                                                    \n                                                                <div class=\"promotion-product-image-fg\"><\/div>\n                                                            <\/div>\n                                                        <\/a>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/\">\n                                                            <div class=\"promotion-product-name\">\n                                                                JBL Sense Lite                                                            <\/div>\n                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"color-price-wrapper\">\n                                                    <div>\n                                                        <div class=\"promotion-product-colors-container\">\n                                                            <ul class=\"product-colors-wrapper\">\n                                                                <a href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/?color=beige\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-beige\" title=\"beige\" data-title=\"beige\" data-value=\"beige\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#f5f5dc;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/?color=black\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black\" title=\"black\" data-title=\"black\" data-value=\"black\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#000000;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/?color=blue\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-blue\" title=\"blue\" data-title=\"blue\" data-value=\"blue\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#396bdf;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/?color=purple\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-purple\" title=\"purple\" data-title=\"purple\" data-value=\"purple\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#552583;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/?color=white\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-white\" title=\"white\" data-title=\"white\" data-value=\"white\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#ffffff;\"><\/span><\/div><\/li><\/a>                                                            <\/ul>\n                                                        <\/div>\n                                                                                                                    <div class=\"promotion-product-price\">\n                                                                <ins><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>1.979.100<\/bdi><\/span><\/ins> <del><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>2.199.000<\/bdi><\/span><\/del>                                                            <\/div>\n                                                                                                            <\/div>\n                                                    <div class=\"button-add-to-cart-buy-now\">\n                                                        <a href=\"https:\/\/jblstore.co.id\/en\/product\/sense-lite\/\" class=\"cta mycta\">\n                                                            Shop Now                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                                                                                                                                    \n                                                                                                                                        <div>\n                                            <div class=\"promotion hover-visible-area\">\n                                                <div>\n                                                    <div>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/\">\n                                                            <div class=\"promotion-product-image\">\n\n                                                                <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"\/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-300x300.webp\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" srcset=\"\/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-300x300.webp 300w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-1024x1024.webp 1024w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-150x150.webp 150w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-768x768.webp 768w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-1536x1536.webp 1536w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-12x12.webp 12w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-364x364.webp 364w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-855x855.webp 855w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-800x800.webp 800w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-600x600.webp 600w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-100x100.webp 100w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-50x50.webp 50w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-892x892.webp 892w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-669x669.webp 669w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-570x570.webp 570w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-175x175.webp 175w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-376x376.webp 376w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9-329x329.webp 329w, \/wp-content\/uploads\/2025\/10\/kg2qv1is3jgupw8c9sc9.webp 1605w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n                                                                                                                                                                                                            <div class=\"blurb-position\">\n                                                                            <div>\n                                                                                <span\n                                                                                    class=\"blurb-item\">10%<\/span>\n                                                                            <\/div>\n                                                                        <\/div>\n                                                                                                                                    \n                                                                <div class=\"promotion-product-image-fg\"><\/div>\n                                                            <\/div>\n                                                        <\/a>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/\">\n                                                            <div class=\"promotion-product-name\">\n                                                                JBL Endurance Run 3 BT                                                            <\/div>\n                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"color-price-wrapper\">\n                                                    <div>\n                                                        <div class=\"promotion-product-colors-container\">\n                                                            <ul class=\"product-colors-wrapper\">\n                                                                <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/?color=black\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black\" title=\"black\" data-title=\"black\" data-value=\"black\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#000000;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/?color=blue\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-blue\" title=\"blue\" data-title=\"blue\" data-value=\"blue\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#396bdf;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/?color=purple\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-purple\" title=\"purple\" data-title=\"purple\" data-value=\"purple\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#552583;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/?color=white\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-white\" title=\"white\" data-title=\"white\" data-value=\"white\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#ffffff;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/?color=black-lime\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black-lime\" title=\"black-lime\" data-title=\"black-lime\" data-value=\"black-lime\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/12\/swatchImage_black_lime-1.webp;\"><\/span><\/div><\/li><\/a>                                                            <\/ul>\n                                                        <\/div>\n                                                                                                                    <div class=\"promotion-product-price\">\n                                                                <ins><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>854.100<\/bdi><\/span><\/ins> <del><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>949.000<\/bdi><\/span><\/del>                                                            <\/div>\n                                                                                                            <\/div>\n                                                    <div class=\"button-add-to-cart-buy-now\">\n                                                        <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-endurance-run-3-bt\/\" class=\"cta mycta\">\n                                                            Shop Now                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                                                                                                                                    \n                                                                                                                                        <div>\n                                            <div class=\"promotion hover-visible-area\">\n                                                <div>\n                                                    <div>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-pro-3\/\">\n                                                            <div class=\"promotion-product-image\">\n\n                                                                <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"\/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-300x300.webp\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" srcset=\"\/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-300x300.webp 300w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-1024x1024.webp 1024w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-150x150.webp 150w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-768x768.webp 768w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-1536x1536.webp 1536w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-2048x2048.webp 2048w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-12x12.webp 12w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-855x855.webp 855w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-800x800.webp 800w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-600x600.webp 600w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-100x100.webp 100w, \/wp-content\/uploads\/2024\/11\/01.LS-JBL-Tour-Pro-3-Product-Image-Case-Open-Black-50x50.webp 50w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n                                                                                                                                                                                                            <div class=\"blurb-position\">\n                                                                            <div>\n                                                                                <span\n                                                                                    class=\"blurb-item\">15%<\/span>\n                                                                            <\/div>\n                                                                        <\/div>\n                                                                                                                                    \n                                                                <div class=\"promotion-product-image-fg\"><\/div>\n                                                            <\/div>\n                                                        <\/a>\n                                                        <a class=\"promotion-link\" href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-pro-3\/\">\n                                                            <div class=\"promotion-product-name\">\n                                                                JBL Tour Pro 3                                                            <\/div>\n                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                                <div class=\"color-price-wrapper\">\n                                                    <div>\n                                                        <div class=\"promotion-product-colors-container\">\n                                                            <ul class=\"product-colors-wrapper\">\n                                                                <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-pro-3\/?color=black\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-black\" title=\"black\" data-title=\"black\" data-value=\"black\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#000000;\"><\/span><\/div><\/li><\/a><a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-pro-3\/?color=latte\"><li screen_reader_html_attrtooltip_html_attr class=\"variable-item color-variable-item color-variable-item-latte\" title=\"latte\" data-title=\"latte\" data-value=\"latte\" role=\"radio\" tabindex=\"0\"><div class=\"variable-item-contents\"><span class=\"variable-item-span variable-item-span-color\" style=\"background-color:#ae967a;\"><\/span><\/div><\/li><\/a>                                                            <\/ul>\n                                                        <\/div>\n                                                                                                                    <div class=\"promotion-product-price\">\n                                                                <ins><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>4.674.150<\/bdi><\/span><\/ins> <del><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">Rp<\/span>5.499.000<\/bdi><\/span><\/del>                                                            <\/div>\n                                                                                                            <\/div>\n                                                    <div class=\"button-add-to-cart-buy-now\">\n                                                        <a href=\"https:\/\/jblstore.co.id\/en\/product\/jbl-tour-pro-3\/\" class=\"cta mycta\">\n                                                            Shop Now                                                        <\/a>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                                                                                                                            <\/div>\n                    <button class=\"next-btn cta\">\n                        <svg width=\"58\" height=\"59\" viewbox=\"0 0 58 59\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <rect y=\"0.507812\" width=\"58\" height=\"58\" rx=\"29\" fill=\"#FFFFFF\" \/>\n                            <path\n                                d=\"M13.8203 29.2656C12.9919 29.2656 12.3203 29.9372 12.3203 30.7656C12.3203 31.5941 12.9919 32.2656 13.8203 32.2656V29.2656ZM45.2403 31.8263C45.8261 31.2405 45.8261 30.2908 45.2403 29.705L35.6944 20.159C35.1086 19.5732 34.1589 19.5732 33.5731 20.159C32.9873 20.7448 32.9873 21.6946 33.5731 22.2803L42.0584 30.7656L33.5731 39.2509C32.9873 39.8367 32.9873 40.7864 33.5731 41.3722C34.1589 41.958 35.1086 41.958 35.6944 41.3722L45.2403 31.8263ZM13.8203 32.2656H44.1797V29.2656H13.8203V32.2656Z\"\n                                fill=\"black\" \/>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n\n                <!-- <div class=\"product-grid-wrapper\">\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp\" class=\"attachment-full size-full\" alt=\"Anniversary Home Kit Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Anniversary Home Kit<\/h3>\n                                <p class=\"product-description\">Go 4 + Bar 300MK2<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Anniversary Home Kit\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp\" class=\"attachment-full size-full\" alt=\"Legendary Party Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Legendary Party Bundle<\/h3>\n                                <p class=\"product-description\">Partybox 520 + Partylight Stick<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Legendary Party Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp\" class=\"attachment-full size-full\" alt=\"Open Sound Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Open Sound Bundle<\/h3>\n                                <p class=\"product-description\">Soundgear Clips + Charge 6<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Open Sound Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp\" class=\"attachment-full size-full\" alt=\"Sound Evolution Travel Pack Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Sound Evolution Travel Pack<\/h3>\n                                <p class=\"product-description\">Grip + Tune 780NC<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Sound Evolution Travel Pack\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n\n                <div class=\"product-scroll-wrapper\">\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp\" class=\"attachment-full size-full\" alt=\"Anniversary Home Kit Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-anniversaryhomekit-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Anniversary Home Kit<\/h3>\n                                <p class=\"product-description\">Go 4 + Bar 300MK2<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Anniversary Home Kit\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp\" class=\"attachment-full size-full\" alt=\"Legendary Party Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-legendarypartybundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Legendary Party Bundle<\/h3>\n                                <p class=\"product-description\">Partybox 520 + Partylight Stick<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Legendary Party Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp\" class=\"attachment-full size-full\" alt=\"Open Sound Bundle Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-opensoundbundle-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Open Sound Bundle<\/h3>\n                                <p class=\"product-description\">Soundgear Clips + Charge 6<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Open Sound Bundle\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"product-item\">\n                            <div class=\"product-image-wrapper\">\n                                <img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"347\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp\" class=\"attachment-full size-full\" alt=\"Sound Evolution Travel Pack Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack.webp 782w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-300x133.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-768x341.webp 768w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-364x162.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-600x266.webp 600w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-175x78.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-376x167.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-284x126.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-497x221.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-576x256.webp 576w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-462x205.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-412x183.webp 412w, \/wp-content\/uploads\/2026\/06\/ourstory80th-promo-soundevolutiontravelpack-721x320.webp 721w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/>                            <\/div>\n                            <div class=\"product-info\">\n                                <h3 class=\"product-name\">Sound Evolution Travel Pack<\/h3>\n                                <p class=\"product-description\">Grip + Tune 780NC<br> Savings RP XXX | UP RP XXX<\/p>\n                                <a href=\"#\"\n                                    title=\"Sound Evolution Travel Pack\" class=\"cta mycta\">\n                                    Shop Now                                <\/a>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n\n                <div class=\"product-scroll-controller\">\n                    <div class=\"product-scroll-nav\">\n                        <button class=\"cta prev-btn-product-scroll\" disabled\n                            aria-label=\"Previous History\">\n                            <svg width=\"12\" height=\"22\" viewBox=\"0 0 12 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path\n                                    d=\"M10.1211 1.5L1.75578 10.7948C1.39998 11.1901 1.41588 11.7948 1.79196 12.1709L10.1211 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                        <button class=\"cta next-btn-product-scroll\"\n                            aria-label=\"Next History\">\n                            <svg width=\"12\" height=\"22\" viewBox=\"0 0 12 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M1.5 1.5L9.86532 10.7948C10.2211 11.1901 10.2052 11.7948 9.82913 12.1709L1.5 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"product-scroll-line\">\n                        <div class=\"product-scroll-line-progress\"><\/div>\n                    <\/div>\n                <\/div> -->\n            <\/div>\n        <\/section>\n\n        <section id=\"product-recommendation\" style=\"display: none;\">\n            <div class=\"inside\">\n                <h2 class=\"title-section\">\n                    Product Recommendation\n                <\/h2>\n                <div class=\"product-container-xmas\">\n                    <h3 class=\"title-best\">BEST SELLER<\/h3>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"moments\" style=\"display: none;\">\n            <div class=\"inside\">\n                <div class=\"title-wrapper\">\n                    <h2 class=\"title-section\">\n                        80 YEARS OF BEING LOUD                    <\/h2>\n\n                    <p class=\"description-section\">\n                        SHARE YOUR JBL MOMENTS                    <\/p>\n                <\/div>\n\n                <div class=\"moments-wrapper\">\n                    <div class=\"moments-controller\">\n                        <button class=\"cta prev-moments\" type=\"button\" aria-label=\"Previous video\">\n                            <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path\n                                    d=\"M10.1211 1.5L1.75578 10.7948C1.39998 11.1901 1.41588 11.7948 1.79196 12.1709L10.1211 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n\n                    <div class=\"moments-scroll-wrapper\">\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/06\/On-our-weekend-AGENDA-we-joined-@jblph-on-a-celebration-of-the-brands-80-year-milestone-of-mak.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/06\/WATCH-American-audio-brand-JBL-is-leaning-into-AI-assisted-karaoke-gaming-and-portable-entert.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                    <div>\n                                <div class=\"video-item\">\n                                    <video playsinline muted loop preload=\"metadata\">\n                                        <source src=\"\/wp-content\/uploads\/2026\/05\/Andrew_Round_1_In-Feed_Video_Live.mp4\" type=\"video\/mp4\">\n                                    <\/video>\n                                    <div class=\"control-wrapper\" data-theme=\"dark\">\n                                        <button class=\"js-playback\" data-state=\"playing\" aria-label=\"pause video\"><\/button>\n                                        <button class=\"mute js-playback\" data-state=\"paused\" aria-label=\"mute video\"><\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\n                    <div class=\"moments-controller\">\n                        <button class=\"cta next-moments\" type=\"button\" aria-label=\"Next video\">\n                            <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M1.5 1.5L9.86532 10.7948C10.2211 11.1901 10.2052 11.7948 9.82913 12.1709L1.5 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"social-media-wrapper\">\n                                            <a href=\"https:\/\/www.instagram.com\/jblindonesia\/\"\n                            title=\"Instagram\" class=\"social-media-item\" target=\"_blank\"\n                            rel=\"noopener\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"98\" height=\"98\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-ig.webp\" class=\"attachment-full size-full\" alt=\"Instagram Icon\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-ig.webp 98w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-ig-12x12.webp 12w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-ig-50x50.webp 50w\" sizes=\"(max-width: 98px) 100vw, 98px\" \/>                        <\/a>\n                                            <a href=\"https:\/\/www.tiktok.com\/@jblindonesiaofficial\"\n                            title=\"TikTok\" class=\"social-media-item\" target=\"_blank\"\n                            rel=\"noopener\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"98\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-tiktok.webp\" class=\"attachment-full size-full\" alt=\"TikTok Icon\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-tiktok.webp 99w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-tiktok-12x12.webp 12w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-tiktok-50x50.webp 50w\" sizes=\"(max-width: 99px) 100vw, 99px\" \/>                        <\/a>\n                                            <a href=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\"\n                            title=\"Facebook\" class=\"social-media-item\" target=\"_blank\"\n                            rel=\"noopener\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"98\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-fb.webp\" class=\"attachment-full size-full\" alt=\"Facebook Icon\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-fb.webp 99w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-fb-12x12.webp 12w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-fb-50x50.webp 50w\" sizes=\"(max-width: 99px) 100vw, 99px\" \/>                        <\/a>\n                                            <a href=\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"\n                            title=\"YouTube\" class=\"social-media-item\" target=\"_blank\"\n                            rel=\"noopener\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"98\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-yt.webp\" class=\"attachment-full size-full\" alt=\"YouTube Icon\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-moments-yt.webp 99w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-yt-12x12.webp 12w, \/wp-content\/uploads\/2026\/06\/ourstory80th-moments-yt-50x50.webp 50w\" sizes=\"(max-width: 99px) 100vw, 99px\" \/>                        <\/a>\n                                    <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"information\">\n            <div class=\"inside\">\n                <div class=\"information-grid-wrapper\">\n                                            <a class=\"information-card\" href=\"#e-catalog\" style=\"background-image: url('\/wp-content\/uploads\/2026\/06\/ourstory-informations-80yearspoweringvoices.webp');\" title=\"80 Year Powering Voices\">\n                                                            <h3 class=\"information-title\">80 Year Powering Voices<\/h3>\n                                                        <div class=\"information-content\">\n                                <p class=\"information-description\">The story doesn't stop here. JBL 80th Digital Magazine celebrates the people, moments, and innovations that define decades of sound.<\/p>\n                                <button href=\"#e-catalog\"\n                                    title=\"80 Year Powering Voices\" class=\"cta mycta\">\n                                    Read the zine                                <\/button>\n                            <\/div>\n                        <\/a>\n                                            <a class=\"information-card\" href=\"#\" style=\"background-image: url('\/wp-content\/uploads\/2026\/06\/ourstory-informations-bgblue.webp');\" title=\"Audio Talks\">\n                                                            <div class=\"information-image-wrapper\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"240\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks.webp\" class=\"attachment-full size-full\" alt=\"Audio Talks Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks.webp 566w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-300x127.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-364x154.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-175x74.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-376x159.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-284x120.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-497x211.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-462x196.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-412x175.webp 412w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/>                                <\/div>\n                                                        <div class=\"information-content\">\n                                <p class=\"information-description\">Your all-things-audio podcast. From music culture to the science of sound to the latest on next-level in-car and more.<\/p>\n                                <button href=\"#\"\n                                    title=\"Audio Talks\" class=\"cta mycta\">\n                                    Check it now                                <\/button>\n                            <\/div>\n                        <\/a>\n                                    <\/div>\n                <div class=\"information-scroll-wrapper\">\n                                            <a class=\"information-card\" href=\"#e-catalog\" style=\"background-image: url('\/wp-content\/uploads\/2026\/06\/ourstory-informations-80yearspoweringvoices.webp');\" title=\"80 Year Powering Voices\">\n                                                            <h3 class=\"information-title\">80 Year Powering Voices<\/h3>\n                                                        <div class=\"information-content\">\n                                <p class=\"information-description\">The story doesn't stop here. JBL 80th Digital Magazine celebrates the people, moments, and innovations that define decades of sound.<\/p>\n                                <button href=\"#e-catalog\"\n                                    title=\"80 Year Powering Voices\" class=\"cta mycta\">\n                                    Read the zine                                <\/button>\n                            <\/div>\n                        <\/a>\n                                            <a class=\"information-card\" href=\"#\" style=\"background-image: url('\/wp-content\/uploads\/2026\/06\/ourstory-informations-bgblue.webp');\" title=\"Audio Talks\">\n                                                            <div class=\"information-image-wrapper\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"240\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks.webp\" class=\"attachment-full size-full\" alt=\"Audio Talks Image\" srcset=\"\/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks.webp 566w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-300x127.webp 300w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-18x8.webp 18w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-364x154.webp 364w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-175x74.webp 175w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-376x159.webp 376w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-284x120.webp 284w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-497x211.webp 497w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-462x196.webp 462w, \/wp-content\/uploads\/2026\/06\/ourstory-informations-audiotalks-412x175.webp 412w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/>                                <\/div>\n                                                        <div class=\"information-content\">\n                                <p class=\"information-description\">Your all-things-audio podcast. From music culture to the science of sound to the latest on next-level in-car and more.<\/p>\n                                <button href=\"#\"\n                                    title=\"Audio Talks\" class=\"cta mycta\">\n                                    Check it now                                <\/button>\n                            <\/div>\n                        <\/a>\n                                    <\/div>\n\n                <div class=\"information-controller\">\n                    <div class=\"information-nav\">\n                        <button class=\"cta prev-btn\" disabled\n aria-label=\"Previous Category\">\n                            <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\"\n                                xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path\n                                    d=\"M10.1211 1.5L1.75578 10.7948C1.39998 11.1901 1.41588 11.7948 1.79196 12.1709L10.1211 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                        <button class=\"cta next-btn\"\n                            aria-label=\"Next Category\">\n                            <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\"\n                                xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path\n                                    d=\"M1.5 1.5L9.86532 10.7948C10.2211 11.1901 10.2052 11.7948 9.82913 12.1709L1.5 20.5\"\n                                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"information-line\">\n                        <div class=\"information-line-progress\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"product-categories\">\n            <div class=\"inside\">\n                <div class=\"title-wrapper\">\n                    <div class=\"title-wrapper-inner\">\n                        <h2 class=\"title-section\">\n                            What we do best                        <\/h2>\n                    <\/div>\n                <\/div>\n\n                <div class=\"categories-wrapper\">\n                    <div class=\"categories-inner\">\n                                                    <div class=\"category-item\">\n                                <a href=\"\/en\/product-category\/speakers\/\" title=\"Portable Speakers\" class=\"category-card\">\n                                    <div class=\"category-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-productcategories-portablespeaker.webp\" alt=\"Portable Speakers Image\">                                    <\/div>\n                                    <h3 class=\"category-title\">Portable Speakers<\/h3>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"category-item\">\n                                <a href=\"\/en\/product-category\/headphones-earphones\/\" title=\"Headphones\" class=\"category-card\">\n                                    <div class=\"category-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-productcategories-headphones.webp\" alt=\"Headphones Image\">                                    <\/div>\n                                    <h3 class=\"category-title\">Headphones<\/h3>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"category-item\">\n                                <a href=\"\/en\/product-category\/headphones-earphones\/earphones-earbuds\/\" title=\"Earbuds\" class=\"category-card\">\n                                    <div class=\"category-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-productcategories-earbuds.webp\" alt=\"Earbuds Image\">                                    <\/div>\n                                    <h3 class=\"category-title\">Earbuds<\/h3>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"category-item\">\n                                <a href=\"\/en\/product-category\/home-audio\/\" title=\"Home Audio\" class=\"category-card\">\n                                    <div class=\"category-image-wrapper\">\n                                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/ourstory80th-productcategories-homeaudio.webp\" alt=\"Home Audio Image\">                                    <\/div>\n                                    <h3 class=\"category-title\">Home Audio<\/h3>\n                                <\/a>\n                            <\/div>\n                                            <\/div>\n                    <div class=\"categories-controller\">\n                        <div class=\"categories-nav\">\n                            <button class=\"cta prev-btn\" disabled\n aria-label=\"Previous Category\">\n                                <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M10.1211 1.5L1.75578 10.7948C1.39998 11.1901 1.41588 11.7948 1.79196 12.1709L10.1211 20.5\"\n                                        stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                                <\/svg>\n                            <\/button>\n                            <button class=\"cta next-btn\"\n                                aria-label=\"Next Category\">\n                                <svg width=\"12\" height=\"22\" viewbox=\"0 0 12 22\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M1.5 1.5L9.86532 10.7948C10.2211 11.1901 10.2052 11.7948 9.82913 12.1709L1.5 20.5\"\n                                        stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                        <div class=\"categories-line\">\n                            <div class=\"categories-line-progress\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/div>\n    <script>\n        jQuery(function () {\n            const historiesSlider = jQuery('.histories-wrapper-inner');\n            const historiesWrapper = jQuery('.histories-wrapper');\n            const prevBtn = historiesWrapper.find('.histories-controller .prev-btn');\n            const nextBtn = historiesWrapper.find('.histories-controller .next-btn');\n            const progressBar = historiesWrapper.find('.histories-line-progress');\n\n            if (!historiesSlider.length) {\n                return;\n            }\n\n            function getSlidesToShow(slick) {\n                if (slick && slick.options && slick.options.slidesToShow) {\n                    return slick.options.slidesToShow;\n                }\n\n                return 1;\n            }\n\n            function updateHistoriesController(event, slick, currentSlide) {\n                const current = typeof currentSlide === 'number' ? currentSlide : slick.currentSlide;\n                const slidesToShow = getSlidesToShow(slick);\n                const totalSlides = slick.slideCount;\n                const maxSlide = Math.max(totalSlides - slidesToShow, 0);\n\n                const progress = maxSlide === 0\n                    ? 100\n                    : (current \/ maxSlide) * 100;\n\n                progressBar.css('width', progress + '%');\n\n                prevBtn.prop('disabled', current <= 0);\n                nextBtn.prop('disabled', current >= maxSlide);\n            }\n\n            if (!historiesSlider.hasClass('slick-initialized')) {\n                historiesSlider.on('init afterChange breakpoint setPosition', function (event, slick, currentSlide) {\n                    updateHistoriesController(event, slick, currentSlide);\n                });\n\n                historiesSlider.slick({\n                    slidesToShow: 3,\n                    slidesToScroll: 1,\n                    infinite: false,\n                    arrows: true,\n                    dots: false,\n                    centerMode: false,\n                    variableWidth: false,\n                    adaptiveHeight: false,\n                    prevArrow: prevBtn,\n                    nextArrow: nextBtn,\n                    responsive: [\n                        {\n                            breakpoint: 1024,\n                            settings: {\n                                slidesToShow: 2,\n                                slidesToScroll: 1\n                            }\n                        },\n                        {\n                            breakpoint: 768,\n                            settings: {\n                                slidesToShow: 1,\n                                slidesToScroll: 1\n                            }\n                        }\n                    ]\n                });\n            }\n        });\n    <\/script>\n\n    <script>\n        jQuery(function () {\n            jQuery('.product-scroll-wrapper').each(function () {\n                const productSlider = jQuery(this);\n                const productSection = productSlider.parent();\n                const prevBtn = productSection.find('.product-scroll-controller .prev-btn-product-scroll');\n                const nextBtn = productSection.find('.product-scroll-controller .next-btn-product-scroll');\n                const progressBar = productSection.find('.product-scroll-line-progress');\n\n                if (!productSlider.length) {\n                    return;\n                }\n\n                function getSlidesToShow(slick) {\n                    if (slick && slick.options && slick.options.slidesToShow) {\n                        return slick.options.slidesToShow;\n                    }\n\n                    return 1;\n                }\n\n                function updateProductScrollController(event, slick, currentSlide) {\n                    const current = typeof currentSlide === 'number' ? currentSlide : slick.currentSlide;\n                    const slidesToShow = getSlidesToShow(slick);\n                    const totalSlides = slick.slideCount;\n                    const maxSlide = Math.max(totalSlides - slidesToShow, 0);\n\n                    const progress = maxSlide === 0\n                        ? 100\n                        : (current \/ maxSlide) * 100;\n\n                    progressBar.css('width', progress + '%');\n\n                    prevBtn.prop('disabled', current <= 0);\n                    nextBtn.prop('disabled', current >= maxSlide);\n                }\n\n                if (!productSlider.hasClass('slick-initialized')) {\n                    productSlider.on('init afterChange breakpoint setPosition', function (event, slick, currentSlide) {\n                        updateProductScrollController(event, slick, currentSlide);\n                    });\n\n                    productSlider.slick({\n                        slidesToShow: 3,\n                        slidesToScroll: 1,\n                        infinite: false,\n                        arrows: true,\n                        dots: false,\n                        centerMode: false,\n                        variableWidth: false,\n                        adaptiveHeight: false,\n                        prevArrow: prevBtn,\n                        nextArrow: nextBtn,\n                        responsive: [\n                            {\n                                breakpoint: 1024,\n                                settings: {\n                                    slidesToShow: 2,\n                                    slidesToScroll: 1\n                                }\n                            },\n                            {\n                                breakpoint: 768,\n                                settings: {\n                                    slidesToShow: 1,\n                                    slidesToScroll: 1\n                                }\n                            }\n                        ]\n                    });\n                }\n            });\n        });\n\n        jQuery(function ($) {\n            $('.information-scroll-wrapper').each(function () {\n                const informationSlider = $(this);\n\n                \/\/ Kalau controller berada setelah slider seperti HTML kamu\n                const informationController = informationSlider.next('.information-controller');\n\n                const prevBtn = informationController.find('.prev-btn');\n                const nextBtn = informationController.find('.next-btn');\n                const progressBar = informationController.find('.information-line-progress');\n\n                if (!informationSlider.length) {\n                    return;\n                }\n\n                function getSlidesToShow(slick) {\n                    if (slick && slick.options && slick.options.slidesToShow) {\n                        return slick.options.slidesToShow;\n                    }\n\n                    return 1;\n                }\n\n                function updateInformationController(event, slick, currentSlide) {\n                    const current = typeof currentSlide === 'number'\n                        ? currentSlide\n                        : slick.currentSlide;\n\n                    const slidesToShow = getSlidesToShow(slick);\n                    const totalSlides = slick.slideCount;\n                    const maxSlide = Math.max(totalSlides - slidesToShow, 0);\n\n                    const progress = maxSlide === 0\n                        ? 100\n                        : (current \/ maxSlide) * 100;\n\n                    progressBar.css('width', progress + '%');\n\n                    prevBtn.prop('disabled', current <= 0);\n                    nextBtn.prop('disabled', current >= maxSlide);\n                }\n\n                if (!informationSlider.hasClass('slick-initialized')) {\n                    informationSlider.on('init afterChange breakpoint setPosition', function (event, slick, currentSlide) {\n                        updateInformationController(event, slick, currentSlide);\n                    });\n\n                    informationSlider.slick({\n                        slidesToShow: 2,\n                        slidesToScroll: 1,\n                        infinite: false,\n                        arrows: true,\n                        dots: false,\n                        centerMode: false,\n                        variableWidth: false,\n                        adaptiveHeight: false,\n                        prevArrow: prevBtn,\n                        nextArrow: nextBtn,\n                        responsive: [\n                            {\n                                breakpoint: 1024,\n                                settings: {\n                                    slidesToShow: 2,\n                                    slidesToScroll: 1\n                                }\n                            },\n                            {\n                                breakpoint: 768,\n                                settings: {\n                                    slidesToShow: 1,\n                                    slidesToScroll: 1\n                                }\n                            }\n                        ]\n                    });\n                }\n            });\n        });\n\n        jQuery(function ($) {\n            $('.categories-inner').each(function () {\n                const categorySlider = $(this);\n\n                \/\/ Controller berada tepat setelah .categories-inner\n                const categoryController = categorySlider.next('.categories-controller');\n\n                const prevBtn = categoryController.find('.prev-btn');\n                const nextBtn = categoryController.find('.next-btn');\n                const progressBar = categoryController.find('.categories-line-progress');\n\n                if (!categorySlider.length) {\n                    return;\n                }\n\n                function getSlidesToShow(slick) {\n                    if (slick && slick.options && slick.options.slidesToShow) {\n                        return slick.options.slidesToShow;\n                    }\n\n                    return 1;\n                }\n\n                function updateCategoryController(event, slick, currentSlide) {\n                    const current = typeof currentSlide === 'number'\n                        ? currentSlide\n                        : slick.currentSlide;\n\n                    const slidesToShow = getSlidesToShow(slick);\n                    const totalSlides = slick.slideCount;\n                    const maxSlide = Math.max(totalSlides - slidesToShow, 0);\n\n                    const progress = maxSlide === 0\n                        ? 100\n                        : (current \/ maxSlide) * 100;\n\n                    progressBar.css('width', progress + '%');\n\n                    prevBtn.prop('disabled', current <= 0);\n                    nextBtn.prop('disabled', current >= maxSlide);\n                }\n\n                if (!categorySlider.hasClass('slick-initialized')) {\n                    categorySlider.on('init afterChange breakpoint setPosition', function (event, slick, currentSlide) {\n                        updateCategoryController(event, slick, currentSlide);\n                    });\n\n                    categorySlider.slick({\n                        slidesToShow: 4,\n                        slidesToScroll: 1,\n                        infinite: false,\n                        arrows: true,\n                        dots: false,\n                        centerMode: false,\n                        variableWidth: false,\n                        adaptiveHeight: false,\n                        prevArrow: prevBtn,\n                        nextArrow: nextBtn,\n                        responsive: [\n                            {\n                                breakpoint: 1200,\n                                settings: {\n                                    slidesToShow: 3,\n                                    slidesToScroll: 1\n                                }\n                            },\n                            {\n                                breakpoint: 1024,\n                                settings: {\n                                    slidesToShow: 2,\n                                    slidesToScroll: 1\n                                }\n                            },\n                            {\n                                breakpoint: 768,\n                                settings: {\n                                    slidesToShow: 1,\n                                    slidesToScroll: 1\n                                }\n                            }\n                        ]\n                    });\n                }\n            });\n        });\n\n        jQuery(function () {\n            const $wrapper = jQuery('.moments-wrapper');\n            const $slider = $wrapper.find('.moments-scroll-wrapper');\n            const $prevBtn = $wrapper.find('.prev-moments');\n            const $nextBtn = $wrapper.find('.next-moments');\n\n            if (!$slider.length) {\n                return;\n            }\n\n            function isSlickReady() {\n                return $slider.hasClass('slick-initialized') && $slider.get(0).slick;\n            }\n\n            function getSlickObj() {\n                if (!isSlickReady()) {\n                    return null;\n                }\n\n                return $slider.slick('getSlick');\n            }\n\n            function getSlidesToShow() {\n                const slickObj = getSlickObj();\n\n                if (!slickObj) {\n                    return 1;\n                }\n\n                return slickObj.options.slidesToShow || 1;\n            }\n\n            function updateSliderButtons() {\n                const slickObj = getSlickObj();\n\n                if (!slickObj) {\n                    return;\n                }\n\n                const currentSlide = slickObj.currentSlide || 0;\n                const slidesToShow = getSlidesToShow();\n                const totalSlides = slickObj.slideCount || 0;\n                const maxSlide = Math.max(totalSlides - slidesToShow, 0);\n\n                $prevBtn.prop('disabled', currentSlide <= 0);\n                $nextBtn.prop('disabled', currentSlide >= maxSlide);\n            }\n\n            function pauseAllVideos() {\n                $slider.find('.video-item video').each(function () {\n                    this.pause();\n\n                    jQuery(this)\n                        .closest('.video-item')\n                        .find('.js-playback:not(.mute)')\n                        .attr('data-state', 'paused')\n                        .attr('aria-label', 'play video');\n                });\n            }\n\n            function playVisibleVideos() {\n                const slickObj = getSlickObj();\n\n                if (!slickObj) {\n                    return;\n                }\n\n                const currentSlide = slickObj.currentSlide || 0;\n                const slidesToShow = getSlidesToShow();\n                const start = currentSlide;\n                const end = currentSlide + slidesToShow;\n\n                pauseAllVideos();\n\n                $slider.find('.slick-slide').each(function () {\n                    const $slide = jQuery(this);\n                    const slideIndex = parseInt($slide.attr('data-slick-index'), 10);\n\n                    if (slideIndex >= start && slideIndex < end) {\n                        const video = $slide.find('.video-item video').get(0);\n\n                        if (video) {\n                            video.play().catch(function () { });\n\n                            $slide\n                                .find('.js-playback:not(.mute)')\n                                .attr('data-state', 'playing')\n                                .attr('aria-label', 'pause video');\n                        }\n                    }\n                });\n            }\n\n            if (!$slider.hasClass('slick-initialized')) {\n                $slider.on('init reInit afterChange breakpoint setPosition', function () {\n                    updateSliderButtons();\n                    playVisibleVideos();\n                });\n\n                $slider.slick({\n                    slidesToShow: 6,\n                    slidesToScroll: 1,\n                    arrows: false,\n                    infinite: false,\n                    dots: false,\n                    responsive: [\n                        {\n                            breakpoint: 1200,\n                            settings: {\n                                slidesToShow: 4,\n                                slidesToScroll: 1\n                            }\n                        },\n                        {\n                            breakpoint: 768,\n                            settings: {\n                                slidesToShow: 3,\n                                slidesToScroll: 1\n                            }\n                        },\n                        {\n                            breakpoint: 480,\n                            settings: {\n                                slidesToShow: 1,\n                                slidesToScroll: 1\n                            }\n                        }\n                    ]\n                });\n            }\n\n            $nextBtn.on('click', function (e) {\n                e.preventDefault();\n\n                if (isSlickReady()) {\n                    $slider.slick('slickNext');\n                }\n            });\n\n            $prevBtn.on('click', function (e) {\n                e.preventDefault();\n\n                if (isSlickReady()) {\n                    $slider.slick('slickPrev');\n                }\n            });\n\n            setTimeout(function () {\n                if (isSlickReady()) {\n                    $slider.slick('setPosition');\n                    updateSliderButtons();\n                    playVisibleVideos();\n                }\n            }, 100);\n\n            jQuery(window).on('resize orientationchange', function () {\n                if (isSlickReady()) {\n                    $slider.slick('setPosition');\n                    updateSliderButtons();\n                }\n            });\n        });\n    <\/script>\n\n    <script>\n        jQuery(function () {\n            \/\/ Bungkus setiap huruf dalam <span>\n            jQuery('#intro .inside .description-section, #intro .inside .title-section').each(function () {\n                var text = jQuery(this).text();\n                var html = '';\n                for (var i = 0; i < text.length; i++) {\n                    html += '<span class=\"char\">' + text[i] + '<\/span>';\n                }\n                jQuery(this).html(html);\n            });\n\n            var e = 0.5; \/\/ faktor kecepatan \u2014 kecilkan = lebih cepat muncul\n\n            jQuery(window).on('scroll', function () {\n                var scrollTop    = jQuery(this).scrollTop();\n                var windowH      = jQuery(window).height();\n                var headerH      = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sizing-header').trim()) || 0;\n                var sectionTop   = jQuery('#intro').offset().top - headerH;\n                var sectionH     = jQuery('#intro').outerHeight();\n                var $chars       = jQuery('#intro .char');\n                var totalChars   = $chars.length;\n\n                if (scrollTop + windowH > sectionTop) {\n                    $chars.each(function (idx) {\n                        var threshold = sectionTop + (idx \/ totalChars) * sectionH \/ e;\n                        if (scrollTop + windowH > threshold) {\n                            jQuery(this).addClass('marked');\n                        } else {\n                            jQuery(this).removeClass('marked');\n                        }\n                    });\n                } else {\n                    $chars.removeClass('marked');\n                }\n            });\n        });\n        <\/script>\n        <script>\n            jQuery(document).ready(function () {\n                function equalHeight(containerId, divClass, screenWidthMin) {\n                    if (!screenWidthMin) {\n                        screenWidthMin = 768\n                    }\n                    if (window.screen.width > screenWidthMin) {\n                        var maxHeight = 0;\n                        var maxWidth = 0;\n\n                        jQuery(`#${containerId} .${divClass}`).each(function () {\n                            if (jQuery(this).height() > maxHeight) {\n                                maxHeight = jQuery(this).height();\n                                maxWidth = jQuery(this).width();\n                            }\n                        });\n\n                        jQuery(`#${containerId} .${divClass}`).each(function () {\n                            jQuery(this).height(maxHeight);\n                            jQuery('.outside').width(maxWidth);\n                        });\n                    }\n                }\n                \n                function initOwlCarousel(ownclassname) {\n                    jQuery('.' + ownclassname).owlCarousel({\n                        stagePadding: 50,\n                        lazyLoad: true,\n                        \/\/ animateOut: \"fadeOut\",\n                        loop: true,\n                        dots: false,\n                        margin: 50,\n                        center: false,\n                        nav: false,\n                        responsive: {\n                            0: {\n                                items: 1,\n                                center: true,\n                                nav: true,\n                            },\n                            768: {\n                                items: 1,\n                                center: true,\n                                nav: true,\n                            },\n                            991.98: {\n                                items: 3,\n                                center: true,\n                                nav: true,\n                            },\n                            1280: {\n                                items: 4,\n                                nav: false,\n                            },\n                        }\n                    })\n                        .on('changed.owl.carousel', function (event) {\n                            const currentIndex = event.item.index; \/\/ Indeks item saat ini\n                            const totalItems = event.item.count; \/\/ Total item dalam carousel\n\n                            \/\/ Ganti isi berdasarkan indeks aktif\n                            console.log(`Slide aktif: ${currentIndex} dari ${totalItems}`);\n\n                            \/\/ Contoh: Menampilkan elemen berbeda tergantung pada slide aktif\n                            const contentMap = {\n                                0: \"Konten untuk slide 1\",\n                                1: \"Konten untuk slide 2\",\n                                2: \"Konten untuk slide 3\",\n                            };\n\n                            \/\/ Ganti konten berdasarkan slide aktif\n                            const content = contentMap[currentIndex % Object.keys(contentMap).length] || \"Default Konten\";\n                            jQuery('#dynamic-content').text(content); \/\/ Misal mengganti teks di elemen tertentu\n                        });\n\n                    \/\/ Custom Navigation for Owl Carousel\n                    jQuery('.prev-btn').click(function () {\n                        jQuery('.' + ownclassname).trigger('prev.owl.carousel');\n                    });\n\n                    jQuery('.next-btn').click(function () {\n                        jQuery('.' + ownclassname).trigger('next.owl.carousel');\n                    });\n                }\n\n                initOwlCarousel('owl-carousel-1');\n                equalHeight(\"recommendedProducts\", \"promotion-product-name\", 1)\n            });\n        <\/script>\n    \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":208438,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-119054","page","type-page","status-publish","hentry","no-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Our Story: Celebrating 80 Years of JBL Innovation &amp; Sound Excellence<\/title>\n<meta name=\"description\" content=\"Explore JBL&#039;s 80-year journey of innovation, iconic sound, and industry-leading audio technology. Discover the milestones that shaped JBL into a global audio leader.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/our-story\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Our Story: Celebrating 80 Years of JBL Innovation &amp; Sound Excellence\" \/>\n<meta property=\"og:description\" content=\"Explore JBL&#039;s 80-year journey of innovation, iconic sound, and industry-leading audio technology. Discover the milestones that shaped JBL into a global audio leader.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/our-story\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-15T08:21:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/our-story\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/our-story\/\",\"name\":\"Kisah Kami: 80 Tahun Inovasi, Suara Ikonik, dan Warisan JBL\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2026-06-15T05:43:57+00:00\",\"dateModified\":\"2026-06-15T08:21:17+00:00\",\"description\":\"Rayakan 80 tahun perjalanan JBL dalam menghadirkan inovasi audio, produk ikonik, dan pengalaman mendengarkan yang menginspirasi jutaan orang di seluruh dunia.\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/our-story\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/our-story\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/our-story\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our Story\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Our Story: Celebrating 80 Years of JBL Innovation & Sound Excellence","description":"Explore JBL's 80-year journey of innovation, iconic sound, and industry-leading audio technology. Discover the milestones that shaped JBL into a global audio leader.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jblstore.co.id\/en\/our-story\/","og_locale":"en_US","og_type":"article","og_title":"Our Story: Celebrating 80 Years of JBL Innovation & Sound Excellence","og_description":"Explore JBL's 80-year journey of innovation, iconic sound, and industry-leading audio technology. Discover the milestones that shaped JBL into a global audio leader.","og_url":"https:\/\/jblstore.co.id\/en\/our-story\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2026-06-15T08:21:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/our-story\/","url":"https:\/\/jblstore.co.id\/en\/our-story\/","name":"Kisah Kami: 80 Tahun Inovasi, Suara Ikonik, dan Warisan JBL","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2026-06-15T05:43:57+00:00","dateModified":"2026-06-15T08:21:17+00:00","description":"Rayakan 80 tahun perjalanan JBL dalam menghadirkan inovasi audio, produk ikonik, dan pengalaman mendengarkan yang menginspirasi jutaan orang di seluruh dunia.","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/our-story\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/our-story\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/our-story\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"Our Story"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/119054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/208438"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=119054"}],"version-history":[{"count":12,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/119054\/revisions"}],"predecessor-version":[{"id":119070,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/119054\/revisions\/119070"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=119054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}