/* GENERATED by powerstore/jobs/_build_pro_css.py — edit the _pro_*.css partials. */

/* ===== _pro_base.css ===== */
/* ============================================================================
   Powerstore — "Precision" (design 4, key `pro`, class prefix p-). BASE partial.
   Dan, 24 Sep 2026: "Sleek minimalistic design · Professional B2B feel · Easy and
   intuitive to navigate · Keep Cummins colours." Desktop-first: judged at 1440x900.
   Spec (tokens copied exactly): data/cummins-powerstore/design-v4/SPEC.md.

   This partial (builder A): tokens, fonts, reset, type, the shell (red strip, top bar,
   sidebar, main, footer, phone drawer + bottom bar), form controls, the focus ring,
   and every SHARED component. jobs/_build_pro_css.py joins it FIRST into pro.css, so
   _pro_shop.css and _pro_admin.css may refine anything here by coming later.

   The rules that decide arguments (SPEC § Principles):
   - ~90% neutral. Cummins red only on: the ONE primary button per view, the active nav
     marker, the basket count badge, the 3px strip. Never an error colour, never stock.
   - Hierarchy from weight and grey, not size jumps. Inter 400/500/600; Plex Mono 400
     only for codes. Tabular numerals on every price, qty and stock figure.
   - Every gap from 4 8 12 16 24 32 48 64. Border OR shadow, never both heavily.
   - Status = colour + word. Motion 120-200ms, opacity/transform only.

   Component vocabulary (what B and C can rely on):
     buttons   .p-btn (secondary) · .p-btn-go / .p-btn.primary (red) · .p-btn-ghost
               (= secondary, the templates' word for it) · .p-btn.ghost / .p-btn-text
               (text only) · .p-btn.danger / .p-btn-danger · .p-btn-sm / .sm (32px) ·
               default 40px · .p-btn-lg / .lg (48px) · .block · .on (selected)
     layout    .p-head (+ .p-lede) · .p-card · .p-section · .p-split · .p-narrow ·
               .p-row (.tight) · .p-stack · .p-kpis/.p-kpi · .p-auth · .p-empty
     forms     label · input/select/textarea (40px) · fieldset/legend · .p-field ·
               .p-tick · .p-hint
     data      table / .p-table + .p-table-wrap (.p-fits is set by the shell script) ·
               th.num/td.num ·
               .p-chip (+ status and stock words) · .p-badge (.sig) · .p-dot
     text      .p-plate (eyebrow/section label) · .p-bigpts · .p-back · .p-crumbs ·
               .p-flash (ok/err/info) · .p-feats · u-small u-muted u-mono u-sr u-sig
               u-right num tight on on-dark
     shell     .p-top/.p-topbar/.p-logo/.p-co/.p-basket/.p-acct/.p-panel/.p-seg ·
               .p-rail/.p-gauge/.p-dial/.p-nav/.p-navlabel · .p-main/.p-wrap/.p-foot ·
               .p-bottom · .p-sticky-buy (phone only)
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}

/* ------------------------------------------------------------------ tokens */
:root{
  /* colour — SPEC § Tokens, exact */
  --p-red:#DA291C;          /* Pantone 485C. 4.87:1 on #FFF — red TEXT only on pure white */
  --p-red-hover:#A1140A;    /* Cummins' own hover red, 8.02:1 */
  --p-red-press:#680F14;
  --p-ink:#111827;          /* main text, selected states, focus ring */
  --p-ink-2:#374151;        /* strong secondary */
  --p-muted:#6B7280;        /* secondary text 4.83:1 */
  --p-line:#E5E7EB;         /* dividers, card borders */
  --p-line-strong:#8A8F98;  /* input/control borders, >=3:1 */
  --p-bg:#FAFAFA;           /* page */
  --p-surface:#FFFFFF;      /* cards, bars, tables */
  --p-plate:#F4F4F5;        /* image plates, subtle fills (never under red text) */
  --p-ok:#15803D;   --p-ok-wash:#F0FDF4;    /* in stock */
  --p-warn:#B45309; --p-warn-wash:#FFFBEB;  /* low stock, pre-order, awaiting */
  --p-err:#B42318;  --p-err-wash:#FEF3F2;   /* errors ONLY */
  --p-info:#1D4ED8; --p-info-wash:#EFF6FF;

  /* radius */
  --p-r-tag:4px; --p-r:6px; --p-r-card:8px; --p-r-modal:12px;

  /* shadow — only on things that float */
  --p-sh-menu:0 4px 6px -2px rgba(17,24,39,.16), 0 12px 24px -8px rgba(17,24,39,.12);
  --p-sh-float:0 -4px 16px rgba(17,24,39,.08);

  /* type — one family; mono for codes only */
  --p-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --p-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --p-fs-sm:12px;   --p-lh-sm:16px;    /* small */
  --p-fs-ui:14px;   --p-lh-ui:20px;    /* UI default */
  --p-fs-lbl:13px;  --p-lh-lbl:18px;   /* form label, hint */
  --p-fs-body:16px; --p-lh-body:24px;  /* body copy */
  --p-fs-card:18px; --p-lh-card:24px;  /* card title */
  --p-fs-sect:20px; --p-lh-sect:28px;  /* section head */
  --p-fs-page:24px; --p-lh-page:32px;  /* page title (-0.2px) */

  /* space — the only gaps allowed */
  --p-s1:4px; --p-s2:8px; --p-s3:12px; --p-s4:16px;
  --p-s5:24px; --p-s6:32px; --p-s7:48px; --p-s8:64px;

  /* shell */
  --p-strip:3px; --p-bar:64px;
  --p-top-h:68px;           /* strip 3 + bar 64 + rule 1: where sticky things start */
  --p-side:248px;
  --p-ease:cubic-bezier(.2,0,0,1);
  --p-fast:120ms; --p-med:200ms;

  /* ALIASES for the inline var()s the seeded templates carry. Every one must resolve or
     an inline style renders with no value (Workshop Warm shipped a broken --edge once). */
  --sig:var(--p-red);
  --stop:var(--p-err);
  --edge:var(--p-line);
  --r:var(--p-r);
  --t-big:var(--p-fs-page);
  --display:var(--p-font);
  --body:var(--p-font);
  --mono:var(--p-mono);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;
  scroll-padding-top:calc(var(--p-top-h) + var(--p-s4))}
body{margin:0;min-height:100vh;background:var(--p-bg);color:var(--p-ink);
  font-family:var(--p-font);font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;border:0}
svg{flex-shrink:0}
form{margin:0}
button{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--p-line);margin:var(--p-s5) 0}
small{font-size:var(--p-fs-sm);line-height:var(--p-lh-sm)}
b,strong{font-weight:600}
code,kbd,samp{font-family:var(--p-mono);font-size:.93em}
a,button,label,summary,input,select,textarea,[role=button]{touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(17,24,39,.08)}

/* The one focus ring, everywhere, never removed: 2px ink, 2px off the edge. */
:focus-visible{outline:2px solid var(--p-ink);outline-offset:2px}
.p-main:focus,.p-main:focus-visible{outline:none}     /* the skip-link target is a container */

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4{margin:0;color:var(--p-ink);font-weight:600;text-wrap:balance}
h1{font-size:var(--p-fs-page);line-height:var(--p-lh-page);letter-spacing:-.2px}
h2{font-size:var(--p-fs-sect);line-height:var(--p-lh-sect);letter-spacing:-.1px}
h3{font-size:var(--p-fs-body);line-height:var(--p-lh-body)}
h4{font-size:var(--p-fs-ui);line-height:var(--p-lh-ui)}
p{margin:0 0 var(--p-s3)}
p:last-child{margin-bottom:0}

a{color:var(--p-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:rgba(17,24,39,.3);
  transition:text-decoration-color var(--p-fast) var(--p-ease)}
a:hover{text-decoration-color:currentColor}

/* utilities the templates share (unprefixed on purpose — every design styles them) */
.u-small{font-size:var(--p-fs-sm);line-height:var(--p-lh-sm)}
.u-muted{color:var(--p-muted)}
.u-mono{font-family:var(--p-mono);font-size:.93em;font-weight:400;letter-spacing:0;
  font-variant-numeric:tabular-nums}
.u-mono.u-small{font-size:var(--p-fs-sm)}
.u-small .u-mono{font-size:1em}
.u-sig{color:var(--p-warn);font-weight:600}        /* attention, not alarm — red is not a signal here */
.u-right{text-align:right}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}
.on-dark{color:#FFFFFF}                            /* only ever on a dark surface */

/* ------------------------------------------------------------------ skip link */
.p-skip{position:absolute;left:var(--p-s4);top:-64px;z-index:100;padding:var(--p-s2) var(--p-s4);
  background:var(--p-ink);color:#FFFFFF;border-radius:var(--p-r);font-weight:500;text-decoration:none;
  transition:transform var(--p-fast) var(--p-ease)}
.p-skip:focus{transform:translateY(76px)}

/* ==================================================================== SHELL */

/* ---- the strip + top bar: 3px Cummins red, then 64px of white with a hairline */
.p-top{position:sticky;top:0;z-index:40;background:var(--p-surface);
  border-top:var(--p-strip) solid var(--p-red);border-bottom:1px solid var(--p-line)}
.p-topbar{height:var(--p-bar);display:flex;align-items:center;padding:0 var(--p-s5)}

.p-logo{display:flex;align-items:center;flex-shrink:0;margin-right:var(--p-s5);
  border-radius:var(--p-r);text-decoration:none}
.p-logo img{display:block;height:36px;width:auto}

/* Co-brand: a thin rule, then the customer's mark with clear space either side of it,
   then the product name. The Cummins mark is never recoloured or boxed. */
.p-co{display:flex;align-items:center;gap:var(--p-s4);min-width:0;height:32px;
  padding-left:var(--p-s6);border-left:1px solid var(--p-line)}
.p-co img{display:block;height:28px;width:auto}
.p-co b{font-size:var(--p-fs-body);line-height:var(--p-lh-body);font-weight:600;color:var(--p-ink);
  letter-spacing:-.1px;white-space:nowrap}
.p-co .p-co-name{font-weight:500;color:var(--p-ink-2);overflow:hidden;text-overflow:ellipsis}

.p-tr{margin-left:auto;display:flex;align-items:center;gap:var(--p-s2)}

/* basket link: a text label, not an icon on its own; the count is the red badge */
.p-basket{display:inline-flex;align-items:center;gap:var(--p-s2);height:40px;padding:0 var(--p-s3);
  border-radius:var(--p-r);color:var(--p-ink-2);font-weight:500;text-decoration:none;
  transition:background-color var(--p-fast) var(--p-ease),color var(--p-fast) var(--p-ease)}
.p-basket:hover{background:var(--p-plate);color:var(--p-ink)}
.p-basket.on{color:var(--p-ink);font-weight:600}
.p-basket svg{display:block;width:20px;height:20px}

/* ---- account menu: <details class="p-acct"> — no script needed to open it */
.p-acct{position:relative}
.p-acct>summary{position:relative;list-style:none;display:flex;align-items:center;gap:var(--p-s3);height:48px;
  padding:0 var(--p-s2) 0 var(--p-s2);border-radius:var(--p-r);cursor:pointer;user-select:none;
  transition:background-color var(--p-fast) var(--p-ease)}
.p-acct>summary::-webkit-details-marker{display:none}
.p-acct>summary::marker{content:""}
.p-acct>summary:hover,.p-acct[open]>summary{background:var(--p-plate)}
.p-acct .av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--p-plate);border:1px solid var(--p-line);color:var(--p-ink-2);
  font-size:var(--p-fs-sm);line-height:1;font-weight:600;letter-spacing:.2px}
