{"product_id":"color-correcting-tinted-serum","title":"CC color-correcting tinted serum","description":"\n\u003c!-- =====================================================\n CC COLOR-CORRECTING TINTED SERUM\n AUTOPLAY VIDEO PRODUCT DESCRIPTION\n Shopify Custom Liquid — Full Version\n===================================================== --\u003e\n\n\u003csection id=\"cc-video-description\"\u003e\n\n\u003cstyle\u003e\n#cc-video-description,\n#cc-video-description *{\n  box-sizing:border-box;\n}\n\n#cc-video-description{\n  --green:#30463F;\n  --deep:#263A34;\n  --cream:#F7F3ED;\n  --beige:#EDE5D9;\n  --border:#E2D8CA;\n  --ink:#242824;\n  --muted:#68665F;\n\n  width:100%;\n  overflow:hidden;\n  background:linear-gradient(\n    180deg,\n    #F9F6F1 0%,\n    #FFFFFF 100%\n  );\n  color:var(--ink);\n  font-family:inherit;\n}\n\n#cc-video-description .ccvd-wrap{\n  width:min(1040px,calc(100% - 36px));\n  margin:0 auto;\n  padding:60px 0;\n}\n\n\/* ================= HEADER ================= *\/\n\n#cc-video-description .ccvd-head{\n  max-width:730px;\n  margin:0 auto 32px;\n  text-align:center;\n}\n\n#cc-video-description .ccvd-tag{\n  display:inline-block;\n  margin-bottom:12px;\n  padding:7px 13px;\n  border:1px solid #DCE3D8;\n  border-radius:100px;\n  background:#EBEFE7;\n  color:var(--green);\n  font-size:11px;\n  font-weight:800;\n  letter-spacing:1.4px;\n  text-transform:uppercase;\n}\n\n#cc-video-description .ccvd-title{\n  margin:0;\n  color:var(--ink);\n  font-size:clamp(30px,4vw,44px);\n  font-weight:850;\n  line-height:1.15;\n  letter-spacing:-1.2px;\n}\n\n#cc-video-description .ccvd-title em{\n  color:var(--green);\n  font-style:normal;\n}\n\n#cc-video-description .ccvd-subtitle{\n  max-width:590px;\n  margin:15px auto 0;\n  color:var(--muted);\n  font-size:14px;\n  line-height:1.85;\n}\n\n\/* ================= VIDEO GRID ================= *\/\n\n#cc-video-description .ccvd-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:22px;\n  max-width:790px;\n  margin:0 auto;\n}\n\n#cc-video-description .ccvd-card{\n  min-width:0;\n  padding:9px;\n  border:1px solid var(--border);\n  border-radius:19px;\n  background:#FFFFFF;\n  box-shadow:0 12px 35px rgba(48,70,63,.07);\n}\n\n#cc-video-description .ccvd-media{\n  position:relative;\n  overflow:hidden;\n  aspect-ratio:9\/16;\n  border-radius:12px;\n  background:#E9E2D9;\n}\n\n#cc-video-description .ccvd-media video{\n  display:block;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center;\n  background:#E9E2D9;\n}\n\n\/* No play overlay or video controls *\/\n\n#cc-video-description .ccvd-media video::-webkit-media-controls{\n  display:none !important;\n}\n\n\/* ================= VIDEO CAPTIONS ================= *\/\n\n#cc-video-description .ccvd-caption{\n  padding:16px 10px 12px;\n  text-align:center;\n}\n\n#cc-video-description .ccvd-number{\n  display:block;\n  margin-bottom:7px;\n  color:#9C8A71;\n  font-size:10px;\n  font-weight:800;\n  letter-spacing:1.6px;\n}\n\n#cc-video-description .ccvd-caption h3{\n  margin:0 0 6px;\n  color:var(--green);\n  font-size:18px;\n  line-height:1.3;\n  font-weight:800;\n}\n\n#cc-video-description .ccvd-caption p{\n  margin:0;\n  color:var(--muted);\n  font-size:12.5px;\n  line-height:1.7;\n}\n\n\/* ================= BENEFITS ================= *\/\n\n#cc-video-description .ccvd-benefits{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n  max-width:790px;\n  margin:28px auto 0;\n}\n\n#cc-video-description .ccvd-benefit{\n  padding:17px 14px;\n  border:1px solid var(--border);\n  border-radius:12px;\n  background:#FFFFFF;\n  text-align:center;\n}\n\n#cc-video-description .ccvd-benefit-icon{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  width:36px;\n  height:36px;\n  margin:0 auto 10px;\n  border-radius:50%;\n  background:#E8EDE5;\n  color:var(--green);\n  font-size:19px;\n}\n\n#cc-video-description .ccvd-benefit strong{\n  display:block;\n  color:var(--ink);\n  font-size:13px;\n  line-height:1.4;\n  font-weight:800;\n}\n\n#cc-video-description .ccvd-benefit p{\n  margin:6px 0 0;\n  color:var(--muted);\n  font-size:11.5px;\n  line-height:1.65;\n}\n\n\/* ================= CTA ================= *\/\n\n#cc-video-description .ccvd-bottom{\n  max-width:790px;\n  margin:30px auto 0;\n  text-align:center;\n}\n\n#cc-video-description .ccvd-bottom p{\n  margin:0 0 16px;\n  color:var(--muted);\n  font-size:13px;\n  line-height:1.75;\n}\n\n#cc-video-description .ccvd-button{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  gap:10px;\n  min-height:48px;\n  padding:13px 32px;\n  border:1px solid var(--green);\n  border-radius:9px;\n  background:var(--green);\n  color:#FFFFFF !important;\n  font-size:13px;\n  font-weight:800;\n  letter-spacing:.5px;\n  text-decoration:none !important;\n  transition:\n    background .2s ease,\n    transform .2s ease;\n}\n\n#cc-video-description .ccvd-button:hover{\n  background:var(--deep);\n  transform:translateY(-2px);\n}\n\n#cc-video-description .ccvd-button:focus-visible{\n  outline:3px solid #C9AC77;\n  outline-offset:3px;\n}\n\n\/* ================= MOBILE ================= *\/\n\n@media(max-width:749px){\n\n  #cc-video-description .ccvd-wrap{\n    width:calc(100% - 26px);\n    padding:42px 0;\n  }\n\n  #cc-video-description .ccvd-head{\n    margin-bottom:24px;\n  }\n\n  #cc-video-description .ccvd-tag{\n    font-size:9px;\n    letter-spacing:1.1px;\n  }\n\n  #cc-video-description .ccvd-title{\n    font-size:30px;\n    letter-spacing:-.7px;\n  }\n\n  #cc-video-description .ccvd-subtitle{\n    font-size:12.5px;\n    line-height:1.8;\n  }\n\n  #cc-video-description .ccvd-grid{\n    gap:10px;\n  }\n\n  #cc-video-description .ccvd-card{\n    padding:5px;\n    border-radius:12px;\n  }\n\n  #cc-video-description .ccvd-media{\n    border-radius:8px;\n  }\n\n  #cc-video-description .ccvd-caption{\n    padding:12px 4px 9px;\n  }\n\n  #cc-video-description .ccvd-number{\n    font-size:9px;\n  }\n\n  #cc-video-description .ccvd-caption h3{\n    font-size:14px;\n  }\n\n  #cc-video-description .ccvd-caption p{\n    font-size:10.5px;\n    line-height:1.55;\n  }\n\n  #cc-video-description .ccvd-benefits{\n    grid-template-columns:1fr;\n    gap:9px;\n    margin-top:20px;\n  }\n\n  #cc-video-description .ccvd-benefit{\n    display:flex;\n    align-items:center;\n    gap:12px;\n    padding:13px;\n    text-align:left;\n  }\n\n  #cc-video-description .ccvd-benefit-icon{\n    flex:0 0 36px;\n    margin:0;\n  }\n\n  #cc-video-description .ccvd-benefit strong{\n    font-size:12.5px;\n  }\n\n  #cc-video-description .ccvd-benefit p{\n    margin-top:3px;\n    font-size:11px;\n  }\n\n  #cc-video-description .ccvd-bottom{\n    margin-top:24px;\n  }\n\n  #cc-video-description .ccvd-button{\n    width:100%;\n  }\n}\n\n@media(prefers-reduced-motion:reduce){\n  #cc-video-description .ccvd-button{\n    transition:none;\n  }\n}\n\u003c\/style\u003e\n\n\u003cdiv class=\"ccvd-wrap\"\u003e\n\n  \u003c!-- ================= TITLE ================= --\u003e\n\n  \u003cdiv class=\"ccvd-head\"\u003e\n\n    \u003cspan class=\"ccvd-tag\"\u003e\n      See It In Action\n    \u003c\/span\u003e\n\n    \u003ch2 class=\"ccvd-title\"\u003e\n      The Secret to a\n      \u003cem\u003eNatural-Looking Finish\u003c\/em\u003e\n    \u003c\/h2\u003e\n\n    \u003cp class=\"ccvd-subtitle\"\u003e\n      See how CC Color-Correcting Tinted Serum\n      fits into an everyday beauty routine.\n      Lightweight texture, blendable color,\n      and a fresh, skin-like appearance.\n    \u003c\/p\u003e\n\n  \u003c\/div\u003e\n\n\n  \u003c!-- ================= AUTOPLAY VIDEOS ================= --\u003e\n\n  \u003cdiv class=\"ccvd-grid\"\u003e\n\n    \u003c!-- VIDEO 1 --\u003e\n\n    \u003carticle class=\"ccvd-card\"\u003e\n\n      \u003cdiv class=\"ccvd-media\"\u003e\n\n        \u003cvideo class=\"ccvd-autoplay-video\" autoplay muted loop playsinline webkit-playsinline preload=\"metadata\" disablepictureinpicture disableremoteplayback poster=\"https:\/\/marssirace.com\/cdn\/shop\/files\/preview_images\/d2242c96b8404e4ab9559d43f425d28a.thumbnail.0000000000.jpg?v=1782120400\" aria-label=\"CC tinted serum application video\"\u003e\n          \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/34ecdce8a3dc431b880750323e1a5853.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"ccvd-caption\"\u003e\n\n        \u003cspan class=\"ccvd-number\"\u003e\n          01 \/ APPLICATION\n        \u003c\/span\u003e\n\n        \u003ch3\u003e\n          See How It Blends\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Discover a lightweight tinted formula\n          designed to blend smoothly into your complexion.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/article\u003e\n\n\n    \u003c!-- VIDEO 2 --\u003e\n\n    \u003carticle class=\"ccvd-card\"\u003e\n\n      \u003cdiv class=\"ccvd-media\"\u003e\n\n        \u003cvideo class=\"ccvd-autoplay-video\" autoplay muted loop playsinline webkit-playsinline preload=\"metadata\" disablepictureinpicture disableremoteplayback poster=\"https:\/\/marssirace.com\/cdn\/shop\/files\/preview_images\/57d2cafcac7b4c709aca62e0e8b7b180.thumbnail.0000000000.jpg?v=1782120386\" aria-label=\"CC tinted serum natural-looking finish video\"\u003e\n          \u003csource src=\"https:\/\/marssirace.com\/cdn\/shop\/videos\/c\/vp\/57d2cafcac7b4c709aca62e0e8b7b180\/57d2cafcac7b4c709aca62e0e8b7b180.HD-1080p-4.8Mbps-87111679.mp4?v=0\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"ccvd-caption\"\u003e\n\n        \u003cspan class=\"ccvd-number\"\u003e\n          02 \/ THE FINISH\n        \u003c\/span\u003e\n\n        \u003ch3\u003e\n          Love Your Skin-Like Look\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          A natural-looking finish that helps\n          create the appearance of a more even complexion.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/article\u003e\n\n  \u003c\/div\u003e\n\n\n  \u003c!-- ================= BENEFITS ================= --\u003e\n\n  \u003cdiv class=\"ccvd-benefits\"\u003e\n\n    \u003cdiv class=\"ccvd-benefit\"\u003e\n\n      \u003cspan class=\"ccvd-benefit-icon\"\u003e✧\u003c\/span\u003e\n\n      \u003cdiv\u003e\n        \u003cstrong\u003e\n          Tone-Adapting Pigments\n        \u003c\/strong\u003e\n\n        \u003cp\u003e\n          Designed to blend within your selected\n          complexion shade.\n        \u003c\/p\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"ccvd-benefit\"\u003e\n\n      \u003cspan class=\"ccvd-benefit-icon\"\u003e◌\u003c\/span\u003e\n\n      \u003cdiv\u003e\n        \u003cstrong\u003e\n          Lightweight Serum Feel\n        \u003c\/strong\u003e\n\n        \u003cp\u003e\n          Comfortable everyday coverage\n          without a heavy foundation feel.\n        \u003c\/p\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"ccvd-benefit\"\u003e\n\n      \u003cspan class=\"ccvd-benefit-icon\"\u003e♡\u003c\/span\u003e\n\n      \u003cdiv\u003e\n        \u003cstrong\u003e\n          Natural-Looking Coverage\n        \u003c\/strong\u003e\n\n        \u003cp\u003e\n          Helps soften the appearance\n          of uneven skin tone.\n        \u003c\/p\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\n  \u003c!-- ================= CTA ================= --\u003e\n\n  \u003cdiv class=\"ccvd-bottom\"\u003e\n\n    \u003cp\u003e\n      Your everyday complexion routine,\n      made a little more effortless.\n    \u003c\/p\u003e\n\n    \u003ca href=\"#MainContent\" class=\"ccvd-button\" id=\"ccvd-shop-link\"\u003e\n      BACK TO SHOP NOW\n      \u003cspan aria-hidden=\"true\"\u003e↑\u003c\/span\u003e\n    \u003c\/a\u003e\n\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\n\u003c!-- ================= AUTOPLAY SCRIPT ================= --\u003e\n\n\u003cscript\u003e\n(function(){\n\n  var root = document.getElementById(\n    'cc-video-description'\n  );\n\n  if(!root) return;\n\n  if(root.dataset.autoplayInitialized === 'true'){\n    return;\n  }\n\n  root.dataset.autoplayInitialized = 'true';\n\n  var videos = root.querySelectorAll(\n    '.ccvd-autoplay-video'\n  );\n\n  function playVideo(video){\n\n    if(!video) return;\n\n    video.muted = true;\n    video.defaultMuted = true;\n    video.loop = true;\n    video.playsInline = true;\n    video.controls = false;\n\n    if(!video.paused) return;\n\n    var promise = video.play();\n\n    if(promise \u0026\u0026 typeof promise.catch === 'function'){\n      promise.catch(function(){\n        \/* Browser autoplay restrictions *\/\n      });\n    }\n  }\n\n  function pauseVideo(video){\n    if(video \u0026\u0026 !video.paused){\n      video.pause();\n    }\n  }\n\n  if('IntersectionObserver' in window){\n\n    var observer = new IntersectionObserver(\n      function(entries){\n\n        entries.forEach(function(entry){\n\n          var video = entry.target;\n\n          if(\n            entry.isIntersecting \u0026\u0026\n            entry.intersectionRatio \u003e= 0.15 \u0026\u0026\n            !document.hidden\n          ){\n            playVideo(video);\n          }else{\n            pauseVideo(video);\n          }\n\n        });\n\n      },\n      {\n        threshold:[0,0.15,0.5]\n      }\n    );\n\n    videos.forEach(function(video){\n\n      video.muted = true;\n      video.defaultMuted = true;\n\n      observer.observe(video);\n\n    });\n\n  }else{\n\n    videos.forEach(function(video){\n      playVideo(video);\n    });\n\n  }\n\n  \/* Resume playback after returning to the tab *\/\n\n  document.addEventListener(\n    'visibilitychange',\n    function(){\n\n      if(document.hidden){\n\n        videos.forEach(function(video){\n          pauseVideo(video);\n        });\n\n      }else{\n\n        videos.forEach(function(video){\n\n          var rect = video.getBoundingClientRect();\n\n          if(\n            rect.bottom \u003e 0 \u0026\u0026\n            rect.top \u003c window.innerHeight\n          ){\n            playVideo(video);\n          }\n\n        });\n\n      }\n\n    }\n  );\n\n  \/* Return to purchase area *\/\n\n  var shopLink = root.querySelector(\n    '#ccvd-shop-link'\n  );\n\n  if(shopLink){\n\n    shopLink.addEventListener(\n      'click',\n      function(event){\n\n        event.preventDefault();\n\n        window.scrollTo({\n          top:0,\n          behavior:window.matchMedia(\n            '(prefers-reduced-motion: reduce)'\n          ).matches ? 'auto' : 'smooth'\n        });\n\n      }\n    );\n\n  }\n\n})();\n\u003c\/script\u003e\n\n\u003c\/section\u003e\n\n\u003c!-- END CC AUTOPLAY VIDEO DESCRIPTION --\u003e\n","brand":"Kindawz","offers":[{"title":"Light","offer_id":67812395745572,"sku":"ML8730-LG","price":49.99,"currency_code":"USD","in_stock":true},{"title":"Medium","offer_id":67812395778340,"sku":"ML8730-MD","price":49.99,"currency_code":"USD","in_stock":true},{"title":"Tan","offer_id":67812395811108,"sku":"ML8730-TA","price":49.99,"currency_code":"USD","in_stock":true},{"title":"Deep","offer_id":67812395843876,"sku":"ML8730-DP","price":49.99,"currency_code":"USD","in_stock":true},{"title":"Rich","offer_id":67812395876644,"sku":"ML8730-RC","price":49.99,"currency_code":"USD","in_stock":true},{"title":"Espresso","offer_id":67812395909412,"sku":"ML8730-EP","price":49.99,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0960\/5087\/2612\/files\/049aa35f15c492f9ee8c4f9902b071dfe2cb3bf3824cb71f7047f3b903212506.webp?v=1792571889","url":"https:\/\/www.dragomora.com\/products\/color-correcting-tinted-serum","provider":"Dragomora","version":"1.0","type":"link"}