/* Customer online store — fresh "grocery" theme (green + white), a SEPARATE
   look from the red+white portal. Grid product cards, rounded friendly sans,
   soft shadows. All tokens scoped to .shop-body so nothing leaks to the portal. */
body.shop-body{
  --g-primary:  #2E7D32;   /* deep grocery green — buttons, headings */
  --g-primary-d:#215B25;
  --g-accent:   #43A047;   /* brighter green */
  --g-soft:     #E8F5E9;   /* light green chip / badge background */
  --g-bg:       #F4F7F4;   /* page background */
  --g-card:     #FFFFFF;
  --g-ink:      #1E2B24;
  --g-muted:    #83908A;
  --g-line:     #E7ECE8;
  --g-amber:    #F6A609;   /* deals / ratings */
  --g-amber-s:  #FFF6E2;
  --g-strike:   #AEB7B1;

  /* older inline refs in a couple views map onto the grocery palette */
  --lx-line:var(--g-line); --lx-off:var(--g-ink); --lx-muted:var(--g-muted);
  --lx-surface:var(--g-card); --lx-surface2:var(--g-soft);
  --lx-red:var(--g-primary); --lx-red-bright:#E53935; --lx-gold:var(--g-amber);
  --sm-accent:var(--g-primary); --sm-ink:var(--g-ink); --sm-paper:var(--g-card);
  --sm-paper2:var(--g-soft); --sm-line:var(--g-line); --sm-muted:var(--g-muted);

  margin:0; background:var(--g-bg); color:var(--g-ink);
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  padding-bottom:78px; min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ── Top bar: brand left, cart right; green search row underneath */
.shop-topbar{
  background:var(--g-card); border-bottom:1px solid var(--g-line);
  position:sticky; top:0; z-index:10; padding:12px 16px 12px;
}
.shop-topbar .row1{ display:flex; align-items:center; justify-content:space-between; }
.shop-topbar .brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:19px; color:var(--g-ink); }
.shop-topbar .brand .logo{
  width:30px; height:30px; border-radius:9px; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.shop-topbar .brand b{ color:var(--g-primary); }
.shop-topbar .icons{ display:flex; align-items:center; gap:16px; }
.shop-avatar{ background:none; border:none; color:var(--g-ink); font-size:20px; padding:0; cursor:pointer; }
.shop-bag{ position:relative; color:var(--g-ink); font-size:21px; text-decoration:none; }
.shop-bag .count{
  position:absolute; top:-7px; right:-9px; background:var(--g-primary); color:#fff;
  font-size:10px; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.shop-search{ display:flex; gap:8px; margin-top:12px; }
.shop-search input{
  flex:1; border:1px solid var(--g-line); background:var(--g-bg); border-radius:12px;
  padding:11px 15px; font-size:14px; color:var(--g-ink); font-family:inherit;
}
.shop-search input::placeholder{ color:var(--g-muted); }
.shop-search button{ border:none; background:var(--g-primary); color:#fff; border-radius:12px; width:46px; font-size:16px; }

.shop-container{ max-width:560px; margin:0 auto; padding:16px; }

/* Labels / titles */
.shop-cap{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--g-muted); font-weight:600; }
.shop-muted{ color:var(--g-muted); }
.shop-green{ color:var(--g-primary); }
.shop-gold{ color:var(--g-amber); }
.sm-title{ font-weight:700; font-size:22px; color:var(--g-ink); margin:0; }
.sec-head{ display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px; }
.sec-head h2{ font-size:17px; font-weight:700; margin:0; color:var(--g-ink); }
.sec-head a{ font-size:12px; color:var(--g-primary); text-decoration:none; font-weight:600; }

/* Hero banner */
.shop-hero{
  background:linear-gradient(135deg,var(--g-primary),var(--g-accent)); color:#fff;
  border-radius:18px; padding:24px 22px; position:relative; overflow:hidden;
}
.shop-hero .eyebrow{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.9; font-weight:600; }
.shop-hero h1{ font-size:26px; font-weight:700; line-height:1.15; margin:8px 0 16px; }
.shop-hero h1 span{ color:#DCF3DC; }
.shop-hero .cta{
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--g-primary);
  border:none; border-radius:30px; padding:11px 22px; font-weight:700; font-size:14px; text-decoration:none;
}

/* Cards / panels */
.shop-card{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:16px; margin-bottom:12px; }
.shop-redbox{ background:var(--g-soft); border:1px solid #D7ECD8; border-radius:14px; padding:18px; color:var(--g-ink); }
.info-tile{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:16px; }

/* Buttons */
.btn-shop-primary{
  background:var(--g-primary); color:#fff; border:none; border-radius:12px; padding:14px;
  font-weight:700; width:100%; font-size:14px; font-family:inherit;
}
.btn-shop-primary:hover{ background:var(--g-primary-d); color:#fff; }
.btn-shop-dark{
  background:var(--g-card); color:var(--g-primary); border:1.5px solid var(--g-primary); border-radius:12px;
  padding:12px; font-weight:700; width:100%; font-size:13px; font-family:inherit;
}
.btn-shop-dark:hover{ background:var(--g-soft); color:var(--g-primary); }

/* Category pills (home) */
.cat-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.cat-pill{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; width:72px;
}
.cat-pill .ic{ width:60px; height:60px; border-radius:18px; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; font-size:26px; }
.cat-pill span{ font-size:11px; color:var(--g-ink); text-align:center; font-weight:500; }

/* ── PRODUCT GRID (the requested grid view) */
.pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pcard{ background:var(--g-card); border:1px solid var(--g-line); border-radius:16px; padding:10px; position:relative; display:flex; flex-direction:column; }
.pcard .imgwrap{
  position:relative; border-radius:12px; overflow:hidden; background:var(--g-soft);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.pcard .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.pcard .imgwrap .ph{ color:var(--g-accent); font-size:40px; }
.pcard .badge-memb{
  position:absolute; top:8px; left:8px; background:var(--g-soft); color:var(--g-primary);
  font-size:9px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:20px; text-transform:uppercase;
}
.pcard .oos{ position:absolute; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#B0453E; letter-spacing:.05em; text-transform:uppercase; }
.pcard .unit{ font-size:11px; color:var(--g-muted); }
.pcard .nm{ font-size:13.5px; font-weight:600; color:var(--g-ink); line-height:1.25; margin:2px 0 8px; min-height:34px; }
.pcard .prow2{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.pcard .price{ font-size:15px; font-weight:700; color:var(--g-ink); }
.pcard .was{ font-size:11px; color:var(--g-strike); text-decoration:line-through; margin-left:5px; }
.pcard .add{
  width:36px; height:36px; border-radius:11px; background:var(--g-soft); color:var(--g-primary); border:none;
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.pcard .add:hover{ background:var(--g-primary); color:#fff; }
.qtystep{ display:flex; align-items:center; gap:0; border:1px solid var(--g-primary); border-radius:11px; overflow:hidden; }
.qtystep button{ width:30px; height:34px; background:var(--g-soft); border:none; color:var(--g-primary); font-size:16px; }
.qtystep b{ min-width:26px; text-align:center; font-weight:600; font-size:13px; color:var(--g-ink); }

/* AOP-style / provenance & status pills */
.sm-tag{ background:var(--g-soft); color:var(--g-primary); font-size:9px; letter-spacing:.06em; padding:3px 8px; border-radius:20px; text-transform:uppercase; font-weight:700; }
.sm-status{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; background:var(--g-soft); color:var(--g-primary); padding:4px 10px; border-radius:20px; font-weight:700; }

/* Branch picker */
.branch-row{
  display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--g-line); border-radius:14px;
  margin-bottom:12px; background:var(--g-card); cursor:pointer; text-decoration:none; color:inherit;
}
.branch-row:hover{ border-color:var(--g-primary); color:inherit; }
.branch-row .ic{ width:44px; height:44px; border-radius:12px; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }
.branch-row .nm{ font-weight:600; font-size:15px; }

/* Cart list rows */
.prow{ display:flex; gap:12px; align-items:center; padding:14px; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; margin-bottom:10px; }
.prow .thumb{ width:56px; height:56px; border-radius:12px; background:var(--g-soft); flex:0 0 auto; object-fit:cover; }
.prow .thumb-ph{ width:56px; height:56px; border-radius:12px; background:var(--g-soft); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--g-accent); font-size:24px; }
.prow .nm{ font-weight:600; font-size:14px; color:var(--g-ink); }
.prow .pr{ font-weight:700; font-size:14px; color:var(--g-ink); }
.prow .memb{ color:var(--g-primary); font-size:10px; font-weight:600; }
.btn-add{ width:34px; height:34px; border-radius:11px; background:var(--g-primary); color:#fff; border:none; font-size:19px; line-height:1; }

/* Generic list rows / totals */
.sm-listrow{ display:flex; justify-content:space-between; align-items:center; padding:15px 4px; border-bottom:1px solid var(--g-line); color:var(--g-ink); text-decoration:none; }
.sm-listrow .r{ color:var(--g-muted); font-size:13px; }
.sm-total-row{ display:flex; justify-content:space-between; padding:6px 0; color:var(--g-ink); font-size:14px; }
.sm-total-row span:first-child{ color:var(--g-muted); }
.sm-total-row.grand{ font-size:19px; font-weight:700; color:var(--g-ink); border-top:1px solid var(--g-line); margin-top:10px; padding-top:14px; }
.sm-total-row.grand span:first-child{ color:var(--g-ink); }

/* Bottom nav */
.shop-bottomnav{
  position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:10px 0 14px;
  border-top:1px solid var(--g-line); background:var(--g-card); z-index:20;
}
.shop-bottomnav a{ color:var(--g-muted); text-align:center; font-size:10px; text-decoration:none; flex:1; font-weight:500; }
.shop-bottomnav a i{ font-size:20px; display:block; margin-bottom:2px; }
.shop-bottomnav a.on{ color:var(--g-primary); }

/* ── CATEGORY GRID ────────────────────────────────────────────────────────
   The browse-by-category screens. The home strip (.cat-pill) stays exactly as
   it is - that is a horizontal shortcut row, this is the full grid you land on
   from the Categories tab, and they are not the same component.

   Three columns on a phone. Uploaded category images are cover-cropped into a
   fixed square so a mixed set of portrait and landscape uploads still reads as
   a grid; a category without an image gets its initial rather than a broken
   image box, because an unfilled image is normal, not an error. */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cat-tile{
  position:relative; display:flex; flex-direction:column; align-items:center;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:14px;
  padding:14px 6px 11px; text-decoration:none; color:var(--g-ink);
  min-height:104px;
}
.cat-tile:hover{ border-color:var(--g-primary); }
.cat-tile:focus-visible{ outline:2px solid var(--g-primary); outline-offset:2px; }
.cat-tile .ic{
  width:48px; height:48px; border-radius:15px; background:var(--g-soft);
  color:var(--g-primary); display:grid; place-items:center; overflow:hidden;
  margin-bottom:8px; flex-shrink:0;
}
.cat-tile .ic img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-tile .ic .mono-init{ font-size:19px; font-weight:800; }
.cat-tile .nm{
  font-size:11.5px; font-weight:600; line-height:1.3; text-align:center;
  /* Two lines, then ellipsis. "Fruit & Vegetables" must not make one tile
     taller than its neighbours and break the row. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cat-tile .chev{
  position:absolute; top:8px; inset-inline-end:9px;
  font-size:13px; font-weight:700; color:var(--g-primary); line-height:1;
}

/* Breadcrumb. Only ever three levels deep - CategoryTreeService.MaxDepth. */
.shop-crumb{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--g-muted); margin:0 0 14px;
}
.shop-crumb a{ color:var(--g-primary); text-decoration:none; font-weight:600; }
.shop-crumb b{ color:var(--g-ink); font-weight:600; }
.shop-crumb .sep{ color:var(--g-strike); }

@media (max-width:340px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Five tabs, not four. At 10px the two longest labels ("Categories",
   "Products") wrapped and pushed the bar taller than the icons. Slightly
   smaller type and a hard no-wrap keeps every target on one line without
   shrinking the tap area, which stays the full flex column. */
.shop-bottomnav a{ font-size:9.5px; white-space:nowrap; padding:0 2px; }
.shop-bottomnav a i{ font-size:19px; }

/* ── PRODUCT SEARCH ───────────────────────────────────────────────────────
   44px minimum, because this is a touch surface and a search box below the
   thumb target is the control people miss most. */
.shop-search{
  display:flex; align-items:center; gap:9px; background:var(--g-card);
  border:1px solid var(--g-line); border-radius:12px; padding:0 12px;
  min-height:44px; margin-bottom:12px;
}
.shop-search:focus-within{ border-color:var(--g-primary); box-shadow:0 0 0 3px var(--g-soft); }
.shop-search i{ color:var(--g-muted); font-size:15px; flex-shrink:0; }
.shop-search input{
  border:0; outline:none; background:transparent; flex:1; min-width:0;
  font-size:14px; color:var(--g-ink); font-family:inherit;
  /* 16px on iOS or Safari zooms the page on focus; 14px with this is safe
     because the field is inside a max-width column. */
}
.shop-search input::placeholder{ color:var(--g-muted); }
.shop-search .clear{
  color:var(--g-muted); text-decoration:none; font-size:20px; line-height:1;
  padding:0 2px; flex-shrink:0;
}
.shop-search .clear:hover{ color:var(--g-ink); }

/* ── CATEGORY CHIPS + SORT ────────────────────────────────────────────────
   Narrowing the flat product list without leaving it. Scrolls sideways rather
   than wrapping to three rows and pushing the products off the first screen. */
.shop-chips{
  display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; margin-bottom:10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.shop-chips::-webkit-scrollbar{ display:none; }
.shop-chips .chip{
  flex:0 0 auto; font-size:12px; font-weight:500; padding:7px 13px; border-radius:17px;
  background:var(--g-card); border:1px solid var(--g-line); color:var(--g-ink);
  text-decoration:none; white-space:nowrap; min-height:34px;
  display:inline-flex; align-items:center;
}
.shop-chips .chip.on{
  background:var(--g-primary); border-color:var(--g-primary); color:#fff; font-weight:600;
}
.shop-chips .chip:focus-visible{ outline:2px solid var(--g-primary); outline-offset:2px; }

.shop-sortbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; font-size:12px; color:var(--g-muted);
}
.shop-sortbar .lbl{ font-weight:600; white-space:nowrap; }
.shop-sortbar .opts{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; }
.shop-sortbar .opts::-webkit-scrollbar{ display:none; }
.shop-sortbar .opts a{
  color:var(--g-muted); text-decoration:none; white-space:nowrap; padding:4px 0;
}
.shop-sortbar .opts a.on{ color:var(--g-primary); font-weight:700; }

/* Empty-state type, so the two views that use it cannot drift apart and no
   inline style= is needed (the 397 -> 0 acceptance test). */
.shop-empty-t{ font-size:15px; font-weight:700; margin:0 0 4px; }
.shop-empty-p{ font-size:13px; color:var(--g-muted); margin:0; line-height:1.55; }

/* ── IMAGE FALLBACKS ──────────────────────────────────────────────────────
   Every image slot now paints its fallback FIRST and lays the photo over the
   top, so an <img> whose file has gone (onerror="this.remove()") reveals the
   icon instead of the browser's torn-page glyph.

   WHY THIS KEEPS HAPPENING: uploads live in wwwroot/uploads/, which is not in
   source control and is not carried by a deployment package. Restore a database
   onto a fresh deployment and every ImageUrl in it points at a file that is no
   longer on disk - the path is valid, the row is valid, the file is absent.
   Checking IsNullOrWhiteSpace(ImageUrl) cannot detect that; only the browser can,
   and this is how it tells us.

   The image is absolutely positioned so it covers the fallback exactly, in every
   slot, at every size. */
.pcard .imgwrap,
.cat-tile .ic,
.cat-pill .ic,
.dealcard .imgwrap{ position:relative; }

.pcard .imgwrap img,
.cat-tile .ic img,
.cat-pill .ic img,
.dealcard .imgwrap img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; background:var(--g-soft);
  /* Above the fallback icon, below the badges (.badge-memb, .oos, .save). */
  z-index:1;
}
.pcard .imgwrap .badge-memb,
.pcard .imgwrap .oos,
.dealcard .imgwrap .save,
.dealcard .imgwrap .code,
.dealcard .imgwrap .ends{ z-index:2; }
/* Deal cards are 16:10 but product pictures are square: show the whole
   picture (with its pack-size badge) instead of cropping top and bottom. */
.dealcard .imgwrap img{ object-fit:contain; }

/* The picture is decorative in a tile whose name is already written beneath it,
   so a broken one must not leave alt text sitting across the icon. */
.cat-tile .ic img,
.cat-pill .ic img{ font-size:0; color:transparent; }

/* Product detail hero. The placeholder holds the 320px whether or not the photo
   arrives, so a missing file cannot collapse the page. */
.pd-mainwrap{ position:relative; height:320px; background:#fafbfc; }
.pd-mainwrap .pd-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#c3c9d0; font-size:56px;
}
.pd-mainwrap .pd-main{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:#fafbfc; z-index:1;
}

/* ── LIVE TRACKING (356) ──────────────────────────────────────────────────
   The card carries the accent bar because the status IS derived from a ledger
   of status events - the same meaning the bar has everywhere else in this
   product. Nothing decorative gets it. */
.track-card{
  display:block; position:relative; overflow:hidden; text-decoration:none; color:inherit;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.track-card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:var(--g-primary);
}
.track-card.bad::before{ background:#C4142B; }
.track-card.bad{ border-color:#F0C9CE; }
.track-card .hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.track-card .st{ font-size:14px; font-weight:700; }
.track-card.bad .st{ color:#C4142B; }
.track-card .sub{ font-size:11.5px; color:var(--g-muted); margin-top:2px; line-height:1.45; }

/* One segment per forward step. */
.track-card .pbar{ display:flex; gap:4px; margin:12px 0 4px; }
.track-card .pbar i{ flex:1; height:4px; border-radius:2px; background:var(--g-line); }
.track-card .pbar i.on{ background:var(--g-primary); }
.track-card .pbar i.now{ background:var(--g-accent); }
.track-card .pbar-lbl{
  display:flex; justify-content:space-between; font-size:8.5px; color:var(--g-muted);
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}

.track-card .paynote{
  margin-top:11px; border-radius:10px; padding:9px 11px;
  font-size:11.5px; font-weight:600; line-height:1.5;
}
.track-card .paynote.cod{ background:#FFF4DE; border:1px solid #F3E0AE; color:#7A5B00; }
.track-card .paynote.paid{ background:var(--g-soft); border:1px solid #CDE6D0; color:#1B5E20; }

.track-refresh{
  display:flex; align-items:center; gap:6px; justify-content:center;
  font-size:10.5px; color:var(--g-muted); margin:14px 0 2px;
}
.track-refresh .dotpulse{ width:6px; height:6px; border-radius:50%; background:var(--g-accent); }

.sm-status.grey{ background:#F1F3F1; color:var(--g-muted); }
.sm-status.bad{ background:#FBE9EB; color:#C4142B; }