.p-acct>summary:hover .av,.p-acct[open] .av{background:var(--p-surface)}
.p-acct .who{display:flex;flex-direction:column;min-width:0;text-align:left}
.p-acct .who b{font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);font-weight:500;color:var(--p-ink);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-acct .who span{font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-acct .chev{display:block;width:16px;height:16px;color:var(--p-muted);
  transition:transform var(--p-med) var(--p-ease)}
.p-acct .chev svg{display:block;width:16px;height:16px}
.p-acct[open] .chev{transform:rotate(180deg)}
/* The summed to-do count becomes a small red DOT on the avatar: "something needs you".
   The numbers themselves are in the sidebar and the menu; the figure stays in the DOM for
   a screen reader. */
.p-acct>summary .p-badge{position:absolute;top:var(--p-s2);left:34px;width:10px;min-width:0;height:10px;
  padding:0;border-radius:50%;background:var(--p-red);box-shadow:0 0 0 2px var(--p-surface);
  font-size:0;line-height:0;color:transparent;overflow:hidden}
.p-acct>summary:hover .p-badge,.p-acct[open]>summary .p-badge{box-shadow:0 0 0 2px var(--p-plate)}

.p-panel{position:absolute;right:0;top:calc(100% + var(--p-s2));z-index:50;width:320px;
  max-height:calc(100vh - var(--p-top-h) - var(--p-s5));overflow:auto;overscroll-behavior:contain;
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card);
  box-shadow:var(--p-sh-menu);padding:var(--p-s2)}
.p-acct[open] .p-panel{animation:p-pop var(--p-med) var(--p-ease)}
@keyframes p-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.p-panel .head{display:flex;flex-direction:column;gap:2px;
  margin:calc(-1 * var(--p-s2)) calc(-1 * var(--p-s2)) var(--p-s2);
  padding:var(--p-s4) var(--p-s5) var(--p-s3);border-bottom:1px solid var(--p-line)}
.p-panel .head b{font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);font-weight:600;color:var(--p-ink);
  overflow-wrap:anywhere}
.p-panel .head span{overflow-wrap:anywhere}
.p-panel a{display:flex;align-items:center;justify-content:space-between;gap:var(--p-s2);
  min-height:36px;padding:var(--p-s2) var(--p-s3);border-radius:var(--p-r);color:var(--p-ink-2);
  font-weight:500;text-decoration:none;transition:background-color var(--p-fast) var(--p-ease)}
.p-panel a:hover{background:var(--p-plate);color:var(--p-ink)}
.p-panel a.on{background:var(--p-plate);color:var(--p-ink);font-weight:600}
/* section labels in the menu: small grey sentence case (Linear), a hairline above */
.p-panel .p-plate{margin:var(--p-s2) calc(-1 * var(--p-s2)) 0;padding:var(--p-s3) var(--p-s5) var(--p-s1);
  border-top:1px solid var(--p-line);text-transform:none;letter-spacing:0}
.p-panel .head+.p-plate{margin-top:0;border-top:0;padding-top:var(--p-s1)}

/* View as / Design: 2x2 segmented grids, selected = near-black fill. Two short grids
   instead of eight rows keep the whole menu inside a 900px-tall screen. */
.p-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-s1);margin:0;
  padding:var(--p-s1) var(--p-s3) var(--p-s2)}
.p-seg button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:36px;
  padding:var(--p-s2);border:1px solid var(--p-line);border-radius:var(--p-r);background:var(--p-surface);
  color:var(--p-ink-2);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);font-weight:500;text-align:center;
  cursor:pointer;transition:border-color var(--p-fast) var(--p-ease),background-color var(--p-fast) var(--p-ease)}
.p-seg button:hover{border-color:var(--p-line-strong);color:var(--p-ink)}
.p-seg button.on{background:var(--p-ink);border-color:var(--p-ink);color:#FFFFFF;font-weight:600}

.p-signout{margin:var(--p-s2) calc(-1 * var(--p-s2)) calc(-1 * var(--p-s2));padding:var(--p-s2);
  border-top:1px solid var(--p-line)}

/* ---- the frame: [sidebar | body]. The shell paints the sidebar COLUMN (white + the
   hairline) for its full height, so the column never stops short of a long page — the
   sticky rail itself is only one screen tall. */
.p-shell{display:block}
.p-shell.has-rail{display:grid;grid-template-columns:var(--p-side) minmax(0,1fr);align-items:start;
  background:linear-gradient(90deg,var(--p-surface) 0 calc(var(--p-side) - 1px),
    var(--p-line) calc(var(--p-side) - 1px) var(--p-side),transparent var(--p-side))}
.p-shell.has-rail>.p-rail{grid-column:1}
.p-shell.has-rail>.p-body{grid-column:2}
.p-scrim{display:none}          /* phone-only overlay; kept out of the grid everywhere else */
.p-body{min-width:0;min-height:calc(100vh - var(--p-top-h));display:flex;flex-direction:column}

/* ---- sidebar: white, hairline right, sticky under the top bar. Hierarchy by grey shade,
   not colour (Linear): grey group labels, ink-2 items, ink + 600 for the current page.
   When it is taller than the screen (Danetre, mid-order) it scrolls inside itself and a
   soft shadow at the top/bottom edge says there is more — the four background layers are
   the no-script scroll-shadow technique (covers scroll WITH the content, shadows don't). */
.p-rail{position:sticky;top:var(--p-top-h);height:calc(100vh - var(--p-top-h));overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;border-right:1px solid var(--p-line);
  padding:var(--p-s4) var(--p-s3) var(--p-s6);
  background-color:var(--p-surface);
  background-image:linear-gradient(var(--p-surface) 30%,rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0),var(--p-surface) 70%),
    radial-gradient(farthest-side at 50% 0,rgba(17,24,39,.12),rgba(17,24,39,0)),
    radial-gradient(farthest-side at 50% 100%,rgba(17,24,39,.12),rgba(17,24,39,0));
  background-position:center top,center bottom,center top,center bottom;
  background-size:100% 40px,100% 40px,100% 12px,100% 12px;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
.p-nav{display:flex;flex-direction:column}
.p-navlabel{margin:var(--p-s5) 0 var(--p-s1);padding:0 var(--p-s3);font-size:var(--p-fs-sm);
  line-height:var(--p-lh-sm);font-weight:500;color:var(--p-muted)}
.p-nav>.p-navlabel:first-child{margin-top:var(--p-s1)}
.p-nav a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--p-s2);
  min-height:40px;padding:var(--p-s2) var(--p-s3);border-radius:var(--p-r);color:var(--p-ink-2);
  font-weight:500;text-decoration:none;
  transition:background-color var(--p-fast) var(--p-ease),color var(--p-fast) var(--p-ease)}
.p-nav a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-nav a:hover{background:var(--p-plate);color:var(--p-ink)}
.p-nav a.on{background:var(--p-plate);color:var(--p-ink);font-weight:600}
.p-nav a.on::before{content:"";position:absolute;left:0;top:var(--p-s2);bottom:var(--p-s2);width:3px;
  border-radius:0 2px 2px 0;background:var(--p-red)}
.p-nav a:hover .p-badge:not(.sig),.p-nav a.on .p-badge:not(.sig){background:var(--p-surface)}

/* ---- the order in progress: a compact card at the top of the sidebar, on every page —
   "Ordering for · Cancel order", the name, "X of Y points left", the bar. */
.p-gauge{margin:0 0 var(--p-s2);padding:var(--p-s3);background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:var(--p-r-card)}
.p-gauge .top{display:flex;align-items:center;justify-content:space-between;gap:var(--p-s2)}
.p-gauge .p-plate{margin:0;text-transform:none;letter-spacing:0}
.p-gauge .cancel{display:flex}
.p-gauge .cancel button{height:auto;padding:0;border:0;background:none;color:var(--p-muted);
  font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);font-weight:500;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;
  transition:color var(--p-fast) var(--p-ease),text-decoration-color var(--p-fast) var(--p-ease)}
.p-gauge .cancel button:hover{color:var(--p-ink);text-decoration-color:currentColor}
.p-gauge .who{margin-top:2px;font-weight:600;color:var(--p-ink);overflow-wrap:anywhere}
.p-gauge .who .p-chip{margin-left:var(--p-s1)}
.p-gauge .read{margin-top:var(--p-s2);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-muted)}
.p-gauge .read b{font-size:var(--p-fs-body);font-weight:600;color:var(--p-ink);font-variant-numeric:tabular-nums}
.p-gauge .read.over b{color:var(--p-err)}
.p-gauge .foot{margin-top:var(--p-s2);font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted);
  font-variant-numeric:tabular-nums}
.p-gauge .p-hint{margin-top:var(--p-s2)}

/* the bar: track = what is still free; ink = already spent; hatched = in the basket */
.p-dial{position:relative;height:6px;margin:var(--p-s2) 0 0;border-radius:3px;background:var(--p-line);
  overflow:hidden}
.p-dial .lit,.p-dial .pend{position:absolute;top:0;bottom:0;left:0;border-radius:3px}
.p-dial .lit{background:var(--p-ink)}
.p-dial .pend{background:repeating-linear-gradient(-45deg,var(--p-ink-2) 0 2px,var(--p-line-strong) 2px 4px)}
.p-dial .segs{display:none}

/* ---- main */
.p-main{flex:1 0 auto;padding:var(--p-s6)}
.p-wrap{width:100%;max-width:1280px;margin:0 auto}

/* ---- footer: quiet, aligned with the content column */
.p-foot{padding:var(--p-s5) var(--p-s6);border-top:1px solid var(--p-line);background:var(--p-bg);
  font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-foot a{color:var(--p-ink-2)}

/* ================================================================ PAGE LEVEL */

/* page header: eyebrow + title left, one meta item or action right */
.p-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--p-s4);flex-wrap:wrap;
  margin:0 0 var(--p-s5)}
.p-head>:first-child{min-width:0}
.p-head .p-plate{margin:0 0 var(--p-s1)}
.p-head p,.p-lede{margin:var(--p-s1) 0 0;color:var(--p-muted);max-width:72ch}
.p-lede{margin:calc(-1 * var(--p-s4)) 0 var(--p-s5)}

/* the eyebrow / section label: 12px uppercase, muted, tracked */
.p-plate{display:flex;align-items:center;gap:var(--p-s2);margin:0 0 var(--p-s2);
  font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);font-weight:500;letter-spacing:.32px;
  text-transform:uppercase;color:var(--p-muted)}
