/* PULSE FOOD · branch catalogue */
:root{
  --page:#efe7d4;--panel:#fffdf7;--zebra:#faf4e3;--head:#e2d9c2;
  --blue:#14396b;--blue-d:#0d2749;--muted:#4c6488;
  --dim:#8496ac;
  --rule:#0a0a0a;
  --line:#b9ab8c;--grid:#cfc2a4;
  --teal:#0f766e;--green:#15803d;--green-d:#116232;--red:#b91c1c;--amber:#b45309;
  --price:#8c55af;--price-d:#5c3578;

  /* NETWORK ACCENT · the only palette value that differs between networks.
     It colours the header WORDING — the branch title and the domain plate — and nothing
     structural. A rule line under the table would have changed the drawing; the words
     are what name the network, so the words are what carry its colour.
     This instance: red. Every other network keeps its own single value, and nothing else
     in the palette differs between them. Naming another network here would be lineage in
     a public asset — a comment is still shipped bytes.
     PULSE is one measuring rule, and a rule that changes colour with whoever is being
     measured reads less like a rule. */
  --net:#b3151b;

  /* THE NETWORK COLUMN · present only where a network publishes its own price. */
  --col:#8c55af;--col-d:#5c3578;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:David,"David Libre","Times New Roman",serif;font-size:16px;
  background:var(--page);color:var(--blue);display:flex;flex-direction:column;overflow:hidden}

.h{background:var(--panel);padding:5px 14px 3px;padding-inline-end:16px;
  display:flex;gap:11px;align-items:center;flex-wrap:wrap;min-height:0}
.topbar{flex:0 0 auto;z-index:6;background:var(--panel);box-shadow:0 2px 6px rgba(20,57,107,.13)}
.heads{display:grid;grid-template-columns:232px 1fr;gap:8px;padding:0 8px;max-width:1560px;margin:auto;
  align-items:stretch}
.heads .sbhead{background:var(--panel);border:1px solid var(--line);border-bottom:2px solid var(--blue);
  border-top:0;border-radius:0;padding:3px 6px;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:stretch}
