/* Start custom CSS */body:not(.elementor-editor-active):not(.postid-94) .sx-v-94, body:not(.elementor-editor-active):not(.postid-95) .sx-v-95, body:not(.elementor-editor-active):not(.postid-96) .sx-v-96, body:not(.elementor-editor-active):not(.postid-97) .sx-v-97, body:not(.elementor-editor-active):not(.postid-98) .sx-v-98, body:not(.elementor-editor-active):not(.postid-99) .sx-v-99, body:not(.elementor-editor-active):not(.postid-100) .sx-v-100, body:not(.elementor-editor-active):not(.postid-101) .sx-v-101 { display: none !important; }
body.postid-98 .sx-step-1, body.postid-101 .sx-step-1, body.postid-99 .sx-step-2, body.postid-94 .sx-step-3, body.postid-95 .sx-step-3, body.postid-97 .sx-step-3, body.postid-100 .sx-step-3, body.postid-96 .sx-step-4 { opacity: 1; background: rgba(255,255,255,.14); border-color: #9ACEEB; }
.elementor .sx-buybar { left: 0; right: 0; margin-inline: auto; transform: none; inset-inline: 0; width: min(760px, 94vw); }
.sx-pdp-bottle { filter: drop-shadow(0 40px 44px rgba(0,49,83,.28)); will-change: transform; }
/* hero text sits in front of the bottle; the section itself stays behind it so the bottle shows */
.elementor .elementor-element-7b06e7ef > * { position: relative; z-index: 6; }
@media (min-width: 768px) {
  .elementor .elementor-element-7b06e7ef > * { text-align: start; margin-inline: 0; align-self: flex-start; max-width: min(46vw, 34rem); }
  .elementor .elementor-element-7b06e7ef h1 { font-size: clamp(2rem, 4.4vw, 4.2rem); max-width: min(46vw, 34rem); }
}
.elementor .sx-bbprog { overflow: hidden; }
/* progressive story chapters (lifestyle) */
.elementor .sx-prog.e-con { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 7rem); max-width: 1100px; margin-inline: auto; padding: 0; }
.elementor .sx-prog > .e-con { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding: 0; }
.elementor .sx-prog > .e-con:nth-child(even) > :first-child { order: 2; }
.elementor .sx-prog img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 26px; display: block; box-shadow: 0 40px 70px -45px rgba(0,49,83,.5); }
.elementor .sx-prog > .e-con > .e-con:first-child:has(video) { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 9/16; max-width: 340px; width: 100%; margin-inline: auto; padding: 0; background: #003153; box-shadow: 0 40px 70px -45px rgba(0,49,83,.5); }
.elementor .sx-prog video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.elementor .sx-prog > .e-con > .e-con:last-child { display: flex; flex-direction: column; gap: 1rem; padding: 0; }
.elementor .sx-prog > .e-con > .e-con:last-child > p:first-child { font-size: .78rem; letter-spacing: .22em; color: #4a8fb3; margin: 0; }
.elementor .sx-prog h3 { font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.2; color: #003153; margin: 0; }
.elementor .sx-prog h3 strong { font-weight: 500; }
.elementor .sx-prog > .e-con > .e-con:last-child > p:last-child { color: #2b4a60; line-height: 1.85; max-width: 30rem; margin: 0; }
@media (max-width: 767px) { .elementor .sx-prog > .e-con { grid-template-columns: 1fr; } .elementor .sx-prog > .e-con:nth-child(even) > :first-child { order: 0; } }
/* 360 rotator: a sprite grid (6x4 frames) stepped by horizontal scroll, no script */
.elementor .sx-rot.e-con { direction: ltr; overflow: hidden; width: 100%; max-width: 340px; margin-inline: auto; padding: 0; border-radius: 28px; background: #D9EAF3; box-shadow: 0 40px 80px -40px rgba(0,49,83,.4); }
.elementor .sx-rot > .e-con { width: 400%; padding: 0; display: block; }
.elementor .sx-rot > .e-con > .e-con { position: sticky; left: 0; width: 25%; aspect-ratio: 288/640; overflow: hidden; padding: 0; }
.elementor .sx-rot img { width: 600%; max-width: none; height: auto; display: block; border-radius: 0; }
@supports (animation-timeline: scroll()) {
  .elementor .sx-rot.e-con { overflow-x: auto; overflow-y: hidden; scroll-timeline: --rot inline; scrollbar-color: #003153 #D9EAF3; scrollbar-width: auto; cursor: ew-resize; }
  .elementor .sx-rot img { animation: sx-rotspin linear both; animation-timeline: --rot; }
  @keyframes sx-rotspin {
    0% { translate: 0 0; animation-timing-function: steps(5, end); }
    23% { translate: -83.333% 0; animation-timing-function: step-end; }
    25% { translate: 0 -25%; animation-timing-function: steps(5, end); }
    48% { translate: -83.333% -25%; animation-timing-function: step-end; }
    50% { translate: 0 -50%; animation-timing-function: steps(5, end); }
    73% { translate: -83.333% -50%; animation-timing-function: step-end; }
    75% { translate: 0 -75%; animation-timing-function: steps(5, end); }
    100% { translate: -83.333% -75%; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .elementor .sx-prog > .e-con { animation: sx-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes sx-rise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
  }
  @supports (animation-timeline: scroll()) {
    /* the bottle rests still at scroll 0, then glides and swings gently through the hero and benefits (constant size, no shrinking) and fades as the story section rises over it. Stops are scaled for the taller page that now includes the product-info section. */
    .sx-pdp-bottle { animation: sx-bottle ease-in-out both; animation-timeline: scroll(root); }
    @keyframes sx-bottle {
      0% { transform: perspective(1000px) translate(-25vw,2vh) rotateY(0deg) rotate(0deg); opacity: 1; }
      3.9% { transform: perspective(1000px) translate(-12vw,0) rotateY(14deg) rotate(2deg); opacity: 1; }
      7.9% { transform: perspective(1000px) translate(0,-1vh) rotateY(-16deg) rotate(4deg); opacity: 1; }
      11.4% { transform: perspective(1000px) translate(1vw,0) rotateY(14deg) rotate(-3deg); opacity: 1; }
      14% { transform: perspective(1000px) translate(0,-2vh) rotateY(-8deg) rotate(1deg); opacity: 1; }
      15.7% { transform: perspective(1000px) translate(0,-4vh) rotateY(0deg) rotate(0deg); opacity: 0; }
      100% { transform: perspective(1000px) translate(0,-4vh) rotateY(0deg) rotate(0deg); opacity: 0; }
    }
    @media (max-width: 767px) {
      @keyframes sx-bottle {
        0% { transform: perspective(800px) translate(0,0) rotateY(0deg) rotate(0deg); opacity: 1; }
        3.4% { transform: perspective(800px) translate(-12vw,1vh) rotateY(20deg) rotate(4deg); opacity: 1; }
        7.3% { transform: perspective(800px) translate(10vw,0) rotateY(-20deg) rotate(-4deg); opacity: 1; }
        10.6% { transform: perspective(800px) translate(-10vw,1vh) rotateY(18deg) rotate(4deg); opacity: 1; }
        13.1% { transform: perspective(800px) translate(0,0) rotateY(-8deg) rotate(1deg); opacity: 1; }
        14.8% { transform: perspective(800px) translate(0,-3vh) rotateY(0deg) rotate(0deg); opacity: 0; }
        100% { transform: perspective(800px) translate(0,-3vh) rotateY(0deg) rotate(0deg); opacity: 0; }
      }
    }
    .sx-bbfill { will-change: transform; animation: sx-bbp linear both; animation-timeline: scroll(root); }
    @keyframes sx-bbp { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
/* Elementor editor only: switch scroll animations off and lay the pinned bottles out in flow so nothing covers the content */
body.elementor-editor-active .sx-prog > .e-con, body.elementor-editor-active .sx-pdp-bottle, body.elementor-editor-active .sx-bbfill { animation: none !important; opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .sx-rot img { animation: none !important; }
body.elementor-editor-active .elementor-element-4be748cf { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: center; padding: 1rem !important; z-index: 1 !important; }
body.elementor-editor-active .elementor-element-4be748cf > * { position: static !important; width: 110px !important; height: auto !important; inset: auto !important; margin: 0 !important; }
@supports not (animation-timeline: scroll()) { .sx-bbprog { display: none; } }
@media (max-width: 767px) { .sx-buybar { border-radius: 28px; } }
/* product info: best for / ingredients / usage / pair with (mobile first) */
.elementor .sx-pi-sec.e-con { position: relative; z-index: 8; display: flex; flex-direction: column; gap: 1.6rem; padding: clamp(3rem, 9vw, 7rem) 16px; }
.elementor .sx-pi-head.e-con { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; padding: 0; margin-inline: auto; }
.elementor .sx-pi-wrap.e-con { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; width: 100%; max-width: 1100px; margin-inline: auto; padding: 0; }
.elementor .sx-pi-card.e-con { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: 22px 20px; background: #FFFFFF; border: 1px solid rgba(0,49,83,.1); border-radius: 24px; box-shadow: 0 30px 60px -48px rgba(0,49,83,.5); }
.elementor h3.sx-pi-title { margin: 0; font-weight: 400; font-size: 1.15rem; line-height: 1.3; color: #003153; }
.elementor .sx-pi-chips.e-con { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.elementor .sx-pi-chip { margin: 0; padding: .35rem .85rem; border-radius: 999px; background: #D9EAF3; color: #003153; font-size: .85rem; line-height: 1.4; }
.elementor .sx-pi-li, .elementor .sx-pi-step { margin: 0; color: #2b4a60; font-size: .95rem; line-height: 1.75; }
.elementor .sx-pi-li strong, .elementor .sx-pi-step strong { color: #003153; font-weight: 600; }
.elementor .sx-pi-card > .sx-pi-li + .sx-pi-li { padding-top: .7rem; border-top: 1px solid rgba(0,49,83,.08); }
.elementor .sx-pi-meta.e-con { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.elementor .sx-pi-tag { margin: 0; padding: .3rem .8rem; border: 1px solid #9ACEEB; border-radius: 999px; background: #FFFFFF; color: #003153; font-size: .85rem; }
.elementor .sx-pi-note { margin: .3rem 0 0; color: #5b7384; font-size: .8rem; line-height: 1.7; }
.elementor .sx-pi-pairs.e-con { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.elementor .sx-pi-pair.e-con { display: grid; grid-template-columns: 64px minmax(0,1fr); grid-template-areas: "img name" "img why" "img btn"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px; background: #F4F9FC; border-radius: 18px; }
.elementor .sx-pi-pair-img { grid-area: img; margin: 0; }
.elementor .sx-pi-pair-img img { display: block; width: 64px; height: 86px; object-fit: contain; }
.elementor .sx-pi-pair-name { grid-area: name; margin: 0; color: #003153; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.elementor .sx-pi-pair-why { grid-area: why; margin: 0; color: #2b4a60; font-size: .85rem; line-height: 1.6; }
.elementor .sx-pi-pair-btn { grid-area: btn; justify-self: start; margin-top: 4px; padding: .3rem .95rem; border: 1px solid #003153; border-radius: 999px; background: transparent; color: #003153; font-size: .85rem; line-height: 1.5; text-decoration: none; }
@media (min-width: 768px) {
  .elementor .sx-pi-wrap.e-con { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .elementor .sx-pi-card.e-con { padding: 30px 28px; }
}
/* mobile only: calmer hero title and a compact buy bar with just price and button (desktop untouched) */
@media (max-width: 767px) {
  .elementor h1[data-id="19ef4266"] { font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.15; }
  .elementor .sx-buybar { gap: .5rem; justify-content: space-between; padding: .5rem .55rem .5rem .8rem; }
  .elementor .sx-buybar [data-id="15efc863"] { display: none; }
  .elementor .sx-buybar .e-button-base { white-space: nowrap; padding: .6rem 1.1rem; font-size: .95rem; }
}/* End custom CSS */