/* ANZ CSP Portal — design system
 * Tokens and components taken from mockup frames 1A (brand, type & colour)
 * and 1B (UI component inventory). Frame ids are quoted in comments so the
 * build can be checked against the design pack.
 */

:root {
  /* Palette — 1A */
  --brand-black: #000000;
  --brand-black-hover: #3A3A3A;
  --ink: #16161A;
  --body: #54545E;
  --muted: #6B6B76;
  --subtle: #8A8A95;
  --faint: #9A9AA4;
  --disabled-ink: #A6A6B0;
  --disabled-bg: #F1F1F5;

  --canvas: #F4F4F7;
  --white: #FFFFFF;
  --placeholder: #EDEDF1;

  --line: #E3E3E9;
  --line-soft: #EFEFF3;
  --line-strong: #C9C9D3;
  --line-frame: #DEDEE5;

  --blue: #0B72B5;
  --blue-dark: #095E96;
  --blue-soft: #E7F1F8;
  --blue-line: #CBE1F0;
  --blue-ink: #0A4A72;

  --green: #1F7A4D;
  --green-soft: #E8F4EE;
  --green-line: #C6E3D4;
  --green-ink: #1A5C3B;

  --amber: #A8630B;
  --amber-soft: #FDF3E4;
  --amber-line: #F2DDB6;
  --amber-line-strong: #EFD4A8;
  --amber-ink: #6B4A0C;
  --amber-row: #FFFBF4;

  --red: #B3261E;
  --red-soft: #FBECEB;
  --red-line: #EFC9C6;
  --red-line-strong: #E9C4C1;
  --red-ink: #8C201A;

  /* Feedback on 1K/1M asked for the teal from the Pacificomm "Logistics" logo
   * on the selected filter state. Placeholder until the logo swatch lands —
   * change these two values to re-skin every selected control. */
  --teal: #12807C;
  --teal-soft: #E4F2F1;
  --teal-line: #BFE0DD;

  /* Radius / rhythm — 1A build notes */
  --r-card: 10px;
  --r-control: 8px;
  --r-small: 7px;
  --r-pill: 999px;
  --row-comfortable: 52px;
  --row-compact: 40px;
  --page-max: 1440px;
  --sidebar-w: 264px;
  --header-h: 68px;

  --shadow-card: 0 1px 2px rgba(22, 22, 26, .06);
  --shadow-float: 0 18px 48px rgba(22, 22, 26, .12);
  --focus-ring: 0 0 0 2px rgba(11, 114, 181, .4);
}

/* ---------------------------------------------------------------- resets */

*, *::before, *::after { box-sizing: border-box; }

body.portal {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/1.6 Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.portal a { color: var(--blue); text-decoration: none; }
.portal a:hover { color: var(--blue-dark); text-decoration: underline; }

/* Product names read as text, not links, in cards and tables (1F/1G/1P). */
.portal a.p-link-ink, .portal a.p-product__name, .portal a.p-card-title { color: var(--ink); }
.portal a.p-link-ink:hover, .portal a.p-product__name:hover, .portal a.p-card-title:hover { color: var(--blue-dark); }

.portal button, .portal input, .portal select, .portal textarea { font-family: inherit; }

.portal :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-control);
}

.p-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- typography */

.p-display    { font: 600 40px/1.1 Poppins, sans-serif; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.p-title      { font: 600 26px/1.2 Poppins, sans-serif; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.p-page-title { font: 600 24px/1.2 Poppins, sans-serif; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.p-section    { font: 600 18px/1.3 Poppins, sans-serif; color: var(--ink); margin: 0; }
.p-card-head  { font: 600 16px/1 Poppins, sans-serif; color: var(--ink); margin: 0; }
.p-card-title { font: 500 15px/1.4 Poppins, sans-serif; color: var(--ink); margin: 0; }
.p-body       { font: 400 14px/1.6 Poppins, sans-serif; color: var(--body); margin: 0; }
.p-sub        { font: 400 13.5px/1.5 Poppins, sans-serif; color: var(--muted); margin: 0; }
.p-meta       { font: 400 12.5px/1.5 Poppins, sans-serif; color: var(--muted); margin: 0; }
.p-note       { font: 400 12.5px/1.6 Poppins, sans-serif; color: var(--subtle); margin: 0; }

.p-label {
  font: 500 11px/1 Poppins, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--subtle);
}

.p-field-label { font: 500 12.5px/1 Poppins, sans-serif; color: var(--body); }

/* ------------------------------------------------------------ app chrome */

.p-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar — 1F */
.p-header {
  height: var(--header-h);
  flex: none;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.p-logo { display: flex; align-items: center; gap: 11px; }
.p-logo:hover { text-decoration: none; }
.p-logo__anz {
  font: 300 17px/1 Poppins, sans-serif;
  letter-spacing: .2em;
  color: var(--brand-black);
}
.p-logo__rule { width: 1px; height: 17px; background: var(--line-strong); }
.p-logo__word { font: 600 16px/1 Poppins, sans-serif; letter-spacing: -.01em; color: var(--ink); }

.p-header__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.portal a.p-header__link { font: 400 13.5px/1 Poppins, sans-serif; color: var(--ink); }
.portal a.p-header__link:hover { color: var(--brand-black); text-decoration: none; }
.portal a.p-header__link.is-active { font-weight: 500; color: var(--brand-black); }

.p-header__actions { display: flex; align-items: center; gap: 10px; }

/* Section menu is its own control; the avatar sits beside it as the account. */
.p-usermenu { position: relative; }
.p-usermenu__btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.p-usermenu__btn:hover {
  border-color: var(--ink);
}
.p-usermenu__btn[aria-expanded='true'] {
  border-color: var(--ink);
  background: var(--canvas);
}
.p-usermenu__caret { width: 14px; height: 14px; color: var(--ink); transition: transform .15s ease; }
.p-usermenu__btn[aria-expanded='true'] .p-usermenu__caret { transform: rotate(180deg); }
.p-usermenu__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.p-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 216px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}
.p-menu[hidden] { display: none; }
.p-menu a {
  font: 400 13.5px/1 Poppins, sans-serif; color: var(--ink);
  padding: 10px 12px; border-radius: var(--r-small);
  display: flex; align-items: center; gap: 8px;
}
.p-menu a:hover { background: var(--canvas); text-decoration: none; }
.p-menu a.is-active { color: var(--blue); background: var(--blue-soft); font-weight: 500; }
.p-menu a.is-quiet { color: var(--muted); margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); border-radius: 0; }

.p-avatar {
  display: inline-block;
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-dark);
  font: 600 11.5px/30px Poppins, sans-serif; text-align: center;
}
.p-avatar--lg { width: 48px; height: 48px; font: 600 16px/48px Poppins, sans-serif; }
.p-header__username { font: 400 13.5px/1 Poppins, sans-serif; color: var(--body); }
.p-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.portal a.p-header__avatar { color: inherit; }
.p-header__avatar:hover { text-decoration: none; }
.p-header__avatar:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.p-header__signin {
  display: inline-flex;
  align-items: center;
  font: 500 13.5px/1 Poppins, sans-serif;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.portal a.p-header__signin { color: var(--ink); }
.p-header__signin:hover,
.portal a.p-header__signin:hover {
  color: var(--brand-black);
  border-color: var(--ink);
  text-decoration: none;
}
.p-header__signin:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.p-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13.5px/1 Poppins, sans-serif;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
}
.p-cart-pill__icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}
.portal a.p-cart-pill { color: var(--ink); }
.p-cart-pill:hover,
.portal a.p-cart-pill:hover {
  color: var(--brand-black);
  background: var(--white);
  border-color: var(--ink);
  text-decoration: none;
}