.p-plate.on-dark{color:rgba(255,255,255,.72)}

/* flow: sensible gaps between the blocks a page is built from, so no template needs an
   inline spacing style */
.p-wrap>h2{margin:var(--p-s6) 0 var(--p-s3)}
.p-wrap>h2:first-child,.p-head+h2,.p-flash+h2{margin-top:0}
.p-wrap>.p-table-wrap+.p-card,.p-wrap>.p-card+.p-table-wrap,
.p-wrap>.p-table-wrap+.p-table-wrap,.p-wrap>.p-table-wrap+.p-section{margin-top:var(--p-s6)}
.p-wrap>form+.p-table-wrap,.p-wrap>.p-row+.p-table-wrap{margin-top:var(--p-s4)}
.p-stack>*+*{margin-top:var(--p-s4)}
.p-section{margin-top:var(--p-s6)}
.p-section:first-child,.p-head+.p-section,.p-flash+.p-section{margin-top:0}
.p-section>h2{margin:0 0 var(--p-s3)}

/* card: white, hairline, radius 8, no shadow at rest */
.p-card{display:block;background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r-card);padding:var(--p-s5)}
.p-card+.p-card{margin-top:var(--p-s4)}
.p-card>:first-child{margin-top:0}
.p-card>:last-child{margin-bottom:0}
.p-card h2{font-size:var(--p-fs-card);line-height:var(--p-lh-card);margin:0 0 var(--p-s3)}
a.p-card{color:inherit;text-decoration:none;transition:border-color var(--p-fast) var(--p-ease)}
a.p-card:hover{border-color:var(--p-line-strong)}
.p-narrow{max-width:640px}

.p-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--p-s5)}
@media (min-width:1024px){
  .p-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-s6);align-items:start}
}

.p-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s3)}
.p-row.tight{gap:var(--p-s2);flex-wrap:nowrap}
.tight{gap:var(--p-s2)}
.p-row>label:not(.p-tick){margin:0}
.p-row>:where(input:not([type=checkbox],[type=radio],[type=hidden]),select){flex:1 1 auto;width:auto;min-width:0}

/* ---- KPI tiles: label on top (muted), the figure below (24/32 600, tabular) */
.p-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--p-s4);
  margin:0 0 var(--p-s6)}
.p-kpi{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--p-s1);
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card);
  padding:var(--p-s4) var(--p-s5)}
.p-kpi .v{font-size:var(--p-fs-page);line-height:var(--p-lh-page);font-weight:600;color:var(--p-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.p-kpi .l{font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);font-weight:500;color:var(--p-muted)}
.p-kpi .l a{color:var(--p-ink)}

/* the big figure: a product's points or price, an order's total */
.p-bigpts{margin:var(--p-s2) 0;font-size:var(--p-fs-page);line-height:var(--p-lh-page);font-weight:600;
  color:var(--p-ink);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.p-bigpts span,.p-bigpts small{margin-left:var(--p-s2);font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);
  font-weight:400;color:var(--p-muted);letter-spacing:0}

/* back link and breadcrumbs (detail pages only; current page not linked) */
.p-back{display:inline-flex;align-items:center;gap:var(--p-s1);min-height:32px;margin:0 0 var(--p-s2);
  color:var(--p-muted);font-weight:500;text-decoration:none;border-radius:var(--p-r);
  transition:color var(--p-fast) var(--p-ease)}
.p-back:hover{color:var(--p-ink)}
.p-back svg{display:block;width:16px;height:16px}
.p-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s2);margin:0 0 var(--p-s4);
  font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-crumbs a{display:inline-flex;align-items:center;gap:var(--p-s1);color:var(--p-muted);text-decoration:none}
.p-crumbs a:hover{color:var(--p-ink);text-decoration:underline}
.p-crumbs svg{display:block;width:12px;height:12px}
.p-crumbs [aria-current]{color:var(--p-ink)}
.p-crumbs>span{color:var(--p-line-strong)}

/* sign-in, company chooser, error: one narrow centred column */
.p-auth{max-width:400px;margin:var(--p-s7) auto;text-align:left}
.p-auth .mark{display:flex;justify-content:center;margin:0 0 var(--p-s5)}
.p-auth .mark img{display:block;height:48px;width:auto}
.p-auth>.p-plate{justify-content:center}
.p-auth h1{text-align:center}
.p-auth .sub{margin:var(--p-s1) 0 var(--p-s5);text-align:center;color:var(--p-muted)}
.p-auth>.p-hint{text-align:center;margin-top:var(--p-s4)}

/* empty state: what it is, how to fill it, one action */
.p-empty{display:flex;flex-direction:column;align-items:center;gap:var(--p-s2);padding:var(--p-s7) var(--p-s5);
  text-align:center;background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card)}
.p-empty h2,.p-empty h3{font-size:var(--p-fs-body);line-height:var(--p-lh-body);margin:0}
.p-empty p{margin:0;color:var(--p-muted);max-width:48ch}
.p-empty .p-btn{margin-top:var(--p-s2)}

/* feature list (product page, privacy notice) */
ul.p-feats{margin:var(--p-s3) 0;padding-left:var(--p-s5);color:var(--p-ink-2)}
ul.p-feats li{margin:0 0 var(--p-s1)}
ul.p-feats li::marker{color:var(--p-line-strong)}

/* ================================================================ CONTROLS */

/* ---- buttons. The base IS the secondary; red is the one primary per view. */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--p-s2);height:40px;
  padding:0 var(--p-s4);border:1px solid var(--p-line-strong);border-radius:var(--p-r);
  background:var(--p-surface);color:var(--p-ink);font:inherit;font-weight:500;line-height:20px;
  text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;
  transition:background-color var(--p-fast) var(--p-ease),border-color var(--p-fast) var(--p-ease),
    color var(--p-fast) var(--p-ease),transform var(--p-fast) var(--p-ease)}
.p-btn:hover{background:var(--p-plate);border-color:var(--p-ink-2);color:var(--p-ink)}
.p-btn:active{transform:translateY(1px)}
.p-btn svg{width:16px;height:16px}
/* primary — Cummins red, white text; hover and press are Cummins' own reds */
.p-btn-go,.p-btn.primary{background:var(--p-red);border-color:var(--p-red);color:#FFFFFF}
.p-btn-go:hover,.p-btn.primary:hover{background:var(--p-red-hover);border-color:var(--p-red-hover);color:#FFFFFF}
.p-btn-go:active,.p-btn.primary:active{background:var(--p-red-press);border-color:var(--p-red-press)}
/* `p-btn-ghost` is what the seeded templates call the SECONDARY button, so it keeps the
   bordered look (clickable things look clickable). Text-only is `.ghost` / `.p-btn-text`. */
.p-btn-ghost{background:var(--p-surface);border-color:var(--p-line-strong);color:var(--p-ink)}
.p-btn.ghost,.p-btn-text{background:transparent;border-color:transparent;color:var(--p-ink-2);
  padding:0 var(--p-s3)}
.p-btn.ghost:hover,.p-btn-text:hover{background:var(--p-plate);border-color:transparent;color:var(--p-ink)}
/* destructive: the secondary look with error-red text (pair it with a confirm) */
.p-btn.danger,.p-btn-danger{color:var(--p-err)}
.p-btn.danger:hover,.p-btn-danger:hover{background:var(--p-err-wash);border-color:var(--p-err);color:var(--p-err)}
/* sizes 32 / 40 / 48 */
.p-btn-sm,.p-btn.sm{height:32px;padding:0 var(--p-s3)}
.p-btn-lg,.p-btn.lg{height:48px;padding:0 var(--p-s5);font-size:var(--p-fs-body);line-height:var(--p-lh-body)}
.p-btn.block,.p-btn-block{display:flex;width:100%}
/* selected (a filter or a range that is on): near-black, never red */
.p-btn.on,.p-btn[aria-current]{border-color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-ink);
  color:var(--p-ink);font-weight:600}
.p-btn:is(:disabled,[aria-disabled="true"]),.p-btn:is(:disabled,[aria-disabled="true"]):hover{
  background:var(--p-plate);border-color:var(--p-line);color:var(--p-line-strong);
  cursor:not-allowed;transform:none;box-shadow:none}

/* ---- form controls: 40px, 1px strong border, radius 6, label ABOVE (13/18 500).
   Zero-specificity :where() so any page class wins without !important. */
label{display:block;margin:var(--p-s4) 0 var(--p-s2);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);
  font-weight:500;color:var(--p-ink)}
:where(input:not([type=checkbox],[type=radio],[type=hidden],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=image])),
:where(select),:where(textarea){
  display:block;width:100%;height:40px;margin:0;padding:0 var(--p-s3);
  border:1px solid var(--p-line-strong);border-radius:var(--p-r);background-color:var(--p-surface);
  color:var(--p-ink);font:inherit;font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);
  transition:border-color var(--p-fast) var(--p-ease)}
:where(input:not([type=checkbox],[type=radio],[type=hidden])):hover,:where(select):hover,:where(textarea):hover{
  border-color:var(--p-ink-2)}
:where(input,select,textarea):focus-visible{border-color:var(--p-ink)}
:where(textarea){height:auto;min-height:88px;padding:var(--p-s2) var(--p-s3);resize:vertical}
:where(select){appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
:where(input,textarea)::placeholder{color:var(--p-muted);opacity:1}
:where(input[type=number]){font-variant-numeric:tabular-nums}
:where(input[type=search]){-webkit-appearance:none;appearance:none}
:where(input[type=search])::-webkit-search-decoration{-webkit-appearance:none}
:where(input,select,textarea):disabled{background-color:var(--p-plate);color:var(--p-muted);cursor:not-allowed}
:where(input,select,textarea)[aria-invalid="true"]{border-color:var(--p-err)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0;flex-shrink:0;
  accent-color:var(--p-ink);cursor:pointer}

fieldset{min-width:0;margin:var(--p-s4) 0;padding:var(--p-s2) var(--p-s4) var(--p-s4);
  border:1px solid var(--p-line);border-radius:var(--p-r-card)}
legend{padding:0 var(--p-s1);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);font-weight:500;color:var(--p-ink)}

/* a field in a row: label above its control, no top gap of its own inside the column */
.p-field{display:flex;flex-direction:column;min-width:0;margin-top:var(--p-s4)}
/* A labelled checkbox under a form's fields — "Keep me signed in" at sign-in (24 Sep 2026). */
.p-check{display:flex;gap:var(--p-s2);align-items:flex-start;margin:var(--p-s4) 0;font-size:var(--p-fs-ui);line-height:1.4;cursor:pointer}
.p-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--p-ink)}
.p-check small{display:block;font-size:13px}
.p-field>label{margin:0 0 var(--p-s2)}
/* a tick row: checkbox/radio + text, the whole row is the target */
.p-tick{display:flex;align-items:flex-start;gap:var(--p-s3);margin:0;padding:var(--p-s2) 0;
  font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);font-weight:400;color:var(--p-ink);cursor:pointer}
.p-tick input{margin-top:2px}
.p-tick>span{flex:1;min-width:0}
.p-tick b{font-weight:500}
.p-hint{margin:var(--p-s2) 0 0;font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-muted)}

