/* OKRACHIPS storefront — okra green on off-white, fried-gold accents */
:root{--paper:#fafbf6;--paper2:#f1f5e8;--card:#fff;--ink:#17281c;--ink2:#4b5d50;--ink3:#7a8a7e;--line:#e2e9d8;--okra:#2f6b3a;--okra-d:#1f4d2b;--okra-x:#143820;--sprout:#9bc53d;--fry:#e5a63b;--fry-s:#fbeccb;--chili:#c0392b;--ok:#2f8f4e;--r:18px;--r-s:12px;--shadow:0 1px 2px rgba(20,56,32,.06),0 8px 24px rgba(20,56,32,.07);--f-d:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--f-b:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}a{color:var(--okra);text-decoration:none}a:hover{color:var(--okra-d)}
h1,h2,h3,h4{font-family:var(--f-d);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em;color:var(--okra-x)}
h1{font-size:clamp(2.1rem,5.5vw,3.9rem);font-weight:800}h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}.wrap{width:min(1200px,100% - 2rem);margin-inline:auto}.narrow{width:min(760px,100% - 2rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}:focus-visible{outline:3px solid var(--sprout);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--okra);color:#fff;padding:10px 16px;z-index:200}.skip:focus{left:8px;top:8px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 .98rem var(--f-b);padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .12s,background .2s,box-shadow .2s;text-align:center;line-height:1.2}
.btn:active{transform:scale(.98)}.btn-primary{background:var(--okra);color:#fff}.btn-primary:hover{background:var(--okra-d);color:#fff;box-shadow:0 6px 18px rgba(47,107,58,.3)}
.btn-fry{background:var(--fry);color:#3b2a06}.btn-fry:hover{background:#d99a2b;color:#3b2a06}.btn-ghost{background:transparent;border-color:var(--okra);color:var(--okra)}.btn-ghost:hover{background:var(--okra);color:#fff}
.btn-dark{background:var(--okra-x);color:#fff}.btn-dark:hover{background:#0c2413;color:#fff}.btn-sm{padding:.55rem 1rem;font-size:.88rem}.btn-block{width:100%}.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-btn{background:none;border:0;color:var(--okra);font:600 .92rem var(--f-b);cursor:pointer;padding:0;text-decoration:underline}
/* header */
.announce{background:var(--okra-x);color:#e9f4d3;font-size:.86rem;text-align:center;padding:.5rem 1rem}.announce a{color:#fff;text-decoration:underline}
.site-head{position:sticky;top:0;z-index:60;background:rgba(250,251,246,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.25rem;min-height:68px}.brand{display:flex;align-items:center;gap:.6rem;font:800 1.5rem var(--f-d);color:var(--okra-x);letter-spacing:-.03em}.brand b{color:var(--okra)}.brand img{height:38px;width:auto}
.nav-links{display:flex;gap:.3rem;margin-left:1rem}.nav-links a{color:var(--ink);font-weight:600;padding:.5rem .85rem;border-radius:999px}.nav-links a:hover,.nav-links a.on{background:var(--paper2);color:var(--okra-d)}
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:.4rem}.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:transparent;border:0;color:var(--ink);cursor:pointer}.icon-btn:hover{background:var(--paper2)}
.icon-btn svg{width:22px;height:22px}.badge-n{position:absolute;top:2px;right:0;background:var(--fry);color:#3b2a06;font:800 .7rem var(--f-b);min-width:19px;height:19px;border-radius:99px;display:grid;place-items:center;padding:0 5px}
.search-form{display:flex;background:var(--paper2);border-radius:999px;padding:.2rem .3rem .2rem 1rem;align-items:center;width:min(300px,28vw)}.search-form input{border:0;background:transparent;font:inherit;flex:1;min-width:0;outline:0;padding:.45rem 0}.search-form button{border:0;background:none;cursor:pointer;color:var(--okra);display:grid;place-items:center;width:34px;height:34px}
.menu-btn{display:none}.mobile-menu{display:none}
/* flash / alerts */
.alerts{position:fixed;top:78px;right:1rem;z-index:120;display:grid;gap:.5rem;width:min(380px,100% - 2rem)}
.alert{background:#fff;border-left:5px solid var(--okra);border-radius:12px;padding:.8rem 1rem;box-shadow:var(--shadow);font-size:.95rem}.alert-error{border-color:var(--chili)}.alert-info{border-color:var(--fry)}
.inline-alert{border-radius:12px;padding:.8rem 1rem;background:var(--fry-s);color:#5a3f07;margin-bottom:1rem}.inline-alert.err{background:#fde7e3;color:#8a2417}.inline-alert.ok{background:#e4f3e3;color:#1f5a2e}
/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(2rem,5vw,4.5rem) 0 clamp(2rem,4vw,3.5rem)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;background:var(--fry-s);color:#6b4a06;font-weight:700;font-size:.85rem;padding:.4rem .9rem;border-radius:999px;margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:var(--okra);position:relative}.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;background:var(--sprout);border-radius:9px;z-index:-1;opacity:.7}
.hero p.lead{font-size:1.15rem;color:var(--ink2);max-width:34rem}.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 1.4rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;color:var(--ink2);font-size:.92rem;font-weight:600}.hero-trust span::before{content:"✓ ";color:var(--okra)}
.hero-art img{width:100%;max-width:560px;margin-inline:auto;display:block;filter:drop-shadow(0 24px 30px rgba(20,56,32,.14))}
.strip{background:var(--okra);color:#eaf5d5;overflow:hidden;white-space:nowrap;padding:.8rem 0;font:700 1rem var(--f-d)}.strip div{display:inline-block;animation:slide 32s linear infinite}.strip span{margin:0 1.6rem}.strip span::after{content:"✺";margin-left:1.6rem;color:var(--sprout)}
@keyframes slide{to{transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.strip div{animation:none}html{scroll-behavior:auto}}
/* sections */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0}.section-alt{background:var(--paper2)}.section-dark{background:var(--okra-x);color:#dcebc4}.section-dark h2,.section-dark h3{color:#fff}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}.sec-head p{color:var(--ink2);margin:0;max-width:34rem}
/* product grid + card */
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;position:relative}.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard-media{position:relative;aspect-ratio:4/5;background:var(--paper2);display:block}.pcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.pflags{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}.pflag{background:var(--okra-x);color:#fff;font:700 .7rem var(--f-b);padding:.28rem .6rem;border-radius:99px}.pflag.fry{background:var(--fry);color:#3b2a06}.pflag.red{background:var(--chili)}
.wish{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--ink3)}.wish svg{width:20px;height:20px}.wish.on{color:var(--chili)}.wish.on svg{fill:currentColor}
.pcard-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}.pcard-cat{font-size:.78rem;color:var(--ink3);font-weight:600}.pcard-name{font:700 1.05rem/1.25 var(--f-d);color:var(--okra-x)}.pcard-name a{color:inherit}
.pcard-meta{font-size:.85rem;color:var(--ink2);display:flex;gap:.5rem;align-items:center}.stars{display:inline-flex;gap:1px;color:#d9dfd0;font-style:normal}.stars i{font-style:normal}.stars i.on{color:var(--fry)}
.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:auto}.price b{font:800 1.3rem var(--f-d);color:var(--okra-x)}.price s{color:var(--ink3);font-size:.9rem}.price em{font-style:normal;font-weight:700;font-size:.8rem;color:var(--ok)}
.pcard .btn{margin-top:.5rem}.oos{color:var(--chili);font-weight:700;font-size:.85rem}
/* categories tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper2);aspect-ratio:4/3;display:flex;align-items:flex-end;border:1px solid var(--line)}.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}.tile:hover img{transform:scale(1.05)}
.tile span{position:relative;margin:1rem;background:#fff;color:var(--okra-x);font:700 1rem var(--f-d);padding:.55rem 1.1rem;border-radius:999px}
/* benefits & reviews */
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.benefit{padding:1.5rem;border-radius:var(--r);background:#fff;border:1px solid var(--line)}.benefit .ic{width:46px;height:46px;border-radius:14px;background:var(--fry-s);display:grid;place-items:center;margin-bottom:.9rem;font-size:1.4rem}
.section-dark .benefit{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}.section-dark .benefit p{color:#c9dcb0;margin:0}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}.rev p{margin:.5rem 0 .8rem}.rev small{color:var(--ink3)}.rev-photos{display:flex;gap:.5rem;flex-wrap:wrap}.rev-photos img{width:76px;height:76px;object-fit:cover;border-radius:12px;cursor:zoom-in}
.vp{display:inline-flex;align-items:center;gap:.3rem;color:var(--ok);font-weight:700;font-size:.78rem}.vp::before{content:"✔"}
.photos-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}.photos-strip img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:14px}
/* faq */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin-bottom:.7rem}.faq summary{font:700 1.02rem var(--f-d);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--okra-x)}.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--okra)}.faq details[open] summary::after{content:"−"}.faq details p{margin:.7rem 0 0;color:var(--ink2)}.faq summary::-webkit-details-marker{display:none}
/* newsletter/footer */
.news{background:var(--okra);border-radius:28px;color:#fff;padding:clamp(1.6rem,4vw,3rem);display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center}.news h2{color:#fff;margin:0}.news p{margin:.4rem 0 0;color:#dbeec0}
.news form{display:flex;gap:.5rem;background:#fff;border-radius:999px;padding:.35rem}.news input{flex:1;border:0;font:inherit;padding:.5rem 1rem;background:transparent;min-width:0;outline:0;color:var(--ink)}
.site-foot{background:var(--okra-x);color:#bcd2a3;padding:3.2rem 0 1.5rem;margin-top:3rem;font-size:.94rem}.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem}.site-foot h4{color:#fff;font-size:1rem;margin-bottom:.8rem}.site-foot a{color:#bcd2a3;display:block;padding:.18rem 0}.site-foot a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.85rem}.lic{opacity:.85}
.wa-float{position:fixed;right:16px;bottom:18px;z-index:70;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}.wa-float svg{width:30px;height:30px}
/* listing */
.crumbs{font-size:.86rem;color:var(--ink3);padding:1rem 0 .4rem}.crumbs a{color:var(--ink2)}.crumbs span{margin:0 .35rem}
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:start}.filters{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}.filters h4{font-size:.95rem;margin:1rem 0 .5rem}.filters h4:first-child{margin-top:0}.filters a{display:flex;justify-content:space-between;padding:.4rem .6rem;border-radius:10px;color:var(--ink)}.filters a.on,.filters a:hover{background:var(--paper2);color:var(--okra-d);font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.toolbar select{width:auto}
.pager{display:flex;gap:.4rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}.pager a,.pager span{padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600}.pager .cur{background:var(--okra);color:#fff;border-color:var(--okra)}
/* product page */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:start}.gallery-main{background:var(--paper2);border-radius:var(--r);overflow:hidden;aspect-ratio:1;border:1px solid var(--line)}.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}.thumbs button{width:72px;height:72px;border-radius:14px;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;background:var(--paper2)}.thumbs button.on{border-color:var(--okra)}.thumbs img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}.pdp-price{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:.6rem 0}.pdp-price b{font:800 2.1rem var(--f-d);color:var(--okra-x)}.pdp-price s{color:var(--ink3)}.pdp-price em{font-style:normal;background:#e4f3e3;color:#1f5a2e;font-weight:700;font-size:.85rem;padding:.2rem .6rem;border-radius:99px}
.opts{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 1rem}.opt{padding:.55rem 1rem;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:700;cursor:pointer;font-family:var(--f-b)}.opt.on{border-color:var(--okra);background:#eaf4dc;color:var(--okra-d)}
.qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;background:#fff}.qty button{width:40px;height:42px;border:0;background:none;font-size:1.3rem;cursor:pointer;color:var(--okra)}.qty input{width:44px;border:0;text-align:center;font:700 1rem var(--f-b);background:transparent;padding:0;-moz-appearance:textfield}.qty input::-webkit-inner-spin-button{appearance:none}
.buy-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1rem 0}.buy-row .btn{flex:1;min-width:150px}
.pin-check{display:flex;gap:.5rem;margin:.4rem 0}.pin-check input{max-width:180px}.pin-msg{font-size:.9rem;margin:.2rem 0 1rem}.pin-msg.ok{color:var(--ok)}.pin-msg.no{color:var(--chili)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}.trust div{background:var(--paper2);border-radius:14px;padding:.7rem;text-align:center;font-size:.82rem;font-weight:700;color:var(--okra-d)}
.tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--line);margin-top:2.4rem;overflow-x:auto}.tabs button{background:none;border:0;padding:.8rem 1.2rem;font:700 .95rem var(--f-b);cursor:pointer;color:var(--ink2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}.tabs button.on{color:var(--okra-d);border-color:var(--okra)}
.tab-pane{display:none;padding:1.4rem 0}.tab-pane.on{display:block}.nutri{border-collapse:collapse;width:100%;max-width:440px}.nutri td{padding:.5rem .3rem;border-bottom:1px solid var(--line)}.nutri td:last-child{text-align:right;font-weight:700}
.dist{display:grid;gap:.35rem;min-width:220px}.dist div{display:grid;grid-template-columns:22px 1fr 30px;gap:.5rem;align-items:center;font-size:.85rem}.dist .bar{height:8px;background:var(--line);border-radius:9px;overflow:hidden}.dist .bar i{display:block;height:100%;background:var(--fry)}
.sticky-buy{display:none}
/* forms */
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem}input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=url],select,textarea{width:100%;font:inherit;padding:.75rem .95rem;border:1.5px solid #d3dcc7;border-radius:12px;background:#fff;color:var(--ink);transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--okra);box-shadow:0 0 0 4px rgba(155,197,61,.3)}textarea{min-height:110px;resize:vertical}.field{margin-bottom:1rem}.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.hint{font-size:.82rem;color:var(--ink3);margin-top:.25rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:500;cursor:pointer}.check input{width:auto;margin-top:.3rem;accent-color:var(--okra)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}.card h3{margin-bottom:1rem}
.auth{max-width:460px;margin:3rem auto}.auth .card{padding:2rem}
/* cart */
.cart-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}.cline{display:grid;grid-template-columns:88px 1fr auto;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:center}.cline img{width:88px;height:88px;border-radius:14px;object-fit:cover;background:var(--paper2)}.cline .nm{font:700 1.02rem var(--f-d);color:var(--okra-x)}.cline .sub{font-size:.85rem;color:var(--ink3)}.cline .err{color:var(--chili);font-size:.85rem;font-weight:600}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;position:sticky;top:90px}.sum-row{display:flex;justify-content:space-between;padding:.35rem 0;color:var(--ink2)}.sum-row.total{border-top:2px solid var(--line);margin-top:.5rem;padding-top:.9rem;font:800 1.3rem var(--f-d);color:var(--okra-x)}.sum-row .neg{color:var(--ok);font-weight:700}
.coupon-form{display:flex;gap:.5rem;margin:1rem 0}.tag{display:inline-flex;align-items:center;gap:.4rem;background:#e4f3e3;color:#1f5a2e;font-weight:700;font-size:.85rem;padding:.3rem .7rem;border-radius:99px}
.empty{text-align:center;padding:3.5rem 1rem}.empty img{width:120px;opacity:.8;margin-bottom:1rem}
/* account & tables */
.acct{display:grid;grid-template-columns:230px 1fr;gap:2rem;align-items:start}.acct-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.6rem;position:sticky;top:90px}.acct-nav a{display:block;padding:.65rem .9rem;border-radius:12px;color:var(--ink);font-weight:600}.acct-nav a.on,.acct-nav a:hover{background:var(--paper2);color:var(--okra-d)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}.tbl th{background:var(--paper2);text-align:left;padding:.75rem 1rem;font-size:.8rem;text-transform:none;color:var(--ink2);white-space:nowrap}.tbl td{padding:.8rem 1rem;border-top:1px solid var(--line);vertical-align:top}.tbl tr:hover td{background:#fbfcf8}
.badge{display:inline-block;padding:.22rem .65rem;border-radius:99px;font:700 .75rem var(--f-b);background:#e8eee0;color:#3d4d41;white-space:nowrap}
.b-delivered,.b-completed,.b-paid,.b-active,.b-approved,.b-captured,.b-rewarded,.b-success,.b-sent,.b-verified,.b-resolved,.b-refunded,.b-signed,.b-collected,.b-reconciled{background:#dff2dc;color:#1c5a2b}
.b-pending,.b-created,.b-cod-pending,.b-requested,.b-open,.b-queued,.b-review,.b-application,.b-processing,.b-more-info-needed,.b-waiting-customer,.b-kyc,.b-in-progress{background:#fdf0cf;color:#7a5307}
.b-cancelled,.b-failed,.b-rejected,.b-rto,.b-suspended,.b-expired,.b-blocked,.b-disabled,.b-skipped,.b-hidden{background:#fbe0dc;color:#8a2417}
.b-shipped,.b-out-for-delivery,.b-confirmed,.b-packed,.b-authorized,.b-refund-pending,.b-refund-processing,.b-in-transit{background:#dbeaf7;color:#1d4e7a}
.timeline{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:3px solid var(--line)}.timeline li{position:relative;padding:0 0 1.3rem 1.1rem}.timeline li::before{content:"";position:absolute;left:-1.95rem;top:.3rem;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--okra)}.timeline li:first-child::before{background:var(--okra)}.timeline small{color:var(--ink3);display:block}
.steps{display:flex;justify-content:space-between;margin:1.4rem 0 2rem;position:relative;gap:.3rem}.steps::before{content:"";position:absolute;left:5%;right:5%;top:14px;height:4px;background:var(--line);z-index:0}.step{flex:1;text-align:center;font-size:.78rem;font-weight:700;color:var(--ink3);position:relative;z-index:1}.step i{display:block;width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--line);margin:0 auto .4rem;font-style:normal;line-height:26px;font-size:.8rem}.step.done{color:var(--okra-d)}.step.done i{background:var(--okra);border-color:var(--okra);color:#fff}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.4rem 1rem;font-size:.94rem}.kv dt{color:var(--ink3)}.kv dd{margin:0;font-weight:600}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}.stat b{display:block;font:800 1.6rem var(--f-d);color:var(--okra-x)}.stat span{color:var(--ink3);font-size:.85rem}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);background:var(--okra-x);color:#fff;padding:.8rem 1.4rem;border-radius:99px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.3s;z-index:300;font-weight:600;max-width:90vw}.toast.show{opacity:1;transform:translateX(-50%)}.toast.err{background:var(--chili)}
.modal{position:fixed;inset:0;background:rgba(10,24,14,.6);z-index:250;display:none;place-items:center;padding:1rem}.modal.open{display:grid}.modal .box{background:#fff;border-radius:var(--r);padding:1.6rem;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.pack-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}.pick{display:flex;gap:.8rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem}.pick img{width:64px;height:64px;border-radius:12px;object-fit:cover}.pick .nm{font-weight:700;font-size:.92rem;line-height:1.25}