/* Mobile-only chrome — hidden on desktop; flipped on in the ≤720px query. */
.p-header__menu,
.p-header__badge,
.p-sheet-backdrop,
.p-sheet__handle,
.p-sheet__head,
.p-sheet__apply,
.p-filters-mobile,
.p-m-toolbar,
.p-mobile-only,
.p-product__codes--mobile,
.p-product__avail--mobile,
.p-product__add--mobile,
.p-m-cart-head,
.p-m-cart-foot { display: none; }

.p-main { flex: 1; display: flex; min-height: 0; }

/* Sidebar — 1F */
.p-sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The design frame keeps the account nav pinned to the bottom of the sidebar
   * while only the results scroll (1F). */
  position: sticky;
  top: var(--header-h);
  align-self: flex-start;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.p-sidebar__toggle { display: none; }

.p-sidebar__heading {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 14px/1 Poppins, sans-serif; color: var(--ink);
}
.p-sidebar__clear { font: 400 12.5px/1 Poppins, sans-serif; }

/* Catalogue sidebar — a category navigator above a filter panel (1F).
 * One markup serves desktop and the mobile bottom sheet. The rail owns its own
 * scrolling: the panels scroll, the footer stays put. */
.p-sidebar--catalogue { width: 300px; padding: 0; gap: 0; overflow: hidden; }

.p-filterbar { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.p-filterbar__scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 18px;
}
/* The panels must keep their natural height or they shrink to fit the rail and
 * clip against their own overflow rather than letting the column scroll. */
.p-filterbar__scroll > .p-panel { flex: none; }
.p-filterbar__foot {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.p-filterbar__summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px;
}

.p-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.p-panel__head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.p-panel__icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.p-panel__title { font: 600 13.5px/1 Poppins, sans-serif; color: var(--ink); margin: 0; flex: 1; }
.p-panel__clear { font: 400 12.5px/1 Poppins, sans-serif; }
.p-panel__body { padding: 12px 14px; }
.p-panel__body--cascade { padding: 14px; }
.p-panel__body--fields { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }

/* Category → subcategory → sub-subcategory dropdowns. */
.p-cascade { display: flex; flex-direction: column; gap: 14px; }
.p-cascade__field { display: flex; flex-direction: column; gap: 6px; }
.p-cascade__field .p-select { padding-top: 11px; padding-bottom: 11px; }
.p-cascade__field .p-field__hint { margin: 0; }
.p-panel__scope {
  font: 400 12px/1.4 Poppins, sans-serif; color: var(--subtle); margin: 0 0 6px;
}

/* Category navigator */
.p-tree { list-style: none; margin: 0; padding: 0; }
.p-tree .p-tree { display: none; padding-left: 15px; }
.p-tree__node.is-open > .p-tree { display: block; }

.p-tree__row {
  display: flex; align-items: center; gap: 4px;
  border-radius: var(--r-small);
  padding-right: 8px;
}
.p-tree__row:hover { background: var(--canvas); }
.p-tree__row.is-active { background: var(--blue-soft); }
.p-tree__row.is-active > .p-tree__link { color: var(--blue); font-weight: 500; }
.p-tree__row.is-active > .p-tree__leaf { color: var(--blue); }
.p-tree__row--all { margin-bottom: 2px; }

.p-tree__toggle {
  width: 22px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--faint);
}
.p-tree__toggle svg { width: 13px; height: 13px; transition: transform .15s ease; }
.p-tree__node.is-open > .p-tree__row > .p-tree__toggle svg { transform: rotate(90deg); }
.p-tree__toggle:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }

.p-tree__leaf {
  width: 22px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--faint);
}
.p-tree__leaf svg { width: 13px; height: 13px; }

.p-tree__link {
  flex: 1; min-width: 0;
  padding: 7px 2px;
  font: 400 13px/1.35 Poppins, sans-serif; color: var(--ink);
}
.p-tree__link:hover { text-decoration: none; color: var(--blue); }
.p-tree__count { font: 400 11.5px/1 Poppins, sans-serif; color: var(--faint); flex: none; }

/* Filter fields — the set on offer comes from the chosen category, and each
 * folds away so a category with a dozen of them still reads. */
.p-filterfield { border-top: 1px solid var(--line-soft); }
.p-filterfield:first-of-type { border-top: none; }

.p-filterfield__head {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 0; cursor: pointer; list-style: none;
}
.p-filterfield__head::-webkit-details-marker { display: none; }
.p-filterfield__head:hover .p-label { color: var(--body); }
.p-filterfield__head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.p-filterfield__head .p-label { flex: 1; min-width: 0; }
.p-filterfield__caret {
  width: 12px; height: 12px; flex: none; color: var(--faint);
  transition: transform .15s ease;
}
.p-filterfield[open] > .p-filterfield__head > .p-filterfield__caret { transform: rotate(90deg); }
.p-filterfield__badge {
  font: 500 10.5px/1 Poppins, sans-serif; color: var(--white); background: var(--blue);
  min-width: 16px; padding: 4px 5px; border-radius: var(--r-pill); text-align: center;
}
.p-filterfield__body {
  display: flex; flex-direction: column; gap: 9px;
  padding: 2px 0 14px;
}

.p-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-input--sm { padding: 9px 11px; font-size: 13px; }

.p-checklist { display: flex; flex-direction: column; gap: 9px; }
/* Script clamps long lists behind a "Show all"; without it the list stays whole. */
.p-checklist.is-clamped > .p-check:nth-child(n + 7) { display: none; }
.p-checklist > .p-check[hidden] { display: none; }
.p-check__name { flex: 1; min-width: 0; }
.p-check__count { font: 400 11.5px/1 Poppins, sans-serif; color: var(--faint); }
.p-checklist__empty { font: 400 12.5px/1.5 Poppins, sans-serif; color: var(--subtle); margin: 0; }

.p-linkbtn {
  align-self: flex-start;
  font: 500 12.5px/1 Poppins, sans-serif; color: var(--blue);
  background: none; border: none; padding: 2px 0; cursor: pointer;
}
.p-linkbtn:hover { color: var(--blue-dark); }
.p-menu__count {
  margin-left: auto;
  font: 500 11px/1 Poppins, sans-serif;
  color: var(--blue-dark); background: var(--blue-soft);
  padding: 5px 8px; border-radius: var(--r-pill);
}

.p-content {
  flex: 1;
  min-width: 0;
  padding: 26px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The product grid sizes itself against this pane, not the window, so the
   * column count is right whether or not the catalogue rail is beside it. */
  container: content / inline-size;
}
.p-content--narrow {
  max-width: 1176px;
  width: 100%;
  margin-inline: auto;
}

/* Two-pane screens — the rail and the results read as separate pages. The shell
 * is pinned to the viewport and each side scrolls itself, so the window never
 * gets a scrollbar of its own and filtering on the left leaves the right where
 * it was. The rail drops its sticky offset here: the pane is already the right
 * height, and the old calc() measured the header only, not the demo bar. */
.p-shell--split { height: 100vh; overflow: hidden; }
.p-shell--split .p-main { overflow: hidden; }
/* Two panes is a desktop idea, and on phone the rail is a fixed bottom sheet
 * instead. This has to stay behind a min-width rather than be undone in the
 * phone block: `.p-shell--split .p-sidebar` outranks the plain `.p-sidebar`
 * the sheet is built from, and a media query adds no specificity, so left
 * unscoped it pins the sheet back into the document flow. */
@media (min-width: 721px) {
  .p-shell--split .p-sidebar {
    position: static;
    align-self: stretch;
    height: auto;
  }
}
.p-shell--split .p-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.p-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.p-page-head__text { display: flex; flex-direction: column; gap: 5px; }

.p-breadcrumb { font: 400 13px/1 Poppins, sans-serif; color: var(--muted); }

/* -------------------------------------------------------------- controls */

