{"product_id":"microlift-treatments","title":"MicroLift Treatments","description":"\u003ch1\u003e\n\u003cimg\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_03.53.11.png?v=1773989610\" alt=\"\" width=\"610\" height=\"263\"\u003e\u003cimg\u003e\u003cimg\u003e\n\u003c\/h1\u003e\n\u003ch1\u003e\u003cimg height=\"910\" width=\"693\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_03.50.44.png?v=1773989471\" alt=\"\"\u003e\u003c\/h1\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.44.37.png?v=1773992697\" alt=\"\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.45.22.png?v=1773992742\" alt=\"\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.45.08.png?v=1773992742\" alt=\"\"\u003e\u003c\/p\u003e\n\u003ch1\u003e\u003cimg\u003e\u003c\/h1\u003e\n\u003ch1\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/1745833692-Frame_63_1.webp?v=1773989693\" alt=\"\" width=\"581\" height=\"455\"\u003e\u003c\/h1\u003e\n\u003ch1\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_03.56.09.png?v=1773989779\" alt=\"\" width=\"578\" height=\"444\"\u003e\u003c\/h1\u003e\n\u003ch1\u003e\n\u003cimg\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_03.57.43.png?v=1773989871\" alt=\"\" width=\"579\" height=\"643\"\u003e\u003cimg\u003e\n\u003c\/h1\u003e\n\u003ch1\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_03.58.57.png?v=1773989945\" alt=\"\" width=\"580\" height=\"176\"\u003e\u003c\/h1\u003e\n\u003cdiv class=\"swiper\" id=\"VideoReviews\"\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_03.59.50.png?v=1773989995\" alt=\"\" width=\"581\" height=\"141\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/1745503429-Frame_45_1.webp?v=1773990007\" alt=\"\" width=\"582\" height=\"446\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.00.39.png?v=1773990048\" alt=\"\" width=\"571\" height=\"241\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/1748502431-ezgif-210428c51d6038.gif?v=1773986835\" width=\"567\" height=\"433\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.01.21.png?v=1773990089\" alt=\"\" width=\"579\" height=\"352\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.02.57.png?v=1773990184\" alt=\"\" width=\"580\" height=\"852\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg height=\"161\" width=\"576\" alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.03.37.png?v=1773990226\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/1746453662-1_11.webp?v=1773990230\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-next\"\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.04.33.png?v=1773990283\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-prev\"\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.04.55.png?v=1773990301\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-prev\"\u003e\u003cimg height=\"577\" width=\"577\" alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/1748502174-wrinklesgif_1.gif?v=1773990308\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-prev\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.05.11.png?v=1773990318\" alt=\"\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-prev\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Captura_de_Tela_2026-03-20_as_04.05.23.png?v=1773990330\" alt=\"\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-prev\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"swiper-button-prev\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003ch1\u003e\n\u003cscript src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"\u003e\u003c\/script\u003e \u003cscript\u003e\n  document.addEventListener('DOMContentLoaded', () =\u003e {\n    \/\/ 1. Swiper Initialization\n    const swiper = new Swiper('#VideoReviews', {\n      slidesPerView: 'auto', \/\/ Important for peek effect\n      spaceBetween: 16,\n      centeredSlides: true, \/\/ Focus center on mobile\n      loop: true,\n      \n      breakpoints: {\n        601: {\n          centeredSlides: false, \/\/ Default left align for larger screens\n        }\n      },\n      \n      on: {\n        \/\/ Pauses videos when they slide away\n        slideChangeTransitionEnd: function () {\n          pauseInactiveVideos(this);\n        },\n        resize: function () {\n          pauseInactiveVideos(this);\n        }\n      }\n    });\n\n    \/\/ 2. Video Interaction Logic (Image poster swap on click)\n    const cards = document.querySelectorAll('#VideoReviews .review-card');\n\n    function pauseAllVideos() {\n      cards.forEach(card =\u003e {\n        const video = card.querySelector('video');\n        const img = card.querySelector('img');\n        const playBtn = card.querySelector('.play-button-overlay');\n        \n        video.pause();\n        video.currentTime = 0; \/\/ Optional reset\n        video.style.display = 'none';\n        img.style.display = 'block';\n        playBtn.style.display = 'flex';\n      });\n    }\n\n    cards.forEach(card =\u003e {\n      const img = card.querySelector('img');\n      const video = card.querySelector('video');\n      const playBtn = card.querySelector('.play-button-overlay');\n      \/\/ Elements that trigger play\/pause\n      const triggers = card.querySelectorAll('.VidSec, .play-button-overlay');\n\n      triggers.forEach(trigger =\u003e {\n        trigger.addEventListener('click', (e) =\u003e {\n          \/\/ If video is paused, play it and swap view\n          if (video.paused) {\n            pauseAllVideos(); \/\/ Pause others first\n            \n            img.style.display = 'none';\n            video.style.display = 'block';\n            playBtn.style.display = 'none';\n            video.play();\n          } else {\n            \/\/ Pause current video\n            video.pause();\n            video.style.display = 'none';\n            img.style.display = 'block';\n            playBtn.style.display = 'flex';\n          }\n        });\n      });\n    });\n\n    \/\/ 3. Helper to pause videos moving off-screen\n    function pauseInactiveVideos(swiperInstance) {\n      document.querySelectorAll('#VideoReviews .review-card video').forEach(video =\u003e {\n        if (!video.paused) {\n          video.pause();\n          const parent = video.closest('.review-card');\n          parent.querySelector('img').style.display = 'block';\n          parent.querySelector('.play-button-overlay').style.display = 'flex';\n          video.style.display = 'none';\n        }\n      });\n    }\n  });\n\u003c\/script\u003e\n\u003c\/h1\u003e\n\u003cstyle\u003e\n  \/* Base Container *\/\n  .review-video-carousel-wrapper {\n    width: 100%;\n    overflow: hidden; \/* Prevent page horizontal scroll *\/\n    background: none !important; \/* Ensure no blue background *\/\n  }\n\n  #VideoReviews.swiper {\n    width: 100%;\n    padding-bottom: 30px; \/* Space for pagination bullets *\/\n  }\n\n  \/* Swiper wrapper settings for centering and peaking *\/\n  #VideoReviews .swiper-wrapper {\n    display: flex;\n    align-items: stretch;\n  }\n\n  \/* Card Styling (Horizontal) *\/\n  .swiper-slide.review-card {\n    display: flex;\n    flex-direction: column;\n    background-color: #ffffff; \/* White card *\/\n    border: 1px solid #000000; \/* Black border from example *\/\n    border-radius: 25px; \/* Large corner radius *\/\n    overflow: hidden;\n    position: relative;\n    box-sizing: border-box;\n    height: auto;\n  }\n\n  \/* MEDIA QUERIES FOR PEEK EFFECT *\/\n  @media (max-width: 600px) {\n    .swiper-slide.review-card {\n      width: 80% !important; \/* ONLY 80% width, showing others *\/\n      margin: 0 auto;\n    }\n  }\n\n  @media (min-width: 601px) {\n    .swiper-slide.review-card {\n      width: 280px; \/* Fixed width on desktop *\/\n    }\n  }\n\n  \/* Media Container (Image and Video) *\/\n  .VidSec {\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    height: 350px; \/* Set desired height *\/\n  }\n\n  .VidSec img, .VidSec video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover; \/* Crop to fill space *\/\n    display: block;\n    border-radius: 25px 25px 0px 0px; \/* Top corners only *\/\n  }\n\n  .VidSec video {\n    display: none; \/* Hidden by default, swapped via JS *\/\n  }\n\n  \/* Review Details styling *\/\n  .review-details {\n    padding: 18px 20px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .review-details h3 {\n    margin: 10px 0;\n    font-size: 18px;\n    color: #333;\n  }\n\n  .stars {\n    color: #ffc94a; \/* Golden color from example *\/\n    font-size: 20px;\n    margin: 0;\n  }\n\n  .quote {\n    font-size: 14px;\n    color: #555;\n    line-height: 1.6;\n    margin-bottom: 20px;\n    flex-grow: 1; \/* Push author to bottom *\/\n  }\n\n  .author {\n    font-size: 14px;\n    font-weight: bold;\n    color: #000;\n    margin: 0;\n  }\n\n  \/* Optimized Play Button Overlay *\/\n  .play-button-overlay {\n    position: absolute;\n    top: 50%; \/* Center vertically over media section *\/\n    left: 50%;\n    transform: translate(-50%, -100%); \/* Position triangle over face area roughly *\/\n    width: 64px;\n    height: 65px;\n    z-index: 10;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none; \/* Clicks pass through to media area *\/\n  }\n  \n  \/* Trigger elements *\/\n  .VidSec, .play-button-overlay {\n    pointer-events: auto; \/* Required for click trigger *\/\n  }\n\n  \/* Optional: Hide swiper elements if needed *\/\n  #VideoReviews .swiper-pagination {\n    bottom: 0px;\n  }\n\u003c\/style\u003e","brand":"LaSheon","offers":[{"title":"Default Title","offer_id":46514171576510,"sku":null,"price":48.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0592\/9972\/5502\/files\/Gemini_Generated_Image_e1340e1340e1340e.png?v=1773980970","url":"https:\/\/osonn.com\/es\/products\/microlift-treatments","provider":"Osonn","version":"1.0","type":"link"}