{"id":45,"date":"2026-08-05T06:23:05","date_gmt":"2026-08-05T06:23:05","guid":{"rendered":"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/?page_id=45"},"modified":"2026-09-01T11:11:33","modified_gmt":"2026-09-01T11:11:33","slug":"home","status":"publish","type":"page","link":"https:\/\/betacrystal.com\/zh\/","title":{"rendered":"\u9996\u9801"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ==========================================================================\n   BetaCrystal Hero Video Section\n   ========================================================================== *\/\n\n.bc-hero-video {\n  position: relative;\n  width: 100%;\n  min-height: 100vh;\n  min-height: 100dvh;\n  overflow: hidden;\n  display: flex;\n  align-items: flex-end;\n  background: #1a1a1a;\n}\n\n.bc-hero-video__bg {\n  position: absolute;\n  max-width: 720px;\n  margin-left: auto;\n  inset: 0;\n  z-index: 1;\n}\n\n.bc-hero-video__bg::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 300px;\n    height: 100%;\n    z-index: 2;\n    pointer-events: none;\n    background: linear-gradient(\n        to right,\n        #1a1a1a,\n        transparent\n    );\n}\n.bc-hero-video__el {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0;\n}\n\n.bc-hero-video__el[data-index=\"0\"] {\n  opacity: 1;\n}\n\n.bc-hero-video__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  cursor: pointer;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.65) 0%,\n    rgba(0, 0, 0, 0.25) 40%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n}\n\n\/* Content wrapper: flex column, content pinned to the bottom.\n   Text and tiles are laid out with flexbox (not absolute positioning)\n   so they naturally stack instead of overlapping on small screens. *\/\n.bc-hero-video__content {\n  position: relative;\n  z-index: 3;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 0 2.5rem 4rem;\n  box-sizing: border-box;\n}\n\n.bc-hero-video__text {\n  max-width: 600px;\n  text-align: left;\n}\n\n.bc-hero-video__headline {\n  margin: 0 0 0.6rem;\n  font-family: inherit;\n  font-size: clamp(2.5rem, 3vw, 3rem);\n  font-weight: 500;\n  line-height: 1.25;\n  letter-spacing: 0.01em;\n  color: #f5f3ef;\n  padding-bottom: 1rem;\n  text-transform: uppercase;\n}\n\n.bc-hero-video__line {\n  display: block;\n  overflow: hidden;\n  padding-bottom: 0.18em;\n  margin-bottom: -0.18em;\n  opacity: 0;\n}\n\n.bc-hero-video__line span {\n  display: inline-block;\n  opacity: 0;\n  transform: translateY(115%);\n  will-change: transform, opacity;\n}\n\n.bc-hero-video__subhead {\n  margin: 0 0 1.25rem;\n  font-size: 0.85rem;\n  line-height: 3;\n  max-width: 340px;\n  opacity: 0;\n  color: rgba(255, 255, 255, 0.85);\n  padding-bottom: 1rem;\n}\n\n.bc-hero-video__button {\n  display: inline-block;\n  padding: 0.7rem 1.4rem;\n  border: 1px solid #c9a06a;\n  border-radius: 2px;\n  color: #c9a06a;\n  text-decoration: none;\n  text-transform: uppercase;\n  font-size: 0.7rem;\n  letter-spacing: 0.08em;\n  opacity: 0;\n  transition: background 0.25s ease, color 0.25s ease;\n  margin-bottom: 2rem;\n}\n\n.bc-hero-video__button:hover {\n  background: #d18420;\n  color: #ffffff;\n}\n\n\/* Progress tiles *\/\n.bc-hero-video__progress {\n  display: flex;\n  gap: 0.6rem;\n  flex-shrink: 0;\n  opacity: 0;\n  margin-bottom: 2rem;\n}\n\n.bc-hero-video__tile {\n  position: relative;\n  width: 72px;\n  height: 46px;\n  border-radius: 3px;\n  overflow: hidden;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  padding: 0;\n  cursor: pointer;\n  background: #000;\n  opacity: 0.55;\n  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n}\n\n.bc-hero-video__tile:hover {\n  opacity: 0.85;\n  transform: translateY(-1px);\n}\n\n.bc-hero-video__tile.is-active {\n  opacity: 1;\n  border-color: #fff;\n}\n\n.bc-hero-video__tile-thumb {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  pointer-events: none;\n}\n\n.bc-hero-video__tile-fill {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  height: 3px;\n  width: 0%;\n  background: #fff;\n  z-index: 2;\n}\n\n\/* ==========================================================================\n   Responsive breakpoints\n   ========================================================================== *\/\n\n\/* Tablet: content still side-by-side but tighter *\/\n@media (max-width: 900px) {\n  .bc-hero-video__content {\n    padding: 0 2rem 2rem;\n    gap: 1rem;\n  }\n  .bc-hero-video__text {\n    max-width: 320px;\n  }\n}\n\n\/* Mobile: stack text above tiles, full-width tile row, shorter viewport,\n   larger tap targets, no side-clipping *\/\n@media (max-width: 700px) {\n  .bc-hero-video {\n    min-height: 100vh;\n  }\n\n  .bc-hero-video__content {\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-end;\n    padding: 0 1.25rem 1.75rem;\n    gap: 1rem;\n  }\n\n  .bc-hero-video__text {\n    max-width: 100%;\n  }\n\n  .bc-hero-video__headline {\n    font-size: clamp(1.15rem, 5vw, 1.5rem);\n  }\n\n  .bc-hero-video__subhead {\n    max-width: 100%;\n    font-size: 0.82rem;\n  }\n\n  .bc-hero-video__button {\n    width: 100%;\n    text-align: center;\n    padding: 0.85rem 1.4rem;\n    font-size: 0.72rem;\n    margin-bottom: 1rem;\n  }\n\n  .bc-hero-video__progress {\n    width: 100%;\n    justify-content: center;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .bc-hero-video__tile {\n    flex: 1 1 0;\n    width: auto;\n    height: 40px;\n    min-width: 0;\n  }\n}\n\n\/* Very small phones: tighten further, drop tile row to two lines if needed *\/\n@media (max-width: 380px) {\n  .bc-hero-video__content {\n    padding: 0 1rem 1.5rem;\n  }\n\n  .bc-hero-video__tile {\n    height: 34px;\n  }\n}\n\n\/* ==========================================================================\n   Header \/ nav overrides (kept from original for context\/consistency)\n   ========================================================================== *\/\n\n#main-header {\n  background-color: rgba(255, 255, 255, 0);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;\n}\n\n#main-header:hover {\n  background-color: #ffffff;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\n\n#main-header:hover .main-navigation a,\n#main-header:hover #secondary-navigation a {\n  color: #1a1a1a;\n  transition: color 0.3s ease;\n}\n\n.brand.has-logo-image {\n  position: relative;\n  display: inline-block;\n}\n\n.brand.has-logo-image::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: url(\"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/cropped-BetaCrystalLogo_V_5.0.png\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n\n#main-header:hover .brand.has-logo-image::after {\n  opacity: 1;\n}\n\n#main-header:hover .brand.has-logo-image img.custom-logo {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.brand.has-logo-image img.custom-logo {\n  transition: opacity 0.3s ease;\n  position: relative;\n  z-index: 1;\n}\n\n.main-navigation a,\n#secondary-navigation a {\n  position: relative;\n  transition: color 0.25s ease;\n}\n\n.main-navigation a::after,\n#secondary-navigation a::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: -4px;\n  width: 100%;\n  height: 1px;\n  background-color: currentColor;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.25s ease;\n}\n\n.main-navigation a:hover,\n#secondary-navigation a:hover {\n  color: #1a1a1a;\n}\n\n.main-navigation .current_page_item a,\n#secondary-navigation .current_page_item a,\n.main-navigation .current_page_item a:hover,\n#secondary-navigation .current_page_item a:hover {\n  display: none;\n}\n\n.main-navigation a:hover::after,\n#secondary-navigation a:hover::after {\n  transform: scaleX(1);\n}\n\n.bc-gold-hover {\n  color: #c9a06a;\n  transition: color 0.3s ease;\n}\n\n.bc-gold-hover:hover {\n  color: #dfb77c;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n\n  var videoUrls = [\n    \"https:\/\/betacrystal.com\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro.mp4\",\n    \"https:\/\/betacrystal.com\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Method.mp4\",\n    \"https:\/\/betacrystal.com\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Demo.mp4\"\n  ];\n\n  function initBetaCrystalVideoHero() {\n    if (typeof gsap === \"undefined\") return;\n\n    var section = document.getElementById(\"bc-hero-video\");\n    if (!section) return;\n\n    var videos = Array.prototype.slice.call(section.querySelectorAll(\".bc-hero-video__el\"));\n    var tiles = Array.prototype.slice.call(section.querySelectorAll(\".bc-hero-video__tile\"));\n    var fills = tiles.map(function (t) {\n      return t.querySelector(\".bc-hero-video__tile-fill\");\n    });\n    var overlay = section.querySelector(\".bc-hero-video__overlay\");\n    var current = 0;\n\n    \/\/ On mobile \/ reduced-data connections, skip eagerly preloading every\n    \/\/ video up front \u2014 just play the first one and load the rest lazily\n    \/\/ as they're needed. Keeps initial page weight down on phones.\n    var isSmallScreen = window.matchMedia(\"(max-width: 700px)\").matches;\n    var saveData = navigator.connection && navigator.connection.saveData;\n\n    function preloadVideo(index) {\n      if (index >= videos.length) return;\n\n      var video = videos[index];\n\n      if (video.readyState >= HTMLMediaElement.HAVE_METADATA || !video.paused) {\n        preloadVideo(index + 1);\n        return;\n      }\n\n      video.muted = true;\n      video.setAttribute(\"src\", videoUrls[index]);\n      video.setAttribute(\"preload\", \"auto\");\n      video.load();\n\n      \/\/ Explicitly start playback for the first\/hero video \u2014 the autoplay\n      \/\/ attribute isn't reliable once src is assigned dynamically via JS,\n      \/\/ especially on mobile.\n      if (index === 0) {\n        var playPromise = video.play();\n        if (playPromise && playPromise.catch) {\n          playPromise.catch(function () {});\n        }\n      }\n\n      var movedOn = false;\n\n      function advanceQueue() {\n        if (movedOn) return;\n        movedOn = true;\n        video.removeEventListener(\"loadedmetadata\", advanceQueue);\n        clearTimeout(safetyTimeout);\n        preloadVideo(index + 1);\n      }\n\n      video.addEventListener(\"loadedmetadata\", advanceQueue, { once: true });\n\n      \/\/ Failsafe: force-advance after 20s so the chain never gets stuck\n      var safetyTimeout = setTimeout(advanceQueue, 20000);\n    }\n\n    function ensureVideoLoaded(index) {\n      var video = videos[index];\n      if (video.getAttribute(\"src\")) return;\n      video.setAttribute(\"src\", videoUrls[index]);\n      video.setAttribute(\"preload\", \"auto\");\n      video.load();\n    }\n\n    if (isSmallScreen || saveData) {\n      \/\/ Just load the first video now; the rest load on demand when switched to.\n      ensureVideoLoaded(0);\n      var firstPlay = videos[0].play();\n      if (firstPlay && firstPlay.catch) firstPlay.catch(function () {});\n    } else {\n      preloadVideo(0);\n    }\n\n    function resetFill(i, value) {\n      gsap.set(fills[i], { width: value + \"%\" });\n    }\n\n    function setActiveTile(i) {\n      tiles.forEach(function (t, idx) {\n        t.classList.toggle(\"is-active\", idx === i);\n      });\n    }\n\n    function playCurrent() {\n      var v = videos[current];\n      v.currentTime = 0;\n      var p = v.play();\n      if (p && p.catch) p.catch(function () {});\n      setActiveTile(current);\n    }\n\n    function switchTo(next) {\n      var currentEl = videos[current];\n      var nextEl = videos[next];\n\n      ensureVideoLoaded(next);\n\n      tiles.forEach(function (t, i) {\n        if (i < next) resetFill(i, 100);\n        else if (i > next) resetFill(i, 0);\n      });\n      resetFill(next, 0);\n      setActiveTile(next);\n\n      nextEl.currentTime = 0;\n      var p = nextEl.play();\n      if (p && p.catch) p.catch(function () {});\n\n      gsap.to(currentEl, { opacity: 0, duration: 1, ease: \"power1.inOut\" });\n      gsap.to(nextEl, { opacity: 1, duration: 1, ease: \"power1.inOut\" });\n\n      setTimeout(function () {\n        currentEl.pause();\n      }, 1100);\n\n      current = next;\n    }\n\n    function crossfadeToNext() {\n      switchTo((current + 1) % videos.length);\n    }\n\n    videos.forEach(function (v) {\n      v.addEventListener(\"ended\", crossfadeToNext);\n      v.addEventListener(\"timeupdate\", function () {\n        var idx = parseInt(v.getAttribute(\"data-index\"), 10);\n        if (idx !== current || !v.duration) return;\n        var pct = (v.currentTime \/ v.duration) * 100;\n        gsap.set(fills[idx], { width: pct + \"%\" });\n      });\n    });\n\n    tiles.forEach(function (tile) {\n      tile.addEventListener(\"click\", function () {\n        var idx = parseInt(tile.getAttribute(\"data-index\"), 10);\n\n        if (idx === current) {\n          var v = videos[current];\n          if (v.paused) {\n            var p = v.play();\n            if (p && p.catch) p.catch(function () {});\n          }\n          return;\n        }\n        switchTo(idx);\n      });\n    });\n\n    overlay.addEventListener(\"click\", function () {\n      var v = videos[current];\n      if (v.paused) {\n        var p = v.play();\n        if (p && p.catch) p.catch(function () {});\n      }\n    });\n\n    playCurrent();\n\n    \/\/ ---- Headline word-stagger reveal ----\n    var lines = section.querySelectorAll(\"#bc-hero-video-headline .bc-hero-video__line\");\n    lines.forEach(function (line) {\n      var words = line.textContent.trim().split(\" \");\n      line.innerHTML = words\n        .map(function (w) {\n          return '<span style=\"opacity:0; transform: translateY(115%);\">' + w + \"&nbsp;<\/span>\";\n        })\n        .join(\"\");\n      line.style.opacity = \"1\";\n    });\n\n    var wordSpans = section.querySelectorAll(\"#bc-hero-video-headline .bc-hero-video__line span\");\n\n    var tl = gsap.timeline({ defaults: { ease: \"power3.out\" } });\n    tl.to(wordSpans, { opacity: 1, y: 0, duration: 0.9, stagger: 0.06 }, 0.3);\n    tl.to(\"#bc-hero-video-subhead\", { opacity: 1, duration: 0.8 }, 1.0);\n    tl.to(\"#bc-hero-video-button\", { opacity: 1, duration: 0.6 }, 1.25);\n    tl.to(\"#bc-hero-video-progress\", { opacity: 1, duration: 0.6 }, 1.35);\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", initBetaCrystalVideoHero);\n  } else {\n    initBetaCrystalVideoHero();\n  }\n})();\n<\/script>\n\n<!-- BetaCrystal Hero Video Section -->\n<section class=\"bc-hero-video\" id=\"bc-hero-video\">\n  <div class=\"bc-hero-video__bg\">\n    <video class=\"bc-hero-video__el\" data-index=\"0\" playsinline=\"\" muted=\"\" autoplay=\"\" preload=\"none\" type=\"video\/mp4\"><\/video>\n    <video class=\"bc-hero-video__el\" data-index=\"1\" playsinline=\"\" muted=\"\" preload=\"none\" type=\"video\/mp4\"><\/video>\n    <video class=\"bc-hero-video__el\" data-index=\"2\" playsinline=\"\" muted=\"\" preload=\"none\" type=\"video\/mp4\"><\/video>\n  <\/div>\n\n  <div class=\"bc-hero-video__overlay\"><\/div>\n\n  <div class=\"bc-hero-video__content\">\n    <div class=\"bc-hero-video__text\">\n      <h1 class=\"bc-hero-video__headline\" id=\"bc-hero-video-headline\">\n        <span class=\"bc-hero-video__line bc-gold-hover\">Precision tempering,<\/span>\n        <span class=\"bc-hero-video__line\">made simple.<\/span>\n      <\/h1>\n      <p class=\"bc-hero-video__subhead\" id=\"bc-hero-video-subhead\">\n        Small-batch chocolate equipment engineered for precise, reliable tempering every time.\n      <\/p>\n      <a href=\"shop\/\" class=\"bc-hero-video__button\" id=\"bc-hero-video-button\">\n        Shop Equipment\n      <\/a>\n    <\/div>\n\n    <div class=\"bc-hero-video__progress\" id=\"bc-hero-video-progress\">\n      <button class=\"bc-hero-video__tile is-active\" data-index=\"0\" aria-label=\"Play video 1\">\n        <img data-recalc-dims=\"1\" decoding=\"async\" class=\"bc-hero-video__tile-thumb\" src=\"https:\/\/i0.wp.com\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro_Thumb.jpg?w=1290&#038;ssl=1\" alt=\"\">\n        <span class=\"bc-hero-video__tile-fill\"><\/span>\n      <\/button>\n      <button class=\"bc-hero-video__tile\" data-index=\"1\" aria-label=\"Play video 2\">\n        <img data-recalc-dims=\"1\" decoding=\"async\" class=\"bc-hero-video__tile-thumb\" src=\"https:\/\/i0.wp.com\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Method_Thumb.jpg?w=1290&#038;ssl=1\" alt=\"\">\n        <span class=\"bc-hero-video__tile-fill\"><\/span>\n      <\/button>\n      <button class=\"bc-hero-video__tile\" data-index=\"2\" aria-label=\"Play video 3\">\n        <img data-recalc-dims=\"1\" decoding=\"async\" class=\"bc-hero-video__tile-thumb\" src=\"https:\/\/i0.wp.com\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Demo_Thumb.jpg?w=1290&#038;ssl=1\" alt=\"\">\n        <span class=\"bc-hero-video__tile-fill\"><\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/section>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==========================================================================\n   BetaCrystal \u2014 Shop by Category (CSS only)\n\n   WHERE THIS GOES: Appearance -> Customize -> Additional CSS in Kadence\n   (or a \"Custom CSS\" panel if your setup has a per-page one). Paste the\n   raw CSS below \u2014 do NOT wrap it in <style> tags, that field only wants\n   plain CSS. This makes it live site-wide with no file-linking involved,\n   so there's nothing that can 404.\n\n   Font-family is forced to `inherit` on every text element so it always\n   matches your theme's body font \u2014 the same approach used in the hero\n   video section \u2014 instead of picking up whatever separate heading\/button\n   font Kadence's Customizer has assigned elsewhere.\n   ========================================================================== *\/\n\n.bc-cat, .bc-cat *, .bc-cat *::before, .bc-cat *::after {\n  box-sizing: border-box;\n}\n\n.bc-cat a {\n  text-decoration: none !important;\n}\n\n.bc-cat img {\n  max-width: none;\n}\n\n.bc-cat {\n  --bc-black: #141414;\n  --bc-black-soft: rgba(20, 20, 20, 0.68);\n  --bc-white: #ffffff;\n  --bc-navy: #1c3557;\n  --bc-navy-soft: rgba(28, 53, 87, 0.9);\n  --bc-line: #3f3f3f;\n  --bc-copper:#cb7900;\n\n  background: var(--bc-white);\n  color: var(--bc-black);\n  font-family: inherit !important;\n  padding: 5.5rem 2rem 6rem;\n  width: 100%;\n}\n\n.bc-cat__head {\n  max-width: 640px;\n  margin: 0 auto 3.25rem;\n  text-align: center;\n}\n\n.bc-cat__eyebrow {\n  display: inline-block;\n  font-family: inherit !important;\n  font-size: 1rem !important;\n  font-weight: 600 !important;\n  letter-spacing: 0.14em !important;\n  text-transform: uppercase !important;\n  color: var(--bc-navy) !important;\n  margin-bottom: 0.9rem;\n  line-height: 1.4 !important;\n  color: #c9a06a !important;\n}\n\n.bc-cat__title {\n  margin: 0 !important;\n  font-family: inherit !important;\n  font-weight: 500 !important;\n  font-size: clamp(0.4rem, 1.5vw, 2.1rem) !important;\n  line-height: 1.3 !important;\n  letter-spacing: 0.005em;\n  color: var(--bc-black) !important;\n}\n\n.bc-cat__grid {\n  display: grid !important;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 2.25rem 2rem;\n  max-width: 1100px;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.bc-cat__tile {\n  display: block;\n  min-width: 0;\n  font-family: inherit !important;\n  color: inherit !important;\n  opacity: 0;\n  transform: translateY(18px);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.bc-cat__tile.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.bc-cat__frame {\n  position: relative !important;\n  display: block;\n  width: 100%;\n  aspect-ratio: 3 \/ 4;\n  overflow: hidden !important;\n  background: var(--bc-white);\n  border-radius: 2px;\n}\n\n\/* Pinned to all four edges of the frame instead of sized by percentage\n   height \u2014 this is what keeps the photo locked inside the card no\n   matter what size the original image file is, immune to any theme\n   CSS that might interfere with height\/aspect-ratio calculations. *\/\n.bc-cat__frame img.bc-cat__img {\n  position: absolute !important;\n  inset: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  max-width: 100% !important;\n  object-fit: contain !important;\n  object-position: center !important;\n  display: block;\n  filter: grayscale(0.15);\n  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;\n}\n\n.bc-cat__tile:hover .bc-cat__img {\n  transform: scale(1.06);\n  filter: grayscale(0);\n}\n\n.bc-cat__count {\n  position: absolute;\n  top: 0.9rem;\n  right: 0.9rem;\n  font-family: inherit !important;\n  font-size: 0.65rem !important;\n  letter-spacing: 0.06em;\n  color: var(--bc-white) !important;\n  background: var(--bc-navy-soft);\n  padding: 0.25rem 0.55rem;\n  border-radius: 20px;\n  line-height: 1.4 !important;\n}\n\n.bc-cat__caption {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.5rem;\n  margin-top: 0.9rem;\n  padding-top: 0.7rem;\n  border-top: 1px solid var(--bc-line);\n}\n\n.bc-cat__name {\n  font-family: inherit !important;\n  font-size: 0.95rem !important;\n  font-weight: 500 !important;\n  letter-spacing: 0.01em;\n  color: var(--bc-black-soft) !important;\n  line-height: 1.4 !important;\n}\n\n.bc-cat__link {\n  position: relative;\n  font-family: inherit !important;\n  font-size: 0.68rem !important;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--bc-copper) !important;\n  white-space: nowrap;\n  line-height: 1.4 !important;\n}\n\n.bc-cat__link::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: -3px;\n  width: 100%;\n  height: 1px;\n  background: currentColor;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.25s ease;\n}\n\n.bc-cat__tile:hover .bc-cat__link::after {\n  transform: scaleX(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bc-cat__tile {\n    transition: none;\n    opacity: 1;\n    transform: none;\n  }\n  .bc-cat__img {\n    transition: none;\n  }\n}\n\n\/* Tablet \/ small laptop: drop to 2 columns so cards don't get squeezed\n   into 3 narrow strips. With 3 categories, the 3rd tile sits alone in\n   row two, which reads fine. *\/\n@media (max-width: 860px) {\n  .bc-cat {\n    padding: 4.25rem 1.75rem 4.75rem;\n  }\n  .bc-cat__grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 2rem 1.5rem;\n    max-width: 640px;\n  }\n}\n\n\/* Mobile: single column, full-width tiles, shorter landscape frame\n   instead of tall portrait so it doesn't force a long scroll *\/\n@media (max-width: 560px) {\n  .bc-cat {\n    padding: 3.25rem 1.25rem 3.5rem;\n  }\n  .bc-cat__head {\n    margin-bottom: 2rem;\n  }\n  .bc-cat__grid {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n    max-width: 100%;\n  }\n  .bc-cat__frame {\n    aspect-ratio: 16 \/ 10;\n  }\n  .bc-cat__title {\n    font-size: 1.35rem !important;\n  }\n}\n.bc-gold-hover {\n  color: #c9a06a;\n  transition: color 0.3s ease;\n}\n\n.bc-gold-hover:hover {\n  color: #dfb77c;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* ==========================================================================\n   BetaCrystal \u2014 Shop by Category (JS only)\n\n   WHERE THIS GOES: paste as raw JS (no <script> tags needed) into a\n   \"footer scripts\" field \u2014 e.g. the free WPCode plugin's \"Add Custom\n   Code\" -> Footer, or Kadence Pro's custom scripts panel if you have it.\n   Do NOT reference this as a linked file (<script src=\"...\">) unless you\n   actually upload it somewhere and use its real, absolute URL.\n   ========================================================================== *\/\n(function () {\n  \/\/ ------------------------------------------------------------------\n  \/\/ Edit this array with your real categories: name, link, image, and\n  \/\/ an optional item count badge (omit \"count\" to hide the badge).\n  \/\/\n  \/\/ HOW TO GET THE REAL LINK (WooCommerce):\n  \/\/ wp-admin -> Products -> Categories -> hover a category -> click\n  \/\/ \"View\" -> copy the URL that opens. That's your real category page.\n  \/\/ ------------------------------------------------------------------\n  var CATEGORIES = [\n    {\n      name: \"Chocolate Equipment\",\n      link: \"https:\/\/betacrystal.com\/shop\/?filter=equipment\",\n      image: \"https:\/\/betacrystal.com\/wp-content\/uploads\/2026\/08\/Starter_Kit_v2_1024x1024.webp\",\n      count: \"12\"\n    },\n    {\n      name: \"Accessories\",\n      link: \"https:\/\/betacrystal.com\/shop\/?filter=accessories\",\n      image: \"https:\/\/betacrystal.com\/wp-content\/uploads\/2026\/08\/Apron_StockImage_Edited_1024x1024.webp\",\n      count: \"18\"\n    },\n    {\n      name: \"Professional Tools\",\n      link: \"https:\/\/betacrystal.com\/shop\/?filter=kitchen-tools\",\n      image: \"https:\/\/betacrystal.com\/wp-content\/uploads\/2026\/08\/Spatula_Beta_1024x1024.webp\",\n      count: \"9\"\n    }\n  ];\n\n  function initBetaCrystalCategoryGrid() {\n    var grid = document.getElementById(\"bc-cat-grid\");\n    if (!grid) return;\n\n    var frag = document.createDocumentFragment();\n\n    CATEGORIES.forEach(function (cat) {\n      var tile = document.createElement(\"a\");\n      tile.className = \"bc-cat__tile\";\n      tile.href = cat.link;\n\n      var countHtml = cat.count\n        ? '<span class=\"bc-cat__count\">' + cat.count + \" items<\/span>\"\n        : \"\";\n\n      tile.innerHTML =\n        '<span class=\"bc-cat__frame\">' +\n          '<img decoding=\"async\" class=\"bc-cat__img\" src=\"' + cat.image + '\" alt=\"' + cat.name + '\" loading=\"lazy\">' +\n          countHtml +\n        \"<\/span>\" +\n        '<span class=\"bc-cat__caption\">' +\n          '<span class=\"bc-cat__name\">' + cat.name + \"<\/span>\" +\n          '<span class=\"bc-cat__link\">Shop &rarr;<\/span>' +\n        \"<\/span>\";\n\n      frag.appendChild(tile);\n    });\n\n    grid.appendChild(frag);\n\n    var tiles = Array.prototype.slice.call(grid.querySelectorAll(\".bc-cat__tile\"));\n\n    if (!(\"IntersectionObserver\" in window)) {\n      tiles.forEach(function (t) {\n        t.classList.add(\"is-visible\");\n      });\n      return;\n    }\n\n    var observer = new IntersectionObserver(\n      function (entries) {\n        entries.forEach(function (entry) {\n          if (!entry.isIntersecting) return;\n          var idx = tiles.indexOf(entry.target);\n          setTimeout(function () {\n            entry.target.classList.add(\"is-visible\");\n          }, Math.max(0, idx) * 90);\n          observer.unobserve(entry.target);\n        });\n      },\n      { threshold: 0.2, rootMargin: \"0px 0px -60px 0px\" }\n    );\n\n    tiles.forEach(function (t) {\n      observer.observe(t);\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", initBetaCrystalCategoryGrid);\n  } else {\n    initBetaCrystalCategoryGrid();\n  }\n})();\n<\/script>\n\n<!-- ==========================================================================\n     BetaCrystal \u2014 Shop by Category (HTML only)\n\n     WHERE THIS GOES: Kadence \"Custom HTML\" block, wherever you want the\n     section to appear on the page.\n\n     This file has NO <style> or <script> in it on purpose \u2014 see\n     shop-by-category.css and shop-by-category.js for where those go.\n     A relative <link>\/<script src=\"\"> here would 404 on your live site,\n     so don't add them back in; follow the setup notes in the other two\n     files instead.\n     ========================================================================== -->\n<section class=\"bc-cat\" id=\"bc-cat\">\n  <div class=\"bc-cat__head\">\n    <span class=\"bc-cat__eyebrow\">Shop by Category<\/span>\n    <h2 class=\"bc-cat__title\" style=\"display: none;\">The right tool for every stage of temper.<\/h2>\n  <\/div>\n\n  <div class=\"bc-cat__grid\" id=\"bc-cat-grid\">\n    <!-- Tiles are injected by JS from the CATEGORIES array in shop-by-category.js -->\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n.bc-reviews-wrapper {\n    width: calc(100% - 80px);\n    margin-left: 40px;\n    margin-right: 40px;\n    overflow: hidden;\n    position: relative;\n    padding: 40px 30px 120px 30px;\n}\n\n@media (max-width: 768px) {\n    .bc-reviews-wrapper {\n        width: calc(100% - 20px);\n        margin-left: 10px;\n        margin-right: 10px;\n    }\n}\n.bc-reviews-track {\n    display: flex;\n    gap: 24px;\n    width: max-content;\n    will-change: transform;\n}\n\n.bc-review {\n    width: 360px;\n    min-width: 360px;\n    height: 230px;\n    padding: 28px;\n    box-sizing: border-box;\n\n    background: #f4eee5;\n    border-radius: 14px;\n\n    display: flex;\n    flex-direction: column;\n}\n\n.bc-review-stars {\n    color: #d18420;\n    font-size: 17px;\n    letter-spacing: 2px;\n    margin-bottom: 14px;\n}\n\n.bc-review-text {\n    color: #1a1a1a;\n    font-size: 15px;\n    line-height: 1.55;\n\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    overflow: hidden;\n\n    margin: 0;\n    flex: 1;\n}\n\n.bc-review-user {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-top: 18px;\n}\n\n.bc-review-avatar {\n    width: 38px;\n    height: 38px;\n    min-width: 38px;\n\n    border-radius: 50%;\n\n    background: #1a1a1a;\n    color: #f0f0f0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    font-size: 15px;\n    font-weight: 600;\n}\n\n.bc-review-name {\n    color: #1a1a1a;\n    font-size: 14px;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n\n    .bc-review {\n        width: 300px;\n        min-width: 300px;\n        height: 220px;\n        padding: 24px;\n    }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const track = document.getElementById(\"bcReviewsTrack\");\n\n    if (!track) return;\n\n    fetch(\"\/wp-json\/wc\/store\/v1\/products\/reviews?per_page=20&orderby=date&order=desc\")\n        .then(response => {\n            if (!response.ok) {\n                throw new Error(\"Could not load WooCommerce reviews\");\n            }\n            return response.json();\n        })\n        .then(reviews => {\n            reviews = reviews.filter(review => Number(review.rating) === 5);\n            if (!reviews.length) {\n                track.innerHTML = \"<p>No reviews found.<\/p>\";\n                return;\n            }\n\n            reviews.forEach(review => {\n\n                const card = document.createElement(\"div\");\n                card.className = \"bc-review\";\n\n                const name = review.reviewer || \"Customer\";\n                const initial = name.trim().charAt(0).toUpperCase();\n\n                const stars =\n                    \"\u2605\".repeat(review.rating) +\n                    \"\u2606\".repeat(5 - review.rating);\n\n                card.innerHTML = `\n                    <div class=\"bc-review-stars\">${stars}<\/div>\n\n                    <div class=\"bc-review-text\">\n                        ${review.review}\n                    <\/div>\n\n                    <div class=\"bc-review-user\">\n                        <div class=\"bc-review-avatar\">\n                            ${initial}\n                        <\/div>\n\n                        <div class=\"bc-review-name\">\n                            ${name}\n                        <\/div>\n                    <\/div>\n                `;\n\n                track.appendChild(card);\n            });\n\n            \/\/ Duplicate reviews for seamless scrolling\n            track.innerHTML += track.innerHTML;\n\n            let position = 0;\n            const speed = 0.4;\n            let paused = false;\n            \/*\n            const wrapper =\n                document.querySelector(\".bc-reviews-wrapper\");\n\n            if (wrapper) {\n                wrapper.addEventListener(\"mouseenter\", () => {\n                    paused = true;\n                });\n              \n\n                wrapper.addEventListener(\"mouseleave\", () => {\n                    paused = false;\n                });\n            }\n*\/\n\n            function animate() {\n\n                if (!paused) {\n\n                    position -= speed;\n\n                    const halfWidth =\n                        track.scrollWidth \/ 2;\n\n                    if (Math.abs(position) >= halfWidth) {\n                        position = 0;\n                    }\n\n                    track.style.transform =\n                        `translate3d(${position}px, 0, 0)`;\n                }\n\n                requestAnimationFrame(animate);\n            }\n\n            animate();\n\n        })\n        .catch(error => {\n            console.error(\"WooCommerce Reviews:\", error);\n            track.innerHTML =\n                \"<p>Unable to load reviews.<\/p>\";\n        });\n\n});\n<\/script>\n\n<div class=\"bc-reviews-wrapper\">\n    <div class=\"bc-reviews-track\" id=\"bcReviewsTrack\"><\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==========================================================================\n   BetaCrystal \u2014 Featured Product Spotlight\n   WHERE THIS GOES: Appearance -> Customize -> Additional CSS.\n   ========================================================================== *\/\n\n.bc-feat, .bc-feat *, .bc-feat *::before, .bc-feat *::after {\n  box-sizing: border-box;\n}\n\n.bc-feat {\n  width: 100%;\n  background: #1a1a1a;\n  color: #fff;\n  font-family: inherit !important;\n  padding: 80px 0px;\n  overflow: hidden;\n}\n\n.bc-feat-inner {\n  width: calc(100% - 80px);\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 40px 0;\n}\n\n.bc-feat-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 80px;\n  align-items: center;\n}\n\n\/* ==========================================================================\n   PRODUCT IMAGE STAGE\n   Single source of truth \u2014 the image is centered inside a fixed-ratio\n   box, using absolute positioning so its size never depends on when\n   the image itself finishes loading (this was the actual cause of the\n   page-load flicker: an earlier version sized the box using the image's\n   own intrinsic height, so the box visibly resized once the image\n   arrived).\n   ========================================================================== *\/\n\n.bc-feat-image {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.bc-feat-image-card {\n  position: relative;\n  width: 100%;\n  max-width: 620px;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  background: transparent;\n}\n\n\/* Subtle geometric light behind the product *\/\n.bc-feat-image-card::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 85%;\n  height: 85%;\n  transform: translate(-50%, -50%);\n  background: radial-gradient(\n    ellipse,\n    rgba(201, 160, 106, 0.10) 0%,\n    rgba(201, 160, 106, 0.045) 35%,\n    transparent 70%\n  );\n  pointer-events: none;\n}\n\n\/* Bottom reflection \/ grounding shadow *\/\n.bc-feat-image-card::after {\n  content: \"\";\n  position: absolute;\n  left: 10%;\n  right: 10%;\n  bottom: 35px;\n  height: 70px;\n  background: radial-gradient(ellipse, rgba(201, 160, 106, 0.16), transparent 70%);\n  filter: blur(18px);\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n\/* The product image itself *\/\n#bc-feat-img {\n  position: absolute;\n  inset: 48px;\n  width: calc(100% - 96px);\n  height: calc(100% - 96px);\n  object-fit: contain;\n  object-position: center;\n  display: block;\n  z-index: 2;\n  filter:\n    drop-shadow(0 25px 30px rgba(0, 0, 0, 0.65))\n    drop-shadow(0 8px 15px rgba(0, 0, 0, 0.45));\n}\n\n\/* Hover lift + scale \u2014 only ever active on devices with a real,\n   precise hover input (mouse\/trackpad). Touch devices never load any\n   of this, so there's nothing left to accidentally trigger on tap or\n   during page load. *\/\n@media (hover: hover) and (pointer: fine) {\n  .bc-feat-image-card {\n    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  #bc-feat-img {\n    transition:\n      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),\n      filter 0.5s ease;\n  }\n\n  .bc-feat-image-card:hover {\n    transform: translateY(-6px);\n  }\n\n  .bc-feat-image-card:hover #bc-feat-img {\n    transform: scale(1.035);\n    filter:\n      drop-shadow(0 30px 35px rgba(0, 0, 0, 0.70))\n      drop-shadow(0 8px 20px rgba(201, 160, 106, 0.12));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bc-feat-image-card,\n  #bc-feat-img,\n  .bc-feat-button span {\n    transition: none !important;\n  }\n}\n\n\/* ==========================================================================\n   COPY\n   ========================================================================== *\/\n\n.bc-feat-copy {\n  max-width: 520px;\n}\n\n.bc-feat-eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n  font-family: inherit !important;\n  font-size: 11px !important;\n  font-weight: 600 !important;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.5) !important;\n  margin-bottom: 28px;\n}\n\n.bc-gold-hover {\n  color: #c9a06a;\n  transition: color 0.3s ease;\n}\n\n.bc-gold-hover:hover {\n  color: #dfb77c;\n}\n\n.bc-feat-rating {\n  letter-spacing: 0.02em;\n  color: #fff !important;\n  font-size: 12px !important;\n  text-transform: none;\n}\n\n.bc-feat-title {\n  margin: 0 !important;\n  font-family: inherit !important;\n  font-weight: 500 !important;\n  font-size: clamp(46px, 5.5vw, 76px) !important;\n  line-height: 0.95 !important;\n  letter-spacing: -0.045em;\n  text-transform: uppercase;\n  color: #fff !important;\n}\n\n.bc-feat-subtitle {\n  margin: 14px 0 30px !important;\n  font-family: inherit !important;\n  font-weight: 500 !important;\n  font-size: 24px !important;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c9a06a !important;\n}\n\n.bc-feat-desc {\n  margin: 0 0 32px !important;\n  font-family: inherit !important;\n  font-size: 16px !important;\n  line-height: 1.7 !important;\n  color: rgba(255, 255, 255, 0.75) !important;\n}\n\n.bc-feat-features {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 14px 20px;\n  list-style: none;\n  margin: 0 0 40px !important;\n  padding: 0 !important;\n}\n\n.bc-feat-features li {\n  font-family: inherit !important;\n  font-size: 13px !important;\n  letter-spacing: 0.02em;\n  color: rgba(255, 255, 255, 0.85) !important;\n  padding-left: 20px;\n  position: relative;\n}\n\n.bc-feat-features li::before {\n  content: \"+\";\n  position: absolute;\n  left: 0;\n  top: -1px;\n  color: rgba(255, 255, 255, 0.4);\n  font-size: 14px;\n}\n\n.bc-feat-buy {\n  display: flex;\n  align-items: center;\n  gap: 28px;\n  flex-wrap: wrap;\n  margin-bottom: 18px;\n}\n\n.bc-feat-price {\n  font-family: inherit !important;\n  font-size: 20px !important;\n  font-weight: 500 !important;\n  color: #fff !important;\n}\n\n.bc-feat-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  padding: 14px 26px;\n  border: 1px solid #c9a06a;\n  border-radius: 2px;\n  color: #c9a06a !important;\n  text-decoration: none !important;\n  text-transform: uppercase;\n  font-family: inherit !important;\n  font-size: 11px !important;\n  letter-spacing: 0.1em;\n  transition: background 0.25s ease, color 0.25s ease;\n}\n\n.bc-feat-button span {\n  transition: transform 0.25s ease;\n}\n\n.bc-feat-button:hover {\n  background: #d18420;\n  color: #ffffff !important;\n}\n\n.bc-feat-button:hover span {\n  transform: translateX(4px);\n}\n\n.bc-feat-note {\n  margin: 0 !important;\n  font-family: inherit !important;\n  font-size: 12px !important;\n  color: rgba(255, 255, 255, 0.4) !important;\n}\n\n\/* ==========================================================================\n   RESPONSIVE\n   ========================================================================== *\/\n\n@media (max-width: 960px) {\n  .bc-feat {\n    padding: 90px 0;\n  }\n  .bc-feat-grid {\n    grid-template-columns: 1fr;\n    gap: 50px;\n  }\n  .bc-feat-copy {\n    max-width: none;\n  }\n  .bc-feat-image-card {\n    max-width: 460px;\n    aspect-ratio: 4 \/ 3;\n    margin: 0 auto;\n  }\n  #bc-feat-img {\n    inset: 32px;\n    width: calc(100% - 64px);\n    height: calc(100% - 64px);\n  }\n}\n\n@media (max-width: 560px) {\n  .bc-feat {\n    padding: 70px 0;\n  }\n  .bc-feat-inner {\n    width: calc(100% - 40px);\n  }\n  .bc-feat-title {\n    font-size: clamp(34px, 11vw, 44px) !important;\n  }\n  .bc-feat-features {\n    grid-template-columns: 1fr;\n  }\n  .bc-feat-buy {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n  .bc-feat-button {\n    width: 100%;\n    justify-content: center;\n  }\n  #bc-feat-img {\n    inset: 20px;\n    width: calc(100% - 40px);\n    height: calc(100% - 40px);\n  }\n}\n\n.bc-feat-rating {\n  color: #f5d79a !important;\n}\n\n.bc-feat-rating #bc-feat-rating-count {\n  color: rgba(255,255,255,1);\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* ==========================================================================\n   BetaCrystal \u2014 Featured Product Spotlight\n   WHERE THIS GOES: footer scripts (e.g. WPCode \"Add Custom Code\" -> Footer).\n\n   Fetches live data for one product by slug and swaps it into the\n   fallback content already in the HTML. Uses a ROOT-RELATIVE path (not\n   your staging subfolder) so it keeps working after launch, and uses\n   .textContent (never innerHTML) for anything coming from the API.\n   ========================================================================== *\/\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  var PRODUCT_SLUG = \"cocopix-mini-cocoa-butter-incubator\";\n\n  var section = document.getElementById(\"bc-feat\");\n  if (!section) return;\n\n  fetch(\"\/wp-json\/wc\/store\/v1\/products?slug=\" + encodeURIComponent(PRODUCT_SLUG))\n    .then(function (response) {\n      if (!response.ok) throw new Error(\"Could not load featured product\");\n      return response.json();\n    })\n    .then(function (products) {\n      var product = products && products[0];\n      if (!product) return; \/\/ keep the static fallback content as-is\n\n      var titleEl = document.getElementById(\"bc-feat-title\");\n      var subtitleEl = document.getElementById(\"bc-feat-subtitle\");\n      var descEl = document.getElementById(\"bc-feat-desc\");\n      var priceEl = document.getElementById(\"bc-feat-price\");\n      var linkEl = document.getElementById(\"bc-feat-link\");\n      var imgEl = document.getElementById(\"bc-feat-img\");\n      var ratingCountEl = document.getElementById(\"bc-feat-rating-count\");\n\n      if (product.name) {\n        \/\/ Product names are formatted like \"CocoPix: Mini Cocoa Butter\n        \/\/ Incubator\" \u2014 split at the first colon so the big display title\n        \/\/ only ever shows the short first part, and the rest becomes the\n        \/\/ smaller subtitle underneath. Falls back to the whole name if\n        \/\/ there's no colon to split on.\n        var colonIndex = product.name.indexOf(\":\");\n        if (colonIndex > -1) {\n          if (titleEl) titleEl.textContent = product.name.slice(0, colonIndex).trim();\n          if (subtitleEl) subtitleEl.textContent = product.name.slice(colonIndex + 1).trim();\n        } else {\n          if (titleEl) titleEl.textContent = product.name;\n          if (subtitleEl) subtitleEl.textContent = \"\";\n        }\n      }\n\n      if (descEl && product.short_description) {\n        \/\/ short_description comes as HTML from WooCommerce; strip tags\n        \/\/ down to plain text rather than using innerHTML directly.\n        var tmp = document.createElement(\"div\");\n        tmp.innerHTML = product.short_description;\n        descEl.textContent = tmp.textContent.trim();\n      }\n\n      if (priceEl && product.prices) {\n        var minorUnit = product.prices.currency_minor_unit || 2;\n        var raw = product.prices.price;\n        if (raw) {\n          var amount = (Number(raw) \/ Math.pow(10, minorUnit)).toFixed(minorUnit);\n          priceEl.textContent = (product.prices.currency_symbol || \"$\") + amount;\n        }\n      }\n\n      if (linkEl && product.permalink) {\n        try {\n          \/\/ Keep only the path\/query\/hash \u2014 never adopt a hardcoded\n          \/\/ absolute staging domain from the API response.\n          var url = new URL(product.permalink);\n          linkEl.setAttribute(\"href\", url.pathname + url.search + url.hash);\n        } catch (e) {\n          \/\/ If parsing fails for any reason, leave the fallback href alone.\n        }\n      }\n\n      if (imgEl && product.images && product.images[0] && product.images[0].src) {\n        imgEl.setAttribute(\"src\", product.images[0].src);\n        imgEl.setAttribute(\"alt\", product.images[0].alt || product.name || \"\");\n      }\n\n      if (ratingCountEl && product.average_rating) {\n        var avg = Number(product.average_rating).toFixed(2);\n        var count = product.review_count || 0;\n        ratingCountEl.textContent = avg + \" out of 5 (\" + count + \")\";\n      }\n    })\n    .catch(function (error) {\n      console.error(\"Featured product:\", error);\n      \/\/ Fallback content already rendered in the HTML stays visible.\n    });\n});\n<\/script>\n\n<!-- ==========================================================================\n     BetaCrystal \u2014 Featured Product Spotlight\n     WHERE THIS GOES: Kadence \"Custom HTML\" block, below Reviews.\n\n     This renders real fallback content immediately (so it's never empty),\n     then shop-by-category-style JS fetches live price\/rating\/description\n     from WooCommerce and swaps it in if available.\n     ========================================================================== -->\n<section class=\"bc-feat\" id=\"bc-feat\">\n  <div class=\"bc-feat-inner\">\n    <div class=\"bc-feat-grid\">\n\n      <!-- LEFT: PRODUCT IMAGE -->\n      <div class=\"bc-feat-image\">\n        <div class=\"bc-feat-image-card\">\n          <img data-recalc-dims=\"1\" decoding=\"async\" id=\"bc-feat-img\" src=\"https:\/\/i0.wp.com\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/cocopix-front.webp?w=1290&#038;ssl=1\" alt=\"CocoPix: Mini Cocoa Butter Incubator\" loading=\"lazy\">\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT: COPY -->\n      <div class=\"bc-feat-copy\">\n        <div class=\"bc-feat-eyebrow\">\n          <span class=\"bc-gold-hover\">BESTSELLER<\/span>\n          <span class=\"bc-feat-rating\" id=\"bc-feat-rating\">\u2605\u2605\u2605\u2605\u2605 <span id=\"bc-feat-rating-count\">5.00 out of 5<\/span><\/span>\n        <\/div>\n\n        <h2 class=\"bc-feat-title\" id=\"bc-feat-title\">CocoPix<\/h2>\n        <p class=\"bc-feat-subtitle\" id=\"bc-feat-subtitle\">Mini Cocoa Butter Incubator<\/p>\n\n        <p class=\"bc-feat-desc\" id=\"bc-feat-desc\">\n          Experience the convenience of creating your own cocoa butter silk\n          effortlessly with this small, fully automatic tempering device.\n          The CocoPix features three chambers, each capable of producing\n          beautifully smooth, silky silk.\n        <\/p>\n\n        <ul class=\"bc-feat-features\">\n          <li>Ease of Use<\/li>\n          <li>Consistency<\/li>\n          <li>All Purpose<\/li>\n          <li>Peace of Mind<\/li>\n        <\/ul>\n\n        <div class=\"bc-feat-buy\">\n          <span class=\"bc-feat-price\" id=\"bc-feat-price\"><\/span>\n          <a href=\"\/product\/cocopix-mini-cocoa-butter-incubator\/\" class=\"bc-feat-button\" id=\"bc-feat-link\">\n            Shop CocoPix <span>\u2192<\/span>\n          <\/a>\n        <\/div>\n\n        <p class=\"bc-feat-note\">Please note: current processing time is 5\u201310 business days.<\/p>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n.bc-philosophy {\n    width: 100%;\n    background: #1a1a1a;\n    color: #fff;\n    overflow: hidden;\n    padding: 20px 0;\n}\n\n\n\/* --------------------------------\n   MAIN CONTAINER\n-------------------------------- *\/\n\n.bc-philosophy-inner {\n    width: calc(100% - 80px);\n    max-width: 1400px;\n    margin: 0 auto;\n}\n\n\n\/* --------------------------------\n   TWO COLUMN GRID\n-------------------------------- *\/\n\n.bc-philosophy-grid {\n    display: grid;\n    grid-template-columns: 0.9fr 1.1fr;\n    gap: 80px;\n    align-items: center;\n}\n\n\n\/* --------------------------------\n   LEFT CONTENT\n-------------------------------- *\/\n\n.bc-philosophy-copy {\n    max-width: 560px;\n}\n\n.bc-philosophy-eyebrow {\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.22em;\n    opacity: 0.45;\n    margin-bottom: 5px;\n}\nh2.bc-philosophy-title {\n    margin: 0.5em 0 .5em; !important\n}\n.bc-philosophy-title {\n    margin: 0;\n    padding: 0;\n\n    font-size: clamp(64px, 7vw, 110px);\n    line-height: 0.88;\n\n    font-weight: 500;\n    letter-spacing: -0.055em;\n}\n\n.bc-philosophy-title em {\n    font-style: normal;\n    opacity: 0.35;\n}\n\n.bc-philosophy-body {\n    margin-top: 55px;\n\n    max-width: 470px;\n\n    font-size: 16px;\n    line-height: 1.7;\n}\n\n.bc-philosophy-body p {\n    margin: 0 0 20px;\n}\n\n.bc-philosophy-body .bc-philosophy-lead {\n    font-size: 24px;\n    line-height: 1.3;\n    letter-spacing: -0.02em;\n    margin-bottom: 28px;\n}\n\n\n\/* --------------------------------\n   QUESTION\n-------------------------------- *\/\n\n.bc-philosophy-question {\n    margin-top: 55px;\n    padding-left: 20px;\n\n    border-left: 1px solid rgba(255,255,255,0.3);\n\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.bc-philosophy-question span {\n    font-size: 9px;\n    letter-spacing: 0.18em;\n    opacity: 0.4;\n}\n\n.bc-philosophy-question strong {\n    font-size: 22px;\n    line-height: 1.3;\n    font-weight: 400;\n}\n\n\n\/* --------------------------------\n   LINK\n-------------------------------- *\/\n\n.bc-philosophy-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 14px;\n\n    margin-top: 50px;\n\n    color: #c9a06a;\n    text-decoration: none;\n\n    font-size: 10px;\n    letter-spacing: 0.18em;\n\n    transition: opacity 0.25s ease;\n}\n\n.bc-philosophy-link span {\n    font-size: 18px;\n    transition: transform 0.25s ease;\n}\n\n.bc-philosophy-link:hover {\n    opacity: 0.6;\n    color: #dfb77c;\n}\n\n.bc-philosophy-link:hover span {\n    transform: translateX(5px);\n}\n\n\n\/* --------------------------------\n   IMAGE\n-------------------------------- *\/\n\n.bc-philosophy-image {\n    width: 100%;\n}\n\n.bc-philosophy-image-wrap {\n    width: 120%;\n    margin-left: -10%;\n    aspect-ratio: 16 \/ 10;\n\n    overflow: hidden;\n\n    background: #191919;\n        \n    -webkit-mask-image: radial-gradient(\n        ellipse at center,\n        #000 25%,\n        rgba(0,0,0,0.7) 45%,\n        transparent 70%\n    );\n\n    mask-image: radial-gradient(\n        ellipse at center,\n        #000 25%,\n        rgba(0,0,0,0.7) 45%,\n        transparent 70%\n    );\n}\n\n.bc-philosophy-image img {\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: cover;\n\n    transform: scale(1.02);\n\n    transition:\n        transform 1.2s cubic-bezier(.22,1,.36,1);\n}\n\n.bc-philosophy-image:hover img {\n    transform: scale(1.06);\n}\n.bc-philosophy-image video {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    transform: scale(1.02);\n    transition: transform 1.2s cubic-bezier(.22,1,.36,1);\n}\n\n.bc-philosophy-image:hover video {\n    transform: scale(1.06);\n}\n\n\n\/* --------------------------------\n   IMAGE CAPTION\n-------------------------------- *\/\n\n.bc-philosophy-caption {\n    display: flex;\n    justify-content: space-between;\n\n    padding-top: 12px;\n\n    font-size: 9px;\n    letter-spacing: 0.15em;\n\n    color: rgba(255,255,255,0.4);\n}\n\n\n\/* --------------------------------\n   BOTTOM TAGS\n-------------------------------- *\/\n\n.bc-philosophy-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n\n    margin-top: 50px;\n    padding-bottom: 25px;\n\n    border-bottom: 1px solid rgba(255,255,255,0.12);\n}\n\n.bc-philosophy-tags span {\n    font-size: 9px;\n    letter-spacing: 0.16em;\n\n    padding: 9px 14px;\n\n    border: 1px solid rgba(255,255,255,0.16);\n    border-radius: 100px;\n\n    color: rgba(255,255,255,0.55);\n}\n\n\n\/* --------------------------------\n   TABLET\n-------------------------------- *\/\n\n@media (max-width: 1000px) {\n\n    .bc-philosophy {\n        padding: 90px 0;\n    }\n\n    .bc-philosophy-grid {\n        grid-template-columns: 1fr 1fr;\n        gap: 50px;\n    }\n\n    .bc-philosophy-title {\n        font-size: clamp(55px, 8vw, 80px);\n    }\n\n    .bc-philosophy-body {\n        margin-top: 40px;\n    }\n\n}\n\n\n\/* --------------------------------\n   MOBILE\n-------------------------------- *\/\n\n@media (max-width: 700px) {\n\n    .bc-philosophy {\n        padding: 75px 0;\n    }\n\n    .bc-philosophy-inner {\n        width: calc(100% - 40px);\n    }\n\n    .bc-philosophy-grid {\n        display: flex;\n        flex-direction: column;\n        gap: 60px;\n        align-items: stretch;\n    }\n\n    .bc-philosophy-copy {\n        max-width: none;\n    }\n\n    .bc-philosophy-title {\n        font-size: clamp(54px, 15vw, 80px);\n    }\n\n    .bc-philosophy-body {\n        margin-top: 40px;\n    }\n\n    .bc-philosophy-body .bc-philosophy-lead {\n        font-size: 21px;\n    }\n\n    .bc-philosophy-question {\n        margin-top: 40px;\n    }\n\n    .bc-philosophy-image {\n        width: 100%;\n    }\n\n    .bc-philosophy-image-wrap {\n        aspect-ratio: 16 \/ 10;\n    }\n\n    .bc-philosophy-tags {\n        margin-top: 60px;\n    }\n\n}\n.bc-philosophy-title {\n    margin: 0;\n    padding: 0;\n\n    font-size: clamp(58px, 6.5vw, 96px);\n    line-height: 0.9;\n    font-weight: 500;\n    letter-spacing: -0.055em;\n\n    width: 100%;\n    max-width: 720px;\n\n    color: #ffffff;\n}\n\n.bc-philosophy-title em {\n    font-style: normal;\n    color: #c9a06a;\n    opacity: 1;\n}\n.bc-gold-hover {\n  color: #c9a06a;\n  transition: color 0.3s ease;\n}\n\n.bc-gold-hover:hover {\n  color: #dfb77c;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const section = document.querySelector(\".bc-philosophy\");\n\n    if (!section) return;\n\n    const revealItems = [\n        \".bc-philosophy-eyebrow\",\n        \".bc-philosophy-title\",\n        \".bc-philosophy-body\",\n        \".bc-philosophy-question\",\n        \".bc-philosophy-link\",\n        \".bc-philosophy-image\",\n        \".bc-philosophy-tags\"\n    ];\n\n    revealItems.forEach((selector, index) => {\n\n        const element = section.querySelector(selector);\n\n        if (!element) return;\n\n        element.style.opacity = \"0\";\n        element.style.transform = \"translateY(30px)\";\n\n        element.style.transition =\n            `opacity 0.8s ease ${index * 0.08}s,\n             transform 0.9s cubic-bezier(.22,1,.36,1) ${index * 0.08}s`;\n\n    });\n\n\n    const observer = new IntersectionObserver(\n        (entries, observer) => {\n\n            entries.forEach(entry => {\n\n                if (!entry.isIntersecting) return;\n\n                revealItems.forEach(selector => {\n\n                    const element =\n                        section.querySelector(selector);\n\n                    if (!element) return;\n\n                    element.style.opacity = \"1\";\n                    element.style.transform =\n        selector === \".bc-philosophy-image\"\n            ? \"translateY(-40px)\"\n            : \"translateY(0)\";\n\n                });\n\n                observer.unobserve(entry.target);\n\n            });\n\n        },\n        {\n            threshold: 0.15\n        }\n    );\n\n\n    observer.observe(section);\n\n});\n<\/script>\n\n<section class=\"bc-philosophy\">\n\n    <div class=\"bc-philosophy-inner\">\n\n        <div class=\"bc-philosophy-grid\">\n\n            <!-- LEFT: MESSAGE -->\n            <div class=\"bc-philosophy-copy\">\n\n                <div class=\"bc-philosophy-eyebrow bc-gold-hover\">\n                    PHILOSOPHY\n                <\/div>\n\n                <h2 class=\"bc-philosophy-title\">\n                    FOR THOSE<br>\n                    WHO <em>MAKE.<\/em>\n                <\/h2>\n\n                <div class=\"bc-philosophy-body\">\n\n                    <p class=\"bc-philosophy-lead\">\n                        Chocolate is an obsession with details.\n                    <\/p>\n\n                    <p>\n                        The temperature. The texture. The finish.\n                        The tiny things that separate good chocolate\n                        from something extraordinary.\n                    <\/p>\n\n                    <p>\n                        We build tools for the people who notice\n                        those things.\n                    <\/p>\n\n                <\/div>\n\n                <div class=\"bc-philosophy-question\">\n                    <span>THE QUESTION IS ALWAYS<\/span>\n                    <strong>How can I make this better?<\/strong>\n                <\/div>\n\n                <a href=\"\/about-us\" class=\"bc-philosophy-link\">\n                    OUR STORY\n                    <span>\u2192<\/span>\n                <\/a>\n\n            <\/div>\n\n\n            <!-- RIGHT: IMAGE -->\n            <div class=\"bc-philosophy-image\">\n\n                <div class=\"bc-philosophy-image-wrap\">\n\n                    <video class=\"bc-philosophy-video\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"metadata\" aria-label=\"Chocolate made using Beta Crystal CocoPix\">\n                        <source src=\"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Result.mp4\" type=\"video\/mp4\">\n                    <\/video>\n\n                <\/div>\n\n                <div class=\"bc-philosophy-caption\">\n                    <span>TOOLS FOR THE CRAFT OF CHOCOLATE<\/span>\n                    <span>BETA CRYSTAL<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- BOTTOM TAGS -->\n        <div class=\"bc-philosophy-tags\">\n\n            <span>CHOCOLATIERS<\/span>\n            <span>PASTRY CHEFS<\/span>\n            <span>ARTIST<\/span>\n            <span>VISIONARIES<\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==========================================================================\n   BetaCrystal \u2014 Footer\n   WHERE THIS GOES: Appearance -> Customize -> Additional CSS.\n   ========================================================================== *\/\n\n.bc-footer, .bc-footer *, .bc-footer *::before, .bc-footer *::after {\n  box-sizing: border-box;\n}\n\n.bc-footer {\n  width: 100%;\n  background: #1a1a1a;\n  color: #fff;\n  font-family: inherit !important;\n  padding: 90px 0 0;\n}\n\n.bc-footer a {\n  text-decoration: none !important;\n}\n\n.bc-footer-inner {\n  width: calc(100% - 80px);\n  max-width: 1400px;\n  margin: 0 auto;\n}\n\n\/* ---- Newsletter ---- *\/\n.bc-footer-newsletter {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 40px;\n  flex-wrap: wrap;\n  padding-bottom: 60px;\n}\n\n.bc-footer-newsletter-copy {\n  max-width: 480px;\n}\n\n.bc-footer-eyebrow {\n  display: block;\n  font-family: inherit !important;\n  font-size: 11px !important;\n  font-weight: 600 !important;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: #c9a06a !important;\n  margin-bottom: 14px;\n}\n\n.bc-footer-newsletter-title {\n  margin: 0 !important;\n  font-family: inherit !important;\n  font-weight: 500 !important;\n  font-size: clamp(22px, 2.6vw, 30px) !important;\n  line-height: 1.3 !important;\n  color: #fff !important;\n}\n\n.bc-footer-form {\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 420px;\n}\n\n.bc-footer-input {\n  flex: 1;\n  min-width: 0;\n  padding: 14px 16px;\n  background: transparent;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n  color: #fff !important;\n  font-family: inherit !important;\n  font-size: 14px !important;\n}\n\n.bc-footer-input::placeholder {\n  color: rgba(255, 255, 255, 0.45);\n}\n\n.bc-footer-input:focus {\n  outline: none;\n  border-color: #fff;\n}\n\n.bc-footer-submit {\n  padding: 14px 22px;\n  background: transparent;\n  border: 1px solid #c9a06a;\n  border-radius: 2px;\n  color: #c9a06a !important;\n  font-family: inherit !important;\n  font-size: 11px !important;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background 0.25s ease, color 0.25s ease;\n}\n\n.bc-footer-submit:hover {\n  background: #d18420;\n  color: #ffffff !important;\n}\n\n.bc-footer-form-message {\n  font-family: inherit !important;\n  font-size: 12px !important;\n  color: rgba(255, 255, 255, 0.6) !important;\n  margin-top: 10px;\n}\n\n\/* ---- Dividers ---- *\/\n.bc-footer-divider {\n  height: 1px;\n  background: rgba(255, 255, 255, 0.12);\n}\n\n\/* ---- Link columns ---- *\/\n.bc-footer-grid {\n  display: grid;\n  grid-template-columns: 1.4fr 1fr 1fr;\n  gap: 40px;\n  padding: 55px 0;\n}\n\n.bc-footer-col {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.bc-footer-col a {\n  font-family: inherit !important;\n  font-size: 13px !important;\n  color: rgba(255, 255, 255, 0.7) !important;\n  transition: color 0.25s ease;\n  width: fit-content;\n}\n\n.bc-footer-col a:hover {\n  color: #fff !important;\n}\n\n.bc-footer-col-title {\n  font-family: inherit !important;\n  font-size: 11px !important;\n  font-weight: 600 !important;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45) !important;\n  margin-bottom: 6px;\n}\n\n.bc-footer-brand {\n  font-family: inherit !important;\n  font-size: 13px !important;\n  font-weight: 600 !important;\n  letter-spacing: 0.1em;\n  color: #fff !important;\n}\n\n.bc-footer-tagline {\n  margin: 4px 0 8px !important;\n  font-family: inherit !important;\n  font-size: 13px !important;\n  line-height: 1.6 !important;\n  color: rgba(255, 255, 255, 0.55) !important;\n  max-width: 280px;\n}\n\n.bc-footer-social {\n  display: flex;\n  gap: 18px;\n}\n\n.bc-footer-social a {\n  font-family: inherit !important;\n  font-size: 12px !important;\n  letter-spacing: 0.04em;\n  color: rgba(255, 255, 255, 0.6) !important;\n  transition: color 0.25s ease;\n}\n\n.bc-footer-social a:hover {\n  color: #fff !important;\n}\n\n\/* ---- Bottom bar ---- *\/\n.bc-footer-bottom {\n  padding: 22px 0;\n  font-family: inherit !important;\n  font-size: 12px !important;\n  color: rgba(255, 255, 255, 0.4) !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bc-footer-submit,\n  .bc-footer-col a,\n  .bc-footer-social a,\n  .bc-footer-legal a {\n    transition: none;\n  }\n}\n\n\/* ---- Tablet ---- *\/\n@media (max-width: 900px) {\n  .bc-footer {\n    padding-top: 70px;\n  }\n  .bc-footer-grid {\n    grid-template-columns: 1fr 1fr;\n    gap: 40px 30px;\n  }\n  .bc-footer-col--brand {\n    grid-column: 1 \/ -1;\n  }\n  .bc-footer-newsletter {\n    align-items: flex-start;\n  }\n  .bc-footer-form {\n    max-width: 100%;\n  }\n}\n\n\/* ---- Mobile ---- *\/\n@media (max-width: 640px) {\n  .bc-footer {\n    padding-top: 55px;\n  }\n  .bc-footer-inner {\n    width: calc(100% - 40px);\n  }\n  .bc-footer-newsletter {\n    flex-direction: column;\n    align-items: stretch;\n    padding-bottom: 45px;\n  }\n  .bc-footer-form {\n    flex-direction: column;\n  }\n  .bc-footer-submit {\n    width: 100%;\n  }\n  .bc-footer-grid {\n    grid-template-columns: 1fr;\n    gap: 34px;\n    padding: 45px 0;\n  }\n  .bc-footer-col--brand {\n    grid-column: auto;\n  }\n  .bc-footer-bottom {\n    padding: 22px 0 30px;\n  }\n}\n.bc-gold-hover {\n  color: #c9a06a;\n  transition: color 0.3s ease;\n}\n\n.bc-gold-hover:hover {\n  color: #dfb77c;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* ==========================================================================\n   BetaCrystal \u2014 Footer\n   WHERE THIS GOES: footer scripts (e.g. WPCode \"Add Custom Code\" -> Footer).\n\n   IMPORTANT: this only handles the form on the front end (preventing a\n   page reload and showing a confirmation message). It does NOT actually\n   send the email address anywhere yet. To make it real, either:\n\n   1. Swap this whole form for a shortcode\/block from your email provider\n      (Mailchimp, Klaviyo, etc.) \u2014 usually the simplest option, and you'd\n      remove this JS entirely.\n   2. Or keep this form and add a fetch() call inside the submit handler\n      below that POSTs to your provider's signup API endpoint.\n\n   Right now, submitting just shows a \"thanks\" message with no data going\n   anywhere \u2014 don't launch with only this in place.\n   ========================================================================== *\/\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  var form = document.getElementById(\"bc-footer-form\");\n  if (!form) return;\n\n  form.addEventListener(\"submit\", function (e) {\n    e.preventDefault();\n\n    var input = form.querySelector(\".bc-footer-input\");\n    var existingMessage = form.parentElement.querySelector(\".bc-footer-form-message\");\n    if (existingMessage) existingMessage.remove();\n\n    var message = document.createElement(\"p\");\n    message.className = \"bc-footer-form-message\";\n    message.textContent = \"Thanks \u2014 you're on the list.\";\n    form.insertAdjacentElement(\"afterend\", message);\n\n    form.reset();\n    if (input) input.blur();\n  });\n});\n<\/script>\n\n<!-- ==========================================================================\n     BetaCrystal \u2014 Footer\n     WHERE THIS GOES: Kadence \"Custom HTML\" block, placed as the very last\n     element on the page (or in Kadence's Footer Builder area if you'd\n     rather it show on every page automatically \u2014 either works, this\n     doesn't depend on being in the main content area).\n\n     THINGS TO UPDATE BEFORE THIS GOES LIVE:\n     - Newsletter form doesn't submit anywhere yet \u2014 see the comment in\n       footer.js for how to wire it up to a real email service.\n     - Social links are your real profile URLs pulled from betacrystal.com\n       \u2014 double check they're all still current.\n     - Shop category links assume the same slugs used earlier\n       (heating-devices, accessories, small-tools) \u2014 confirm they match.\n     - Terms of Service and Refund Policy link to \/terms-of-service\/ and\n       \/refund-policy\/ \u2014 these are placeholder WordPress slugs since your\n       old site used Shopify's \/policies\/ path structure, which doesn't\n       exist here. Create those pages (or update the hrefs to match\n       whatever slugs you actually use) before launch.\n     ========================================================================== -->\n<footer class=\"bc-footer\" id=\"bc-footer\">\n  <div class=\"bc-footer-inner\">\n\n    <!-- NEWSLETTER -->\n    <div class=\"bc-footer-newsletter\">\n      <div class=\"bc-footer-newsletter-copy\">\n        <span class=\"bc-footer-eyebrow\">Be in the know<\/span>\n        <h2 class=\"bc-footer-newsletter-title\">Promotions, new products, and sales directly to your inbox.<\/h2>\n      <\/div>\n      <form class=\"bc-footer-form\" id=\"bc-footer-form\">\n        <input type=\"email\" name=\"email\" class=\"bc-footer-input\" placeholder=\"Your email\" required=\"\">\n        <button type=\"submit\" class=\"bc-footer-submit\">Subscribe<\/button>\n      <\/form>\n    <\/div>\n\n    <div class=\"bc-footer-divider\"><\/div>\n\n    <!-- LINK COLUMNS -->\n    <div class=\"bc-footer-grid\">\n      <div class=\"bc-footer-col bc-footer-col--brand\">\n        <span class=\"bc-footer-brand\">BETA CRYSTAL<\/span>\n        <p class=\"bc-footer-tagline\">\n          Precision tempering equipment for small-batch chocolate makers.\n        <\/p>\n        <div class=\"bc-footer-social\">\n          <a href=\"https:\/\/www.facebook.com\/BetaCrystal\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\n          <a href=\"https:\/\/twitter.com\/BetaCrystalOff\" target=\"_blank\" rel=\"noopener\">Twitter<\/a>\n          <a href=\"https:\/\/www.instagram.com\/betacrystalofficial\/\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\n          <a href=\"https:\/\/www.tiktok.com\/@betacrystalofficial\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\n          <a href=\"https:\/\/www.youtube.com\/channel\/UCJDs2IWR_UKVkVL1UqFOYLw\" target=\"_blank\" rel=\"noopener\">YouTube<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"bc-footer-col\">\n        <span class=\"bc-footer-col-title\">Shop<\/span>\n        <a href=\"\/shop\/\">All Products<\/a>\n        <a href=\"\/product-category\/heating-devices\/\">Heating Devices<\/a>\n        <a href=\"\/product-category\/accessories\/\">Accessories<\/a>\n        <a href=\"\/product-category\/small-tools\/\">Small Tools<\/a>\n      <\/div>\n\n      <div class=\"bc-footer-col\">\n        <span class=\"bc-footer-col-title\">Menu<\/span>\n        <a href=\"\/?s=\">Search<\/a>\n        <a href=\"\/contact\/\">Contact<\/a>\n        <a href=\"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/terms-of-service\/\">Terms of Service<\/a>\n        <a href=\"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/refund_returns\/\">Refund Policy<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"bc-footer-divider\"><\/div>\n\n    <!-- BOTTOM BAR -->\n    <div class=\"bc-footer-bottom\">\n      <span>\u00a9 2026, Beta Crystal.<\/span>\n    <\/div>\n\n  <\/div>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Precision tempering, made simple. Small-batch chocolate equipment engineered for precise, reliable tempering every time. Shop Equipment BESTSELLER \u2605\u2605\u2605\u2605\u2605 5.00 out of 5 CocoPix Mini Cocoa Butter Incubator Experience the convenience of creating your own cocoa butter silk effortlessly with this small, fully automatic tempering device. The CocoPix features three chambers, each capable of producing beautifully&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/betacrystal.com\/zh\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home -\" \/>\n<meta property=\"og:description\" content=\"Precision tempering, made simple. Small-batch chocolate equipment engineered for precise, reliable tempering every time. Shop Equipment BESTSELLER \u2605\u2605\u2605\u2605\u2605 5.00 out of 5 CocoPix Mini Cocoa Butter Incubator Experience the convenience of creating your own cocoa butter silk effortlessly with this small, fully automatic tempering device. The CocoPix features three chambers, each capable of producing beautifully...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/betacrystal.com\/zh\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-01T11:11:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro_Thumb.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 \u5206\u9418\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/betacrystal.com\\\/\",\"url\":\"https:\\\/\\\/betacrystal.com\\\/\",\"name\":\"Home -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/loh.wvs.mybluehost.me\\\/website_9078c0d1\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/CocoPix_Web_Intro_Thumb.jpg\",\"datePublished\":\"2026-08-05T06:23:05+00:00\",\"dateModified\":\"2026-09-01T11:11:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/betacrystal.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/loh.wvs.mybluehost.me\\\/website_9078c0d1\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/CocoPix_Web_Intro_Thumb.jpg\",\"contentUrl\":\"https:\\\/\\\/loh.wvs.mybluehost.me\\\/website_9078c0d1\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/CocoPix_Web_Intro_Thumb.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/betacrystal.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/betacrystal.com\\\/#website\",\"url\":\"https:\\\/\\\/betacrystal.com\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/betacrystal.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/betacrystal.com\/zh\/","og_locale":"zh_TW","og_type":"article","og_title":"Home -","og_description":"Precision tempering, made simple. Small-batch chocolate equipment engineered for precise, reliable tempering every time. Shop Equipment BESTSELLER \u2605\u2605\u2605\u2605\u2605 5.00 out of 5 CocoPix Mini Cocoa Butter Incubator Experience the convenience of creating your own cocoa butter silk effortlessly with this small, fully automatic tempering device. The CocoPix features three chambers, each capable of producing beautifully...","og_url":"https:\/\/betacrystal.com\/zh\/","article_modified_time":"2026-09-01T11:11:33+00:00","og_image":[{"url":"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro_Thumb.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u9810\u4f30\u95b1\u8b80\u6642\u9593":"2 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/betacrystal.com\/","url":"https:\/\/betacrystal.com\/","name":"Home -","isPartOf":{"@id":"https:\/\/betacrystal.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/betacrystal.com\/#primaryimage"},"image":{"@id":"https:\/\/betacrystal.com\/#primaryimage"},"thumbnailUrl":"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro_Thumb.jpg","datePublished":"2026-08-05T06:23:05+00:00","dateModified":"2026-09-01T11:11:33+00:00","breadcrumb":{"@id":"https:\/\/betacrystal.com\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/betacrystal.com\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/betacrystal.com\/#primaryimage","url":"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro_Thumb.jpg","contentUrl":"https:\/\/loh.wvs.mybluehost.me\/website_9078c0d1\/wp-content\/uploads\/2026\/08\/CocoPix_Web_Intro_Thumb.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/betacrystal.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/betacrystal.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/betacrystal.com\/#website","url":"https:\/\/betacrystal.com\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/betacrystal.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":20,"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":633,"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/pages\/45\/revisions\/633"}],"wp:attachment":[{"href":"https:\/\/betacrystal.com\/zh\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}