/* Plan for Profit — interactive category guide */
:root{
  --pfp-900:#123d28; --pfp-800:#17502f; --pfp-700:#1e6b3f; --pfp-600:#2e8b57;
  --pfp-100:#e3f0e8; --lime:#8dc63f;
  --core:#00a0df; --ext:#ec1e79;
  --surface:#fff; --surface-2:#f5f6f3; --surface-3:#eceee8;
  --ink:#14181c; --ink-2:#4d5560; --ink-3:#7b8590;
  --line:#e3e5df;
  --new-bg:#e4f3e7; --new-fg:#12662f;
  --best-bg:#fdf0d6; --best-fg:#8a5d00;
  --pmp-bg:#e2f1fb; --pmp-fg:#0d5c86;
  --shadow:0 1px 2px rgba(18,30,24,.05), 0 6px 18px rgba(18,30,24,.06);
  --accent:var(--pfp-700);
  --sidebar-w:266px;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--surface-2);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.app{display:flex;min-height:100vh}

/* ── sidebar ─────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex:0 0 auto;position:sticky;top:0;height:100vh;overflow-y:auto;
  background:linear-gradient(178deg,var(--pfp-800),var(--pfp-900));color:#e8f2ec;
  display:flex;flex-direction:column;
}
.brand{display:flex;gap:11px;align-items:center;padding:18px 16px 12px;text-decoration:none}
.brand-mark{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:#fff;color:var(--pfp-800);
  font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;letter-spacing:.4px;
}
.brand-mark span{color:var(--lime)}
.brand-title{font-weight:700;font-size:14px;line-height:1.2}
.brand-sub{font-size:11.5px;opacity:.72}
.nav-search{padding:2px 14px 10px}
.nav-search input{
  width:100%;padding:8px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.09);color:#fff;font-size:13px;
}
.nav-search input::placeholder{color:rgba(255,255,255,.55)}
.nav-search input:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.14)}
.nav{padding:0 10px 10px;flex:1}
.nav-group{font-size:10px;text-transform:uppercase;letter-spacing:.13em;opacity:.5;margin:14px 8px 5px}
.nav a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;margin:1px 0;border-radius:9px;
  color:#dbeade;text-decoration:none;font-size:13.5px;
}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a.active{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.nav .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.nav .ico{font-size:14px;width:18px;text-align:center;flex:0 0 auto}
.nav .count{margin-left:auto;font-size:11px;opacity:.5}
.sidebar-foot{padding:12px 16px 18px;font-size:11.5px}
.sidebar-foot>a{color:var(--lime);text-decoration:none;font-weight:600}
.touchpoints{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.touchpoints span{font-size:10px;background:rgba(255,255,255,.1);padding:3px 7px;border-radius:5px;opacity:.85}
.foot-note{opacity:.5;margin-top:8px;line-height:1.45}
.menu-toggle{display:none}

/* ── layout ──────────────────────────────────────────── */
.content{flex:1;min-width:0;padding:26px 34px 70px;max-width:1240px}
.crumb{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.11em;margin-bottom:7px}
.page-head{
  border-radius:18px;padding:24px 28px;margin-bottom:22px;color:#fff;
  background:linear-gradient(115deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#0d2a1c));
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.page-head h1{margin:0;font-size:28px;letter-spacing:.01em;display:flex;align-items:center;gap:12px}
.page-head h1 .em{font-size:30px}
.page-head .meta{font-size:13px;opacity:.9;text-align:right}
h2.sec{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent);margin:32px 0 13px;font-weight:700}
h2.sec small{color:var(--ink-3);text-transform:none;letter-spacing:0;font-weight:400;margin-left:8px}

/* tabs */
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.tabs button{
  border:none;background:none;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;
  color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button .n{font-size:11px;opacity:.6;margin-left:5px;font-weight:500}

/* ── insight ↔ tip blocks (the guide's core unit) ────── */
.block{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.block-head{
  padding:13px 20px;font-weight:700;font-size:16px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--accent) 6%,#fff);color:var(--accent);
  display:flex;align-items:center;gap:9px;
}
.block-body{display:grid;grid-template-columns:1fr 340px}
.findings{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.findings p{margin:0;color:var(--ink-2);font-size:14px}
/* A finding with no figure still belongs to the same text column as one with a figure, or the block
   reads ragged — the sentence under "58%" would sit 134px to the right of the sentence under it.
   The indent is the figure column plus its gap, so both start on the same x. Charts indent too:
   a chart belongs to the sentence above it, not to the card.

   Gated on :has(.stat), because 5 of the 61 blocks carry no figure at all (Baby Care / Baby Milk
   is two qualitative statements). There the indent aligned with nothing and just left an empty
   gutter that read as a missing stat. */
.finding > p{line-height:1.5;font-size:13.5px}
.findings:has(.stat) .finding > p,
.findings:has(.stat) .finding > .bars,
.findings:has(.stat) .finding > div:not(.stat){padding-left:134px}
@media (max-width:640px){
  .findings:has(.stat) .finding > p,
  .findings:has(.stat) .finding > .bars,
  .findings:has(.stat) .finding > div:not(.stat){padding-left:104px}
}
.findings h4{margin:4px 0 0;font-size:13.5px;color:var(--ink)}
.tips{
  padding:18px 20px;background:var(--pfp-100);border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.tip-badge{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10px;font-weight:800;
  letter-spacing:.1em;color:var(--pfp-700);border:1.5px solid var(--pfp-600);border-radius:999px;padding:4px 10px;
}
.tips p{margin:0;font-size:13.5px;color:#1c3a29}
.tips .empty-tip{font-size:12.5px;color:var(--ink-3);font-style:italic}

/* ── pull-figure + chart ──────────────────────────────────────
   A fixed first column, so every figure in a block shares one left edge and every sentence starts
   at the same x. The old flex row sized the column to each figure, which is why the screenshots
   read as ragged: "3 in 5" pushed its text further right than "27%" two lines below it. */
.stat{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start;
  padding:2px 0;
}
.stat .say{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  padding-top:3px;   /* optically aligns the first line with the numeral's cap height */
}
.fig{display:flex;flex-direction:column;gap:2px;min-width:0}
/* tabular figures keep a column of numerals on the same rhythm; the tight tracking is what makes
   large numerals read as designed rather than merely big */
.fig .lead{
  font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.035em;line-height:.92;
  font-size:40px;color:var(--ink);white-space:nowrap;
}
.fig.w-md .lead{font-size:33px}
.fig.w-lg .lead{font-size:27px;letter-spacing:-.02em}
.fig .pct{font-size:.52em;font-weight:700;letter-spacing:0;margin-left:1px;vertical-align:.42em}
/* a scale suffix ("m", "bn") and a rank prefix ("No.") belong to the numeral, so they sit inline
   at a smaller size rather than being promoted to their own line */
.fig .sfx{font-size:.55em;font-weight:700;letter-spacing:0}
.fig .sfx.rank{color:var(--ink-3);margin-right:1px}
/* the sign carries the meaning, so only signed figures take a colour — a bare "35%" stays ink */
.fig.pos .lead{color:var(--pfp-700)}
.fig.neg .lead{color:#a8321f}
.fig .eyebrow,.fig .unit{
  font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.25;
}
.fig .eyebrow{margin-bottom:1px}
.fig .unit{margin-top:1px;text-wrap:balance}
/* "3 in 5" on one line, with the joining word set down so the two numerals carry it */
.fig.ratio .lead{font-size:34px;display:flex;align-items:baseline;gap:3px}
.fig.ratio .in{
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
  text-transform:lowercase;padding:0 1px;
}
/* a phrase with no figure in it: set as a dated kicker, not a pretend numeral */
.fig.kicker{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pfp-700);line-height:1.35;padding-top:4px;
  border-top:2px solid var(--pfp-600);align-self:start;
}
@media (max-width:640px){
  .stat{grid-template-columns:92px 1fr;gap:12px}
  .fig .lead{font-size:32px}
  .fig.w-md .lead{font-size:27px}
  .fig.w-lg .lead{font-size:22px}
  .fig.ratio .lead{font-size:27px}
}
/* The label track is sized to the longest label, not to a share of the card. At 36% a short label
   like "Pampers" ended ~190px from its own bar, which read as two unrelated columns.

   The tracks live on .bars and every row borrows them through subgrid, so the label column is the
   longest label in the CHART, not in each row. Sizing each row on its own — the obvious first
   move — lines each bar up behind its own label instead, and the bars stop aligning with each
   other, which for a chart is worse than the gap it fixes. .lbl caps its width so one verbose
   label can't shove every bar rightwards; it falls back to its ellipsis. */
.bars{
  display:grid;grid-template-columns:max-content minmax(90px,1fr) 42px;
  gap:6px 12px;margin-top:2px;font-size:12.5px;
}
.bar-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center}
/* Without subgrid the rows would collapse to one column each, so keep the old proportional
   tracks there: a wider gap is survivable, a stack of label-over-bar is not. */
@supports not (grid-template-columns:subgrid){
  .bars{display:flex;flex-direction:column;gap:6px}
  .bar-row{grid-template-columns:minmax(80px,30%) 1fr 42px;gap:10px}
}
/* Right-aligned, so every label ends the same short distance from its own bar. Sharing one column
   means a chart with one long label ("Chinese New Year (Total World Foods)") would otherwise leave
   its short labels stranded 160px from theirs; ranging them right closes that for every row. */
.bar-row .lbl{
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:240px;text-align:right;
}
.bar-row .trk{height:13px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bar-row .fil{height:100%;border-radius:4px;background:var(--accent);min-width:2px}
.bar-row .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.src{font-size:11px;color:var(--ink-3);margin-top:2px}

/* ── provenance as footnotes ──────────────────────────────
   All of it lives in the numbered list at the foot, as it does in print: a superscript on the
   figure, one line per source below. The channel is not shown separately — see renderFinding. */
sup.fn{
  font-size:9.5px;font-weight:800;color:var(--accent);
  margin-left:3px;vertical-align:super;line-height:0;
}
.footnotes{
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;color:var(--ink-3);line-height:1.45;
}
.footnotes li{display:flex;gap:8px;align-items:baseline}
.fn-n{
  flex:0 0 auto;min-width:15px;height:15px;border-radius:50%;
  background:var(--surface-3);color:var(--ink-2);
  font-size:9px;font-weight:800;display:grid;place-items:center;
}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{text-align:left;color:var(--ink-3);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line)}
.dtable td{padding:5px 8px;border-bottom:1px solid var(--surface-2);color:var(--ink-2)}

/* ── interactive shelf (reconstructed fixture) ───────── */
.shelf-wrap{display:grid;grid-template-columns:1fr 268px;gap:20px;align-items:start}
.shelf-stage{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 20px 16px;overflow:hidden;
}
.fixture{position:relative;display:flex;flex-direction:column;gap:2px}
.shelf-row{position:relative;display:flex;align-items:flex-end;min-height:96px;padding-left:26px}
.shelf-row .rowno{
  position:absolute;left:0;bottom:10px;font-size:10.5px;font-weight:800;color:var(--ink-3);
  width:20px;text-align:center;
}
.shelf-row .board{
  position:relative;flex:1;height:100%;min-height:88px;
  border-bottom:7px solid #cfd4cd;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,transparent 62%,rgba(20,30,24,.045) 100%);
}
/* a facing is a <button> now, so the browser's own button chrome has to go */
.facing{
  position:absolute;bottom:7px;height:84px;display:flex;align-items:flex-end;justify-content:center;
  cursor:pointer;transition:transform .12s;
  appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
}
.facing:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.facing img{max-width:100%;max-height:84px;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.facing .noimg{color:var(--ink-3);font-size:26px}
.facing:hover{transform:translateY(-4px);z-index:5}
.facing .ftip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:11.5px;line-height:1.35;padding:6px 9px;border-radius:7px;
  max-width:230px;width:max-content;text-align:center;opacity:0;pointer-events:none;transition:opacity .12s;z-index:9;
}
.facing:hover .ftip{opacity:1}
.facing .ftip .ff{
  display:inline-block;font-style:normal;font-size:9px;font-weight:800;margin:4px 2px 0;
  padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.2);
}
.rngbar{position:absolute;left:0;right:0;bottom:-7px;height:7px}
.rngbar .rng{position:absolute;height:7px;display:block}
.rngbar .rng.core{background:var(--core)}
.rngbar .rng.ext{background:var(--ext)}
.fixture.dim-ext .facing.ext{opacity:.22}
.fixture.dim-ext .rngbar .rng.ext{opacity:.3}
.eyetag{
  position:absolute;right:4px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#7a5c00;
  background:#ffefb3;padding:3px 8px;border-radius:5px;display:none;
}
.fixture.show-eye .shelf-row.eye{background:rgba(255,214,0,.15);border-radius:6px}
.fixture.show-eye .eyetag{display:block}
.plano-fallback img{width:100%;display:block;border-radius:8px}
.plano-fallback .note{margin-top:10px}
.shelf-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3)}
.toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:6px 0;cursor:pointer;color:var(--ink-2)}
.toggle input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin:5px 0}
.legend-row i{width:22px;height:6px;border-radius:3px;display:inline-block;flex:0 0 auto}
.shelf-meta{font-size:12.5px;color:var(--ink-2)}
.shelf-meta b{color:var(--ink)}
.note{font-size:12px;color:var(--ink-3);line-height:1.5}

