/* Milk kefir grains (6100): purchase picker, parcel flat-lay, four-step scene, milk tool, pH check, arrival, care,
   troubleshooting, promise and delivery. Loaded only on pages whose data file sets 'assets' => 'grains'.
   Text sizes follow the story scale: 17px reading text, 15px notes, 14px smallest. */

/* ---------- purchase area ---------- */
body.kls-grains .kls-highlights .kls-hl-logo {width:56px; height:auto; object-fit:contain}
body.kls-grains #page form.variations_form.gr-ready :is(table.variations, .woocommerce-variation, .reset_variations) {display:none!important}
body.kls-grains #page form.variations_form.gr-ready .single_add_to_cart_button.disabled:not(.gr-off) {opacity:1; cursor:pointer}
body.kls-grains #page form.variations_form.gr-ready .single_add_to_cart_button.gr-off {opacity:.45}
body.kls-grains .gr-buy {margin:0 0 14px}
/* Two steps, one decision each (research 2026-10-30: Baymard / NN/g — exposed choices, one drawing of what you get per
   option, an unmistakable selected state, price on the final choice). */
body.kls-grains .gr-step {border:0; margin:0 0 18px; padding:0; min-width:0}
body.kls-grains .gr-step legend {display:flex; align-items:center; gap:10px; padding:0; margin:0 0 10px; font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-grains .gr-step-num {display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--s-navy); color:#fff; font-size:15px; font-weight:800}
body.kls-grains .gr-opts {display:grid; grid-template-columns:1fr 1fr; gap:12px}
body.kls-grains .gr-opt-cell {position:relative; display:flex; min-width:0}
body.kls-grains .gr-opt-cell > .gr-opt {flex:1; min-width:0}
body.kls-grains .gr-step input {position:absolute; top:50%; left:50%; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
body.kls-grains .gr-opt {position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; margin:0; padding:14px 12px 16px; border:2px solid var(--s-line); border-radius:18px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s}
body.kls-grains .gr-opt:hover {border-color:var(--s-sky)}
body.kls-grains .gr-step input:checked + .gr-opt {border-color:var(--s-navy); background:var(--s-mist); box-shadow:0 0 0 2px var(--s-navy)}
body.kls-grains .gr-step input:checked + .gr-opt::after {content:""; position:absolute; top:-11px; right:-11px; width:28px; height:28px; border-radius:50%; background:var(--s-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; box-shadow:0 0 0 3px #fff}
body.kls-grains .gr-step input:focus-visible + .gr-opt {outline:3px solid var(--s-blue); outline-offset:3px}
body.kls-grains .gr-opt.is-out {opacity:.5}
body.kls-grains .gr-opt-pic {display:flex; align-items:center; justify-content:center; width:100%; height:128px; margin:0 0 6px; overflow:hidden}
body.kls-grains .gr-opt-pic img {display:block; width:auto; height:auto; max-width:100%; max-height:128px; object-fit:contain}
body.kls-grains .gr-opt-name {font-size:20px; font-weight:800; line-height:1.3; color:var(--s-navy)}
body.kls-grains .gr-opt-desc {font-size:15px; line-height:1.5; color:#33435C; text-wrap:pretty}
body.kls-grains .gr-opt-price {margin-top:auto; padding-top:6px; font-size:19px; font-weight:800; color:var(--s-price); white-space:nowrap}
body.kls-grains .gr-step legend {font-size:17px}
body.kls-grains .gr-opt-has {font-size:14px; color:var(--s-muted)}
body.kls-grains .gr-opt-out {font-size:14px; font-weight:700; color:#B4321F}
body.kls-grains .gr-step-hint {margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--s-muted)}
body.kls-grains .gr-buy-label {flex-basis:100%; font-size:14px; font-weight:700; color:var(--s-muted)}
body.kls-grains .gr-buy-sum {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 12px; margin:4px 0 6px; padding:10px 0 0; border-top:1.5px solid var(--s-line); font-size:17px; font-weight:700; color:var(--s-navy)}
body.kls-grains .gr-buy-price {color:var(--s-price); font-size:22px; font-weight:800; white-space:nowrap}
body.kls-grains .gr-buy-ship {display:flex; align-items:center; gap:10px; margin:0; font-size:15px; line-height:1.45; color:var(--s-navy)}
body.kls-grains .gr-buy-ship img {flex:none; width:40px; height:auto}
body.kls-grains .gr-buy-ship.is-done span {color:var(--s-green); font-weight:700}
body.kls-grains .gr-buy-note {margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--s-navy); min-height:0}
body.kls-grains .gr-buy-note:empty {display:none}
body.kls-grains .gr-buy-note.is-ok {color:var(--s-green); font-weight:700}
body.kls-grains .gr-buy-note.is-warn {color:#B4321F; font-weight:700}
body.kls-grains .gr-buy-note a {color:inherit; text-decoration:underline}

/* ---------- shared bits of the grains sections ---------- */
body.kls-grains .gr-step-n {display:inline-grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:var(--s-navy); color:#fff; font-weight:800; font-size:16px}
body.kls-grains :is(.gr-points, .gr-signs, .gr-rules) {list-style:none; margin:0; padding:0; display:grid; gap:18px}
body.kls-grains :is(.gr-points, .gr-signs, .gr-rules) li {display:flex; gap:14px; align-items:flex-start; margin:0}
body.kls-grains :is(.gr-points, .gr-signs, .gr-rules, .gr-promises, .gr-bring) .kls-ic {flex:none; width:48px; height:48px}
body.kls-grains .kls-story-body :is(.gr-what, .gr-box, .gr-steps, .gr-calc, .gr-check, .gr-arrive, .gr-care, .gr-fix, .gr-promise) h3 {margin:0 0 4px; font-size:19px; line-height:1.35; color:var(--s-navy)}
body.kls-grains .kls-story-body :is(.gr-what, .gr-box, .gr-steps, .gr-calc, .gr-check, .gr-arrive, .gr-care, .gr-fix, .gr-promise) p {margin:0; font-size:17px; line-height:1.7; color:#33435C}

/* ---------- what grains are ---------- */
body.kls-grains .gr-what {background:#fff}
body.kls-grains .gr-what-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center}
body.kls-grains .gr-loop {position:relative; display:grid; justify-items:center}
body.kls-grains .gr-loop-photo {width:min(100%,380px); height:auto; filter:drop-shadow(0 18px 24px rgba(36,64,106,.18))}
body.kls-grains .gr-loop-steps {list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; counter-reset:gl}
body.kls-grains .gr-loop-steps li {position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; margin:0; text-align:center; font-size:15px; font-weight:700; line-height:1.35; color:var(--s-navy)}
body.kls-grains .gr-loop-steps li:not(:last-child)::after {content:"›"; position:absolute; right:-9px; top:14px; font-size:22px; color:var(--s-sky)}
body.kls-grains .gr-loop-ic .kls-ic {width:46px; height:46px; transition:transform .3s}
body.kls-grains .gr-loop.is-playing .gr-loop-ic {animation:gr-blink 6s ease-in-out infinite; animation-delay:calc(var(--i) * 1.5s)}
@keyframes gr-blink {0%,20%,100% {transform:none} 8% {transform:translateY(-6px) scale(1.08)}}
body.kls-grains .gr-loop-steps li > span:first-child {display:block}

/* ---------- what's in the box ---------- */
body.kls-grains .gr-box {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-grains .gr-box-in {display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); grid-template-areas:"switch switch" "flat info" "bring info"; grid-template-rows:auto auto 1fr; gap:18px 36px; align-items:start}
body.kls-grains .gr-box-switch {grid-area:switch; justify-self:center; display:inline-flex; padding:4px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--s-line)}
body.kls-grains #page .gr-box-switch button {min-height:44px; padding:8px 22px; border:0; border-radius:999px; background:transparent; color:var(--s-navy); font-size:16px; font-weight:800; text-transform:none; letter-spacing:0}
body.kls-grains #page .gr-box-switch button[aria-pressed="true"] {background:var(--s-navy); color:#fff}
body.kls-grains .gr-flat {grid-area:flat; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:18px; border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(36,64,106,.08)}
body.kls-grains #page .gr-item {display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; min-height:150px; padding:12px 6px 10px; border:1.5px solid transparent; border-radius:14px; background:transparent; color:var(--s-navy); text-transform:none; letter-spacing:0; cursor:pointer; transition:opacity .25s, transform .25s, border-color .15s, background .15s}
body.kls-grains #page .gr-item:hover {background:var(--s-ice)}
body.kls-grains #page .gr-item[aria-expanded="true"] {border-color:var(--s-navy); background:var(--s-mist)}
body.kls-grains .gr-item img {width:auto; max-width:100%; height:auto; max-height:96px; object-fit:contain}
body.kls-grains .gr-item--thermo img, body.kls-grains .gr-item--marker img, body.kls-grains .gr-item--spoon img, body.kls-grains .gr-item--spatula img {max-height:48px}
body.kls-grains .gr-item-name {display:flex; flex-direction:column; align-items:center; gap:3px; font-size:15px; font-weight:700; line-height:1.35; text-align:center}
body.kls-grains .gr-item-name em {font-style:normal; font-size:14px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--s-yellow); color:var(--s-navy)}
body.kls-grains .gr-flat[data-pack="only"] .gr-item.is-kit {opacity:.28; transform:scale(.94)}
body.kls-grains .gr-flat[data-pack="only"] .gr-item.is-kit .gr-item-name em {background:var(--s-line)}
body.kls-grains .gr-item-info {grid-area:info; align-self:start; padding:26px 26px 24px; border-radius:22px; background:var(--s-navy); scroll-margin-top:90px}
body.kls-grains .gr-item-info h3 {margin:0 0 12px; font-size:22px}
body.kls-grains .gr-info-list {list-style:none; margin:0; padding:0; display:grid; gap:12px}
body.kls-grains .kls-story-body .gr-info-list li {position:relative; margin:0; padding-left:20px; font-size:16px; line-height:1.65; color:#DDE8F5}
body.kls-grains .gr-info-list li::before {content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--s-yellow)}
body.kls-grains .gr-item-info h3 {color:#fff!important}
body.kls-grains .kls-story-body .gr-item-info p {color:#DDE8F5}
body.kls-grains .gr-bring {grid-area:bring; display:flex; gap:12px; align-items:center; margin:0; font-size:17px; font-weight:700; color:var(--s-navy)}

/* ---------- four steps + scene ---------- */
body.kls-grains .gr-steps {background:#fff}
body.kls-grains .gr-steps-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center}
body.kls-grains .gr-scene {border-radius:24px; background:var(--s-ice); padding:18px}
body.kls-grains .gr-step-list {list-style:none; margin:0; padding:0; display:grid; gap:10px}
body.kls-grains .gr-step-list li {display:flex; gap:14px; align-items:flex-start; margin:0; padding:14px 16px; border-radius:16px; transition:background .3s}
/* Film: six living pictures, one at a time; the caption under it and the step beside it follow (product-story-grains.js). */
body.kls-grains .gr-scene {padding:0; background:none}
body.kls-grains .gr-film {overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 14px 34px rgba(36,64,106,.14)}
body.kls-grains .gr-film-pics {position:relative; aspect-ratio:3/2; overflow:hidden; background:#EAF6FC}
body.kls-grains .gr-live svg {position:absolute; inset:0; display:block; width:100%; height:100%}
body.kls-grains .gr-film-caps {display:grid; padding:12px 16px 14px}
body.kls-grains .gr-film-cap {grid-area:1/1; display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; line-height:1.35; color:var(--s-navy); opacity:0; transition:opacity .35s}
body.kls-grains .gr-film-cap.is-on {opacity:1}
body.kls-grains .gr-film-cap b {display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--s-navy); color:#fff; font-size:15px}
body.kls-grains .gr-step-list li.is-on {background:var(--s-mist)}
@media (max-width:767px) {body.kls-grains .gr-film-caps {padding:10px 12px 12px} body.kls-grains .gr-film-cap {font-size:15px}}
/* ---------- milk tool ---------- */
body.kls-grains .gr-calc {background:var(--s-navy)}
body.kls-grains .gr-calc .kls-eyebrow {color:var(--s-yellow)}
body.kls-grains .gr-calc .kls-head h2 {color:#fff}
body.kls-grains .gr-calc .kls-lede {color:#C8D6E8}
body.kls-grains .gr-tool {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; max-width:980px; margin:0 auto; padding:28px; border-radius:24px; background:#fff}
body.kls-grains .gr-tool.is-off {display:none}
body.kls-grains .gr-tool-in {display:grid; gap:20px}
body.kls-grains .gr-field {border:0; margin:0; padding:0; min-width:0}
body.kls-grains .gr-field legend {padding:0; margin:0 0 8px; font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-grains .gr-field output {color:var(--s-blue)}
body.kls-grains .gr-chips {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
body.kls-grains #page .gr-chip {min-height:44px; padding:8px 14px; border:1.5px solid var(--s-line); border-radius:999px; background:#fff; color:var(--s-navy); font-size:15px; font-weight:700; text-transform:none; letter-spacing:0}
body.kls-grains #page .gr-chip[aria-pressed="true"] {border-color:var(--s-navy); background:var(--s-navy); color:#fff}
body.kls-grains .gr-range {width:100%; height:44px; margin:0; accent-color:var(--s-navy); background:transparent}
body.kls-grains .gr-seg {display:grid; grid-template-columns:1fr 1fr; gap:10px}
body.kls-grains .gr-seg {position:relative}
body.kls-grains .gr-seg input {position:absolute; top:0; left:0; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
body.kls-grains .gr-seg label {display:flex; flex-direction:column; gap:2px; margin:0; padding:12px 14px; border:1.5px solid var(--s-line); border-radius:14px; cursor:pointer}
body.kls-grains .gr-seg input:checked + label {border-color:var(--s-navy); background:var(--s-mist); box-shadow:inset 0 0 0 1px var(--s-navy)}
body.kls-grains .gr-seg input:focus-visible + label {outline:3px solid var(--s-blue); outline-offset:2px}
body.kls-grains .gr-seg strong {font-size:16px; color:var(--s-navy)}
body.kls-grains .gr-seg span {font-size:14px; line-height:1.45; color:var(--s-muted)}
body.kls-grains .gr-result {display:flex; gap:22px; align-items:center; padding:18px; border-radius:18px; background:var(--s-ice)}
body.kls-grains .gr-jar {position:relative; flex:none; width:96px; height:150px; border:3px solid var(--s-navy); border-top-width:10px; border-radius:10px 10px 22px 22px; background:#fff; overflow:hidden}
body.kls-grains .gr-jar-fill {position:absolute; left:0; right:0; bottom:0; height:calc(var(--f,.3) * 100%); background:#FFFDF6; border-top:3px solid var(--s-sky); transition:height .45s cubic-bezier(.2,.8,.2,1)}
body.kls-grains .gr-jar-mark {position:absolute; right:4px; bottom:calc((var(--m,1) * 100%) - 18px); font-size:14px; font-weight:700; color:var(--s-muted)}
body.kls-grains .gr-jar-mark::before {content:""; position:absolute; right:calc(100% + 3px); top:9px; width:16px; border-top:1.5px solid var(--s-muted)}
body.kls-grains .gr-result-text {display:grid; gap:6px; min-width:0}
body.kls-grains .kls-story-body .gr-calc p.gr-result-ml {font-size:26px; line-height:1.3; font-weight:800; color:var(--s-navy)}
body.kls-grains .kls-story-body .gr-calc p.gr-result-sub {font-size:15px; color:var(--s-muted)}
body.kls-grains .kls-story-body .gr-calc p.gr-result-hot {font-size:15px; line-height:1.5; font-weight:700; color:#B4321F}
body.kls-grains .gr-result-more {font-size:15px; font-weight:700; color:var(--s-blue)!important; text-decoration:underline; text-underline-offset:3px}
body.kls-grains .gr-tool .gr-result {grid-column:2; grid-row:1 / span 1; align-self:start; flex-direction:column; text-align:center}

/* ---------- did it work ---------- */
body.kls-grains .gr-check {background:#fff}
body.kls-grains .gr-check-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
body.kls-grains .gr-ph {padding:26px; border-radius:22px; background:var(--s-ice)}
body.kls-grains .gr-ph-bar {position:relative; height:26px; margin:46px 6px 34px; border-radius:999px; background:linear-gradient(90deg,#F2A93B 0%,#F4D04A 35%,#B7D86A 60%,#6CC3A0 100%)}
body.kls-grains .gr-ph-line {position:absolute; top:-12px; bottom:-12px; left:calc(var(--x) * 100%); width:3px; margin-left:-1.5px; background:var(--s-navy); border-radius:2px}
body.kls-grains .gr-ph-dot {position:absolute; top:50%; left:calc(.925 * 100%); width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:#fff; border:4px solid var(--s-navy); box-shadow:0 4px 10px rgba(36,64,106,.25)}
body.kls-grains .gr-ph.is-playing .gr-ph-dot {animation:gr-ph 6s ease-in-out infinite}
@keyframes gr-ph {0%,12% {left:92.5%} 60%,88% {left:12.5%} 100% {left:92.5%}}
body.kls-grains .gr-ph-tick {position:absolute; top:calc(100% + 6px); left:calc(var(--x) * 100%); transform:translateX(-50%); font-size:14px; font-weight:700; color:var(--s-muted)}
body.kls-grains .gr-ph-labels {list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(3,auto); justify-content:space-between; gap:8px}
body.kls-grains .gr-ph-labels li {margin:0; font-size:15px; font-weight:700; color:var(--s-navy)}
body.kls-grains .gr-ph-labels .is-line {text-align:center}
body.kls-grains .gr-ph-labels .is-milk {text-align:right}
body.kls-grains .gr-ph-tips {margin:0; padding-left:20px}
body.kls-grains .gr-ph-tips li {margin:0 0 6px; font-size:15px; line-height:1.6; color:#33435C}
body.kls-grains .gr-verdict {display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px}
body.kls-grains .gr-verdict > div {padding:22px; border-radius:18px}
body.kls-grains .gr-ok {background:#EEF8F1}
body.kls-grains .gr-stop {background:#FFF1EE}
body.kls-grains .gr-verdict h3 {display:flex; align-items:center; gap:10px}
body.kls-grains .gr-verdict .kls-ic {flex:none; width:34px; height:34px}

/* ---------- on arrival ---------- */
body.kls-grains .gr-arrive {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-grains .gr-arrive-list {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
body.kls-grains .gr-arrive-list li {position:relative; margin:0; display:flex; flex-direction:column; gap:10px}
body.kls-grains .gr-arrive-pic {width:100%; max-width:260px; height:auto; aspect-ratio:1; object-fit:contain; margin:0 auto 4px}
body.kls-grains .gr-arrive-list .gr-step-n {position:absolute; top:6px; left:6px}

/* ---------- care ---------- */
body.kls-grains .gr-care {background:#fff}
body.kls-grains .gr-rules {grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px 32px}
body.kls-grains .gr-care-pair {display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px}
body.kls-grains .gr-care-card {display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:center; padding:20px; border-radius:20px; background:var(--s-ice)}
body.kls-grains .gr-care-pic {width:180px; height:auto}
body.kls-grains .gr-care-card a {display:inline-block; margin-top:8px; font-size:15px; font-weight:700; color:var(--s-blue)!important; text-decoration:underline; text-underline-offset:3px}

/* ---------- troubleshooting ---------- */
body.kls-grains .gr-fix {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-grains .gr-fix-in {max-width:900px; margin:0 auto}
body.kls-grains .gr-fix-tabs {display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 20px}
body.kls-grains #page .gr-fix-tabs button {min-height:44px; padding:8px 16px; border:1.5px solid var(--s-line); border-radius:999px; background:#fff; color:var(--s-navy); font-size:16px; font-weight:700; text-transform:none; letter-spacing:0}
body.kls-grains #page .gr-fix-tabs button[aria-selected="true"] {border-color:var(--s-navy); background:var(--s-navy); color:#fff}
body.kls-grains .gr-fix-panel {padding:26px 28px; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(36,64,106,.08)}
body.kls-grains .gr-fix-links {display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; margin:20px 0 0!important}
body.kls-grains .gr-fix-links a {font-size:15px; font-weight:700; color:var(--s-blue)!important; text-decoration:underline; text-underline-offset:3px}

/* ---------- promise ---------- */
body.kls-grains .gr-promise {background:var(--s-cream)}
body.kls-grains .gr-promises {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
body.kls-grains .gr-promises li {margin:0; padding:24px; border-radius:20px; background:#fff; display:flex; flex-direction:column; gap:8px}
body.kls-grains .gr-line {margin:28px 0 0!important; text-align:center}
body.kls-grains .gr-line-btn {display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 24px; border-radius:999px; background:#06C755; color:#fff!important; font-size:17px; font-weight:800; text-decoration:none!important}
body.kls-grains .gr-line-btn .kls-ic {width:30px; height:30px}

/* ---------- phones and tablets ---------- */
@media (max-width:1023px) {
 body.kls-grains .gr-what-grid, body.kls-grains .gr-steps-grid, body.kls-grains .gr-check-grid {gap:32px}
 body.kls-grains .gr-tool {grid-template-columns:minmax(0,1fr)}
 body.kls-grains .gr-tool .gr-result {grid-column:auto; grid-row:auto; flex-direction:row; text-align:left}
 body.kls-grains .gr-promises {grid-template-columns:minmax(0,1fr)}
 body.kls-grains .gr-care-pair {grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px) {
 body.kls-grains .gr-what-grid, body.kls-grains .gr-steps-grid, body.kls-grains .gr-check-grid {grid-template-columns:minmax(0,1fr)}
 body.kls-grains .gr-box-in {grid-template-columns:minmax(0,1fr); grid-template-areas:"switch" "flat" "info" "bring"; grid-template-rows:none; gap:14px}
 body.kls-grains .gr-item-info h3 {font-size:20px}
 body.kls-grains .gr-box-switch {justify-self:stretch; display:flex}
 body.kls-grains #page .gr-box-switch button {flex:1; padding:8px 10px}
 body.kls-grains .gr-flat {padding:10px; gap:4px}
 body.kls-grains #page .gr-item {min-height:118px; padding:8px 2px}
 body.kls-grains .gr-item img {max-height:70px}
 body.kls-grains .gr-item-info {padding:18px}
 body.kls-grains .gr-arrive-list {grid-template-columns:minmax(0,1fr); gap:34px}
 body.kls-grains .gr-arrive-pic {max-width:220px}
 body.kls-grains .gr-verdict {grid-template-columns:minmax(0,1fr)}
 body.kls-grains .gr-care-card {grid-template-columns:110px minmax(0,1fr); padding:16px; gap:14px}
 body.kls-grains .gr-care-pic {width:110px}
 body.kls-grains .gr-tool {padding:18px; border-radius:20px}
 body.kls-grains .gr-result {gap:16px; padding:14px}
 body.kls-grains .gr-jar {width:72px; height:116px}
 body.kls-grains .kls-story-body .gr-calc p.gr-result-ml {font-size:22px}
 body.kls-grains .gr-fix-tabs {justify-content:flex-start}
 body.kls-grains #page .gr-fix-tabs button {font-size:15px; padding:8px 13px}
 body.kls-grains .gr-fix-panel {padding:20px}
 body.kls-grains .gr-loop-steps {grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:14px}
 body.kls-grains .gr-loop-steps li:nth-child(2)::after {display:none}
}
@media (max-width:420px) {
 body.kls-grains .gr-seg {grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce) {
 body.kls-grains .gr-steps-grid.is-playing *, body.kls-grains .gr-ph.is-playing .gr-ph-dot, body.kls-grains .gr-loop.is-playing .gr-loop-ic {animation:none!important}
 body.kls-grains .gr-ph-dot {left:12.5%}
}

/* Headings on the navy calculator band; white delivery band (the truck pictures have white backgrounds). */
body.kls-grains .kls-story-body .gr-calc .kls-head p.kls-eyebrow {color:var(--s-yellow)}
body.kls-grains .kls-story-body .gr-calc .kls-head p.kls-lede {color:#C8D6E8}
body.kls-grains .gr-delivery {background:#fff}
@media (min-width:1024px) {body.kls-grains .gr-delivery .kls-dfacts {grid-template-columns:repeat(3,minmax(0,1fr))}}
body.kls-grains .gr-jar-box {display:flex; flex-direction:column; align-items:center; gap:6px; flex:none}
body.kls-grains .kls-story-body .gr-calc p.gr-jar-cap {font-size:14px; line-height:1.3; font-weight:700; color:var(--s-muted); white-space:nowrap}
/* Promise: three rows with icons, no boxes. */
body.kls-grains .gr-promises li {padding:0; background:none; border-radius:0}
body.kls-grains .gr-promises li .kls-ic {width:56px; height:56px}
@media (max-width:1023px) {
 body.kls-grains .gr-promises {gap:22px}
 body.kls-grains .gr-promises li {display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:14px}
 body.kls-grains .gr-promises li .kls-ic {grid-row:1 / span 2}
}
/* Narrow phones: the two choices stay side by side, a little tighter. */
@media (max-width:420px) {
 body.kls-grains .gr-opts {gap:10px}
 body.kls-grains .gr-opt {padding:10px 8px 12px; border-radius:16px}
 body.kls-grains .gr-opt-pic {height:96px}
 body.kls-grains .gr-opt-pic img {max-height:96px}
 body.kls-grains .gr-opt-name {font-size:18px}
 body.kls-grains .gr-opt-desc {font-size:14px}
}
/* Policy links wrap on phones instead of running off-screen (same fix as the fruit page). */
body.kls-grains .kls-dpay-links {flex-wrap:wrap}
@media (max-width:420px) {
 body.kls-grains .gr-care-card {grid-template-columns:minmax(0,1fr); justify-items:center; text-align:left}
 body.kls-grains .gr-care-pic {width:150px}
 body.kls-grains .gr-care-card > div {justify-self:stretch}
}
/* The three original selling points are full sentences: one per row. */
body.kls-grains .kls-highlights {grid-template-columns:minmax(0,1fr)}
body.kls-grains .kls-highlights li, body.kls-grains .kls-highlights li:first-child {font-size:16px; line-height:1.6}
body.kls-grains .kls-highlights a {text-decoration:none!important; color:var(--s-navy)!important}
/* Kit cards: what the kit adds, in the accent colour (as on the gallery's 4 種選擇). */
body.kls-grains .gr-opt-extra {font-style:normal; font-weight:800; color:var(--s-price)}
/* Three promises under Add to cart. */
body.kls-grains .gr-trust {list-style:none; margin:14px 0 4px!important; padding:14px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:1.5px solid var(--s-line); border-bottom:1.5px solid var(--s-line)}
body.kls-grains .gr-trust li {display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin:0!important}
body.kls-grains .gr-trust .kls-ic {width:44px; height:44px}
body.kls-grains .gr-trust strong {display:block; font-size:15px; line-height:1.35; color:var(--s-navy)}
body.kls-grains .gr-trust li > span > span {display:block; margin-top:2px; font-size:14px; line-height:1.45; color:var(--s-muted)}
body.kls-grains .gr-opt-desc, body.kls-grains .gr-trust strong, body.kls-grains .gr-trust li > span > span {text-wrap:balance}
body.kls-grains .gr-ph-run {display:inline-block}
body.kls-grains:lang(zh-TW) .gr-opt-name, html[lang^="zh"] body.kls-grains .gr-opt-name {word-break:keep-all}

/* Did it work: one drop on the strip (6 s loop, frame 0 = dropper over a dark blue strip, colour chart beside it). */
body.kls-grains .gr-strip {padding:24px; border-radius:22px; background:var(--s-ice)}
body.kls-grains .gr-strip-svg {display:block; width:100%; max-width:420px; height:auto; margin:6px auto 10px}
body.kls-grains .gr-strip-svg :is(.gx-dropper, .gx-dropfall, .gx-spot, .gx-spot-ring, .gx-ph) {transform-box:fill-box; transform-origin:50% 50%}
body.kls-grains .gr-strip-svg .gx-dropfall {opacity:0}
body.kls-grains .gr-strip-svg .gx-spot {transform:scale(0)}
body.kls-grains .gr-strip-svg .gx-spot-ring {opacity:0}
body.kls-grains .gr-strip-svg .gx-ph {opacity:0}
body.kls-grains .gr-strip.is-playing .gr-strip-svg * {animation-duration:6s; animation-iteration-count:infinite; animation-timing-function:ease-in-out}
body.kls-grains .gr-strip.is-playing .gx-dropper {animation-name:st-dropper}
body.kls-grains .gr-strip.is-playing .gx-dropfall {animation-name:st-fall}
body.kls-grains .gr-strip.is-playing .gx-spot {animation-name:st-spot}
body.kls-grains .gr-strip.is-playing .gx-spot-ring {animation-name:st-ring}
body.kls-grains .gr-strip.is-playing .gx-ph {animation-name:st-ph}
@keyframes st-dropper {0%,10% {transform:translateY(0)} 22%,30% {transform:translateY(46px)} 40%,100% {transform:translateY(0)}}
@keyframes st-fall {0%,28% {opacity:0; transform:translateY(0)} 30% {opacity:1} 40% {opacity:1; transform:translateY(90px)} 41%,100% {opacity:0; transform:translateY(90px)}}
@keyframes st-spot {0%,40% {transform:scale(0); fill:#2B5BB0} 46% {transform:scale(1); fill:#2B5BB0} 62%,92% {transform:scale(1); fill:#4E9A5E} 100% {transform:scale(0)}}
@keyframes st-ring {0%,62% {opacity:0; transform:scale(1)} 66% {opacity:1} 80%,100% {opacity:0; transform:scale(2.2)}}
@keyframes st-ph {0%,64% {opacity:0; transform:translateY(8px)} 70%,92% {opacity:1; transform:none} 100% {opacity:0}}
body.kls-grains .gr-strip-keys {list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px}
body.kls-grains .gr-strip-keys li {display:flex; align-items:center; gap:10px; margin:0; font-size:15px; font-weight:700; line-height:1.45; color:var(--s-navy)}
body.kls-grains .gr-strip-keys i {flex:none; width:22px; height:22px; border-radius:6px; box-shadow:inset 0 0 0 2px rgba(36,64,106,.25)}
body.kls-grains .gr-strip-rules {margin:0 0 14px; padding-left:20px}
body.kls-grains .gr-strip-rules li {margin:0 0 6px; font-size:15px; line-height:1.6; color:#33435C}
@media (prefers-reduced-motion:reduce) {body.kls-grains .gr-strip-svg * {animation:none!important} body.kls-grains .gr-strip-svg .gx-spot {transform:none} body.kls-grains .gr-strip-svg .gx-ph {opacity:1}}

/* Our YouTube videos: a still with a play button; the player loads only on click. */
body.kls-grains #page .gr-video {position:relative; display:block; width:100%; max-width:720px; margin:28px auto 0; padding:0; border:0; border-radius:18px; overflow:hidden; background:#000; cursor:pointer; text-transform:none; letter-spacing:0; box-shadow:0 10px 30px rgba(36,64,106,.15)}
body.kls-grains #page .gr-video img {display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; opacity:.9}
body.kls-grains .gr-video-play {position:absolute; left:50%; top:45%; width:68px; height:48px; margin:-24px 0 0 -34px; border-radius:14px; background:#E0402B}
body.kls-grains .gr-video-play::after {content:""; position:absolute; left:27px; top:14px; border-left:18px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent}
body.kls-grains .gr-video-cap {position:absolute; left:0; right:0; bottom:0; padding:12px 16px; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; font-size:16px; font-weight:800; text-align:left}
body.kls-grains #page .gr-video--small {margin:14px 0 0; max-width:none}
body.kls-grains .gr-video-frame--small {margin:18px 0 0; max-width:none; border-radius:14px}
body.kls-grains .gr-item-info .gr-video--small {margin-top:18px; border-radius:14px}
body.kls-grains .gr-video-frame {display:block; width:100%; max-width:720px; margin:28px auto 0; aspect-ratio:16/9; border:0; border-radius:18px}
body.kls-grains .gr-check-grid {align-items:start}
body.kls-grains .gr-steps-grid {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px}
@media (max-width:767px) {body.kls-grains .gr-steps-grid {grid-template-columns:minmax(0,1fr)}}