{"product_id":"bellyhug-period-buddy™","title":"BellyHug Period Buddy™","description":"\u003c!-- =========================================================\n     BELLYHUG PERIOD BUDDY\n     PREMIUM ANIMATED SHOPIFY CUSTOM LIQUID SECTION\n     ========================================================= --\u003e\n\u003cstyle\u003e\n\n\/* =========================================================\n   RESET + VARIABLES\n   ========================================================= *\/\n\n#bellyhug-premium,\n#bellyhug-premium * {\n  box-sizing: border-box;\n}\n\n#bellyhug-premium {\n  --bh-pink: #d985a0;\n  --bh-pink-dark: #a95171;\n  --bh-pink-deep: #8f3f5f;\n  --bh-pink-soft: #f8e1e8;\n  --bh-pink-pale: #fff5f8;\n  --bh-cream: #fffaf8;\n  --bh-white: #ffffff;\n  --bh-text: #302529;\n  --bh-muted: #766a6f;\n\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 8% 8%,\n      rgba(242, 203, 216, .75),\n      transparent 28%\n    ),\n    radial-gradient(\n      circle at 92% 18%,\n      rgba(249, 224, 232, .9),\n      transparent 30%\n    ),\n    linear-gradient(\n      180deg,\n      #fffafa 0%,\n      #fff5f7 48%,\n      #fffaf9 100%\n    );\n\n  color: var(--bh-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n}\n\n\/* =========================================================\n   IMAGE URLS\n   Replace these 3 URLs with your Shopify Content \u003e Files URLs\n   ========================================================= *\/\n\n#bellyhug-premium {\n  :root {\n  --bh-image-hero: url(\"https:\/\/cdn.shopify.com\/s\/files\/1\/0824\/3023\/0741\/files\/belly-hug-bedroom-shot.png?v=1786551724\");\n  --bh-image-detail: url(\"https:\/\/cdn.shopify.com\/s\/files\/1\/0824\/3023\/0741\/files\/belly-hug-feature-shot.png?v=1786551068\");\n  --bh-image-how: url(\"https:\/\/cdn.shopify.com\/s\/files\/1\/0824\/3023\/0741\/files\/belly-hug-hero-shot.png?v=1786551052\");\n}\n\n}\n\n\/* =========================================================\n   BACKGROUND DECORATION\n   ========================================================= *\/\n\n.bh-bg-orb {\n  position: absolute;\n  border-radius: 50%;\n  pointer-events: none;\n  filter: blur(2px);\n  z-index: 0;\n  animation: bhBackgroundFloat 10s ease-in-out infinite;\n}\n\n.bh-bg-orb-1 {\n  width: 380px;\n  height: 380px;\n  left: -200px;\n  top: 350px;\n  background: rgba(234, 179, 196, .28);\n}\n\n.bh-bg-orb-2 {\n  width: 300px;\n  height: 300px;\n  right: -140px;\n  top: 1000px;\n  background: rgba(241, 199, 213, .35);\n  animation-delay: -4s;\n}\n\n.bh-bg-orb-3 {\n  width: 250px;\n  height: 250px;\n  left: -100px;\n  bottom: 900px;\n  background: rgba(248, 220, 229, .5);\n  animation-delay: -7s;\n}\n\n@keyframes bhBackgroundFloat {\n  0%, 100% {\n    transform: translate3d(0, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(25px, -30px, 0);\n  }\n}\n\n\/* =========================================================\n   CONTAINER\n   ========================================================= *\/\n\n.bh-container {\n  width: min(1180px, calc(100% - 40px));\n  margin: 0 auto;\n  position: relative;\n  z-index: 2;\n}\n\n\/* =========================================================\n   REVEAL ANIMATION\n   ========================================================= *\/\n\n.bh-reveal {\n  opacity: 0;\n  transform: translateY(35px);\n  transition:\n    opacity .9s cubic-bezier(.22,1,.36,1),\n    transform .9s cubic-bezier(.22,1,.36,1);\n}\n\n.bh-reveal.bh-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* =========================================================\n   TOP HERO\n   ========================================================= *\/\n\n.bh-hero {\n  min-height: 820px;\n\n  display: grid;\n  grid-template-columns: .95fr 1.05fr;\n  align-items: center;\n\n  gap: 75px;\n\n  padding: 85px 0 80px;\n}\n\n\/* =========================================================\n   HERO LEFT — COPY\n   ========================================================= *\/\n\n.bh-hero-copy {\n  position: relative;\n  z-index: 5;\n}\n\n.bh-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n\n  padding: 9px 16px;\n\n  border-radius: 999px;\n\n  background: rgba(255,255,255,.72);\n\n  border: 1px solid rgba(169,81,113,.12);\n\n  box-shadow:\n    0 10px 30px rgba(100,40,65,.06);\n\n  backdrop-filter: blur(15px);\n\n  color: var(--bh-pink-dark);\n\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 1.5px;\n  text-transform: uppercase;\n}\n\n.bh-heart-pulse {\n  animation: bhHeartPulse 1.8s ease-in-out infinite;\n}\n\n@keyframes bhHeartPulse {\n\n  0%, 100% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(1.35);\n  }\n\n}\n\n.bh-hero-title {\n  margin: 25px 0 22px;\n\n  font-size: clamp(48px, 6vw, 79px);\n\n  line-height: .94;\n\n  letter-spacing: -4.5px;\n\n  font-weight: 800;\n}\n\n.bh-hero-title .bh-script {\n  display: block;\n\n  margin-top: 7px;\n\n  color: var(--bh-pink-dark);\n\n  font-family: Georgia, \"Times New Roman\", serif;\n\n  font-weight: 400;\n\n  font-style: italic;\n}\n\n.bh-hero-description {\n  max-width: 530px;\n\n  color: var(--bh-muted);\n\n  font-size: 17px;\n\n  line-height: 1.8;\n}\n\n\/* =========================================================\n   HERO BENEFITS\n   ========================================================= *\/\n\n.bh-mini-benefits {\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  gap: 11px;\n\n  margin-top: 32px;\n\n  max-width: 560px;\n}\n\n.bh-mini-benefit {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n\n  padding: 12px;\n\n  border-radius: 15px;\n\n  background: rgba(255,255,255,.65);\n\n  border: 1px solid rgba(169,81,113,.08);\n\n  transition:\n    transform .35s ease,\n    background .35s ease,\n    box-shadow .35s ease;\n}\n\n.bh-mini-benefit:hover {\n  transform: translateY(-4px);\n\n  background: rgba(255,255,255,.95);\n\n  box-shadow:\n    0 15px 30px rgba(100,40,65,.08);\n}\n\n.bh-mini-icon {\n  width: 38px;\n  height: 38px;\n  min-width: 38px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 12px;\n\n  background: linear-gradient(\n    135deg,\n    #fff0f4,\n    #f5d4df\n  );\n\n  font-size: 18px;\n}\n\n.bh-mini-benefit strong {\n  display: block;\n\n  font-size: 12px;\n\n  margin-bottom: 2px;\n}\n\n.bh-mini-benefit span {\n  color: #89777e;\n\n  font-size: 10px;\n}\n\n\/* =========================================================\n   HERO CTA\n   ========================================================= *\/\n\n.bh-hero-actions {\n  margin-top: 32px;\n\n  display: flex;\n  align-items: center;\n  gap: 17px;\n\n  flex-wrap: wrap;\n}\n\n.bh-button {\n  position: relative;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 13px;\n\n  padding: 18px 30px;\n\n  border-radius: 999px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #db8ba4,\n      #aa5070\n    );\n\n  color: #fff !important;\n\n  text-decoration: none !important;\n\n  font-size: 14px;\n\n  font-weight: 800;\n\n  box-shadow:\n    0 18px 42px rgba(170,80,112,.30);\n\n  overflow: hidden;\n\n  transition:\n    transform .3s ease,\n    box-shadow .3s ease;\n}\n\n.bh-button:hover {\n  transform: translateY(-4px);\n\n  box-shadow:\n    0 25px 55px rgba(170,80,112,.38);\n}\n\n.bh-button:after {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  left: -120%;\n\n  width: 70%;\n  height: 100%;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.5),\n      transparent\n    );\n\n  transform: skewX(-20deg);\n\n  animation: bhButtonShine 3.5s infinite;\n}\n\n@keyframes bhButtonShine {\n\n  0% {\n    left: -120%;\n  }\n\n  45%, 100% {\n    left: 150%;\n  }\n\n}\n\n.bh-secure-text {\n  color: #8b797f;\n\n  font-size: 10px;\n\n  line-height: 1.5;\n}\n\n\/* =========================================================\n   HERO RIGHT — LIFESTYLE IMAGE\n   ========================================================= *\/\n\n.bh-hero-image-wrap {\n  position: relative;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  min-height: 650px;\n}\n\n.bh-hero-image-glow {\n  position: absolute;\n\n  width: 560px;\n  height: 560px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(215,126,154,.30),\n      rgba(244,213,224,.18) 48%,\n      transparent 72%\n    );\n\n  animation: bhGlowPulse 4.5s ease-in-out infinite;\n}\n\n@keyframes bhGlowPulse {\n\n  0%,100% {\n    transform: scale(.93);\n    opacity: .7;\n  }\n\n  50% {\n    transform: scale(1.07);\n    opacity: 1;\n  }\n\n}\n\n\/* Image *\/\n\n.bh-hero-image {\n  position: relative;\n\n  width: 100%;\n\n  max-width: 570px;\n\n  height: auto;\n\n  display: block;\n\n  border-radius: 30px;\n\n  object-fit: cover;\n\n  box-shadow:\n    0 35px 80px rgba(74,35,48,.18);\n\n  transform: rotate(1deg);\n\n  animation: bhLifestyleFloat 6s ease-in-out infinite;\n\n  z-index: 3;\n}\n\n@keyframes bhLifestyleFloat {\n\n  0%,100% {\n    transform: translateY(0) rotate(1deg);\n  }\n\n  50% {\n    transform: translateY(-12px) rotate(-.5deg);\n  }\n\n}\n\n\/* =========================================================\n   FLOATING HERO CARDS\n   ========================================================= *\/\n\n.bh-floating-card {\n  position: absolute;\n\n  z-index: 6;\n\n  padding: 14px 17px;\n\n  background:\n    rgba(255,255,255,.88);\n\n  border:\n    1px solid rgba(169,81,113,.11);\n\n  border-radius: 17px;\n\n  box-shadow:\n    0 18px 45px rgba(70,30,45,.13);\n\n  backdrop-filter: blur(16px);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  animation: bhFloatingCard 4s ease-in-out infinite;\n}\n\n.bh-floating-card small {\n  display: block;\n\n  margin-top: 4px;\n\n  color: #89767d;\n\n  font-size: 9px;\n\n  font-weight: 500;\n}\n\n.bh-card-heat {\n  left: -25px;\n  top: 105px;\n}\n\n.bh-card-wireless {\n  right: -20px;\n  bottom: 110px;\n\n  animation-delay: -2s;\n}\n\n@keyframes bhFloatingCard {\n\n  0%,100% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(-11px);\n  }\n\n}\n\n\/* =========================================================\n   TRUST BAR\n   ========================================================= *\/\n\n.bh-trust-bar {\n  display: grid;\n\n  grid-template-columns: repeat(4,1fr);\n\n  padding: 24px 0;\n\n  border-top:\n    1px solid rgba(169,81,113,.11);\n\n  border-bottom:\n    1px solid rgba(169,81,113,.11);\n}\n\n.bh-trust-item {\n  text-align: center;\n\n  padding: 8px 15px;\n\n  border-right:\n    1px solid rgba(169,81,113,.09);\n}\n\n.bh-trust-item:last-child {\n  border-right: none;\n}\n\n.bh-trust-icon {\n  font-size: 20px;\n\n  margin-bottom: 5px;\n}\n\n.bh-trust-item strong {\n  display: block;\n\n  font-size: 12px;\n}\n\n.bh-trust-item span {\n  display: block;\n\n  margin-top: 3px;\n\n  color: #8c797f;\n\n  font-size: 10px;\n}\n\n\/* =========================================================\n   SECTION HEADINGS\n   ========================================================= *\/\n\n.bh-section {\n  padding-top: 120px;\n}\n\n.bh-section-heading {\n  text-align: center;\n\n  max-width: 750px;\n\n  margin: 0 auto 55px;\n}\n\n.bh-section-label {\n  display: inline-block;\n\n  margin-bottom: 15px;\n\n  color: var(--bh-pink-dark);\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: 1.8px;\n\n  text-transform: uppercase;\n}\n\n.bh-section-heading h2 {\n  margin: 0;\n\n  font-size: clamp(39px,5vw,61px);\n\n  line-height: 1;\n\n  letter-spacing: -3px;\n}\n\n.bh-section-heading h2 em {\n  color: var(--bh-pink-dark);\n\n  font-family: Georgia, serif;\n\n  font-weight: 400;\n\n  font-style: italic;\n}\n\n.bh-section-heading p {\n  margin: 20px auto 0;\n\n  max-width: 620px;\n\n  color: var(--bh-muted);\n\n  font-size: 15px;\n\n  line-height: 1.75;\n}\n\n\/* =========================================================\n   DETAIL SECTION\n   ========================================================= *\/\n\n.bh-detail-grid {\n  display: grid;\n\n  grid-template-columns: 1.05fr .95fr;\n\n  align-items: center;\n\n  gap: 75px;\n}\n\n.bh-detail-image-wrap {\n  position: relative;\n}\n\n.bh-detail-image {\n  display: block;\n\n  width: 100%;\n\n  border-radius: 30px;\n\n  box-shadow:\n    0 30px 75px rgba(80,35,50,.15);\n\n  transition:\n    transform .7s cubic-bezier(.22,1,.36,1);\n}\n\n.bh-detail-image-wrap:hover .bh-detail-image {\n  transform: scale(1.025) rotate(-1deg);\n}\n\n\/* Heat rings around image *\/\n\n.bh-detail-ring {\n  position: absolute;\n\n  left: 50%;\n  top: 50%;\n\n  width: 70%;\n\n  aspect-ratio: 1;\n\n  border-radius: 50%;\n\n  border:\n    1px solid rgba(215,126,154,.18);\n\n  transform: translate(-50%,-50%);\n\n  animation: bhDetailRing 4s ease-out infinite;\n\n  pointer-events: none;\n}\n\n.bh-detail-ring:nth-child(2) {\n  animation-delay: 1.3s;\n}\n\n.bh-detail-ring:nth-child(3) {\n  animation-delay: 2.6s;\n}\n\n@keyframes bhDetailRing {\n\n  0% {\n    transform: translate(-50%,-50%) scale(.5);\n    opacity: .8;\n  }\n\n  100% {\n    transform: translate(-50%,-50%) scale(1.45);\n    opacity: 0;\n  }\n\n}\n\n\/* =========================================================\n   DETAIL COPY\n   ========================================================= *\/\n\n.bh-detail-copy h3 {\n  margin: 0 0 20px;\n\n  font-size: clamp(35px,4vw,53px);\n\n  line-height: 1;\n\n  letter-spacing: -2.5px;\n}\n\n.bh-detail-copy h3 em {\n  color: var(--bh-pink-dark);\n\n  font-family: Georgia, serif;\n\n  font-weight: 400;\n}\n\n.bh-detail-copy p {\n  color: var(--bh-muted);\n\n  font-size: 15px;\n\n  line-height: 1.8;\n}\n\n.bh-feature-list {\n  margin-top: 28px;\n\n  display: grid;\n\n  gap: 12px;\n}\n\n.bh-feature {\n  display: flex;\n\n  align-items: center;\n\n  gap: 13px;\n\n  padding: 13px;\n\n  border-radius: 16px;\n\n  background: rgba(255,255,255,.7);\n\n  border:\n    1px solid rgba(169,81,113,.08);\n\n  transition:\n    transform .3s ease,\n    box-shadow .3s ease;\n}\n\n.bh-feature:hover {\n  transform: translateX(7px);\n\n  box-shadow:\n    0 15px 30px rgba(100,40,65,.07);\n}\n\n.bh-feature-check {\n  width: 36px;\n  height: 36px;\n\n  min-width: 36px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 11px;\n\n  background: var(--bh-pink-soft);\n\n  color: var(--bh-pink-dark);\n\n  font-weight: 900;\n}\n\n.bh-feature strong {\n  display: block;\n\n  font-size: 12px;\n}\n\n.bh-feature span {\n  display: block;\n\n  margin-top: 2px;\n\n  color: #89777d;\n\n  font-size: 10px;\n}\n\n\/* =========================================================\n   HOW IT WORKS\n   ========================================================= *\/\n\n.bh-how {\n  padding-top: 130px;\n}\n\n.bh-how-grid {\n  display: grid;\n\n  grid-template-columns: .95fr 1.05fr;\n\n  gap: 70px;\n\n  align-items: center;\n}\n\n.bh-how-image-wrap {\n  position: relative;\n\n  border-radius: 32px;\n\n  overflow: hidden;\n\n  box-shadow:\n    0 35px 80px rgba(75,35,50,.14);\n}\n\n.bh-how-image {\n  display: block;\n\n  width: 100%;\n\n  transition:\n    transform 1s cubic-bezier(.22,1,.36,1);\n}\n\n.bh-how-image-wrap:hover .bh-how-image {\n  transform: scale(1.035);\n}\n\n\/* Animated light line *\/\n\n.bh-energy-line {\n  position: absolute;\n\n  left: -20%;\n\n  top: 50%;\n\n  width: 140%;\n\n  height: 2px;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.95),\n      transparent\n    );\n\n  filter:\n    drop-shadow(0 0 8px rgba(255,220,230,.9));\n\n  animation: bhEnergy 3s linear infinite;\n\n  pointer-events: none;\n}\n\n@keyframes bhEnergy {\n\n  0% {\n    transform: translateX(-30%);\n    opacity: 0;\n  }\n\n  25% {\n    opacity: 1;\n  }\n\n  75% {\n    opacity: 1;\n  }\n\n  100% {\n    transform: translateX(30%);\n    opacity: 0;\n  }\n\n}\n\n\/* =========================================================\n   HOW COPY\n   ========================================================= *\/\n\n.bh-how-copy h3 {\n  margin: 0 0 20px;\n\n  font-size: clamp(36px,4vw,54px);\n\n  line-height: 1;\n\n  letter-spacing: -2.5px;\n}\n\n.bh-how-copy h3 em {\n  color: var(--bh-pink-dark);\n\n  font-family: Georgia, serif;\n\n  font-weight: 400;\n}\n\n.bh-how-copy \u003e p {\n  color: var(--bh-muted);\n\n  font-size: 15px;\n\n  line-height: 1.8;\n}\n\n\/* Steps *\/\n\n.bh-steps {\n  display: grid;\n\n  gap: 15px;\n\n  margin-top: 30px;\n}\n\n.bh-step {\n  display: grid;\n\n  grid-template-columns: 44px 1fr;\n\n  gap: 14px;\n\n  align-items: center;\n}\n\n.bh-step-number {\n  width: 44px;\n  height: 44px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background:\n    linear-gradient(\n      135deg,\n      #f9e5eb,\n      #edc1d0\n    );\n\n  color: var(--bh-pink-dark);\n\n  font-size: 12px;\n\n  font-weight: 900;\n}\n\n.bh-step strong {\n  display: block;\n\n  font-size: 13px;\n\n  margin-bottom: 3px;\n}\n\n.bh-step span {\n  color: #89777d;\n\n  font-size: 11px;\n\n  line-height: 1.5;\n}\n\n\/* =========================================================\n   LIFESTYLE \/ EMOTIONAL SECTION\n   ========================================================= *\/\n\n.bh-emotional {\n  padding-top: 130px;\n}\n\n.bh-emotional-box {\n  position: relative;\n\n  min-height: 560px;\n\n  overflow: hidden;\n\n  border-radius: 35px;\n\n  background: #e9c1cb;\n\n  box-shadow:\n    0 35px 80px rgba(75,35,50,.14);\n}\n\n.bh-emotional-image {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position: center;\n\n  display: block;\n}\n\n.bh-emotional-overlay {\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(61,29,39,.55),\n      rgba(61,29,39,.12) 60%,\n      transparent\n    );\n}\n\n.bh-emotional-content {\n  position: relative;\n\n  z-index: 3;\n\n  width: 52%;\n\n  padding: 80px 60px;\n}\n\n.bh-emotional-content .bh-section-label {\n  color: #ffeef3;\n}\n\n.bh-emotional-content h2 {\n  margin: 0;\n\n  color: white;\n\n  font-size: clamp(38px,5vw,64px);\n\n  line-height: .98;\n\n  letter-spacing: -3px;\n}\n\n.bh-emotional-content h2 em {\n  display: block;\n\n  color: #ffdce6;\n\n  font-family: Georgia, serif;\n\n  font-weight: 400;\n}\n\n.bh-emotional-content p {\n  max-width: 480px;\n\n  margin: 22px 0 30px;\n\n  color: rgba(255,255,255,.88);\n\n  font-size: 15px;\n\n  line-height: 1.8;\n}\n\n.bh-white-button {\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 12px;\n\n  padding: 17px 27px;\n\n  border-radius: 999px;\n\n  background: white;\n\n  color: var(--bh-pink-dark) !important;\n\n  text-decoration: none !important;\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n  box-shadow:\n    0 15px 35px rgba(0,0,0,.12);\n\n  transition:\n    transform .3s ease,\n    box-shadow .3s ease;\n}\n\n.bh-white-button:hover {\n  transform: translateY(-4px);\n\n  box-shadow:\n    0 20px 45px rgba(0,0,0,.18);\n}\n\n\/* =========================================================\n   BENEFIT CARDS\n   ========================================================= *\/\n\n.bh-benefits-section {\n  padding-top: 125px;\n}\n\n.bh-benefit-cards {\n  display: grid;\n\n  grid-template-columns: repeat(3,1fr);\n\n  gap: 20px;\n}\n\n.bh-benefit-card {\n  position: relative;\n\n  overflow: hidden;\n\n  padding: 30px;\n\n  min-height: 230px;\n\n  border-radius: 25px;\n\n  background:\n    rgba(255,255,255,.72);\n\n  border:\n    1px solid rgba(169,81,113,.09);\n\n  box-shadow:\n    0 15px 45px rgba(80,35,50,.06);\n\n  transition:\n    transform .4s ease,\n    box-shadow .4s ease;\n}\n\n.bh-benefit-card:hover {\n  transform: translateY(-8px);\n\n  box-shadow:\n    0 25px 60px rgba(80,35,50,.12);\n}\n\n.bh-card-number {\n  color: #d79caf;\n\n  font-size: 10px;\n\n  letter-spacing: 2px;\n\n  font-weight: 900;\n}\n\n.bh-benefit-card h3 {\n  margin: 24px 0 10px;\n\n  font-size: 21px;\n\n  letter-spacing: -.5px;\n}\n\n.bh-benefit-card p {\n  margin: 0;\n\n  color: var(--bh-muted);\n\n  font-size: 13px;\n\n  line-height: 1.7;\n}\n\n.bh-card-symbol {\n  position: absolute;\n\n  right: 15px;\n\n  bottom: -12px;\n\n  color: rgba(169,81,113,.055);\n\n  font-family: Georgia, serif;\n\n  font-size: 100px;\n}\n\n\/* =========================================================\n   FINAL CTA\n   ========================================================= *\/\n\n.bh-final {\n  padding-top: 125px;\n  padding-bottom: 110px;\n}\n\n.bh-final-box {\n  position: relative;\n\n  overflow: hidden;\n\n  text-align: center;\n\n  padding: 80px 25px;\n\n  border-radius: 38px;\n\n  background:\n    radial-gradient(\n      circle at center,\n      rgba(255,255,255,.95),\n      transparent 70%\n    ),\n    linear-gradient(\n      135deg,\n      #f7dce5,\n      #fff3f6\n    );\n\n  border:\n    1px solid rgba(169,81,113,.1);\n\n  box-shadow:\n    0 25px 65px rgba(80,35,50,.06);\n}\n\n.bh-final-box:before {\n  content: \"♡\";\n\n  position: absolute;\n\n  top: -30px;\n  left: 7%;\n\n  color: rgba(169,81,113,.07);\n\n  font-family: Georgia, serif;\n\n  font-size: 180px;\n\n  transform: rotate(-15deg);\n}\n\n.bh-final-box:after {\n  content: \"♡\";\n\n  position: absolute;\n\n  right: 7%;\n  bottom: -80px;\n\n  color: rgba(169,81,113,.07);\n\n  font-family: Georgia, serif;\n\n  font-size: 200px;\n\n  transform: rotate(15deg);\n}\n\n.bh-final-box \u003e * {\n  position: relative;\n\n  z-index: 2;\n}\n\n.bh-final-label {\n  color: var(--bh-pink-dark);\n\n  font-size: 11px;\n\n  font-weight: 900;\n\n  letter-spacing: 2px;\n\n  text-transform: uppercase;\n}\n\n.bh-final-box h2 {\n  max-width: 780px;\n\n  margin: 17px auto;\n\n  font-size: clamp(40px,5.5vw,67px);\n\n  line-height: .97;\n\n  letter-spacing: -3px;\n}\n\n.bh-final-box h2 em {\n  color: var(--bh-pink-dark);\n\n  font-family: Georgia, serif;\n\n  font-weight: 400;\n}\n\n.bh-final-box p {\n  max-width: 560px;\n\n  margin: 0 auto 30px;\n\n  color: var(--bh-muted);\n\n  font-size: 15px;\n\n  line-height: 1.75;\n}\n\n\/* =========================================================\n   RESPONSIVE TABLET\n   ========================================================= *\/\n\n@media (max-width: 950px) {\n\n  .bh-hero {\n    grid-template-columns: 1fr;\n\n    gap: 40px;\n\n    padding-top: 60px;\n  }\n\n  .bh-hero-copy {\n    text-align: center;\n  }\n\n  .bh-hero-description {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .bh-mini-benefits {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .bh-hero-actions {\n    justify-content: center;\n  }\n\n  .bh-hero-image-wrap {\n    min-height: auto;\n\n    padding: 20px 0 50px;\n  }\n\n  .bh-hero-image {\n    max-width: 600px;\n  }\n\n  .bh-detail-grid,\n  .bh-how-grid {\n    grid-template-columns: 1fr;\n\n    gap: 40px;\n  }\n\n  .bh-detail-copy,\n  .bh-how-copy {\n    text-align: center;\n  }\n\n  .bh-feature-list {\n    max-width: 600px;\n\n    margin-left: auto;\n    margin-right: auto;\n\n    text-align: left;\n  }\n\n  .bh-steps {\n    max-width: 600px;\n\n    margin-left: auto;\n    margin-right: auto;\n\n    text-align: left;\n  }\n\n  .bh-benefit-cards {\n    grid-template-columns: 1fr;\n  }\n\n  .bh-emotional-content {\n    width: 65%;\n  }\n\n}\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .bh-container {\n    width: min(100% - 28px, 1180px);\n  }\n\n  .bh-hero {\n    padding: 55px 0 50px;\n\n    min-height: auto;\n  }\n\n  .bh-hero-title {\n    font-size: 46px;\n\n    letter-spacing: -3px;\n  }\n\n  .bh-hero-description {\n    font-size: 14px;\n  }\n\n  .bh-mini-benefits {\n    grid-template-columns: 1fr;\n\n    text-align: left;\n  }\n\n  .bh-hero-actions {\n    flex-direction: column;\n  }\n\n  .bh-button {\n    width: 100%;\n  }\n\n  .bh-secure-text {\n    text-align: center;\n  }\n\n  .bh-hero-image-wrap {\n    min-height: 430px;\n\n    padding: 10px 0 40px;\n  }\n\n  .bh-hero-image {\n    width: 100%;\n\n    border-radius: 22px;\n  }\n\n  .bh-hero-image-glow {\n    width: 330px;\n    height: 330px;\n  }\n\n  .bh-floating-card {\n    padding: 10px 12px;\n\n    font-size: 9px;\n  }\n\n  .bh-floating-card small {\n    font-size: 7px;\n  }\n\n  .bh-card-heat {\n    left: -3px;\n    top: 50px;\n  }\n\n  .bh-card-wireless {\n    right: -3px;\n    bottom: 50px;\n  }\n\n  .bh-trust-bar {\n    grid-template-columns: 1fr 1fr;\n\n    gap: 5px;\n  }\n\n  .bh-trust-item {\n    border-right: none;\n\n    padding: 12px 5px;\n  }\n\n  .bh-section,\n  .bh-how,\n  .bh-emotional,\n  .bh-benefits-section,\n  .bh-final {\n    padding-top: 90px;\n  }\n\n  .bh-section-heading h2,\n  .bh-detail-copy h3,\n  .bh-how-copy h3 {\n    letter-spacing: -2px;\n  }\n\n  .bh-detail-image,\n  .bh-how-image-wrap {\n    border-radius: 22px;\n  }\n\n  .bh-emotional-box {\n    min-height: 650px;\n\n    border-radius: 25px;\n  }\n\n  .bh-emotional-image {\n    object-position: 63% center;\n  }\n\n  .bh-emotional-overlay {\n    background:\n      linear-gradient(\n        180deg,\n        rgba(61,29,39,.15),\n        rgba(61,29,39,.78)\n      );\n  }\n\n  .bh-emotional-content {\n    width: 100%;\n\n    padding: 310px 25px 35px;\n  }\n\n  .bh-emotional-content h2 {\n    font-size: 42px;\n\n    letter-spacing: -2px;\n  }\n\n  .bh-final {\n    padding-bottom: 70px;\n  }\n\n  .bh-final-box {\n    padding: 60px 20px;\n\n    border-radius: 28px;\n  }\n\n  .bh-final-box h2 {\n    letter-spacing: -2px;\n  }\n\n}\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #bellyhug-premium *,\n  #bellyhug-premium *:before,\n  #bellyhug-premium *:after {\n    animation-duration: .01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: .01ms !important;\n  }\n\n}\n\n\u003c\/style\u003e\n\u003cdiv id=\"bellyhug-premium\"\u003e\n\u003c!-- =========================================================\n     BACKGROUND\n     ========================================================= --\u003e\n\u003cdiv class=\"bh-bg-orb bh-bg-orb-1\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"bh-bg-orb bh-bg-orb-2\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"bh-bg-orb bh-bg-orb-3\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"bh-container\"\u003e\n\u003c!-- =========================================================\n     HERO\n     ========================================================= --\u003e\n\u003csection class=\"bh-hero\"\u003e\u003c!-- HERO COPY --\u003e\n\u003cdiv class=\"bh-hero-copy bh-reveal\"\u003e\n\u003cdiv class=\"bh-eyebrow\"\u003e\n\u003cspan class=\"bh-heart-pulse\"\u003e♡\u003c\/span\u003e Your period deserves better\u003c\/div\u003e\n\u003ch1 class=\"bh-hero-title\"\u003eMeet your new \u003cspan class=\"bh-script\"\u003e Period Buddy. \u003c\/span\u003e\n\u003c\/h1\u003e\n\u003cp class=\"bh-hero-description\"\u003eSay goodbye to silently suffering through uncomfortable period days. BellyHug combines soothing warmth and gentle massage in one beautiful, wearable companion designed to help you relax and feel more comfortable.\u003c\/p\u003e\n\u003c!-- BENEFITS --\u003e\n\u003cdiv class=\"bh-mini-benefits\"\u003e\n\u003cdiv class=\"bh-mini-benefit\"\u003e\n\u003cdiv class=\"bh-mini-icon\"\u003e🔥\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Soothing warmth \u003c\/strong\u003e \u003cspan\u003e Targeted comfort \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-mini-benefit\"\u003e\n\u003cdiv class=\"bh-mini-icon\"\u003e💆\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Gentle massage \u003c\/strong\u003e \u003cspan\u003e Relax as you wear it \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-mini-benefit\"\u003e\n\u003cdiv class=\"bh-mini-icon\"\u003e🔋\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Wireless design \u003c\/strong\u003e \u003cspan\u003e Freedom to move \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-mini-benefit\"\u003e\n\u003cdiv class=\"bh-mini-icon\"\u003e🤍\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Hands-free comfort \u003c\/strong\u003e \u003cspan\u003e Simply wrap \u0026amp; relax \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- CTA --\u003e\n\u003cdiv class=\"bh-hero-actions\"\u003e\n\u003ca href=\"#shop\" class=\"bh-button\"\u003e Get My BellyHug \u003cspan\u003e → \u003c\/span\u003e \u003c\/a\u003e\n\u003cdiv class=\"bh-secure-text\"\u003e♡ Designed around your comfort\u003cbr\u003eduring your cycle\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- HERO LIFESTYLE IMAGE --\u003e\n\u003cdiv class=\"bh-hero-image-wrap bh-reveal\"\u003e\n\u003cdiv class=\"bh-hero-image-glow\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cimg class=\"bh-hero-image\" alt=\"Woman relaxing comfortably with BellyHug Period Buddy\" loading=\"eager\"\u003e \u003c!-- FLOATING LABEL --\u003e\n\u003cdiv class=\"bh-floating-card bh-card-heat\"\u003e🔥 Soothing warmth \u003csmall\u003e Right where you need it \u003c\/small\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-floating-card bh-card-wireless\"\u003e🔋 Wireless \u0026amp; portable \u003csmall\u003e Comfort without being tied down \u003c\/small\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- =========================================================\n     TRUST BAR\n     ========================================================= --\u003e\n\u003cdiv class=\"bh-trust-bar bh-reveal\"\u003e\n\u003cdiv class=\"bh-trust-item\"\u003e\n\u003cdiv class=\"bh-trust-icon\"\u003e🔥\u003c\/div\u003e\n\u003cstrong\u003e Targeted warmth \u003c\/strong\u003e \u003cspan\u003e Soothing comfort \u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-trust-item\"\u003e\n\u003cdiv class=\"bh-trust-icon\"\u003e💆\u003c\/div\u003e\n\u003cstrong\u003e Gentle massage \u003c\/strong\u003e \u003cspan\u003e Relaxing sensation \u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-trust-item\"\u003e\n\u003cdiv class=\"bh-trust-icon\"\u003e🔋\u003c\/div\u003e\n\u003cstrong\u003e Wireless \u003c\/strong\u003e \u003cspan\u003e Freedom to move \u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-trust-item\"\u003e\n\u003cdiv class=\"bh-trust-icon\"\u003e🤍\u003c\/div\u003e\n\u003cstrong\u003e Hands-free \u003c\/strong\u003e \u003cspan\u003e Wear \u0026amp; relax \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- =========================================================\n     SECTION 2 — CLOSE UP PRODUCT\n     ========================================================= --\u003e\n\u003csection class=\"bh-section\"\u003e\n\u003cdiv class=\"bh-section-heading bh-reveal\"\u003e\n\u003cdiv class=\"bh-section-label\"\u003eMade for comfort\u003c\/div\u003e\n\u003ch2\u003eSoft against your skin. \u003cem\u003e Beautifully designed. \u003c\/em\u003e\n\u003c\/h2\u003e\n\u003cp\u003eEvery detail of BellyHug is designed to feel comfortable against your body while giving you the soothing experience you want during those days.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-detail-grid\"\u003e\n\u003c!-- IMAGE --\u003e\n\u003cdiv class=\"bh-detail-image-wrap bh-reveal\"\u003e\n\u003cdiv class=\"bh-detail-ring\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"bh-detail-ring\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"bh-detail-ring\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cimg class=\"bh-detail-image\" alt=\"Close up of BellyHug soft heating and massage surface\" loading=\"lazy\"\u003e\n\u003c\/div\u003e\n\u003c!-- COPY --\u003e\n\u003cdiv class=\"bh-detail-copy bh-reveal\"\u003e\n\u003ch3\u003eA little more \u003cem\u003e love for your body. \u003c\/em\u003e\n\u003c\/h3\u003e\n\u003cp\u003eBellyHug is shaped to sit comfortably against your body, making it easy to enjoy a cozy, soothing moment whenever you need one.\u003c\/p\u003e\n\u003cdiv class=\"bh-feature-list\"\u003e\n\u003cdiv class=\"bh-feature\"\u003e\n\u003cdiv class=\"bh-feature-check\"\u003e✓\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Comfortable contact surface \u003c\/strong\u003e \u003cspan\u003e Designed for a cozy, gentle feel. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-feature\"\u003e\n\u003cdiv class=\"bh-feature-check\"\u003e✓\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Flexible wearable design \u003c\/strong\u003e \u003cspan\u003e Wrap it around your waist and settle in. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-feature\"\u003e\n\u003cdiv class=\"bh-feature-check\"\u003e✓\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Adjustable comfort \u003c\/strong\u003e \u003cspan\u003e Choose the settings that feel best for you. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-feature\"\u003e\n\u003cdiv class=\"bh-feature-check\"\u003e✓\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Easy to keep nearby \u003c\/strong\u003e \u003cspan\u003e Compact enough to use whenever you need it. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- =========================================================\n     SECTION 3 — HOW IT WORKS\n     ========================================================= --\u003e\n\u003csection class=\"bh-how\"\u003e\n\u003cdiv class=\"bh-section-heading bh-reveal\"\u003e\n\u003cdiv class=\"bh-section-label\"\u003eSimple comfort\u003c\/div\u003e\n\u003ch2\u003eWrap. \u003cem\u003e Relax. \u003c\/em\u003e Feel better.\u003c\/h2\u003e\n\u003cp\u003eBellyHug is designed to make your comfort routine incredibly simple. Put it on, choose your preferred settings and settle into your day.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-how-grid\"\u003e\n\u003c!-- HOW IMAGE --\u003e\n\u003cdiv class=\"bh-how-image-wrap bh-reveal\"\u003e\n\u003cimg class=\"bh-how-image\" alt=\"BellyHug heating and massage belt opened showing its components\" loading=\"lazy\"\u003e\n\u003cdiv class=\"bh-energy-line\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- HOW COPY --\u003e\n\u003cdiv class=\"bh-how-copy bh-reveal\"\u003e\n\u003ch3\u003eDesigned around \u003cem\u003e you. \u003c\/em\u003e\n\u003c\/h3\u003e\n\u003cp\u003eNo complicated routine. BellyHug fits naturally into your day so you can enjoy your comfort while reading, relaxing, working from home or simply taking some time for yourself.\u003c\/p\u003e\n\u003cdiv class=\"bh-steps\"\u003e\n\u003cdiv class=\"bh-step\"\u003e\n\u003cdiv class=\"bh-step-number\"\u003e01\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Wrap it around your waist \u003c\/strong\u003e \u003cspan\u003e Position BellyHug comfortably where you want soothing warmth. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-step\"\u003e\n\u003cdiv class=\"bh-step-number\"\u003e02\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Choose your settings \u003c\/strong\u003e \u003cspan\u003e Adjust heat and massage to your preferred comfort level. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-step\"\u003e\n\u003cdiv class=\"bh-step-number\"\u003e03\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cstrong\u003e Get comfortable \u003c\/strong\u003e \u003cspan\u003e Sit back, relax and let BellyHug become your little period companion. \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- =========================================================\n     EMOTIONAL LIFESTYLE SECTION\n     ========================================================= --\u003e\n\u003csection class=\"bh-emotional\"\u003e\n\u003cdiv class=\"bh-emotional-box bh-reveal\"\u003e\n\u003cimg class=\"bh-emotional-image\" alt=\"Woman relaxing with BellyHug Period Buddy\" loading=\"lazy\"\u003e\n\u003cdiv class=\"bh-emotional-overlay\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cdiv class=\"bh-emotional-content\"\u003e\n\u003cdiv class=\"bh-section-label\"\u003eYour comfort matters\u003c\/div\u003e\n\u003ch2\u003eYour period doesn't have to \u003cem\u003e slow you down. \u003c\/em\u003e\n\u003c\/h2\u003e\n\u003cp\u003eWhether you're curled up on the couch, working from home or taking a quiet moment for yourself, BellyHug gives you a simple way to make your cycle feel a little more comfortable.\u003c\/p\u003e\n\u003ca href=\"#shop\" class=\"bh-white-button\"\u003e Meet Your Period Buddy \u003cspan\u003e → \u003c\/span\u003e \u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- =========================================================\n     BENEFIT CARDS\n     ========================================================= --\u003e\n\u003csection class=\"bh-benefits-section\"\u003e\n\u003cdiv class=\"bh-section-heading bh-reveal\"\u003e\n\u003cdiv class=\"bh-section-label\"\u003eWhy BellyHug\u003c\/div\u003e\n\u003ch2\u003eComfort you can \u003cem\u003e take anywhere. \u003c\/em\u003e\n\u003c\/h2\u003e\n\u003cp\u003eDesigned for the moments when your body needs a little extra attention.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-benefit-cards\"\u003e\n\u003cdiv class=\"bh-benefit-card bh-reveal\"\u003e\n\u003cdiv class=\"bh-card-number\"\u003e01 — WARMTH\u003c\/div\u003e\n\u003ch3\u003eWrap yourself in warmth.\u003c\/h3\u003e\n\u003cp\u003eEnjoy soothing warmth around your abdomen while you relax through your day.\u003c\/p\u003e\n\u003cdiv class=\"bh-card-symbol\"\u003e♡\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-benefit-card bh-reveal\"\u003e\n\u003cdiv class=\"bh-card-number\"\u003e02 — MASSAGE\u003c\/div\u003e\n\u003ch3\u003eLet yourself relax.\u003c\/h3\u003e\n\u003cp\u003eGentle massage adds another layer of relaxation and comfort whenever you need it.\u003c\/p\u003e\n\u003cdiv class=\"bh-card-symbol\"\u003e✦\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bh-benefit-card bh-reveal\"\u003e\n\u003cdiv class=\"bh-card-number\"\u003e03 — FREEDOM\u003c\/div\u003e\n\u003ch3\u003eKeep doing your thing.\u003c\/h3\u003e\n\u003cp\u003eIts wearable design lets you enjoy hands-free comfort without having to stay under a blanket.\u003c\/p\u003e\n\u003cdiv class=\"bh-card-symbol\"\u003e♡\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- =========================================================\n     FINAL CTA\n     ========================================================= --\u003e\n\u003csection class=\"bh-final\"\u003e\n\u003cdiv class=\"bh-final-box bh-reveal\"\u003e\n\u003cdiv class=\"bh-final-label\"\u003eMeet BellyHug\u003c\/div\u003e\n\u003ch2\u003eDon't just get through your period. \u003cem\u003e Comfort it. \u003c\/em\u003e\n\u003c\/h2\u003e\n\u003cp\u003eGive your body a little extra warmth, relaxation and care whenever your cycle calls for it.\u003c\/p\u003e\n\u003ca href=\"#shop\" class=\"bh-button\"\u003e I Want My BellyHug \u003cspan\u003e ♡ \u003c\/span\u003e \u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c!-- =========================================================\n     JAVASCRIPT\n     ========================================================= --\u003e \u003cscript\u003e\n\n(function() {\n\n  'use strict';\n\n\n  \/* ========================================================\n     SCROLL REVEAL\n     ======================================================== *\/\n\n  const bhElements =\n    document.querySelectorAll(\n      '#bellyhug-premium .bh-reveal'\n    );\n\n\n  if ('IntersectionObserver' in window) {\n\n    const bhObserver =\n      new IntersectionObserver(\n\n        function(entries) {\n\n          entries.forEach(function(entry) {\n\n            if (entry.isIntersecting) {\n\n              entry.target.classList.add(\n                'bh-visible'\n              );\n\n              bhObserver.unobserve(\n                entry.target\n              );\n\n            }\n\n          });\n\n        },\n\n        {\n          threshold: 0.12\n        }\n\n      );\n\n\n    bhElements.forEach(function(element) {\n\n      bhObserver.observe(element);\n\n    });\n\n  } else {\n\n    bhElements.forEach(function(element) {\n\n      element.classList.add(\n        'bh-visible'\n      );\n\n    });\n\n  }\n\n\n  \/* ========================================================\n     SUBTLE HERO MOUSE PARALLAX\n     ======================================================== *\/\n\n  const bhStage =\n    document.querySelector(\n      '#bellyhug-premium .bh-hero-image-wrap'\n    );\n\n\n  const bhHeroImage =\n    document.querySelector(\n      '#bellyhug-premium .bh-hero-image'\n    );\n\n\n  if (\n    bhStage \u0026\u0026\n    bhHeroImage \u0026\u0026\n    window.matchMedia('(pointer:fine)').matches\n  ) {\n\n    bhStage.addEventListener(\n      'mousemove',\n      function(event) {\n\n        const rect =\n          bhStage.getBoundingClientRect();\n\n\n        const mouseX =\n          (event.clientX - rect.left)\n          \/ rect.width\n          - .5;\n\n\n        const mouseY =\n          (event.clientY - rect.top)\n          \/ rect.height\n          - .5;\n\n\n        bhHeroImage.style.animation =\n          'none';\n\n\n        bhHeroImage.style.transform =\n          'translate(' +\n          (mouseX * 12) +\n          'px,' +\n          (mouseY * 12) +\n          'px) rotate(' +\n          (mouseX * 1.5) +\n          'deg)';\n\n      }\n    );\n\n\n    bhStage.addEventListener(\n      'mouseleave',\n      function() {\n\n        bhHeroImage.style.animation =\n          'bhLifestyleFloat 6s ease-in-out infinite';\n\n        bhHeroImage.style.transform =\n          '';\n\n      }\n    );\n\n  }\n\n\n  \/* ========================================================\n     SMOOTH CTA SCROLL\n     ======================================================== *\/\n\n  const bhButtons =\n    document.querySelectorAll(\n      '#bellyhug-premium a[href=\"#shop\"]'\n    );\n\n\n  bhButtons.forEach(function(button) {\n\n    button.addEventListener(\n      'click',\n      function(event) {\n\n        const shop =\n          document.querySelector('#shop');\n\n\n        if (shop) {\n\n          event.preventDefault();\n\n          shop.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start'\n          });\n\n        }\n\n      }\n    );\n\n  });\n\n\n})();\n\n\u003c\/script\u003e\n\u003c\/div\u003e","brand":"BellyHug","offers":[{"title":"Default Title","offer_id":54487342809301,"sku":null,"price":599.0,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0824\/3023\/0741\/files\/belly-hug-hero-shot.png?v=1786551052","url":"https:\/\/bellyhug.co.za\/products\/bellyhug-period-buddy%e2%84%a2","provider":"BellyHug","version":"1.0","type":"link"}