.p-btn {
  font: 500 14px/1 Poppins, sans-serif;
  border: none;
  border-radius: var(--r-control);
  padding: 13px 20px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none;
}
.p-btn:hover { text-decoration: none; }

.p-btn--primary { background: var(--brand-black); color: var(--white); }
.p-btn--primary:hover { background: var(--brand-black-hover); color: var(--white); }

/* Pending state — 1B. */
.p-btn.is-pending { gap: 9px; pointer-events: none; }
.p-btn__spinner {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex: none;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: var(--white);
  animation: p-spin .7s linear infinite;
}
@keyframes p-spin { to { transform: rotate(360deg); } }

.p-btn--secondary { background: var(--blue-soft); color: var(--blue-dark); }
.p-btn--secondary:hover { background: #D8E8F4; color: var(--blue-dark); }

.p-btn--outline {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); padding: 12px 19px;
}
.p-btn--outline:hover { border-color: var(--ink); color: var(--ink); }

.p-btn--request {
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid var(--amber-line-strong); padding: 12px 19px;
}
.p-btn--request:hover { background: #FBEBD3; color: var(--amber); }

.p-btn--danger {
  background: var(--white); color: var(--red);
  border: 1px solid var(--red-line-strong); padding: 12px 19px;
}
.p-btn--approve { background: var(--green); color: var(--white); }
.p-btn--approve:hover { background: #1A6842; color: var(--white); }

.p-btn--ghost { background: transparent; color: var(--body); }
.p-btn--link { background: none; border: none; color: var(--blue); cursor: pointer; padding: 0; }
.p-btn--link:hover { text-decoration: underline; }

.p-btn[disabled], .p-btn--disabled {
  background: var(--disabled-bg); color: var(--disabled-ink);
  border-color: transparent; cursor: not-allowed;
}

/* Buttons rendered as links must not pick up the default link colour. */
.portal a.p-btn, .portal a.p-btn:hover { text-decoration: none; }
.portal a.p-btn--primary, .portal a.p-btn--primary:hover,
.portal a.p-btn--approve, .portal a.p-btn--approve:hover { color: var(--white); }
.portal a.p-btn--outline, .portal a.p-btn--outline:hover { color: var(--ink); }
.portal a.p-btn--secondary, .portal a.p-btn--secondary:hover { color: var(--blue-dark); }
.portal a.p-btn--request, .portal a.p-btn--request:hover { color: var(--amber); }
.portal a.p-btn--danger, .portal a.p-btn--danger:hover { color: var(--red); }
.portal a.p-btn--ghost, .portal a.p-btn--ghost:hover { color: var(--body); }

.p-btn--block { width: 100%; }
.p-btn--lg { font-size: 15px; padding: 16px 22px; }
.p-btn--sm { font-size: 13px; padding: 10px 14px; border-radius: var(--r-small); }

/* Inputs — 1B */
.p-field { display: flex; flex-direction: column; gap: 7px; }

.p-input, .p-select, .p-textarea {
  font: 400 14px/1.4 Poppins, sans-serif;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  padding: 13px 14px;
  width: 100%;
}
.p-input::placeholder, .p-textarea::placeholder { color: var(--faint); }
.p-input:focus, .p-select:focus, .p-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 114, 181, .18);
}
.p-textarea { min-height: 66px; resize: vertical; }

.p-select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.p-select:disabled { background-color: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }

.p-field.is-error .p-field-label { color: var(--red); }
.p-field.is-error .p-input,
.p-field.is-error .p-select { border-color: var(--red); }
.p-field.is-error .p-input-wrap .p-input--bare { border-color: transparent; }
.p-field__error { font: 400 12.5px/1.5 Poppins, sans-serif; color: var(--red); }
.p-field__hint { font: 400 12.5px/1.5 Poppins, sans-serif; color: var(--subtle); }

/* Date popover — replaces the browser calendar so we can drop its Today shortcut. */
.p-datepicker { position: relative; }
.p-datepicker__field {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B6B76' stroke-width='1.4' stroke-linecap='round'><rect x='2' y='3.2' width='12' height='11' rx='1.4'/><path d='M2 7h12M5.2 1.6v3M10.8 1.6v3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}
.p-datepicker__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 272px;
  padding: 12px 12px 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-float);
}
.p-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.p-datepicker__month {
  font: 500 13.5px/1.2 Poppins, sans-serif;
  color: var(--ink);
}
.p-datepicker__nav { display: flex; gap: 2px; }
.p-datepicker__nav button {
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  border-radius: var(--r-small);
  font: 500 16px/1 Poppins, sans-serif;
}
.p-datepicker__nav button:hover { background: var(--canvas); color: var(--ink); }
.p-datepicker__nav button:disabled { opacity: .35; cursor: default; }
.p-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.p-datepicker__dow {
  font: 400 11px/1 Poppins, sans-serif;
  color: var(--subtle);
  text-align: center;
  padding: 4px 0 6px;
}
.p-datepicker__day {
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font: 400 13px/1 Poppins, sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.p-datepicker__day.is-outside { color: var(--faint); }
.p-datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.p-datepicker__day.is-selected { background: var(--blue); color: var(--white); box-shadow: none; }
.p-datepicker__day:hover:not(:disabled):not(.is-selected) { background: var(--blue-soft); }
.p-datepicker__day:disabled { color: var(--disabled-ink); cursor: default; }
.p-datepicker__foot {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
  padding-top: 4px;
}
.p-datepicker__clear {
  border: none; background: transparent;
  font: 400 13px/1 Poppins, sans-serif;
  color: var(--blue); cursor: pointer;
  padding: 6px 2px;
}
.p-datepicker__clear:hover { color: var(--blue-dark); }

/* Password reveal — design frame 1D (Show sits inside the field, right). */
.p-input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  padding: 0 14px;
}
.p-input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 114, 181, .18);
}
.p-input-wrap .p-input--bare {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 13px 0;
  flex: 1;
  min-width: 0;
}
.p-input-wrap .p-input--bare:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.p-input-reveal {
  flex: none;
  font: 500 12.5px/1 Poppins, sans-serif;
  color: var(--blue);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.p-input-reveal:hover { color: var(--blue-dark); }
.p-field.is-error .p-input-wrap { border-color: var(--red); }
.p-field.is-error .p-input-wrap:focus-within { box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.p-field.is-error .p-input-reveal { color: var(--blue); }

.p-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  padding: 0 14px;
  flex: 1;
  max-width: 420px;
  min-height: 44px;
}
.p-search__icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  font-size: 0;
  line-height: 0;
  color: var(--subtle);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16.2 16.2L21 21'/%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 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16.2 16.2L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-search input[type='text'],
.p-search input[type='search'] {
  border: none;
  outline: none;
  background: transparent;
  font: 400 14px/1.2 Poppins, sans-serif;
  color: var(--ink);
  padding: 11px 0;
  width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
}
.p-search input[type='text']::placeholder,
.p-search input[type='search']::placeholder { color: var(--subtle); }
.p-search input[type='search']::-webkit-search-decoration,
.p-search input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }
.p-search__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  border-radius: 50%;
  color: var(--subtle);
  text-decoration: none;
  font: 500 20px/1 Poppins, sans-serif;
}
.p-search__clear:hover { color: var(--ink); background: var(--canvas); text-decoration: none; }
#catalogue-results.is-loading,
#user-results.is-loading,
#soh-results.is-loading { opacity: .55; pointer-events: none; }
/* One outline on the wrapper only — the global :focus-visible ring
 * was drawing a second box around the inner input. */
.p-search:focus-within { border-color: var(--line-strong); box-shadow: none; }
.portal .p-search input[type='text']:focus,
.portal .p-search input[type='text']:focus-visible,
.portal .p-search input[type='search']:focus,
.portal .p-search input[type='search']:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

