/* Story layout for products redesigned one by one (product-pages/<id>.php). Builds on product-page.css. */
body.kls-story {
    --s-navy:#24406A; --s-blue:#3E8ED8; --s-sky:#A9DAF0; --s-mist:#EDF7FB; --s-ice:#F5FBFD;
    --s-yellow:#FCD33A; --s-cream:#FFF7D5; --s-muted:#5B6B82; --s-line:#D7E6F0; --s-price:#E0402B; --s-green:#2F8F5B;
}

/* ---------- purchase area ---------- */
body.kls-story #page .summary > .price {color:var(--s-price); font-size:36px; font-weight:800; line-height:1.2; margin:4px 0 18px}
body.kls-story #page .summary > .price del {color:var(--s-muted); font-size:.55em; font-weight:500; margin-right:6px; opacity:1}
body.kls-story #page .summary > .price ins {text-decoration:none}
body.kls-story .summary .woocommerce-product-details__short-description {background:none; border:0; border-radius:0; padding:0; margin:0 0 22px}
body.kls-story .kls-highlights {list-style:none; margin:0!important; padding:14px 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; border-top:1.5px solid var(--s-line); border-bottom:1.5px solid var(--s-line)}
body.kls-story .kls-highlights li {display:flex; align-items:center; gap:10px; margin:0!important; font-size:15px; line-height:1.45; font-weight:600; color:var(--s-navy)}
body.kls-story .kls-highlights li:first-child {grid-column:1/-1; font-size:17px}
body.kls-story .kls-highlights .kls-ic {flex:none; width:38px; height:38px}
body.kls-story .kls-highlights a {color:inherit!important; text-decoration:underline; text-decoration-color:var(--s-sky); text-underline-offset:4px}

