{"product_id":"new-bold-a","title":"New-Bold-A+","description":"\u003c!-- scroll animation --\u003e\n\u003cstyle\u003e\n\/* Base setup *\/\n.base-img, .overlay-img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* 🧪 ONLY FOR TESTING: Gives you space to scroll so you can see the effect *\/\n.spacing-block {\n  height:65vh; \n  background: #222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  font-family: sans-serif;\n}\n\n\/* 📱 MOBILE ONLY STYLES *\/\n@media (max-width: 768px) {\n  .scroll-container-normal {\n    position: relative;\n    width: 100%;\n    margin: 0px auto; \n    background-color: #000;\n  }\n  .media-box video {\n    width: 100%;\n    height: auto;\n    display: block;\n}\n\n  .frame-wrapper-normal {\n    position: relative; \n    width: 100%;\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .overlay-img {\n    position: absolute;\n    top: 35%;\n    left: 18%;\n    width: 65%;\n    height: 65%;\n    object-fit: contain;\n    will-change: opacity; \n    transition: none; \/* Prevents CSS delay from fighting JS updates *\/\n  }\n\n  .img-2 {\n    opacity: 1;\n    z-index: 2;\n  }\n\n  .img-3 {\n    opacity: 0;\n    z-index: 2;\n  }\n}\n\n\/* 💻 DESKTOP COMPATIBILITY *\/\n@media (min-width: 769px) {\n  .overlay-img {\n    display: none; \n  }\n}\n\u003c\/style\u003e\n\n\n\n\u003cdiv class=\"scroll-container-normal\"\u003e\n  \u003cdiv class=\"frame-wrapper-normal\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-Animation-Mobile.webp?v=1782556807\" alt=\"Base Frame\" class=\"base-img\"\u003e\n    \n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-Animation-1.png?v=1782556849\" alt=\"Animation 1\" class=\"overlay-img img-2\"\u003e\n    \n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-Animation-2.png?v=1782556810\" alt=\"Animation 2\" class=\"overlay-img img-3\"\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\u003cscript\u003e\n\nlet currentOpacity = 0;\nlet targetOpacity = 0;\n\nfunction updateFade() {\n  \/\/ Smoothly approach the target opacity\n  currentOpacity += (targetOpacity - currentOpacity) * 0.08;\n\n  \/\/ Snap when very close\n  if (Math.abs(currentOpacity - targetOpacity) \u003c 0.001) {\n    currentOpacity = targetOpacity;\n  }\n\n  document.querySelector(\".img-2\").style.opacity = 1 - currentOpacity;\n  document.querySelector(\".img-3\").style.opacity = currentOpacity;\n\n  requestAnimationFrame(updateFade);\n}\n\nupdateFade();\n\nfunction handleMobileScrollFade() {\n  if (window.innerWidth \u003e 768) return;\n\n  const container = document.querySelector(\".scroll-container-normal\");\n  if (!container) return;\n\n  const rect = container.getBoundingClientRect();\n  const vh = window.innerHeight;\n\n  let progress = 0;\n\n  if (rect.top \u003c= 0 \u0026\u0026 rect.bottom \u003e= vh) {\n    const total = rect.height - vh;\n    progress = total \u003c= 0 ? 1 : (-rect.top) \/ total;\n  } else if (rect.bottom \u003c vh) {\n    progress = 1;\n  }\n\n  progress = Math.max(0, Math.min(1, progress));\n\n  \/\/ Delay the start a little\n  const start = 0.20;\n  const end = 0.90;\n\n  progress = (progress - start) \/ (end - start);\n  progress = Math.max(0, Math.min(1, progress));\n\n  \/\/ Smooth easing\n  progress = progress * progress * (3 - 2 * progress);\n\n  targetOpacity = progress;\n}\n\nwindow.addEventListener(\"scroll\", handleMobileScrollFade, { passive: true });\nwindow.addEventListener(\"resize\", handleMobileScrollFade);\nwindow.addEventListener(\"DOMContentLoaded\", handleMobileScrollFade);\n\u003c\/script\u003e\n\u003c!-- ANIMATION ENDED --\u003e\n\n\n  \n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold_mobile-view-2.webp?v=17830559609\"\u003e\n\n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold_mobile-view-3.webp?v=1783055958\"\u003e\n\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold_mobile-view-4.webp?v=1783055958\"\u003e\n\n\u003cdiv class=\"media-box\"\u003e\n  \u003cvideo autoplay muted loop playsinline preload=\"auto\" width=\"100%\"\u003e\n    \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/640ebebf30084299a4dd8fd4ac003a95.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"media-box\"\u003e\n  \u003cvideo autoplay muted loop playsinline preload=\"metadata\"\u003e\n    \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/589ded90f87b451ab1d7d6044266ac9e.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n\u003c\/div\u003e\n\n \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold_mobile-view-6.webp?v=1783055960\"\u003e\n\n\n\n\n\n\n\u003c!-- Animation Start --\u003e\n\u003cdiv style=\"margin-top:30px; margin-left:-15px; margin-right:-15px; background:#000;\"\u003e\n\u003cstyle\u003e \/* ===========================\n   XR DEVICE STYLES\n=========================== *\/\n\n\/* Main Container *\/\n.xr-device-shell {\n    position: relative;\n    width: min(90vw, 430px);\n    aspect-ratio: 9 \/ 9;\n    background: #000;\n    margin: 30px;\n    overflow: hidden;\n  padding: 20px:\n}\n\n\/* Slider *\/\n.xr-device-slider {\n    position: absolute;\n    transform: translateX(80px) translateY(40px);\n    width: 86%;\n    height: 92%;\n    display: flex;\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n    scrollbar-width: none;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior-x: contain;\n    background: #000;\n    scroll-behavior: smooth;\n}\n\n.xr-device-slider::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Slides *\/\n.xr-device-slide {\n    flex: 0 0 100%;\n    scroll-snap-align: start;\n    scroll-snap-stop: always;\n    overflow: hidden;\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* Slide Text *\/\n.xr-device-caption {\n    position: absolute;\n    bottom: 4%;\n    left: 50%;\n    width: 90%;\n    text-align: center;\n    color: #fff;\n    font-size: 18px;\n    font-weight: 600;\n    opacity: 0;\n    transform: translateX(-50%);\n    z-index: 2;\n}\n\n\/* Active Slide *\/\n.xr-device-slide.active .xr-device-caption {\n    opacity: 1;\n}\n\n\/* Animation Classes *\/\n.xr-device-slide.from-right .xr-device-caption {\n    animation: xrTextFromRight .45s ease forwards;\n}\n\n.xr-device-slide.from-left .xr-device-caption {\n    animation: xrTextFromLeft .45s ease forwards;\n}\n\n\/* Animations *\/\n@keyframes xrTextFromRight {\n    from {\n        opacity: 0;\n        transform: translateX(calc(-50% + 50px));\n    }\n\n    to {\n        opacity: 1;\n        transform: translateX(-50%);\n    }\n}\n\n@keyframes xrTextFromLeft {\n    from {\n        opacity: 0;\n        transform: translateX(calc(-50% - 50px));\n    }\n\n    to {\n        opacity: 1;\n        transform: translateX(-50%);\n    }\n}\n\n\/* Images *\/\n.xr-device-slide img {\n    width: 50%;\n    height: 60%;\n    object-fit: contain;\n    background: #000;\n    display: block;\n    flex-shrink: 0;\n    margin: auto;\n}\n\n\/* Background *\/\n.xr-device-shell,\n.xr-device-slider,\n.xr-device-slide {\n    background: #000 !important;\n}\n\n\/* Device Frame *\/\n.xr-device-frame {\n    position: absolute;\n    inset: 0;\n    width: 70%;\n    height: 70%;\n    object-fit: contain;\n    pointer-events: none;\n    z-index: 2;\n    transform: translateX(18%) translateY(0%);\n}\n\n\/* Pagination Dots *\/\n.xr-device-dots {\n    position: absolute;\n    bottom: 30%;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    gap: 8px;\n    z-index: 3;\n}\n\n.xr-device-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #777;\n    transition: all .35s ease;\n}\n\n.xr-device-dot.active {\n    width: 24px;\n    border-radius: 20px;\n    background: #fff;\n}\n\n\/* Bottom Content *\/\n.xr-device-info {\n   position: relative;\n    width:100%;\n    text-align:center;\n    padding:20px;\n    background:#000;\n    color:#fff;\n    margin-top:-70px;\n    bottom: 3%;\n}\n\n.xr-device-info h1 {\n    color: #f6a531;\n}\n\n.xr-device-info h2 {\n    color: #fff;\n    font-size: 14px;\n    font-weight: 300;\n}\n\n\/* Mobile *\/\n@media (max-width:480px) {\n\n    .xr-device-slider {\n        top: -18%;\n        left: -21%;\n        width: 94%;\n        height: 96%;\n    }\n\n    .xr-device-dots {\n        bottom: 25%;\n    }\n\n}\n   \u003c\/style\u003e\n\n\n    \u003cdiv class=\"xr-device-shell\"\u003e\n\n        \u003cdiv class=\"xr-device-slider\" id=\"xrDeviceSlider\"\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Audio_mode-2_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eSpatial Sound\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Take_Photos-8_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eCamera Control\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Volume-9_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eVolume Control\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Ambient_Sound-1_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eNoise Reduction Control\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Dial_Pad-3_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eDial Call\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/EQ-4_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eEQ Mode Switching\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Find_Earbuds-5_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eFind My Earphone\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Incoming_Call-6_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eAnswer\/End Call\u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"xr-device-slide\"\u003e\n                \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Music-7_-_Copy.webp?v=1782218722\" alt=\"\"\u003e\n                \u003cdiv class=\"xr-device-caption\"\u003eMusic Control\u003c\/div\u003e\n            \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n        \u003cimg class=\"xr-device-frame\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Main.png?v=1782218773\" alt=\"Frame\"\u003e\n\n        \u003cdiv class=\"xr-device-dots\"\u003e\n            \u003cdiv class=\"xr-device-dot active\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"xr-device-dot\"\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"xr-device-info\"\u003e\n        \u003ch1\u003e\u003cb\u003eNoise Reduction Control\u003c\/b\u003e\u003c\/h1\u003e\n        \u003ch2\u003e\n            Experience crystal-clear audio with advanced ANC technology.\n            Block unwanted background noise and enjoy immersive sound\n            wherever you go.\n        \u003c\/h2\u003e\n    \u003c\/div\u003e\n\n\u003c\/div\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-mobile-view-8.webp?v=1783060109\"\u003e\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n\n    const slider = document.getElementById(\"xrDeviceSlider\");\n    const slides = document.querySelectorAll(\".xr-device-slide\");\n    const dots = document.querySelectorAll(\".xr-device-dot\");\n\n    let previousIndex = 0;\n\n    function updateSlider() {\n\n        const slideWidth = slider.getBoundingClientRect().width;\n        const currentIndex = Math.round(slider.scrollLeft \/ slideWidth);\n\n        \/\/ Prevent invalid index\n        if (currentIndex \u003c 0 || currentIndex \u003e= slides.length) return;\n\n        \/\/ Update active slide\n        slides.forEach((slide, index) =\u003e {\n\n            slide.classList.remove(\"active\", \"from-left\", \"from-right\");\n\n            if (index === currentIndex) {\n\n                if (currentIndex \u003e previousIndex) {\n                    slide.classList.add(\"from-right\");\n                } else if (currentIndex \u003c previousIndex) {\n                    slide.classList.add(\"from-left\");\n                }\n\n                slide.classList.add(\"active\");\n            }\n        });\n\n        \/\/ Update dots\n        dots.forEach((dot, index) =\u003e {\n            dot.classList.toggle(\"active\", index === currentIndex);\n        });\n\n        previousIndex = currentIndex;\n    }\n\n    \/\/ Scroll event\n    slider.addEventListener(\"scroll\", updateSlider);\n\n    \/\/ Window resize\n    window.addEventListener(\"resize\", updateSlider);\n\n    \/\/ Initial load\n    updateSlider();\n\n});\n\u003c\/script\u003e\n\n\u003c!-- ANIMATION ENDED --\u003e\n\n\n\n  \n \u003c!-- ANIMATION START 2ND  --\u003e\n\u003cstyle\u003e\n.image-wrapperxyz{\n  width:100%;\n  margin:0;\n  overflow:hidden;\n \n}\n\n.image-wrapperxyz img{\n  width:100%;\n  max-width:100%;\n  display:block;\n}\n\n\/* SWIPER FIX *\/\n.swiper{\n  width:auto;\n  margin-top: -25px;\n  overflow:hidden;\n}\n\n.swiper-wrapper{\n  align-items:center;\n}\n\n.swiper-slide{\n  box-sizing:border-box;\n}\n\/* OUTER WRAPPER *\/\n.carniwal-highlights-wrapper{\n  padding:0;\n  overflow:hidden;\n}\n\/* MOBILE *\/\n@media screen and (max-width: 767px){\n  .carniwal-highlights-wrapper{\n    padding: 0 0px;\n  }\n}\n\n\/* MAIN SECTION *\/\n.carniwal-highlights{\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  padding: 0;\n}\n\n\/* SLIDE *\/\n.carniwal-slider .swiper-slide{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  overflow: hidden;\n\n  opacity: 0.25;\n  transform: scale(0.92);\n  transition: all 0.5s ease;\n}\n\n\/* ACTIVE *\/\n.carniwal-slider .swiper-slide-active{\n  opacity: 1;\n  transform: scale(1);\n  z-index: 2;\n}\n\n\/* SIDE *\/\n.carniwal-slider .swiper-slide-prev,\n.carniwal-slider .swiper-slide-next{\n  opacity: 0.45;\n  transform: scale(0.95);\n}\n\n\/* IMAGE *\/\n.carniwal-slider .swiper-slide img{\n  width: 100%;\n  height: 800px; \/* 👈 YOUR REQUIRED HEIGHT *\/\n  display: block;\n  object-fit: contain;\n  border-radius: 16px;\n  background-color: #000;\n}\n\n\/* PAGINATION *\/\n.carniwal-pagination{\n  margin-top: 18px;\n  position: relative;\n}\n\n.carniwal-pagination .swiper-pagination-bullet{\n  background: #4e4949 !important;\n  opacity: 0.5;\n  width: 8px !important;\n  height: 8px !important;\n}\n\n.carniwal-pagination .swiper-pagination-bullet-active{\n  opacity: 1 !important;\n  background: #fff !important;\n}\n\n\/* MOBILE *\/\n@media screen and (max-width: 767px){\n\n  .carniwal-slider .swiper-slide{\n    opacity: 0.45;\n    transform: scale(0.92);\n  }\n\n  .carniwal-slider .swiper-slide-active{\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  .carniwal-slider .swiper-slide img{\n    height: 500px;\n    border-radius: 14px;\n  }\n\n}\n\u003c\/style\u003e\n  \n\u003csection class=\"carniwal-highlights-wrapper image-wrapperxyz\"\u003e\n  \u003cdiv class=\"videomobileview\"\u003e\u003cimg loading=\"lazy\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Carousel-1.webp?v=1783063733\"\u003e\u003c\/div\u003e\n\u003csection class=\"carniwal-highlights py-2 md:py-2\"\u003e\n\u003cdiv class=\"max-w-[1600px] mx-auto px-4\"\u003e\n\u003cdiv class=\"swiper carniwal-slider relative\"\u003e\n\n\u003cdiv class=\"swiper-wrapper\"\u003e\n\u003cdiv class=\"swiper-slide\"\u003e\u003cimg loading=\"lazy\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Carousel-2.webp?v=1783063732\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-slide\"\u003e\u003cimg loading=\"lazy\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Carousel-3.webp?v=1783063733\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-slide\"\u003e\u003cimg loading=\"lazy\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Carousel-4.webp?v=1783063733\"\u003e\u003c\/div\u003e\n\n\u003cdiv class=\"swiper-slide\"\u003e\u003cimg loading=\"lazy\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Carousel-5.webp?v=1783063732\"\u003e\u003c\/div\u003e\n\n\u003c\/div\u003e\n\u003c!-- PAGINATION --\u003e\n\u003cdiv class=\"swiper-pagination carniwal-pagination\"\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c\/section\u003e\n\u003c\/section\u003e\n\n","brand":"ACwO","offers":[{"title":"Default Title","offer_id":53855775818046,"sku":null,"price":0.0,"currency_code":"INR","in_stock":false}],"url":"https:\/\/acwo.com\/products\/new-bold-a","provider":"ACwO","version":"1.0","type":"link"}