:root{--g:#bf5607;--g2:#93430a;--gold:#f2b632;--red:#c8372d;--bg:#fdf6ee;--card:#fff;--ink:#271c12;--muted:#7a6a5c;--line:#ecdbc7;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
/* Round 11b: a real live bug found while chasing the "strips stay visible on scroll" report --
   browser scroll anchoring was fighting content-visibility:auto's estimated
   contain-intrinsic-size on .card/.typegroup. As IntersectionObserver-loaded batches crossed
   the visibility boundary, the guessed size vs real rendered size mismatch made the browser
   silently re-correct scrollY by ~15-30px, over and over, forever, while the page sat still --
   confirmed live: scrollTo(0,8000) then NO further input, scrollY still oscillating 3.5s later.
   That's what made the header's scroll-direction hysteresis flip unpredictably, and it is its
   own small janky-scroll bug independent of the header. overflow-anchor:none turns scroll
   anchoring off for the whole page; the only thing it gives up is auto-keeping-place when
   content above the viewport resizes, which this page already handles itself (scroll
   restore on Back, batch loading only below/at the viewport). */
html,body{overflow-anchor:none}

body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.4}
a{color:var(--g2)}button,input,select,textarea{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 14px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted)}.hide-sm{}
.topbar{background:var(--g);color:#ffe8d4;font-size:12.5px}.topbar a{color:#fff;font-weight:600;text-decoration:none}
.topbar-in{display:flex;gap:16px;justify-content:space-between;padding:6px 14px}
.site-header{display:contents}
/* Round 11a: collapsible address/delivery strip (sticky top:0) sits above the compact
   persistent header (also sticky, offset below the strip's live height via --strip-h, kept in
   sync by JS on scroll direction) -- hides on scroll down, reappears on scroll up, so the
   steady-state sticky chrome is just the compact row + chips (~100-120px). */
.collapsible-strip{position:sticky;top:0;z-index:21;background:#fff;overflow:hidden;max-height:64px;transition:max-height .22s ease,box-shadow .22s ease;box-shadow:0 1px 0 var(--line)}
.collapsible-strip.collapsed{max-height:0;box-shadow:none}
.header-compact{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 var(--line);transition:top .22s ease}
.collapsible-strip .topbar,.collapsible-strip .deliverybar{box-shadow:none}
@media (max-width:760px){.topbar-in,.deliverybar-in{padding:4px 14px}}
.header-in{display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--g)}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--g);color:var(--gold);display:grid;place-items:center;font:800 24px Georgia,serif}
.logo-text{display:flex;flex-direction:column;line-height:1}.logo-text b{font:700 21px Georgia,serif}.logo-text small{font-size:10px;letter-spacing:.22em;color:var(--g2);margin-top:3px;font-weight:700}
.search{flex:1;display:flex;min-width:0;background:var(--bg);border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.search input{flex:1;border:0;background:transparent;padding:10px 16px;min-width:0;outline:none}.search button{border:0;background:var(--g);color:#fff;padding:0 16px;cursor:pointer}
.search-close{display:none;align-items:center;border:0;background:transparent;padding:0 2px 0 14px;cursor:pointer;font-size:19px;color:var(--g);flex-shrink:0}
.header-in{position:relative}
.header-in.search-active .logo,.header-in.search-active .header-actions{display:none}
.header-in.search-active .search-close{display:flex}
.header-in.search-active .search{flex:1 1 100%}
/* Lives as a sibling of #searchForm (not a child of it): .search itself is overflow:hidden (the
   rounded pill border clips its own input/button corners), which was silently clipping this
   dropdown to invisible when it lived inside the form -- found live, not in a local check. */
.search-typeahead{position:absolute;top:calc(100% + 8px);left:14px;right:14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.14);max-height:min(60vh,420px);overflow:auto;z-index:30}
.search-typeahead .sta-empty,.search-typeahead .sta-more{padding:12px;font-size:12.5px;color:var(--g2);text-align:center;display:block}
/* Round 29 (Moshe video, "I don't see where you put the pictures on items" / "when I try to add
   something, it comes out -- I need pictures"): each dropdown row gets a real thumbnail and a
   tap-to-add right there, no round trip through the results page. The row itself is NOT one big
   <a> (so the +/stepper's own taps never fight the row's own navigate-to-product tap) -- the
   photo+name is its own link, the add control is a sibling. */
.sta-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line)}
.sta-row:last-of-type{border-bottom:0}
.sta-row-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit}
.sta-row-link:active,.sta-row:hover .sta-row-link{opacity:.85}
.sta-thumb{width:56px;height:56px;flex:0 0 auto;border-radius:8px;overflow:hidden}
.sta-thumb .pimg{width:100%;height:100%;border-radius:8px}
.sta-thumb .ph .emo{font-size:17px}
.sta-thumb .ph b{font-size:10px}
.sta-thumb .ph small{display:none}
.sta-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sta-name{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sta-meta{font-size:12px;color:var(--g2);display:flex;gap:6px;flex-wrap:wrap}
.sta-meta .sta-size{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.sta-meta .sta-price{font-weight:700;color:var(--g2)}
.sta-addzone{flex:0 0 auto;display:flex;align-items:center}
.sta-addzone .add{margin:0;padding:8px 14px;min-width:40px;min-height:36px;font-size:16px;line-height:1}
.sta-addzone .stepper{margin:0;min-width:84px;min-height:36px}
.sta-addzone .stepper button{font-size:16px;width:32px;height:32px}
.sta-addzone .stepper span{font-size:13px;font-weight:700}

.header-actions{display:flex;align-items:center;gap:12px}.hdr-link{font-size:13px;font-weight:600;text-decoration:none}
.cart-btn{display:flex;align-items:center;gap:8px;background:var(--gold);color:#2b2100;text-decoration:none;border-radius:999px;padding:8px 14px;font-weight:700;position:relative}
.cart-count{background:var(--g);color:#fff;border-radius:999px;font-size:12px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.greet-strip{background:#fff;border-top:1px solid var(--line)}
.greet-strip-in{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;font-size:13px}
.greet-left{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:700}
.greet-right{text-decoration:none;color:var(--g);font-weight:800;background:#fdf1e4;padding:4px 11px;border-radius:999px;font-size:12.5px;border:1px solid #f3dcc2}
.deliverybar{background:#fbf4dc;border-top:1px solid #f0e3b4;font-size:13px}.deliverybar-in{display:flex;justify-content:space-between;align-items:center;padding:5px 14px}
.slot-btn{border:0;background:none;font-weight:700;color:var(--g);cursor:pointer;padding:4px 0}
.deptnav{border-top:1px solid var(--line);background:#fff}.deptnav-in{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}.deptnav-in::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.chip.on{background:var(--g);color:#fff;border-color:var(--g)}
main{padding-top:16px;padding-bottom:40px;min-height:60vh;outline:none}
h1,h2,h3{margin:0 0 10px}h1{font:700 26px Georgia,serif;color:var(--g)}h2{font:700 21px Georgia,serif;color:var(--g)}
.hero{position:relative;border-radius:20px;overflow:hidden;min-height:250px;display:flex;align-items:flex-end;background:linear-gradient(120deg,#7a3005,#d9730d);color:#fff}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,16,4,.88) 0%,rgba(40,16,4,.55) 55%,rgba(40,16,4,.1) 100%)}
.hero-in{position:relative;z-index:1;padding:26px;max-width:560px}
.hero .eyebrow{display:inline-block;background:var(--gold);color:#2b2100;font-weight:800;font-size:12px;letter-spacing:.08em;border-radius:999px;padding:4px 10px;margin-bottom:10px}
.hero h1{color:#fff;font-size:32px;line-height:1.1;margin-bottom:8px}.hero p{margin:0 0 16px;color:#e4efe9}
.hero-shopping{display:flex;align-items:stretch;min-height:160px;background:linear-gradient(120deg,#7a3005,#d9730d)}
.hero-shopping .hero-in{display:flex;flex-direction:column;justify-content:center;max-width:none;flex:1 1 55%;padding:24px 20px}
.hero-shopping .hero-in h1{font-size:26px;margin-bottom:14px}
.hero-shopping-img{flex:0 0 45%;position:relative;overflow:hidden}
.hero-shopping-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-shopping-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,16,4,.55) 0%,rgba(40,16,4,0) 35%)}
/* Round 11a: dismissible hero ("exit out and get into categories right away"), remembered in
   localStorage, plus a much shorter hero on mobile so the department grid is reachable without
   scrolling past a big banner. */
.hero-dismiss{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:999px;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer}
.hero-dismiss:hover{background:rgba(0,0,0,.5)}
@media (max-width:760px){
  .hero{min-height:120px}
  .hero h1{font-size:19px;margin-bottom:4px}
  .hero p{display:none}
  .hero-in{padding:16px 44px 16px 16px}
  .hero-shopping{min-height:110px}
  .hero-shopping .hero-in h1{font-size:17px;margin-bottom:8px}
  .hero-shopping .hero-in{padding:14px 40px 14px 14px}
}
@media (max-width:480px){.hero-shopping{min-height:150px}.hero-shopping .hero-in{flex:1 1 56%;padding:18px 14px}.hero-shopping .hero-in h1{font-size:20px;margin-bottom:10px}.hero-shopping-img{flex:0 0 44%}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;text-decoration:none;background:var(--g);color:#fff}
.btn.gold{background:var(--gold);color:#2b2100}.btn.ghost{background:#fff;color:var(--g);border:1.5px solid var(--line)}.btn.sm{padding:7px 13px;font-size:13.5px}.btn.red{background:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
.promos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 6px}
.promo{position:relative;border-radius:16px;overflow:hidden;min-height:120px;display:flex;align-items:flex-end;color:#fff;text-decoration:none;background:#7a3005}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.promo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.05) 70%)}
.promo span{position:relative;z-index:1;padding:12px 14px;font-weight:800;font-size:16px;line-height:1.15}.promo small{display:block;font-weight:500;font-size:12.5px;opacity:.9}
.section{margin-top:26px}.section-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.section-h a{font-weight:700;font-size:14px;white-space:nowrap}
.depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dept{background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);overflow:hidden;display:flex;flex-direction:column}
.dept .dimg{aspect-ratio:4/3;display:grid;place-items:center;background:var(--tint);position:relative}
.dept .dimg img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply}
.dept b{padding:9px 11px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
/* Round 5 (owner video, 7:50am+7:51am): paste-list "Pick a match"/"Change" suggestions are real
   product cards with photos (same shape as the store grid, compact), not bare text buttons. */
.pastematch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
/* Round 7 (owner, 2:20pm video: "I can't scroll" repeated many times in the "Search for: ..."
   sheet) -- the sheet is its own fixed, full-height panel with ONE scrollable region
   (.pastesearch-results), completely separate from the review list behind it (which has its own
   scroll area, .pastereview-body, below). --pastevh is kept in sync with visualViewport by app.js
   so the panel's real height (and therefore what's reachable by scrolling) is correct even with
   the on-screen keyboard open, on browsers where 100dvh alone doesn't account for it. */
.pastesearch-overlay{position:fixed;inset:0;z-index:70;background:#fff;display:flex;flex-direction:column;height:100dvh;height:var(--pastevh,100dvh)}
.pastesearch-overlay .picker-head{flex:none}
.pastesearch-input-wrap{flex:none;padding:10px 16px 0}
.pastesearch-results{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 16px 24px;-webkit-tap-highlight-color:transparent}
.pastesearch-showmore{width:100%;margin-top:10px}
.pastereview-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Round 13 (owner): a brief highlight on the exact row the customer just acted on (picked a
   match, closed search), so scrolling it back into view is visible, not just a silent jump. */
@keyframes pastrowFlash{0%{background:#fff3cd}100%{background:transparent}}
.pastrow-flash{animation:pastrowFlash 1.1s ease-out}
.pastematch{display:flex;flex-direction:column;gap:6px;text-align:left;border:1.5px solid var(--line);border-radius:10px;padding:6px;background:#fff;cursor:pointer;font:inherit;color:inherit}
.pastematch-img{display:block;border-radius:8px;overflow:hidden;aspect-ratio:1}
.pastematch-img .pimg{aspect-ratio:1}
.pastematch-info{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.25}
.pastematch-info b{font-size:13px}

/* Round 4, job 10: a lone item in its own subtype group must not leave an empty column beside it — one narrow column sized to the card, not a stretched 2-up grid with nothing in slot 2. */
.grid.one{grid-template-columns:minmax(0,190px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:6px;position:relative;content-visibility:auto;contain-intrinsic-size:auto 230px}
.pimg{aspect-ratio:1;border-radius:10px;background:#eee;display:grid;place-items:center;overflow:hidden}
/* Round 29 (Moshe video, results-page photos show blank white for a few seconds before
   appearing): a light grey placeholder shows through until the real photo paints, instead of a
   white box that looks empty/broken while it loads. */
.pimg img{opacity:0;transition:opacity .15s ease-out}
.pimg img.img-loaded{opacity:1}
/* Round 4, job 11: zoom/crop so the product fills the tile, not float in whitespace */
.pimg img{width:100%;height:100%;object-fit:cover}
.ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;background:var(--tint,#fdf1e2);color:var(--c,#8a3f09)}
.ph b{font:800 17px Georgia,serif;line-height:1.1;letter-spacing:.01em}.ph small{font-size:11.5px;margin-top:6px;opacity:.8;font-weight:600}
.ph .ico{width:34px;height:34px;border-radius:50%;background:var(--c);opacity:.9;margin-bottom:8px;display:grid;place-items:center;color:#fff;font:700 15px Georgia,serif}
.price{font-weight:800;font-size:17px}.price small{font-weight:600;color:var(--muted);font-size:12px}
.pname{font-size:14px;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.psize{font-size:12.5px;color:var(--muted)}
.add{margin-top:auto;border:1.5px solid var(--g);background:#fff;color:var(--g);border-radius:999px;padding:8px;font-weight:800;cursor:pointer}
.add:hover{background:var(--g);color:#fff}
.stepper{margin-top:auto;display:flex;align-items:center;justify-content:space-between;background:var(--g);color:#fff;border-radius:999px;overflow:hidden}
.stepper button{border:0;background:transparent;color:#fff;font-size:20px;font-weight:700;width:42px;height:38px;cursor:pointer}.stepper span{font-weight:800;font-size:14px}
.badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px;z-index:1}
.subchips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}
/* Round 4, job 9: the subcategory chip wall replaced by one dropdown inside a department */
.catdrop{position:relative;display:inline-block;margin:6px 0 14px;max-width:100%}
.catdrop select{appearance:none;-webkit-appearance:none;font:700 15px/1.2 Georgia,serif;color:var(--g);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 34px 9px 16px;max-width:100%;text-overflow:ellipsis}
.catdrop-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--g)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
select,input[type=text],input[type=tel],input[type=number],input[type=password],input[type=search].plain,textarea{border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;max-width:100%}
textarea{width:100%;min-height:150px;resize:vertical}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cartline{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cartline .pimg{width:56px}.cartline .ph b{font-size:10px}.cartline .ph .ico,.cartline .ph small{display:none}
.mini-step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px}.mini-step button{border:0;background:none;width:30px;height:30px;font-size:17px;cursor:pointer;color:var(--g);font-weight:800}.mini-step span{min-width:34px;text-align:center;font-weight:700;font-size:13.5px}
.totals{display:grid;gap:6px;margin-top:12px}.totals div{display:flex;justify-content:space-between}.totals .grand{font-weight:800;font-size:18px;border-top:1px solid var(--line);padding-top:8px}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.form{display:grid;gap:12px}.form label{display:grid;gap:5px;font-weight:600;font-size:13.5px}
.seg{display:flex;background:var(--bg);border-radius:999px;padding:3px}.seg button{flex:1;border:0;background:none;border-radius:999px;padding:8px;font-weight:700;cursor:pointer;color:var(--muted)}.seg button.on{background:#fff;color:var(--g);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);opacity:0;background:var(--g);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;transition:.25s;z-index:60;pointer-events:none;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:grid;place-items:end center}
.modal-in{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:18px;max-height:85vh;overflow:auto}
.slots{display:grid;gap:8px;margin:10px 0}.slots button{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px;text-align:left;cursor:pointer;font-weight:600}.slots button.on{border-color:var(--g);background:#fdeee0}
.empty{text-align:center;padding:40px 10px;color:var(--muted)}
.site-footer{background:var(--g);color:#ffe8d4;font-size:13px;padding:22px 0}.site-footer a{color:#fff}.foot-in{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.footer-logo{height:40px;width:auto;margin-bottom:8px;display:block}
.site-footer .muted{color:#e8c7a6}
/* admin */
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.tabs a{white-space:nowrap;text-decoration:none;font-weight:700;padding:9px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:14px}.tabs a.on{background:var(--g);color:#fff;border-color:var(--g)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.stat b{display:block;font-size:20px}.stat span{font-size:12px;color:var(--muted)}
.arow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:6px}
.arow.lowstock{border-color:#e0a400;background:#fffaf0}
.arow.outstock{border-color:#c0392b;background:#fdf2f1}
.rowsel{flex:0 0 auto;width:18px;height:18px}
.arow .pimg{width:44px;flex:0 0 auto;border-radius:8px}.arow .ph b{font-size:8px}.arow .ph .ico,.arow .ph small{display:none}
.arow .nm{flex:1 1 150px;min-width:130px;font-weight:600;font-size:13.5px;line-height:1.2}.arow .nm small{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px}
.pricein{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;background:#fff;padding-left:8px;flex:0 0 auto}.pricein input{border:0;width:62px;padding:7px 6px;min-width:0;outline:none;font-weight:700}
.pricein.qtyin input{width:48px}
.pricein.saved{border-color:#3a9a6a;background:#effaf4}
.toggle{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;cursor:pointer;user-select:none;line-height:1.1}
.toggle input{display:none}.toggle i{width:40px;height:24px;border-radius:999px;background:#cfd6d2;position:relative;flex:none;transition:.2s}.toggle i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.toggle input:checked+i{background:#2e8b57}.toggle input:checked+i:after{left:19px}
.pill{display:inline-block;font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 9px;background:#eee}
.pill.New{background:#fff1c7;color:#7a5600}.pill.Preparing{background:#dbeafe;color:#1e40af}.pill.Ready{background:#e0f2e9;color:#166534}.pill.Delivered{background:#e5e7eb;color:#374151}.pill.Cancelled{background:#fde2e1;color:#991b1b}
.pill.wa{background:#dcf8c6;color:#075e54}.pill.web{background:#eef2ff;color:#3730a3}
.order{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px}
.order-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.order-top b{font-size:15px}
.order details{margin-top:8px}.order summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--g2)}
.order table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}.order td{padding:4px 2px;border-bottom:1px solid #f0ede6}
.parsed{display:grid;gap:8px;margin-top:12px}
.pline{background:#fff;border:1px solid var(--line);border-left:5px solid #2e8b57;border-radius:12px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:8px}
.pline.medium{border-left-color:var(--gold)}.pline.low,.pline.none{border-left-color:var(--red)}
.pline .raw{font-size:12.5px;color:var(--muted);grid-column:1/-1}.pline .raw b{color:var(--ink)}
.pline select{width:100%;font-size:13.5px}.pline .q{display:flex;gap:6px;align-items:center}.pline .q input{width:70px}
.conf{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.waBox{background:#f0e0cc;border-radius:14px;padding:12px}
.note{background:#fbf4dc;border:1px solid #f0e3b4;border-radius:12px;padding:10px 12px;font-size:13.5px}
@media (max-width:760px){
  .hide-sm{display:none}.header-in{gap:6px}.search{min-width:0}.search input{padding:10px 10px}.hdr-link{display:none}
  .header-actions{gap:6px}
  .hdr-link.dept-menu-link{width:30px !important;height:30px !important;font-size:17px}
  .hdr-link.acct-link{display:inline-flex !important;align-items:center;justify-content:center;width:30px;height:30px;padding:0;font-size:17px}
  .hdr-link.acct-link.has-initials{width:40px;height:40px}
  .hdr-link.acct-link .acct-txt{display:none}
  .logo-text b{font-size:19px}.hero{min-height:230px}.hero h1{font-size:26px}.hero-in{padding:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.grid.one{grid-template-columns:minmax(0,calc(50% - 5px))}.depts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dept b{font-size:12.5px;padding:7px 8px}
  .two{grid-template-columns:1fr}.foot-in{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}
  .arow{gap:6px 8px}.admin-nav-desktop{display:none}.admin-nav-mobile{display:block}
  .promos{grid-template-columns:1fr 1fr}.promo{min-height:110px}.promo span{font-size:14px}
  h1{font-size:23px}
}

.modal[hidden]{display:none}
.admin-nav-mobile{display:none;width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);font-weight:700;font-size:14px;margin-bottom:12px;background:#fff}
.stocknote{font-size:12px;font-weight:700;margin:0}
.stocknote.low{color:#9a6b00}
.stocknote.out{color:#b23a2b}
.card.oos{opacity:.72}
.card.oos .pimg{filter:grayscale(.35)}
.selbar{flex-wrap:wrap}
.ordctl{display:flex;gap:4px;flex:0 0 auto}
.ordctl .btn{padding:6px 9px}
.modal-in label{display:block;margin:10px 0 2px;font-size:13px;font-weight:600}
.modal-in input[type=text],.modal-in input[type=number],.modal-in select{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;box-sizing:border-box}
.dept .demo{font-size:44px;line-height:1}
.ph .emo{font-size:40px;line-height:1;margin-bottom:6px}
body.is-admin .deptnav,body.is-admin .deliverybar{display:none}
/* Round 10 (owner, 11:04pm video: "why am I going in as a regular customer") -- the "Hi,
   <name>" greeting strip + points pill, and the top promo bar, are customer chrome; admin
   gets its own header (the Store admin bar already in adminShell) with none of it. */
body.is-admin .greet-strip,body.is-admin .topbar{display:none}
/* Round 5 (owner video, 7:54am): admin gets its OWN header — no customer search bar, account
   dropdown, "Store admin" link or cart leaking in up top; just the logo + a small "Admin" badge.
   The section menu itself lives in adminShell()'s own nav, rendered inside #app below this. */
body.is-admin .header-in .search,body.is-admin .header-in .header-actions{display:none}
.admin-badge{display:none;font-weight:800;color:var(--g);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);border:1.5px solid var(--g);border-radius:999px;padding:3px 9px;margin-left:4px}
body.is-admin .admin-badge{display:inline-block}
/* Round 5 (owner video, 7:54am): the admin landing — count tiles + a menu of sections, mobile-first. */
.adminhome-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.adminhome-tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink)}
.adminhome-badge{position:absolute;top:10px;right:10px;background:var(--red,#b23a2b);color:#fff;border-radius:999px;font-size:12px;font-weight:800;min-width:20px;height:20px;line-height:20px;text-align:center;padding:0 5px}
.adminhome-ico{font-size:26px}
.adminhome-tile b{font-size:14.5px}
.adminhome-tile small{color:var(--muted);font-size:12px;line-height:1.3}
@media (max-width:480px){.adminhome-grid{grid-template-columns:1fr 1fr;gap:8px}.adminhome-tile{padding:12px 10px}}

@media (max-width:760px){body.is-admin .admin-badge{font-size:10.5px;padding:2px 7px}}
/* Round 5 (owner video, 7:47am): the account icon opens a short dropdown menu instead of the
   old chip row (My lists, My favorites, My orders, Previously bought, Weekly orders, Addresses,
   Rewards, Sign out / Sign in + Create account when signed out). */
.acct-menu{position:relative}
.hdr-link.acct-link{border:0;background:none;font:inherit;padding:0;cursor:pointer}
.acct-dropdown{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(39,28,18,.18);min-width:210px;z-index:60;overflow:hidden}
.acct-ddrow{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14px;color:var(--ink);text-decoration:none;border:0;border-bottom:1px solid var(--line);background:#fff;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.acct-ddrow:last-child{border-bottom:0}
.acct-ddico{font-size:16px;width:20px;text-align:center;flex:none}
.acct-ddout{color:#8a2b2b}
.acct-ico-initials{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--g);color:#fff;font-size:15px;font-weight:800;letter-spacing:.2px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.acct-ddhi{padding:10px 14px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line);color:var(--g2)}

@media (max-width:760px){.arow{grid-template-columns:40px 1fr 104px}.pricein input{font-size:15px;padding:7px 4px}.dept .demo{font-size:36px}}
.arow .ph .emo,.cartline .ph .emo{font-size:22px;margin:0}.arow .ph b,.cartline .ph b{display:none}
.form input,.form select,.form textarea{width:100%;min-width:0}
.pline{grid-template-columns:minmax(0,1fr) auto}.pline select{min-width:0;max-width:100%}
.wa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:420px){.pline{grid-template-columns:1fr}.pline .q{justify-content:space-between}}
.header-actions{margin-left:auto}
body.is-admin main{padding-top:20px}

/* Round 11a (owner voice note): the header must be small and out of the way -- "full screen
   visual for most of the things". Logo is now a crisp SVG (site/img/logo.svg, text converted to
   paths so it's sharp at any size/DPI with no font dependency) and stays compact on every
   screen; the owner's round 4/5 request for a huge dominant wordmark is reversed here on his own
   explicit ask. The whole sticky header (collapsible strip + this compact row + chips) now runs
   about 100-120px tall on a phone instead of ~360px. */
.logo-img{height:32px;width:auto;display:block;flex:0 0 auto}
@media (max-width:760px){
  .header-in{padding:8px 14px;gap:8px}
  .logo-img{height:43px;max-width:34vw;width:auto;object-fit:contain}
  .cart-btn .cart-total{display:none}
  .cart-btn{padding:6px 8px;gap:4px}
}

/* manual "new order" screen */
.noQuickAdd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* Round 5 (owner video, 7:54am): customer-first "New order" — search/picked card + quick-add. */
#noCustSearch{width:100%;padding:10px;border:1.5px solid var(--line);border-radius:10px;font-size:14px}
.nocust-results{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:260px;overflow:auto}
.nocust-result{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:inherit}
.nocust-result b{font-size:13.5px}
.nocust-result .muted{font-size:12px}
.nocust-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
.noquick-sec{border-top:1px solid var(--line)}
.noquick-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:11px 2px;background:none;border:0;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;color:var(--ink)}
.noquick-body{padding:0 2px 12px;display:flex;flex-direction:column;gap:8px}
.noquick-order{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.noquick-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.noquick-chip{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;cursor:pointer;font-family:inherit}
.noquick-chip img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.noquick-chip b{color:var(--g);font-size:15px}
.noquick-list{font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.noquick-list:last-child{border-bottom:0}

.noQuickAdd input[type=text]{flex:1;min-width:160px}
.noLines{display:grid;gap:10px}
.noline{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.noline-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.noline-raw{font-size:14.5px}.noline-match{display:block;font-size:12.5px;color:var(--g2);font-weight:700}
.noline-match.muted{color:var(--muted);font-weight:500}
.noline-x{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:4px}
.noline-fields{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-top:8px}
.noline-fields label{display:grid;gap:3px;font-size:11.5px;font-weight:700;color:var(--muted)}
.noline-fields input,.noline-fields select{width:84px;padding:7px 8px}
.noline-search{margin-top:10px;background:var(--bg);border-radius:10px;padding:8px}
.noline-search input{width:100%}
#noSearchResults{display:grid;gap:6px;margin-top:8px;max-height:260px;overflow:auto}
.noResult{display:flex;gap:8px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px;cursor:pointer}
.noResult .pimg{width:40px;flex:none}.noResult small{display:block;color:var(--muted);font-size:12px}

/* order source pill + pick link */
.pill.manual{background:#ffe3c2;color:#8a3f09}
.order-pick-row{margin-top:8px}

/* picking screen */
.pick-head .muted{font-size:13px;line-height:1.5;margin-top:6px}
.pick-progress{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;font-weight:700;color:var(--muted)}
.pick-progress-bar{flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.pick-progress-bar span{display:block;height:100%;background:#2e8b57;border-radius:999px;transition:.2s}
.pick-sheet{display:grid;gap:10px}
.pickline{border:1px solid var(--line);border-radius:12px;padding:10px;border-left:5px solid var(--line)}
.pickline.picked{border-left-color:#2e8b57;background:#f3faf6}
.pickline.unavailable{border-left-color:var(--red);background:#fdf3f2}
.pickline.substituted{border-left-color:var(--gold);background:#fffaf0}
.pickline-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pickline-thumb{flex:none;width:48px;height:48px;border-radius:6px;overflow:hidden}
.pickline-thumb .pimg{width:100%;height:100%;margin:0}
.pickline-thumb .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pickline-thumb .ph{width:100%;height:100%;display:grid;place-items:center;font-size:20px}
.pickline-thumb .ph b,.pickline-thumb .ph small{display:none}
.pickline-info{flex:1;min-width:0}
.pickline-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pbtn{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink)}
.pbtn.on{border-color:var(--g);background:var(--g);color:#fff}
.pickline-sub{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.pickline-sub input{flex:1;min-width:120px}
.pickline-sub input[type=number]{max-width:110px}

/* print pick sheet */
@media print{
  .topbar,.site-header,.site-footer,.admin-head,.tabs,.pick-head .btn,#toast,.order-pick-row{display:none !important}
  body{background:#fff}
  .panel{border:0;padding:0}
  .pickline{break-inside:avoid;border:1px solid #999}
  .pickline-actions{display:none}
  .pickline-thumb{width:48px;height:48px;border:1px solid #999;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pickline-thumb .ph{background:#fff !important}
  main{padding:0}
}

/* Item-type grouping (search results, dept grids, admin catalog): a light label per cluster
   so like items — all the cheeses, all the oils, all the peppers — read as one group. */
.typegroup{margin:0 0 20px}
.typegroup:first-child{margin-top:0}
.typehead{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--g2);margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.typehead .muted{text-transform:none;font-weight:600;letter-spacing:0;font-size:12.5px}
.typehead-admin{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--g2);margin:14px 0 6px;padding:0 2px}
.typehead-admin:first-child{margin-top:4px}

.noLivePanel{display:grid;gap:6px;margin:-2px 0 2px}
.noLivePanel:empty{margin:0}

.subtypehead{font-size:11.5px;font-weight:700;color:var(--muted);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.03em}
.typegroup .subtypehead:first-of-type{margin-top:2px}

.listheart{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:999px;border:1px solid var(--line);background:#fffffffa;font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer;color:var(--g2)}
.listadd-text{border:none;background:none;color:var(--g2);font-size:12px;font-weight:600;padding:2px 0;cursor:pointer;text-align:left}


/* Account hub (round 2, job 5) */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.hubtile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink)}
.hubtile:hover{border-color:var(--g)}
.hubtile-ico{font-size:24px}
.hubtile-t b{display:block;font-size:13.5px}
.hubtile-t small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.3}

/* Settings toggles (job 3) */
.togglerow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.togglerow:last-of-type{border-bottom:0}
.togglerow input[type=checkbox]{width:40px;height:24px;appearance:none;background:#cfd6d2;border-radius:999px;position:relative;flex:none;cursor:pointer;transition:.2s}
.togglerow input[type=checkbox]:checked{background:#2e8b57}
.togglerow input[type=checkbox]:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.togglerow input[type=checkbox]:checked:after{left:19px}

/* List picker checkboxes (job 4) */
.checklist{display:grid;gap:8px;margin:8px 0}
.checkrow{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-weight:600;cursor:pointer}
.checkrow input{width:18px;height:18px}

/* Loyalty (job 8) */
.loyalty-banner{background:#fffaf0;border:1px solid var(--gold)}
.progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:6px}
.progress-bar{display:block;height:100%;background:var(--gold);border-radius:999px}
.card.reward.locked{opacity:.6}
.card.reward .emo{font-size:36px}

/* Live order status steps (settings toggle e) */
.statusline{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;font-size:11.5px}
.statusstep{color:var(--muted);font-weight:600}
.statusstep.on{color:var(--g);font-weight:800}
.statusarrow{color:var(--line)}

/* Store-view arranger (job 1) */
.arrange-grid{margin-bottom:6px}
.arrange-compact{display:grid;gap:6px;margin-bottom:6px}
.acard{cursor:grab;touch-action:none;user-select:none}
.acard.dragging{box-shadow:0 10px 24px rgba(0,0,0,.25);opacity:.95;transform:scale(1.03)}
.dragdot{position:absolute;top:6px;left:6px;z-index:2;font-size:13px;color:var(--muted);background:#fffffffa;border-radius:6px;padding:1px 4px}
.arrange-compact .dragdot{position:static;margin-right:2px}
.drag-placeholder{border:2px dashed var(--g);border-radius:var(--r);background:#fdeee0}

/* Checkout item notes (job 3c) */
.itemnote{border:1px solid var(--line);border-radius:8px;padding:6px 8px}

#myListsSel{border:0;background:none;font-weight:700;color:var(--g);cursor:pointer;padding:4px 8px}

/* "My lists" quick-access chip row — under the search bar on every store page, and reused
   (same markup) at the top of the account hub (owner, 10/11 voice notes). */
.listsbar{display:flex;gap:6px;overflow-x:auto;padding:8px 0;-ms-overflow-style:none;scrollbar-width:none}
.listsbar::-webkit-scrollbar{display:none}
.listsbar[hidden]{display:none}
.chip-new{border-style:dashed;color:var(--g2)}

/* Remove-from-list (×) on a card shown inside a list page — opposite corner from the heart. */
.listremove{position:absolute;top:8px;left:8px;z-index:2;width:28px;height:28px;border-radius:999px;border:1px solid var(--line);background:#fffffffa;font-size:17px;line-height:1;display:grid;place-items:center;cursor:pointer;color:var(--red)}

/* List detail page top bar: name · count · + Add items (always there) · Add all · Exit */
.listbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.listbar-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.listbar-title h1{margin:0;font-size:19px}
.listbar-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Empty-list state: the owner's exact bug (challah showed empty, no way in) — big and unmissable. */
.list-empty-cta{padding:56px 16px}
.list-empty-cta p{font-size:16px;margin:0 0 16px}
.btn.lg{padding:15px 28px;font-size:16px}

/* Full-screen "Add items" picker */
.modal.modal-full{align-items:stretch;padding:0}
.modal.modal-full .modal-in{width:100%;max-width:100%;height:100vh;max-height:100vh;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.picker-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.picker-head h2{margin:0;font-size:17px}
.picker-search{padding:10px 16px;flex:none}
.picker-search input{width:100%;padding:12px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:15px}
.picker-chips{padding:0 16px 10px;margin:0;flex:none;overflow-x:auto;flex-wrap:nowrap}
.pickrows{flex:1 1 auto;overflow-y:auto;padding:0 16px;-webkit-overflow-scrolling:touch}
.pickrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.pickimg{width:52px;height:52px;border-radius:8px;overflow:hidden;flex:none;background:var(--bg);display:grid;place-items:center}
.pickimg img{width:100%;height:100%;object-fit:contain}
.pickimg-ph{font-size:22px}
.pickinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pickname{font-weight:600;font-size:14px;line-height:1.3;overflow-wrap:break-word}
.pickmeta{font-size:12.5px;color:var(--muted)}
.pickcheck{width:26px;height:26px;flex:none;accent-color:var(--g)}
.picker-bottom{flex:none;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}

/* Account pages are a clean page of their own (owner, 10/11): no store search/delivery/lists/
   category chrome — just the header's logo/account/cart row, then the account content. */
body.is-account .search,
body.is-account .deliverybar,
body.is-account .listsbar,
body.is-account .deptnav { display:none !important; }
.acct-topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.acct-topbar h1{margin:0;font-size:19px;flex:1}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.acct-optlist{display:grid;gap:8px}
.acct-optrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.acct-optrow .hubtile-ico{font-size:20px}
.acct-optrow b{display:block;font-size:14px}
.acct-optrow small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}

/* Round 4, job 12: product detail page */
.pdp-link{color:inherit;text-decoration:none;display:block}
.pdp{display:grid;grid-template-columns:1fr;gap:16px}
.pdp-photo{aspect-ratio:1;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;max-width:420px}
.pdp-photo img{width:100%;height:100%;object-fit:contain}
.pdp-stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;width:100%;justify-content:space-between;padding:4px}
.pdp-stepper button{border:0;background:none;width:42px;height:42px;font-size:20px;border-radius:999px}
.pdp-stepper span{font-weight:700;font-size:16px}
@media (min-width:640px){.pdp{grid-template-columns:320px 1fr}}

/* Round 4: closed-day weekly-order banner */
.closedbanner{background:#f4dede;color:#8a2b2b;font-size:13.5px;border-bottom:1px solid #e3b7b7}
.closedbanner .btn{color:#8a2b2b;border-color:#8a2b2b}

.dept-menu{position:relative}
.hdr-link.dept-menu-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:19px;border:0;background:none;cursor:pointer;color:var(--ink,#2b2100)}
.dept-menu-dropdown{position:absolute;left:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(39,28,18,.18);min-width:230px;max-height:70vh;overflow-y:auto;z-index:60}
.dept-menu-ddhi{padding:10px 14px;font-weight:800;font-size:13.5px;border-bottom:1px solid var(--line);color:var(--g2)}
.dept-menu-row{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);background:#fff}
.dept-menu-row:last-child{border-bottom:0}
.dept-menu-row.on{background:#fdf2e6;font-weight:700}
.dept-menu-ico{font-size:16px;width:20px;text-align:center}
@media (max-width:480px){.dept-menu-dropdown{position:fixed;left:0;right:0;top:auto;bottom:0;border-radius:16px 16px 0 0;max-height:75vh;min-width:0}}

/* Round 6 (owner): My orders / Weekly orders made to look "more official" — proper cards with
   clear status colors, instead of plain text rows. */
.orderrow{border-left:4px solid var(--line);transition:box-shadow .15s}
.orderrow:hover,.orderrow.open{box-shadow:0 2px 10px rgba(39,28,18,.08)}
.orderrow .pill{background:#eef0f2;color:#445}
.orderrow .pill.st-new{background:#fff4df;color:#8a5a00}
.orderrow .pill.st-progress{background:#e3f0ff;color:#1a4e8a}
.orderrow .pill.st-ready{background:#e6f6ea;color:#1f7a3a}
.orderrow .pill.st-done{background:#e6f6ea;color:#1f7a3a}
.orderrow .pill.st-cancel{background:#fbe6e6;color:#9a2b2b}
.weeklycard{border-left:4px solid var(--g);position:relative}
.weeklycard .bar b{font-size:16px}
.weeklycard .bar b:before{content:"\1F501 ";margin-right:2px}
.weeklycard.paused{border-left-color:var(--muted,#999);opacity:.85}
.weeklycard .wk-next{display:inline-flex;align-items:center;gap:6px;background:#fdf2e6;color:#7a3005;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;margin-top:4px}

/* Round 7 (owner, 8:47pm screenshot: tapped Create with an empty "My lists" field, "Noting
   happens") — a field needs a visible error state, not a silent no-op. */
.field-err{border-color:#c0392b !important;box-shadow:0 0 0 2px rgba(192,57,43,.15)}
.field-err-msg{display:none;color:#c0392b;font-size:12.5px;margin-top:-4px}
.field-err-msg.show{display:block}

/* Round 9 (owner voice note, 10/11 10:47pm): upload an exported WhatsApp chat on the paste page,
   a progress line for a large import, and a small "seen N times" badge on a merged duplicate. */
.pasteupload-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted,#888);font-size:12px}
.pasteupload-divider::before,.pasteupload-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.pasteupload-label{display:block;width:100%;text-align:center;cursor:pointer;font-size:13.5px}
.progressbar{width:100%;height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.progressbar-fill{height:100%;background:var(--gold,#bf5607);transition:width .15s ease}
.pasteseen{font-size:11px;margin-left:4px;white-space:nowrap}

/* Round 10 (owner, 11:04pm video: scrolled thousands of rows in admin Products, "I'm stuck") --
   the search/department/status/stock filter bar stays pinned to the top of the viewport while
   the long product list scrolls under it, and a floating Top button gets back to it instantly. */
.catalog-filterbar{position:sticky;top:0;z-index:20;background:#fff;padding-top:10px;margin:-10px -10px 10px;padding-left:10px;padding-right:10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.deptjump{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.admin-top-btn{position:fixed;right:16px;bottom:22px;z-index:30;background:#1a1a1a;color:#fff;border:none;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer}
.admin-top-btn[hidden]{display:none}

/* Round 10 (admin "shop as the customer", main ask) -- a sticky banner above everything else
   while the admin is browsing the real storefront on a customer's behalf, so it's never mistaken
   for the admin's own shopping. */
.actingas-banner{position:sticky;top:0;z-index:45;background:#1a3a6b;color:#fff;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.actingas-banner[hidden]{display:none}
.actingas-banner b{font-weight:700}
.actingas-banner .aab-actions{display:flex;gap:8px;flex-wrap:wrap}
.actingas-banner button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer}
.actingas-banner button:hover{background:rgba(255,255,255,.28)}

/* Job D: Photos approval queue */
.navbadge{display:inline-block;background:var(--red,#b23a2b);color:#fff;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 6px;margin-left:4px;vertical-align:2px}
.photoq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.photoq-card{display:flex;flex-direction:column;gap:8px;padding:10px}
.photoq-thumb{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden}
.photoq-thumb .pimg{width:100%;height:100%;margin:0}
.photoq-thumb .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.photoq-thumb .ph{width:100%;height:100%}
.photoq-info b{display:block;font-size:14px;line-height:1.25}
.photoq-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.photoq-actions .btn{flex:none}

/* Job F: "back in stock" notification banner + account list */
.stocknotif{background:#e8f5e9;border-bottom:1px solid #b7dfba}
.stocknotif-wrap{display:block;padding:0}
.stocknotif-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;font-size:13.5px}
.stocknotif-acct .stocknotif-row{padding:8px 0;border-bottom:1px solid var(--line)}
.stocknotif-acct .stocknotif-row:last-child{border-bottom:0}

/* Job G: open/closed store banner */
.closedstorebanner{background:#fdf3f2;border-bottom:1px solid #f0c9c2}

/* Round 11a: infinite-scroll sentinel (batched/virtualised department + "More in <dept>" grids) --
   zero visible footprint, just an IntersectionObserver trigger; content-visibility:auto above on
   .card keeps layout/paint cheap for off-screen cards so scrolling hundreds of items stays smooth. */
.infinite-sentinel{height:1px}
.infinite-loading{text-align:center;padding:16px;color:var(--muted);font-size:13.5px}
.typegroup{content-visibility:auto;contain-intrinsic-size:auto 600px}

/* Round 14: case pricing (owner, 6:58pm) */
.case-save{color:#1a7a3c;font-weight:700;font-size:12px;margin-top:2px}
.case-ofprice{font-size:12px;color:var(--muted,#888);margin:-4px 0 2px}
.case-block{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f3f8f3;border:1px solid #d9ecd9;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:13.5px}
.case-block b{color:#1a7a3c}

/* Round 15: lb | pcs toggle (owner, 6:44pm: "Be able to change for pieces not only lb") */
.qty-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.unit-toggle{display:inline-flex;border:1px solid var(--line,#ddd);border-radius:7px;overflow:hidden;flex-shrink:0}
.unit-toggle .unit-btn{border:none;background:#fff;padding:4px 9px;font-size:12px;cursor:pointer;color:var(--muted,#888)}
.unit-toggle .unit-btn.active{background:var(--gold,#bf5607);color:#fff;font-weight:700}
.unit-toggle .unit-btn+.unit-btn{border-left:1px solid var(--line,#ddd)}
.pcs-estimate{font-size:11.5px;color:var(--muted,#888);margin-top:2px;width:100%}


.geo-suggest{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.14);z-index:40;max-height:260px;overflow:auto;margin-top:2px}
.geo-suggest-row{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 12px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.geo-suggest-row:last-of-type{border-bottom:0}
.geo-suggest-row:hover,.geo-suggest-row:active{background:var(--bg)}
.geo-attrib{padding:5px 12px;font-size:10.5px;color:var(--muted)}

/* Round 20: picked/missed/replaced summary (order card) + per-line flags (detail view) */
.pick-summary-line{display:flex;gap:10px;flex-wrap:wrap}
.pick-flag{font-size:12.5px;font-weight:700;margin-top:6px;border-radius:8px;padding:4px 8px;display:inline-block}
.pick-flag-picked{background:#e6f6ea;color:#1f7a3a}
.pick-flag-missed{background:#fdf3f2;color:#b3261e}
.pick-flag-replaced{background:#fffaf0;color:#9a6b00}
.pick-flag-partial{background:#eef2ff;color:#1e40af}
.pickline.cat-partial{border-left-color:#3b5bdb;background:#f3f5ff}
.pick-group-header{font-size:12.5px;font-weight:800;color:#8a3f09;margin:12px 0 6px;padding-top:6px;border-top:1px dashed #e0c08a}
.pick-group-header:first-child{margin-top:0;padding-top:0;border-top:none}
.pick-group-header-rest{color:#555;border-top:1px dashed var(--line)}


/* Round 21 (owner video, 11:39am): same tap-feedback fix as /pick, applied to admin's own
   buttons -- a pressed state + no text-selection/long-press-lookup/double-tap-zoom on tap.
   Pure :active/touch-action additions; no existing layout rule touched. */
.btn,.pbtn,.unit-btn,.slot-btn,.cart-btn,.admin-top-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.btn:active{transform:scale(.96);filter:brightness(.92)}
.btn.ghost:active{background:#f3ece4}
.btn:disabled:active{transform:none;filter:none}
.pbtn:active{transform:scale(.96);background:#f0efe9}
.pbtn.on:active{filter:brightness(.9)}
.unit-btn:active{filter:brightness(.9)}
.slot-btn:active{opacity:.6}
.cart-btn:active{transform:scale(.96);filter:brightness(.95)}
.admin-top-btn:active{transform:scale(.95);filter:brightness(.85)}


/* Round 23: daily needs form — print view for the admin report */
@media print {
  .site-header, .site-footer, .admin-head, .admin-nav-mobile, .admin-nav-desktop, .needs-noprint { display: none !important; }
  #app, #needsPrintArea { max-width: 100% !important; }
  body { background: #fff !important; }
  .panel { box-shadow: none !important; border: none !important; }
}

/* Round 26: full-screen tap-to-enlarge for a left-mode group's shelf photo (admin report) */
.needs-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.needs-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* Round 53: admin "Deliveries" (invoices) tab -- a view-only read of the same receiving data
   /receive.html's office card shows (reuses that card's visual language: green = received, red
   struck = not received, orange = an off-list extra), surfaced inside the PIN-gated admin
   backend instead of the separate receiving PIN (owner, 10:39am: "they need only the back end to
   see the invoices"). */
.dv-delivery { background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dv-delivery-date { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.dv-delivery-meta { font-size: 14px; color: #555; font-weight: 700; margin-bottom: 10px; }
.dv-delivery-bill { width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; background: #f3f3f3; margin-bottom: 12px; cursor: zoom-in; }
.dv-pdf-tile { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; border-radius: 12px; margin-bottom: 12px; background: #fdf3f2; color: #b3261e; font-weight: 800; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.dv-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dv-chip-received { display: inline-block; background: #eef7ee; color: #1b5e20; border-radius: 20px; padding: 6px 12px; font-size: 14px; font-weight: 700; }
.dv-chip-received.off-list { background: #fff3e0; color: #8a5300; }
.dv-chip-missing { display: inline-block; background: #fdeceb; color: #b3261e; border-radius: 20px; padding: 6px 12px; font-size: 14px; font-weight: 700; text-decoration: line-through; }
.dv-chip-upcmissing { display: inline-block; background: #fff6da; color: #8a6d00; border-radius: 20px; padding: 6px 12px; font-size: 14px; font-weight: 700; border: 1px solid #f0d87a; }
/* Round 54: a manager pushed this delivery through with a UPC still missing. */
.dv-override-note { font-size: 14px; font-weight: 700; color: #8a6d00; background: #fff6da; border: 1px solid #f0d87a; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }

.dv-section-label { font-size: 13px; font-weight: 800; color: #6a1b9a; text-transform: uppercase; letter-spacing: .02em; margin: 2px 0 8px; }
.dv-upc-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.dv-upc-item { display: flex; gap: 10px; align-items: center; background: #faf9f6; border-radius: 10px; padding: 8px 10px; min-width: 180px; }
.dv-upc-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #f1efe9; flex: none; cursor: zoom-in; }
.dv-upc-item .dv-upc-noimg { width: 52px; height: 52px; border-radius: 8px; background: #f1efe9; flex: none; }
.dv-upc-name { font-size: 14px; font-weight: 700; }
.dv-upc-num { font-size: 13px; color: #555; }
.dv-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.dv-day { background: #fff; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; }
.dv-day-head { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; padding: 14px 16px; font-size: 15px; font-weight: 800; cursor: pointer; color: var(--ink); }
.dv-day-head:hover { background: #faf9f6; }
.dv-day.open .dv-day-head { border-bottom: 1px solid #eee; }
.dv-day-chevron { color: #6a1b9a; font-size: 13px; flex: none; margin-left: 10px; }
.dv-day-body { padding: 14px; background: #faf9f6; }
.dv-day-body .dv-delivery:last-child { margin-bottom: 0; }
.dv-filters select, .dv-filters input[type="date"] { padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff; }
.dv-filters input[type="date"] { min-width: 0; }
@media (max-width: 420px) { .dv-filters { flex-direction: column; align-items: stretch; } }
/* Round 55 (owner: three roles -- admin sees everything, including a status + Mark done/Undo
   control, and a Delete). */
.dv-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dv-status-tag { display: inline-block; border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 800; }
.dv-status-progress { background: #f0eef7; color: #4a3b7a; }
.dv-status-todo { background: #fff6da; color: #8a6d00; }
.dv-status-done { background: #eef7ee; color: #1b5e20; }
.dv-delete-btn { margin-top: 12px; color: #b3261e; border-color: #b3261e; }
.dv-delete-btn:active { background: #fdecea; }



/* ===== Round 30: high-class home PREVIEW (/#/home-preview only) =====
   Scoped entirely under .hp / body.home-preview so the live #/ home (unaffected variables
   above) and every other page keep their exact current look until Moshe approves the switch.
   Palette builds on the real logo color (--g #bf5607, --gold #f2b632) deepened with a near-black
   ink-green for a premium feel, plus a classy serif (Playfair Display) for headings over the
   existing sans for body text. */
body.home-preview{--hpink:#15231c;--hpdeep:#132019;--hpcream:#faf6ee;--hpgoldline:#d9b667}
.hp{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hp h1,.hp h2,.hp h3{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.01em;margin:0}
.hp .hp-kicker{display:block;font:700 11.5px/1 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:8px}
.hp .hp-kicker.light{color:var(--hpgoldline)}
.hp a{text-decoration:none}

/* Hero */
.hp-hero{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center;background:linear-gradient(160deg,#1b2b22 0%,#132019 55%,#0e1713 100%);margin:0 -14px}
.hp-hero-pattern{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(circle at 1px 1px,#f3efe4 1.4px,transparent 0);background-size:28px 28px}
.hp-hero-mosaic{position:absolute;inset:0;display:none}
.hp-mi{position:absolute;background:#faf6ee;border-radius:20px;box-shadow:0 22px 44px -14px rgba(0,0,0,.5);padding:12px;display:flex;align-items:center;justify-content:center}
.hp-mi img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.hp-mi0{width:180px;height:180px;top:6%;right:24px}
.hp-mi1{width:130px;height:130px;top:44%;right:220px}
.hp-mi2{width:150px;height:150px;bottom:8%;right:40px}
.hp-mi3{width:110px;height:110px;top:14%;right:360px}
.hp-mi4{width:120px;height:120px;bottom:30%;right:420px}
.hp-hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,23,19,.95) 0%,rgba(14,23,19,.9) 42%,rgba(14,23,19,.45) 58%,transparent 72%)}
.hp-hero-in{position:relative;z-index:2;padding:72px 24px 56px;max-width:640px;color:#f3efe4}
.hp-eyebrow{display:block;font:600 12px/1.4 -apple-system,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--hpgoldline);margin-bottom:18px}
.hp-hero-in h1{font-size:38px;line-height:1.14;color:#fff}
.hp-hero-in p{font-size:15.5px;line-height:1.55;color:#d7d1c2;margin:16px 0 26px;max-width:46ch}
.hp-search{display:flex;background:#fff;border-radius:999px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);padding:5px;max-width:460px}
.hp-search-ico{display:flex;align-items:center;padding:0 4px 0 12px;font-size:15px;opacity:.6}
.hp-search input{flex:1;border:0;background:none;padding:10px 8px;font-size:15px;color:#1f2420;min-width:0}
.hp-search input:focus{outline:none}
.hp-search button{border:0;background:var(--g);color:#fff;font-weight:800;border-radius:999px;padding:10px 20px;cursor:pointer;font-size:14px}
.hp-search button:hover{background:var(--g2)}
.hp-hero-links{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13.5px;color:#cfc8b7;flex-wrap:wrap}
.hp-hero-links a{color:#f3efe4;font-weight:700;border-bottom:1px solid rgba(243,239,228,.45);padding-bottom:1px}
.hp-hero-links a:hover{border-color:var(--hpgoldline);color:var(--hpgoldline)}
.hp-hero-links span{opacity:.5}

/* Section rhythm */
.hp-section{padding:48px 0 8px}
.hp-section-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:18px}
.hp-section-h h2{font-size:25px;color:var(--hpink);flex:1 1 auto;width:100%}
.hp-section-h .hp-kicker{width:100%}
.hp-seeall{font:700 13px -apple-system,sans-serif;color:var(--g2);white-space:nowrap}
.hp-section-h.light h2{color:#fff}

/* Department tiles — real product photos */
.hp-dept-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hp-dept{position:relative;flex:0 0 auto;width:132px;height:150px;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;scroll-snap-align:start;box-shadow:0 6px 16px -6px rgba(31,22,10,.25)}
.hp-dept img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.hp-dept:hover img{transform:scale(1.06)}
.hp-dept-ph{position:absolute;inset:0;opacity:.85}
.hp-dept-tint{position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,32,25,.88) 0%,rgba(19,32,25,.25) 55%,rgba(19,32,25,.05) 100%)}
.hp-dept-ico{position:absolute;top:10px;left:10px;font-size:18px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.hp-dept b{position:relative;z-index:2;color:#fff;font:700 13.5px/1.25 -apple-system,sans-serif;padding:0 12px 12px;letter-spacing:.01em}

/* Carousels (Specials / Popular / Shabbos) reuse the real .card component */
.hp-carousel{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hp-carousel .card{flex:0 0 172px;width:172px;scroll-snap-align:start}
.hp-empty{padding:18px 0}

/* Dark bands (Specials / Shabbos) for contrast against the cream page */
.hp-band{background:var(--hpdeep);margin:48px -14px 0;padding:44px 14px 8px}
.hp-band .hp-carousel .card{background:#1d2e24;border-color:#2a3d31;color:#f3efe4}
.hp-band .hp-carousel .psize{color:#a9a28f}
.hp-band .hp-carousel .pname{color:#f3efe4}
.hp-band .hp-carousel .muted{color:#a9a28f}
.hp-band .hp-carousel .add{border-color:var(--hpgoldline);color:var(--hpgoldline)}
.hp-band .hp-carousel .add:hover{background:var(--hpgoldline);color:#15231c}
.hp-band .hp-carousel .ph{background:#24362b}

/* Paste-a-list CTA band */
.hp-paste{background:linear-gradient(135deg,#fff 0%,#fdf6ee 100%);border:1px solid var(--line);border-radius:22px;margin:48px 0 0;padding:0}
.hp-paste-in{text-align:center;max-width:520px;margin:0 auto;padding:44px 24px}
.hp-paste-in h2{font-size:25px;color:var(--hpink);margin-top:6px}
.hp-paste-in p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:14px 0 22px}
.hp-btn{border:0;border-radius:999px;padding:13px 26px;font-weight:800;font-size:15px;cursor:pointer}
.hp-btn.gold{background:var(--g);color:#fff;box-shadow:0 10px 22px -8px rgba(191,86,7,.45)}
.hp-btn.gold:hover{background:var(--g2)}

/* Store info strip */
.hp-info{margin-top:8px}
.hp-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;background:var(--hpcream);border:1px solid var(--line);border-radius:18px;padding:30px 26px}
.hp-info-grid h3{font-size:16px;color:var(--hpink);margin-bottom:8px}
.hp-info-grid p{margin:0;color:var(--muted);font-size:13.8px;line-height:1.6}
.hp-tel{display:inline-block;margin-top:8px;font-weight:800;color:var(--g2)}

/* Premium footer (this preview's own — the shared .site-footer below it is unchanged) */
.hp-footer{background:var(--hpink);color:#cfc8b7;margin:48px -14px -1px;padding:38px 14px}
.hp-footer-in{max-width:1200px;margin:0 auto;text-align:center}
.hp-footer-logo{height:30px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:14px}
.hp-footer-in p{margin:4px 0;font-size:13px}
.hp-footer-in a{color:#fff;font-weight:700}
.hp-footer-muted{color:#8d8874;font-size:12px}

@media (min-width:860px){
  .hp-hero{min-height:84vh}
  .hp-hero-in{padding:0 0 0 72px;max-width:640px}
  .hp-hero-in h1{font-size:54px}
  .hp-hero-in p{font-size:17px}
  .hp-section-h h2{font-size:30px}
  .hp-dept{width:168px;height:190px}
  .hp-carousel .card{flex-basis:208px;width:208px}
}
@media (min-width:1300px){
  .hp-hero-mosaic{display:block}
}
@media (max-width:389px){
  .hp-hero-in h1{font-size:32px}
}

body.home-preview .site-footer{display:none}

.hp-carousel .card{content-visibility:visible}

.search-typeahead{color:#1f2421}.search-typeahead a,.search-typeahead .sta-name,.search-typeahead strong,.search-typeahead b{color:#1f2421}


/* Round 34 (Moshe, voice note): priority badges + the lb|pcs toggle is unrelated to this file,
   but the colored badge on an order needs to read instantly across admin and /pick: Urgent red,
   Rush orange, Priority yellow, same three colors in both places. */
.priority-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle;letter-spacing:.2px}
.priority-pick{display:block;margin-bottom:6px;font-size:12.5px;padding:3px 6px;border-radius:6px}

/* Round 57: Users admin (logins + per-part permissions grid) */
.uadm-add label{display:block;font-weight:600;font-size:14px;margin:8px 0 0}
.uadm-add input{display:block;width:100%;margin-top:4px;font:inherit;font-size:16px;padding:10px 12px;border:1px solid #ddd;border-radius:10px;box-sizing:border-box}
.uadm-pwrow{display:flex;gap:8px;align-items:center}.uadm-pwrow input{flex:1;font-family:ui-monospace,Menlo,monospace}
.uadm-card{margin-top:12px}.uadm-card.off{opacity:.7}
.uadm-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.uadm-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.uadm-quick{display:flex;gap:8px;margin-bottom:6px}
.uadm-grid{width:100%;border-collapse:collapse;font-size:14px}
.uadm-grid th,.uadm-grid td{padding:7px 2px;border-bottom:1px solid #f0ebe4;text-align:center}
.uadm-grid thead th{font-size:12px;color:#6d6378;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.uadm-grid tbody th{text-align:left;font-weight:600;padding-right:6px;width:42%}
.uadm-grid input[type=checkbox]{width:22px;height:22px;accent-color:#6a1b9a;margin:0}
.uadm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.uadm-del{color:#a32020!important;border-color:#f3c6c6!important}
.uadm-flash{background:#eef8f0;border:1px solid #cfe9d5;color:#1f4f2d;border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:14.5px}

/* Round 63: the list-order picker reads like a dropdown -- one compact row per product (photo,
   name, size + price), grouped Best matches / All <category> / subtype, and one-tap size chips. */
#pasteSearchResults.pastematch-grid{grid-template-columns:1fr;gap:6px}
#pasteSearchResults .pastematch{flex-direction:row;align-items:center;gap:10px;padding:6px 8px;width:100%}
#pasteSearchResults .pastematch-img{width:48px;height:48px;flex:0 0 48px}
#pasteSearchResults .pastematch-info{flex:1;min-width:0}
#pasteSearchResults .pastematch-info .muted{font-weight:600;color:#3a5a2a}
#pasteSearchResults .pastematch-ask .pastematch-img{width:48px;height:48px;flex:0 0 48px}
/* Oct 18: the admin order-line Replace popup shows the review screen's cards, same row layout */
#rlResults.pastematch-grid{grid-template-columns:1fr;gap:6px}
#rlResults .pastematch{flex-direction:row;align-items:center;gap:10px;padding:6px 8px;width:100%}
#rlResults .pastematch-img{width:48px;height:48px;flex:0 0 48px}
#rlResults .pastematch-info{flex:1;min-width:0}
#rlResults .pastematch-info .muted{font-weight:600;color:#3a5a2a}
.pastematch-current{border-color:#3a5a2a;background:#f3f8ee}
.pastematch-now{font-size:11px;font-weight:700;color:#3a5a2a;text-transform:uppercase;letter-spacing:.03em}
.pickhead{grid-column:1/-1;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7a6a4a;margin:8px 0 0}
.pickhead.pickscope{text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:#444;margin-top:0}
.picksub{grid-column:1/-1;font-size:12px;font-weight:600;color:#666;margin:6px 0 0;padding-left:2px;border-left:3px solid var(--line)}
.linkbtn{background:none;border:none;padding:0;font:inherit;color:#1a5fb4;text-decoration:underline;cursor:pointer}
.pastetaprow{color:inherit;text-decoration:none;text-align:left}
.pastetaprow b{text-decoration:underline dotted}
.sizechips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.sizechips-t{font-size:11.5px;color:#666;margin-right:2px}
.sizechip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 10px;font:inherit;font-size:12.5px;line-height:1.2;cursor:pointer;color:inherit}
.sizechip:active{background:#f3ead6}
.sizechip.on{border-color:#1a7a3c;background:#e9f6ee;color:#14532d;font-weight:600} /* Round 64: the preselected pack choice */
.lsx-line{font-size:12.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
.lsx-line .lsx-s{color:#8a5a00}
.lsx-raw{white-space:pre-wrap;font-size:12px;background:#faf7f0;border-radius:8px;padding:8px;max-height:180px;overflow:auto}

/* Round 65: list review -- a line that still needs a check keeps its place in the matched list */
.paste-stub{display:block;width:100%;text-align:left;background:#fff8e8;border:1px dashed #e0b25a;color:#7a4b00;border-radius:10px;padding:8px 10px;margin:6px 0;font:inherit;font-size:13px;cursor:pointer}
.paste-skipped{margin-top:14px;padding:10px;border-radius:10px;background:#f7f5f0}
.paste-skipped .chip{margin:3px 4px 3px 0}
.pastrow.flash{box-shadow:0 0 0 3px #e0b25a;transition:box-shadow .2s}
.pack-pop-wrap{position:fixed;inset:0;z-index:1200;background:rgba(20,16,10,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
@media (min-width:640px){.pack-pop-wrap{align-items:center}}
.pack-pop{background:#fff;border-radius:18px;padding:18px 18px 12px;width:100%;max-width:420px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.pack-pop h3{font-family:'Playfair Display',Georgia,serif;font-size:22px;margin:12px 0 14px}
.pack-pop-line{font-size:13px}
.pack-pop-prod{display:flex;gap:12px;align-items:center;margin-top:10px}
.pack-pop-img{width:64px;height:64px;flex:0 0 64px;border-radius:10px;overflow:hidden;background:#f7f5f0}
.pack-pop-img .pimg,.pack-pop-img img{width:100%;height:100%;object-fit:contain}
.pack-pop-btns{display:flex;gap:10px}
.pack-pop-btns .btn{flex:1 1 0;min-height:52px;font-size:16px}
.pack-pop-later{display:block;margin:12px auto 0;font-size:13px}
.pack-usual{font-size:12.5px;color:#6b5a3a;margin-top:2px}
.btn.is-blocked{background:#e9e4da;color:#6b5a3a;border-color:#e0d8c8;box-shadow:none;cursor:pointer}
.gate-pop h3{margin-top:4px}
.gate-list{margin:0 0 10px;padding-left:18px;max-height:40vh;overflow:auto;font-size:14px}
.gate-list li{margin:3px 0}
.gate-warn{font-weight:600;color:#8a2b2b;margin:6px 0 14px}
.paste-open-note{flex-basis:100%;font-size:12.5px;color:#8a5a00;text-align:center}

/* ===== R65b: customer home page redesign (Moshe 3:41am, "a nice high class front") =====
   Survey rules: search first and full width under the logo (48px, sticky), four shortcut tiles,
   a compact hero, photo department tiles, curated rows with photos on white, a phone tab bar. */
.search{height:48px;box-sizing:border-box;border-radius:14px;background:#f8f4ef;border:1.5px solid #e9dccb;align-items:center;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(191,86,7,.14);background:#fff}
.search input{font-size:16px;padding:0 14px;height:100%;color:var(--ink)}
.search input::placeholder{color:#8d7d6d}
.search button[aria-label="Search"]{align-self:stretch;margin:5px;border-radius:10px;width:40px;padding:0;font-size:16px;flex:0 0 auto}
@media (max-width:760px){
  .collapsible-strip .topbar{display:none}
  .collapsible-strip{max-height:40px}
  .header-in{flex-wrap:wrap;row-gap:8px;padding:8px 14px 10px}
  .header-in .logo{order:1}
  .header-in .header-actions{order:2;margin-left:auto}
  .header-in .search{order:3;flex:1 1 100%;width:100%}
  .header-in.search-active{row-gap:0}
  .logo-img{height:56px;max-width:46vw;margin:-9px 0 -9px -8px}
  body.is-home .deptnav{display:none}
}
body.is-home,body.is-depts{background:#fff}
.pk-home{padding:4px 0 28px}
.pk-home h1,.pk-home h2{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.005em;color:#2b1a0c}
/* shortcut tiles */
.pkh-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 4px}
.pkh-sc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 4px 10px;border:1px solid #efe4d6;border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .15s}
.pkh-sc:hover{box-shadow:0 6px 18px rgba(80,40,10,.08)}
.pkh-sc:active{transform:scale(.97)}
.pkh-sc-ico{width:46px;height:46px;border-radius:50%;background:#fbefe2;color:var(--g);display:grid;place-items:center}
.pkh-sc-ico svg,.pk-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pkh-sc-main .pkh-sc-ico{background:var(--g);color:#fff}
.pkh-sc b{font-size:12.5px;line-height:1.2;font-weight:700}
.pkh-sc small{font-size:11.5px;color:var(--muted);line-height:1.2}
@media (max-width:760px){.pkh-sc small{display:none}.pkh-sc{padding:10px 2px 9px;border-radius:14px}.pkh-sc b{font-size:12px}}
/* compact hero */
.pkh-hero{position:relative;display:flex;align-items:center;gap:8px;margin:14px 0 4px;padding:18px 18px 18px 20px;border-radius:18px;background:linear-gradient(115deg,#fbf4ea 0%,#f5e6d2 100%);overflow:hidden}
.pkh-hero-in{position:relative;z-index:1;flex:1 1 auto;min-width:0}
.pkh-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
.pkh-hero h1{font-size:23px;line-height:1.15;margin:6px 0 6px}
.pkh-hero p{margin:0 0 12px;font-size:13px;color:#6f5d4b;max-width:34em}
.pkh-btn{display:inline-flex;align-items:center;gap:6px;background:var(--g);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px}
.pkh-btn:hover{background:var(--g2)}
.pkh-hero-img{flex:0 0 auto;width:116px;height:auto;mix-blend-mode:multiply;margin-right:-6px}
.pkh-hero-photo{flex:0 0 auto;width:118px;height:118px;object-fit:cover;border-radius:14px}
@media (min-width:761px){.pkh-hero-photo{width:220px;height:150px}}
.pkh-hero .hero-dismiss{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.75);color:#6f5d4b;font-size:13px;cursor:pointer}
@media (max-width:400px){.pkh-hero p{display:none}.pkh-hero h1{font-size:21px}.pkh-hero-img{width:104px}}
/* sections + rows */
.pkh-section{margin:22px 0 4px}
.pkh-h{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;margin:0 0 10px}
.pkh-h h2{font-size:21px;margin:0;flex:1 1 auto}
.pkh-kicker{flex:1 0 100%;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:2px}
.pkh-seeall{font-size:13.5px;font-weight:700;color:var(--g);text-decoration:none;white-space:nowrap}
.pkh-row{gap:10px;padding:2px 2px 10px;scrollbar-width:none}
.pkh-row::-webkit-scrollbar{display:none}
.pk-home .pkh-row .card{flex:0 0 152px;width:152px;border:1px solid #efe6da;border-radius:14px;padding:8px;box-shadow:none}
.pk-home .card .pimg{background:#fff;border-radius:10px}
.pk-home .card .pimg img{object-fit:contain;padding:6px;box-sizing:border-box}
.pk-home .card .price{font-size:16px}
.pk-home .card .pname{font-size:13.5px}
.pk-home .card .add{background:var(--g);color:#fff;border-color:var(--g);width:100%;padding:9px}
.pk-home .card .add:hover{background:var(--g2)}
@media (min-width:761px){.pk-home .pkh-row .card{flex-basis:188px;width:188px}}
/* department tiles with real photos */
.pkh-depts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pkh-dept{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--ink);text-align:center}
.pkh-dept-pic{width:100%;aspect-ratio:1;border-radius:16px;background:#f7f1e9;display:grid;place-items:center;overflow:hidden;transition:transform .15s}
.pkh-dept:hover .pkh-dept-pic{transform:translateY(-2px)}
.pkh-dept-pic img{width:74%;height:74%;object-fit:contain;mix-blend-mode:multiply}
.pkh-dept-emo{font-size:40px}
.pkh-dept b{font-size:12.5px;font-weight:700;line-height:1.2}
@media (min-width:761px){
  .logo-img{height:66px;margin:-12px 0 -12px -8px}
  .pkh-hero{min-height:0}
  .pkh-shortcuts{gap:14px;margin-top:20px}.pkh-sc{flex-direction:row;text-align:left;padding:14px 16px;gap:12px}.pkh-sc b{font-size:15px}.pkh-sc>b,.pkh-sc>small{display:block}
  .pkh-sc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}.pkh-sc-ico{grid-row:1/3}.pkh-sc b{align-self:end}.pkh-sc small{align-self:start}
  .pkh-hero{padding:24px 36px;margin-top:20px}.pkh-hero h1{font-size:34px}.pkh-hero p{font-size:15px}.pkh-hero-img{width:180px;margin-right:10px}
  .pkh-h h2{font-size:26px}
  .pkh-depts{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .pkh-dept-pic{aspect-ratio:16/11}
  .pkh-dept b{font-size:14px}
}
@media (min-width:1100px){.pkh-depts-all{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* phone bottom tab bar */
.pk-tabbar{display:none}
@media (max-width:760px){
  body.has-tabbar .pk-tabbar:not([hidden]){display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);border-top:1px solid #eadfce;padding:6px 4px calc(6px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  body.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.has-tabbar .pk-pen-btn{bottom:84px}
  body.has-tabbar .toast{bottom:84px}
}
.pk-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;color:#86776a;text-decoration:none;font-size:10.5px;font-weight:600;padding:2px 0;-webkit-tap-highlight-color:transparent}
.pk-tab.on{color:var(--g)}
.pk-tab-badge{position:absolute;top:-2px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--g);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;box-sizing:border-box}
.pk-tab-badge[hidden]{display:none}

/* ---------- Round 66: order editing after checkout + phone orders ---------- */
.ol-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;border-radius:6px;padding:2px 7px;vertical-align:1px;white-space:nowrap}
.ol-new{background:#1565c0;color:#fff}
.ol-cancel{background:#757575;color:#fff}
.ol-walkin{background:#b26a00;color:#fff}
.ol-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.ol-row:last-of-type{border-bottom:0}
.ol-acts{display:flex;gap:4px;flex-shrink:0}
.ol-x{min-width:40px}
.ol-added{background:#eef4fc}
.ol-canceled,tr.ol-canceled td{color:#8a8a8a;opacity:.75}
.ol-row.ol-canceled span:first-child{text-decoration:line-through}
tr.ol-canceled td:nth-child(2){text-decoration:line-through}
tr.ol-added td{background:#eef4fc}
.ol-editbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:12.5px}
.ol-locked{font-size:12.5px;margin-top:6px}
.ol-history{margin-top:8px;font-size:12px;color:#555;background:#faf8f3;border-radius:8px;padding:6px 8px}
.ol-history b{display:block;margin-bottom:2px}
.r66-add .noResult{width:100%}
.oa-pend{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.oa-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;font-size:14px}
.oa-row .qtybox{display:flex;align-items:center;gap:8px}
.oa-row .qtybox button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px}
.phone-pop .pc-label,.pc-cardtop .pc-label{display:block;font-weight:700;font-size:13px;margin:8px 0 4px}
.phone-pop #pcQ{width:100%;min-height:52px;font-size:20px;border-radius:12px}
.pc-results{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.pc-cust{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;min-height:52px}
.pc-cust span{color:#666;font-size:13.5px}
.pc-new{margin-top:10px;background:#f4f9f4;border:1px solid #cfe5cf;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pc-new input{min-height:46px;font-size:16px}
.pc-skipnote{font-size:12.5px;margin:8px 2px 0}
.pc-draft-card{background:#faf8f3;border-radius:12px;padding:12px;font-size:15px}
.pc-draftbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff7e8}
.ph-order{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.ph-order:last-child{border-bottom:0}
.pc-cardtop input{width:100%;min-height:46px;font-size:16px}
.pc-usual{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px}
.pc-usual .pimg{width:40px;height:40px;flex:0 0 40px}
.pc-learn{font-size:13.5px;padding:3px 0}
.pc-checkout input{width:100%}
.pc-warn{background:#fff3e0;border-left:4px solid #b26a00}
.pc-missing{color:#b3261e;font-weight:700;font-size:13px;margin-top:8px}
.btn.is-blocked{background:#bdbdbd!important;border-color:#bdbdbd!important;color:#333!important}
#actingAsBanner.aab-walkin{background:#b26a00}
.bf-row{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:14px}
.bf-row.done{opacity:.7}
.bf-usual{margin-top:4px}
.bf-btns{display:flex;gap:8px;margin-top:8px}
.bf-btns .btn{flex:1 1 0;min-height:46px}
.bf-done{margin-top:6px;color:#1f7a3a;font-weight:700}
.pickline.cat-canceled{opacity:.6;background:#f1f1f1}
.pickline.cat-canceled .pickline-info{text-decoration:none}

/* Oct 17: tap-to-enlarge product photos */
.pimg img, img[data-zoom] { cursor: zoom-in; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb-wrap { position: fixed; inset: 0; z-index: 10050; background: rgba(12,16,14,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: lbIn .16s ease-out; }
.lb-stage { width: 100vw; height: 82vh; display: flex; align-items: center; justify-content: center; overflow: auto; touch-action: pinch-zoom pan-x pan-y; }
.lb-img { max-width: 96vw; max-height: 80vh; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.45); touch-action: pinch-zoom; }
.lb-x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 44px; cursor: pointer; }
.lb-x:focus-visible { outline: 2px solid #fff; }
.lb-cap { color: #f2f2ee; font-size: 15px; margin-top: 12px; padding: 0 18px; text-align: center; max-width: 92vw; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

/* Oct 18: List | By category view (paste review + cart) */
.lv-bar{display:flex;justify-content:flex-end;margin:6px 0 8px}
.lv-toggle{display:inline-flex;background:#f1eee7;border-radius:999px;padding:3px;gap:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.lv-toggle button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:#5b5a55;padding:7px 14px;border-radius:999px;cursor:pointer;min-height:34px}
.lv-toggle button.on{background:#fff;color:var(--g,#123d2b);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.cv-wrap{position:relative;padding-right:40px}
.cv-sec{margin:0 0 10px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05);scroll-margin-top:8px}
.cv-head{display:flex;align-items:center;gap:8px;width:100%;border:0;cursor:pointer;text-align:left;font:inherit;padding:9px 12px;background:#f6f3ec;background:color-mix(in srgb,var(--cvc) 13%,#fff);border-left:4px solid var(--cvc);color:#2b2a27}
.cv-ico{font-size:17px;line-height:1}
.cv-name{flex:1;font-weight:800;font-size:14px;letter-spacing:.2px}
.cv-count{font-size:12px;font-weight:700;color:#fff;background:var(--cvc);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.cv-chev{font-size:13px;color:#6b6a63;transition:transform .18s}
.cv-sec.shut .cv-chev{transform:rotate(-90deg)}
.cv-sec.shut .cv-rows{display:none}
.cv-row{padding:8px 10px;border-top:1px solid var(--line,#ece8df)}
.cv-row:first-child{border-top:0}
.cv-line{display:flex;align-items:center;gap:8px}
.cv-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:9px;overflow:hidden;background:#f6f4ef;display:block;position:relative}
.cv-thumb .pimg{width:44px;height:44px;aspect-ratio:auto;margin:0;border-radius:9px}
.cv-thumb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.cv-thumb .pickimg-ph,.cv-thumb .ph{font-size:18px;display:grid;place-items:center;width:100%;height:100%}
.cv-thumb .ph b,.cv-thumb .ph small{display:none}
.cv-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cv-main b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cv-main small{font-size:11.5px;color:#7a786f;margin-top:2px}
.cv-usual{font-size:10.5px;color:#1a7a3c;font-weight:700}
.cv-note{flex:0 0 32px;width:32px;height:32px;border:0;background:transparent;color:#b9b5aa;border-radius:8px;display:grid;place-items:center;cursor:pointer;padding:0}
.cv-note.on{color:#bf5607}
.cv-qty{width:46px!important;padding:6px 4px!important;text-align:center;border:1.5px solid var(--line,#e3ded3);border-radius:8px;font-size:14px}
.cv-ic{min-width:32px;padding:4px 8px!important}
.cartline.cv-row{display:block;grid-template-columns:none;padding:8px 10px;border-bottom:0}
.cartline.cv-row .pimg{width:44px}
.cv-sub{display:flex;align-items:center;gap:8px;margin:6px 0 0 52px}
.cv-sub .mini-step{display:inline-flex}
.cv-total{margin-left:auto;font-size:14px}
.cv-cart .cv-thumb .pimg .ph{padding:0}
.cv-extra{margin:6px 0 0 52px;font-size:12.5px}
.cv-more{margin:4px 0 0 52px;font-size:12.5px}
.cv-more summary{cursor:pointer;color:#7a786f;font-weight:600;list-style:none;padding:2px 0}
.cv-more summary::-webkit-details-marker{display:none}
.cv-more[open] summary{margin-bottom:4px}
.cv-jump{position:fixed;right:6px;bottom:96px;z-index:55;display:flex;flex-direction:column;gap:5px;padding:6px 4px;background:rgba(255,255,255,.92);border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.16);max-height:58vh;overflow-y:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cv-jump button{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;background:#f6f3ec;background:color-mix(in srgb,var(--cvc) 16%,#fff);box-shadow:inset 0 0 0 1.5px var(--cvc)}
.cv-wrap[data-cvscope=paste] .cv-jump{bottom:168px}
.cv-wrap[data-cvscope=paste] .cv-sec{scroll-margin-top:72px}

/* tall/wide photos (aspect beyond 1.35:1) show whole instead of cropped (Moshe Oct 17: Gefen vinegar) */
.pimg img.fit,.cv-thumb img.fit{object-fit:contain!important;background:#fff}
/* Oct 18: admin order lines -- photo (catalog fallback / category tile, tap to enlarge), CHECK, not-found + call */
.ol-line{display:flex;align-items:center;gap:8px}
.ol-photo{width:40px;height:40px;flex:none;border-radius:6px;overflow:hidden;background:#fff;display:block}
.ol-photo .pimg{width:40px;height:40px;aspect-ratio:auto}
.ol-photo .pimg img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.ol-photo .ph b{font-size:8px;line-height:1}.ol-photo .ph small{display:none}.ol-photo .ph .emo{font-size:16px}
.ol-photo-nf{display:flex;align-items:center;justify-content:center;background:#fdecea;color:#b3261e;font-weight:800}
.ol-check{background:#fff3cd;color:#7a5a00}
.ol-nf{color:#b3261e}
tr.ol-notfound td{background:#fdecea}
.ol-callbar{margin-top:4px;padding:4px 8px;border-radius:8px;background:#fdecea;color:#b3261e;font-weight:700;font-size:13px}
.ol-callbar a,.tel-link{color:inherit;font-weight:700;text-decoration:underline}
.ol-was{font-size:11.5px}

/* Oct 18 (Moshe 3:16 AM ET, Android phone: "it still goes out from the order when modifying"):
   an open order's lines were ~470px wide in a 336px card, which made the whole admin page wider than
   the phone; Android Chrome then sized every popup to that wider page, so Replace / qty / + Add jumped
   the screen and put Save below the bottom edge. On a phone each line is now a 2-row grid that fits:
   qty | name | price, then the Replace / cancel buttons under the name. */
@media (max-width:640px){
  .order details{max-width:100%;overflow-x:auto}
  .order details>table,.order details>table>tbody{display:block;width:100%}
  .order tr[data-ol]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"q n p" "q a a";column-gap:8px;row-gap:2px;padding:6px 0;border-bottom:1px solid #f0ede6;align-items:start}
  .order tr[data-ol]>td{border-bottom:0;padding:2px 0;min-width:0}
  .order tr[data-ol]>td:nth-child(1){grid-area:q}
  .order tr[data-ol]>td:nth-child(2){grid-area:n;overflow-wrap:anywhere}
  .order tr[data-ol]>td:nth-child(3){grid-area:p}
  .order tr[data-ol]>td:nth-child(4){grid-area:a;text-align:right;white-space:normal!important}
  .order .ol-qtybtn{white-space:normal!important;max-width:96px;text-align:left;line-height:1.25}
  .order .ol-line{min-width:0}
}

/* Oct 18: admin order line "+ Add covers" / "Covers ✓" (covers.js) */
.order .ol-addcov{color:#1565c0;border-color:#b9cde6}
.order .ol-covok{display:inline-block;font-size:12px;font-weight:700;color:#2e7d32;background:#e8f5e9;border-radius:8px;padding:5px 8px;margin-left:4px;white-space:nowrap}

/* Oct 18: voice orders part 2 -- drop a voice note on Orders, shared files */
.ord-voice-drop{margin:10px 0 4px;padding:10px 12px;border:2px dashed #e0cdb8;border-radius:12px;background:#fffaf4;font-size:13.5px;color:#5c4a3a;line-height:1.45}
.ord-voice-pick{color:#bf5607;font-weight:600;text-decoration:underline;cursor:pointer}
body.ord-dragging .ord-voice-drop{border-color:#bf5607;background:#fff1e3;color:#bf5607}
body.ord-dragging #app{outline:3px dashed #bf5607;outline-offset:4px;border-radius:12px}
.share-panel .share-img{display:block;max-width:100%;max-height:360px;margin:10px 0;border-radius:10px;border:1px solid #eee;object-fit:contain}

/* Oct 18 desktop apps (PK Admin on a regular computer): on a wide monitor the admin pages use more
   of the width (order tables, product lists). Store pages keep their 1200px column. */
@media (min-width: 1600px) {
  body:has(.admin-head) .wrap { max-width: 1560px; }
}

/* Oct 18 (card payment at checkout): checkout payment choice + admin payment pills */
.paych{border:1.5px solid var(--line,#e6dccf);border-radius:12px;padding:8px 12px 10px;margin:4px 0 10px}
.paych legend{font-weight:700;padding:0 4px}
.paych-opt{display:flex!important;gap:10px;align-items:flex-start;padding:8px 2px;cursor:pointer;font-weight:400!important}
.paych-opt input{width:auto!important;margin-top:4px;flex:0 0 auto}
.paych-opt small{display:block;color:#6b6259;font-size:12.5px;line-height:1.35;margin-top:2px}
.paych-opt.is-off{opacity:.6;cursor:default}
.paych-test{background:#fff3cd;color:#7a4b00;border:1px solid #c77700;border-radius:6px;font-size:11px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.paych-note{margin:6px 0 0;font-size:13px;color:#2e7d32;font-weight:600}
.paypill{display:inline-block;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;margin:3px 0;white-space:nowrap}
.paypill-sm{font-size:11px;padding:1px 7px;vertical-align:1px}
.paywarn{color:#b3261e;font-size:12.5px;font-weight:600;margin:3px 0}
.payrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 2px}
.payrow select{width:auto;font-size:13px;padding:5px 8px}
.paystatusbox{background:#f5f1ec;border-radius:10px;padding:8px 10px;font-size:13px;margin-top:8px}
.price-free{color:#d8620a;font-weight:800}.price-free small{font-weight:600;color:#6b6259}
.free-only-note{background:#fff3e6;border:1px solid #f0b37a;color:#8a3d00;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600;margin:6px 0 8px}

/* Oct 18 (office roles): the office phone-order screen (/office-phone) -- order entry only, no store chrome. */
.pk-office-phone #adminLink, .pk-office-phone #acctMenu, .pk-office-phone #greetStrip, .pk-office-phone .site-footer .muted { display: none !important; }
.ofr-head h1 { font-size: 24px; }
.ofr-pill { background: #f3e9f7; color: #6a1b9a; font-weight: 700; align-self: center; }
.ofr-paylink { border: 2px solid #2e7d32; background: #f1f8f2; }
.ofr-paylink-row { display: flex; gap: 8px; margin-top: 8px; }
.ofr-paylink-row input { flex: 1; min-width: 0; min-height: 40px; font-size: 13px; }
.ofr-order { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ofr-paynote { margin-top: 10px; font-size: 14px; }

/* Oct 24 (Moshe 5:25 PM PT): Item check, phone-first look (tabs as 4x2 tiles, progress card, status tiles, cleaner cards) */
.icx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.icx-tabs .icx-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:60px;padding:8px 2px 7px;margin:0;border-radius:14px;border:1.5px solid var(--pk-line,#E6E1D6);background:var(--pk-surface,#fff);color:var(--pk-ink,#1B221E);cursor:pointer;font:inherit;box-shadow:0 1px 2px rgba(27,34,30,.06);-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.icx-tabs .icx-tab .icx-ico{font-size:21px;line-height:1}
.icx-tabs .icx-tab .icx-lbl{font-size:12.5px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:-.1px}
.icx-tabs .icx-tab.on{background:var(--pk-primary,#1F3A2E);border-color:var(--pk-primary,#1F3A2E);color:var(--pk-onp,#F5F2EB);box-shadow:0 2px 6px rgba(31,58,46,.25)}
.icx-tabs .icx-tab:active{transform:scale(.97)}
.icx-sum{background:var(--pk-surface,#fff);border:1px solid var(--pk-line,#E6E1D6);border-radius:16px;padding:14px 14px 12px;margin:0 0 12px;box-shadow:0 1px 2px rgba(27,34,30,.05)}
.icx-sum-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.icx-sum-top h3{margin:0;font-size:19px}
.icx-redbadge{display:inline-block;background:var(--pk-new-solid,#A4473A);color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;white-space:nowrap}
.icx-okbadge{display:inline-block;background:var(--pk-ok-bg,#E3ECE3);color:var(--pk-ok-fg,#2F6045);font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;white-space:nowrap}
.icx-prog{height:10px;border-radius:999px;background:var(--pk-tint,#E8EEE7);overflow:hidden;margin:12px 0 6px}
.icx-prog i{display:block;height:100%;border-radius:999px;background:var(--pk-ok-solid,#2F6045)}
.icx-sum-line{font-size:14.5px;color:var(--pk-ink,#1B221E)}
.icx-sum-line .icx-pct{float:right;font-weight:800;color:var(--pk-ok-fg,#2F6045)}
.icx-note{margin:8px 0 0;font-size:13px;line-height:1.35;color:var(--pk-muted,#7A7F77)}
.icx-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 12px}
.icx-filters .icx-filter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:52px;padding:6px 4px;margin:0;border-radius:12px;border:1.5px solid var(--pk-line,#E6E1D6);background:var(--pk-surface,#fff);color:var(--pk-ink,#1B221E);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.icx-filters .icx-filter b{font-size:17px;line-height:1.1;font-weight:800}
.icx-filters .icx-filter span{font-size:12px;line-height:1.15;font-weight:600;color:var(--pk-muted,#7A7F77);text-align:center;overflow-wrap:normal;word-break:normal}
.icx-filters .icx-filter[data-pc-tab="flagged"] b{color:var(--pk-new-solid,#A4473A)}
.icx-filters .icx-filter.on{background:var(--pk-primary,#1F3A2E);border-color:var(--pk-primary,#1F3A2E);color:var(--pk-onp,#F5F2EB)}
.icx-filters .icx-filter.on span,.icx-filters .icx-filter.on b{color:var(--pk-onp,#F5F2EB)}
.icx-search{border-radius:12px!important;border-color:var(--pk-line,#E6E1D6)!important;background:var(--pk-surface,#fff)}
.icx-card{border:1px solid var(--pk-line,#E6E1D6);border-radius:16px;padding:12px;margin:10px 0;background:var(--pk-surface,#fff);box-shadow:0 1px 3px rgba(27,34,30,.06)}
.icx-card .icx-top{display:flex;gap:12px;align-items:flex-start}
.icx-card .icx-img{width:68px;height:68px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--pk-bg,#F5F2EB);display:flex;align-items:center;justify-content:center}
.icx-card .icx-img img{width:100%;height:100%;object-fit:contain}
.icx-card .icx-info{flex:1;min-width:0}
.icx-card .icx-name{font-weight:800;font-size:15.5px;line-height:1.25;overflow-wrap:break-word}
.icx-card .icx-id{font-size:11.5px;color:var(--pk-faint,#A9ACA4);margin-top:1px;overflow-wrap:anywhere}
.icx-card .icx-online{font-size:13px;line-height:1.3;margin-top:4px;overflow-wrap:break-word}
.icx-card .icx-upc{font-size:12.5px;margin-top:3px;color:var(--pk-muted,#7A7F77);overflow-wrap:anywhere}
.icx-tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px;white-space:nowrap;vertical-align:1px}
.icx-tag.good{background:#e8f5e9;color:#1b5e20}
.icx-tag.warn{background:#fff3e0;color:#e65100}
.icx-card .icx-prices{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.icx-card .icx-pbox{flex:1;min-width:0;background:var(--pk-bg,#F5F2EB);border-radius:12px;padding:7px 10px}
.icx-card .icx-pbox.ours{background:var(--pk-tint,#E8EEE7)}
.icx-card .icx-pbox small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--pk-muted,#7A7F77);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icx-card .icx-pbox b{display:block;font-size:19px;line-height:1.2}
.icx-card .icx-pbox em{display:block;font-style:normal;font-size:12px;color:var(--pk-muted,#7A7F77);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icx-card .icx-diff{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:62px;padding:0 6px;border-radius:12px;font-weight:900;font-size:17px;background:#fdecea}
.icx-card .icx-diff.down{background:#e8f5e9}
.icx-card .icx-small{font-size:12.5px;margin-top:6px}
.icx-card .icx-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.icx-card .icx-acts .icx-act{margin:0;width:100%;min-width:0;min-height:44px;padding:6px 4px;font-size:13px;line-height:1.2;white-space:normal;overflow-wrap:normal;word-break:normal;border-radius:10px}
.icx-card .icx-reasonwrap{margin-top:6px}
.icx-card .icx-reasonbtn{margin:0;width:100%;min-height:38px;border-radius:10px;font-size:13px}
.icx-card .icx-acts .icx-act.gold{background:var(--pk-accent,#A8844A)!important;border-color:var(--pk-accent,#A8844A)!important;color:#fff!important}
/* Oct 26 (Moshe 10:08 AM PT): the cart stepper's number is a typeable box (number keypad), no spinner arrows */
.mini-step .ms-qbox{display:inline-flex;align-items:baseline;justify-content:center;gap:2px;min-width:44px}
.mini-step .ms-qin{width:44px;border:0;border-radius:6px;background:transparent;text-align:center;font-weight:800;font-size:15px;color:inherit;padding:4px 0;-moz-appearance:textfield;font-family:inherit}
.mini-step .ms-qin::-webkit-outer-spin-button,.mini-step .ms-qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mini-step .ms-qin:focus{outline:2px solid #EF7100;background:#fff;color:#2b2b2b}
.mini-step .ms-qu{font-size:11px;color:var(--muted,#777);font-weight:600}
.mini-step button{touch-action:manipulation}