/* ---- flash: one banner above the title — hairline, a 4px semantic edge, icon + text */
.p-flash{position:relative;margin:0 0 var(--p-s5);padding:var(--p-s3) var(--p-s4) var(--p-s3) 44px;
  background:var(--p-surface);border:1px solid var(--p-line);border-left:4px solid var(--p-ink);
  border-radius:var(--p-r);color:var(--p-ink)}
.p-flash::before{content:"";position:absolute;left:var(--p-s4);top:14px;width:16px;height:16px;
  background:var(--p-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat}
.p-flash.info{border-left-color:var(--p-info);background:var(--p-info-wash)}
.p-flash.info::before{background:var(--p-info)}
.p-flash.ok{border-left-color:var(--p-ok);background:var(--p-ok-wash)}
.p-flash.ok::before{background:var(--p-ok);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4z'/%3E%3C/svg%3E")}
.p-flash.err{border-left-color:var(--p-err);background:var(--p-err-wash)}
.p-flash.err::before{background:var(--p-err);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1z'/%3E%3C/svg%3E")}
.p-flash a{color:inherit;font-weight:500}
.p-card>.p-flash:last-child{margin-bottom:0}

/* ================================================================ DATA */

/* ---- tables (Polaris): sentence-case headers, 13/18 500 muted on a faint fill; thin row
   lines only — no zebra, no vertical rules; 48px rows; numbers AND their headers right-
   aligned; the first column is the readable ID. */
.p-table-wrap{background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card);
  overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}  /* relative: a hidden .u-sr label inside a table stretched the phone page to 806px (audit 24 Sep) */
table,.p-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--p-fs-ui);
  line-height:var(--p-lh-ui);background:transparent}
th,td{height:48px;padding:var(--p-s3) var(--p-s4);text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--p-line)}
thead th{height:40px;padding-top:var(--p-s2);padding-bottom:var(--p-s2);background:var(--p-bg);
  font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--p-muted);white-space:nowrap;position:sticky;top:0;z-index:2}
tbody tr>td{transition:background-color var(--p-fast) var(--p-ease)}
tbody tr:hover>td{background:var(--p-bg)}
tbody tr:last-child>td{border-bottom:0}
th.num,td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td>form{margin:0}
td:has(>form,>input,>select){padding-top:var(--p-s1);padding-bottom:var(--p-s1)}
td.u-mono,td .u-mono{white-space:nowrap}      /* a code or a date never breaks at its hyphen */
td a{font-weight:500;text-decoration-color:var(--p-line-strong)}
td a:hover{text-decoration-color:currentColor}
td .p-btn{text-decoration:none}
/* STICKY HEADER. Inside a scroll container a top:68px header would sit 68px down INSIDE its
   own table, so it only sticks under the top bar where the wrap is not one: the shell
   script marks every wrap whose table fits with `.p-fits`, which clips instead of
   scrolling. A table wider than its card (Portwest stock) keeps sideways scrolling and a
   header that scrolls with it; with no script every wrap scrolls. Nothing is ever cut off. */
.p-table-wrap.p-fits{overflow:clip}
.p-table-wrap.p-fits thead th{top:var(--p-top-h)}

/* ---- chips: 4px radius, 12/16 500, wash background + solid text. First letter up,
   so a raw status word ("awaiting approval") reads as a label. */
.p-chip{display:inline-block;height:20px;padding:0 var(--p-s2);border-radius:var(--p-r-tag);
  background:var(--p-plate);color:var(--p-ink-2);font-size:var(--p-fs-sm);line-height:20px;font-weight:500;
  letter-spacing:0;text-transform:none;white-space:nowrap;vertical-align:middle}
.p-chip::first-letter{text-transform:uppercase}
.p-chip.awaiting_approval{background:var(--p-warn-wash);color:var(--p-warn)}
.p-chip.submitted{background:var(--p-info-wash);color:var(--p-info)}
.p-chip.queued_batch{background:var(--p-info-wash);color:var(--p-info)}
.p-chip.quoted{background:var(--p-ok-wash);color:var(--p-ok)}
.p-chip.ok{background:var(--p-ok-wash);color:var(--p-ok)}
.p-chip.err{background:var(--p-err-wash);color:var(--p-err)}
.p-chip.cancelled{background:var(--p-plate);color:var(--p-ink-2)}
/* stock words — never red */
.p-chip.in{background:var(--p-ok-wash);color:var(--p-ok)}
.p-chip.low{background:var(--p-warn-wash);color:var(--p-warn)}
.p-chip.out,.p-chip.unknown{background:var(--p-plate);color:var(--p-muted)}
h2 .p-chip,h3 .p-chip{margin-left:var(--p-s2);position:relative;top:-2px}

/* ---- counts: a small neutral pill; `.sig` (and the basket's) is the red one */
.p-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:10px;background:var(--p-plate);box-shadow:inset 0 0 0 1px var(--p-line);
  color:var(--p-ink-2);font-size:var(--p-fs-sm);line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;flex-shrink:0}
.p-badge.sig,.p-basket .p-badge,.p-bottom .p-badge{background:var(--p-red);color:#FFFFFF;box-shadow:none}

/* ---- stock dot: colour AND the word beside it; out is grey, unknown is hollow */
.p-dot{display:inline-block;width:8px;height:8px;margin-right:var(--p-s1);border-radius:50%;
  background:var(--p-ok);vertical-align:middle;position:relative;top:-1px;flex-shrink:0}
.p-dot.in{background:var(--p-ok)}
.p-dot.low{background:var(--p-warn)}
.p-dot.out{background:var(--p-line-strong)}
.p-dot.unknown{background:transparent;box-shadow:inset 0 0 0 1.5px var(--p-line-strong)}
/* the same words as text, for a stock line */
.p-stock.in{color:var(--p-ok)} .p-stock.low{color:var(--p-warn)}
.p-stock.out,.p-stock.unknown{color:var(--p-muted)}

/* ---- facets (range / type filters): quiet chips, selected = ink */
.p-facets{margin:0 0 var(--p-s5)}
.p-facet-row{display:flex;flex-wrap:wrap;gap:var(--p-s2)}
.p-facet-row+.p-facet-row{margin-top:var(--p-s2)}
.p-facet{display:inline-flex;align-items:center;gap:var(--p-s2);height:32px;padding:0 var(--p-s3);
  border:1px solid var(--p-line);border-radius:var(--p-r);background:var(--p-surface);color:var(--p-ink-2);
  font-weight:500;text-decoration:none;white-space:nowrap;
  transition:border-color var(--p-fast) var(--p-ease),background-color var(--p-fast) var(--p-ease)}
.p-facet:hover{border-color:var(--p-line-strong);color:var(--p-ink)}
.p-facet b{font-weight:500;color:var(--p-muted);font-variant-numeric:tabular-nums}
.p-facet.on{background:var(--p-ink);border-color:var(--p-ink);color:#FFFFFF}
.p-facet.on b{color:rgba(255,255,255,.72)}
.p-facet.sm{height:28px;padding:0 var(--p-s2);font-size:var(--p-fs-sm)}

/* ================================================================ PHONE (<=640px)
   Desktop is the design target; the phone keeps what the e2e requires — a drawer for
   the sidebar, a bottom bar, and the product page's sticky buy bar. */
.p-drawer-btn{display:none}
.p-bottom{display:none}
.p-sticky-buy{display:none}

@media (max-width:640px){
  .p-topbar{padding:0 var(--p-s3);gap:var(--p-s2)}
  .p-drawer-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    padding:0;border:1px solid var(--p-line-strong);border-radius:var(--p-r);background:var(--p-surface);
    color:var(--p-ink);cursor:pointer;flex-shrink:0}
  .p-drawer-btn svg{display:block;width:20px;height:20px}
  .p-logo{margin-right:var(--p-s2)}
  .p-logo img{height:26px}
  .p-co{padding-left:var(--p-s3);height:28px;gap:var(--p-s2)}
  .p-co img{height:24px}
  .p-co b{display:none}
  .p-basket{display:none}                 /* the bottom bar carries the basket on a phone */
  .p-acct>summary{padding:0 var(--p-s1);gap:var(--p-s2)}
  .p-acct>summary .p-badge{left:30px}
  .p-acct .who,.p-acct .chev{display:none}
  .p-panel{position:fixed;left:var(--p-s3);right:var(--p-s3);top:calc(var(--p-top-h) + var(--p-s1));width:auto}

  .p-shell.has-rail{display:block;background:none}
  .p-rail{position:fixed;top:0;left:0;bottom:0;height:auto;width:min(300px,86vw);z-index:60;
    padding-top:var(--p-s5);transform:translateX(-100%);transition:transform var(--p-med) var(--p-ease)}
  body.p-open .p-rail{transform:none;box-shadow:var(--p-sh-menu)}
  body.p-open .p-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(17,24,39,.4)}

  .p-main{padding:var(--p-s4)}
  .p-foot{padding:var(--p-s4)}
  body.has-nav .p-body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  body.has-nav .p-body:has(.p-sticky-buy){padding-bottom:calc(120px + env(safe-area-inset-bottom))}

  .p-head{flex-direction:column;align-items:flex-start;gap:var(--p-s2)}
  h1{font-size:var(--p-fs-sect);line-height:var(--p-lh-sect)}
  .p-card{padding:var(--p-s4)}
  .p-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}

  .p-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--p-surface);
    border-top:1px solid var(--p-line);padding-bottom:env(safe-area-inset-bottom)}
  .p-bottom a{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:2px;height:56px;color:var(--p-muted);text-decoration:none;
    font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);font-weight:500}
  .p-bottom a.on{color:var(--p-ink)}
  .p-bottom a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;
    border-radius:0 0 2px 2px;background:var(--p-red)}
  .p-bottom svg{display:block;width:22px;height:22px}
  .p-bottom .p-badge{position:absolute;top:6px;left:calc(50% + 4px)}

  /* the phone gallery cap: min(40vh,320px) — 52vh made it TALLER on a real phone */
  .p-gallery>img{height:min(40vh,320px);max-height:none;aspect-ratio:auto;object-fit:contain}

  /* PHONE STICKY BUY BAR: above the bottom bar, never over it */
  .p-sticky-buy{display:flex;position:fixed;left:0;right:0;z-index:50;
    bottom:calc(56px + env(safe-area-inset-bottom));align-items:center;gap:var(--p-s3);
    padding:var(--p-s2) var(--p-s4);background:var(--p-surface);border-top:1px solid var(--p-line);
    box-shadow:var(--p-sh-float)}
  .p-sticky-buy .sb-price{flex:1 1 auto;min-width:0;font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);
    color:var(--p-muted)}
  .p-sticky-buy .sb-price b{display:block;font-size:var(--p-fs-body);line-height:var(--p-lh-body);
    font-weight:600;color:var(--p-ink);font-variant-numeric:tabular-nums}
  .p-sticky-buy .sb-go{flex:0 0 auto;height:44px}
}