/* ── interactive UK depot map (traced vector, not an image) ── */
.mapwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
/* Fallback when Leaflet is unavailable: the same depot records as a selectable list. */
.depot-list{display:flex;flex-direction:column;gap:2px;max-height:74vh;overflow-y:auto}
.dl-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;
  padding:9px 10px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink)}
.dl-row:hover{background:var(--surface-2)}
.dl-row.sel{background:var(--pfp-50);box-shadow:inset 0 0 0 1px var(--pfp-600)}
.dl-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ext);color:#fff;font-size:12px;font-weight:800}
.dl-name{font-weight:600}
.dl-town{font-size:12.5px;color:var(--ink-2)}
.mapfoot{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.mapfoot b{font-size:15px;color:var(--accent)}

/* ── products ────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=search]{
  padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fff;min-width:200px;
}
.chip{
  border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.subtabs button{
  border:none;background:none;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--ink-2);border-bottom:2.5px solid transparent;
}
.subtabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
/* dense flow is what lets products backfill the cells beside a tall advert tile */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:13px;
  grid-auto-flow:row dense}
.pcard{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);
  /* a <button> now, so it opens the product panel and is keyboard reachable; strip the UA chrome
     and keep the card's own left-aligned text rather than a button's centred label */
  appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color .12s, transform .12s;
}
.pcard:hover{border-color:var(--pfp-600);transform:translateY(-2px)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pcard .badges{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none}
/* the left slot can hold NEW and BEST together, as the printed card does */
.pcard .badges > span{display:flex;gap:4px;flex-wrap:wrap}
.bdg{font-size:9px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:3px 7px}
.bdg.new{background:var(--new-bg);color:var(--new-fg)}
.bdg.best{background:var(--best-bg);color:var(--best-fg)}
.bdg.pmp{background:var(--pmp-bg);color:var(--pmp-fg)}
.pimg{height:92px;display:flex;align-items:center;justify-content:center;margin-top:12px}
.pimg img{max-height:88px;max-width:100%;object-fit:contain}
.pimg.ph{background:var(--surface-2);border-radius:8px;color:var(--ink-3);font-size:22px}
/* The brand leads the card, as it does in print: "1 First Formula" alone does not identify a
   product, "Aptamil / 1 First Formula" does. All 393 products carry a brand and none of it was
   reaching the page. Bolder than the product line, matching the guide's own hierarchy. */
.pbrand{font-size:13px;font-weight:800;line-height:1.25;color:var(--ink);margin-bottom:-4px}
.pname{font-size:13px;font-weight:600;line-height:1.28;color:var(--ink-2)}
.pvar{font-size:12.5px;color:var(--accent);line-height:1.25}
.psize{font-size:12px;color:var(--ink-3)}
.pfoot{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;align-items:center}
.mini{font-size:9.5px;font-weight:700;border-radius:5px;padding:2px 6px;background:var(--surface-2);color:var(--ink-2)}
.mini.region{background:#eef2ff;color:#3a4a9b}
.mini.either{background:#fdeaea;color:#9a1f1f}
.insight-card{
  grid-column:span 2;background:color-mix(in srgb,var(--accent) 7%,#fff);
  border:1.5px solid color-mix(in srgb,var(--accent) 30%,#fff);border-radius:12px;padding:15px 17px;
  display:flex;flex-direction:column;gap:7px;justify-content:center;
}
.insight-card .ic-t{font-size:12.5px;font-weight:700;color:var(--accent)}
.insight-card .ic-i{font-size:12.5px;color:var(--ink-2)}
.empty{color:var(--ink-3);font-size:13.5px;padding:20px 4px}

/* ── ads ─────────────────────────────────────────────── */
.ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ad{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.ad .adimg{height:150px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.ad .adimg img{max-height:150px;max-width:100%;object-fit:contain}
.ad .adbody{padding:13px 16px 15px}
.ad .adv{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.ad b{font-size:14px;display:block;margin-top:3px}
.ad p{font-size:12.5px;color:var(--ink-2);margin:6px 0 0;max-height:76px;overflow:hidden}
.ad .lbl{font-size:10px;font-weight:700;color:var(--ink-3);margin-top:9px;letter-spacing:.05em}

/* ── home ────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;
  background:linear-gradient(115deg,var(--pfp-800),var(--pfp-700) 66%,var(--pfp-600));
  border-radius:20px;color:#fff;padding:34px 36px;margin-bottom:24px;
}
.hero h1{font-size:35px;margin:0 0 10px;line-height:1.12}
.hero h1 em{color:var(--lime);font-style:normal}
.hero p{font-size:15.5px;opacity:.92;max-width:46ch;margin:0}
.hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.hero .tags span{background:rgba(255,255,255,.15);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
.hero .cover{border-radius:12px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.34);max-width:288px;justify-self:end}
.hero .cover img{width:100%;display:block}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .k-l{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:13px}
.catcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);overflow:hidden;display:block;
}
.catcard:hover{transform:translateY(-2px);transition:transform .15s}
.catcard .cc-top{height:5px}
.catcard .cc-in{padding:14px 16px 15px}
.catcard .cc-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.catcard .cc-m{font-size:12px;color:var(--ink-3);margin-top:6px}
.iconkey{
  display:flex;flex-direction:column;max-width:760px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
}
.iconkey .ik{display:flex;gap:14px;align-items:baseline;padding:12px 16px;font-size:13.5px;color:var(--ink-2)}
.iconkey .ik+.ik{border-top:1px solid var(--surface-2)}
.iconkey .bdg{flex:0 0 auto;width:78px;text-align:center}

.prose{max-width:80ch}
.prose h1{font-size:23px;margin:0 0 10px;color:var(--accent)}
.prose h2{font-size:18px;margin:22px 0 6px;color:var(--accent)}
.prose h3{font-size:15px;margin:16px 0 4px}
.prose p{margin:8px 0;color:var(--ink-2)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin-bottom:16px}
.depot-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.btn{
  display:inline-block;background:var(--pfp-700);color:#fff;text-decoration:none;font-weight:600;
  font-size:13.5px;padding:10px 18px;border-radius:9px;margin:5px 8px 0 0;
}
.btn:hover{background:var(--pfp-800)}
.btn.ghost{background:none;border:1.5px solid var(--pfp-700);color:var(--pfp-700)}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(8,20,13,.85);z-index:60;display:flex;align-items:center;justify-content:center;padding:28px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(94vw,940px);max-height:92vh;border-radius:10px;background:#fff}
.lightbox-close{position:absolute;top:14px;right:20px;background:none;border:none;color:#fff;font-size:26px;cursor:pointer}

@media (max-width:1080px){
  .shelf-wrap{grid-template-columns:1fr}
  .shelf-side{position:static;flex-direction:row;flex-wrap:wrap}
  .shelf-side .panel{flex:1;min-width:210px}
  .block-body{grid-template-columns:1fr}
  .tips{border-left:none;border-top:1px solid var(--line)}
  .depot-wrap{grid-template-columns:1fr}
}
@media (max-width:880px){
  .sidebar{position:fixed;z-index:50;transform:translateX(-100%);transition:transform .2s;width:262px}
  .sidebar.open{transform:none}
  .menu-toggle{
    display:block;position:fixed;z-index:51;top:12px;left:12px;background:var(--pfp-800);color:#fff;
    border:none;border-radius:9px;font-size:17px;padding:8px 12px;cursor:pointer;
  }
  .content{padding:60px 16px 44px}
  .hero{grid-template-columns:1fr;padding:26px 22px}
  .hero .cover{display:none}
  .hero h1{font-size:27px}
  .insight-card{grid-column:span 1}
}

/* ── depot detail panel (selected pin) ───────────────── */
.depot-side{display:flex;flex-direction:column;gap:16px}
.depot-detail{margin-bottom:0}
.depot-detail.empty h3{margin:0 0 6px;font-size:14px;color:var(--ink-2)}
.dd-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.dd-num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--ext);color:#fff;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.dd-head b{font-size:15.5px}
.dd-table{width:100%;border-collapse:collapse;font-size:13px}
.dd-table th{
  text-align:left;font-weight:600;color:var(--ink-3);padding:6px 10px 6px 0;
  white-space:nowrap;vertical-align:top;width:44%;
}
.dd-table td{padding:6px 0;color:var(--ink);vertical-align:top}
.dd-table tr+tr th,.dd-table tr+tr td{border-top:1px solid var(--surface-2)}
.approx{color:var(--ink-3);font-weight:400}
.dd-warn{
  margin-top:12px;padding:10px 12px;border-radius:9px;background:#fff8e6;
  border:1px solid #f0dfae;font-size:12px;line-height:1.5;color:#6b5310;
}

/* ── real basemap (Leaflet + OSM) ─────────────────────── */
.leafmap{
  width:100%;height:min(74vh,760px);border-radius:10px;overflow:hidden;
  background:var(--surface-2);
}
.leaflet-container{font:inherit;background:#e8eef0}
/* numbered PfP pin, styled to match the guide rather than Leaflet's default blue marker */
.depot-marker{background:none;border:none}
.depot-marker span{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50% 50% 50% 50%;background:var(--ext);color:#fff;font-size:12px;font-weight:800;
  border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .12s,background .12s;
}
.depot-marker:hover span{transform:scale(1.18);background:var(--pfp-700)}
.depot-marker.sel span{
  background:var(--pfp-700);transform:scale(1.28);
  box-shadow:0 0 0 5px rgba(46,139,87,.35),0 2px 6px rgba(0,0,0,.35);
}
.leaflet-control-attribution{font-size:10.5px}

/* ── Retailer Toolkit ─────────────────────────────────────
   The programme's own services, gathered from five scattered print advertorials. */
.tk-lede{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tk-lede .prose{flex:1;min-width:260px}
.tk-lede .prose p{margin:0}

.tk-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tk-pillar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 14px;display:flex;flex-direction:column;gap:5px;text-align:center;
}
.tk-pillar-icon{font-size:26px;line-height:1}
.tk-pillar b{font-size:13.5px}
.tk-pillar-note{font-size:12px;color:var(--ink-2);line-height:1.4}

.tk-service{
  display:grid;grid-template-columns:1fr 340px;gap:0;align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.tk-body{padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tk-body h3{margin:0;font-size:19px;color:var(--accent)}
.tk-body h3 em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-3);margin-left:8px;white-space:nowrap}
.tk-body p{margin:0;color:var(--ink-2);font-size:14px}
.tk-body ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tk-body li{font-size:13.5px;color:var(--ink);padding-left:24px;position:relative;line-height:1.45}
.tk-points li:before{content:'◆';position:absolute;left:2px;color:var(--pfp-600);font-size:11px;top:2px}
.tk-outputs li:before{content:'🖨';position:absolute;left:0;font-size:13px}
.tk-steps{counter-reset:tkstep}
.tk-steps li{counter-increment:tkstep}
.tk-steps li:before{
  content:counter(tkstep);position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;
  background:var(--pfp-600);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;
}
.tk-body .btn{margin-top:6px}
.tk-src{font-size:11px;color:var(--ink-3)}

.tk-art{
  position:relative;display:flex;align-items:center;justify-content:center;padding:16px;
  background:var(--surface-2);border-left:1px solid var(--line);overflow:hidden;
  text-decoration:none;cursor:pointer;
}
/* Only the print-artwork tiles get the light hover wash. The two coloured tiles (live map, and
   the tools with no artwork) carry white text, so washing their background out made the label
   unreadable — they just take the pointer cursor. */
.tk-art:not(.tk-art-live):not(.tk-art-plain):hover{background:var(--surface-3)}
.tk-art img{transition:transform .18s}
.tk-art:hover img{transform:scale(1.02)}
/* the artwork is a link to the live service — say so on hover */
.tk-art-go{
  position:absolute;left:10px;right:10px;bottom:10px;padding:7px 10px;border-radius:8px;
  background:rgba(18,61,40,.92);color:#fff;font-size:11.5px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s;
}
.tk-art:hover .tk-art-go,.tk-art:focus-visible .tk-art-go{opacity:1;transform:none}
.tk-art-plain{
  flex-direction:column;gap:10px;text-align:center;
  background:linear-gradient(160deg,#2b4a63,#16293a);color:#fff;
}
.tk-art-plain .tk-live-note{font-size:13px;font-weight:600;opacity:.95}
.tk-art img{
  max-width:100%;max-height:400px;width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:0 2px 10px rgba(18,30,24,.16);
}
.tk-art-live{
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:22px;text-align:center;text-decoration:none;
  background:linear-gradient(160deg,var(--pfp-700),var(--pfp-900));color:#fff;
}
.tk-live-badge{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:4px 9px;border-radius:999px}
.tk-live-icon{font-size:34px}
.tk-live-note{font-size:12.5px;opacity:.85;line-height:1.4}

/* teaser on The Guide page */
.tk-teaser{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 20px;
}
.tk-teaser:hover{border-color:var(--pfp-600)}
.tk-teaser-icons{display:flex;gap:2px;font-size:20px;flex:0 0 auto}
.tk-teaser b{display:block;font-size:15px;color:var(--accent)}
.tk-teaser p{margin:3px 0 0;font-size:13px;color:var(--ink-2)}
.tk-teaser-go{margin-left:auto;font-size:22px;color:var(--pfp-600);flex:0 0 auto}

@media (max-width:900px){
  .tk-service{grid-template-columns:1fr}
  .tk-art{border-left:0;border-top:1px solid var(--line)}
  .tk-art img{max-height:320px}
}
/* ── the guide ─────────────────────────────────────────────
   The page's content is a lede, two numbered four-step frameworks and a set of sources. It used to
   render as three identical white cards of undifferentiated prose; this gives each of those parts
   its own shape, and puts the guide's own cover, tagline and edition to work in a hero. */
.gd-hero{
  display:grid;grid-template-columns:184px 1fr;gap:26px;align-items:center;
  background:linear-gradient(135deg,var(--pfp-800),var(--pfp-700) 62%,var(--accent));
  color:#fff;border-radius:18px;padding:26px 30px;margin-bottom:26px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.45);
}
.gd-cover{
  width:100%;border-radius:10px;display:block;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);
  transform:rotate(-1.6deg);   /* a printed guide, laid on the page rather than pasted flat */
}
.gd-ed{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:4px 11px;margin-bottom:11px;
}
.gd-hero-t h1{margin:0;font-size:31px;line-height:1.13;letter-spacing:-.015em;font-weight:800}
.gd-tag{margin:11px 0 0;font-size:15.5px;line-height:1.45;opacity:.93;max-width:52ch}
.gd-by{display:flex;flex-wrap:wrap;gap:8px 16px;margin:15px 0 17px;font-size:12.5px;opacity:.85}
.gd-by .gd-pub{padding-left:16px;border-left:1px solid rgba(255,255,255,.3)}
.gd-hero-t .btn.ghost{border-color:rgba(255,255,255,.55);color:#fff}
.gd-hero-t .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* the opening paragraph carries the whole guide's purpose — set it as a lede, not body copy */
.gd-lede{
  font-size:17.5px;line-height:1.55;color:var(--ink);margin:0 0 22px;max-width:74ch;
  padding-left:16px;border-left:3px solid var(--pfp-600);
}
.gd-method{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 22px;margin-bottom:26px;box-shadow:var(--shadow);
}
.gd-method h2{margin:0 0 8px;font-size:15px;letter-spacing:.01em}
.gd-method p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ── a numbered framework ── */
.gd-block{margin:34px 0}
.gd-block-h{margin-bottom:16px;padding-bottom:11px;border-bottom:2px solid var(--surface-3)}
.gd-block-h h2{
  margin:0;font-size:17px;font-weight:800;letter-spacing:.055em;line-height:1.25;color:var(--accent);
}
.gd-block-lede p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:80ch}
.gd-steps{
  list-style:none;margin:0;padding:0;
  /* min(400px,100%): a bare 400px min is wider than a 390px phone, which forced the whole page
     to scroll sideways. This still gives two cards per row on a desktop and one on a phone. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:14px;
  /* Every step card the same size. `grid-auto-rows:1fr` levels the ROWS as well as the columns, so
     all four match the tallest rather than only matching their own row-mate. The content sits at the
     top of each card and the slack falls to the bottom, which keeps the numbers on one baseline. */
  grid-auto-rows:1fr;align-items:stretch;
}
.gd-step{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px 18px 20px;box-shadow:var(--shadow);
  display:flex;gap:14px;align-items:flex-start;
}
/* the number is the step's identity in print, so it stays a numeral rather than a bullet */
.gd-step-n{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-size:16px;font-weight:800;
  color:#fff;background:linear-gradient(150deg,var(--pfp-700),var(--accent));
  font-variant-numeric:tabular-nums;
}
.gd-step-body{min-width:0;flex:1}
.gd-step-body h3{margin:5px 0 10px;font-size:14.5px;line-height:1.3;color:var(--ink)}
.gd-step-body p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.gd-step-body .stat{grid-template-columns:86px 1fr;gap:14px;margin:10px 0 0}
.gd-step-body .fig .lead{font-size:29px}
.gd-step-body .fig.w-md .lead{font-size:24px}
.gd-step-body .fig.w-lg .lead{font-size:20px}
.gd-step-body .say{font-size:13px;line-height:1.5}
/* a sub-heading inside a step ("Top pricing strategies") */
.gd-label{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 2px;
}
.gd-label:first-child{margin-top:2px}
.gnum{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.gd-notes{margin-top:14px}
.gd-notes p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.gd-fn{margin-top:14px}

/* ── depot + programme reach ── */
.gd-depot{
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:var(--pfp-100);border:1px solid var(--pfp-600);border-radius:16px;padding:22px 26px;
  margin:30px 0;
}
.gd-depot h2{margin:0 0 8px;font-size:16px;color:var(--pfp-800)}
.gd-depot p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:#1c3a29;max-width:66ch}
.gd-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.gd-tp{text-align:right;flex:0 0 auto}
.gd-tp-l{
  display:block;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pfp-800);opacity:.75;margin-bottom:8px;
}
.gd-tp div{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:230px}

.gd-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.gd-foot .note{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.gd-foot .note a{color:var(--accent);font-weight:600}
.gd-res{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12.5px}
.gd-res a{color:var(--accent);font-weight:600}
.gd-res span{color:var(--ink-3)}

@media (max-width:820px){
  .gd-hero{grid-template-columns:1fr;gap:18px;padding:22px}
  .gd-cover{max-width:190px;transform:none}
  .gd-hero-t h1{font-size:25px}
  .gd-depot{grid-template-columns:1fr}
  .gd-tp{text-align:left}
  .gd-tp div{justify-content:flex-start;max-width:none}
}

/* ── supplier advertorials in the product grid ─────────────
   Single image, as printed. Spans the grid so a full-page advert is legible, and always carries
   an "Advertisement" flag plus the advertiser's name — several of these adverts imitate the
   guide's own editorial, and the label is what tells the reader whose voice it is. */
/* Grid rather than flex, with an explicit `minmax(0,1fr)` image track. In a flex column the wrap
   had no definite height, so the image's percentage max-height resolved to none, it rendered at
   natural size and the card bled past the bottom of its grid track. A 1fr track is definite, so
   the image is bounded by the tile. */
.ad-card{
  margin:0;padding:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;
}
/* Two tile sizes only. placeAds() writes an explicit grid-area on every tile; these spans are the
   no-JS fallback. The artwork is fitted inside its tile — letterboxed if its shape differs — because
   cropping an advert would remove content someone paid to publish. */
.ad-card.ad-2x2{grid-column:span 2;grid-row:span 2}
.ad-card.ad-2x1{grid-column:span 2;grid-row:span 1}
.ad-card{align-self:stretch}
.ad-card .ad-img-wrap{min-height:0;min-width:0;overflow:hidden}
.ad-meta{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.ad-flag{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--ink-3);border-radius:999px;padding:3px 8px;
}
.ad-adv{font-size:13px;font-weight:700;color:var(--ink)}
.ad-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.ad-noimg{padding:26px 18px;text-align:center;color:var(--ink-2);font-size:14px}
/* Every tile fills its row track, so all bottom edges land on the same line. Leaving product
   cards at `align-self:start` let a 205px card sit inside a 229px track while the advert beside it
   stretched to the full track — so the advert appeared to hang 24px below its neighbours. The card
   footer is already `margin-top:auto`, so the extra height pushes the chips down rather than
   leaving a gap mid-card. */
.pgrid > .pcard{align-self:stretch}
@media (max-width:700px){ .ad-card.ad-2x2,.ad-card.ad-2x1{grid-column:1/-1} }

/* the mini-insight cards, now on the Category insights tab */
.ic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.insight-card.ic-wide{margin:0}

/* adverts placed on the Category insights or Shelf layout tab, outside the product grid */
.ad-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:18px}
.ad-strip .ad-card{grid-column:auto;grid-row:auto}
.ad-strip .ad-card{grid-template-rows:auto auto}
.ad-strip .ad-card img{height:auto;max-height:420px;object-fit:contain}

/* the home page's pointer at the guide's first framework, in place of restating it */
.why-teaser{
  display:flex;gap:18px;align-items:center;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;box-shadow:var(--shadow);
}
.why-teaser:hover{border-color:var(--pfp-600)}
.why-teaser b{display:block;font-size:15px;color:var(--accent);letter-spacing:.03em}
.why-teaser p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.why-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.why-steps span{
  font-size:11px;font-weight:700;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}


/* ── the product behind a shelf facing ─────────────────────────
   Opens over the fixture rather than navigating away, so the reader keeps their place on the shelf
   they were reading. Every facing opens: the ones with no core-range match still have their own pack
   shot and annotation, and showing what is known beats a click that does nothing. */
.pmodal{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;
  background:rgba(10,20,14,.55);backdrop-filter:blur(2px);
}
/* REQUIRED, not optional: `display:grid` on a class outranks the browser's own
   `[hidden]{display:none}`, so without this the panel is on screen — empty — from page load. */
.pmodal[hidden]{display:none}
.pmodal-box{
  position:relative;background:var(--surface);border-radius:16px;padding:24px 26px;
  width:min(520px,100%);max-height:88vh;overflow-y:auto;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.5);
}
.pmodal-close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  font-size:14px;cursor:pointer;line-height:1;
}
.pmodal-close:hover{background:var(--surface-3);color:var(--ink)}
.pm-head{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center}
.pm-img{
  height:132px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;padding:10px;
}
.pm-img img{max-width:100%;max-height:112px;object-fit:contain}
.pm-img .noimg{color:var(--ink-3);font-size:30px}
.pm-brand{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pm-head h3{margin:3px 0 0;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.pm-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.pm-badges:empty{display:none}
.pm-cat{margin-top:9px;font-size:12px;color:var(--ink-3)}
.pm-rows{
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2);
}
.pm-k{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.pm-go,.pm-shelf{display:inline-block;margin-top:20px;text-decoration:none}
.pm-note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
@media (max-width:520px){
  .pm-head{grid-template-columns:1fr;gap:14px}
  .pm-img{height:150px}
}

/* Placeholder depot data, stated up front. Amber rather than a quiet note: the addresses and phone
   numbers below are invented, and a retailer must not ring one thinking it is a real depot. */
.depot-banner{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  background:#fff8e6;border:1px solid #e8c76a;border-left:4px solid #d99b1c;border-radius:10px;
  padding:13px 16px;font-size:13px;line-height:1.55;color:#6b4a06;
}
.depot-banner::before{content:'⚠';font-size:15px;line-height:1.2;flex:0 0 auto}