/* Soy milk kefir (7846) sections: soy milk + chicory fiber fermentation scene, the label, shake, menu board, ways, 奶素.
   Loaded only on product pages whose data file sets 'assets' => 'soy'. Palette: soy cream and leaf green from the bottle
   label. 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). Every scene is complete without animation (frame 0 / paused). */
body.kls-story {--soy-cream:#FBF5E8; --soy-bean:#E9DCC0; --soy-green:#3E8B3A; --soy-leaf:#8FC46A; --soy-mint:#F1F7EA; --soy-brown:#7A5A2E}
body.kls-story .soy-bean .kls-eyebrow, body.kls-story .soy-back .kls-eyebrow, body.kls-story .soy-shake .kls-eyebrow,
body.kls-story .soy-menu .kls-eyebrow, body.kls-story .soy-ways .kls-eyebrow, body.kls-story .soy-veg .kls-eyebrow {color:var(--soy-green)}

/* ---------- 豆奶沒有乳糖 (fermentation scene + four steps) ---------- */
body.kls-story .soy-bean {background:var(--soy-cream)}
body.kls-story .soy-steps {list-style:none; margin:0; padding:0; display:grid; gap:14px}
body.kls-story .soy-step-n {flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid var(--s-navy); color:var(--s-navy); font-weight:800; font-size:17px}
body.kls-story .soy-points {list-style:none; margin:-12px 0 56px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 36px}
body.kls-story .soy-points li {display:flex; gap:14px; align-items:flex-start; margin:0}
body.kls-story .soy-points:has(> li:only-child) {display:flex; justify-content:center}
body.kls-story .soy-points .kls-ic {width:52px; height:52px; flex:none}
body.kls-story .soy-points strong {display:block; font-size:19px; color:var(--s-navy)}
body.kls-story .soy-points span {color:var(--s-muted)}


/* ---------- 看背面 (the original's label) ---------- */
body.kls-story .soy-back {background:#fff}
body.kls-story .soy-back-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; max-width:1000px; margin:0 auto}
body.kls-story .soy-back-bottle {position:relative; display:flex; flex-direction:column; align-items:center; padding:20px 0}
body.kls-story .soy-back-bottle::before {content:""; position:absolute; left:50%; top:46%; width:320px; height:320px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, var(--soy-mint) 0 62%, rgba(241,247,234,0) 63%)}
body.kls-story .soy-back-bottle img {position:relative; width:160px; height:auto; filter:drop-shadow(0 18px 18px rgba(36,64,106,.18))}
body.kls-story .soy-stat {position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; width:118px; height:118px; border-radius:50%; background:#fff; border:2.5px solid var(--s-navy); box-shadow:0 8px 20px rgba(36,64,106,.12); color:var(--s-navy); line-height:1.1}
body.kls-story .soy-stat b {font-size:32px; font-weight:800}
body.kls-story .soy-stat i {font-style:normal; font-size:15px; font-weight:700}
body.kls-story .soy-stat span {font-size:15px; color:var(--s-muted)}
/* number and unit on one line (8.2 g), the label wraps inside the circle */
body.kls-story .soy-stat {flex-flow:row wrap; align-content:center; column-gap:2px}
body.kls-story .soy-stat--2 b {font-size:27px}
body.kls-story .soy-stat i {font-size:14px}
body.kls-story .soy-stat span {flex-basis:100%; max-width:78%; text-align:center; line-height:1.15; margin-top:2px}
body.kls-story .soy-stat--0 {left:2%; top:8%; background:var(--s-yellow)}
body.kls-story .soy-stat--1 {right:2%; top:24%; background:#fff}
body.kls-story .soy-stat--2 {left:6%; bottom:16%; background:var(--soy-mint)}
body.kls-story .soy-back-bottle.kls-anim .soy-stat {transition:transform .5s cubic-bezier(.2,1.4,.4,1); transition-delay:calc(.15s + var(--i) * .12s)}
body.kls-js.kls-story .soy-back-bottle.kls-anim:not(.is-in) .soy-stat {transform:scale(.6)}
/* LINE / Facebook in-app browsers: no entrance motion (product-story.js sets html.kls-iab). */
html.kls-iab body.kls-story .soy-back-bottle .soy-stat {transition:none; transform:none}
body.kls-story .soy-back-per {position:relative; margin:14px 0 0; font-size:15px; font-weight:700; color:var(--s-muted)}
body.kls-story .soy-label-card {padding:30px 30px 26px; border:2px solid var(--s-navy); border-radius:18px; background:var(--soy-cream); color:var(--s-navy)}
body.kls-story .soy-lc-title {margin:0 0 8px; font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--soy-green)}
body.kls-story .soy-lc-ing {margin:0 0 22px; font-size:20px; font-weight:700; line-height:1.5}
body.kls-story .soy-without {list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
body.kls-story .soy-without li {margin:0; padding:6px 14px; border-radius:999px; background:#fff; border:1.5px solid #E3D5B4; font-size:15px; font-weight:700; text-decoration:line-through; text-decoration-color:#E0402B; text-decoration-thickness:2px}
body.kls-story .soy-lc-protein {display:flex; gap:10px; align-items:center; margin:0 0 18px; padding-top:18px; border-top:1.5px dashed #D9C79E; font-size:15px}
body.kls-story .soy-lc-protein .kls-ic {flex:none; width:40px; height:40px}
body.kls-story #page .soy-lc-btn, body.kls-story #page .soy-row-nl {padding:0; border:0; background:none; box-shadow:none; color:var(--s-blue); font:inherit; font-size:15px; font-weight:700; text-transform:none; letter-spacing:0; cursor:pointer; text-decoration:underline; text-underline-offset:4px; min-height:44px}

/* ---------- 搖一搖 ---------- */
body.kls-story .soy-shake {background:var(--soy-mint)}
body.kls-story .soy-shake-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center}
body.kls-story .soy-shake-stage {display:flex; flex-direction:column; align-items:center; gap:22px}
body.kls-story .soy-shake-bottles {position:relative; display:flex; justify-content:center; padding:20px 110px}
body.kls-story .soy-sb {position:relative; width:150px; transform-origin:50% 60%}
body.kls-story .soy-sb img {display:block; width:100%; height:auto}
/* Layers sit in the bottle's clear bands (render rows: liquid top 214–272 of 900, jam 788–896), cut to its outline:
   settled = clear whey on top and dark jam at the bottom; mixed = one even light purple in both bands. */
body.kls-story .soy-sb i {position:absolute; inset:0; -webkit-mask:var(--sb) 0 0/100% 100%; mask:var(--sb) 0 0/100% 100%}
body.kls-story .soy-sb .sb-whey {background:linear-gradient(transparent 23.6%, rgba(246,243,226,.96) 23.6%, rgba(238,232,206,.94) 28.6%, #D8C49A 28.6%, #D8C49A 29.4%, transparent 29.6%)}
/* Mixed: berry-yogurt pink with swirls, mulberry pieces and seeds (soy-shake-mixed.webp, same 300×900 frame). */
body.kls-story .soy-sb .sb-mix {opacity:0; background:url(pdp/soy-shake-mixed.webp) 0 0/100% 100% no-repeat}
body.kls-story .soy-sb-tag {position:absolute; padding:4px 12px; border-radius:999px; background:#fff; border:1.5px solid var(--s-navy); color:var(--s-navy); font-size:14px; font-weight:800; white-space:nowrap}
body.kls-story .soy-sb-tag--whey {left:0; top:27%}
body.kls-story .soy-sb-tag--jam {right:0; bottom:9%}
body.kls-story .soy-sb-tag--mixed {right:0; top:27%; background:var(--s-yellow); opacity:0}
body.kls-story .soy-sb-tag--whey::after, body.kls-story .soy-sb-tag--jam::after {content:""; position:absolute; top:50%; width:26px; border-top:2px dotted var(--s-navy)}
body.kls-story .soy-sb-tag--whey::after {left:100%}
body.kls-story .soy-sb-tag--jam::after {right:100%}
/* Motion marks beside the bottle while it shakes. */
body.kls-story .soy-sb-lines {position:absolute; top:34%; left:calc(50% - 128px); display:flex; flex-direction:column; gap:10px; opacity:0}
body.kls-story .soy-sb-lines--r {left:auto; right:calc(50% - 128px)}
body.kls-story .soy-sb-lines i {display:block; width:26px; height:4px; border-radius:4px; background:var(--s-navy)}
body.kls-story .soy-sb-lines i:nth-child(2) {width:36px; margin-left:-6px}
body.kls-story .soy-sb-lines--r i:nth-child(2) {margin-left:0}
body.kls-story #page .soy-shake-btn {display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:8px 22px 8px 12px; border-radius:999px; border:2px solid var(--s-navy); background:var(--s-yellow); color:var(--s-navy); font:inherit; font-size:17px; font-weight:800; text-transform:none; letter-spacing:0; box-shadow:0 3px 0 #d9ae12; cursor:pointer}
body.kls-story #page .soy-shake-btn:hover {background:#ffd84d; color:var(--s-navy)}
body.kls-story .soy-shake-btn .kls-ic {width:34px; height:34px}
/* Loop, 8 s: settled (0–2.4 s), a hard shake up and down (2.4–4 s) while the layers blend, mixed (to 6.4 s), settling.
   A tap on the button plays one shake on top. */
body.kls-story .soy-shake-stage.is-playing .soy-sb {animation:soy-shake 8s linear infinite}
body.kls-story .soy-shake-stage.is-playing .sb-mix {animation:soy-mix 8s ease-in-out infinite}
body.kls-story .soy-shake-stage.is-playing :is(.soy-sb-tag--whey, .soy-sb-tag--jam) {animation:soy-tag 8s ease-in-out infinite}
body.kls-story .soy-shake-stage.is-playing .soy-sb-tag--mixed {animation:soy-tag-mixed 8s ease-in-out infinite}
body.kls-story .soy-shake-stage.is-playing .soy-sb-lines {animation:soy-lines 8s linear infinite}
body.kls-story .soy-shake-stage.is-shaking .soy-sb {animation:soy-shake-once 2.6s linear both}
body.kls-story .soy-shake-stage.is-shaking .sb-mix {animation:soy-mix-once 2.6s ease-in-out both}
body.kls-story .soy-shake-stage.is-shaking :is(.soy-sb-tag--whey, .soy-sb-tag--jam) {animation:soy-tag-once 2.6s ease-in-out both}
body.kls-story .soy-shake-stage.is-shaking .soy-sb-tag--mixed {animation:soy-tag-mixed-once 2.6s ease-in-out both}
body.kls-story .soy-shake-stage.is-shaking .soy-sb-lines {animation:soy-lines-once 2.6s linear both}
@keyframes soy-shake {0%,30%,50%,100% {transform:none} 32% {transform:translateY(-34px) rotate(-16deg)} 34% {transform:translateY(10px) rotate(14deg)} 36% {transform:translateY(-34px) rotate(-16deg)} 38% {transform:translateY(10px) rotate(14deg)} 40% {transform:translateY(-34px) rotate(-16deg)} 42% {transform:translateY(10px) rotate(14deg)} 44% {transform:translateY(-30px) rotate(-12deg)} 46% {transform:translateY(6px) rotate(8deg)} 48% {transform:translateY(-8px) rotate(-3deg)}}
@keyframes soy-mix {0%,32% {opacity:0} 46%,80% {opacity:1} 100% {opacity:0}}
@keyframes soy-tag {0%,30% {opacity:1} 34%,86% {opacity:0} 100% {opacity:1}}
@keyframes soy-tag-mixed {0%,46% {opacity:0} 52%,78% {opacity:1} 84%,100% {opacity:0}}
@keyframes soy-lines {0%,30% {opacity:0} 32%,46% {opacity:1} 50%,100% {opacity:0}}
@keyframes soy-shake-once {0%,100% {transform:none} 8% {transform:translateY(-34px) rotate(-16deg)} 16% {transform:translateY(10px) rotate(14deg)} 24% {transform:translateY(-34px) rotate(-16deg)} 32% {transform:translateY(10px) rotate(14deg)} 40% {transform:translateY(-34px) rotate(-16deg)} 48% {transform:translateY(10px) rotate(14deg)} 56% {transform:translateY(-26px) rotate(-10deg)} 64% {transform:translateY(4px) rotate(5deg)} 72% {transform:none}}
@keyframes soy-mix-once {0%,6% {opacity:0} 60%,100% {opacity:1}}
@keyframes soy-tag-once {0% {opacity:1} 10%,100% {opacity:0}}
@keyframes soy-tag-mixed-once {0%,70% {opacity:0} 85%,100% {opacity:1}}
@keyframes soy-lines-once {0% {opacity:0} 5%,64% {opacity:1} 75%,100% {opacity:0}}
body.kls-story .soy-open-steps {list-style:none; margin:0; padding:0; display:grid; gap:18px}
body.kls-story .soy-open-steps li {display:flex; gap:14px; align-items:flex-start; margin:0}
body.kls-story .soy-open-steps .kls-ic {flex:none; width:48px; height:48px}
body.kls-story .soy-open-steps h3 {margin:0 0 4px; font-size:19px; color:var(--s-navy); display:flex; gap:8px; align-items:baseline}
body.kls-story .soy-open-steps h3 span {font-size:15px; color:var(--soy-green); font-weight:800}
body.kls-story .soy-open-steps p {margin:0; color:var(--s-muted)}
body.kls-story .soy-fresh {display:flex; gap:10px; align-items:center; margin:26px 0 0; padding:12px 16px; border-radius:14px; background:#fff; color:var(--s-navy); font-weight:700}
body.kls-story .soy-fresh .kls-ic {flex:none}

/* ---------- 七種口味 menu board ---------- */
body.kls-story .soy-menu {background:#fff}
body.kls-story .soy-menu-grid {display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px; align-items:start}
body.kls-story .soy-board {padding:10px 28px; border-radius:24px; background:var(--soy-cream); border:2px solid var(--s-navy); box-shadow:6px 6px 0 var(--soy-bean)}
body.kls-story .soy-board-list {list-style:none; margin:0; padding:0}
body.kls-story .soy-row {display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:18px; align-items:center; margin:0; padding:16px 0; border-bottom:2px dotted #D9C79E}
body.kls-story .soy-row:last-child {border-bottom:0}
body.kls-story .soy-row img {width:44px; height:auto; filter:drop-shadow(0 4px 5px rgba(36,64,106,.15))}
body.kls-story .soy-row h3 {margin:0 0 2px; font-size:21px; color:var(--s-navy); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
body.kls-story .soy-row-tag {font-size:14px; font-weight:800; padding:1px 10px; border-radius:999px; background:#fff; border:2px solid var(--c); color:var(--s-navy); white-space:nowrap}
body.kls-story .soy-row:first-child .soy-row-tag {background:var(--soy-green); border-color:var(--soy-green); color:#fff}
body.kls-story .soy-row p {margin:0; color:var(--s-muted); font-size:15px}
body.kls-story .soy-row-side {display:flex; flex-direction:column; align-items:flex-end; gap:0}
body.kls-story .soy-sweet {display:flex; align-items:center; gap:5px; font-size:14px; font-weight:700; color:var(--s-muted); white-space:nowrap}
body.kls-story .soy-sweet span {margin-right:3px}
body.kls-story .soy-sweet i {width:12px; height:12px; border-radius:50%; border:2px solid var(--s-navy); background:#fff}
body.kls-story .soy-sweet i.on {background:var(--c)}
body.kls-story .soy-sweet em {font-style:normal; color:var(--soy-green); font-weight:800}
body.kls-story .soy-taste {position:sticky; top:90px; padding:28px; border-radius:24px; background:var(--soy-mint); color:var(--s-navy)}
body.kls-story .soy-taste h3 {margin:0 0 14px; font-size:24px}
body.kls-story .soy-chips {list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
body.kls-story .soy-chips li {margin:0; padding:6px 14px; border-radius:999px; background:#fff; border:1.5px solid var(--soy-leaf); font-size:15px; font-weight:800}
body.kls-story .soy-taste > p {margin:0 0 18px; color:var(--s-navy)}
body.kls-story .soy-taste blockquote {margin:0 0 12px; padding:14px 16px; border:0; border-radius:16px; background:#fff; font-style:normal}
body.kls-story .soy-taste blockquote p {margin:4px 0 4px; font-size:16px; font-weight:600; color:var(--s-navy)}
body.kls-story .soy-taste cite {font-style:normal; font-size:14px; color:var(--s-muted)}

/* ---------- 怎麼喝 ---------- */
body.kls-story .soy-ways {background:var(--soy-cream)}
body.kls-story .soy-ways-list {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:auto auto; gap:28px 36px}
body.kls-story .soy-ways-list li {margin:0; display:flex; flex-direction:column; gap:8px}
body.kls-story .soy-ways-list li:first-child {grid-row:1 / span 2; justify-content:center}
body.kls-story .soy-ways-list > li > img {width:100%; max-width:220px; height:auto}
body.kls-story .soy-ways-list > li:first-child > img {max-width:420px}
body.kls-story .soy-ways-list h3 {margin:0 0 4px; font-size:19px; color:var(--s-navy)}
body.kls-story .soy-ways-list li:first-child h3 {font-size:26px}
body.kls-story .soy-ways-list p {margin:0 0 10px; color:var(--s-muted)}

/* ---------- 為什麼標示奶素 ---------- */
body.kls-story .soy-veg {background:#fff}
body.kls-story .soy-veg-grid {display:grid; grid-template-columns:320px minmax(0,1fr); gap:48px; align-items:center; max-width:960px; margin:0 auto}
body.kls-story .soy-veg-pic {width:100%; height:auto}
body.kls-story .soy-veg h2 {margin:0 0 12px; color:var(--s-navy)}
body.kls-story .soy-veg-grid p:not(.kls-eyebrow) {margin:0 0 18px; color:var(--s-navy)}

/* ---------- 給第一次喝的你 ---------- */
body.kls-story .soy-first {background:#fff}
body.kls-story .soy-first .kls-eyebrow {color:var(--soy-green)}
body.kls-story .soy-notes {list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
body.kls-story .soy-notes li {margin:0; text-align:center; display:flex; flex-direction:column; align-items:center}
body.kls-story .soy-notes .kls-ic {width:72px; height:72px; margin-bottom:10px}
body.kls-story .soy-notes h3 {margin:0 0 6px; font-size:20px; color:var(--s-navy)}
body.kls-story .soy-notes p {margin:0; color:var(--s-muted)}
body.kls-story .soy-picks {max-width:900px; margin:44px auto 0; padding:26px 28px; border-radius:24px; background:var(--soy-cream)}
body.kls-story .soy-picks-title {margin:0 0 16px; font-size:19px; font-weight:800; color:var(--s-navy)}
body.kls-story .soy-picks-row {display:grid; grid-template-columns:1fr 1fr; gap:28px}
body.kls-story .soy-pick {display:flex; gap:16px; align-items:center; color:var(--s-navy)!important; text-decoration:none!important}
body.kls-story .soy-pick-bottles {display:flex; flex:none; gap:2px}
body.kls-story .soy-pick-bottles img {width:40px; height:auto; filter:drop-shadow(0 4px 5px rgba(36,64,106,.15))}
body.kls-story .soy-pick strong {display:block; font-size:18px; color:var(--soy-green)}
body.kls-story .soy-pick strong + span {display:block; color:var(--s-navy)}
@media (max-width:1023px) {
}
@media (max-width:767px) {
    body.kls-story .soy-notes {grid-template-columns:minmax(0,1fr); gap:18px}
    body.kls-story .soy-notes li {display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:14px; text-align:left; align-items:center}
    body.kls-story .soy-notes li .kls-ic {grid-row:1 / span 2; margin:0}
    body.kls-story .soy-notes h3 {margin:0}
    body.kls-story .soy-notes .kls-ic {width:56px; height:56px}
    body.kls-story .soy-notes h3 {font-size:18px}
    body.kls-story .soy-picks {padding:20px 16px}
    body.kls-story .soy-picks-row {grid-template-columns:minmax(0,1fr); gap:18px}
    body.kls-story .soy-pick-bottles img {width:32px}
}

/* 益生菌 + 益生質 = 同一瓶 */
body.kls-story .soy-teach {list-style:none; margin:0 auto 56px; padding:0; max-width:1000px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; counter-reset:t}
body.kls-story .soy-teach li {position:relative; margin:0; display:flex; flex-direction:column; align-items:center; text-align:center}
body.kls-story .soy-teach li + li::before {position:absolute; left:-34px; top:70px; font-size:34px; font-weight:800; color:var(--soy-green); line-height:1}
body.kls-story .soy-teach li:nth-child(2)::before {content:"＋"}
body.kls-story .soy-teach li:nth-child(3)::before {content:"＝"}
body.kls-story .soy-teach :is(.soy-teach-pic, .soy-teach-ic) {display:grid; place-items:center; width:170px; height:170px; margin-bottom:10px}
body.kls-story .soy-teach-ic {border-radius:50%; background:#fff}
body.kls-story .soy-teach-ic .kls-ic {width:110px; height:110px}
body.kls-story .soy-teach-bottle {width:auto; height:170px; margin-bottom:10px; filter:drop-shadow(0 10px 12px rgba(36,64,106,.18))}
body.kls-story .soy-teach h3 {margin:0 0 6px; font-size:24px; color:var(--s-navy)}
body.kls-story .soy-teach p {margin:0; color:var(--s-muted)}
@media (max-width:767px) {
    body.kls-story .soy-teach {grid-template-columns:minmax(0,1fr); gap:34px; margin-bottom:40px}
    body.kls-story .soy-teach li {display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:14px; text-align:left; align-items:center}
    body.kls-story .soy-teach :is(.soy-teach-pic, .soy-teach-ic) {width:96px; height:96px; margin:0; grid-row:1 / span 2}
    body.kls-story .soy-teach-ic .kls-ic {width:64px; height:64px}
    body.kls-story .soy-teach-bottle {height:110px; margin:0 auto; grid-row:1 / span 2}
    body.kls-story .soy-teach h3 {font-size:20px}
    body.kls-story .soy-teach li + li::before {left:38px; top:-30px; font-size:24px}
}

/* ---------- the production line (11 stages × 4 s = 44 s loop) ----------
   Every stage-timed animation runs 44 s with delay = 4 s × stage − 44 s, so all share one clock (1 s of a stage =
   2.27 % of the loop; a stage owns 0–9.09 % of its timeline). Stage 1 is the static frame. Scene space 1536×1024. */
body.kls-story .soy-bean-grid {display:block; max-width:1040px; margin:0 auto}
body.kls-story .soy-tour {max-width:1040px; margin:0 auto 20px; text-align:center}
body.kls-story .soy-tour .kls-eyebrow {margin:0 0 6px}
body.kls-story .soy-tour h3 {margin:0; color:var(--s-navy); font-size:26px; line-height:1.35}
@media (max-width:767px) {body.kls-story .soy-tour h3 {font-size:20px}}
body.kls-story .soy-line {position:relative; aspect-ratio:3 / 2; border-radius:28px; overflow:hidden; background:#FBF7EE; box-shadow:0 14px 40px rgba(36,64,106,.12)}
body.kls-story .soy-line svg {display:block; width:100%; height:100%}
body.kls-story .soy-line :is(.pl-ok,.pl-cone,.pl-foam,.pl-drop,.pl-carton,.pl-scoop,.pl-spoon,.pl-gdrop,.pl-gin,.pl-pow,.pl-bub,.pl-prog,.pl-ride,.pl-pile,.pl-ripple,.pl-fill,.pl-capdown,.pl-print,.pl-in,.pl-shift,.pl-rise,.pl-zoom,.pl-snow,.pl-spark) {transform-box:fill-box; transform-origin:center}
body.kls-story .soy-line .pl-s {opacity:0}
body.kls-story .soy-line .pl-s0 {opacity:1}
body.kls-story .soy-line .pl-time {opacity:0}
body.kls-story .soy-line .pl-t4 {opacity:1}
body.kls-story .soy-line.is-playing .pl-s {animation:pl-show 44s linear infinite; animation-delay:calc(var(--g) * 4s - 44s)}
body.kls-story .soy-line.is-playing .pl-s :is(.pl-carton,.pl-pour,.pl-rise,.pl-scoop,.pl-spoon,.pl-gdrop,.pl-gin,.pl-time,.pl-prog,.pl-hourhand,.pl-minhand,.pl-ride,.pl-pile,.pl-shift,.pl-fill,.pl-stream,.pl-capdown,.pl-spark,.pl-print,.pl-zoom,.pl-in,.pl-snow,.pl-ok,.pl-ok2,.pl-ok3,.pl-cone,.pl-jar,.pl-probe,.pl-lamp-r,.pl-lamp-g,.pl-lead,.pl-spout,.pl-drain) {animation-duration:44s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-delay:calc(var(--g) * 4s - 44s)}
body.kls-story .soy-line.is-playing .pl-pow {animation:pl-pow 44s linear infinite; animation-delay:calc(var(--g) * 4s - 44s + var(--d))}
@keyframes pl-show {0%,8.53% {opacity:1} 9.04%,99.62% {opacity:0} 100% {opacity:1}}
/* 1 mix: carton pours (0.2–1.6 s), scoop adds inulin (1.6–2.5 s), spoon drops grains (2.5–3.6 s) */
body.kls-story .soy-line .pl-carton {transform-origin:20% 80%}
body.kls-story .soy-line.is-playing .pl-carton {animation-name:pl-carton}
body.kls-story .soy-line.is-playing .pl-pour {animation-name:pl-pour; stroke-dasharray:320}
body.kls-story .soy-line.is-playing .pl-rise {animation-name:pl-rise}
body.kls-story .soy-line.is-playing .pl-spout {animation-name:pl-spout}
body.kls-story .soy-line.is-playing .pl-drain {animation-name:pl-drain}
@keyframes pl-drain {0%,.4% {transform:translateY(0)} 8%,100% {transform:translateY(96px)}}
@keyframes pl-spout {0%,.4% {opacity:0} .9%,7.6% {opacity:1} 8.2%,100% {opacity:0}}
body.kls-story .soy-line .pl-scoop {transform-origin:0 0}
body.kls-story .soy-line.is-playing .pl-scoop {animation-name:pl-scoop}
body.kls-story .soy-line .pl-spoon {transform-origin:0 0}
body.kls-story .soy-line.is-playing .pl-spoon {animation-name:pl-spoon}
body.kls-story .soy-line.is-playing .pl-gdrop {animation-name:pl-gdrop}
body.kls-story .soy-line.is-playing .pl-gdrop2 {animation-name:pl-gdrop2}
body.kls-story .soy-line.is-playing .pl-gin {animation-name:pl-gin}
@keyframes pl-carton {0% {transform:translate(-60px,-40px) rotate(-20deg); opacity:0} 0.64% {transform:translate(0,0) rotate(0); opacity:1} 3.56% {transform:translate(0,0) rotate(0); opacity:1} 4.2%,100% {transform:translate(-60px,-40px) rotate(-20deg); opacity:0}}
@keyframes pl-pour {0%,.5% {stroke-dashoffset:320} 1.3% {stroke-dashoffset:0} 7.4% {stroke-dashoffset:0} 8.2%,100% {stroke-dashoffset:-320}}
@keyframes pl-rise {0%,1.1% {transform:translateY(124px)} 7.6%,100% {transform:translateY(0)}}
@keyframes pl-scoop {0%,3.56% {transform:translate(-60px,-30px); opacity:0} 3.95% {transform:translate(0,0) rotate(0); opacity:1} 4.45% {transform:rotate(10deg)} 5.47% {transform:rotate(10deg); opacity:1} 5.98%,100% {transform:translate(-60px,-30px); opacity:0}}
@keyframes pl-pow {0%,4.33% {transform:translateY(0); opacity:0} 4.52% {opacity:1} 5.73% {transform:translateY(170px); opacity:0} 100% {opacity:0}}
@keyframes pl-spoon {0%,5.6% {transform:translate(-60px,-30px); opacity:0} 5.98% {transform:translate(0,0) rotate(0); opacity:1} 6.62% {transform:rotate(8deg)} 7.89% {transform:rotate(8deg); opacity:1} 8.4%,100% {transform:translate(-60px,-30px); opacity:0}}
@keyframes pl-gdrop {0%,5.6% {opacity:0; transform:translate(0,0)} 5.98%,6.49% {opacity:1; transform:translate(0,0)} 7.25% {transform:translate(14px,230px); opacity:1} 7.51%,100% {transform:translate(14px,230px); opacity:0}}
@keyframes pl-gdrop2 {0%,5.6% {opacity:0; transform:translate(0,0)} 5.98%,6.87% {opacity:1; transform:translate(0,0)} 7.64% {transform:translate(4px,240px); opacity:1} 7.89%,100% {transform:translate(4px,240px); opacity:0}}
@keyframes pl-gin {0%,7.25% {transform:scale(0)} 7.89%,100% {transform:scale(1)}}
/* 2 ferment */
body.kls-story .soy-line.is-playing .pl-t0 {animation-name:pl-t0}
body.kls-story .soy-line.is-playing .pl-t1 {animation-name:pl-t1}
body.kls-story .soy-line.is-playing .pl-t2 {animation-name:pl-t2}
body.kls-story .soy-line.is-playing .pl-t3 {animation-name:pl-t3}
body.kls-story .soy-line.is-playing .pl-t4 {animation-name:pl-t4}
@keyframes pl-t0 {0%,1.65% {opacity:1} 1.72%,100% {opacity:0}}
@keyframes pl-t1 {0%,1.65% {opacity:0} 1.72%,3.31% {opacity:1} 3.37%,100% {opacity:0}}
@keyframes pl-t2 {0%,3.31% {opacity:0} 3.37%,4.96% {opacity:1} 5.03%,100% {opacity:0}}
@keyframes pl-t3 {0%,4.96% {opacity:0} 5.03%,6.62% {opacity:1} 6.68%,100% {opacity:0}}
@keyframes pl-t4 {0%,6.62% {opacity:0} 6.68%,100% {opacity:1}}
body.kls-story .soy-line .pl-prog {transform-origin:0 50%}
body.kls-story .soy-line.is-playing .pl-prog {animation-name:pl-prog}
@keyframes pl-prog {0% {transform:scaleX(.04)} 8.27%,100% {transform:scaleX(1)}}
body.kls-story .soy-line :is(.pl-hourhand, .pl-minhand) {transform-box:view-box; transform-origin:564px 340px}
body.kls-story .soy-line.is-playing .pl-hourhand {animation-name:pl-hour; animation-timing-function:linear}
body.kls-story .soy-line.is-playing .pl-minhand {animation-name:pl-min; animation-timing-function:linear}
@keyframes pl-hour {0% {transform:rotate(0)} 8.27%,100% {transform:rotate(720deg)}}
@keyframes pl-min {0% {transform:rotate(0)} 8.27%,100% {transform:rotate(4320deg)}}
body.kls-story .soy-line .pl-bub {opacity:0}
body.kls-story .soy-line.is-playing .pl-bub {animation:pl-bub 2s ease-in infinite; animation-delay:var(--d)}
@keyframes pl-bub {0% {transform:translateY(0); opacity:0} 15% {opacity:1} 85% {opacity:.9} 100% {transform:translateY(-62px); opacity:0}}
/* 3 strain */
body.kls-story .soy-line.is-playing .pl-flow {animation:pl-flow .8s linear infinite}
@keyframes pl-flow {to {stroke-dashoffset:-48}}
body.kls-story .soy-line .pl-ripple {opacity:0}
body.kls-story .soy-line.is-playing .pl-ripple {animation:pl-ripple 1.4s ease-out infinite}
body.kls-story .soy-line.is-playing .pl-ripple2 {animation-delay:.7s}
@keyframes pl-ripple {0% {transform:scale(.4); opacity:.9} 100% {transform:scale(2.4); opacity:0}}
body.kls-story .soy-line .pl-ride {opacity:0}
body.kls-story .soy-line.is-playing .pl-ride {animation-name:pl-ride1}
body.kls-story .soy-line.is-playing .pl-ride2 {animation-name:pl-ride2}
body.kls-story .soy-line.is-playing .pl-ride3 {animation-name:pl-ride3}
@keyframes pl-ride1 {0%,0.64% {transform:translate(0,0); opacity:0} 0.83% {opacity:1} 2.55% {transform:translate(-6px,200px); opacity:1} 2.74%,100% {transform:translate(-6px,200px); opacity:0}}
@keyframes pl-ride2 {0%,2.55% {transform:translate(0,0); opacity:0} 2.74% {opacity:1} 4.45% {transform:translate(10px,206px); opacity:1} 4.65%,100% {transform:translate(10px,206px); opacity:0}}
@keyframes pl-ride3 {0%,4.45% {transform:translate(0,0); opacity:0} 4.65% {opacity:1} 6.36% {transform:translate(-16px,196px); opacity:1} 6.55%,100% {transform:translate(-16px,196px); opacity:0}}
body.kls-story .soy-line.is-playing .pl-pile {animation-name:pl-pile1}
body.kls-story .soy-line.is-playing .pl-pile2 {animation-name:pl-pile2}
body.kls-story .soy-line.is-playing .pl-pile3 {animation-name:pl-pile3}
@keyframes pl-pile1 {0%,2.55% {transform:scale(0)} 3.05%,100% {transform:scale(1)}}
@keyframes pl-pile2 {0%,4.45% {transform:scale(0)} 4.96%,100% {transform:scale(1)}}
@keyframes pl-pile3 {0%,6.36% {transform:scale(0)} 6.87%,100% {transform:scale(1)}}
/* 4 fill · 5 cap · 6 date: the belt brings the next bottle in (one slot = 200), then the machine works on it. */
body.kls-story .soy-line.is-playing .pl-shift {animation-name:pl-shift}
@keyframes pl-shift {0% {transform:translateX(-200px)} 1.91%,100% {transform:translateX(0)}}
body.kls-story .soy-line .pl-fill {transform-origin:50% 100%}
body.kls-story .soy-line.is-playing .pl-fill {animation-name:pl-fill}
body.kls-story .soy-line.is-playing .pl-stream {animation-name:pl-stream}
@keyframes pl-fill {0%,2.16% {transform:scaleY(.1)} 7%,100% {transform:scaleY(1)}}
@keyframes pl-stream {0%,2.04% {opacity:0} 2.29%,6.87% {opacity:1} 7.13%,100% {opacity:0}}
/* 5 cap: head down with the cap (3–5.5 %), screw (5.5–9 %), head up (9–11.5 %); the rod stretches with it. */
body.kls-story .soy-line .pl-rod {transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0)}
body.kls-story .soy-line .pl-capdown {transform:translateY(-44px)}
body.kls-story .soy-line :is(.pl-grip, .pl-turn) {opacity:0}
body.kls-story .soy-line.is-playing .pl-s :is(.pl-chuck,.pl-rod,.pl-capdown,.pl-grip,.pl-turn) {animation-duration:44s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-delay:calc(var(--g) * 4s - 44s)}
body.kls-story .soy-line.is-playing .pl-chuck {animation-name:pl-chuck}
body.kls-story .soy-line.is-playing .pl-rod {animation-name:pl-rod}
body.kls-story .soy-line.is-playing .pl-capdown {animation-name:pl-capdown}
body.kls-story .soy-line.is-playing .pl-grip {animation-name:pl-grip}
body.kls-story .soy-line.is-playing .pl-turn {animation-name:pl-grip}
body.kls-story .soy-line.is-playing .pl-gripmove {animation:pl-gripmove .35s linear infinite}
@keyframes pl-chuck {0%,1.91% {transform:translateY(0)} 3.5%,5.73% {transform:translateY(44px)} 7.32%,100% {transform:translateY(0)}}
@keyframes pl-rod {0%,1.91% {transform:scaleY(0)} 3.5%,5.73% {transform:scaleY(1)} 7.32%,100% {transform:scaleY(0)}}
@keyframes pl-capdown {0%,1.91% {transform:translateY(-44px)} 3.5%,100% {transform:translateY(0)}}
@keyframes pl-grip {0%,3.44% {opacity:0} 3.75%,5.54% {opacity:1} 5.85%,100% {opacity:0}}
@keyframes pl-gripmove {to {transform:translateX(-12px)}}
body.kls-story .soy-line :is(.pl-beam, .pl-mark) {opacity:0}
body.kls-story .soy-line.is-playing .pl-s :is(.pl-beam,.pl-mark) {animation-duration:44s; animation-iteration-count:infinite; animation-delay:calc(var(--g) * 4s - 44s)}
body.kls-story .soy-line.is-playing .pl-beam {animation-name:pl-beam}
body.kls-story .soy-line.is-playing .pl-mark {animation-name:pl-mark}
@keyframes pl-beam {0%,2.29% {opacity:0} 2.48% {opacity:1} 2.74% {opacity:.2} 2.93% {opacity:1} 3.18% {opacity:0} 100% {opacity:0}}
@keyframes pl-mark {0%,2.93% {opacity:0} 3.18%,100% {opacity:1}}
/* Workers: gentle life (breathing, a nod), the operator presses the panel button, the packer lowers a bottle into the box. */
body.kls-story .soy-line .pl-worker {transform-box:fill-box; transform-origin:50% 100%}
body.kls-story .soy-line.is-playing .pl-breathe {animation:pl-breathe 3.2s ease-in-out infinite}
body.kls-story .soy-line.is-playing .pl-nod {animation:pl-nod 2.6s ease-in-out infinite}
@keyframes pl-breathe {0%,100% {transform:scaleY(1)} 50% {transform:scaleY(1.008) rotate(-.6deg)}}
@keyframes pl-nod {0%,100% {transform:rotate(0)} 50% {transform:rotate(-1.2deg)}}
body.kls-story .soy-line.is-playing .pl-s :is(.pl-press,.pl-dip,.pl-place) {animation-duration:44s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-delay:calc(var(--g) * 4s - 44s)}
body.kls-story .soy-line.is-playing .pl-press {animation-name:pl-press}
body.kls-story .soy-line.is-playing .pl-dip {animation-name:pl-dip}
body.kls-story .soy-line.is-playing .pl-place {animation-name:pl-place}
@keyframes pl-press {0%,1.02% {transform:translateX(0)} 1.53%,2.04% {transform:translateX(-8px)} 2.55%,100% {transform:translateX(0)}}
@keyframes pl-dip {0%,0.95% {transform:translate(0,0) rotate(0)} 3.18% {transform:translate(4px,80px) rotate(1.5deg)} 3.95% {transform:translate(4px,80px) rotate(1.5deg)} 6.05%,100% {transform:translate(0,0) rotate(0)}}
@keyframes pl-place {0%,0.95% {transform:translateY(0)} 3.18%,100% {transform:translateY(80px)}}
body.kls-story .soy-line .pl-print {transform-origin:0 50%}
body.kls-story .soy-line.is-playing .pl-print {animation-name:pl-print}
body.kls-story .soy-line.is-playing .pl-zoom {animation-name:pl-zoom}
@keyframes pl-print {0%,3.05% {transform:scaleX(0)} 4.77%,100% {transform:scaleX(1)}}
@keyframes pl-zoom {0%,1.65% {transform:scale(.2); opacity:0} 2.55% {transform:scale(1); opacity:1} 100% {transform:scale(1); opacity:1}}
/* 7 pack */
body.kls-story .soy-line.is-playing .pl-in0 {animation-name:pl-in0}
body.kls-story .soy-line.is-playing .pl-in1 {animation-name:pl-in1}
body.kls-story .soy-line.is-playing .pl-in2 {animation-name:pl-in2}
body.kls-story .soy-line.is-playing .pl-snow {animation-name:pl-snow}
@keyframes pl-in0 {0%,0.64% {transform:translateY(-560px)} 2.16%,100% {transform:translateY(0)}}
@keyframes pl-in1 {0%,1.65% {transform:translateY(-560px)} 3.18%,100% {transform:translateY(0)}}
@keyframes pl-in2 {0%,2.67% {transform:translateY(-560px)} 4.2%,100% {transform:translateY(0)}}
@keyframes pl-snow {0%,4.71% {opacity:0; transform:scale(.4) rotate(-40deg)} 5.73% {opacity:1; transform:scale(1.15) rotate(0)} 6.36%,100% {opacity:1; transform:scale(1) rotate(0)}}
/* Hygiene and quality control (1 s = 2.5 %): foam on the gloves, the pH reading settles and is ticked off, a drop of
   sample goes onto the agar dish, a green check pops up when a check is passed. */
body.kls-story .soy-line .pl-foam, body.kls-story .soy-line .pl-drop {opacity:0}
body.kls-story .soy-line.is-playing .pl-foam {animation:pl-foam 1.8s ease-out infinite; animation-delay:var(--d)}
body.kls-story .soy-line.is-playing .pl-drop {animation:pl-drop 1.1s ease-in infinite; animation-delay:var(--d)}
@keyframes pl-foam {0% {transform:translateY(0) scale(.3); opacity:0} 25% {opacity:1} 100% {transform:translateY(-34px) scale(1); opacity:0}}
@keyframes pl-drop {0% {transform:translateY(0); opacity:0} 15% {opacity:1} 80% {transform:translateY(22px); opacity:1} 100% {transform:translateY(24px); opacity:0}}
body.kls-story .soy-line.is-playing .pl-ok {animation-name:pl-ok}
body.kls-story .soy-line.is-playing .pl-ok2 {animation-name:pl-ok2}
body.kls-story .soy-line.is-playing .pl-ok3 {animation-name:pl-ok3}
@keyframes pl-ok {0%,7% {transform:scale(.3); opacity:0} 7.5% {transform:scale(1.15); opacity:1} 7.9%,100% {transform:scale(1); opacity:1}}
@keyframes pl-ok2 {0%,7.8% {transform:scale(.3); opacity:0} 8.2% {transform:scale(1.15); opacity:1} 8.5%,100% {transform:scale(1); opacity:1}}
@keyframes pl-ok3 {0%,4.09% {transform:scale(.3); opacity:0} 4.82% {transform:scale(1.15); opacity:1} 5.27%,100% {transform:scale(1); opacity:1}}
body.kls-story .soy-line .pl-cone {transform-origin:50% 100%}
body.kls-story .soy-line.is-playing .pl-cone {animation-name:pl-cone}
body.kls-story .soy-line .pl-jar {opacity:.75}
body.kls-story .soy-line.is-playing .pl-jar {animation-name:pl-jar}
@keyframes pl-jar {0%,0.91% {opacity:.8} 8.18%,100% {opacity:.1}}
@keyframes pl-cone {0%,.5.45% {transform:scaleY(0); opacity:0} 1.27% {opacity:.75} 6.36%,100% {transform:scaleY(1); opacity:.75}}
/* Air shower lamp (red while the jets run, green to go on) and the pH electrode sliding down into the beaker. */
body.kls-story .soy-line .pl-lamp-r {opacity:0}
body.kls-story .soy-line.is-playing .pl-lamp-r {animation-name:pl-lamp-r}
body.kls-story .soy-line.is-playing .pl-lamp-g {animation-name:pl-lamp-g}
@keyframes pl-lamp-r {0%,6.4% {opacity:1} 6.6%,100% {opacity:0}}
@keyframes pl-lamp-g {0%,6.4% {opacity:0} 6.6%,100% {opacity:1}}
body.kls-story .soy-line.is-playing .pl-probe {animation-name:pl-probe}
body.kls-story .soy-line.is-playing .pl-lead {animation-name:pl-lead}
@keyframes pl-lead {0%,2.4% {opacity:0} 2.8%,100% {opacity:1}}
@keyframes pl-probe {0%,.4% {transform:translateY(-130px)} 1.5%,100% {transform:translateY(0)}}
/* Subtitles under the scene: the running story, one sentence per stop, crossfading on the scene's clock; dots jump to a stop. */
body.kls-story .soy-subs {position:relative; min-height:3.6em; margin:18px auto 0; max-width:820px; font-size:21px; font-weight:500; line-height:1.6; text-align:center; color:var(--s-navy)}
/* Subtitle and dot follow the scene's own clock: product-story-soy.js reads the stage from the scene animation and sets .is-on. */
body.kls-story .pl-sub {position:absolute; inset:0 0 auto; margin:0; opacity:0; transition:opacity .3s}
body.kls-story .pl-sub.is-on {opacity:1}
body.kls-story .soy-dots {display:flex; justify-content:center; gap:4px; margin-top:6px}
body.kls-story #page .soy-dots button {position:relative; width:28px; height:28px; min-height:0; margin:0; padding:0; border:0; border-radius:50%; background:transparent; box-shadow:none; cursor:pointer}
body.kls-story #page .soy-dots button::after {content:""; position:absolute; inset:10px; border-radius:50%; background:#C9D3DC; transition:background .3s, transform .3s}
body.kls-story #page .soy-dots button.is-on::after {background:var(--s-navy); transform:scale(1.25)}
@media (max-width:767px) {
    body.kls-story .soy-subs {font-size:16px; min-height:4.8em; margin:12px 16px 0}
}
@media (prefers-reduced-motion: reduce) {
    body.kls-story .soy-line * {animation:none!important}
}

/* ---------- phones and tablets ---------- */
@media (max-width:1023px) {
    body.kls-story :is(.soy-bean-grid, .soy-shake-grid, .soy-menu-grid, .soy-back-grid) {grid-template-columns:minmax(0,1fr); gap:32px}
    body.kls-story .soy-taste {position:static}
    body.kls-story .soy-points {grid-template-columns:minmax(0,1fr)}
    body.kls-story .soy-ways-list {grid-template-columns:1fr 1fr}
    body.kls-story .soy-ways-list li:first-child {grid-row:auto; grid-column:1 / -1}
}
@media (max-width:767px) {
    body.kls-story .soy-points {grid-template-columns:minmax(0,1fr); margin-top:32px}
        body.kls-story .soy-back-bottle {padding:0}
    body.kls-story .soy-back-bottle::before {width:240px; height:240px}
    body.kls-story .soy-back-bottle img {width:110px}
    body.kls-story .soy-stat {width:96px; height:96px}
    body.kls-story .soy-stat b {font-size:26px}
    body.kls-story .soy-stat--2 b {font-size:22px}
    body.kls-story .soy-stat--0 {left:0}
    body.kls-story .soy-stat--1 {right:0}
    body.kls-story .soy-stat--2 {left:4%}
    body.kls-story .soy-label-card {padding:22px 18px}
    body.kls-story .soy-lc-ing {font-size:18px}
    body.kls-story .soy-shake-bottles {padding:20px 96px}
    body.kls-story .soy-sb {width:118px}
    body.kls-story .soy-shake-bottles {padding:20px 96px}
    body.kls-story .soy-sb-lines {left:calc(50% - 104px)} body.kls-story .soy-sb-lines--r {left:auto; right:calc(50% - 104px)}
    body.kls-story .soy-sb-tag::after {width:14px}
    body.kls-story .soy-board {padding:4px 16px}
    body.kls-story .soy-row {grid-template-columns:34px minmax(0,1fr); gap:6px 14px}
    body.kls-story .soy-row img {width:34px; grid-row:1 / span 2}
    body.kls-story .soy-row-side {grid-column:2; flex-direction:row; align-items:center; justify-content:space-between}
    body.kls-story .soy-row h3 {font-size:19px}
    body.kls-story .soy-taste {padding:22px 18px}
    body.kls-story .soy-ways-list {grid-template-columns:minmax(0,1fr); gap:26px}
    body.kls-story .soy-ways-list li {display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:center}
    body.kls-story .soy-ways-list li:first-child {grid-template-columns:minmax(0,1fr)}
    body.kls-story .soy-ways-list > li:first-child > img {max-width:300px; margin:0 auto}
    body.kls-story .soy-ways-list li:first-child h3 {font-size:22px}
    body.kls-story .soy-veg-grid {grid-template-columns:minmax(0,1fr); gap:20px}
    body.kls-story .soy-veg-pic {max-width:240px; margin:0 auto}
}
@media (max-width:374px) {
    body.kls-story .soy-shake-bottles {padding:20px 84px}
    body.kls-story .soy-sb {width:104px}
    body.kls-story .soy-stat {width:86px; height:86px}
    body.kls-story .soy-stat b {font-size:23px}
    body.kls-story .soy-stat--2 b {font-size:19px}
}
@media (prefers-reduced-motion: reduce) {
}

/* SGS: the real report page in place of the drawn card */
body.kls-story .kls-sgs-proof {align-self:center; max-width:520px; justify-self:center}

/* Menu rows: the nutrition-label link stays on one line. */
body.kls-story #page .soy-row-nl {white-space:nowrap}