/* .ms-nav-purchase hidden: the jump bar only navigates (price/interval live in the purchase area) */
.ms-nav-purchase {display:none!important}
/* Subscription families: milk kefir 16221/16231/16234 (body.kls-milk-sub) and soy kefir 19927/19941/19945 (body.kls-soy-sub). Claude rebuild 2026-10-29/30.
   One bold element: the "My subscriptions" phone simulator. Everything else quiet, site palette, 17/15/14 px type. */
body:is(.kls-milk-sub,.kls-soy-sub) {--ms-navy:#24406A; --ms-sky:#A9DAF0; --ms-mist:#EDF7FB; --ms-yellow:#FCD33A; --ms-cream:#FFF7D5; --ms-line:#D7E6F0; --ms-muted:#5B6B82}

/* ---------- purchase area ---------- */
.ms-purchase {color:var(--ms-navy); margin:6px 0 18px}
.ms-pick-title {font-weight:700; font-size:17px; margin:0 0 10px!important}
.ms-plans {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
#page .ms-plans a {display:flex; align-items:center; justify-content:center; min-height:48px; border:2px solid var(--ms-line); border-radius:12px; background:#fff; color:var(--ms-navy); font-size:16px; text-decoration:none; transition:border-color .15s, background .15s}
#page .ms-plans a b {font-weight:700}
#page .ms-plans a[aria-current] {border-color:var(--ms-navy); background:var(--ms-yellow)}
@media (hover:hover) {#page .ms-plans a:not([aria-current]):hover {border-color:var(--ms-navy)}}
.ms-qty-note {font-size:15px; color:var(--ms-muted); margin:10px 0 0!important; line-height:1.6}
.ms-care-link {display:none}

.ms-promises {list-style:none; margin:16px 0 18px; padding:14px 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 18px; border-radius:16px; background:var(--ms-cream); color:var(--ms-navy)}
.ms-promises li {display:flex; gap:10px; align-items:flex-start; margin:0}
.ms-promises .kls-ic {width:36px; height:36px; flex:none}
.ms-promises span {font-size:15px; line-height:1.5}
.ms-promises b {display:block; font-size:16px}
@media (max-width:420px) {.ms-promises {grid-template-columns:minmax(0,1fr)}}

/* jump bar: interval reminder at its end */
@media (min-width:99999px) {
  body:is(.kls-milk-sub,.kls-soy-sub) .kls-jump-in {align-items:center}
  .ms-nav-purchase {display:flex; align-items:center; gap:12px; margin-left:auto; padding-left:16px; flex:none}
  .ms-nav-purchase span {font-size:15px; color:var(--ms-navy); white-space:nowrap}
  body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .ms-nav-purchase a {background:var(--ms-navy)!important; color:#fff!important; border-radius:999px; padding:8px 16px; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap}
}

/* ---------- story shell ---------- */
.ms-story {color:var(--ms-navy)}
.ms-story .ms-section {padding:88px 0}
.ms-story .ms-section:nth-child(even) {background:var(--ms-mist)}
.ms-story .kls-wrap {max-width:1180px}
.ms-story h2 {font-size:clamp(28px,3.2vw,40px); line-height:1.25; margin:0 0 14px; font-weight:800; text-wrap:balance}
.ms-story h3 {font-size:20px; line-height:1.4; margin:0 0 8px; font-weight:800; text-wrap:balance}
.ms-story p, .ms-story dd {font-size:17px; line-height:1.7; margin:0; text-wrap:pretty}
.ms-story .ms-lede {max-width:640px; color:var(--ms-muted); margin-bottom:44px}
.ms-story a {color:var(--ms-navy); text-underline-offset:4px; font-weight:700}
.ms-story figure {margin:0}
.ms-story img {display:block; max-width:100%; height:auto}

/* ---------- 1. how it works: one scene, captions under each moment ---------- */
.ms-cycle {margin:18px 0 6px}
.ms-cycle img {width:100%; height:auto}
.ms-steps {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
.ms-step {margin:0}
.ms-story .ms-step-art {display:none}
.ms-step-n {display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ms-navy); color:#fff; font-weight:800; font-size:17px; margin:0 0 12px}
.ms-step:nth-child(n+3) .ms-step-n {background:var(--ms-yellow); color:var(--ms-navy)}
.ms-step p {color:#33475f}
.ms-loop-note {display:flex; align-items:center; gap:10px; margin:30px 0 0 auto!important; width:max-content; max-width:100%; font-weight:700; padding:8px 18px; border-radius:999px; background:var(--ms-cream)}
.ms-loop-note span {font-size:22px; line-height:1}
.ms-charge {margin-top:34px!important; padding:18px 22px; border-left:6px solid var(--ms-yellow); background:#fff; border-radius:0 14px 14px 0; font-weight:700; max-width:860px}
.ms-renew-card {animation:ms-charge 4.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.ms-renew-slip {animation:ms-slip 4.8s ease-in-out infinite; transform-box:fill-box}
@keyframes ms-charge {0%,30% {transform:translate(0,0)} 42% {transform:translate(-22px,-6px)} 54%,100% {transform:translate(0,0)}}
@keyframes ms-slip {0%,48% {opacity:0; transform:translateY(16px)} 60%,92% {opacity:1; transform:translateY(0)} 100% {opacity:0; transform:translateY(0)}}

/* ---------- 2. simulator (the one bold element) ---------- */
.ms-sim {display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:start}
.ms-sim-cases {display:flex; flex-direction:column; gap:10px}
#page .ms-case {all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:18px 20px; border-radius:16px; background:#fff; border:2px solid var(--ms-line); color:var(--ms-navy); transition:border-color .2s, background .2s}
#page .ms-case:focus-visible {outline:3px solid var(--ms-navy); outline-offset:3px}
.ms-case-q {font-size:17px; font-weight:800; line-height:1.45}
.ms-case-a {align-self:center; font-size:15px; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--ms-mist); white-space:nowrap}
.ms-case-text {grid-column:1/-1; font-size:15px; line-height:1.6; color:#33475f; display:none}
#page .ms-case[aria-selected="true"] {border-color:var(--ms-navy); background:var(--ms-cream)}
#page .ms-case[aria-selected="true"] .ms-case-a {background:var(--ms-navy); color:#fff}
#page .ms-case[aria-selected="true"] .ms-case-text {display:block}
.ms-sim-stage {position:relative}
.ms-sim-answer {display:none; margin-top:18px!important; text-align:center}
.ms-sim-answer b {display:block}

.ms-phone {position:relative; width:330px; margin:0 auto; padding:14px; border-radius:46px; background:#1d2f4d; box-shadow:0 30px 60px -24px rgba(36,64,106,.55), inset 0 0 0 2px #3c5378}
.ms-phone::before {content:""; position:absolute; top:24px; left:50%; width:84px; height:22px; margin-left:-42px; border-radius:12px; background:#0f1b30; z-index:5}
.ms-screen {position:relative; height:600px; overflow:hidden; border-radius:34px; background:#fff; padding:56px 18px 18px; color:var(--ms-navy); font-size:15px; line-height:1.5}
.ms-scr-bar {font-size:14px; color:var(--ms-muted); margin-bottom:6px}
.ms-scr-title {font-size:22px!important; font-weight:800; margin:0 0 12px!important}
.ms-scr-product {display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; background:var(--ms-mist); margin-bottom:12px}
.ms-scr-product img {width:40px; height:auto}
.ms-scr-product b {display:block; font-size:15px; line-height:1.4}
.ms-scr-status {display:inline-block; margin-top:4px; padding:1px 10px; border-radius:999px; background:#DDF3E6; color:#1E7A48; font-size:14px; font-weight:700; transition:background .3s, color .3s}
.ms-scr-status.is-paused {background:#FFE9C7; color:#9A5A00}
.ms-story .ms-scr-rows {margin:0 0 14px; display:grid; gap:0}
.ms-scr-rows div {display:flex; justify-content:space-between; gap:10px; padding:9px 2px; border-bottom:1px solid var(--ms-line)}
.ms-story .ms-scr-rows dt, .ms-story .ms-scr-rows dd {font-size:14px; line-height:1.45}
.ms-scr-rows dt {color:var(--ms-muted)}
.ms-story .ms-scr-rows dd {font-weight:700; text-align:right; transition:color .3s}
.ms-scr-rows dd.is-changed {color:#1E7A48}
.ms-scr-actions {display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ms-scr-btn {display:grid; place-items:center; min-height:44px; padding:6px; border-radius:12px; border:1.5px solid var(--ms-navy); font-size:14px; font-weight:700; text-align:center; line-height:1.3; transition:background .15s, transform .15s}
.ms-scr-btn.is-press {background:var(--ms-yellow); transform:scale(.96)}
.ms-sheet {position:absolute; left:0; right:0; bottom:0; padding:22px 18px 20px; border-radius:24px 24px 0 0; background:#fff; box-shadow:0 -12px 30px rgba(36,64,106,.22); transform:translateY(105%); transition:transform .45s cubic-bezier(.2,.8,.2,1); z-index:3}
.ms-sheet.is-open {transform:translateY(0)}
.ms-sheet b {display:block; font-size:17px; margin-bottom:6px}
.ms-story .ms-sheet p {font-size:14px; line-height:1.6; color:#33475f; margin-bottom:12px}
.ms-days {display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px}
.ms-day {display:grid; place-items:center; padding:6px 2px; border-radius:10px; background:var(--ms-mist); font-size:14px; line-height:1.3; text-align:center; transition:background .2s}
.ms-day i {display:block; font-style:normal; font-size:14px; color:var(--ms-muted)}
.ms-day.is-now {outline:2px dashed var(--ms-sky)}
.ms-day.is-pick {background:var(--ms-navy); color:#fff}
.ms-day.is-pick i {color:#fff}
.ms-opts {display:grid; gap:6px; margin:10px 0 14px}
.ms-opt {display:flex; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:10px; border:1.5px solid var(--ms-line); font-size:14px; font-weight:700; transition:background .2s, border-color .2s}
.ms-opt i {font-style:normal; color:var(--ms-muted)}
.ms-opt.is-pick {border-color:var(--ms-navy); background:var(--ms-cream)}
.ms-sheet-ok {display:grid; place-items:center; min-height:46px; border-radius:12px; background:var(--ms-navy); color:#fff; font-weight:800; font-size:15px; transition:transform .15s}
.ms-sheet-ok.is-press {transform:scale(.96); background:#16294a}
.ms-toast {position:absolute; left:50%; top:62px; transform:translate(-50%,-20px); opacity:0; padding:8px 16px; border-radius:999px; background:#1E7A48; color:#fff; font-size:14px; font-weight:700; white-space:nowrap; transition:opacity .3s, transform .3s; z-index:4}
.ms-toast.is-show {opacity:1; transform:translate(-50%,0)}
.ms-finger {position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:rgba(252,211,58,.55); box-shadow:0 0 0 2px rgba(36,64,106,.55); opacity:0; transition:left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1), opacity .25s, transform .15s; z-index:6; pointer-events:none}
.ms-finger.is-on {opacity:1}
.ms-finger.is-tap {transform:scale(.7)}

.ms-rules {margin-top:44px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:28px; align-items:start; padding-top:30px; border-top:1px solid var(--ms-line)}
.ms-cancel h3 {margin-bottom:6px}
.ms-account-link {align-self:center; padding:12px 22px; border-radius:999px; background:var(--ms-navy); color:#fff!important; text-decoration:none; white-space:nowrap}

/* ---------- 3. delivery ---------- */
.ms-delivery-options {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin-top:34px}
.ms-delivery-option img {width:120px; height:120px; margin-bottom:12px}
.ms-service-use {font-size:15px!important; color:var(--ms-muted)}
.ms-service-fee {font-weight:800; color:#E0402B; margin:2px 0 8px!important}
.ms-delivery-details {margin:40px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ms-delivery-details dt {font-weight:800; font-size:17px; margin-bottom:4px}
.ms-delivery-details dd {margin:0; color:#33475f}
.ms-delivery-foot {margin-top:26px!important; font-size:15px!important; color:var(--ms-muted)}

/* ---------- 4. in every box ---------- */
.ms-box-layout {display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:60px; align-items:center; margin-top:30px}
.ms-crate {position:relative; display:flex; align-items:flex-end; justify-content:center; padding:10px 0 34px; max-width:560px}
.ms-crate img {width:19%; margin-left:-7%; position:relative; filter:drop-shadow(0 10px 10px rgba(36,64,106,.18))}
.ms-crate img:first-child {margin-left:0}
.ms-crate img:nth-child(odd) {transform:translateY(-6%)}
.ms-crate-front {position:absolute; left:4%; right:4%; bottom:22px; height:16px; border-radius:50%; background:rgba(36,64,106,.12); z-index:0; filter:blur(6px)}
.ms-crate-tag {position:absolute; right:6%; bottom:0; z-index:4; padding:6px 16px; border-radius:999px; background:var(--ms-navy); color:#fff; font-weight:800; font-size:16px}
.ms-box-kicker {font-size:24px!important; font-weight:800; margin-bottom:10px!important}
.ms-sgs {display:flex; align-items:center; gap:18px; margin:24px 0; padding:16px 20px; border-radius:16px; background:var(--ms-cream)}
.ms-sgs-n {display:flex; align-items:baseline; gap:6px; flex:none}
.ms-sgs-n strong {font-size:46px; line-height:1; font-weight:900; color:var(--ms-navy)}
.ms-sgs-n span {font-size:15px; font-weight:700}
.ms-story .ms-sgs p:last-child {font-size:15px}
.ms-label {margin:0 0 18px; display:grid; gap:10px}
.ms-label dt {font-weight:800; font-size:15px; color:var(--ms-muted)}
.ms-label dd {margin:0}
.ms-nutrition {margin-top:34px; border-top:1px solid var(--ms-line); padding-top:14px}
.ms-nutrition summary {cursor:pointer; font-weight:800; font-size:17px; padding:8px 0; list-style-position:inside}
.ms-nutrition .kls-native {max-width:560px; padding-top:12px}

/* ---------- 5. ways to use: compact row, small pictures ---------- */
.ms-food-uses {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin-top:26px}
.ms-food-use figure {border-radius:16px; overflow:hidden; background:#fff; margin-bottom:12px; aspect-ratio:3/2}
.ms-food-use figure img {width:100%; height:100%; object-fit:cover}
.ms-food-use h3 {font-size:18px; margin-bottom:4px}
.ms-story .ms-food-use p {font-size:15px; color:#33475f}
/* ---------- 6. storage ---------- */
.ms-storage-details {margin:24px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px}
.ms-storage-details div {display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 14px; align-content:start}
.ms-storage-details .kls-ic {width:44px; height:44px; grid-row:span 2}
.ms-storage-details dt {font-weight:800; font-size:17px}
.ms-storage-details dd {margin:0; color:#33475f}

/* FAQ + closing return (kept renderer) */
.ms-faq .ms-questions {max-width:860px; margin-top:20px; border-top:1px solid var(--ms-line)}
.ms-faq .ms-questions details {border-bottom:1px solid var(--ms-line)}
.ms-faq .ms-questions summary {cursor:pointer; padding:16px 0; font-size:17px; font-weight:800; list-style:none; display:flex; justify-content:space-between; gap:16px}
.ms-faq .ms-questions summary::after {content:"+"; font-size:22px; line-height:1}
.ms-faq .ms-questions details[open] summary::after {content:"−"}
.ms-faq .ms-questions details p {padding:0 0 18px}
.ms-try {margin:-6px 0 16px!important; font-size:15px}
.ms-try a {color:var(--ms-navy); font-weight:700; text-underline-offset:4px}
.ms-end {margin-top:24px}
.ms-close {padding:56px 0; background:var(--ms-navy); color:#fff}
.ms-close .kls-wrap {display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.ms-close h2 {color:#fff; font-size:28px; margin:0}
.ms-close p {color:#dbe6f2; margin:4px 0 0}
.ms-close-order {display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.ms-close-order p {margin:0; color:#fff}
.ms-close a.ms-back {padding:12px 24px; border-radius:999px; background:var(--ms-yellow); color:var(--ms-navy)!important; font-weight:800; text-decoration:none}
.ms-close a.ms-close-terms {color:#fff!important}

/* ---------- tablet / phone ---------- */
@media (max-width:1023px) {
  .ms-steps {grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 26px}
  .ms-sim {grid-template-columns:minmax(0,1fr); gap:22px}
  .ms-sim-cases {display:grid; grid-template-columns:1fr 1fr; gap:8px}
  #page .ms-case {grid-template-columns:minmax(0,1fr); padding:12px 12px; border-radius:14px; gap:6px}
  .ms-case-q {font-size:15px}
  .ms-case-a {justify-self:start; font-size:14px}
  #page .ms-case[aria-selected="true"] .ms-case-text {display:none}
  .ms-sim-answer {display:block}
  .ms-rules {grid-template-columns:minmax(0,1fr)}
  .ms-account-link {justify-self:start}
  .ms-box-layout {grid-template-columns:minmax(0,1fr); gap:34px}
  .ms-food-uses {grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px}
}
@media (max-width:767px) {
  .ms-story .ms-section {padding:60px 0}
  .ms-story .ms-lede {margin-bottom:30px}
  .ms-story .ms-cycle {display:none}
  .ms-steps {grid-template-columns:minmax(0,1fr); gap:26px}
  .ms-step {display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 16px; align-items:start}
  .ms-story .ms-step-art {display:block; grid-row:span 3; width:120px; height:auto; border-radius:14px}
  .ms-step-n {width:32px; height:32px; font-size:15px; margin-bottom:6px}
  .ms-loop-note {margin-left:0!important}
  .ms-phone {width:300px}
  .ms-screen {height:560px}
  .ms-delivery-options {grid-template-columns:minmax(0,1fr); gap:26px}
  .ms-delivery-option {display:grid; grid-template-columns:90px minmax(0,1fr); gap:16px}
  .ms-delivery-option img {width:90px; height:90px}
  .ms-delivery-details, .ms-storage-details {grid-template-columns:minmax(0,1fr)}
  .ms-sgs {flex-direction:column; align-items:flex-start; gap:6px}
  .ms-close .kls-wrap {flex-direction:column; align-items:flex-start}
}
@media (max-width:360px) {.ms-phone {width:280px; padding:12px} .ms-screen {padding:52px 14px 14px}}
@media (prefers-reduced-motion:reduce) {.ms-renew-card, .ms-renew-slip {animation:none} .ms-renew-slip {opacity:1}}
body.kls-story.kls-scrolling .ms-renew-card, body.kls-story.kls-scrolling .ms-renew-slip {animation-play-state:paused}
.ms-story .kls-wrap, .ms-close .kls-wrap {padding-inline:32px}
@media (max-width:767px) {.ms-story .kls-wrap, .ms-close .kls-wrap {padding-inline:20px}}
body.kls-story .ms-close h2 {color:#fff!important}

/* Purchase-area decisions (video study 2026-10-29): fit hint per interval, real rating, two-way choice, trust line. */
#page .ms-plans a {flex-direction:column; gap:2px; padding:10px 6px; min-height:64px; line-height:1.35}
#page .ms-plans a span {font-size:14px; color:var(--ms-muted); text-align:center}
#page .ms-plans a[aria-current] span {color:var(--ms-navy)}
.ms-proof {display:inline-flex; align-items:center; gap:8px; margin:10px 0 0; font-size:15px; color:var(--ms-navy)!important; text-decoration:none!important}
.ms-proof .kls-stars {font-size:15px}
.ms-trust {display:flex; align-items:center; gap:8px; margin:0 0 12px!important; font-size:15px; color:var(--ms-navy)}
.ms-trust .kls-ic {width:30px; height:30px; flex:none}
.ms-try {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; padding:12px 16px; border:1.5px dashed var(--ms-line); border-radius:14px; color:var(--ms-navy)!important; text-decoration:none!important; font-size:15px; line-height:1.5}
.ms-try b {margin-right:6px}
.ms-try i {font-style:normal; font-size:22px}
@media (hover:hover) {.ms-try:hover {border-color:var(--ms-navy)}}

/* Short description as one fact per line; native 3-review rating replaced by the same product's 122 reviews. */
:is(.kls-milk-sub,.kls-soy-sub) .kls-pdp-social .woocommerce-product-rating {display:none}
:is(.kls-milk-sub,.kls-soy-sub) .kls-pdp-social .ms-proof {margin:0}
.ms-proof b {font-size:16px}
:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights {margin:4px 0 20px; padding:0; list-style:none; display:grid; gap:10px}
:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights li {display:flex; gap:12px; align-items:center; margin:0; font-size:16px; line-height:1.5; color:var(--ms-navy)}
:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights .kls-ic {width:34px; height:34px; flex:none}
:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights a {color:var(--ms-navy); text-underline-offset:4px}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .summary .woocommerce-product-rating {display:none!important}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights {grid-template-columns:minmax(0,1fr)!important; gap:8px!important; border:0!important}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights li {padding:0!important; border:0!important; min-height:0!important; font-size:16px!important; line-height:1.5!important}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights li span {font-size:16px!important}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights li span {margin:0!important; line-height:1.5!important}
:is(.kls-milk-sub,.kls-soy-sub) .kls-pdp-policy-note {display:none}
:is(.kls-milk-sub,.kls-soy-sub) .kls-pdp-delivery-options {display:none}
/* Carrier logos in the short description; nothing else under the button (service box/card logos hidden). */
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .summary .kls-highlights .kls-hl-logo {width:34px; height:34px; flex:none; object-fit:contain}
:is(.kls-milk-sub,.kls-soy-sub) .kls-pdp-services, :is(.kls-milk-sub,.kls-soy-sub) .kls-pdp-service-links, :is(.kls-milk-sub,.kls-soy-sub) .summary .kls-pdp-payment-options {display:none!important}
.ms-scr-rows div.is-focus {background:var(--ms-cream); border-radius:10px; transition:background .3s}
@media (max-width:1023px) {#page .ms-case:first-child {grid-column:1/-1}}
/* Full sentences now (Nikola 2026-10-29): let zh wrap naturally instead of only at spaces/commas. */
html[lang^="zh"] body.kls-story:is(.kls-milk-sub,.kls-soy-sub) :is(.kls-highlights li, .kls-highlights span, .ms-qty-note) {word-break:normal!important; line-break:strict; text-wrap:pretty!important}
/* Quantity shows bottles per delivery: the number input stays underneath for WooCommerce. */
body:is(.kls-milk-sub,.kls-soy-sub) form.cart .quantity.ms-qty {position:relative}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) #page form.cart .quantity.ms-qty input.qty {width:96px!important; max-width:none!important; color:transparent!important; caret-color:var(--s-navy,#24406a)}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) #page form.cart .quantity.ms-qty :is(.minus,.plus) {min-width:40px!important; width:40px!important}
body.kls-story:is(.kls-milk-sub,.kls-soy-sub) #page form.cart .quantity.ms-qty.is-typing input.qty {color:inherit!important}
body:is(.kls-milk-sub,.kls-soy-sub) .ms-qty-bottles {position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; font-size:18px; font-weight:800; color:var(--s-navy,#24406a); white-space:nowrap}
body:is(.kls-milk-sub,.kls-soy-sub) .quantity.ms-qty.is-typing .ms-qty-bottles {display:none}
html[lang^="en"] body:is(.kls-milk-sub,.kls-soy-sub) .ms-qty-bottles {font-size:16px}
/* One plain sentence under the order button: what arrives and what is charged each time (follows the quantity). */
body:is(.kls-milk-sub,.kls-soy-sub) .ms-qty-line {margin:10px 0 0; font-size:16px; line-height:1.6; font-weight:600; color:var(--s-navy,#24406a)}
/* Nutrition as on 6108: rings, then the typeset label card (2026-10-29). */
.ms-nutri {margin:56px 0 0; padding:40px 0 0; border-top:1.5px solid rgba(36,64,106,.12)}
.ms-nutri > h3 {text-align:center; font-size:clamp(22px,2.4vw,28px)!important; margin:0 0 6px}
body.kls-story .ms-nutri .kls-nutri-serving {text-align:center; margin:0 0 28px}
.ms-nutri .kls-src {text-align:center; margin:18px 0 0}
body.kls-story .ms-nutri .ms-nutri-label {max-width:460px; margin:36px auto 8px}
/* Delivery illustrations: HCT / Black Cat trucks and a 7-ELEVEN store (2026-10-29). */
#page .ms-delivery-option img {width:200px; height:200px; margin:0 0 8px -12px}
@media (max-width:767px) {#page .ms-delivery-option {grid-template-columns:120px minmax(0,1fr)} #page .ms-delivery-option img {width:120px; height:120px; margin:0}}
#page .ms-delivery-option img {mix-blend-mode:multiply} .ms-nw {white-space:nowrap}
@media (max-width:767px) {#page .ms-case-a {white-space:normal; max-width:100%; text-align:center}}
html body.kls-story:is(.kls-milk-sub,.kls-soy-sub) .kls-highlights span.kls-nw {white-space:nowrap!important}

/* ---------- soy family (body.kls-soy-sub): 14 slim bottles, the 1,800 count, the 7846 label block ---------- */
body.kls-soy-sub .ms-crate--rows {flex-direction:column; align-items:center; padding-bottom:40px}
body.kls-soy-sub .ms-crate-row {position:relative; display:flex; justify-content:center; width:100%}
body.kls-soy-sub .ms-crate-row + .ms-crate-row {margin-top:-16%; z-index:1; padding-left:7%}
body.kls-soy-sub .ms-crate--rows img {width:13%; margin-left:-1.5%; transform:none}
body.kls-soy-sub .ms-crate--rows .ms-crate-row img:first-child {margin-left:0}
body.kls-soy-sub .ms-sgs {flex-direction:column; align-items:flex-start; gap:8px}
body.kls-soy-sub .ms-sgs-n {flex-wrap:wrap; column-gap:10px}
body.kls-soy-sub .ms-teach-head {max-width:760px; margin:72px auto 34px; text-align:center}
body.kls-soy-sub .ms-teach-head h3 {font-size:clamp(22px,2.4vw,28px)!important; margin:0 0 8px}
body.kls-soy-sub .ms-teach {margin:0 auto}
body.kls-soy-sub .ms-scr-product img {width:24px}
body.kls-soy-sub .ms-soy-label .soy-back-grid {margin-top:34px; align-items:start}
body.kls-soy-sub .kls-nl--inline .kls-nl-top {display:none} /* the section heading already names the bottle */
body.kls-soy-sub .kls-nl--inline {width:auto; max-width:460px; max-height:none; margin:0; border:2px solid var(--ms-line); box-shadow:none; overflow:visible}
@media (max-width:767px) {
  body.kls-soy-sub .ms-soy-label .soy-back-grid {grid-template-columns:minmax(0,1fr); gap:28px}
  body.kls-soy-sub .kls-nl--inline {max-width:none}
}
html[lang^="zh"] body:is(.kls-milk-sub,.kls-soy-sub) .ms-proof {word-break:keep-all} /* "59 則評價" stays together on 320 px phones */