/* ================================================================ MOTION, PRINT */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media print{
  .p-top,.p-rail,.p-bottom,.p-foot,.p-scrim,.p-sticky-buy,.p-skip{display:none!important}
  .p-shell.has-rail{display:block;background:none}
  .p-main{padding:0}
  body{background:#FFFFFF}
  .p-table-wrap{overflow:visible}
  thead th{position:static}
}

/* ==================================================================== LIVE / TEST BAR
   Danetre only (db § Test mode, 25 Sep 2026). Loud on purpose: TEST is striped amber so it
   can never be mistaken for the real shop; LIVE is solid red and says Cummins sees it.
   It sits inside the sticky header, so --p-top-h grows by its height. */
body.has-mode{--p-top-h:108px}
.p-mode{display:flex;align-items:center;gap:var(--p-s3);min-height:40px;padding:6px var(--p-s5);
  font-size:14px;line-height:1.3;color:#fff;background:#B42318}
.p-mode b{font-weight:800;letter-spacing:.04em;white-space:nowrap}
.p-mode .msg{flex:1;min-width:0;opacity:.95}
.p-mode .acts{display:flex;align-items:center;gap:var(--p-s2);flex-shrink:0}
.p-mode .acts form{display:inline;margin:0}
.p-mode .acts a,.p-mode .acts button{font:inherit;font-weight:700;font-size:13px;color:inherit;cursor:pointer;
  text-decoration:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.7);
  border-radius:var(--p-r);padding:4px 10px;white-space:nowrap}
.p-mode .acts a:hover,.p-mode .acts button:hover{background:rgba(255,255,255,.28)}
.p-mode .acts a.go{background:#fff;color:#B42318;border-color:#fff}
.p-mode.live-on{background:#7A0F17;box-shadow:inset 0 -3px 0 #FDE047}
.p-mode.test{color:#1F1300;background:repeating-linear-gradient(-45deg,#FACC15 0 18px,#FDE047 18px 36px)}
.p-mode.test .acts a,.p-mode.test .acts button{background:rgba(255,255,255,.55);border-color:#1F1300}
.p-mode.test .acts a:hover,.p-mode.test .acts button:hover{background:#fff}
@media (max-width:640px){
  .p-mode{padding:6px var(--p-s3);font-size:13px}
  .p-mode .msg{display:none}
  .p-mode b{flex:1}
}
@media print{.p-mode{display:none}}

/* ===== _pro_shop.css ===== */
/* =============================================================================
   PRECISION · shop pages — builder B (24 Sep 2026, design-v4/SPEC.md)
   catalogue · product (style) · basket · new order · orders · order
   Only classes used on those six pages live here. Tokens (--p-*), the shell and every
   shared component (p-btn, p-card, p-chip, p-row, p-plate, p-tick, p-table-wrap, p-hint,
   p-head, p-flash, p-dot, p-back, p-crumbs, p-facet, p-feats, p-bigpts, p-empty,
   p-sticky-buy, u-*) come from _pro_base.css and are NOT restyled here — where one of
   them sits inside a component of this file, only its placement is set.
   Gaps on the 4 8 12 16 24 32 48 scale. Motion is transform/colour only, 120-200ms.
   ========================================================================== */

/* sticky offset for the right-hand panels: under the top bar, 24px of air */
.p-pdp,.p-bk,.p-od{--p-stick:calc(var(--p-top-h) + var(--p-s5))}

.p-err-text{color:var(--p-err)}

/* ---- filter box (catalogue, new order): a search field with its icon inside ------ */
.p-find{position:relative;display:flex;align-items:center;width:288px;max-width:100%}
.p-find svg{position:absolute;left:var(--p-s3);width:16px;height:16px;color:var(--p-muted);pointer-events:none}
.p-find input{padding-left:36px}

/* =============================================================================
   CATALOGUE
   ========================================================================== */
.p-facet-row .lbl{align-self:center;margin-right:var(--p-s1);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);
  font-weight:500;color:var(--p-muted)}

/* the grid: 4 across at 1440 (1128px of content → 264px tiles), 24px gutters */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:var(--p-s5);margin:0 0 var(--p-s7)}
.p-grid:last-child{margin-bottom:0}
.p-grid[hidden],.p-group-head[hidden],.p-tile[hidden]{display:none}

.p-tile{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:var(--p-r-card);color:inherit;text-decoration:none;
  transition:border-color var(--p-med) var(--p-ease),transform var(--p-med) var(--p-ease)}
.p-tile:hover{border-color:var(--p-line-strong);transform:translateY(-1px)}
.p-tile .ph{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:var(--p-s4);background:var(--p-plate)}
.p-tile .ph .p-preorder{position:absolute;left:var(--p-s3);bottom:var(--p-s3);box-shadow:inset 0 0 0 1px rgba(180,83,9,.24)}
/* the Portwest shots are on white: multiply lets the plate show through, so every tile
   reads as one studio set instead of a white square pasted on grey */
.p-tile .ph img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.p-tile .ph .none{font-family:var(--p-mono);font-size:var(--p-fs-lbl);color:var(--p-muted)}
.p-tile .b{display:flex;flex:1;flex-direction:column;gap:var(--p-s1);min-width:0;padding:var(--p-s3) var(--p-s4) var(--p-s4)}
.p-tile .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:40px;font-size:15px;line-height:20px;font-weight:500;color:var(--p-ink)}
.p-tile .code{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--p-fs-sm);
  line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-tile .code .u-mono{color:var(--p-ink-2)}
.p-tile .rng{font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-tile .ft{display:flex;flex-direction:column;align-items:flex-start;gap:var(--p-s2);margin-top:auto;padding-top:var(--p-s2)}
.p-tile .pr{font-size:var(--p-fs-sm);line-height:20px;color:var(--p-muted)}
.p-tile .pr b{font-size:15px;line-height:20px;font-weight:600;color:var(--p-ink);font-variant-numeric:tabular-nums}
.p-tile .pr .alt{margin-left:var(--p-s1);padding-left:var(--p-s2);border-left:1px solid var(--p-line)}
.p-tile .dws{font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted);font-variant-numeric:tabular-nums}
.p-tile .unpriced{font-size:var(--p-fs-lbl);line-height:20px;font-weight:500;color:var(--p-err)}
.p-tile .req{font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
/* the one stock word for the whole style (core.stock_summary): muted text, the dot carries
   the state — green in, amber some sizes out, grey out. Never red: stock never uses red. */
.p-tile .stk{display:flex;align-items:center;font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}

/* pre-order: amber, dot + word, never red (stock never uses red) */
.p-preorder{display:inline-flex;align-items:center;height:20px;padding:0 var(--p-s2);border-radius:var(--p-r-tag);
  background:var(--p-warn-wash);color:var(--p-warn);font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);font-weight:500}

/* range / type groups */
.p-group-head{display:flex;align-items:center;gap:var(--p-s2);margin:0 0 var(--p-s4);padding-top:var(--p-s5);
  border-top:1px solid var(--p-line)}
.p-group-head .n{display:inline-flex;align-items:center;height:20px;padding:0 var(--p-s2);border-radius:10px;
  background:var(--p-plate);color:var(--p-ink-2);font-size:var(--p-fs-sm);font-weight:500;font-variant-numeric:tabular-nums}

/* empty states */
.p-grid-empty,.p-nomatch{grid-column:1/-1;padding:var(--p-s7) var(--p-s5);text-align:center;background:var(--p-surface);
  border:1px dashed var(--p-line-strong);border-radius:var(--p-r-card)}
.p-grid-empty p,.p-nomatch p{margin:0 0 var(--p-s4);color:var(--p-ink-2)}
.p-nomatch[hidden]{display:none}

/* =============================================================================
   PRODUCT PAGE — gallery + details left, the buy panel right and sticky
   ========================================================================== */
.p-pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,432px);
  grid-template-areas:"gal buy" "det buy";column-gap:var(--p-s7);row-gap:var(--p-s7);align-items:start;
  margin-top:var(--p-s2)}
.p-gallery{grid-area:gal;display:flex;align-items:flex-start;gap:var(--p-s3);min-width:0}
.p-buy{grid-area:buy;position:sticky;top:var(--p-stick);align-self:start;padding:var(--p-s5);
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card)}.p-details{grid-area:det;min-width:0;max-width:720px}

.p-gallery .main{flex:1;min-width:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:var(--p-s6);overflow:hidden;background:var(--p-plate);border-radius:var(--p-r-card)}
.p-gallery .main img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.p-gallery .main.none span{font-family:var(--p-mono);color:var(--p-muted)}
.p-thumbs{order:-1;display:flex;flex:0 0 64px;flex-direction:column;gap:var(--p-s2)}
.p-thumbs button{width:64px;height:64px;padding:var(--p-s2);cursor:pointer;background:var(--p-plate);
  border:1px solid var(--p-line);border-radius:var(--p-r);transition:border-color var(--p-fast) var(--p-ease)}
.p-thumbs button img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.p-thumbs button:hover{border-color:var(--p-line-strong)}
.p-thumbs button.on{border-color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-ink)}

/* buy panel: code, title, price */
.p-buy-code{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s2);font-size:var(--p-fs-sm);
  line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-buy-code .u-mono{color:var(--p-ink-2)}
.p-buy h1{margin:var(--p-s2) 0 var(--p-s4)}
.p-buy .p-bigpts{margin:0}
.p-price-alt{margin:var(--p-s1) 0 0;font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-muted);
  font-variant-numeric:tabular-nums}
.p-mode-note{margin:var(--p-s2) 0 0;font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-muted)}
/* stock in words beside the price: dot + word, the count after it */
.p-stockline{display:flex;align-items:center;flex-wrap:wrap;margin:var(--p-s3) 0 0;font-size:var(--p-fs-lbl);
  line-height:var(--p-lh-lbl);color:var(--p-ink-2);font-variant-numeric:tabular-nums}
.p-stockline b{margin-right:var(--p-s1);font-weight:500;color:var(--p-ink)}
.p-buy .p-flash{margin:var(--p-s4) 0 0}
.p-preorder-note{display:flex;align-items:flex-start;gap:var(--p-s2);margin:var(--p-s4) 0 0;padding:var(--p-s3);
  background:var(--p-warn-wash);border:1px solid var(--p-line);border-left:4px solid var(--p-warn);
  border-radius:var(--p-r);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-ink)}
.p-preorder-note svg{width:16px;height:16px;margin-top:1px;color:var(--p-warn)}

/* the form */
.p-buy form{margin:var(--p-s5) 0 0;padding-top:var(--p-s4);border-top:1px solid var(--p-line)}
.p-buy-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--p-s3);margin:0 0 var(--p-s3)}
.p-buy-label{display:block;margin:0 0 var(--p-s2);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);
  font-weight:500;color:var(--p-ink)}
.p-buy-row .p-buy-label{margin:0}
.p-guide{font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-ink-2)}

