{"product_id":"softhaven™-the-cloud-hoodie","title":"SoftHaven™ The Cloud Hoodie","description":"\u003csection class=\"sfhc-section\" id=\"sfhc-cloud-hoodie\"\u003e\n  \u003cstyle\u003e\n    .sfhc-section {\n      --rust: #d4806a;\n      --rust-dark: #bd6b57;\n      --cream: #faf0eb;\n      --peach: #f2c4b0;\n      --charcoal: #2c2c2c;\n      --grey: #5c5c5c;\n\n      --accent: #d4806a;\n      --accent-dark: #bd6b57;\n      --accent-rgb: 212, 128, 106;\n      --bg-one: #faf0eb;\n      --bg-two: #f2c4b0;\n      --hoodie-one: #e5a18a;\n      --hoodie-two: #d4806a;\n\n      width: 100%;\n      position: relative;\n      overflow: hidden;\n      padding: 64px 18px;\n      border-radius: 32px;\n      background:\n        radial-gradient(circle at 8% 10%, rgba(var(--accent-rgb), 0.22), transparent 32%),\n        radial-gradient(circle at 92% 4%, rgba(255,255,255,0.82), transparent 28%),\n        linear-gradient(135deg, var(--bg-one), var(--bg-two));\n      color: var(--charcoal);\n      font-family: inherit;\n      transition: background 0.45s ease;\n    }\n\n    .sfhc-section * {\n      box-sizing: border-box;\n      max-width: 100%;\n    }\n\n    .sfhc-wrap {\n      max-width: 1180px;\n      margin: 0 auto;\n      width: 100%;\n    }\n\n    .sfhc-hero {\n      display: grid;\n      grid-template-columns: 1.05fr 0.95fr;\n      gap: 44px;\n      align-items: center;\n    }\n\n    .sfhc-badge {\n      display: inline-flex;\n      padding: 10px 15px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.72);\n      border: 1px solid rgba(255,255,255,0.86);\n      font-size: 14px;\n      font-weight: 800;\n      margin-bottom: 18px;\n    }\n\n    .sfhc-title {\n      margin: 0 0 14px;\n      font-size: clamp(38px, 6vw, 74px);\n      line-height: 0.96;\n      letter-spacing: -2px;\n      font-weight: 950;\n      color: var(--charcoal);\n    }\n\n    .sfhc-title span {\n      display: block;\n      color: var(--accent);\n      transition: color 0.35s ease;\n    }\n\n    .sfhc-subtitle {\n      font-size: clamp(20px, 2.4vw, 28px);\n      font-weight: 900;\n      margin-bottom: 16px;\n    }\n\n    .sfhc-text {\n      color: var(--grey);\n      font-size: 17px;\n      line-height: 1.75;\n      margin: 0 0 24px;\n    }\n\n    .sfhc-actions {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 14px;\n    }\n\n    .sfhc-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 52px;\n      padding: 16px 28px;\n      border-radius: 999px;\n      border: none;\n      background: var(--accent);\n      color: #fff;\n      font-size: 16px;\n      font-weight: 950;\n      cursor: pointer;\n      text-decoration: none;\n      box-shadow: 0 18px 38px rgba(var(--accent-rgb), 0.34);\n      transition: 0.22s ease;\n    }\n\n    .sfhc-btn:hover {\n      transform: translateY(-2px);\n      background: var(--accent-dark);\n    }\n\n    .sfhc-note {\n      color: var(--grey);\n      font-size: 14px;\n      font-weight: 700;\n      line-height: 1.45;\n    }\n\n    .sfhc-trust-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 9px;\n      margin-top: 22px;\n    }\n\n    .sfhc-trust-row span {\n      padding: 9px 12px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.66);\n      border: 1px solid rgba(255,255,255,0.82);\n      font-size: 13px;\n      font-weight: 800;\n    }\n\n    .sfhc-product-card {\n      width: 100%;\n      max-width: 520px;\n      justify-self: end;\n      padding: 24px;\n      border-radius: 34px;\n      background: rgba(255,255,255,0.68);\n      border: 1px solid rgba(255,255,255,0.88);\n      box-shadow: 0 32px 80px rgba(112,67,54,0.18);\n      backdrop-filter: blur(16px);\n    }\n\n    .sfhc-visual {\n      position: relative;\n      width: 100%;\n      min-height: 360px;\n      border-radius: 28px;\n      overflow: hidden;\n      background:\n        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.94), transparent 30%),\n        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(var(--accent-rgb), 0.32));\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .sfhc-hoodie {\n      position: relative;\n      width: 250px;\n      height: 310px;\n      border-radius: 95px 95px 48px 48px;\n      background:\n        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.66), transparent 18%),\n        linear-gradient(145deg, var(--hoodie-one), var(--hoodie-two));\n      box-shadow: 0 28px 60px rgba(112,67,54,0.28);\n      animation: sfhcBreathe 4.5s ease-in-out infinite;\n      transition: background 0.4s ease;\n    }\n\n    .sfhc-hoodie::before {\n      content: \"\";\n      position: absolute;\n      top: 24px;\n      left: 50%;\n      width: 125px;\n      height: 92px;\n      transform: translateX(-50%);\n      border-radius: 70px 70px 38px 38px;\n      background: rgba(255,255,255,0.38);\n    }\n\n    .sfhc-hoodie::after {\n      content: \"\";\n      position: absolute;\n      bottom: 45px;\n      left: 50%;\n      width: 150px;\n      height: 68px;\n      transform: translateX(-50%);\n      border-radius: 26px;\n      background: rgba(255,255,255,0.34);\n    }\n\n    .sfhc-warmth {\n      position: absolute;\n      bottom: 34px;\n      width: 14px;\n      height: 82px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.55);\n      filter: blur(8px);\n      pointer-events: none;\n      animation: sfhcSteam 4.5s ease-in-out infinite;\n    }\n\n    .sfhc-warmth.one { left: 23%; animation-delay: 0s; }\n    .sfhc-warmth.two { left: 50%; animation-delay: 1s; }\n    .sfhc-warmth.three { right: 23%; animation-delay: 2s; }\n\n    .sfhc-colour-title {\n      margin-top: 18px;\n      text-align: center;\n      font-size: 15px;\n      font-weight: 900;\n    }\n\n    .sfhc-colours {\n      display: flex;\n      justify-content: center;\n      gap: 11px;\n      margin-top: 13px;\n      flex-wrap: wrap;\n    }\n\n    .sfhc-colour {\n      width: 42px;\n      height: 42px;\n      border-radius: 999px;\n      border: 3px solid #fff;\n      box-shadow: 0 8px 18px rgba(44,44,44,0.15);\n      cursor: pointer;\n      transition: 0.2s ease;\n      appearance: none;\n      padding: 0;\n    }\n\n    .sfhc-colour.is-active {\n      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.24), 0 8px 18px rgba(44,44,44,0.14);\n      transform: scale(1.08);\n    }\n\n    .sfhc-black { background: #111111; }\n    .sfhc-sky { background: #a8dff2; }\n    .sfhc-navy { background: #17213f; }\n    .sfhc-pink { background: #f5a9bd; }\n\n    .sfhc-selected {\n      text-align: center;\n      margin-top: 12px;\n      color: var(--grey);\n      font-size: 14px;\n      font-weight: 800;\n    }\n\n    .sfhc-heading {\n      max-width: 760px;\n      margin: 58px auto 24px;\n      text-align: center;\n    }\n\n    .sfhc-heading h2 {\n      margin: 0 0 10px;\n      font-size: clamp(28px, 4vw, 42px);\n      line-height: 1.08;\n      font-weight: 950;\n    }\n\n    .sfhc-heading p {\n      margin: 0;\n      color: var(--grey);\n      font-size: 16px;\n      line-height: 1.65;\n    }\n\n    .sfhc-benefits {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 18px;\n    }\n\n    .sfhc-benefit {\n      position: relative;\n      overflow: hidden;\n      padding: 24px;\n      border-radius: 26px;\n      background: rgba(255,255,255,0.68);\n      border: 1px solid rgba(255,255,255,0.86);\n      box-shadow: 0 18px 42px rgba(112,67,54,0.11);\n      cursor: pointer;\n      min-height: 188px;\n    }\n\n    .sfhc-benefit:hover {\n      transform: translateY(-5px);\n      box-shadow: 0 25px 55px rgba(112,67,54,0.17);\n    }\n\n    .sfhc-benefit.is-tapped {\n      transform: translateY(-5px) scale(1.01);\n    }\n\n    .sfhc-icon {\n      width: 50px;\n      height: 50px;\n      border-radius: 17px;\n      background: var(--accent);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      font-size: 23px;\n      margin-bottom: 16px;\n    }\n\n    .sfhc-benefit h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      font-weight: 950;\n    }\n\n    .sfhc-benefit p {\n      margin: 0;\n      color: var(--grey);\n      font-size: 15px;\n      line-height: 1.6;\n    }\n\n    .sfhc-effect-layer {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n\n    .sfhc-particle {\n      position: absolute;\n      left: var(--x);\n      bottom: 14px;\n      font-size: var(--size);\n      opacity: 0;\n      animation: sfhcParticle 1.15s ease-out forwards;\n    }\n\n    .sfhc-particle.steam {\n      width: 14px;\n      height: 54px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.74);\n      filter: blur(7px);\n    }\n\n    .sfhc-split {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 18px;\n      margin-top: 28px;\n    }\n\n    .sfhc-panel {\n      padding: 30px;\n      border-radius: 30px;\n      background: rgba(255,255,255,0.66);\n      border: 1px solid rgba(255,255,255,0.86);\n      box-shadow: 0 22px 55px rgba(112,67,54,0.12);\n    }\n\n    .sfhc-panel h3 {\n      margin: 0 0 16px;\n      font-size: 24px;\n      font-weight: 950;\n    }\n\n    .sfhc-list {\n      display: grid;\n      gap: 13px;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .sfhc-list li {\n      display: flex;\n      gap: 10px;\n      align-items: flex-start;\n      color: var(--grey);\n      font-size: 15px;\n      line-height: 1.55;\n      font-weight: 650;\n    }\n\n    .sfhc-list strong {\n      color: var(--charcoal);\n    }\n\n    .sfhc-check {\n      flex: 0 0 auto;\n      width: 24px;\n      height: 24px;\n      border-radius: 999px;\n      background: var(--accent);\n      color: #fff;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 13px;\n      font-weight: 950;\n      margin-top: 1px;\n    }\n\n    .sfhc-story {\n      margin-top: 34px;\n      padding: 36px;\n      border-radius: 34px;\n      background: rgba(255,255,255,0.7);\n      border: 1px solid rgba(255,255,255,0.88);\n      box-shadow: 0 26px 68px rgba(112,67,54,0.14);\n      text-align: center;\n    }\n\n    .sfhc-story h2 {\n      margin: 0 0 12px;\n      font-size: clamp(27px, 4vw, 42px);\n      font-weight: 950;\n    }\n\n    .sfhc-story p {\n      max-width: 820px;\n      margin: 0 auto 22px;\n      color: var(--grey);\n      font-size: 17px;\n      line-height: 1.75;\n    }\n\n    @keyframes sfhcBreathe {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.025); }\n    }\n\n    @keyframes sfhcSteam {\n      0% { opacity: 0; transform: translateY(20px) scaleX(1); }\n      35% { opacity: 0.62; }\n      100% { opacity: 0; transform: translateY(-115px) scaleX(2.2); }\n    }\n\n    @keyframes sfhcParticle {\n      0% { opacity: 0; transform: translateY(20px) scale(0.8); }\n      18% { opacity: 1; }\n      100% { opacity: 0; transform: translateY(-105px) scale(1.35); }\n    }\n\n    @media (max-width: 990px) {\n      .sfhc-hero {\n        grid-template-columns: 1fr;\n      }\n\n      .sfhc-product-card {\n        justify-self: center;\n        max-width: 620px;\n      }\n\n      .sfhc-benefits {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 700px) {\n      .sfhc-section {\n        padding: 44px 14px;\n        border-radius: 24px;\n      }\n\n      .sfhc-title {\n        font-size: clamp(36px, 11vw, 48px);\n        letter-spacing: -1.3px;\n      }\n\n      .sfhc-text {\n        font-size: 15.5px;\n      }\n\n      .sfhc-actions {\n        align-items: stretch;\n      }\n\n      .sfhc-btn {\n        width: 100%;\n        padding: 15px 18px;\n      }\n\n      .sfhc-product-card {\n        padding: 18px;\n        border-radius: 28px;\n      }\n\n      .sfhc-visual {\n        min-height: 320px;\n        border-radius: 24px;\n      }\n\n      .sfhc-hoodie {\n        width: 210px;\n        height: 265px;\n      }\n\n      .sfhc-benefits,\n      .sfhc-split {\n        grid-template-columns: 1fr;\n      }\n\n      .sfhc-benefit {\n        min-height: auto;\n        padding: 20px;\n      }\n\n      .sfhc-panel,\n      .sfhc-story {\n        padding: 24px 18px;\n      }\n    }\n  \u003c\/style\u003e\n\n  \u003cdiv class=\"sfhc-wrap\"\u003e\n    \u003cdiv class=\"sfhc-hero\"\u003e\n      \u003cdiv\u003e\n        \u003cdiv class=\"sfhc-badge\"\u003e🇿🇦 Made for South African winters\u003c\/div\u003e\n\n        \u003ch1 class=\"sfhc-title\"\u003e\n          SoftHaven™\n          \u003cspan\u003eThe Cloud Hoodie\u003c\/span\u003e\n        \u003c\/h1\u003e\n\n        \u003cdiv class=\"sfhc-subtitle\"\u003eNever Feel Cold Again. ❄️\u003c\/div\u003e\n\n        \u003cp class=\"sfhc-text\"\u003e\n          South African winters hit different. The Cloud Hoodie wraps you in oversized warmth,\n          skin-soft comfort and effortless winter style — so you can stay cosy without wearing five layers.\n        \u003c\/p\u003e\n\n        \u003cdiv class=\"sfhc-actions\"\u003e\n          \u003cbutton type=\"button\" class=\"sfhc-btn\" data-sfhc-scroll\u003e\n            Choose Your Colour \u0026amp; Stay Warm\n          \u003c\/button\u003e\n\n          \u003cdiv class=\"sfhc-note\"\u003e\n            One size fits most · Unisex · Black, Sky Blue, Navy \u0026amp; Pink\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sfhc-trust-row\"\u003e\n          \u003cspan\u003e☁️ Cloud-soft feel\u003c\/span\u003e\n          \u003cspan\u003e🔥 Winter warmth\u003c\/span\u003e\n          \u003cspan\u003e🤲 Deep front pocket\u003c\/span\u003e\n          \u003cspan\u003e🎁 Gift-ready comfort\u003c\/span\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-product-card\"\u003e\n        \u003cdiv class=\"sfhc-visual\"\u003e\n          \u003cspan class=\"sfhc-warmth one\"\u003e\u003c\/span\u003e\n          \u003cspan class=\"sfhc-warmth two\"\u003e\u003c\/span\u003e\n          \u003cspan class=\"sfhc-warmth three\"\u003e\u003c\/span\u003e\n          \u003cdiv class=\"sfhc-hoodie\"\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sfhc-colour-title\"\u003eTap a colour to preview the vibe\u003c\/div\u003e\n\n        \u003cdiv class=\"sfhc-colours\"\u003e\n          \u003cbutton type=\"button\" class=\"sfhc-colour sfhc-black\" data-colour=\"black\" aria-label=\"Black\"\u003e\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"sfhc-colour sfhc-sky\" data-colour=\"sky\" aria-label=\"Sky Blue\"\u003e\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"sfhc-colour sfhc-navy\" data-colour=\"navy\" aria-label=\"Navy\"\u003e\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"sfhc-colour sfhc-pink\" data-colour=\"pink\" aria-label=\"Pink\"\u003e\u003c\/button\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sfhc-selected\" data-selected-text\u003e\n          Selected vibe: SoftHaven Terracotta\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"sfhc-heading\"\u003e\n      \u003ch2\u003eTap a Benefit to Feel the Effect\u003c\/h2\u003e\n      \u003cp\u003eEach benefit is interactive, so customers can experience the comfort story.\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"sfhc-benefits\"\u003e\n      \u003cdiv class=\"sfhc-benefit\" data-effect=\"steam\"\u003e\n        \u003cdiv class=\"sfhc-effect-layer\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sfhc-icon\"\u003e🌡️\u003c\/div\u003e\n        \u003ch3\u003eInstant Full-Body Warmth\u003c\/h3\u003e\n        \u003cp\u003eTap here and feel the warmth. Slip it on and feel wrapped from your shoulders down.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-benefit\" data-effect=\"cloud\"\u003e\n        \u003cdiv class=\"sfhc-effect-layer\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sfhc-icon\"\u003e🧸\u003c\/div\u003e\n        \u003ch3\u003eSkin-Soft Comfort\u003c\/h3\u003e\n        \u003cp\u003eSoft, cosy and gentle enough to make you want to live in it all winter.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-benefit\" data-effect=\"zzz\"\u003e\n        \u003cdiv class=\"sfhc-effect-layer\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sfhc-icon\"\u003e😴\u003c\/div\u003e\n        \u003ch3\u003eDeep Relaxation\u003c\/h3\u003e\n        \u003cp\u003eThe oversized warmth helps you unwind, relax and feel calm after a long day.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-benefit\" data-effect=\"move\"\u003e\n        \u003cdiv class=\"sfhc-effect-layer\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sfhc-icon\"\u003e🛋️\u003c\/div\u003e\n        \u003ch3\u003eMove Freely\u003c\/h3\u003e\n        \u003cp\u003eWalk, cook, study, scroll and lounge without dragging a blanket around.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-benefit\" data-effect=\"hands\"\u003e\n        \u003cdiv class=\"sfhc-effect-layer\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sfhc-icon\"\u003e🤲\u003c\/div\u003e\n        \u003ch3\u003eWarm Hands Always\u003c\/h3\u003e\n        \u003cp\u003eThe deep front pocket keeps your hands warm and your essentials close.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-benefit\" data-effect=\"save\"\u003e\n        \u003cdiv class=\"sfhc-effect-layer\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"sfhc-icon\"\u003e💸\u003c\/div\u003e\n        \u003ch3\u003eUse Less Heater Time\u003c\/h3\u003e\n        \u003cp\u003eStay warm without needing to turn up the heater every time the cold hits.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"sfhc-split\"\u003e\n      \u003cdiv class=\"sfhc-panel\"\u003e\n        \u003ch3\u003eWhy You’ll Love It\u003c\/h3\u003e\n        \u003cul class=\"sfhc-list\"\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eOversized comfort:\u003c\/strong\u003e made for lounging, relaxing and staying warm without feeling restricted.\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eOne-piece warmth:\u003c\/strong\u003e hoodie, blanket and pocket comfort combined into one cosy essential.\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eEveryday use:\u003c\/strong\u003e perfect for home, study sessions, movie nights and cold Sunday mornings.\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003ePremium look:\u003c\/strong\u003e soft colours, clean fit and a cosy aesthetic that still looks cute.\u003c\/span\u003e\n\u003c\/li\u003e\n        \u003c\/ul\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sfhc-panel\"\u003e\n        \u003ch3\u003ePerfect For\u003c\/h3\u003e\n        \u003cul class=\"sfhc-list\"\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eCold Jozi mornings\u003c\/strong\u003e when getting out of bed feels impossible.\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eStudents\u003c\/strong\u003e who need warmth while studying late.\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eMovie nights\u003c\/strong\u003e when you want comfort without dragging a blanket around.\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003cli\u003e\n\u003cspan class=\"sfhc-check\"\u003e✓\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003eGifting\u003c\/strong\u003e because everyone loves something warm, soft and useful.\u003c\/span\u003e\n\u003c\/li\u003e\n        \u003c\/ul\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"sfhc-story\"\u003e\n      \u003ch2\u003eYour Winter, Transformed ☁️\u003c\/h2\u003e\n      \u003cp\u003e\n        Picture this: it is a cold Sunday morning in Jozi. You reach for The Cloud Hoodie,\n        wrap yourself up, make a warm drink and settle in. No shivering. No uncomfortable layers.\n        Just pure, effortless comfort.\n      \u003c\/p\u003e\n\n      \u003cbutton type=\"button\" class=\"sfhc-btn\" data-sfhc-scroll\u003e\n        Get Yours Before The Cold Hits\n      \u003c\/button\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cscript\u003e\n    (function () {\n      var section = document.getElementById(\"sfhc-cloud-hoodie\");\n      if (!section) return;\n\n      var selectedText = section.querySelector(\"[data-selected-text]\");\n\n      var colourData = {\n        black: {\n          name: \"Black\",\n          accent: \"#2c2c2c\",\n          accentDark: \"#111111\",\n          accentRgb: \"44, 44, 44\",\n          bgOne: \"#f7f2ef\",\n          bgTwo: \"#d8d1cd\",\n          hoodieOne: \"#444444\",\n          hoodieTwo: \"#111111\"\n        },\n        sky: {\n          name: \"Sky Blue\",\n          accent: \"#6eb8d4\",\n          accentDark: \"#4b9fbd\",\n          accentRgb: \"110, 184, 212\",\n          bgOne: \"#f7fbff\",\n          bgTwo: \"#bdeeff\",\n          hoodieOne: \"#d6f4ff\",\n          hoodieTwo: \"#8ed8ff\"\n        },\n        navy: {\n          name: \"Navy\",\n          accent: \"#17213f\",\n          accentDark: \"#0d1428\",\n          accentRgb: \"23, 33, 63\",\n          bgOne: \"#f3f5ff\",\n          bgTwo: \"#c8d3ef\",\n          hoodieOne: \"#2c3b69\",\n          hoodieTwo: \"#111a35\"\n        },\n        pink: {\n          name: \"Pink\",\n          accent: \"#d97896\",\n          accentDark: \"#be5f7d\",\n          accentRgb: \"217, 120, 150\",\n          bgOne: \"#fff3f6\",\n          bgTwo: \"#f5b5c7\",\n          hoodieOne: \"#ffd3df\",\n          hoodieTwo: \"#f5a9bd\"\n        }\n      };\n\n      function setColour(colour) {\n        var data = colourData[colour];\n        if (!data) return;\n\n        section.style.setProperty(\"--accent\", data.accent);\n        section.style.setProperty(\"--accent-dark\", data.accentDark);\n        section.style.setProperty(\"--accent-rgb\", data.accentRgb);\n        section.style.setProperty(\"--bg-one\", data.bgOne);\n        section.style.setProperty(\"--bg-two\", data.bgTwo);\n        section.style.setProperty(\"--hoodie-one\", data.hoodieOne);\n        section.style.setProperty(\"--hoodie-two\", data.hoodieTwo);\n\n        section.querySelectorAll(\"[data-colour]\").forEach(function (btn) {\n          btn.classList.toggle(\"is-active\", btn.getAttribute(\"data-colour\") === colour);\n        });\n\n        if (selectedText) {\n          selectedText.textContent = \"Selected vibe: \" + data.name;\n        }\n      }\n\n      section.querySelectorAll(\"[data-colour]\").forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          setColour(button.getAttribute(\"data-colour\"));\n        });\n      });\n\n      function createEffect(card, type) {\n        var layer = card.querySelector(\".sfhc-effect-layer\");\n        if (!layer) return;\n\n        layer.innerHTML = \"\";\n        card.classList.add(\"is-tapped\");\n\n        setTimeout(function () {\n          card.classList.remove(\"is-tapped\");\n        }, 450);\n\n        var symbols = {\n          steam: [\"\", \"\", \"\", \"\", \"\"],\n          cloud: [\"☁️\", \"♡\", \"☁️\", \"♡\", \"☁️\"],\n          zzz: [\"zZ\", \"Zz\", \"zZ\", \"✨\", \"Zz\"],\n          move: [\"↗\", \"↖\", \"↗\", \"✨\", \"↖\"],\n          hands: [\"🔥\", \"🤲\", \"🔥\", \"✨\", \"🔥\"],\n          save: [\"R\", \"💸\", \"R\", \"✨\", \"💸\"]\n        };\n\n        var selected = symbols[type] || [\"✨\", \"✨\", \"✨\"];\n\n        selected.forEach(function (symbol, index) {\n          var particle = document.createElement(\"span\");\n          particle.className = \"sfhc-particle\";\n\n          if (type === \"steam\") {\n            particle.classList.add(\"steam\");\n          } else {\n            particle.textContent = symbol;\n          }\n\n          particle.style.setProperty(\"--x\", 18 + index * 15 + \"%\");\n          particle.style.setProperty(\"--size\", 18 + index * 2 + \"px\");\n          particle.style.animationDelay = index * 0.08 + \"s\";\n\n          layer.appendChild(particle);\n        });\n\n        setTimeout(function () {\n          layer.innerHTML = \"\";\n        }, 1500);\n      }\n\n      section.querySelectorAll(\".sfhc-benefit\").forEach(function (card) {\n        card.addEventListener(\"click\", function () {\n          createEffect(card, card.getAttribute(\"data-effect\"));\n        });\n      });\n\n      section.querySelectorAll(\"[data-sfhc-scroll]\").forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          var productForm =\n            document.querySelector(\".product-form\") ||\n            document.querySelector('form[action*=\"\/cart\/add\"]') ||\n            document.querySelector('[id*=\"ProductSubmitButton\"]');\n\n          if (productForm) {\n            productForm.scrollIntoView({\n              behavior: \"smooth\",\n              block: \"center\"\n            });\n          }\n        });\n      });\n\n      setColour(\"pink\");\n    })();\n  \u003c\/script\u003e\n\u003c\/section\u003e","brand":"SoftHaven","offers":[{"title":"Black","offer_id":46777766412425,"sku":"SSH-HOOD-BLK","price":799.0,"currency_code":"ZAR","in_stock":true},{"title":"Blue","offer_id":46777766445193,"sku":"SSH-HOOD-BLU","price":799.0,"currency_code":"ZAR","in_stock":true},{"title":"Navy","offer_id":46777766477961,"sku":"SSH-HOOD-NVY","price":799.0,"currency_code":"ZAR","in_stock":true},{"title":"Pink","offer_id":46777766510729,"sku":"SSH-HOOD-PNK","price":799.0,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0765\/3539\/8537\/files\/hoodie-blanket-black-sa-lifestyle.png?v=1779279656","url":"https:\/\/www.softhaven.co.za\/products\/softhaven%e2%84%a2-the-cloud-hoodie","provider":"SoftHaven","version":"1.0","type":"link"}