/* ==========================================================================
   MiFitness Quote Tool

   PALETTE — Roland's brief for this tool: "Colours must be black and white
   only". The chrome is therefore monochrome. The margin and discount alert
   colours (--red / --amber / --green) are DELIBERATELY kept: a consultant
   has to be able to tell a healthy margin from a bad one at a glance, and
   greyscale cannot carry that safely. Nothing else uses colour.
   ========================================================================== */
:root{
  --ink:#12151a; --ink-2:#39414d; --ink-3:#6b7480; --line:#e2e6ec; --line-2:#eef1f5;
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#fafbfd;
  /* MiFitness is black and white. --brand is the brand; --red is a WARNING
     colour only — below-margin, out of stock, a failed lookup — and it never
     appears on a document a customer sees. */
  --brand:#12151a; --brand-2:#000000; --brand-soft:#f1f2f4;
  --red:#d81f26; --red-dark:#a8161c; --red-soft:#fdeaea;
  --green:#0f7a4a; --green-soft:#e6f4ec;
  --amber:#a86800; --amber-soft:#fdf3e0;
  --blue:#000000; --blue-soft:#f1f2f4;
  --gp-blue:#14509e; --gp-blue-soft:#eaf0f9;
  --r:10px; --sh:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-lg:0 8px 28px rgba(16,24,40,.14);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:650; letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:19px} h3{font-size:16px} h4{font-size:14px}
p{margin:0 0 .8em}
a{color:var(--blue)}
small{font-size:12.5px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.nowrap{white-space:nowrap}
.hide{display:none !important}

/* ------------------------------------------------------------- PIN gate */
#gate{position:fixed;inset:0;z-index:9000;background:#000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{background:#fff;border-radius:16px;padding:30px 28px;width:100%;max-width:380px;
  box-shadow:var(--sh-lg);text-align:center}
.gate-card img{max-width:210px;height:auto;margin-bottom:2px}
.gate-card h2{margin:14px 0 4px}
.pin-input{width:100%;font-size:30px;letter-spacing:.5em;text-align:center;padding:14px 10px 14px 20px;
  border:2px solid var(--line);border-radius:12px;margin:16px 0 6px;font-family:var(--mono)}
.pin-input:focus{outline:none;border-color:var(--ink)}
.gate-err{color:var(--red);font-size:13.5px;min-height:20px;margin:2px 0 8px}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pin-pad button{padding:15px 0;font-size:19px;border:1px solid var(--line);background:#fff;
  border-radius:10px;cursor:pointer;font-family:var(--mono)}
.pin-pad button:active{background:var(--line-2)}

/* -------------------------------------------------------------- chrome
   One dark bar, the UAE Quote Calculator's. Eleven tabs plus the save button
   and the view toggle will not sit in one rigid row on a laptop, so the bar
   wraps and .topctl keeps the controls glued together as a block. */
