/* Water kefir box (19437): purchase picker, open box, what it is, how long a box lasts, repeat delivery, storage and
   delivery. Loaded only on pages whose data file lists 'wkbox' in 'assets' (with 'wk' for the sour ↔ sweet bar).
   Text sizes follow the story scale: 17px reading text, 15px notes, 14px smallest. */

/* ---------- purchase area ---------- */
/* Hidden only while our picker is drawn: with both boxes sold out the native form shows WooCommerce's stock message. */
body.kls-wb #page .summary:has(.wb-buy) form.variations_form {display:none!important}
body.kls-wb .kls-highlights {grid-template-columns:1fr}
body.kls-wb .kls-highlights .kls-hl-logo {width:56px; height:auto; object-fit:contain}
body.kls-wb .wb-buy {margin:4px 0 14px}
body.kls-wb .wb-step {border:0; margin:0 0 18px; padding:0; min-width:0}
body.kls-wb .wb-step legend {padding:0; margin:0 0 10px; font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-wb .wb-buy input[type="radio"] {position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
body.kls-wb .wb-boxes {display:grid; grid-template-columns:1fr 1fr; gap:12px}
body.kls-wb .wb-box {position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; margin:0; padding:12px 10px 14px; border:2px solid var(--s-line); border-radius:18px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s}
body.kls-wb .wb-box:hover {border-color:var(--s-sky)}
body.kls-wb .wb-buy input:checked + .wb-box,
body.kls-wb .wb-buy input:checked + .wb-mode-opt {border-color:var(--s-navy); background:var(--s-mist); box-shadow:0 0 0 2px var(--s-navy)}
body.kls-wb .wb-buy input:checked + .wb-box::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-wb .wb-buy input:focus-visible + label {outline:3px solid var(--s-blue); outline-offset:3px}
body.kls-wb .wb-buy input:disabled + .wb-box {opacity:.45; cursor:not-allowed}
body.kls-wb .wb-box-pic {display:flex; align-items:center; justify-content:center; width:100%; height:110px; overflow:hidden}
body.kls-wb .wb-box-pic img {display:block; width:auto; height:auto; max-width:100%; max-height:110px; object-fit:contain}
body.kls-wb .wb-box-name {font-size:19px; font-weight:800; line-height:1.3; color:var(--s-navy)}
body.kls-wb .wb-box-mix {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 6px; font-size:14px; color:var(--s-muted); line-height:1.5}
body.kls-wb .wb-box-mix .wb-sep {display:none}
body.kls-wb .wb-mx {white-space:nowrap}
body.kls-wb .wb-dot {display:inline-block; width:9px; height:9px; margin-right:3px; border-radius:50%; background:var(--c); vertical-align:1px}
body.kls-wb .wb-box-price {margin-top:4px; font-size:22px; font-weight:800; color:var(--s-price); line-height:1.2}
body.kls-wb .wb-box-each {font-size:15px; font-weight:700; color:var(--s-navy)}
body.kls-wb .wb-box-save {margin-top:4px; padding:3px 10px; border-radius:999px; background:#E3F4EA; color:var(--s-green); font-size:14px; font-weight:800}
body.kls-wb .wb-box-off {display:block; white-space:nowrap; font-size:16px; font-weight:900}
body.kls-wb .wb-mode-opt {display:flex; flex-direction:column; gap:2px; margin:0 0 10px; padding:12px 16px; border:2px solid var(--s-line); border-radius:16px; background:#fff; cursor:pointer}
body.kls-wb .wb-mode-opt strong {display:flex; align-items:center; gap:8px; font-size:17px; color:var(--s-navy)}
body.kls-wb .wb-mode-opt strong .kls-ic {width:28px; height:28px}
body.kls-wb .wb-mode-opt span {font-size:15px; color:var(--s-muted); line-height:1.5}
body.kls-wb .wb-plan-box {display:none; margin:-4px 0 6px; padding:14px 16px 6px; border-radius:16px; background:var(--s-ice); border:1.5px dashed var(--s-sky)}
body.kls-wb .wb-mode:has(#wb-repeat:checked) .wb-plan-box, body.kls-wb .wb-buy.is-repeat .wb-plan-box {display:block}
body.kls-wb .wb-weeks {display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
body.kls-wb .wb-weeks label {display:flex; align-items:center; justify-content:center; min-height:46px; margin:0; padding:6px; border:2px solid var(--s-line); border-radius:999px; background:#fff; color:var(--s-navy); font-size:16px; font-weight:800; line-height:1.25; text-align:center; cursor:pointer}
body.kls-wb .wb-weeks input:checked + label {border-color:var(--s-navy); background:var(--s-navy); color:#fff}
body.kls-wb .wb-pace {text-wrap:balance; margin:10px 0 8px; font-size:15px; font-weight:700; color:var(--s-navy); line-height:1.55}
body.kls-wb .wb-rules {list-style:none; margin:0; padding:0}
body.kls-wb .wb-rules li {position:relative; margin:0 0 6px; padding-left:24px; font-size:15px; line-height:1.55; color:#33435C}
body.kls-wb .wb-rules li::before {content:""; position:absolute; left:2px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--s-green) 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.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
body.kls-wb .wb-terms {margin:4px 0 8px; font-size:15px}
body.kls-wb .wb-terms a {color:var(--s-blue); font-weight:700; margin-right:14px}
body.kls-wb .wb-qty {display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:4px 0 10px}
body.kls-wb .wb-qty-label {font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-wb .wb-stepper {display:flex; align-items:center; border:2px solid var(--s-line); border-radius:999px; background:#fff; overflow:hidden}
body.kls-wb #page .wb-stepper button {width:44px; height:44px; margin:0; padding:0; border:0; background:transparent; color:var(--s-navy); font-size:22px; font-weight:700; line-height:1; text-transform:none; letter-spacing:0; box-shadow:none}
body.kls-wb #page .wb-stepper input {width:52px; height:44px; margin:0; padding:0; border:0; background:transparent; text-align:center; font-size:18px; font-weight:800; color:var(--s-navy); -moz-appearance:textfield; box-shadow:none}
body.kls-wb .wb-stepper input::-webkit-inner-spin-button, body.kls-wb .wb-stepper input::-webkit-outer-spin-button {-webkit-appearance:none; margin:0}
body.kls-wb .wb-qty-more {font-size:15px; font-weight:700; color:var(--s-navy)}
body.kls-wb .wb-sum {margin:0 0 10px; font-size:16px; font-weight:700; color:var(--s-navy); line-height:1.55; text-wrap:balance}
body.kls-wb .wb-sum b {color:var(--s-price)}
body.kls-wb #page .wb-cta {display:block; width:100%; min-height:54px; margin:0; padding:12px 10px; border:1px solid #FFDB3B; border-radius:14px; background:#FFDB3B; color:var(--s-navy); box-shadow:0 3px 0 #D9AE12; font:inherit; font-size:18px; font-weight:800; letter-spacing:2px; line-height:1.4; text-transform:none; cursor:pointer; transition:transform .1s, box-shadow .1s}
body.kls-wb #page .wb-cta:hover {background:#FFD21A}
body.kls-wb #page .wb-cta:active {transform:translateY(2px); box-shadow:0 1px 0 #D9AE12}
body.kls-wb #page .wb-cta.loading {opacity:.7; cursor:progress}
body.kls-wb #page .wb-cta:focus-visible {outline:3px solid var(--s-blue); outline-offset:3px}
body.kls-wb .wb-note {margin:8px 0 0; font-size:15px; line-height:1.5}
body.kls-wb .wb-note:empty {display:none}
body.kls-wb .wb-note.is-ok {color:var(--s-green); font-weight:700}
body.kls-wb .wb-note.is-warn {color:var(--s-price); font-weight:700}
body.kls-wb .wb-note a {color:var(--s-blue); font-weight:800}
body.kls-wb #wb-buy {scroll-margin-top:90px}
/* The one-off estimate note ("earliest dates…") stays; a box always ships chilled. */

/* ---------- what's in the box ---------- */
body.kls-wb .wb-inside {background:var(--s-ice)}
body.kls-wb .wb-inside-grid {display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:center; margin-top:36px}
body.kls-wb .wb-switch {display:inline-flex; gap:4px; margin:0 0 18px; padding:4px; border-radius:999px; background:#fff; box-shadow:0 0 0 1.5px var(--s-line)}
body.kls-wb #page .wb-switch button {min-height:44px; padding:8px 20px; border:0; border-radius:999px; background:transparent; color:var(--s-navy); font-size:16px; font-weight:800; text-transform:none; letter-spacing:0; box-shadow:none}
body.kls-wb #page .wb-switch button[aria-pressed="true"] {background:var(--s-navy); color:#fff}
body.kls-wb .wb-crate {--w:min(100%,540px); position:relative; width:var(--w); aspect-ratio:540/330; margin:0 auto}
body.kls-wb .wb-crate[hidden] {display:none}
body.kls-wb .wb-crate::before {content:""; position:absolute; left:4%; right:4%; bottom:22%; top:6%; border-radius:6px 6px 0 0; background:linear-gradient(#C99A62,#B9874F); box-shadow:inset 0 10px 0 rgba(0,0,0,.08)}
body.kls-wb .wb-cans {position:absolute; inset:0}
body.kls-wb .wb-can {position:absolute; z-index:calc(10 - var(--r)); width:calc(84% / var(--cols)); left:calc(8% + var(--c) * (84% / var(--cols)) + var(--r) * 1.2%); bottom:calc(14% + var(--r) * (40% / var(--rows))); transform:scale(calc(1 - var(--r) * .05)); transform-origin:50% 100%}
body.kls-wb .wb-can img {display:block; width:78%; height:auto; margin:0 auto; filter:drop-shadow(0 3px 3px rgba(36,64,106,.18))}
body.kls-wb .wb-crate-front {position:absolute; z-index:20; left:2%; right:2%; bottom:0; height:30%; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:4px; background:linear-gradient(#D7AC73,#C4945C); box-shadow:inset 0 3px 0 rgba(255,255,255,.35), 0 10px 18px -8px rgba(36,64,106,.35); color:#fff}
body.kls-wb .wb-crate-front b {padding:2px 14px; border-radius:6px; background:#222; font-size:clamp(20px,4vw,30px); line-height:1.3}
body.kls-wb .wb-crate-front small {font-size:15px; font-weight:800; color:#3B2A14}
body.kls-wb .wb-flavors {list-style:none; margin:0; padding:0; display:grid; gap:12px}
body.kls-wb .wb-flavors li {display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:center; margin:0; padding:12px 16px; border-radius:16px; background:var(--bg); border-left:6px solid var(--c)}
body.kls-wb .wb-fl-can {width:40px; height:auto; justify-self:center}
body.kls-wb .wb-flavors h3 {margin:0 0 2px; font-size:18px; color:var(--c)}
body.kls-wb .wb-fl-n {margin-left:4px; font-size:17px; color:var(--s-navy); white-space:nowrap}
body.kls-wb .wb-flavors p {margin:0; font-size:15px; line-height:1.55; color:#33435C}
body.kls-wb .wb-flavors .wb-fl-kcal {color:var(--s-muted); font-size:14px}
body.kls-wb .wb-pick {display:flex; align-items:center; gap:12px; max-width:820px; margin:34px auto 0; font-size:16px; line-height:1.6; color:var(--s-navy)}
body.kls-wb .wb-pick .kls-ic {flex:none; width:44px; height:44px}
body.kls-wb .wb-pick a {color:var(--s-blue); font-weight:800; white-space:nowrap; margin-right:10px}

/* ---------- what water kefir is (sour ↔ sweet bar from product-story-wk.css) ---------- */
body.kls-wb .wb-what {background:#fff}

/* ---------- how long a box lasts ---------- */
body.kls-wb .wb-plan {background:var(--s-cream)}
body.kls-wb .wb-plan-in {display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px 44px; margin-top:34px}
body.kls-wb .wb-rates {grid-column:1/-1; border:0; margin:0; padding:0; min-width:0}
body.kls-wb .wb-rates legend {padding:0; margin:0 0 10px; font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-wb .wb-rate-row {display:flex; flex-wrap:wrap; gap:8px}
body.kls-wb .wb-rate-row input {position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
body.kls-wb .wb-rate-row label {display:flex; align-items:center; min-height:46px; margin:0; padding:6px 18px; border:2px solid var(--s-navy); border-radius:999px; background:#fff; color:var(--s-navy); font-size:16px; font-weight:800; cursor:pointer; white-space:nowrap}
body.kls-wb .wb-rate-row input:checked + label {background:var(--s-navy); color:#fff}
body.kls-wb .wb-rate-row input:focus-visible + label {outline:3px solid var(--s-blue); outline-offset:3px}
body.kls-wb .wb-plan-out {min-width:0}
body.kls-wb .wb-plan-pick {margin:0 0 6px; font-size:21px; font-weight:800; color:var(--s-navy); line-height:1.45; text-wrap:pretty}
body.kls-wb .wb-plan-note {margin:0 0 14px; font-size:16px; line-height:1.6; color:#33435C}
body.kls-wb .wb-chart {margin:0; padding:14px 14px 8px; border-radius:18px; background:#fff}
body.kls-wb .wb-chart figcaption {margin:0 0 6px; font-size:14px; font-weight:800; color:var(--s-muted)}
body.kls-wb .wb-chart svg {display:block; width:100%; height:auto}
body.kls-wb .wb-chart .wb-ax {stroke:#D7E6F0; stroke-width:1}
body.kls-wb .wb-chart .wb-ax-t {fill:#5B6B82; font-size:14px; font-weight:700}
body.kls-wb .wb-chart .wb-area {fill:rgba(169,218,240,.45)}
body.kls-wb .wb-chart .wb-line {fill:none; stroke:var(--s-navy); stroke-width:3; stroke-linejoin:round}
body.kls-wb .wb-chart .wb-gap {fill:rgba(224,64,43,.14)}
body.kls-wb .wb-chart .wb-drop {fill:var(--s-yellow); stroke:var(--s-navy); stroke-width:2}
body.kls-wb .wb-chart .wb-drop-t {fill:var(--s-navy); font-size:14px; font-weight:800}
body.kls-wb .wb-plan-act {margin:14px 0 0}
body.kls-wb #page .wb-use {display:inline-flex; align-items:center; min-height:48px; padding:10px 24px; border-radius:999px; background:var(--s-yellow); color:var(--s-navy); font-size:17px; font-weight:800; text-decoration:none}
body.kls-wb .wb-shelf {margin:0; align-self:start; padding:18px; border-radius:18px; background:#fff}
body.kls-wb .wb-shelf h3 {margin:0 0 10px; font-size:18px; color:var(--s-navy)}
body.kls-wb .wb-shelf-one[hidden] {display:none}
body.kls-wb .wb-shelf .wb-fridge {display:block; width:100%; height:auto; margin:0 0 12px; border-radius:14px}
body.kls-wb .wb-shelf p {margin:0; font-size:15px; line-height:1.6; color:#33435C}

/* ---------- repeat delivery ---------- */
body.kls-wb .wb-sub {background:#fff}
body.kls-wb .wb-cycle {margin-top:34px}
body.kls-wb .wb-cycle-pan {display:block; width:100%; height:auto}
body.kls-wb .wb-steps {list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; counter-reset:none}
body.kls-wb .wb-steps li {position:relative; margin:0; display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start}
body.kls-wb .wb-step-pic {display:none}
body.kls-wb .wb-step-n {display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--s-navy); color:#fff; font-size:16px; font-weight:800}
body.kls-wb .wb-steps h3 {margin:4px 0 4px; font-size:17px; color:var(--s-navy); line-height:1.45}
body.kls-wb .wb-steps p {margin:0; font-size:15px; line-height:1.6; color:#33435C}
body.kls-wb .wb-charge {display:flex; align-items:center; gap:12px; margin:26px 0 0; padding:14px 18px; border-radius:16px; background:var(--s-cream); font-size:16px; font-weight:700; color:var(--s-navy); line-height:1.55}
body.kls-wb .wb-charge .kls-ic {flex:none; width:40px; height:40px}
body.kls-wb .wb-manage {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center; margin-top:60px; padding:36px; border-radius:24px; background:var(--s-mist)}
body.kls-wb .wb-manage h3 {margin:0 0 8px; font-size:24px; color:var(--s-navy); line-height:1.4}
body.kls-wb .wb-manage-text > p {margin:0 0 16px; font-size:16px; line-height:1.65; color:#33435C}
body.kls-wb .wb-cases {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
body.kls-wb #page .wb-cases button {min-height:44px; margin:0; padding:8px 16px; border:2px solid var(--s-navy); border-radius:999px; background:#fff; color:var(--s-navy); font-size:15px; font-weight:800; line-height:1.35; text-transform:none; letter-spacing:0; text-align:left; box-shadow:none}
body.kls-wb #page .wb-cases button[aria-selected="true"] {background:var(--s-navy); color:#fff}
body.kls-wb .wb-ans {margin:0; padding:14px 16px; border-radius:14px; background:#fff; font-size:16px; line-height:1.65; color:var(--s-navy); font-weight:600}
body.kls-wb .wb-phone {justify-self:center; width:min(100%,300px); padding:12px; border-radius:40px; background:#1E2A3B; box-shadow:0 24px 40px -18px rgba(36,64,106,.6)}
body.kls-wb .wb-phone-in {min-height:470px; padding:22px 14px 16px; border-radius:30px; background:#F4F7FA}
body.kls-wb .wb-ph-title {margin:0 0 10px; font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-wb .wb-ph-card {padding:12px; border-radius:16px; background:#fff; box-shadow:0 2px 8px rgba(36,64,106,.08)}
body.kls-wb .wb-ph-prod {display:flex; align-items:center; gap:10px; margin:0 0 8px}
body.kls-wb .wb-ph-can {width:22px; height:auto}
body.kls-wb .wb-ph-prod b {display:block; font-size:14px; color:var(--s-navy); line-height:1.4}
body.kls-wb .wb-ph-prod i {display:inline-block; margin-top:2px; padding:1px 8px; border-radius:999px; background:#E3F4EA; color:var(--s-green); font-size:14px; font-style:normal; font-weight:800}
body.kls-wb .wb-ph-card dl {margin:0}
body.kls-wb .wb-ph-card dl div {display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid #E6EDF3; font-size:14px}
body.kls-wb .wb-ph-card dt {color:var(--s-muted); font-weight:700}
body.kls-wb .wb-ph-card dd {margin:0; color:var(--s-navy); font-weight:800; text-align:right}
body.kls-wb .wb-ph-btns {display:grid; gap:8px; margin-top:12px}
body.kls-wb .wb-ph-btn {display:block; padding:10px 12px; border-radius:12px; background:#fff; border:1.5px solid #D7E6F0; color:var(--s-navy); font-size:14px; font-weight:800; transition:background .25s, border-color .25s, transform .25s}
body.kls-wb .wb-ph-cancel {color:#9A3B2E}
body.kls-wb .wb-phone-in[data-act="date"] .wb-ph-date,
body.kls-wb .wb-phone-in[data-act="pause"] .wb-ph-pause,
body.kls-wb .wb-phone-in[data-act="interval"] .wb-ph-interval,
body.kls-wb .wb-phone-in[data-act="address"] .wb-ph-address,
body.kls-wb .wb-phone-in[data-act="cancel"] .wb-ph-cancel {background:var(--s-yellow); border-color:var(--s-navy); transform:scale(1.03)}
body.kls-wb .wb-sub-rules {list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}
body.kls-wb .wb-sub-rules li {display:grid; grid-template-columns:48px 1fr; gap:12px; margin:0}
body.kls-wb .wb-sub-rules .kls-ic {width:48px; height:48px}
body.kls-wb .wb-sub-rules h3 {margin:4px 0 4px; font-size:17px; color:var(--s-navy)}
body.kls-wb .wb-sub-rules p {margin:0; font-size:15px; line-height:1.6; color:#33435C}
body.kls-wb .wb-sub .wb-terms {margin:24px 0 0}

/* ---------- delivery ---------- */
body.kls-wb .wb-delivery {background:var(--s-ice)}
body.kls-wb .wb-ways {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:34px}
body.kls-wb .wb-way {display:flex; flex-direction:column; gap:10px}
body.kls-wb .wb-way-pic {display:block; width:100%; max-width:240px; height:auto; margin:0 auto}
body.kls-wb .wb-way h3 {margin:0 0 4px; font-size:18px; color:var(--s-navy)}
body.kls-wb .wb-way p {margin:0 0 4px; font-size:15px; line-height:1.6; color:#33435C}
body.kls-wb .wb-way .wb-fee {font-size:17px; font-weight:800; color:var(--s-navy)}
body.kls-wb .wb-way .wb-fee.is-free {color:var(--s-green)}
body.kls-wb .wb-delivery .kls-dfacts {grid-template-columns:repeat(3,minmax(0,1fr))}
body.kls-wb .wb-pay-sub {display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:15px; line-height:1.55; color:var(--s-navy); font-weight:700}
body.kls-wb .wb-pay-sub .kls-ic {flex:none; width:32px; height:32px}

/* ---------- zh wrapping ---------- */
html[lang^="zh"] body.kls-wb :is(.wb-steps h3, .wb-sub-rules h3, .wb-way h3, .wb-flavors h3, .wb-manage h3) {word-break:keep-all; text-wrap:balance}
html[lang^="zh"] body.kls-wb :is(.wb-pace, .wb-sum, .wb-plan-pick, .wb-steps p, .wb-mode-opt span, .wb-rules li, .wb-shelf p) {word-break:keep-all; overflow-wrap:anywhere}
html[lang^="zh"] body.kls-wb :is(.wb-plan-note, .wb-ans, .wb-pick) {word-break:normal; line-break:strict}

/* ---------- tablet and phone ---------- */
@media (max-width:1023px) {
    body.kls-wb .wb-steps {grid-template-columns:repeat(2,minmax(0,1fr))}
    body.kls-wb .wb-manage {grid-template-columns:1fr; padding:28px 22px}
    body.kls-wb .wb-plan-in {grid-template-columns:1fr}
    body.kls-wb .wb-sub-rules {grid-template-columns:1fr; gap:18px}
}
@media (max-width:767px) {
    body.kls-wb .wb-inside-grid {grid-template-columns:1fr; gap:22px; margin-top:24px}
    body.kls-wb .wb-crate-wrap {text-align:center}
    body.kls-wb .wb-cycle-pan {display:none}
    body.kls-wb .wb-steps {grid-template-columns:1fr; gap:22px}
    body.kls-wb .wb-steps li {grid-template-columns:110px 1fr; gap:14px}
    body.kls-wb .wb-step-pic {display:block; grid-row:1 / span 2; width:110px; height:110px; object-fit:cover; border-radius:16px; background:#F5FBFD}
    body.kls-wb .wb-step-n {position:absolute; left:-6px; top:-6px; width:30px; height:30px; font-size:15px; box-shadow:0 0 0 3px #fff}
    body.kls-wb .wb-sub-rules {grid-template-columns:1fr; gap:18px}
    body.kls-wb .wb-ways {grid-template-columns:1fr; gap:22px}
    body.kls-wb .wb-way {display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center}
    body.kls-wb .wb-way-pic {width:110px}
    body.kls-wb .wb-delivery .kls-dfacts {grid-template-columns:1fr}
    body.kls-wb .wb-manage {margin-top:40px; padding:22px 16px}
    body.kls-wb .wb-manage h3 {font-size:21px}
    body.kls-wb .wb-plan-pick {font-size:19px}
    body.kls-wb .wb-rate-row label {padding:6px 14px; font-size:15px}
    body.kls-wb .wb-pick {align-items:flex-start}
}
@media (max-width:360px) {
    body.kls-wb .wb-boxes {gap:8px}
    body.kls-wb .wb-box {padding:10px 6px 12px}
    body.kls-wb .wb-box-name {font-size:17px}
    body.kls-wb .wb-box-price {font-size:20px}
    body.kls-wb .wb-weeks label {font-size:15px}
}
@media (prefers-reduced-motion:reduce) {body.kls-wb .wb-ph-btn {transition:none}}

/* Repeat delivery is card-only: the purchase-area payment row keeps only the card logos while it is chosen. */
body.kls-wb.wb-is-repeat .kls-pdp-payment-options .kls-pdp-pay-icon:not(:has(img[src*="/cw-tappay/"])) {display:none}
body.kls-wb .kls-dpay-links {flex-wrap:wrap; row-gap:8px}
/* Shared .kls-score--one min-width:260px wins over the mobile min-width:0, so the second score card fell off narrow screens. */
@media (max-width:767px) {body.kls-wb .kls-score--one {min-width:0}}