/* Checkbox / radio / toggle */
.p-check { position: relative; display: flex; align-items: center; gap: 10px; font: 400 13.5px/1.3 Poppins, sans-serif; color: var(--ink); cursor: pointer; }
/* Anchored to its own row and not a hit target: an opacity-0 input still takes
 * clicks, and out of flow it overhangs the row above and steals them. The label
 * wraps the input, so clicking anywhere on the row still toggles it. */
.p-check input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.p-check__box {
  width: 17px; height: 17px; flex: none; border-radius: 4px;
  border: 1.5px solid var(--line-strong); background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px/1 Poppins, sans-serif; color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.p-check input:checked + .p-check__box {
  background: var(--teal); border-color: var(--teal); color: var(--white);
}
.p-check input:focus-visible + .p-check__box { box-shadow: var(--focus-ring); }

.p-toggle {
  width: 34px; height: 20px; flex: none; border-radius: var(--r-pill);
  background: #D3D3DB; position: relative; display: inline-block;
}
.p-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--white);
  transition: left .15s ease;
}
.p-toggle.is-on { background: var(--blue); }
.p-toggle.is-on::after { left: 16px; }

/* Quantity stepper — 1B */
.p-stepper {
  display: inline-flex; align-items: center;
  align-self: start; width: max-content;
  border: 1px solid var(--line-strong); border-radius: var(--r-small);
  overflow: hidden; background: var(--white);
}
.p-stepper button {
  font: 400 15px/1 Poppins, sans-serif; color: var(--body);
  background: var(--white); border: none; padding: 9px 12px; cursor: pointer;
}
.p-stepper button:hover { background: var(--canvas); }
.p-stepper input {
  font: 500 13px/1 Poppins, sans-serif; color: var(--ink); text-align: center;
  width: 44px; border: none; border-left: 1px solid var(--line);
  border-right: 1px solid var(--line); padding: 10px 0; outline: none;
  -moz-appearance: textfield;
}
.p-stepper input::-webkit-outer-spin-button,
.p-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.p-stepper--lg button { font-size: 18px; padding: 14px 16px; }
.p-stepper--lg input { font-size: 15px; padding: 15px 0; width: 56px; }
.p-stepper.is-short { border-color: var(--amber-line-strong); background: var(--amber-soft); }
.p-stepper.is-short button { background: var(--amber-soft); color: var(--amber); }
.p-stepper.is-short input {
  background: var(--amber-soft); color: var(--amber-ink);
  border-color: var(--amber-line-strong);
}

/* Segmented control (grid / list) — 1B */
.p-segment {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: var(--r-control); overflow: hidden;
}
.p-segment a {
  font: 500 13px/1 Poppins, sans-serif; color: var(--body);
  background: var(--white); padding: 11px 15px;
}
.p-segment a:hover { background: var(--canvas); text-decoration: none; }
.p-segment a.is-active { color: var(--white); background: var(--ink); }

/* ---------------------------------------------------------------- surface */

.p-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.p-card--pad { padding: 20px; }
.p-card--pad-lg { padding: 22px; }
.p-card--flush { overflow: hidden; }
.p-stack { display: flex; flex-direction: column; gap: 14px; }
.p-stack--sm { gap: 10px; }
.p-stack--lg { gap: 20px; }
.p-row { display: flex; align-items: center; gap: 12px; }
.p-row--wrap { flex-wrap: wrap; }
.p-spacer { flex: 1; }
.p-divider { height: 1px; background: var(--line-soft); }

.p-kv { display: flex; justify-content: space-between; gap: 16px; font: 400 13.5px/1.5 Poppins, sans-serif; color: var(--body); }
.p-kv strong, .p-kv .p-kv__v { font-weight: 500; color: var(--ink); }
.p-kv--total { padding-top: 12px; border-top: 1px solid var(--line-soft); font-weight: 500; color: var(--ink); }

/* Pills — 1B */
.p-pill {
  font: 500 12px/1 Poppins, sans-serif;
  padding: 7px 11px; border-radius: var(--r-pill);
  display: inline-block; white-space: nowrap;
}
.p-pill--ok      { color: var(--green); background: var(--green-soft); }
.p-pill--low     { color: var(--amber); background: var(--amber-soft); }
.p-pill--nil     { color: var(--red); background: var(--red-soft); }
.p-pill--neutral { color: var(--body); background: var(--disabled-bg); }
.p-pill--info    { color: var(--blue-dark); background: var(--blue-soft); }
.p-pill--sm      { font-size: 11.5px; padding: 6px 10px; }
/* Pills sit to their content width inside a stack (1N). */
.p-stack > .p-pill { align-self: flex-start; }

/* Filter chips — 1H / 1M */
.p-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#catalogue-results .p-chips { margin-bottom: 20px; }
.p-chip {
  font: 500 12px/1 Poppins, sans-serif;
  color: var(--teal); background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  padding: 7px 11px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px;
}
.p-chip:hover { color: var(--teal); text-decoration: none; background: #D8EAE8; }
.p-chip__x { font-weight: 600; }

/* Banners — 1B */
.p-banner {
  display: flex; gap: 11px;
  padding: 14px 16px; border-radius: var(--r-card);
  font: 400 13px/1.6 Poppins, sans-serif;
}
.p-banner__mark { font: 600 13px/1.5 Poppins, sans-serif; flex: none; }
.p-banner strong { font-weight: 600; }
.p-banner--info  { background: var(--blue-soft);  border: 1px solid var(--blue-line);  color: var(--blue-ink); }
.p-banner--info .p-banner__mark { color: var(--blue-dark); }
.p-banner--ok    { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green-ink); }
.p-banner--ok .p-banner__mark { color: var(--green); }
.p-banner--warn  { background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.p-banner--warn .p-banner__mark { color: var(--amber); }
.p-banner--error { background: var(--red-soft);   border: 1px solid var(--red-line);   color: var(--red-ink); }
.p-banner--error .p-banner__mark { color: var(--red); }
.p-banner a { color: inherit; text-decoration: underline; }

/* Empty state — 1H / 1Q */
.p-empty {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 40px 32px; min-height: 320px;
}
.p-empty__icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--disabled-bg);
  display: flex; align-items: center; justify-content: center;
  font: 400 19px/1 Poppins, sans-serif; color: var(--faint);
}
.p-empty__title { font: 600 17px/1.3 Poppins, sans-serif; color: var(--ink); }
.p-empty__body { font: 400 13.5px/1.7 Poppins, sans-serif; color: var(--body); max-width: 360px; }

/* ------------------------------------------------------------ catalogue */

.p-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.p-toolbar__sort { display: flex; align-items: center; gap: 8px; }
.p-toolbar__sort .p-select { width: auto; padding-top: 11px; padding-bottom: 11px; }

/* Tiles size themselves to the pane rather than to a fixed column count. A
 * narrower card is what makes the photo bigger: the media box is sized by the
 * card's width, and with object-fit:contain a square product shot is limited by
 * whichever side is shorter, so three wide cards per row letterboxed every
 * photo inside a shallow frame.
 *
 * The counts below are deliberately 1/2/3/4/6 and never 5: every one of them
 * divides GRID_PAGE_SIZE, so a full page always ends on a full row instead of
 * leaving a hole at the end. Steps are placed where a ~210px card stops fitting
 * (n cards plus n-1 gaps); a card that narrow needs the compact treatment under
 * .p-product below, which is why the two are tuned against the same figure. */
.p-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@container content (min-width: 440px)  { .p-grid { grid-template-columns: repeat(2, 1fr); } }
@container content (min-width: 670px)  { .p-grid { grid-template-columns: repeat(3, 1fr); } }
@container content (min-width: 900px)  { .p-grid { grid-template-columns: repeat(4, 1fr); } }
@container content (min-width: 1300px) { .p-grid { grid-template-columns: repeat(6, 1fr); } }
/* Same specificity as .p-grid — must win so list view does not show cards on desktop. */
.p-grid.p-mobile-only { display: none; }