.heads .thead{min-width:0;display:flex;align-items:stretch}
table.headtable{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  border:2px solid var(--rule);border-top:0;border-bottom:0;min-width:780px;height:100%}
table.headtable th{border-bottom:2px solid var(--blue)}
.brand{display:flex;flex-direction:column;gap:0;line-height:1.24;min-width:0}
.brand .b1{font-size:1.02rem;font-weight:700;color:var(--net);white-space:nowrap}
.brand .b2{font-size:.68rem;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .b2 .sep{opacity:.45;padding:0 4px}
.domain{border:1px solid var(--net);border-radius:6px;padding:2px 10px 3px;white-space:nowrap;
  background:#f1fbfa;display:flex;flex-direction:column;align-items:center;line-height:1.12}
.domain .by{font-size:.58rem;font-weight:700;color:var(--muted)}
.domain .dn{font-size:1.02rem;font-weight:700;color:var(--net);letter-spacing:1px}
.asof{background:var(--blue);color:#fff;border-radius:5px;padding:2px 9px;font-size:.7rem;font-weight:700;white-space:nowrap}
.asof.fallback{background:var(--amber)}
.kk{background:var(--head);border:1px solid var(--line);border-radius:5px;padding:2px 8px;font-size:.7rem;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.tg{padding:3px 9px;border:1px solid var(--line);border-radius:5px;background:var(--panel);font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit;color:var(--blue)}
.tg:hover{background:var(--head)}
.tg.on{background:var(--green);color:#fff;border-color:var(--green)}
.h input{padding:3px 9px;border:1px solid var(--line);border-radius:5px;font-size:.8rem;font-family:inherit;width:190px;margin-inline-start:auto;color:var(--blue)}
.h input:focus{outline:none;border-color:var(--blue)}

.freshbox{display:flex;flex-direction:column;gap:1px;border:1px solid var(--blue);border-radius:6px;
  padding:2px 9px;background:#f4f7fc}
.freshbox .row{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.freshbox .lbl{font-size:.63rem;font-weight:700;color:var(--blue)}
.freshbox .val{font-size:.76rem;font-weight:700;color:var(--blue-d);font-variant-numeric:tabular-nums;
  margin-inline-start:auto}

.lay{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:232px 1fr;gap:8px;
  padding:0 8px 8px;max-width:1560px;width:100%;margin:0 auto;align-items:stretch;overflow:hidden}
.tablewrap{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  background:var(--panel);border:2px solid var(--rule);border-top:0}
.sb{background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;padding:5px 6px 6px;
  min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;font-size:.9rem}
.sb .all,.sb .promoOnly,.sbhead .all,.sbhead .promoOnly{display:block;width:100%;text-align:start;padding:4px 9px;border:none;border-radius:5px;font-weight:700;cursor:pointer;font-size:.86rem;font-family:inherit;margin-bottom:4px}
.heads .sbhead .all,.heads .sbhead .promoOnly{margin-bottom:0;font-size:.78rem;padding:4px 7px}
.sb .all,.sbhead .all{background:var(--blue);color:#fff}
.sb .all span,.sbhead .all span{float:inline-end;color:#c5d6ee;font-variant-numeric:tabular-nums}
.sb .promoOnly,.sbhead .promoOnly{background:#e6f3e9;color:var(--green-d);border:1px solid rgba(21,128,61,.3)}
.sb .promoOnly span,.sbhead .promoOnly span{float:inline-end;opacity:.8;font-variant-numeric:tabular-nums}
.sb .promoOnly.on,.sbhead .promoOnly.on{background:var(--green);color:#fff}
.sb a{display:flex;justify-content:space-between;gap:6px;padding:5px 9px;text-decoration:none;color:var(--blue);border-radius:4px;font-size:.9rem;font-weight:700;border-bottom:1px solid var(--grid);cursor:pointer}
.sb a:last-child{border-bottom:none}
.sb a:hover{background:rgba(20,57,107,.09)}
.sb a.on{background:var(--blue);color:#fff}
.sb .n{font-size:.8rem;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.sb a.on .n{color:#c5d6ee}
.h .bx{background:#f7f4ec;border:1px solid var(--line);border-radius:6px;padding:2px 10px;margin:0;
  font-size:.74rem;line-height:1.35;color:var(--blue);flex:1 1 auto;min-width:240px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h .bx b{font-variant-numeric:tabular-nums;color:var(--blue-d);font-weight:700}
.h .bx .scope{color:var(--price-d);font-weight:700}

.bt-cbt-stamp{width:55px!important;height:55px!important;padding:4px!important;border-radius:9px!important;
  animation:bt-stamp-cycle 30s ease-in-out infinite!important;pointer-events:none!important}
@keyframes bt-stamp-cycle{
  0%{opacity:0;transform:scale(.92)}
  2%{opacity:1;transform:scale(1)}
  10%{opacity:1;transform:scale(1)}
  13%{opacity:0;transform:scale(.92)}
  100%{opacity:0;transform:scale(.92)}}
.bt-credits-strip{left:80px!important}
@media(prefers-reduced-motion:reduce){.bt-cbt-stamp{animation:none!important;opacity:1!important}}
@media(max-width:700px){.bt-cbt-stamp{width:39px!important;height:39px!important;padding:3px!important}
  .bt-credits-strip{left:60px!important}}
.tablewrap{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  background:var(--panel);border:2px solid var(--rule);border-top:0}
.lay>div{min-width:0;min-height:0;display:flex;flex-direction:column}
table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--panel);
  border:0;font-size:.95rem;min-width:780px}
th{background:var(--rule);color:#fff;font-size:.86rem;font-weight:700;padding:6px 9px;
  text-align:start;border-inline-start:2px solid rgba(255,255,255,.34);white-space:nowrap}
th.c{text-align:center}
td{padding:2px 9px;border-bottom:1px solid var(--grid);border-inline-start:2px solid var(--rule);
  vertical-align:middle;overflow:hidden;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{border-inline-start:none}
tbody tr:nth-child(odd){background:var(--panel)}
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr{cursor:pointer}
tbody tr:hover{background:rgba(20,57,107,.10)!important}

.imgcell{width:88px;text-align:center;padding:2px 6px}
.imgcell img{width:52px;height:52px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px;display:block;margin:0 auto 1px;padding:2px}
.imgcell img.ph{padding:13px;opacity:.32}
.bc{display:block;font-family:"Courier New",ui-monospace,monospace;font-size:.72rem;
  color:var(--muted);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nm{text-align:start;font-weight:700;font-size:1.18rem;line-height:1.25;color:var(--blue-d);
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

th.hS{color:#e6d4f5}
td.pricecell{background:rgba(140,85,175,.09);text-align:start;white-space:nowrap}
tbody tr:nth-child(even) td.pricecell{background:rgba(140,85,175,.15)}
.pricecell .price{font-weight:700;color:var(--price-d);font-size:1.2rem;line-height:1.2}

th.hP{color:#c8ecd3}
/* THE ONE STRUCTURAL ADDITION · a network's own price column.
   It borrows the shelf price's own treatment rather than introducing a third colour:
   same tint family, same weight, one step louder. The row then reads as three
   comparable numbers instead of three competing ones.

   An empty cell stays empty. A product with no network price published shows a dash and
   never falls back to the shelf price — a shelf price shown as a network price is a
   claim the source never made. */
td.rlcell{background:rgba(140,85,175,.16);text-align:start;white-space:nowrap;
  border-inline-start:2px solid var(--col)}
tbody tr:nth-child(even) td.rlcell{background:rgba(140,85,175,.24)}
td.rlcell.none{background:transparent;border-inline-start:2px solid var(--grid)}
.rl{font-weight:700;color:var(--col-d);font-size:1.26rem;line-height:1.2}
.rl.none{color:var(--dim);font-weight:400;font-size:1rem;text-align:center;display:block;opacity:.6}
th.hR{color:#e6d4f5}
.dR{background:var(--col)}
/* NOT STOCKED IN THIS BRANCH
   The chain publishes one campaign across all its branches while each branch publishes
   its own PriceFull. Measured across 006, 007 and 062 on the same morning: the promotion
   files overlap 99%, the price files 73-76%. So a row can carry a real published price
   for a product this branch simply does not stock.

   It is struck through, not removed. Deleting it would hide an offer the chain really
   published; leaving it unmarked would send a shopper to an empty shelf. The strike keeps
   the price readable — it is true, it is just not available here. */
tr.oos td{opacity:.62}
tr.oos td .nm,tr.oos td .price,tr.oos td .rl{text-decoration:line-through;
  text-decoration-color:var(--net);text-decoration-thickness:1.5px}
tr.oos td.imgcell img{filter:grayscale(1);opacity:.55}
.oosbadge{display:inline-block;font-size:.62rem;font-weight:700;color:var(--net);
  border:1px solid var(--net);border-radius:3px;padding:0 4px;margin-inline-start:6px;
  vertical-align:2px;white-space:nowrap;text-decoration:none}
td.promocell{text-align:start;white-space:normal}
td.promocell.on{background:rgba(21,128,61,.06)}
tbody tr:nth-child(even) td.promocell.on{background:rgba(21,128,61,.11)}
.promo{color:var(--green-d);font-size:.9rem;font-weight:700;line-height:1.28}
.promo .pp{display:block;font-size:1.14rem}
.promo small{font-weight:400;opacity:.8}
.promo.none{color:var(--dim);font-weight:400;font-size:1rem;text-align:center;display:block;opacity:.6}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px;vertical-align:1px}
.dS{background:var(--price)}.dP{background:var(--green)}

.qty{display:flex;gap:3px;align-items:center;justify-content:center}
.qty button{width:25px;height:25px;border:1px solid var(--line);background:var(--panel);border-radius:4px;font-weight:700;cursor:pointer;font-size:1rem;line-height:1;color:var(--blue);padding:0;font-family:inherit}
.qty button:hover{background:var(--head);border-color:var(--blue)}
.qty .v{min-width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.qty .v.z{color:var(--dim);font-weight:400}
tr.inb{background:rgba(21,128,61,.12)!important}

#bub{position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:20;display:none;align-items:center;justify-content:center;padding:16px}
#bub.on{display:flex}
#bubc{background:var(--panel);border:2px solid var(--rule);border-radius:8px;max-width:560px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.32);overflow:hidden}
#bubh{background:var(--head);padding:9px 14px;font-weight:700;font-size:1.05rem;display:flex;gap:9px;align-items:center;border-bottom:2px solid var(--rule);color:var(--blue-d)}
#bubh button{margin-inline-start:auto;border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:3px 10px;cursor:pointer;font-family:inherit;font-weight:700;color:var(--blue)}
#bubb{padding:14px 16px;line-height:1.65}
#bubb img{width:114px;height:114px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;float:inline-start;margin-inline-end:14px;padding:4px}
#bubb h3{font-size:1.36rem;font-weight:700;line-height:1.28;margin-bottom:5px;color:var(--blue-d)}
#bubb .pbig{font-size:1.62rem;font-weight:700;color:var(--price-d);font-variant-numeric:tabular-nums;margin:2px 0 7px}
#bubb .meta{font-size:.92rem;color:var(--blue);line-height:1.85}
#bubb .meta b{color:var(--blue-d)}
#bubb h4{clear:both;padding-top:10px;font-size:.92rem;color:var(--muted);font-weight:700}
#bubb ul{list-style:none;margin-top:5px}
#bubb li{background:rgba(21,128,61,.08);border:1px solid rgba(21,128,61,.28);border-radius:6px;padding:6px 11px;margin-bottom:5px;font-size:.9rem;color:var(--green-d)}
#bubb li small{color:var(--muted)}
.dim{color:var(--dim);font-size:.9rem;clear:both;padding-top:6px}

#bk{position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;background:var(--panel);border-top:3px solid var(--blue);box-shadow:0 -4px 14px rgba(0,0,0,.18);z-index:9;max-height:62vh;display:none;flex-direction:column}
#bk.on{display:flex}
#bkh{padding:8px 14px;border-bottom:1px solid var(--line);display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:1.05rem;color:var(--blue-d)}
#bkb{overflow:auto;padding:8px 14px}
#bk table{font-size:.92rem;min-width:0}
#bk .imgcell{width:64px}
#bk .imgcell img{width:38px;height:38px}
#bk .nm{font-size:1rem;-webkit-line-clamp:1}
.tot{background:var(--blue);color:#fff;border-radius:5px;padding:4px 12px;font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.empty{padding:22px;text-align:center;color:var(--muted)}

.credits{padding:10px 16px 12px;text-align:center;color:var(--blue);font-size:.78rem;border-top:1px solid var(--line);background:var(--panel);line-height:1.7}
.credits b{color:var(--blue-d)}
.credits .dm{color:var(--teal);font-weight:700;letter-spacing:1.2px;font-size:1.02rem}
.credits .ai{color:var(--dim);font-size:.76rem}

@media(max-width:900px){
  html,body{height:auto}
  body{overflow:auto}
  .h{padding-inline-end:14px}
  .heads{grid-template-columns:1fr}
  .lay{display:block;overflow:visible}
  .sb{max-height:none;overflow:visible;margin-bottom:8px}
  .tablewrap{overflow:visible}
  .h input{width:100%;margin-inline-start:0}
  .domain{padding:4px 11px}
  .domain .dn{font-size:1.16rem}
  .freshbox{padding:4px 10px}
  .freshbox .val{font-size:.92rem}
  table{min-width:0}
  .imgcell{width:68px}
  .imgcell img{width:44px;height:44px}
  .nm{font-size:1.02rem}
  .pricecell .price{font-size:1.05rem}
  .rlcell .rl{font-size:1.1rem}
  th,td{padding:5px 6px}
}
@media(max-width:560px){
  .brand .b1{font-size:1.08rem}
  .domain .dn{font-size:1rem;letter-spacing:.6px}
}
