/* Shopper web app. Colours sampled from the Save Mart, Lucky and FoodMaxx apps; system font like the native apps.
   One theme block per banner; everything else reads the variables. */
:root{--ink:#222222;--ink2:#555555;--muted:#A19D9C;--line:#DADADA;--soft:#F3F2F0;--bg:#FFFFFF;--page:#EDEDED;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pri:#C8362B;--pri-ink:#A82B22;--pri-soft:#FBE9E7;--acc:#F7E54A;--btn:#C8362B;--btn-ink:#fff;--hero-l:#F3F2F0;--hero-r:#C8362B;--hero-ink:#222;--pin:var(--pri)}
html[data-banner="lucky"]{--pri:#C8362B;--pri-ink:#A82B22;--pri-soft:#FBE9E7;--acc:#F7E54A;--btn:#CB372B;--hero-l:#F3F2F0;--hero-r:#C8362B;--hero-ink:#222}
html[data-banner="foodmaxx"]{--pri:#426FB3;--pri-ink:#2F5590;--pri-soft:#E8EFF9;--acc:#F8DD58;--btn:#241E1E;--hero-l:#F8DD58;--hero-r:#F3F2F0;--hero-ink:#241E1E}
html[data-banner="savemart"]{--pri:#4D7F36;--pri-ink:#3B6529;--pri-soft:#DFE9DE;--acc:#EE7530;--btn:#4D7F36;--hero-l:#DFE9DE;--hero-r:#4D7F36;--hero-ink:#1F3A14}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--page);color:var(--ink);font:400 16px/1.4 var(--font);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.app{position:relative;max-width:520px;margin:0 auto;min-height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 20px 60px -30px rgba(0,0,0,.35)}
@media (min-width:640px){body{padding:0}.app{min-height:100vh}}
/* header block (sticky like the native apps) */
.top{position:sticky;top:0;z-index:30;background:var(--bg);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid #ECECEC;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s}
/* scrolling down tucks the logo and store lines away, leaving search; scrolling up brings them back */
.top.tuck{transform:translateY(calc(-1 * var(--tuck,90px)));box-shadow:0 6px 16px -12px rgba(0,0,0,.35)}
.top .hd,.top .sline{transition:opacity .2s}
.top.tuck .hd,.top.tuck .sline{opacity:0;pointer-events:none}
.hd{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 2px}
/* the store you shop at: one quiet line, tap to change */
.sline{display:flex;align-items:center;gap:6px;max-width:100%;border:0;background:none;padding:2px 20px 8px;font-size:14px;line-height:20px;color:var(--ink);text-align:left}
.sline .pin{color:var(--pri);flex-shrink:0}
.sline #storeName{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sline b{font-weight:700}
.sline .c{color:var(--ink2)}
.sline .chev{flex-shrink:0;color:var(--ink2);margin-left:1px}
.sline.none #storeName{color:var(--pri);font-weight:700}
.hd img{height:34px;width:auto;display:block}
html[data-banner="savemart"] .hd img{height:38px}
.iconbtn{border:0;background:none;padding:6px;color:var(--pri);display:grid;place-items:center;border-radius:10px;position:relative}
.iconbtn .dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--acc);border:2px solid #fff}
.srow{display:flex;align-items:center;gap:12px;padding:4px 20px 12px}
.sbox{flex:1;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:11px;padding:0 14px;height:50px;background:#fff}
.sbox svg{flex-shrink:0;color:#555}
.sbox input{border:0;outline:0;flex:1;min-width:0;font-size:18px;background:none}
.sbox input::placeholder{color:#A9A9A9}
.sbox input::-webkit-search-cancel-button,.sbox input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.sbox .clear{border:0;background:#E5E5E5;border-radius:50%;width:22px;height:22px;display:none;place-items:center;color:#666;font-size:13px;line-height:1}
.sbox.has .clear{display:grid}
.scanic{border:0;background:none;color:var(--pri);padding:4px;display:grid;place-items:center}
.view{flex:1;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.chips{display:flex;gap:12px;padding:20px 20px 4px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:11px 16px;font-size:16.5px;color:var(--ink)}
.chip svg{color:#111}
/* hero carousel */
.hero{margin:18px 20px 0;position:relative}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;display:grid;grid-template-columns:45% 55%;min-height:236px;border-radius:22px;overflow:hidden;border:0}
.slide .l{background:var(--hero-l);padding:22px 18px 20px 22px;display:flex;flex-direction:column;color:var(--hero-ink)}
.slide .k{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.slide h2{font-size:21px;line-height:1.15;margin:12px 0 6px;font-weight:800}
.slide p{margin:0 0 14px;font-size:14px;line-height:1.35}
.slide .go{margin-top:auto;align-self:flex-start;border:0;background:var(--btn);color:var(--btn-ink);border-radius:5px;padding:9px 16px;font-size:15px;font-weight:600}
.slide .r{background:var(--hero-r);position:relative;display:grid;place-items:center;overflow:hidden}
.slide .r svg{width:100%;height:100%;display:block}
.dots{display:flex;justify-content:center;gap:9px;margin:12px 0 0}
.dots i{width:9px;height:9px;border-radius:50%;background:#D5D5D5}
.dots i.on{background:var(--pri)}
/* cards row */
.cards{display:flex;gap:16px;overflow-x:auto;padding:26px 20px 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 86%;scroll-snap-align:start;display:grid;grid-template-columns:1fr 42%;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;text-align:left;padding:0;min-height:190px}
.card .t{padding:18px 16px 16px 18px}
.card h3{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.2}
.card p{margin:0;font-size:15px;line-height:1.4;color:var(--ink)}
.card .art{position:relative;background:var(--pri-soft)}
.card .art svg{width:100%;height:100%;display:block}
.card .arrow{position:absolute;top:0;right:0;width:46px;height:46px;background:#fff;border-bottom-left-radius:16px;display:grid;place-items:center;color:var(--pri)}
h3.sec{font-size:24px;font-weight:700;margin:30px 20px 12px;display:flex;justify-content:space-between;align-items:baseline}
h3.sec a{font-size:15px;font-weight:600;color:var(--pri);text-decoration:none;cursor:pointer}
/* product tiles */
.tiles{display:flex;gap:14px;overflow-x:auto;padding:0 20px 8px;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 152px;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:10px;text-align:left;display:flex;flex-direction:column;gap:8px}
.tile .pk{height:118px;border-radius:10px;overflow:hidden}
.tile .nm{font-size:14px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.pill{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:var(--pri);color:#fff;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pill.soft{background:var(--pri-soft);color:var(--pri-ink)}
.pill.grey{background:#EEEEEE;color:#555}
/* rows */
.list{padding:4px 0}
.row{display:flex;align-items:center;gap:14px;width:100%;border:0;border-bottom:1px solid #EEE;background:#fff;padding:12px 20px;text-align:left}
.row .pk{width:52px;height:52px;border-radius:9px;overflow:hidden;flex-shrink:0}
.row .tx{flex:1;min-width:0}
.row .nm{font-size:15.5px;font-weight:600;line-height:1.25}
.row .mt{font-size:13px;color:var(--ink2);margin-top:2px}
.row .ab{flex-shrink:0;width:52px;height:52px;border-radius:12px;background:var(--pri);color:#fff;display:grid;place-items:center;text-align:center;line-height:1;font-weight:800;font-size:21px}
.row .ab small{display:block;font-size:8.5px;letter-spacing:.07em;font-weight:800;opacity:.9;margin-bottom:2px}
.row .ab.zone{font-size:10.5px;padding:3px;background:var(--pri-soft);color:var(--pri-ink)}
/* item page */
.back{display:flex;align-items:center;gap:4px;border:0;background:none;color:var(--pri);font-size:16px;font-weight:600;padding:14px 16px 4px}
.ip{padding:6px 20px 0}
.ip .pkbig{height:190px;border-radius:18px;overflow:hidden;margin-bottom:14px}
.ip h1{font-size:23px;line-height:1.2;margin:0 0 4px;font-weight:800}
.ip .upc{font-size:13px;color:var(--ink2)}
.where{display:grid;grid-template-columns:118px 1fr;border-radius:18px;overflow:hidden;border:1.5px solid var(--line);margin:16px 0 0}
.where .a{background:var(--pri);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6px}
.where .a small{font-size:12px;font-weight:800;letter-spacing:.08em}
.where .a b{font-size:52px;line-height:1;font-weight:800}
.where .a b.z{font-size:19px;text-align:center;line-height:1.15}
.where .d{padding:12px 16px;display:grid;gap:6px;align-content:center}
.where .d div{display:flex;justify-content:space-between;gap:10px;font-size:15px;border-bottom:1px solid #F0F0F0;padding-bottom:6px}
.where .d div:last-child{border:0;padding:0}
.where .d span{color:var(--ink2)}
.where .d strong{text-align:right}
.note{font-size:13.5px;color:var(--ink2);margin:10px 0 0;line-height:1.4}
.note.warn{background:#FFF7E0;color:#7A5A00;border-radius:12px;padding:10px 12px}
.acts{display:flex;gap:10px;margin:16px 0 0}
.btn{flex:1;border:1.5px solid var(--pri);background:#fff;color:var(--pri);border-radius:11px;padding:13px 10px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.pri{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn.done{background:var(--pri-soft);border-color:var(--pri-soft);color:var(--pri-ink)}
.panel{border:1.5px solid var(--line);border-radius:18px;margin:16px 0 0;overflow:hidden;background:#fff}
.panel .ph{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-weight:700;font-size:16px}
.panel .ph .seg{display:flex;background:#F0F0F0;border-radius:9px;padding:3px}
.panel .ph .seg button{border:0;background:none;padding:5px 12px;border-radius:7px;font-size:13px;font-weight:700;color:#666}
.panel .ph .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mapbox{height:240px;background:#FAF9F6;border-top:1px solid #EEE;position:relative}
.mapbox svg{width:100%;height:100%;display:block}
.shelfbox{height:260px;background:linear-gradient(#F2F1EC,#E5E3DB);border-top:1px solid #EEE;position:relative;cursor:zoom-in;touch-action:pan-y}
.shelfbox .canvas3d{position:absolute;inset:0}
.shelfbox .canvas3d canvas{display:block;width:100%!important;height:100%!important;touch-action:pan-y}
.shelfbox .expand{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--ink);
  font-size:13px;font-weight:600;padding:7px 11px;border-radius:999px;box-shadow:0 2px 10px -4px rgba(0,0,0,.3);pointer-events:none}
.shelfbox .expand svg{color:var(--pri)}
.shelfbox .flat{position:absolute;inset:0;display:grid;place-items:center;padding:10px}
.shelfbox .flat svg{width:100%;max-height:100%}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;padding:4px 16px 14px;font-size:14.5px}
dl.kv dt{color:var(--ink2)} dl.kv dd{margin:0;text-align:right;font-weight:600}
.linkbtn{border:0;background:none;color:var(--pri);font-weight:600;font-size:15px;padding:12px 0}
/* aisles */
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 20px 10px}
.acard{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:150px}
.acard .n{width:48px;height:48px;border-radius:12px;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:800;font-size:24px}
.acard .dp{font-weight:700;font-size:15px;line-height:1.25}
.acard .hl{font-size:12.5px;color:var(--ink2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sect{border-bottom:1px solid #EEE}
.sect>button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:#fff;padding:15px 20px;text-align:left;font-size:16px;font-weight:700}
.sect>button span{font-size:13px;color:var(--ink2);font-weight:500}
.sect .items{display:none;background:#FAFAFA}
.sect.open .items{display:block}
.sect .items .row{background:#FAFAFA}
/* list */
.addrow{display:flex;gap:10px;padding:16px 20px 6px}
.addrow .sbox{height:46px}
.lhead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 6px}
.lhead h2{font-size:24px;margin:0;font-weight:800}
.lsum{margin:4px 20px 10px;background:var(--pri-soft);color:var(--pri-ink);border-radius:14px;padding:12px 14px;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lsum b{font-size:16px}
.stop{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid #EEE;background:#fff}
.stop .num{width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.stop.done .num{background:#CFCFCF}
.stop.done .nm{text-decoration:line-through;color:#999}
.stop .tx{flex:1;min-width:0}
.stop .nm{font-size:15.5px;font-weight:600;line-height:1.25}
.stop .mt{font-size:13px;color:var(--ink2)}
.chk{width:28px;height:28px;border-radius:8px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;color:#fff;flex-shrink:0}
.stop.done .chk{background:var(--pri);border-color:var(--pri)}
.x{border:0;background:none;color:#B5B5B5;font-size:22px;padding:2px 4px;line-height:1}
.agroup{padding:14px 20px 6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pri-ink);background:#fff}
/* map page */
.mapfull{position:relative;height:calc(100vh - 260px);min-height:360px;background:#FAF9F6;border-top:1px solid #EEE;overflow:hidden}
.mapfull svg{width:100%;height:100%;display:block;touch-action:none}
.zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 4px 18px -6px rgba(0,0,0,.35);overflow:hidden}
.zoom button{border:0;background:#fff;width:44px;height:42px;font-size:20px;font-weight:700;color:#333}
.zoom button+button{border-top:1px solid #EEE}
/* plan svg */
.fx{stroke:#7a817b;stroke-width:.7;vector-effect:non-scaling-stroke}
svg.focus .fx:not(.hit){opacity:.42}
.aisle-b circle{fill:var(--pri)} .aisle-b text{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:central;font-family:var(--font)}
.hlr{fill:none;stroke:var(--pin);stroke-width:3;vector-effect:non-scaling-stroke}
.bayr{fill:var(--pin);fill-opacity:.9;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pulse{fill:none;stroke:var(--pin);stroke-width:3;vector-effect:non-scaling-stroke;animation:pulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
.stop circle{fill:var(--pri);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke} g.stop text{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:central;font-family:var(--font)}
g.stop.done circle{fill:#BBBBBB}
.lbl{display:none}
/* tab bar */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:40;display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:12px;letter-spacing:.02em;padding:2px 0;position:relative}
.tabs button.on{color:var(--pri)}
.tabs .badge{position:absolute;top:-2px;left:calc(50% + 8px);background:var(--pri);color:#fff;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 6px;border:2px solid #fff}
/* sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:100%;max-width:520px;max-height:86vh;background:#fff;border-radius:22px 22px 0 0;z-index:61;transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.on{transform:translate(-50%,0)}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:#D5D5D5;margin:10px auto 4px}
.sheet h2{font-size:21px;margin:8px 20px 4px;font-weight:800}
.sheet .sb{overflow:auto;flex:1}
.sheet .sub{margin:0 20px 10px;font-size:14px;color:var(--ink2)}
/* scan */
.cam{position:fixed;inset:0;z-index:70;background:#0d0f0e;color:#fff;display:grid;place-items:center}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam .ret{width:min(290px,78vw);height:180px;border-radius:20px;border:3px solid rgba(255,255,255,.95);position:relative;box-shadow:0 0 0 3000px rgba(0,0,0,.45)}
.cam .las{position:absolute;left:10px;right:10px;height:2px;top:20%;background:#FF4B3A;box-shadow:0 0 14px #FF4B3A;animation:las 1.8s ease-in-out infinite}
@keyframes las{50%{top:80%}}
.cam .t{position:absolute;left:24px;right:24px;text-align:center}
.cam .t1{top:calc(70px + env(safe-area-inset-top,0px));font-size:19px;font-weight:700}
.cam .t2{bottom:150px;font-size:15px;opacity:.9}
.cam .row2{position:absolute;bottom:calc(46px + env(safe-area-inset-bottom,0px));left:20px;right:20px;display:flex;gap:10px}
.cam .row2 button{flex:1;border:0;border-radius:12px;padding:14px;font-weight:700;font-size:15px;background:rgba(255,255,255,.18);color:#fff}
.cam .row2 input{flex:1.4;border:0;border-radius:12px;padding:0 14px;font-size:16px}
/* misc */
.empty{text-align:center;color:var(--ink2);padding:40px 30px}
.empty h3{color:var(--ink);font-size:19px;margin:14px 0 6px}
.skel{background:linear-gradient(90deg,#F1F1F1,#E7E7E7,#F1F1F1);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#222;color:#fff;padding:11px 16px;border-radius:12px;font-size:14.5px;z-index:80;opacity:0;transition:opacity .25s;pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1}
.more a,.more button.mi{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-bottom:1px solid #EEE;background:#fff;padding:17px 20px;font-size:16.5px;text-align:left;color:var(--ink);text-decoration:none}
.more .mi span{color:var(--ink2);font-size:14px}
.storecard{margin:16px 20px;border:1.5px solid var(--line);border-radius:18px;padding:16px}
.storecard b{font-size:18px}
.badge-assoc{display:inline-block;background:#222;color:#fff;border-radius:6px;font-size:11px;font-weight:800;padding:2px 7px;letter-spacing:.04em;vertical-align:2px;margin-left:6px}
@media (prefers-reduced-motion:reduce){.pulse,.las,.skel{animation:none}}

/* ===== v3: location, search answers, can't-find, walking plan, trip mode, tasks ===== */
/* compact store chip: once a store is chosen it takes one slim line */
.nearbar{display:flex;align-items:center;gap:10px;background:#222;color:#fff;padding:10px 16px;font-size:14px}
.nearbar span{flex:1}.nearbar button{border:0;border-radius:8px;padding:7px 12px;font-weight:700;background:var(--acc);color:#222}
.nearbar button+button{background:none;color:#fff;padding:7px 6px}
.dist{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
/* department answer for fresh foods */
.dcard{display:flex;gap:14px;margin:14px 20px 4px;padding:14px;border-radius:16px;background:var(--pri-soft);color:var(--ink)}
.dcard .di{font-size:34px;line-height:1}.dcard .nm{font-size:16px;font-weight:600}.dcard .mt{font-size:13px;color:var(--ink2);margin-top:3px}
/* item page */
.fh{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pri-ink);margin:16px 0 -8px}
.where .a b.z{font-size:17px;line-height:1.15;text-align:center;word-break:break-word}
details.others summary{cursor:pointer;list-style:none}details.others summary::-webkit-details-marker{display:none}
details.others summary::after{content:'▾';margin-left:auto;color:var(--ink2)}details.others[open] summary::after{content:'▴'}
details.others .row{padding:10px 16px}
/* can't find it */
.tipbox{background:#FFF7E0;color:#5C4300;border-radius:12px;padding:10px 12px;font-size:14px;margin:0 0 12px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;cursor:pointer}
.opt input{margin-top:3px;accent-color:var(--pri);width:18px;height:18px}.opt b{display:block;font-size:15.5px}.opt small{display:block;color:var(--ink2);font-size:13px;margin-top:2px}
.opt:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}
.ain{width:70px;margin-left:8px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;font-size:16px}
.cfnote{width:100%;min-height:64px;border:1.5px solid var(--line);border-radius:12px;padding:10px;font:inherit;font-size:15px;margin-top:6px}
/* walking plan */
.trip{margin:8px 20px 6px;border-radius:18px;background:var(--pri);color:#fff;padding:16px}
.trip .tt b{display:block;font-size:22px}.trip .tt span{display:block;font-size:14.5px;opacity:.92;margin-top:2px}
.trip .tb{display:flex;gap:10px;margin-top:12px}.trip .btn{border-color:#fff;color:#fff;background:transparent}.trip .btn.pri{background:#fff;color:var(--pri-ink)}
.howto{margin:6px 20px 4px;font-size:13px;color:var(--ink2);line-height:1.45}
.step{margin:10px 0 0;border-top:8px solid #F4F4F4}
.step .sh{display:flex;gap:12px;align-items:center;padding:12px 20px 6px;background:#fff}
.step .sn{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.step .sh b{display:block;font-size:17px}.step .sh span{display:block;font-size:13px;color:var(--ink2)}
.step.done .sn{background:#C9C9C9}.step.done .sh b{color:#999}
.stop .ss-thumb,.ss-thumb{width:44px;height:44px;border-radius:9px;overflow:hidden;flex-shrink:0;display:block}
.ss-thumb.big{width:56px;height:56px}
/* trip mode */
body.in-trip .srow,body.in-trip .sline,body.in-trip .tabs{display:none}
.tripmap{position:relative;height:calc(100vh - 300px);min-height:300px;background:#FAF9F6;overflow:hidden}
.tripmap svg{width:100%;height:100%;display:block;touch-action:none}
.nextcard{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -10px 30px -12px rgba(0,0,0,.3);padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));z-index:45}
.prog{height:6px;border-radius:3px;background:#EEE;overflow:hidden;margin:2px 0 12px}.prog i{display:block;height:100%;background:var(--pri)}
.nx{display:flex;gap:12px;align-items:center}.nnum{width:40px;height:40px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0}
.ntext{flex:1;min-width:0}.ntext small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--ink2)}.ntext b{display:block;font-size:19px;line-height:1.2}.ntext span{display:block;font-size:13.5px;color:var(--ink2);margin-top:2px}
.nextcard .tb{display:flex;gap:8px;margin-top:12px}.nextcard .btn{padding:12px 6px;font-size:15px}
/* tasks */
.task{border:1.5px solid var(--line);border-radius:16px;margin:10px 20px;padding:12px}
.task .tb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.task .btn{padding:10px 6px;font-size:14px}
/* map: route line, doors, current stop, highlighted area */
.route{fill:none;stroke:var(--pri);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 9;animation:march 1.2s linear infinite}
.routecase{fill:none;stroke:#fff;stroke-width:8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85}
@keyframes march{to{stroke-dashoffset:-20}}
.door circle{fill:#222}.door text{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:central;font-family:var(--font)}
g.stop.cur circle{fill:var(--acc);stroke:var(--pri);stroke-width:3}g.stop.cur text{fill:#222}
.zoneh{fill:var(--pri);fill-opacity:.18;stroke:var(--pri);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:6 4}
@media (prefers-reduced-motion:reduce){.route{animation:none;stroke-dasharray:none}}
.nearbar[hidden]{display:none}
.scanic{flex-shrink:0}
.srow .sbox{min-width:0}

/* ===== v4: where in the aisle, aisle grid, offline, associates ===== */
.apos{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px}
.apos .atrack{position:relative;width:96px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--pri-soft),#ECECEC)}
.apos .atrack::before,.apos .atrack::after{position:absolute;top:10px;font-size:9.5px;font-weight:700;color:var(--ink2);letter-spacing:.04em}
.apos .atrack::before{content:'FRONT';left:0}.apos .atrack::after{content:'BACK';right:0}
.apos .atrack i{position:absolute;top:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--pri);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.apos .atext{font-size:14px;margin-top:12px}
.agrid.mini{grid-template-columns:repeat(3,1fr);gap:10px}
.agrid.mini .acard{min-height:0;padding:10px;gap:6px}
.agrid.mini .acard .n{width:38px;height:38px;font-size:19px;border-radius:10px}
.agrid.mini .acard .dp{font-size:12.5px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.offbar{position:fixed;left:50%;transform:translateX(-50%);top:0;z-index:90;width:100%;max-width:520px;background:#5C4300;color:#fff;font-size:14px;padding:10px 16px;text-align:center}
.offbar[hidden]{display:none}
html.is-assoc .hd::after{content:'ASSOCIATE';position:absolute;right:64px;top:22px;background:#222;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;border-radius:6px;padding:3px 7px}
.hd{position:relative}

/* associates (often on a scan gun): the location right under the product, without scrolling */
html.is-assoc .ip .pkbig{height:118px}
html.is-assoc .ip h1{font-size:20px}
@media (max-height:700px){html.is-assoc .ip .pkbig{height:96px}}