/* Product card — 1B / 1F */
.p-product {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); overflow: hidden;
  display: flex; flex-direction: column;
  /* Type and controls scale against the card, not the window, so a card is
   * legible at whatever width its column happens to be. */
  container: card / inline-size;
}
/* Near square, so a product shot fills the frame instead of being pinned to
 * the box height. The padding is inside the box (box-sizing is border-box
 * globally), which keeps the photo off the card's top edge and off the name
 * below it. */
.p-product__media {
  height: 240px; padding: 16px; background: var(--placeholder);
  display: flex; align-items: center; justify-content: center;
  font: 400 12px/1.4 Poppins, sans-serif; color: var(--faint); text-align: center;
  position: relative;
}
.p-product__media.has-photo { background: var(--white); }
.p-product__photo,
.p-thumb__photo,
.p-detail__hero-photo,
.p-detail__thumb-photo {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Scaled with the taller media box. Most of the catalogue has no photo, so
 * this tile is the common case rather than the exception. */
.p-product__media-initials { font: 500 30px/1 Poppins, sans-serif; color: #C4C4CE; letter-spacing: .04em; }
.p-product__media-caption {
  position: absolute; bottom: 8px; left: 0; right: 0;
  font: 400 10.5px/1.3 Poppins, sans-serif; color: #B0B0BA;
}
.p-product__body {
  padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1;
}
.p-product__name {
  font: 500 14px/1.4 Poppins, sans-serif; color: var(--ink); min-height: 39px;
}
.p-product__name:hover { color: var(--ink); }
.p-product__codes { font: 400 12px/1.6 Poppins, sans-serif; color: var(--muted); }
.p-product__stock {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; background: var(--canvas); border-radius: var(--r-control);
}
.p-stockrow {
  display: flex; justify-content: space-between;
  font: 400 12.5px/1 Poppins, sans-serif; color: var(--body);
}
.p-stockrow__v { font-weight: 500; color: var(--ink); }
.p-stockrow--avail .p-stockrow__v { font-weight: 600; }
.p-stockrow--avail.is-ok  .p-stockrow__v { color: var(--green); }
.p-stockrow--avail.is-low .p-stockrow__v { color: var(--amber); }
.p-stockrow--avail.is-nil .p-stockrow__v { color: var(--red); }
.p-stockrow--value {
  padding-top: 5px; border-top: 1px solid var(--line);
  color: var(--subtle);
}
.p-product__add--desktop {
  display: flex; align-items: stretch; gap: 8px;
}
.p-product__add--desktop .p-stepper { align-self: stretch; }
.p-product__add--desktop .p-stepper button { padding: 0 10px; }
.p-product__add--desktop .p-stepper input { width: 36px; padding: 0; }
.p-product__add--desktop .p-btn {
  flex: 1; min-width: 0;
  padding-left: 10px; padding-right: 10px;
  font-size: 13px; white-space: nowrap;
}

/* Compact card — the six-across tier. The binding constraint is the add row:
 * the stepper is fixed furniture and "Add to Cart" will not wrap, so past this
 * width the two stop fitting side by side and the button spills out of the
 * card. Everything else is trimmed to match so the card still reads as a whole
 * rather than a full-size card with one shrunken control. */
@container card (max-width: 250px) {
  .p-product__media { height: 168px; padding: 12px; }
  .p-product__media-initials { font-size: 25px; }
  .p-product__body { padding: 12px 12px 13px; gap: 9px; }
  .p-product__name { font-size: 13px; min-height: 36px; }
  .p-product__codes { font-size: 11px; }
  .p-product__stock { padding: 8px 10px; gap: 4px; }
  .p-stockrow { font-size: 11.5px; }
  .p-product__add--desktop .p-stepper button { font-size: 14px; padding: 0 7px; }
  .p-product__add--desktop .p-stepper input { width: 28px; }
  .p-product__add--desktop .p-btn { padding-left: 7px; padding-right: 7px; font-size: 12px; }
}

/* Tables — 1B */
.p-table { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.p-tr {
  display: grid; gap: 14px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line-soft);
  font: 400 13.5px/1.4 Poppins, sans-serif; color: var(--ink);
}
.p-tr--head {
  background: var(--canvas); border-top: none;
  padding: 13px 18px;
  font: 500 11.5px/1.3 Poppins, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.p-tr--alt { background: #F8FBFD; }
.p-tr--short { background: var(--amber-row); }
.p-tr__muted { color: var(--muted); }
.p-tr__r { text-align: right; }
.p-tr__c { text-align: center; }
.p-tr__actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.p-num-ok  { font-weight: 600; color: var(--green); }
.p-num-low { font-weight: 600; color: var(--amber); }
.p-num-nil { font-weight: 600; color: var(--red); }

.p-thumb {
  width: 40px; height: 40px; border-radius: 6px; background: var(--placeholder);
  display: flex; align-items: center; justify-content: center;
  font: 500 11px/1 Poppins, sans-serif; color: #B0B0BA;
  overflow: hidden;
}
.p-thumb.has-photo { background: var(--white); padding: 0; }
.p-thumb--lg { width: 56px; height: 56px; border-radius: var(--r-small); font-size: 13px; }

/* Pagination — 1B */
.p-pager { display: flex; align-items: center; gap: 6px; margin-top: 28px; }
.p-pager a, .p-pager span {
  font: 400 13px/1 Poppins, sans-serif; color: var(--ink);
  padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r-small);
}
.p-pager a:hover { background: var(--canvas); text-decoration: none; }
.p-pager .is-current { font-weight: 500; color: var(--white); background: var(--ink); border-color: var(--ink); }
.p-pager .is-disabled { color: #C0C0CA; }
.p-pager .is-gap { border: none; color: var(--muted); padding: 9px 6px; }

/* User roster — toolbar + one scannable list. */
.p-roster-find { align-items: center; }
.p-roster-find .p-search { flex: 1; max-width: none; }
.p-roster-find .p-select {
  width: auto;
  min-width: 148px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.p-roster-find__count { margin-left: auto; white-space: nowrap; }
.p-invite { padding: 16px 18px 18px; }
.p-invite__action { justify-content: flex-end; }
.p-invite__action .p-btn { align-self: flex-end; min-height: 38px; }
.p-roster-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}
.p-roster-fields .p-field { gap: 5px; }
.p-roster { overflow: hidden; }
.p-roster__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 120px 160px 110px 16px;
  gap: 12px 16px;
  align-items: center;
  padding: 12px 18px;
  background: var(--canvas);
  font: 500 11.5px/1.3 Poppins, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.p-roster-row { border-top: 1px solid var(--line-soft); }
.p-roster-row__summary {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 120px 160px 110px 16px;
  gap: 12px 16px;
  align-items: center;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
}
.p-roster-row__summary::-webkit-details-marker { display: none; }
.p-roster-row__summary:hover { background: var(--canvas); }
.p-roster-row__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.p-roster-row[open] > .p-roster-row__summary { background: var(--canvas); }
.p-roster-row[open] > .p-roster-row__summary > .p-filterfield__caret { transform: rotate(90deg); }
.p-roster-row__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-roster-row__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.p-roster-row__id .p-card-title { font-size: 14px; line-height: 1.3; }
.p-roster-row__id .p-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-roster-row__cell { min-width: 0; font: 400 13.5px/1.4 Poppins, sans-serif; color: var(--ink); }
.p-roster-row__pronto { color: var(--muted); font-variant-numeric: tabular-nums; }
.p-roster-row__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.p-roster-row__edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 18px 16px;
  background: var(--canvas);
  border-top: 1px solid var(--line-soft);
}
.p-roster-row__edit > form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-roster-row__groups { border-top: 1px solid var(--line-soft); }
.p-roster-row__groups .p-filterfield__head { padding: 8px 0; }
.p-roster-row__groups .p-filterfield__body { padding-bottom: 4px; }
.p-roster-row__group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.p-roster-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.p-roster-row__remove { margin-right: auto; }

@container content (max-width: 860px) {
  .p-roster-find { flex-wrap: wrap; }
  .p-roster-find .p-search { flex: 1 1 100%; }
  .p-roster-find__count { margin-left: 0; }
  .p-roster__head { display: none; }
  .p-roster-row__summary {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .p-roster-row__who { grid-column: 1; }
  .p-roster-row__cell { display: none; }
  .p-roster-row__pills { display: flex; }
  .p-roster-row__cell:has(.p-roster-row__pills) {
    display: flex;
    grid-column: 1;
  }
  .p-roster-row__summary > .p-filterfield__caret { grid-column: 2; grid-row: 1; }
  .p-roster-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container content (max-width: 560px) {
  .p-roster-fields { grid-template-columns: 1fr; }
  .p-invite__action .p-btn { align-self: stretch; width: 100%; }
}

/* Skeleton — 1I */
@keyframes p-shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.p-skeleton {
  background: linear-gradient(90deg, #EDEDF1 8%, #F6F6F9 20%, #EDEDF1 33%);
  background-size: 460px 100%;
  animation: p-shimmer 1.3s linear infinite;
  border-radius: 4px;
}
/* Matches .p-product__media, or the cards jump height when results land. */
.p-skeleton--media { height: 240px; border-radius: 0; }
.p-skeleton--line { height: 12px; }
.p-skeleton--block { height: 62px; border-radius: 6px; }
.p-skeleton--btn { height: 38px; border-radius: var(--r-control); }

/* ------------------------------------------------- product detail — 1N/1O */

.p-detail { display: grid; grid-template-columns: 520px 1fr; gap: 28px; align-items: start; }
.p-detail__hero {
  height: 390px; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  font: 400 13px/1.5 Poppins, sans-serif; color: var(--faint); text-align: center;
}
.p-detail__hero.has-photo { padding: 12px; overflow: hidden; }
.p-detail__hero-initials { font: 500 64px/1 Poppins, sans-serif; color: #D6D6DE; }
.p-detail__thumbs { display: flex; gap: 10px; }
.p-detail__thumb {
  width: 82px; height: 82px; background: var(--placeholder);
  border: 1px solid var(--line); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font: 400 10.5px/1.3 Poppins, sans-serif; color: var(--faint); text-align: center;
  overflow: hidden;
}
button.p-detail__thumb {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; cursor: pointer;
}
.p-detail__thumb.has-photo { background: var(--white); padding: 4px; }
.p-detail__thumb.has-photo:hover { border-color: var(--blue); }
.p-detail__thumb.is-active { background: var(--white); border: 2px solid var(--blue); }

/* Checkout stepper — 1R */
.p-steps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.p-steps__num {
  font: 500 13px/24px Poppins, sans-serif; color: var(--white); background: var(--blue);
  width: 24px; height: 24px; border-radius: 50%; text-align: center; flex: none;
}
.p-steps__num.is-todo { color: var(--faint); background: var(--line); }
.p-steps__label { font: 500 13.5px/1 Poppins, sans-serif; color: var(--ink); }
.p-steps__label.is-todo { font-weight: 400; color: var(--faint); }
.p-steps__rule { width: 36px; height: 1px; background: var(--line-strong); }

.p-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }

/* Order timeline — 1W */
.p-timeline { display: flex; align-items: flex-start; }
.p-timeline__step { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.p-timeline__step:last-child { flex: none; width: 120px; }
.p-timeline__track { display: flex; align-items: center; gap: 10px; }
.p-timeline__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); flex: none; }
.p-timeline__bar { flex: 1; height: 2px; background: var(--line); }
.p-timeline__label { font: 400 13.5px/1.4 Poppins, sans-serif; color: var(--faint); }
.p-timeline__meta { font: 400 12.5px/1.4 Poppins, sans-serif; color: var(--faint); }
.p-timeline__step.is-done .p-timeline__dot { background: var(--green); }
.p-timeline__step.is-done .p-timeline__bar { background: var(--green); }
.p-timeline__step.is-done .p-timeline__label { font-weight: 500; color: var(--ink); }
.p-timeline__step.is-done .p-timeline__meta { color: var(--muted); }
.p-timeline__step.is-current .p-timeline__dot {
  background: var(--blue); box-shadow: 0 0 0 4px rgba(11, 114, 181, .18);
}
.p-timeline__step.is-current .p-timeline__label { font-weight: 500; color: var(--ink); }
.p-timeline__step.is-current .p-timeline__meta { color: var(--muted); }

/* Stat tiles — 1Y */
.p-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.p-stat {
  flex: 1; min-width: 180px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.p-stat__label { font: 400 12.5px/1 Poppins, sans-serif; color: var(--muted); }
.p-stat__value { font: 600 26px/1 Poppins, sans-serif; color: var(--ink); }
.p-stat__value.is-low { color: var(--amber); }

/* Saved carts — 1U */
.p-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.p-savedcart {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; display: flex; flex-direction: column; gap: 13px;
}
.p-savedcart--new { border-style: dashed; border-color: var(--line-strong); align-items: center; justify-content: center; text-align: center; }
.p-savedcart__actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); margin-top: auto; }

/* Centred pages — 1C / 1D / 1E */
.p-auth {
  min-height: 100vh; background: #DEDEE6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.p-auth__card {
  width: 440px; max-width: 100%; background: var(--white); border-radius: 16px;
  padding: 44px 44px 32px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: var(--shadow-float);
}
.p-auth__card--wide { width: 520px; text-align: center; align-items: center; padding: 52px 48px; }
.p-auth__logo { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.p-auth__logo-anz { font: 300 20px/1.2 Poppins, sans-serif; letter-spacing: .24em; color: var(--ink); }
.p-auth__logo-word { font: 600 28px/1.15 Poppins, sans-serif; letter-spacing: -.015em; color: var(--ink); }
.p-auth__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.p-auth__brand { display: flex; flex-direction: column; gap: 3px; }
.p-auth__brand-label { font: 400 11.5px/1.4 Poppins, sans-serif; color: var(--faint); }
.p-auth__brand-name { font: 600 13px/1 Poppins, sans-serif; letter-spacing: .02em; color: var(--body); }
.p-auth__support { text-align: right; font: 400 11.5px/1.6 Poppins, sans-serif; color: var(--faint); }
.p-auth__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--amber-soft);
  display: flex; align-items: center; justify-content: center;
  font: 600 22px/1 Poppins, sans-serif; color: var(--amber);
}
.p-auth__icon--ok { background: var(--green-soft); color: var(--green); }

/* Reviewer-only state switches (not part of the design) */
.p-demobar {
  background: var(--ink); color: rgba(255, 255, 255, .82);
  font: 400 12px/1 Poppins, sans-serif;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 28px;
}
.p-demobar__tag {
  font: 600 10px/1 Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 255, 255, .14); padding: 5px 8px; border-radius: 4px; color: var(--white);
}
.p-demobar form { display: flex; align-items: center; gap: 8px; margin: 0; }
.p-demobar select {
  font: 400 12px/1 Poppins, sans-serif; color: var(--white);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 5px; padding: 5px 8px;
}
.p-demobar select option { color: var(--ink); }
.p-demobar button {
  font: 500 12px/1 Poppins, sans-serif; color: var(--ink); background: var(--white);
  border: none; border-radius: 5px; padding: 6px 10px; cursor: pointer;
}
.p-demobar a { color: rgba(255, 255, 255, .82); text-decoration: underline; }

.p-messages { display: flex; flex-direction: column; gap: 10px; }

/* Delivery address picker */
.p-addr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--canvas);
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.p-addr.is-selected {
  background: var(--blue-soft);
  border-color: var(--blue-line);
}
.p-addr.is-static,
.p-addr--saved {
  cursor: default;
  align-items: center;
  justify-content: space-between;
}
.p-addr__pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.p-addr input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.p-addr__radio {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  box-shadow: inset 0 0 0 3px var(--white);
}
.p-addr.is-selected .p-addr__radio,
.p-addr input:checked + .p-addr__radio {
  border: 5px solid var(--blue);
  box-shadow: none;
}
.p-addr__body { flex: 1; min-width: 0; }
.p-addr__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink);
}
.p-addr__top strong { font-weight: 500; }
.p-addr__badge {
  font: 500 11px/1 Poppins, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-ink);
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
  padding: 4px 8px;
}
.p-addr__lines {
  display: block;
  margin-top: 4px;
  font: 400 13.5px/1.5 Poppins, sans-serif;
  color: var(--body);
}
.p-addr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px 0;
}
.p-addr-form.is-locked .p-input,
.p-addr-form.is-locked .p-select,
.p-addr-form.is-locked .p-textarea {
  pointer-events: none;
  caret-color: transparent;
  background: var(--canvas);
  color: var(--body);
  cursor: default;
}
.p-addr-form.is-locked .p-input:focus,
.p-addr-form.is-locked .p-input:focus-visible,
.p-addr-form.is-locked .p-select:focus,
.p-addr-form.is-locked .p-select:focus-visible,
.p-addr-form.is-locked .p-textarea:focus,
.p-addr-form.is-locked .p-textarea:focus-visible,
.portal .p-addr-form.is-locked :focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--line-strong);
}
[data-order-details] .p-input,
[data-order-details] .p-select,
[data-order-details] .p-textarea {
  pointer-events: auto;
  caret-color: auto;
  cursor: text;
}
.p-addr-suggest { position: relative; }
.p-addr-suggest__list {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-float);
  max-height: 280px;
  overflow: auto;
}
.p-addr-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 400 13.5px/1.4 Poppins, sans-serif;
  cursor: pointer;
}
.p-addr-suggest__item:hover,
.p-addr-suggest__item.is-active {
  background: var(--blue-soft);
  color: var(--blue-ink);
}
.p-addr-suggest__empty {
  padding: 10px 12px;
  font: 400 13px/1.4 Poppins, sans-serif;
  color: var(--subtle);
}

