/* Water kefir grains starter kit (24577): kit card, parcel flat-lay, water and sugar chooser, living-pictures film, amounts and
   timing tool, fermentation map, second fermentation, arrival, care, troubleshooting and promise. Loaded only on pages whose
   data file sets 'assets' => 'wkgrains'. Text sizes follow the story scale: 17px reading text, 15px notes, 14px smallest. */

/* ---------- purchase area ---------- */
body.kls-wkgrains .kls-highlights {grid-template-columns:minmax(0,1fr)}
body.kls-wkgrains .kls-highlights li, body.kls-wkgrains .kls-highlights li:first-child {font-size:16px; line-height:1.6}
body.kls-wkgrains .kls-highlights a {text-decoration:none!important; color:var(--s-navy)!important}
/* Full sentences wrap like normal text (the shared keep-all rule suits short phrases only). */
html[lang^="zh"] body.kls-wkgrains.kls-story .kls-highlights li, body.kls-wkgrains :is(.wg-kit, .wg-trust) :is(li, p, span, strong) {word-break:normal; overflow-wrap:anywhere; text-wrap:pretty}
body.kls-wkgrains .wg-buy {margin:0 0 14px}
body.kls-wkgrains .wg-kit {padding:18px; border:2px solid var(--s-navy); border-radius:18px; background:#fff}
body.kls-wkgrains .kls-story-body .wg-kit p, body.kls-wkgrains .wg-kit p {margin:0}
body.kls-wkgrains .wg-kit-title {font-size:18px; font-weight:800; color:var(--s-navy)}
body.kls-wkgrains .wg-kit-has {list-style:none; margin:12px 0 10px!important; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
body.kls-wkgrains .wg-kit-has li {display:flex; flex-direction:column; align-items:center; gap:6px; margin:0!important; text-align:center; font-size:14px; font-weight:700; line-height:1.35; color:var(--s-navy)}
body.kls-wkgrains .wg-kit-pic {display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:14px; background:var(--s-ice)}
body.kls-wkgrains .wg-kit-pic img {width:auto; max-width:82%; height:auto; max-height:78%; object-fit:contain}
body.kls-wkgrains .wg-kit-more {font-size:15px; line-height:1.55; color:#33435C}
body.kls-wkgrains .wg-kit-yield {margin-top:8px!important; padding:8px 12px; border-radius:10px; background:#FFF6D6; font-size:15px; font-weight:700; line-height:1.55; color:var(--s-navy)}
body.kls-wkgrains .wg-kit-bring {margin-top:8px!important; font-size:15px; line-height:1.55; color:var(--s-muted)}
body.kls-wkgrains .wg-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-wkgrains .wg-trust li {display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin:0!important}
body.kls-wkgrains .wg-trust .kls-ic {width:44px; height:44px}
body.kls-wkgrains .wg-trust strong {display:block; font-size:15px; line-height:1.35; color:var(--s-navy)}
body.kls-wkgrains .wg-trust li > span > span {display:block; margin-top:2px; font-size:14px; line-height:1.45; color:var(--s-muted)}

/* ---------- shared bits ---------- */
body.kls-wkgrains :is(.wg-points, .wg-signs, .wg-rules) {list-style:none; margin:0; padding:0; display:grid; gap:18px}
body.kls-wkgrains :is(.wg-points, .wg-signs, .wg-rules) li {display:flex; gap:14px; align-items:flex-start; margin:0}
body.kls-wkgrains :is(.wg-points, .wg-signs, .wg-rules, .wg-promises, .wg-bring, .wg-extras, .wg-flavours) .kls-ic {flex:none; width:48px; height:48px}
body.kls-wkgrains .wg-step-n {display:inline-grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--s-navy); color:#fff; font-size:16px; font-weight:800}
body.kls-wkgrains .wg-chip-cell {position:relative; display:inline-flex; min-width:0}
body.kls-wkgrains .wg-chip-cell input {position:absolute; top:50%; left:50%; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}

/* ---------- what the grains are ---------- */
body.kls-wkgrains .wg-what {background:#fff}
body.kls-wkgrains .wg-what-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center}
body.kls-wkgrains .wg-loop {display:grid; justify-items:center}
body.kls-wkgrains .wg-loop-photo {width:min(100%,400px); height:auto; filter:drop-shadow(0 18px 24px rgba(36,64,106,.18))}
body.kls-wkgrains .wg-loop-steps {list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; width:100%}
body.kls-wkgrains .wg-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-wkgrains .wg-loop-steps li:not(:last-child)::after {content:"›"; position:absolute; right:-9px; top:14px; font-size:22px; color:var(--s-sky)}
body.kls-wkgrains .wg-loop-ic .kls-ic {width:46px; height:46px}
body.kls-wkgrains .wg-loop.is-playing .wg-loop-ic {animation:wg-blink 7.5s ease-in-out infinite; animation-delay:calc(var(--i) * 1.5s)}
@keyframes wg-blink {0%,20%,100% {transform:none} 8% {transform:translateY(-6px) scale(1.08)}}
body.kls-wkgrains .wg-loop-steps li > span:first-child {display:block}

/* ---------- what's in the box ---------- */
body.kls-wkgrains .wg-box {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-wkgrains .wg-box-in {display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); grid-template-areas:"flat info" "bring info"; grid-template-rows:auto 1fr; gap:18px 36px; align-items:start}
body.kls-wkgrains .wg-flat {grid-area:flat; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px; border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(36,64,106,.08)}
body.kls-wkgrains #page .wg-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:border-color .15s, background .15s}
body.kls-wkgrains #page .wg-item:hover {background:var(--s-ice)}
body.kls-wkgrains #page .wg-item[aria-expanded="true"] {border-color:var(--s-navy); background:var(--s-mist)}
body.kls-wkgrains .wg-item img {width:auto; max-width:100%; height:auto; max-height:96px; object-fit:contain}
body.kls-wkgrains :is(.wg-item--thermo, .wg-item--spoon, .wg-item--spatula) img {max-height:48px}
body.kls-wkgrains .wg-item-name {font-size:15px; font-weight:700; line-height:1.35; text-align:center}
body.kls-wkgrains .wg-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-wkgrains .wg-item-info h3 {margin:0 0 12px; font-size:22px; color:#fff!important}
body.kls-wkgrains .wg-info-list {list-style:none; margin:0; padding:0; display:grid; gap:12px}
body.kls-wkgrains .kls-story-body .wg-info-list li {position:relative; margin:0; padding-left:20px; font-size:16px; line-height:1.65; color:#DDE8F5}
body.kls-wkgrains .wg-info-list li::before {content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--s-yellow)}
body.kls-wkgrains .wg-bring {grid-area:bring; display:flex; gap:12px; align-items:center; margin:0; font-size:17px; font-weight:700; line-height:1.55; color:var(--s-navy)}

/* ---------- water and sugar ---------- */
body.kls-wkgrains .wg-water {background:#fff}
body.kls-wkgrains .wg-pick {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px}
body.kls-wkgrains .wg-pick-col {display:flex; flex-direction:column; gap:14px; min-width:0; padding:22px; border-radius:22px; background:var(--s-ice)}
body.kls-wkgrains .wg-pick-set {border:0; margin:0; padding:0; min-width:0}
body.kls-wkgrains .wg-pick-set legend {padding:0; margin:0 0 10px; font-size:18px; font-weight:800; color:var(--s-navy)}
body.kls-wkgrains .wg-pick-chips {display:flex; flex-wrap:wrap; gap:8px}
body.kls-wkgrains .wg-chip {display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0; 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; line-height:1.3; cursor:pointer}
body.kls-wkgrains .wg-chip::before {content:""; flex:none; width:10px; height:10px; border-radius:50%; background:#2F8F5B}
body.kls-wkgrains .wg-chip--add::before {background:#D99A12}
body.kls-wkgrains .wg-chip--no::before {background:#E0402B}
body.kls-wkgrains .wg-chip-cell input:checked + .wg-chip {border-color:var(--s-navy); background:var(--s-navy); color:#fff}
body.kls-wkgrains .wg-chip-cell input:focus-visible + .wg-chip, body.kls-wkgrains .wg-chip-cell input:focus-visible + label {outline:3px solid var(--s-blue); outline-offset:2px}
body.kls-wkgrains .wg-verdict {padding:18px; border-radius:16px; background:#fff; border-left:6px solid #2F8F5B}
body.kls-wkgrains .wg-verdict--add {border-left-color:#D99A12}
body.kls-wkgrains .wg-verdict--no {border-left-color:#E0402B}
body.kls-wkgrains .kls-story-body .wg-verdict p {margin:0 0 8px; font-size:16px; line-height:1.65}
body.kls-wkgrains .wg-verdict-tag {display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px}
body.kls-wkgrains .wg-verdict-tag .kls-ic {flex:none; width:32px; height:32px}
body.kls-wkgrains .wg-verdict-tag strong {font-size:18px; color:var(--s-navy)}
body.kls-wkgrains .wg-verdict-tag span {font-size:15px; font-weight:700; color:var(--s-muted)}
body.kls-wkgrains .kls-story-body .wg-verdict p.wg-verdict-do {margin:0; font-weight:700; color:var(--s-navy)}
body.kls-wkgrains .wg-extras {margin-top:36px}
body.kls-wkgrains .wg-extras h3 {margin:0 0 16px; text-align:center}
body.kls-wkgrains .wg-extras ul {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
body.kls-wkgrains .wg-extras li {display:flex; gap:14px; align-items:flex-start; margin:0}
body.kls-wkgrains .wg-extras h4, body.kls-wkgrains .wg-flavours h4, body.kls-wkgrains .wg-bottles h4, body.kls-wkgrains .wg-rest h4 {margin:0 0 4px; font-size:17px; font-weight:800; line-height:1.4; color:var(--s-navy)}
body.kls-wkgrains .kls-story-body :is(.wg-extras, .wg-flavours, .wg-bottles) p {margin:0; font-size:15px; line-height:1.6}

/* ---------- steps + film ---------- */
body.kls-wkgrains .wg-steps {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-wkgrains .wg-steps-grid {display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:36px; align-items:start}
body.kls-wkgrains .wg-film {overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 14px 34px rgba(36,64,106,.14)}
body.kls-wkgrains .wg-film-pics {position:relative; aspect-ratio:3/2; overflow:hidden; background:#EAF6FC}
body.kls-wkgrains .wg-film-pics svg {position:absolute; inset:0; display:block; width:100%; height:100%}
body.kls-wkgrains .wg-film-caps {display:grid; padding:12px 16px 14px}
body.kls-wkgrains .wg-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-wkgrains .wg-film-cap.is-on {opacity:1}
body.kls-wkgrains .wg-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-wkgrains .wg-step-list {list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px}
body.kls-wkgrains .wg-step-phases {min-width:0}
body.kls-wkgrains .wg-phase {display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:8px 14px; border-radius:12px; background:var(--s-navy); color:#fff!important; font-size:17px; line-height:1.4}
body.kls-wkgrains .wg-phase--2 {background:#E0A23A; color:var(--s-navy)!important}
body.kls-wkgrains .wg-step-list h4 {margin:2px 0 4px; font-size:18px; font-weight:800; line-height:1.4; color:var(--s-navy)}
body.kls-wkgrains .wg-step-list li {display:flex; gap:14px; align-items:flex-start; margin:0; padding:12px 14px; border-radius:16px; transition:background .3s}
body.kls-wkgrains .wg-step-list li.is-on {background:#fff; box-shadow:0 6px 18px rgba(36,64,106,.10)}
body.kls-wkgrains .wg-step-list h3 {margin:2px 0 4px; font-size:18px}
body.kls-wkgrains .kls-story-body .wg-step-list p {margin:0; font-size:16px; line-height:1.65}
@media (min-width:1024px) {body.kls-wkgrains .wg-scene {position:sticky; top:96px}}

/* ---------- amounts and timing ---------- */
body.kls-wkgrains .wg-calc {background:var(--s-navy)}
body.kls-wkgrains .kls-story-body .wg-calc .kls-head p.kls-eyebrow {color:var(--s-yellow)}
body.kls-wkgrains .wg-calc .kls-head h2 {color:#fff}
body.kls-wkgrains .kls-story-body .wg-calc .kls-head p.kls-lede {color:#C8D6E8}
body.kls-wkgrains .wg-tool {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:28px; max-width:1100px; margin:0 auto; padding:28px; border-radius:24px; background:#fff}
body.kls-wkgrains .wg-tool-in {display:grid; gap:20px; align-content:start}
body.kls-wkgrains .wg-field {border:0; margin:0; padding:0; min-width:0}
body.kls-wkgrains .wg-field legend {padding:0; margin:0 0 8px; font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-wkgrains .wg-field output {color:var(--s-blue)}
body.kls-wkgrains .wg-chips {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
body.kls-wkgrains #page .wg-tchip {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-wkgrains #page .wg-tchip[aria-pressed="true"] {border-color:var(--s-navy); background:var(--s-navy); color:#fff}
body.kls-wkgrains .wg-range {width:100%; height:44px; margin:0; accent-color:var(--s-navy); background:transparent}
body.kls-wkgrains .wg-seg {display:grid; grid-template-columns:1fr 1fr; gap:10px}
body.kls-wkgrains .wg-seg .wg-chip-cell {display:flex}
body.kls-wkgrains .wg-seg label {flex:1; 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-wkgrains .wg-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-wkgrains .wg-seg strong {font-size:16px; color:var(--s-navy)}
body.kls-wkgrains .wg-seg span {font-size:14px; line-height:1.45; color:var(--s-muted)}
body.kls-wkgrains .wg-result {display:grid; gap:18px; align-content:start}
body.kls-wkgrains .wg-recipe {display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; padding:18px; border-radius:18px; background:var(--s-ice)}
body.kls-wkgrains .wg-jars {display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; width:122px}
body.kls-wkgrains .wg-jar {position:relative; width:36px; height:58px; border:2.5px solid var(--s-navy); border-top-width:6px; border-radius:6px 6px 12px 12px; background:#fff; overflow:hidden}
body.kls-wkgrains .wg-jar::after {content:""; position:absolute; left:0; right:0; bottom:0; height:50%; background:#F7E7B4; border-top:2px solid #E3C77A}
body.kls-wkgrains .wg-jar i {position:absolute; left:4px; right:4px; bottom:3px; height:9px; border-radius:4px; background:repeating-radial-gradient(circle at 3px 4px,#E7D3A1 0 2px,#F8EED3 2px 4px); z-index:1}
body.kls-wkgrains .wg-jar.is-over {opacity:.35; border-style:dashed}
body.kls-wkgrains .wg-recipe-list {list-style:none; margin:0; padding:0; display:grid; gap:8px}
body.kls-wkgrains .kls-story-body .wg-recipe-list li {margin:0; padding-left:22px; position:relative; font-size:16px; line-height:1.55; color:var(--s-navy)}
body.kls-wkgrains .wg-recipe-list li::before {content:""; position:absolute; left:2px; top:.5em; width:10px; height:10px; border-radius:3px; background:var(--s-yellow); box-shadow:inset 0 0 0 1.5px var(--s-navy)}
body.kls-wkgrains .wg-recipe-list b {font-weight:800}
body.kls-wkgrains .kls-story-body .wg-calc p.wg-result-warn {grid-column:1 / -1; margin:0; padding:10px 12px; border-radius:10px; background:#FFF1EE; font-size:15px; line-height:1.55; font-weight:700; color:#B4321F}
body.kls-wkgrains .kls-story-body .wg-calc p.wg-result-warn.is-cold {background:#EAF2FD; color:#24406A}
body.kls-wkgrains .wg-plan {padding:18px; border-radius:18px; border:1.5px solid var(--s-line)}
body.kls-wkgrains .kls-story-body .wg-calc p.wg-plan-first {margin:0 0 12px; font-size:20px; line-height:1.4; font-weight:800; color:var(--s-navy)}
body.kls-wkgrains .wg-plan-list {list-style:none; margin:0; padding:0; position:relative; display:grid; gap:12px}
body.kls-wkgrains .wg-plan-list::before {content:""; position:absolute; left:62px; top:8px; bottom:8px; width:2px; background:var(--s-line)}
body.kls-wkgrains .wg-plan-list li {position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:26px; margin:0}
body.kls-wkgrains .wg-plan-when {font-size:14px; font-weight:800; line-height:1.35; color:var(--s-blue); text-align:right}
body.kls-wkgrains .wg-plan-when small {display:block; font-size:14px; font-weight:700; color:var(--s-muted)}
body.kls-wkgrains .wg-plan-list li::after {content:""; position:absolute; left:56px; top:5px; width:10px; height:10px; border-radius:50%; background:#fff; border:2.5px solid var(--s-navy)}
body.kls-wkgrains .wg-plan-list li:last-child::after {background:var(--s-yellow)}
body.kls-wkgrains .wg-plan-list h4 {margin:0 0 2px; font-size:16px; line-height:1.45; color:var(--s-navy)}
body.kls-wkgrains .kls-story-body .wg-plan-list p {margin:0; font-size:15px; line-height:1.55; color:#33435C}
body.kls-wkgrains .wg-plan-wait {display:inline-block; margin-top:4px; padding:1px 8px; border-radius:999px; background:#FFF6D6; font-size:14px; font-weight:700; color:var(--s-navy)}
body.kls-wkgrains .kls-story-body .wg-calc p.wg-plan-note {margin:12px 0 0; font-size:15px; line-height:1.55; color:var(--s-muted)}
body.kls-wkgrains .kls-story-body .wg-calc p.wg-plan-note:empty {display:none}
body.kls-wkgrains .kls-story-body .wg-calc p.wg-plan-more {margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--s-muted)}

/* ---------- did it work ---------- */
body.kls-wkgrains .wg-check {background:#fff}
body.kls-wkgrains .wg-check-grid {display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:start}
body.kls-wkgrains .wg-map {padding:24px; border-radius:22px; background:var(--s-ice)}
body.kls-wkgrains .wg-map h3 {margin:0 0 14px; font-size:18px}
body.kls-wkgrains .wg-map-bar {display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin:0 0 14px}
body.kls-wkgrains #page .wg-map-bar button {display:flex; flex-direction:column; align-items:center; gap:4px; min-height:64px; padding:8px 2px 6px; border:0; border-radius:10px; background:var(--c); color:#fff; text-transform:none; letter-spacing:0; line-height:1.2; cursor:pointer; transition:transform .15s, box-shadow .15s}
body.kls-wkgrains #page .wg-map-bar button[aria-selected="true"] {transform:translateY(-4px); box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--s-navy)}
body.kls-wkgrains .wg-map-ph {font-size:16px; font-weight:800}
body.kls-wkgrains .wg-map-name {font-size:14px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.35)}
body.kls-wkgrains .wg-map-panel {padding:16px 18px; border-radius:16px; background:#fff; border-left:6px solid var(--c)}
body.kls-wkgrains .kls-story-body .wg-map-panel p {margin:0 0 6px; font-size:16px; line-height:1.6}
body.kls-wkgrains .wg-map-head {display:flex; align-items:baseline; gap:10px; font-size:18px!important; font-weight:800; color:var(--s-navy)}
body.kls-wkgrains .kls-story-body .wg-map-panel p.wg-map-do {margin:0; font-weight:700; color:var(--s-navy)}
body.kls-wkgrains .wg-map-strip {display:flex; gap:12px; align-items:center; margin:14px 0 0!important; font-size:15px; line-height:1.55}
body.kls-wkgrains .wg-map-strip .kls-ic {flex:none; width:44px; height:44px}
body.kls-wkgrains .wg-verdict-pair {display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px}
body.kls-wkgrains .wg-verdict-pair > div {padding:22px; border-radius:18px}
body.kls-wkgrains .wg-ok {background:#EEF8F1}
body.kls-wkgrains .wg-stop {background:#FFF1EE}
body.kls-wkgrains .wg-verdict-pair h3 {display:flex; align-items:center; gap:10px}
body.kls-wkgrains .wg-verdict-pair .kls-ic {flex:none; width:34px; height:34px}

/* ---------- second fermentation ---------- */
body.kls-wkgrains .wg-f2 {background:linear-gradient(180deg,#FFF8E6,#fff)}
body.kls-wkgrains .wg-f2-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; align-items:start}
body.kls-wkgrains .wg-bottles h3 {margin:0 0 14px; font-size:18px}
body.kls-wkgrains .wg-bottles ul {list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px}
body.kls-wkgrains .wg-bottles li {display:flex; gap:12px; align-items:center; margin:0; padding:10px 12px; border-radius:14px; background:#fff}
body.kls-wkgrains .wg-bottle-no li {background:#FFF5F3}
body.kls-wkgrains .wg-bottle-ic {flex:none; width:52px; height:52px}
body.kls-wkgrains .wg-press {display:grid; grid-template-columns:160px minmax(0,1fr); grid-template-areas:"btn text" "fl fl"; gap:10px 18px; align-items:center}
body.kls-wkgrains .wg-press-pic {grid-area:btn; width:160px; height:auto; border-radius:18px; background:#fff}
body.kls-wkgrains .wg-squeeze-text {grid-area:text; margin:0!important; font-size:16px; font-weight:700; line-height:1.6; color:var(--s-navy)}
body.kls-wkgrains .wg-flavours {grid-area:fl; margin-top:14px}
body.kls-wkgrains .wg-flavours h3 {margin:0 0 14px; font-size:18px}
body.kls-wkgrains .wg-flavours ul {list-style:none; margin:0; padding:0; display:grid; gap:16px}
body.kls-wkgrains .wg-flavours li {display:flex; gap:12px; align-items:flex-start; margin:0}
body.kls-wkgrains .wg-flavours h4 b {display:inline-block; margin-left:4px; padding:0 8px; border-radius:999px; background:var(--s-yellow); font-size:15px}

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

/* ---------- care ---------- */
body.kls-wkgrains .wg-care {background:#fff}
body.kls-wkgrains .wg-rules {grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px 32px}
body.kls-wkgrains .wg-rest {display:grid; grid-template-columns:1.4fr 1fr; gap:24px; margin-top:44px}
body.kls-wkgrains .wg-rest-card {padding:22px; border-radius:20px; background:var(--s-ice)}
body.kls-wkgrains .wg-rest-card h3 {display:flex; align-items:center; gap:10px; margin:0 0 12px}
body.kls-wkgrains .wg-rest-card h3 .kls-ic {flex:none; width:44px; height:44px}
body.kls-wkgrains .wg-rest-card h4 {margin-top:12px!important}

/* ---------- troubleshooting ---------- */
body.kls-wkgrains .wg-fix {background:linear-gradient(180deg,var(--s-mist),#fff)}
body.kls-wkgrains .wg-fix-in {max-width:940px; margin:0 auto}
body.kls-wkgrains .wg-fix-tabs {display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 20px}
body.kls-wkgrains #page .wg-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-wkgrains #page .wg-fix-tabs button[aria-selected="true"] {border-color:var(--s-navy); background:var(--s-navy); color:#fff}
body.kls-wkgrains .wg-fix-panel {padding:26px 28px; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(36,64,106,.08)}
body.kls-wkgrains .wg-fix-links {display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; margin:20px 0 0!important}
body.kls-wkgrains .wg-fix-links a {font-size:15px; font-weight:700; color:var(--s-blue)!important; text-decoration:underline; text-underline-offset:3px}

/* ---------- promise ---------- */
body.kls-wkgrains .wg-promise {background:var(--s-cream)}
body.kls-wkgrains .wg-promises {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
body.kls-wkgrains .wg-promises li {margin:0; display:flex; flex-direction:column; gap:8px}
body.kls-wkgrains .wg-promises li .kls-ic {width:56px; height:56px}
body.kls-wkgrains .wg-line {margin:28px 0 0!important; text-align:center}
body.kls-wkgrains .wg-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-wkgrains .wg-line-btn .kls-ic {width:30px; height:30px}
body.kls-wkgrains .kls-dpay-links {flex-wrap:wrap}

/* ---------- tablets and phones ---------- */
@media (max-width:1023px) {
 body.kls-wkgrains .wg-tool {grid-template-columns:minmax(0,1fr)}
 body.kls-wkgrains .wg-steps-grid, body.kls-wkgrains .wg-f2-grid, body.kls-wkgrains .wg-check-grid {grid-template-columns:minmax(0,1fr); gap:28px}
 body.kls-wkgrains .wg-promises {grid-template-columns:minmax(0,1fr); gap:22px}
 body.kls-wkgrains .wg-promises li {display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:14px}
 body.kls-wkgrains .wg-promises li .kls-ic {grid-row:1 / span 2}
 body.kls-wkgrains .wg-rest {grid-template-columns:minmax(0,1fr)}
 body.kls-wkgrains .wg-extras ul {grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px) {
 body.kls-wkgrains .wg-what-grid {grid-template-columns:minmax(0,1fr); gap:28px}
 body.kls-wkgrains .wg-loop-steps {grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:14px}
 body.kls-wkgrains .wg-loop-steps li:nth-child(3)::after {display:none}
 body.kls-wkgrains .wg-box-in {grid-template-columns:minmax(0,1fr); grid-template-areas:"flat" "info" "bring"; grid-template-rows:none; gap:14px}
 body.kls-wkgrains .wg-flat {padding:10px; gap:4px}
 body.kls-wkgrains #page .wg-item {min-height:118px; padding:8px 2px}
 body.kls-wkgrains .wg-item img {max-height:70px}
 body.kls-wkgrains .wg-item-info {padding:18px}
 body.kls-wkgrains .wg-item-info h3 {font-size:20px}
 body.kls-wkgrains .wg-pick {grid-template-columns:minmax(0,1fr); gap:18px}
 body.kls-wkgrains .wg-pick-col {padding:16px}
 body.kls-wkgrains .wg-film-caps {padding:10px 12px 12px}
 body.kls-wkgrains .wg-film-cap {font-size:15px}
 body.kls-wkgrains .wg-tool {padding:16px; border-radius:20px}
 body.kls-wkgrains .wg-recipe {grid-template-columns:minmax(0,1fr); padding:14px}
 body.kls-wkgrains .wg-jars {width:auto}
 body.kls-wkgrains .wg-plan {padding:14px}
 body.kls-wkgrains .wg-plan-list::before {left:56px}
 body.kls-wkgrains .wg-plan-list li {grid-template-columns:46px minmax(0,1fr); gap:28px}
 body.kls-wkgrains .wg-plan-list li::after {left:50px}
 body.kls-wkgrains .wg-map {padding:16px}
 body.kls-wkgrains .wg-map-bar {grid-template-columns:repeat(3,minmax(0,1fr))}
 body.kls-wkgrains .wg-verdict-pair {grid-template-columns:minmax(0,1fr)}
 body.kls-wkgrains .wg-press {grid-template-columns:110px minmax(0,1fr)}
 body.kls-wkgrains .wg-press-pic {width:110px}
 body.kls-wkgrains .wg-arrive-list {grid-template-columns:minmax(0,1fr); gap:34px}
 body.kls-wkgrains .wg-arrive-pic {max-width:220px}
 body.kls-wkgrains .wg-fix-tabs {justify-content:flex-start}
 body.kls-wkgrains #page .wg-fix-tabs button {font-size:15px; padding:8px 13px}
 body.kls-wkgrains .wg-fix-panel {padding:20px}
 body.kls-wkgrains .wg-kit {padding:14px}
 body.kls-wkgrains .wg-kit-has {gap:6px}
}
@media (max-width:480px) {
 body.kls-wkgrains .wg-kit-has {grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px}
 body.kls-wkgrains .wg-kit-has li {flex-direction:row; text-align:left; gap:8px}
 body.kls-wkgrains .wg-kit-pic {flex:none; width:56px}
}
@media (max-width:420px) {
 body.kls-wkgrains .wg-seg {grid-template-columns:minmax(0,1fr)}
 body.kls-wkgrains .wg-kit-has li {font-size:14px}
 body.kls-wkgrains .wg-trust {gap:6px}
}
@media (prefers-reduced-motion:reduce) {
 body.kls-wkgrains .wg-loop .wg-loop-ic {animation:none!important}
}