{"title":"Home page","description":null,"products":[{"product_id":"chilllab™-neckbreeze","title":"ChillLab™ AIRLO","description":"\u003cbody\u003e\n\n\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003ctitle\u003eChillLab™ AIRLO\u003c\/title\u003e\n\u003cstyle\u003ehtml,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:#fff;}\u003c\/style\u003e\n\n\n\u003cstyle\u003e\n  \/* ChillLab AIRLO — isolated Shopify Custom Liquid section *\/\n  #clx-airlo {\n    --clx-ink: #073947;\n    --clx-muted: #55747c;\n    --clx-aqua: #16bfd4;\n    --clx-mint: #62dda8;\n    --clx-glass: rgba(255,255,255,.44);\n    --clx-line: rgba(255,255,255,.82);\n\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    isolation: isolate;\n    color: var(--clx-ink);\n    background:\n      radial-gradient(circle at 9% 5%, rgba(255,240,160,.82), transparent 18%),\n      radial-gradient(circle at 91% 10%, rgba(255,181,125,.34), transparent 24%),\n      linear-gradient(180deg,#72d7ef 0%,#acebf5 30%,#e0f8f4 59%,#fff1c2 81%,#ffd39a 100%);\n    padding: clamp(54px,7vw,88px) 16px clamp(64px,8vw,96px);\n  }\n\n  #clx-airlo,\n  #clx-airlo * {\n    box-sizing: border-box;\n  }\n\n  #clx-airlo button,\n  #clx-airlo a {\n    font: inherit;\n  }\n\n  .clx-wrap {\n    position: relative;\n    z-index: 3;\n    width: min(1120px, 100%);\n    max-width: 100%;\n    margin: 0 auto;\n  }\n\n  \/* SUMMER SKY *\/\n  .clx-sun {\n    position: absolute;\n    z-index: 0;\n    top: 64px;\n    right: max(22px, 7vw);\n    width: 112px;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background: #ffe58c;\n    box-shadow:\n      0 0 60px rgba(255,224,112,.56),\n      0 0 125px rgba(255,184,82,.22);\n    animation: clxSun 5s ease-in-out infinite;\n    pointer-events: none;\n  }\n\n  @keyframes clxSun {\n    50% { transform: scale(1.055); }\n  }\n\n  .clx-cloud {\n    --clx-scale: 1;\n    position: absolute;\n    z-index: 1;\n    left: -230px;\n    width: 165px;\n    height: 48px;\n    border-radius: 999px;\n    background: rgba(255,255,255,.67);\n    opacity: .28;\n    pointer-events: none;\n    filter: blur(.15px);\n    animation: clxCloud 33s linear infinite;\n    will-change: transform;\n  }\n\n  .clx-cloud::before,\n  .clx-cloud::after {\n    content: \"\";\n    position: absolute;\n    border-radius: 50%;\n    background: inherit;\n  }\n\n  .clx-cloud::before {\n    width: 76px;\n    height: 76px;\n    left: 29px;\n    top: -32px;\n  }\n\n  .clx-cloud::after {\n    width: 94px;\n    height: 94px;\n    right: 16px;\n    top: -44px;\n  }\n\n  .clx-c1 { top: 120px; --clx-scale:.90; animation-delay:-4s; }\n  .clx-c2 { top: 330px; --clx-scale:.68; animation-duration:40s; animation-delay:-21s; }\n  .clx-c3 { top: 650px; --clx-scale:1.05; animation-duration:36s; animation-delay:-11s; }\n  .clx-c4 { top: 990px; --clx-scale:.78; animation-duration:43s; animation-delay:-29s; }\n  .clx-c5 { top: 1320px; --clx-scale:.93; animation-duration:39s; animation-delay:-15s; }\n  .clx-c6 { top: 1660px; --clx-scale:.66; animation-duration:46s; animation-delay:-34s; }\n  .clx-c7 { top: 1980px; --clx-scale:1.03; animation-duration:41s; animation-delay:-25s; }\n\n  @keyframes clxCloud {\n    0% {\n      transform: translate3d(0,0,0) scale(var(--clx-scale));\n      opacity: .10;\n    }\n    8%, 90% { opacity: .32; }\n    100% {\n      transform: translate3d(calc(100vw + 520px),0,0) scale(var(--clx-scale));\n      opacity: .10;\n    }\n  }\n\n  \/* HERO *\/\n  .clx-hero {\n    max-width: 840px;\n    margin: 0 auto;\n    text-align: center;\n  }\n\n  .clx-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 20px;\n    padding: 9px 15px;\n    border: 1px solid var(--clx-line);\n    border-radius: 999px;\n    background: rgba(255,255,255,.38);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    color: #087488;\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: .11em;\n    text-transform: uppercase;\n    box-shadow: 0 9px 28px rgba(12,109,129,.08);\n  }\n\n  .clx-badge-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #13c4d8;\n    box-shadow: 0 0 12px #13c4d8;\n    animation: clxPulse 1.7s ease-in-out infinite;\n  }\n\n  @keyframes clxPulse {\n    50% { transform: scale(.68); opacity: .46; }\n  }\n\n  .clx-title {\n    margin: 0;\n    color: var(--clx-ink);\n    font-size: clamp(46px,7vw,82px);\n    line-height: .96;\n    letter-spacing: -.055em;\n    font-weight: 900;\n    word-break: normal;\n    overflow-wrap: normal;\n    max-width: 100%;\n  }\n\n  .clx-brandline,\n  .clx-productline {\n    display: block;\n    max-width: 100%;\n  }\n\n  .clx-gradient {\n    background: linear-gradient(90deg,#007f9d,#12bbd0 48%,#0ca77c);\n    -webkit-background-clip: text;\n    background-clip: text;\n    color: transparent;\n  }\n\n  .clx-tagline {\n    margin: 22px 0 12px;\n    font-size: clamp(20px,2.6vw,28px);\n    line-height: 1.24;\n    font-weight: 800;\n  }\n\n  .clx-copy {\n    max-width: 680px;\n    margin: 0 auto;\n    color: var(--clx-muted);\n    font-size: 16px;\n    line-height: 1.75;\n  }\n\n  \/* INTERACTIVE AIRFLOW *\/\n  .clx-demo {\n    max-width: 720px;\n    margin: 38px auto 0;\n    padding: 27px 22px 22px;\n    border: 1px solid var(--clx-line);\n    border-radius: 28px;\n    background: rgba(255,255,255,.39);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    box-shadow:\n      0 24px 60px rgba(18,106,125,.11),\n      inset 0 1px 0 rgba(255,255,255,.88);\n  }\n\n  .clx-demo-label {\n    margin-bottom: 15px;\n    color: #08798d;\n    font-size: 12px;\n    font-weight: 900;\n    letter-spacing: .12em;\n    text-transform: uppercase;\n  }\n\n  .clx-airflow {\n    min-height: 104px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 20px;\n  }\n\n  .clx-fan-shell {\n    flex: 0 0 auto;\n    width: 88px;\n    height: 88px;\n    display: grid;\n    place-items: center;\n    border-radius: 25px;\n    border: 1px solid rgba(255,255,255,.9);\n    background: rgba(255,255,255,.58);\n    box-shadow: 0 11px 27px rgba(20,104,123,.10);\n  }\n\n  .clx-fan {\n    display: inline-block;\n    font-size: 46px;\n    line-height: 1;\n    animation: clxSpin .85s linear infinite;\n  }\n\n  @keyframes clxSpin {\n    to { transform: rotate(360deg); }\n  }\n\n  .clx-wind {\n    width: min(180px, 38vw);\n    display: grid;\n    gap: 9px;\n  }\n\n  .clx-wind span {\n    display: block;\n    height: 4px;\n    border-radius: 999px;\n    transform-origin: left;\n    background: linear-gradient(90deg,rgba(27,199,220,.08),#20c7dc,transparent);\n    animation: clxWind 1s ease-in-out infinite;\n  }\n\n  .clx-wind span:nth-child(2) { width: 74%; animation-delay:-.2s; }\n  .clx-wind span:nth-child(3) { width: 90%; animation-delay:-.4s; }\n  .clx-wind span:nth-child(4) { width: 61%; animation-delay:-.6s; }\n\n  @keyframes clxWind {\n    0%,100% { opacity:.24; transform: scaleX(.55) translateX(0); }\n    50% { opacity:1; transform: scaleX(1) translateX(12px); }\n  }\n\n  .clx-speeds {\n    margin-top: 18px;\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .clx-speed {\n    appearance: none;\n    border: 1px solid rgba(255,255,255,.88);\n    border-radius: 999px;\n    background: rgba(255,255,255,.44);\n    color: #0b5361;\n    padding: 10px 16px;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 800;\n    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;\n  }\n\n  .clx-speed:hover,\n  .clx-speed.is-active {\n    background: rgba(255,255,255,.88);\n    color: #008aa0;\n    transform: translateY(-2px);\n    box-shadow: 0 8px 22px rgba(13,151,173,.14);\n  }\n\n  \/* BENEFITS *\/\n  .clx-heading {\n    max-width: 720px;\n    margin: clamp(62px,8vw,92px) auto 32px;\n    text-align: center;\n  }\n\n  .clx-heading h2 {\n    margin: 0 0 12px;\n    color: var(--clx-ink);\n    font-size: clamp(32px,4.5vw,51px);\n    line-height: 1.04;\n    letter-spacing: -.04em;\n    font-weight: 900;\n    word-break: normal;\n    overflow-wrap: normal;\n  }\n\n  .clx-heading p {\n    margin: 0;\n    color: var(--clx-muted);\n    font-size: 15px;\n    line-height: 1.65;\n  }\n\n  .clx-grid {\n    display: grid;\n    grid-template-columns: repeat(3,minmax(0,1fr));\n    gap: 16px;\n  }\n\n  .clx-card {\n    min-width: 0;\n    min-height: 205px;\n    padding: 24px;\n    border: 1px solid var(--clx-line);\n    border-radius: 24px;\n    background: rgba(255,255,255,.42);\n    backdrop-filter: blur(17px);\n    -webkit-backdrop-filter: blur(17px);\n    box-shadow:\n      0 11px 32px rgba(15,97,116,.075),\n      inset 0 1px 0 rgba(255,255,255,.75);\n    transition: transform .26s ease, box-shadow .26s ease;\n  }\n\n  .clx-card:hover {\n    transform: translateY(-6px);\n    box-shadow:\n      0 20px 45px rgba(15,97,116,.13),\n      inset 0 1px 0 rgba(255,255,255,.82);\n  }\n\n  .clx-icon {\n    width: 52px;\n    height: 52px;\n    display: grid;\n    place-items: center;\n    margin-bottom: 17px;\n    border: 1px solid rgba(255,255,255,.9);\n    border-radius: 17px;\n    background: rgba(255,255,255,.65);\n    font-size: 25px;\n  }\n\n  .clx-card h3 {\n    margin: 0 0 8px;\n    color: var(--clx-ink);\n    font-size: 18px;\n    line-height: 1.22;\n    font-weight: 800;\n    word-break: normal;\n  }\n\n  .clx-card p {\n    margin: 0;\n    color: #527079;\n    font-size: 14px;\n    line-height: 1.62;\n  }\n\n  .clx-battery-panel {\n    margin-top: 58px;\n    padding: 30px;\n    display: grid;\n    grid-template-columns: minmax(0,1fr) auto;\n    align-items: center;\n    gap: 28px;\n    border: 1px solid var(--clx-line);\n    border-radius: 27px;\n    background: rgba(255,255,255,.44);\n    backdrop-filter: blur(17px);\n    -webkit-backdrop-filter: blur(17px);\n    box-shadow: 0 17px 45px rgba(15,97,116,.08);\n  }\n\n  .clx-battery-panel h3 {\n    margin: 0 0 8px;\n    color: var(--clx-ink);\n    font-size: 25px;\n    font-weight: 900;\n  }\n\n  .clx-battery-panel p {\n    margin: 0;\n    color: #527079;\n    font-size: 14px;\n    line-height: 1.65;\n  }\n\n  .clx-battery-demo {\n    min-width: 0;\n    text-align: center;\n  }\n\n  .clx-battery {\n    position: relative;\n    width: 184px;\n    height: 70px;\n    padding: 6px;\n    border: 3px solid rgba(0,123,145,.58);\n    border-radius: 15px;\n    background: rgba(255,255,255,.25);\n    overflow: visible;\n    transition: transform .25s ease;\n  }\n\n  .clx-battery:hover {\n    transform: translateY(-2px);\n  }\n\n  .clx-battery::after {\n    content: \"\";\n    position: absolute;\n    right: -10px;\n    top: 18px;\n    width: 7px;\n    height: 21px;\n    border-radius: 0 5px 5px 0;\n    background: rgba(0,123,145,.54);\n  }\n\n  .clx-battery-fill {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 7px;\n    background: linear-gradient(90deg,#18c8dd,#62dda8);\n    transition: width .45s cubic-bezier(.2,.8,.2,1), background .35s ease;\n  }\n\n  .clx-battery-value {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-items: center;\n    z-index: 2;\n    color: #06414d;\n    font-size: 18px;\n    font-weight: 900;\n    pointer-events: none;\n  }\n\n  .clx-battery-status {\n    margin-top: 10px;\n    max-width: 220px;\n    color: #527079;\n    font-size: 12px;\n    line-height: 1.4;\n  }\n\n  .clx-battery-controls {\n    margin-top: 16px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 7px;\n  }\n\n  .clx-battery-btn {\n    appearance: none;\n    min-height: 40px;\n    padding: 8px 12px;\n    border: 1px solid rgba(255,255,255,.88);\n    border-radius: 999px;\n    background: rgba(255,255,255,.43);\n    color: #0b5361;\n    font-size: 12px;\n    font-weight: 800;\n    cursor: pointer;\n    transition: background .2s ease, color .2s ease, transform .2s ease;\n  }\n\n  .clx-battery-btn:hover,\n  .clx-battery-btn.is-active {\n    background: rgba(255,255,255,.9);\n    color: #00899f;\n    transform: translateY(-1px);\n  }\n\n  .clx-battery-fill::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    transform: translateX(-130%);\n    background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);\n    animation: clxBattery 2.5s linear infinite;\n  }\n\n  @keyframes clxBattery {\n    to { transform: translateX(130%); }\n  }\n\n  .clx-tags {\n    margin-top: 23px;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 9px;\n  }\n\n  .clx-tag {\n    padding: 10px 14px;\n    border: 1px solid var(--clx-line);\n    border-radius: 999px;\n    background: rgba(255,255,255,.45);\n    color: #245c66;\n    font-size: 13px;\n    line-height: 1.2;\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n  }\n\n  .clx-final {\n    margin-top: clamp(62px,8vw,92px);\n    padding: clamp(38px,6vw,58px) 22px;\n    border: 1px solid var(--clx-line);\n    border-radius: 32px;\n    text-align: center;\n    background:\n      radial-gradient(circle at 50% 100%,rgba(49,211,221,.16),transparent 48%),\n      rgba(255,255,255,.44);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    box-shadow: 0 22px 60px rgba(18,104,124,.11);\n  }\n\n  .clx-final h2 {\n    max-width: 710px;\n    margin: 0 auto 14px;\n    color: var(--clx-ink);\n    font-size: clamp(35px,5vw,57px);\n    line-height: 1.03;\n    letter-spacing: -.045em;\n    font-weight: 900;\n  }\n\n  .clx-final p {\n    max-width: 580px;\n    margin: 0 auto 24px;\n    color: var(--clx-muted);\n    font-size: 15px;\n    line-height: 1.68;\n  }\n\n  .clx-cta {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 50px;\n    padding: 13px 24px;\n    border: 0;\n    border-radius: 999px;\n    text-decoration: none !important;\n    background: linear-gradient(90deg,#19cce1,#69e2aa);\n    color: #003c44 !important;\n    font-size: 14px;\n    font-weight: 900;\n    box-shadow: 0 13px 36px rgba(24,190,211,.19);\n    transition: transform .24s ease, box-shadow .24s ease;\n  }\n\n  .clx-cta:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 18px 46px rgba(24,190,211,.26);\n  }\n\n  .clx-small {\n    margin-top: 12px;\n    color: #628088;\n    font-size: 11px;\n  }\n\n  .clx-reveal {\n    opacity: 0;\n    transform: translateY(22px);\n    transition: opacity .6s ease, transform .6s ease;\n  }\n\n  .clx-reveal.is-visible {\n    opacity: 1;\n    transform: none;\n  }\n\n  \/* TABLET *\/\n  @media screen and (max-width: 900px) {\n    .clx-grid {\n      grid-template-columns: repeat(2,minmax(0,1fr));\n    }\n\n    .clx-battery-panel {\n      grid-template-columns: 1fr;\n      text-align: center;\n    }\n\n    .clx-battery {\n      margin: 0 auto;\n    }\n  }\n\n  \/* PHONE *\/\n  @media screen and (max-width: 749px) {\n    #clx-airlo {\n      padding: 48px 12px 62px;\n    }\n\n    .clx-sun {\n      top: 31px;\n      right: -15px;\n      width: 72px;\n      opacity: .82;\n    }\n\n    .clx-cloud {\n      width: 118px;\n      height: 35px;\n      left: -155px;\n      opacity: .22;\n    }\n\n    .clx-cloud::before {\n      width: 54px;\n      height: 54px;\n      left: 22px;\n      top: -22px;\n    }\n\n    .clx-cloud::after {\n      width: 66px;\n      height: 66px;\n      right: 12px;\n      top: -30px;\n    }\n\n    .clx-title {\n      font-size: clamp(38px,11.6vw,52px);\n      line-height: 1.02;\n      letter-spacing: -.045em;\n    }\n\n    .clx-brandline {\n      font-size: .98em;\n    }\n\n    .clx-productline {\n      margin-top: 2px;\n      font-size: .89em;\n    }\n\n    .clx-tagline {\n      margin-top: 17px;\n      font-size: 19px;\n    }\n\n    .clx-copy {\n      font-size: 14px;\n      line-height: 1.7;\n    }\n\n    .clx-demo {\n      margin-top: 27px;\n      padding: 19px 12px 16px;\n      border-radius: 22px;\n    }\n\n    .clx-airflow {\n      min-height: 90px;\n      gap: 10px;\n    }\n\n    .clx-fan-shell {\n      width: 72px;\n      height: 72px;\n      border-radius: 20px;\n    }\n\n    .clx-fan {\n      font-size: 38px;\n    }\n\n    .clx-wind {\n      width: 100px;\n      gap: 7px;\n    }\n\n    .clx-wind span {\n      height: 3px;\n    }\n\n    .clx-speeds {\n      gap: 7px;\n    }\n\n    .clx-speed {\n      flex: 1 1 calc(33.333% - 7px);\n      min-width: 0;\n      padding: 9px 7px;\n      font-size: 11px;\n      white-space: nowrap;\n    }\n\n    .clx-heading {\n      margin-top: 58px;\n      margin-bottom: 24px;\n    }\n\n    .clx-heading h2 {\n      font-size: 33px;\n    }\n\n    .clx-heading p {\n      font-size: 13px;\n    }\n\n    .clx-grid {\n      grid-template-columns: 1fr;\n      gap: 12px;\n    }\n\n    .clx-card {\n      min-height: 0;\n      padding: 20px;\n      border-radius: 21px;\n    }\n\n    .clx-icon {\n      width: 47px;\n      height: 47px;\n      margin-bottom: 14px;\n      border-radius: 15px;\n      font-size: 23px;\n    }\n\n    .clx-card h3 {\n      font-size: 17px;\n    }\n\n    .clx-card p {\n      font-size: 13px;\n    }\n\n    .clx-battery-panel {\n      margin-top: 44px;\n      padding: 22px 16px;\n      gap: 20px;\n      border-radius: 22px;\n    }\n\n    .clx-battery-panel h3 {\n      font-size: 22px;\n    }\n\n    .clx-battery-panel p {\n      font-size: 13px;\n    }\n\n    .clx-battery {\n      width: min(178px, 72vw);\n      height: 64px;\n      margin: 0 auto;\n    }\n\n    .clx-battery-controls {\n      justify-content: center;\n    }\n\n    .clx-battery-btn {\n      flex: 1 1 calc(25% - 7px);\n      min-width: 56px;\n      padding-inline: 8px;\n    }\n\n    .clx-battery-status {\n      margin-inline: auto;\n    }\n\n    .clx-tags {\n      gap: 7px;\n    }\n\n    .clx-tag {\n      padding: 9px 11px;\n      font-size: 11px;\n    }\n\n    .clx-final {\n      margin-top: 58px;\n      padding: 37px 16px;\n      border-radius: 24px;\n    }\n\n    .clx-final h2 {\n      font-size: 35px;\n    }\n\n    .clx-final p {\n      font-size: 13px;\n    }\n\n    .clx-cta {\n      width: min(100%, 310px);\n      min-height: 48px;\n    }\n\n    .clx-card:hover,\n    .clx-cta:hover,\n    .clx-speed:hover {\n      transform: none;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #clx-airlo *,\n    #clx-airlo *::before,\n    #clx-airlo *::after {\n      animation-duration: .01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: .01ms !important;\n    }\n  }\n\n  \/* Shopify-safe containment *\/\n  #clx-airlo {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    min-width: 0;\n    margin: 0;\n    overflow-x: clip;\n    contain: layout paint;\n  }\n\n  #clx-airlo .clx-wrap,\n  #clx-airlo .clx-hero,\n  #clx-airlo .clx-demo,\n  #clx-airlo .clx-grid,\n  #clx-airlo .clx-card,\n  #clx-airlo .clx-battery-panel,\n  #clx-airlo .clx-final {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  #clx-airlo img,\n  #clx-airlo svg,\n  #clx-airlo video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  #clx-airlo .clx-title,\n  #clx-airlo .clx-tagline,\n  #clx-airlo .clx-copy,\n  #clx-airlo h2,\n  #clx-airlo h3,\n  #clx-airlo p {\n    overflow-wrap: break-word;\n  }\n\n  @media screen and (max-width: 749px) {\n    #clx-airlo {\n      width: 100%;\n      max-width: 100%;\n      padding-left: 14px;\n      padding-right: 14px;\n    }\n\n    #clx-airlo .clx-wrap {\n      width: 100%;\n      max-width: 100%;\n    }\n\n    #clx-airlo .clx-title {\n      font-size: clamp(36px, 11vw, 48px);\n      line-height: 1.02;\n    }\n\n    #clx-airlo .clx-productline {\n      font-size: 1em;\n    }\n\n    #clx-airlo .clx-grid {\n      grid-template-columns: minmax(0, 1fr);\n    }\n\n    #clx-airlo .clx-battery-panel {\n      grid-template-columns: minmax(0, 1fr);\n      width: 100%;\n    }\n\n    #clx-airlo .clx-battery-controls {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      width: 100%;\n    }\n\n    #clx-airlo .clx-battery-btn {\n      width: 100%;\n      min-width: 0;\n    }\n\n    #clx-airlo .clx-battery {\n      width: min(178px, 70vw);\n      max-width: 100%;\n    }\n  }\n\n\u003c\/style\u003e\n\n\u003csection id=\"clx-airlo\" aria-label=\"ChillLab AIRLO\"\u003e\n  \u003cdiv class=\"clx-sun\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n\n  \u003cdiv class=\"clx-cloud clx-c1\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"clx-cloud clx-c2\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"clx-cloud clx-c3\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"clx-cloud clx-c4\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"clx-cloud clx-c5\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"clx-cloud clx-c6\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n  \u003cdiv class=\"clx-cloud clx-c7\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n\n  \u003cdiv class=\"clx-wrap\"\u003e\n\n    \u003cdiv class=\"clx-hero clx-reveal\"\u003e\n      \u003cdiv class=\"clx-badge\"\u003e\n        \u003cspan class=\"clx-badge-dot\"\u003e\u003c\/span\u003e\n        Summer Essential\n      \u003c\/div\u003e\n\n      \u003ch2 class=\"clx-title\"\u003e\n        \u003cspan class=\"clx-brandline\"\u003eChillLab™\u003c\/span\u003e\n        \u003cspan class=\"clx-productline clx-gradient\"\u003eAIRLO\u003c\/span\u003e\n      \u003c\/h2\u003e\n\n      \u003cdiv class=\"clx-tagline\"\u003e\n        Uncomfortably hot outside?\u003cbr\u003e\n        Not your problem anymore. 😎🌬️\n      \u003c\/div\u003e\n\n      \u003cp class=\"clx-copy\"\u003e\n        Introducing ChillLab™ AIRLO — the wearable breeze that goes wherever you go.\n        Slip it on, feel the cool air kick in, and carry on like the unbothered legend you are.\n      \u003c\/p\u003e\n\n      \u003cdiv class=\"clx-demo\"\u003e\n        \u003cdiv class=\"clx-demo-label\"\u003eTry the airflow\u003c\/div\u003e\n\n        \u003cdiv class=\"clx-airflow\"\u003e\n          \u003cdiv class=\"clx-fan-shell\"\u003e\n            \u003cspan class=\"clx-fan\" aria-hidden=\"true\"\u003e🌀\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"clx-wind\" aria-hidden=\"true\"\u003e\n            \u003cspan\u003e\u003c\/span\u003e\n            \u003cspan\u003e\u003c\/span\u003e\n            \u003cspan\u003e\u003c\/span\u003e\n            \u003cspan\u003e\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"clx-speeds\"\u003e\n          \u003cbutton type=\"button\" class=\"clx-speed\" data-clx-speed=\"slow\"\u003e🌬️ Breeze\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"clx-speed is-active\" data-clx-speed=\"medium\"\u003e💨 Cool\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"clx-speed\" data-clx-speed=\"fast\"\u003e❄️ Max Chill\u003c\/button\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"clx-heading clx-reveal\"\u003e\n      \u003ch2\u003eWhat's in it \u003cspan class=\"clx-gradient\"\u003efor you?\u003c\/span\u003e 🙌\u003c\/h2\u003e\n      \u003cp\u003eEverything you need to make hot summer days feel a whole lot easier.\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"clx-grid\"\u003e\n      \u003carticle class=\"clx-card clx-reveal\"\u003e\n        \u003cdiv class=\"clx-icon\"\u003e🌀\u003c\/div\u003e\n        \u003ch3\u003eHands-Free Cooling\u003c\/h3\u003e\n        \u003cp\u003eBoth hands free. Zero effort. Maximum chill — whether you're on your phone, out walking, or just relaxing.\u003c\/p\u003e\n      \u003c\/article\u003e\n\n      \u003carticle class=\"clx-card clx-reveal\"\u003e\n        \u003cdiv class=\"clx-icon\"\u003e⚡\u003c\/div\u003e\n        \u003ch3\u003eInstant Ahhhh Moment\u003c\/h3\u003e\n        \u003cp\u003eSwitch it on and get refreshing airflow when the summer heat starts getting uncomfortable.\u003c\/p\u003e\n      \u003c\/article\u003e\n\n      \u003carticle class=\"clx-card clx-reveal\"\u003e\n        \u003cdiv class=\"clx-icon\"\u003e🔋\u003c\/div\u003e\n        \u003ch3\u003eRechargeable Power\u003c\/h3\u003e\n        \u003cp\u003eCharge it up and take your personal cooling with you wherever your summer plans go.\u003c\/p\u003e\n      \u003c\/article\u003e\n\n      \u003carticle class=\"clx-card clx-reveal\"\u003e\n        \u003cdiv class=\"clx-icon\"\u003e🤫\u003c\/div\u003e\n        \u003ch3\u003eBarely There Noise\u003c\/h3\u003e\n        \u003cp\u003eEnjoy your breeze without making your personal fan the centre of attention.\u003c\/p\u003e\n      \u003c\/article\u003e\n\n      \u003carticle class=\"clx-card clx-reveal\"\u003e\n        \u003cdiv class=\"clx-icon\"\u003e💡\u003c\/div\u003e\n        \u003ch3\u003eLED Battery Display\u003c\/h3\u003e\n        \u003cp\u003eNo guessing games. Check your remaining charge at a glance before heading out.\u003c\/p\u003e\n      \u003c\/article\u003e\n\n      \u003carticle class=\"clx-card clx-reveal\"\u003e\n        \u003cdiv class=\"clx-icon\"\u003e🎯\u003c\/div\u003e\n        \u003ch3\u003eMade To Move\u003c\/h3\u003e\n        \u003cp\u003eFlexible, lightweight and comfortable enough to take from home to the beach, gym, commute and beyond.\u003c\/p\u003e\n      \u003c\/article\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"clx-battery-panel clx-reveal\"\u003e\n      \u003cdiv\u003e\n        \u003ch3\u003eKnow your power. 🔋\u003c\/h3\u003e\n        \u003cp\u003eTap a battery level to see how the display could look at a glance.\u003c\/p\u003e\n\n        \u003cdiv class=\"clx-battery-controls\" aria-label=\"Battery level controls\"\u003e\n          \u003cbutton type=\"button\" class=\"clx-battery-btn\" data-level=\"25\"\u003e25%\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"clx-battery-btn\" data-level=\"50\"\u003e50%\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"clx-battery-btn\" data-level=\"75\"\u003e75%\u003c\/button\u003e\n          \u003cbutton type=\"button\" class=\"clx-battery-btn is-active\" data-level=\"100\"\u003e100%\u003c\/button\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"clx-battery-demo\"\u003e\n        \u003cdiv class=\"clx-battery\" role=\"img\" aria-label=\"Battery at 100 percent\"\u003e\n          \u003cdiv class=\"clx-battery-fill\"\u003e\u003c\/div\u003e\n          \u003cspan class=\"clx-battery-value\"\u003e100%\u003c\/span\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"clx-battery-status\" aria-live=\"polite\"\u003eFully charged — ready for the heat.\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"clx-heading clx-reveal\"\u003e\n      \u003ch2\u003eTake it \u003cspan class=\"clx-gradient\"\u003eeverywhere.\u003c\/span\u003e 🌍\u003c\/h2\u003e\n      \u003cp\u003eBeach days, gym sessions, market runs, concerts, long commutes, or just surviving a hot afternoon at home.\u003c\/p\u003e\n\n      \u003cdiv class=\"clx-tags\"\u003e\n        \u003cspan class=\"clx-tag\"\u003e🏖️ Beach Days\u003c\/span\u003e\n        \u003cspan class=\"clx-tag\"\u003e🏋️ Gym Sessions\u003c\/span\u003e\n        \u003cspan class=\"clx-tag\"\u003e🛍️ Market Runs\u003c\/span\u003e\n        \u003cspan class=\"clx-tag\"\u003e🎵 Concerts\u003c\/span\u003e\n        \u003cspan class=\"clx-tag\"\u003e🚗 Long Commutes\u003c\/span\u003e\n        \u003cspan class=\"clx-tag\"\u003e🏠 Hot Days At Home\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"clx-final clx-reveal\"\u003e\n      \u003ch2\u003e\n        Life's too short to be\n        \u003cspan class=\"clx-gradient\"\u003ehot \u0026amp; bothered.\u003c\/span\u003e\n      \u003c\/h2\u003e\n\n      \u003cp\u003e\n        Put it on. Power it up. Carry on with your day while AIRLO brings the chill with you.\n      \u003c\/p\u003e\n\n      \u003ca class=\"clx-cta\" href=\"#MainProduct-template\"\u003e\n        Get Your AIRLO ❄️\n      \u003c\/a\u003e\n\n      \u003cdiv class=\"clx-small\"\u003eChillLab™ • Made for warmer days\u003c\/div\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cscript\u003e\n(function () {\n  const root = document.getElementById('clx-airlo');\n  if (!root || root.dataset.clxReady === 'true') return;\n  root.dataset.clxReady = 'true';\n\n  const revealEls = root.querySelectorAll('.clx-reveal');\n\n  if ('IntersectionObserver' in window) {\n    const observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.08 });\n\n    revealEls.forEach(function (el) { observer.observe(el); });\n  } else {\n    revealEls.forEach(function (el) { el.classList.add('is-visible'); });\n  }\n\n  const fan = root.querySelector('.clx-fan');\n  const windLines = root.querySelectorAll('.clx-wind span');\n  const buttons = root.querySelectorAll('.clx-speed');\n\n  const speeds = {\n    slow:   { fan: '1.55s', wind: '1.55s' },\n    medium: { fan: '.85s',  wind: '1s' },\n    fast:   { fan: '.35s',  wind: '.52s' }\n  };\n\n  buttons.forEach(function (button) {\n    button.addEventListener('click', function () {\n      buttons.forEach(function (btn) { btn.classList.remove('is-active'); });\n      button.classList.add('is-active');\n\n      const chosen = speeds[button.dataset.clxSpeed] || speeds.medium;\n      fan.style.animationDuration = chosen.fan;\n\n      windLines.forEach(function (line) {\n        line.style.animationDuration = chosen.wind;\n      });\n    });\n  });\n\n\n  const battery = root.querySelector('.clx-battery');\n  const batteryFill = root.querySelector('.clx-battery-fill');\n  const batteryValue = root.querySelector('.clx-battery-value');\n  const batteryStatus = root.querySelector('.clx-battery-status');\n  const batteryButtons = root.querySelectorAll('.clx-battery-btn');\n\n  const batteryStates = {\n    25: {\n      color: 'linear-gradient(90deg,#ff9a73,#ffc96e)',\n      text: 'Low battery — time to recharge soon.'\n    },\n    50: {\n      color: 'linear-gradient(90deg,#ffd56c,#9fdb84)',\n      text: 'Half charged — still plenty of breeze left.'\n    },\n    75: {\n      color: 'linear-gradient(90deg,#47cfe0,#65dca9)',\n      text: '75% charged — ready to head out.'\n    },\n    100: {\n      color: 'linear-gradient(90deg,#18c8dd,#62dda8)',\n      text: 'Fully charged — ready for the heat.'\n    }\n  };\n\n  batteryButtons.forEach(function (button) {\n    button.addEventListener('click', function () {\n      const level = Math.max(0, Math.min(100, Number(button.dataset.level) || 0));\n      const state = batteryStates[level] || batteryStates[100];\n\n      batteryButtons.forEach(function (btn) {\n        btn.classList.toggle('is-active', btn === button);\n      });\n\n      batteryFill.style.width = level + '%';\n      batteryFill.style.background = state.color;\n      batteryValue.textContent = level + '%';\n      batteryStatus.textContent = state.text;\n      battery.setAttribute('aria-label', 'Battery at ' + level + ' percent');\n    });\n  });\n\n  const cta = root.querySelector('.clx-cta');\n  if (cta) {\n    cta.addEventListener('click', function (event) {\n      const productTarget =\n        document.querySelector('[id^=\"MainProduct-\"]') ||\n        document.querySelector('.product__info-wrapper') ||\n        document.querySelector('form[action*=\"\/cart\/add\"]');\n\n      if (productTarget) {\n        event.preventDefault();\n        productTarget.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  }\n})();\n\u003c\/script\u003e\n\n\u003c\/body\u003e","brand":"ChillLab","offers":[{"title":"Pink","offer_id":50462457331760,"sku":null,"price":549.9,"currency_code":"ZAR","in_stock":true},{"title":"Black","offer_id":50462457364528,"sku":null,"price":549.9,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0704\/9442\/1040\/files\/ChatGPT_Image_Sep_18_2026_07_37_55_PM.png?v=1789753118"}],"url":"https:\/\/chilllab.co.za\/collections\/frontpage.oembed","provider":"ChillLab","version":"1.0","type":"link"}