/* Mobile bottom nav — 1AB */
.p-tabbar { display: none; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .p-two-col { grid-template-columns: 1fr; }
  .p-detail { grid-template-columns: 1fr; }
  .p-detail__hero { height: 300px; }
  .p-cards-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Phone / small tablet — match frames 1AB / 1AC / 1AD. Desktop above this
 * breakpoint is unchanged. */
@media (max-width: 720px) {
  body.p-sheet-open { overflow: hidden; }

  .p-demobar { display: none; } /* keep the 390×844 frame clean for review */

  .p-header {
    gap: 0;
    padding: 0 12px;
    justify-content: space-between;
    height: 56px;
  }
  .p-header__nav,
  .p-usermenu__caret,
  .p-cart-pill,
  .p-sidebar__toggle { display: none !important; }

  .p-usermenu__btn { padding: 8px 12px; }
  .p-menu { max-height: 70vh; overflow-y: auto; }

  .p-header__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px; flex: none;
    font: 500 22px/1 Poppins, sans-serif;
    color: var(--ink);
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .p-logo { flex: 1; justify-content: center; margin: 0; }
  .p-header__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px; flex: none;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font: 600 12px/1 Poppins, sans-serif;
    text-decoration: none;
  }
  .p-header__badge:hover { text-decoration: none; color: var(--blue-dark); }

  .p-main { display: block; }

  /* One column and a bottom sheet leave nothing to split, and the document has
   * to scroll again or the sheet would have no page behind it to move. */
  .p-shell--split { height: auto; overflow: visible; }
  .p-shell--split .p-main,
  .p-shell--split .p-content { overflow: visible; }

  /* ---- Bottom sheet (1AC) ---- */
  .p-sheet-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 50;
    background: rgba(22, 22, 26, .45);
  }
  .p-sheet-backdrop[hidden] { display: none; }

  .p-sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: auto;
    height: min(88vh, 760px);
    max-height: 88vh;
    z-index: 60;
    padding: 0 0 24px;
    border: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(22, 22, 26, .18);
    transform: translateY(110%);
    transition: transform .28s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .p-sidebar.is-open { transform: translateY(0); }

  .p-sheet__handle {
    display: block;
    width: 36px; height: 4px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: var(--line-strong);
    flex: none;
  }
  .p-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 14px;
    border-bottom: 1px solid var(--line);
    flex: none;
  }
  .p-sheet__title {
    font: 600 17px/1 Poppins, sans-serif;
    color: var(--ink);
    flex: 1;
  }
  .p-sheet__clear {
    font: 500 13.5px/1 Poppins, sans-serif;
    color: var(--blue);
  }
  .p-sheet__close {
    width: 36px; height: 36px;
    border: none; background: transparent;
    font: 500 18px/1 Poppins, sans-serif;
    color: var(--muted);
    cursor: pointer;
  }

  .p-filters-desktop { display: none !important; }
  .p-filters-mobile {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0 0;
  }
  .p-sidebar__heading { display: none; }

  /* The catalogue filters are the body of the sheet: panels scroll, the Apply
   * bar stays pinned to the foot. */
  .p-filterbar__scroll { padding: 14px 16px 20px; }
  .p-tree__link { padding: 11px 2px; font-size: 14.5px; }
  .p-check { min-height: 40px; }

  .p-sheet-section { padding: 14px 20px 6px; }
  .p-sheet-section__label {
    font: 500 11px/1 Poppins, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 8px;
  }
  .p-sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 0;
    cursor: pointer;
    font: 400 14.5px/1.3 Poppins, sans-serif;
    color: var(--ink);
  }
  .p-sheet-row input { position: absolute; opacity: 0; pointer-events: none; }
  .p-sheet-row__check {
    width: 22px; height: 22px; flex: none;
    border: 2px solid var(--line-strong);
    border-radius: 6px;
    background: var(--white);
  }
  .p-sheet-row input:checked + .p-sheet-row__check {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: inset 0 0 0 3px var(--white);
  }
  .p-sheet-row__name { flex: 1; }
  .p-sheet-row__count {
    font: 400 13px/1 Poppins, sans-serif;
    color: var(--subtle);
  }
  .p-sheet-row.is-empty { color: var(--faint); }
  .p-sheet-row input:disabled + .p-sheet-row__check { opacity: .45; }
  .p-sheet__apply {
    display: block;
    flex: none;
    padding: 14px 20px 8px;
    border-top: 1px solid var(--line);
    background: var(--white);
  }

  .p-content { padding: 12px 16px 110px; }
  .p-desktop-only { display: none !important; }
  .p-mobile-only { display: block; }
  .p-roster-find { flex-direction: column; align-items: stretch; }
  .p-roster-find .p-search,
  .p-roster-find .p-select { width: 100%; max-width: none; }
  .p-roster-find__count { margin-left: 0; }

  /* Mobile catalogue toolbar (1AB) */
  .p-m-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .p-search--mobile {
    max-width: none;
    width: 100%;
  }
  .p-m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .p-m-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--white);
    font: 500 13px/1 Poppins, sans-serif;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
  }
  a.p-m-chip:hover { color: var(--ink); text-decoration: none; }
  .p-m-chip.is-active {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }
  a.p-m-chip.is-active:hover { color: var(--white); }
  .p-m-chip-form { display: inline-flex; }
  .p-m-chip--select {
    appearance: none;
    padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  /* Mobile product cards (1AB) */
  .p-grid { grid-template-columns: 1fr; gap: 12px; }
  .p-grid.p-mobile-only { display: grid; }
  .p-product {
    flex-direction: row;
    gap: 12px;
    padding: 12px;
    border-radius: 11px;
    align-items: stretch;
  }
  /* The phone card is a compact row, so the desktop tile's 16px inset would
   * eat most of an 88px thumbnail. Enough to lift the photo off the corners,
   * no more. */
  .p-product__media {
    width: 88px; height: 88px; flex: none; padding: 4px;
    border-radius: 8px; align-self: flex-start;
  }
  .p-product__media-caption { display: none; }
  .p-product__media-initials { font-size: 18px; }
  .p-product__body { padding: 0; gap: 6px; }
  .p-product__name { min-height: 0; font-size: 13.5px; }
  .p-product__codes--desktop,
  .p-product__stock--desktop,
  .p-product__spacer--desktop,
  .p-product__add--desktop { display: none !important; }
  .p-product__codes--mobile {
    display: block;
    font: 400 12px/1.4 Poppins, sans-serif;
    color: var(--muted);
  }
  .p-product__avail--mobile {
    display: block;
    font: 400 12.5px/1.4 Poppins, sans-serif;
    color: var(--body);
  }
  .p-product__avail--mobile strong { font-weight: 600; }
  .p-product__avail--mobile.is-ok strong { color: var(--green); }
  .p-product__avail--mobile.is-low strong { color: var(--amber); }
  .p-product__avail--mobile.is-nil strong { color: var(--red); }
  .p-product__add--mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }
  .p-product__add--mobile .p-btn { min-height: 40px; padding: 0 16px; }
  .p-product__add--mobile .p-btn--request,
  .p-product .p-btn--request { width: 100%; }

  /* Mobile cart (1AD) */
  .p-m-cart-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    min-height: 44px;
  }
  .p-m-cart-back {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font: 500 20px/1 Poppins, sans-serif;
    color: var(--ink);
    text-decoration: none;
  }
  .p-m-cart-title {
    flex: 1;
    margin: 0;
    font: 600 18px/1.2 Poppins, sans-serif;
    color: var(--ink);
    text-align: center;
  }
  .p-m-cart-count {
    font: 400 12.5px/1 Poppins, sans-serif;
    color: var(--subtle);
    min-width: 56px;
    text-align: right;
  }
  .p-cart-summary { display: none !important; }
  .p-cart-remove { display: none; }
  .p-table--reflow .p-tr--head { display: none; }
  .p-table--reflow .p-tr {
    grid-template-columns: 64px 1fr !important;
    gap: 10px;
    padding: 14px;
    align-items: start;
  }
  .p-table--reflow .p-tr__r[data-label='Available'] { display: none; }
  .p-table--reflow .p-tr__c {
    grid-column: 2;
    text-align: left;
  }
  .p-table--reflow .p-tr [data-label='Quantity']::before { display: none; }
  .p-m-cart-foot {
    display: block;
    position: fixed;
    left: 0; right: 0;
    bottom: 58px; /* sit above the tab bar */
    z-index: 35;
    padding: 12px 16px 14px;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(22, 22, 26, .06);
  }
  .p-m-cart-note {
    font: 400 12.5px/1.5 Poppins, sans-serif;
    color: var(--blue-dark);
    background: var(--blue-soft);
    border: 1px solid var(--blue-line, #CBE1F0);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .p-m-cart-summary {
    display: flex;
    justify-content: space-between;
    font: 500 13.5px/1 Poppins, sans-serif;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .p-m-cart-foot form { margin-top: 8px; }
  .p-content--narrow { padding-bottom: 200px; }

  .p-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 8px 0 12px;
  }
  .p-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    font: 400 10.5px/1 Poppins, sans-serif; color: var(--muted);
    min-height: 44px; justify-content: center;
  }
  .p-tabbar a.is-active { font-weight: 500; color: var(--blue); }
  .p-tabbar__icon { font: 400 16px/1 Poppins, sans-serif; }

  .p-btn { min-height: 44px; }
  .p-stepper button { min-width: 40px; min-height: 40px; }

  .p-timeline { flex-direction: column; gap: 14px; }
  .p-timeline__step, .p-timeline__step:last-child { width: auto; }
  .p-timeline__bar { display: none; }

  .p-addr-form [style*='grid-template-columns'] { grid-template-columns: 1fr !important; }
  .p-addr.is-static,
  .p-addr--saved { flex-direction: column; align-items: stretch; }

  .p-auth__card { padding: 32px 24px 24px; }
  .p-auth__foot { flex-direction: column; align-items: flex-start; }
  .p-auth__support { text-align: left; }

  .p-cards-3 { grid-template-columns: 1fr; }
  .p-stats { flex-direction: column; }
}