/* COLOUR CHOOSER — shown by the page script only; narrows the size grid to one colour */
.p-colours{margin:0 0 var(--p-s5)}
.p-colours[hidden]{display:none}
.p-colour-now{margin-left:var(--p-s1);font-weight:400;color:var(--p-ink-2)}
.p-buy-count{font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-muted)}
.p-swatches{display:flex;flex-wrap:wrap;gap:var(--p-s2)}
.p-swatch{display:inline-flex;align-items:center;gap:var(--p-s2);height:40px;padding:0 var(--p-s3) 0 var(--p-s1);
  background:var(--p-surface);border:1px solid var(--p-line-strong);border-radius:var(--p-r);color:var(--p-ink);
  font:inherit;font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);font-weight:500;cursor:pointer;
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease)}
.p-swatch img{width:32px;height:32px;object-fit:contain;border-radius:var(--p-r-tag);background:var(--p-plate);
  mix-blend-mode:multiply}
.p-swatch small{margin-left:calc(-1 * var(--p-s1));color:var(--p-muted);font-weight:400}
.p-swatch.out span{color:var(--p-muted)}
.p-swatch:hover{border-color:var(--p-ink)}
.p-swatch.on{border-color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-ink)}
.p-swatch.on span{color:var(--p-ink)}
.p-swatch[hidden],.p-size[hidden],.p-thumbs button[hidden]{display:none}
.p-sizes.one-colour .p-colour{display:none}

/* SIZE GRID — buttons, never a dropdown (Baymard). >=40x40; selected = ink 2px;
   out of stock = muted + struck through and still selectable (a pre-order is a date,
   not a block). */
.p-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:var(--p-s2)}
.p-sizes.wide{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
.p-colour{grid-column:1/-1;display:flex;align-items:center;gap:var(--p-s2);margin-top:var(--p-s2);
  font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);font-weight:500;color:var(--p-ink-2)}
.p-colour:first-child{margin-top:0}
.p-colour img{width:24px;height:24px;object-fit:contain;border-radius:var(--p-r-tag);background:var(--p-plate);
  mix-blend-mode:multiply}
.p-size{position:relative;display:block;margin:0;font-weight:400}
.p-size input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.p-size .c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:56px;
  padding:var(--p-s2) var(--p-s1);cursor:pointer;text-align:center;background:var(--p-surface);
  border:1px solid var(--p-line-strong);border-radius:var(--p-r);
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease)}
.p-size .c b{font-size:var(--p-fs-ui);line-height:var(--p-lh-ui);font-weight:600;color:var(--p-ink);
  font-variant-numeric:tabular-nums}
.p-size .c small{display:inline-flex;align-items:center;color:var(--p-muted);font-variant-numeric:tabular-nums}
.p-size .c:hover{border-color:var(--p-ink)}
.p-size input:checked+.c{border-color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-ink)}
.p-size input:focus-visible+.c{outline:2px solid var(--p-ink);outline-offset:2px}
.p-size.out .c{background:var(--p-bg);border-color:var(--p-line)}
.p-size.out .c b{color:var(--p-muted);text-decoration:line-through;text-decoration-thickness:1px}
.p-size.out .c:hover{border-color:var(--p-line-strong)}
.p-size.out input:checked+.c{border-color:var(--p-ink)}
.p-stocknote{min-height:18px;margin:var(--p-s3) 0 var(--p-s4);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);
  color:var(--p-ink-2)}

/* quantity stepper + the one red button */
.p-buy-go{display:flex;align-items:stretch;gap:var(--p-s3)}
.p-qty.stepper{display:flex;flex:0 0 auto;align-items:stretch;height:48px;overflow:hidden;
  background:var(--p-surface);border:1px solid var(--p-line-strong);border-radius:var(--p-r)}
.p-qty.stepper button{display:flex;align-items:center;justify-content:center;width:40px;padding:0;border:0;
  background:transparent;color:var(--p-ink-2);cursor:pointer;transition:background-color var(--p-fast) var(--p-ease)}
.p-qty.stepper button:hover{background:var(--p-plate);color:var(--p-ink)}
.p-qty.stepper button svg{width:16px;height:16px}
.p-qty.stepper input{width:48px;height:auto;padding:0;text-align:center;border:0;
  border-left:1px solid var(--p-line);border-right:1px solid var(--p-line);border-radius:0;
  font-size:15px;font-weight:600;-moz-appearance:textfield;appearance:textfield}
.p-qty.stepper input::-webkit-inner-spin-button,.p-qty.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.p-qty.stepper:focus-within{outline:2px solid var(--p-ink);outline-offset:2px}
.p-qty.stepper input:focus-visible{outline:none}
.p-buy .p-add{flex:1}
.p-buy-start{margin:var(--p-s3) 0 0;font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-muted)}

/* details: description, features, spec sheet */
.p-details h2{margin:0 0 var(--p-s2);font-size:var(--p-fs-body);line-height:var(--p-lh-body)}
.p-details h2:not(:first-child){margin-top:var(--p-s6)}
.p-details>p{max-width:68ch;color:var(--p-ink-2)}
.p-details ul.p-feats{margin-top:0}
.p-spec{margin:0;border-top:1px solid var(--p-line)}
.p-spec>div{display:grid;grid-template-columns:152px minmax(0,1fr);align-items:baseline;gap:var(--p-s4);
  padding:var(--p-s3) 0;border-bottom:1px solid var(--p-line)}
.p-spec dt{font-size:var(--p-fs-lbl);line-height:20px;color:var(--p-muted)}
.p-spec dd{margin:0;color:var(--p-ink)}

/* =============================================================================
   BASKET — the lines left, one sticky summary right
   ========================================================================== */
.p-bk{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--p-s6);align-items:start}
.p-bk-main{display:grid;gap:var(--p-s6);min-width:0}
.p-bk-head,.p-osec-head{display:flex;align-items:center;gap:var(--p-s2);margin:0 0 var(--p-s3)}
.p-bk-head{justify-content:space-between}
.p-bk-head .num{color:var(--p-muted)}

.p-lines{overflow:hidden;background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card)}
.p-lines-th,.p-line{display:grid;grid-template-columns:64px minmax(0,1fr) 232px 104px;gap:var(--p-s4);
  align-items:center;padding:0 var(--p-s4)}
.p-lines-th{height:40px;background:var(--p-bg);border-bottom:1px solid var(--p-line);font-size:var(--p-fs-lbl);
  line-height:var(--p-lh-lbl);font-weight:500;color:var(--p-muted)}
.p-lines-th span:last-child{text-align:right}
.p-line{padding-top:var(--p-s4);padding-bottom:var(--p-s4);border-bottom:1px solid var(--p-line)}
.p-line:last-child{border-bottom:0}
.p-line .img{display:flex;align-items:center;justify-content:center;width:64px;height:64px;overflow:hidden;
  background:var(--p-plate);border-radius:var(--p-r)}
.p-line .img img{display:block;width:56px;height:56px;object-fit:contain;mix-blend-mode:multiply}
.p-line .info{min-width:0}
.p-line .t{font-weight:500;color:var(--p-ink);overflow-wrap:break-word}
.p-line .m{margin-top:var(--p-s1);font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-line .m .u-mono{color:var(--p-ink-2)}
.p-line .s{display:flex;align-items:center;margin-top:var(--p-s1);font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);
  color:var(--p-ink-2)}
.p-line .q{display:flex;align-items:center;gap:var(--p-s2);margin:0}
.p-line .q .p-qty input{width:64px;height:32px;padding:0 var(--p-s1);text-align:center;font-weight:500}
.p-line .p{text-align:right;font-size:15px;line-height:20px;font-weight:600;color:var(--p-ink);
  font-variant-numeric:tabular-nums}
.p-line .p small{display:block;font-weight:400;color:var(--p-muted)}

/* the card's top lines up with the first line table, not with the heading above it */
.p-bk-side{position:sticky;top:var(--p-stick);align-self:start;min-width:0;
  margin-top:calc(var(--p-lh-sect) + var(--p-s3))}
.p-sumlist{display:grid;margin:0}
.p-sumlist>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--p-s4);padding:var(--p-s1) 0}
.p-sumlist dt{flex:0 0 auto;color:var(--p-muted)}
.p-sumlist dd{min-width:0;margin:0;text-align:right;overflow-wrap:anywhere;color:var(--p-ink)}
.p-sumlist dd.p-err-text{color:var(--p-err);font-weight:600}
.p-next{margin:0;padding:var(--p-s3);background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-r);
  font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-ink-2)}
.p-totals{display:flex;align-items:baseline;justify-content:space-between;gap:var(--p-s4);
  margin:var(--p-s3) 0 0;padding:var(--p-s4) 0 0;border-top:1px solid var(--p-line)}
.p-totals>span:first-child{font-weight:500;color:var(--p-ink)}
.p-totals .v{font-size:var(--p-fs-sect);line-height:var(--p-lh-sect);font-weight:600;color:var(--p-ink);
  font-variant-numeric:tabular-nums}
.p-summary>.p-flash{margin:var(--p-s4) 0 0}
/* order details card (left): the note and who the quotation goes to */
.p-send{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--p-s6);align-items:start}
.p-send-field label{margin-top:0}
.p-send-field input,.p-send-to input[type=email]{max-width:400px}
.p-send-to{display:grid;gap:0;min-width:0;margin:0;padding:0;border:0}
.p-send-to legend{margin:0 0 var(--p-s1);padding:0}
.p-send-other{margin:var(--p-s3) 0 var(--p-s2)}
/* the send form (right): what happens next, the one red button, Add more, the terms */
.p-sendbox{display:grid;gap:var(--p-s4);margin:var(--p-s5) 0 0;padding-top:var(--p-s5);border-top:1px solid var(--p-line)}
.p-send-go{display:grid;gap:var(--p-s2)}
.p-send-go .p-btn{width:100%}
.p-legal{margin:0;font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-empty>svg{width:40px;height:40px;color:var(--p-muted)}

/* =============================================================================
   ORDERS · ORDER · NEW ORDER — the tables are p-table-wrap (_pro_base.css); this is
   the section rhythm and the cells that carry a control
   ========================================================================== */
.p-osec{margin:0 0 var(--p-s6)}
.p-osec:last-child{margin-bottom:0}

/* the readable ref, bold, first column (Polaris). No tabular figures on refs, dates or
   names: Inter's tabular set widens the hyphen, so "PS-000002" and "2026-09-23" gap. */
.p-osec .ref a{font-weight:600;color:var(--p-ink)}
.p-osec .when{white-space:nowrap;color:var(--p-muted)}
.p-osec .act,.p-no .act{width:1%;white-space:nowrap;text-align:right}
.p-osec .act .p-row{justify-content:flex-end}
.p-po{display:flex;align-items:center;gap:var(--p-s2)}
.p-po input{width:160px;height:32px}
.p-req-items{font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);color:var(--p-ink-2)}
.p-empty-row td{color:var(--p-muted)}
.p-batch-send{margin:var(--p-s3) 0 0}