/* YITH keeps its table (and its price logic); the buttons below are drawn from it. */
body.kls-story #page .summary .ywdpd-table-discounts-wrapper.kls-tiers-source {display:none}
body.kls-story .kls-tiers {margin:0 0 16px}
body.kls-story .kls-tiers-label {font-size:15px; font-weight:700; color:var(--s-navy); margin:0 0 10px}
body.kls-story .kls-tier-list {display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px}
body.kls-story #page .kls-tier {position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:92px; padding:14px 8px 12px; border:1.5px solid var(--s-line); border-radius:14px; background:#fff; color:var(--s-navy); font:inherit; line-height:1.3; text-transform:none; letter-spacing:0; cursor:pointer; transition:border-color .15s,background .15s; box-shadow:none}
body.kls-story #page .kls-tier:hover {border-color:var(--s-sky); background:#fff}
body.kls-story #page .kls-tier[aria-pressed="true"] {border-color:var(--s-navy); background:var(--s-mist); box-shadow:inset 0 0 0 1px var(--s-navy)}
body.kls-story .kls-tier-n {font-size:22px; font-weight:800}
body.kls-story .kls-tier-n small {font-size:13px; font-weight:600; margin-left:2px}
body.kls-story .kls-tier-p {font-size:17px; font-weight:800; color:var(--s-price)}
body.kls-story .kls-tier-p small {font-size:12px; font-weight:600}
body.kls-story .kls-tier-note {font-size:12px; color:var(--s-muted)}
body.kls-story .kls-tier-flag {position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--s-yellow); color:var(--s-navy); font-size:11.5px; font-weight:800; border-radius:999px; padding:1px 9px}
body.kls-story .kls-tier-list {grid-template-columns:repeat(3,minmax(0,1fr))}
body.kls-story #page .kls-tier.is-pick {border-color:#F26B1D; box-shadow:0 0 0 1px #F26B1D, 0 6px 16px rgba(242,107,29,.15)}
body.kls-story #page .kls-tier.is-pick[aria-pressed="true"] {background:#FFF4EA}
body.kls-story .kls-tier-flag.is-pick {background:linear-gradient(100deg,#E8432B,#F9A11B); color:#fff}
body.kls-story .kls-tier-note {font-weight:700}
body.kls-story .kls-meter {margin:12px 0 0; padding:10px 14px 12px; border:1px dashed var(--s-sky); border-radius:12px; background:var(--s-ice); font-size:14px; color:var(--s-navy)}
body.kls-story .kls-meter.is-done {background:#EAF7EF; border-color:#9fd6b5; color:#1d6b42}
body.kls-story .kls-meter-text {margin:0 0 8px; line-height:1.5}
body.kls-story .kls-meter-text b {color:var(--s-price)}
body.kls-story .kls-meter.is-done .kls-meter-text b {color:inherit}
body.kls-story .kls-meter-text small {display:block; color:var(--s-muted); font-size:12px}
body.kls-story .kls-meter-bar {position:relative; height:8px; border-radius:9px; background:#dbe9f2}
body.kls-story .kls-meter-fill {position:absolute; inset:0 auto 0 0; border-radius:9px; background:linear-gradient(90deg,var(--s-blue),#61b3ee); transition:width .35s}
body.kls-story .kls-meter.is-done .kls-meter-fill {background:linear-gradient(90deg,#3aa56c,#6cc795)}
body.kls-story .kls-meter-mark {display:none}

body.kls-story #page .quantity {height:54px}
body.kls-story #page .quantity :is(.minus,.plus,.qty) {height:54px; line-height:54px; border-color:var(--s-line)}
body.kls-story #page .quantity .minus {border-radius:14px 0 0 14px}
body.kls-story #page .quantity .plus {border-radius:0 14px 14px 0}
body.kls-story #page .summary .single_add_to_cart_button {min-height:54px; border-radius:14px; font-size:18px; font-weight:800; box-shadow:0 3px 0 #d9ae12; max-width:none}
body.kls-story #page .summary .single_add_to_cart_button:hover {background:#ffd84d; border-color:#ffd84d; color:var(--s-navy)}
body.kls-story .kls-add-total {font-weight:600; opacity:.7; margin-left:8px; font-size:15px}

body.kls-story .kls-sub-teaser {display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:12px 16px; border-radius:14px; border:1.5px solid #f3df90; background:var(--s-cream); color:var(--s-navy)!important; text-decoration:none!important}
body.kls-story .kls-sub-teaser .kls-ic {width:44px; height:44px; flex:none}
body.kls-story .kls-sub-teaser strong {display:block; font-size:16px}
body.kls-story .kls-sub-teaser strong + span {display:block; font-size:13px; color:var(--s-muted)}
body.kls-story .kls-sub-teaser {align-items:flex-start}
body.kls-story .kls-sub-teaser > div {flex:1; min-width:0}
body.kls-story .kls-sub-pills {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:420px; margin-top:10px}
body.kls-story .kls-sub-pill {display:flex; justify-content:center; align-items:center; gap:4px; min-height:42px; padding:0 8px; white-space:nowrap; border-radius:999px; background:#fff; border:1.5px solid var(--s-blue); color:var(--s-navy)!important; font-size:15px; font-weight:700; text-decoration:none!important; transition:background .15s, color .15s, border-color .15s}
body.kls-story .kls-sub-pill span {font-size:18px; line-height:1; color:var(--s-blue); transition:transform .15s, color .15s}
body.kls-story .kls-sub-pill:hover, body.kls-story .kls-sub-pill:focus-visible {background:var(--s-navy); border-color:var(--s-navy); color:#fff!important}
body.kls-story .kls-sub-pill:hover span, body.kls-story .kls-sub-pill:focus-visible span {color:var(--s-yellow); transform:translateX(2px)}

/* Delivery estimate: both carriers, each with its own cut-off clock. */
body.kls-story .kls-pdp-services {border:1.5px solid var(--s-line); border-radius:14px; padding:6px 14px; margin-bottom:14px}
body.kls-story .kls-pdp-delivery {display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--s-line)}
body.kls-story .kls-pdp-delivery > img {width:44px; height:30px}
body.kls-story .kls-pdp-delivery > div {display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:baseline}
body.kls-story .kls-pdp-eyebrow {grid-column:1/-1; font-size:13px; color:var(--s-muted); font-weight:500}
body.kls-story .kls-pdp-arrival {font-size:17px; color:var(--s-navy)}
body.kls-story .kls-pdp-countdown {font-size:14px; font-weight:700; color:var(--s-price)}
body.kls-story .kls-pdp-estimate-note {min-height:36px; margin:0; border-bottom:1px solid var(--s-line)}
body.kls-story .kls-pdp-delivery-options {padding:8px 0}
body.kls-story .kls-pdp-pickup {background:none; padding:4px 0; min-height:44px}
body.kls-story .kls-pdp-payment-options {border-top:1px solid var(--s-line)}

/* ---------- sections ---------- */
body.kls-story .kls-story-body {clear:both; margin:36px calc(50% - 50vw) 0; font-size:16px; line-height:1.7; color:#1B2B44}
body.kls-story .kls-wrap {max-width:1180px; margin:0 auto; padding:0 24px}
body.kls-story .kls-sec {padding:80px 0; scroll-margin-top:64px}
body.kls-story .kls-head {text-align:center; max-width:720px; margin:0 auto 44px}
body.kls-story .kls-eyebrow {margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--s-blue)}
body.kls-story .kls-story-body h2 {margin:0; font-size:clamp(26px,3.2vw,38px); line-height:1.25; color:var(--s-navy); font-weight:800}
body.kls-story .kls-lede {margin:14px auto 0; font-size:17px; color:var(--s-muted)}
body.kls-story .kls-story-body h3 {color:var(--s-navy); margin:0; font-weight:800}

body.kls-story .kls-jump {position:sticky; top:0; z-index:30; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-top:1px solid #eef2f6; border-bottom:1px solid #eef2f6}
.admin-bar.kls-story .kls-jump {top:32px}
body.kls-story .kls-jump-in {max-width:1180px; margin:0 auto; padding:10px 24px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
body.kls-story .kls-jump-in::-webkit-scrollbar {display:none}
body.kls-story .kls-jump a {flex:none; padding:8px 16px; border:1.5px solid var(--s-line); border-radius:999px; font-size:14px; font-weight:700; color:var(--s-navy); text-decoration:none; background:#fff}
body.kls-story .kls-jump a:hover, body.kls-story .kls-jump a.is-on {background:var(--s-navy); border-color:var(--s-navy); color:#fff}

body.kls-story .kls-ticker {background:var(--s-yellow); border-top:2px solid var(--s-navy); border-bottom:2px solid var(--s-navy); overflow:hidden}
body.kls-story .kls-ticker-track {display:flex; width:max-content; animation:kls-tick 46s linear infinite}
body.kls-story .kls-ticker span {display:flex; align-items:center; gap:24px; padding:13px 24px 13px 0; font-weight:800; color:var(--s-navy); white-space:nowrap}
body.kls-story .kls-ticker span::after {content:"✦"; color:var(--s-blue)}
@keyframes kls-tick {to {transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce) {body.kls-story .kls-ticker-track {animation:none}}
body.kls-story.kls-scrolling .kls-ticker-track {animation-play-state:paused}

/* inside: bottle with callouts */
body.kls-story .kls-inside {background:linear-gradient(180deg,#fff 0,var(--s-mist) 100%)}
body.kls-story .kls-anat {position:relative; display:grid; grid-template-columns:1fr 300px 1fr; align-items:center; max-width:1000px; margin:0 auto}
body.kls-story .kls-anat-lines {position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1}
body.kls-story .kls-anat-bottle {position:relative; z-index:2}
body.kls-story .kls-anat-bottle::before {content:""; position:absolute; inset:14% -6% 4%; border-radius:50%; background:radial-gradient(circle,#fff 0,rgba(169,218,240,.6) 58%,transparent 72%); z-index:-1}
body.kls-story .kls-anat-bottle img {width:100%; height:auto; display:block}
body.kls-story .kls-call {padding:16px 0}
body.kls-story .kls-call h3 {display:flex; align-items:center; gap:10px; font-size:19px; line-height:1.35}
body.kls-story .kls-call p {margin:6px 0 0; font-size:15px; color:var(--s-muted)}
body.kls-story .kls-call a {color:var(--s-blue); font-weight:700; white-space:nowrap}
body.kls-story .kls-num {flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--s-navy); color:#fff; font-size:14px; font-weight:800}
body.kls-story .kls-anat-left .kls-call {text-align:right; padding-right:28px}
body.kls-story .kls-anat-left .kls-call h3 {flex-direction:row-reverse; justify-content:flex-start}
body.kls-story .kls-anat-right .kls-call {padding-left:28px}

/* making: four illustrated steps on navy */
body.kls-story .kls-making {background:var(--s-navy)}
body.kls-story .kls-making h2, body.kls-story .kls-making h3 {color:#fff}
body.kls-story .kls-making .kls-eyebrow {color:var(--s-yellow)}
body.kls-story .kls-making .kls-lede {color:#c8d6e8}
body.kls-story .kls-steps {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:s}
body.kls-story .kls-steps li {position:relative; text-align:center; margin:0}
body.kls-story .kls-steps li:not(:last-child)::after {content:""; position:absolute; top:96px; left:calc(50% + 104px); width:calc(100% - 180px); border-top:3px dotted var(--s-yellow)}
body.kls-story .kls-step-pic {width:200px; height:200px; margin:0 auto; border-radius:50%; background:#EAF6FC; border:5px solid var(--s-yellow); display:grid; place-items:center; overflow:hidden}
body.kls-story .kls-step-pic img {width:76%; height:76%; object-fit:contain}
body.kls-story .kls-step-n {display:inline-grid; place-items:center; width:30px; height:30px; margin:16px 0 6px; border-radius:50%; background:var(--s-yellow); color:var(--s-navy); font-weight:800; font-size:14px}
body.kls-story .kls-steps h3 {font-size:19px}
body.kls-story .kls-steps p {margin:6px auto 0; max-width:240px; font-size:15px; color:#c8d6e8}

/* compare: our column highlighted */
body.kls-story .kls-cmp-scroll {max-width:940px; margin:0 auto}
body.kls-story .kls-story-body table.kls-cmp {width:100%; border-collapse:separate; border-spacing:0; border:0; margin:0; table-layout:fixed}
body.kls-story .kls-cmp :is(th,td) {padding:16px 12px; border:0; border-top:1.5px solid var(--s-line); background:none; text-align:center; vertical-align:middle; font-size:15px; line-height:1.5; color:var(--s-muted)}
body.kls-story .kls-cmp thead :is(th,td) {border-top:0; vertical-align:bottom; color:var(--s-navy); font-weight:800; font-size:16px}
body.kls-story .kls-cmp thead th .kls-ic {display:block; margin:0 auto 8px; width:44px; height:44px}
body.kls-story .kls-cmp thead th span {display:block}
body.kls-story .kls-cmp tbody th {text-align:left; color:var(--s-navy); font-weight:800; width:22%}
body.kls-story .kls-cmp .is-us {background:var(--s-yellow); color:var(--s-navy); font-weight:800; border-top-color:rgba(36,64,106,.16)}
body.kls-story .kls-cmp thead .is-us {border-radius:20px 20px 0 0; padding-top:0}
body.kls-story .kls-cmp thead .is-us img {width:60px; height:auto; margin:-36px auto 6px; display:block}
body.kls-story .kls-cmp tbody tr:last-child .is-us {border-radius:0 0 20px 20px}

/* label + care */
body.kls-story .kls-label {background:var(--s-ice)}
body.kls-story .kls-label-grid {display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; align-items:start}
body.kls-story .kls-nutrition {background:#fff; border:2.5px solid #1B2B44; padding:18px 20px; box-shadow:8px 8px 0 var(--s-sky); font-size:14px; line-height:1.55}
body.kls-story .kls-nutrition > h2 {display:none}
body.kls-story .kls-nutrition .kefir-label-section {margin:0 0 14px}
body.kls-story .kls-nutrition .kefir-label-section:last-child {margin:0}
body.kls-story .kls-nutrition h3 {font-size:20px; color:#1B2B44; border-bottom:6px solid #1B2B44; padding-bottom:4px; margin:0 0 8px}
body.kls-story .kls-nutrition .kefir-nutrition-table {overflow:visible!important; max-width:none!important; margin:8px 0}
body.kls-story .kls-nutrition table.kefir-nutrition-facts {min-width:0!important; width:100%; border:0; border-collapse:collapse; margin:0}
body.kls-story .kls-nutrition table.kefir-nutrition-facts :is(th,td) {font-style:normal; padding:5px 0; border:0; border-bottom:1px solid #1B2B44; background:none; font-size:14px; text-align:right; color:#1B2B44}
body.kls-story .kls-nutrition table.kefir-nutrition-facts :is(th[scope=row]) {text-align:left; font-weight:700}
body.kls-story .kls-nutrition table.kefir-nutrition-facts thead th {border-bottom:3px solid #1B2B44; font-size:12.5px; font-weight:800}
body.kls-story .kls-nutrition table.kefir-nutrition-facts thead th:first-child {text-align:left}
body.kls-story .kls-care {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:30px 28px}
body.kls-story .kls-care li {display:grid; grid-template-columns:64px 1fr; gap:14px; margin:0}
body.kls-story .kls-care .kls-ic {width:64px; height:64px}
body.kls-story .kls-care h3 {font-size:17px}
body.kls-story .kls-care p {margin:4px 0 0; font-size:15px; color:var(--s-muted)}

/* reviews */
body.kls-story .kls-scores {display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin:-12px 0 40px}
body.kls-story .kls-score {display:grid; justify-items:center; gap:2px; min-width:220px; padding:16px 22px; border:1.5px solid var(--s-line); border-radius:18px; text-decoration:none!important; color:var(--s-muted)!important; font-size:14px}
body.kls-story .kls-score-n {font-size:44px; font-weight:900; line-height:1.1; color:var(--s-navy)}
body.kls-story .kls-stars {--r:5; display:inline-block; font-size:18px; letter-spacing:2px; line-height:1; background:linear-gradient(90deg,#F2B705 calc(var(--r)/5*100%),#dfe6ee 0); -webkit-background-clip:text; background-clip:text; color:transparent}
body.kls-story .kls-stars::before {content:"★★★★★"}
body.kls-story .kls-videos {display:grid; grid-template-columns:repeat(3,minmax(0,240px)); justify-content:center; gap:20px; margin-bottom:40px}
body.kls-story .kls-video {margin:0}
body.kls-story .kls-video video {display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:18px; background:#e9eef2}
body.kls-story .kls-video figcaption {padding-top:10px; font-size:13px; color:var(--s-muted)}
body.kls-story .kls-video figcaption strong {display:block; font-size:15px; color:var(--s-navy)}
body.kls-story .kls-shopee {columns:4 220px; column-gap:18px}
body.kls-story .kls-sr {break-inside:avoid; margin:0 0 18px; border:1.5px solid var(--s-line); border-radius:16px; overflow:hidden; background:#fff}
body.kls-story .kls-sr img {display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
body.kls-story .kls-sr figcaption {padding:12px 14px 14px}
body.kls-story .kls-sr .kls-stars {font-size:14px}
body.kls-story .kls-sr blockquote {margin:6px 0 8px; padding:0; border:0; font-size:15px; line-height:1.6; font-style:normal; color:#1B2B44}
body.kls-story .kls-who {font-size:12px; color:var(--s-muted)}
body.kls-story .kls-src {text-align:center; margin:10px 0 0; font-size:14px}
body.kls-story .kls-src a {color:var(--s-blue); font-weight:700}
body.kls-story .kls-site-reviews {margin-top:56px; padding-top:40px; border-top:1.5px solid var(--s-line)}
body.kls-story .kls-native img {max-width:100%; height:auto}
body.kls-story .kls-native :is(iframe,video) {max-width:100%}

body.kls-story .kls-qna {padding-top:0}
body.kls-story .kls-qna .cr-qna-block h2, body.kls-story .kls-qna > .kls-wrap > h2 {text-align:center; font-size:clamp(24px,3vw,32px); color:var(--s-navy); margin:0 0 24px}

/* delivery */
body.kls-story .kls-delivery {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-story .kls-ways {display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center}
body.kls-story .kls-way-ill {width:160px; height:160px; object-fit:contain; margin:0 auto}
body.kls-story .kls-way-logo {height:26px; width:auto; margin:14px auto 8px; display:block}
body.kls-story .kls-way h3 {font-size:18px}
body.kls-story .kls-way p {margin:6px 0 0; font-size:14px; color:var(--s-muted)}
body.kls-story .kls-way .kls-fee {font-size:15px; color:var(--s-navy)}
body.kls-story .kls-way .kls-fee b {color:var(--s-green)}
body.kls-story .kls-policies {max-width:860px; margin:44px auto 0}

/* details blocks: delivery/payment policy, FAQ, full description */
body.kls-story .kls-story-body details {border-bottom:1.5px solid var(--s-line)}
body.kls-story .kls-story-body summary {list-style:none; cursor:pointer; position:relative; padding:20px 44px 20px 0; font-size:18px; font-weight:800; color:var(--s-navy)}
body.kls-story .kls-story-body summary::-webkit-details-marker {display:none}
body.kls-story .kls-story-body summary::after {content:"+"; position:absolute; right:6px; top:12px; font-size:30px; font-weight:400; color:var(--s-blue); transition:transform .2s}
body.kls-story .kls-story-body details[open] > summary::after {transform:rotate(45deg)}
body.kls-story .kls-story-body details > :not(summary) {padding-bottom:22px}
body.kls-story .kls-faq-list {max-width:860px; margin:0 auto}
body.kls-story .kls-faq-list p {margin:0; color:var(--s-muted)}
body.kls-story .kls-more {padding-top:0}
body.kls-story .kls-more .kls-wrap {max-width:900px}
body.kls-story .kls-description :is(ul,ol) {padding-left:1.2em; margin-left:0}

/* ---------- tablet / phone ---------- */
@media (max-width:1023px) {
 body.kls-story .kls-anat {grid-template-columns:1fr 220px 1fr}
 body.kls-story .kls-steps {grid-template-columns:repeat(2,1fr); row-gap:44px}
 body.kls-story .kls-steps li::after {display:none}
 body.kls-story .kls-label-grid {grid-template-columns:minmax(0,1fr)}
 body.kls-story .kls-nutrition {max-width:520px; margin-right:8px}
 body.kls-story .kls-highlights {grid-template-columns:minmax(0,1fr)}
 body.kls-story .kls-highlights li:first-child {font-size:15px}
 body.kls-story .kls-pdp-delivery > div {display:block}
 body.kls-story .kls-pdp-arrival {display:inline; margin-right:8px}
 body.kls-story .kls-pdp-countdown {display:inline-block; min-height:0}
}
@media (max-width:767px) {
 body.kls-story #page .summary > .price {font-size:32px}
 body.kls-story .kls-highlights {grid-template-columns:minmax(0,1fr); gap:10px}
 body.kls-story .kls-highlights li, body.kls-story .kls-highlights li:first-child {font-size:16px}
 body.kls-story .kls-highlights .kls-ic {width:34px; height:34px}
 body.kls-story .kls-tier-list {grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
 body.kls-story .kls-tier-n {font-size:19px}
 body.kls-story .kls-tier-p {font-size:15px}
 body.kls-story .summary form.cart:not(.variations_form) {flex-wrap:nowrap}
 body.kls-story #page .summary .single_add_to_cart_button {font-size:17px; padding:12px 10px}
 body.kls-story .kls-add-total {display:none}
 body.kls-story .kls-story-body {margin-top:24px}
 body.kls-story .kls-wrap, body.kls-story .kls-jump-in {padding-left:16px; padding-right:16px}
 body.kls-story .kls-sec {padding:56px 0}
 body.kls-story .kls-head {margin-bottom:30px; text-align:left}
 body.kls-story .kls-lede {font-size:16px}
 body.kls-story .kls-jump a {padding:7px 13px; font-size:13.5px}
 body.kls-story .kls-anat {grid-template-columns:minmax(0,1fr)}
 body.kls-story .kls-anat-lines {display:none}
 body.kls-story .kls-anat-bottle {order:-1; width:56%; margin:0 auto 8px}
 body.kls-story .kls-anat-left .kls-call, body.kls-story .kls-anat-right .kls-call {text-align:left; padding:12px 0; border-bottom:1px solid var(--s-line)}
 body.kls-story .kls-anat-left .kls-call h3 {flex-direction:row}
 body.kls-story .kls-call h3 {font-size:17px}
 body.kls-story .kls-steps {gap:34px 14px}
 body.kls-story .kls-step-pic {width:136px; height:136px; border-width:4px}
 body.kls-story .kls-steps h3 {font-size:16px}
 body.kls-story .kls-steps p {font-size:13.5px}
 body.kls-story .kls-cmp-scroll {padding-top:36px}
 body.kls-story .kls-cmp :is(th,td) {padding:12px 4px; font-size:13px}
 body.kls-story .kls-cmp thead :is(th,td) {font-size:13.5px}
 body.kls-story .kls-cmp thead th .kls-ic {width:34px; height:34px}
 body.kls-story .kls-cmp thead .is-us img {width:44px; margin-top:-30px}
 body.kls-story .kls-cmp tbody th {width:19%; padding-left:0}
 body.kls-story .kls-pdp-delivery > div {display:block}
 body.kls-story .kls-pdp-arrival {display:inline; margin-right:8px}
 body.kls-story .kls-pdp-countdown {display:inline-block; min-height:0}
 body.kls-story .kls-care {grid-template-columns:minmax(0,1fr); gap:20px}
 body.kls-story .kls-care li {grid-template-columns:52px 1fr}
 body.kls-story .kls-care .kls-ic {width:52px; height:52px}
 body.kls-story .kls-scores {justify-content:flex-start; flex-wrap:nowrap; gap:10px; margin:0 0 28px}
 body.kls-story .kls-score {min-width:0; flex:1; padding:12px 8px; font-size:12.5px; text-align:center}
 body.kls-story .kls-score-n {font-size:34px}
 body.kls-story .kls-videos {display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 0 28px; gap:12px; justify-content:flex-start}
 body.kls-story .kls-video {flex:0 0 62%; scroll-snap-align:start}
 body.kls-story .kls-shopee {columns:2; column-gap:10px}
 body.kls-story .kls-sr {margin-bottom:10px; border-radius:12px}
 body.kls-story .kls-sr figcaption {padding:10px}
 body.kls-story .kls-sr blockquote {font-size:14px}
 body.kls-story .kls-ways {grid-template-columns:minmax(0,1fr); gap:18px; text-align:left}
 body.kls-story .kls-way {display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--s-line)}
 body.kls-story .kls-way-ill {width:88px; height:88px}
 body.kls-story .kls-way-logo {margin:0 0 6px; height:22px}
 body.kls-story .kls-way h3 {font-size:16px}
 body.kls-story .kls-story-body summary {font-size:16px; padding:16px 40px 16px 0}
}

/* ---------- sections built from the long description ---------- */
/* One-shot animations start when a block scrolls into view (.is-in, product-story.js). */
body.kls-story .kls-anim {--d:0s}
@media (prefers-reduced-motion:reduce) {body.kls-story .kls-anim, body.kls-story .kls-anim * {animation:none!important; transition:none!important}}
/* In-app browsers (LINE/Facebook): pause motion while the page is touched or scrolled. */
html.kls-iab body.kls-story.kls-scrolling :is(.kls-anim, .kls-anim *) {animation-play-state:paused!important}
/* Hidden only until their entrance starts, and only when the script runs. */
body.kls-story.kls-js :is(li.kls-anim, .kls-type.kls-anim):not(.is-in), body.kls-story.kls-js .kls-route:not(.is-in) li, body.kls-story.kls-js .kls-books:not(.is-in) .kls-book, body.kls-story.kls-js .kls-stamp:not(.is-in) {opacity:0}
@keyframes kls-rise {from {opacity:0; transform:translateY(18px)} to {opacity:1; transform:none}}
@keyframes kls-pop {0% {opacity:0; transform:scale(.6)} 70% {transform:scale(1.08)} 100% {opacity:1; transform:none}}

/* origin + benefits */
body.kls-story .kls-origin-grid {display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:center}
body.kls-story .kls-route {list-style:none; margin:0; padding:0; position:relative; display:grid; gap:26px}
body.kls-story .kls-route::before {content:""; position:absolute; left:31px; top:30px; bottom:30px; border-left:3px dashed var(--s-sky)}
body.kls-story .kls-route li {position:relative; display:grid; grid-template-columns:64px 1fr; column-gap:18px; align-items:center; margin:0}
body.kls-story .kls-route-dot {grid-row:span 2; width:64px; height:64px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 5px #fff}
body.kls-story .kls-route-dot .kls-ic {width:60px; height:60px}
body.kls-story .kls-route strong {font-size:20px; color:var(--s-navy)}
body.kls-story .kls-route li > span:last-child {color:var(--s-muted); font-size:15px}
body.kls-story .kls-route.is-in li {animation:kls-rise .6s both; animation-delay:calc(var(--i)*.35s)}
body.kls-story .kls-benefits ul {list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
body.kls-story .kls-benefits li {margin:0; text-align:center; font-weight:800; color:var(--s-navy); font-size:16px}
body.kls-story .kls-benefits li .kls-ic {width:72px; height:72px; display:block; margin:0 auto 8px}
body.kls-story .kls-benefits li.is-in {animation:kls-pop .55s both; animation-delay:calc(.2s + var(--i)*.18s)}
body.kls-story .kls-quote {margin:0; padding:16px 20px; border-left:4px solid var(--s-yellow); background:var(--s-cream); border-radius:0 12px 12px 0; font-size:16px; color:var(--s-navy); font-weight:600}

/* SGS */
body.kls-story .kls-sgs {background:var(--s-navy); color:#fff}
body.kls-story .kls-sgs h2, body.kls-story .kls-sgs h3 {color:#fff}
body.kls-story .kls-sgs .kls-eyebrow {color:var(--s-yellow)}
body.kls-story .kls-sgs-grid {display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:center}
body.kls-story .kls-big {display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:18px 0 8px}
body.kls-story .kls-per {width:100%; color:#c8d6e8; font-size:16px}
body.kls-story .kls-num-big {font-size:clamp(72px,10vw,120px); font-weight:900; line-height:1; color:var(--s-yellow); font-variant-numeric:tabular-nums}
body.kls-story .kls-unit {font-size:22px; font-weight:800}
body.kls-story .kls-sgs-count > p:last-child {color:#c8d6e8; margin:14px 0 0}
body.kls-story .kls-microbes {display:grid; grid-template-columns:repeat(14,1fr); gap:8px; max-width:420px; margin-top:16px}
body.kls-story .kls-microbes i {aspect-ratio:1; border-radius:50%; background:var(--s-sky); opacity:.25}
body.kls-story .kls-sgs-count.is-in .kls-microbes i {animation:kls-cell 2s both}
body.kls-story .kls-microbes i:nth-child(3n) {animation-delay:.3s!important} body.kls-story .kls-microbes i:nth-child(3n+1) {animation-delay:.7s!important} body.kls-story .kls-microbes i:nth-child(5n) {animation-delay:1.1s!important}
@keyframes kls-cell {to {opacity:1}}
body.kls-story .kls-sgs-tests {position:relative; background:#fff; color:var(--s-navy); border-radius:20px; padding:26px 26px 20px}
body.kls-story .kls-sgs-tests h3 {color:var(--s-navy); font-size:18px; margin-bottom:10px}
body.kls-story .kls-sgs-tests ul {list-style:none; margin:0; padding:0}
body.kls-story .kls-sgs-tests li {display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-bottom:1px dashed var(--s-line); margin:0; font-weight:700; font-size:16px}
body.kls-story .kls-sgs-tests li b {flex:none; color:var(--s-green); background:#E7F5EC; border-radius:999px; padding:2px 12px; font-size:13px}
body.kls-story .kls-sgs-tests li.is-in {animation:kls-rise .5s both; animation-delay:calc(var(--i)*.2s)}
body.kls-story .kls-sgs-tests .kls-src {text-align:left; color:var(--s-muted); font-size:13px}
body.kls-story .kls-stamp {position:absolute; top:-26px; right:-14px; width:96px; height:96px; border-radius:50%; border:4px double #D33A2C; color:#D33A2C; display:grid; place-items:center; font-weight:900; font-size:17px; background:#fff; transform:rotate(-14deg)}
body.kls-story .kls-stamp.is-in {animation:kls-stamp .5s 1s both}
@keyframes kls-stamp {from {opacity:0; transform:rotate(-14deg) scale(1.8)} to {opacity:1; transform:rotate(-14deg) scale(1)}}

/* experts + bookshelf */
body.kls-story .kls-experts-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:end}
body.kls-story .kls-quotes figure {margin:0 0 26px; padding-left:22px; border-left:4px solid var(--s-sky)}
body.kls-story .kls-quotes blockquote {margin:0; padding:0; border:0; font-size:20px; line-height:1.55; font-style:normal; color:var(--s-navy); font-weight:600}
body.kls-story .kls-quotes figcaption {margin-top:8px; color:var(--s-muted); font-size:14px}
body.kls-story .kls-shelf-title {font-weight:800; color:var(--s-navy); margin:0 0 12px}
body.kls-story .kls-books {display:flex; align-items:flex-end; gap:10px; height:230px; padding:0 14px}
body.kls-story .kls-book {flex:1; height:calc(190px + var(--i)*8px); max-width:90px; background:var(--c); border-radius:6px 6px 2px 2px; box-shadow:inset -8px 0 0 rgba(0,0,0,.12); padding:14px 8px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:space-between; writing-mode:vertical-rl; text-orientation:mixed; transform-origin:bottom left; transition:transform .25s}
body.kls-story .kls-book:nth-child(2) {height:214px; transform:rotate(-4deg)}
body.kls-story .kls-book:hover {transform:translateY(-8px)}
body.kls-story .kls-book strong {font-size:15px; letter-spacing:.06em}
body.kls-story .kls-book span {font-size:12px; opacity:.9}
body.kls-story .kls-books.is-in .kls-book {animation:kls-rise .5s both; animation-delay:calc(var(--i)*.15s)}
body.kls-story .kls-shelf-board {height:14px; border-radius:4px; background:#C9A26B; box-shadow:0 6px 0 #A9844F}

/* enjoy */
body.kls-story .kls-enjoy {background:var(--s-ice)}
body.kls-story .kls-ways-eat {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center}
body.kls-story .kls-ways-eat li {margin:0}
body.kls-story .kls-ways-eat .kls-ic {width:96px; height:96px; display:block; margin:0 auto 10px; background:#fff; border-radius:50%; padding:12px; box-shadow:0 0 0 4px var(--s-yellow)}
body.kls-story .kls-ways-eat h3 {font-size:19px}
body.kls-story .kls-ways-eat p {margin:6px auto 0; max-width:280px; color:var(--s-muted)}
body.kls-story .kls-ways-eat li.is-in {animation:kls-rise .55s both; animation-delay:calc(var(--i)*.15s)}
body.kls-story .kls-day {position:relative; max-width:760px; margin:56px auto 0; text-align:center}
body.kls-story .kls-day > p {font-weight:800; color:var(--s-navy); margin:0 0 8px}
body.kls-story .kls-day-arc {position:relative; height:80px; border:3px dashed var(--s-sky); border-bottom:0; border-radius:400px 400px 0 0; margin:0 12%}
body.kls-story .kls-day-sun {position:absolute; width:28px; height:28px; border-radius:50%; background:var(--s-yellow); border:3px solid var(--s-navy); left:-14px; bottom:-14px; offset-path:path('M0 0'); }
body.kls-story .kls-day.is-in .kls-day-sun {animation:kls-sun 3s ease-in-out both}
@keyframes kls-sun {0% {left:-14px; bottom:-14px} 50% {left:calc(50% - 14px); bottom:66px} 100% {left:calc(100% - 14px); bottom:-14px}}
body.kls-story .kls-day ol {list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr)}
body.kls-story .kls-day li {margin:0; display:grid; justify-items:center; gap:4px; font-weight:700; color:var(--s-navy)}
body.kls-story .kls-day li .kls-ic {width:44px; height:44px}

/* Greek yogurt animation */
body.kls-story .kls-greek {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center; margin-top:72px; padding:40px; background:#fff; border-radius:28px; border:1.5px solid var(--s-line)}
body.kls-story .kls-greek h3 {font-size:clamp(22px,2.6vw,30px); line-height:1.3}
body.kls-story .kls-greek-copy > p:not(.kls-eyebrow) {color:var(--s-muted); margin:10px 0 0}
body.kls-story .kls-greek-steps {list-style:none; margin:20px 0; padding:0; display:grid; gap:8px}
body.kls-story .kls-greek-steps li {display:flex; align-items:center; gap:10px; margin:0; font-weight:700; color:var(--s-muted); transition:color .3s}
body.kls-story .kls-greek-steps li > span {width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--s-mist); color:var(--s-navy); font-size:13px; transition:background .3s}
body.kls-story .kls-greek-steps li.is-on {color:var(--s-navy)}
body.kls-story .kls-greek-steps li.is-on > span {background:var(--s-yellow)}
body.kls-story .kls-greek-scene {width:100%; height:auto; overflow:visible}
body.kls-story .kls-replay {margin-top:12px; background:none!important; border:0; color:var(--s-blue)!important; font:inherit; font-size:14px; font-weight:700; padding:6px 0; cursor:pointer}
body.kls-story .kls-greek-scene .gy-bottle {transform:translate(-70px,-60px) rotate(-60deg); opacity:0}
body.kls-story .kls-greek-scene .gy-stream {stroke-dasharray:90; stroke-dashoffset:90}
body.kls-story .kls-greek-scene .gy-fill, body.kls-story .kls-greek-scene .gy-whey {transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0)}
body.kls-story .kls-greek-scene .gy-drips circle {opacity:0}
body.kls-story .kls-greek-scene .gy-spoon {opacity:0}
body.kls-story .kls-greek-scene.is-in .gy-bottle {animation:gy-tilt 7s ease-in-out both}
body.kls-story .kls-greek-scene.is-in .gy-stream {animation:gy-pour 7s linear both}
body.kls-story .kls-greek-scene.is-in .gy-fill {animation:gy-fill 7s ease-out both}
body.kls-story .kls-greek-scene.is-in .gy-thick {animation:gy-thick 7s both}
body.kls-story .kls-greek-scene.is-in .gy-whey {animation:gy-whey 7s ease-out both}
body.kls-story .kls-greek-scene.is-in .gy-drips circle {animation:gy-drip 1s linear 3.2s 3}
body.kls-story .kls-greek-scene.is-in .gy-drips circle:nth-child(2) {animation-delay:3.5s}
body.kls-story .kls-greek-scene.is-in .gy-drips circle:nth-child(3) {animation-delay:3.8s}
body.kls-story .kls-greek-scene.is-in .gy-spoon {animation:gy-spoon 7s both}
@keyframes gy-tilt {0% {opacity:0; transform:translate(-70px,-60px) rotate(-60deg)} 8% {opacity:1; transform:translate(-30px,-30px) rotate(-50deg)} 16%,55% {opacity:1; transform:none} 66% {opacity:1; transform:translate(-30px,-30px) rotate(-50deg)} 74%,100% {opacity:0; transform:translate(-70px,-60px) rotate(-60deg)}}
@keyframes gy-pour {0%,15% {stroke-dashoffset:90; opacity:1} 22%,52% {stroke-dashoffset:0; opacity:1} 60%,100% {stroke-dashoffset:-90; opacity:0}}
@keyframes gy-fill {0%,18% {transform:scaleY(0)} 52% {transform:scaleY(1)} 80%,100% {transform:scaleY(.62)}}
@keyframes gy-thick {0%,62% {opacity:0} 85%,100% {opacity:1}}
@keyframes gy-whey {0%,40% {transform:scaleY(0)} 85%,100% {transform:scaleY(1)}}
@keyframes gy-drip {0% {opacity:0; transform:translateY(0)} 20% {opacity:1} 100% {opacity:0; transform:translateY(34px)}}
@keyframes gy-spoon {0%,82% {opacity:0; transform:translate(16px,-10px)} 95%,100% {opacity:1; transform:none}}

body.kls-story .kls-mini-product {display:flex; align-items:center; gap:12px; padding:10px 14px; border:1.5px solid var(--s-line); border-radius:14px; background:#fff; color:var(--s-navy)!important; text-decoration:none!important; max-width:380px}
body.kls-story .kls-mini-product img {width:56px; height:56px; object-fit:contain; border-radius:8px; margin:0!important}
body.kls-story .kls-mini-product strong {display:block; font-size:15px}
body.kls-story .kls-mini-product strong + span {font-size:14px; color:var(--s-price); font-weight:700}
body.kls-story .kls-mini-product .kls-go {margin-left:auto; font-size:22px}

/* which kefir */
body.kls-story .kls-types {display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
body.kls-story .kls-type {position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 20px 22px; border-radius:22px; background:var(--s-ice); color:var(--s-navy)!important; text-decoration:none!important; border:2px solid transparent; transition:transform .2s,border-color .2s}
body.kls-story a.kls-type:hover {transform:translateY(-4px); border-color:var(--s-sky)}
body.kls-story .kls-type.is-here {background:var(--s-cream); border-color:var(--s-yellow)}
body.kls-story .kls-type-here {position:absolute; top:-12px; background:var(--s-yellow); border-radius:999px; padding:2px 12px; font-size:12px; font-weight:800}
body.kls-story .kls-type .kls-ic {width:84px; height:84px}
body.kls-story .kls-type-who {font-size:20px; font-weight:900; margin:10px 0 6px}
body.kls-story .kls-type ul {list-style:none; margin:0 0 14px; padding:0; color:var(--s-muted); font-size:15px; line-height:1.8}
body.kls-story .kls-type ul li {margin:0}
body.kls-story .kls-type-name {margin-top:auto; font-size:17px}
body.kls-story .kls-type.is-in {animation:kls-rise .5s both; animation-delay:calc(var(--i)*.15s)}
body.kls-story .kls-diy {display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:28px; padding:22px 26px; border-radius:20px; border:1.5px dashed var(--s-sky)}
body.kls-story .kls-diy h3 {font-size:18px}
body.kls-story .kls-diy p {margin:4px 0 0; color:var(--s-muted); font-size:15px}

/* shelf-life timeline */
body.kls-story .kls-timeline {position:relative; max-width:900px; margin:48px auto 0; padding:0 0 92px}
body.kls-story .kls-tl-bar {height:20px; border-radius:20px; background:#e8eef3; overflow:hidden}
body.kls-story .kls-tl-fill {display:block; height:100%; width:100%; background:linear-gradient(90deg,#BFE6F6 0%,#FFF1AF 45%,#F7C26B 75%,#EE8B5B 100%); transform-origin:left; transform:scaleX(0)}
body.kls-story .kls-timeline.is-in .kls-tl-fill {animation:kls-fill 2.4s ease-out both}
@keyframes kls-fill {to {transform:none}}
body.kls-story .kls-tl-scale {position:absolute; top:-26px; left:0; right:0; display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--s-muted)}
body.kls-story .kls-tl-scale span:last-child {color:#C9652F}
body.kls-story .kls-tl-mark {position:absolute; top:-6px; left:calc(var(--p)*1%); transform:translateX(-50%); padding-top:52px; text-align:center; font-size:13px; color:var(--s-muted); width:110px; line-height:1.35}
body.kls-story .kls-tl-mark::before {content:""; position:absolute; top:0; left:50%; width:3px; height:30px; background:var(--s-navy); transform:translateX(-50%)}
body.kls-story .kls-tl-mark b {display:block; font-size:18px; color:var(--s-navy)}
body.kls-story .kls-tl-start {transform:none; text-align:left}
body.kls-story .kls-tl-start::before {left:1px}
body.kls-story .kls-tl-mark:last-child {transform:translateX(-100%); text-align:right}
body.kls-story .kls-tl-mark:last-child::before {left:auto; right:0}
body.kls-story .kls-fresh {padding-bottom:40px}
body.kls-story .kls-fresh + .kls-label {padding-top:40px}
body.kls-story .kls-label .kls-head {display:none}

/* alcohol, smell, pets */
body.kls-story .kls-bars {position:relative; max-width:820px; margin:0 auto; padding-top:8px}
body.kls-story .kls-bar-row {display:grid; grid-template-columns:150px 1fr 120px; gap:14px; align-items:center; padding:10px 0}
body.kls-story .kls-bar-name {font-weight:700; color:var(--s-navy); font-size:15px; text-align:right}
body.kls-story .kls-bar-track {position:relative; height:26px; background:var(--s-mist); border-radius:8px}
body.kls-story .kls-bar-val {position:absolute; top:0; bottom:0; left:0; width:max(10px,var(--b)); border-radius:8px; background:var(--s-sky)}
body.kls-story .kls-bar-row.is-range .kls-bar-val {left:var(--a); width:calc(var(--b) - var(--a)); background:repeating-linear-gradient(45deg,var(--s-sky) 0 8px,#cbe9f6 8px 16px)}
body.kls-story .kls-bar-row.is-us .kls-bar-val {background:var(--s-yellow); box-shadow:inset 0 0 0 2px var(--s-navy)}
body.kls-story .kls-bar-row b {font-size:16px; color:var(--s-navy)}
body.kls-story .kls-bars .kls-bar-val {transform-origin:left; transform:scaleX(0)}
body.kls-story .kls-bars.is-in .kls-bar-val {animation:kls-fill 1.2s ease-out both; animation-delay:calc(var(--i)*.25s)}
body.kls-story .kls-bar-limit {position:absolute; top:0; bottom:-26px; left:calc(164px + (100% - 298px) * var(--l)); border-left:3px dashed #D33A2C}
body.kls-story .kls-bar-limit span {position:absolute; bottom:-4px; left:8px; width:220px; font-size:12.5px; color:#D33A2C; font-weight:700}
body.kls-story .kls-after {max-width:820px; margin:52px auto 0; color:var(--s-muted)}
body.kls-story .kls-smell {max-width:900px; margin:64px auto 0}
body.kls-story .kls-smell h3, body.kls-story .kls-pets h3 {font-size:22px; text-align:center; margin-bottom:22px}
body.kls-story .kls-smell ol {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:44px; counter-reset:sm}
body.kls-story .kls-smell li {position:relative; margin:0; padding:18px; background:var(--s-ice); border-radius:16px; color:var(--s-navy); font-size:15px}
body.kls-story .kls-smell li:not(:last-child)::after {content:"→"; position:absolute; right:-34px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--s-yellow); font-weight:900}
body.kls-story .kls-smell li.is-in {animation:kls-rise .5s both; animation-delay:calc(var(--i)*.3s)}
body.kls-story .kls-pets {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; max-width:900px; margin:64px auto 0}
body.kls-story .kls-pets-pics {display:grid; grid-template-columns:1.1fr 1fr; gap:12px; align-items:end}
body.kls-story .kls-pets-pics img {width:100%; border-radius:18px; object-fit:cover; aspect-ratio:3/4}
body.kls-story .kls-pets-pics img:last-child {aspect-ratio:1}
body.kls-story .kls-pets h3 {text-align:left; margin-bottom:6px}
body.kls-story .kls-pets p {margin:0; color:var(--s-muted); font-size:17px}

@media (max-width:1023px) {
 body.kls-story .kls-origin-grid, body.kls-story .kls-sgs-grid, body.kls-story .kls-experts-grid, body.kls-story .kls-greek {grid-template-columns:minmax(0,1fr); gap:36px}
 body.kls-story .kls-greek {padding:28px}
}
@media (max-width:767px) {
 body.kls-story .kls-benefits li {font-size:14px}
 body.kls-story .kls-benefits li .kls-ic {width:58px; height:58px}
 body.kls-story .kls-microbes {grid-template-columns:repeat(10,1fr)}
 body.kls-story .kls-microbes i:nth-child(n+21) {display:none}
 body.kls-story .kls-stamp {width:76px; height:76px; font-size:14px; top:-22px; right:-4px}
 body.kls-story .kls-quotes blockquote {font-size:17px}
 body.kls-story .kls-books {height:200px; padding:0 4px; gap:6px}
 body.kls-story .kls-book {height:calc(160px + var(--i)*6px)}
 body.kls-story .kls-book:nth-child(2) {height:180px}
 body.kls-story .kls-book strong {font-size:13px}
 body.kls-story .kls-ways-eat {grid-template-columns:minmax(0,1fr); gap:22px; text-align:left}
 body.kls-story .kls-ways-eat li {display:grid; grid-template-columns:72px 1fr; column-gap:14px; align-items:center}
 body.kls-story .kls-ways-eat .kls-ic {grid-row:span 2; width:72px; height:72px; margin:0; padding:8px}
 body.kls-story .kls-ways-eat p {margin:2px 0 0}
 body.kls-story .kls-day-arc {margin:0 14%; height:56px}
 body.kls-story .kls-day li {font-size:13px}
 body.kls-story .kls-greek {padding:22px 18px; margin-top:52px; gap:18px}
 body.kls-story .kls-greek-scene {order:-1}
 body.kls-story .kls-types {grid-template-columns:minmax(0,1fr); gap:24px}
 body.kls-story .kls-type {display:grid; grid-template-columns:72px 1fr; text-align:left; column-gap:16px; align-items:center; padding:20px}
 body.kls-story .kls-type .kls-ic {grid-row:span 3; width:72px; height:72px}
 body.kls-story .kls-type-who {margin:0}
 body.kls-story .kls-type ul {display:flex; flex-wrap:wrap; gap:0 10px; margin:4px 0 6px; font-size:14px; line-height:1.6}
 body.kls-story .kls-type ul li:not(:last-child)::after {content:"・"; margin-left:10px; color:var(--s-sky)}
 body.kls-story .kls-type-here {top:-11px; left:20px}
 body.kls-story .kls-diy {flex-direction:column; align-items:stretch; padding:20px}
 body.kls-story .kls-timeline {padding-bottom:110px}
 body.kls-story .kls-tl-mark {width:78px; font-size:12px}
 body.kls-story .kls-tl-mark b {font-size:15px}
 body.kls-story .kls-bar-row {grid-template-columns:minmax(0,1fr) 72px; row-gap:4px}
 body.kls-story .kls-bar-name {grid-column:1/-1; text-align:left; font-size:14px}
 body.kls-story .kls-bar-limit {left:calc((100% - 86px) * var(--l)); bottom:-30px}
 body.kls-story .kls-bar-limit span {width:180px}
 body.kls-story .kls-smell ol {grid-template-columns:minmax(0,1fr); gap:30px}
 body.kls-story .kls-smell li:not(:last-child)::after {content:"↓"; right:auto; left:50%; top:auto; bottom:-30px; transform:translateX(-50%)}
 body.kls-story .kls-pets {grid-template-columns:minmax(0,1fr); gap:20px}
}

/* 7-ELEVEN chilled pickup row carries the NT$1,300 offer. */
body.kls-story .kls-pdp-pickup.has-deal {background:#F3FAF5; border:1.5px solid #CFE9D8; border-radius:12px; padding:10px 12px; margin:4px 0}
body.kls-story .kls-seven-deal {display:block; margin-top:4px; font-size:13.5px; font-weight:700; color:var(--s-navy)}
body.kls-story .kls-seven-deal b {color:var(--s-price)}
body.kls-story .kls-pdp-pickup.is-done .kls-seven-deal {color:#1d6b42}
body.kls-story .kls-pdp-pickup.is-done .kls-seven-deal b {color:inherit}

/* Review round 1 (2026-10-24) */
/* Section menu: a solid bar, not white pills. */
body.kls-story .kls-jump {background:var(--s-navy); border:0; box-shadow:0 4px 14px rgba(36,64,106,.18)}
body.kls-story .kls-jump-in {padding-top:8px; padding-bottom:8px; gap:4px}
body.kls-story .kls-jump a {border:0; background:transparent; color:#fff; padding:9px 16px}
body.kls-story .kls-jump a:hover {background:rgba(255,255,255,.12); color:#fff}
body.kls-story .kls-jump a.is-on {background:var(--s-yellow); color:var(--s-navy)}
body.kls-story .kls-ticker {border-bottom:0}
/* Statements without boxes or side rules. */
body.kls-story .kls-quote {background:none; border:0; border-radius:0; padding:0; font-size:22px; line-height:1.6; font-weight:800; color:var(--s-navy)}
body.kls-story .kls-quote::before {content:""; display:block; width:56px; height:6px; border-radius:6px; background:var(--s-yellow); margin-bottom:14px}
body.kls-story .kls-quotes figure {border:0; padding:0; position:relative; padding-top:34px}
body.kls-story .kls-quotes figure::before {content:"\201C"; position:absolute; top:-18px; left:-4px; font-size:84px; line-height:1; color:var(--s-yellow); font-family:Georgia,serif; font-weight:900}
/* Label checklist with two columns. */
body.kls-story .kls-cmp--2 {max-width:820px; margin:0 auto}
body.kls-story .kls-cmp--2 tbody th {width:24%}
body.kls-story .kls-cmp--2 td:not(.is-us) {color:var(--s-muted)}
body.kls-story .kls-cmp--2 .is-us {width:38%; font-size:16px}
/* Gallery follows the long purchase column on desktop, so the left side never sits empty. */
@media (min-width:1024px) {
 body.kls-story .kls-pdp-hero > .images {position:sticky!important; top:24px; align-self:start}
 .admin-bar.kls-story .kls-pdp-hero > .images {top:56px}
}

/* HCT row carries the free-delivery offer (the separate meter is gone). */
body.kls-story .kls-pdp-delivery > div .kls-deal {display:block; grid-column:1/-1; justify-self:start; margin-top:6px; padding:6px 10px; border-radius:8px; background:#F3FAF5; border:1px solid #CFE9D8; font-size:13.5px; font-weight:700; color:var(--s-navy)}
body.kls-story .kls-pdp-delivery > div .kls-deal b {color:var(--s-price)}
body.kls-story .kls-pdp-delivery > div.is-done .kls-deal {color:#1d6b42}

/* Member points: a navy card with a gold coin, matching the page's navy/yellow sections. */
body.kls-story #page .summary .yith-par-message-product {background:var(--s-navy)!important; border:0!important; border-radius:14px; padding:16px 18px!important; color:#fff!important; box-shadow:0 6px 18px rgba(36,64,106,.18)}
body.kls-story .kls-pdp-rewards {display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center}
body.kls-story .kls-pdp-rewards > svg {width:44px; height:44px; margin:0; padding:9px; border-radius:50%; background:var(--s-yellow); color:var(--s-navy); stroke-width:2}
body.kls-story .kls-pdp-rewards strong {font-size:16px; color:#fff}
body.kls-story .kls-pdp-rewards strong .product_point {color:var(--s-yellow); font-size:20px}
body.kls-story .kls-pdp-rewards strong + span {color:#c8d6e8; font-size:13.5px}
body.kls-story .kls-pdp-rewards strong + span .amount {color:var(--s-yellow); font-weight:800}
body.kls-story .kls-pdp-rewards .kls-pdp-join {display:inline-flex; min-height:38px; margin-top:10px; padding:0 16px; border-radius:999px; background:var(--s-yellow); color:var(--s-navy)!important; text-decoration:none!important; font-weight:800; font-size:14px; align-items:center}
body.kls-story .kls-pdp-rewards .kls-pdp-join:hover {background:#ffe36a}

/* Section menu as real tabs: folder tabs on a navy bar, the active one joins the white page. */
body.kls-story .kls-jump {background:var(--s-navy); box-shadow:none; border:0}
body.kls-story .kls-jump-in {padding:10px 24px 0; gap:6px; align-items:flex-end}
body.kls-story .kls-jump a {position:relative; padding:12px 18px 13px; border-radius:12px 12px 0 0; background:rgba(255,255,255,.1); color:#fff; font-size:15px}
body.kls-story .kls-jump a:hover {background:rgba(255,255,255,.2)}
body.kls-story .kls-jump a.is-on {background:#fff; color:var(--s-navy); box-shadow:inset 0 4px 0 var(--s-yellow)}
body.kls-story .kls-ticker {border-top:2px solid var(--s-navy); border-bottom:2px solid var(--s-navy)}
@media (max-width:767px) {body.kls-story .kls-jump-in {padding:8px 12px 0} body.kls-story .kls-jump a {padding:10px 14px 11px; font-size:14px}}
body.kls-story .kls-jump-in {max-width:1320px; gap:4px}
body.kls-story .kls-jump a {padding:12px 13px 13px; font-size:14px}

/* Member points as a compact coupon ticket (Taiwanese 點數回饋 style), replacing the navy card. */
body.kls-story #page .summary .yith-par-message-product {background:none!important; border:0!important; box-shadow:none; padding:0!important; margin:0 0 14px!important; color:var(--s-navy)!important}
body.kls-story .kls-pdp-rewards {position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:0; align-items:stretch; min-height:68px; border:1.5px solid #F2C94C; border-radius:12px; background:#FFFBEA; overflow:hidden}
body.kls-story .kls-pdp-rewards > svg {width:auto; height:100%; padding:20px; border-radius:0; background:var(--s-yellow); color:var(--s-navy); border-right:2px dashed #fff; box-sizing:border-box}
body.kls-story .kls-pdp-rewards::before, body.kls-story .kls-pdp-rewards::after {content:""; position:absolute; left:63px; width:16px; height:16px; border-radius:50%; background:#fff; border:1.5px solid #F2C94C}
body.kls-story .kls-pdp-rewards::before {top:-9px} body.kls-story .kls-pdp-rewards::after {bottom:-9px}
body.kls-story .kls-pdp-rewards > span {display:contents}
body.kls-story .kls-pdp-rewards > span > strong {grid-column:2; align-self:end; padding:10px 14px 0; font-size:15px; color:var(--s-navy)}
body.kls-story .kls-pdp-rewards strong .product_point {color:var(--s-price); font-size:20px; font-weight:900}
body.kls-story .kls-pdp-rewards > span > strong + span {grid-column:2; align-self:start; padding:0 14px 10px; font-size:13px; color:var(--s-muted)}
body.kls-story .kls-pdp-rewards strong + span .amount {color:var(--s-price); font-weight:800}
body.kls-story .kls-pdp-rewards .kls-pdp-join {grid-column:3; grid-row:1 / span 2; align-self:center; margin:0 14px 0 0; min-height:36px; padding:0 14px; border-radius:999px; background:var(--s-navy); color:#fff!important; font-size:13.5px; font-weight:800; text-decoration:none!important; display:inline-flex; align-items:center; white-space:nowrap}
body.kls-story .kls-pdp-rewards .kls-pdp-join:hover {background:#1a3155}
@media (max-width:1199px) { /* the buy-box column is phone-narrow up to 1199 px */
 body.kls-story .kls-pdp-rewards {grid-template-columns:60px minmax(0,1fr)}
 body.kls-story .kls-pdp-rewards::before, body.kls-story .kls-pdp-rewards::after {left:51px}
 body.kls-story .kls-pdp-rewards > svg {padding:16px; grid-row:1 / span 3}
 body.kls-story .kls-pdp-rewards .kls-pdp-join {grid-column:2; grid-row:3; justify-self:start; margin:0 14px 12px}
}
body.kls-story .kls-pdp-rewards {grid-template-rows:auto auto}
body.kls-story .kls-pdp-rewards > svg {grid-column:1; grid-row:1 / span 2; width:100%; height:100%; min-height:68px; padding:22px 20px; margin:0}
body.kls-story .kls-pdp-rewards > span > strong {grid-row:1}
body.kls-story .kls-pdp-rewards > span > strong + span {grid-row:2}
@media (max-width:1199px) {
 body.kls-story .kls-pdp-rewards {grid-template-rows:auto auto auto}
 body.kls-story .kls-pdp-rewards > svg {grid-row:1 / span 3; padding:0 14px}
 body.kls-story .kls-pdp-rewards > span > strong {padding-top:12px}
}
body.kls-story .kls-step-pic img {width:86%; height:86%}

/* Real SGS report pages with the result column marked. */
body.kls-story .kls-reports {display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:start; margin-top:56px}
body.kls-story .kls-report {display:block; color:#c8d6e8!important; text-decoration:none!important}
body.kls-story .kls-report-paper {position:relative; display:block; background:#fff; border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.35); transform:rotate(-1.5deg); transition:transform .25s}
body.kls-story .kls-report:nth-child(2) .kls-report-paper {transform:rotate(1.5deg)}
body.kls-story .kls-report:hover .kls-report-paper {transform:rotate(0) translateY(-4px)}
body.kls-story .kls-report-paper img {display:block; width:100%; height:auto; border-radius:6px}
body.kls-story .kls-report-mark {position:absolute; border:3px solid #E8432B; border-radius:8px; background:rgba(252,211,58,.28)}
body.kls-story .kls-report.is-in .kls-report-mark {animation:kls-pop .5s .6s both}
body.kls-story .kls-report-cap {display:block; margin-top:16px; font-size:14px; font-weight:700}
body.kls-story.kls-js .kls-report.kls-anim:not(.is-in) {opacity:0}
body.kls-story .kls-report.is-in {animation:kls-rise .6s both; animation-delay:calc(var(--i)*.2s)}
@media (max-width:767px) {body.kls-story .kls-reports {grid-template-columns:minmax(0,1fr); gap:28px; margin-top:40px}}

/* Any time of day: sky from morning to evening, sun travelling, three illustrated moments. */
body.kls-story .kls-day {max-width:1000px; margin:64px auto 0; text-align:center}
body.kls-story .kls-day-title {font-size:22px; font-weight:900; color:var(--s-navy); margin:0 0 18px}
body.kls-story .kls-day-sky {position:relative; height:180px; border-radius:28px 28px 0 0; background:linear-gradient(90deg,#FFE6B3 0%,#FFF3D1 22%,#BFE4F6 50%,#8FC4E8 72%,#5B6FA8 92%,#3D4E86 100%); overflow:hidden}
body.kls-story .kls-day-sky svg {position:absolute; inset:0; width:100%; height:100%}
body.kls-story .kls-day-sky::after {content:""; position:absolute; left:0; right:0; bottom:0; height:26px; background:linear-gradient(transparent,rgba(255,255,255,.55))}
body.kls-story .kls-day-sun {position:absolute; left:6%; top:120px; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#FFF6C4,#FCD33A 60%,#F2A81B); box-shadow:0 0 0 10px rgba(252,211,58,.25),0 0 40px rgba(252,211,58,.6); offset-path:none}
body.kls-story .kls-day.is-in .kls-day-sun {animation:kls-sunpath 4s ease-in-out both}
@keyframes kls-sunpath {0% {left:6%; top:120px} 25% {left:28%; top:50px} 50% {left:50%; top:32px} 75% {left:72%; top:50px} 100% {left:94%; top:120px; background:radial-gradient(circle at 35% 35%,#fff,#E9EEF8 60%,#C9D3EA); box-shadow:0 0 0 10px rgba(255,255,255,.18),0 0 30px rgba(255,255,255,.5)}}
body.kls-story .kls-day .kls-day-moments {list-style:none; margin:-58px 0 0; padding:0 20px 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; background:linear-gradient(transparent 58px,var(--s-ice) 58px); border-radius:0 0 28px 28px; position:relative}
body.kls-story .kls-day .kls-day-moments li {margin:0; display:grid; justify-items:center; gap:10px}
body.kls-story .kls-day .kls-day-moments img {width:100%; max-width:240px; height:auto; filter:drop-shadow(0 8px 10px rgba(36,64,106,.12))}
body.kls-story .kls-day .kls-day-moments span {font-size:17px; font-weight:800; color:var(--s-navy); background:#fff; border-radius:999px; padding:6px 16px; box-shadow:0 2px 0 var(--s-line)}
body.kls-story.kls-js .kls-day:not(.is-in) .kls-day-moments li {opacity:0}
body.kls-story .kls-day.is-in .kls-day-moments li {animation:kls-rise .6s both; animation-delay:calc(.6s + var(--i)*.9s)}
body.kls-story .kls-day-arc, body.kls-story .kls-day > ol:not(.kls-day-moments) {display:none}
@media (max-width:767px) {
 body.kls-story .kls-day-sky {height:120px; border-radius:20px 20px 0 0}
 body.kls-story .kls-day .kls-day-moments {margin-top:-40px; padding:0 10px 16px; gap:8px; background:linear-gradient(transparent 40px,var(--s-ice) 40px); border-radius:0 0 20px 20px}
 body.kls-story .kls-day .kls-day-moments span {font-size:13px; padding:4px 10px}
 @keyframes kls-sunpath {0% {left:6%; top:100px} 50% {left:50%; top:30px} 100% {left:94%; top:100px}}
}
body.kls-story .kls-day-sky {height:220px}
body.kls-story .kls-day .kls-day-moments {margin-top:-110px; background:linear-gradient(transparent 110px,var(--s-ice) 110px)}
@media (max-width:767px) {
 body.kls-story .kls-day-sky {height:140px}
 body.kls-story .kls-day .kls-day-moments {margin-top:-56px; background:linear-gradient(transparent 56px,var(--s-ice) 56px)}
 @keyframes kls-sunpath {0% {left:8%; top:110px} 50% {left:50%; top:34px} 100% {left:90%; top:110px; background:radial-gradient(circle at 35% 35%,#fff,#E9EEF8 60%,#C9D3EA); box-shadow:0 0 0 10px rgba(255,255,255,.18),0 0 30px rgba(255,255,255,.5)}}
}
@media (min-width:768px) {body.kls-story .kls-day .kls-day-moments {margin-top:-175px; background:linear-gradient(transparent 175px,var(--s-ice) 175px)}}

/* Greek yogurt: four detailed stages of the real cheese maker, looping (16 s) while on screen. */
body.kls-story .kls-greek {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.kls-story .kls-greek-stage {position:relative; aspect-ratio:1; max-width:520px; width:100%; margin:0 auto; border-radius:24px; background:radial-gradient(circle at 50% 60%,#fff 0,#EAF6FC 62%,#D7EDF8 100%)}
body.kls-story .kls-greek-frame {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; animation:kls-gframe 16s infinite; animation-delay:calc(var(--k) * 4s); animation-play-state:paused}
body.kls-story .kls-greek-frame:first-child {opacity:1}
body.kls-story .kls-greek-stage.is-playing .kls-greek-frame {animation-play-state:running}
@keyframes kls-gframe {0% {opacity:1; transform:scale(.98)} 25% {opacity:1; transform:scale(1.03)} 30% {opacity:0; transform:scale(1.04)} 100% {opacity:0}}
body.kls-story .kls-greek-steps li {animation:kls-gstep 16s infinite; animation-delay:calc(var(--i) * 4s); animation-play-state:paused}
body.kls-story .kls-greek:has(.is-playing) .kls-greek-steps li {animation-play-state:running}
@keyframes kls-gstep {0%,27% {color:var(--s-navy)} 30%,100% {color:var(--s-muted)}}
body.kls-story .kls-greek-steps li > span {animation:kls-gdot 16s infinite; animation-delay:calc(var(--i) * 4s); animation-play-state:inherit}
@keyframes kls-gdot {0%,27% {background:var(--s-yellow); transform:scale(1.15)} 30%,100% {background:var(--s-mist); transform:none}}
body.kls-story .kls-greek-drips {position:absolute; left:44%; top:66%; width:12%; height:14%; pointer-events:none; opacity:0; animation:kls-gdrops 16s infinite 4s; animation-play-state:inherit}
body.kls-story .kls-greek-stage.is-playing .kls-greek-drips {animation-play-state:running}
body.kls-story .kls-greek-drips i {position:absolute; top:0; width:7px; height:9px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:#E9DC9A; animation:kls-gdrip 1.1s linear infinite}
body.kls-story .kls-greek-drips i:nth-child(1) {left:10%} body.kls-story .kls-greek-drips i:nth-child(2) {left:48%; animation-delay:.4s} body.kls-story .kls-greek-drips i:nth-child(3) {left:85%; animation-delay:.75s}
@keyframes kls-gdrops {0%,2% {opacity:0} 5%,24% {opacity:1} 28%,100% {opacity:0}}
@keyframes kls-gdrip {0% {transform:translateY(0); opacity:0} 15% {opacity:1} 100% {transform:translateY(40px); opacity:0}}
body.kls-story .kls-greek-scene, body.kls-story .kls-replay {display:none}
@media (prefers-reduced-motion:reduce) {body.kls-story .kls-greek-frame {animation:none; opacity:0} body.kls-story .kls-greek-frame:last-of-type {opacity:1}}
@media (max-width:767px) {body.kls-story .kls-greek {grid-template-columns:minmax(0,1fr)} body.kls-story .kls-greek-stage {order:-1}}
body.kls-story .kls-greek-drips {display:none}

/* Which kefir: four real products. */
body.kls-story .kls-types--4 {grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
body.kls-story .kls-types--4 .kls-type {padding:22px 16px 18px; background:#fff; border:1.5px solid var(--s-line); display:flex; flex-direction:column; align-items:center; text-align:center}
body.kls-story .kls-types--4 .kls-type.is-here {background:var(--s-cream); border:2px solid var(--s-yellow)}
body.kls-story .kls-types--4 .kls-type-who {margin:0; font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--s-blue)}
body.kls-story .kls-type-photo {display:block; width:100%; max-width:220px; margin:8px auto 6px}
body.kls-story .kls-type-photo img {width:100%!important; height:auto!important; aspect-ratio:1; object-fit:contain; margin:0!important}
body.kls-story .kls-types--4 .kls-type-name {margin:4px 0 8px; font-size:18px; line-height:1.35; color:var(--s-navy)}
body.kls-story .kls-types--4 ul {margin:0 0 12px; font-size:14px; line-height:1.7}
body.kls-story .kls-type-price {margin-top:auto; font-size:16px; font-weight:800; color:var(--s-price)}
body.kls-story .kls-type-price b {color:var(--s-navy); margin-left:4px}
body.kls-story .kls-types--4 a.kls-type:hover {border-color:var(--s-blue); transform:translateY(-4px)}
@media (max-width:1023px) {body.kls-story .kls-types--4 {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px) {
 body.kls-story .kls-types--4 {gap:10px}
 body.kls-story .kls-types--4 .kls-type {display:flex; padding:16px 10px 14px}
 body.kls-story .kls-types--4 .kls-type-name {font-size:15px}
 body.kls-story .kls-types--4 ul {display:block; font-size:12.5px}
 body.kls-story .kls-types--4 ul li::after {content:none!important}
 body.kls-story .kls-types--4 .kls-type-here {left:50%; transform:translateX(-50%)}
}
body.kls-story .kls-types--4 .kls-type-here {white-space:nowrap}

/* Label row: nutrition label | product information; care tips in a row below. */
body.kls-story .kls-label .kls-label-grid {grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:48px; align-items:start}
body.kls-story .kls-info {background:#fff; border-radius:20px; padding:28px 30px; box-shadow:0 6px 20px rgba(36,64,106,.07)}
body.kls-story .kls-info h3 {font-size:20px; color:var(--s-navy); margin:0 0 14px}
body.kls-story .kls-specs {display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin:0 0 18px}
body.kls-story .kls-spec {display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px dashed var(--s-line)}
body.kls-story .kls-spec dt {font-size:14px; color:var(--s-muted); font-weight:600}
body.kls-story .kls-spec dd {margin:0; font-size:15px; font-weight:800; color:var(--s-navy); text-align:right}
body.kls-story .kls-info p {margin:10px 0 0; font-size:14.5px; line-height:1.7; color:var(--s-muted)}
body.kls-story .kls-info p strong {color:var(--s-navy)}
body.kls-story .kls-label .kls-care {grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 32px; margin-top:52px; padding-top:40px; border-top:1.5px solid var(--s-line)}
@media (max-width:1023px) {body.kls-story .kls-label .kls-label-grid {grid-template-columns:minmax(0,1fr)} body.kls-story .kls-label .kls-care {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px) {body.kls-story .kls-specs {grid-template-columns:minmax(0,1fr)} body.kls-story .kls-info {padding:20px} body.kls-story .kls-label .kls-care {grid-template-columns:minmax(0,1fr); margin-top:32px; padding-top:28px}}
body.kls-story .kls-spec dt strong {font-weight:600}

/* Nutrition rings. */
body.kls-story .kls-nutri-serving {text-align:center; margin:-24px 0 36px; font-weight:700; color:var(--s-blue)}
body.kls-story .kls-nutri-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
body.kls-story .kls-nutri-item {text-align:center}
body.kls-story .kls-ring {position:relative; width:150px; height:150px; margin:0 auto 12px}
body.kls-story .kls-ring > svg {width:100%; height:100%; transform:rotate(-90deg)}
body.kls-story .kls-ring-bg {fill:#fff; stroke:var(--s-mist); stroke-width:10}
body.kls-story .kls-ring-val {fill:none; stroke:var(--s-yellow); stroke-width:10; stroke-linecap:round; stroke-dasharray:var(--p) 100; transition:stroke-dasharray 1.4s ease-out}
body.kls-story.kls-js .kls-nutri-item:not(.is-in) .kls-ring-val {stroke-dasharray:0 100}
body.kls-story .kls-ring-icon {position:absolute; inset:0; display:grid; place-items:center}
body.kls-story .kls-ring-icon .kls-ic {width:64px; height:64px}
body.kls-story .kls-nutri-amount {margin:0; color:var(--s-navy)}
body.kls-story .kls-nutri-amount b {font-size:40px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums}
body.kls-story .kls-nutri-amount small {font-size:16px; font-weight:700}
body.kls-story .kls-nutri-item h3 {font-size:18px; margin:4px 0 2px}
body.kls-story .kls-nutri-dv {margin:0 0 8px; display:inline-block; background:var(--s-yellow); color:var(--s-navy); font-size:12.5px; font-weight:800; border-radius:999px; padding:2px 10px}
body.kls-story .kls-nutri-text {margin:6px 0 0; font-size:14.5px; color:var(--s-muted); line-height:1.65}
body.kls-story .kls-bars, body.kls-story .kls-after {display:none}
@media (max-width:1023px) {body.kls-story .kls-nutri-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px) {body.kls-story .kls-nutri-grid {gap:24px 12px} body.kls-story .kls-ring {width:110px; height:110px} body.kls-story .kls-ring-icon .kls-ic {width:46px; height:46px} body.kls-story .kls-nutri-amount b {font-size:30px} body.kls-story .kls-nutri-text {font-size:13px} body.kls-story .kls-nutri-serving {text-align:left; margin-top:-14px}}

/* Website reviews in the page's own design. */
body.kls-story .kls-site-reviews h3 {font-size:22px; text-align:center; margin:0 0 24px}
body.kls-story .kls-wr-grid {columns:3 280px; column-gap:18px}
body.kls-story .kls-wr {break-inside:avoid; margin:0 0 18px; background:#fff; border:1.5px solid var(--s-line); border-radius:16px; overflow:hidden}
body.kls-story .kls-wr img {display:block; width:100%; height:auto; max-height:320px; object-fit:cover}
body.kls-story .kls-wr figcaption {padding:16px 18px}
body.kls-story .kls-wr blockquote {margin:8px 0 10px; padding:0; border:0; font-style:normal; font-size:15.5px; line-height:1.7; color:#1B2B44}
body.kls-story .kls-wr-more {border:0!important; margin-top:6px}
body.kls-story .kls-wr-more > summary {text-align:center; padding:12px 0!important; font-size:15px!important; color:var(--s-blue)!important}
body.kls-story .kls-wr-more > summary::after {display:none}
body.kls-story .kls-wr-more > summary::before {content:"＋ "}
@media (max-width:767px) {body.kls-story .kls-wr-grid {columns:1}}

/* Delivery facts + payment, compact. */
body.kls-story .kls-dfacts {list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
body.kls-story .kls-dfacts li {margin:0; display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; background:#fff; border-radius:16px; padding:16px; box-shadow:0 4px 14px rgba(36,64,106,.06)}
body.kls-story .kls-dfacts .kls-ic {width:44px; height:44px}
body.kls-story .kls-dfacts strong {display:block; font-size:15px; color:var(--s-navy); line-height:1.4}
body.kls-story .kls-dfacts span {display:block; font-size:13.5px; color:var(--s-muted); margin-top:4px; line-height:1.5}
body.kls-story .kls-dpay {margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; padding:18px 22px; border-radius:16px; border:1.5px solid var(--s-line); background:#fff; scroll-margin-top:80px}
body.kls-story .kls-dpay-title {margin:0; font-weight:900; color:var(--s-navy)}
body.kls-story .kls-dpay-row {display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1}
body.kls-story .kls-dpay-logo img {height:26px; width:auto; display:block}
body.kls-story .kls-dpay-text {font-size:14px; color:var(--s-muted); margin-left:6px}
body.kls-story .kls-dpay-links {margin:0; display:flex; gap:18px}
body.kls-story .kls-dpay-links a {font-weight:700; color:var(--s-blue)!important; font-size:14px}
body.kls-story .kls-delivery {scroll-margin-top:60px}
@media (max-width:1023px) {body.kls-story .kls-dfacts {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px) {body.kls-story .kls-dfacts {grid-template-columns:minmax(0,1fr); gap:10px; margin-top:28px} body.kls-story .kls-dpay {padding:16px} body.kls-story .kls-dpay-text {flex-basis:100%; margin:0}}

/* Greek yogurt strainer: one coded SVG scene, 14 s loop.
   0–38% pour · 38–76% overnight in the fridge, whey drips · 76–88% thick, spoon scoops · 88–100% fruit on top. */
body.kls-story .kls-greek-frame {display:none}
body.kls-story .kls-greek-stage {background:radial-gradient(circle at 50% 62%,#FFFFFF 0,#EEF7FC 60%,#DCEEF8 100%); overflow:hidden}
body.kls-story .kls-greek-stage .gs {display:block; width:100%; height:100%}
body.kls-story .gs * {transform-box:view-box}
body.kls-story .gs .gs-all, body.kls-story .gs .gs-bottle, body.kls-story .gs .gs-stream, body.kls-story .gs .gs-kefir, body.kls-story .gs .gs-whey,
body.kls-story .gs .gs-drips, body.kls-story .gs .gs-thick, body.kls-story .gs .gs-bubbles, body.kls-story .gs .gs-night, body.kls-story .gs .gs-spoon,
body.kls-story .gs .gs-scoop, body.kls-story .gs .gs-berries, body.kls-story .gs .gs-drip {animation-duration:14s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-play-state:paused}
body.kls-story .kls-greek-stage.is-playing .gs * {animation-play-state:running}
/* Static picture (reduced motion / before playing): the finished yogurt with fruit. */
body.kls-story .gs .gs-bottle, body.kls-story .gs .gs-night, body.kls-story .gs .gs-spoon, body.kls-story .gs .gs-drips, body.kls-story .gs .gs-bubbles {opacity:0}
body.kls-story .gs .gs-stream {stroke-dasharray:100; stroke-dashoffset:100}
body.kls-story .gs .gs-kefir {transform:translateY(26px)}
body.kls-story .gs .gs-all {animation-name:gs-all}
body.kls-story .gs .gs-bottle {transform-origin:0 0; transform:translate(252px,152px) rotate(122deg); animation-name:gs-bottle}
body.kls-story .gs .gs-stream {animation-name:gs-stream}
body.kls-story .gs .gs-kefir {animation-name:gs-kefir}
body.kls-story .gs .gs-bubbles {animation-name:gs-bubbles}
body.kls-story .gs .gs-thick {animation-name:gs-thick}
body.kls-story .gs .gs-whey {animation-name:gs-whey}
body.kls-story .gs .gs-drips {animation-name:gs-drips}
body.kls-story .gs .gs-drip {animation:gs-drip 1.1s linear infinite paused}
body.kls-story .gs .gs-drip:nth-child(2) {animation-delay:.37s} body.kls-story .gs .gs-drip:nth-child(3) {animation-delay:.74s}
body.kls-story .gs .gs-night {transform-origin:96px 120px; animation-name:gs-night}
body.kls-story .gs .gs-spoon {transform-origin:0 0; transform:translate(470px,120px); animation-name:gs-spoon}
body.kls-story .gs .gs-scoop {animation-name:gs-scoop}
body.kls-story .gs .gs-berries {transform-origin:300px 262px; animation-name:gs-berries}
@keyframes gs-all {0%,97% {opacity:1} 100% {opacity:0}} /* starts visible: paused at 0% while scrolling it must not be blank */
@keyframes gs-bottle {0%,1% {opacity:0; transform:translate(170px,40px) rotate(160deg)} 6% {opacity:1; transform:translate(240px,130px) rotate(140deg)} 9%,33% {opacity:1; transform:translate(252px,152px) rotate(122deg)} 39% {opacity:1; transform:translate(200px,70px) rotate(165deg)} 42%,100% {opacity:0; transform:translate(170px,40px) rotate(170deg)}}
@keyframes gs-stream {0%,8% {stroke-dashoffset:100} 12%,32% {stroke-dashoffset:0} 37%,100% {stroke-dashoffset:-100}}
@keyframes gs-kefir {0%,9% {transform:translateY(170px)} 34% {transform:translateY(0)} 44% {transform:translateY(0)} 76%,100% {transform:translateY(26px)}}
@keyframes gs-bubbles {0%,12% {opacity:0} 20%,44% {opacity:1} 56%,100% {opacity:0}}
@keyframes gs-thick {0%,60% {opacity:0} 76%,100% {opacity:1}}
@keyframes gs-whey {0%,42% {transform:translateY(74px)} 76%,100% {transform:translateY(0)}}
@keyframes gs-drips {0%,42% {opacity:0} 45%,72% {opacity:1} 76%,100% {opacity:0}}
@keyframes gs-drip {0% {transform:translateY(0); opacity:0} 15% {opacity:1} 100% {transform:translateY(46px); opacity:0}}
@keyframes gs-night {0%,40% {opacity:0; transform:scale(.6)} 45%,72% {opacity:1; transform:scale(1)} 76%,100% {opacity:0; transform:scale(.6)}}
@keyframes gs-spoon {0%,77% {opacity:0; transform:translate(470px,110px)} 80% {opacity:1; transform:translate(400px,170px)} 84% {opacity:1; transform:translate(320px,262px)} 88% {opacity:1; transform:translate(360px,190px)} 92%,100% {opacity:0; transform:translate(470px,110px)}}
@keyframes gs-scoop {0%,83% {opacity:0} 84%,100% {opacity:1}}
@keyframes gs-berries {0%,88% {opacity:0; transform:translateY(-40px)} 92%,100% {opacity:1; transform:translateY(0)}}
/* Steps follow the same timeline. */
body.kls-story .kls-greek-steps li, body.kls-story .kls-greek-steps li > span {animation-duration:14s!important; animation-delay:0s!important; animation-iteration-count:infinite}
body.kls-story .kls-greek-steps li:nth-child(1) {animation-name:gs-s1t} body.kls-story .kls-greek-steps li:nth-child(1) > span {animation-name:gs-s1d}
body.kls-story .kls-greek-steps li:nth-child(2) {animation-name:gs-s2t} body.kls-story .kls-greek-steps li:nth-child(2) > span {animation-name:gs-s2d}
body.kls-story .kls-greek-steps li:nth-child(3) {animation-name:gs-s3t} body.kls-story .kls-greek-steps li:nth-child(3) > span {animation-name:gs-s3d}
body.kls-story .kls-greek-steps li:nth-child(4) {animation-name:gs-s4t} body.kls-story .kls-greek-steps li:nth-child(4) > span {animation-name:gs-s4d}
@keyframes gs-s1t {0%,37% {color:var(--s-navy)} 38%,100% {color:var(--s-muted)}}
@keyframes gs-s2t {0%,37% {color:var(--s-muted)} 38%,75% {color:var(--s-navy)} 76%,100% {color:var(--s-muted)}}
@keyframes gs-s3t {0%,75% {color:var(--s-muted)} 76%,87% {color:var(--s-navy)} 88%,100% {color:var(--s-muted)}}
@keyframes gs-s4t {0%,87% {color:var(--s-muted)} 88%,100% {color:var(--s-navy)}}
@keyframes gs-s1d {0%,37% {background:var(--s-yellow)} 38%,100% {background:var(--s-mist)}}
@keyframes gs-s2d {0%,37% {background:var(--s-mist)} 38%,75% {background:var(--s-yellow)} 76%,100% {background:var(--s-mist)}}
@keyframes gs-s3d {0%,75% {background:var(--s-mist)} 76%,87% {background:var(--s-yellow)} 88%,100% {background:var(--s-mist)}}
@keyframes gs-s4d {0%,87% {background:var(--s-mist)} 88%,100% {background:var(--s-yellow)}}
@media (prefers-reduced-motion:reduce) {body.kls-story .gs *, body.kls-story .kls-greek-steps li, body.kls-story .kls-greek-steps li > span {animation:none!important}}
body.kls-story .kls-greek-steps li, body.kls-story .kls-greek-steps li > span {animation-play-state:paused!important}
body.kls-story .kls-greek:has(.is-playing) .kls-greek-steps li, body.kls-story .kls-greek:has(.is-playing) .kls-greek-steps li > span {animation-play-state:running!important}
body.kls-story .kls-greek-steps li > span {transform:none!important}
/* Which kefir: the "who it's for" line is the answer, so it is the headline of each card. */
body.kls-story .kls-types--4 .kls-type-who {font-size:22px; font-weight:900; letter-spacing:0; color:var(--s-navy); line-height:1.3; margin:0 0 4px}
body.kls-story .kls-types--4 .kls-type.is-here .kls-type-who {color:#B45309}
body.kls-story .kls-types--4 .kls-type-name {font-size:16px; font-weight:700; color:var(--s-blue)}
@media (max-width:767px) {body.kls-story .kls-types--4 .kls-type-who {font-size:18px}}
body.kls-story .gs .gs-cream {opacity:1; animation:gs-cream 14s ease-in-out infinite paused}
body.kls-story .kls-greek-stage.is-playing .gs .gs-cream {animation-play-state:running}
@keyframes gs-cream {0%,58% {opacity:0} 76%,100% {opacity:1}}
body.kls-story .gs .gs-thick {stroke-width:3}
body.kls-story .gs .gs-night {transform-origin:96px 120px}
@media (prefers-reduced-motion:reduce) {body.kls-story .gs .gs-cream {animation:none}}
body.kls-story .gs .gs-night {transform-box:fill-box; transform-origin:center}
body.kls-story .kls-score--one {min-width:260px}
body.kls-story .kls-video figcaption > span {display:block; font-size:13px; color:var(--s-muted)}
body.kls-story .kls-wr-grid {columns:3 260px}

/* Strainer scene v3: white strained yogurt, spoon flip, fridge mood, more detail. */
body.kls-story .gs .gs-fridge, body.kls-story .gs .gs-splash, body.kls-story .gs .gs-ripple, body.kls-story .gs .gs-dew,
body.kls-story .gs .gs-spoonmark, body.kls-story .gs .gs-hand, body.kls-story .gs .gs-stream-hi {animation-duration:14s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-play-state:paused}
body.kls-story .kls-greek-stage.is-playing .gs * {animation-play-state:running}
body.kls-story .gs .gs-fridge {opacity:0; animation-name:gs-fridge}
@keyframes gs-fridge {0%,40% {opacity:0} 46%,72% {opacity:1} 78%,100% {opacity:0}}
body.kls-story .gs .gs-dew {opacity:0; animation-name:gs-dew}
@keyframes gs-dew {0%,46% {opacity:0} 56%,95% {opacity:1} 100% {opacity:0}}
body.kls-story .gs .gs-splash {opacity:0; transform-box:fill-box; transform-origin:center; animation-name:gs-splash}
@keyframes gs-splash {0%,11% {opacity:0; transform:scale(.4)} 14% {opacity:1; transform:scale(1)} 18% {opacity:0; transform:scale(1.6)} 20% {opacity:1; transform:scale(.6)} 24% {opacity:0; transform:scale(1.6)} 26% {opacity:1; transform:scale(.6)} 30% {opacity:0; transform:scale(1.6)} 100% {opacity:0}}
body.kls-story .gs .gs-ripple {opacity:0; transform-box:fill-box; transform-origin:center; animation:gs-ripple 1.1s linear infinite paused}
body.kls-story .kls-greek-stage.is-playing .gs .gs-ripple {animation-play-state:running}
@keyframes gs-ripple {0% {opacity:.9; transform:scale(.3)} 100% {opacity:0; transform:scale(2.2)}}
body.kls-story .gs .gs-hand {transform-box:fill-box; transform-origin:50% 100%; animation-name:gs-hand}
@keyframes gs-hand {0%,42% {transform:rotate(0)} 74%,100% {transform:rotate(720deg)}}
body.kls-story .gs .gs-stream-hi {stroke-dasharray:100; stroke-dashoffset:100; animation-name:gs-stream}
body.kls-story .gs .gs-cream {opacity:1; animation-name:gs-cream}
body.kls-story .gs .gs-spoonmark {opacity:0; animation-name:gs-mark}
@keyframes gs-mark {0%,82% {opacity:0} 84%,97% {opacity:1} 100% {opacity:0}}
body.kls-story .gs .gs-spoon {transform:translate(330px,150px) rotate(-180deg); animation-name:gs-spoon2}
@keyframes gs-spoon2 {0%,75% {opacity:0; transform:translate(520px,110px) rotate(-35deg)} 78% {opacity:1; transform:translate(360px,190px) rotate(-35deg)} 81%,82% {opacity:1; transform:translate(296px,292px) rotate(-30deg)} 85% {opacity:1; transform:translate(330px,150px) rotate(-6deg)} 89% {transform:translate(330px,150px) rotate(-180deg)} 91% {transform:translate(330px,150px) rotate(-172deg)} 93% {transform:translate(330px,150px) rotate(-186deg)} 95%,97% {opacity:1; transform:translate(330px,150px) rotate(-180deg)} 99%,100% {opacity:0; transform:translate(330px,150px) rotate(-180deg)}}
body.kls-story .gs .gs-scoop {animation-name:gs-scoop2}
@keyframes gs-scoop2 {0%,81% {opacity:0} 82%,100% {opacity:1}}
@keyframes gs-s3t {0%,75% {color:var(--s-muted)} 76%,85% {color:var(--s-navy)} 86%,100% {color:var(--s-muted)}}
@keyframes gs-s4t {0%,85% {color:var(--s-muted)} 86%,100% {color:var(--s-navy)}}
@keyframes gs-s3d {0%,75% {background:var(--s-mist)} 76%,85% {background:var(--s-yellow)} 86%,100% {background:var(--s-mist)}}
@keyframes gs-s4d {0%,85% {background:var(--s-mist)} 86%,100% {background:var(--s-yellow)}}
@media (prefers-reduced-motion:reduce) {body.kls-story .gs .gs-fridge, body.kls-story .gs .gs-splash {opacity:0}}
body.kls-story .gs .gs-hand {animation:none}
@keyframes gs-whey {0%,42% {transform:translateY(74px)} 76%,100% {transform:translateY(28px)}}

/* v4: real bottle, cap only while pouring, a real timer, whey volume = yogurt shrink. */
body.kls-story .gs .gs-cap, body.kls-story .gs .gs-timer-arc, body.kls-story .gs .gs-hour, body.kls-story .gs .gs-min {animation-duration:14s; animation-iteration-count:infinite; animation-timing-function:linear; animation-play-state:paused}
body.kls-story .kls-greek-stage.is-playing .gs * {animation-play-state:running}
body.kls-story .gs .gs-cap {opacity:0; animation-name:gs-cap}
@keyframes gs-cap {0%,6% {opacity:0; transform:translateY(-30px)} 9%,38% {opacity:1; transform:none} 42%,100% {opacity:0; transform:none}}
body.kls-story .gs .gs-night {transform:none}
@keyframes gs-night {0%,40% {opacity:0} 44%,72% {opacity:1} 76%,100% {opacity:0}}
body.kls-story .gs .gs-timer-arc {stroke-dasharray:0 100; animation-name:gs-arc}
@keyframes gs-arc {0%,44% {stroke-dasharray:0 100} 72%,100% {stroke-dasharray:100 0}}
body.kls-story .gs .gs-hour, body.kls-story .gs .gs-min {transform-box:view-box; transform-origin:96px 120px}
body.kls-story .gs .gs-hour {animation-name:gs-hour}
body.kls-story .gs .gs-min {animation-name:gs-min}
@keyframes gs-hour {0%,44% {transform:rotate(0)} 72%,100% {transform:rotate(360deg)}}
@keyframes gs-min {0%,44% {transform:rotate(0)} 72%,100% {transform:rotate(4320deg)}}
/* The whey that drips out is the volume the yogurt loses: yogurt drops 44px, whey rises 40px (container is a little wider). */
body.kls-story .gs .gs-kefir {transform:translateY(44px)}
@keyframes gs-kefir {0%,9% {transform:translateY(170px)} 34%,44% {transform:translateY(0)} 76%,100% {transform:translateY(44px)}}
body.kls-story .gs .gs-whey {transform:translateY(32px)}
@keyframes gs-whey {0%,44% {transform:translateY(72px)} 76%,100% {transform:translateY(32px)}}
@keyframes gs-spoon2 {0%,75% {opacity:0; transform:translate(520px,110px) rotate(-35deg)} 78% {opacity:1; transform:translate(360px,200px) rotate(-35deg)} 81%,82% {opacity:1; transform:translate(296px,306px) rotate(-30deg)} 85% {opacity:1; transform:translate(330px,150px) rotate(-6deg)} 89% {transform:translate(330px,150px) rotate(-180deg)} 91% {transform:translate(330px,150px) rotate(-172deg)} 93% {transform:translate(330px,150px) rotate(-186deg)} 95%,97% {opacity:1; transform:translate(330px,150px) rotate(-180deg)} 99%,100% {opacity:0; transform:translate(330px,150px) rotate(-180deg)}}
@media (prefers-reduced-motion:reduce) {body.kls-story .gs .gs-cap {opacity:0}}

/* ===== Type scale (2026-10-24): three text sizes, nothing below 14px. =====
   17px reading text · 15px secondary notes · 14px short labels. Headings keep their own sizes. */
body.kls-story .kls-lede,
body.kls-story .kls-faq-list details > p,
body.kls-story .kls-greek-copy > p,
body.kls-story .kls-greek-steps > li,
body.kls-story .kls-sgs-count > p,
body.kls-story .kls-sgs-tests li span,
body.kls-story .kls-highlights li span,
body.kls-story .kls-ways-eat p,
body.kls-story .kls-smell li,
body.kls-story .kls-call > p,
body.kls-story .kls-route li span,
body.kls-story .kls-steps li p,
body.kls-story .kls-nutri-text,
body.kls-story .kls-type li,
body.kls-story .kls-wr blockquote,
body.kls-story .kefir-label-section p,
body.kls-story .kls-specs dd,
body.kls-story .kls-sec li > div > p,
body.kls-story .kls-sec li > div > span,
body.kls-story .kls-way p:not(.kls-fee) {font-size:17px; line-height:1.7}


body.kls-story .kls-pdp-estimate-note,
body.kls-story .kls-deal,
body.kls-story .kls-seven-deal,
body.kls-story .kls-pdp-pickup span,
body.kls-story .kls-pdp-pickup strong,
body.kls-story .kls-pdp-badge,
body.kls-story .kls-pdp-eyebrow,
body.kls-story .kls-pdp-countdown,
body.kls-story .kls-pdp-rewards,
body.kls-story .kls-pdp-rewards > span > span,
body.kls-story .kls-pdp-join,
body.kls-story .kls-sub-teaser > div > span,
body.kls-story .kls-dpay-text,
body.kls-story .kls-dpay-links a,
body.kls-story .kls-spec dt strong,
body.kls-story .kls-report-cap,
body.kls-story .kls-src,
body.kls-story .kls-src a,
body.kls-story .kls-tl-scale span,
body.kls-story .kls-video figcaption strong,
body.kls-story .kls-tiers-label,
body.kls-story .kls-jump a,
body.kls-story .kls-nutri-dv,
body.kls-story .woocommerce-loop-product__title {font-size:15px; line-height:1.55}

body.kls-story .kls-tier-flag,
body.kls-story .kls-tier-note,
body.kls-story .kls-tier-p small,
body.kls-story .kls-tier-n small,
body.kls-story .kl-card-badge,
body.kls-story .kl-card-sold,
body.kls-story .subscription-details,
body.kls-story .kls-pdp-badge b,
body.kls-story .kls-pdp-sold,
body.kls-story .woocommerce-review-link,
body.kls-story .kls-pdp-social .star-rating span,
body.kls-story .review-rating .star-rating span,
body.kls-story .kls-type-here,
body.kls-story .kls-tl-mark,
body.kls-story .kls-who,
body.kls-story .kls-who span,
body.kls-story .kls-video figcaption span,
body.kls-story .kls-score > span:not(.kls-score-n),
body.kls-story .kls-eyebrow,
body.kls-story .kls-greek-steps li > span,
body.kls-story .kls-pdp-pay-labelled span,
body.kls-story .kls-step-n,
body.kls-story .kls-num,
body.kls-story .kls-sgs-tests li b {font-size:14px}

/* Same scale where older, more specific rules (product cards, delivery box, day moments) won. */
body.kls-story .kls-sgs-tests .kls-src,
body.kls-story .kls-pdp-delivery .kls-deal,
body.kls-story .kls-pdp-delivery .kls-deal b,
body.kls-story .kls-pdp-pickup span span,
body.kls-story .kls-pdp-rewards > span > span,
body.kls-story .kls-pdp-rewards .kls-pdp-join,
body.kls-story .kls-sec table thead th {font-size:15px!important}
body.kls-story .kl-card-badge,
body.kls-story .kl-card-sold,
body.kls-story .kl-card-meta .subscription-details {font-size:14px!important}
body.kls-story .kl-card-meta .woocommerce-Price-currencySymbol, body.kls-story .kls-tier .woocommerce-Price-currencySymbol {font-size:14px!important}
body.kls-story .kls-sec table td {font-size:max(15px, 1em)}
@media (max-width:767px) {body.kls-story .kls-day-moments li span {font-size:15px!important; padding:5px 8px!important; white-space:nowrap}}

/* Read and watch: a real book cover and a real video frame (2026-10-24). */
body.kls-story .kls-src-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:stretch}
body.kls-story .kls-srcbox {display:grid; gap:20px; padding:24px; border-radius:20px; background:#fff; border:1.5px solid var(--s-line)}
body.kls-story .kls-srcbox--book {grid-template-columns:150px minmax(0,1fr); align-items:start; background:var(--s-cream); border-color:#f3df90}
body.kls-story .kls-book-cover {perspective:600px}
body.kls-story .kls-book-cover img {display:block; width:150px; height:auto; border-radius:2px 6px 6px 2px; box-shadow:-6px 0 0 #e8e1c8 inset, 8px 12px 24px rgba(36,64,106,.28); transform:rotateY(-12deg); transform-origin:left center; transition:transform .3s}
body.kls-story .kls-srcbox--book:hover .kls-book-cover img {transform:rotateY(0)}
body.kls-story .kls-srcbox h3 {margin:0 0 4px; font-size:21px; line-height:1.4; color:var(--s-navy)}
body.kls-story .kls-srcbox p {margin:0 0 10px; font-size:17px; line-height:1.7; color:var(--s-navy)}
body.kls-story .kls-srcbox p.kls-srcbox-meta {font-size:15px; color:var(--s-muted); margin-bottom:6px}
body.kls-story .kls-srcbox-links {display:flex; flex-wrap:wrap; gap:6px 18px}
body.kls-story .kls-srcbox-links a {font-size:15px; font-weight:700; color:var(--s-blue)!important; text-decoration:none}
body.kls-story .kls-srcbox-links a:hover {text-decoration:underline}
body.kls-story .kls-video-frame {position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:747/389; background:#111}
body.kls-story .kls-video-frame img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s}
body.kls-story .kls-video-frame:hover img {transform:scale(1.03)}
body.kls-story .kls-video-play {position:absolute; left:50%; top:50%; width:68px; height:48px; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); transition:transform .2s}
body.kls-story .kls-video-play svg {width:100%; height:100%; display:block}
body.kls-story .kls-video-frame:hover .kls-video-play {transform:translate(-50%,-50%) scale(1.1)}
body.kls-story .kls-video-time {position:absolute; right:10px; bottom:10px; padding:2px 8px; border-radius:6px; background:rgba(0,0,0,.78); color:#fff; font-size:14px; font-weight:700}
@media (max-width:767px) {
  body.kls-story .kls-src-grid {grid-template-columns:minmax(0,1fr); gap:18px}
  body.kls-story .kls-srcbox {padding:18px}
  body.kls-story .kls-srcbox--book {grid-template-columns:96px minmax(0,1fr); gap:16px}
  body.kls-story .kls-book-cover img {width:96px}
  body.kls-story .kls-srcbox h3 {font-size:19px}
}

/* Line breaks: no single orphaned character at the end of headings or short paragraphs (2026-10-24). */
body.kls-story .kls-head h2, body.kls-story .kls-sec h3, body.kls-story .kls-srcbox h3 {text-wrap:balance}
body.kls-story .kls-lede, body.kls-story .kls-sec p, body.kls-story .kls-sec li {text-wrap:pretty}
/* Sections reached from in-page links: clear the sticky jump bar; no focus ring on the whole section. */
body.kls-story .kls-sec, body.kls-story #kls-payment {scroll-margin-top:64px}
body.kls-story .kls-sec:focus, body.kls-story #kls-payment:focus {outline:none}

/* Motion budget (2026-10-24): loops run only on screen, and everything pauses while the reader scrolls or touches
   the page (kls-scrolling) – on every browser, so LINE/Facebook web views never repaint animations mid-scroll. */
body.kls-story .kls-ticker:not(.is-playing) .kls-ticker-track,
body.kls-story .kls-day:not(.is-playing) *, body.kls-story .kls-day:not(.is-playing) *::before, body.kls-story .kls-day:not(.is-playing) *::after {animation-play-state:paused!important}
body.kls-story.kls-scrolling :is(.kls-ticker-track, .kls-loop *, .kls-pdp-badge--best)::after,
body.kls-story.kls-scrolling :is(.kls-ticker-track, .kls-loop *) {animation-play-state:paused!important}
/* In-app web views: no reveal animations (content is simply there), and every remaining animation pauses mid-scroll. */
html.kls-iab body.kls-story :is(.kls-anim, .kls-anim *):not(:where(.gs, .gs *, .kls-day-sun)) {animation-name:none!important}
html.kls-iab body.kls-story.kls-scrolling *, html.kls-iab body.kls-story.kls-scrolling *::before, html.kls-iab body.kls-story.kls-scrolling *::after {animation-play-state:paused!important}
body.kls-story.kls-scrolling .kls-greek:has(.is-playing) .kls-greek-steps li, body.kls-story.kls-scrolling .kls-greek:has(.is-playing) .kls-greek-steps li > span {animation-play-state:paused!important}
/* The quantity buttons are drawn by script from YITH's price table; keep their space so the summary does not jump. */
body.kls-story .kls-tier-list {min-height:94px}
@media (min-width:768px) {body.kls-story .kls-tier-list {min-height:101px}}

/* Jump bar, final look (2026-10-24, Nikola: navy-on-navy disappeared, colours poor): a light bar that reads on every
   section, navy labels, the current section marked with a cream fill and yellow underline. */
body.kls-story {--kls-top:0px}
html.kls-line {--kls-top:0px}
html.kls-line body.kls-story {--kls-top:inherit}
body.kls-story .kls-jump {top:var(--kls-top); background:rgba(255,255,255,.97); backdrop-filter:none; border:0; border-bottom:1px solid var(--s-line); box-shadow:0 4px 14px rgba(36,64,106,.10)}
.admin-bar.kls-story .kls-jump {top:calc(32px + var(--kls-top))}
body.kls-story .kls-jump-in {padding:0 12px; gap:2px; align-items:stretch}
body.kls-story .kls-jump a {background:transparent!important; color:var(--s-navy)!important; border:0; border-radius:0; box-shadow:none!important; padding:14px 14px 11px; border-bottom:3px solid transparent; font-size:15px; font-weight:700}
body.kls-story .kls-jump a:hover {background:var(--s-ice)!important}
body.kls-story .kls-jump a.is-on {background:var(--s-cream)!important; border-bottom-color:var(--s-yellow)}
body.kls-story .kls-sec, body.kls-story #kls-payment {scroll-margin-top:calc(60px + var(--kls-top))}
@media (max-width:767px) {body.kls-story .kls-jump-in {padding:0 8px} body.kls-story .kls-jump a {padding:12px 12px 9px; font-size:15px}}

/* Jump bar v3 (Nikola: white bar blended into the page, did not feel like a menu): a solid brand-yellow bar with navy
   labels; the current section is a navy pill. It stands apart from both the white and the navy sections. */
body.kls-story .kls-jump {background:var(--s-yellow); border:0; box-shadow:0 3px 10px rgba(36,64,106,.22)}
body.kls-story .kls-jump-in {padding:7px 10px; gap:4px; align-items:center}
body.kls-story .kls-jump a {border-bottom:0; border-radius:999px; padding:8px 14px; color:var(--s-navy)!important}
body.kls-story .kls-jump a:hover {background:rgba(255,255,255,.55)!important}
body.kls-story .kls-jump a.is-on {background:var(--s-navy)!important; color:#fff!important}
@media (max-width:767px) {body.kls-story .kls-jump-in {padding:6px 8px} body.kls-story .kls-jump a {padding:8px 12px}}
/* Nothing may widen the page sideways (Nikola's phone, 341px wide: the SGS stamp stuck out 34px and the page could be
   pushed left). `clip` keeps the sticky jump bar working, unlike `hidden`. */
html:has(body.kls-story), body.kls-story, body.kls-story #page {overflow-x:clip}
@media (max-width:420px) {body.kls-story .kls-stamp {right:6px; top:-30px; width:70px; height:70px; font-size:14px}}
/* Narrow phones: the three day labels must fit their column (a no-wrap label widened the third column past the edge). */
body.kls-story .kls-day-moments > li {min-width:0}
@media (max-width:400px) {body.kls-story .kls-day .kls-day-moments li span {font-size:14px!important; padding:5px 7px!important; white-space:normal; text-wrap:balance; max-width:100%}}

/* iPhone Safari 26+ ignores theme-color and tints its top and bottom bars from the background of a fixed/sticky element
   at an edge (the yellow jump bar turned both bars yellow). The sticky box itself stays transparent; the yellow and the
   shadow are painted by its non-sticky inner row, so the bar looks the same everywhere and Safari leaves its bars alone. */
body.kls-story .kls-jump {background:transparent!important; box-shadow:none!important}
body.kls-story .kls-jump-in {background:var(--s-yellow); max-width:none; box-shadow:0 3px 10px rgba(36,64,106,.22)}
@media (min-width:768px) {body.kls-story .kls-jump-in {padding-left:max(10px, calc((100% - 1320px) / 2)); padding-right:max(10px, calc((100% - 1320px) / 2))}}

/* Line breaks on narrow phones (live QA at 361px, 2026-10-24): no single character or half a word alone on a line. */
body.kls-story .kls-tier-note, body.kls-story .kls-fee b, body.kls-story .kls-dpay-links a {white-space:nowrap}
body.kls-story .kls-pdp-pickup strong, body.kls-story .kls-pdp-pickup span, body.kls-story .kls-tl-mark, body.kls-story .kls-pdp-estimate-note, body.kls-story .kls-type-name, body.kls-story .kls-type li, body.kls-story .kls-pdp-arrival, body.kls-story .kls-sec table td, body.kls-story .kls-sec table th {text-wrap:balance}
@media (max-width:380px) {body.kls-story #page .kls-tier {padding:12px 3px 10px} body.kls-story .kls-tier-note {letter-spacing:-.02em}}
@media (max-width:350px) {body.kls-story .kls-pdp-arrival {font-size:15.5px}}

/* Jump bar placement (2026-10-24): in the page flow it is a normal block; product-story.js makes it fixed at the top
   once it gets there (.is-stuck), with .kls-jump-slot keeping its height. No position:sticky, see the JS note. */
body.kls-story .kls-jump {position:relative!important; top:auto!important; z-index:30}
body.kls-story .kls-jump.is-stuck {position:fixed!important; top:var(--kls-top)!important; left:0; right:0}
.admin-bar.kls-story .kls-jump.is-stuck {top:calc(32px + var(--kls-top))!important}
@media (max-width:782px) {.admin-bar.kls-story .kls-jump.is-stuck {top:var(--kls-top)!important}}
/* Touch screens keep :hover on the last touched tab, which looked like a second "current" tab; hover only where it exists. */
@media (hover:none) {body.kls-story .kls-jump a:hover:not(.is-on) {background:transparent!important}}

/* ---------- Flavoured products (fruit milk kefir 5958, 2026-10-24). Every rule below targets classes only those pages
   print (.kls-flavoured body, mix box, flavour shelf, stir grid, dose chart, care section, customer photos). ---------- */
/* Mix box replaces the variation select and quantity from the first paint (no layout shift). WooCommerce's variation
   form needs script anyway, and product-story.js drives the native button. */
body.kls-flavoured #page form.variations_form :is(table.variations, .woocommerce-variation, .quantity, .reset_variations) {display:none!important}
body.kls-flavoured #page form.variations_form .single_add_to_cart_button {width:100%; margin-left:0}
body.kls-story .kls-mix {margin:0 0 16px}
body.kls-story .kls-mix-head {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px}
body.kls-story .kls-mix-head .kls-tiers-label {margin:0}
body.kls-story #page .kls-mix-all {flex:none; padding:7px 14px; border:1.5px solid var(--s-navy); border-radius:999px; background:var(--s-cream); color:var(--s-navy); font:inherit; font-size:14px; font-weight:800; line-height:1.3; box-shadow:none; cursor:pointer}
body.kls-story #page .kls-mix-all:hover {background:var(--s-yellow)}
body.kls-story .kls-mix-list {list-style:none; margin:0!important; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
body.kls-story .kls-mix-item {display:grid; justify-items:center; align-content:start; gap:4px; margin:0!important; padding:10px 6px; border:1.5px solid var(--s-line); border-radius:14px; background:#fff; text-align:center; transition:border-color .15s,background .15s}
body.kls-story .kls-mix-item.is-picked {border-color:var(--s-navy); background:var(--s-mist); box-shadow:inset 0 0 0 1px var(--s-navy)}
body.kls-story .kls-mix-item img {height:84px; width:30px; object-fit:contain}
body.kls-story .kls-mix-name {font-size:15px; font-weight:800; color:var(--s-navy); line-height:1.3}
body.kls-story .kls-mix-name em {display:block; font-style:normal; font-size:14px; font-weight:700; color:#B4570B}
body.kls-story .kls-mix-price {font-size:15px; font-weight:800; color:var(--s-price)}
body.kls-story .kls-mix-price .amount {color:inherit}
body.kls-story .kls-mix-price del {color:#8a9299; font-size:.8em; font-weight:600; margin-right:2px}
body.kls-story .kls-mix-step {display:flex; align-items:center; border:1.5px solid var(--s-line); border-radius:999px; background:#fff; overflow:hidden}
body.kls-story #page .kls-mix-step button {width:32px; height:34px; min-height:0; padding:0; border:0; border-radius:0; background:none; color:var(--s-navy); font:inherit; font-size:20px; font-weight:700; line-height:1; box-shadow:none; cursor:pointer}
body.kls-story #page .kls-mix-step button:hover {background:var(--s-ice)}
body.kls-story #page .kls-mix-step input {width:34px; height:34px; min-height:0; padding:0; margin:0; border:0; border-radius:0; background:none; text-align:center; font-size:16px; font-weight:800; color:var(--s-navy); -moz-appearance:textfield; appearance:textfield; box-shadow:none}
body.kls-story .kls-mix-step input::-webkit-inner-spin-button, body.kls-story .kls-mix-step input::-webkit-outer-spin-button {-webkit-appearance:none; margin:0}
body.kls-story .kls-mix-item.is-out {opacity:.55}
body.kls-story .kls-mix-out {font-size:14px; color:var(--s-muted)}
body.kls-story .kls-mix-sum {margin:10px 0 0!important; min-height:24px; font-size:15px; font-weight:700; color:var(--s-navy)}
body.kls-story .kls-mix-sum.is-ok {color:#1d6b42}
body.kls-story .kls-mix-sum a {color:var(--s-blue)!important; white-space:nowrap}
body.kls-story .kls-mix.is-nudge .kls-mix-list {animation:kls-nudge .45s}
@keyframes kls-nudge {20%,60% {transform:translateX(-6px)} 40%,80% {transform:translateX(6px)}}
@media (max-width:767px) {
  body.kls-story .kls-mix-list {grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  body.kls-story .kls-mix-item {grid-template-columns:28px minmax(0,1fr); grid-template-areas:"img name" "img price" "step step"; justify-items:start; text-align:left; column-gap:10px; row-gap:2px; padding:8px 8px 10px}
  body.kls-story .kls-mix-item img {grid-area:img; height:64px; width:28px; align-self:center}
  body.kls-story .kls-mix-name {grid-area:name; align-self:end}
  body.kls-story .kls-mix-price {grid-area:price}
  body.kls-story .kls-mix-step, body.kls-story .kls-mix-out {grid-area:step; justify-self:stretch; margin-top:6px}
  body.kls-story .kls-mix-step input {flex:1}
  body.kls-story #page .kls-mix-step button {width:38px; height:36px}
}
@media (max-width:360px) {body.kls-story .kls-mix-head {flex-wrap:wrap} body.kls-story .kls-mix-name em {font-size:14px}}

/* Flavour shelf: real bottles standing on a plank; the chosen one lifts and opens its panel. */
body.kls-story .kls-flavours {background:linear-gradient(180deg,#fff 0,var(--s-ice) 100%)}
body.kls-story .kls-shelf {display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); max-width:980px; margin:0 auto 34px; padding:0 8px}
body.kls-story #page .kls-shelf-btn {position:relative; display:grid; justify-items:center; gap:10px; margin:0; padding:12px 2px 0; border:0; border-radius:0; background:none; color:var(--s-navy); font:inherit; box-shadow:none; cursor:pointer}
body.kls-story .kls-shelf-btn::before {content:""; position:absolute; left:-1px; right:-1px; bottom:40px; height:12px; background:linear-gradient(#EED6AA,#D9B57C); box-shadow:0 4px 0 rgba(36,64,106,.10)}
body.kls-story .kls-shelf-btn img {position:relative; z-index:1; height:150px; width:auto; margin-bottom:6px; transition:transform .25s; filter:drop-shadow(0 6px 6px rgba(36,64,106,.12))}
body.kls-story .kls-shelf-btn:hover img {transform:translateY(-6px)}
body.kls-story .kls-shelf-btn[aria-selected="true"] img {transform:translateY(-16px)}
body.kls-story .kls-shelf-btn span {font-size:15px; font-weight:800; line-height:20px; padding:4px 10px; border-radius:999px; white-space:nowrap}
body.kls-story .kls-shelf-btn[aria-selected="true"] span {background:var(--s-navy); color:#fff}
body.kls-story .kls-shelf-btn:focus-visible {outline:3px solid var(--s-blue); outline-offset:2px}
body.kls-story .kls-fl-panel {display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:center; max-width:900px; margin:0 auto; padding:34px 44px; border-radius:28px; background:#fff; box-shadow:0 10px 30px rgba(36,64,106,.08)}
body.kls-story .kls-fl-panel[hidden] {display:none}
body.kls-story .kls-fl-pic img {display:block; height:330px; width:auto; margin:0 auto; filter:drop-shadow(0 12px 14px rgba(36,64,106,.16))}
body.kls-story .kls-fl-panel:not([hidden]) .kls-fl-pic img {animation:kls-rise .45s both}
body.kls-story .kls-fl-info h3 {margin:0 0 8px; font-size:26px; color:var(--s-navy)}
body.kls-story .kls-fl-info h3 em {display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 10px; border-radius:999px; background:var(--s-yellow); font-size:14px; font-style:normal; font-weight:800}
body.kls-story .kls-fl-panel:not([hidden]) .kls-ring-val {animation:kls-ring-in 1.1s ease-out both}
@keyframes kls-ring-in {from {stroke-dasharray:0 100}}
body.kls-story .kls-fl-actions {display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:18px 0 0!important}
body.kls-story .kls-fl-label {color:var(--s-blue)!important; font-size:15px; font-weight:700; white-space:nowrap}
@media (max-width:767px) {
  body.kls-story .kls-shelf {grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:6px; padding:0; margin-bottom:24px}
  body.kls-story .kls-shelf-btn img {height:112px}
  body.kls-story .kls-shelf-btn span {padding:4px 8px}
  body.kls-story .kls-fl-panel {grid-template-columns:76px minmax(0,1fr); gap:6px 16px; padding:20px 16px; border-radius:20px; align-items:start}
  body.kls-story .kls-fl-pic img {height:200px; width:auto; max-width:76px; object-fit:contain}
  body.kls-story .kls-fl-info h3 {font-size:21px}
  body.kls-story .kls-fl-info {display:contents}
  body.kls-story .kls-fl-info > h3 {margin-top:8px}
  body.kls-story .kls-fl-pic {grid-row:1/3}
}
/* English flavour names are longer than one line in a quarter of a phone. */
@media (max-width:767px) {html[lang^="en"] body.kls-story .kls-shelf-btn span {white-space:normal; text-align:center; line-height:1.25; font-size:14px}}

/* Stir-the-jam illustration beside the three ways to enjoy it. */
body.kls-story .kls-stir-grid {display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; align-items:center; max-width:1080px; margin:0 auto}
body.kls-story .kls-stir-pic {width:100%; height:auto; display:block}
@media (max-width:767px) {body.kls-story .kls-stir-grid {grid-template-columns:minmax(0,1fr); gap:12px} body.kls-story .kls-stir-pic {width:56%; margin:0 auto}}

/* How much and for whom (2026-10-25): one bottle = one go, the original for workouts, fruit for breakfast and kids. */
body.kls-story .kls-portion {max-width:1000px; margin:64px auto 0}
body.kls-story .kls-portion-head {display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; align-items:center; padding:26px 40px; border:1.5px solid var(--s-line); border-radius:28px; background:#fff}
body.kls-story .kls-portion-bottles {display:flex; justify-content:center; align-items:flex-end; gap:10px}
body.kls-story .kls-portion-bottles img {height:200px; width:auto; filter:drop-shadow(0 10px 10px rgba(36,64,106,.14))}
body.kls-story .kls-portion-bottles img + img {transform:rotate(6deg); transform-origin:bottom}
body.kls-story .kls-portion-head h3 {margin:0 0 8px; font-size:clamp(24px,3vw,32px); color:var(--s-navy)}
body.kls-story .kls-portion-head p {margin:0; font-size:17px; color:var(--s-muted)}
body.kls-story .kls-portion-picks {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px}
body.kls-story .kls-pick {display:grid; grid-template-columns:170px minmax(0,1fr); gap:18px; align-items:center; padding:18px 22px; border:1.5px solid var(--s-line); border-radius:24px; background:#fff}
body.kls-story .kls-pick-pic {display:block; width:100%; height:auto}
body.kls-story .kls-pick h4 {display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:20px; color:var(--s-navy)}
body.kls-story .kls-pick h4 img {height:46px; width:auto}
body.kls-story .kls-pick p {margin:0; font-size:17px; color:var(--s-muted)}
body.kls-story .kls-portion .is-in {animation:kls-rise .55s both; animation-delay:calc(var(--i,0)*.15s)}
@media (min-width:768px) and (max-width:1023px) { /* two cards side by side: a smaller photo leaves room for the heading */
  body.kls-story .kls-pick {grid-template-columns:110px minmax(0,1fr); gap:14px; padding:16px}
}
@media (max-width:767px) {
  body.kls-story .kls-portion {margin-top:44px}
  body.kls-story .kls-portion-head {grid-template-columns:minmax(0,1fr); gap:14px; padding:20px 16px; text-align:left}
  body.kls-story .kls-portion-bottles img {height:140px}
  body.kls-story .kls-portion-picks {grid-template-columns:minmax(0,1fr); gap:14px; margin-top:14px}
  body.kls-story .kls-pick {grid-template-columns:104px minmax(0,1fr); gap:12px; padding:14px}
  body.kls-story .kls-pick h4 {font-size:18px}
  body.kls-story .kls-pick h4 img {height:38px}
  body.kls-story .kls-pick p {font-size:16px}
}

/* Care section (storage tips + smell) when nutrition lives in the flavour panels. */
body.kls-story .kls-care-sec .kls-care-title {margin:0 0 34px; text-align:center; font-size:clamp(24px,3vw,32px); color:var(--s-navy)}
body.kls-story .kls-care-sec .kls-care {margin-top:0; padding-top:0; border-top:0}
@media (max-width:767px) {body.kls-story .kls-care-sec .kls-care-title {text-align:left; margin-bottom:24px}}

/* Customer photos next to the videos, same 9:16 frame. */
body.kls-story .kls-photo img {display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:18px; background:#e9eef2}

/* Slim 240 g bottle in the callout layout. */
body.kls-story .kls-anat--slim .kls-anat-bottle img {width:62%; margin:0 auto}
@media (max-width:767px) {body.kls-story .kls-anat--slim .kls-anat-bottle {width:40%}}
/* No variation is selected on mix-box pages, so WooCommerce marks the button disabled; the mix box drives it instead. */
body.kls-flavoured #page form.variations_form .single_add_to_cart_button.disabled {opacity:1; cursor:pointer}
body.kls-story .kls-mix {scroll-margin-top:16px}
/* The 240 g bottle is slim: same height as the 500 g render in the compare header and callout layout. */
body.kls-flavoured .kls-cmp thead .is-us img {width:30px; margin-top:-40px}
body.kls-story .kls-anat--slim .kls-anat-bottle img {width:52%}
/* QA 320–1440 (fruit page): no one-character last lines, nothing under 14px. */
body.kls-flavoured .kls-highlights span, body.kls-flavoured .kls-faq summary, body.kls-flavoured .kls-sgs .kls-src {text-wrap:balance}
@media (max-width:767px) {body.kls-flavoured .kls-cmp :is(th,td) {font-size:14px}}
@media (max-width:330px) {body.kls-flavoured .kls-pdp-arrival {font-size:14.5px}}
body.kls-flavoured .kls-dpay-links {flex-wrap:wrap; row-gap:8px}
/* Mix tiles line up: name block keeps room for the tag line, the stepper sits at the bottom of every tile (Nikola, 2026-10-25). */
@media (min-width:768px) {
  body.kls-story .kls-mix-item {display:flex; flex-direction:column; align-items:center}
  body.kls-story .kls-mix-name {min-height:42px; display:flex; flex-direction:column; justify-content:flex-start}
  body.kls-story .kls-mix-step, body.kls-story .kls-mix-out {margin-top:auto}
}
@media (max-width:767px) {body.kls-story .kls-mix-item {grid-template-rows:auto auto 1fr} body.kls-story .kls-mix-step, body.kls-story .kls-mix-out {align-self:end}}
@media (max-width:767px) {body.kls-story .kls-mix-item {grid-template-rows:40px auto 1fr} body.kls-story .kls-mix-name {align-self:start; line-height:1.3} body.kls-story .kls-mix-name em {display:inline; margin-left:4px} body.kls-story .kls-mix-item img {grid-row:1/3}}
@media (min-width:768px) {body.kls-story .kls-mix-price {margin-top:auto} body.kls-story .kls-mix-step, body.kls-story .kls-mix-out {margin-top:4px}}
body.kls-story .kls-fl-info h3 em.kls-fl-rank {background:var(--s-navy); color:#fff; margin-left:4px}
body.kls-story .kls-mix-name em {white-space:nowrap}
/* "Add one of each flavour" says what it does; no theme capitals, never broken mid-label (Nikola, 2026-10-25). */
body.kls-story #page .kls-mix-all {text-transform:none; letter-spacing:0; white-space:nowrap}
@media (max-width:480px) {body.kls-story .kls-mix-head {flex-wrap:wrap; row-gap:8px}}

/* Nutrition label popup (2026-10-25): the printed bottle label, typeset in the page's own style. */
body.kls-story #page .kls-fl-label {padding:0; border:0; background:none; box-shadow:none; font:inherit; font-size:15px; font-weight:700; color:var(--s-blue); text-decoration:underline; text-underline-offset:4px; text-transform:none; letter-spacing:0; cursor:pointer}
body.kls-story .kls-nl {width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:24px; background:#fff; color:var(--s-navy); box-shadow:0 24px 60px rgba(20,32,56,.35); overflow:auto}
body.kls-story .kls-nl::backdrop {background:rgba(20,32,56,.55)}
body.kls-story .kls-nl[open] {animation:kls-nl-in .22s ease-out}
@keyframes kls-nl-in {from {opacity:0; transform:translateY(12px) scale(.98)}}
body.kls-story .kls-nl-card {position:relative; padding:24px 26px 22px}
body.kls-story #page .kls-nl-x {position:absolute; top:12px; right:12px; width:40px; height:40px; min-height:0; padding:0; border:0; border-radius:50%; background:var(--s-ice); color:var(--s-navy); font-size:26px; line-height:40px; box-shadow:none; cursor:pointer}
body.kls-story .kls-nl-top {display:flex; align-items:center; gap:14px; margin:0 44px 16px 0}
body.kls-story .kls-nl-top img {height:84px; width:auto}
body.kls-story .kls-nl-top .kls-eyebrow {margin:0 0 2px}
body.kls-story .kls-nl-top h3 {margin:0; font-size:24px; color:var(--s-navy)}
body.kls-story .kls-nl-facts {border:3px solid var(--s-navy); border-radius:6px; padding:10px 14px 6px}
body.kls-story .kls-nl-facts h4 {margin:0; padding-bottom:6px; border-bottom:6px solid var(--s-navy); font-size:22px; font-weight:900; text-align:center; color:var(--s-navy)}
body.kls-story .kls-nl-facts > p {margin:8px 0 0!important; padding-bottom:8px; border-bottom:2px solid var(--s-navy); font-size:15px; line-height:1.5}
body.kls-story .kls-nl-facts table {width:100%; margin:0; border:0; border-collapse:collapse; table-layout:auto}
body.kls-story .kls-nl-facts :is(th,td) {padding:6px 0; border:0; border-bottom:1px solid var(--s-line); background:none; font-size:15px; color:var(--s-navy); text-align:right; white-space:nowrap}
body.kls-story .kls-nl-facts thead :is(th,td) {border-bottom:3px solid var(--s-navy); font-size:14px; font-weight:800}
body.kls-story .kls-nl-facts tbody th {text-align:left; font-weight:800}
body.kls-story .kls-nl-facts tbody tr.is-sub th {padding-left:18px; font-weight:600}
body.kls-story .kls-nl-facts tbody tr:last-child :is(th,td) {border-bottom:0}
body.kls-story .kls-nl-info {display:grid; gap:8px; margin:16px 0 0; font-size:15px; line-height:1.55}
body.kls-story .kls-nl-info div {display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px}
body.kls-story .kls-nl-info dt {font-weight:800; color:var(--s-navy)}
body.kls-story .kls-nl-info dd {margin:0; color:var(--s-muted)}
html[lang^="en"] body.kls-story .kls-nl-info div {grid-template-columns:96px minmax(0,1fr)}
@media (max-width:420px) {body.kls-story .kls-nl-card {padding:20px 16px 18px} body.kls-story .kls-nl-facts {padding:8px 10px 4px} body.kls-story .kls-nl-top h3 {font-size:21px}}

/* Flavour panel = taste portrait (2026-10-25): tastes-like line, notes, tart↔sweet dots, fruit fact, customer quote. */
body.kls-story .kls-fl-notes {list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0!important; padding:0}
body.kls-story .kls-fl-notes li {margin:0!important; padding:5px 12px; border-radius:999px; background:var(--s-mist); color:var(--s-navy); font-size:15px; font-weight:700; white-space:nowrap}
body.kls-story .kls-fl-fact {display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; margin:0 0 14px; padding:14px 16px; border-radius:16px; background:var(--s-cream)}
body.kls-story .kls-fl-fact .kls-ic {width:40px; height:40px}
body.kls-story .kls-fl-fact p {margin:0!important; font-size:15px; line-height:1.6; color:var(--s-navy)}
body.kls-story .kls-fl-fact b {display:block; margin-bottom:2px; color:#B4570B}
body.kls-story .kls-fl-quote {margin:0 0 6px; padding:0 0 0 14px; border:0; border-left:3px solid var(--s-yellow); background:none}
body.kls-story .kls-fl-quote p {margin:0!important; font-size:15px; font-style:normal; color:var(--s-navy)}
body.kls-story .kls-fl-quote cite {display:block; margin-top:2px; font-size:14px; font-style:normal; color:var(--s-muted)}
body.kls-story .kls-fl-actions {margin:12px 0 0!important}
@media (max-width:767px) {
}
@media (max-width:767px) {body.kls-story .kls-fl-info > h3 {grid-column:2; align-self:center} body.kls-story .kls-fl-pic {grid-row:1/2} body.kls-story .kls-fl-pic img {height:150px}}

/* Customers' words lead the flavour panel (2026-10-25, Nikola: copy real phrases, invent nothing). */
body.kls-story .kls-fl-panel .kls-fl-quote {margin:0 0 14px; padding:0 0 0 16px; border-left:4px solid var(--s-yellow)}
body.kls-story .kls-fl-panel .kls-fl-quote p {font-size:18px; line-height:1.65}
body.kls-story .kls-fl-panel .kls-fl-notes {margin:0 0 16px!important}
@media (max-width:767px) {body.kls-story .kls-fl-panel .kls-fl-quote p {font-size:17px} body.kls-story .kls-fl-notes {grid-column:1/-1}}
@media (max-width:767px) {body.kls-story .kls-fl-fact, body.kls-story .kls-fl-panel .kls-fl-quote, body.kls-story .kls-fl-actions {grid-column:1/-1}}
body.kls-flavoured .kls-sgs-count h2 {text-wrap:balance}

/* Delivery rows v2 (2026-10-26): 7-ELEVEN, Black Cat, HCT; one line "X 小時 Y 分內下單，最快 …（週三）到貨／到店". */
body.kls-story .kls-pdp-delivery > div {display:block}
body.kls-story .kls-pdp-delivery .kls-pdp-eyebrow {display:block; font-size:15px; font-weight:700; color:var(--s-navy)}
body.kls-story .kls-pdp-sub {display:block; font-size:15px; color:var(--s-muted)}
body.kls-story .kls-pdp-delivery .kls-pdp-arrival {display:block; margin:2px 0 0; font-size:17px; line-height:1.5; font-weight:700; color:var(--s-navy); text-wrap:pretty}
body.kls-story .kls-pdp-delivery .kls-pdp-countdown {display:inline; min-height:0; font-size:inherit; font-weight:800; color:var(--s-price); font-variant-numeric:tabular-nums}
body.kls-story .kls-pdp-delivery--store > img {width:56px; height:24px; object-fit:contain}
body.kls-story .kls-pdp-delivery--store {grid-template-columns:56px minmax(0,1fr)}
@media (max-width:350px) {body.kls-story .kls-pdp-delivery .kls-pdp-arrival {font-size:16px}}
body.kls-story .kls-nb {white-space:nowrap}
/* Tier buttons without the savings line (2026-10-26): shorter boxes. */
body.kls-story #page .kls-tier {min-height:0; padding-bottom:14px}
body.kls-story .kls-tier-list {min-height:76px}
body.kls-story .kls-mix-sum:empty {display:none}
/* 2026-10-26 (Nikola: phone tiles had a tiny bottle and too much white space) — phones: the bottle spans the tile height
   on the left, name / price / stepper stacked on the right. */
@media (max-width:767px) {
  body.kls-story .kls-mix-list {gap:8px}
  body.kls-story .kls-mix-item {display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:"img name" "img price" "img step"; align-items:center; justify-items:start; column-gap:10px; row-gap:4px; padding:10px 10px 10px 8px; text-align:left}
  body.kls-story .kls-mix-item img {grid-area:img; grid-row:1/4; width:40px; height:116px; align-self:center; object-fit:contain}
  body.kls-story .kls-mix-name {grid-area:name; min-height:0; align-self:end; font-size:16px; line-height:1.25}
  body.kls-story .kls-mix-name em {display:block; margin:0; font-size:14px}
  body.kls-story .kls-mix-price {grid-area:price; margin:0; font-size:16px}
  body.kls-story .kls-mix-step, body.kls-story .kls-mix-out {grid-area:step; justify-self:stretch; align-self:start; margin:2px 0 0}
  body.kls-story #page .kls-mix-step button {width:34px; height:34px}
}
/* Narrowest phones: one flavour per row (bottle | name + price | stepper) so long English names never get cut. */
@media (max-width:374px) {
  body.kls-story .kls-mix-list {grid-template-columns:minmax(0,1fr)}
  body.kls-story .kls-mix-item {grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:auto auto; grid-template-areas:"img name step" "img price step"; padding:8px 10px}
  body.kls-story .kls-mix-item img {grid-row:1/3; width:34px; height:96px}
  body.kls-story .kls-mix-step, body.kls-story .kls-mix-out {grid-row:1/3; align-self:center; justify-self:end; margin:0}
  body.kls-story .kls-mix-name, body.kls-story .kls-mix-name em {min-width:0; white-space:normal}
}

/* Chinese headings and short labels break only at spaces and ｜, never inside a word (隨 / 身瓶, 合 / 格);
   overflow-wrap still breaks a phrase that would not fit at all. Body text keeps normal Chinese line breaking. */
html[lang^="zh"] body.kls-story :is(.product_title, .kls-highlights li, .kls-head h2, .kls-sec h3, .kls-sgs-count h2, .kls-pick h4, .kls-tl-mark, .kls-benefits li span, .kls-type-name, .kls-pdp-rewards strong, .kls-pdp-rewards strong + span) {word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance}
body.kls-story .kls-pdp-rewards :is(.product_point, .product-point-conversion) {white-space:nowrap}

/* Tap targets of at least 44 px on touch screens without moving the layout: an invisible hit area around small controls. */
body.kls-story :is(.kls-mix-minus, .kls-mix-plus, .kls-fl-label, .kls-call a, .kls-src a, .kls-dpay-links a, .woocommerce-review-link) {position:relative}
body.kls-story :is(.kls-mix-minus, .kls-mix-plus)::after {content:""; position:absolute; inset:-5px}
body.kls-story :is(.kls-fl-label, .kls-call a, .kls-src a, .kls-dpay-links a, .woocommerce-review-link)::after {content:""; position:absolute; inset:-12px -4px}

/* Portrait tablets (768–1023 px): the buy column is too narrow for two columns (the mix steppers spilled out of their
   cards and the left half sat empty under the gallery), so stack gallery and buy box like on phones. */
@media (min-width:768px) and (max-width:1023px) {
 body.kls-story .kls-pdp-hero {grid-template-columns:minmax(0,1fr); gap:28px}
 body.kls-story .kls-pdp-hero > .images {width:100%!important; max-width:560px; margin:0 auto!important}
}

/* 2026-10-26 water kefir 11950: three flavors (cans) and the case offer. Scoped to the new count classes, so the
   eight-flavor fruit page and 6108 are unchanged. */
body.kls-story .kls-mix--3 .kls-mix-list {grid-template-columns:repeat(3,minmax(0,1fr))}
body.kls-story .kls-shelf--3 {grid-template-columns:repeat(3,minmax(0,1fr)); max-width:420px}
@media (max-width:767px) {
  body.kls-story .kls-mix--3 .kls-mix-list {grid-template-columns:minmax(0,1fr)}
  body.kls-story .kls-mix--3 .kls-mix-item {grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:auto auto; grid-template-areas:"img name step" "img price step"; padding:8px 12px 8px 10px}
  body.kls-story .kls-mix--3 .kls-mix-item img {grid-row:1/3; width:40px; height:100px}
  body.kls-story .kls-mix--3 :is(.kls-mix-step, .kls-mix-out) {grid-row:1/3; align-self:center; justify-self:end; margin:0}
  body.kls-story .kls-mix--3 .kls-mix-name em {display:inline; margin-left:6px}
  body.kls-story .kls-shelf--3 {max-width:300px}
}
body.kls-story .kls-bundle .kls-sub-pills {grid-template-columns:repeat(2,minmax(0,1fr)); max-width:360px}
body.kls-story .kls-bundle .kls-sub-pill b {color:var(--s-red, #E0402B); font-weight:800}
body.kls-story .kls-bundle .kls-sub-pill:is(:hover, :focus-visible) b {color:var(--s-yellow)}

/* Phones: the three subscription pills keep their words inside (English is long): wrap, no arrow. */
@media (max-width:479px) {
    body.kls-story .kls-sub-pills {display:flex; flex-wrap:wrap}
    body.kls-story .kls-sub-pill {flex:1 1 auto}
    body.kls-story .kls-sub-pills {gap:6px}
    body.kls-story .kls-sub-pill {padding:0 4px; font-size:14px}
    body.kls-story .kls-sub-pill span {display:none}
}