/* Mid-width tablets: keep a simpler collapse without the phone sheet chrome,
 * so desktop look holds until we hit the phone breakpoint above. */
@media (max-width: 900px) and (min-width: 721px) {
  .p-header { gap: 14px; padding: 0 16px; }
  .p-header__nav { display: none; }
  .p-usermenu { padding-left: 0; border-left: none; }
  .p-header__username { display: none; }

  .p-main { display: block; }
  .p-sidebar {
    width: auto; border-right: none; border-bottom: 1px solid var(--line);
    padding: 16px;
    position: static; height: auto; overflow: visible;
  }
  .p-sidebar__toggle {
    display: block; width: 100%; min-height: 44px;
    font: 500 13px/1 Poppins, sans-serif; color: var(--ink);
    background: var(--white); border: 1px solid var(--line-strong);
    border-radius: var(--r-pill); cursor: pointer;
  }
  .p-sidebar__toggle[aria-expanded='true'] { color: var(--white); background: var(--ink); border-color: var(--ink); }
  .p-sidebar--catalogue { width: auto; overflow: visible; }
  .p-sidebar__heading { display: none; }
  .p-filterbar { display: none; }
  .p-sidebar.is-open .p-filterbar { display: flex; }
  .p-sidebar.is-open .p-filterbar__scroll {
    flex-direction: row; align-items: flex-start; overflow: visible; padding: 16px 0 0;
  }
  .p-sidebar.is-open .p-filterbar__scroll > .p-panel { flex: 1; min-width: 0; }
  .p-filters-mobile { display: none !important; }

  .p-content { padding: 16px 16px 96px; }
  .p-page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .p-page-title { font-size: 20px; }
  .p-toolbar { flex-direction: column; align-items: stretch; }
  .p-toolbar > * { width: 100%; }
  .p-toolbar .p-search { max-width: none; }
  .p-roster-find { flex-direction: column; align-items: stretch; }
  .p-roster-find .p-search,
  .p-roster-find .p-select { width: 100%; max-width: none; }
  .p-roster-find__count { margin-left: 0; }
  .p-toolbar__sort .p-select { flex: 1; }
  .p-segment { align-self: flex-start; width: auto; }

  .p-table--reflow .p-tr--head { display: none; }
  .p-table--reflow .p-tr {
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 14px 16px;
  }
  .p-table--reflow .p-tr__r, .p-table--reflow .p-tr__c { text-align: left; }
  .p-table--reflow .p-tr__actions { justify-content: flex-start; }
  .p-table--reflow .p-tr [data-label]::before {
    content: attr(data-label) ' ';
    font: 500 11px/1 Poppins, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: var(--subtle);
    display: inline-block; min-width: 92px;
  }

  .p-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 10px 0 14px;
  }
  .p-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    font: 400 10.5px/1 Poppins, sans-serif; color: var(--muted);
    min-height: 44px; justify-content: center;
  }
  .p-tabbar a.is-active { font-weight: 500; color: var(--blue); }
  .p-tabbar__icon { font: 400 16px/1 Poppins, sans-serif; }
}