/* order detail */
.p-od-head h1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s3)}
.p-od-head h1 .p-chip{margin:0;top:0}
.p-od{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:var(--p-s6);align-items:start}
.p-od-main{min-width:0}
.p-od-item{font-weight:500;color:var(--p-ink)}
.p-od-code{margin-top:var(--p-s1);font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-od tfoot td{height:48px;font-weight:600;color:var(--p-ink);border-top:1px solid var(--p-line);border-bottom:0;
  background:var(--p-bg)}
.p-od-note{margin:var(--p-s4) 0 0;padding:var(--p-s4);background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r-card)}
.p-od-note .lbl{display:block;margin:0 0 var(--p-s1);font-size:var(--p-fs-lbl);line-height:var(--p-lh-lbl);
  font-weight:500;color:var(--p-muted)}
.p-od-note p{color:var(--p-ink)}
.p-od-side{position:sticky;top:var(--p-stick);align-self:start;min-width:0}
.p-od-flag{margin:var(--p-s2) 0 0}
.p-od-status{margin:var(--p-s4) 0 0;padding-top:var(--p-s4);border-top:1px solid var(--p-line);color:var(--p-ink-2)}
.p-od-status p{margin:0 0 var(--p-s2)}
.p-od-status p:last-child{margin-bottom:0}
.p-od-status .p-hint{margin:0 0 var(--p-s2);overflow-wrap:anywhere}
.p-od-po{margin:var(--p-s4) 0 0;padding-top:var(--p-s4);border-top:1px solid var(--p-line)}
.p-od-po label{margin:0 0 var(--p-s2)}
.p-od-act{display:grid;gap:var(--p-s2);margin:var(--p-s4) 0 0}
.p-od-act .p-btn{width:100%}

/* new order */
.p-no{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--p-s6);align-items:start}
.p-no-main{min-width:0}
.p-no-search{display:flex;align-items:center;gap:var(--p-s2);max-width:560px;margin:0 0 var(--p-s4)}
.p-no-search .p-find{flex:1;width:auto}
.p-no-name{font-weight:500;color:var(--p-ink)}
.p-no-side form label{margin-top:0}
.p-no-side .p-btn{margin-top:var(--p-s4)}

/* =============================================================================
   NARROWER SCREENS — desktop is the target; these keep the phone honest
   ========================================================================== */
/* a short laptop window (1366x768 leaves ~650px): the summaries stop sticking rather than
   hide their own button below the fold */
@media (max-height:760px){
  .p-bk-side,.p-od-side{position:static}
}
@media (max-width:1180px){
  .p-pdp{grid-template-columns:minmax(0,1fr) minmax(320px,380px);column-gap:var(--p-s6)}
  .p-bk,.p-od,.p-no{grid-template-columns:minmax(0,1fr)}
  .p-bk-side,.p-od-side{position:static;margin-top:0}
}
@media (max-width:960px){
  .p-pdp{grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "buy" "det";row-gap:var(--p-s5)}
  .p-buy{position:static}
  .p-lines-th{display:none}
  .p-line{grid-template-columns:64px minmax(0,1fr) auto;row-gap:var(--p-s3)}
  .p-line .q{grid-column:2/4;grid-row:2}
  .p-line .p{grid-column:3;grid-row:1}
  .p-send{grid-template-columns:minmax(0,1fr);gap:var(--p-s5)}
}
@media (max-width:640px){
  .p-find{width:100%}
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-s3)}
  .p-tile .b{padding:var(--p-s2) var(--p-s3) var(--p-s3)}
  .p-tile .nm{font-size:var(--p-fs-ui)}
  .p-tile .pr .alt{display:block;margin:0;padding:0;border:0}
  .p-gallery{flex-direction:column}
  .p-thumbs{order:0;flex:0 0 auto;flex-direction:row;overflow-x:auto;max-width:100%}
  .p-thumbs button{flex:0 0 48px;width:48px;height:48px;padding:var(--p-s1)}
  .p-gallery .main{width:100%;aspect-ratio:auto;height:min(40vh,320px);padding:var(--p-s3)}
  .p-buy{padding:var(--p-s4)}
  .p-spec>div{grid-template-columns:112px minmax(0,1fr)}
  .p-line{grid-template-columns:56px minmax(0,1fr);padding-left:var(--p-s3);padding-right:var(--p-s3)}
  .p-line .img{width:56px;height:56px}
  .p-line .img img{width:48px;height:48px}
  .p-line .p{grid-column:2;grid-row:auto;text-align:left}
  .p-line .q{grid-column:1/-1;grid-row:auto;flex-wrap:wrap}
  .p-no-search{max-width:none}
  .p-po input{width:128px}
}
@media (prefers-reduced-motion:reduce){
  .p-tile:hover{transform:none}
}

/* ---- logos (logos.py, 27 Sep 2026): the tick boxes on a product page and the + line
   under a basket entry. Plain checkboxes — each tick is its own line on the order. */
.p-logos{border:1px solid var(--p-line);border-radius:var(--p-r);padding:var(--p-s3);margin:var(--p-s3) 0}
.p-logos legend{padding:0 var(--p-s1)}
.p-logo-opt{display:flex;gap:var(--p-s2);align-items:flex-start;padding:var(--p-s1) 0;cursor:pointer}
.p-logo-opt input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.p-logo-opt small{display:block;color:var(--p-muted)}
.p-logo-note{margin:var(--p-s2) 0 0;font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-muted)}
.p-line-logo{margin-top:var(--p-s1);font-size:var(--p-fs-sm);line-height:var(--p-lh-sm);color:var(--p-ink)}

/* ===== _pro_admin.css ===== */
/* =============================================================================
   PRECISION · admin, Danetre, supplier, sign-in, error and privacy pages — builder C
   (24 Sep 2026, design-v4/SPEC.md)
   employees · employee · admins · questions · settings · prices · dws_home · dws_stock
   companies · supplier_catalogue · supplier_demand · login · error · privacy
   Every class here is p-adm-* and lives ONLY on those fourteen pages. Tokens (--p-*),
   the shell and every shared component (p-btn, p-card, p-chip, p-table-wrap, p-head,
   p-field, p-flash, p-kpi, p-dot, p-facet, p-back, p-auth, p-empty, u-*) come from
   _pro_base.css. Where a shared piece sits inside one of these layouts, the rule is
   scoped under the p-adm-* container — nothing here changes a shared class elsewhere.
   Gaps on the 4 8 12 16 24 32 48 64 scale; type on the SPEC scale.
   ========================================================================== */

/* ---- page header pieces ------------------------------------------------------ */
.p-adm-meta{font-size:14px;line-height:20px;color:var(--p-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-adm-title{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.p-adm-desc{margin:4px 0 0;max-width:72ch;font-size:14px;line-height:20px;color:var(--p-muted)}
.p-card>h2+.p-adm-desc{margin-top:-8px}
.p-adm-opt{font-weight:400;color:var(--p-muted)}
.p-adm-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px}
.p-adm-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.p-adm-cols h2{margin:0 0 12px}

/* ---- forms: labels above, 16px between fields, one primary per view ---------- */
.p-adm-form{display:grid;gap:16px}
.p-adm-form>.p-field,.p-adm-pair>.p-field,.p-adm-addrow>.p-field{margin-top:0}
.p-adm-form>.p-hint{margin-top:-8px}
.p-adm-form>div:last-child:not(.p-field){justify-self:start}
.p-card>h2+.p-adm-form{margin-top:16px}
.p-adm-desc+.p-adm-form,.p-adm-desc+.p-adm-addrow{margin-top:24px}
.p-adm-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.p-adm-pair-lead{grid-template-columns:96px minmax(0,1fr)}
.p-adm-addrow{display:grid;gap:16px;align-items:end;
  grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) auto}

/* the search row above a table */
.p-adm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px}
.p-adm-bar input[type=search]{width:320px;max-width:100%}
.p-adm-bar .p-tick{margin-left:4px}

/* ---- tables: only what these pages add; the table itself is the shared one ---- */
.p-adm-act{width:1%;text-align:right;white-space:nowrap}
.p-adm-act form{display:inline-flex}
.p-adm-btns{display:inline-flex;gap:8px;justify-content:flex-end}
.p-adm-name{font-weight:500;color:var(--p-ink);text-decoration:none}
a.p-adm-name:hover{text-decoration:underline;text-decoration-color:currentColor}
.p-adm-tab{font-variant-numeric:tabular-nums;white-space:nowrap}
.p-adm-center{text-align:center}
.p-adm-off td,.p-adm-off .p-adm-name{color:var(--p-muted)}
td.p-adm-empty,p.p-adm-empty{padding:32px 16px;text-align:center;color:var(--p-muted)}
.p-adm-plus{color:var(--p-ok)}
.p-adm-low{display:inline-flex;align-items:center;gap:8px;color:var(--p-warn);font-weight:600}
.p-adm-low::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-adm-fixed{table-layout:fixed}
.p-adm-clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* status badges in these tables carry a dot as well as the word (Polaris-style); the
   words are capitalised in the templates because a leading dot stops ::first-letter */
.p-adm-t .p-chip:is(.ok,.err,.quoted,.submitted,.queued_batch,.awaiting_approval,.cancelled)::before{
  content:"";display:inline-block;width:6px;height:6px;margin:0 6px 0 0;
  border-radius:50%;background:currentColor;vertical-align:1px}
.p-adm-links{display:inline-flex;gap:16px}
.p-adm-links a{font-weight:500;color:var(--p-ink-2);text-decoration:none}
.p-adm-links a:hover{color:var(--p-ink);text-decoration:underline}

/* group rows inside a long table: a quiet band that names the group, never a header */
.p-adm-group th{height:40px;padding:8px 16px;background:var(--p-plate);border-bottom:1px solid var(--p-line);
  text-align:left;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--p-ink)}
.p-adm-group th .u-mono{margin-right:8px;font-weight:400;color:var(--p-ink-2)}
.p-adm-group-n{float:right;font-size:13px;font-weight:500;color:var(--p-ink-2);font-variant-numeric:tabular-nums}
@media (min-width:1100px){
  .p-adm-group th{position:sticky;top:calc(var(--p-top-h) + 40px);z-index:1}
}

