{"product_id":"retractable-brush","title":"The Clean Comb™ – Retractable Hair Brush","description":"```liquid\n\u003csection class=\"sb-comb\"\u003e\n\n  \u003c!-- Ambient background --\u003e\n  \u003cdiv class=\"sb-orb sb-orb-one\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"sb-orb sb-orb-two\"\u003e\u003c\/div\u003e\n\n  \u003c!-- Floating decorative elements --\u003e\n  \u003cspan class=\"sb-star sb-star-1\"\u003e✦\u003c\/span\u003e\n  \u003cspan class=\"sb-star sb-star-2\"\u003e✧\u003c\/span\u003e\n  \u003cspan class=\"sb-star sb-star-3\"\u003e✦\u003c\/span\u003e\n  \u003cspan class=\"sb-star sb-star-4\"\u003e♡\u003c\/span\u003e\n\n  \u003cdiv class=\"sb-wrapper\"\u003e\n\n    \u003c!-- HERO --\u003e\n    \u003cdiv class=\"sb-hero\"\u003e\n\n      \u003cdiv class=\"sb-label\"\u003e\n        \u003cspan\u003e\u003c\/span\u003e\n        SUBLIMINAL BLISS\n        \u003cspan\u003e\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003ch1\u003e\n        Beautiful hair.\u003cbr\u003e\n        \u003cem\u003eWherever you go.\u003c\/em\u003e\n      \u003c\/h1\u003e\n\n      \u003cp class=\"sb-hero-text\"\u003e\n        Meet your new everyday beauty essential.\n        Compact, convenient and designed to keep\n        your hair looking effortlessly beautiful on the go.\n      \u003c\/p\u003e\n\n      \u003c!-- ABSTRACT PREMIUM HERO DESIGN --\u003e\n      \u003cdiv class=\"sb-product-stage\"\u003e\n\n        \u003cdiv class=\"sb-product-aura\"\u003e\u003c\/div\u003e\n\n        \u003cdiv class=\"sb-image-ring ring-a\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sb-image-ring ring-b\"\u003e\u003c\/div\u003e\n\n        \u003cdiv class=\"sb-center-symbol\"\u003e\n          \u003cspan\u003e✦\u003c\/span\u003e\n          \u003csmall\u003eBLISS\u003c\/small\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sb-pill sb-pill-left\"\u003e\n          \u003cspan\u003e✦\u003c\/span\u003e\n          Retractable\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sb-pill sb-pill-right\"\u003e\n          \u003cspan\u003e♡\u003c\/span\u003e\n          On-the-Go\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sb-scroll-indicator\"\u003e\n        \u003cspan\u003eSCROLL TO DISCOVER\u003c\/span\u003e\n        \u003cdiv\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- INTRODUCTION --\u003e\n    \u003cdiv class=\"sb-introduction reveal\"\u003e\n\n      \u003cspan class=\"sb-mini-title\"\u003e\n        YOUR NEW BEAUTY ESSENTIAL\n      \u003c\/span\u003e\n\n      \u003ch2\u003e\n        A little luxury\u003cbr\u003e\n        for your \u003cem\u003eeveryday.\u003c\/em\u003e\n      \u003c\/h2\u003e\n\n      \u003cp\u003e\n        Your hair deserves effortless care, wherever life takes you.\n        Our Retractable Self-Cleaning Hair Comb slips easily into\n        your handbag, gym bag or travel case for quick touch-ups\n        whenever you need them.\n      \u003c\/p\u003e\n\n      \u003cdiv class=\"sb-line\"\u003e\u003c\/div\u003e\n\n      \u003cdiv class=\"sb-signature\"\u003e\n        Pull. Comb. Smooth. Go. ✨\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- BENEFITS --\u003e\n    \u003cdiv class=\"sb-benefits\"\u003e\n\n      \u003cdiv class=\"sb-heading reveal\"\u003e\n\n        \u003cspan class=\"sb-mini-title\"\u003e\n          WHY YOU'LL LOVE IT\n        \u003c\/span\u003e\n\n        \u003ch2\u003e\n          Designed for\u003cbr\u003e\n          \u003cem\u003eyour routine.\u003c\/em\u003e\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"sb-benefit-grid\"\u003e\n\n        \u003cdiv class=\"sb-benefit-card reveal\"\u003e\n          \u003cdiv class=\"sb-benefit-icon\"\u003e✦\u003c\/div\u003e\n\n          \u003ch3\u003eRetractable\u003c\/h3\u003e\n\n          \u003cp\u003e\n            Extend the comb when you need it and retract\n            the teeth when you're finished.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"sb-benefit-card reveal\"\u003e\n          \u003cdiv class=\"sb-benefit-icon\"\u003e♡\u003c\/div\u003e\n\n          \u003ch3\u003eTravel Friendly\u003c\/h3\u003e\n\n          \u003cp\u003e\n            Compact enough to keep in your handbag,\n            purse, gym bag or travel case.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"sb-benefit-card reveal\"\u003e\n          \u003cdiv class=\"sb-benefit-icon\"\u003e✧\u003c\/div\u003e\n\n          \u003ch3\u003eEasy to Clean\u003c\/h3\u003e\n\n          \u003cp\u003e\n            The retractable design makes removing\n            loose hair from the comb simple.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"sb-benefit-card reveal\"\u003e\n          \u003cdiv class=\"sb-benefit-icon\"\u003e∞\u003c\/div\u003e\n\n          \u003ch3\u003eEveryday Beauty\u003c\/h3\u003e\n\n          \u003cp\u003e\n            Perfect for quick hair touch-ups at work,\n            the gym, while travelling or before heading out.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- FEATURE SHOWCASE --\u003e\n    \u003cdiv class=\"sb-showcase\"\u003e\n\n      \u003cdiv class=\"sb-showcase-visual reveal\"\u003e\n\n        \u003cdiv class=\"sb-large-orb\"\u003e\u003c\/div\u003e\n\n        \u003cdiv class=\"sb-showcase-symbol\"\u003e\n          \u003cspan\u003e✦\u003c\/span\u003e\n          \u003cp\u003eSUBLIMINAL\u003cbr\u003eBLISS\u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sb-orbit orbit-one\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sb-orbit orbit-two\"\u003e\u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"sb-showcase-content reveal\"\u003e\n\n        \u003cspan class=\"sb-mini-title\"\u003e\n          SIMPLE BEAUTY\n        \u003c\/span\u003e\n\n        \u003ch2\u003e\n          Beauty care,\u003cbr\u003e\n          \u003cem\u003esimplified.\u003c\/em\u003e\n        \u003c\/h2\u003e\n\n\n        \u003cdiv class=\"sb-step\"\u003e\n\n          \u003cspan\u003e01\u003c\/span\u003e\n\n          \u003cdiv\u003e\n            \u003ch3\u003eExtend\u003c\/h3\u003e\n\n            \u003cp\u003e\n              Pull the mechanism to reveal the comb teeth.\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"sb-step\"\u003e\n\n          \u003cspan\u003e02\u003c\/span\u003e\n\n          \u003cdiv\u003e\n            \u003ch3\u003eComb\u003c\/h3\u003e\n\n            \u003cp\u003e\n              Gently smooth and detangle your hair\n              whenever you need a quick refresh.\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"sb-step\"\u003e\n\n          \u003cspan\u003e03\u003c\/span\u003e\n\n          \u003cdiv\u003e\n            \u003ch3\u003eRetract\u003c\/h3\u003e\n\n            \u003cp\u003e\n              Retract the teeth and place your comb\n              safely back into your bag.\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- LIFESTYLE BAR --\u003e\n    \u003cdiv class=\"sb-lifestyle reveal\"\u003e\n\n      \u003cdiv\u003e\n        \u003cspan\u003e♡\u003c\/span\u003e\n        HANDBAG\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n        \u003cspan\u003e✦\u003c\/span\u003e\n        GYM BAG\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n        \u003cspan\u003e✧\u003c\/span\u003e\n        TRAVEL\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n        \u003cspan\u003e♡\u003c\/span\u003e\n        EVERYDAY\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- FINAL CTA --\u003e\n    \u003cdiv class=\"sb-final reveal\"\u003e\n\n      \u003cdiv class=\"sb-final-light\"\u003e\u003c\/div\u003e\n\n      \u003cspan class=\"sb-mini-title\"\u003e\n        A LITTLE BLISS FOR YOUR BAG\n      \u003c\/span\u003e\n\n      \u003ch2\u003e\n        Good hair days\u003cbr\u003e\n        \u003cem\u003estart here.\u003c\/em\u003e\n      \u003c\/h2\u003e\n\n      \u003cp\u003e\n        Keep your Subliminal Bliss Retractable Hair Comb\n        close and make effortless hair care part of\n        your everyday beauty ritual.\n      \u003c\/p\u003e\n\n      \u003ca href=\"\/products\/retractable-self-cleaning-hair-comb\" class=\"sb-button\"\u003e\n        SHOP THE COMB\n        \u003cspan\u003e→\u003c\/span\u003e\n      \u003c\/a\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\u003c\/section\u003e\n\n\n\u003cstyle\u003e\n\n\/* =========================================\n   SUBLIMINAL BLISS\n   PREMIUM NO-IMAGE DESIGN\n========================================= *\/\n\n.sb-comb {\n\n  --sb-lavender: #9275aa;\n  --sb-light-lavender: #d8c9e2;\n  --sb-pink: #f1dfe8;\n  --sb-cream: #fcfaf7;\n  --sb-text: #39313b;\n  --sb-muted: #766d78;\n\n  position: relative;\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 10% 10%,\n      rgba(215,198,226,.45),\n      transparent 30%\n    ),\n    radial-gradient(\n      circle at 90% 60%,\n      rgba(243,220,231,.45),\n      transparent 30%\n    ),\n    var(--sb-cream);\n\n  color: var(--sb-text);\n\n  padding: 90px 20px;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* BACKGROUND ORBS *\/\n\n.sb-orb {\n\n  position: absolute;\n\n  width: 500px;\n  height: 500px;\n\n  border-radius: 50%;\n\n  filter: blur(100px);\n\n  opacity: .25;\n\n  pointer-events: none;\n}\n\n.sb-orb-one {\n  background: #cbb4dc;\n  top: -250px;\n  left: -250px;\n}\n\n.sb-orb-two {\n  background: #edcadc;\n  right: -250px;\n  bottom: -200px;\n}\n\n\n\/* FLOATING STARS *\/\n\n.sb-star {\n\n  position: absolute;\n\n  color: #a990b9;\n\n  font-size: 22px;\n\n  opacity: .5;\n\n  animation:\n    sbFloat 5s ease-in-out infinite;\n\n  pointer-events: none;\n}\n\n.sb-star-1 {\n  top: 12%;\n  left: 8%;\n}\n\n.sb-star-2 {\n  top: 25%;\n  right: 8%;\n  animation-delay: 1s;\n}\n\n.sb-star-3 {\n  top: 58%;\n  left: 6%;\n  animation-delay: 2s;\n}\n\n.sb-star-4 {\n  bottom: 12%;\n  right: 10%;\n  animation-delay: 3s;\n}\n\n@keyframes sbFloat {\n\n  0%,100% {\n    transform:\n      translateY(0)\n      rotate(0deg);\n    opacity: .3;\n  }\n\n  50% {\n    transform:\n      translateY(-18px)\n      rotate(15deg);\n    opacity: .8;\n  }\n}\n\n\n\/* WRAPPER *\/\n\n.sb-wrapper {\n\n  position: relative;\n\n  max-width: 1180px;\n\n  margin: auto;\n\n  z-index: 2;\n}\n\n\n\/* HERO *\/\n\n.sb-hero {\n\n  min-height: 820px;\n\n  display: flex;\n\n  align-items: center;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  text-align: center;\n}\n\n\n.sb-label {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 14px;\n\n  color: var(--sb-lavender);\n\n  font-size: 10px;\n\n  letter-spacing: 4px;\n\n  font-weight: 600;\n\n  margin-bottom: 25px;\n}\n\n\n.sb-label span {\n\n  width: 32px;\n\n  height: 1px;\n\n  background: var(--sb-light-lavender);\n}\n\n\n.sb-hero h1 {\n\n  font-family: Georgia, serif;\n\n  font-size:\n    clamp(50px, 7vw, 90px);\n\n  line-height: .98;\n\n  font-weight: 400;\n\n  letter-spacing: -4px;\n\n  margin: 0;\n}\n\n\n.sb-hero h1 em,\n.sb-introduction em,\n.sb-heading em,\n.sb-showcase-content em,\n.sb-final em {\n\n  color: var(--sb-lavender);\n\n  font-style: italic;\n}\n\n\n.sb-hero-text {\n\n  max-width: 590px;\n\n  color: var(--sb-muted);\n\n  line-height: 1.8;\n\n  font-size: 16px;\n\n  margin: 30px auto;\n}\n\n\n\/* =========================================\n   ABSTRACT HERO\n========================================= *\/\n\n.sb-product-stage {\n\n  position: relative;\n\n  width: min(620px, 90vw);\n\n  height: 480px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  margin-top: 10px;\n}\n\n\n.sb-product-aura {\n\n  position: absolute;\n\n  width: 360px;\n  height: 360px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(205,184,221,.55),\n      rgba(244,224,234,.25),\n      transparent 70%\n    );\n\n  filter: blur(15px);\n\n  animation:\n    sbAura 4s ease-in-out infinite;\n}\n\n\n@keyframes sbAura {\n\n  0%,100% {\n    transform: scale(.9);\n    opacity: .6;\n  }\n\n  50% {\n    transform: scale(1.08);\n    opacity: 1;\n  }\n}\n\n\n\/* CENTER SYMBOL *\/\n\n.sb-center-symbol {\n\n  position: relative;\n\n  z-index: 3;\n\n  width: 190px;\n  height: 190px;\n\n  border-radius: 50%;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  flex-direction: column;\n\n  background:\n    rgba(255,255,255,.45);\n\n  backdrop-filter: blur(15px);\n\n  -webkit-backdrop-filter: blur(15px);\n\n  border:\n    1px solid\n    rgba(255,255,255,.8);\n\n  box-shadow:\n    0 25px 70px\n    rgba(90,65,100,.13);\n\n  animation:\n    sbCenterFloat 5s ease-in-out infinite;\n}\n\n\n.sb-center-symbol span {\n\n  font-size: 35px;\n\n  color: var(--sb-lavender);\n\n  margin-bottom: 8px;\n}\n\n\n.sb-center-symbol small {\n\n  font-family: Georgia, serif;\n\n  letter-spacing: 4px;\n\n  font-size: 10px;\n\n  color: #75677b;\n}\n\n\n@keyframes sbCenterFloat {\n\n  0%,100% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(-12px);\n  }\n}\n\n\n\/* ROTATING RINGS *\/\n\n.sb-image-ring {\n\n  position: absolute;\n\n  border:\n    1px solid\n    rgba(154,124,170,.25);\n\n  border-radius: 50%;\n}\n\n\n.ring-a {\n\n  width: 420px;\n  height: 420px;\n\n  animation:\n    sbRotate 20s linear infinite;\n}\n\n\n.ring-b {\n\n  width: 500px;\n  height: 500px;\n\n  border-style: dashed;\n\n  animation:\n    sbRotate 30s linear infinite reverse;\n}\n\n\n@keyframes sbRotate {\n\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n\/* FLOATING PILLS *\/\n\n.sb-pill {\n\n  position: absolute;\n\n  z-index: 5;\n\n  padding: 13px 20px;\n\n  border-radius: 50px;\n\n  background:\n    rgba(255,255,255,.78);\n\n  backdrop-filter: blur(16px);\n\n  -webkit-backdrop-filter: blur(16px);\n\n  border:\n    1px solid\n    rgba(255,255,255,.9);\n\n  box-shadow:\n    0 18px 40px\n    rgba(75,55,85,.12);\n\n  color: #5f5265;\n\n  font-size: 11px;\n\n  letter-spacing: 1px;\n\n  animation:\n    sbPillFloat 4s ease-in-out infinite;\n}\n\n\n.sb-pill span {\n\n  color: var(--sb-lavender);\n\n  margin-right: 6px;\n}\n\n\n.sb-pill-left {\n\n  left: 0;\n\n  top: 100px;\n}\n\n\n.sb-pill-right {\n\n  right: 0;\n\n  bottom: 95px;\n\n  animation-delay: 1s;\n}\n\n\n@keyframes sbPillFloat {\n\n  0%,100% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(-9px);\n  }\n}\n\n\n\/* SCROLL *\/\n\n.sb-scroll-indicator {\n\n  color: #9a8f9e;\n\n  font-size: 9px;\n\n  letter-spacing: 3px;\n}\n\n\n.sb-scroll-indicator div {\n\n  width: 1px;\n\n  height: 38px;\n\n  margin: 12px auto;\n\n  background: #cbbdd1;\n\n  animation:\n    sbScroll 2s ease-in-out infinite;\n}\n\n\n@keyframes sbScroll {\n\n  0%,100% {\n    transform: scaleY(.3);\n    transform-origin: top;\n  }\n\n  50% {\n    transform: scaleY(1);\n    transform-origin: top;\n  }\n}\n\n\n\/* INTRO *\/\n\n.sb-introduction {\n\n  max-width: 700px;\n\n  margin: 0 auto;\n\n  padding: 130px 0;\n\n  text-align: center;\n}\n\n\n.sb-mini-title {\n\n  color: var(--sb-lavender);\n\n  font-size: 10px;\n\n  letter-spacing: 3px;\n\n  font-weight: 600;\n}\n\n\n.sb-introduction h2,\n.sb-heading h2,\n.sb-showcase-content h2,\n.sb-final h2 {\n\n  font-family: Georgia, serif;\n\n  font-size:\n    clamp(42px, 5vw, 65px);\n\n  line-height: 1.05;\n\n  font-weight: 400;\n\n  margin: 20px 0 30px;\n}\n\n\n.sb-introduction p {\n\n  color: var(--sb-muted);\n\n  font-size: 16px;\n\n  line-height: 1.9;\n}\n\n\n.sb-line {\n\n  width: 55px;\n\n  height: 1px;\n\n  background: var(--sb-light-lavender);\n\n  margin: 35px auto;\n}\n\n\n.sb-signature {\n\n  font-family: Georgia, serif;\n\n  font-size: 21px;\n\n  color: var(--sb-lavender);\n\n  font-style: italic;\n}\n\n\n\/* BENEFITS *\/\n\n.sb-benefits {\n\n  padding: 100px 0;\n}\n\n\n.sb-heading {\n\n  text-align: center;\n\n  margin-bottom: 55px;\n}\n\n\n.sb-benefit-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 18px;\n}\n\n\n.sb-benefit-card {\n\n  padding: 35px 26px;\n\n  border-radius: 26px;\n\n  background:\n    rgba(255,255,255,.62);\n\n  border:\n    1px solid\n    rgba(204,190,213,.45);\n\n  transition:\n    transform .45s\n      cubic-bezier(.2,.8,.2,1),\n    box-shadow .45s ease,\n    background .45s ease;\n}\n\n\n.sb-benefit-card:hover {\n\n  transform:\n    translateY(-12px);\n\n  background:\n    rgba(255,255,255,.96);\n\n  box-shadow:\n    0 28px 65px\n    rgba(75,55,85,.13);\n}\n\n\n.sb-benefit-icon {\n\n  width: 50px;\n  height: 50px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background: #f0e7f4;\n\n  color: var(--sb-lavender);\n\n  font-size: 20px;\n\n  margin-bottom: 25px;\n\n  transition:\n    transform .4s ease;\n}\n\n\n.sb-benefit-card:hover\n.sb-benefit-icon {\n\n  transform:\n    rotate(12deg)\n    scale(1.1);\n}\n\n\n.sb-benefit-card h3 {\n\n  font-family: Georgia, serif;\n\n  font-size: 21px;\n\n  font-weight: 400;\n\n  margin:\n    0 0 12px;\n}\n\n\n.sb-benefit-card p {\n\n  color: var(--sb-muted);\n\n  font-size: 13px;\n\n  line-height: 1.7;\n\n  margin: 0;\n}\n\n\n\/* =========================================\n   SHOWCASE WITHOUT IMAGE\n========================================= *\/\n\n.sb-showcase {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 1fr;\n\n  gap: 90px;\n\n  align-items: center;\n\n  padding:\n    150px 0;\n}\n\n\n.sb-showcase-visual {\n\n  position: relative;\n\n  height: 500px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n}\n\n\n.sb-large-orb {\n\n  position: absolute;\n\n  width: 330px;\n  height: 330px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      #eadff0,\n      #f7edf2 60%,\n      transparent 72%\n    );\n\n  filter: blur(5px);\n\n  animation:\n    sbLargeOrb 5s ease-in-out infinite;\n}\n\n\n@keyframes sbLargeOrb {\n\n  0%,100% {\n    transform: scale(.92);\n  }\n\n  50% {\n    transform: scale(1.08);\n  }\n}\n\n\n.sb-showcase-symbol {\n\n  position: relative;\n\n  z-index: 3;\n\n  width: 210px;\n  height: 210px;\n\n  border-radius: 50%;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  flex-direction: column;\n\n  background:\n    rgba(255,255,255,.7);\n\n  backdrop-filter: blur(20px);\n\n  border:\n    1px solid\n    rgba(255,255,255,.9);\n\n  box-shadow:\n    0 30px 70px\n    rgba(75,55,85,.12);\n\n}\n\n\n.sb-showcase-symbol span {\n\n  font-size: 35px;\n\n  color: var(--sb-lavender);\n}\n\n\n.sb-showcase-symbol p {\n\n  text-align: center;\n\n  font-family: Georgia, serif;\n\n  font-size: 11px;\n\n  letter-spacing: 3px;\n\n  line-height: 1.6;\n\n  color: #75677b;\n}\n\n\n\/* ORBITS *\/\n\n.sb-orbit {\n\n  position: absolute;\n\n  border:\n    1px solid\n    rgba(150,125,165,.25);\n\n  border-radius: 50%;\n}\n\n\n.orbit-one {\n\n  width: 420px;\n  height: 420px;\n\n  animation:\n    sbRotate 18s linear infinite;\n}\n\n\n.orbit-two {\n\n  width: 500px;\n  height: 500px;\n\n  border-style: dashed;\n\n  animation:\n    sbRotate 27s linear infinite reverse;\n}\n\n\n.sb-showcase-content h2 {\n\n  margin-bottom:\n    45px;\n}\n\n\n.sb-step {\n\n  display: flex;\n\n  gap: 25px;\n\n  padding:\n    23px 0;\n\n  border-bottom:\n    1px solid\n    rgba(150,130,160,.18);\n}\n\n\n.sb-step \u003e span {\n\n  color:\n    var(--sb-lavender);\n\n  font-family:\n    Georgia, serif;\n\n  font-size: 14px;\n}\n\n\n.sb-step h3 {\n\n  font-family:\n    Georgia, serif;\n\n  font-size: 20px;\n\n  font-weight: 400;\n\n  margin:\n    0 0 6px;\n}\n\n\n.sb-step p {\n\n  margin: 0;\n\n  color:\n    var(--sb-muted);\n\n  font-size: 13px;\n\n  line-height: 1.6;\n}\n\n\n\/* LIFESTYLE *\/\n\n.sb-lifestyle {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  border-top:\n    1px solid\n    rgba(150,130,160,.18);\n\n  border-bottom:\n    1px solid\n    rgba(150,130,160,.18);\n}\n\n\n.sb-lifestyle \u003e div {\n\n  padding: 30px 10px;\n\n  text-align: center;\n\n  font-size: 10px;\n\n  letter-spacing: 2px;\n\n  border-right:\n    1px solid\n    rgba(150,130,160,.18);\n}\n\n\n.sb-lifestyle \u003e div:last-child {\n\n  border-right: none;\n}\n\n\n.sb-lifestyle span {\n\n  color:\n    var(--sb-lavender);\n\n  margin-right: 7px;\n}\n\n\n\/* FINAL CTA *\/\n\n.sb-final {\n\n  position: relative;\n\n  overflow: hidden;\n\n  text-align: center;\n\n  padding:\n    130px 25px;\n\n  margin-top:\n    120px;\n\n  border-radius:\n    42px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #eee5f3,\n      #f8edf2\n    );\n}\n\n\n.sb-final-light {\n\n  position: absolute;\n\n  width: 400px;\n  height: 400px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.55);\n\n  filter: blur(80px);\n\n  left: 50%;\n  top: -200px;\n\n  transform:\n    translateX(-50%);\n}\n\n\n.sb-final h2 {\n\n  position: relative;\n\n  z-index: 2;\n}\n\n\n.sb-final p {\n\n  position: relative;\n\n  z-index: 2;\n\n  max-width: 520px;\n\n  margin:\n    0 auto 35px;\n\n  color:\n    var(--sb-muted);\n\n  font-size: 14px;\n\n  line-height: 1.8;\n}\n\n\n\/* BUTTON *\/\n\n.sb-button {\n\n  position: relative;\n\n  z-index: 2;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 22px;\n\n  padding:\n    18px 20px 18px 30px;\n\n  border-radius: 50px;\n\n  background:\n    #80649b;\n\n  color:\n    white !important;\n\n  text-decoration:\n    none !important;\n\n  font-size: 10px;\n\n  letter-spacing: 2px;\n\n  box-shadow:\n    0 18px 40px\n    rgba(100,75,120,.25);\n\n  transition:\n    transform .3s ease,\n    box-shadow .3s ease,\n    background .3s ease;\n}\n\n\n.sb-button span {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 31px;\n  height: 31px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.15);\n\n  font-size: 17px;\n\n  transition:\n    transform .3s ease;\n}\n\n\n.sb-button:hover {\n\n  transform:\n    translateY(-5px);\n\n  background:\n    #70568c;\n\n  box-shadow:\n    0 25px 50px\n    rgba(100,75,120,.32);\n}\n\n\n.sb-button:hover span {\n\n  transform:\n    translateX(5px);\n}\n\n\n\/* SCROLL REVEALS *\/\n\n.reveal {\n\n  opacity: 0;\n\n  transform:\n    translateY(35px);\n\n  transition:\n    opacity .9s ease,\n    transform .9s\n      cubic-bezier(.2,.8,.2,1);\n}\n\n\n.reveal.sb-visible {\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 800px) {\n\n  .sb-comb {\n    padding:\n      60px 18px;\n  }\n\n\n  .sb-hero {\n\n    min-height:\n      auto;\n\n    padding:\n      60px 0 50px;\n  }\n\n\n  .sb-hero h1 {\n\n    font-size:\n      48px;\n\n    letter-spacing:\n      -2px;\n  }\n\n\n  .sb-hero-text {\n\n    font-size:\n      14px;\n  }\n\n\n  .sb-product-stage {\n\n    width:\n      100%;\n\n    height:\n      420px;\n  }\n\n\n  .ring-a {\n\n    width:\n      340px;\n\n    height:\n      340px;\n  }\n\n\n  .ring-b {\n\n    width:\n      400px;\n\n    height:\n      400px;\n  }\n\n\n  .sb-pill-left {\n\n    left:\n      0;\n\n    top:\n      70px;\n  }\n\n\n  .sb-pill-right {\n\n    right:\n      0;\n\n    bottom:\n      65px;\n  }\n\n\n  .sb-benefit-grid {\n\n    grid-template-columns:\n      repeat(2,1fr);\n  }\n\n\n  .sb-showcase {\n\n    grid-template-columns:\n      1fr;\n\n    gap:\n      55px;\n\n    padding:\n      100px 0;\n  }\n\n\n  .sb-showcase-visual {\n\n    height:\n      400px;\n  }\n\n\n  .orbit-one {\n\n    width:\n      320px;\n\n    height:\n      320px;\n  }\n\n\n  .orbit-two {\n\n    width:\n      380px;\n\n    height:\n      380px;\n  }\n\n\n  .sb-lifestyle {\n\n    grid-template-columns:\n      repeat(2,1fr);\n  }\n\n\n  .sb-lifestyle \u003e div {\n\n    border-bottom:\n      1px solid\n      rgba(150,130,160,.18);\n  }\n\n\n  .sb-final {\n\n    margin-top:\n      80px;\n\n    padding:\n      90px 20px;\n\n    border-radius:\n      28px;\n  }\n\n}\n\n\n@media (max-width: 480px) {\n\n  .sb-hero h1 {\n\n    font-size:\n      42px;\n  }\n\n\n  .sb-benefit-grid {\n\n    grid-template-columns:\n      1fr;\n  }\n\n\n  .sb-introduction h2,\n  .sb-heading h2,\n  .sb-showcase-content h2,\n  .sb-final h2 {\n\n    font-size:\n      42px;\n  }\n\n\n  .sb-pill {\n\n    font-size:\n      9px;\n\n    padding:\n      10px 13px;\n  }\n\n\n  .sb-pill-left {\n    left:\n      -5px;\n  }\n\n\n  .sb-pill-right {\n    right:\n      -5px;\n  }\n\n}\n\n\n\/* REDUCED MOTION *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .sb-comb *,\n  .sb-comb *::before,\n  .sb-comb *::after {\n\n    animation-duration:\n      0.01ms !important;\n\n    animation-iteration-count:\n      1 !important;\n\n    scroll-behavior:\n      auto !important;\n\n    transition-duration:\n      0.01ms !important;\n  }\n\n}\n\n\u003c\/style\u003e\n\n\n\u003cscript\u003e\n\ndocument.addEventListener(\n  \"DOMContentLoaded\",\n  function () {\n\n    const revealElements =\n      document.querySelectorAll(\".reveal\");\n\n    const revealObserver =\n      new IntersectionObserver(\n        function(entries) {\n\n          entries.forEach(\n            function(entry) {\n\n              if (entry.isIntersecting) {\n\n                entry.target.classList.add(\n                  \"sb-visible\"\n                );\n\n                revealObserver.unobserve(\n                  entry.target\n                );\n\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold: 0.12\n        }\n      );\n\n\n    revealElements.forEach(\n      function(element) {\n\n        revealObserver.observe(element);\n\n      }\n    );\n\n  }\n);\n\n\u003c\/script\u003e\n```\n","brand":"Subliminal Bliss","offers":[{"title":"Pink","offer_id":52905072558397,"sku":null,"price":699.0,"currency_code":"ZAR","in_stock":true},{"title":"Blue","offer_id":52905072591165,"sku":null,"price":699.0,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1015\/3489\/2349\/files\/retractcomb-logo_6f3ef4b2-c30b-418d-ac59-b4e2cbcf54a1.png?v=1787249309","url":"https:\/\/subliminalbliss.co.za\/products\/retractable-brush","provider":"Subliminal Bliss","version":"1.0","type":"link"}