{"product_id":"acoustic-drum-light-series","title":"Acoustic Drum Light Series","description":"\u003csection class=\"spec-page\"\u003e\u003c!-- FULL-WIDTH CAROUSEL (Top) --\u003e\n\u003csection class=\"spec-carousel\" aria-label=\"Product photos\"\u003e\n\u003cdiv class=\"spec-carousel-track\" id=\"cobCarousel\" tabindex=\"0\"\u003e\n\u003cdiv class=\"spec-carousel-slide\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/C_C_Drum_Light_Installation_Image_40ce7524-696d-4c7b-bd02-7868d72378ef.png?v=1778784764\" alt=\"Modern open-concept living room and dining area featuring a suspended gray acoustic drum pendant light with sound-absorbing felt shade, soft ambient LED illumination, minimalist Scandinavian-inspired interior design, light wood flooring, blue accent furniture, and contemporary residential acoustic lighting solution.\" loading=\"eager\"\u003e\u003c\/div\u003e\n\u003c!-- Add more images like this when you have them --\u003e\n\u003c\/div\u003e\n\u003cbutton class=\"spec-carousel-btn prev\" type=\"button\" aria-label=\"Previous photo\" data-carousel-prev=\"\"\u003e‹\u003c\/button\u003e \u003cbutton class=\"spec-carousel-btn next\" type=\"button\" aria-label=\"Next photo\" data-carousel-next=\"\"\u003e›\u003c\/button\u003e\n\u003cdiv class=\"spec-carousel-dots\" aria-label=\"Carousel navigation\" data-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 class=\"spec-hero-media\" style=\"text-align: start;\"\u003e\n\u003cbr\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/C_C_Drum_Light_Product_Image.png?v=1778170692\" alt=\"Acoustic Drum Light Series pendant luminaire in Steel Grey acoustic outer finish with white wool felt interior, suspended on white cord against a white background\"\u003e\u003cbr\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-hero-content\"\u003e\n\u003ch4 class=\"spec-title\"\u003eAcoustic Drum Light Series\u003c\/h4\u003e\n\u003cp class=\"spec-tagline\"\u003eAn architectural acoustic pendant luminaire combining direct illumination and sound absorption in a single bell-shaped drum fixture — ideal for offices, hospitality, and large-scale commercial environments.\u003c\/p\u003e\n\u003cdiv aria-label=\"Key specifications\" class=\"spec-stats\"\u003e\n\u003cspan\u003e30 in Diameter\u003c\/span\u003e \u003cspan\u003e25W \/ 50W\u003c\/span\u003e \u003cspan\u003eCRI 90+\u003c\/span\u003e \u003cspan\u003eNRC 0.7\u003c\/span\u003e \u003cspan\u003eCSA \u0026amp; UL Certified\u003c\/span\u003e\n\u003c\/div\u003e\n\u003ca title=\"Acoustic Drum Light Spec Sheet\" rel=\"noopener\" class=\"spec-btn\" href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/Acoustic_Drum_Light_Series.pdf?v=1778170700\" 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\"\u003eAcoustic Performance\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eClass 1 Fire rated with a 0.7 Noise Reduction Coefficient (NRC). 1\" acoustic material made from recyclable plastic, available in various thicknesses for effective sound absorption.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eHigh Quality Light Output\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003e25W delivers 2,205–2,295 lm; 50W delivers 4,410–4,590 lm depending on CCT (3000K \/ 3500K \/ 4000K) at 90+ CRI. Direct (DD) radiance distribution via frosted opal lens.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eLED Longevity\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eLED strips rated for 60,000 hours L80 at 90+ CRI, delivering long-lasting, consistent diffused illumination through a frosted opal lens.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eSize Variety\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eAvailable in 12 in, 16 in, and 24 in heights. Luminaire\/shade diameter is 30 in (29.75 in actual) across all sizes, with height variations to suit different ceiling conditions.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eDimming Options\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eSupports On\/Off, 0–10V Dim, DALI, Triac Dimming, and 2.4G Wireless Dimming for flexible lighting control across all installation types.\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\"\u003eStandard UNV 120\/277V as default. 347V available — please verify availability when specifying for Canadian commercial projects.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eInstallation Flexibility\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eSuspended pendant mounting via 6 ft cord in black (S6B) or white (S6W), or custom suspension length. Canopy finish matches cord colour for a cohesive look.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eMaterial \u0026amp; Build\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eExtruded aluminum body with built-in driver. Available in Black (RAL 9005) or White (RAL 9003); custom colours available. Acoustic outer shell is recyclable plastic; interior lined with wool felt.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eFinish Options\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003e10 acoustic outer finishes including Admiral Blue, Steel Grey, Charcoal, Snow White, and Shadow Marble. 13 wool felt inner colours such as Marigold, Cardinal Red, Cobalt Blue, Graphite, and Black. Specified as a combined code (e.g. 04\/121).\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eModular Configuration\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eFully modular ordering system covering size, wattage, CCT, voltage, dimming, cord length, finish, acoustic finish, and wool felt colour — all specified per project requirements.\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\"\u003eCertified to CSA and UL Standards. Custom modifications are available and backed by full certification compliance for commercial and architectural installations.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"spec-feature\"\u003e\n\u003cdiv class=\"spec-feature-label\"\u003eBroad Application Range\u003c\/div\u003e\n\u003cdiv class=\"spec-feature-text\"\u003eDesigned for open-plan offices, hospitality environments, retail, and large-scale architectural installations requiring both aesthetic refinement and measurable acoustic performance.\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":42471339851861,"sku":null,"price":0.0,"currency_code":"CAD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0986\/0548\/files\/C_C_Drum_Light_Product_Image.png?v=1778170692","url":"https:\/\/candclight.com\/products\/acoustic-drum-light-series","provider":"C\u0026C Lighting","version":"1.0","type":"link"}