/* Water kefir (11950) sections: flavor world, kombucha scale, sugar cubes, 60-hour brew, moments, boxes.
   Loaded only on product pages whose data file sets 'assets' => 'wk'. Motion: loops run only on screen (.kls-loop
   gets .is-playing) and pause while scrolling; reveal animations follow .kls-anim / .is-in (product-story.js). */
body.kls-story .wk-taste {background:#fff; padding-bottom:0}
/* Each flavor is a full-width band in its own colours (no boxes); can and ingredients alternate sides. */
body.kls-story .wk-trio {margin:40px 0 0}
body.kls-story .wk-panel {position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; padding:56px 0; background:var(--wk-bg); box-shadow:0 0 0 100vmax var(--wk-bg); clip-path:inset(0 -100vmax)}
body.kls-story .wk-panel:nth-child(even) .wk-stage {order:2}
body.kls-story .wk-stage {position:relative; height:470px}
body.kls-story .wk-glow {position:absolute; left:50%; top:52%; width:360px; height:360px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 70%)}
body.kls-story .wk-can {position:absolute; left:50%; top:50%; height:410px; width:auto; transform:translate(-50%,-50%) rotate(-4deg); filter:drop-shadow(0 22px 22px rgba(36,64,106,.25)); z-index:2}
body.kls-story .wk-panel:nth-child(even) .wk-can {transform:translate(-50%,-50%) rotate(4deg)}
body.kls-story .wk-st {position:absolute; width:110px; height:110px; z-index:3; animation:wk-pop .55s cubic-bezier(.2,1.4,.4,1) both}
body.kls-story .wk-st-1 {left:8%; top:6%; --r:-12deg}
body.kls-story .wk-st-2 {right:8%; top:8%; --r:10deg}
body.kls-story .wk-st-3 {left:2%; top:40%; --r:8deg}
body.kls-story .wk-st-4 {right:2%; top:42%; --r:-8deg}
body.kls-story .wk-st-5 {left:12%; bottom:4%; --r:14deg}
body.kls-story .wk-st-6 {right:12%; bottom:4%; --r:-14deg}
body.kls-story .wk-st-7 {left:41%; top:-3%; --r:4deg; z-index:1}
body.kls-story .wk-st:nth-of-type(2n) {animation-delay:.06s}
body.kls-story .wk-stage.is-playing .wk-st {animation:wk-pop .55s cubic-bezier(.2,1.4,.4,1) both, wk-float 5.5s ease-in-out .6s infinite}
body.kls-story .wk-stage.is-playing .wk-st:nth-of-type(2n) {animation-duration:.55s, 6.5s}
body.kls-story .wk-stage.is-playing .wk-st:nth-of-type(3n) {animation-duration:.55s, 4.8s}
@keyframes wk-pop {from {transform:scale(.6) rotate(var(--r,0deg))} to {transform:scale(1) rotate(var(--r,0deg))}}
@keyframes wk-float {0%,100% {transform:translateY(0) rotate(var(--r,0deg))} 50% {transform:translateY(-10px) rotate(calc(var(--r,0deg) * -1))}}
body.kls-story .wk-bub {position:absolute; left:50%; top:22%; width:80px; height:62%; transform:translateX(-50%); z-index:2; pointer-events:none}
body.kls-story .wk-bub i {position:absolute; bottom:0; width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:rgba(255,255,255,.25); opacity:0}
body.kls-story .wk-bub i:nth-child(1) {left:10%} body.kls-story .wk-bub i:nth-child(2) {left:45%; width:6px; height:6px}
body.kls-story .wk-bub i:nth-child(3) {left:75%} body.kls-story .wk-bub i:nth-child(4) {left:28%; width:5px; height:5px}
body.kls-story .wk-bub i:nth-child(5) {left:62%; width:10px; height:10px} body.kls-story .wk-bub i:nth-child(6) {left:88%; width:5px; height:5px}
body.kls-story .wk-stage.is-playing .wk-bub i {animation:wk-rise 3.2s linear infinite}
body.kls-story .wk-stage.is-playing .wk-bub i:nth-child(2) {animation-delay:.6s} body.kls-story .wk-stage.is-playing .wk-bub i:nth-child(3) {animation-delay:1.3s}
body.kls-story .wk-stage.is-playing .wk-bub i:nth-child(4) {animation-delay:1.9s} body.kls-story .wk-stage.is-playing .wk-bub i:nth-child(5) {animation-delay:2.4s} body.kls-story .wk-stage.is-playing .wk-bub i:nth-child(6) {animation-delay:.3s}
@keyframes wk-rise {0% {transform:translateY(0); opacity:0} 15% {opacity:1} 100% {transform:translateY(-300px); opacity:0}}
/* Text sits straight on the band. */
body.kls-story .wk-card {max-width:500px}
body.kls-story .wk-card h3 {margin:0 0 8px; font-size:36px; line-height:1.2; color:var(--wk-c); display:flex; flex-wrap:wrap; align-items:center; gap:10px}
body.kls-story .wk-card h3 em {font-style:normal; font-size:14px; padding:4px 12px; border-radius:999px; background:#fff; color:var(--wk-c)}
body.kls-story .wk-card h3 em.kls-fl-rank {background:var(--wk-c); color:#fff}
body.kls-story .wk-aroma {margin:0 0 22px; color:var(--s-navy); font-size:19px}
body.kls-story .wk-scales {display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 22px}
body.kls-story .wk-scales > div {display:flex; align-items:center; gap:10px}
body.kls-story .wk-scales dt {font-weight:800; color:var(--s-navy); font-size:15px}
body.kls-story .wk-scales dd {margin:0}
body.kls-story .wk-dots {display:inline-flex; gap:5px}
body.kls-story .wk-dots i {width:13px; height:13px; border-radius:50%; background:rgba(36,64,106,.14)}
body.kls-story .wk-dots i.on {background:var(--wk-c)}
body.kls-story .wk-nums {margin:0 0 22px; padding:14px 0; border-top:1.5px solid rgba(36,64,106,.12); border-bottom:1.5px solid rgba(36,64,106,.12); color:var(--s-navy); font-size:17px; line-height:1.65; text-wrap:pretty}
body.kls-story .wk-card .kls-fl-quote {margin:0 0 16px; padding:0; border:0; font-size:19px; color:var(--s-navy)}
body.kls-story .wk-card .kls-fl-quote p {margin:0 0 6px; font-size:19px; line-height:1.6}
body.kls-story .wk-card .kls-fl-notes li {background:#fff}
body.kls-story .wk-card .kls-fl-actions {margin:8px 0 0!important}
@media (max-width:1023px) {
  body.kls-story .wk-panel {grid-template-columns:1fr; gap:6px; padding:36px 0 40px}
  body.kls-story .wk-panel:nth-child(even) .wk-stage {order:0}
  body.kls-story .wk-card {max-width:600px; margin:0 auto}
}
@media (max-width:767px) {
  body.kls-story .wk-stage {height:330px}
  body.kls-story .wk-can {height:280px}
  body.kls-story .wk-glow {width:250px; height:250px}
  body.kls-story .wk-st {width:74px; height:74px}
  body.kls-story .wk-card h3 {font-size:28px}
  body.kls-story .wk-aroma, body.kls-story .wk-card .kls-fl-quote p {font-size:17px}
}

/* Kombucha scale */
body.kls-story .wk-scale {background:#fff}
body.kls-story .wk-meter {position:relative; max-width:900px; margin:56px auto 0; padding:64px 0 120px}
body.kls-story .wk-bar {position:relative; height:18px; border-radius:999px; background:linear-gradient(90deg,#BFD84B 0%,#E8E9A6 28%,#FFF1C9 50%,#FAD0DD 72%,#F27BA4 100%)}
body.kls-story .wk-zone {position:absolute; top:-10px; bottom:-10px; border:2px dashed var(--s-navy); border-radius:14px}
body.kls-story .wk-zone b {position:absolute; left:50%; top:-36px; transform:translateX(-50%); white-space:nowrap; font-size:14px; color:var(--s-navy); background:var(--s-yellow); padding:2px 10px; border-radius:999px}
body.kls-story .wk-mark {position:absolute; top:-6px; left:var(--x); transform:translateX(-50%); display:grid; justify-items:center; gap:2px; font-size:15px; font-weight:800; color:var(--s-muted); white-space:nowrap}
body.kls-story .wk-mark .kls-ic {width:34px; height:34px}
body.kls-story .wk-pin {position:absolute; top:110px; left:var(--x); transform:translateX(-50%); display:grid; justify-items:center; gap:2px; font-size:14px; font-weight:800; color:var(--s-navy)}

body.kls-story .wk-pin img {width:26px; height:78px; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(36,64,106,.2))}
body.kls-story .wk-pin::before {content:""; position:absolute; top:-26px; width:2px; height:24px; background:var(--s-navy); opacity:.35}
body.kls-story .wk-meter.is-in .wk-pin {animation:wk-drop .6s cubic-bezier(.2,1.3,.4,1) calc(.15s + var(--i) * .15s) both}
@keyframes wk-drop {from {transform:translate(-50%,-24px)} to {transform:translate(-50%,0)}}
body.kls-story .wk-ends {position:absolute; left:0; right:0; top:90px; display:flex; justify-content:space-between; pointer-events:none}
body.kls-story .wk-ends span {font-size:15px; font-weight:800; color:var(--s-muted)}
body.kls-story .wk-ends span:first-child::before {content:"← "} body.kls-story .wk-ends span:last-child::after {content:" →"}
body.kls-story .wk-points {list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
body.kls-story .wk-points li {display:flex; gap:12px; align-items:flex-start; margin:0}
body.kls-story .wk-points .kls-ic {flex:none; width:44px; height:44px}
body.kls-story .wk-points h3 {margin:2px 0 4px; font-size:17px; color:var(--s-navy)}
body.kls-story .wk-points p {margin:0; font-size:15px; color:var(--s-muted); line-height:1.6}
@media (max-width:1023px) {body.kls-story .wk-points {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px) {
  body.kls-story .wk-meter {margin-top:36px; padding:62px 6px 205px}
  body.kls-story .wk-mark {font-size:14px} body.kls-story .wk-mark .kls-ic {width:28px; height:28px}
  body.kls-story .wk-mark:first-of-type {transform:none; left:0; justify-items:start}
  body.kls-story .wk-mark:last-of-type {transform:none; left:auto; right:0; justify-items:end}
  body.kls-story .wk-points {grid-template-columns:1fr; gap:16px}
}

/* Sugar cubes: towers standing on one table line (a bar chart, no boxes). */
body.kls-story .wk-swap {background:var(--s-ice)}
body.kls-story .wk-towers {--s:52px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; max-width:820px; margin:44px auto 0; padding:0 0 0; border-bottom:3px solid var(--s-navy)}
body.kls-story .wk-tower {display:flex; flex-direction:column; align-items:center; position:relative}
body.kls-story .wk-pile {display:flex; flex-direction:column-reverse; align-items:center}
body.kls-story .wk-pile i {width:var(--s); height:calc(var(--s) * .94); background:var(--wk-cube) center/contain no-repeat; filter:drop-shadow(0 1px 1px rgba(36,64,106,.5)) drop-shadow(0 3px 4px rgba(36,64,106,.15))}
body.kls-story .wk-pile i + i {margin-bottom:calc(var(--s) * -.32)}
body.kls-story .wk-pile i:nth-child(even) {translate:3px 0; rotate:2deg}
body.kls-story .wk-pile i:nth-child(3n) {translate:-2px 0; rotate:-2deg}
body.kls-story .wk-pile i.part {background-size:max(var(--w), 55%) auto; background-position:center bottom}
body.kls-story.kls-js .wk-tower:not(.is-in) .wk-pile i {opacity:0}
body.kls-story .wk-tower.is-in .wk-pile i {animation:wk-cube .4s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .2s + var(--k) * .07s) both}
@keyframes wk-cube {from {transform:translateY(-40px); opacity:0} to {opacity:1}}
body.kls-story .wk-g {margin:0 0 8px; text-align:center; color:var(--s-muted); font-size:15px; white-space:nowrap}
body.kls-story .wk-g b {font-size:30px; color:var(--s-navy)}
body.kls-story .wk-tower:first-child .wk-g b {color:var(--s-price)}
body.kls-story .wk-tower.is-us .wk-g b {color:var(--s-green)}
body.kls-story .wk-who {position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; align-items:center; padding-top:12px; text-align:center}
body.kls-story .wk-who img {width:22px; height:66px; object-fit:contain; margin-bottom:6px}
body.kls-story .wk-who .kls-ic {width:44px; height:44px; margin:11px 0 17px}
body.kls-story .wk-who b {display:block; color:var(--s-navy); font-size:16px}
body.kls-story .wk-who small {display:block; color:var(--s-muted); font-size:14px}
body.kls-story .wk-swap .kls-head + .wk-towers {margin-top:56px}
body.kls-story .wk-swap-note {max-width:900px; margin:150px auto 0; text-align:center; font-weight:800; color:var(--s-navy); font-size:17px}
@media (max-width:767px) {
  body.kls-story .wk-towers {--s:38px}
  body.kls-story .wk-g {white-space:nowrap}
  body.kls-story .wk-g .wk-more {display:none}
  body.kls-story .wk-g.is-more b::after {content:"+"}
  body.kls-story .wk-who small {font-size:14px; white-space:nowrap}
  body.kls-story .wk-g {font-size:14px} body.kls-story .wk-g b {font-size:22px}
  body.kls-story .wk-who b {font-size:15px}
  body.kls-story .wk-swap-note {margin-top:150px}
}

/* 60-hour brew */
body.kls-story .wk-brew {background:linear-gradient(180deg,#fff 0,#EAF6FC 100%)}
body.kls-story .wk-stages {list-style:none; margin:40px 0 0; padding:0; display:flex; align-items:flex-start}
body.kls-story .wk-stages > li {flex:var(--g) 1 0; min-width:0; margin:0; padding:0 10px; text-align:center}
body.kls-story .wk-stages > li.is-point {flex:0 0 190px}
body.kls-story .wk-stage-pic {display:block; width:auto; height:180px; max-width:100%; object-fit:contain; margin:0 auto 8px}
body.kls-story .wk-seg {position:relative; height:16px; margin:0 -10px; background:#F2CC6B}
body.kls-story .wk-stage-1 .wk-seg {border-radius:999px 0 0 999px}
body.kls-story .wk-stage-3 .wk-seg {background:linear-gradient(90deg,#E07A9B,#B4123F); border-radius:0 999px 999px 0}
body.kls-story .is-point .wk-seg {background:#E7B95A}
body.kls-story .is-point .wk-seg::after {content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; border:4px solid var(--s-navy)}
body.kls-story .wk-fizz {position:absolute; inset:-60px 10% 0; pointer-events:none}
body.kls-story .wk-fizz i {position:absolute; bottom:10px; width:9px; height:9px; border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.4); box-shadow:0 0 0 1px rgba(36,64,106,.15); opacity:0}
body.kls-story .wk-fizz i:nth-child(1) {left:8%} body.kls-story .wk-fizz i:nth-child(2) {left:30%} body.kls-story .wk-fizz i:nth-child(3) {left:52%} body.kls-story .wk-fizz i:nth-child(4) {left:72%} body.kls-story .wk-fizz i:nth-child(5) {left:92%}
body.kls-story .wk-axis.is-playing .wk-stage-1 .wk-fizz i {animation:wk-rise2 4.2s linear infinite}
body.kls-story .wk-axis.is-playing .wk-stage-3 .wk-fizz i {animation:wk-rise2 1.8s linear infinite}
body.kls-story .wk-axis.is-playing .wk-fizz i:nth-child(2) {animation-delay:.5s} body.kls-story .wk-axis.is-playing .wk-fizz i:nth-child(3) {animation-delay:1.1s}
body.kls-story .wk-axis.is-playing .wk-fizz i:nth-child(4) {animation-delay:.25s} body.kls-story .wk-axis.is-playing .wk-fizz i:nth-child(5) {animation-delay:.8s}
@keyframes wk-rise2 {0% {transform:translateY(0) scale(.6); opacity:0} 20% {opacity:1} 100% {transform:translateY(-70px) scale(1); opacity:0}}
body.kls-story .wk-h {display:inline-block; margin:14px 0 6px; padding:3px 12px; border-radius:999px; background:var(--s-navy); color:#fff; font-size:14px; font-weight:800}
body.kls-story .wk-stages h3 {margin:0 0 6px; font-size:19px; color:var(--s-navy)}
body.kls-story .wk-stages p:not(.wk-h) {margin:0 auto; max-width:300px; font-size:15px; color:var(--s-muted); line-height:1.65}
body.kls-story .wk-after {list-style:none; margin:40px auto 0; padding:0; max-width:980px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
body.kls-story .wk-after li {position:relative; display:flex; gap:12px; align-items:center; margin:0; padding:0}
body.kls-story .wk-after li + li::before {content:""; position:absolute; left:-14px; top:50%; width:8px; height:8px; border-top:2.5px solid var(--s-navy); border-right:2.5px solid var(--s-navy); transform:translate(-50%,-50%) rotate(45deg); opacity:.4}
body.kls-story .wk-after .kls-ic {flex:none; width:44px; height:44px}
body.kls-story .wk-after b {display:block; color:var(--s-navy); font-size:16px}
body.kls-story .wk-after span {font-size:14px; color:var(--s-muted); line-height:1.55}
@media (max-width:767px) {
  body.kls-story .wk-stages {flex-direction:column; gap:0}
  body.kls-story .wk-stages > li, body.kls-story .wk-stages > li.is-point {flex:none; width:100%; display:grid; grid-template-columns:96px 18px minmax(0,1fr); grid-template-areas:"pic seg when" "pic seg title" "pic seg text"; column-gap:14px; text-align:left; padding:0 0 22px}
  body.kls-story .wk-stage-pic {grid-area:pic; width:96px; margin:0}
  body.kls-story .wk-seg {grid-area:seg; margin:0; height:auto; width:12px; border-radius:999px!important}
  body.kls-story .wk-stage-3 .wk-seg {background:linear-gradient(180deg,#E07A9B,#B4123F)}
  body.kls-story .is-point .wk-seg::after {width:20px; height:20px}
  body.kls-story .wk-fizz {inset:0 -30px 0 -30px}
  body.kls-story .wk-h {grid-area:when; justify-self:start; margin:0 0 4px}
  body.kls-story .wk-stages h3 {grid-area:title}
  body.kls-story .wk-stages p:not(.wk-h) {grid-area:text; margin:0}
  body.kls-story .wk-after {grid-template-columns:1fr}
}

/* Moments */
body.kls-story .wk-moments {background:#FFF9EC}
body.kls-story .wk-mgrid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 40px; margin:44px 0 0; position:relative}
body.kls-story .wk-moment {position:relative; display:flex; flex-direction:column; align-items:center; margin:0; padding:0; text-align:center}
/* A dotted line runs through the pictures like the course of a day. */
body.kls-story .wk-moment::before {content:""; position:absolute; top:120px; left:calc(50% + 140px); width:calc(100% - 240px); border-top:3px dotted rgba(36,64,106,.25)}
body.kls-story .wk-moment:nth-child(3n)::before, body.kls-story .wk-moment:last-child::before {display:none}
body.kls-story .wk-moment-pic {width:250px; max-width:100%; height:auto; margin:0 auto 4px; display:block}
body.kls-story .wk-moment figcaption {display:flex; flex-direction:column; align-items:center}
body.kls-story .wk-when {padding:3px 12px; border-radius:999px; background:var(--s-yellow); color:var(--s-navy); font-size:14px; font-weight:800}
body.kls-story .wk-moment h3 {margin:10px 0 6px; font-size:20px; color:var(--s-navy)}
body.kls-story .wk-moment p {margin:0 0 12px; max-width:300px; font-size:15px; line-height:1.65; color:var(--s-muted)}
body.kls-story .wk-pick {display:inline-flex; align-items:center; gap:8px; text-align:left}
body.kls-story .wk-pick img {width:20px; height:60px; object-fit:contain}
body.kls-story .wk-pick b {display:block; color:var(--s-navy); font-size:15px}
body.kls-story .wk-pick span span {display:block; font-size:14px; color:var(--s-muted)}
@media (max-width:1023px) {
  body.kls-story .wk-mgrid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px}
  body.kls-story .wk-moment::before {display:none}
}
@media (max-width:767px) {
  body.kls-story .wk-mgrid {gap:28px 12px; margin-top:26px}
  body.kls-story .wk-moment-pic {width:100%}
  body.kls-story .wk-when {font-size:14px; padding:2px 10px}
  body.kls-story .wk-moment h3 {font-size:16px; margin:8px 0 4px}
  body.kls-story .wk-moment p {font-size:14px; line-height:1.6; margin-bottom:8px}
  body.kls-story .wk-pick img {width:16px; height:48px}
  body.kls-story .wk-pick b {font-size:14px}
}

/* Boxes */
body.kls-story .wk-boxes {background:#fff}
body.kls-story .wk-box-list {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; max-width:1000px; margin:44px auto 0}
body.kls-story .wk-box {display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:26px; align-items:center; padding:0; color:var(--s-navy)!important; text-decoration:none!important}
body.kls-story .wk-box:hover .wk-crate {transform:translateY(-4px) rotate(-1deg)}
body.kls-story .wk-box:hover .wk-box-go {background:var(--s-navy); color:#fff}
body.kls-story .wk-crate {transition:transform .2s; box-shadow:0 26px 26px -18px rgba(36,64,106,.45), inset 0 0 0 4px #F1D6A6!important; display:grid; align-self:center; grid-template-columns:repeat(var(--cols),1fr); gap:5px; padding:12px; border-radius:16px; background:#E8C48A; border:3px solid #B98A44; box-shadow:inset 0 0 0 4px #F1D6A6}
body.kls-story .wk-crate i {aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 50%, #F4F6F8 0 30%, #C9D2DC 31% 40%, #EEF1F4 41% 52%, var(--c) 53%); box-shadow:0 2px 0 rgba(0,0,0,.18)}
body.kls-story.kls-js .wk-box:not(.is-in) .wk-crate i {transform:scale(.4)}
body.kls-story .wk-box.is-in .wk-crate i {animation:wk-cap .35s cubic-bezier(.3,1.6,.5,1) calc(var(--k) * 25ms) both}
@keyframes wk-cap {from {transform:scale(.4)} to {transform:scale(1)}}
body.kls-story .wk-box-info {display:grid; gap:6px}
body.kls-story .wk-box-n {font-size:22px}
body.kls-story .wk-box-mix {display:flex; flex-wrap:wrap; gap:6px}
body.kls-story .wk-box-mix span {display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--s-muted)}
body.kls-story .wk-box-mix span::before {content:""; width:10px; height:10px; border-radius:50%; background:var(--c)}
body.kls-story .wk-box-price {font-size:30px; font-weight:800; color:var(--s-price); line-height:1.1}
body.kls-story .wk-box-price small {display:block; font-size:14px; font-weight:700; color:var(--s-muted)}
body.kls-story .wk-box-save {justify-self:start; padding:2px 10px; border-radius:999px; background:#E3F4E9; color:var(--s-green); font-size:14px; font-weight:800}
body.kls-story .wk-box-ship {font-size:14px; color:var(--s-muted)}
body.kls-story .wk-box-go {justify-self:start; margin-top:4px; padding:8px 18px; border-radius:999px; background:var(--s-yellow); font-weight:800; font-size:15px}
@media (max-width:767px) {
  body.kls-story .wk-box-list {grid-template-columns:1fr; gap:36px}
  body.kls-story .wk-box {grid-template-columns:140px minmax(0,1fr); gap:16px}
  body.kls-story .wk-box-n {font-size:19px} body.kls-story .wk-box-price {font-size:24px}
}

/* Illustrated open box (replaces the drawn crate when the data file gives 'pic'). */
body.kls-story .wk-box-pic {display:block; transition:transform .2s}
body.kls-story .wk-box-pic img {display:block; width:100%; max-width:340px; height:auto; margin:0 auto}
body.kls-story .wk-box:hover .wk-box-pic {transform:translateY(-4px) rotate(-1deg)}

/* Repeat delivery line under the boxes. */
body.kls-story .wk-box-sub {display:flex; align-items:center; justify-content:center; gap:12px; max-width:760px; margin:40px auto 0; color:var(--s-muted); font-size:16px; text-align:left}
body.kls-story .wk-box-sub .kls-ic {flex:none; width:44px; height:44px}
body.kls-story .wk-box-sub b {display:block; color:var(--s-navy); font-size:17px}

/* Motion off: reduced motion; in-app browsers keep stickers still. */
@media (prefers-reduced-motion:reduce) {body.kls-story :is(.wk-st, .wk-bub i, .wk-fizz i, .wk-pin, .wk-pile i, .wk-crate i, .wk-moment) {animation:none!important; opacity:1}}
body.kls-story.kls-scrolling :is(.wk-st, .wk-bub i, .wk-fizz i) {animation-play-state:paused!important}
html.kls-iab body.kls-story :is(.wk-st, .wk-bub i, .wk-fizz i) {animation:none!important}
html.kls-iab body.kls-story .wk-bub i, html.kls-iab body.kls-story .wk-fizz i {display:none}
html[lang^="zh"] body.kls-story :is(.wk-card h3, .wk-points h3, .wk-moment h3, .wk-stages h3, .wk-who b) {word-break:keep-all; text-wrap:balance}

/* Mix box with three cans: bigger cans on desktop; case pills fit on phones. */
@media (min-width:768px) {body.kls-story .kls-mix--3 .kls-mix-item img {width:44px; height:124px}}
@media (max-width:767px) {
  body.kls-story .kls-bundle .kls-sub-pills {gap:6px; max-width:none}
  body.kls-story .kls-bundle .kls-sub-pill {font-size:14px; padding:0 6px; gap:3px}
  body.kls-story .kls-bundle .kls-sub-pill span {display:none}
  body.kls-story .wk-pin:nth-of-type(2n) {top:140px}
  body.kls-story .wk-meter {padding-bottom:205px}
  body.kls-story .wk-ends {top:84px}
}
body.kls-story .kls-sgs-tests li.is-value b {color:var(--s-navy); background:var(--s-mist)}
/* zh line breaks (audit 2026-10-26): no one-character last lines in reviews, captions, box and delivery lines */
html[lang^="zh"] body.kls-story .wk-box-ship {word-break:keep-all}
html[lang^="zh"] body.kls-story :is(.kls-reviews blockquote, .kls-reviews figcaption strong) {text-wrap:balance}
html[lang^="zh"] body.kls-story .kls-deal {word-break:keep-all}
html[lang^="zh"] body.kls-story .wk-nums {word-break:keep-all; text-wrap:balance}
html[lang^="zh"] body.kls-story :is(.kls-way p, .kls-dfacts strong, .wk-aroma, .kls-dpay-text) {word-break:keep-all; text-wrap:balance}