/* Flooring Liquidators — Price List
   Colour theme matches the CRM (Ruengine V7 / Flooring Liquidators CRM):
   a true BLACK sidebar and black bars, ORANGE as the primary accent
   (active menu items, primary buttons, highlights), clean white/light
   content area. Type scale is deliberately BIG and BOLD (staff readability). */

:root {
  --black: #000000;
  --black-2: #0d0d0d;
  --black-3: #1f1f1f;
  --orange: #da291c; /* Moe, 2026-11-04: brand red controls sitewide */
  --orange-dark: #b0131c;
  --red-fl: #da291c; /* Flooring Liquidators red — pills/badges/chips + highlighted text */
  --blue: #2563eb;
  --green: #16a34a;
  --red: #dc2626;
  --slate: #475569;
  --ink: #141519;
  --muted: #5b6068;
  --line: #e3e5e9;
  --bg: #f4f4f6;
  --card: #ffffff;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 800; }

/* ------------------------------------------------------------------ boot */
.boot { text-align: center; padding: 4rem 1rem; color: var(--muted); font-size: 1.1rem; font-weight: 600; }
.boot-logo { height: 64px; }

/* ------------------------------------------------------- auth (setup/login) */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--black); padding: 1rem; }
.auth-card { background: var(--card); border-radius: 14px; padding: 2rem; width: 100%; max-width: 460px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.auth-logo-chip { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; text-align: center; margin-bottom: 1rem; }
.auth-logo-chip img { max-width: 100%; height: 58px; }
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.auth-card .sub { color: var(--muted); font-weight: 600; margin: 0 0 1.2rem; }
.auth-card label { display: block; font-weight: 700; margin: .9rem 0 .35rem; font-size: 1rem; }
.auth-card input { width: 100%; padding: .7rem .8rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.auth-card input:focus { outline: none; border-color: var(--orange); }
.auth-switch { margin-top: 1.1rem; text-align: center; font-weight: 600; }
.auth-switch button { background: none; border: none; color: var(--blue); font-weight: 800; padding: 0; }
.form-error { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; font-weight: 700; border-radius: 8px; padding: .6rem .8rem; margin-top: 1rem; }
.form-ok { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; font-weight: 700; border-radius: 8px; padding: .6rem .8rem; margin-top: 1rem; word-break: break-word; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: .45rem; border: none; border-radius: 8px;
  padding: .6rem 1.05rem; font-weight: 800; font-size: 1rem; color: #fff; background: var(--slate);
  text-decoration: none; line-height: 1.15; }
.btn .ic { font-size: 1.05em; }
.btn-orange { background: var(--orange); } .btn-orange:hover { background: var(--orange-dark); }
.btn-view { background: var(--red-fl); } .btn-view:hover { background: #b0131c; }
.btn-blue { background: var(--blue); }
.btn-green { background: var(--green); }
.btn-red { background: var(--red); }
.btn-slate { background: var(--slate); }
/* Sort control beside Filters/Promo (Moe, 2026-11-04): same slate button
   look as its row neighbours; grows to fill the row's remaining space. */
.sort-select { flex: 1 1 150px; background: var(--slate); color: #fff; font-weight: 800; font-size: .95rem; border: none; border-radius: 10px; padding: .6rem .5rem; cursor: pointer; }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-big { width: 100%; justify-content: center; padding: .85rem 1rem; font-size: 1.1rem; margin-top: 1.2rem; }
.btn-small { padding: .4rem .75rem; font-size: .92rem; }

/* ----------------------------------------------------------------- layout */
.layout { display: flex; min-height: 100vh; }

/* Sidebar: ONE single scrolling surface — header, nav, suppliers, count and
   the signed-in user block all scroll together (no nested scroll areas). */
.sidebar {
  width: 300px; flex: 0 0 300px; background: var(--black); color: #e8e9ec;
  height: 100vh; position: sticky; top: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem .9rem 1.4rem;
}
.side-logo-chip { background: #fff; border-radius: 10px; padding: .55rem .7rem; text-align: center; }
.side-logo-chip img { max-width: 100%; height: 52px; display: block; margin: 0 auto; }
.side-module { font-size: 1.55rem; font-weight: 900; color: #fff; margin: .8rem .2rem .2rem; letter-spacing: .2px; }
.side-module .accent { color: var(--red-fl); }
.side-sub { color: #a7abb5; font-weight: 600; font-size: .95rem; margin: 0 .2rem 1rem; }
.side-nav { display: flex; flex-direction: column; gap: .35rem; }
.side-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  background: none; border: none; color: #e8e9ec; font-weight: 700; font-size: 1.08rem;
  padding: .65rem .7rem; border-radius: 8px; }
.side-item:hover { background: var(--black-3); }
.side-item.active { background: var(--red-fl); color: #fff; } /* Moe, 2026-11-04: selected pill is brand red */
.side-item .ic { width: 1.3em; text-align: center; }
.side-h { color: #8f939e; font-size: .85rem; font-weight: 800; letter-spacing: .14em; margin: 1.3rem .2rem .5rem; }
.side-supplier { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  width: 100%; background: none; border: none; color: #dfe1e6; text-align: left;
  font-weight: 600; font-size: 1rem; padding: .42rem .7rem; border-radius: 7px; }
.side-supplier:hover { background: var(--black-3); }
.side-supplier.active { background: var(--black-3); color: #fff; font-weight: 800; box-shadow: inset 3px 0 0 var(--orange); }
.side-supplier .cnt { color: #9ba0aa; font-size: .88rem; font-weight: 700; }
.side-count { margin: 1.2rem .2rem 0; color: #c9ccd4; font-weight: 700; font-size: 1rem; }
.side-user { margin-top: 1rem; border-top: 1px solid var(--black-3); padding-top: 1rem; }
.side-user .who { font-weight: 800; color: #fff; font-size: 1.05rem; }
.side-user .role { color: var(--red-fl); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.side-user .email { color: #a7abb5; font-weight: 600; font-size: .92rem; word-break: break-all; }
.signout { margin-top: .7rem; width: 100%; background: var(--black-3); color: #fff; border: none;
  border-radius: 8px; padding: .55rem; font-weight: 800; }
.signout:hover { background: #2b2b2b; }

.main { flex: 1; min-width: 0; padding: 1.2rem 1.4rem 3rem; }
.topbar { display: none; }
.view-title { font-size: 1.9rem; font-weight: 900; }
.view-sub { color: var(--muted); font-weight: 600; margin: .2rem 0 1.1rem; font-size: 1.05rem; }

/* ------------------------------------------------------------- price list */
.search-row { display: flex; gap: .6rem; align-items: stretch; margin-bottom: .8rem; }
.search-box { flex: 1; display: flex; align-items: center; gap: .5rem; background: #fff;
  border: 2px solid var(--line); border-radius: 10px; padding: 0 .9rem; }
.search-box:focus-within { border-color: var(--orange); }
.search-box .ic { font-size: 1.25rem; }
.search-box input { flex: 1; border: none; outline: none; padding: .8rem 0; font-size: 1.15rem; font-weight: 700; min-width: 0; }
/* Filters slide in as a drawer from the left (Moe, 2026-11-04) — pick the
   filters, Apply, and it retracts, so the list keeps its full height. */
.filters-drawer { position: fixed; top: 0; left: 0; height: 100dvh; width: min(350px, 90vw); background: #fff; z-index: 70; box-shadow: 2px 0 18px rgba(0,0,0,.25); padding: 1rem; overflow-y: auto; transform: translateX(-105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.filters-drawer.open { transform: translateX(0); visibility: visible; transition: transform .28s ease; }
.filters-drawer .filters-grid { grid-template-columns: 1fr; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.drawer-head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; }
.filters-grid label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: .3rem; }
.filters-grid select, .filters-grid input { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; background: #fff; }
.filters-actions { margin-top: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.badge { background: var(--red-fl); color: #fff; border-radius: 999px; font-size: .8rem; font-weight: 900; padding: .05rem .5rem; margin-left: .35rem; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.result-count { font-weight: 800; font-size: 1.1rem; }

table.products { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
table.products th { background: var(--black); color: #fff; text-align: left; padding: .75rem .9rem; font-size: 1rem; font-weight: 800; }
table.products td { padding: .8rem .9rem; border-top: 1px solid var(--line); vertical-align: top; font-size: 1.02rem; }

.p-name { font-size: 1.28rem; font-weight: 900; line-height: 1.25; }
.p-supplier { font-size: 1.12rem; font-weight: 800; }
.p-colour { font-size: 1.12rem; font-weight: 900; }          /* colours extra-bold */
.p-specs { color: #33363d; font-weight: 600; font-size: .98rem; }
.p-cat { color: var(--muted); font-weight: 700; font-size: .95rem; }
.price-lines { font-size: 1.02rem; }
/* Price rows (Moe, 2026-11-04): description and price stay on the SAME
   line — the label gets a left column (wrapping inside itself when long)
   and the price is pinned to the right, bold, never wrapping, so the two
   never scatter across lines. */
.price-line { display: flex; align-items: baseline; gap: .75rem; margin: .1rem 0; }
.price-line .pl { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #3c4048; }
.price-line .pv { flex: 0 0 auto; white-space: nowrap; margin-left: auto; font-weight: 900; }
.price-line .promo-price { flex: 0 0 auto; white-space: nowrap; }
.price-none { font-weight: 800; color: var(--red); }
.row-actions { display: flex; gap: .45rem; white-space: nowrap; }

.cards { display: none; }
.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: 1.1rem; font-weight: 800; }

/* ---------------------------------------------------------- product detail */
.detail { background: #fff; border-radius: 12px; padding: 1.4rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.detail h2 { font-size: 2rem; font-weight: 400; line-height: 1.2; }
.detail .d-supplier { font-size: 1.3rem; font-weight: 800; color: var(--red-fl); margin-top: .2rem; }
.detail .d-colour { font-size: 1.45rem; font-weight: 400; color: var(--red-fl); margin-top: .35rem; }
.d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.6rem; margin-top: 1.2rem; }
.d-field { min-width: 0; } /* let long values (e.g. emails) shrink/wrap instead of overlapping the next column */
/* Settings: email gets its own full-width row so it stays on one line without touching Role. */
.d-field.d-email { grid-column: 1 / -1; }
.d-field .d-label { font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.d-field .d-value { font-size: 1.12rem; font-weight: 700; overflow-wrap: anywhere; }
.d-field .d-value.big { font-size: 1.25rem; font-weight: 900; }
.d-prices .price-line { font-size: 1.18rem; margin: .3rem 0; }
.d-prices .promo-block { font-size: 1.18rem; margin: .3rem 0; }
.colour-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.chip { border: 1.5px solid var(--black); background: #fff; color: var(--ink); border-radius: 999px;
  padding: .22rem .6rem; font-weight: 800; font-size: .88rem; line-height: 1.25; }
.chip:hover { background: var(--black); color: #fff; }
.chip.current { background: var(--red-fl); border-color: var(--red-fl); color: #fff; }
.detail-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; border-top: 2px solid var(--line); padding-top: 1.1rem; }

/* ------------------------------------------- collections (main list) + view */
.coll-row { cursor: pointer; }
.coll-card { cursor: pointer; }
.coll-counts { font-weight: 800; font-size: 1.02rem; }
.colour-entry { margin: .15rem 0; }
.p-colour-sm { font-weight: 900; }

/* Stock-status pills (semantic colours; 'Check stock' is charcoal so it can
   never be confused with the red 'Out of stock'). */
.status-badge { display: inline-block; border-radius: 999px; padding: .12rem .65rem; font-size: .85rem; font-weight: 900; color: #fff; vertical-align: middle; white-space: nowrap; }
.st-in { background: var(--green); }
.st-check { background: var(--black-3); }
.st-back { background: var(--blue); }
.st-out { background: var(--red); }
.colour-notes { color: var(--muted); font-weight: 600; font-size: .92rem; margin-top: .25rem; }
.status-form { margin-top: 1.2rem; border-top: 2px solid var(--line); padding-top: 1rem; }
.status-form .d-label { font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.status-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.status-row select, .status-row input { padding: .55rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 700; background: #fff; }
.status-row input { flex: 1; min-width: 200px; }
/* Promo pricing: while a promo is active the regular price is crossed out,
   the promo price is FL red and bold, with a small-font detail line naming
   the promo and its end date. */
.price-was { opacity: .8; }
.pg-tag { display: inline-block; background: var(--red-fl); color: #fff; font-weight: 800;
  font-size: .8rem; padding: .18rem .55rem; border-radius: 999px; margin-bottom: .35rem; }
.price-was .price-line .pv {
  text-decoration: line-through; text-decoration-thickness: 2px; }
/* Grade-targeted promo: only the promo'd grade's PRICE is struck (never the
   label/name — Moe, 2026-11-03), with the promo price beside it on the same
   line; other grades stay untouched. */
.price-line-struck { opacity: .8; }
.price-line-struck .pv {
  text-decoration: line-through; text-decoration-thickness: 2px; }
/* Original amount and sale amount remain visible together. */
.promo-block { display: flex; align-items: baseline; gap: .75rem; margin: .1rem 0; flex-wrap: wrap; }
.promo-block .sale-label { flex: 1 1 auto; min-width: 0; }
.promo-block .promo-price { margin-left: auto; flex: 0 0 auto; }
.promo-price { color: var(--red-fl); font-weight: 900; font-size: 1.12em; }
.sale-label { color: var(--red-fl); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.promo-detail { color: var(--red-fl); font-size: .82rem; font-weight: 700; }
.promo-block .promo-detail { flex: 0 0 100%; display: flex; align-items: baseline; gap: .3rem; margin-top: .1rem; min-width: 0; }
/* The promo name clamps with an ellipsis; the expiry date is always
   rendered in full (Moe, 2026-11-04: "It needs expiry date"). */
.promo-block .promo-detail .promo-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-block .promo-detail .promo-expiry { flex: 0 0 auto; white-space: nowrap; }
/* Greg via Moe, 2026-11-04: in the price LIST the promo name sits beside
   the promo price on ONE line, clipped with an ellipsis when the column is
   narrow, so sale rows stay at normal height. The full promo name and end
   date remain available in the label's hover/long-press title and on the
   product page, whose detail line is unchanged. */
#results .price-lines .promo-block { margin-top: .1rem; }
#results .price-lines .promo-block .promo-detail .promo-tag { flex: 0 0 auto; }
/* Legacy desktop table (>900px, now hidden — the desktop list uses cards):
   the promo name would force the Cost column wide, so only the name hides
   there — the 🏷 marker and the full expiry date stay visible beside the
   sale price; the promo name remains in the hover title and on the product
   page. Phone and desktop cards keep the one-line clamped name plus the
   visible expiry. */
@media (min-width: 901px) {
  /* Desktop list shows the same stacked cards as the phone: one product per
     rounded card, white / very light beige alternating (the alternating
     background rule is global: .cards > .card:nth-child(even)). The table
     markup stays rendered but hidden; its old desktop promo rules remain
     scoped to the table so they no longer affect the cards. */
  #results table.products { display: none; }
  #results .cards { display: flex; flex-direction: column; gap: .65rem; }
  #results .cards .card { background: #fff; border-radius: 12px; padding: .8rem .9rem; border: 1px solid #ece7d9; box-shadow: 0 8px 20px -16px rgba(40,30,0,.45); }
  /* Higher specificity than the base card rule so the global even-card
     beige alternation (white, very light beige) still wins on desktop. */
  #results .cards > .card:nth-child(even) { background: #faf5ea; }
  #results table.products td:nth-child(5) { vertical-align: middle; }
  #results table.products .price-lines .promo-block { flex-wrap: nowrap; align-items: baseline; gap: .35rem; }
  #results table.products .price-lines .promo-block .sale-label { flex: 0 0 auto; }
  #results table.products .price-lines .promo-block .promo-price { margin-left: 0; }
  #results table.products .price-lines .promo-block .promo-detail { flex: 0 0 auto; margin-top: 0; }
  #results table.products .price-lines .promo-block .promo-detail .promo-name { display: none; }
  /* With the date visible, the marker is redundant — dropping it keeps the
     Cost column narrow enough to avoid any page-level horizontal scroll.
     Promos without an end date keep the marker as before. */
  #results table.products .price-lines .promo-block .promo-detail:has(.promo-expiry) .promo-tag { display: none; }
}
.colour-promo { margin: .15rem 0 .25rem; }
.btn-promo-on { background: var(--red-fl); }
.btn-promo-on:hover { background: #b0131c; }
.tag-sched { background: #dbeafe; color: #1e40af; }
.pm-pick { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid var(--line);
  border-radius: 8px; padding: .55rem .75rem; margin-top: .45rem; font-weight: 700; color: var(--ink); }
.pm-pick:hover { border-color: var(--orange); }
.pm-pick span { color: var(--muted); font-weight: 600; }

/* Promo CSV import: preview first; only server-matched rows can be confirmed. */
.promo-import-card { max-width: 1100px; }
.import-help { color: var(--muted); font-weight: 600; margin: .2rem 0 1rem; }
.import-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.import-preview { margin-top: 1.2rem; }
.import-preview h4 { font-size: 1.08rem; font-weight: 900; margin: 1.1rem 0 .55rem; }
.import-summary { background: #fff7ed; border: 1.5px solid #fdba74; border-radius: 8px; padding: .65rem .8rem; font-weight: 700; }
.import-product { padding: .35rem 0; }
.import-product + .import-product { border-top: 1px solid var(--line); margin-top: .35rem; }
.import-reason { color: #991b1b; font-weight: 800; }
.table-scroll { overflow-x: auto; border-radius: 10px; }
.table-scroll table.simple { min-width: 760px; }

.modal label { display: block; font-weight: 800; margin: .8rem 0 .3rem; }
.modal textarea, .modal input { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.modal .d-label { font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }

/* ------------------------------------------------------------------ forms */
.form-card { background: #fff; border-radius: 12px; padding: 1.4rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); max-width: 860px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-card label { display: block; font-weight: 800; margin-bottom: .3rem; }
.form-card input, .form-card textarea, .form-card select { width: 100%; padding: .65rem .75rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; background: #fff; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { outline: none; border-color: var(--orange); }
.form-card textarea { min-height: 84px; resize: vertical; }
.radio-row { display: flex; gap: 1.2rem; flex-wrap: wrap; font-weight: 700; }
.radio-row label { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; margin: 0; }
.perm-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .4rem; }
.perm-grid label { display: inline-flex; gap: .45rem; align-items: center; font-weight: 700; margin: 0; }
.perm-grid input { width: auto; }

/* ------------------------------------------------------------------ admin */
table.simple { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
table.simple th { background: var(--black); color: #fff; text-align: left; padding: .65rem .8rem; font-weight: 800; }
table.simple td { padding: .65rem .8rem; border-top: 1px solid var(--line); font-weight: 600; vertical-align: top; }
.tag { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .82rem; font-weight: 900; background: #eef0f3; }
.tag-admin { background: var(--red-fl); color: #fff; }
.tag-pending { background: #fdebec; color: #b0131c; }
.tag-off { background: #fee2e2; color: #991b1b; }
.tag-on { background: #dcfce7; color: #166534; }
.section { margin-bottom: 2rem; }
.section h3 { font-size: 1.35rem; font-weight: 900; margin-bottom: .7rem; }
.invite-code { font-size: 1.6rem; font-weight: 900; letter-spacing: .12em; }
textarea.copybox { width: 100%; min-height: 110px; padding: .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }

/* ------------------------------------------------------------------ modal */
.modal-back { position: fixed; inset: 0; background: rgba(10,10,12,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 60; }
.modal { background: #fff; border-radius: 12px; padding: 1.4rem; max-width: 520px; width: 100%; }
.modal h3 { font-size: 1.4rem; font-weight: 900; margin-bottom: .5rem; }
.modal p { font-weight: 600; }
.modal .modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }

.empty { background: #fff; border-radius: 10px; padding: 2rem; text-align: center; font-weight: 700; color: var(--muted); font-size: 1.1rem; }

/* ----------------------------------------------------------------- mobile */
/* Responsive type: weights stay BOLD everywhere, but sizes step DOWN on
   phone widths so titles, labels, prices and buttons fit cleanly inside
   cards — no mid-name wrapping or overflow. Largest sizes are desktop-only.
   Form controls stay at 16px on mobile so phones don't auto-zoom on focus. */
.hamburger { display: none; }
@media (max-width: 900px) {
  html { font-size: 16px; }
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; transform: translateX(-105%); transition: transform .22s ease; width: 300px; }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.5); }
  .topbar { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
  .hamburger { display: inline-flex; background: var(--black); color: #fff; border: none; border-radius: 8px; padding: .55rem .8rem; font-weight: 900; font-size: 1.05rem; }
  .topbar .t-logo { height: 36px; }
  .topbar .t-title { font-weight: 900; font-size: 1.15rem; }
  .main { padding: 1rem .8rem 2.5rem; }
  .view-title { font-size: 1.32rem; }
  .view-sub { font-size: .95rem; }
  .search-row { flex-wrap: wrap; }
  .search-box input { font-size: 1rem; padding: .65rem 0; } /* 16px: no iOS zoom */
  .btn { font-size: .95rem; padding: .55rem .85rem; }
  .result-count { font-size: 1rem; }
  table.products { display: none; }
  .cards { display: flex; flex-direction: column; gap: .8rem; }
  .card { background: #fff; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
  .card .p-name { font-size: 1.02rem; line-height: 1.25; overflow-wrap: break-word; }
  .card .p-supplier { font-size: 1rem; }
  .card .p-colour { font-size: 1.05rem; overflow-wrap: break-word; }
  .card .p-cat { font-size: .88rem; }
  .card .price-lines { font-size: .95rem; }
  .card .p-specs { font-size: .9rem; }
  .card .row-actions { margin-top: .65rem; gap: .5rem; }
  .card .row-actions .btn { flex: 1; justify-content: center; padding: .55rem .4rem; font-size: .95rem; }
  .form-grid { grid-template-columns: 1fr; }
  .detail { padding: 1.1rem; }
  .detail h2 { font-size: 1.3rem; }
  .detail .d-supplier { font-size: 1.05rem; }
  .detail .d-colour { font-size: 1.15rem; overflow-wrap: break-word; }
  .d-prices .price-line { font-size: 1.05rem; }
  .chip { font-size: .85rem; padding: .2rem .55rem; }
  .invite-code { font-size: 1.35rem; }
}

@media (max-width: 480px) {
  .d-field.d-email .d-value.big { font-size: 1.05rem; } /* keep realistic emails on one line on phones */
  .view-title { font-size: 1.22rem; }
  .search-box { flex: 1 1 100%; }
  .card .p-name { font-size: .98rem; }
  .card .p-colour { font-size: .98rem; }
  .card .row-actions .btn { font-size: .92rem; padding: .5rem .3rem; }
  .btn { font-size: .92rem; }
  .side-item { font-size: 1rem; }
  .side-module { font-size: 1.3rem; }
  .detail h2 { font-size: 1.22rem; }
  .detail .d-colour { font-size: 1.08rem; }
  .auth-card { padding: 1.4rem 1.1rem; }
  .auth-card h1 { font-size: 1.45rem; }
  .pager { font-size: .95rem; }
}

/* Persistent rep reminder banner (Moe, 2026-11-03): always visible at the top of every app view. */
.rep-banner { background: #fdecea; border: 2px solid #da291c; border-radius: 8px; color: #da291c; font-weight: 900; text-align: center; padding: .35rem .7rem; margin-bottom: .8rem; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Promo-only products (Moe, 2026-11-03): the promo price pops in big FL red
   with a red "Promo" badge — there is no regular price to cross out. */
.promo-only-block { margin: .25rem 0; }
.promo-only-price { color: var(--red-fl); font-weight: 900; font-size: 1.45em; }
.promo-badge { display: inline-block; background: var(--red-fl); color: #fff; font-weight: 900; font-size: .72em; letter-spacing: .05em; text-transform: uppercase; padding: .16em .55em; border-radius: 999px; margin-left: .5em; vertical-align: .18em; }
.promo-only-block .promo-detail { display: block; margin-top: .15rem; }

/* Detail-view fields as pills (Moe, 2026-11-03): features/clauses as chips
   under each field title instead of long text blocks. */
.d-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.d-pill { display: inline-block; background: #f1f1f4; color: #1c1c1e; font-weight: 700; font-size: .95rem; padding: .32rem .7rem; border-radius: 999px; }
.d-pill-warn { background: #fef3c7; border: 1.5px solid #f59e0b; color: #92400e; }

/* Inline SVG icon inside buttons (filter funnel). */
.btn svg.btn-ic { vertical-align: -2px; margin-right: .35em; }

/* Filters panel helper note. */
.filters-note { color: #555; font-size: .9rem; font-weight: 600; margin: .2rem 0 .6rem; }

/* Supplier profiles (Moe, 2026-11-03). */
.supplier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.supplier-card { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .9rem; text-align: left; background: #fff; border: none; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; font: inherit; }
.supplier-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.supplier-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }
.supplier-loc { align-self: flex-start; background: #f1f1f4; border-radius: 999px; padding: .18rem .6rem; font-size: .78rem; font-weight: 800; color: #303030; margin-top: .15rem; }
.supplier-count { text-align: right; flex: none; }
.supplier-count strong { display: block; font-size: 1.4rem; font-weight: 900; color: #111; line-height: 1.05; }
.supplier-count small { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8e; }
.supplier-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.13); }
.supplier-name { font-weight: 900; font-size: 1.02rem; color: #111; }
.supplier-meta { font-weight: 800; color: #da291c; font-size: .88rem; }
.supplier-line { color: #555; font-weight: 600; font-size: .9rem; }
.card-h { font-size: 1rem; font-weight: 900; margin: 0 0 .6rem; }
.contact-row { display: flex; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid #f0f0f2; }
.contact-row:last-child { border-bottom: none; }
.contact-label { flex: 0 0 86px; font-weight: 800; color: #666; }
.contact-value { font-weight: 700; color: #111; word-break: break-word; }
.contact-value a { color: #0050cc; }
.rep-row { display: flex; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rep-row input { flex: 1 1 130px; }

/* Back-to-top (Moe, 2026-11-04): floating pill, bottom-right on every
   view, appears after scrolling a screenful; sits under the mobile
   sidebar overlay (z 50) so the menu covers it when open. */
.back-to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; background: #303030; color: #fff; font-weight: 800; font-size: .9rem; border: none; border-radius: 999px; padding: .6rem 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }

/* How to Install view */
.install-card { margin-bottom: 1rem; }
.install-card h3 { margin: .1rem 0 .5rem; font-size: 1.05rem; }
.install-link { font-weight: 800; font-size: 1.08rem; word-break: break-all; margin-bottom: .65rem; }
.install-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .55rem; }
.steps { margin: .3rem 0 .2rem 1.25rem; line-height: 1.55; font-weight: 600; }
.steps li { margin-bottom: .3rem; }

/* Warehouse locations as pills on the supplier profile (Moe, 2026-11-04):
   one pill per warehouse, stacked. */
.wh-pills { display: flex; flex-direction: column; gap: .45rem; }
.wh-pill { display: block; background: #f1f1f4; border-radius: 10px; padding: .5rem .7rem; font-weight: 700; }

.btn-dark { background: #111; color: #fff; }

/* Reps directory (Moe, 2026-11-04) */
.reps-tools { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.reps-tools input { flex: 1; min-width: 170px; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 10px; font-weight: 600; font: inherit; }
.reps-tools select { padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; background: #fff; font: inherit; }
.rep-card { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; background: #fff; border: none; border-radius: 12px; padding: .75rem .9rem; margin-bottom: .55rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; font: inherit; }
.rep-card .rep-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.rep-card .rep-name { font-weight: 900; font-size: 1rem; }
.rep-terr { font-weight: 700; color: #33363d; font-size: .9rem; }
.rep-sup { font-weight: 700; color: var(--muted); font-size: .85rem; }
.rep-card .rep-phone { font-weight: 800; color: #111; flex: none; }
.rep-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.3rem; }
#rep-notes-text { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.notes-text { font-weight: 600; white-space: pre-wrap; }
.form-ok { color: #1e9e57; font-weight: 800; margin-top: .5rem; }

/* Team directory + sharing (Moe, 2026-11-04) */
.team-row { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 12px; padding: .7rem .9rem; margin-bottom: .55rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #303030; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.team-name { font-weight: 800; flex: 1; }
.team-you { color: var(--muted); font-weight: 700; }
.team-role { font-size: .82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.seg-tabs { display: flex; gap: .5rem; margin-bottom: .8rem; }
.seg { flex: 1; background: #fff; border: 2px solid #d4d4d8; border-radius: 999px; padding: .45rem 0; font-weight: 800; font-size: .95rem; cursor: pointer; }
.seg.on { background: #da291c; border-color: #da291c; color: #fff; }
.share-row { display: flex; justify-content: space-between; gap: .8rem; width: 100%; text-align: left; background: #fff; border: none; border-radius: 12px; padding: .8rem .9rem; margin-bottom: .55rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; font: inherit; }
.share-row.unread { outline: 2px solid #da291c; }
/* Moe, 2026-11-04 16:08: bold title only while unread for THIS user. */
.share-row.unread .share-title { font-weight: 700; }
.share-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.share-title { font-weight: 400; font-size: 1rem; }
.share-sub { color: var(--muted); font-weight: 700; font-size: .88rem; }
.share-note { font-weight: 600; color: #33363d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44ch; }
.share-meta { text-align: right; font-size: .85rem; font-weight: 700; color: var(--muted); flex: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #da291c; margin-right: .4rem; }
.seen { color: #1e9e57; }
.unseen { color: var(--muted); }
.thread-head { margin: .8rem 0 1rem; }
.thread-sup { font-weight: 800; color: var(--muted); }
.snap-label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .6rem 0 .3rem; }
.thread-who { font-weight: 600; color: #33363d; margin-top: .7rem; }
.thread-msgs { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.msg { background: #fff; border-radius: 12px; padding: .7rem .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.msg.mine { background: #fdf1ec; }
.msg-head { font-size: .85rem; color: var(--muted); font-weight: 700; margin-bottom: .25rem; }
.msg-body { font-weight: 600; white-space: pre-wrap; }
.reply-card label { display: block; font-weight: 800; margin-bottom: .3rem; }
.reply-card textarea { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; margin-bottom: .6rem; }
.modal select { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; background: #fff; }

/* Quick-filter pills on the price list (Moe, 2026-11-03; compact grid
   layout 2026-11-04 at his direction — smaller pills, even columns, a
   small group label each, so the two rows stay tidy and take less room). */
.qpill-group { margin: .55rem 0 .05rem; }
.qpill-label { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a8a8e; margin-bottom: .3rem; }
.quick-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; }
.qpill { background: #fff; border: 1.5px solid #d4d4d8; color: #222; font-weight: 800; font-size: .84rem; padding: .32rem .15rem; border-radius: 999px; cursor: pointer; text-align: center; white-space: nowrap; }
.qpill.on { background: #da291c; border-color: #da291c; color: #fff; }
@media (min-width: 700px) { .quick-pills { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 700px) { .quick-pills.qp-type { grid-template-columns: repeat(6, 1fr); } }
.upload-removed td { opacity: .55; }

/* ===== DESIGN PREVIEW: premium light main page + rotating gold highlight banner ===== */
@property --gold-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body { background: linear-gradient(180deg, #fbfaf7 0%, #f4f4f6 320px); }
.rep-banner {
  position: relative; isolation: isolate; border: 2px solid #d4a017; border-radius: 14px;
  background: linear-gradient(#fffdf7, #fff6dc);
  color: #6b4d05; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  font-size: .82rem; line-height: 1.25; padding: 1.55rem 1.5rem; text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px -8px rgba(184,134,11,.55);
  white-space: normal; overflow: hidden; text-overflow: clip;
}
.rep-banner-text { position: relative; display: block; }
/* Marquee ring of "$" lights */
.mq { position: absolute; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font-style: normal; font-weight: 900; font-size: .8rem; line-height: 1; letter-spacing: 0; }
.mq i { font-style: normal; color: #d9c27a; animation: mq-chase calc(var(--n) * .11s) linear infinite; animation-delay: calc(var(--i) * .11s - var(--n) * .11s); }
.mq-top { left: 1.3rem; right: 1.3rem; top: .38rem; }
.mq-bottom { left: 1.3rem; right: 1.3rem; bottom: .38rem; }
.mq-left { left: .4rem; top: 1.3rem; bottom: 1.3rem; flex-direction: column; }
.mq-right { right: .4rem; top: 1.3rem; bottom: 1.3rem; flex-direction: column; }
@keyframes mq-chase {
  0% { color: #fff3a8; text-shadow: 0 0 4px #ffd84a, 0 0 9px #f0b400; transform: scale(1.3); }
  10% { color: #e8b50c; text-shadow: 0 0 5px rgba(255,200,40,.8); transform: scale(1.12); }
  28%, 100% { color: #d9c27a; text-shadow: none; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .mq i { animation: none; color: #c99a14; } }
.view-title { letter-spacing: -.01em; }
.search-box { border-radius: 14px; border: 1.5px solid #e6e1d3; box-shadow: 0 6px 18px -12px rgba(20,21,25,.35); }
.search-box:focus-within { border-color: #d4a017; box-shadow: 0 0 0 3px rgba(212,160,23,.18); }
.chip, .qpill { border-color: #d9d4c4; }
.qpill-label { letter-spacing: .12em; }

/* ---- preview: cleaner hierarchy, tighter intro, controls and action rows that never clip ---- */
.view-title { margin: .1rem 0 .15rem; }
.view-sub.lede { font-size: .9rem; font-weight: 600; margin: 0 0 .75rem; line-height: 1.35; color: #6b6558; }
.view-sub.lede strong { color: #3a362c; }
.row-actions { flex-wrap: wrap; }
@media (max-width: 900px) {
  .rep-banner { margin-bottom: .6rem; }
  .search-row { gap: .5rem; margin-bottom: .55rem; }
  .search-row .btn { flex: 0 0 auto; padding: .55rem .75rem; }
  .sort-select { flex: 1 1 0; min-width: 0; font-size: .85rem; padding: .6rem .4rem; }
  .qpill-group { display: flex; align-items: flex-start; gap: .5rem; margin: .3rem 0; }
  .qpill-label { margin: .45rem 0 0; flex: 0 0 3.1rem; }
  .quick-pills, .quick-pills.qp-type { display: flex; flex-wrap: wrap; gap: .4rem; overflow: visible; flex: 1 1 auto; min-width: 0; padding: .1rem .05rem .25rem; }
  .quick-pills::-webkit-scrollbar { display: none; }
  .qpill { flex: 0 0 auto; padding: .35rem .7rem; font-size: .85rem; }
  .result-count { margin: .4rem 0 .5rem; font-size: .95rem; color: #5b564a; }
  .cards { gap: .65rem; }
  .card { padding: .8rem .9rem; border: 1px solid #ece7d9; box-shadow: 0 8px 20px -16px rgba(40,30,0,.45); }
  .card .row-actions { flex-wrap: wrap; white-space: normal; gap: .45rem; margin-top: .6rem; }
  .card .row-actions .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; padding: .55rem .3rem; }
  .card .row-actions .btn[data-request] { flex: 1 1 100%; order: 3; }
}
@media (max-width: 900px) { .sort-select { font-size: .8rem; padding: .6rem .3rem; text-overflow: ellipsis; } }
@media (max-width: 400px) { .sort-select { flex: 1 1 100%; font-size: .9rem; padding: .55rem .6rem; } }

/* Product list/cards: only the price and the colour name are bold (Moe, 2026-11-04). */
#results .p-name, #results .p-supplier, #results .p-cat, #results .p-specs,
#results .price-line .pl, #results .colour-notes, #results .promo-detail,
#results .price-lines small, #results table.products td { font-weight: 400; }
#results .price-line .pv, #results .promo-price { font-weight: 900; }
#results .p-colour { font-weight: 400; color: var(--red-fl); }  /* Moe 2026-11-04: colour codes regular weight, red highlight (typography option B) */
#results .price-lines { font-weight: 400; }
.st-special { background: #5b4a14; }

/* Product list: the whole card/row opens View on a single tap (Moe, 2026-11-04). */
#results tr[data-open], #results .card[data-open] { cursor: pointer; }
#results tr[data-open]:focus-visible, #results .card[data-open]:focus-visible { outline: 2px solid #c9a227; outline-offset: -2px; }
a.side-item { text-decoration: none; color: inherit; cursor: pointer; }

/* ===== Moe 2026-11-04 batch: tabs/pills/badges, message tools, notes panel (moved from styles.css, which is unreferenced) ===== */

/* Promo campaign expansion (tap a promo name to see its products) */
.promo-toggle { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.promo-toggle .pt-arrow { color: #da291c; font-weight: 700; }
.promo-detail > td { background: #f5f5f7; padding: 0.4rem 0.6rem; }
.promo-member { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; justify-content: space-between; padding: 0.55rem 0.2rem; border-bottom: 1px solid #e3e3e8; }
.promo-member:last-child { border-bottom: none; }
.promo-member .pm-main { flex: 1 1 220px; }
.promo-member .pm-prices { flex: 0 1 auto; }
.promo-member .pm-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Notifications & Messages redesign (preview) */
.nf-search { display: flex; gap: .5rem; margin-bottom: .8rem; }
.nf-search input { flex: 1; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.nf-actions { margin-bottom: .9rem; }
.share-row.act-row { cursor: default; }
.share-row.act-row .share-title { font-weight: 700; }
.open-chip { background: #e8f5e9; color: #2e7d32; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .1rem .5rem; margin-left: .35rem; vertical-align: middle; }
.nf-search { flex-wrap: wrap; }
.nf-search input { min-width: 0; flex: 1 1 140px; }
.nf-search { width: 100%; }

/* Notes/discussions feed groups (Moe, 2026-11-04). */
.nf-group { margin-bottom: 1.1rem; }
.nf-group-title { font-weight: 800; font-size: 1.02rem; color: var(--black-1, #1c1c1e); margin: .4rem 0 .1rem; }
.nf-group-sub { font-size: .8rem; color: #777; margin-bottom: .35rem; }

/* Notes/Discussions/Activity tabs + message edit/delete + product note box (Moe, 2026-11-04). */
.nf-tabs { display: flex; gap: .4rem; margin: .2rem 0 .8rem; }
.nf-tab { position: relative; background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: .5rem 1rem;
  font-weight: 700; font-size: .95rem; cursor: pointer; color: #444; }
.nf-tab.on { background: #da291c; color: #fff; border-color: #da291c; }
.nf-badge { position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #1c1c1e; color: #fff; font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.nf-tab.on .nf-badge { background: #fff; color: #da291c; border-color: #da291c; }
.msg-tools { margin-left: .5rem; }
.msg-tool { background: #f2f2f4; border: 1px solid #ddd; border-radius: 8px; cursor: pointer;
  font-size: .95rem; padding: .2rem .4rem; margin-left: .25rem; }
.msg-tool:hover { opacity: 1; }
.msg-flag { color: #999; font-size: .8rem; font-weight: 400; }
.msg-deleted { color: #999; font-style: italic; }
.msg-edit-box { width: 100%; border: 1px solid #ccc; border-radius: 8px; padding: .5rem; font: inherit; }
.msg-edit-actions { margin-top: .3rem; display: flex; gap: .4rem; }
/* Moe, 2026-11-04: notes + discussions indicators, then the note box. */
.notes-panel { margin-top: .9rem; }
.notes-chips { display: flex; gap: .5rem; margin-bottom: .8rem; }
.notes-chips .btn { flex: 1; }
.notes-disc-list { margin: -0.3rem 0 .8rem; display: flex; flex-direction: column; gap: .4rem; }
.notes-disc-row { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; background: #f7f7f9; border: 1px solid #e3e3e8; border-radius: 10px; padding: .5rem .7rem; font: inherit; cursor: pointer; }
.notes-disc-row:hover { background: #efefF2; }
.notes-disc-title { font-weight: 700; }
.notes-disc-meta { color: #777; font-size: .8rem; }
.notes-disc-last { color: #555; font-size: .85rem; }
.notes-panel label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.note-link-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.note-link-row label { margin-bottom: 0; }
.note-link-row select { flex: 1; min-width: 0; padding: .45rem .6rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; background: #fff; }
.colour-tag { display: inline-block; margin-top: .3rem; background: #eef2ff; color: #3730a3; font-weight: 800; font-size: .82rem; padding: .18rem .6rem; border-radius: 999px; }
#sh-colour, #ch-to, #sh-to { width: 100%; padding: .55rem .7rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; margin-bottom: .6rem; background: #fff; }
.note-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.note-row input { flex: 1 1 auto; min-width: 0; border: 1px solid #ccc; border-radius: 8px; padding: .55rem .7rem; font: inherit; }
.note-row .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .note-row #d-note-save { flex: 1 1 100%; order: 3; }
}

/* @mention alerts (Moe, 2026-11-04). */
.mention-alerts { margin-bottom: .8rem; }
.mention-row { outline: 2px solid #da291c; background: #fff7f6; }
.mention-row .share-title { font-weight: 900; }
.reply-actions { display: flex; gap: .5rem; align-items: center; }
.reply-actions .btn-orange { flex: 1; }
/* Edit title (Moe, 2026-11-04): creator/master-admin in-place title edit. */
.thread-custom-title { font-weight: 700; margin-bottom: .15rem; }
.title-edit { margin: .4rem 0 .2rem; }
.title-edit input { width: 100%; padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
.title-edit-actions { display: flex; gap: .4rem; margin-top: .4rem; }
/* @ mention autocomplete (Moe, 2026-11-04 16:25): list opens at the caret. */
.mention-ac { position: absolute; z-index: 60; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); overflow: hidden; }
.mention-ac-item { display: block; width: 100%; text-align: left; padding: .55rem .7rem; background: #fff; border: none; font: inherit; cursor: pointer; }
.mention-ac-item.active, .mention-ac-item:hover { background: #f0f0f0; }
/* Emoji picker grid (Moe, 2026-11-04 16:17). */
.emoji-ac { position: absolute; z-index: 60; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; width: 300px; max-height: 180px; overflow-y: auto; }
.emoji-ac-item { background: none; border: none; font-size: 1.25rem; padding: 2px; cursor: pointer; border-radius: 6px; }
.emoji-ac-item:hover { background: #f0f0f0; }
/* Roomier desktop supplier pills; mobile layout stays unchanged. */
@media (min-width: 900px) {
  .supplier-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 1.1rem; }
  .supplier-card { border-radius: 36px; padding: 1.4rem 1.6rem; min-height: 150px; gap: 1.5rem; }
  .supplier-main { gap: .4rem; flex: 1; }
  .supplier-name { font-size: 1.1rem; overflow-wrap: anywhere; }
  .supplier-addr { white-space: normal; overflow: visible; text-overflow: clip; }
  .supplier-count { background: #f4f4f6; border-radius: 999px; padding: 1rem; min-width: 90px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
}

/* Read-only (ghost) accounts: no write controls are shown. Server enforces it too. */
body.ghost-ro #d-share, body.ghost-ro #d-request, body.ghost-ro #reply-form, body.ghost-ro #th-dismiss,
body.ghost-ro #nf-new, body.ghost-ro .notes-panel .note-link-row, body.ghost-ro .notes-panel label[for="d-note"],
body.ghost-ro .notes-panel .note-row, body.ghost-ro #d-note-msg { display: none !important; }

/* Alternating product cards (Moe, 2026-11-04): white, very light beige. Cards list only. */
.cards > .card:nth-child(even) { background: #faf5ea; }

/* Compact colour names: inline, wrapping, muted dot separators. */
.colour-inline { line-height: 1.35; overflow-wrap: break-word; word-break: normal; }
.colour-inline .colour-sep { color: #9a9a9a; }

/* Keep black original and red sale price on the same baseline. */
.price-comparison { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.price-comparison > .price-was { flex: 0 0 auto; opacity: 1; }
.price-comparison > .price-was .pv { color: var(--ink); }
.price-comparison > .promo-block { flex: 1 1 auto; min-width: 0; }
.price-comparison .price-line { margin-top: 0; }
.price-comparison > .promo-block .promo-price { margin-left: 0; }
.price-comparison > .promo-block .sale-label { flex: 0 0 auto; }
.price-comparison { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.price-comparison > .promo-block { width: 100%; column-gap: .4rem; }
.price-comparison .promo-detail { flex-wrap: wrap; }

/* Separate website-specials snapshot. */
.ws-notice { background: #fff5d8; border: 1px solid #ead58c; border-radius: 18px; padding: 1rem 1.2rem; margin: 1rem 0; }
.ws-notice p { margin: .4rem 0 0; line-height: 1.45; }
.ws-terms { color: #666; font-size: .9rem; line-height: 1.5; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 1rem; }
.ws-card { background: white; border: 1px solid #eee; border-radius: 24px; padding: 1.3rem; min-width: 0; }
.ws-card h2 { font-size: 1.05rem; line-height: 1.45; margin: .5rem 0; overflow-wrap: anywhere; }
.ws-tag { display: inline-block; background: #fce9e9; color: #a91d25; border-radius: 999px; padding: .35rem .65rem; font-size: .75rem; font-weight: 700; }
.ws-price { font-size: 1.25rem; font-weight: 800; margin-top: 1rem; }
.ws-reference { font-size: .9rem; color: #666; }
.ws-card a { color: #a91d25; font-weight: 700; font-size: .85rem; }

.promo-shortcuts { display: flex; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 600px) { .promo-shortcuts { flex-basis: 100%; } .promo-shortcuts .btn { border-radius: 999px; } }

.profile-heading { margin: 0 0 .5rem; font-size: 1.35rem; }
.profile-help { color: #68686e; font-size: .85rem; line-height: 1.5; margin: .5rem 0 1rem; }
.profile-photo-row { display: flex; gap: 1.25rem; align-items: center; margin: 1.5rem 0; }
.profile-photo-row > div:last-child { min-width: 0; flex: 1; }
.profile-photo-row input { max-width: 100%; }
.profile-avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; object-fit: cover; background: #fce6e7; color: #a91d25; font-weight: 800; flex: 0 0 auto; }
.profile-avatar.large { width: 96px; height: 96px; font-size: 2rem; }
.profile-email { margin: 1rem 0; }
.profile-alias { display: block; font-size: .85rem; color: #666; font-weight: 400; }
@media (max-width: 600px) { .profile-photo-row { align-items: flex-start; flex-direction: column; } }
[data-qprice]:disabled { opacity: .45; cursor: not-allowed; }

.compare-note { padding: 1rem; background: #fff5d8; border-radius: 16px; font-size: .9rem; line-height: 1.5; margin: 1rem 0; }
.compare-heading { font-size: 1.3rem; margin: 1.4rem 0 .5rem; }
.compare-brands { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .8rem; }
.compare-brands label { display:flex; align-items:center; gap:.4rem; font-size:.85rem; }
.compare-brands input { width:auto; }
.compare-finder details { margin-top: 1rem; }
.compare-scroll { overflow-x:auto; border-radius:16px; background:white; border:1px solid #eee; }
.compare-table { border-collapse:collapse; width:100%; min-width:650px; table-layout:fixed; }
.compare-table td,.compare-table th { padding:1rem; border-bottom:1px solid #eee; border-right:1px solid #eee; vertical-align:top; text-align:left; overflow-wrap:anywhere; font-size:.9rem; line-height:1.5; min-width:200px; }
.compare-table th { background:#f9f9fa; }
.compare-table th:first-child { width:145px; }
.compare-candidates { display:grid; gap:.75rem; }
.compare-candidate { display:flex; gap:1rem; justify-content:space-between; align-items:center; padding:1rem; border-radius:18px; background:white; }
.compare-candidate p { margin:.35rem 0; font-size:.85rem; }
.compare-candidate > div { min-width:0; }
@media(max-width:600px){ .compare-candidate { align-items:flex-start;flex-direction:column; } }

.compare-table { min-width:850px; }
.compare-table th:first-child { position:sticky; left:0; z-index:1; }

/* Website Specials use the regular product-card typography and spacing. */
#results .ws-products { display:flex; flex-direction:column; gap:.65rem; }
#results .ws-product { min-width:0; }
#results .ws-product a { color:var(--red-fl); font:inherit; }

.ws-price-pair { display:flex;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;font-size:.95rem;line-height:1.5; }
.ws-sale { color:var(--red-fl);font-weight:900; }
.ws-regular { color:var(--muted); }
/* Sequential collection comparison stays within phone width. */
.cmp-sequence{display:grid;gap:12px;max-width:760px}.cmp-sequence label{font-weight:600}.cmp-sequence select,.cmp-sequence input{width:100%;min-width:0;max-width:100%;height:auto;min-height:48px}.cmp-sequence summary,.cmp-variant summary{min-height:48px;padding:12px 0;cursor:pointer;overflow-wrap:anywhere}.cmp-sequence details{padding:8px 0}.cmp-attribute{padding:18px 0;border-bottom:1px solid #ddd}.cmp-attribute h3{margin:0 0 12px}.cmp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.cmp-value,.cmp-versions{min-width:0;overflow-wrap:anywhere}.cmp-value>div+div{margin-top:10px}.cmp-slot{display:block;font-weight:700;font-size:12px;color:#596273;margin-bottom:7px}.cmp-versions{padding:18px 0}.cmp-variant{border-bottom:1px solid #ddd}.cmp-variant p{white-space:pre-line;overflow-wrap:anywhere}.cmp-source-price{padding:12px 0}.cmp-sequence~#cmp-matrix{max-width:1000px}@media(max-width:480px){.cmp-pair{grid-template-columns:1fr;gap:16px}.cmp-value+.cmp-value{padding-top:12px;border-top:1px dashed #ddd}.cmp-sequence{padding:16px}.cmp-versions h3{font-size:17px}}

.cmp-brand{padding:8px 0}.cmp-brand h3{font-size:15px;margin:10px 0}.cmp-pill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cmp-pill{white-space:normal;overflow-wrap:anywhere;min-width:0;min-height:48px;border:1px solid #ccd2d9;border-radius:18px;background:#fff;padding:9px 10px;text-align:center;font:inherit;font-size:13px;line-height:1.35;cursor:pointer}.cmp-pill.selected{border-color:#0d7364;background:#e6f3ef;color:#155c50;font-weight:600}.cmp-pill span{display:block;font-size:11px;margin-top:4px}.cmp-pill:disabled{opacity:1;cursor:default}@media(max-width:480px){.cmp-pill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cmp-run{min-height:48px;margin:16px 0;width:100%;max-width:760px}.cmp-run:disabled{opacity:.4;cursor:not-allowed}.cmp-mobile-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px}.cmp-mobile-table th,.cmp-mobile-table td{width:50%;min-width:0;overflow-wrap:anywhere;word-break:normal;white-space:normal;padding:12px 8px;vertical-align:top;border:1px solid #d7dce2;text-align:left}.cmp-mobile-table thead th{background:#e6eeeb;font-size:12px}.cmp-mobile-table thead strong{display:block;font-size:14px;margin-top:8px}.cmp-mobile-table .cmp-table-label th{background:#e9edf1;font-weight:600;font-size:13px}.cmp-mobile-table td>div+div{margin-top:12px}.cmp-mobile-table .cmp-variant summary{min-height:44px}.cmp-mobile-table .cmp-variant p{font-size:13px}.cmp-mobile-table .price-lines,.cmp-mobile-table .price-wrap{min-width:0;max-width:100%}

.cmp-sequence [hidden],.cmp-run[hidden]{display:none!important}.cmp-chosen{padding:14px 0;border-bottom:1px solid #ddd}.cmp-chosen p{overflow-wrap:anywhere}

.cmp-match-cue{display:block;font-size:11px;font-weight:400;line-height:1.4;color:#586773;margin-top:6px;overflow-wrap:anywhere}.cmp-pill:has(.cmp-match-cue){border-radius:14px}

.cmp-title{font-size:30px!important;letter-spacing:-.04em;line-height:1.1}.cmp-result-title{margin:28px 0 16px}.cmp-result-title h2,.cmp-dashboard>h2{font-size:28px;letter-spacing:-.035em;margin:6px 0}.cmp-result-title p{color:#5b6370}.cmp-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;color:#236b5b}.cmp-diff-tag,.cmp-same-tag{display:inline-block;font-size:10px;line-height:1.4;border-radius:12px;padding:3px 7px;margin-left:8px;font-weight:600;vertical-align:middle}.cmp-diff-tag{color:#265f51;background:#e1f0e9}.cmp-same-tag{color:#687180;background:#f4f5f7}.cmp-mobile-table .cmp-different td{background:#fff}.cmp-mobile-table thead th{border-top:4px solid #397b6b}.cmp-mobile-table thead th+th{border-top-color:#566174}.cmp-versions{background:#fff;border:1px solid #e1e5e9;border-radius:16px;padding:20px;margin:16px 0}.cmp-versions h3{font-size:22px;letter-spacing:-.025em;margin:8px 0}.cmp-version-count{font-size:12px;color:#667080}.cmp-variant summary{font-weight:600}.cmp-detail-title{font-size:26px}.cmp-dashboard{padding:24px 0}.cmp-chart{background:#fff;border:1px solid #e0e5e9;border-radius:16px;padding:18px;margin:18px 0;min-width:0}.cmp-chart h3{margin:0;font-size:18px}.cmp-chart h3>span{display:block;font-size:12px;font-weight:400;color:#667080;margin-top:4px}.cmp-chart-series{margin-top:22px}.cmp-chart-label{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;font-size:13px;overflow-wrap:anywhere}.cmp-chart-label>span{font-size:11px;color:#667080}.cmp-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 85px;align-items:center;gap:10px;margin:9px 0;font-size:12px}.cmp-bar-track{height:13px;border-left:1px solid #cdd4da;background:repeating-linear-gradient(to right,#f2f4f5 0,#f2f4f5 calc(25% - 1px),#e1e5e9 calc(25% - 1px),#e1e5e9 25%);border-radius:0 4px 4px 0}.cmp-bar{height:13px;border-radius:0 4px 4px 0}.cmp-bar-0{background:#397b6b}.cmp-bar-1{background:#566174}.cmp-chart-axis{display:flex;justify-content:space-between;font-size:11px;color:#667080;border-top:1px solid #d6dce2;padding-top:6px;margin-top:16px}.cmp-chart details summary{min-height:44px;padding:12px 0;font-size:12px;cursor:pointer}.cmp-chart details p{font-size:12px;overflow-wrap:anywhere}.cmp-unknown{font-size:12px;color:#6d6470;background:#f5f2ef;padding:10px;border-radius:6px}.cmp-price-note p{font-size:13px;line-height:1.55}.cmp-chart .profile-help{font-size:11px;line-height:1.5}

.cmp-new{min-height:48px;width:100%;margin:16px 0;max-width:760px}

.qty-calculator{border:1px solid #d9e1e3;border-radius:14px;background:#fff;margin-top:18px;overflow:hidden}.qty-calculator>summary{padding:16px;font-weight:700;cursor:pointer;min-height:48px}.qty-calculator>summary span{display:block;font-size:12px;font-weight:400;color:#617078;margin-top:5px}.qty-inner{padding:0 16px 16px;display:grid;gap:12px}.qty-inner label{font-size:13px;font-weight:600}.qty-inner input:not([type=checkbox]),.qty-inner select{display:block;width:100%;max-width:100%;min-width:0;min-height:48px;border:1px solid #d1d8dd;border-radius:6px;padding:10px;font:inherit;box-sizing:border-box}.qty-inner [hidden]{display:none!important}.qty-inner select{font-size:13px}.qty-identity{overflow-wrap:anywhere;font-size:13px;line-height:1.5}.qty-inner .profile-help{font-size:12px;line-height:1.5;margin:0}.qty-warning{background:#f7f3e9;border-radius:8px;padding:12px;font-size:12px;line-height:1.5}.qty-check{display:flex;gap:9px;align-items:flex-start;min-height:44px;line-height:1.45;margin:10px 0}.qty-check input{width:20px;height:20px;flex-shrink:0}.qty-pricing{border-block:1px solid #e1e6ea;padding:12px 0}.qty-pricing summary{min-height:44px;cursor:pointer}.qty-pricing>label,.qty-pricing>select,.qty-pricing>div{margin-top:12px}.qty-result-head{margin:18px 0 12px}.qty-result-head>span{font-size:12px;color:#68737a}.qty-result-head>strong{display:block;font-size:24px;margin:6px 0}.qty-result-head p{font-size:12px}.qty-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qty-option{padding:14px;border-radius:10px;border:1px solid #dce2e6;background:#f5f8f7;min-width:0;overflow-wrap:anywhere}.qty-short{background:#fff7ef}.qty-option h3{font-size:22px;margin:10px 0}.qty-option-label{font-size:11px;font-weight:600}.qty-option>strong{font-size:15px}.qty-option p{font-size:12px;line-height:1.5}.qty-subtotal{font-weight:700;font-size:20px;margin-top:16px}.qty-subtotal small{display:block;font-size:11px;font-weight:400;margin-top:5px}.qty-error{color:#a32417;background:#fff0ed;padding:12px;border-radius:8px;font-size:13px}@media(max-width:350px){.qty-options{grid-template-columns:1fr}}

.qty-inline{margin:12px 0 6px;padding-top:10px;border-top:1px solid #e2e7e8;text-align:left;min-width:0}.qty-inline>label,.qty-inline-pack label{display:block;font-size:12px;font-weight:600;color:#465568}.qty-inline-input,.qty-inline select{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;margin:6px 0;border:1px solid #d6dde2;border-radius:8px;background:white;padding:10px;font:inherit;font-size:16px}.qty-inline-output>small{display:block;font-size:11px;color:#68717a;margin:8px 0}.qty-inline-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.qty-inline-options>div{border:1px solid #e1e4e5;border-radius:8px;padding:10px;min-width:0;overflow-wrap:anywhere}.qty-inline-options strong,.qty-inline-options span,.qty-inline-options small{display:block}.qty-inline-options strong{font-size:17px}.qty-inline-options span{font-size:14px;margin-top:5px}.qty-inline-options small{font-size:11px;margin-top:5px}.qty-inline-note{font-size:12px;line-height:1.4}.qty-inline-pack[hidden]{display:none}.products .qty-inline{min-width:190px}

.qty-inline[hidden]{display:none!important}.qty-toggle{margin-top:10px;min-height:44px}

.qty-unavailable{display:inline-block;margin:6px 0 6px 9px;font-size:11px;color:#66717a;vertical-align:middle}.qty-missing-field{font-size:12px;color:#66717a;margin:7px 0}

.qty-allowance{margin:10px 0}.qty-allowance[hidden]{display:none!important}.qty-allowance>span{font-size:11px;color:#65717a}.qty-allowance>div{display:flex;gap:8px;margin-top:6px}.qty-allowance button{min-height:40px;min-width:62px;padding:7px 14px;border:1px solid #cbd4d9;border-radius:999px;background:#fff;color:#465568;font-weight:700}.qty-allowance button.active{background:#465568;color:#fff;border-color:#465568}.qty-adjusted{font-size:13px;margin:10px 0}.qty-adjusted small{display:block;font-size:10px;color:#65717a;margin-top:4px}

.loc-notice{padding:16px;border-left:4px solid #da291c;background:#fff3f1;border-radius:5px;margin:16px 0;line-height:1.5}.loc-stats,.loc-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.loc-stats>div,.loc-rules>div{background:white;border:1px solid var(--line);border-radius:10px;padding:18px}.loc-stats strong{display:block;font-size:28px}.loc-person{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.loc-person[hidden]{display:none}.loc-person label{font-size:14px;color:var(--muted);width:min(100%,390px)}.loc-person select{display:block;width:100%;padding:11px;background:white;border:1px solid #bbb;border-radius:7px;font:inherit;color:var(--ink);margin-top:5px}.loc-search{max-width:100%;padding:12px;width:440px;font:inherit;border:1px solid #bbb;border-radius:7px}.loc-caption{color:var(--muted);font-size:15px}.loc-stores{display:grid;grid-template-columns:1fr 1fr;gap:12px}.loc-stores>div{border-bottom:1px solid var(--line);padding:12px 0}@media(max-width:650px){.loc-stats,.loc-rules{grid-template-columns:1fr}.loc-person{align-items:stretch;flex-direction:column;gap:8px}.loc-person label{width:100%}.loc-stores{grid-template-columns:1fr}}
@media(max-width:650px){.loc-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.loc-stats>div{padding:12px 8px;font-size:12px}.loc-stats strong{font-size:24px}.loc-stats{margin:14px 0}}
.loc-person small{display:block;margin-top:5px;font-size:11px;color:#65717a}.loc-confirmed{color:#1e6b51;font-weight:600}.loc-pending{color:#8a5915}.loc-roster{display:flex;flex-wrap:wrap;gap:8px}.loc-roster span{padding:7px 10px;background:#f2f4f4;border-radius:999px;font-size:12px}.loc-person[hidden]{display:none}

.loc-pricing-editors{margin:22px 0}.loc-pricing-editors>summary{min-height:44px;font-weight:600;cursor:pointer}.loc-pricing-editors label{display:block;margin:12px 0}.loc-pricing-editors select{max-width:100%;min-height:44px}.loc-person select{min-width:0;max-width:100%}

.loc-pricing-editors{margin:22px 0}.loc-pricing-editors>summary{min-height:44px;font-weight:600;cursor:pointer}.loc-pricing-editors label{display:block;margin:12px 0}.loc-pricing-editors select{max-width:100%;min-height:44px}.loc-person select{min-width:0;max-width:100%}

/* Unified people directory. Existing profile/settings controls stay unchanged. */
.dreamteam-profile{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;min-width:0}.dreamteam-identity{display:flex;flex-direction:column;gap:.2rem;min-width:0;overflow-wrap:anywhere}.dreamteam-admin-email{flex-basis:100%;overflow-wrap:anywhere}.dreamteam-location{margin-left:auto;overflow-wrap:anywhere}.dreamteam-person{flex-wrap:wrap;gap:.65rem}.dreamteam-person[hidden],.loc-live-user[hidden]{display:none!important}

/* Dream Team follows compact white product cards and existing rounded pills. */
.dreamteam-admin-person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 14px;margin:9px 0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.dreamteam-admin-person .dreamteam-profile{grid-column:1/-1;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 9px;align-items:center}
.dreamteam-admin-person .profile-avatar{width:34px;height:34px;grid-row:1/3}
.dreamteam-admin-person .dreamteam-identity{gap:1px;font-size:14px}.dreamteam-admin-person .team-role{font-size:10px;line-height:1.3}.dreamteam-admin-person .profile-alias{font-size:12px;margin:0}.dreamteam-admin-person small{margin:0}.dreamteam-admin-person .dreamteam-admin-email{grid-column:2;font-size:11px;line-height:1.3}
.dreamteam-store-pill{background:#f1f2f4;border-radius:999px;padding:5px 9px;font-size:12px;line-height:1.3;justify-self:start;align-self:center;max-width:100%;overflow-wrap:anywhere}
.dreamteam-admin-person .loc-assignment-edit{font-size:12px;align-self:center;max-width:100%}.dreamteam-admin-person .loc-assignment-edit summary{cursor:pointer;padding:6px 0}.dreamteam-admin-person:has(.loc-assignment-edit[open]) .loc-assignment-edit{grid-column:1/-1;width:100%}.dreamteam-admin-person select{padding:8px;margin:5px 0;min-height:40px}.dreamteam-person{padding:10px 12px;gap:9px}.dreamteam-person .profile-avatar{width:34px;height:34px}.dreamteam-person .dreamteam-identity{font-size:14px;gap:1px}.dreamteam-person .team-role{font-size:10px}.dreamteam-person .dreamteam-location{font-size:12px;background:#f1f2f4;border-radius:999px;padding:5px 9px}
.qty-pack-note{display:block;color:var(--muted);margin:5px 0}


/* List cards: no price-scope line; keep price→Calculate tight */
#results .price-lines .profile-help { display: none; }
#results .card .price-lines { margin: .15rem 0 0; }
#results .card .qty-toggle { margin-top: .25rem; min-height: 40px; }
#results .card .p-specs { margin-top: .35rem; }

/* Compare actions use the existing CRM blue; collection filter pills keep their palette. */
#cmp-filter,#cmp-change-one,#cmp-change-two,#cmp-run,#cmp-matrix [data-cmp-new]{background:var(--blue);color:#fff}
#cmp-filter:hover,#cmp-change-one:hover,#cmp-change-two:hover,#cmp-run:hover,#cmp-matrix [data-cmp-new]:hover{background:#1d4ed8}
#cmp-filter:focus-visible,#cmp-change-one:focus-visible,#cmp-change-two:focus-visible,#cmp-run:focus-visible,#cmp-matrix [data-cmp-new]:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}

/* V72: keep wide admin review tables inside their own scroll area on phones. */
#admin-body { min-width: 0; }
#admin-body > .section { min-width: 0; max-width: 100%; overflow-x: auto; }

/* "Check stock" choices panel (Moe, 2026-11-06): inline list of the
   supplier's phone numbers, same card styling as the quantity panel. */
.stock-toggle{margin-top:10px;min-height:44px}
#results .card .stock-toggle{margin-top:.25rem;min-height:40px}
.stock-panel{margin:10px 0 4px;padding-top:10px;border-top:1px solid #e2e7e8;text-align:left;min-width:0}
.detail-actions .stock-panel{flex-basis:100%}
.stock-choice{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e1e4e5;border-radius:8px;margin:6px 0;color:inherit;text-decoration:none;min-height:44px;box-sizing:border-box;background:#fff}
.stock-choice-label{font-weight:600;font-size:14px;color:#2c3640}
.stock-choice-num{font-size:14px;color:#465568;white-space:nowrap}
.stock-none{font-size:13px;color:#68717a;margin:4px 0}

/* Fuzion freight warning bubble (preview build): presentation only, not a charge. */
.freight-warn { display: block; margin-top: .4rem; text-align: right; }
.freight-warn .fw-pill { display: inline-block; border-radius: 999px; padding: .18rem .65rem; font-size: .82rem; font-weight: 900; color: #fff; background: var(--red); white-space: nowrap; }