/* inline editing cells */
.p-adm-money{width:96px;height:32px;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.p-adm-src{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* fixed-layout tables on the Danetre view: the columns that must not squeeze */
.p-adm-c-dt{width:160px}.p-adm-c-st{width:96px}.p-adm-c-det{width:150px}
.p-adm-c-po{width:132px}.p-adm-c-tot{width:104px}
.p-adm-w880{max-width:880px}
.p-adm-in-name{width:176px}
.p-adm-in-mode{width:128px}
.p-adm-check{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
  margin:0;cursor:pointer}
.p-adm-newrow td{background:var(--p-bg)}

/* the Portwest stock table is wide and dense: tighter sides so ten columns sit in 1280 */
.p-adm-stock th,.p-adm-stock td{padding-left:12px;padding-right:12px}
.p-adm-stock .p-adm-group th{padding-left:16px;padding-right:16px}
.p-adm-soh{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}

/* ---- KPI rows: calm neutral cards (label, figure, then one quiet line) -------- */
.p-adm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 32px}
.p-adm-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-adm-kpis .p-kpi .s{font-size:12px;line-height:16px;color:var(--p-muted)}

/* ---- employees: the points rules as plain sentences, and a status word ------- */
.p-adm-rules{position:relative;max-width:112ch;margin:0 0 24px;padding-left:24px;color:var(--p-ink-2);text-wrap:pretty}
.p-adm-rules::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:var(--p-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat}
.p-adm-rules b{font-weight:600;color:var(--p-ink)}
.p-adm-state{display:inline-flex;align-items:center;color:var(--p-ink-2)}
.p-adm-state .p-dot{margin-right:8px;top:0}

/* ---- the employee page: history left, management right ------------------------ */
.p-adm-detail{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.p-adm-status{display:grid;gap:12px;justify-items:start;margin-top:24px;padding-top:24px;border-top:1px solid var(--p-line)}
.p-adm-status .p-hint{margin:0}

/* the new password, shown once */
.p-adm-secret p{margin:0 0 4px}
.p-adm-secret p:last-child{margin:0}
.p-adm-pw{display:inline-block;margin-left:8px;padding:0 8px;background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:var(--p-r-tag);color:var(--p-ink);user-select:all}

/* ---- settings: panels with a heading, then label-left / control-right rows ------ */
.p-adm-settings{display:grid;gap:24px;max-width:880px}
.p-adm-panel{background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card)}
.p-adm-panel>h2{margin:0;padding:16px 24px;border-bottom:1px solid var(--p-line);
  font-size:16px;line-height:24px;letter-spacing:0}
.p-adm-setrow{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:32px;align-items:start;padding:16px 24px}
.p-adm-setrow+.p-adm-setrow{border-top:1px solid var(--p-line)}
.p-adm-setlabel{display:grid;gap:2px;margin:0;font-size:14px;line-height:20px;font-weight:400;color:var(--p-ink)}
.p-adm-setlabel b{font-weight:500}
.p-adm-setlabel span{font-size:13px;line-height:18px;color:var(--p-muted)}
.p-adm-short{width:160px}
fieldset.p-adm-radios{display:grid;gap:0;min-width:0;margin:0;padding:0;border:0;border-radius:0}
.p-adm-radios>.p-hint{margin:4px 0 0}
.p-adm-radio{display:flex;align-items:flex-start;gap:12px;margin:0;padding:6px 0;cursor:pointer;
  font-size:14px;line-height:20px;font-weight:400;color:var(--p-ink)}
.p-adm-radio:first-of-type{padding-top:0}
.p-adm-radio input{margin-top:2px}
.p-adm-radio>span{display:grid;gap:2px;min-width:0}
.p-adm-radio b{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:500}
.p-adm-radio>span>span{font-size:13px;line-height:18px;color:var(--p-muted)}

/* an on/off setting reads as a switch; on = ink, never red */
.p-adm-switch{display:inline-flex;align-items:center;gap:12px;margin:0;cursor:pointer;
  font-size:14px;line-height:20px;font-weight:400;color:var(--p-ink)}
.p-adm-switch input{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:36px;height:20px;
  margin:0;border-radius:10px;background:var(--p-line-strong);cursor:pointer;
  transition:background-color var(--p-fast) var(--p-ease)}
.p-adm-switch input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 1px 2px rgba(17,24,39,.24);transition:transform var(--p-fast) var(--p-ease)}
.p-adm-switch input:checked{background:var(--p-ink)}
.p-adm-switch input:checked::before{transform:translateX(16px)}

/* one save for the whole form, kept in reach while the form is on screen */
.p-adm-savebar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 12px 12px 24px;background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r-card);box-shadow:var(--p-sh-float)}
.p-adm-savebar p{margin:0;color:var(--p-muted)}

.p-adm-cats-sec{margin-top:48px}
.p-adm-cats-sec>.p-adm-desc{margin:0}
.p-adm-modes{display:grid;gap:4px;margin:8px 0 16px;padding:0;list-style:none;color:var(--p-ink-2)}
.p-adm-modes li{padding-left:12px;border-left:2px solid var(--p-line)}

/* ---- questions --------------------------------------------------------------- */
.p-adm-q{display:grid;gap:16px;max-width:880px}
.p-adm-q .p-adm-form{max-width:640px;margin-top:8px}
.p-adm-qhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.p-adm-kicker{display:block;margin:0 0 4px;font-size:13px;line-height:18px;font-weight:500;color:var(--p-muted)}
.p-adm-qhead h2{margin:0}
.p-adm-qdetail{max-width:80ch;margin:0;color:var(--p-ink-2)}
.p-adm-samples{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:16px}
.p-adm-samples figure{margin:0}
.p-adm-samples a{display:block;border-radius:var(--p-r)}
.p-adm-samples img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;
  background:var(--p-plate);border:1px solid var(--p-line);border-radius:var(--p-r);
  transition:border-color var(--p-fast) var(--p-ease)}
.p-adm-samples a:hover img{border-color:var(--p-line-strong)}
.p-adm-samples figcaption{margin-top:8px;font-size:13px;line-height:18px;color:var(--p-muted)}
.p-adm-samples figcaption b{display:block;font-weight:500;color:var(--p-ink)}
fieldset.p-adm-choices{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0;border-radius:0}
.p-adm-choices>legend{float:left;width:100%;margin:0 0 8px;padding:0}
.p-adm-choices>legend+*{clear:left}
.p-adm-choice{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:12px 16px;
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r);cursor:pointer;
  font-size:14px;line-height:20px;font-weight:400;color:var(--p-ink);
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease)}
.p-adm-choice:hover{border-color:var(--p-line-strong)}
.p-adm-choice:has(input:checked){border-color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-ink)}
.p-adm-answer{display:grid;gap:4px;padding:16px;background:var(--p-plate);border-radius:var(--p-r)}
.p-adm-answer .p-adm-kicker{margin:0}
.p-adm-answer p{margin:0;font-weight:500;color:var(--p-ink)}

/* ---- sign-in, error, company pick: one centred card on the page ---------------- */
.p-adm-signin-card{padding:32px;background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r-card)}
.p-adm-signin-card h1{font-size:20px;line-height:28px;letter-spacing:-.1px;text-align:center}
.p-adm-signin-card>.p-adm-desc{margin:4px auto 0;text-align:center;text-wrap:balance}
.p-adm-signin-card>.p-adm-form{margin-top:32px}
.p-adm-signin-card .p-flash{margin:0}
.p-adm-signin-card .p-btn-block{margin-top:8px}
.p-adm-marks{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 0 32px}
.p-adm-marks img{display:block;width:auto;height:40px}
.p-adm-marks-rule{width:1px;height:32px;background:var(--p-line)}
.p-adm-notice{display:grid;justify-items:center;gap:12px;text-align:center}
.p-adm-notice>.p-adm-desc{margin:0 0 12px}
.p-adm-notice-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--p-plate);color:var(--p-ink-2)}
.p-adm-notice-icon svg{display:block;width:24px;height:24px}
.p-adm-picklist{display:grid;gap:8px;margin-top:24px}
.p-adm-picklist a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;
  background:var(--p-surface);border:1px solid var(--p-line-strong);border-radius:var(--p-r);
  font-weight:500;color:var(--p-ink);text-decoration:none;transition:background-color var(--p-fast) var(--p-ease)}
.p-adm-picklist a:hover{background:var(--p-plate)}
.p-adm-picklist svg{width:16px;height:16px;color:var(--p-muted)}

/* ---- privacy: a plain document --------------------------------------------- */
.p-adm-doc{max-width:760px;margin:0 auto;padding:48px;background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:var(--p-r-card)}
.p-adm-doc-head{padding-bottom:24px;border-bottom:1px solid var(--p-line)}
.p-adm-doc-head .p-adm-desc{margin-top:4px;font-size:14px;line-height:20px;color:var(--p-muted)}
.p-adm-doc section{margin-top:32px}
.p-adm-doc h2{margin:0 0 8px;font-size:18px;line-height:24px;letter-spacing:0}
.p-adm-doc p,.p-adm-doc li{font-size:16px;line-height:24px;color:var(--p-ink-2)}
.p-adm-doc ul{margin:0 0 12px;padding-left:24px}
.p-adm-doc li+li{margin-top:4px}
.p-adm-doc li::marker{color:var(--p-line-strong)}
.p-adm-doc b{color:var(--p-ink)}

/* ---- supplier: catalogue with stock per size, and demand --------------------------- */
.p-adm-toolbar{display:grid;gap:12px;margin:0 0 8px}
.p-adm-legend{display:flex;flex-wrap:wrap;gap:16px;margin:0;font-size:13px;line-height:18px;color:var(--p-muted)}
.p-adm-legend span{display:inline-flex;align-items:center;gap:4px}
.p-adm-list{background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r-card)}
.p-adm-style-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;padding:16px 24px}
.p-adm-style-row+.p-adm-style-row{border-top:1px solid var(--p-line)}
.p-adm-thumb{display:grid;place-items:center;width:72px;height:72px;overflow:hidden;
  background:var(--p-plate);border-radius:var(--p-r)}
.p-adm-thumb img{display:block;width:100%;height:100%;padding:4px;object-fit:contain;mix-blend-mode:multiply}
.p-adm-style-body{display:grid;gap:8px;min-width:0}
.p-adm-style-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.p-adm-style-name b{font-size:15px;line-height:20px;font-weight:500;color:var(--p-ink)}
.p-adm-style-name .u-mono{font-size:12px;color:var(--p-muted)}
.p-adm-pwname{font-size:13px;line-height:18px;color:var(--p-muted)}
.p-adm-colour{display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px;align-items:start}
.p-adm-colour-name{font-size:13px;line-height:28px;color:var(--p-ink-2)}
.p-adm-colour-name .u-mono{margin-left:4px;font-size:12px;color:var(--p-muted)}
.p-adm-sizes{display:flex;flex-wrap:wrap;gap:8px}
.p-adm-size{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px 0 8px;
  background:var(--p-plate);border:0;border-radius:var(--p-r-tag);
  font-size:13px;line-height:16px;color:var(--p-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-adm-size b{margin-left:4px;font-weight:600;color:var(--p-ink)}

@media (prefers-reduced-motion:reduce){
  .p-adm-choice,.p-adm-picklist a,.p-adm-samples img{transition:none}
}

/* ---- narrower desktops and phones: the same pages, stacked -------------------- */
@media (max-width:1100px){
  .p-adm-detail{grid-template-columns:minmax(0,1fr)}
  .p-adm-setrow{grid-template-columns:minmax(0,1fr);gap:16px}
  .p-adm-cols{grid-template-columns:minmax(0,1fr)}
  .p-adm-addrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-adm-addrow>.p-btn{justify-self:start}
}
.p-adm-balance{text-wrap:balance}
@media (max-width:640px){
  /* the employee list on a phone: who, what they have left, and the one action */
  .p-adm-emps :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)){display:none}
  .p-adm-kpis,.p-adm-kpis-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-adm-pair,.p-adm-addrow,.p-adm-samples{grid-template-columns:minmax(0,1fr)}
  .p-adm-colour{grid-template-columns:minmax(0,1fr);gap:4px}
  .p-adm-style-row{padding:16px}
  .p-adm-signin-card,.p-adm-doc{padding:24px}
  .p-adm-bar input[type=search]{width:100%}
}