{"product_id":"4-inch-rgb-smart-slim-pot-lights-canada","title":"4” RGB Smart Slim Pot Lights","description":"\u003csection class=\"spec-page\"\u003e\u003c!-- FULL-WIDTH CAROUSEL (Top) --\u003e\n\u003csection aria-label=\"Product photos\" class=\"spec-carousel\"\u003e\u003cbutton data-carousel-prev=\"\" aria-label=\"Previous photo\" type=\"button\" class=\"spec-carousel-btn prev\"\u003e‹\u003c\/button\u003e \u003cbutton data-carousel-next=\"\" aria-label=\"Next photo\" type=\"button\" class=\"spec-carousel-btn next\"\u003e›\u003c\/button\u003e\n\u003cdiv data-carousel-dots=\"\" aria-label=\"Carousel navigation\" class=\"spec-carousel-dots\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cscript\u003e\n(function () {\n  const carousel = document.querySelector(\".spec-carousel\");\n  if (!carousel) return;\n\n  const track = carousel.querySelector(\".spec-carousel-track\");\n  const slides = Array.from(carousel.querySelectorAll(\".spec-carousel-slide\"));\n  const prevBtn = carousel.querySelector(\"[data-carousel-prev]\");\n  const nextBtn = carousel.querySelector(\"[data-carousel-next]\");\n  const dotsWrap = carousel.querySelector(\"[data-carousel-dots]\");\n\n  if (!track || slides.length === 0) return;\n\n  let currentIndex = 0;\n  let autoplayTimer = null;\n  const AUTOPLAY_MS = 5000;\n\n  function slideWidth() {\n    return track.getBoundingClientRect().width;\n  }\n\n  function clampIndex(i) {\n    if (i \u003c 0) return 0;\n    if (i \u003e slides.length - 1) return slides.length - 1;\n    return i;\n  }\n\n  function scrollToIndex(i, opts) {\n    currentIndex = clampIndex(i);\n    track.scrollTo({\n      left: currentIndex * slideWidth(),\n      behavior: (opts \u0026\u0026 opts.instant) ? \"auto\" : \"smooth\"\n    });\n    updateDots();\n    updateButtons();\n  }\n\n  function updateButtons() {\n    if (!prevBtn || !nextBtn) return;\n    prevBtn.disabled = currentIndex === 0;\n    nextBtn.disabled = currentIndex === slides.length - 1;\n    prevBtn.style.opacity = prevBtn.disabled ? \"0.45\" : \"1\";\n    nextBtn.style.opacity = nextBtn.disabled ? \"0.45\" : \"1\";\n    prevBtn.style.pointerEvents = prevBtn.disabled ? \"none\" : \"auto\";\n    nextBtn.style.pointerEvents = nextBtn.disabled ? \"none\" : \"auto\";\n  }\n\n  function buildDots() {\n    if (!dotsWrap) return;\n    dotsWrap.innerHTML = \"\";\n    slides.forEach((_, i) =\u003e {\n      const btn = document.createElement(\"button\");\n      btn.type = \"button\";\n      btn.className = \"spec-carousel-dot\";\n      btn.setAttribute(\"aria-label\", \"Go to slide \" + (i + 1));\n      btn.addEventListener(\"click\", () =\u003e scrollToIndex(i));\n      dotsWrap.appendChild(btn);\n    });\n    updateDots();\n  }\n\n  function updateDots() {\n    if (!dotsWrap) return;\n    const dots = Array.from(dotsWrap.querySelectorAll(\".spec-carousel-dot\"));\n    dots.forEach((d, i) =\u003e {\n      const active = i === currentIndex;\n      d.setAttribute(\"aria-current\", active ? \"true\" : \"false\");\n    });\n  }\n\n  function syncIndexFromScroll() {\n    const w = slideWidth();\n    const i = Math.round(track.scrollLeft \/ w);\n    const next = clampIndex(i);\n    if (next !== currentIndex) {\n      currentIndex = next;\n      updateDots();\n      updateButtons();\n    }\n  }\n\n  function startAutoplay() {\n    stopAutoplay();\n    autoplayTimer = window.setInterval(() =\u003e {\n      const next = (currentIndex + 1) % slides.length;\n      scrollToIndex(next);\n    }, AUTOPLAY_MS);\n  }\n\n  function stopAutoplay() {\n    if (autoplayTimer) window.clearInterval(autoplayTimer);\n    autoplayTimer = null;\n  }\n\n  if (prevBtn) prevBtn.addEventListener(\"click\", () =\u003e scrollToIndex(currentIndex - 1));\n  if (nextBtn) nextBtn.addEventListener(\"click\", () =\u003e scrollToIndex(currentIndex + 1));\n\n  track.addEventListener(\"scroll\", () =\u003e {\n    window.requestAnimationFrame(syncIndexFromScroll);\n  });\n\n  carousel.addEventListener(\"mouseenter\", stopAutoplay);\n  carousel.addEventListener(\"mouseleave\", startAutoplay);\n  carousel.addEventListener(\"focusin\", stopAutoplay);\n  carousel.addEventListener(\"focusout\", startAutoplay);\n\n  track.addEventListener(\"keydown\", (e) =\u003e {\n    if (e.key === \"ArrowLeft\") scrollToIndex(currentIndex - 1);\n    if (e.key === \"ArrowRight\") scrollToIndex(currentIndex + 1);\n  });\n\n  window.addEventListener(\"resize\", () =\u003e {\n    scrollToIndex(currentIndex, { instant: true });\n  });\n\n  buildDots();\n  scrollToIndex(0, { instant: true });\n  startAutoplay();\n})();\n\u003c\/script\u003e \u003c!-- HERO --\u003e\n\u003csection class=\"spec-hero\"\u003e\n\u003cdiv style=\"text-align: start;\" class=\"spec-hero-media\"\u003e\n\u003cbr\u003e\u003cimg alt=\"Round 4-inch smart recessed LED panel light with white trim, frosted diffuser lens, RGB colour-changing functionality, and spring clip mounting brackets on a clean white background for modern residential and commercial ceiling lighting applications.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/ProductPhotoDimensionGuide_1.png?v=1778787558\"\u003e\u003cbr\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-hero-content\"\u003e\n\u003ch4 class=\"spec-title\"\u003e4” RGB Smart Slim Pot Lights\u003c\/h4\u003e\n\u003cp class=\"spec-tagline\"\u003eA smart recessed LED panel light with RGB colour control, adjustable 2700K–5000K white light, app and switch control, and bright energy-saving performance for dry and damp locations.\u003c\/p\u003e\n\u003cdiv class=\"spec-stats\" aria-label=\"Key specifications\"\u003e\n\u003cspan\u003e9W\u003c\/span\u003e \u003cspan\u003e600 lm\u003c\/span\u003e \u003cspan\u003eCRI \u0026gt;90\u003c\/span\u003e \u003cspan\u003e2700K–5000K + RGB\u003c\/span\u003e \u003cspan\u003eETL \u0026amp; FCC Certified\u003c\/span\u003e\n\u003c\/div\u003e\n\u003ca href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/C_C_SPEC_4_SMART_PANEL_9W-RGB.pdf?v=1691677436\" class=\"spec-btn\" rel=\"noopener\" title=\"4 Smart Panel 9W-RGB Spec Sheet\" target=\"_blank\"\u003e Download Spec Sheet \u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- SUPPORT VISUAL --\u003e\u003c!-- FEATURES --\u003e\n\u003csection class=\"spec-features\"\u003e\n\u003ch2 class=\"spec-section-title\"\u003eHighlighted Features\u003c\/h2\u003e\n\u003cdiv class=\"spec-feature-grid\"\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eSmart RGB Control\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eFeatures RGB colour control with adjustable white light from 2700K to 5000K, offering flexible lighting for different moods, spaces, and applications.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eHigh Brightness LED Chip\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eBuilt with a high brightness LED chip for energy-saving performance, stable lighting, environmental protection, and long service life.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eLight Output\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eRated at 9W with 600 lm output and 60–70 lm\/W light efficiency for bright and efficient recessed ceiling illumination.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eHigh Quality Light\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eDelivers CRI \u0026gt;90 with white light, warm light, and RGB directional colour options for clean visual performance and strong colour rendering.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eWide Beam Angle\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eProvides a 100° beam angle for wide and even light distribution across the room.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eOptical Cover\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eUses a milky PC optical lamp cover for smooth light diffusion, anti-aging performance, and durability.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eDurable Build\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eConstructed with an aluminum and PC shell for strong heat dissipation, anti-corrosion performance, and long-term reliability.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eVoltage\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eOperates on 100–277V with 50\/60Hz working frequency and a dimming plus RGB power supply Bluetooth module.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eSmart Home Compatibility\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eCompatible with smart home technology and controlled through the Home Linking app, with app control and switch control available.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eFast Start Time\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eStarts in less than 1 second for quick, responsive illumination when powered on.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eRated Lifetime\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eRated for up to 30,000 hours with 10,000 switching cycles for dependable long-term use.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eCertifications\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eETL and FCC certified, mercury-free, dimmable, and suitable for dry and damp location working environments.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  .spec-page{\n    max-width: 1180px;\n    margin: 0 auto;\n    padding: 40px 16px 24px;\n  }\n\n  \/* HERO *\/\n  .spec-hero{\n    display: grid;\n    grid-template-columns: 1.05fr 0.95fr;\n    gap: 56px;\n    align-items: center;\n  }\n\n  .spec-hero-media img{\n    width: 100%;\n    height: auto;\n    display: block;\n    border-radius: 14px;\n  }\n\n  .spec-title{\n    margin: 0 0 10px;\n    font-size: clamp(28px, 3vw, 40px);\n    line-height: 1.15;\n    font-weight: 600;\n    letter-spacing: 0.2px;\n  }\n\n  .spec-tagline{\n    margin: 0 0 18px;\n    font-size: 16px;\n    line-height: 1.55;\n    font-weight: 400;\n    color: rgba(0,0,0,0.70);\n    max-width: 46ch;\n  }\n\n  \/* Stat row: minimal pipe-separated *\/\n  .spec-stats{\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px 14px;\n    margin: 0 0 22px;\n    font-size: 13px;\n    letter-spacing: 0.3px;\n    color: rgba(0,0,0,0.62);\n  }\n\n  .spec-stats span{\n    position: relative;\n    padding-right: 14px;\n    white-space: nowrap;\n  }\n\n  .spec-stats span:not(:last-child)::after{\n    content: \"|\";\n    position: absolute;\n    right: 4px;\n    color: rgba(0,0,0,0.28);\n  }\n\n  \/* CTA button: subtle *\/\n  .spec-btn{\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 16px;\n    border-radius: 10px;\n    text-decoration: none;\n    font-weight: 600;\n    font-size: 14px;\n    border: 1px solid rgba(0,0,0,0.14);\n    color: rgba(0,0,0,0.86);\n    background: #fff;\n    transition: transform 120ms ease, box-shadow 120ms ease;\n  }\n\n  .spec-btn:hover{\n    transform: translateY(-1px);\n    box-shadow: 0 10px 24px rgba(0,0,0,0.08);\n  }\n\n  \/* SUPPORT *\/\n  .spec-support{\n    margin-top: 32px;\n  }\n\n  .spec-support img{\n    width: 100%;\n    height: auto;\n    display: block;\n    border-radius: 14px;\n  }\n\n  \/* FEATURES *\/\n  .spec-features{\n    margin-top: 40px;\n    padding-top: 26px;\n    border-top: 1px solid rgba(0,0,0,0.08);\n  }\n\n  .spec-section-title{\n    margin: 0 0 18px;\n    font-size: 16px;\n    font-weight: 600;\n    letter-spacing: 0.2px;\n    color: rgba(0,0,0,0.88);\n  }\n\n  .spec-feature-grid{\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 18px 40px;\n    align-items: start;\n  }\n\n  .spec-feature{\n    display: grid;\n    grid-template-columns: 210px 1fr;\n    gap: 14px;\n  }\n\n  .spec-feature-label{\n    font-size: 13px;\n    font-weight: 600;\n    color: rgba(0,0,0,0.90);\n    letter-spacing: 0.2px;\n  }\n\n  .spec-feature-text{\n    font-size: 14px;\n    line-height: 1.6;\n    color: rgba(0,0,0,0.68);\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 900px){\n    .spec-hero{\n      grid-template-columns: 1fr;\n      gap: 24px;\n      align-items: start;\n    }\n\n    .spec-stats span{\n      padding-right: 0;\n      white-space: normal;\n    }\n\n    .spec-stats span:not(:last-child)::after{\n      content: \"\";\n    }\n\n    .spec-feature-grid{\n      grid-template-columns: 1fr;\n      gap: 14px;\n    }\n\n    .spec-feature{\n      grid-template-columns: 1fr;\n      gap: 6px;\n    }\n  }\n\n \n\/* FULL-WIDTH CAROUSEL *\/\n.spec-carousel{\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  margin-top: -40px;\n  margin-bottom: 26px;\n  overflow: hidden;\n  background: #0b0b0b;\n}\n\n.spec-carousel-track{\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n}\n\n.spec-carousel-track::-webkit-scrollbar{\n  display: none;\n}\n\n.spec-carousel-slide{\n  flex: 0 0 100%;\n  scroll-snap-align: center;\n  position: relative;\n  background: #0b0b0b;\n}\n\n.spec-carousel-slide img{\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n.spec-carousel-btn{\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 42px;\n  height: 42px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.22);\n  background: rgba(0,0,0,0.38);\n  color: #fff;\n  font-size: 22px;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform 120ms ease, background 120ms ease;\n}\n\n.spec-carousel-btn:hover{\n  background: rgba(0,0,0,0.55);\n  transform: translateY(-50%) scale(1.03);\n}\n\n.spec-carousel-btn.prev{\n  left: 14px;\n}\n\n.spec-carousel-btn.next{\n  right: 14px;\n}\n\n.spec-carousel-dots{\n  position: absolute;\n  left: 50%;\n  bottom: 14px;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 8px;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: rgba(0,0,0,0.28);\n  border: 1px solid rgba(255,255,255,0.12);\n}\n\n.spec-carousel-dot{\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: rgba(255,255,255,0.35);\n  border: 0;\n  cursor: pointer;\n}\n\n.spec-carousel-dot[aria-current=\"true\"]{\n  background: rgba(255,255,255,0.92);\n}\n\n@media (max-width: 900px){\n  .spec-carousel{\n    margin-top: -24px;\n    margin-bottom: 18px;\n  }\n\n  .spec-carousel-btn{\n    width: 36px;\n    height: 36px;\n    font-size: 18px;\n  }\n\n  .spec-carousel-btn.prev{\n    left: 10px;\n  }\n\n  .spec-carousel-btn.next{\n    right: 10px;\n  }\n\n  .spec-carousel-dots{\n    bottom: 10px;\n  }\n}\n\n\u003c\/style\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- Paste this WHOLE BLOCK under your existing HTML.\n     It keeps your markup and only adds: (1) working dots, (2) working prev\/next,\n     (3) autoplay every 5 seconds, (4) pauses on hover\/focus, (5) supports any # of slides. --\u003e\n\u003cp\u003e \u003c\/p\u003e","brand":"C\u0026C Lighting","offers":[{"title":"Default Title","offer_id":32950671573077,"sku":"","price":28.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/ProductPhotoDimensionGuide_1.png?v=1778787558","url":"https:\/\/candclight.com\/products\/4-inch-rgb-smart-slim-pot-lights-canada","provider":"C\u0026C Lighting","version":"1.0","type":"link"}