/* /start v3: form card left, sticky order summary right. Layered after start.css + ds.css. */
body{background:radial-gradient(90% 60% at 100% 0%,#FFF4B8 0,#FFF4B8 30%,transparent 30.2%),var(--c)}
.sx{grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:40px;max-width:1180px}
.ssum{order:2;position:sticky;top:20px;padding:18px 0 30px}
.scard{order:1;border-radius:28px;box-shadow:var(--sh2);border:1px solid rgba(37,74,61,.08)}
.sh1{font-family:var(--disp);text-transform:uppercase;font-weight:400;color:var(--g2);font-size:clamp(34px,3.4vw,46px);line-height:.95;margin:0}
.sh1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--y) 58%,var(--y) 90%,transparent 90%);padding:0 .05em}
.slede2{color:#3F5249;font-weight:700;margin:8px 0 18px}
.osum{padding:0;overflow:hidden}
.osum-s{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;min-height:44px;background:var(--g2);color:#fff}
.osum-s::-webkit-details-marker{display:none}
.osum-h{font:400 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.osum-q{display:flex;align-items:center;gap:10px;font:900 18px var(--sans)}
.osum-chev{width:10px;height:10px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.osum[open] .osum-chev{transform:rotate(-135deg) translateY(-2px)}
.osl{margin:0;padding:10px 22px 0}
.osl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(37,74,61,.22)}
.osl dt{font-weight:800;color:var(--g2)}.osl dt small{display:block;font-weight:600;font-size:13px;color:#3F5249}
.osl dd{margin:0;font-weight:900;color:var(--g2);white-space:nowrap}
.osl .disc dd,.osl .disc dt{color:#2F6B3E}
.osum-tot{display:flex;justify-content:space-between;align-items:baseline;padding:14px 22px 4px;font:900 17px var(--sans);color:var(--g2)}
.osum-tot b{font-size:28px;letter-spacing:-.01em}
.osum-n{padding:0 22px 18px;font-size:13.5px;color:#3F5249}
.strust{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px}
.strust li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#3F5249}
.strust svg{width:34px;height:34px;flex:none;padding:7px;border-radius:12px;background:var(--y);color:var(--g2)}
.strust b{display:block;color:var(--g2);font-size:15px}
.steps4 li span{font-size:14px}
.btn,.btn.big{background:var(--g);border-color:var(--g)}.btn:hover{background:var(--g2)}
.pcard:has(input:checked){border-color:var(--g)!important;box-shadow:0 0 0 3px rgba(58,105,90,.18),var(--sh1)}
@media (max-width:900px){body{background:var(--c)}.sx{grid-template-columns:minmax(0,1fr);gap:0}.ssum{order:0;position:relative;top:0;padding:8px 0 0}.strust{display:none}.sh1{font-size:32px}.slede2{margin:4px 0 10px;font-size:15px}.osum-s{padding:14px 18px}.osum-h{font-size:19px}}
@media (prefers-reduced-motion:reduce){.osum-chev{transition:none}}
@media (max-width:420px){.steps4 li{gap:5px}.steps4 li span{font-size:12px}.steps4 li:before{width:28px;height:28px;font-size:15px}.steps4 li.done:before{line-height:28px}}

/* Order summary only on the final Checkout step (Kari 2026-10-19) */
body:not([data-chk]) #osum{display:none}
.test[hidden]{display:none!important}

/* 3-step flow (Kari 2026-10-19): Address -> Plan & pickup (+extras) -> Review & pay */
body[data-s="2"] .step[data-s="3"],body[data-s="2"] .step[data-s="4"]{display:block;animation:none;margin-top:28px;padding-top:24px;border-top:1px solid var(--line,#e6e2d6)}
body[data-s="2"] #f2>.btn,body[data-s="2"] #f2>.back,body[data-s="2"] .step[data-s="3"] .back{display:none}
.st3 li{flex:1}
.pbar{height:6px;border-radius:99px;background:var(--line,#e6e2d6);overflow:hidden;margin:-4px 0 18px}.pbar i{display:block;height:100%;width:33.3%;background:var(--g,#3A695A);border-radius:inherit;transition:width .35s}
@media (prefers-reduced-motion:reduce){.pbar i{transition:none}}
.aopt{margin-top:12px;border:1.5px solid var(--line,#e6e2d6);border-radius:14px;padding:0 14px}
.aopt>summary{min-height:48px;display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;color:var(--g2,#254A3D);list-style:none}
.aopt>summary::-webkit-details-marker{display:none}.aopt>summary:before{content:"+";font-size:20px;width:18px}.aopt[open]>summary:before{content:"–"}
.aopt[open]{padding-bottom:12px}
#f1 .btn.big{width:100%;min-height:56px;margin-top:16px}
#aq{min-height:56px;font-size:17px}
.test[hidden]{display:none!important}
body:not([data-chk]) #osum{display:none}

.xopt{border:1.5px solid var(--line,#e6e2d6);border-radius:16px;padding:0 16px;background:#fff}
.xopt>summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;gap:12px;padding:12px 0}
.xopt>summary::-webkit-details-marker{display:none}
.xopt>summary:after{content:"+";margin-left:auto;font:700 24px/1 var(--sans);color:var(--g,#3A695A)}.xopt[open]>summary:after{content:"–"}
.xopt>summary b{display:block;font-size:17px;color:var(--g2,#254A3D)}.xopt>summary small{display:block;color:var(--mute,#5b5b55);font-size:14px;margin-top:2px}
.xopt[open]{padding-bottom:12px}

.xpc{border:1.5px solid var(--line,#e3e3dc);border-radius:16px;padding:14px;margin:0 0 14px;background:#fff}
.xph{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.xph small{display:block;color:#5d6b62;font-size:13px;margin-top:2px}
.stp{display:flex;align-items:center;gap:10px;font-size:14px}.stp button{width:44px;height:44px;border-radius:50%;border:1.5px solid #386756;background:#fff;color:#386756;font-size:22px;line-height:1;cursor:pointer}.stp button:disabled{opacity:.35;cursor:default}
.xpr{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center;margin-top:10px}.xpr select{min-height:44px;border-radius:10px;border:1.5px solid #d9dcd4;padding:0 8px;font:inherit;font-size:15px;min-width:0;background:#fff}