.topbar{background:var(--ink);color:#fff;padding:10px 18px 0;position:sticky;top:0;z-index:500}
/* Row one: identity and controls. Row two: the navigation, so the
   Customer/Manager toggle keeps its place when the tab row wraps. */
.topbar-main{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.topbar img.logo{height:28px}
.brandtxt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9aa4ad;
  border-left:1px solid #39414a;padding-left:16px}
.topctl{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;flex-wrap:wrap}
.qref{font-family:var(--mono);font-size:12px;background:rgba(255,255,255,.12);
  padding:4px 9px;border-radius:6px;letter-spacing:.02em}
.whoami{font-size:12.5px;color:#c3c9d2}
.mgr-badge{background:var(--brand-2);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;
  border-radius:5px;letter-spacing:.05em;text-transform:uppercase}

.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-top:9px;padding-top:8px;
  border-top:1px solid #2a323a}
.tabs button{background:transparent;border:0;color:#a7b1ba;padding:9px 14px;
  border-radius:7px 7px 0 0;font:inherit;font-weight:600;font-size:13px;cursor:pointer;
  white-space:nowrap}
.tabs button:hover{color:#fff;background:#20272e}
.tabs button.on{background:#fff;color:var(--ink)}
.tabs button .pill{background:var(--brand-2);color:#fff;border-radius:9px;padding:1px 6px;
  font-size:11px;margin-left:5px;font-variant-numeric:tabular-nums}
.tabs button.on .pill{background:var(--brand-2);color:#fff}

.topsave{border:1px solid #3a434c;background:#20272e;color:#dfe4e8;padding:7px 14px;
  border-radius:8px;font:inherit;font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;display:flex;align-items:center;gap:7px;white-space:nowrap;
  flex:none;cursor:pointer}
.topsave:hover{background:#2b333b;color:#fff}
/* a red dot means there is something not yet saved */
.topsave.dirty{border-color:#fff;color:#fff}
.topsave.dirty::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.topsave.done{background:var(--green);border-color:var(--green);color:#fff}
.topsave.done::before{content:none}
.topnew{border:1px solid #3a434c;background:transparent;color:#aeb8c2;padding:7px 12px;
  border-radius:8px;font:inherit;font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;flex:none;cursor:pointer}
.topnew:hover{background:#20272e;color:#fff;border-color:#4a545e}
.viewtog{display:flex;background:#20272e;border-radius:8px;padding:3px;gap:3px;flex:none}
.viewtog button{border:0;background:transparent;color:#9aa4ad;padding:6px 12px;border-radius:6px;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.viewtog button.on{background:#fff;color:var(--ink)}
.topnew .sm,.viewtog .sm{display:none}
@media(max-width:860px){
  .topnew .lg,.viewtog .lg{display:none}
  .topnew .sm,.viewtog .sm{display:inline}
  .brandtxt,.whoami{display:none}
}

/* ---- the running total, always in the corner ---- */
#miniCart{position:fixed;right:16px;bottom:16px;z-index:450;width:272px;font-size:13px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(18,22,26,.14),0 2px 6px rgba(18,22,26,.06);overflow:hidden}
#miniCart.hide{display:none}
#miniCart .mcbar{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--ink);color:#fff;border:0;padding:9px 11px;font:inherit;cursor:pointer}
#miniCart .mcbar:hover{background:#1c2229}
#miniCart .mcbag{position:relative;flex:none;width:22px;height:22px;opacity:.9}
#miniCart .mcbag svg{width:22px;height:22px;display:block}
#miniCart .mcn{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  background:#fff;color:var(--ink);border-radius:9px;font-size:10px;font-weight:800;
  line-height:16px;text-align:center}
#miniCart .mcttl{flex:1;min-width:0}
#miniCart .mck{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9aa4ad;line-height:1.3}
#miniCart .mcv{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#miniCart .mccar{flex:none;color:#9aa4ad;transition:transform .15s ease;font-size:11px}
#miniCart.open .mccar{transform:rotate(180deg)}
#miniCart .mcbody{display:none;padding:10px 11px 11px;max-height:46vh;overflow:auto}
#miniCart.open .mcbody{display:block}
#miniCart .mcwho{font-size:11px;color:var(--ink-3);line-height:1.4;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
#miniCart .mcwho b{color:var(--ink);font-weight:700}
#miniCart .mcrow{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;
  background:transparent;border:0;padding:4px 0;color:var(--ink);font:inherit;font-size:12.5px}
#miniCart button.mcrow{cursor:pointer}
#miniCart button.mcrow:hover .mcnm{color:var(--brand-2);text-decoration:underline}
#miniCart .mcnm{flex:1;min-width:0}
#miniCart .mcsub{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.3}
#miniCart .mcam{flex:none;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
#miniCart .mcsum{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
#miniCart .mcsum .mcrow{padding:3px 0}
#miniCart .mcbig{font-weight:800;font-size:13.5px;border-top:1px solid var(--ink);
  margin-top:5px;padding-top:6px}
@media print{#miniCart{display:none !important}}

main{padding:14px;max-width:1400px;margin:0 auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.panel > h3:first-child, .panel > h2:first-child{margin-top:0}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.panel-head h3{margin:0}
.panel-head .spacer{flex:1}

/* ------------------------------------------------------------- controls */
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink-2);
  margin-bottom:4px;letter-spacing:.01em}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:14px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft)}
textarea{min-height:70px;resize:vertical;line-height:1.45}
.grid{display:grid;gap:11px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 15px;border-radius:8px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:14px;font-weight:550;cursor:pointer;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:#000;border-color:#000;color:#fff}
.btn.primary:hover{background:#2a2a2a;border-color:#2a2a2a}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.ghost{background:none;border-color:transparent;color:var(--blue)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;
  font-weight:600;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.no{background:var(--red-soft);color:var(--red-dark)}
.chip.warn{background:var(--amber-soft);color:var(--amber)}
.chip.info{background:var(--blue-soft);color:var(--blue)}
.chip.sale{background:var(--brand-2);color:#fff}
.chip.neutral{background:var(--line-2);color:var(--ink-2)}

.alert{padding:10px 13px;border-radius:8px;font-size:13.5px;margin-bottom:9px;
  border-left:3.5px solid;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.alert.critical{background:var(--red-soft);border-color:var(--red);color:var(--red-dark)}
.alert.warn{background:var(--amber-soft);border-color:#e0a127;color:var(--amber)}
.alert.info{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.alert.ok{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.alert b{font-weight:700}

/* ------------------------------------------------------------ catalogue */
.cat-bar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}
.cat-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.fchip{padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;
  font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink-2);white-space:nowrap}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip.sale.on{background:var(--brand-2);border-color:var(--brand-2)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3;background:#f0f2f5 center/contain no-repeat;position:relative}
/* No photo means no photo — not a grey rectangle telling the customer we are
   missing one. The tile keeps only the badges, at the top of the card. */
.card .ph.none{aspect-ratio:auto;background:none;min-height:0;padding:8px 8px 0}
.card .ph.none .badges{position:static;max-width:100%}
.card .ph.none:empty{display:none}
.card .badges{position:absolute;top:6px;left:6px;display:flex;gap:4px;flex-wrap:wrap;max-width:92%}
.card .body{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1;gap:5px}
.card .nm{font-size:13.2px;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .sku{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.card .pr{font-size:16px;font-weight:700;margin-top:auto}
.card .was{font-size:12px;color:var(--ink-3);text-decoration:line-through;margin-right:5px;font-weight:400}
.card .mgr{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}

/* ---------------------------------------------------------- quote lines */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
table.q{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px}
table.q th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-weight:700;padding:0 8px 7px;border-bottom:1.5px solid var(--line);white-space:nowrap}
table.q td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.q tbody tr:hover{background:var(--panel-2)}
table.q td.r,table.q th.r{text-align:right}
table.q td.c,table.q th.c{text-align:center}
.li-img{width:46px;height:46px;object-fit:contain;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;flex:none}
.li-main{display:flex;gap:9px}
.li-nm{font-weight:600;line-height:1.32;font-size:13.5px}
.li-sku{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.li-cmt{margin-top:6px}
.li-cmt input{font-size:12.5px;padding:5px 8px}
.qty-in{width:56px;text-align:center;padding:6px 4px}
.disc-sel{width:88px;padding:6px 6px;font-size:13px}
.lead-sel{width:150px;padding:6px 6px;font-size:12.5px}
.lead-sel.unset{border-color:#e0a127;background:var(--amber-soft)}
.gp-cell{font-family:var(--mono);font-weight:650;font-size:13px}
/* Margin bands, Roland 19/09/2026: 60%+ blue, 55-59.9 black, 50-54.9 amber,
   below 50 red. --blue is black elsewhere in this black-and-white scheme,
   so the good band gets its own token rather than borrowing it. */
.gp-good{color:var(--gp-blue);font-weight:600}
.gp-ok{color:var(--ink)}
.gp-warn{color:var(--amber)}
.gp-bad{color:var(--red);font-weight:600}
.x-btn{background:none;border:none;color:var(--ink-3);font-size:19px;cursor:pointer;
  line-height:1;padding:2px 5px}
.x-btn:hover{color:var(--red-dark)}
tr.flag-critical td{background:var(--red-soft)}
tr.flag-critical:hover td{background:#fbdede}
tr.flag-warn td{background:var(--amber-soft)}
tr.flag-warn:hover td{background:#fbecd4}

/* -------------------------------------------------------------- totals */
.tot-grid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.tot{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tot .row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:14px}
.tot .row.sub{border-top:1px solid var(--line);margin-top:5px;padding-top:9px}
.tot .row.big{font-size:19px;font-weight:750;border-top:2px solid var(--ink);
  margin-top:7px;padding-top:10px}
.tot .row.save{color:var(--green);font-weight:650}
.tot .row .v{font-variant-numeric:tabular-nums;font-weight:600}
.mgr-box{background:#15181d;color:#fff;border-radius:10px;padding:14px 16px;margin-top:12px}
.mgr-box .row{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px}
.mgr-box .row .v{font-family:var(--mono);font-weight:650}
.mgr-box h4{color:#fff;margin:0 0 8px;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:#98a1ad}

/* ------------------------------------------------------------- uploads */
.drop{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;
  color:var(--ink-3);font-size:13.5px;cursor:pointer;background:var(--panel-2)}
.drop:hover{border-color:var(--blue);color:var(--blue)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:11px}
.thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.thumb img{width:100%;height:110px;object-fit:contain;background:#f0f2f5;display:block}
.thumb .t-body{padding:7px}
.thumb input{font-size:12px;padding:5px 7px}
.thumb .t-del{width:100%;margin-top:5px;font-size:12px;padding:4px}

/* -------------------------------------------------------- saved quotes */
table.saved{width:100%;border-collapse:collapse;font-size:13.5px}
table.saved th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);padding:0 9px 7px;border-bottom:1.5px solid var(--line)}
table.saved td{padding:10px 9px;border-bottom:1px solid var(--line-2)}
table.saved tr:hover td{background:var(--panel-2)}

/* ------------------------------------------------------------ workflow */
.steps{counter-reset:s;display:grid;gap:10px}
.step{display:flex;gap:12px;padding:13px 15px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px}
.step::before{counter-increment:s;content:counter(s);flex:none;width:25px;height:25px;
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700}
.step .sb{flex:1}
.step h4{margin:1px 0 4px}
.step p{margin:0 0 7px;font-size:13.5px;color:var(--ink-2)}

/* ============================== PRINT DOCUMENT ========================== */
#doc{background:#fff}
/* THE DOCUMENT SETS ITS OWN TYPE.
   One family from the cover to the signature block. Figures line up through
   tabular-nums rather than a second, monospaced face — a customer-facing page
   that switches typeface halfway down reads as two documents stapled together. */
.pg,.pg *{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  Helvetica,Arial,sans-serif}
.pg .num,.pg .v,.pg .p,table.doc td.r,table.doc th.r,.tot-doc .v{
  font-variant-numeric:tabular-nums}
.pg{width:210mm;min-height:297mm;padding:14mm 15mm 16mm;margin:0 auto 18px;background:#fff;
  box-shadow:var(--sh-lg);position:relative;page-break-after:always;break-after:page;
  display:flex;flex-direction:column}
.pg:last-child{page-break-after:auto;break-after:auto}
.pg-foot{position:absolute;left:15mm;right:15mm;bottom:8mm;border-top:1px solid var(--line);
  padding-top:5px;font-size:8.5pt;color:var(--ink-3);display:flex;justify-content:space-between}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2.5px solid var(--brand-2);padding-bottom:9px;margin-bottom:14px}
.doc-head img{height:34px}
.doc-head .r{text-align:right;font-size:9pt;line-height:1.45;color:var(--ink-2)}
.doc-title{font-size:20pt;font-weight:750;letter-spacing:-.02em;margin:0}
.doc-sub{font-size:9pt;color:var(--ink-3);margin:1px 0 0}

/* The hand-built company profile that used .hero/.stats/.ph-box/.bullets and
   the rest was replaced on 16/09/2026 by the real profile document, which
   brings its own stylesheet. Those rules are gone: left in place they matched
   elements inside the embedded profile and repainted its stat tiles black. */

table.doc{width:100%;border-collapse:collapse;font-size:8.8pt}
table.doc th{background:#15181d;color:#fff;text-align:left;padding:6px 7px;
  font-size:7.6pt;text-transform:uppercase;letter-spacing:.045em;font-weight:700}
table.doc td{padding:6px 7px;border-bottom:1px solid var(--line);vertical-align:top}
table.doc tr:nth-child(even) td{background:#fafbfd}
table.doc td.r,table.doc th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.doc td.c,table.doc th.c{text-align:center}
table.doc .was{text-decoration:line-through;color:var(--ink-3);font-size:8pt}
table.doc .cmt{font-size:7.8pt;color:var(--ink-2);font-style:italic;padding-top:2px}
table.doc .dsku{font-size:7.6pt;color:var(--ink-3);padding-top:1px}
table.doc img.pi{width:34px;height:34px;object-fit:contain;background:#f5f6f8;border-radius:4px}
/* Section heading on the printed quote — the one thing on the page bolder than
   the totals, because it is what a customer's eye uses to navigate. */
table.doc tr.dhead td{background:#15181d !important;color:#fff;font-weight:800;
  font-size:9.2pt;letter-spacing:.13em;text-transform:uppercase;padding:7px 8px;
  border-bottom:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* ---- links in the document ----
   A link has to look like one. Underlined in MiFitness red, so on screen and in
   the PDF it reads as clickable — and the raw address is nowhere, because a URL
   typed out in the middle of a customer's quote is not a link, it is clutter. */
.pg a.plink{color:var(--ink);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--ink-3);text-decoration-thickness:1px;
  text-underline-offset:2px}
.pg a.dlink{color:var(--ink-2);text-decoration:underline;
  text-decoration-color:var(--ink-3);text-underline-offset:2px;font-weight:600}
.pg a{color:var(--ink)}

.tot-doc{margin-left:auto;width:88mm;font-size:9.2pt;margin-top:10px}
.tot-doc .row{display:flex;justify-content:space-between;padding:4px 0}
.tot-doc .row.sub{border-top:1px solid var(--line);padding-top:6px;margin-top:3px}
.tot-doc .row.big{border-top:2px solid var(--ink);margin-top:5px;padding-top:7px;
  font-size:12pt;font-weight:750}
.tot-doc .row.save{color:var(--green);font-weight:700}
.tot-doc .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.terms{margin-top:12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;padding:10px 12px;font-size:8.4pt;line-height:1.5}
.terms h4{font-size:8.5pt;margin:0 0 5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink)}
.terms ul{margin:0;padding-left:14px}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:16px;font-size:8.5pt}
.sign .line{border-bottom:1px solid var(--ink);height:26px;margin-bottom:3px}

.prod-block:has(.imgs.noimg){grid-template-columns:1fr}
.prod-block .imgs.noimg{display:none}
.prod-block{display:grid;grid-template-columns:62mm 1fr;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--line);break-inside:avoid;page-break-inside:avoid}
.prod-block .imgs{display:grid;gap:5px}
.prod-block .imgs img.main{width:100%;height:44mm;object-fit:contain;background:#f5f6f8;border-radius:6px}
.prod-block .imgs .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.prod-block .imgs .strip img{width:100%;height:16mm;object-fit:contain;background:#f5f6f8;border-radius:4px}
.prod-block h4{font-size:11pt;margin:0 0 2px}
.prod-block .meta{font-size:8pt;color:var(--ink-3);margin-bottom:5px;letter-spacing:.01em}
.prod-block .blurb{font-size:8.6pt;line-height:1.5;margin-bottom:6px}
.prod-block .feat{margin:0 0 6px;padding-left:14px;font-size:8.4pt;line-height:1.5}
.spec-tbl{width:100%;border-collapse:collapse;font-size:8pt}
.spec-tbl td{padding:2.5px 6px;border-bottom:1px solid var(--line-2)}
.spec-tbl td:first-child{color:var(--ink-3);width:38%;font-weight:600}
.prod-price{display:flex;gap:14px;align-items:baseline;margin-top:6px;padding-top:6px;
  border-top:1px solid var(--line)}
.prod-price .p{font-size:13pt;font-weight:750;white-space:nowrap}
.prod-price .w{font-size:9pt;text-decoration:line-through;color:var(--ink-3)}
.prod-price a{font-size:8.4pt}
.supp-img{width:100%;border-radius:7px;border:1px solid var(--line);display:block;
  background:#f5f6f8;object-fit:contain;max-height:150mm}
.cust-logo-doc{max-height:22mm;max-width:52mm;object-fit:contain}

/* ------------------------------------------------------------ responsive */
@media (max-width:960px){
  .tot-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  main{padding:10px}
  .panel{padding:13px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .cat-bar{grid-template-columns:1fr}
  .topbar{padding:8px 10px 0}
  .topbar-main{gap:8px 10px}
  .topbar img.logo{height:22px}
  .tabs{margin-top:7px;padding-top:6px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch}
  .tabs button{padding:7px 10px;font-size:12.5px}
  #miniCart{right:10px;bottom:10px;width:calc(100vw - 20px);max-width:272px}
  .pg{width:auto;min-height:0;padding:12px;box-shadow:none;border:1px solid var(--line);
    border-radius:8px;margin-bottom:12px}
  .pg-foot{position:static;margin-top:14px}
  .bullets{columns:1}
  .prod-block{grid-template-columns:1fr}
  .tot-doc{width:100%}
  .two,.three{grid-template-columns:1fr}
  .hero img{height:34mm}
  .ph-box img{height:28mm}
}

/* ---------------------------------------------------------------- print */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff !important}
  .topbar,#gate,.noprint{display:none !important}
  /* Whitelist, not blacklist: the printed document is #doc and nothing else.
     Every control panel and quote section on screen is for the salesperson —
     one of them reaching a customer PDF is the kind of mistake you only find
     out about afterwards. */
  section[data-pane] > .panel,
  section[data-pane] > .qsecs,
  section[data-pane] > .vatbar,
  section[data-pane] > .tot-grid,
  #quoteAlerts{display:none !important}
  main{padding:0;max-width:none}
  #doc{display:block !important}
  .pg{width:210mm;min-height:297mm;box-shadow:none;margin:0;border:none;border-radius:0;
    padding:14mm 15mm 16mm}
  .prod-block,.stat,.ph-box,tr{break-inside:avoid;page-break-inside:avoid}
  table.doc thead{display:table-header-group}
  a{color:var(--ink);text-decoration:none}
  .tot-doc .row.big{font-size:12pt}
}

/* Sub-categories of the selected navigation group — one level below the top
   row, so the catalogue reads like the website drop-down. */
.cat-filters.cat-subs{margin-top:-2px;padding-left:14px;border-left:2px solid var(--ink)}
.cat-filters.cat-subs .fchip{font-size:12.5px;padding:5px 10px}

/* ---------------------------------------------- catalogue quantity + add */
.card{display:flex;flex-direction:column}
.card .body{flex:1}
.card.on-quote{box-shadow:inset 0 0 0 2px var(--ink)}
.card .nm a{color:inherit;text-decoration:none}
.card .nm a:hover{text-decoration:underline}
.qrow{display:flex;border-top:1px solid var(--line);margin-top:auto}
.qrow .qty{display:flex;border-right:1px solid var(--line);flex:none}
.qrow .qty button{width:30px;border:0;background:var(--panel);cursor:pointer;font-size:17px;line-height:1;color:var(--ink)}
.qrow .step button:hover{background:var(--line-2)}
.qrow .qty input{width:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:var(--mono);font-size:14px;padding:9px 0;background:var(--panel);
  -moz-appearance:textfield;color:var(--ink)}
.qrow .qty input::-webkit-outer-spin-button,
.qrow .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qrow .addbtn{flex:1;min-width:0;border:0;background:var(--panel);cursor:pointer;font-size:12.5px;
  font-weight:650;padding:9px 4px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .addbtn:hover{background:var(--ink);color:#fff}
.qrow .addbtn.on{background:var(--ink);color:#fff}

/* ------------------------------------------------------------ mini cart */
/* Stat tiles across the top of Inventory health and the Margin report. The
   1px gap over a line-coloured background draws the rules between them, so
   they read as one strip. auto-fit, not auto-fill: auto-fill reserves empty
   tracks and strands the tiles two-thirds of the way across. */
.hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:2px 0 16px}
.hstat{background:#fff;padding:12px 14px}
.hstat .hv{font-size:20px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.hstat .hl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;line-height:1.35}

/* --------------------------------------------------------- full picture */
#lightbox{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.88);display:flex;
  align-items:center;justify-content:center;padding:32px;cursor:zoom-out}
#lightbox figure{margin:0;max-width:min(1000px,92vw);max-height:88vh;display:flex;
  flex-direction:column;align-items:center;gap:12px}
#lightbox img{max-width:100%;max-height:78vh;object-fit:contain;background:#fff;border-radius:8px}
#lightbox figcaption{color:#fff;font-size:13.5px;text-align:center;max-width:70ch}
#lightbox button{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer}
.card .ph[data-zoom]{cursor:zoom-in}
.card .ontot{font-size:11.5px;font-family:var(--mono);color:var(--ink-2);
  background:var(--panel-2);border-top:1px solid var(--line-2);padding:5px 10px}
.card .ontot b{font-weight:700;color:var(--ink)}

/* The customer / manager toggle is styled once, up in the chrome block. */

/* A margin warning a salesperson sees WITHOUT ever seeing the figure itself. */
.card .mflag{font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 7px;border-radius:6px;
  display:inline-block;align-self:flex-start}
.card .mflag.amber{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber)}
.card .mflag.red{background:var(--red-soft);color:var(--red-dark);border:1px solid var(--red)}
.card .mflag.plain{background:var(--blue-soft);color:var(--ink);border:1px solid var(--line)}
/* No average cost in Dear: there is no margin to show, and a blank would read
   as "fine". The line says so instead, in both views. */
.card .mflag.nocost-flag{background:var(--amber-soft);color:var(--amber);
  border:1px dashed var(--amber);white-space:normal;line-height:1.35;max-width:100%}
.nocost{color:var(--amber);font-weight:600}

/* ================================================= QUOTE: VAT + SECTIONS */
.vatbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.vatbar .vl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vatseg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px}
.vatseg button{border:0;background:transparent;color:var(--ink-3);padding:7px 15px;border-radius:6px;
  font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.vatseg button.on{background:var(--ink);color:#fff}
.vatwarn{font-size:12.5px;font-weight:600;color:var(--amber);background:var(--amber-soft);
  border:1px solid var(--amber);border-radius:7px;padding:5px 10px}

  font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:9px}
  padding:0 14px;cursor:pointer;font-size:15px}
/* Maximised: this section fills the window so the salesperson can work in it */
body.qmax .qsec{display:none}
body.qmax .qsec.maxed{display:block;position:fixed;inset:56px 16px 16px;z-index:400;overflow:auto;
  box-shadow:0 20px 60px rgba(16,24,40,.28)}
body.qmax .qsec.maxed .qsec-b{display:block}
body.qmax #vatBar,body.qmax #quoteAlerts{display:none}

/* alternatives */
/* ---- out of stock: what we could sell instead ----
   auto-FIT, not auto-fill: with four alternatives and room for nine tracks,
   auto-fill leaves five empty columns and the row stops two thirds of the way
   across. auto-fit collapses the empty tracks so the cards use the full width.
   Nothing is truncated — a product name a salesperson cannot read is no use. */
.altrow{border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-bottom:12px}
.altrow .ah{font-weight:700;font-size:14px;margin-bottom:2px}
.altrow .as{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:11px}
.altopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.altopt{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);
  border-radius:9px;padding:11px;background:var(--panel-2);min-width:0}
.altopt .atop{display:flex;gap:10px;align-items:flex-start;min-width:0}
.altopt img,.altopt .noimg{width:46px;height:46px;object-fit:contain;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;flex:none}
.altopt .ai{min-width:0;flex:1}
.altopt .an{font-size:12.5px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.altopt .ap{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px;
  overflow-wrap:anywhere}
.altopt .abot{display:flex;align-items:center;gap:9px;margin-top:auto;
  padding-top:9px;border-top:1px solid var(--line-2)}
.altopt .apr{flex:1;min-width:0;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
.altopt .adf{display:block;font-size:10.5px;font-weight:600;margin-top:1px}
.altopt .adf.up{color:var(--red-dark)}
.altopt .adf.down{color:var(--green)}
.altopt .adf.same{color:var(--ink-3)}
.altopt button{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:7px;
  padding:7px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;flex:none}
.altopt button:hover{background:#000;border-color:#000}
.altopt button:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

/* ------------------------------------------- consignment weight / volume */
.nodim{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber);
  border-radius:5px;padding:1px 6px;margin-top:4px}
.consgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.consgrid>div{background:#fff;padding:10px 12px}
.consgrid .cv{font-size:17px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.consgrid .cl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;line-height:1.4}
.consbad{margin-top:10px;font-size:12.5px;background:var(--red-soft);border:1px solid var(--red);
  color:var(--red-dark);border-radius:8px;padding:9px 11px}
.conswarn{margin-top:8px;font-size:12.5px;background:var(--amber-soft);border:1px solid var(--amber);
  color:var(--amber);border-radius:8px;padding:9px 11px}
.dimsim{display:inline-block;font-size:10.5px;font-weight:600;color:var(--blue);
  background:var(--blue-soft);border:1px solid var(--blue);border-radius:5px;padding:1px 6px;margin-top:4px}

/* ===== Customer lookup (Dear type-ahead) & export rows ===== */
.lookup{position:relative}
.lookres{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-lg); max-height:300px; overflow:auto;
}
.lookrow{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:9px 12px; cursor:pointer; font:inherit; color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.lookrow:last-child{border-bottom:0}
.lookrow:hover,.lookrow:focus{background:var(--brand-soft); outline:none}
.lookrow .ln{display:block; font-weight:600}
.lookrow .lm{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.lookstate{font-size:12.5px; color:var(--ink-3); margin-top:6px; min-height:1px}
.lookstate:empty{margin-top:0}
.lookstate.ok{color:var(--green)}
.lookstate.warn{color:var(--amber)}
.lookstate.err{color:var(--red-dark)}
.lookstate.new{color:var(--amber)}
.lookstate .btn{margin-left:8px}
.exprow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.exprow .tiny{color:var(--ink-3)}
.custline{display:flex; gap:8px; align-items:flex-start}
.custline .lookup{flex:1 1 auto}
.custline .btn{flex:0 0 auto; margin-top:1px}

/* =====================================================================
   COLLAPSIBLE QUOTE SECTIONS
   Ported from the UAE Quote Calculator, which solved this already: a stack
   of cards on one scroll means nothing stands out. Each section is a native
   <details>, and a CLOSED section still carries a one-line summary of what is
   inside it, so nobody has to open all nine to find where something lives.
   The summary carries the FINDING, not the label — "3 covered by stock ·
   2 short" rather than "stock".
   ===================================================================== */
.qsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;
      margin-bottom:12px;overflow:hidden}
.qsec[open]{border-color:var(--brand);box-shadow:0 1px 3px rgba(16,24,40,.06)}
.qsec>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;
              align-items:center;gap:12px;user-select:none}
.qsec>summary::-webkit-details-marker{display:none}
.qsec>summary:hover{background:rgba(0,0,0,.02)}
.qsec>summary:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
.qsig{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);
      position:relative;transition:transform .15s ease,border-color .15s ease}
.qsig::before,.qsig::after{content:"";position:absolute;background:var(--ink-3);border-radius:1px}
.qsig::before{left:5px;right:5px;top:9.25px;height:1.5px}
.qsig::after{top:5px;bottom:5px;left:9.25px;width:1.5px;transition:opacity .15s ease}
.qsec[open]>summary .qsig{border-color:var(--brand);transform:rotate(90deg)}
.qsec[open]>summary .qsig::after{opacity:0}
.qst{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.qsm{font-size:12px;color:var(--ink-3);font-weight:500;margin-left:auto;text-align:right;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.qsb{padding:0 18px 16px;border-top:1px solid var(--line)}
.qsblurb{margin:12px 0 14px;font-size:13px;color:var(--ink-3)}
/* panels keep their spacing but lose the second border inside a section */
.qsb .panel{border:0;background:transparent;padding:0;margin-bottom:20px;box-shadow:none}
.qsb .panel:last-of-type{margin-bottom:0}
.qsb .panel+.panel{padding-top:16px;border-top:1px dashed var(--line)}
.qsave{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
       display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* a row per brand / per group, for the ladders */
.brandrow{display:flex;align-items:center;gap:10px;padding:9px 0;
          border-bottom:1px dashed var(--line);flex-wrap:wrap}
.brandrow:last-child{border-bottom:0}
.brandrow .bn{font-weight:700;min-width:150px}
.brandrow .bc{font-size:12px;color:var(--ink-3);min-width:130px}
.brandrow input[type=number]{width:96px}
.brandrow.none .bn,.brandrow.none .bc{opacity:.45}

/* switches for the show/hide settings */
.toggle{display:flex;align-items:center;gap:9px;font-weight:650;font-size:13px;cursor:pointer}
.toggle input{display:none}
.switch{position:relative;width:40px;height:22px;background:#cfd6dc;border-radius:12px;
        transition:.15s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
               background:#fff;border-radius:50%;transition:.15s}
input:checked+.switch{background:var(--brand-2)}
input:checked+.switch::after{transform:translateX(18px)}

/* drop zone for a Dear export */
.drop{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
      cursor:pointer;color:var(--ink-3);font-size:13.5px;background:var(--panel-2)}
.drop:hover,.drop.over{border-color:var(--brand);color:var(--ink);background:var(--brand-soft)}

/* What comes out of the printer if someone prints from manager view. */
#mgrPrintStop{display:none;padding:60px 40px;font-family:inherit}
#mgrPrintStop h1{font-size:26px;margin:0 0 14px}
#mgrPrintStop p{font-size:14px;line-height:1.6;max-width:56ch;color:#333}
#mgrPrintStop .big{margin-top:22px;padding:14px 18px;border:2px solid var(--red-dark);
  border-radius:8px;color:var(--red-dark);font-weight:700;display:inline-block;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{
  body.blockprint #mgrPrintStop{display:block !important}
  body.blockprint > *:not(#mgrPrintStop){display:none !important}
  .qsec,.qsec[open]{border:0;background:transparent;margin:0;overflow:visible;box-shadow:none}
  .qsec>summary{display:none}
  .qsb{border-top:0;padding:0}
}

/* The notification count sits in the closed section's summary, in red, so a
   warning is visible without opening anything. */
.qsm .cnt{display:inline-block;min-width:19px;padding:1px 7px;border-radius:10px;
  background:var(--red);color:#fff;font-weight:800;font-size:11.5px;
  font-variant-numeric:tabular-nums;margin-left:6px}
.qsm .cnt.clear{background:var(--green-soft);color:var(--green);font-weight:700}
#qs-alerts[open]{border-color:var(--red)}
#qs-alerts .qsb .alert:last-child{margin-bottom:0}

/* =====================================================================
   QUOTE TABLE — column widths, section headings, row reordering
   The item column takes whatever is left; every other column is sized to
   what it actually holds, so Qty stops being a hand's width for two digits.
   ===================================================================== */
table.q th.c-item,table.q td.c-item{width:auto;min-width:260px}
table.q th.c-eta,table.q td.c-eta{width:158px}
table.q th.c-qty,table.q td.c-qty{width:62px;text-align:center}
table.q th.c-list,table.q td.c-list{width:104px}
table.q th.c-wdisc,table.q td.c-wdisc{width:84px}
table.q th.c-xdisc,table.q td.c-xdisc{width:96px}
table.q th.c-unit,table.q td.c-unit{width:106px}
table.q th.c-total,table.q td.c-total{width:118px}
table.q th.c-cost,table.q td.c-cost{width:96px}
table.q th.c-gpr,table.q td.c-gpr{width:88px}
table.q th.c-gpp,table.q td.c-gpp{width:72px}
table.q th.c-act,table.q td.c-act{width:46px}
.qty-in{width:46px;text-align:center;padding:6px 3px}
.lead-sel{width:150px;padding:6px 6px;font-size:12.5px}

/* A section heading, bolder than anything else in the table — it is what the
   customer's eye lands on when they scan a long quote. */
table.q tr.headrow td{
  background:var(--ink);color:#fff;padding:11px 12px;
  border-bottom:0;border-top:2px solid var(--ink)}
table.q tr.headrow:hover td{background:var(--ink)}
table.q tr.headrow:first-child td{border-top:0}
.headrow .hd{font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.headrow .hdctl{float:right;display:flex;gap:6px}
.headrow .hdctl button{background:transparent;border:1px solid #4a545e;color:#c3c9d2;
  border-radius:6px;padding:3px 9px;font:inherit;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.headrow .hdctl button:hover{background:#20272e;color:#fff;border-color:#6a747e}

/* "+ Heading above this line" — quiet until the row is hovered, so 40 lines
   do not turn into 40 shouting buttons. */
/* The insert strip: a hairline exactly where the heading will land, with the
   product it will sit above named on it. Quiet until you go near it, so forty
   lines do not become forty shouting buttons. */
table.q tr.addhdrow td{padding:0;border-bottom:0;position:relative;height:16px}
table.q tr.addhdrow:hover td{background:transparent}
.addhd{
  display:block;width:100%;background:none;border:0;border-top:1px dashed var(--line);
  color:var(--ink-3);font:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;
  text-align:left;padding:3px 10px 3px 66px;cursor:pointer;opacity:.42;
  transition:opacity .12s ease,color .12s ease,background .12s ease}
table.q tr.addhdrow:hover .addhd,.addhd:hover,.addhd:focus-visible{
  opacity:1;color:var(--ink);background:var(--brand-soft);
  border-top-color:var(--brand);border-top-style:solid}
.addhd:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
@media(hover:none){.addhd{opacity:1}}

/* Drag to reorder. Grip, drop indicator, and the same move from the keyboard. */
table.q th.c-grip,table.q td.c-grip{width:60px;white-space:nowrap;color:var(--ink-3);
  font-variant-numeric:tabular-nums;font-size:12px}
.grip{display:inline-block;cursor:grab;touch-action:none;color:#b9c2ca;font-size:15px;
  line-height:1;padding:3px 4px;margin-right:5px;border-radius:4px;user-select:none;
  vertical-align:middle}
.grip:hover{background:var(--line-2);color:var(--ink)}
.grip:focus{outline:2px solid var(--brand-2);outline-offset:0;color:var(--ink)}
.grip:active{cursor:grabbing}
.lno{vertical-align:middle}
table.q tr.dragging{opacity:.35}
table.q tr.dropbefore td{box-shadow:inset 0 3px 0 var(--brand-2)}
table.q tr.dropafter td{box-shadow:inset 0 -3px 0 var(--brand-2)}

/* The headings panel above the table */
.hdrow{display:flex;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px dashed var(--line);flex-wrap:wrap}
.hdrow:last-child{border-bottom:0}
.hdrow .t{font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* Printed: the heading stays, the controls do not. */
@media print{
  table.q tr.headrow td{background:#111 !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grip,.addhd,.hdctl{display:none !important}
}

/* Per-brand ETA rows */
#brandLeadBox .brandrow select{width:190px}
body.dragging-line{cursor:grabbing}
body.dragging-line *{cursor:grabbing !important}

/* =====================================================================
   BLACK AND WHITE — the MiFitness scheme.
   Nothing a customer sees carries an accent colour. The only colour left in
   the app is a WARNING, and warnings are .noprint or manager-only, so they
   cannot reach a document.
   ===================================================================== */
.pg, .pg *, #doc, #propDoc {
  /* The accent is gone, and the greys are true neutrals rather than the slate
     the screen uses — a grey with a blue cast still reads as a colour on paper. */
  --red: #000000; --red-dark: #000000; --red-soft: #f4f4f4;
  --blue: #000000; --blue-soft: #f4f4f4;
  --ink: #000000; --ink-2: #3d3d3d; --ink-3: #767676;
  --line: #d6d6d6; --line-2: #ebebeb;
  --green: #3d3d3d; --green-soft: #f4f4f4;
  --amber: #3d3d3d; --amber-soft: #f4f4f4;
}
.pg .chip.sale, table.doc .chip.sale{background:var(--brand-2);color:#fff}

/* =====================================================================
   COMPANY PROFILE PAGES
   The profile is a finished A4 document in its own right and goes in whole —
   its own markup, its own typography, no header or footer laid over it. The
   .pg gives it the page box; everything inside is the profile's own CSS,
   namespaced under .cprof so the two stylesheets cannot collide.
   ===================================================================== */
.pg.profile-pg{padding:0;overflow:hidden;display:block;background:#fff}
.pg.profile-pg > .cprof{width:100%;height:100%;display:block}
/* The profile's page sizes itself; inside our .pg it fills it instead. */
.pg.profile-pg .cprof .page{width:100%;height:100%;box-shadow:none;margin:0}
.pg.profile-pg .cprof{color:#0E1114}
.pg.profile-pg img{max-width:none}
@media print{
  .pg.profile-pg{padding:0}
  .pg.profile-pg .cprof .page{width:210mm;height:297mm}
  /* The profile is black-on-dark in places; those blocks must actually print. */
  .pg.profile-pg .cprof *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:640px){
  .pg.profile-pg{border:1px solid var(--line);border-radius:8px}
  .pg.profile-pg .cprof .page{height:auto;min-height:0}
}

/* ---- proposal cover ----
   The square lockup, black because the page is white, sitting in the upper
   third. Everything used to be centred as one block in the middle of an
   otherwise empty A4 page; the content now starts near the top and the
   reference details sit at the foot, the way a cover page actually reads. */
.pg.cover-pg{display:flex;flex-direction:column;text-align:center;
  padding:26mm 20mm 16mm}
.pg .cover-top{flex:0 0 auto}
.pg .cover-logo{width:38mm;height:auto;display:block;margin:0 auto 14mm;
  object-fit:contain}
.pg .cover-wordmark{font-size:28pt;font-weight:750;margin:0 auto 14mm}
.pg .cover-eyebrow{font-size:9pt;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;margin-bottom:9px}
.pg .cover-title{font-size:27pt;line-height:1.1;margin:0 0 18px;letter-spacing:-.02em}
.pg .cover-rule{width:64px;height:3px;background:#000;margin:0 auto 20px}
.pg .cover-label{font-size:9pt;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}
.pg .cover-for{font-size:17pt;font-weight:700;margin:5px 0 0}
.pg .cover-cust{margin:16px auto 0;padding-top:14px;border-top:1px solid var(--line);
  max-width:110mm;display:flex;justify-content:center}
.pg .cust-logo-doc{max-height:24mm;max-width:90mm;object-fit:contain}
.pg .cover-intro{max-width:132mm;margin:18px auto 0;font-size:9.6pt;
  line-height:1.6;color:var(--ink-2)}
.pg .cover-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
  font-size:9pt;color:var(--ink-3);line-height:1.65}