*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Showroom palette */
  --porcelain:#FAFBFD;
  --porcelain2:#EEF2F7;
  --ink:#0A2540;
  --ink-soft:#13335A;
  --graphite:#1B4068;
  --brass:#003764;
  --brass-lt:#3D78C0;
  --brass-dk:#003764;
  --stone:#6B7B8F;
  --stone-lt:#94A3B5;
  --line:rgba(10,37,64,.10);
  --line-soft:rgba(10,37,64,.06);
  --white:#fff;
  --r4:4px;--r6:6px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;
  /* One light source, one ink, four rungs. Every elevation is two layers: a
     tight contact shadow saying the surface is resting on something, and a
     wide ambient one saying how far above it. Single-layer shadows are why
     nothing here read as lifted - a card at rest and the same card hovered
     were the same 28px haze three points of opacity apart. 1 rests, 2 is
     lifted or hovered, 3 floats over the page, 4 is a modal over everything. */
  --sh1:0 1px 2px rgba(10,37,64,.07),0 2px 5px rgba(10,37,64,.05);
  --sh2:0 2px 4px rgba(10,37,64,.07),0 12px 24px rgba(10,37,64,.11);
  --sh3:0 4px 10px rgba(10,37,64,.09),0 24px 48px rgba(10,37,64,.16);
  --sh4:0 8px 18px rgba(10,37,64,.10),0 44px 80px rgba(10,37,64,.24);
  /* One frosted material for the chrome. The scrim behind a modal and the
     12px pill on a photo keep their own small blurs - neither is a panel. */
  --glass:blur(20px) saturate(1.18);
  --sb:248px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}
html,body{height:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--porcelain);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#app{display:flex;height:100vh;overflow:hidden}

/* ═══ SIDEBAR ═══ */
#sb{width:var(--sb);min-width:var(--sb);background:#062138;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
/* Collapse the sidebar on a desktop. Only above the phone breakpoint: below
   it the sidebar is a slide-over drawer and must keep its width. */
@media(min-width:781px){
  #sb{transition:width .22s ease,min-width .22s ease,opacity .16s ease}
  body.sb-off #sb{width:0;min-width:0;opacity:0;overflow:hidden;pointer-events:none;border-right:0}
}
#sb::-webkit-scrollbar{width:0}
#sb-top{padding:26px 22px 20px}
#sb-brand{display:flex;align-items:center;gap:13px}
#sb-mark{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#sb-mark span{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--brass);letter-spacing:-.5px;font-style:italic}
#sb-bname{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--porcelain);letter-spacing:-.3px;line-height:1}
#sb-bsub{font-size:10px;color:var(--stone);margin-top:3px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
#sb-rule,#sb-rule2{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0 22px;background:rgba(61,120,192,.20)}
#sb-nlbl,#sb-nlbl2{font-size:9px;font-weight:600;color:var(--stone);text-transform:uppercase;letter-spacing:.22em;padding:22px 24px 10px}
#sb-nav2{padding:0 12px;display:flex;flex-direction:column;gap:1px}
#sb-nav{padding:0 12px;display:flex;flex-direction:column;gap:1px}
.ni{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r8);cursor:pointer;transition:all .15s;user-select:none;position:relative}
.ni:hover{background:rgba(255,255,255,.04)}
.ni.on{background:rgba(61,120,192,.14)}
.ni.on::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:22px;background:var(--brass);border-radius:0 3px 3px 0}
.ni-ico{font-size:16px;flex-shrink:0;width:22px;text-align:center;filter:grayscale(.3)}
.ni.on .ni-ico{filter:none}
.ni-lbl{font-size:13px;font-weight:500;color:var(--stone-lt);letter-spacing:-.1px;transition:color .15s}
.ni-sub{font-size:10px;color:var(--stone);display:block;margin-top:1px;opacity:.7}
.ni.on .ni-lbl{color:var(--porcelain);font-weight:600}
.ni.on .ni-sub{color:var(--brass-lt);opacity:1}
#sb-foot{margin-top:auto;padding:16px 22px;border-top:1px solid rgba(61,120,192,.16);display:flex;align-items:center;gap:11px}
.sbf-txt{min-width:0;line-height:1.25}.sbf-txt strong{display:block;color:var(--stone-lt);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.sbf-txt span{display:block;font-size:10px;color:var(--stone);letter-spacing:.04em;margin-top:1px}

/* ═══ MAIN ═══ */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#mhdr{padding:20px 32px 18px;background:var(--porcelain);border-bottom:1px solid var(--line);flex-shrink:0;display:flex;align-items:baseline;gap:16px}
#mh1{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.6px;line-height:1}
#mh2{font-size:12px;color:var(--stone);margin-top:5px;font-weight:400;letter-spacing:.01em}
#mhdr-badge{margin-left:auto;align-self:center;border:1px solid var(--brass);color:var(--brass-dk);font-size:9px;font-weight:600;padding:4px 11px;border-radius:20px;letter-spacing:.16em;text-transform:uppercase;flex-shrink:0}

/* FILTER BAR */
#fbar{background:var(--porcelain);border-bottom:1px solid var(--line);padding:12px 32px;flex-shrink:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:20}
/* Hiding the bar on a section that has no products used to be an inline
   style.display='none' from goSec. A phone rule further down says
   #fbar{display:flex!important} - to beat the one-column grid - and an
   !important declaration beats an inline style, so on a phone the price
   grid's search box sat on top of Item Sales, the dashboard, the PO list and
   the warranty page. An id AND a class outranks the id alone, so this wins
   wherever it is written. */
#fbar.fb-off{display:none!important}
#fsr{position:relative;flex:1;min-width:200px}
#fsr .fi{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--stone);font-size:13px;pointer-events:none}
#sinput{width:100%;padding:9px 34px 9px 36px;border:1px solid var(--line);border-radius:var(--r8);font-size:13px;font-family:inherit;color:var(--ink);background:var(--white);outline:none;transition:all .15s;font-weight:400}
#sinput:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(61,120,192,.16)}
#sinput::placeholder{color:var(--stone-lt)}
.fw{display:flex;flex-direction:column;gap:3px}
.fl{font-size:9px;font-weight:600;color:var(--stone);text-transform:uppercase;letter-spacing:.13em}
.fd{padding:8px 26px 8px 11px;border:1px solid var(--line);border-radius:var(--r8);font-size:13px;font-family:inherit;color:var(--ink);background:var(--white);-webkit-appearance:none;appearance:none;cursor:pointer;outline:none;min-width:150px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238A8782' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;font-weight:500}
.fd:focus{border-color:var(--brass)}
/* The finish filter is the one dropdown whose choices have a colour, and a
   native <option> cannot carry one. Button + panel, styled to sit beside the
   two real selects without looking like a different control. */
.fdd{position:relative;min-width:0}
.fdd-btn{width:100%;text-align:left;display:flex;align-items:center;font-weight:500}
.fdd-cur{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fdd.open .fdd-btn{border-color:var(--brass)}
.fdd-panel{display:none;position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;min-width:172px;padding:5px;border:1px solid var(--line);border-radius:var(--r8);background:var(--white);box-shadow:var(--sh2);max-height:322px;overflow-y:auto}
.fdd.open .fdd-panel{display:block}
.fdd-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:var(--r4);font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left}
.fdd-opt:hover{background:var(--porcelain2)}
.fdd-opt.on{background:var(--porcelain2);font-weight:700}
.fdd-opt .fsw,.fdd-cur .fsw{margin-right:0;flex:none}
#fcnt{font-size:12px;color:var(--stone);white-space:nowrap;margin-left:auto;font-weight:500;letter-spacing:.02em}

#scroll{flex:1;overflow-y:auto;padding:28px 32px;background:var(--porcelain)}
#scroll::-webkit-scrollbar{width:6px}
#scroll::-webkit-scrollbar-thumb{background:rgba(26,29,33,.12);border-radius:4px}
.sec{display:none}.sec.on{display:block}.sec-center.on{display:flex;align-items:flex-start;justify-content:center;padding-top:8px}

/* ═══ PRICE CARDS ═══ */
#pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* A bundle lists a stock badge per component, which will not fit a quarter-
   width card - it used to scroll sideways behind a slider nobody would think
   to drag. Two columns instead, and the badges wrap. */
.pcard.pc-wide{grid-column:span 2}
/* SAP BOM on a price card. Only ~10 of 254 products have one, so those cards
   span two columns and carry the parts table inline; widening every card for
   4% of them would wreck the grid for the rest. */
/* SAP BOM panel. Built from the same parts as .pc-topup and .pc-ftbl - brass
   micro-label, tinted ground, 11px --ink-soft rows on --line-soft rules - so
   it reads as part of the card instead of a table dropped on top of it. It
   sits BESIDE the prices because the card is already two columns wide for its
   sake; stacking would spend that width and double the height. */
/* min-width:0 on the price column let the finish table shrink below its own
   content and spill over the BOM panel — on a bundle card each row carries a
   stock badge per component, so that table is wide. The price column now
   refuses to shrink past its content (the flex default), and the row wraps
   instead: side by side when there is room, BOM underneath when there is not.
   No clipping, and no sliding bar in the price area. */
/* Stretching the two columns made the parts panel as tall as the photo and
   price list beside it, so a three-part BOM sat in a tinted slab with a third
   of it filled. Each column takes its own height now and the panel is an
   inset card, so what is left below it is card, not empty panel. */
.pc-split{display:flex;flex-wrap:wrap;align-items:flex-start}
.pc-split>.pc-pricecol{flex:1 1 auto}
/* The BOM may shrink — it carries its own scroll for long code columns. */
.pc-split>.pc-bom{flex:1 1 290px;min-width:0}
.pc-split>.pc-mainc{flex:1 1 290px;min-width:0;display:flex;flex-direction:column}
/* Three price blocks side by side have no room in a half-width column, so on
   a BOM card they stack: label left, figure right, divided by a rule. */
/* The full-width card no longer needs the stacked price list the narrow
   column did - three across reads better and is what every other card does. */
.pc-bomcard .pc-prices{flex-direction:row}
.pc-bomcard .ppc{flex:1;display:block;text-align:center;padding:13px 10px}
.pc-bomcard .ppc-l{margin-bottom:5px}
.pc-bomcard .pc-head{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.pc-bomcard .pc-head>.pc-img{flex:0 0 21%;border-bottom:0;border-right:1px solid var(--line)}
.pc-bomcard .pc-head>.pc-info{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:16px 20px}
/* The parts panel is the third segment of the band, not a card floating in it,
   so it carries a hairline and the tint and no rounding of its own. */
.pc-bomcard .pc-head>.pc-bom{flex:0 0 42%;min-width:0;margin:0;border:0;border-left:1px solid var(--line);border-radius:0}
.pc-bomcard .pc-bom{margin:0}
.pc-bom{background:linear-gradient(135deg,rgba(176,141,87,.09),rgba(176,141,87,.03));padding:13px 15px 8px}
.pc-bom-ttl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--brass-dk)}
.pc-bom-model{font-size:10.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;margin:3px 0 8px}
.pc-bom-wrap{overflow-x:auto}
.pc-bom-tbl{width:100%;border-collapse:collapse}
.pc-bom-tbl th{padding:0 14px 9px 0;text-align:left;vertical-align:top;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--stone);white-space:normal;max-width:160px}
/* A finish-variant column repeats the model code with a suffix, which is long
   enough that three of them forced a scrollbar inside the panel. They wrap. */
.pc-bom-tbl td{padding:7px 14px 7px 0;font-size:11px;font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--line-soft);white-space:normal;word-break:break-word;line-height:1.35}
.pc-bom-tbl td:last-child,.pc-bom-tbl th:last-child{padding-right:0}
.pc-bom-tbl tr:last-child td{border-bottom:0}
.pc-bom-copy{margin-top:5px;font-family:inherit;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;padding:4px 9px;border-radius:var(--r4);border:1px solid rgba(0,55,100,.22);background:transparent;color:var(--brass-dk);cursor:pointer;transition:all .15s;white-space:nowrap}
.pc-bom-copy:hover{background:rgba(0,55,100,.07)}
.pc-bom-copy.done{background:var(--brass-dk);border-color:var(--brass-dk);color:#fff}
.pcard.pc-wide .pc-ftbl td:first-child{white-space:normal;line-height:2}
@media(max-width:1500px){#pgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1240px){#pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1040px){#pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){#pgrid{grid-template-columns:1fr}}

.pcard{
  background:var(--white);border-radius:var(--r16);overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  transition:box-shadow .25s cubic-bezier(.2,.6,.3,1),transform .22s cubic-bezier(.2,.6,.3,1),border-color .25s;
}
.pcard:hover{box-shadow:var(--sh2);transform:translateY(-4px);border-color:rgba(61,120,192,.35)}
/* Retired, not removed: the photo desaturates and the type drops to stone, but
   every price stays readable and Cut Sheet / WELS keep full contrast, because
   looking those up is the whole reason the card is still here. */
.pcard.pc-disc{background:var(--porcelain)}
.pcard.pc-disc .pc-img img{filter:grayscale(1);opacity:.6}
.pcard.pc-disc .pc-code{color:var(--stone)}
.pcard.pc-disc .pc-eyebrow{color:var(--stone-lt)}
.pcard.pc-disc .ppc-v{color:var(--stone)}
.pcard.pc-disc .ppc.d .ppc-l,.pcard.pc-disc .ppc.d .ppc-v{color:var(--stone)}
.pcard.pc-disc .ppc.d{background:rgba(107,123,143,.07)}
.pcard.pc-disc .pc-ftbl td,.pcard.pc-disc .pc-ftbl .dc{color:var(--stone)}
.pcard.pc-disc .pc-ftbl .dc{background:rgba(107,123,143,.07)}
.pc-disc-chip{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:999px;background:rgba(107,123,143,.16);color:var(--stone);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;vertical-align:1px}

.pc-img{
  width:100%;aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 38%,#fff 0%,var(--porcelain2) 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.pc-img::after{content:'';position:absolute;inset:0;box-shadow:inset 0 -40px 60px -40px rgba(26,29,33,.06);pointer-events:none}
.pc-img img{width:100%;height:100%;object-fit:contain;padding:22px;transition:transform .4s cubic-bezier(.2,.6,.3,1)}
.pcard:hover .pc-img img{transform:scale(1.07)}
.pc-noimg{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--stone-lt)}
.pc-noimg span{font-size:10px;font-weight:500;letter-spacing:.04em}

.pc-info{padding:16px 18px 12px}
.pc-eyebrow{font-size:9px;font-weight:600;color:var(--brass-dk);text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}
.pc-code{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.5px;line-height:1.05}
.pc-sub{font-size:11px;color:var(--stone);margin-top:5px;font-weight:400;letter-spacing:.01em}

/* Flat price — editorial layout */
.pc-prices{display:flex;border-top:1px solid var(--line);margin-top:2px}
.ppc{flex:1;padding:13px 10px;text-align:center;position:relative}
.ppc+.ppc::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.ppc-l{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--stone);margin-bottom:5px}
.ppc-v{font-size:14px;font-weight:600;color:var(--ink-soft);letter-spacing:-.2px}
.ppc.d .ppc-l{color:var(--brass-dk)}
.ppc.d .ppc-v{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--brass-dk);letter-spacing:-.4px}

/* Finish table */
.pc-ftbl{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.pc-ftbl thead tr{background:var(--porcelain2)}
.pc-ftbl th{padding:8px 6px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--stone);text-align:left;white-space:nowrap}
.pc-ftbl th:not(:first-child){text-align:right}
.pc-ftbl td{padding:9px 6px;font-size:11px;font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.pc-ftbl td:first-child{white-space:normal}
.pc-ftbl td:first-child .stk{margin-left:5px}
@media(max-width:1500px){
  .pc-ftbl td:first-child .stk:first-of-type{display:block;width:-moz-fit-content;width:fit-content;margin:4px 0 0 19px}
  .pc-ftbl td:first-child .stk:first-of-type~.stk{margin-left:5px}
}
.pc-ftbl td:not(:first-child){text-align:right}
.pc-ftbl .dc{font-family:var(--serif);color:var(--brass-dk);font-weight:600;font-size:12px}
.pc-ftbl tr:last-child td{border-bottom:none}
.pc-ftbl tr:hover td{background:var(--porcelain)}
.fsw{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.16)}
.pc-more{font-size:10px;color:var(--stone);text-align:center;padding:7px;font-style:italic;background:var(--porcelain2);border-top:1px solid var(--line-soft);cursor:pointer;-webkit-tap-highlight-color:rgba(61,120,192,.2)}
.pc-more:hover{text-decoration:underline}
.pc-ftbl tr.pc-fhid{display:none}
/* The catalogue is a document, not a card grid: it takes the whole pane, edge
   to edge, and scrolls once. Before, an 82vh iframe sat inside a scrolling
   pane, so there were two scrollbars and the spreads were rendered into a box
   two thirds the height of the screen. */
.cat-wrap{display:flex;flex:1;min-height:0;margin:0;padding:0;max-width:none}
.cat-wrap iframe{flex:1;width:100%;border:0;display:block}
#scroll.pane-flush{padding:0;overflow:hidden}
#scroll.pane-flush>.sec.on{display:flex;flex-direction:column;height:100%}
.cat-pg{display:block;width:100%;height:auto;margin:0 auto 18px;border:1px solid var(--line-soft);border-radius:8px;box-shadow:var(--sh1);background:#fff}
.cat-load{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 20px;color:var(--stone);gap:14px}
.cat-msg{padding:80px 24px;text-align:center;color:var(--stone);max-width:560px;margin:0 auto;line-height:1.6}
.inst-wrap{max-width:860px;margin:0 auto;padding:8px 0 64px}
.inst-wrap img{display:block;width:100%;height:auto;border:1px solid var(--line-soft);border-radius:10px;box-shadow:var(--sh1)}

/* ═══ SALES DASHBOARD (admin only) ═══ */
.sales-wrap{padding:8px 0 64px}
.sd-retry{display:block;margin:13px auto 0;padding:8px 18px;border-radius:8px;
  cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;
  background:var(--navy,#0e2139);color:#fff;border:0}
.sd-empty{padding:80px 24px;text-align:center;color:var(--stone)}
.sd-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.sd-filterbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sd-filterlbl{font-size:11px;color:var(--stone);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sd-filterbar select{width:auto;min-width:170px}
.sd-card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r12);padding:16px 18px;box-shadow:var(--sh1);display:flex;flex-direction:column;gap:6px}
.sd-card-lbl{font-size:11px;color:var(--stone);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sd-card-val{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink)}
.sd-source{font-size:11px;color:var(--stone);margin-bottom:8px}
/* Bumped from 11px — this line answers "how current is this?", which people
   check often, and it was too small to read at a glance. */
.sd-sync{font-size:13px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sd-sync-btn{font-size:12.5px;font-family:inherit;padding:5px 13px;border-radius:6px;border:1px solid var(--line,#d8d8d8);background:#fff;color:var(--ink,#1a2b4c);cursor:pointer}
.sd-sync-btn:hover{background:#f2f4f8}
.sd-sync-btn:disabled{opacity:.6;cursor:default}
.sd-sync-msg{color:#a15c00;flex-basis:100%}
.sd-tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r12);box-shadow:var(--sh1)}
.sd-table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.sd-table th,.sd-table td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line-soft)}
.sd-table th:first-child,.sd-table td:first-child{text-align:left;white-space:normal;min-width:220px}
.sd-table thead th{background:var(--porcelain2);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);font-weight:700}
.sd-table tbody tr:hover{background:rgba(61,120,192,.05)}
.sd-gc{background:rgba(61,120,192,.06)}
.sd-tot{font-weight:700;color:var(--ink)}
.sd-grand{font-weight:800;background:var(--porcelain2)}
.sd-grand td{border-top:2px solid var(--line)}
@media(max-width:900px){.sd-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sd-cards{grid-template-columns:1fr}}
.sd-tiers{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r12);padding:16px 18px;box-shadow:var(--sh1);margin-bottom:18px;display:flex;flex-direction:column;gap:12px}
.sd-tiers-title{font-size:11px;color:var(--stone);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sd-tier-row{display:grid;grid-template-columns:130px 1fr 220px;align-items:center;gap:12px}
.sd-tier-lbl{font-size:12.5px;font-weight:700;color:var(--ink)}
.sd-tier-bar{height:8px;border-radius:4px;background:var(--porcelain2);overflow:hidden}
.sd-tier-fill{height:100%;background:linear-gradient(135deg,#0d3f68,#0A2540);border-radius:4px}
.sd-tier-row.sd-tier-met .sd-tier-fill{background:linear-gradient(135deg,#1f9d55,#167a41)}
.sd-tier-val{font-size:11.5px;color:var(--stone);text-align:right;white-space:nowrap}
/* Milestone track for the distributor's monthly targets: a rail with a node
   per tier, filled up to where this month's sales actually reach. Nodes sit on
   an even grid rather than at value-proportional positions — the point is the
   sequence of milestones, and proportional spacing bunches the low tiers
   together illegibly when one target dwarfs the others. */
.tt-wrap{padding:6px 2px 0}
.tt-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.tt-actual{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.tt-actual-lbl{font-size:11.5px;color:var(--stone)}
.tt-next{margin-left:auto;font-size:11.5px;color:var(--stone)}
.tt-next strong{color:var(--ink)}
.tt-rail{position:relative;height:34px;margin-bottom:2px}
.tt-line{position:absolute;top:15px;height:4px;border-radius:2px;background:var(--porcelain2)}
.tt-fill{position:absolute;top:15px;height:4px;border-radius:2px;background:linear-gradient(90deg,#1a4f7a,#177a41);transition:width .4s ease}
.tt-node{position:absolute;top:5px;width:24px;height:24px;margin-left:-12px;border-radius:50%;
  background:var(--white);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--stone);box-shadow:0 1px 3px rgba(10,37,64,.12)}
.tt-node.is-start{background:var(--ink);border-color:var(--ink)}
.tt-node.is-done{background:#177a41;border-color:#177a41;color:#fff}
.tt-node.is-next{border-color:#0A2540;color:#0A2540;border-width:3px}
.tt-cols{display:grid;gap:0}
.tt-col{text-align:center;padding:0 4px;min-width:0}
.tt-col strong{display:block;font-size:12px;color:var(--ink);margin-bottom:2px}
.tt-col span{display:block;font-size:11.5px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-col .tt-amt{font-size:12.5px;font-weight:600;color:var(--ink)}
.tt-col.done .tt-state{color:#177a41;font-weight:600}
.tt-note{font-size:11px;color:var(--stone);margin-top:16px}
/* Monthly sales line chart (admin). Hand-built SVG — the app carries no chart
   library, and adding one for a single view isn't worth the weight. */
.lc-wrap{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r12);
  box-shadow:var(--sh1);padding:16px 18px;margin-bottom:18px}
.lc-svg{width:100%;height:auto;display:block;overflow:visible}
.lc-grid{stroke:var(--line-soft);stroke-width:1}
.lc-axis{fill:var(--stone);font-size:11px}
.lc-xlab{fill:var(--stone);font-size:11.5px;text-anchor:middle}
.lc-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.lc-dot{stroke:#fff;stroke-width:1.5}
/* White halo behind the figures so they stay readable where they sit on top of
   a line or another label — needed once all ten series show their amounts. */
.lc-val{font-size:10.5px;font-weight:700;text-anchor:middle;
  stroke:#fff;stroke-width:3;paint-order:stroke fill}
.lc-valbtn{font-size:12.5px;font-family:inherit;padding:5px 13px;border-radius:6px;
  border:1px solid var(--line,#d8d8d8);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.lc-valbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lc-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}
.lc-legend-top{margin:2px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.lc-key{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink);cursor:pointer;
  border:0;background:none;padding:2px 0;font-family:inherit}
.lc-key i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
.lc-key.off{opacity:.35}
.lc-empty{font-size:12px;color:var(--stone);text-align:center;padding:28px 0}
/* Actual-vs-Target column chart on the distributor's own sales view. Bars are
   sized as a % of the largest value on show, so the tallest column always
   fills the plot area regardless of the company's target sizes. */
.sd-chart{display:flex;align-items:flex-end;gap:16px;height:180px;padding:14px 2px 0}
.sd-chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:52px}
.sd-chart-bar{width:100%;max-width:76px;border-radius:6px 6px 0 0;min-height:3px}
.sd-chart-actual{background:linear-gradient(180deg,#1a4f7a,#0A2540)}
.sd-chart-target{background:#cadcfc}
.sd-chart-met{background:linear-gradient(180deg,#1f9d55,#167a41)}
.sd-chart-val{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:5px;white-space:nowrap}
.sd-chart-lbls{display:flex;gap:16px;padding:0 2px}
.sd-chart-lbl{flex:1;min-width:52px;font-size:11px;color:var(--stone);text-align:center;line-height:1.35;padding-top:7px;border-top:1px solid var(--line-soft)}
.sd-chart-lbl strong{display:block;color:var(--ink);font-size:11.5px}
.sd-chart-legend{display:flex;gap:18px;font-size:11px;color:var(--stone);margin-top:12px;align-items:center;flex-wrap:wrap}
.sd-chart-key{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.sd-chart-note{font-size:11px;color:var(--stone);margin-top:10px}
/* Standing caveat on the sales figures. Deliberately understated rather than
   alarming — it should be read once and remembered, not shout on every load. */
.sd-caveat{display:flex;align-items:flex-start;gap:9px;margin:0 0 16px;padding:9px 12px;
  background:#fffaf0;border:1px solid #f0e0c0;border-radius:var(--r10,8px);
  font-size:11.5px;line-height:1.5;color:#7a5c22}
.sd-caveat strong{color:#5f4616}
.sd-beta{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:#a15c00;color:#fff;padding:2px 7px;border-radius:10px;margin-top:1px}
.sd-tier-row.sd-tier-met .sd-tier-val{color:#167a41;font-weight:700}
@media(max-width:700px){.sd-tier-row{grid-template-columns:1fr;gap:5px}.sd-tier-val{text-align:left}}
.sd-confidential{margin-top:22px;padding-top:18px;border-top:2px solid var(--line)}
.sd-confidential-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
/* BOM: one table per model, variants as columns - the shape the workbook
   itself uses. A card per model-and-variant repeated each model three or
   four times, which is what made it unreadable. */
.bom-search{width:100%;padding:12px 14px;font-size:13px;border:1px solid var(--line-soft);border-radius:var(--r12);background:var(--white);box-shadow:var(--sh1);margin-bottom:6px}
.bom-model{margin:18px 0 6px;display:flex;align-items:center;gap:11px}
.bom-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:var(--r8);border:1px solid var(--line-soft);background:var(--white);object-fit:contain;padding:3px}
.bom-nothumb{width:46px;height:46px;flex:0 0 46px;border-radius:var(--r8);border:1px dashed var(--line);background:var(--porcelain);display:flex;align-items:center;justify-content:center;font-size:15px;color:#c3ccd8}
.bom-model-h{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
.bom-model-g{font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-dk);margin-left:9px}
.bom-src{font-size:8px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--stone-lt);margin-left:9px}
.bom-tbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--white)}
.bom-tbl th{padding:9px 12px;text-align:left;vertical-align:top;background:var(--porcelain2);border-bottom:1px solid var(--line);border-right:1px solid var(--line-soft)}
.bom-tbl th:last-child{border-right:0}
.bom-tbl td{padding:6px 12px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);font-size:11px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.bom-tbl td:last-child{border-right:0}
.bom-tbl tr:last-child td{border-bottom:0}
.bom-vn{display:block;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--stone);margin-bottom:6px;white-space:normal;max-width:230px}
.bom-copy{font-family:inherit;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;padding:4px 9px;border-radius:var(--r4);border:1px solid rgba(0,55,100,.22);background:transparent;color:var(--brass-dk);cursor:pointer;white-space:nowrap;transition:all .15s}
.bom-copy:hover{background:rgba(0,55,100,.07)}
.bom-copy.done{background:var(--brass-dk);border-color:var(--brass-dk);color:#fff}
.bom-dim{color:var(--stone-lt)}
.sd-confidential-note{font-size:10.5px;color:var(--stone);margin-bottom:10px}
.sd-tier-hit{color:#167a41;font-weight:700;background:rgba(31,157,85,.08)}
.sd-cell-btn{font:inherit;font-weight:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:2px}
.sd-cell-btn:hover{text-decoration-color:var(--brass-lt);color:var(--brass-lt)}
.sd-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(10,37,64,.35);z-index:200;align-items:center;justify-content:center}
.sd-modal-backdrop.open{display:flex}
.sd-modal{background:var(--white);border-radius:var(--r16);box-shadow:var(--sh3);padding:24px 28px;min-width:280px;width:1120px;max-width:94vw;max-height:88vh;overflow-y:auto;position:relative}
.sd-modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:var(--stone);cursor:pointer}
.sd-modal-close:hover{color:var(--ink)}
.sd-modal h3{margin:0 0 14px;font-family:var(--serif);font-size:17px;color:var(--ink);padding-right:20px}
.sd-detail-row{display:flex;justify-content:space-between;gap:24px;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.sd-detail-highlight{font-weight:800;color:var(--ink);border-bottom:none}
.sd-lines-wrap{margin-top:14px;border:1px solid var(--line-soft);border-radius:var(--r8);overflow-x:auto}
.sd-lines-table{width:100%;border-collapse:collapse;font-size:12px}
.sd-lines-table th,.sd-lines-table td{padding:6px 10px;text-align:left;white-space:nowrap}
.sd-lines-table td:nth-child(2){white-space:normal;word-break:break-word;min-width:150px}
.sd-lines-table th:first-child,.sd-lines-table td:first-child{width:1%;color:var(--stone)}
.sd-lines-table th:last-child,.sd-lines-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.sd-lines-table td:last-child,.sd-lines-table th:last-child{text-align:right}
.sd-lines-table thead th{background:var(--porcelain2);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--stone);font-weight:700;position:sticky;top:0}
.sd-lines-table tbody tr:nth-child(even){background:var(--porcelain)}
.sd-lines-table tbody tr:hover{background:rgba(61,120,192,.08)}

/* ═══ PROMOTION (sales role only) ═══ */
.promo-wrap{max-width:880px;width:100%}
.promo-note{font-size:12px;color:var(--stone-lt);margin-top:2px}
.promo-tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r12);margin-top:10px}
.promo-table{width:100%;border-collapse:collapse;font-size:12.5px}
.promo-table th,.promo-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line-soft)}
.promo-table tbody tr:last-child td{border-bottom:none}
.promo-table thead th{background:var(--porcelain2);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);font-weight:700}
.promo-table td.promo-price{font-weight:800;color:#b8433a}
.promo-list{margin-left:18px;font-size:13px;line-height:1.75;color:var(--stone);margin-top:6px}
.promo-list li{margin-bottom:3px}
.promo-h3{font-size:13px;font-weight:700;color:var(--ink);margin-top:14px;margin-bottom:2px}
.promo-h3:first-child{margin-top:0}

/* ═══ FIT CHECKER ═══ */
.fit-wrap{max-width:1060px;margin:0 auto;padding:8px 0 64px}
.fit-pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.fit-pill{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:-.2px;padding:9px 16px;border-radius:24px;border:1px solid var(--line);background:var(--white);color:var(--stone);cursor:pointer;transition:all .15s}
.fit-pill:hover{border-color:rgba(61,120,192,.4)}
.fit-pill.on{background:var(--ink);border-color:var(--ink);color:var(--porcelain)}
.fit-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.fit-cols{grid-template-columns:1fr}}
.fit-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r16);padding:22px}
.fit-sect{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--brass-dk);margin-bottom:16px}
.fit-ref-head{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.3px}
.fit-ref-name{font-size:12px;color:var(--stone);margin:3px 0 1px}
.fit-ref-pow{font-size:11px;color:var(--brass-dk);font-style:italic}
.fit-diagram{display:flex;justify-content:center;margin:14px 0 8px}
.fit-dims{border-top:1px solid var(--line)}
.fit-dim{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.fit-dim-badge{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
.fit-dim-lbl{font-size:12px;color:var(--ink);flex:1;line-height:1.35}
.fit-dim-val{font-size:13px;font-weight:700;color:var(--ink);font-family:var(--serif);white-space:nowrap}
.fit-field{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.fit-field-lbl{font-size:12px;color:var(--ink);flex:1;display:flex;align-items:center;gap:9px;line-height:1.3}
.fit-input{width:92px;border:1px solid var(--line);border-radius:var(--r8);padding:9px 10px;font-family:inherit;font-size:13px;text-align:right;color:var(--ink);background:var(--porcelain)}
.fit-input:focus{outline:none;border-color:var(--brass);background:#fff}
.fit-unit{font-size:11px;color:var(--stone);width:18px}
.fit-shape{border:1px solid var(--line);border-radius:var(--r8);padding:9px 10px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--porcelain)}
.fit-btn{width:100%;margin-top:18px;background:var(--ink);color:var(--porcelain);border:none;border-radius:var(--r8);padding:15px;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:opacity .15s}
.fit-btn:hover{opacity:.9}
.fit-result{margin-top:16px}
.fit-verdict{border-radius:var(--r12);padding:15px 18px;margin-bottom:12px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;line-height:1.3}
.fit-verdict.ok{background:rgba(34,139,69,.1);color:#176a34;border:1px solid rgba(34,139,69,.3)}
.fit-verdict.no{background:rgba(192,40,40,.08);color:#a52727;border:1px solid rgba(192,40,40,.3)}
.fit-verdict.warn{background:rgba(176,141,87,.12);color:var(--brass-dk);border:1px solid rgba(176,141,87,.35)}
.fit-rrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink)}
.fit-rmark{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.fit-note{font-size:11px;color:var(--stone);line-height:1.55;margin-top:11px;padding-top:10px;border-top:1px solid var(--line-soft)}


/* Top-up box */
.pc-topup{background:linear-gradient(135deg,rgba(176,141,87,.08),rgba(176,141,87,.03));border-top:1px solid rgba(61,120,192,.25);padding:10px 14px}
.pc-topup-title{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--brass-dk);margin-bottom:6px}
.pc-topup-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:1px 0}
.pc-topup-lbl{color:var(--stone);font-weight:500}
.pc-topup-val{font-weight:700;color:var(--brass-dk)}

/* Action buttons */
.pc-acts{display:flex;border-top:1px solid var(--line)}
.pc-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--stone);transition:all .15s;font-family:inherit;letter-spacing:.02em}
.pc-act+.pc-act{border-left:1px solid var(--line)}
.pc-act:hover{background:var(--ink);color:var(--porcelain)}

/* ═══ ASSET GRIDS ═══ */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1400px){.agrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1040px){.agrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.agrid{grid-template-columns:1fr}}
.ac{background:var(--white);border-radius:var(--r16);overflow:hidden;cursor:pointer;border:1px solid var(--line);box-shadow:var(--sh1);transition:box-shadow .25s,transform .22s}
.ac:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-color:rgba(61,120,192,.35)}
.ac-img{width:100%;aspect-ratio:3/4;background:var(--porcelain2);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
.ac-img img{width:100%;height:100%;object-fit:contain;padding:12px}
/* 86 of the 92 installation scans are A4 landscape and only 6 are portrait, but
   the thumbnail box was fixed at 3/4 portrait, so most of them sat in a tall
   grey box with a band of nothing above and below. On this grid the box follows
   the image: a landscape scan makes a short card, a portrait one a tall card,
   and neither is padded out to a shape it is not. align-items:start stops the
   short cards in a row being stretched back out to match the tall ones. */
#manualgrid{align-items:start}
#manualgrid .ac-img{aspect-ratio:auto;display:block;overflow:visible}
#manualgrid .ac-img img{width:100%;height:auto;padding:0;display:block}
.ac-noimg{font-size:11px;color:var(--stone-lt);text-align:center;padding:18px;font-style:italic}
.ac-foot{padding:14px 16px;display:flex;align-items:center;gap:10px}
.ac-code{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.3px}
.ac-sub{font-size:11px;color:var(--stone);margin-top:2px;font-weight:400}
.ac-arr{width:30px;height:30px;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brass-dk);font-size:13px;flex-shrink:0;transition:all .15s}
.ac:hover .ac-arr{background:var(--brass);color:#fff}

/* CABINET */
#cab-wrap{max-width:none;margin:0 0 64px;display:flex;flex-direction:column;gap:12px}
.cab-overview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.cab-overview strong{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.2px}
.cab-overview span{font-size:11px;color:var(--stone);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.cab-band{background:#fff;border:1px solid rgba(10,37,64,.22);border-radius:8px;overflow:hidden;box-shadow:var(--sh1)}
.cab-band-head{background:#062b55;color:#fff;display:flex;align-items:center;gap:10px;padding:7px 12px;min-height:32px}
.cab-band-title{font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1.2;flex:1;text-align:center}
.cab-band-meta{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b9d8ff;white-space:nowrap}
.cab-band-grid{display:grid;grid-template-columns:minmax(0,1fr);background:rgba(10,37,64,.12);gap:1px}
.cab-combo{background:#fff;display:grid;grid-template-columns:minmax(142px,190px) minmax(0,1fr);gap:13px;padding:14px;min-width:0}
.cab-combo-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-content:start}
.cab-thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,#fff,var(--porcelain2));border:1px solid var(--line-soft);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cab-thumb img{width:100%;height:100%;object-fit:contain;padding:7px}
.cab-thumb-label{position:absolute;left:5px;top:5px;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);font-size:10px;font-weight:800;color:var(--ink)}
.cab-combo-main{min-width:0;display:flex;flex-direction:column;gap:9px}
.cab-combo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.cab-model{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--ink);line-height:1.1}
.cab-size{font-size:11px;color:var(--ink-soft);font-weight:700;margin-top:3px}
.cab-price-pill{border:1px solid rgba(61,120,192,.4);background:rgba(61,120,192,.08);color:var(--brass-dk);border-radius:6px;padding:5px 7px;font-size:11px;font-weight:800;white-space:nowrap}
.cab-mini-label{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--stone);margin-bottom:5px}
.cab-options{display:flex;flex-wrap:wrap;gap:5px}
.cab-option{display:flex;align-items:center;gap:5px;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--porcelain);padding:5px 7px;font-size:10px;font-weight:700;color:var(--ink-soft);line-height:1.2}
.cab-swatch{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);flex-shrink:0;background:#c8c0b0}
.cab-swatch.grey{background:#777b80}.cab-swatch.white{background:#f6f3eb}.cab-swatch.black{background:#202020}.cab-swatch.brown{background:#6f4428}.cab-swatch.dark{background:#2f2019}.cab-swatch.ivory{background:#f4eddb}.cab-swatch.stone{background:#ddd9d2}.cab-swatch.roman{background:#d8c9b7}.cab-swatch.fish{background:#f1eee5}.cab-swatch.karla{background:#a7a8aa}
.cab-basin-list{display:flex;flex-direction:column;gap:5px}
.cab-basin-row{display:grid;grid-template-columns:minmax(118px,.82fr) minmax(0,1fr);gap:7px;align-items:center;font-size:10px;line-height:1.25;border-bottom:1px solid var(--line-soft);padding-bottom:5px}
.cab-basin-row:last-child{border-bottom:none;padding-bottom:0}
.cab-basin-code{font-weight:800;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-basin-note{color:var(--stone);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-basin-price{font-weight:800;color:var(--brass-dk);white-space:nowrap}
.cab-fit-note{display:inline-block;background:#ffe96a;color:#111;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:800;line-height:1.25;margin-top:1px}
.cab-more{font-size:10px;color:var(--stone);font-style:italic;padding-top:2px}
@media(max-width:1180px){.cab-band-grid{grid-template-columns:1fr}.cab-combo{grid-template-columns:minmax(138px,180px) minmax(0,1fr)}}
@media(max-width:680px){#cab-wrap{margin-bottom:40px}.cab-overview{align-items:flex-start;flex-direction:column}.cab-band-head{align-items:flex-start;flex-direction:column}.cab-band-title{text-align:left}.cab-combo{grid-template-columns:1fr}.cab-combo-media{grid-template-columns:repeat(3,minmax(0,1fr))}.cab-basin-row{grid-template-columns:1fr auto}.cab-basin-note{grid-column:1 / -1}}
/* ═══ GALLERY ═══ */
#gbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.gcbtn{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--line);background:var(--white);color:var(--stone);transition:all .14s;font-family:inherit}
.gcbtn:hover{border-color:var(--brass);color:var(--brass-dk)}
.gcbtn.on{background:var(--ink);border-color:var(--ink);color:var(--porcelain)}
#ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gi{border-radius:var(--r12);overflow:hidden;cursor:pointer;position:relative;aspect-ratio:4/3;background:var(--porcelain2)}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.6,.3,1)}
.gi:hover img{transform:scale(1.07)}
.gi-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,29,33,.82) 0%,rgba(26,29,33,.04) 55%,transparent 100%);opacity:0;transition:opacity .2s}
.gi:hover .gi-ov{opacity:1}
.gi-lb{position:absolute;bottom:0;left:0;right:0;padding:12px 14px;transform:translateY(6px);opacity:0;transition:all .2s}
.gi:hover .gi-lb{opacity:1;transform:translateY(0)}
.gi-name{font-size:12px;font-weight:600;color:#fff;line-height:1.35}
.gi-cat{font-size:10px;color:var(--brass-lt);margin-top:2px;letter-spacing:.04em}
#gload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:14px;color:var(--stone)}
.spin{width:32px;height:32px;border:2px solid var(--line);border-top-color:var(--brass);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ═══ WARRANTY ═══ */
#warranty-wrap{max-width:880px;width:100%}
.w-hero{background:var(--ink);border-radius:var(--r20);padding:36px 38px;margin-bottom:22px;position:relative;overflow:hidden}
.w-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border:1px solid rgba(61,120,192,.2);border-radius:50%}
.w-hero::after{content:'';position:absolute;top:-10px;right:-10px;width:140px;height:140px;border:1px solid rgba(176,141,87,.1);border-radius:50%}
.w-eff{display:inline-block;border:1px solid rgba(61,120,192,.35);border-radius:20px;font-size:10px;font-weight:500;padding:4px 13px;margin-bottom:16px;color:var(--brass-lt);letter-spacing:.08em;position:relative}
.w-hero h2{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--porcelain);margin-bottom:8px;letter-spacing:-.6px;position:relative}
.w-hero p{font-size:13px;color:var(--stone-lt);line-height:1.7;max-width:540px;font-weight:400;position:relative}
.w-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
@media(max-width:880px){.w-grid{grid-template-columns:repeat(2,1fr)}}
.wc{background:var(--white);border-radius:var(--r12);border:1px solid var(--line);padding:18px;transition:all .15s}
.wc:hover{border-color:rgba(61,120,192,.35);box-shadow:var(--sh1)}
.wc-period{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--brass-dk);letter-spacing:-.4px;margin-bottom:8px;line-height:1}
.wc-cat{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.01em;margin-bottom:6px}
.wc-desc{font-size:11px;color:var(--stone);line-height:1.6;font-weight:400}
.w-acc{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.wa{background:var(--white);border-radius:var(--r12);border:1px solid var(--line);overflow:hidden}
.wa-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;cursor:pointer;user-select:none}
.wa-head:hover{background:var(--porcelain)}
.wa-title{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
.wa-arr{color:var(--brass);font-size:13px;transition:transform .2s}
.wa.open .wa-arr{transform:rotate(180deg)}
.wa-body{display:none;padding:0 20px 17px;font-size:13px;color:var(--stone);line-height:1.75;border-top:1px solid var(--line);font-weight:400}
.wa.open .wa-body{display:block}
.wa-body p{margin-top:13px}
.w-contact{background:var(--ink);border-radius:var(--r16);padding:24px 26px}
.w-contact h3{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--porcelain);margin-bottom:16px;letter-spacing:-.3px}
.w-contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.wci{background:rgba(255,255,255,.04);border-radius:var(--r8);padding:13px 15px;border:1px solid rgba(61,120,192,.16)}
.wci-l{font-size:9px;font-weight:600;color:var(--brass-lt);text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}
.wci-v{font-size:13px;font-weight:500;color:var(--porcelain)}
.w-policy-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;position:relative}
.w-policy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border-radius:var(--r8);background:var(--brass);color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.02em;transition:all .15s}
.w-policy-btn:hover{background:var(--brass-dk);transform:translateY(-1px)}

/* MANUAL / EMPTY */
.manual-box{background:var(--white);border-radius:var(--r20);border:1px solid var(--line);padding:56px 46px;text-align:center;max-width:440px}
.manual-box .bi{font-size:40px;margin-bottom:18px;opacity:.5}
.manual-box h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:11px;letter-spacing:-.3px}
.manual-box p{font-size:13px;color:var(--stone);line-height:1.75;font-weight:400}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:12px;color:var(--stone)}
.empty .ei{font-size:38px;opacity:.2}

/* ═══ MODAL ═══ */
#mov{display:none;position:fixed;inset:0;background:rgba(26,29,33,.55);z-index:300;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#mov.on{display:flex}
#modal{background:var(--white);border-radius:var(--r20);max-width:820px;width:100%;box-shadow:var(--sh4);margin:auto;overflow:hidden}
#mtop{background:var(--ink);padding:24px;display:flex;align-items:flex-start;gap:18px;position:relative;overflow:hidden}
#mtop::before{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border:1px solid rgba(61,120,192,.16);border-radius:50%}
#mtop-iw{width:92px;height:92px;background:var(--porcelain);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;position:relative}
#mtop-iw img{width:100%;height:100%;object-fit:contain;padding:6px}
.mph{font-size:30px;opacity:.3}
#mmeta{flex:1;min-width:0;position:relative}
#mcode{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--porcelain);letter-spacing:-.5px;line-height:1.05}
#msub{font-size:10px;font-weight:600;color:var(--brass-lt);text-transform:uppercase;letter-spacing:.14em;margin-top:6px}
#mspec{font-size:12px;color:var(--stone-lt);margin-top:9px;white-space:pre-line;line-height:1.7;font-weight:400}
#mcl{background:rgba(255,255,255,.06);border:1px solid rgba(61,120,192,.25);width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;color:var(--brass-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .14s;font-family:inherit;position:relative}
#mcl:hover{background:var(--brass);color:#fff;border-color:var(--brass)}
#mbody{padding:24px 26px 28px;max-height:70vh;overflow-y:auto}
#mbody::-webkit-scrollbar{width:5px}
#mbody::-webkit-scrollbar-thumb{background:rgba(26,29,33,.12);border-radius:4px}
.ms-ttl{font-size:9px;font-weight:700;color:var(--brass-dk);text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ms-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ms-bar .ms-ttl{margin:0;padding:0;border:0}
.pdf-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;box-sizing:border-box;border-radius:8px;background:var(--brass);color:#fff;padding:11px 14px;font:700 11px var(--sans);cursor:pointer;white-space:nowrap;transition:all .15s}
.pdf-btn:hover{background:var(--brass-dk);transform:translateY(-1px)}
/* Copy sits beside Save as PDF but must not compete with it, so it is the
   outlined twin rather than a second solid brass button. */
.pdf-btn-2{background:transparent;color:var(--brass-dk);border:1px solid rgba(0,55,100,.28)}
.pdf-btn-2:hover{background:var(--porcelain2);color:var(--brass-dk)}
.btn-i{font-size:12px;line-height:1;opacity:.85}
.btn-short{display:none}
/* The bar is two groups now - what this document IS on the left, what you can
   do with it on the right - so the finish pills sit beside the label instead of
   taking a row of their own, and the buttons never interleave with the title. */
.ms-bar{flex-wrap:wrap;align-items:center}
.ms-lead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.ms-lead .ms-ttl{margin:0;padding:0;border:0;white-space:nowrap}
.ms-lead .cut-fin-pills{margin:0}
.ms-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* On a phone the three buttons could not sit on one line, so they wrapped into
   a ragged stack with 9px of padding - too small to tap confidently. Stacked
   deliberately instead, full width, with a 44px target. */
@media(max-width:760px){
  #mov{padding:10px}
  #mbody{padding:18px 16px 22px;max-height:76vh}
  .ms-bar{flex-direction:column;align-items:stretch;gap:12px}
  .ms-lead{gap:10px}
  .ms-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
  /* Three full-width buttons took 148px - a fifth of the screen - for what is
     really three verbs. Short labels beside an icon fit one row at 42px. */
  .ms-acts{grid-template-columns:repeat(3,1fr);gap:6px}
  .ms-acts .pdf-btn{width:100%;min-height:42px;padding:10px 6px;font-size:11.5px;gap:5px}
  .ms-acts .btn-full{display:none}
  .ms-acts .btn-short{display:inline}
  .ms-lead .cut-fin-pill{padding:10px 16px;font-size:12.5px}
}
.cut-fin-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.cut-fin-pill{font-size:12px;font-weight:600;padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--white);color:var(--stone);cursor:pointer;transition:all .15s}
.cut-fin-pill:hover{border-color:rgba(61,120,192,.4)}
.cut-fin-pill.on{background:var(--ink);border-color:var(--ink);color:var(--porcelain)}
.wels-full{width:100%;border-radius:var(--r12);border:1px solid var(--line);display:block}
.mimg{width:100%;border-radius:var(--r8);border:1px solid var(--line);display:block;margin-bottom:11px}
.mno{color:var(--stone);font-size:13px;font-style:italic;padding:10px 0;font-weight:400}

#mob-btn{display:flex;position:fixed;bottom:20px;right:20px;z-index:100;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--brass-lt);border:1px solid var(--brass);font-size:20px;cursor:pointer;box-shadow:var(--sh2);align-items:center;justify-content:center}
#mob-ov{display:none;position:fixed;inset:0;background:rgba(26,29,33,.5);z-index:49}
@media(max-width:780px){
  #sb{position:fixed;top:0;left:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .25s}
  #sb.open{transform:translateX(0)}
  #mob-ov.show{display:block}
  #mob-btn{display:flex}
  #scroll{padding:16px}
  #fbar,#mhdr{padding:12px 16px}
  #mh1{font-size:22px}
  #pgrid,.agrid{grid-template-columns:1fr}
  .w-grid{grid-template-columns:1fr}
}
#gate{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:100000;background:linear-gradient(160deg,#022a4d 0%,#003764 55%,#012038 100%);display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--sans);overflow:auto}
#gate.hidden{display:none}
#gate .gate-box{width:100%;max-width:380px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:46px 36px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45)}
#gate .gate-logo{font-family:var(--serif);font-size:48px;font-weight:600;letter-spacing:1px;color:#fff;line-height:1}
#gate .gate-sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#9cc2ec;margin-top:10px;font-weight:600}
#gate .gate-hint{font-size:12.5px;color:rgba(255,255,255,.6);margin:26px 0 18px;line-height:1.5}
#gate input{width:100%;box-sizing:border-box;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font-size:15px;font-family:var(--sans);outline:none;text-align:center;letter-spacing:.4px}
#gate input::placeholder{color:rgba(255,255,255,.45)}
#gate input:focus{border-color:#3D78C0;background:rgba(255,255,255,.11)}
#gate button{width:100%;margin-top:14px;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,#3D78C0,#2b5e9e);color:#fff;font-size:15px;font-weight:600;font-family:var(--sans);letter-spacing:.4px;cursor:pointer;transition:filter .2s,transform .08s}
#gate button:hover{filter:brightness(1.08)}
#gate button:active{transform:translateY(1px)}
#gate .gate-err{min-height:18px;margin-top:14px;font-size:12.5px;color:#ff9b9b;font-weight:500}
#lockbtn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--stone-lt);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s,background .2s;padding:0}
#lockbtn:hover{opacity:1;background:rgba(255,255,255,.12)}

/* ===== Editorial matching guide (split layout, cutsheet preview) ===== */
#cab-wrap{max-width:none;margin:0 0 56px;display:block}
.mg-overview{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid #e2d8c6;padding:4px 2px 16px;margin-bottom:22px}
.mg-overview strong{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:25px;color:#28241f;letter-spacing:.01em}
.mg-overview span{font-size:11px;color:#a2937d;letter-spacing:.14em;text-transform:uppercase}
.mg-ovright{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mg-colswitch{display:inline-flex;gap:2px;padding:3px;border-radius:8px;background:#f1ece2;border:1px solid #e2d8c6}
.mg-colbtn{border:none;background:transparent;padding:5px 12px;font-size:11px;font-weight:700;color:#8a7c65;border-radius:6px;cursor:pointer;transition:background .2s,color .2s}
.mg-colbtn:hover{color:#28241f}
.mg-colbtn.on{background:#28241f;color:#fff}
.mg-grid{display:grid;grid-template-columns:1fr;gap:22px}
.mg-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mg-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1500px){.mg-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.mg-grid.cols-2,.mg-grid.cols-3{grid-template-columns:1fr}}
.mg-grid.cols-2 .mg-card,.mg-grid.cols-3 .mg-card{grid-template-columns:1fr}
.mg-grid.cols-2 .mg-hero,.mg-grid.cols-3 .mg-hero{border-right:none;border-bottom:1px solid #efe7d9;min-height:0}
.wsp-section{margin-bottom:8px}
.wsp-overview{margin-bottom:16px}
.wsp-section .agrid{margin-bottom:44px;grid-template-columns:repeat(7,1fr);gap:10px}
.wsp-item{cursor:zoom-in}
.wsp-section .ac-img{aspect-ratio:1/1}
.wsp-section .ac-img img{padding:8px}
.wsp-section .ac-foot{padding:8px 10px;gap:6px}
.wsp-section .ac-code{font-size:12px}
.wsp-section .ac-sub{font-size:9px;margin-top:1px}
.wsp-section .ac-arr{width:20px;height:20px;font-size:10px}
@media(max-width:1400px){.wsp-section .agrid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1040px){.wsp-section .agrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.wsp-section .agrid{grid-template-columns:repeat(2,1fr)}}
.mg-card{background:#fffefb;border:1px solid #e8e0d3;border-radius:2px;overflow:hidden;display:grid;grid-template-columns:minmax(340px,460px) minmax(0,1fr)}
.mg-hero{position:relative;background:linear-gradient(180deg,#fff,#f5efe6);display:flex;align-items:center;justify-content:center;padding:22px;cursor:zoom-in;border-right:1px solid #efe7d9;min-height:400px}
.mg-heroimg{max-width:100%;max-height:540px;width:auto;height:auto;display:block;background:#fff;box-shadow:0 2px 10px rgba(60,45,20,.12);transition:opacity .12s}
.mg-heroload{display:flex;align-items:center;justify-content:center;min-height:360px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#b3a48c;text-align:center;padding:30px}
.mg-stag{position:absolute;top:14px;left:16px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a5a34;background:rgba(255,255,255,.86);border:1px solid #e8e0d3;border-radius:3px;padding:3px 8px}
.mg-herocap{position:absolute;left:16px;bottom:14px;font-size:11px;font-weight:700;color:#28241f;background:rgba(255,255,255,.88);border:1px solid #e8e0d3;border-radius:3px;padding:3px 9px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-content{padding:24px 28px 26px;min-width:0}
.mg-kicker{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#a2937d;margin-bottom:8px}
.mg-model{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:29px;line-height:1.05;color:#28241f;margin:0}
.mg-rule{height:1px;background:#e8e0d3;margin:15px 0 17px}
.mg-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a2937d;margin:0 0 10px}
.mg-tip{font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.72}
.mg-fins{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.mg-fin{position:relative;width:56px;height:56px;background:linear-gradient(180deg,#fff,#f5f3ef);border:1px solid #e8e0d3;border-radius:2px;overflow:hidden;cursor:pointer;padding:0;transition:border-color .12s,box-shadow .12s,transform .12s}
.mg-fin:hover{transform:translateY(-1px)}
.mg-fin.active{border-color:#8a5a34;box-shadow:0 0 0 2px #8a5a34}
.mg-fin img{width:100%;height:100%;object-fit:contain;padding:4px}
.mg-fin .mg-ph{display:block;width:100%;height:100%}
.mg-flab{position:absolute;bottom:2px;right:3px;font-size:9px;font-weight:800;color:#7a7266;background:rgba(255,255,255,.8);border-radius:2px;padding:0 3px}
.mg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.mg-card .cab-option{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#28241f;background:#f6f0e6;border:1px solid #e8e0d3;border-radius:999px;padding:5px 12px 5px 8px}
.mg-card .cab-option .cab-swatch{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none;display:inline-block}
.mg-basins{display:flex;flex-direction:column;max-width:640px}
.mg-brow{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:center;padding:9px 0;border-bottom:1px solid #efe7d9}
.mg-bthumb{width:48px;height:48px;border-radius:2px;border:1px solid #e8e0d3;background:#fafbfc;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;padding:0;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.mg-bthumb:hover{border-color:#8a5a34}
.mg-bthumb.active{border-color:#8a5a34;box-shadow:0 0 0 2px #8a5a34}
.mg-bthumb.mg-nobtn{cursor:default}
.mg-bthumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.mg-bph{width:20px;height:20px;border:1.5px dashed #cdc4b4;border-radius:4px}
.mg-bmeta{display:flex;flex-direction:column;min-width:0}
.mg-bcode{font-size:13px;font-weight:800;color:#28241f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-bspec{font-size:11.5px;color:#877c6c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-bprice{display:block;font-size:11px;color:#877c6c;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-bprice b{color:#28241f;font-weight:800}
.mg-bmore{font-size:11.5px;font-style:italic;color:#9a8f7f;padding-top:9px;cursor:pointer;-webkit-tap-highlight-color:rgba(61,120,192,.2)}
.mg-bmore:hover{text-decoration:underline;color:#28241f}
.mg-bhid{display:none}
#mg-lb{position:fixed;inset:0;background:rgba(20,16,10,.85);display:none;align-items:center;justify-content:center;z-index:9999;padding:32px;cursor:zoom-out}
#mg-lb.show{display:flex}
.mg-lbin{background:#fff;border-radius:6px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mg-lbin img{max-width:82vw;max-height:78vh;object-fit:contain}
#mg-lbcap{font-size:14px;font-weight:800;color:#28241f;letter-spacing:.03em}
#mg-lbx{position:fixed;top:22px;right:26px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:20px;cursor:pointer}
@media(max-width:760px){.mg-card{grid-template-columns:1fr}.mg-hero{border-right:none;border-bottom:1px solid #efe7d9;min-height:0}}



/* Premium preview upgrades */
.rigel-wordmark{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.14em;color:#0A2540;text-transform:uppercase}
.rigel-wordmark::before{content:'';width:8px;height:22px;border-radius:8px;background:#0A2540;box-shadow:13px -6px 0 -3px #3D78C0}
#mhdr-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
#rigel-ref{height:34px;display:flex;align-items:center;gap:9px;border:1px solid rgba(10,37,64,.12);background:#fff;border-radius:8px;padding:0 12px;box-shadow:var(--sh1)}
#rigel-ref img{height:18px;width:auto;display:block}
#rigel-ref span{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
#sb-brand{align-items:flex-start}
.sb-brand-copy{min-width:0}
.sb-rigel{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:9px;font-weight:800;letter-spacing:.2em;color:#8fc4ff;text-transform:uppercase}
.sb-rigel::before{content:'';width:5px;height:14px;border-radius:5px;background:#8fc4ff;box-shadow:8px -4px 0 -2px #fff}

#gate{background:radial-gradient(circle at 30% 25%,rgba(61,120,192,.28),transparent 30%),linear-gradient(135deg,#031525 0%,#062b4b 46%,#0A2540 100%);padding:32px}
#gate::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 70%);pointer-events:none}
#gate .gate-shell{position:relative;z-index:1;width:min(980px,100%);display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:34px;align-items:center}
#gate .gate-panel{color:#fff;padding:10px 0}
#gate .gate-brandline{display:flex;align-items:center;gap:14px;margin-bottom:34px}
#gate .gate-rigel-mark{width:48px;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
#gate .gate-rigel-mark img{width:32px;height:auto;display:block}
#gate .gate-eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#8fc4ff}
#gate .gate-title{font-family:var(--serif);font-size:56px;font-weight:700;letter-spacing:-1px;line-height:.95;margin:0 0 14px;color:#fff}
#gate .gate-copy{font-size:14px;line-height:1.65;color:rgba(255,255,255,.72);max-width:430px}
#gate .gate-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:34px;max-width:520px}
#gate .gate-metric{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:12px;padding:14px 14px 13px}
#gate .gate-metric strong{display:block;font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;line-height:1}
#gate .gate-metric span{display:block;margin-top:7px;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8fc4ff;line-height:1.35}
#gate .gate-box{max-width:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:22px;padding:34px;box-shadow:0 28px 80px rgba(0,0,0,.34);backdrop-filter:var(--glass);text-align:left}
#gate .gate-logo{font-family:var(--serif);font-size:44px;font-weight:700;letter-spacing:-.4px;color:#fff;line-height:1;text-align:left}
#gate .gate-sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8fc4ff;margin-top:10px;font-weight:800;text-align:left}
#gate .gate-hint{font-size:13px;color:rgba(255,255,255,.72);margin:30px 0 12px;line-height:1.55}
#gate .gate-field{position:relative}
#gate .gate-field::before{content:'Password';position:absolute;left:15px;top:-8px;background:#123b63;color:#b9d8ff;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:0 6px;border-radius:5px}
#gate input{width:100%;box-sizing:border-box;padding:16px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:15px;text-align:left;outline:none;transition:all .18s}
#gate input::placeholder{color:rgba(255,255,255,.46)}
#gate input:focus{border-color:#8fc4ff;background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(61,120,192,.18)}
#gate button{width:100%;margin-top:16px;padding:15px;border:none;border-radius:12px;background:#fff;color:#0A2540;font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:transform .16s,filter .16s,box-shadow .16s;box-shadow:0 10px 30px rgba(0,0,0,.20)}
#gate button:hover{filter:brightness(1.03);transform:translateY(-1px)}
#gate button:active{transform:translateY(0)}
#gate .gate-err{min-height:18px;margin-top:14px;font-size:12.5px;color:#ffb5b5;font-weight:600}
#gate .gate-secure{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:rgba(255,255,255,.62);line-height:1.45}
#gate .gate-secure span{width:8px;height:8px;border-radius:50%;background:#64d17a;box-shadow:0 0 0 4px rgba(100,209,122,.12);flex-shrink:0}
@media(max-width:860px){#gate{padding:22px}#gate .gate-shell{grid-template-columns:1fr}#gate .gate-panel{display:none}#gate .gate-box{padding:28px}#gate .gate-logo{text-align:center}#gate .gate-sub{text-align:center}}

.gi{border:1px solid var(--line);box-shadow:var(--sh1);background:#0A2540}
.gi video{width:100%;height:100%;object-fit:cover;display:block}
.gi-type{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.32);background:rgba(6,33,56,.72);color:#fff;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px)}
.gi-type.play::before{content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff}
.gi video+.gi-ov,.gi.is-video .gi-ov{opacity:.92;background:linear-gradient(to top,rgba(3,21,37,.88),rgba(3,21,37,.08) 62%,rgba(3,21,37,.16))}
.gi.is-video::after{content:'';position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(0,0,0,.25)}
.gi.is-video::before{content:'';position:absolute;left:calc(50% - 5px);top:calc(50% - 11px);z-index:2;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:17px solid #0A2540}
.video-frame{width:100%;aspect-ratio:16/9;background:#061827;border-radius:var(--r12);overflow:hidden;display:flex;align-items:center;justify-content:center}
.video-frame video{width:100%;height:100%;object-fit:contain;background:#061827}
.video-empty{border:1px dashed rgba(61,120,192,.38);background:rgba(61,120,192,.06);color:var(--stone);font-size:13px;line-height:1.55;border-radius:var(--r12);padding:34px;text-align:center}

.fit-wrap{max-width:1180px}
.fit-premium-hero{position:relative;overflow:hidden;border:1px solid rgba(10,37,64,.12);background:linear-gradient(135deg,#fff 0%,#f5f8fc 58%,#eaf2fb 100%);border-radius:20px;padding:24px 26px;margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;box-shadow:var(--sh1)}
.fit-premium-hero::after{content:'';position:absolute;right:28px;top:18px;width:120px;height:120px;border:1px solid rgba(61,120,192,.16);border-radius:50%;box-shadow:0 0 0 34px rgba(61,120,192,.05)}
.fit-premium-hero>*{position:relative;z-index:1}
.fit-kicker{font-size:9px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:9px}
.fit-premium-hero h2{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:-.7px;color:var(--ink);line-height:1}
.fit-premium-hero p{font-size:12px;color:var(--stone);line-height:1.6;margin-top:9px;max-width:590px}
.fit-active{min-width:230px;border:1px solid rgba(10,37,64,.10);background:#fff;border-radius:14px;padding:14px 16px;text-align:right}
.fit-active span{display:block;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
.fit-active strong{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);letter-spacing:-.3px}
.fit-card{border-radius:18px;padding:24px;box-shadow:var(--sh1)}
.fit-card.fit-card-dark{background:#061f36;color:#fff;border-color:#123b63;box-shadow:0 22px 50px rgba(10,37,64,.20)}
.fit-card-dark .fit-sect,.fit-card-dark .fcx-refname,.fit-card-dark .fcx-reffoot{color:#b9d8ff}
.fit-card-dark .fcx-refhead,.fit-card-dark .fcx-dllbl,.fit-card-dark .fcx-dlval{color:#fff}
.fit-card-dark .fcx-dlrow{border-color:rgba(255,255,255,.12)}
.fit-input,.fit-shape{height:40px;background:#fff;border-color:rgba(10,37,64,.14)}
.fit-btn{background:linear-gradient(135deg,#0A2540,#164f84);border-radius:12px;box-shadow:0 12px 30px rgba(10,37,64,.18)}
.fit-btn:hover{opacity:1;filter:brightness(1.05)}
.fit-pill{font-family:var(--sans);font-size:12px;border-radius:999px;background:#fff}
.fit-pill.on{background:#0A2540;color:#fff;box-shadow:0 8px 24px rgba(10,37,64,.18)}
.fit-verdict{border-radius:14px}
#fitwrap .fcx-score{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;border:1px solid rgba(10,37,64,.10);background:#fff;border-radius:16px;padding:14px;margin-bottom:12px}
#fitwrap .fcx-score-ring{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:700;background:conic-gradient(#228b45 var(--score),rgba(10,37,64,.08) 0);color:var(--ink);position:relative}
#fitwrap .fcx-score-ring::after{content:'';position:absolute;inset:8px;border-radius:50%;background:#fff}
#fitwrap .fcx-score-ring span{position:relative;z-index:1}
#fitwrap .fcx-score-copy strong{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:-.3px}
#fitwrap .fcx-score-copy em{display:block;font-style:normal;margin-top:4px;font-size:12px;color:var(--stone);line-height:1.45}
@media(max-width:760px){.fit-premium-hero{align-items:flex-start;flex-direction:column}.fit-active{text-align:left;width:100%}}



/* Readability and pricing console upgrades */
#fitwrap .fit-card-dark .fcx-refhead,
#fitwrap .fit-card-dark .fcx-dllbl,
#fitwrap .fit-card-dark .fcx-dlval{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.18)}
#fitwrap .fit-card-dark .fcx-refname,
#fitwrap .fit-card-dark .fcx-reffoot{color:#c7ddf8!important}
#fitwrap .fit-card-dark .fcx-dlrow{border-color:rgba(255,255,255,.16)!important}
#fitwrap .fit-card-dark .fcx-bdg{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)}
#fitwrap .fit-card-dark .fcx-A{box-shadow:inset 4px 0 0 #f05d50}
#fitwrap .fit-card-dark .fcx-B{box-shadow:inset 4px 0 0 #f0c444}
#fitwrap .fit-card-dark .fcx-C{box-shadow:inset 4px 0 0 #65a4f1}
#fitwrap .fit-card-dark .fcx-D{box-shadow:inset 4px 0 0 #ef8a4d}

#fbar{align-items:flex-end;padding:12px 26px;gap:14px}
#fdds{flex-wrap:nowrap!important}
#fcnt{margin-left:0;align-self:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;color:var(--ink-soft)}
@media(max-width:1280px){#fdds{flex-wrap:wrap!important}}

#price-insight{display:grid;grid-template-columns:minmax(260px,1.45fr) repeat(3,minmax(160px,1fr));gap:12px;margin:0 0 18px}
.pi-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:var(--sh1);min-width:0}
.pi-main{background:linear-gradient(135deg,#061f36,#123b63);border-color:#123b63;color:#fff}
.pi-k{font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:var(--stone);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-main .pi-k{color:#9bc8ff}
.pi-v{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-.45px;color:var(--ink);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-main .pi-v{color:#fff}
.pi-sub{font-size:11px;color:var(--stone);line-height:1.45;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-main .pi-sub{color:rgba(255,255,255,.68)}
.pc-save{position:absolute;right:12px;top:12px;z-index:2;background:#061f36;color:#fff;border:1px solid rgba(255,255,255,.58);border-radius:999px;padding:6px 9px;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 24px rgba(10,37,64,.18)}
.pc-deal{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);background:linear-gradient(135deg,#f7fbff,#fff);padding:12px 16px}
.pc-deal b{display:block;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dk);line-height:1.2}
.pc-deal small{display:block;font-size:10px;color:var(--stone);margin-top:3px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-deal strong{font-family:var(--serif);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.4px;white-space:nowrap}
.pcard:hover .pc-save{background:#0A2540}
@media(max-width:900px){#price-insight{grid-template-columns:1fr 1fr}#fdds{width:100%}}
@media(max-width:620px){#price-insight{grid-template-columns:1fr}.pc-deal{align-items:flex-start;flex-direction:column}.pc-deal strong{font-size:22px}}



/* Distributor price-check mode: direct pricing, no retail savings language */
#price-insight,
.pc-save,
.pc-deal{display:none!important}
#pgrid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px}
/* position:relative is load-bearing here, not decoration. The backdrop-filter
   this card no longer has was the only thing making it the containing block
   for its own ::before hairline and for .pc-save - .pcard is otherwise
   position:static. Naming the position keeps both where they were.
   Rest is --sh1 and hover is --sh2, which differ in shape and not just in
   opacity, so the card now reads as lifting without moving a pixel. */
.pcard{position:relative;border-radius:var(--r12);border-color:rgba(10,37,64,.11);box-shadow:var(--sh1)}
.pcard:hover{transform:none;box-shadow:var(--sh2);border-color:rgba(10,37,64,.18)}
.pc-img{aspect-ratio:4/3;max-height:210px;background:#fff;border-bottom:1px solid var(--line)}
.pc-img img{padding:16px}
.pc-info{padding:13px 16px 11px}
.pc-eyebrow{font-size:8.5px;color:var(--brass-dk);letter-spacing:.18em;margin-bottom:7px}
.pc-code{font-family:var(--sans);font-size:19px;font-weight:850;letter-spacing:.01em;color:#061f36}
.pc-avail{font-size:9px;font-weight:700;color:var(--brass-dk);text-transform:uppercase;letter-spacing:.14em;margin-top:7px;margin-bottom:3px}
.pc-codelist{font-size:12px;font-weight:500;letter-spacing:0;line-height:1.5;color:var(--stone)}
.pc-sub{font-size:11px;color:var(--stone);margin-top:5px}
.pc-prices{margin-top:0;background:#fff}
.ppc{padding:12px 8px}
.ppc-l{font-size:8px;color:#68798d}
.ppc-v{font-family:var(--sans);font-size:13px;font-weight:750;color:#061f36}
.ppc.d{background:#eef6ff}
.ppc.d .ppc-l{color:#003764}
.ppc.d .ppc-v{font-family:var(--sans);font-size:16px;font-weight:900;color:#003764}
.pc-ftbl th{font-size:8px;color:#52657a;background:#eef3f8}
.pc-ftbl td{font-size:12px;color:#061f36}
.pc-ftbl td:not(:first-child){font-variant-numeric:tabular-nums}
.pc-ftbl .dc{font-family:var(--sans);font-size:13px;font-weight:900;color:#003764;background:#eef6ff}
.fsw{width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-2px}
.stk{font-size:8px!important}
.pc-acts{background:#fff}
.pc-act{padding:10px 8px;font-size:10.5px;color:#52657a}
#fcnt{font-weight:800;color:#061f36}
@media(max-width:760px){#pgrid{grid-template-columns:1fr}.pc-img{max-height:180px}}



/* Liquid glass polish + stock workbench */
html,body{background:linear-gradient(135deg,#f7fbff 0%,#eef4fa 45%,#f9fbfd 100%)}
#scroll{background:linear-gradient(135deg,rgba(247,251,255,.96),rgba(238,244,250,.92))}
#sb{background:linear-gradient(180deg,rgba(6,33,56,.94),rgba(5,27,47,.90));backdrop-filter:var(--glass);border-right:1px solid rgba(255,255,255,.10);box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
#sb-top{padding-bottom:18px}
#sb-mark{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.18)}
#sb-mark img{width:23px!important}
.sb-rigel{display:inline-flex;align-items:center;margin-top:9px;padding:6px 10px;border:1px solid rgba(143,196,255,.26);border-radius:999px;background:rgba(143,196,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);letter-spacing:.16em}
.sb-rigel::before{content:'';width:7px;height:7px;border-radius:50%;background:#8fc4ff;box-shadow:none;margin-right:2px}
#sb-company-name{margin-top:8px;font-size:11px;font-weight:700;color:#fff;line-height:1.35;max-width:170px}
.ni{border:1px solid transparent}
/* The sidebar behind this is 94% opaque - the blur showed nothing and cost a
   composited layer on every hover. */
.ni:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
.ni.on{background:rgba(255,255,255,.13);border-color:rgba(143,196,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.14)}
#mhdr,#fbar{background:rgba(250,251,253,.72);backdrop-filter:var(--glass)}
#mhdr{box-shadow:0 1px 0 rgba(255,255,255,.7)}
#fbar{box-shadow:0 10px 30px rgba(10,37,64,.05)}
/* Glass is the chrome - the bars, the fields, the panels the page is framed
   in. A product card is not chrome: it holds a photograph and a price, so it
   is paper. Frosting it tinted 242 white cards grey-blue against the page
   gradient and asked the compositor for 242 backdrop-filtered layers. */
#rigel-ref,#mhdr-badge,#mhdr-company-name,#fcnt,#sinput,.fd,.fit-card,.pi-card,.os-panel{background:rgba(255,255,255,.72);backdrop-filter:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),var(--sh1)}
#mhdr-company-name{height:34px;display:flex;align-items:center;border:1px solid rgba(10,37,64,.12);border-radius:8px;padding:0 12px;font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;flex-shrink:0}
#pgrid{align-items:start}
.pcard{align-self:start;overflow:hidden}
.pcard::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);pointer-events:none}
.pc-img{max-height:190px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,248,252,.86))}
.pc-act:hover{background:#061f36;color:#fff}
.pc-acts{border-top:1px solid rgba(10,37,64,.08)}

#outstock-wrap{display:flex;flex-direction:column;gap:14px}
.os-panel{border:1px solid rgba(10,37,64,.10);border-radius:14px;overflow:hidden}
.os-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(10,37,64,.08)}
.os-toolbar strong{font-family:var(--serif);font-size:20px;color:#061f36;letter-spacing:-.35px}
.os-toolbar span{font-size:11px;color:var(--stone);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.os-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.62)}
.os-table th{padding:10px 12px;background:rgba(238,243,248,.82);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#52657a;text-align:left;white-space:nowrap}
.os-table th:not(:first-child),.os-table td:not(:first-child){text-align:right}
.os-table td{padding:11px 12px;border-top:1px solid rgba(10,37,64,.07);font-size:12px;color:#061f36;vertical-align:middle}
.os-code{font-weight:900;letter-spacing:.01em}
.os-meta{display:block;margin-top:2px;font-size:10.5px;color:var(--stone);font-weight:500}
.os-finish{display:inline-flex;align-items:center;gap:7px;font-weight:750}
.os-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.os-status{display:inline-flex;align-items:center;justify-content:center;min-width:76px;border-radius:999px;padding:5px 8px;background:rgba(192,40,40,.10);color:#a52727;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.os-actions{display:flex;justify-content:flex-end;gap:6px}
.os-btn{border:1px solid rgba(10,37,64,.12);background:#fff;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800;color:#52657a;cursor:pointer}
.os-btn:hover{background:#061f36;color:#fff}
.os-empty{padding:42px 20px;text-align:center;color:var(--stone);font-size:13px;line-height:1.5}
@media(max-width:860px){.os-table{min-width:780px}.os-panel{overflow-x:auto}.os-toolbar{align-items:flex-start;flex-direction:column}}



/* Compact distributor toolbar + inline out-of-stock filter */
#fbar{display:grid;grid-template-columns:minmax(280px,420px) auto auto auto 1fr;align-items:center;gap:10px;padding:10px 24px}
#fsr{min-width:260px}
.sclr{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:var(--porcelain2);color:var(--stone);width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sclr:hover{background:var(--line);color:var(--ink)}
#fdds{display:grid!important;grid-template-columns:repeat(2,minmax(148px,190px));gap:8px!important;align-items:center!important}
.fw{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;min-width:0}
.fl{font-size:8px;letter-spacing:.12em;white-space:nowrap}
.fd{width:100%;min-width:0;padding:8px 24px 8px 9px}
#fcnt{min-width:132px;width:max-content;border-radius:12px;padding:7px 10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;line-height:1.1}
.fc-num{font-size:11px;font-weight:900;color:#061f36;white-space:nowrap}
.fout-row{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:center}
.fout{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:#52657a;white-space:nowrap;cursor:pointer}
.fout input{width:13px;height:13px;accent-color:#003764;margin:0}
#pgrid{align-items:start;grid-auto-rows:auto}
.pcard{align-self:start;min-height:0}
@media(max-width:1180px){#fbar{grid-template-columns:1fr}#fdds{grid-template-columns:repeat(2,minmax(0,1fr))}#fcnt{width:max-content}}
/* The toolbar was taking 251px of an 844px phone screen before a single
   product appeared. The two dropdowns share a row, the role pills and the two
   hide switches share another, and the padding comes in. */
@media(max-width:720px){
  /* The page header was 26px serif plus 20px of padding above and 18 below,
     with the Rigel plate and the Confidential pill beside it - 80px of the
     screen restating what the sidebar already says. */
  #mhdr{padding:11px 14px;gap:10px}
  #mh1{font-size:19px;letter-spacing:-.4px}
  #mh2{font-size:10.5px;margin-top:2px}
  #rigel-ref{height:28px;padding:0 9px;gap:6px}
  #rigel-ref img{height:14px}
  #rigel-ref span{font-size:8px;letter-spacing:.14em}
  #mhdr-badge{font-size:8px;padding:3px 8px;letter-spacing:.12em}
  #fdds{grid-template-columns:1fr 1fr;gap:6px!important}

  /* The document grids dropped to a single column below 680px, so a phone
     showed ONE cut sheet at a time - a 470px card for a thumbnail you are only
     scanning to find the right sheet. Two up, with a footer that does not need
     14px of padding to hold one line of code. */
  #cutgrid,#welsgrid,#manualgrid,.agrid{grid-template-columns:1fr 1fr!important;gap:10px}
  .ac-foot{padding:9px 10px;gap:6px}
  .ac-code{font-size:12.5px;letter-spacing:-.1px}
  .ac-sub{font-size:9.5px;margin-top:1px}
  .ac-arr{width:22px;height:22px;font-size:11px}
  .ac-img img{padding:7px}

  /* View as and Hide were a row each. Their labels say nothing the pills do not
     - Sales, Distributor, Qty, BOM are their own labels - so the labels go and
     the two groups share one row. */
  #admin-swap .asw-label,#privacy-toggles .asw-label{display:none}
  #admin-swap,#privacy-toggles{gap:0}
  .asw-btn{padding:6px 9px;font-size:11px}
  .asw-track{padding:3px;gap:1px}
  .pv-sw{padding:5px 6px 5px 9px;gap:6px}
  .pv-sw-track{width:26px;height:15px}
  .pv-sw-knob{width:11px;height:11px}
  .pv-sw.on .pv-sw-knob{transform:translateX(11px)}
  /* #fbar is a one-column grid below 1180px, so every control was a full-width
     row of its own - which is why View as and Hide could not share one however
     small their pills got. Flex on a phone: search, dropdowns and the count
     still take a row each, the two switch groups sit together on the last. */
  #fbar{display:flex!important;flex-wrap:wrap;align-items:center;padding:8px 12px;gap:7px}
  #fsr,#fdds,#fcnt{flex:1 1 100%;width:auto!important}
  #admin-swap,#privacy-toggles{flex:0 1 auto;width:auto}
  #fsr{min-height:0}
  #sinput{padding-top:7px;padding-bottom:7px}
  .fw{grid-template-columns:1fr;gap:2px}
  .fl{font-size:7.5px;letter-spacing:.1em}
  .fd,.fdd-btn{padding:7px 22px 7px 8px;font-size:12px}
  #fcnt{width:100%}
  #fbar{padding:9px 12px;gap:8px}
  #fsr input{font-size:13px}
  .asw{gap:8px}
  .asw-label{font-size:8.5px;letter-spacing:.1em}
  .asw-btn{padding:6px 11px;font-size:11.5px}
  .pv-sw{padding:5px 7px 5px 11px;gap:8px}
  .pv-sw-lbl{font-size:11.5px}
}

/* Admin "view as" role-swap toolbar — animated sliding thumb, docked in the header */
.asw{align-items:center;gap:11px}
.asw-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c8ba0;white-space:nowrap}
.asw-track{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:9px;background:rgba(10,37,64,.05)}
/* The two screenshot toggles. Same pill-in-a-track treatment as View as, so
   they read as part of the toolbar rather than two loose grey buttons in
   hand-picked colours. Independent switches, so each fills on its own
   instead of sharing a sliding thumb. */
/* Qty and BOM are independent on/off switches, but shared a track with the
   "View as" styling, which reads as pick-one. Same palette, switch form: the
   knob says which state you are in without having to compare the two. */
.pv-sw{display:inline-flex;align-items:center;gap:10px;padding:6px 9px 6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);cursor:pointer;font-family:inherit;transition:background .25s,border-color .25s,box-shadow .25s}
.pv-sw:hover{border-color:rgba(10,37,64,.22)}
/* Gain City's own download. Quiet until wanted, like the other header
   controls, and only drawn for the accounts the list belongs to. */
.gcdl{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.01em;padding:7px 13px;margin-left:8px;vertical-align:middle;cursor:pointer;
  border-radius:999px;border:1px solid var(--line);background:var(--white);color:#52657a;
  transition:background .16s,color .16s,border-color .16s}
.gcdl::before{content:'';width:9px;height:9px;flex:none;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(-45deg)}
.gcdl:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.gcdl[disabled]{opacity:.6;cursor:progress}
.pv-sw-lbl{font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#52657a;transition:color .25s}
.pv-sw-track{position:relative;width:30px;height:17px;border-radius:999px;background:rgba(10,37,64,.13);transition:background .25s}
.pv-sw-knob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(10,37,64,.32);transition:transform .3s cubic-bezier(.22,.85,.32,1)}
.pv-sw.on{background:linear-gradient(135deg,#0d3f68,#0A2540);border-color:transparent;box-shadow:0 4px 14px rgba(10,37,64,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.pv-sw.on .pv-sw-lbl{color:#fff}
.pv-sw.on .pv-sw-track{background:rgba(255,255,255,.3)}
.pv-sw.on .pv-sw-knob{transform:translateX(13px)}
.asw-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:6px;background:linear-gradient(135deg,#0d3f68,#0A2540);box-shadow:0 4px 14px rgba(10,37,64,.32),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .35s cubic-bezier(.22,.85,.32,1),width .35s cubic-bezier(.22,.85,.32,1)}
.asw-btn{position:relative;z-index:1;border:none;background:transparent;padding:8px 18px;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#52657a;border-radius:6px;cursor:pointer;transition:color .3s;white-space:nowrap}
.asw-btn:hover{color:#0A2540}
.asw-btn.on{color:#fff}
@media(max-width:1100px){#mhdr{flex-wrap:wrap;row-gap:12px}.asw-label{display:none}.asw-btn{padding:7px 13px;font-size:11.5px}}

/* Gain City cards carry more price columns (T-code + 4 price fields) — give them
   double width so the table never needs horizontal scroll. */
/* The Gain City table wants about 477px for its six columns. Spanning two grid columns handed it 1200 and spread those six across it, which is what read as "too wide" - the card was double-width to hold a table half its size. The grid is sized to the table instead. */
#pgrid.pg-gcfull{grid-template-columns:repeat(auto-fill,minmax(385px,1fr))}
.pg-gcfull .pc-ftbl th,.pg-gcfull .pc-ftbl td{padding-left:4px;padding-right:4px}
#pgrid.pg-gc{grid-template-columns:repeat(auto-fill,minmax(370px,1fr))}
@media(min-width:1900px){#pgrid.pg-gcfull,#pgrid.pg-gc{grid-template-columns:repeat(4,1fr)}}
.pg-gcfull .pc-ftbl th,.pg-gc .pc-ftbl th{white-space:normal;line-height:1.25}
.pg-gcfull .pc-ftbl td,.pg-gc .pc-ftbl td{white-space:nowrap}
.pg-gcfull .pc-ftbl td:first-child,.pg-gc .pc-ftbl td:first-child{white-space:normal}
.pg-gcfull .pc-ftbl td:nth-child(2),.pg-gc .pc-ftbl td:nth-child(2){white-space:normal}
.pg-gcfull .pc-ftbl td:first-child .stk,.pg-gc .pc-ftbl td:first-child .stk{display:block;width:-moz-fit-content;width:fit-content;margin:3px 0 0 19px}
.pc-gc .pc-img{max-height:220px}
@media(max-width:900px){#pgrid.pg-gcfull,#pgrid.pg-gc{grid-template-columns:1fr}}



/* Sidebar icon contrast fix */
.ni{gap:12px}
.ni-ico{
  width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex:none;
  color:#d8ebff;background:rgba(255,255,255,.11);
  border:1px solid rgba(185,216,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(0,0,0,.12);
  font-family:var(--sans);font-size:10px;font-weight:900;letter-spacing:.03em;
  line-height:1;filter:none;text-align:center;
}
.ni:hover .ni-ico{background:rgba(143,196,255,.18);border-color:rgba(143,196,255,.38);color:#fff}
.ni.on .ni-ico{background:#8fc4ff;border-color:#cfe7ff;color:#061f36;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px rgba(61,120,192,.26)}
.ni-lbl{color:#b9c9db;font-weight:650}
.ni-sub{color:#86a0b9;opacity:1}
.ni.on .ni-lbl{color:#fff}
.ni.on .ni-sub{color:#8fc4ff}
#sb-nlbl,#sb-nlbl2{color:#9bb1c8}



/* Text-only sidebar nav */
.ni{gap:0!important;padding-left:16px!important}
.ni-ico{display:none!important}
.ni > div{min-width:0}



/* Requested RIGEL brand assets + font sync */
#gate{
  background-color:#031525!important;
  background-image:
    linear-gradient(135deg,rgba(3,21,37,.96),rgba(5,41,72,.86) 45%,rgba(3,21,37,.97)),
    url("login-map.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-blend-mode:multiply,normal!important;
}
#gate::before{
  background:
    radial-gradient(circle at 76% 42%,rgba(0,184,195,.20),transparent 24%),
    linear-gradient(90deg,rgba(143,196,255,.10),transparent 35%,rgba(255,255,255,.04))!important;
  mask-image:none!important;
}
#gate .gate-shell{width:min(1040px,100%)}
#gate .gate-rigel-mark img,#rigel-ref img,#sb-mark img{object-fit:contain}
#gate .gate-rigel-mark img{width:34px!important;max-height:34px}
#sb-mark img{width:30px!important;max-height:32px}
#rigel-ref img{height:22px!important;max-width:58px}
#sb-mark{background:rgba(255,255,255,.08);border-radius:12px;border:1px solid rgba(255,255,255,.12)}
#mh1,.pc-code,.ac-code,.cab-model,.mg-model,.fit-premium-hero h2,.gate-logo,.gate-title,.w-hero h2,#mcode,.fcx-rec-code,.manual-box h3,.fit-ref-head,.wa-title,.wc-period{
  font-family:var(--serif)!important;
}
#mh1,.pc-code,.ac-code,.cab-model,.mg-model,.gate-title,.gate-logo,#mcode{font-weight:700}
.pc-code{font-size:20px;letter-spacing:-.25px}
.ac-code{font-size:16px;letter-spacing:-.2px}
.mg-model{font-size:27px;letter-spacing:-.35px}
.cab-model{font-size:19px;letter-spacing:-.25px}
#sb-bname,.ni-lbl{font-family:var(--serif);letter-spacing:-.2px}
.ni-lbl{font-weight:700}






/* Native browser install + refined sidebar footer */
#sb-mark{
  background:#fff!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 26px rgba(0,0,0,.22)!important;
}
#sb-mark img{
  width:30px!important;
  max-height:30px!important;
  object-fit:contain!important;
}
#sb-foot{
  margin-top:auto!important;
  padding:14px 16px 18px!important;
  border-top:1px solid rgba(143,196,255,.14)!important;
  display:block!important;
}
.sbf-panel{
  border:1px solid rgba(185,216,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(143,196,255,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 14px 30px rgba(0,0,0,.16);
  border-radius:var(--r16);
  padding:13px;
  backdrop-filter:var(--glass);
}
.sbf-head{
  display:flex;align-items:center;gap:8px;
  color:#e4f2ff;font-size:10px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;line-height:1;
}
.sbf-dot{
  width:8px;height:8px;border-radius:50%;
  background:#64d17a;box-shadow:0 0 0 4px rgba(100,209,122,.12);
  flex:none;
}
.sbf-sub{
  margin-top:8px;color:#8faccc;font-size:11px;line-height:1.4;
  letter-spacing:.02em;
}
.sbf-ver{
  margin-top:7px;color:#5c7ba0;font-size:9px;letter-spacing:.04em;
}
#logoutbtn{
  width:100%;height:36px;margin-top:12px;border-radius:11px;
  border:1px solid rgba(143,196,255,.24);
  background:rgba(255,255,255,.075);
  color:#f4f9ff;font-family:var(--sans);font-size:12px;font-weight:850;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s,border-color .16s,transform .12s,color .16s;
}
#logoutbtn:hover{background:rgba(143,196,255,.16);border-color:rgba(143,196,255,.42);color:#fff}
#logoutbtn:active{transform:translateY(1px)}


/* ── Stock as a real column ───────────────────────────────────────────── */
/* The badge used to be appended inside the Finish cell, so it sat at a
   different x on every row depending on how long the finish name was. In
   its own column every badge in a card lines up. */
.pc-ftbl th.stkh,.pc-ftbl td.stkc{text-align:left;white-space:nowrap;width:1%}
/* stk() and stkQty() carry an inline margin-left for the old inline layout.
   Kill it on the first chip in the cell, keep the gap between chips. */
.pc-ftbl td.stkc .stk{margin-left:0}
.pc-ftbl td.stkc .stk+.stk{margin-left:4px}
/* A compound code emits one wrapper per SKU, and they stack rather than
   running off the side of a 370px card. Two rules here used to do that by
   matching the wrapper on its inline style attribute,
   span[style*="white-space:nowrap"]. stkFor() now gives it a class instead,
   so see .stk-multi at the end of this sheet - which can also be reached by
   the Gain City exemption, which an attribute hack could not be. */
@media(max-width:720px){
  /* The narrow-screen rule pushes .stk onto its own line indented under the
     finish name. In a column of its own it must stay inline. */
  .pc-ftbl td.stkc .stk:first-of-type{display:inline-block;width:auto;margin:0}
  .pc-ftbl td.stkc .stk:first-of-type~.stk{margin-left:4px}
}

/* ══ Filter-bar control system ═══════════════════════════════════════════════
   Every control in #fbar shares one height, one radius, one border and one
   background. Before this the bar mixed 34/36/38/45px heights and 6/8/9/12/999
   radii, so the search box, the dropdowns, the stock filter, the View-as
   switch and the Qty/BOM toggles each looked like they came from a different
   design. Declared at the end of the stylesheet because this file is long
   enough that equal-specificity rules earlier keep losing to later ones. */
:root{
  --ctl-h:36px;          /* every control in the bar */
  --ctl-r:8px;           /* outer corner */
  --ctl-r-in:6px;        /* anything nested inside a control */
  --ctl-bd:rgba(10,37,64,.10);
  --ctl-bg:rgba(255,255,255,.72);
  --ctl-fs:12.5px;
  --ctl-fw:600;
}
/* the shared shell */
#fsr input,
#fbar .fd,
#fcnt,
.asw-track,
.pv-sw{
  height:var(--ctl-h);
  border-radius:var(--ctl-r);
  box-sizing:border-box;
}
#fsr input,
#fbar .fd,
#fcnt,
.pv-sw{
  border:1px solid var(--ctl-bd);
  background:var(--ctl-bg);
}
#fbar .fd,
#fcnt,
.pv-sw-lbl,
.fout{
  font-size:var(--ctl-fs);
  font-weight:var(--ctl-fw);
}
#fsr input{font-size:var(--ctl-fs)}

/* the eyebrow labels: CATEGORY / FINISH / VIEW AS / HIDE were 9px/600,
   8px and 10px/800. One value. */
#fbar .fl,
.asw-label{
  font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#7c8ba0;white-space:nowrap;
}

/* dropdowns: were 34px */
#fbar .fd{padding:0 26px 0 11px;line-height:calc(var(--ctl-h) - 2px)}
#fbar .fdd-btn{display:inline-flex;align-items:center;text-align:left}

/* stock filter: was a 45px two-line box on a 999px pill radius. One row, same
   shell as everything else. It still wraps below the bar's own breakpoint. */
#fcnt{
  /* an earlier rule sets flex-direction:column; overriding display alone left
     it stacked, so the count and the checkboxes overflowed the 36px box */
  display:inline-flex;flex-direction:row;align-items:center;gap:12px;
  padding:0 12px;white-space:nowrap;
}
#fcnt .fc-num{font-weight:700;color:#061f36}
#fcnt .fout-row{gap:11px}
.fout{font-size:11px;font-weight:600;color:#52657a;gap:6px}
.fout input{width:14px;height:14px}

/* View as: track was 38px on a 9px radius */
.asw-track{padding:3px;background:rgba(10,37,64,.05);border:1px solid transparent}
.asw-btn{
  height:calc(var(--ctl-h) - 8px);padding:0 15px;border-radius:var(--ctl-r-in);
  font-size:var(--ctl-fs);font-weight:var(--ctl-fw);
}
.asw-thumb{border-radius:var(--ctl-r-in)}

/* Qty / BOM: were 31px with no shell at all, so they floated next to the
   bordered controls. Same shell off, same navy fill on as the View-as thumb. */
.pv-sw{display:inline-flex;align-items:center;gap:8px;padding:0 10px}
.pv-sw-lbl{color:#52657a}
/* The toggles already carry an .on class with the navy fill; match on both so
   this sits with the existing rule rather than against it. */
.pv-sw.on,.pv-sw[aria-pressed="true"]{
  background:linear-gradient(135deg,#0d3f68,#0A2540);
  border-color:transparent;
}
.pv-sw.on .pv-sw-lbl,.pv-sw[aria-pressed="true"] .pv-sw-lbl{color:#fff}

/* keep the bar's own rhythm consistent with the control height */
/* #fbar was display:grid with five fixed columns
   (minmax(280px,420px) auto auto auto 1fr), so nothing could wrap - the
   columns simply overflowed. The stock filter on one line is ~110px wider
   than the old stacked box, which pushed the Qty/BOM toggles off the right
   edge at 1400px. A wrapping flex row holds the same order and degrades at
   any width, which is also what a vertical monitor needs. */
/* Scoped above the phone breakpoint. Unscoped, this sits after the
   max-width:720px block and its gap:12px silently replaced that block's
   8px, padding the bar out on exactly the screen with least room. */
@media(min-width:721px){
  #fbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  #fbar>#fsr{flex:1 1 280px;min-width:250px}
  #fbar>#fdds,#fbar>#fcnt,#fbar>#admin-swap,#fbar>#privacy-toggles{flex:0 0 auto}
}
#fbar #fdds{align-items:center}
#fbar .fw{display:flex;align-items:center;gap:8px}

@media(max-width:720px){
  /* Same system, one size down. Standardising on 36px made the phone's filter
     area 28px taller than before (235 -> 263), and this bar already competes
     with the products for a small screen. Because every control reads
     --ctl-h, dropping the token rescales all of them together. */
  :root{--ctl-h:32px;--ctl-fs:12px}
  #fcnt{height:auto;min-height:var(--ctl-h);flex-wrap:wrap;padding:5px 10px;row-gap:3px;white-space:normal}
  #fbar .fw{flex-direction:column;align-items:stretch;gap:4px}
  #fbar .fl,.asw-label{font-size:8.5px}
}

/* ── Stock badge: one pill, not two ──────────────────────────────────────────
   The status word and the quantity used to be separate chips, so the number
   started at a different x on every row (because "In stock", "Low stock" and
   "Out of stock" are three different widths) and could wrap onto its own line
   in a narrow card. They are one object now, split by a hairline. */
.stk-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:10px;
  font-size:9px;font-weight:600;line-height:1.5;
  white-space:nowrap;vertical-align:middle;margin-left:0;
}
.stk-pill .stk-sep{
  width:1px;height:9px;flex:none;border-radius:1px;opacity:.35;
}
.stk-pill .stk-n{
  font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
/* "In stock", "Low stock" and "Out of stock" are three different widths, so
   without a fixed label the divider - and the number after it - sat at a
   different x on every row of the same card. Sized in em off the longest
   label so it holds at the smaller phone font too. */
.stk-pill .stk-w{
  /* Measured at the 8px the price table actually uses: "In stock" 30.5px,
     "Low stock" 39.4px, "Out of stock" 47.4px, "Extremely low" 54.6px. The
     pinned width has to clear the LONGEST or a card mixing statuses staggers,
     which is the whole reason this rule exists - 5.4em was under "Out of
     stock" and staggered by ~4px, then 6.1em was under "Extremely low" when
     that tier was added and would have staggered by ~5.8px. 7em (56px) clears
     54.6px with headroom for font differences, and being in em it holds at
     every font size this pill takes. The Gain City view overrides this to 0
     because its stock column is capped at 88px. */
  display:inline-block;min-width:7em;font-weight:600;
}
/* The stock column already kills the old chips' inline margins; make sure the
   single pill keeps its flex layout at every width, including the narrow rule
   that used to push .stk onto its own line under the finish name. */
.pc-ftbl td.stkc .stk-pill{margin-left:0}
@media(max-width:720px){
  .pc-ftbl td.stkc .stk-pill,
  .pc-ftbl td.stkc .stk-pill:first-of-type{
    display:inline-flex;width:auto;margin:0;
  }
  .stk-pill{font-size:8.5px;padding:2px 7px;gap:5px}
}

/* == Card height: fill the row instead of leaving a hole ==================
   .pcard was align-self:start, so every grid row stood as tall as its
   tallest card and each shorter card left a page-coloured void beneath it -
   5,220px of it on the Gain City view, worst row two 367px cards beside a
   625px one. Cards now stretch to the row height and the action bar is
   pinned to the bottom, so the slack sits inside the card, above its own
   buttons, and every action bar in a row lines up. */
#pgrid .pcard{align-self:stretch}
#pgrid .pcard .pc-acts{margin-top:auto}

/* == Let the photo absorb a stretched card’s slack ======================
   V8.4 stopped short cards leaving a hole in the PAGE, but on a flat-price
   card - a hero price block and nothing else - the slack simply moved inside
   the card, as white between the prices and the buttons. The photo takes it
   instead: aspect-ratio 4/3 still sets the minimum, flex-grow lets it claim
   whatever the row gives it, and 320px stops it getting absurd. A card with a
   five-finish table has no free space, so its photo is untouched.
   .pc-bomcard is excluded - there the photo sits in a horizontal header at
   flex:0 0 21%, and growing it would widen the column, not fill height. */
/* Measured, because the obvious version was wrong: with flex-basis auto the
   photo keeps its aspect-ratio height (~266px at this card width) and the
   old max-height:210px had been clamping it. Raising the cap therefore grew
   EVERY photo, not just the short cards’ - the page got 23% longer
   (56,963 -> 70,053px) and the void did not shrink at all.
   Pinning flex-basis to the 210px the cards already used, with aspect-ratio
   off so flex owns the height, means a photo starts exactly where it does
   today and only grows into slack that genuinely exists. Page height
   unchanged; void down from 1,630px to 266px. */
#pgrid .pcard:not(.pc-bomcard) .pc-col>.pc-img{flex:1 1 210px;max-height:320px;aspect-ratio:auto}

/* == Price table on a phone ==============================================
   Measured at 430px in the Distributor view (5 columns), counting only
   cards actually laid out: 90 finish cells had the swatch stacked above the
   name, and 16 tables were wider than their card - worst 953px inside a
   392px card, which is the "price shows sideways and I cannot view it".
   Three separate causes, addressed in order below. */
.pc-ftbl .cur-h{display:none}          /* desktop keeps S$ in the cells */
@media(max-width:720px){
  /* 1. FINISH was being crushed to 57px, which stacked the swatch above the
        finish name and made every row 49px of ragged two-line cells. */
  .pc-ftbl td,.pc-ftbl th{padding:8px 3px}
  .pc-ftbl td:first-child{white-space:nowrap;min-width:78px}
  /* 2. A compound product lists one stock badge per SKU, inline. Five of
        them was 638px of a 953px table. Stack and cap them, and ellipsise
        the SKU label rather than let it set the column width. */
  .pc-ftbl td.stkc{width:92px;max-width:92px}
  .pc-ftbl td.stkc>span{display:block;margin-left:0;margin-top:3px;
    max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Adding the "Extremely low" tier widened the pinned label from 48.8px to
     56px, which pushed the pill to 97px - past this 88px clamp - and started
     cutting the quantity off. Two ways out, both measured on the Distributor
     view at 390x844:
       widen the column to 104px  0 numbers lost, but 50 tables then need a
                                  sideways nudge inside the card, worst 22px
       unpin the label here       0 numbers lost, 9 tables, worst 10px
     So the label is unpinned on a phone instead. The cost is that the figures
     no longer line up in a column, which is the same trade the Gain City view
     already makes for the same reason - and the "Low stock | 7" separator,
     which is what the alignment was really for, is unaffected. */
  .pc-ftbl .stk-pill .stk-w{min-width:0}
  .pc-ftbl td.stkc>span:first-child{margin-top:0}
  .pc-ftbl td.stkc>span>span:first-child{font-size:7.5px}
  /* 3. "S$ 2,306.00" is 84px against "2,306.00" at 62px. The cells drop the
        currency and the column headers carry it instead. */
  .pc-ftbl .cur{display:none}
  .pc-ftbl .cur-h{display:inline}
  /* 4. "SHOWROOM (S$)" is wider than "SHOWROOM", and th was nowrap, so the
        headers themselves then set the column width - 38 cards overflowed on
        that alone. Letting them wrap to two lines drops it to 4 and costs
        0.7% page height. table-layout:fixed was tried instead and is worse:
        it clips 107 stock pills. */
  .pc-ftbl th{white-space:normal}
}

/* == Gain City table fit =================================================
   The Gain City view is the only one with seven columns - Finish, Stock,
   T-Code, RRP, Showroom, Cost W/O GST, Cost Special Event - and at 1500px
   that was a 449px table inside a 386px card: 75 of 287 overflowed, worst
   +65px. Tighter cell padding on its own changed nothing; the stock column
   was the cost, holding 96px of a 449px table. Capping it and stacking any
   compound entries takes all 75 to 0 with no cell clipped, for +3% height.
   Scoped to the two GC roles so the 4- and 5-column views are untouched. */
body.role-gaincity .pc-ftbl td,body.role-gaincity .pc-ftbl th,
body.role-gcstaff  .pc-ftbl td,body.role-gcstaff  .pc-ftbl th{
  padding-left:3px;padding-right:3px;
}
body.role-gaincity .pc-ftbl td.stkc,body.role-gaincity .pc-ftbl th.stkh,
body.role-gcstaff  .pc-ftbl td.stkc,body.role-gcstaff  .pc-ftbl th.stkh{
  /* 72px here was measured against a bare status badge. A pill carrying a
     quantity needs 82-101px, so the cell clipped: 10 cells at 1500px, 10 at
     844px, 73 at 390px - the rest of the "unable to see the stock qty"
     report. 88px is where every one of them fits, and it gives up nothing:
     at 1500px it takes clipped cells 10 -> 0 with still 0 tables needing to
     scroll, so the 7-column fit the cap exists for still holds. */
  width:88px;max-width:88px;
}
body.role-gaincity .pc-ftbl td.stkc>span,
body.role-gcstaff  .pc-ftbl td.stkc>span{
  display:block;margin-left:0;margin-top:2px;
  max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The clamp above is meant for the compound per-SKU wrappers only. The
   single status pill is also a direct span child, so it was being clipped
   too: it needs 75px, had 68px, and 165 of 175 pills lost their quantity to
   an ellipsis. Exempt it, and let it shed its fixed label width here so it
   still fits the column. The numbers can then sit ~4px apart on a card that
   mixes "In stock" with "Out of stock" - seeing the quantity beats aligning
   it, and only this view makes that trade. */
body.role-gaincity .pc-ftbl td.stkc>span.stk-pill,
body.role-gcstaff  .pc-ftbl td.stkc>span.stk-pill{
  max-width:none;overflow:visible;text-overflow:clip;
}
body.role-gaincity .pc-ftbl .stk-pill .stk-w,
body.role-gcstaff  .pc-ftbl .stk-pill .stk-w{min-width:0}
/* Capping the stock column took the table 449px -> 413px in a 386px card,
   which left 65 of 287 still over. Dropping the seven-column table to 10.5px
   cells / 7.5px headers takes it to 2, both by 6-7px, with nothing clipped.
   Capping the T-Code column instead reached 0 but truncated 115+ T-codes -
   an unreadable T-code is worse than a 6px scroll. */
body.role-gaincity .pc-ftbl td{font-size:10.5px}
body.role-gaincity .pc-ftbl th{font-size:7.5px}

/* == Landscape phone: cards were being starved to 114px ====================
   Reported as "price stacking over in one place" on a phone held sideways.

   Measured at 844x390: the sidebar takes 248px, so the grid gets 526px, and
   the winning track rule is repeat(auto-fill,minmax(400px,1fr)) - exactly ONE
   400px column fits. But 25 cards (bundles and BOM sets) ask for grid-column:
   span 2, and to satisfy a span of 2 the grid INVENTS a second column out of
   the 114px left over. Every ordinary card that landed in that phantom track
   was 114px wide with its whole price table crushed into it: 101 of 236 cards
   under 300px, 41 tables overflowing, worst by 197px.

   So a card may span two columns only where two real columns exist. That is a
   question about the GRID width, not the viewport width: two 400px tracks
   plus the 12px gap need an 812px grid. Working back through the measured
   page chrome - 248px sidebar (in flow only above 780px) + 2x32px #scroll
   padding + scrollbar - that is a 1130px viewport with the sidebar docked and
   882px without it. Both rounded up for scrollbar variance; losing a span in
   a 20px band is invisible, inventing a phantom track is not.

   NOT done two other ways, both tried and measured:
     - a max-width override. Any single width is wrong, because the same grid
       is 762px at a 1080px viewport with the sidebar docked and 1010px at the
       same viewport without it. The first V9.1 attempt used 1040px and left
       the phantom alive at 1080px: tracks 400px + 350px, 4 tables over. That
       is why this rule is min-width and why it mentions .sb-off.
     - @container, which asks the exactly right question and is supported
       here. But container-type implies contain:layout, making #pgrid the
       containing block for .pcard::before and .pc-save - .pcard is
       position:static, so both would visibly move - and it re-evaluates
       mid-animation while the sidebar transitions its width. A viewport query
       is stable and has no side effects.

   Verified: 844x390 landscape 1x526px, 0 crushed; 1080x1920 1x762px (was
   400+350); 1129 1x811; 1150 2x410; 1240 2x455; 1500 2x585 unchanged. */
#pgrid .pcard{grid-column:auto}
@media(min-width:1150px){#pgrid .pcard.pc-wide{grid-column:span 2}}
@media(min-width:900px){body.sb-off #pgrid .pcard.pc-wide{grid-column:span 2}}

/* == The compound stock cell was the widest thing on the page ==============
   A BOM set card lists a stock pill per component. They were emitted as
   inline-block + nowrap wrappers, so five components ran horizontally and the
   Stock column alone claimed 658px of an 883px table inside a 772px card,
   pushing RRP and Showroom off the card edge. Exactly the reported symptom,
   and the reason it survived every grid fix: it is intrinsic table width, not
   layout, so no amount of column arithmetic reaches it.

   The wrapper now carries a class instead of an inline style (see stkFor), so
   a stylesheet can reach it at all - that inline display:inline-block is also
   why the Gain City rule below never stacked anything, only its ellipsis ever
   applied. A per-SKU stock list is a list, so it stacks at every width. */
.pc-ftbl td.stkc>span.stk-multi{display:block;white-space:nowrap;margin-left:0}
.pc-ftbl td.stkc>span.stk-multi+span.stk-multi{margin-top:2px}
/* The SKU label is a code, so it is the one thing in this cell that may be
   abbreviated - the quantity beside it may not. FT-HOSF69L1500MM needs 101px
   and the Gain City column is 88px, which was the last 2 clipped cells on
   that view. max-width:100% rather than a fixed px so it follows the column
   at every width: on the sales view the cell is 207px and nothing is cut. */
.pc-ftbl td.stkc>span.stk-multi>span:first-child{
  display:block;margin-right:0;max-width:100%;
  /* overflow-wrap:anywhere, not just normal wrapping: several codes are one
     unbroken token - W2+W3-R-MXB721101X - and normal wrapping would leave
     those overflowing the cell rather than the ellipsis it used to get. */
  white-space:normal;overflow-wrap:anywhere;line-height:1.25;
}

/* The other half of the same report. The V8.9 exemption that stopped the
   Gain City 68px clamp from eating a stock quantity only covered a pill that
   is a DIRECT child of td.stkc. On a multi-SKU card the pill sits inside a
   per-SKU wrapper, so the wrapper took the clamp instead and the number went
   behind an ellipsis anyway - 40 of 468 pills on that view. Until stkFor()
   stopped inline-styling the wrapper there was no way to reach it.

   Exempt the wrapper and stack the SKU label above its own pill, so the pair
   is as narrow as the wider of the two and still fits the 72px column.
   Measured: 40 pills losing their number -> 0, with tables overflowing 2 ->
   2 and the worst overflow 58px -> 58px, so the column does not grow at all.
   Costs 0.8% page height. */
body.role-gaincity .pc-ftbl td.stkc>span.stk-multi,
body.role-gcstaff  .pc-ftbl td.stkc>span.stk-multi{
  max-width:none;overflow:visible;text-overflow:clip;
}
body.role-gaincity .pc-ftbl td.stkc>span.stk-multi>span:first-child,
body.role-gcstaff  .pc-ftbl td.stkc>span.stk-multi>span:first-child{
  display:block;margin-right:0;
}
/* Same stacking, but for every view on a phone. There is a global
   @media(max-width:720px) rule that clamps td.stkc>span to 88px with
   overflow:hidden, and a pill carrying a quantity is about 84px on its own -
   so with the SKU label beside it the pair needs ~148px and the number was
   the part that got cut. Not a Gain City problem: 50 of 399 pills on the
   sales view at 390x844 were losing their figure, the same complaint as
   before in the one place it had not been looked for.

   Stacking the label above its own pill takes the pair down to the width of
   the wider of the two, so it fits the 88px clamp untouched - 50 -> 0 with no
   cell clipped, no table pushed into a scroll, and 0.5% page height. */
@media(max-width:720px){
  .pc-ftbl td.stkc>span.stk-multi>span:first-child{display:block;margin-right:0}
}

/* == Gain City on a portrait phone: seven columns in a 350px card =========
   V9.2 stopped anything being clipped, but 84 of 294 Gain City cards still
   needed a sideways swipe inside the card, worst by 133px. The widest content
   in each column says a tighter table can never work:

     T-Code 138   Cost Sp. Event 94   Stock 88   Finish 78
     RRP 74       Cost w/o GST 73     Showroom 72      = 617px

   in a 350px card - T-Code alone wants 138px, because a bundle carries
   several codes. So the row stops being one line: Finish and Stock, then
   T-Code full width, then the four prices across.

   Only rows WITH a stock cell are touched. Gain City has two table shapes and
   just one of them overflows - 84 cards carry Finish+Stock+T-Code+4 prices,
   the other 210 are T-Code+prices, already fit, and keep their header. :has()
   is what lets CSS tell them apart (support checked before relying on it), and
   it is also what makes :nth-child labelling safe: inside a row that has a
   stock cell the seven positions are fixed, and GC Staff just stops after
   five.

   The labels carry S$ because this table writes its currency into the header
   text ("RRP (S$)") and has no .cur element in the cell, so hiding the header
   would leave bare numbers. They are nowrap: allowed to wrap, the longest one
   re-widened the table and put all 84 back over - which is also why it reads
   "Cost Sp. S$" and not "Cost Special Event (S$)", which overflowed its 82px
   column by 7px.

   Measured at 390x844, fresh load, transitions suppressed: Gain City 84 -> 0
   tables needing a swipe, GC Staff 11 -> 0, clipped cells 0 -> 0, pills
   losing their number 0/473 -> 0/473, page height +5.2% / +7.0%. */
@media(max-width:720px){
  /* the header describes seven columns that are no longer side by side */
  body.role-gaincity .pc-ftbl thead:has(th.stkh),
  body.role-gcstaff  .pc-ftbl thead:has(th.stkh){display:none}
  body.role-gaincity .pc-ftbl tr:has(td.stkc),
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc){
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 8px;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.07);
  }
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td{
    display:block!important;border-bottom:0!important;padding:2px 0!important;
    text-align:left!important;white-space:normal!important;
    width:auto!important;max-width:none!important;
  }
  /* Stock takes the rest of the first line, T-Code gets one of its own */
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(2),
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(2){grid-column:span 3}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(3),
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(3){grid-column:1/-1}
  /* with the header gone, every cell names itself */
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td::before{
    display:block;font-size:7.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:#8b9aab;margin-bottom:1px;line-height:1.25;
    white-space:nowrap;
  }
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(1)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(1)::before{content:"Finish"}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(2)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(2)::before{content:"Stock"}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(3)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(3)::before{content:"T-Code"}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(4)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(4)::before{content:"RRP S$"}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(5)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(5)::before{content:"Discounted S$"}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(6)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(6)::before{content:"Cost w/o GST S$"}
  body.role-gaincity .pc-ftbl tr:has(td.stkc)>td:nth-child(7)::before,
  body.role-gcstaff  .pc-ftbl tr:has(td.stkc)>td:nth-child(7)::before{content:"Cost Sp. S$"}
}

/* == One price row: flat blocks, and the T-code beside the model code =====
   A single-row Gain City card no longer draws a table (see the branch in
   rProducts), so its one T-code moves up next to the model code as a chip.
   Sized and coloured to sit beside the 19-21px code without competing with
   it, and vertical-align rather than a float so it rides the code baseline
   whether the card uses the serif or the Gain City sans skin. */
.pc-code .pc-tcode{
  display:inline-block;margin-left:9px;vertical-align:2px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.05em;
  color:#68798d;background:var(--porcelain2);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;white-space:nowrap;
}

/* Gain City sees four figures, not two, and four blocks cannot share a 352px
   card - "S$ 1,563.00" needs about 84px and would get 68px after padding. So
   they wrap two-up on a phone. The divider between blocks is drawn by
   .ppc+.ppc::before, which is wrong for the first block of the second row, and
   a top rule replaces it there. */
@media(max-width:720px){
  .pc-prices.pc-gcflat{flex-wrap:wrap}
  .pc-prices.pc-gcflat>.ppc{flex:1 1 50%;min-width:50%}
  .pc-prices.pc-gcflat>.ppc:nth-child(odd)::before{display:none}
  .pc-prices.pc-gcflat>.ppc:nth-child(n+3){border-top:1px solid var(--line)}
}

/* == The 30-minute "refresh for the latest" toast =========================
   Bottom LEFT on purpose: #mob-btn is fixed bottom-right at 20px and 50px
   across, so a toast in that corner would sit under the sidebar button. On a
   phone the button is there too, so the toast lifts above it rather than
   sharing the row. */
#rfrsh{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:120;
  max-width:340px;display:none;
  padding:14px 16px;border-radius:12px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh2);
  font-family:var(--sans);
}
#rfrsh.show{display:block}
#rfrsh .rf-t{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.01em}
#rfrsh .rf-s{font-size:11px;line-height:1.5;color:var(--stone);margin-top:4px}
#rfrsh .rf-a{display:flex;gap:8px;margin-top:11px}
#rfrsh button{
  font-family:var(--sans);font-size:11px;font-weight:700;cursor:pointer;
  padding:7px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--porcelain);color:var(--ink-soft);
}
#rfrsh .rf-go{background:#003764;border-color:#003764;color:#fff}
#rfrsh button:hover{filter:brightness(1.06)}
@media(max-width:780px){
  #rfrsh{bottom:82px;max-width:none}
}

/* == A retired FINISH, rather than a retired product ======================
   MXB1327 and MXB1327X are still sold in BrNK, so the row carries the mark
   and the card stays current. Greyed the same way .pcard.pc-disc greys a
   whole card, and the prices are deliberately left readable - the same call
   the whole-product retirement makes, because people ask about a finish long
   after it stops shipping. */
.pc-ftbl tr.pc-frow-disc td{color:var(--stone)}
.pc-ftbl tr.pc-frow-disc td.dc{color:var(--stone);background:rgba(107,123,143,.07)}
.pc-ftbl tr.pc-frow-disc .fsw{opacity:.45}
.pc-frow-chip{
  display:inline-block;margin-left:7px;padding:1px 6px;border-radius:999px;
  background:rgba(107,123,143,.16);color:var(--stone);
  font-size:7.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  vertical-align:1px;white-space:nowrap;
}
/* On a phone the Gain City row is a grid and the Finish cell is one column
   of four, so the chip goes under the finish name instead of beside it. */
@media(max-width:720px){
  .pc-ftbl tr.pc-frow-disc .pc-frow-chip{display:block;margin-left:0;margin-top:2px}
}

/* == Installation price calculator ========================================
   Built from the site tokens rather than the netlify app's own styling, so it
   reads as part of this catalogue: same porcelain panels, same hairline rules,
   same navy. The row is a 3-column grid - name, price, stepper - which keeps
   every price and every counter on a common vertical line down the list
   instead of each row finding its own width. */
.ic-head{margin:2px 0 22px}
.ic-head h2{font-family:var(--serif);font-size:27px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.ic-head p{font-size:11.5px;color:var(--stone);margin-top:5px;letter-spacing:.01em}
.ic-group{background:var(--white);border:1px solid var(--line);border-radius:var(--r12);
  box-shadow:var(--sh1);margin-bottom:14px;overflow:hidden}
.ic-group-h{font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-dk);background:var(--porcelain2);padding:9px 16px;border-bottom:1px solid var(--line)}
.ic-row{display:grid;grid-template-columns:1fr 74px 104px;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--line-soft);margin:0}
.ic-row:last-child{border-bottom:none}
.ic-row.on{background:rgba(61,120,192,.055)}
.ic-row-n{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35;min-width:0}
.ic-row-note{display:block;font-size:10.5px;font-weight:400;color:var(--stone);margin-top:2px;line-height:1.4}
.ic-row-p{font-size:13px;font-weight:700;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
.ic-step{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.ic-b{width:26px;height:26px;flex:none;border:1px solid var(--line);background:var(--porcelain);
  border-radius:7px;color:var(--ink-soft);font-size:14px;font-weight:700;cursor:pointer;line-height:1}
.ic-b:hover{background:var(--porcelain2)}
.ic-q{width:38px;height:26px;text-align:center;border:1px solid var(--line);border-radius:7px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);background:var(--white);
  font-variant-numeric:tabular-nums}
.ic-check{cursor:pointer}
.ic-check input{width:17px;height:17px;accent-color:var(--brass-dk);cursor:pointer}
.ic-eta{padding:12px 16px}
.ic-eta label{display:block;font-size:11px;font-weight:700;color:var(--ink);margin-bottom:6px}
.ic-eta input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r8);font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--white)}
.ic-eta input:focus{outline:none;border-color:var(--brass-lt)}
.ic-eta .ic-row-note{margin-top:6px}
/* The breakdown is the thing being read, so it gets the weight: navy panel,
   the running total in the header where it stays visible while adding rows. */
.ic-sum{background:var(--ink);border-radius:var(--r12);padding:16px 18px;margin:20px 0 14px;box-shadow:var(--sh2)}
.ic-sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.14)}
.ic-sum-h>span:first-child{font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#9cc2ec}
.ic-sum-t{font-family:var(--serif);font-size:25px;font-weight:600;color:#fff;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ic-empty{font-size:11.5px;color:#9cc2ec;padding:14px 0 4px}
.ic-bd{width:100%;border-collapse:collapse;margin-top:10px}
.ic-bd td{padding:5px 0;font-size:11.5px;color:rgba(255,255,255,.9);vertical-align:top}
.ic-bd-n{line-height:1.4}
.ic-bd-q{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:999px;
  background:rgba(255,255,255,.14);font-size:9.5px;font-weight:700}
.ic-bd-u{text-align:right;white-space:nowrap;color:rgba(255,255,255,.5);font-size:10.5px;padding-right:12px}
.ic-bd-a{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.ic-bd-sep td{border-top:1px solid rgba(255,255,255,.14);padding-top:9px}
.ic-bd-off td{color:#8fd0a8}
.ic-bd-total td{border-top:1px solid rgba(255,255,255,.22);padding-top:9px;font-size:13.5px;font-weight:800;color:#fff}
.ic-eta-out{margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px;color:rgba(255,255,255,.9)}
.ic-acts{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.ic-act{flex:1 1 auto;padding:9px 13px;border-radius:var(--r8);border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);color:#fff;font-family:var(--sans);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ic-act:hover{background:rgba(255,255,255,.18)}
.ic-act-x{flex:0 0 auto;background:transparent;color:#9cc2ec}
.ic-terms{margin-top:6px;padding:14px 16px;background:var(--porcelain2);border-radius:var(--r12);border:1px solid var(--line)}
.ic-terms-h{font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:8px}
.ic-terms ul{margin:0;padding-left:16px}
.ic-terms li{font-size:10.5px;line-height:1.65;color:var(--stone);margin-bottom:3px}
/* On a phone the price and the stepper keep their own columns but the name is
   allowed to take the whole first line, or a long service name squeezes the
   price into two characters a row. */
@media(max-width:600px){
  .ic-row{grid-template-columns:1fr 96px;grid-template-areas:"n n" "p s";gap:6px 10px}
  .ic-row-n{grid-area:n}
  .ic-row-p{grid-area:p;text-align:left}
  .ic-step{grid-area:s}
  .ic-head h2{font-size:23px}
  .ic-sum-t{font-size:22px}
}

/* A multi-SKU stock badge in the card header line. Every other .stk-multi
   rule is scoped to .pc-ftbl td.stkc, the per-finish price table; a
   flat-price card has no table, so its badge lands here with no rules at
   all and fell back to display:inline. Label and pill then wrapped
   independently and each label read as belonging to the pill before it. */
.pc-sub:has(.stk-multi){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.pc-sub .stk-multi{display:inline-flex;align-items:center;gap:4px}

/* The calculator fills the width instead of stacking in one 860px column.
   As many ~460px columns as the space allows - column-width, not
   column-count, and no media query, because the sidebar collapses
   (body.sb-off) and a media query only sees the viewport. 460px is the floor
   at which .ic-row's label/price/stepper grid still fits on one line. */
.inst-wrap{max-width:1560px;column-width:460px;column-gap:22px}
/* Keep each card whole - a break mid-group would split "Toilet & basin"
   across two columns. Top margins zeroed: the first card in each column keeps
   its top margin, so .ic-sum's 20px would start its column lower than the
   others. */
.inst-wrap>.ic-group,.inst-wrap>.ic-sum,.inst-wrap>.ic-terms{
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-top:0;margin-bottom:14px}
.inst-wrap>.ic-head{column-span:all}

/* The month range on the sales chart. */
.sd-filterbar{flex-wrap:wrap}
.lc-monthbar{gap:8px;margin-top:-2px}
/* Beats ".sd-filterbar select{min-width:170px}", which is one class plus an
   element and so outranks a lone class however late it is declared. A month
   name needs nowhere near 170px and two of them at that width push the row
   onto a second line for nothing. */
.sd-filterbar select.lc-msel{min-width:92px;width:auto}
.lc-range-note{font-size:11px;color:var(--stone,#7a8699);letter-spacing:.01em}

/* Fit Checker width. 1400 rather than the full section: the dimension rows
   are label-left / value-right, so past about this the pair drifts apart and
   gets harder to read, not easier. The extra width goes to the diagram
   (.fcx-refgrid above), which is what explains the letters. */
.fit-wrap{max-width:1400px}

/* PO Check. Wide, because the point is reading the item and two prices on one
   line without scrolling sideways. */
.po-wrap{max-width:1400px;margin:0 auto;padding:8px 0 64px}
.po-head h2{font-family:var(--serif);font-size:27px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.po-head p{font-size:12px;color:var(--stone);margin:6px 0 18px;line-height:1.6;max-width:70ch}
.po-badge{display:inline-block;margin-left:7px;min-width:17px;padding:1px 5px;border-radius:999px;
  background:var(--brass-dk,#8a6d1f);color:#fff;font-size:9.5px;font-weight:800;text-align:center;line-height:15px}
.po-pastebox{background:var(--white);border:1px solid var(--line);border-radius:var(--r12);padding:14px;margin-bottom:18px;box-shadow:var(--sh1)}
.po-pastebox textarea{width:100%;box-sizing:border-box;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:12px;line-height:1.6;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r8);
  color:var(--ink);background:var(--porcelain,#fbfcfd);resize:vertical}
.po-pastebox textarea:focus{outline:none;border-color:var(--brass-lt)}
.po-pasteacts{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.po-hint{font-size:11px;color:var(--stone)}
.po-basis{display:inline-flex;align-items:center;gap:6px}
.po-basis-lbl{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.po-bpill{font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--stone);cursor:pointer;white-space:nowrap}
.po-bpill:hover{background:var(--porcelain2,#f2f4f7)}
.po-bpill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.po-btn{font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:var(--r8);
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.po-btn:hover{background:var(--porcelain2,#f2f4f7)}
.po-btn-go{background:var(--ink);border-color:var(--ink);color:#fff}
.po-btn-x{color:#a52727;border-color:rgba(192,40,40,.3)}
.po-empty{font-size:12.5px;color:var(--stone);text-align:center;padding:36px 0;
  background:var(--white);border:1px dashed var(--line);border-radius:var(--r12)}
.po-tblwrap{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r12);box-shadow:var(--sh1)}
.po-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.po-tbl th{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dk);
  background:var(--porcelain2);padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.po-tbl td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.po-tbl tbody tr:last-child td{border-bottom:none}
.po-c-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.po-c-qty{width:74px}
.po-c-x{width:34px;text-align:center}
.po-c-tot{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--stone);font-weight:700}
.po-tbl tfoot td{border-top:1px solid var(--line);border-bottom:none;padding:10px 12px}
.po-code{display:block;font-family:var(--serif);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.po-fin{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--stone);margin-top:3px}
.po-fin .fsw{width:9px;height:9px;border-radius:50%;display:inline-block}
.po-note{display:block;font-size:10.5px;color:#a8480b;margin-top:3px}
/* SAP's own spelling, selectable on its own so it can be copied by hand */
/* ── Add to list ─────────────────────────────────────────────────────────
   The control belongs to the card's heading, so it is built as part of it:
   the heading is a flex row whose second column is the button. Absolutely
   positioning it over the corner worked until a long model code — the likes
   of W2-R-MXB721101X — grew far enough right to run underneath. As a column
   it simply takes its width and the code wraps, at every card size.

   It is typed like the eyebrow beside it (8.5px, 800, wide tracking, upper
   case) so it reads as part of the heading rather than a control dropped on
   top of one, and it carries the word "Add" — a bare plus asked the reader
   to guess. */
.pc-hd{display:flex;align-items:flex-start;gap:12px}
.pc-hd-main{flex:1 1 auto;min-width:0}
/* == The Add rail =======================================================
   A strip down the side of the card rather than a pill beside the model
   name: full height, so it is the same target wherever the eye is on the
   card, and it is not sitting on top of the heading any more. */
/* row-reverse: the rail is written first so it is the card's first child in
   the markup - which is where a screen reader and the tab order want it -
   and painted last, on the right, where nothing overlaps it. */
.pcard.pc-railed{flex-direction:row-reverse;align-items:stretch}
/* It has to be as tall as the card for the photograph to have anything to
   grow into - the rail is the card's other child and stretches, so without
   this the column was only as tall as its own content. */
.pc-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-self:stretch}
/* Two classes, not one: the element is also .pc-addwrap, whose flex:0 0 auto
   is written further down and would otherwise win on source order. */
.pc-addwrap.pc-rail{flex:0 0 34px;display:flex;align-items:center;
  justify-content:center;border-left:1px solid var(--line);
  background:var(--porcelain2);margin-top:0}
.pc-rail .pc-addbtn{
  /* upright, reading bottom-to-top, which is the way a spine is read */
  writing-mode:vertical-rl;transform:rotate(180deg);
  height:auto;width:100%;padding:16px 0;border:0;border-radius:0;
  background:transparent;justify-content:center;gap:9px;letter-spacing:.2em}
.pc-rail .pc-addbtn svg{transform:rotate(90deg)}
.pcard:hover .pc-rail{background:rgba(10,37,64,.05)}
.pcard .pc-rail .pc-addbtn:hover,.pcard .pc-rail .pc-addbtn.on{
  background:var(--ink);color:#fff;box-shadow:none}
.pcard .pc-rail .pc-addbtn.done{background:rgba(34,139,69,.16);color:#176a34}
@media(max-width:680px){
  .pc-addwrap.pc-rail{flex-basis:28px}
  .pc-rail .pc-addbtn{padding:12px 0;font-size:8px}
}
.pc-addwrap{position:relative;flex:0 0 auto;margin-top:1px;z-index:6}
/* the open one has to clear the NEXT card's button, which paints later */
.pc-addwrap.open{z-index:80}
.pc-addbtn{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px 0 10px;
  font-family:inherit;font-size:8.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  border-radius:999px;border:1px solid rgba(10,37,64,.12);
  background:rgba(10,37,64,.035);color:#5b7090;
  transition:background .16s,color .16s,border-color .16s,box-shadow .16s;
}
.pc-addbtn svg{flex:none;opacity:.7;transition:opacity .16s}
/* rest → card hovered → button hovered. Written at equal specificity and in
   that order: ".pcard:hover .pc-addbtn" outranks a bare ".pc-addbtn:hover",
   and hovering the button hovers the card too, so the plain form would never
   have won. */
.pcard:hover .pc-addbtn{background:rgba(10,37,64,.07);border-color:rgba(10,37,64,.2);color:var(--ink)}
.pcard .pc-addbtn:hover,.pcard .pc-addbtn.on{
  background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(10,37,64,.26)}
.pcard .pc-addbtn:hover svg,.pcard .pc-addbtn.on svg{opacity:1}
.pcard .pc-addbtn.done{
  background:rgba(34,139,69,.13);border-color:rgba(23,106,52,.3);color:#176a34;box-shadow:none}
.pc-addbtn:focus-visible{outline:2px solid var(--brass-lt);outline-offset:2px}

/* The chooser hangs from the button. */
.pc-addpop{
  position:absolute;top:33px;right:0;width:290px;max-width:min(290px,76vw);
  background:#fff;border:1px solid rgba(10,37,64,.14);border-radius:var(--r12);
  box-shadow:var(--sh3);
  padding:13px 14px 12px;text-align:left;cursor:default;
  animation:poAddIn .15s cubic-bezier(.2,.7,.3,1);
}
@keyframes poAddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* near the foot of the scroller there is no room below, so it hangs upward */
.pc-addpop.up{top:auto;bottom:33px;animation-name:poAddInUp}
@keyframes poAddInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pc-addpop::before{content:'';position:absolute;top:-5px;right:17px;width:9px;height:9px;
  background:#fff;border-left:1px solid rgba(10,37,64,.14);border-top:1px solid rgba(10,37,64,.14);
  transform:rotate(45deg)}
.pc-addpop.up::before{top:auto;bottom:-5px;transform:rotate(225deg)}
.pc-addpop-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid var(--line-soft)}
.pc-addpop-k{flex:none;font-size:8.5px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brass-dk)}
.pc-addpop-code{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Only the questions scroll. The bundle asks three and, stacked with the
   price and the buttons, ran past the foot of a short window; the price is
   the one thing that must never be the part that scrolls out of sight. */
.pc-addbody{max-height:min(40vh,300px);overflow-y:auto;overscroll-behavior:contain;
  margin:0 -4px;padding:0 4px}
.pc-addbody::-webkit-scrollbar{width:5px}
.pc-addbody::-webkit-scrollbar-thumb{background:rgba(10,37,64,.16);border-radius:3px}
.pc-addrow+.pc-addrow{margin-top:11px}
.pc-addlbl{display:block;font-size:8.5px;font-weight:800;color:var(--stone);
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:6px}
.pc-addvals{display:flex;flex-wrap:wrap;gap:5px}
.pc-addopt{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11px;
  font-weight:600;line-height:1;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(10,37,64,.13);background:#fff;color:#4c6180;cursor:pointer;
  white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.pc-addopt:hover{border-color:rgba(10,37,64,.32);color:var(--ink)}
/* a ring, because Chrome and White are all but invisible against the pill */
.pc-addopt .fsw{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;
  box-shadow:inset 0 0 0 1px rgba(10,37,64,.22)}
.pc-addopt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pc-addopt.off{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.pc-addopt.off:hover{border-color:rgba(10,37,64,.13);color:#4c6180}
.pc-addopt.on .fsw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
/* What the choices come to. Checking the price and the SAP code is the whole
   reason PO Check exists, so both are shown before anything is added. */
.pc-addsum{margin-top:13px;padding:9px 11px;border-radius:10px;
  background:linear-gradient(135deg,#f6faff,#edf3fb);border:1px solid rgba(10,37,64,.09)}
.pc-addsum-a{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pc-addsum-k{font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.pc-addsum-v{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.2px;white-space:nowrap}
.pc-addsum-sap{margin-top:7px;padding-top:7px;border-top:1px solid rgba(10,37,64,.08);
  display:flex;flex-direction:column;gap:3px}
.pc-addsum-sap code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;
  line-height:1.35;color:#41566e;word-break:break-all}
.pc-addacts{display:flex;gap:7px;margin-top:12px}
.pc-addgo{flex:1;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:9px 12px;border-radius:9px;border:1px solid var(--ink);background:var(--ink);
  color:#fff;cursor:pointer;transition:background .14s}
.pc-addgo:hover{background:#061f36}
.pc-addx{font-family:inherit;font-size:11.5px;font-weight:600;padding:9px 13px;border-radius:9px;
  border:1px solid rgba(10,37,64,.14);background:#fff;color:var(--stone);cursor:pointer;
  transition:color .14s,border-color .14s}
.pc-addx:hover{color:var(--ink);border-color:rgba(10,37,64,.3)}
/* A card clips its own rounded corners, and — because of the backdrop-filter
   it carries — is also a stacking context of its own, which sealed the
   chooser's z-index inside it and let the NEXT card paint over anything that
   hung down past the card's foot. So the card holding an open chooser stops
   clipping and is raised as a whole.

   position:relative is not decoration here. The backdrop-filter was already
   making .pcard the containing block for its own ::before hairline; naming
   the position keeps that true no matter what happens to the filter. */
.pcard.pc-adding{position:relative;z-index:90;overflow:visible}
.po-pick{display:inline-flex;align-items:center;gap:5px;margin-right:10px;vertical-align:middle}
.po-pick-lbl{font-size:10px;font-weight:700;color:var(--stone);text-transform:uppercase;letter-spacing:.06em}
.po-pick-sel{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:10.5px;
  padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink-soft,#41566e)}
.po-pick-sel:focus{outline:none;border-color:var(--brass-lt)}
.po-bom{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line-soft)}
.po-bom-lbl{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-dk);margin-right:8px;vertical-align:middle}
.po-bvars{display:inline-flex;gap:4px;margin-right:8px;vertical-align:middle;flex-wrap:wrap}
.po-bvar{font-family:inherit;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--stone);cursor:pointer;white-space:nowrap}
.po-bvar.on{background:var(--brass-dk,#8a6d1f);border-color:var(--brass-dk,#8a6d1f);color:#fff}
.po-bom-items{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:10.5px;
  color:var(--ink-soft,#41566e);line-height:1.7;user-select:all}
.po-bom-sep{color:var(--stone-lt,#9aa4b2);margin:0 6px}
.po-sap{display:block;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:10.5px;color:var(--ink-soft,#41566e);margin-top:3px;user-select:all;word-break:break-word}
/* the line exactly as it was pasted, so a wrong match is obvious */
.po-raw{display:block;font-size:10px;color:var(--stone-lt,#9aa4b2);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.po-qty,.po-po{font-family:inherit;font-size:12.5px;padding:5px 7px;border:1px solid var(--line);
  border-radius:6px;color:var(--ink);background:#fff;width:100%;box-sizing:border-box}
.po-po{text-align:right}
.po-qty:focus,.po-po:focus{outline:none;border-color:var(--brass-lt)}
.po-x{border:0;background:none;color:var(--stone);font-size:17px;line-height:1;cursor:pointer;padding:2px 5px}
.po-x:hover{color:#a52727}
.po-ok{color:#176a34;font-weight:600}
.po-diff{color:#a52727;font-weight:700}
.po-dash{color:var(--stone-lt,#9aa4b2)}
tr.po-warn>td{background:rgba(199,154,46,.07)}
tr.po-bad>td{background:rgba(192,40,40,.06)}
tr.po-ok-row>td{background:rgba(34,139,69,.06)}
.po-acts{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.po-flags{font-size:11.5px;color:#a8480b;font-weight:600}
.po-allok{font-size:11.5px;color:#176a34;font-weight:600}
@media(max-width:720px){
  .po-raw{max-width:24ch}
  .po-head p{font-size:11.5px}
}

/* ── Smoothness ──────────────────────────────────────────────────────────
   Measured before any of this: typing eight characters into the search box
   cost 31.8ms of main-thread work, because every keystroke rebuilt a 444KB
   string of HTML and handed it to innerHTML — 10.7ms for the parse alone —
   then laid out and painted all 236 cards. The grid carries 236 backdrop
   filters, 236 shadows and 236 images.

   Three things follow. The keystroke work is debounced in the script. The
   off-screen cards stop being laid out and painted at all. And what does
   move, moves on the compositor: transform and opacity only, never a shadow
   or a colour that forces a repaint of the card. */

/* The browser may skip layout and paint for a card that is nowhere near the
   viewport — six are on screen out of 236. "auto 430px" lets it remember each
   card's real height after the first pass, so the scrollbar never jumps.

   Not on the card holding an open chooser: content-visibility brings paint
   containment with it, which would clip the panel at the card's edge — the
   same clipping fought in V12.1. And not when printing, where every card has
   to be there. */
#pgrid > .pcard{content-visibility:auto;contain-intrinsic-size:auto 430px}
#pgrid > .pcard.pc-adding{content-visibility:visible}
/* And a card with its ships-with list out. content-visibility:auto implies
   contain:paint, which clips to the card's box however visible its overflow
   is - the panel sat at the right coordinates with opacity 1 and painted
   nothing at all. */
#pgrid > .pcard.sw-open{content-visibility:visible}
@media print{#pgrid > .pcard{content-visibility:visible}}

/* Cards arrive rather than appear. Only the first dozen — the ones actually
   on screen when a render lands — so scrolling never waits on an animation,
   and transform/opacity only, which the compositor can do without repainting
   anything. */
@keyframes pc-rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
#pgrid > .pcard:nth-child(-n+12){animation:pc-rise .38s cubic-bezier(.22,.7,.28,1) both}
#pgrid > .pcard:nth-child(2){animation-delay:.03s}
#pgrid > .pcard:nth-child(3){animation-delay:.06s}
#pgrid > .pcard:nth-child(4){animation-delay:.09s}
#pgrid > .pcard:nth-child(5){animation-delay:.12s}
#pgrid > .pcard:nth-child(6){animation-delay:.15s}
#pgrid > .pcard:nth-child(7){animation-delay:.17s}
#pgrid > .pcard:nth-child(8){animation-delay:.19s}
#pgrid > .pcard:nth-child(9){animation-delay:.21s}
#pgrid > .pcard:nth-child(10){animation-delay:.23s}
#pgrid > .pcard:nth-child(11){animation-delay:.25s}
#pgrid > .pcard:nth-child(12){animation-delay:.27s}

/* A section change fades instead of cutting. */
@keyframes sec-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
/* backwards, never both. "both" keeps the final keyframe applied for as long
   as the element lives, and an applied transform animation computes to a
   matrix even where the keyframe says "none" - measured: matrix(1,0,0,1,0,0).
   Any transform but none makes an element the containing block for its
   position:fixed descendants, so every fixed thing inside a section resolved
   to the section instead of the screen. The Sales Dashboard order panel was
   centring itself inside a section thousands of pixels tall and landing off
   the bottom of the window.
   The final keyframe is opacity 1 and no transform, which is the element's own
   resting style, so holding it bought nothing. */
#scroll > .sec.on{animation:sec-in .26s cubic-bezier(.22,.7,.28,1) backwards}

/* Jumps the page makes for you — bringing a chooser into view, changing
   section — glide. Wheel and trackpad scrolling are untouched by this. */
#scroll{scroll-behavior:smooth}

/* The stock and price tables settle rather than snap when a filter changes. */
@keyframes row-in{from{opacity:0}to{opacity:1}}
.po-tbl tbody tr,.bom-tbl tbody tr{animation:row-in .22s ease both}

/* Pressing something should feel like pressing something. */
.pc-addbtn:active,.pc-addgo:active,.pc-addopt:active,.po-btn:active,.gcdl:active,.pc-act:active{
  transform:translateY(1px)}
.pc-addbtn,.pc-addgo,.pc-addopt,.po-btn,.gcdl{will-change:auto}

/* Anyone who has asked their system for less movement gets none of it. The
   layout work above is kept, because that is not motion. */
@media (prefers-reduced-motion: reduce){
  #pgrid > .pcard:nth-child(-n+12),
  #scroll > .sec.on,
  .po-tbl tbody tr,.bom-tbl tbody tr,
  .pc-addpop{animation:none!important}
  #scroll{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* Sync every cut sheet. Admin only, and it sits above the grid it fills. */
.cutall{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;position:relative;
  margin:0 0 18px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:var(--r12);
  background:linear-gradient(135deg,#f7fbff,#fff);box-shadow:var(--sh1)}
.cutall-lead{flex:1 1 320px;min-width:0}
.cutall-lead strong{display:block;font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.cutall-lead span{display:block;font-size:11px;color:var(--stone);margin-top:3px;line-height:1.45}
.cutall-act{display:flex;align-items:center;gap:12px;margin-left:auto}
.cutall-txt{font-size:11px;color:var(--stone);font-variant-numeric:tabular-nums;text-align:right;max-width:340px}
.cutall button{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.01em;padding:8px 15px;
  border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  white-space:nowrap;transition:background .15s,opacity .15s}
.cutall button:hover{background:#061f36}
.cutall button[disabled]{opacity:.55;cursor:progress}
/* The bar sits on the panel's bottom edge, so progress reads without taking a
   row of its own. Width only — nothing that forces a repaint of the panel. */
.cutall-track{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 var(--r12) var(--r12);
  background:rgba(10,37,64,.07);overflow:hidden}
.cutall-bar{height:100%;width:0;border-radius:0 0 0 var(--r12);
  background:linear-gradient(90deg,var(--brass-lt),var(--ink));transition:width .3s ease}
@media(max-width:620px){.cutall-act{margin-left:0;width:100%;justify-content:space-between}
  .cutall-txt{text-align:left}}

/* What the run brought in. Grows while it runs, stays afterwards so the
   result can be read rather than remembered. */
.cutall-list{flex:1 1 100%;order:9;margin:2px 0 -2px;max-height:230px;overflow-y:auto;
  border-top:1px solid var(--line-soft);padding-top:10px}
.cutall-list::-webkit-scrollbar{width:5px}
.cutall-list::-webkit-scrollbar-thumb{background:rgba(10,37,64,.16);border-radius:3px}
.cutall-list-h{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-dk);margin-bottom:7px}
.cutall-row{display:flex;align-items:baseline;gap:9px;padding:3px 0;font-size:11px;line-height:1.45}
.cutall-row+.cutall-row{border-top:1px solid rgba(10,37,64,.05)}
.cutall-was{flex:none;min-width:58px;font-size:8px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;text-align:center}
.cutall-was-new{background:rgba(34,139,69,.13);color:#176a34}
.cutall-was-replaced{background:rgba(190,95,15,.14);color:#a8480b}
.cutall-code{flex:0 1 auto;min-width:0;font-weight:700;color:var(--ink);word-break:break-word}
.cutall-docs{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:flex-end}
.cutall-doc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:#41566e;word-break:break-all}
.cutall-doc-near{color:#a8480b}
.cutall-doc-near::after{content:' ~';opacity:.7}

/* == Frosted glass is a desktop material ==================================
   A backdrop-filter re-snapshots and re-blurs everything behind it on every
   frame it is composited. On a phone - a fixed full-height sidebar and a
   fixed header over a 236-card scroll - that is the most expensive thing on
   the page, and it is what retired the tab on iOS. At 390px it also buys
   nothing: a header that is already 72% opaque has nothing interesting
   passing behind it.

   Each surface gets its opacity back in the same breath. A panel that stops
   frosting but stays 72% transparent is worse than either state - scrolling
   content reads straight through it.

   The modal scrim keeps its 8px blur: it exists only while a modal is open,
   it has been prefixed and running on these phones since before this, and
   it is not what broke. */
@media(max-width:1024px){
  #sb,#mhdr,#fbar,#rigel-ref,#mhdr-badge,#mhdr-company-name,#fcnt,#sinput,
  .fd,.fit-card,.pi-card,.os-panel,.sbf-panel,.gi-type,#gate .gate-box{
    backdrop-filter:none;-webkit-backdrop-filter:none}
  #mhdr,#fbar{background:#fafbfd}
  #rigel-ref,#mhdr-badge,#mhdr-company-name,#fcnt,#sinput,.fd,.fit-card,.pi-card,.os-panel{background:#fff}
  #sb{background:linear-gradient(180deg,#062138,#051b2f)}
  .gi-type{background:rgba(10,37,64,.78)}
  #gate .gate-box{background:rgba(255,255,255,.16)}
}

/* == On a phone the filters fold away =====================================
   Measured on a 440x956 phone signed in as an admin: 326px of header and
   filter bar before the first product - 34% of the screen, before iOS adds
   its address bar. The search field is the one control worth that space on a
   phone; Category, Finish, the stock checkboxes, View as and Qty are all set
   once and then browsed past, and the last two only exist for admins.

   720px is this sheet's phone breakpoint already. Nothing above it changes. */
@media(max-width:720px){
  #mhdr{padding:11px 16px 9px;align-items:center;gap:10px}
  #mh1{font-size:20px}
  /* the subtitle repeats a count the Filters button now carries */
  #mh2{display:none}
  #mhdr-tools{margin-left:auto;gap:6px}
  /* The Rigel mark is decoration at 440px. Confidential is not - it is what
     tells anyone looking over your shoulder what this screen is - so it stays,
     on the title's own line, costing no height. */
  #rigel-ref{display:none}

  #fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 16px}
  #fsr{flex:1 1 auto;min-width:0;order:1}
  #fbtn{order:2;flex:none}
  #fdds,#fcnt,#admin-swap,#privacy-toggles,#gc-stock-dl,#sync-btn{order:3;flex:1 1 100%;margin-left:0}
  /* !important because #fdds and the admin rows carry inline display styles
     that JavaScript sets - the fold has to outrank them while it is closed,
     and hand them straight back when it opens. */
  #fbar.fb-closed #fdds,
  #fbar.fb-closed #fcnt,
  #fbar.fb-closed #admin-swap,
  #fbar.fb-closed #privacy-toggles,
  #fbar.fb-closed #gc-stock-dl,
  #fbar.fb-closed #sync-btn{display:none!important}

  #fbtn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;
    font-weight:600;height:var(--ctl-h,36px);padding:0 13px;border-radius:var(--r8);
    background:#fff;border:1px solid var(--line);color:var(--ink);white-space:nowrap;cursor:pointer;
    box-shadow:var(--sh1);transition:background .16s,border-color .16s,color .16s}
  #fbtn .fbtn-car{font-size:10px;transition:transform .18s}
  #fbar:not(.fb-closed) #fbtn{background:var(--ink);border-color:var(--ink);color:#fff}
  #fbar:not(.fb-closed) #fbtn .fbtn-car{transform:rotate(180deg)}
  #fbtn:active{transform:translateY(1px)}
  /* A dot whenever something is actually filtering. A folded panel must never
     be able to hide the fact that the list is not showing everything. */
  #fbtn.on::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--brass-lt);flex:none}
  #fbar:not(.fb-closed) #fbtn.on::after{background:#8fc4ff}
}
@media(min-width:721px){#fbtn{display:none}}

/* == A double tap does not zoom =========================================
   On a phone a double tap zooms the page, and on a price list that is
   almost always an accident - two quick taps on a card, a finish row or an
   Add button and the whole thing jumps to 200%.

   touch-action:manipulation says this surface handles taps, scrolls and
   pinches and nothing else, so double-tap zoom goes - and PINCH zoom stays.
   That distinction is the point: someone squinting at a model code still
   needs to enlarge it, and taking that away would be worse than the
   accidental zoom.

   Not done by disabling user scaling on the viewport tag, which is how this
   is usually written: that kills pinch zoom too, and Safari has ignored that
   directive since iOS 10, so it would have looked like a fix and done
   nothing. A gate refuses this patch if any such directive ever appears. */
html,body{touch-action:manipulation}


/* == A phone can screenshot the whole Promotion page ====================
   iOS's Full Page screenshot extends the DOCUMENT's scroll. This app never
   scrolls the document - #app is 100vh with overflow hidden and an inner
   #scroll does the work - so Safari has nothing to extend and returns just
   the visible screen. Android's scrolling screenshot is the same story.

   On the Promotion page, on a phone, the document scrolls instead. Full
   Page then has a real page to capture.

   Under 720px only: a desktop has no Full Page to enable, and letting #app
   grow there would stretch the sidebar down the whole document for nothing.
   The price list keeps its inner scroller either way - it is 104,000px tall
   and the batching added in V14.2 is built around exactly that. */
@media(max-width:720px){
  html.doc-scroll,html.doc-scroll body{height:auto;overflow:visible}
  html.doc-scroll #app{height:auto;min-height:100vh;overflow:visible}
  html.doc-scroll #main{overflow:visible}
  html.doc-scroll #scroll{overflow:visible;height:auto;flex:none}
}

/* == A SAP cut sheet is a PDF, and a PDF has to be told how to fit ======
   The sizing moved out of the inline style renderSapCut used to write, so
   a phone can have its own height without building a second string. */
.sap-cut-page{margin:12px 0}
.sap-cut-acts{display:flex;justify-content:flex-end;margin:0 0 8px}
.sap-cut-acts .pdf-btn{text-decoration:none}
.sap-cut-pdf{width:100%;height:82vh;border:1px solid var(--line,#ddd);
  border-radius:var(--r8);display:block;background:#fff}

/* == Tapping a text field does not zoom the page ========================
   iOS zooms the whole page whenever a focused field is smaller than 16px,
   and the search box computes to 12px on a phone - #fsr input reads
   --ctl-fs. Being 16px is the only way to refuse that zoom. The usual
   alternative - pinning the viewport's maximum scale - also kills PINCH
   zoom, which V14.5 kept on purpose and still gates against, so it is out.
   (Spelling that directive here would trip V14.5's own gate, which is why
   it is described rather than quoted.)

   #fsr input and #gate input are named so this rule is not outranked by
   the id-level rules that set the small sizes; the type selectors cover
   every other field without having to list them.

   <select> is deliberately absent: it opens a picker rather than a
   keyboard and never triggers the zoom, so enlarging it would swell the
   filter bar for nothing. Checkboxes are excluded by type for the same
   reason. */
@media(max-width:720px){
  #fsr input,
  #gate input,
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="url"],
  textarea{font-size:16px}
  /* the sheet is shorter here so the button above it stays in reach */
  .sap-cut-pdf{height:62vh}
}

/* == "Available in" on a bundle card ====================================
   Six variants, each with a combination code, a T-code and a stock badge
   per part, used to run together as one paragraph joined by <br>. Each is
   now a block, with a hairline doing the separating. */
.pcl-item{padding:7px 0;border-top:1px solid rgba(10,37,64,.08)}
.pcl-item:first-child{border-top:0;padding-top:1px}
.pcl-item:last-child{padding-bottom:1px}
.pcl-code{font-weight:600;color:var(--ink-soft);line-height:1.45;
  overflow-wrap:anywhere}
.pcl-tc{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:4px;
  background:var(--porcelain2);color:var(--stone);
  font-size:10px;font-weight:700;letter-spacing:.05em}
.pcl-stk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:5px}
/* inside this list a part's badge is its own item in the flex row, so the
   code sits above its pill rather than beside the previous one */
.pcl-stk .stk-multi{display:inline-flex;align-items:center;gap:5px;margin-top:0}
.pcl-stk .stk-multi>span:first-child{display:inline;margin-right:0}




/* == What ships with a product =========================================
   Collapsed to its heading until asked. The heading is a button because it
   is one - it is the only control here, and a div with an onclick is not
   reachable by keyboard.

   The body is display:none rather than a height transition: the lists are
   2 to 7 rows and an animated height on 66 cards inside a grid that already
   reflows is motion nobody asked for. */
.pc-sw{border-top:1px solid var(--line-soft)}
.pc-sw-ttl{font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--brass-dk)}
.pc-sw-n{font-size:10.5px;font-weight:600;color:var(--ink-soft)}
.pc-sw-car{margin-left:auto;font-size:10px;color:var(--stone-lt);
  transition:transform .15s}
.pc-sw.open .pc-sw-car{transform:rotate(180deg)}
.pc-sw-body{display:none;padding:0 15px 12px}
.pc-sw.open .pc-sw-body{display:block}
.pc-sw-fin{font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--stone);margin:6px 0 3px}
.pc-sw-tbl{width:100%;border-collapse:collapse}
.pc-sw-tbl td{padding:4px 0;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.pc-sw-tbl tr:last-child td{border-bottom:0}
/* The code column sizes to its content and never wraps - a part number broken
   across two lines cannot be read back to a warehouse. The description takes
   whatever is left and wraps freely. */
.pc-sw-code{font-size:10px;font-weight:700;color:var(--ink);
  white-space:nowrap;padding-right:10px !important;width:1%}
.pc-sw-name{font-size:9.5px;font-weight:500;color:var(--stone);line-height:1.35}
/* The first line is the product itself, not an extra - dimmed so the eye
   goes to what comes WITH it. */
.pc-sw-main .pc-sw-code{color:var(--ink-soft)}
.pc-sw-main .pc-sw-name{color:var(--stone-lt)}
.pc-sw-copy{margin-top:8px;font-family:inherit;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;padding:4px 9px;
  border-radius:var(--r4);border:1px solid rgba(0,55,100,.22);
  background:transparent;color:var(--brass-dk);cursor:pointer}
.pc-sw-copy:hover{background:rgba(0,55,100,.07)}

/* == Which SAP row a stock figure came from =============================
   Was an inline style on an unnamed span. It is a class now so the label
   can be laid out - an inline style beats every rule that is not
   !important, which is what stopped the old cell being styled at all. */
/* == The item report ===================================================
   Filters, category tiles and a ranked table. Everything below filters in
   the browser off one payload, so a tile press redraws from memory. */
.ir{margin-top:26px}
.ir-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
  padding:13px 15px;border:1px solid var(--line-soft);border-radius:var(--r12);
  background:var(--porcelain2);margin-bottom:12px}
.ir-f{display:flex;flex-direction:column;gap:4px;min-width:150px}
.ir-f>span{font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--stone)}
.ir-grow{flex:1 1 220px}
.ir-f .fd{width:100%}
.ir-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-size:12.5px;color:var(--ink-soft);margin-bottom:6px}
.ir-sum b{color:var(--ink);font-weight:700}
.ir-chip{font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;
  border-radius:10px;background:var(--porcelain2);color:var(--stone)}
.ir-tog{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.ir-t{padding:4px 12px;border:0;background:#fff;cursor:pointer;font-family:inherit;
  font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--stone)}
.ir-t.on{background:var(--navy,#0e2139);color:#fff}
.ir-cb{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--stone);cursor:pointer}
.ir-note{font-size:10.5px;color:var(--stone);line-height:1.45;margin-bottom:11px;max-width:92ch}
/* Six to a row at desktop width, not thirteen. auto-fit so a distributor
   with five categories does not get five columns of one tile and a row of
   holes; 214px so the longest label - SHOWER ACCESSORIES, CONCEALED CISTERN
   - sits on one line. */
.ir-tiles{display:grid;gap:12px;margin-bottom:20px;
  grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
/* --c is the category's own colour and --cs the same at a tenth, both set
   inline per tile. Two values rather than one colour-mix(): that function is
   too recent for the iPhones this is read on. */
.ir-tile{--c:var(--brass-dk);--cs:rgba(176,141,87,.08);
  display:flex;flex-direction:column;gap:3px;padding:14px 16px 12px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .12s,background .12s}
.ir-tile:hover{border-color:var(--c)}
.ir-tile.on{border-color:var(--c);background:var(--cs)}
/* the total is a different KIND of row from a category, so it is drawn as one */
.ir-tile-all{border-style:dashed}
.ir-tile-n{font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--stone);line-height:1.3}
.ir-tile-u{font-size:29px;font-weight:700;color:var(--ink);line-height:1.15;
  letter-spacing:-.025em;margin-top:1px}
.ir-tile-p{font-size:9.5px;color:var(--stone-lt)}
.ir-tile-bar{display:block;height:3px;border-radius:2px;
  background:var(--line-soft);margin-top:9px}
.ir-tile-bar>i{display:block;height:100%;border-radius:2px;background:var(--c)}

/* == The ranked table ==================================================
   Its own table, not .sd-table. That one right-aligns every column but the
   first, which is right for money and wrong for a part number and a
   sentence. */
.ir-tblhead{font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 9px;
  letter-spacing:.005em}
.ir-card{border:1px solid var(--line-soft);border-radius:12px;background:#fff;
  overflow:hidden}
/* Six columns of part numbers and SAP descriptions do not fold; let the card
   scroll sideways rather than crush the description into two characters. */
.ir-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.irt{width:100%;border-collapse:collapse;font-size:11.5px}
.irt thead th{background:var(--porcelain2);border-bottom:1px solid var(--line-soft);
  padding:9px 13px;text-align:left;font-size:8.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--stone);white-space:nowrap}
.irt td{padding:8px 13px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle;color:var(--ink-soft);text-align:left}
.irt tbody tr:last-child td{border-bottom:0}
.irt tbody tr:hover{background:var(--porcelain2)}
.irt .irt-n{width:1%;color:var(--stone-lt);font-size:10.5px}
.irt .irt-d{color:var(--stone);line-height:1.4;min-width:240px}
.irt th.irt-q,.irt td.irt-q{text-align:right;white-space:nowrap}
.irt td.irt-q{font-size:13px;font-weight:700;color:var(--ink)}
.irt .irt-s{width:130px}
/* a part number reads as a token, not as prose */
.ir-code{display:inline-block;padding:2px 7px;border-radius:5px;
  background:var(--porcelain2);border:1px solid var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap}
/* the same colour the category's tile carries, so one category can be
   followed from the tiles into the table */
.ir-cat{display:inline-block;padding:2px 8px;border-radius:5px;
  font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;white-space:nowrap}
/* Renamed from .ir-bar, which was already the filter bar at the top of this
   section - the duplicate came second and flattened the filters into a 90px
   inline-block. */
.ir-sbar{display:block;width:100%;height:5px;border-radius:3px;
  background:var(--line-soft)}
.ir-sbar>i{display:block;height:100%;border-radius:3px;background:var(--c,#176a34)}
@media(max-width:720px){
  .ir-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
  .ir-tile{padding:11px 12px 10px}
  .ir-tile-u{font-size:22px}
  .irt .irt-s,.irt th.irt-s{display:none}
  .irt td,.irt thead th{padding:8px 10px}
}

/* == Item Delivered, and RMA ===========================================
   Units from a different tab than the money above, so they are visually a
   separate block rather than more rows on the same table. */
.it-sec{margin-top:26px}
.it-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:5px}
.it-h{margin:0;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.it-sub{font-size:11px;font-weight:600;color:var(--stone)}
.it-note{font-size:10.5px;color:var(--stone);line-height:1.45;margin-bottom:9px;
  max-width:86ch}
/* The description is the only column that may be abbreviated; a code and a
   count may not. */
/* The sales table right-aligns everything but its first column, which is
   right for money and wrong for a sentence. */
.sd-table th.it-name{text-align:left}
.sd-table td.it-name{text-align:left;white-space:nowrap;max-width:330px;overflow:hidden;
  text-overflow:ellipsis;color:var(--stone);font-size:11px}
.it-more{margin-top:8px;padding:7px 14px;border-radius:7px;cursor:pointer;
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--line);background:#fff;color:var(--brass-dk)}
.it-more:hover{background:var(--porcelain2)}

/* == Compact cards =====================================================
   Three products across on a scaled 1920 screen, which is under a thousand
   CSS pixels of grid. The 400px column floor gave two.

   Last in the file on purpose: .pc-img, .pc-info, .pc-code and the finish
   table are each sized more than once above, at equal specificity, so the
   rule that comes last is the one that applies. Keeping the change in one
   block means it reads as one decision and can be taken out as one. */
/* 345px, not 300. Measured against the real stock map at exact card widths:
   at 310px eight finish tables run over their card, at 320px three, and at
   330px none. 345 leaves room for a longer code than any on the list today.
   The first time I set this I measured with the stock column empty, which is
   the one column that overflows. */
/* A share of the row, not a count of pixels. A pixel is not the same size of
   thing on a laptop as on a desktop, and zoom changes it again, so a fixed
   floor was right on one screen and wrong on the other whichever one it was
   tuned on.

   (100% - 40px)/5 is a fifth of the row after the four gaps, so five to a row
   is the most there can ever be, on any screen, at any zoom - and the cards
   grow and shrink with the window instead of the column count jumping. The
   345px is the measured floor below which a finish table starts to slide; on
   a narrow window that wins and you get fewer than five. */
#pgrid{grid-template-columns:repeat(auto-fill,minmax(max(345px,calc((100% - 40px) / 5)),1fr));gap:10px}
/* The photograph was the bulk of the card - taller than the prices under it
   - and it is the part that loses least by shrinking. */
/* The photograph takes ALL the slack, so the prices end up hard against the
   footer on their own.

   Capping it at 260px was the fault: cards in a row stretch to the tallest,
   and anything past 260px of spare height still fell out as a hole between
   the last price and the footer. With no cap the picture absorbs every pixel
   of it.

   Done by growing the photograph rather than by pushing the prices down with
   margin-top:auto - an auto margin absorbs free space BEFORE flex-grow gets
   a look at it, so the slack would have become blank space above the prices
   instead of a bigger picture. */
.pc-img{max-height:none}
#pgrid .pcard:not(.pc-bomcard) .pc-col>.pc-img{flex:1 1 200px;max-height:none;min-height:150px}
.pc-info{padding:10px 12px 8px}
.pc-eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:5px}
.pc-code{font-size:16px;letter-spacing:-.15px}
.pc-sub{font-size:10px;margin-top:3px}
.pc-ftbl th{padding:6px 5px;font-size:7.5px}
.pc-ftbl td{padding:6px 5px;font-size:10.5px}
.pc-act{padding:8px 5px;font-size:9.5px}
/* The rail is the one thing that does not shrink: it is the target. */

/* == A narrow card's finish table ======================================
   The same rules the phone block below already uses, applied by how wide the
   CARD is rather than how wide the SCREEN is.

   That block was written for this complaint - "price shows sideways and I
   cannot view it" - and its measurements still stand: the currency moves to
   the column header because "S$ 2,306.00" is 84px against "2,306.00" at
   62px; the stock badges stack and are capped at 88px so a compound
   product's five SKUs cannot set the column width; the headers wrap because
   "DISTRIBUTOR (S$)" is wider than "DISTRIBUTOR" and a nowrap th was setting
   the width on its own. It also records that table-layout:fixed was tried
   instead and is worse - it clips 107 stock pills - so that is not done here
   either.

   It only ever fired at max-width:720px, and the card is now 316px on a
   1280px screen. Scoped to the price grid's single-width cards, so a
   .pc-wide card - which spans two columns and has the room - is untouched.
   Written with an id and two classes so it outranks the plain rules above
   whatever order they end up in. */
#pgrid .pcard:not(.pc-wide) .pc-ftbl td,
#pgrid .pcard:not(.pc-wide) .pc-ftbl th{padding:6px 3px}
#pgrid .pcard:not(.pc-wide) .pc-ftbl td:first-child{white-space:nowrap;min-width:70px}
#pgrid .pcard:not(.pc-wide) .pc-ftbl th{white-space:normal}
/* the currency goes to the header and out of every cell */
#pgrid .pcard:not(.pc-wide) .pc-ftbl .cur{display:none}
#pgrid .pcard:not(.pc-wide) .pc-ftbl .cur-h{display:inline}
/* a compound product lists one badge per SKU; stack them and cap them, and
   ellipsise the SKU label rather than let it set the column width */
#pgrid .pcard:not(.pc-wide) .pc-ftbl td.stkc{width:100px;max-width:100px}
#pgrid .pcard:not(.pc-wide) .pc-ftbl td.stkc>span{display:block;margin-left:0;
  margin-top:3px;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pgrid .pcard:not(.pc-wide) .pc-ftbl td.stkc>span:first-child{margin-top:0}
#pgrid .pcard:not(.pc-wide) .pc-ftbl td.stkc>span>span:first-child{font-size:7.5px}
#pgrid .pcard:not(.pc-wide) .pc-ftbl .stk-pill .stk-w{min-width:0}
/* A retired FINISH puts a "Discontinued" chip beside the finish name, and
   the two together set the column width - the last two tables to run over.
   Stacked under the name, the same way the phone block stacks it. */
#pgrid .pcard:not(.pc-wide) .pc-ftbl tr.pc-frow-disc .pc-frow-chip{
  display:block;margin-left:0;margin-top:2px}

/* == Ships with, on the rail ===========================================
   The trigger joins Add on the rail, upright, with the count above the
   words. The list slides in from the right across the card rather than
   pushing the card taller - .pcard has overflow:hidden, so a flyout that
   left the card would be cut off, and staying inside keeps it beside the
   product it belongs to. */
.pc-swbtn{display:flex;flex-direction:column;align-items:center;gap:7px;
  width:100%;padding:14px 0;border:0;border-top:1px solid var(--line);
  background:transparent;cursor:pointer;font-family:inherit;color:#5b7090}
.pc-swbtn:hover{background:rgba(10,37,64,.07);color:var(--ink)}
.pc-swbtn-n{font-size:10px;font-weight:800;line-height:1;min-width:17px;
  padding:3px 0;border-radius:9px;background:rgba(10,37,64,.09);color:var(--ink)}
.pc-swbtn-l{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:8.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
/* The rail holds two controls now, so Add stops filling it. */
.pc-addwrap.pc-rail{align-items:stretch;flex-direction:column;justify-content:flex-start}
.pc-rail .pc-addbtn{flex:0 0 auto}
/* Outside the card, to its right, so it covers whatever is beside it rather
   than the card's own prices. The card has overflow:hidden, so it is opened
   up and lifted above its neighbours while a panel is out. */
.pcard.sw-open{overflow:visible;z-index:40}
.pc-sw{position:absolute;top:0;bottom:0;left:100%;right:auto;
  width:min(84%,300px);z-index:8;pointer-events:none}
/* Nothing to the right but the window edge - see swToggle. */
.pcard.sw-left .pc-sw{left:auto;right:100%}
.pc-sw-body{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--white);border:1px solid var(--line);border-radius:0 12px 12px 0;
  box-shadow:10px 0 28px rgba(10,37,64,.14);padding:0 12px 12px;
  opacity:0;transform:translateX(-12px);
  transition:opacity .16s linear,transform .2s cubic-bezier(.2,.6,.3,1)}
.pcard.sw-left .pc-sw-body{border-radius:12px 0 0 12px;
  box-shadow:-10px 0 28px rgba(10,37,64,.14);transform:translateX(12px)}
.pc-sw.open{pointer-events:auto}
.pc-sw.open .pc-sw-body{opacity:1;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.pc-sw-body{transition:none}}
.pc-sw-bar{position:sticky;top:0;display:flex;align-items:baseline;gap:8px;
  padding:10px 0 8px;background:var(--white);border-bottom:1px solid var(--line-soft)}
.pc-sw-x{margin-left:auto;border:0;background:none;cursor:pointer;font-size:18px;
  line-height:1;color:var(--stone);font-family:inherit;padding:0 2px}
.pc-sw-x:hover{color:var(--ink)}
/* One card to a row on a phone, so there is nothing beside it to cover and
   nowhere to put a panel the card's own width. It stays inward there. */
@media(max-width:680px){
  .pc-sw{left:auto;right:34px;width:calc(100% - 34px)}
  .pcard.sw-left .pc-sw{left:auto;right:34px}
  .pc-sw-body,.pcard.sw-left .pc-sw-body{transform:translateX(12px);
    border-radius:12px 0 0 12px;box-shadow:-10px 0 28px rgba(10,37,64,.14)}
  .pc-sw.open .pc-sw-body{transform:translateX(0)}
}

/* == The build drawer ==================================================
   Fixed to the viewport, and appended to document.body so that is what
   "fixed" resolves against - a section here holds a transform and would
   otherwise capture it.

   No backdrop-filter: it has taken an iPhone tab down in this project
   before, and a flat scrim reads the same. */
body.bd-open{overflow:hidden}
.bd-scrim{position:fixed;inset:0;background:rgba(10,22,42,.44);z-index:900}
.bd-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1120px,94vw);max-height:88vh;
  z-index:901;background:var(--paper,#fff);display:flex;flex-direction:column;
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,22,42,.3)}
/* Only on opening. bdRender rewrites the whole panel, so an animation on
   .bd-panel itself replayed on every colour press - the same fault the popup
   had already been taught to avoid, where re-placing itself on each press
   made it jump about under the reader's hand. */
.bd-panel.bd-in{animation:bdIn .16s ease-out}
/* One build and one part code do not need 1120px. Now that every product
   opens this panel, most of them are that. */
.bd-panel.bd-solo{width:min(620px,94vw)}
/* The centring is a transform, so the animation has to carry it too - a
   keyframe that sets transform on its own would cancel translate(-50%,-50%)
   and throw the panel at the bottom-right corner while it played. */
@keyframes bdIn{
  from{transform:translate(-50%,-50%) scale(.97);opacity:0}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.bd-panel.bd-in{animation:none}}
.bd-head{flex:0 0 auto;display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px 13px;
  border-bottom:1px solid var(--line);background:var(--porcelain2)}
.bd-k{font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--brass-dk)}
.bd-code{font-size:17px;font-weight:700;color:var(--ink);margin-top:3px;
  word-break:break-word;line-height:1.2}
.bd-x{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border:0;
  background:none;font-size:22px;line-height:1;color:var(--stone);
  cursor:pointer;border-radius:6px;font-family:inherit}
.bd-x:hover{background:rgba(0,55,100,.07)}
/* The builds run left to right. auto-fit rather than a fixed count: two
   options should not leave two empty columns, and four should not squeeze.
   240px is the floor at which a part code and its description still read. */
/* align-content, not just align-items. align-items places an item inside its
   row; with one option the single ROW was still stretching to the height of
   the body, which on a phone was an acre of empty card under three lines. */
/* The questions sit above the builds and outside the scrolling area: a
   colour row that scrolls away while the builds underneath are being compared
   is a control the reader cannot get back to. Capped, because a bundle asks
   three of them and four colours each. */
.bd-qs{flex:0 0 auto;padding:11px 14px 5px;border-bottom:1px solid var(--line-soft);
  max-height:34vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bd-q{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;flex-wrap:wrap}
.bd-q-l{flex:0 0 auto;min-width:64px;font-size:8.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--stone);padding-top:4px}
.bd-q-v{display:flex;flex-wrap:wrap;gap:5px}
.bd-qb{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;
  border-radius:20px;cursor:pointer;font-family:inherit;font-size:10.5px;
  font-weight:600;background:#fff;border:1.5px solid var(--line);color:var(--ink-soft)}
.bd-qb:hover{border-color:var(--brass-dk)}
.bd-qb.on{background:var(--navy,#0e2139);border-color:var(--navy,#0e2139);color:#fff}
.bd-qb.off{opacity:.42;cursor:not-allowed;text-decoration:line-through}
/* Customising a set. The fixed parts read as statements, not controls -
   there is nothing to press, and a chip you cannot press is a trap. */
/* 46vh, not the 34vh the other question blocks use: five rows of parts with
   their descriptions measure 299px, which would scroll on a laptop - and
   scrolling to reach the spout is a poor way to offer a choice. */
.bd-set{border-top:1px solid var(--line);background:var(--porcelain2);max-height:46vh}
.bd-fx{display:inline-block;padding:4px 10px;border-radius:5px;
  background:rgba(10,37,64,.05);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;font-weight:700;color:var(--stone)}
.bd-note{padding:2px 0 8px;font-size:10px;line-height:1.45;color:var(--brass-dk)}
/* Sending the list in. */
/* A figure is not a sentence, so it does not get a sentence's width.
   .stk-pill .stk-w pins min-width:7em so a card mixing statuses does not
   stagger - that clears "Extremely low", the longest of the four words. A
   quantity inherited it and sat in a bar four times its own width. (The
   price table never showed this: it already overrides the same rule to 0.)
   1.6em holds one or two digits without the pill collapsing round a single
   character, and three or four digits simply push it wider. */
/* The stock column needs a floor of its own. The cell wraps anywhere - it
   has to, because codes like W2+W3-R-MXB721101X are one unbroken token - and
   that drops its min-content width to a single character, so table-layout
   auto hands it almost nothing and the price columns take the room. The
   status pill used to prop it open at about 72px; the quantity pill is 29px
   and the prop went.

   100px, measured: all 84 codes on the grid need a median of 87px on one
   line, p75 112px, with one 215px outlier that is free text rather than a
   code. 76px left 30% of them wrapping, 92px 20%, 100px 7%, and 112px gains
   nothing over 100 while squeezing six price cells. The remaining 7% are the
   free-text entries no width this card can spare would fit, which is what
   overflow-wrap:anywhere is there for. The cap above matches. */
.pc-ftbl td.stkc{min-width:100px}
/* And the same inside the price table, where the pill is turned into a block
   by #pgrid .pcard:not(.pc-wide) .pc-ftbl td.stkc>span and so fills the
   column whatever it holds. "Low stock" fills 68px of 82 and looks
   deliberate; "23" fills 18px of the same 82 and reads as a bar with a
   number in the corner. Written at that rule's own specificity plus the
   class, or it loses. The WORDING keeps its even bars - a column of them
   reads down - so only the figure shrinks. */
#pgrid .pcard:not(.pc-wide) .pc-ftbl td.stkc>span.stk-pill.stk-qty{display:inline-flex;width:auto}
.stk-pill.stk-qty{justify-content:center}
.stk-pill.stk-qty .stk-w{min-width:1.6em;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* The SAP flyout. Same shell as Ships with; only the figure column is new. */
.pc-sapbtn{border-top:1px solid var(--line-soft)}
/* Grouped by finish: the finish is a heading, not a word repeated on every
   row. The figure on the heading is the one that governs that finish. */
.pc-sapsw .sapg+.sapg{margin-top:7px;padding-top:7px;border-top:1px solid var(--line-soft)}
.sapg-h{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.sapg-h .fsw{flex:none}
.sapg-f{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.sapg-q{margin-left:auto;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.sapg-t{width:100%;border-collapse:collapse}
.sapg-c{padding:1px 0 1px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9.5px;color:var(--stone);overflow-wrap:anywhere}
.sapg-n{padding:1px 0;text-align:right;font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.sapg-gov .sapg-c{color:var(--ink-soft);font-weight:700}
.sapg-q.stk-out,.sapg-n.stk-out{color:#c0392b}
.sapg-q.stk-vlow,.sapg-n.stk-vlow{color:#a8480b}
.sapg-q.stk-low,.sapg-n.stk-low{color:#2f66b0}
.sapg-q.stk-in,.sapg-n.stk-in{color:#176a34}
/* Item Sales: a row opens its deliveries. */
.irt-row{cursor:pointer}
.irt-row:hover{background:var(--porcelain2)}
.irt-row:focus-visible{outline:2px solid var(--brass-dk);outline-offset:-2px}
.ir-dt-name{margin:-6px 0 10px;font-size:12px;line-height:1.5;color:var(--stone)}
.ir-dt-sum{margin:0 0 12px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.ir-dt-tbl td,.ir-dt-tbl th{vertical-align:top}
.ir-dt-d{white-space:nowrap}
.ir-dt-q{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ir-dt-note{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px}
.ir-dt-by{display:block;font-family:inherit;font-size:10px;color:var(--stone)}
.ir-dt-tot{display:block;font-family:inherit;font-size:10.5px;color:var(--ink-soft);font-weight:700}
.ir-dt-tot i{font-style:normal;font-weight:500;color:var(--stone)}
.ir-dt-ret{color:#a15c00}
.ir-dt-foot{margin-top:10px;font-size:11px;line-height:1.5;color:var(--stone)}
.po-send{margin:14px 0 0;padding:15px 16px;background:var(--porcelain2);
  border:1px solid var(--line);border-radius:10px}
.po-send-hd{font-size:13px;font-weight:700;letter-spacing:.01em}
.po-send-sub{margin:3px 0 11px;font-size:11.5px;line-height:1.5;color:var(--stone)}
.po-send-row{margin-bottom:9px}
.po-file{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.po-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.po-file-btn{flex:0 0 auto;padding:6px 13px;border-radius:7px;border:1.5px solid var(--line);
  background:#fff;font-size:11.5px;font-weight:700}
.po-file:hover .po-file-btn{border-color:var(--brass-dk)}
.po-file-name{font-size:11.5px;color:var(--stone)}
.po-file-name.on{color:var(--ink-soft);font-weight:600}
.po-file-name.bad{color:#b4232a;font-weight:600}
.po-send-note{display:block;width:100%;box-sizing:border-box;padding:8px 10px;border-radius:7px;
  border:1.5px solid var(--line);background:#fff;font-family:inherit;font-size:12px;resize:vertical}
.po-send-note:focus{outline:none;border-color:var(--brass-dk)}
.po-send-acts{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
.po-send-msg{font-size:11.5px;font-weight:600}
.po-send-msg.good{color:#1c7a4a}
.po-send-msg.warn{color:var(--brass-dk)}
.po-send-msg.bad{color:#b4232a}
/* A model code and 27-65 characters of SAP description do not fit a pill, so
   these rows are a wrapping grid of small cards instead. Scoped to .bd-set:
   the colour and build rows above are still pills and should stay that way. */
.bd-set .bd-q{align-items:flex-start}
.bd-set .bd-q-v{display:grid;gap:5px;flex:1 1 0;min-width:0;
  /* 196px, not 152: a 34px photo and its gap take 42 of it, and the
     description still has to be readable in what is left. */
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.bd-set .bd-qb,.bd-set .bd-fx{display:flex;align-items:center;gap:8px;
  text-align:left;border-radius:7px;padding:5px 9px;min-width:0}
.bd-qb-ph{flex:none;width:34px;height:34px;border-radius:5px;overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center}
.bd-qb-ph img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
/* the text has to be allowed to shrink, or a long description pushes the
   photo out of the chip instead of wrapping */
.bd-qb-t{flex:1 1 auto;min-width:0}
.bd-qb.on .bd-qb-ph{border-color:rgba(255,255,255,.3)}
.bd-qb-c{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9.5px;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere}
.bd-qb-d{display:-webkit-box;margin-top:2px;font-size:8px;font-weight:500;line-height:1.32;
  color:var(--stone);text-transform:none;overflow:hidden;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.bd-qb.on .bd-qb-c{color:#fff}
.bd-qb.on .bd-qb-d{color:rgba(255,255,255,.74)}
.bd-set .bd-qb-plain{display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;text-align:center}
.bd-price{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:10px 15px;background:var(--porcelain2);
  border-top:1px solid var(--line-soft)}
.bd-price-l{font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--stone)}
.bd-price-v{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.bd-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px;display:grid;gap:10px;align-items:start;align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* A colour row is one code and one price, not five parts with SAP's own
   60-character descriptions - so it needs less than the 240px a build card
   needs, and four colours then sit on one row instead of three and an
   orphan. One per row on a phone, which is where this was asked for, is
   stated in the @media block below rather than left to source order. */
.bd-body-fin{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.bd-opt{display:block;width:100%;text-align:left;font-family:inherit;
  padding:11px 12px;border-radius:9px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);transition:border-color .12s}
/* Nothing to choose, so nothing that invites a click. */
.bd-opt.solo{cursor:default;border-color:var(--line)}
.bd-opt.solo:hover{border-color:var(--line)}
.bd-opt:hover{border-color:var(--brass-dk)}
.bd-opt.on{border-color:var(--brass-dk);background:rgba(176,141,87,.07)}
.bd-opt-top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.bd-opt-n{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25}
/* Beside the colour, before the stock badge - which keeps its margin-left:auto
   and so still sits at the right end of the row. */
.bd-opt-p{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--ink-soft);
  letter-spacing:-.01em}
/* Quiet: it is a correction to the chip above, not a heading of its own. */
.bd-opt-sub{flex:0 1 auto;min-width:0;font-size:9px;font-weight:600;
  color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-opt-sub::before{content:"\00b7";margin:0 5px}
/* No margin-left:auto any more - it is not sharing a line with anything, so
   it starts where the name starts. */
.bd-opt-st{display:inline-block;margin-bottom:7px;font-size:8.5px;font-weight:700;
  padding:2px 7px;border-radius:10px;white-space:nowrap}
.bd-opt-out{color:#c0392b;background:rgba(192,40,40,.12)}
.bd-opt-vlow{color:#a8480b;background:rgba(190,95,15,.14)}
.bd-opt-low{color:#2f66b0;background:rgba(61,120,192,.13)}
.bd-opt-in{color:#176a34;background:rgba(34,139,69,.12)}
.bd-parts{display:block;border-top:1px solid var(--line-soft);padding-top:6px}
/* A column is ~240px, so the code and its description stack rather than
   sharing a line - side by side they left about 90px for a description that
   routinely runs to 60 characters. The dot moves up beside the code, which is
   the line that is always one line. */
.bd-part{display:block;padding:4px 0;position:relative;padding-right:12px}
.bd-part-c{display:block;font-size:9.5px;font-weight:700;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-part-n{display:block;font-size:9px;color:var(--stone);line-height:1.3;
  margin-top:1px}
/* a dot, not a pill: five parts of pills is a wall of colour */
.bd-dot{position:absolute;top:8px;right:0;width:6px;height:6px;border-radius:50%}
.bd-dot.bd-opt-out{background:#c0392b}
.bd-dot.bd-opt-vlow{background:#a8480b}
.bd-dot.bd-opt-low{background:#2f66b0}
.bd-dot.bd-opt-in{background:#176a34}
.bd-foot{flex:0 0 auto;display:flex;gap:9px;padding:12px 14px;
  border-top:1px solid var(--line);background:var(--porcelain2)}
.bd-add{flex:1 1 auto;padding:11px;border:0;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  background:var(--navy,#0e2139);color:#fff}
.bd-add.done{background:#176a34}
.bd-cancel{flex:0 0 auto;padding:11px 16px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;font-family:inherit;font-size:11.5px;
  font-weight:600;background:#fff;color:var(--stone)}

/* On a phone a centred box with a margin all round wastes the one thing
   there is least of. Nearly the whole screen, still centred, still capped so
   the footer cannot leave the viewport. */
/* Columns need width. Below this there is none, so they stack again - four
   columns on a phone is four columns of nothing. */
@media(max-width:900px){
  .bd-body,.bd-body-fin{grid-template-columns:1fr}
  .bd-panel{width:min(560px,94vw)}
}
/* Not full screen. At 100vh the heading sat under the status bar and the
   buttons under the browser chrome - the same centred card reads better and
   keeps both ends of the panel on screen. */
@media(max-width:560px){
  .bd-panel{width:94vw;max-height:84vh}
  .bd-body{padding:10px 12px}
  /* the label above its chips, so four colours get the full width */
  .bd-qs{padding:9px 12px 3px;max-height:30vh}
  .bd-q{display:block;margin-bottom:8px}
  .bd-q-l{display:block;margin-bottom:4px;padding-top:0}
  .bd-price{padding:9px 12px}
}

/* A build's availability, on the chooser. Worst part wins - see
   buildOptStatus. Colours match the stock pills so the dot and the badge
   never say different things. */
.pc-addopt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:5px;vertical-align:middle;flex:0 0 auto}
.pc-addopt-out{background:#c0392b}
.pc-addopt-vlow{background:#a8480b}
.pc-addopt-low{background:#2f66b0}
.pc-addopt-in{background:#176a34}

.stk-sap{font-size:9px;font-weight:600;color:#7a8699;letter-spacing:.01em;
  white-space:nowrap}
/* In the finish table the code sits above its pill; inline in a product
   subtitle it sits beside it. Both were already true for compound
   entries - this only makes sure a single one behaves the same. */
.stkc .stk-multi{display:block}
.stkc .stk-multi+.stk-multi{margin-top:3px}

/* ═══════════════════════════════════════════════════════════════════════
   LIQUID GLASS
   ═══════════════════════════════════════════════════════════════════════
   Three ingredients, and the blur is only one of them. A sheet of glass
   reads as glass because of the light caught along its top edge, the depth
   it casts, and the colour it picks up from behind - a blur on its own just
   looks foggy. So the material here is specular rim + depth + translucency,
   and the live blur is added only where something actually moves behind.

   WHERE THE BLUR GOES, AND WHY NOT EVERYWHERE
   - the bars: cards scroll underneath them, so the blur earns its place
   - the sidebar and the overlays: they sit over the page
   - a product card: there is nothing behind it but the page field, so a
     live blur would tint it and show nothing. It gets the material instead.
     This is also what the note further up this file found the hard way -
     frosting the cards turned them grey-blue against the page.

   EVERY backdrop-filter BELOW IS INSIDE @media(min-width:1025px).
   That is not a preference, it is the safety rule. V13.6 put real backdrop
   blurs on the fixed full-height chrome and retired the tab on the user's
   iPhone. There is a `backdrop-filter:none` guard earlier in this file, but
   this block is appended AFTER it and would out-cascade it - so the guard
   is not relied on. A phone cannot reach these rules at all.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --lg-blur:blur(28px) saturate(185%);
  --lg-blur-lg:blur(46px) saturate(190%);
  /* the lit top edge and the hairline around the sheet */
  --lg-spec:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.45);
  --lg-spec-dark:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08);
  /* depth. Two layers, like the --sh ladder above: contact, then ambient. */
  --lg-lift:0 1px 2px rgba(10,37,64,.06),0 14px 34px rgba(10,37,64,.10);
  --lg-lift-hi:0 2px 6px rgba(10,37,64,.08),0 26px 56px rgba(10,37,64,.16);
  --lg-float:0 8px 20px rgba(10,22,42,.12),0 40px 90px rgba(10,22,42,.26);
  --lg-r:20px;
  --lg-r-lg:26px;
}

/* ── the field the glass picks up ──────────────────────────────────────
   Held still against the scroller (background-attachment:scroll on a
   scrolling box pins the image to the border box) - on `local` it slid
   away with the cards and the page went flat after one screen. */
#scroll{
  background-color:#eef3fa;
  background-image:
    radial-gradient(1200px 760px at 10% -10%, rgba(86,148,255,.40), transparent 60%),
    radial-gradient(1000px 640px at 95% 2%, rgba(255,170,96,.26), transparent 58%),
    radial-gradient(1000px 820px at 55% 108%, rgba(96,196,255,.34), transparent 62%);
  background-attachment:scroll;
  background-repeat:no-repeat;
}

/* ── a card is a sheet, not a window ───────────────────────────────── */
.pcard{
  background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--lg-r);
  box-shadow:var(--lg-spec),var(--lg-lift);
}
.pcard:hover{
  background:linear-gradient(168deg,rgba(255,255,255,.98),rgba(255,255,255,.86));
  border-color:#fff;
  box-shadow:var(--lg-spec),var(--lg-lift-hi);
}

/* ── the chrome, without the blur: colour, edge and depth ──────────── */
#mhdr,#fbar{
  background:rgba(252,253,255,.64);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(10,37,64,.06);
}
#fbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 36px rgba(10,37,64,.08)}
#sb{
  background:linear-gradient(170deg,rgba(9,36,62,.82),rgba(5,24,43,.90));
  box-shadow:var(--lg-spec-dark),1px 0 0 rgba(255,255,255,.06);
  border-right:0;
}
#rigel-ref,#mhdr-badge,#mhdr-company-name{
  background:rgba(255,255,255,.64);
  border-color:rgba(255,255,255,.6);
  border-radius:12px;
  box-shadow:var(--lg-spec),0 1px 3px rgba(10,37,64,.06);
}
/* The filter bar's controls are already one tokenised system - one height,
   one radius, one border, one background, declared at the end of the file
   precisely so later rules do not pick them off one at a time. So they are
   moved by their TOKENS, not by a rule of mine fighting `#fsr input` for
   specificity and losing to it, which is what happened first. */
:root{
  --ctl-r:11px;
  --ctl-bd:rgba(255,255,255,.62);
}

/* ── the panels that float over the page ───────────────────────────── */
.bd-panel{border-radius:var(--lg-r-lg);box-shadow:var(--lg-spec),var(--lg-float)}
.bd-scrim{background:rgba(10,22,42,.38)}
.sd-modal{border-radius:var(--lg-r-lg);box-shadow:var(--lg-spec),var(--lg-float)}
.pc-addpop,.os-panel{border-radius:16px;box-shadow:var(--lg-spec),var(--lg-float)}
/* The sidebar's footer panel is a DARK surface - a translucent white sheet
   on the navy column, with pale text and a translucent white button - so it
   takes the dark rim, and must never be handed a white background. */
.sbf-panel{box-shadow:var(--lg-spec-dark),0 14px 30px rgba(0,0,0,.18)}

/* ── THE LIVE BLUR. Desktop only, by construction. ──────────────────── */
@media(min-width:1025px){
  #mhdr,#fbar{backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
  #sb{backdrop-filter:var(--lg-blur-lg);-webkit-backdrop-filter:var(--lg-blur-lg)}
  #rigel-ref,#mhdr-badge,#mhdr-company-name{
    backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
  /* the bar's controls, addressed with the bar's own selector list so this
     sits at the same specificity and simply comes later */
  #fsr input,#fbar .fd,#fcnt,.pv-sw{
    background:rgba(255,255,255,.62);
    backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-spec),0 1px 3px rgba(10,37,64,.06)}
  /* The overlays. A panel over a dimmed page is the one place the blur is
     unmistakable, so these get the deep one. */
  .bd-panel{background:rgba(255,255,255,.92);
    backdrop-filter:var(--lg-blur-lg);-webkit-backdrop-filter:var(--lg-blur-lg)}
  .sd-modal{background:rgba(255,255,255,.93);
    backdrop-filter:var(--lg-blur-lg);-webkit-backdrop-filter:var(--lg-blur-lg)}
  .pc-addpop,.os-panel,.sbf-panel{
    backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
  /* on the dark column, a touch more of it and no light tint */
  .sbf-panel{background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(143,196,255,.06))}
}

/* ── phones and small tablets: the same material, nothing live ──────
   Opacity comes back in the same breath. A sheet that stops frosting but
   stays 78% transparent is worse than either state, which is the rule the
   earlier guard in this file was written around. */
@media(max-width:1024px){
  .pcard{background:#fff;border-color:rgba(10,37,64,.10)}
  .pcard:hover{background:#fff}
  #mhdr,#fbar{background:#fafbfd}
  #sb{background:linear-gradient(170deg,#09243e,#051829)}
  #rigel-ref,#mhdr-badge,#mhdr-company-name{
    background:#fff;border-color:rgba(10,37,64,.12)}
  /* the controls go back to a solid shell and a drawn border, by token, so
     nothing in the bar is left see-through without a blur behind it */
  :root{--ctl-bd:rgba(10,37,64,.12)}
  #fsr input,#fbar .fd,#fcnt,.pv-sw{background:#fff;box-shadow:none}
  .bd-panel,.sd-modal{background:#fff}
  .pc-addpop,.os-panel{background:#fff}
  /* NOT #fff. It sits on the navy sidebar, which is opaque here, so the
     original translucent white reads correctly over it. */
  .sbf-panel{background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(143,196,255,.07))}
  /* the field stays - it is a gradient, it costs nothing, and it is what
     makes the white sheets read as sheets */
}

/* ── and for anyone who has asked their system for less of this ────── */
@media(prefers-reduced-transparency:reduce){
  #mhdr,#fbar{background:#fafbfd;backdrop-filter:none;-webkit-backdrop-filter:none}
  #sb{background:linear-gradient(170deg,#09243e,#051829);backdrop-filter:none;-webkit-backdrop-filter:none}
  .pcard,.bd-panel,.sd-modal,.pc-addpop,.os-panel,
  #rigel-ref,#mhdr-badge,#mhdr-company-name{
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .sbf-panel{background:#12314f;backdrop-filter:none;-webkit-backdrop-filter:none}
  #fsr input,#fbar .fd,#fcnt,.pv-sw{
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  #scroll{background-image:none;background-color:var(--porcelain)}
}

/* ═══ ACTIVITY: who is on each account ═══════════════════════════════════
   The Activity page already knew all of this - it was spread across an
   eight-column table and a thirteen-column audit trail, which is a record
   rather than an answer. This panel asks the one question that gets asked
   in practice: how many people are on this login, and on what. */
.apx{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:0 0 18px}
.apx-c{
  position:relative;padding:15px 16px 13px;border-radius:var(--lg-r,18px);
  background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--lg-spec),var(--lg-lift);
}
/* An account with more than one person on it at the same moment is the
   thing worth noticing, so it is the thing that is coloured. */
.apx-c.apx-many{border-color:rgba(200,120,20,.42)}
.apx-c.apx-many::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(200,120,20,.30);
}
.apx-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.apx-name{font-weight:800;font-size:13px;color:var(--ink);line-height:1.3;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apx-when{font-size:10.5px;color:var(--stone);white-space:nowrap;flex-shrink:0}
.apx-n{display:flex;align-items:baseline;gap:7px;margin-bottom:11px}
.apx-n b{font-size:30px;line-height:1;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.apx-n span{font-size:11px;color:var(--stone);line-height:1.35}
.apx-c.apx-many .apx-n b{color:#a15c00}
.apx-devs{display:flex;flex-wrap:wrap;gap:6px}
.apx-d{
  display:inline-flex;flex-direction:column;gap:1px;
  padding:5px 9px;border-radius:9px;background:rgba(10,37,64,.045);
  border:1px solid rgba(10,37,64,.07);
}
.apx-d i{font-style:normal;font-weight:700;font-size:10.5px;color:var(--ink-soft)}
.apx-d em{font-style:normal;font-size:9.5px;color:var(--stone)}
.apx-foot{margin-top:10px;font-size:10.5px;line-height:1.5;color:var(--stone)}
.apx-foot strong{color:#a15c00;font-weight:700}
.apx-none{font-size:11px;color:var(--stone-lt);font-style:italic}
.apx-lead{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:2px 0 11px;font-size:11.5px;color:var(--stone);
}
.apx-lead h3{margin:0;font-size:13px;font-weight:800;color:var(--ink)}
@media(max-width:1024px){
  .apx-c{background:#fff;border-color:rgba(10,37,64,.10)}
}
@media(prefers-reduced-transparency:reduce){
  .apx-c{background:#fff}
}

/* ═══ ONE BOX SIZE ══════════════════════════════════════════════════════
   Every price card the same height, with no empty space inside it.

   A row is --pc-h tall (470px) and every card in it stretches to fill. Inside
   the box the PHOTOGRAPH is the filler: it takes whatever height the price
   table does not need, so a card with two finish rows shows a larger
   photograph than one with five, a flat-price card larger still, and the
   Cut Sheet / WELS / IM row sits directly under the content with nothing
   between them. 150px is the least a photograph will ever be.

   WHY NOT grid-auto-rows:1fr, which is what this said first. 1fr makes EVERY
   row as tall as the tallest card on the whole page, and the tallest is one
   cabinet card at 518px - so a single outlier padded all 236 cards to 520.
   It was also measured wrongly: off-screen cards are laid out at their
   content-visibility placeholder, so "every card is 432px" was the
   placeholder talking and the true height only appeared as cards scrolled
   into view, moving the whole grid.
   minmax(--pc-h, auto) fixes both. Rows are a fixed height, a card that
   genuinely needs more makes ITS row taller and no other, so nothing is ever
   clipped; and the placeholder below is the same figure, so a card that
   scrolls in is already the size it was reserved. --pc-h is the tallest
   card's content with its photograph at the 150px floor, measured at the
   narrowest card width (about 400px), where text wraps most. */
#pgrid{--pc-h:470px;align-items:stretch;grid-auto-rows:minmax(var(--pc-h),auto)}
#pgrid > .pcard{align-self:stretch;contain-intrinsic-size:auto var(--pc-h)}
#pgrid .pcard:not(.pc-bomcard) .pc-col>.pc-img{
  flex:1 1 150px;min-height:150px;max-height:none}
#pgrid .pcard .pc-col>.pc-acts{margin-top:auto}
/* A phone shows one card per row, so stretching has nothing to stretch to
   and a fixed row height would only add dead space under the short ones. */
@media(max-width:680px){
  #pgrid{grid-auto-rows:auto}
  #pgrid > .pcard{contain-intrinsic-size:auto 360px}
  #pgrid .pcard:not(.pc-bomcard) .pc-col>.pc-img{flex:0 0 180px;min-height:180px;max-height:180px}
}

/* ═══ BIDET SEAT FIT CHECKER - rebuilt ═══════════════════════════════════
   The page used to carry these rules inside a <style> that rFit() rewrote on
   every render. They live here now, where they are cached once. Rules for the
   shared pieces - the hero, the pills, the dark and white cards - are the ones
   that were already above; this adds what the rebuild needs. */
#fitwrap .fit-pill{display:inline-flex;align-items:center;gap:8px}
#fitwrap .fit-pill-k{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(10,37,64,.07);color:var(--stone)}
#fitwrap .fit-pill.on .fit-pill-k{background:rgba(255,255,255,.18);color:#d4e8ff}
#fitwrap .fcx-seat{margin:0}

/* ── the dark card: what this seat needs ─────────────────────────────── */
#fitwrap .fcx-diagram{display:flex;justify-content:center;padding:14px 10px;margin:0 0 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
#fitwrap .fcx-diagram svg{width:100%;max-width:290px;height:auto;display:block}
#fitwrap .fcx-refhead{font-family:var(--serif);font-size:21px;font-weight:600;color:#fff;letter-spacing:-.3px;line-height:1.1}
#fitwrap .fcx-refname{font-size:12px;color:#b9d8ff;margin:5px 0 9px}
#fitwrap .fcx-kind{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(143,196,255,.16);color:#d4e8ff;margin-bottom:14px}
#fitwrap .fcx-need{display:flex;flex-direction:column}
#fitwrap .fcx-nrow{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
#fitwrap .fcx-nrow:first-child{border-top:1px solid rgba(255,255,255,.12)}
#fitwrap .fcx-nl{font-size:12.5px;font-weight:600;color:#fff;line-height:1.25}
#fitwrap .fcx-nl small{display:block;font-weight:400;color:#9fbfdc;font-size:10.5px;margin-top:2px;line-height:1.35}
#fitwrap .fcx-nv{font-family:var(--serif);font-size:14.5px;font-weight:700;color:#fff;white-space:nowrap}
#fitwrap .fcx-src{margin-top:13px;font-size:10.5px;line-height:1.55;color:#9fbfdc}
#fitwrap .fcx-src b{color:#d4e8ff}
/* the numbered / lettered marker: filled for a measurement, ringed for a calculated one */
#fitwrap .fcx-bdg{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;flex-shrink:0;color:#06223a}
#fitwrap .fcx-bdg.calc{background:transparent!important;border:1.7px solid currentColor}

/* ── the white card: the four measurements ───────────────────────────── */
#fitwrap .fcx-intro{font-size:12px;color:var(--stone);line-height:1.55;margin:-4px 0 6px}
#fitwrap .fcx-field{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft)}
#fitwrap .fcx-fl{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
#fitwrap .fcx-fl label{cursor:pointer}
#fitwrap .fcx-fl small{display:block;font-weight:400;color:var(--stone);font-size:11px;margin-top:3px;line-height:1.4}
#fitwrap .fcx-inwrap{display:flex;align-items:center;gap:6px}
#fitwrap .fcx-in{width:96px;height:44px;text-align:right;border:1.5px solid rgba(10,37,64,.16);border-radius:12px;padding:0 12px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
#fitwrap .fcx-in:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(61,120,192,.16)}
#fitwrap .fcx-in.ok{border-color:#228b45;box-shadow:0 0 0 3px rgba(34,139,69,.13)}
#fitwrap .fcx-in.near{border-color:#c98a1b;box-shadow:0 0 0 3px rgba(201,138,27,.16)}
#fitwrap .fcx-in.no{border-color:#c02828;box-shadow:0 0 0 3px rgba(192,40,40,.13)}
#fitwrap .fcx-opt{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--stone);background:rgba(10,37,64,.06);padding:2px 7px;border-radius:999px;margin-left:6px}
#fitwrap .fcx-calc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
#fitwrap .fcx-calc>div{border:1px dashed rgba(10,37,64,.22);border-radius:14px;padding:11px 13px;background:rgba(10,37,64,.025)}
#fitwrap .fcx-calc span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
#fitwrap .fcx-calc b{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-top:4px;letter-spacing:-.3px}
#fitwrap .fcx-calc em{font-style:normal;font-size:10.5px;color:var(--stone)}
#fitwrap .fcx-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
#fitwrap .fcx-actions .fit-btn{margin-top:0;flex:1}
#fitwrap .fcx-reset{background:none;border:0;font:inherit;font-size:12px;font-weight:600;color:var(--stone);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px}
#fitwrap .fcx-reset:hover{color:var(--ink)}

/* ── the verdict, and each limit drawn against its measurement ────────── */
#fitwrap .fcx-v{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;border-radius:18px;padding:16px 18px;margin-bottom:6px}
#fitwrap .fcx-v.ok{--vc:#228b45;background:rgba(34,139,69,.09);border:1px solid rgba(34,139,69,.32)}
#fitwrap .fcx-v.near{--vc:#c98a1b;background:rgba(201,138,27,.10);border:1px solid rgba(201,138,27,.40)}
#fitwrap .fcx-v.no{--vc:#c02828;background:rgba(192,40,40,.07);border:1px solid rgba(192,40,40,.32)}
#fitwrap .fcx-v.idle{--vc:#3d78c0;background:rgba(10,37,64,.04);border:1px dashed rgba(10,37,64,.22)}
#fitwrap .fcx-vring{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--vc) var(--score),rgba(10,37,64,.09) 0);position:relative;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink)}
#fitwrap .fcx-vring::after{content:'';position:absolute;inset:7px;border-radius:50%;background:#fff}
#fitwrap .fcx-vring span{position:relative;z-index:1}
#fitwrap .fcx-vt strong{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:-.3px;line-height:1.2}
#fitwrap .fcx-vt em{display:block;font-style:normal;margin-top:5px;font-size:12px;color:var(--ink-soft,#41566e);line-height:1.5}
#fitwrap .fcx-c{padding:13px 0;border-bottom:1px solid var(--line-soft)}
#fitwrap .fcx-ch{display:flex;align-items:center;gap:11px}
#fitwrap .fcx-mark{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;flex-shrink:0}
#fitwrap .fcx-mark.ok{background:#228b45}
#fitwrap .fcx-mark.near{background:#c98a1b}
#fitwrap .fcx-mark.no{background:#c02828}
#fitwrap .fcx-ct{flex:1;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25}
#fitwrap .fcx-ct small{display:block;font-weight:400;color:var(--stone);font-size:10.5px;margin-top:2px;line-height:1.4}
#fitwrap .fcx-cv{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap}
#fitwrap .fcg{margin:10px 0 0 32px}
#fitwrap .fcg.ok{--pc:#228b45}
#fitwrap .fcg.near{--pc:#c98a1b}
#fitwrap .fcg.no{--pc:#c02828}
#fitwrap .fcg-track{position:relative;height:8px;border-radius:999px;background:rgba(10,37,64,.10)}
#fitwrap .fcg-band{position:absolute;top:0;bottom:0;border-radius:999px;background:rgba(34,139,69,.40)}
#fitwrap .fcg-pin{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--pc,#228b45);border:2.5px solid #fff;box-shadow:0 1px 5px rgba(10,37,64,.4)}
#fitwrap .fcg-ticks{position:relative;height:14px;margin-top:4px}
#fitwrap .fcg-ticks u{position:absolute;transform:translateX(-50%);font-size:9px;font-weight:600;text-decoration:none;color:var(--stone);white-space:nowrap}

/* ── the other seats that would fit ──────────────────────────────────── */
#fitwrap .fcx-rec{margin-top:14px;border:1px solid rgba(34,139,69,.30);background:rgba(34,139,69,.06);border-radius:var(--r12);padding:14px 16px}
#fitwrap .fcx-rec-h{font-size:12px;font-weight:700;color:#176a34;margin-bottom:10px}
#fitwrap .fcx-rec-list{display:flex;flex-direction:column;gap:8px}
#fitwrap .fcx-rec-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid rgba(34,139,69,.25);border-radius:var(--r8);padding:9px 12px}
#fitwrap .fcx-rec-code{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink)}
#fitwrap .fcx-rec-sub{font-size:10.5px;color:var(--stone);margin-top:1px}
#fitwrap .fcx-rec-btn{font-size:11px;font-weight:600;color:#176a34;background:transparent;border:1px solid rgba(34,139,69,.45);border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap}
#fitwrap .fcx-none{margin-top:14px;border-radius:var(--r12);padding:14px 18px;font-weight:600;font-size:14px;background:rgba(192,40,40,.08);color:#a52727;border:1px solid rgba(192,40,40,.30);line-height:1.35}
@media(max-width:560px){
  #fitwrap .fcx-v{grid-template-columns:60px 1fr;gap:12px;padding:14px}
  #fitwrap .fcx-vring{width:60px;height:60px;font-size:17px}
  #fitwrap .fcx-vring::after{inset:6px}
  #fitwrap .fcx-in{width:84px}
  #fitwrap .fcg{margin-left:0}
}

/* == PRICE TABLE FIT - no scrollbar, and nothing to scroll ===============
   The five-column Distributor table was wider than its card at every card
   width from 345px (the grid's minimum) to 391px: 54 of 54 tables at 345px,
   worst +47px, and each one drew a scrollbar - 15px of height, which is also
   why those cards stood taller than the others.

   What set each column's width was not the figures. "DISCOUNTED" and
   "DISTRIBUTOR" set two columns to 62px for numbers that need 38; the stock
   column was pinned at 100px; the Finish column was held open by an
   unbreakable "Discontinued" chip. Each is loosened below, and the same 54
   tables now fit from 345px up with every row still one line.

   The wrapper keeps overflow-x:auto so that if some future product is wider
   than any of this, it can still be swiped to - the bar is simply not drawn.
   Gain City's seven-column table has its own measured rules above and is left
   alone; it only gets the hidden bar. */
.pc-fwrap{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pc-fwrap::-webkit-scrollbar{display:none;width:0;height:0}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl th{letter-spacing:.03em;font-size:7px}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl td,
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl th{padding-left:2px;padding-right:2px}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl td:first-child{white-space:normal;min-width:0}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl td.stkc{width:auto;max-width:none;min-width:88px;white-space:normal}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl .stk-pill,
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl .stk-pill .stk-w{white-space:normal}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard:not(.pc-wide) .pc-ftbl tr.pc-frow-disc .pc-frow-chip{letter-spacing:.02em;font-size:7px;padding-left:4px;padding-right:4px}

/* A WIDE card (a bundle, or anything with a bill of materials) spans two columns and has room - until a phone, where it is one column and its table was 361px in a 322px card, with the Distributor column cut off at the card edge. Same rules there. */
@media(max-width:680px){
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl th{letter-spacing:.03em;font-size:7px}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl td,
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl th{padding-left:2px;padding-right:2px}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl td:first-child{white-space:normal;min-width:0}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl td.stkc{width:auto;max-width:none;min-width:88px;white-space:normal}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl .stk-pill,
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl .stk-pill .stk-w{white-space:normal}
#pgrid:not(.pg-gc):not(.pg-gcfull) .pcard.pc-wide .pc-ftbl tr.pc-frow-disc .pc-frow-chip{letter-spacing:.02em;font-size:7px;padding-left:4px;padding-right:4px}
}

/* == ONE BOX SIZE, the rest of the way ===================================
   After the tables fit, 210 of 225 single-width cards were exactly the box
   and 15 were not. Two causes, both small.

   1. 'Available in' - the variant list on a Mirror & Cabinet card - gave
   every variant three stacked lines (code, then its stock badge) for ~56px
   an item; five variants made R-BC1260-1 579px tall. Code on the left and
   its badge on the right is ~30px an item, which brings those cards inside
   the box with the photograph still at full size. Only where an item has ONE
   badge: a combination of parts keeps one badge per part, stacked, because
   there the badges are different things and a row of them has nowhere to go.
   :has() is the test, and a browser without it simply keeps the old layout.

   2. The photograph's floor was 150px, and a bundle whose finish rows each
   carry two stock badges needs 474px with the photo at that floor - four
   pixels over the box, which made every card in its row 475px. 130px costs
   the photograph nothing anywhere else: it is a filler and grows to the box. */
.pcl-item:has(.pcl-stk>:only-child){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;padding:5px 0}
.pcl-item:has(.pcl-stk>:only-child):first-child{padding-top:1px}
.pcl-item:has(.pcl-stk>:only-child):last-child{padding-bottom:1px}
.pcl-item:has(.pcl-stk>:only-child) .pcl-code{flex:1 1 140px;min-width:0}
.pcl-item:has(.pcl-stk>:only-child) .pcl-stk{flex:0 0 auto;margin-top:0}
.pcl-item:has(.pcl-stk>:only-child) .pcl-tc{margin-top:0}
#pgrid .pcard:not(.pc-bomcard) .pc-col>.pc-img{flex:1 1 130px;min-height:130px}
@media(max-width:680px){#pgrid .pcard:not(.pc-bomcard) .pc-col>.pc-img{flex:0 0 180px;min-height:180px;max-height:180px}}

/* 3. The shower SETS - a card spanning two columns with seven parts, each part
   its own stock badge. The badges stacked in a 100px column while the three
   price columns beside it were 165-173px wide each, so a set stood 657-736px
   tall and dragged every card sharing its row to the same height.
   Where a stock cell holds four or more badges (:has() counts them), that
   column takes 62% and the badges flow two or three to a line, unpinned from
   the 56px label they share so more of them fit: the table drops from 394-453px
   to 131-161px, and every card in the grid is then one box, wide ones included.
   Four or more, because the kitchen bundle's stock cell is empty and a share of
   the row there only squeezed its Finish column to three lines. Not on a phone,
   where the card is one column wide and the stacked layout is the one that fits.
   A browser without :has() keeps the stacked layout it has today. */
@media(min-width:681px){
#pgrid .pcard.pc-wide .pc-ftbl td.stkc:has(.stk-multi:nth-child(4)){width:62%;white-space:normal}
#pgrid .pcard.pc-wide .pc-ftbl td.stkc:has(.stk-multi:nth-child(4))>span.stk-multi{display:inline-flex;align-items:center;margin:0 10px 3px 0;white-space:nowrap}
#pgrid .pcard.pc-wide .pc-ftbl td.stkc:has(.stk-multi:nth-child(4)) .stk-pill .stk-w{min-width:0}
}

/* == SUBCATEGORY, back on the toolbar ====================================
   It came off on 2026-08-25 (V5.6) and the dropdown row went from three
   columns to two. Three again, with the sizes it had before that - 148-172px
   each, so Category, Subcategory and Finish share one row on a desktop, as
   they did, instead of the third wrapping under the others. On a phone the
   two selects that already shared a row keep it and Finish takes the next row
   whole, which is the cheapest way to fit a third without making any of them
   too narrow to read ("All Categories (236)" is 19 characters). */
#fdds{display:grid!important;grid-template-columns:repeat(3,minmax(148px,172px));gap:8px!important;align-items:center!important}
@media(max-width:1180px){#fdds{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){#fdds{grid-template-columns:1fr 1fr;gap:6px!important}#dfw{grid-column:1/-1}}

/* ═══ ACTIVITY: the rest of the page ═════════════════════════════════════
   Below "Who is on each account" the page was seven folded tables. Each
   block is now a panel in the same material as those cards - a ranking, a
   calendar, a timeline - with its table one click away under "Table". */
.acb{margin:28px 0 0}
.acb-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 11px}
.acb-hd h3{margin:0;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.acb-note{font-size:11.5px;color:var(--stone);line-height:1.4}
.acb-note strong{color:#c0392b;font-weight:700}
.acb-sw{margin-left:auto;align-self:center;display:inline-flex;gap:2px;padding:2px;border-radius:9px;
  background:rgba(10,37,64,.06);border:1px solid rgba(10,37,64,.05)}
.acb-sw button{font:inherit;font-size:10.5px;font-weight:700;color:var(--stone);background:none;border:0;
  padding:4px 11px;border-radius:7px;cursor:pointer}
.acb-sw button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(10,37,64,.14)}
.acb-card{position:relative;border-radius:var(--lg-r,18px);
  background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--lg-spec),var(--lg-lift)}
.acb-empty{padding:26px;text-align:center;font-size:12px;color:var(--stone)}
.acb-foot{font-size:10.5px;line-height:1.5;color:var(--stone);margin:9px 2px 0}
.acb-more{display:block;margin:13px auto 0;font:inherit;font-size:11.5px;font-weight:700;color:var(--brass-dk);
  background:rgba(255,255,255,.75);border:1px solid rgba(10,37,64,.10);border-radius:999px;padding:7px 17px;cursor:pointer}
.acb-more:hover{background:#fff}
.acb-caveat{font-size:11px;color:#7a5c22;background:#fffaf0;border:1px solid #f0e0c0;border-radius:10px;padding:7px 11px;margin:0 0 12px}
.acb .sd-tablewrap{background:#fff}

/* ① accounts, ranked */
.acx{padding:4px 18px 8px}
.acx-hd,.acx-row{display:grid;align-items:center;column-gap:14px;
  grid-template-columns:28px minmax(170px,1.35fr) minmax(130px,1fr) 58px 58px 66px 70px}
.acx-hd{padding:11px 0 9px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.acx-key{display:flex;align-items:center;gap:4px;flex-wrap:wrap;text-transform:none;letter-spacing:0;font-weight:600;font-size:10px}
.acx-key i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-left:6px}
.acx-key i:first-child{margin-left:0}
.acx-key .k30,.acx-bar .b30{background:#cfe0f3}
.acx-key .kwk,.acx-bar .bwk{background:#6f9fd6}
.acx-key .kday,.acx-bar .bday{background:#0A2540}
.acx-row{padding:11px 0;border-top:1px solid var(--line-soft)}
.acx-rank{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--ink-soft);background:rgba(10,37,64,.06)}
.acx-hd ~ .acx-row:nth-child(-n+4):not(.acx-never) .acx-rank{background:var(--ink);color:#fff}
.acx-who{min-width:0}
.acx-who b{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink);min-width:0}
.acx-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acx-who small{display:block;font-size:10.5px;color:var(--stone);margin:2px 0 0 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#c3ccd8}
.acx-today .acx-dot{background:#22a35a;box-shadow:0 0 0 3px rgba(34,163,90,.16)}
.acx-week .acx-dot{background:#3D78C0}
.acx-never .acx-dot{background:transparent;box-shadow:inset 0 0 0 1.5px #b4bdc9}
.acx-bar{position:relative;height:10px;border-radius:5px;background:rgba(10,37,64,.05);overflow:hidden}
.acx-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.acx-num{text-align:right;font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.acx-hd .acx-num{font-size:9.5px}
.acx-zero{color:#b4bdc9;font-weight:600}
.acx-row .acx-d30{font-weight:800}
.acx-row .acx-all{color:var(--stone);font-weight:600}
.acx-never{opacity:.62}

/* ② visits */
.acv{padding:16px 18px 14px}
.acv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:6px}
.acv-stats b{display:block;font-size:22px;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.acv-stats span{display:block;font-size:11px;line-height:1.35;color:var(--stone);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acv-chart{display:flex;gap:3px;height:118px;padding-top:18px;margin-bottom:24px}
.acv-col{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:6px}
.acv-we{background:rgba(10,37,64,.035)}
.acv-b{position:relative;width:78%;max-width:24px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#6f9fd6,#0A2540)}
.acv-today .acv-b{background:linear-gradient(180deg,#52c08a,#177a41)}
.acv-b em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;
  font-style:normal;font-size:9.5px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.acv-d{position:absolute;top:100%;margin-top:6px;font-size:9px;color:var(--stone);white-space:nowrap}
.acv-hours{border-top:1px solid var(--line-soft);padding-top:12px}
.acv-hl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:7px}
.acv-hrow{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.acv-h{height:18px;border-radius:4px}
.acv-h0{background:rgba(10,37,64,.04)}
.acv-hlab{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin-top:4px;font-size:9px;color:var(--stone)}
.acv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
.acv-v{padding:13px 15px 12px;min-width:0}
.acv-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.acv-top b{min-width:0;font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-top span{flex:none;font-size:10.5px;color:var(--stone);white-space:nowrap}
.acv-dur{margin-top:7px;font-size:11px;color:var(--stone)}
.acv-dur strong{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.acv-dur i{display:block;height:4px;border-radius:2px;background:rgba(10,37,64,.06);margin-top:6px;overflow:hidden}
.acv-dur em{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#6f9fd6,#0A2540)}
.acv-meta{font-size:10.5px;color:var(--stone);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-items{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.acv-items span{max-width:100%;font-size:10px;font-weight:600;color:var(--ink-soft);padding:3px 7px;border-radius:7px;
  background:rgba(10,37,64,.045);border:1px solid rgba(10,37,64,.07);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-items .acv-x{background:none;border-color:transparent;color:var(--stone);font-weight:500}

/* ③ sign-ins */
.acs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.acs-stats .acb-card{padding:13px 15px;min-width:0}
.acs-stats b{display:block;font-size:26px;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.acs-stats span{display:block;font-size:11px;line-height:1.35;color:var(--stone);margin-top:6px}
.acs-stats .acs-hot b{color:#c0392b}
.acs-stats .acs-warm b{color:#a15c00}
.acs-list{padding:2px 18px}
.acs-r{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:11px 0;border-top:1px solid var(--line-soft)}
.acs-r:first-child{border-top:0}
.acs-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(34,163,90,.12);color:#177a41}
.acs-ic svg{width:14px;height:14px}
.acs-bad .acs-ic{background:rgba(192,57,43,.12);color:#c0392b}
.acs-main{min-width:0}
.acs-l1{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.acs-l1 b{font-size:12.5px;font-weight:800;color:var(--ink)}
.acs-bad .acs-l1 b{color:#c0392b}
.acs-l1 span{font-size:11px;color:var(--stone)}
.acs-tag{align-self:center;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#a15c00;background:rgba(200,120,20,.13);padding:2px 7px;border-radius:999px}
.acs-f{display:flex;gap:6px;flex-wrap:wrap;padding:13px 0 11px}
.acs-f button{font:inherit;font-size:11px;font-weight:700;color:var(--ink-soft);background:rgba(10,37,64,.05);
  border:1px solid rgba(10,37,64,.07);border-radius:999px;padding:5px 12px;cursor:pointer}
.acs-f button b{font-weight:800;margin-left:2px;font-variant-numeric:tabular-nums}
.acs-f button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.acs-f .acs-fbad b{color:#c0392b}
.acs-f .acs-fnew b{color:#a15c00}
.acs-f .acs-fbad.on{background:#c0392b;border-color:#c0392b}
.acs-f .acs-fnew.on{background:#a15c00;border-color:#a15c00}
.acs-f button.on b{color:#fff}
.acs-f button:disabled{opacity:.45;cursor:default}
.acs-meta{font-size:11px;color:var(--stone);margin-top:3px;overflow-wrap:anywhere}
.acs-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink-soft)}
.acs-after{font-size:11px;color:var(--ink-soft);margin-top:4px;overflow-wrap:anywhere}

/* ④ ⑤ ranked lists: what they look at, what they search for */
.acr-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.acr{padding:15px 17px 11px;min-width:0}
.acr-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.acr-hd b{font-size:12.5px;font-weight:800;color:var(--ink)}
.acr-hd span{font-size:10.5px;color:var(--stone);white-space:nowrap}
.acr-sub{font-size:11px;line-height:1.4;color:var(--stone);margin:3px 0 8px}
.acr-r{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:8px 0 9px;border-top:1px solid var(--line-soft)}
.acr-i{font-size:10.5px;font-weight:800;color:#a3adbb;text-align:center}
.acr-t{min-width:0}
.acr-t b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acr-t small{display:block;font-size:10.5px;color:var(--stone);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acr-n{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.acr-n em{font-style:normal;font-size:11px;font-weight:600;color:var(--stone);margin-left:1px}
.acr-b{grid-column:2 / -1;height:5px;border-radius:3px;background:rgba(10,37,64,.05);margin-top:6px;overflow:hidden}
.acr-b i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#6f9fd6,#0A2540)}
.acr-item .acr-b i{background:linear-gradient(90deg,#52c08a,#177a41)}
.acr-find .acr-b i{background:linear-gradient(90deg,#a593ef,#5b3cc4)}
.acr-miss .acr-b i{background:linear-gradient(90deg,#f0a097,#c0392b)}
.acr-miss .acr-n{color:#c0392b}
.acr-more{font-size:11px;color:var(--stone);padding:8px 0 2px;border-top:1px solid var(--line-soft)}
.acr-empty{font-size:12px;color:var(--stone);padding:16px 0 10px;text-align:center}
.acq-split{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding:13px 17px;margin-bottom:14px;font-size:11.5px;color:var(--stone)}
.acq-bar{flex:1 1 220px;height:10px;border-radius:5px;background:linear-gradient(90deg,#f0a097,#c0392b);overflow:hidden}
.acq-bar i{display:block;height:100%;background:linear-gradient(90deg,#6f9fd6,#0A2540)}
.acq-split b{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.acq-split .acq-miss b{color:#c0392b}

/* ⑥ the timeline. The line runs behind the icons, which are solid so it
   does not show through them. */
.acf{padding:4px 18px 12px}
.acf::before{content:'';position:absolute;left:103px;top:14px;bottom:14px;width:1px;background:rgba(10,37,64,.09)}
.acf-day{position:relative;margin-left:72px;padding:14px 0 6px 34px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.acf-i{display:grid;grid-template-columns:62px 26px minmax(0,1fr);column-gap:10px;align-items:start;padding:6px 0}
.acf-t{padding-top:5px;text-align:right;font-size:11px;font-weight:600;color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap}
.acf-ic{--c:rgba(10,37,64,.08);position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(var(--c),var(--c)),#fff;color:var(--ink-soft);box-shadow:0 0 0 3px #fff}
.acf-ic svg{width:13px;height:13px}
.acf-i .acf-ic{width:22px;height:22px;margin:2px}
.acf-i .acf-ic svg{width:12px;height:12px}
.acf-g{padding:0 0 6px}
.acf-gh{display:grid;grid-template-columns:62px 26px minmax(0,1fr);column-gap:10px;align-items:center;padding:9px 0 3px}
.acf-av{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 3px #fff}
.acf-gh .acf-x{padding-top:0}
.acf-gh .acf-x b{font-size:12.5px}
.acf-in .acf-ic{--c:rgba(34,163,90,.15);color:#177a41}
.acf-bad .acf-ic,.acf-miss .acf-ic{--c:rgba(192,57,43,.14);color:#c0392b}
.acf-item .acf-ic{--c:rgba(15,118,118,.13);color:#0f7676}
.acf-find .acf-ic{--c:rgba(91,60,196,.13);color:#5b3cc4}
.acf-save .acf-ic{--c:rgba(200,120,20,.16);color:#a15c00}
.acf-x{min-width:0;padding-top:3px}
.acf-x span{font-size:12px;line-height:1.45;color:var(--ink-soft);overflow-wrap:anywhere}
.acf-x b{font-weight:800;color:var(--ink)}
.acf-x strong{font-weight:700;color:var(--ink)}
.acf-x em{font-style:normal;color:var(--stone)}
.acf-miss .acf-x em,.acf-bad .acf-x em{color:#c0392b}
.acf-x small{display:block;font-size:10.5px;color:var(--stone);margin-top:1px}

/* narrower: the ranking keeps its numbers and loses its header row */
@media(max-width:1000px){
  .acr-split{grid-template-columns:1fr}
  .acv-stats,.acs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .acx-hd{display:none}
  .acx-row{grid-template-columns:28px minmax(0,1fr) 44px 44px 52px;row-gap:7px}
  .acx-rank{grid-row:1 / span 2}
  .acx-who{grid-column:2 / -1}
  .acx-bar{grid-column:2;grid-row:2}
  .acx-row .acx-all{display:none}
  .acx-row .acx-num::before{content:attr(data-l);display:block;font-size:8px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--stone);margin-bottom:1px}
}
@media(max-width:700px){
  .acv-b em{display:none}
  .acv-d{display:none}
  .acv-col:nth-child(7n+1) .acv-d,.acv-col:last-child .acv-d{display:block}
  .acv-list{grid-template-columns:1fr}
  .acf::before{left:89px}
  .acf-day{margin-left:58px}
  .acf-i,.acf-gh{grid-template-columns:48px 26px minmax(0,1fr)}
}
/* the same material rules as the cards above */
@media(max-width:1024px){
  .acb-card{background:#fff;border-color:rgba(10,37,64,.10)}
}
@media(prefers-reduced-transparency:reduce){
  .acb-card{background:#fff}
}

/* ═══ FIT CHECKER: the drawing sheet ══════════════════════════════════════
   The toilet diagram is drawn as a cut sheet now - graph paper, a frame with
   zone marks, a title block and notes - so it gets the width to be read. */
#fitwrap .fcx-diagram{padding:10px;background:#061f36;border-color:rgba(156,196,238,.22)}
#fitwrap .fcx-diagram svg{max-width:560px}

/* ═══ SALES: three ways to read the months ══════════════════════════════
   Ten distributors with similar figures tangle into one band on a single
   chart, so the default is one small chart each; the combined chart (with
   hover-to-front and a name at each line's end) and a heatmap are switches. */
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.lc-views{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:rgba(10,37,64,.06);border:1px solid rgba(10,37,64,.05)}
.lc-views button{font:inherit;font-size:11px;font-weight:700;color:var(--stone);background:none;border:0;padding:5px 12px;border-radius:7px;cursor:pointer}
.lc-views button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(10,37,64,.14)}
.lc-svg .lc-series{transition:opacity .15s}
.lc-svg:hover .lc-series{opacity:.15}
.lc-svg .lc-series:hover{opacity:1}
.lc-end{font-size:12.5px;font-weight:800;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.lcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:8px}
.lcg-c{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:12px 14px 11px;border-radius:14px;
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--sh1);transition:box-shadow .15s,transform .15s}
.lcg-c:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.lcg-top{display:flex;align-items:center;gap:8px}
.lcg-rank{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(10,37,64,.07);font-size:10px;font-weight:800;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center}
.lcg-c:nth-child(-n+3) .lcg-rank{background:var(--ink);color:#fff}
.lcg-name{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcg-name i{flex:none;width:9px;height:9px;border-radius:3px}
.lcg-sumrow{display:flex;align-items:baseline;gap:8px;margin:7px 0 0 28px}
.lcg-sumrow span{font-size:10px;color:var(--stone)}
.lcg-sum{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lcg-svg{display:block;width:100%;height:auto;margin:8px 0 2px;overflow:visible}
.lcg-x{display:flex;justify-content:space-between;font-size:9.5px;color:var(--stone)}
.lcg-foot{display:block;margin-top:6px;font-size:10.5px;color:var(--stone)}
.lcg-foot b{color:var(--ink-soft);font-weight:700}
.lcg-foot em{font-style:normal;font-weight:800;margin-left:2px}
.lcg-foot em.up{color:#177a41}
.lcg-foot em.dn{color:#c0392b}
.lch-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line-soft);border-radius:12px;background:#fff;box-shadow:var(--sh1)}
/* the gaps between cells are white borders, not border-spacing: spacing at the
   table's edges made it 3px wider than its box, and a scrollbar appeared */
.lch{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px}
.lch thead th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);padding:7px 4px;text-align:center;white-space:nowrap}
.lch thead th:first-child{text-align:left;padding-left:8px}
.lch tbody th{text-align:left;font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;padding:7px 10px 7px 8px;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.lch tbody th i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lch td{text-align:center;padding:9px 6px;border-radius:8px;border:2px solid #fff;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:60px;color:#9aa6b6}
.lch td.lch-tot{position:relative;text-align:right;min-width:120px;padding-right:10px}
/* the leader's bar is 100% wide plus its 6px inset - capped, or it pokes out of its cell */
.lch-tot span{position:absolute;left:6px;top:50%;height:6px;margin-top:-3px;border-radius:3px;opacity:.28;max-width:calc(100% - 12px)}
.lch-tot b{position:relative;color:var(--ink);font-weight:800}
/* narrower: shorter names, tighter cells, and the S$ inside the cells goes (the total keeps it) */
@media(max-width:1200px){.lch tbody th{max-width:140px}.lch td{min-width:0;padding:7px 2px;font-size:10px}.lch td.lch-tot{min-width:86px}.lch-cur{display:none}}


/* == ITEM REPORT: categories as a bar and chips, a richer table ==========
   The tiles were four rows of 125px cards. One bar of shares and one-line
   chips carry the same three facts in about a quarter of the height. */
.irc{margin:2px 0 18px;padding:12px 14px 13px;border:1px solid var(--line-soft);
  border-radius:var(--r12);background:#fff}
.irc-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:9px}
.irc-k{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.irc-sub{font-size:10.5px;color:var(--stone)}
.irc-clear{margin-left:auto;border:1px solid var(--line);background:var(--porcelain2);
  border-radius:20px;padding:3px 10px;font:inherit;font-size:10px;font-weight:700;
  color:var(--ink-soft);cursor:pointer}
.irc-clear:hover{border-color:var(--ink-soft)}
.irc-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;
  background:var(--porcelain2);margin-bottom:11px}
.irc-seg{flex:1 1 0;min-width:3px;border:0;padding:0;cursor:pointer;
  transition:opacity .12s,transform .12s}
.irc-seg:hover{opacity:.8}
.irc-bar.has-on .irc-seg{opacity:.22}
.irc-bar.has-on .irc-seg.on{opacity:1}
.irc-grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.irc-chip{--c:var(--ink-soft);--cs:rgba(10,37,64,.06);
  display:grid;grid-template-columns:8px 1fr auto;grid-template-rows:auto auto;
  align-items:center;column-gap:7px;row-gap:1px;min-width:0;padding:6px 10px 6px 9px;
  border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .12s,background .12s}
.irc-chip:hover{border-color:var(--c)}
.irc-chip.on{border-color:var(--c);background:var(--cs);box-shadow:inset 0 0 0 1px var(--c)}
.irc-dot{grid-column:1;grid-row:1;width:8px;height:8px;border-radius:50%;background:var(--c)}
.irc-n{grid-column:2 / 4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.irc-u{grid-column:2;grid-row:2;font-size:14px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.15}
.irc-p{grid-column:3;grid-row:2;text-align:right;font-size:9.5px;font-weight:600;
  color:var(--stone-lt);font-variant-numeric:tabular-nums}
.irc-all{--c:#0e2139;--cs:rgba(14,33,57,.07)}
.irc-all .irc-dot{background:conic-gradient(#1f5fa8 0 25%,#2f8a4c 0 50%,#c4622d 0 75%,#7a4bb0 0)}

/* the table: a heading with its count, then rows that say more */
.ir-tblhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.ir-tblhead>span:first-child{font-size:14px;font-weight:800;color:var(--ink);text-transform:none}
.ir-tbl-n{font-size:11.5px;font-weight:600;color:var(--stone)}
.ir-tbl-hint{margin-left:auto;font-size:10px;color:var(--stone-lt)}
.irt2 td{padding:9px 12px}
.irt2 thead th{padding:9px 12px}
.irt2 .irt-n{width:34px;text-align:center}
.ir-rank{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:11px;font-size:10.5px;font-weight:700;color:var(--stone);background:var(--porcelain2)}
.irt-top .ir-rank{background:var(--ink);color:#fff}
.irp{display:flex;align-items:center;gap:11px;min-width:280px}
.irp-ph{flex:none;width:46px;height:46px;border-radius:9px;overflow:hidden;background:#fff;
  border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.irp-ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.irp-none{font-size:12px;font-weight:800;letter-spacing:.04em;border-color:transparent}
.irp-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.irp-top{display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px}
.irp-fin{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:var(--stone)}
.irp-fin i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.irp-d{font-size:11px;line-height:1.38;color:var(--stone);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.irt2 .irt-c{width:1%;white-space:nowrap}
.irt2 .irt-t{width:126px}
.irs{display:flex;align-items:flex-end;gap:2px;height:26px;width:118px}
.irs i{flex:1 1 0;height:100%;display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line)}
.irs i b{display:block;width:100%;border-radius:2px 2px 0 0;background:var(--stone-lt);opacity:.35}
.irs i.in b{background:var(--ink-soft);opacity:1}
.irs i.fut{border-bottom-style:dashed}
.irt2 .irt-w{width:150px}
.irw{display:flex;flex-direction:column;gap:3px}
.irw-n{font-size:10.5px;color:var(--stone)}
.irw-n b{font-size:12.5px;color:var(--ink)}
.irw-dots{display:flex;gap:2px}
.irw-dots i{width:9px;height:4px;border-radius:2px;background:var(--line)}
.irw-dots i.on{background:var(--brass-lt)}
.irw-top{font-size:10px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:150px}
.irw-top em{font-style:normal;color:var(--stone-lt)}
.irt2 .irt-k{width:104px}
.irk{display:inline-flex;flex-direction:column;gap:1px;line-height:1.2}
.irk b{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.irk em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:1px 6px;border-radius:4px;align-self:flex-start;white-space:nowrap}
.irk-in em{color:#176a34;background:rgba(34,139,69,.12)}
.irk-low em{color:#2f66b0;background:rgba(61,120,192,.13)}
.irk-vlow em{color:#a8480b;background:rgba(190,95,15,.14)}
.irk-out em{color:#c0392b;background:rgba(192,40,40,.12)}
.irk-na{color:var(--stone-lt)}
.irt2 td.irt-q{width:118px}
.irq{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.irq b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.irq em{font-style:normal;font-size:9.5px;color:var(--stone)}
.irq-wk{font-size:9px;font-weight:700;color:#176a34}
.irq .ir-sbar{width:96px;margin-top:3px}
/* narrower: the columns that are context go first, the item and its figure stay */
/* the category also rides in the product cell, shown once its own column goes */
.irp-cat{display:none}
@media(max-width:1400px){.irt2 .irt-w{display:none}}
@media(max-width:1200px){.irt2 .irt-c{display:none}.irp-cat{display:inline-block}
  .irc-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}.irp{min-width:220px}}
@media(max-width:960px){.irt2 .irt-t{display:none}}
@media(max-width:720px){
  .irc{padding:10px}
  .irc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ir-tbl-hint{display:none}
  .irt2 .irt-k{display:none}
  .irp{min-width:0;gap:9px}
  .irp-ph{width:38px;height:38px}
  .irt2 td{padding:8px 6px}
  .irt2 .irt-n{width:24px}
  .ir-rank{min-width:20px;height:20px;font-size:9.5px}
  .ir-code{white-space:normal;word-break:break-all;font-size:10px}
  .irt2 td.irt-q{width:auto}
  .irq b{font-size:13.5px}
  .irq em{display:none}
  .irq .ir-sbar{width:52px}
  /* five chips and a more, one line each */
  .irc .irc-tog{display:grid}
  .irc:not(.open) .irc-x{display:none}
  .irc-chip{grid-template-rows:auto;padding:7px 9px}
  .irc-n{grid-column:2}
  .irc-u{grid-row:1;grid-column:3;font-size:12px}
  .irc-p{display:none}
}

/* the more chip: phones only */
.irc-tog{display:none;grid-template-columns:1fr;justify-items:center;border-style:dashed;color:var(--ink-soft)}
.irc-tog .irc-n{grid-column:1;text-align:center}
.irc-less{display:none}
.irc.open .irc-less{display:inline}
.irc.open .irc-more{display:none}


/* == BUILD DRAWER: a set laid out for choosing, and item details ==========
   Tiles with a photograph and SAP's words; the order in a column beside;
   a Stock list tab of every model in every colour. */
.bd-panel.bd-sv{width:min(1180px,96vw);height:min(860px,92vh)}
.bd-sv .bd-head{align-items:center}
.bd-head-t{min-width:0}
.bd-hsub{margin-top:3px;font-size:10.5px;color:var(--stone)}
.bd-edit{margin-left:auto;flex:none;border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:6px 12px;font:inherit;font-size:11px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.bd-edit:hover{border-color:var(--ink-soft)}
.bd-edit.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bd-edit+.bd-x{margin-left:8px}
.bd-tabs{flex:none;display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--line-soft)}
.bd-tab{position:relative;border:0;background:none;padding:10px 12px 11px;font:inherit;font-size:12px;
  font-weight:700;color:var(--stone);cursor:pointer}
.bd-tab:hover{color:var(--ink-soft)}
.bd-tab.on{color:var(--ink)}
.bd-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--ink)}
.bd-tab-n{display:inline-block;margin-left:4px;padding:0 6px;border-radius:9px;font-size:10px;
  background:var(--porcelain2);color:var(--stone)}
.bd-sv-main{flex:1 1 auto;min-height:0;display:flex}
.bd-sv-left{flex:1 1 auto;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 16px 20px;background:var(--porcelain)}
.bd-sv-right{flex:0 0 300px;display:flex;flex-direction:column;overflow-y:auto;
  border-left:1px solid var(--line-soft);background:#fff;padding:14px 14px 0}
.bd-grp{margin-bottom:16px}
.bd-grp-h{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.bd-grp-n{font-size:12.5px;font-weight:800;color:var(--ink)}
.bd-grp-c{font-size:10.5px;color:var(--stone)}
.bd-grp-pick{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;font-weight:700;color:var(--brass-lt)}
.bd-tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.bd-tile{position:relative;display:flex;gap:10px;align-items:flex-start;text-align:left;
  padding:10px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  font-family:inherit;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.bd-tile:hover{border-color:var(--brass-lt)}
.bd-tile.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 6px 16px rgba(10,37,64,.10)}
.bd-tile.only{cursor:default}
.bd-tile.only:hover{border-color:var(--line)}
.bd-tile.only.on{border-color:var(--line);box-shadow:none}
.bd-tile-ph,.bd-sum-ph,.bd-stk-img{flex:none;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#fff;border:1px solid var(--line-soft);border-radius:8px}
.bd-tile-ph{width:72px;height:72px}
.bd-tile-ph img,.bd-sum-ph img,.bd-stk-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bd-ph-none{background:var(--porcelain2)}
.bd-ph-none i{width:40%;height:40%;border-radius:50%;border:2px dashed var(--stone-lt);opacity:.6}
.bd-tile-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.bd-tile-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding-right:18px}
.bd-tile-c{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  font-weight:700;color:var(--ink)}
.bd-tile-def{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;background:rgba(176,141,87,.16);color:#7a5a1e}
.bd-tile-d{font-size:10px;line-height:1.38;color:var(--stone)}
.bd-tile-note{display:block;font-size:10px;line-height:1.4;color:var(--ink-soft);
  background:rgba(61,120,192,.07);border-radius:6px;padding:5px 7px}
.bd-tile-note p{margin:0}.bd-tile-note ul{margin:0;padding-left:15px}
.bd-tile-st{margin-top:auto}
.bd-tile-ck{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:11px;line-height:18px;text-align:center}
.bd-tile-none{align-items:center}
/* a stock figure, everywhere in the drawer */
.bd-sk{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
  padding:2px 7px;border-radius:5px;white-space:nowrap}
.bd-sk i{width:6px;height:6px;border-radius:50%;background:currentColor}
.bd-sk b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.bd-sk-na{color:var(--stone-lt);background:var(--porcelain2)}
.bd-sk-na i{display:none}
/* the column beside */
.bd-sum-k{font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--stone);margin:2px 0 7px}
.bd-fins{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.bd-fin{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;font:inherit;cursor:pointer;text-align:left}
.bd-fin:hover{border-color:var(--brass-lt)}
.bd-fin.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bd-fin .fsw{flex:none;width:16px;height:16px;border-radius:50%}
.bd-fin-n{flex:1 1 auto;min-width:0;font-size:12px;font-weight:700;color:var(--ink)}
.bd-fin-n em{display:block;font-style:normal;font-size:9.5px;font-weight:600;color:var(--brass-dk)}
.bd-fin-p{font-size:12px;font-weight:800;color:var(--ink-soft)}
.bd-sdot{flex:none;width:8px;height:8px;border-radius:50%}
.bd-sdot.bd-opt-out{background:#c0392b}.bd-sdot.bd-opt-vlow{background:#a8480b}
.bd-sdot.bd-opt-low{background:#2f66b0}.bd-sdot.bd-opt-in{background:#176a34}
.bd-sum-q{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.bd-sum-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
.bd-sum-list li{display:flex;align-items:center;gap:8px}
.bd-sum-ph{width:30px;height:30px;border-radius:6px}
.bd-sum-c{flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:700;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-verdict{font-size:11px;font-weight:700;line-height:1.4;padding:8px 10px;border-radius:8px;margin-bottom:10px}
.bd-v-in{color:#176a34;background:rgba(34,139,69,.10)}
.bd-v-low{color:#2f66b0;background:rgba(61,120,192,.10)}
.bd-v-out{color:#c0392b;background:rgba(192,40,40,.09)}
.bd-sv-right .bd-price{margin:auto -14px 0;border-top:1px solid var(--line-soft)}
.bd-sv-right .bd-foot{margin:0 -14px;flex-direction:column}
.bd-sv-right .bd-cancel{width:100%}
/* the stock list */
.bd-stk-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px;
  font-size:11px;color:var(--stone)}
.bd-stk-tally{display:inline-flex;flex-wrap:wrap;gap:6px;font-weight:700;color:var(--ink-soft)}
.bd-stk-tally b{padding:1px 7px;border-radius:5px;font-size:10px}
.bd-stk-t{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;font-size:11px}
.bd-stk-t th{position:sticky;top:-14px;z-index:1;background:var(--porcelain2);text-align:left;
  padding:8px 10px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.bd-stk-f .fsw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.bd-stk-f.on{color:var(--ink)}
.bd-stk-t td{padding:8px 10px;border-top:1px solid var(--line-soft);vertical-align:middle}
.bd-stk-g td{background:var(--porcelain);font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);padding:6px 10px}
.bd-stk-t tr.mine td{background:rgba(61,120,192,.05)}
.bd-stk-ph{width:46px}
.bd-stk-img{width:42px;height:42px}
.bd-stk-m{min-width:0}
.bd-stk-c{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;color:var(--ink)}
.bd-stk-in{margin-left:7px;font-size:9px;font-weight:800;color:var(--brass-lt)}
.bd-stk-d{display:block;margin-top:2px;font-size:10px;line-height:1.35;color:var(--stone)}
.bd-stk-m .bd-tile-note{margin-top:5px}
.bd-stk-v{white-space:nowrap}
.bd-stk-v.on{background:rgba(10,37,64,.025)}
.bd-stk-code{display:block;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;color:var(--stone-lt)}
/* item details: read, and edited */
.bd-id{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--line-soft)}
.bd-panel:not(.bd-sv)>.bd-id{margin:10px 14px 0}
.bd-id-k{font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:4px}
.bd-id-t{font-size:12px;line-height:1.5;color:var(--ink-soft)}
.bd-id-t p{margin:0 0 4px}.bd-id-t ul{margin:2px 0 4px;padding-left:18px}
.bd-id-on{border-color:var(--brass-lt);background:rgba(61,120,192,.04)}
.bd-id-ed{display:block}
.bd-id-l{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stone);margin:6px 0 4px}
.bd-id-ta{display:block;width:100%;box-sizing:border-box;min-height:58px;resize:vertical;
  padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;
  font:inherit;font-size:12px;line-height:1.45;color:var(--ink)}
.bd-id-ta:focus{outline:2px solid var(--brass-lt);outline-offset:0;border-color:transparent}
.bd-id-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.bd-id-acts-b{position:sticky;bottom:-20px;padding:10px 0;background:var(--porcelain)}
.bd-id-save{border:0;border-radius:7px;padding:7px 14px;background:var(--ink);color:#fff;
  font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.bd-id-save:disabled{opacity:.6;cursor:wait}
.bd-id-cancel{border:1px solid var(--line);border-radius:7px;padding:6px 12px;background:#fff;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.bd-id-hint{font-size:10px;color:var(--stone)}
.bd-id-tip{margin:0 0 12px;font-size:11px;color:var(--brass-dk)}
.bd-part-note{display:block;margin-top:3px;font-size:9.5px;line-height:1.35;color:var(--ink-soft)}
.bd-part-note p{margin:0}.bd-part-note ul{margin:0;padding-left:14px}
@media(max-width:860px){
  .bd-panel.bd-sv{width:100vw;height:100%;max-height:100%;border-radius:0}
  .bd-sv-main{flex-direction:column;overflow-y:auto}
  .bd-sv-left{overflow:visible;padding:12px}
  .bd-sv-right{flex:none;overflow:visible;border-left:0;border-top:1px solid var(--line-soft)}
  .bd-tiles{grid-template-columns:1fr}
  .bd-tile-ph{width:60px;height:60px}
  .bd-stk-t th{position:static}
  .bd-stk-t .bd-stk-ph{display:none}
  .bd-stk-t td,.bd-stk-t th{padding:7px 6px}
  .bd-stk-code{display:none}
  .bd-stk-v .bd-sk{font-size:9px;padding:2px 5px;gap:4px}
  .bd-stk-c{font-size:10px;word-break:break-all}
}

/* the phone bar: price and Add, always in reach */
.bd-mbar{display:none}
@media(max-width:860px){
  .bd-mbar{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;
    border-top:1px solid var(--line);background:#fff;box-shadow:0 -6px 16px rgba(10,37,64,.06)}
  .bd-mbar-p{display:flex;flex-direction:column;font-size:15px;font-weight:800;color:var(--ink);line-height:1.15}
  .bd-mbar-p em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
  .bd-mbar .bd-add{flex:1 1 auto}
  .bd-sv-right .bd-price,.bd-sv-right .bd-foot .bd-add{display:none}
}


/* == BASIN & CABINET: the waste guide, the waste per basin, the finder ==== */
.wsp-why{margin:-2px 0 14px;font-size:12px;line-height:1.55;color:var(--ink-soft);max-width:110ch}
.wsp-halves{display:grid;grid-template-columns:3fr 4fr;gap:14px;margin-bottom:28px}
.wsp-half{border:1px solid var(--line-soft);border-radius:var(--r12);background:#fff;padding:12px}
.wsp-hh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wsp-hh b{display:block;font-size:13px;color:var(--ink)}
.wsp-hh em{display:block;font-style:normal;font-size:10.5px;color:var(--stone)}
/* a basin's drain seen from above: plain, or with the overflow slot */
.wsp-hico{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink-soft);position:relative;background:#fff}
.wsp-hico::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--ink-soft)}
.wsp-yes .wsp-hico::before{content:"";position:absolute;left:50%;top:-9px;width:8px;height:5px;margin-left:-4px;
  border-radius:3px;background:var(--brass-lt)}
.wsp-cards{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.wsp-card{display:flex;flex-direction:column;gap:0;padding:0;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;overflow:hidden;cursor:zoom-in;text-align:left;font-family:inherit;transition:border-color .12s,box-shadow .12s}
.wsp-card:hover{border-color:var(--brass-lt);box-shadow:var(--sh1)}
/* the product photograph's square on the spec sheet, scaled up and centred */
.wsp-ph{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#fff;border-bottom:1px solid var(--line-soft)}
.wsp-ph img{position:absolute;width:300%;max-width:none;height:auto;left:-183%;top:-78%}
.wsp-b{display:flex;flex-direction:column;gap:4px;padding:8px 9px 9px}
.wsp-b .ac-code{font-size:11px}
.wsp-tags{display:flex;flex-wrap:wrap;gap:4px}
.wsp-tag{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;
  background:var(--porcelain2);color:var(--ink-soft)}
.wsp-fin i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.wsp-size{font-size:10px;color:var(--stone)}
.wsp-use{font-size:9.5px;font-weight:700;color:#176a34}
/* a basin's waste, in its row */
.mg-bwaste{display:flex;flex-wrap:wrap;align-items:center;gap:4px 5px;margin-top:5px}
.mg-bw-k{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-right:2px}
.mg-bw-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:5px;background:#fff;
  padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;font-weight:700;
  color:var(--ink-soft);cursor:zoom-in}
.mg-bw-chip:hover{border-color:var(--brass-lt)}
.mg-bw-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mg-bw-chip em{font-family:var(--sans);font-style:normal;font-size:8.5px;font-weight:600;color:var(--stone)}
.mg-bw-or{font-size:9.5px;color:var(--stone-lt)}
.mg-bw-trap{font-size:9.5px;color:var(--stone);margin-left:4px}
.mg-bwaste-none{display:block;font-size:10px;color:var(--brass-dk)}
.mg-brow-w{padding:6px 0}
/* the finder */
.mg-find{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-4px 0 16px;padding:10px 12px;
  border:1px solid var(--line-soft);border-radius:var(--r12);background:#fff}
.mg-find-k{font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--stone)}
.mg-find-v{display:flex;flex-wrap:wrap;gap:5px;margin-right:10px}
.mg-fc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:4px 11px;font:inherit;font-size:11px;
  font-weight:600;color:var(--ink-soft);cursor:pointer}
.mg-fc:hover{border-color:var(--ink-soft)}
.mg-fc.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mg-widths{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 2px}
.mg-w{font-size:10px;font-weight:700;padding:1px 7px;border-radius:5px;background:var(--porcelain2);color:var(--ink-soft)}
.mg-w.on{background:var(--ink);color:#fff}
.mg-widths em{font-style:normal;font-size:10px;color:var(--stone-lt);margin-left:2px}
.mg-bdim{opacity:.38}
.mg-none{padding:24px;text-align:center;font-size:12.5px;color:var(--stone)}
@media(max-width:900px){.wsp-halves{grid-template-columns:1fr}}
@media(max-width:560px){.wsp-cards{grid-template-columns:repeat(2,1fr)}}


/* == ONE BOX, AND THE PRICE AREA (2026-10-07) ===========================
   Every card is one grid cell. The price this person pays is a solid pill;
   RRP is struck through where a lower price stands beside it. */
#pgrid .pcard.pc-wide{grid-column:auto}
/* a set's parts: one line of badges under each finish's prices */
#pgrid .pc-ftbl-parts tbody tr:not(.pc-stkrow)>td{border-bottom:0}
#pgrid .pc-ftbl tr.pc-stkrow>td{padding:0 6px 5px!important;white-space:normal;background:none!important}
#pgrid .pc-stkparts{display:flex;flex-wrap:wrap;gap:3px 8px;padding:4px 7px;border-radius:7px;background:var(--porcelain2)}
/* a set card gives its photo floor to the parts lines, so it stays one box high */
#pgrid .pcard:not(.pc-bomcard):has(.pc-ftbl-parts) .pc-col>.pc-img{flex-basis:80px;min-height:80px}
@media(max-width:680px){#pgrid .pcard:not(.pc-bomcard):has(.pc-ftbl-parts) .pc-col>.pc-img{flex:0 0 180px;min-height:180px}}
#pgrid .pc-stkparts>span.stk-multi{display:inline-flex!important;align-items:center;gap:4px;margin:0!important;width:auto!important}
#pgrid .pc-stkparts .stk-sap{font-size:8px;font-weight:700;color:var(--ink-soft);letter-spacing:0}
#pgrid .pc-stkparts .stk-pill{font-size:7.5px;padding:1px 5px;letter-spacing:0}
/* The price-area look of v25.4 (navy pill, struck RRP) was rejected: "this UI
   sucks". Back to the earlier look until a new direction is chosen; the
   saving chip the tiles still emit stays hidden. */
#pgrid .ppc-off{display:none}

/* == UNITS DELIVERED: figures, not just shapes ("more useful info") ======
   Under the bars: average a month, the best month, and the trend of the last
   three finished months. Distributors: the top three with their units. Stock:
   how many months it lasts at that pace. */
.irt2 .irt-t{width:158px}
.irs-t{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:5px;min-width:150px;
  font-size:10px;color:var(--stone);white-space:nowrap}
.irs-t b{font-weight:800;color:var(--ink)}
.irs-tr{font-size:9.5px;font-weight:800;padding:0 5px;border-radius:4px;line-height:1.6}
.irs-tr.up{color:#176a34;background:rgba(34,139,69,.12)}
.irs-tr.down{color:#c0392b;background:rgba(192,40,40,.10)}
.irs-tr.flat{color:var(--stone);background:var(--porcelain2)}
.irt2 .irt-w{width:200px}
.irw{gap:3px;min-width:196px}
.irw-r{position:relative;display:flex;align-items:baseline;gap:6px;padding-bottom:3px;font-size:10.5px;color:var(--ink-soft)}
.irw-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irw-r b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.irw-r em{font-style:normal;font-size:9.5px;color:var(--stone-lt);min-width:26px;text-align:right}
.irw-r i{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;background:var(--brass-lt);opacity:.55}
.irw-more{font-size:9.5px;color:var(--stone)}
.irk-cov{display:block;margin-top:2px;font-size:10px;font-weight:700;color:var(--stone);white-space:nowrap}
.irk-cov.c-low{color:#a8480b}
.irk-cov.c-out{color:#c0392b}
@media(max-width:1500px){.irt2 .irt-w{display:none}}


/* == BUILD DRAWER: editing the options (name and components) ============= */
.bd-body.bd-body-off{display:none}
.bd-oe{margin:10px 14px 0;padding:10px 12px 12px;border:1px solid var(--brass-lt);border-radius:10px;background:rgba(61,120,192,.04)}
.bd-oe-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:8px}
.bd-oe-hd .bd-id-k{margin:0}
.bd-oe-where{font-size:10.5px;color:var(--stone)}
.bd-oe-none{font-size:11.5px;color:var(--brass-dk);margin-bottom:8px}
.bd-oe-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.bd-oe-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:7px}
.bd-oe-top{display:flex;align-items:center;justify-content:space-between}
.bd-oe-l{font-size:12px;font-weight:800;color:var(--ink)}
.bd-oe-x{border:0;background:none;font:inherit;font-size:10.5px;font-weight:700;color:#c0392b;cursor:pointer;padding:2px 4px}
.bd-oe-f{display:flex;flex-direction:column;gap:3px}
.bd-oe-f>span{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.bd-oe-f>span em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:var(--stone-lt)}
.bd-oe-n,.bd-oe-c{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit;font-size:12px;color:var(--ink);background:#fff}
.bd-oe-c{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;resize:vertical}
.bd-oe-n:focus,.bd-oe-c:focus{outline:2px solid var(--brass-lt);outline-offset:0;border-color:transparent}
.bd-oe-chk{display:flex;flex-direction:column;gap:2px;font-size:10px}
.bd-oe-chk span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700}
.bd-oe-chk span em{font-family:var(--sans);font-style:normal;font-weight:500;color:var(--stone)}
.bd-oe-chk .ok{color:#176a34}
.bd-oe-chk .bad{color:#a8480b}
.bd-oe-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.bd-oe-err{font-size:11px;font-weight:700;color:#c0392b}
.bd-oe-ok{font-size:11px;font-weight:700;color:#176a34}

/* A merged card with six rows (NR-LV7035: three stones x two sizes) gives
   some of its photo floor to the table, so it stays one box high. */
#pgrid .pcard:not(.pc-bomcard):has(.pc-ftbl tbody tr:nth-child(6)) .pc-col>.pc-img{flex-basis:104px;min-height:104px}
@media(max-width:680px){#pgrid .pcard:not(.pc-bomcard):has(.pc-ftbl tbody tr:nth-child(6)) .pc-col>.pc-img{flex:0 0 180px;min-height:180px}}


/* == PRICE CARDS: hold and drag to arrange =============================== */
#pgrid > .pcard.pc-holding{transform:scale(.985)}
#pgrid > .pcard.pc-dragging{opacity:.38;outline:2px dashed var(--brass-lt);outline-offset:-2px;transform:none}
#pgrid .pcard img{-webkit-touch-callout:none}
body.pc-drag-on,body.pc-drag-on *{-webkit-user-select:none;user-select:none;cursor:grabbing!important}
.pc-ghost{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;border-radius:10px;background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(10,37,64,.26);font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap}
.pc-ghost img{width:38px;height:38px;object-fit:contain;border-radius:6px;background:#fff}
.pc-order-reset{margin-left:8px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:3px 10px;
  font:inherit;font-size:10.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.pc-order-reset:hover{border-color:var(--ink-soft)}
.pc-order-tip{margin-left:8px;font-size:10.5px;color:var(--stone-lt)}
@media(max-width:680px){.pc-order-tip{display:none}}


/* == REBATE RAIL: the Excel download beside each company's progress ====== */
.sd-tiers-title.has-tool{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tt-xl{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;
  border:1px solid #1d6f42;background:#fff;color:#1d6f42;font-size:11px;font-weight:700;letter-spacing:.02em;
  text-transform:none;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.tt-xl:hover{background:#1d6f42;color:#fff}

/* == FILTER BAR: one system (v26.6) =======================================
   "Make the UI actually fit, same design": the dropdowns stopped short of the
   bar (three 224px columns in 804px) with Finish narrower than the other two;
   Reset card order was a 19px chip inside a 36px box; Sync prices carried its
   own inline grey 21px style. Every control is now the bar's own glass shell,
   36px, and each row runs the full width. */
@media(min-width:721px){
  #fbar{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px}
  #fbar>#fsr{flex:1 1 100%;min-width:0}
  #fbar>#fdds{flex:1 1 100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;align-items:end!important}
  #fbar #fdds .fw{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0}
  #fbar #fdds .fl{text-align:left;padding-left:3px}
  #fbar #fdds .fd,#fbar #fdds .fdd,#fbar #fdds .fdd-btn{width:100%;max-width:none;min-width:0}
  /* the stock filter takes what the row has left; the admin controls follow it,
     or wrap beneath it with Sync at the far end */
  #fbar>#fcnt{flex:1 1 auto;width:auto!important;display:flex}
  #fbar>#sync-btn{margin-left:auto}
}
#fcnt .pc-order-reset{margin-left:auto;height:26px;display:inline-flex;align-items:center;gap:5px;padding:0 10px;
  border-radius:7px;border:1px solid rgba(10,37,64,.12);background:#fff;font-size:11px;font-weight:600;color:#52657a}
#fcnt .pc-order-reset:hover{border-color:#0A2540;color:#0A2540}
#fcnt .pc-order-tip{margin-left:auto}
#sync-btn.fbar-btn{align-items:center;justify-content:center;gap:7px;height:var(--ctl-h);padding:0 14px;border-radius:11px;
  border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.45),0 1px 3px rgba(10,37,64,.06);
  font-family:inherit;font-size:var(--ctl-fs);font-weight:var(--ctl-fw);color:#0A2540;cursor:pointer;white-space:nowrap}
#sync-btn.fbar-btn:hover{background:#fff}
#sync-btn.fbar-btn[disabled]{opacity:.6;cursor:progress}


/* == SAP STOCK flyout, clearer (v26.6) =====================================
   Each colour a small block: name, status in words, total in units; each SAP
   row a bar of its share with its number in plain ink (a 7 that is part of
   80 is not a warning). Sets keep their row colours and name the limit. */
.pc-sapsw .sapg-how{margin:2px 0 10px;padding:7px 9px;border-radius:7px;background:rgba(10,37,64,.04);
  font-size:9.5px;line-height:1.45;color:var(--stone)}
.pc-sapsw .sapg{border:1px solid var(--line-soft);border-radius:9px;padding:8px 10px 7px;background:#fff}
.pc-sapsw .sapg+.sapg{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.pc-sapsw .sapg-h{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pc-sapsw .sapg-f{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pc-sapsw .sapg-st{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;white-space:nowrap;
  background:rgba(10,37,64,.06);color:var(--ink-soft)}
.pc-sapsw .sapg-st.stk-in{background:#e7f5ec;color:#176a34}
.pc-sapsw .sapg-st.stk-low{background:#e8f0fb;color:#2f66b0}
.pc-sapsw .sapg-st.stk-vlow{background:#fdf0e4;color:#a8480b}
.pc-sapsw .sapg-st.stk-out{background:#fbe9e7;color:#c0392b}
.pc-sapsw .sapg-q{margin-left:auto;font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:baseline;gap:3px}
.pc-sapsw .sapg-q small{font-size:8.5px;font-weight:600;color:var(--stone-lt);text-transform:uppercase;letter-spacing:.06em}
.pc-sapsw .sapg-rows{display:grid;gap:4px}
.pc-sapsw .sapg-r{display:grid;grid-template-columns:minmax(0,1fr) 54px 30px;align-items:center;gap:8px}
.pc-sapsw .sapg-c{padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;
  color:var(--ink-soft);overflow-wrap:anywhere}
.pc-sapsw .sapg-c em{margin-left:6px;font-style:normal;font-family:Inter,sans-serif;font-size:8.5px;font-weight:700;
  color:#a8480b;text-transform:uppercase;letter-spacing:.05em}
.pc-sapsw .sapg-bar{height:5px;border-radius:3px;background:rgba(10,37,64,.07);overflow:hidden}
.pc-sapsw .sapg-bar i{display:block;height:100%;border-radius:3px;background:#5d7a99}
.pc-sapsw .sapg-bar i.stk-in{background:#2e8b57}.pc-sapsw .sapg-bar i.stk-low{background:#2f66b0}
.pc-sapsw .sapg-bar i.stk-vlow{background:#c8681d}.pc-sapsw .sapg-bar i.stk-out{background:#c0392b}
.pc-sapsw .sapg-n{padding:0;text-align:right;font-size:11px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pc-sapsw .sapg-gov .sapg-c{font-weight:700}


/* == REBATE RAIL: the credit-note form, ready to paste (v26.7) ============ */
.tt-cn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;border:1px solid #0A2540;
  background:#fff;color:#0A2540;font:inherit;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;
  white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.tt-cn:hover{background:#0A2540;color:#fff}
.sd-tiers-title.has-tool .tt-cn{margin-left:auto}
.sd-tiers-title.has-tool .tt-cn+.tt-xl{margin-left:0}
.cnf{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;padding:12px 14px}
.cnf[hidden]{display:none}
.cnf-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cnf-head strong{font-size:12.5px;color:var(--ink)}
.cnf-head span{font-size:10.5px;color:var(--stone)}
.cnf-all{margin-left:auto;border:1px solid var(--line);border-radius:7px;background:#fff;padding:4px 10px;font:inherit;
  font-size:10.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.cnf-all.on{background:#176a34;border-color:#176a34;color:#fff}
.cnf-rows{display:grid;gap:3px}
.cnf-sec{margin:6px 0 1px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7c8ba0}
.cnf-r{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;background:#fff;
  border:1px solid rgba(10,37,64,.06)}
.cnf-l{font-size:11px;font-weight:700;color:var(--ink-soft)}
.cnf-v{font-size:12px;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cnf-ml{white-space:pre-line;line-height:1.4}
.cnf-c{border:1px solid var(--line);border-radius:7px;background:#fff;padding:4px 11px;font:inherit;font-size:10.5px;font-weight:700;
  color:#0A2540;cursor:pointer;text-decoration:none;white-space:nowrap}
.cnf-c:hover{border-color:#0A2540}
.cnf-c.on{background:#176a34;border-color:#176a34;color:#fff}
@media(max-width:640px){.cnf-r{grid-template-columns:minmax(0,1fr) auto}.cnf-l{grid-column:1 / -1}}


/* == Documents fit, and open full screen (v26.8) ===========================
   A SAP cut sheet is drawn into page images now (no iframe), so it fits the
   window like a catalogue sheet. Every document page opens a full-screen
   viewer on tap. No backdrop-filter: phones (see the iOS note above). */
#mbody img.mimg{cursor:zoom-in;-webkit-touch-callout:default}
.sap-cut-page{margin:0}
.sap-cut-wait{min-height:220px}
.doc-fs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.doc-fs-btn{display:inline-flex;align-items:center;gap:6px}
.doc-fs-pdf{font-size:11.5px;font-weight:600;color:var(--brass-lt);text-decoration:none}
.doc-fs-pdf:hover{text-decoration:underline}
.doc-fs-tip{margin-left:auto;font-size:10.5px;color:var(--stone-lt)}
@media(max-width:560px){.doc-fs-tip{display:none}}
html.dv-on,html.dv-on body{overflow:hidden}
.dv{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:#0d1420}
.dv-bar{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));
  background:#0A2540;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.dv-ttl{font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dv-pg{font-size:11px;color:rgba(255,255,255,.65);white-space:nowrap}
.dv-z{margin-left:auto;display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:9px;overflow:hidden}
.dv-z button{border:0;background:transparent;color:#fff;font:inherit;font-size:15px;font-weight:700;min-width:40px;height:34px;padding:0 10px;cursor:pointer}
.dv-z button[data-z="fit"]{font-size:12px;border-left:1px solid rgba(255,255,255,.2);border-right:1px solid rgba(255,255,255,.2)}
.dv-z button:hover{background:rgba(255,255,255,.12)}
.dv-x{border:0;background:rgba(255,255,255,.12);color:#fff;width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;flex:none}
.dv-x:hover{background:rgba(255,255,255,.22)}
.dv-scroll{position:relative;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior:contain}
.dv-pages{padding:8px;min-width:min-content}
.dv-img{display:block;margin:0 auto 8px;max-width:none;height:auto;background:#fff;border-radius:4px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);user-select:none;-webkit-user-select:none;cursor:zoom-in}
.dv.dv-zoomed .dv-img{cursor:zoom-out}

/* == CN form, laid out like finance's form (v26.9) ========================
   Field boxes in the form's order on a six-column grid, each with a span for
   a wide panel (sN) and one for a narrow panel (nN), its label inside it. A
   box copies on click. */
.cnf{container-type:inline-size;margin-top:12px;padding:0;border:1px solid #dfe6ef;border-radius:10px;background:#fff;overflow:hidden}
.cnf-top{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#f6f9fd;border-bottom:1px solid #e6ecf3}
.cnf-top>div{min-width:0}
.cnf-top strong{display:block;font-size:12px;font-weight:800;color:#0b3a75}
.cnf-top span{display:block;font-size:9.5px;color:#6b7a8c;margin-top:1px}
.cnf-top .cnf-all{margin-left:auto;flex:none}
.cnf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:7px 8px 8px}
.cnf-box{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;height:31px;padding:0 18px 0 7px;
  border:1px solid #d5dde8;border-radius:6px;background:#fff;font:inherit;color:#111827;text-align:left;cursor:copy;
  text-decoration:none;transition:border-color .12s,background .12s}
.cnf-box.s1{grid-column:span 1}.cnf-box.s2{grid-column:span 2}.cnf-box.s3{grid-column:span 3}
.cnf-box.s4{grid-column:span 4}.cnf-box.s6{grid-column:1 / -1}
.cnf-box:hover{border-color:#0b3a75;background:#f8fbff}
.cnf-lb{font-size:8.5px;font-weight:700;letter-spacing:.02em;color:#6b7a8c;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnf-bv{font-size:11px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cnf-gt .cnf-bv{color:#0b3a75;font-weight:800}
.cnf-ic{position:absolute;right:5px;top:50%;width:11px;height:11px;margin-top:-5.5px;opacity:.35;
  background:no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='9' height='9' rx='1.5' fill='none' stroke='%230b3a75' stroke-width='1.6'/%3E%3Cpath d='M3 11V3.5C3 2.7 3.7 2 4.5 2H11' fill='none' stroke='%230b3a75' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.cnf-ic-dl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v8m0 0L4.8 6.8M8 10l3.2-3.2M3 13.5h10' fill='none' stroke='%230b3a75' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cnf-box:hover .cnf-ic{opacity:.9}
.cnf-dl{cursor:pointer}
.cnf-box.on{border-color:#16a34a;background:#f0fbf3}
.cnf-box.on .cnf-ic{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cnf-box.bad{border-color:#c0392b}
.cnf-sec{grid-column:1 / -1;margin:2px 0 -2px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0b3a75}
/* the narrow panel - the site and the form side by side */
@container (max-width:560px){
  .cnf-box.n2{grid-column:span 2}.cnf-box.n3{grid-column:span 3}
  .cnf-box.n4{grid-column:span 4}.cnf-box.n6{grid-column:1 / -1}
  .cnf-gt{order:20}
  .cnf-grid>.cnf-box:last-child{order:21}
}
@container (max-width:300px){
  .cnf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnf-box.n2,.cnf-box.n3{grid-column:span 1}
}
/* tighter: one-line header, 29px boxes */
.cnf-top{padding:5px 9px}
.cnf-top>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cnf-top span{margin-top:0}
.cnf-box{height:29px}
.cnf-grid{padding:6px 7px 7px}
.cnf-sec{margin:1px 0 -3px}

/* == Filter bar, second pass (v27.0) =======================================
   "The box is gone sometimes": the view switch's navy box was a separate
   sliding thumb sized by measuring the active button - measured while the bar
   was hidden it came out 0px wide and stayed that way. The active button
   carries the fill itself now, so it cannot go missing.
   "Make this part smaller": the stock filter is a compact strip as wide as
   its contents, 30px, on its own row; the drag hint is gone from it. */
.asw-thumb{display:none!important}
.asw-btn{transition:color .2s,background .2s,box-shadow .2s}
.asw-btn.on{background:linear-gradient(135deg,#0d3f68,#0A2540);color:#fff;
  box-shadow:0 2px 8px rgba(10,37,64,.28),inset 0 1px 0 rgba(255,255,255,.16)}
#fcnt .fc-num{font-size:11px}
#fcnt .fout-row{gap:9px}
#fcnt .fout{font-size:10.5px;gap:4px}
#fcnt .fout input{width:12px;height:12px;margin:0}
#fcnt .pc-order-tip{display:none}
#fcnt .pc-order-reset{margin-left:4px;height:22px;padding:0 8px;font-size:10px}
#fbar-br{display:none}
@media(min-width:721px){
  /* the break is a line of its own, and a line cannot be negative: the
     strip gives up the gap the break adds, so the rows stay 10px apart */
  #fbar>#fcnt{flex:0 0 auto;height:30px;padding:0 11px;gap:10px;margin-bottom:-10px}
  #fbar>#fbar-br{display:block;flex-basis:100%;height:0}
}

/* == Filter bar on a wide screen: two rows, not four (v27.1) ===============
   "Too much empty space" at 2000px: search, the three dropdowns, a short
   stock strip and the admin controls each had a row to themselves. Above
   1500px the search shares a row with the dropdowns and the stock strip with
   the admin controls; Sync stays at the far end. */
@media(min-width:1500px){
  #fbar{align-items:flex-end!important}
  #fbar>#fsr{flex:1 1 340px;min-width:280px}
  #fbar>#fdds{flex:2 1 620px}
  #fbar>#fbar-br{display:none}
  /* level with the dropdown boxes (36px) when it shares their row */
  #fbar>#fcnt{align-self:flex-end;margin-bottom:3px}
  #fbar>#admin-swap,#fbar>#privacy-toggles,#fbar>#gc-stock-dl,#fbar>#sync-btn{align-self:center}
}


/* == ETA: stock arrivals (admin, v27.3) ==================================== */
#etawrap{max-width:none}
.eta-head{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.eta-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.eta-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.eta-tile b{font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.eta-tile span{font-size:11px;color:var(--stone)}
.eta-tile.bad b{color:#c0392b}
.eta-src{font-size:10.5px;color:var(--stone);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.eta-src span{background:rgba(10,37,64,.05);border-radius:6px;padding:1px 7px}
.eta-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.eta-tabs{display:inline-flex;padding:3px;border-radius:10px;background:rgba(10,37,64,.06)}
.eta-tabs button{border:0;background:transparent;font:inherit;font-size:12px;font-weight:700;color:#52657a;padding:7px 14px;border-radius:7px;cursor:pointer}
.eta-tabs button.on{background:linear-gradient(135deg,#0d3f68,#0A2540);color:#fff}
.eta-q{margin-left:auto;height:34px;min-width:240px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit;font-size:12.5px}
.eta-tw{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:auto}
.eta-t{width:100%;border-collapse:collapse;font-size:12px}
.eta-t th{position:sticky;top:0;background:#f6f9fd;text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7a8c;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.eta-t td{padding:7px 10px;border-bottom:1px solid rgba(10,37,64,.06);vertical-align:top}
.eta-t tr:last-child td{border-bottom:0}
.eta-t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.eta-t .n small{font-size:9px;color:var(--stone);margin-left:1px}
.eta-t .d{white-space:nowrap}
.eta-t .d b{display:block;font-size:12px}
.eta-t .c{display:block;font-weight:700;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}
.eta-t .nm{display:block;font-size:10px;color:var(--stone);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eta-t .po{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px}
.eta-t .sr{display:block;font-size:10px;color:var(--stone)}
.eta-t tr.short td{background:#fff7f6}
.eta-t .late{color:#c0392b;font-weight:700}
.eta-t .mut,.eta-ship .mut{color:var(--stone-lt)}
.eta-in{display:inline-block;margin-top:2px;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:9px;background:rgba(10,37,64,.06);color:#52657a}
.eta-in.soon{background:#e7f5ec;color:#176a34}
.eta-in.today{background:#0A2540;color:#fff}
.eta-in.late{background:#fbe9e7;color:#c0392b;margin-left:6px}
.eta-t .d .eta-in.late{margin-left:0}
.eta-ships{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.eta-ship{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.eta-sh-h{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:#f6f9fd;border-bottom:1px solid var(--line)}
.eta-sh-h strong{display:block;font-size:12.5px;color:var(--ink)}
.eta-sh-h span{display:block;font-size:10.5px;color:var(--stone)}
.eta-sh-d{margin-left:auto;text-align:right;white-space:nowrap}
.eta-sh-d b{display:block;font-size:12.5px}
.eta-sh-d.pend{font-size:11px;font-weight:700;color:#a8480b;white-space:normal;max-width:180px}
.eta-sh-n{padding:6px 12px;font-size:10.5px;color:#7a5a12;background:#fffaf0;border-bottom:1px solid var(--line)}
.eta-t.sm td{padding:5px 12px}
.eta-half{display:inline-block;margin:0 5px 2px 0;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:8px;background:#e8f0fb;color:#2f66b0}
.eta-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--stone)}
.eta-empty strong{display:block;font-size:15px;color:var(--ink);margin-bottom:6px}
@media(max-width:820px){.eta-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.eta-q{min-width:0;flex:1 1 100%;margin-left:0}.eta-t .nm{max-width:200px}}


/* == ETA: last sync + Sync now; the cards' ETA rail (v27.5) ================ */
.eta-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:11.5px;color:var(--ink-soft)}
.eta-sync-dot{width:8px;height:8px;border-radius:50%;background:#c8681d;flex:none}
.eta-sync-dot.ok{background:#2e8b57}
.eta-sync-auto{font-size:10.5px;color:var(--stone)}
.eta-sync-pend{font-size:10.5px;font-weight:700;color:#a8480b}
.eta-sync-btn{margin-left:auto;height:30px;padding:0 13px;border:1px solid #0A2540;border-radius:8px;background:#0A2540;color:#fff;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.eta-sync-btn:hover{background:#13335A}
.eta-sync-btn[disabled]{opacity:.55;cursor:default}
.eta-empty{margin-top:10px}
.pc-etabtn{border-top:1px solid var(--line-soft)}
.pc-etabtn.soon .pc-swbtn-n{background:#2e8b57;color:#fff}
.pc-etasw .etag+.etag{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.pc-etasw .etag-h{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pc-etasw .etar{border:1px solid var(--line-soft);border-radius:8px;padding:6px 8px;margin-bottom:5px;background:#fff}
.pc-etasw .etar-c{display:flex;align-items:baseline;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:700;color:var(--ink-soft);margin-bottom:3px}
.pc-etasw .etar-c span{margin-left:auto;font-family:Inter,sans-serif;font-size:9.5px;font-weight:600;color:var(--stone)}
.pc-etasw .etar-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;font-size:11px;color:var(--ink);padding:1px 0}
.pc-etasw .etar-k{flex:0 0 58px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
.pc-etasw .etar-m{flex:1 1 100%;padding-left:64px;font-size:10px;color:var(--stone)}
.pc-etasw .etar-l .eta-in{margin-top:0}
.pc-etasw .etar-l.bad,.pc-etasw .etar-l.bad .etar-k{color:#c0392b}
.pc-etasw .pend{color:#a8480b}


/* == ETA panel as a timeline (v27.6) ======================================= */
.pc-etasw .etar{padding:8px 10px}
.pc-etasw .etar-c{margin-bottom:6px}
.etat{position:relative}
.etat-r{position:relative;display:grid;grid-template-columns:64px 14px minmax(0,1fr);align-items:start;padding-bottom:9px}
.etat-r:last-child{padding-bottom:2px}
/* the line joining the dots */
.etat-r:not(:last-child)::after{content:'';position:absolute;left:70px;top:13px;bottom:-1px;width:2px;background:rgba(10,37,64,.10)}
.etat-d{font-size:10px;font-weight:700;color:var(--stone);line-height:1.35;padding-top:1px;white-space:nowrap}
.etat-dot{width:10px;height:10px;margin:3px 0 0 1px;border-radius:50%;background:#9aa8b8;box-shadow:0 0 0 2px #fff;position:relative;z-index:1}
.etat-b{min-width:0}
.etat-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11.5px;color:var(--ink);line-height:1.35}
.etat-h .eta-in{margin-top:0}
.etat-m{font-size:10.5px;color:var(--stone);line-height:1.45;margin-top:1px}
.etat-r.k-now .etat-dot{background:#0A2540}
.etat-r.k-out .etat-dot{background:#c0392b}
.etat-r.k-out .etat-h,.etat-r.k-out .etat-d{color:#c0392b}
.etat-r.k-out .etat-m{color:#b0473b}
.etat-r.k-in .etat-dot{background:#2e8b57}
.etat-r.k-in .etat-h b{color:#176a34}
.etat-r.k-ship .etat-dot{background:#2f66b0}
.etat-r.k-plan .etat-dot{background:#fff;border:2px dashed #2f66b0;width:10px;height:10px;box-sizing:border-box}
.pc-etasw .etar-f{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line-soft);font-size:10px;color:var(--stone);line-height:1.45}


/* == Item Sales by series (v27.7) ========================================== */
.ir-tog-s{margin-left:6px}
.ir-ser{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:9px;background:#0A2540;color:#fff;white-space:nowrap}
.ir-ser-car{font-size:9px;transition:transform .15s}
.irt-ser.open .ir-ser-car{transform:rotate(180deg)}
.ir-sfins{display:inline-flex;gap:3px;align-items:center}
.ir-sfins i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px rgba(10,37,64,.18)}
.irt-ser.open td{background:#f6f9fd}
.irt-sub td{background:#fbfcfe;border-top:1px dashed rgba(10,37,64,.08)}
.irt-sub .ir-code{font-size:.95em}
.irt-sub .irp-d{font-size:.92em}
.ir-subm{display:inline-block;color:var(--stone-lt);font-size:14px;padding-left:6px}


/* == Sales Dashboard: one range, on the Show row (v27.8) =================== */
.lc-rangegrp{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:6px}
.lc-rangegrp .sd-filterlbl{margin:0}


/* == Sidebar in four foldable groups (v27.8) =============================== */
body.sb-grouped #sb-nlbl,body.sb-grouped #sb-nlbl2,body.sb-grouped #sb-rule2,body.sb-grouped #sb-nav2{display:none!important}
.sbg{margin-top:4px}
.sbg+.sbg{margin-top:10px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}
.sbg-h{display:flex;align-items:center;width:100%;padding:8px 12px 7px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#9bb1c8;text-align:left;border-radius:6px}
.sbg-h:hover{color:#fff;background:rgba(255,255,255,.04)}
.sbg-h span{flex:1}
.sbg-car{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 4px 0 0;transition:transform .18s}
.sbg.folded .sbg-car{transform:rotate(-45deg);margin-top:1px}
.sbg-b{display:flex;flex-direction:column;gap:1px}
.sbg.folded .sbg-b{display:none}
/* a folded group still shows the page that is open in it */
.sbg.folded.has-on .sbg-b{display:flex}
.sbg.folded.has-on .sbg-b .ni:not(.on){display:none!important}


/* == ETA: "nothing on order" said, not left out (v27.9) ===================== */
.etat-r.k-none .etat-dot{background:#fff;border:2px solid #9aa7b6;width:10px;height:10px;box-sizing:border-box}
.etat-r.k-none .etat-h b{color:#5b6b7e}
.pc-etabtn.none .pc-swbtn-n{background:#eef1f5;color:#7a8797}


/* == Admin: SAP items not on the price list, under the grid (v27.9) ========= */
#sapfind{padding:0 22px 26px}
#sapfind:empty{display:none}
.sf-card{background:#fff;border:1px solid var(--line-soft,#e3e8ef);border-radius:14px;box-shadow:0 1px 3px rgba(10,37,64,.05);overflow:hidden;max-width:1400px;margin:0 auto}
.sf-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid #eef1f5}
.sf-t{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#0A2540}
.sf-n{font-size:12px;color:#5b6b7e}
.sf-adm{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a6a2f;background:#f7efe0;border-radius:10px;padding:3px 9px}
.sf-hd,.sf-r{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(180px,2fr) minmax(150px,.9fr) minmax(170px,1.3fr);gap:12px;align-items:center;padding:9px 18px}
.sf-hd{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8795a6;background:#f7f9fb;padding-top:7px;padding-bottom:7px}
.sf-r{border-top:1px solid #f0f3f6;font-size:12.5px;color:#1d2b3a}
.sf-r:hover{background:#fafbfd}
.sf-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.sf-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;color:#0A2540;overflow-wrap:anywhere}
.sf-g{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#8795a6}
.sf-nm{color:#3a4a5c;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.sf-st{font-size:9px;font-weight:700;text-transform:uppercase;color:#a8480b;background:rgba(190,95,15,.12);border-radius:8px;padding:1px 6px;margin-left:4px}
.sf-q{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sf-q b{font-size:15px;font-weight:700;color:#0A2540;font-variant-numeric:tabular-nums}
.sf-pill{font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.sf-pill.stk-in{color:#176a34;background:rgba(34,139,69,.12)}
.sf-pill.stk-low{color:#2f66b0;background:rgba(61,120,192,.13)}
.sf-pill.stk-vlow{color:#a8480b;background:rgba(190,95,15,.14)}
.sf-pill.stk-out{color:#c0392b;background:rgba(192,40,40,.12)}
.sf-so{font-size:10.5px;color:#7a8797}
.sf-e{font-size:12px;color:#1d2b3a;line-height:1.4}
.sf-in{color:#176a34}
.sf-none{color:#7a8797}
.sf-more{display:block;width:100%;border:0;border-top:1px solid #eef1f5;background:#f7f9fb;padding:10px;font:inherit;font-size:12px;font-weight:600;color:#0A2540;cursor:pointer}
.sf-more:hover{background:#eef2f7}
.sf-foot{border-top:1px solid #eef1f5;padding:9px 18px;font-size:11.5px;color:#7a8797}
@media (max-width:760px){
  #sapfind{padding:0 12px 20px}
  .sf-hd{display:none}
  .sf-r{grid-template-columns:1fr auto;gap:4px 10px;padding:11px 14px}
  .sf-c{grid-column:1}.sf-q{grid-column:2;grid-row:1;justify-content:flex-end}
  .sf-nm,.sf-e{grid-column:1 / -1}
}


/* == ETA: where each arrival stands - PO, transit, port / customs, warehouse (v28.0) == */
.eta-pipe{display:flex;align-items:stretch;gap:0;margin-bottom:10px}
.eta-pipe-ar{flex:0 0 22px;align-self:center;height:2px;background:#cfd8e3;position:relative}
.eta-pipe-ar::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid #cfd8e3;border-right:0}
.eta-st{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:12px;text-align:left;font:inherit;cursor:pointer;
  background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:14px 16px;box-shadow:0 1px 3px rgba(10,37,64,.05);transition:border-color .15s,box-shadow .15s}
.eta-st:hover{border-color:#b9c6d6}
.eta-st.on{box-shadow:0 0 0 2px var(--stc) inset;border-color:var(--stc)}
.eta-st-i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--stb);color:var(--stc)}
.eta-st-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eta-st-t{display:flex;flex-direction:column;min-width:0}
.eta-st-t b{font-size:26px;line-height:1;font-weight:700;color:#0A2540;font-variant-numeric:tabular-nums}
.eta-st-t>span{font-size:13px;font-weight:700;color:var(--stc);margin-top:5px}
.eta-st-t small{font-size:11px;color:#7a8797;margin-top:2px;line-height:1.3}
.eta-st-po{--stc:#5b6b7e;--stb:#eef1f5}
.eta-st-transit{--stc:#2f66b0;--stb:#e8f0fa}
.eta-st-port{--stc:#b8631a;--stb:#fbf0e4}
.eta-st-wh{--stc:#22804a;--stb:#e7f5ec}
.eta-alerts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-size:12.5px;color:#5b6b7e}
.eta-alerts b{color:#0A2540;font-size:14px}
.eta-alert-bad{font:inherit;font-size:12.5px;cursor:pointer;border:1px solid rgba(192,57,43,.25);background:#fdf1ef;color:#c0392b;border-radius:20px;padding:4px 12px}
.eta-alert-bad b{color:#c0392b}
.eta-alert-bad.on{background:#c0392b;color:#fff}.eta-alert-bad.on b{color:#fff}
.eta-filt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#5b6b7e;margin:0 0 8px}
.eta-filt button{font:inherit;font-size:12px;border:1px solid #d5dce5;background:#fff;border-radius:16px;padding:3px 10px;cursor:pointer;color:#0A2540}
/* the step tracker */
.etk{--c:#5b6b7e;min-width:150px}
.etk-transit{--c:#2f66b0}.etk-port{--c:#b8631a}
.etk-line{display:flex;align-items:center;width:132px;margin:2px 0 6px}
.etk-line i{flex:none;width:9px;height:9px;border-radius:50%;background:#dde3ea}
.etk-line i.done{background:var(--c)}
.etk-line i.cur{width:13px;height:13px;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.etk-line i.next{background:#fff;border:2px solid #2e8b57;width:11px;height:11px;box-sizing:border-box}
.etk-line b{flex:1;height:2px;background:#dde3ea}
.etk-line b.done{background:var(--c)}
.etk-line b.next{background:repeating-linear-gradient(90deg,#2e8b57 0 4px,transparent 4px 7px)}
.etk-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;line-height:1.3}
.etk-l strong{font-size:12px;color:var(--c)}
.etk-l em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#22804a;background:#e7f5ec;border-radius:8px;padding:1px 6px}
.etk-l span{flex-basis:100%;font-size:11px;color:#7a8797}
.eta-t td.stg{min-width:170px}
.eta-ship .etk{padding:8px 16px 0}
.pc-etasw .etk{margin:2px 0 8px}
.etk.sm .etk-line{width:116px}
@media (max-width:900px){
  .eta-pipe{flex-wrap:wrap;gap:8px}
  .eta-pipe-ar{display:none}
  .eta-st{flex:1 1 calc(50% - 4px);padding:11px 12px;gap:9px}
  .eta-st-i{width:32px;height:32px}.eta-st-t b{font-size:21px}
}
.eta-t td.d .was{display:block;font-size:10.5px;color:#8795a6;margin-top:2px}


/* == Warranty with icons and a period bar (v28.1) == */

.wc2{display:flex;flex-direction:column;gap:6px}
.wc2-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.wc2-i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e8f0fa;color:#2f66b0;flex:none}
.wc2.life .wc2-i{background:#f7efe0;color:#8a6a2f}
.wc2-i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wc2-p{text-align:right;line-height:1}
.wc2-p b{display:block;font-family:var(--serif);font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-.5px}
.wc2.life .wc2-p b{font-size:22px}
.wc2-p span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.wc2-bar{height:6px;border-radius:6px;background:var(--porcelain2);overflow:hidden;margin:2px 0 4px}
.wc2-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#9cc2ec,#2f66b0)}
.wc2.life .wc2-bar i{background:linear-gradient(90deg,#e8d3a8,#b08a43)}
.w-steps{margin:18px 0 6px;background:var(--white);border:1px solid var(--line);border-radius:var(--r12);padding:14px 16px;box-shadow:var(--sh1)}
.w-steps-h{font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:10px}
.w-steps-r{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.w-step{display:flex;align-items:flex-start;gap:10px;position:relative}
.w-step-n{position:absolute;left:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.w-step-i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--porcelain2);color:var(--ink);flex:none}
.w-step-i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.w-step b{display:block;font-size:12.5px;color:var(--ink)}
.w-step span{display:block;font-size:11px;color:var(--stone);line-height:1.4;margin-top:2px}
@media(max-width:700px){.w-steps-r{grid-template-columns:1fr}}


/* == ETA fills the screen; on a phone each row is a card (v28.5) ============ */
.eta-arr .nm,.eta-plan .nm{max-width:min(620px,38vw)}
.eta-ships{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
@media(min-width:1500px){.eta-t{font-size:12.5px}.eta-t td{padding:8px 12px}}
@media(max-width:760px){
  .eta-arr,.eta-plan{display:block}
  .eta-arr thead,.eta-plan thead{display:none}
  .eta-arr tbody,.eta-plan tbody{display:flex;flex-direction:column;gap:8px}
  .eta-tw:has(.eta-arr),.eta-tw:has(.eta-plan){background:transparent;border:0;overflow:visible}
  .eta-arr tr,.eta-plan tr{display:grid;gap:8px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 1px 2px rgba(10,37,64,.04)}
  .eta-arr tr{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"d stg stg" "it it it" "q po po" "sn cv ro"}
  .eta-plan tr{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"it it" "pl nx" "sn sn"}
  .eta-arr td,.eta-plan td{display:block;padding:0;border:0!important;background:transparent!important;min-width:0}
  .eta-arr tr.short{background:#fff7f6;border-color:rgba(192,57,43,.25)}
  .eta-arr .d{grid-area:d;white-space:normal}.eta-arr .stg{grid-area:stg;min-width:0}
  .eta-t .it{grid-area:it;padding-top:8px!important;border-top:1px solid rgba(10,37,64,.07)!important}
  .eta-arr .q{grid-area:q}.eta-arr .poc{grid-area:po}.eta-t .sn{grid-area:sn}.eta-arr .cv{grid-area:cv}.eta-arr .ro{grid-area:ro}
  .eta-plan .pl{grid-area:pl}.eta-plan .nx{grid-area:nx}
  .eta-arr .n,.eta-plan .n{text-align:left}
  .eta-arr td[data-l]::before,.eta-plan td[data-l]::before{content:attr(data-l);display:block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8795a6;margin-bottom:2px}
  .eta-arr .nm,.eta-plan .nm{max-width:none;white-space:normal}
  .eta-arr .etk{min-width:0}
  .eta-arr .etk-line{width:100%;max-width:150px}
  .eta-sync{flex-wrap:wrap}
  .eta-sync-auto{flex-basis:100%;order:3}
}

/* == Warranty: how to make a claim, as a 1-2-3 row (v28.5) ================== */
.w-steps{padding:16px 18px 18px}
.w-steps-h{margin-bottom:14px}
.w-steps-r{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.w-steps-r .w-step{display:block;position:static;padding-right:18px}
.w-step-top{display:flex;align-items:center;margin-bottom:12px}
.w-steps-r .w-step-n{position:static;display:grid;place-items:center;width:28px;height:28px;margin:0;font-size:13px;font-weight:700;line-height:1;color:#fff;flex:none;box-shadow:0 0 0 4px #e8f0fa}
.w-steps-r .w-step-i{display:grid;place-items:center}
.w-steps-r .w-step-line{display:block}
.w-step-line{flex:1;height:2px;margin-left:12px;background:repeating-linear-gradient(90deg,#9cb3cc 0 6px,transparent 6px 11px)}
.w-steps-r .w-step:last-child .w-step-line{display:none}
.w-step-c{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.w-steps-r .w-step-i{margin-bottom:6px}
.w-step-c>b{font-size:13.5px;color:var(--ink)}
.w-steps-r .w-step-t{display:block;font-size:11.5px;color:var(--stone);line-height:1.45;margin:0}
@media(max-width:700px){
  .w-steps-r{grid-template-columns:1fr}
  .w-steps-r .w-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px;padding:0 0 16px}
  .w-steps-r .w-step:last-child{padding-bottom:0}
  .w-step-top{flex-direction:column;align-items:center;margin:0;height:100%}
  .w-step-line{width:2px;height:auto;flex:1;margin:6px 0 -10px;background:repeating-linear-gradient(180deg,#9cb3cc 0 6px,transparent 6px 11px)}
  .w-steps-r .w-step-i{display:none}
  .w-step-c{padding-top:3px}
}


/* == Install Pricing: the original calculator, with icons and colours (v28.6) ==
   Same groups, full names, full notes and the same column flow as before; each
   row now starts with what it is, and each group has its colour. Centred at the
   old 1560px like before ("concentrated in the middle", 2026-10-09); 500px
   columns leave room for the icon. */
.inst-wrap{max-width:1560px;column-width:500px}
.ic-tg{--tc:#2f66b0;--tb:#e8f0fa}
.ic-t-wc{--tc:#2f66b0;--tb:#e8f0fa}
.ic-t-basin{--tc:#b8631a;--tb:#fbf0e4}
.ic-t-tap{--tc:#0f8a8a;--tb:#e2f4f3}
.ic-tg .ic-group-h{display:flex;align-items:center;gap:8px;color:var(--tc);background:linear-gradient(0deg,var(--porcelain2),var(--tb))}
.ic-gi{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--tc,#2f66b0);color:#fff;flex:none}
.ic-gi svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-row.ic-row-i{grid-template-columns:36px 1fr 74px 104px}
.ic-ri{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--tb);color:var(--tc)}
.ic-ri svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-tg .ic-row.on{background:var(--tb)}
.ic-tg .ic-row.on .ic-ri{background:var(--tc);color:#fff}
@media(max-width:600px){
  .ic-row.ic-row-i{grid-template-columns:36px 1fr 96px;grid-template-areas:"i n n" "i p s"}
  .ic-ri{grid-area:i;align-self:start}
}


/* == Ships with: a block per colour, each with its own Copy (v28.8) ======== */
.pc-sw-set{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line-soft)}
.pc-sw-set:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pc-sw-set .pc-sw-fin{display:flex;align-items:center;gap:6px}
.pc-sw-set .pc-sw-fin .fsw{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pc-sw-set .pc-sw-copy{margin-top:6px}


/* == PO Check drawer: a photo on every option card (v28.9) ================= */
.bd-opt-ph{display:flex;align-items:center;justify-content:center;height:96px;margin:0 0 8px;border-radius:8px;background:#fff;overflow:hidden;border:1px solid var(--line-soft)}
.bd-opt-ph img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bd-opt.solo .bd-opt-ph{height:120px}
@media(max-width:600px){.bd-opt-ph{height:84px}}

/* a component with no price of its own (v29.0) */
.ppc-v.ppc-na{color:var(--stone);letter-spacing:.04em}


/* == RLS x ID: Bundles and My Sales (the designers' view only) ========== */
.bn-wrap{max-width:980px}
.bn-retry{margin-left:8px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font:600 12px var(--sans);color:var(--ink);cursor:pointer}
.bn-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.bn-jump a{font-size:12px;font-weight:600;color:var(--brass);background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;text-decoration:none}
.bn-jump a:hover{border-color:var(--brass-lt)}
.bn-card{background:#fff;border:1px solid var(--line);border-radius:var(--r16);padding:22px 22px 8px;margin:0 0 18px;box-shadow:var(--sh1);scroll-margin-top:16px}
.bn-head h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.bn-head p{font-size:13px;color:var(--stone);margin-top:4px}
.bn-pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:16px 0 4px}
.bn-pkg{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--porcelain)}
.bn-pkg span{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.bn-pkg b{display:block;font-size:17px;font-weight:750;color:var(--ink);margin-top:5px}
.bn-sec{border-top:1px solid var(--line-soft);padding:16px 0 14px;margin-top:12px}
.bn-sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bn-sh h4{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);margin-right:4px}
.bn-pick,.bn-add{font-size:10px;font-weight:700;letter-spacing:.06em;border-radius:20px;padding:3px 10px}
.bn-pick{background:var(--porcelain2);color:var(--ink-soft)}
.bn-add{background:rgba(61,120,192,.10);color:var(--brass)}
.bn-note{font-size:12px;color:var(--stone);margin-top:6px}
.bn-set{margin-top:12px}
.bn-set-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:12px;color:var(--stone);margin-bottom:8px}
.bn-set-h b{color:var(--ink);font-weight:700}
.bn-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:10px}
.bn-item{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.bn-item:hover{border-color:var(--brass-lt);box-shadow:var(--sh1)}
.bn-item-plain{cursor:default}
.bn-item-plain:hover{border-color:var(--line);box-shadow:none}
.bn-ph{flex:0 0 48px;height:48px;border-radius:8px;background:var(--porcelain);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bn-ph img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bn-it{display:flex;flex-direction:column;gap:2px;min-width:0}
.bn-it b{font-size:12px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.bn-it em{font-style:normal;font-size:11px;color:var(--stone)}
.bn-it i{font-style:normal;font-size:12px;font-weight:700;color:var(--brass)}
.bn-it i small{font-weight:500;color:var(--stone)}
.bn-it small{font-size:10.5px;color:var(--stone);line-height:1.4}
.bn-tbc{font-size:10.5px;font-weight:600;color:var(--stone-lt);font-style:italic}
.bn-notes{margin:10px 0 0 18px;font-size:12px;color:var(--stone);line-height:1.6}
.bn-notes b{color:var(--brass)}
.bn-terms{margin-top:8px}
.bn-terms h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin:0 0 10px}
.ms-wrap{max-width:1100px}
.ms-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 16px}
.ms-head h2{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.ms-head p{font-size:13px;color:var(--stone);margin-top:2px}
.ms-years{display:flex;gap:6px}
.ms-years button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;font:600 12px var(--sans);color:var(--ink-soft);cursor:pointer}
.ms-years button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ms-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.ms-wrap .os-panel{overflow-x:auto}
.ms-table td:nth-child(3){text-align:left}
.ms-table th:nth-child(3){text-align:left}
.ms-upd{font-size:11px;color:var(--stone);margin-top:10px}
@media(max-width:600px){
  .bn-card{padding:16px 14px 6px}
  .bn-items{grid-template-columns:1fr 1fr}
  .bn-item{flex-direction:column;align-items:flex-start}
  .bn-ph{flex-basis:auto;width:100%;height:64px}
  .ms-cards{grid-template-columns:1fr}
  .ms-table{min-width:640px}
}


/* == RLS x ID: Bundles - choose like a self-order kiosk ================= */
/* One question at a time on big photo tiles; the steps down the left with
   what was chosen; "Your order" along the bottom with the total. No
   backdrop-filter anywhere here: on phones it has crashed iOS tabs. */
.bq{width:100%;max-width:1320px;padding:4px 0 24px}
.bq-hero{margin-bottom:16px}
.bq-dim{font-size:12.5px;color:var(--stone);line-height:1.6}
.bq-resume{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;width:100%;text-align:left;background:#eef5fb;border:1px solid #c8dced;border-radius:14px;padding:14px 16px;margin:0 0 16px;cursor:pointer;font:inherit;color:var(--ink)}
.bq-resume b{font-size:14px}
.bq-resume span{font-size:12.5px;color:var(--stone)}
.bq-resume i{font-style:normal;margin-left:auto;font-size:13px;font-weight:800;color:var(--brass-lt)}
.bq-resume:hover{border-color:var(--brass-lt)}
/* the first screen: one big card per bundle */
.bk-starts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:0 0 16px}
.bk-start{display:flex;flex-direction:column;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:0;overflow:hidden;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--sh1);transition:border-color .15s,box-shadow .15s}
.bk-start:hover{border-color:var(--brass-lt);box-shadow:var(--sh2)}
.bk-start-ph{height:210px;background:var(--porcelain);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
.bk-start-ph img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bk-start-t{display:flex;flex-direction:column;gap:6px;padding:16px 20px 0}
.bk-start-t b{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.bk-start-t em{font-style:normal;font-size:13px;color:var(--stone);line-height:1.5}
.bk-start-p{padding:10px 20px 0;font-size:16px;font-weight:800;color:var(--brass)}
.bk-start-go{margin:14px 20px 20px;align-self:flex-start;background:var(--brass);color:#fff;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:800}
.bk-start:hover .bk-start-go{background:var(--graphite)}
.bk-alc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:#fff;border:1px dashed #c9d4e0;border-radius:14px;padding:14px 16px;margin:0 0 22px}
.bk-alc b{font-size:14px;color:var(--ink)}
.bk-alc span{flex:1 1 260px;font-size:12.5px;color:var(--stone);line-height:1.5}
.bk-alc i{font-style:normal;font-weight:700;color:var(--brass)}
/* Your quotes */
.bq-list{margin:0 0 22px}
.bq-list h3,.bn-terms h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin:0 0 10px}
.bq-list .os-panel{overflow-x:auto}
.bq-qt td:nth-child(2),.bq-qt th:nth-child(2),.bq-qt td:nth-child(3),.bq-qt th:nth-child(3){text-align:left}
.bq-qt .os-meta{display:block;font-size:11px;color:var(--stone)}
.bq-qt-a{white-space:nowrap}
.bq-qt-a .os-btn{margin-left:6px}
.bq-pill{display:inline-block;font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 9px;background:var(--porcelain2);color:var(--ink-soft);white-space:nowrap}
.bq-pill.sent{background:#e3f4ea;color:#1d6b3f}
.bq-back{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;font:600 12.5px var(--sans);color:var(--ink-soft);cursor:pointer}
.bq-back:hover{border-color:var(--brass-lt)}
.bq-ref{font-size:12px;font-weight:700;color:var(--brass);background:rgba(61,120,192,.10);border-radius:20px;padding:4px 10px}
.bq-hint,.bq-lockn{font-size:12.5px;color:#7a5a12;background:#fff7e3;border:1px solid #f0dfae;border-radius:10px;padding:8px 12px;margin:12px 0 0}
.bq-noph{font-style:normal;font-size:28px;opacity:.2}
.bq-chip{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 9px;background:var(--porcelain2);color:var(--ink-soft);line-height:1.5}
.bq-chip.amt{background:rgba(61,120,192,.10);color:var(--brass)}
.bq-chip.ok{background:#e3f4ea;color:#1d6b3f}
.bq-chip.warn{background:#fff1dc;color:#8a5300}
.bq-chip.opt{background:var(--porcelain2);color:var(--stone)}
.bq-xtra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}
.bq-xtra input{width:20px;height:20px}
.bq-xtra small{flex-basis:100%;font-weight:500;font-size:12px;color:var(--stone);padding-left:28px}
.bq-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 18px;font:700 13px var(--sans);color:var(--ink);cursor:pointer}
.bq-btn:hover{border-color:var(--brass-lt)}
.bq-btn.primary{background:var(--brass);border-color:var(--brass);color:#fff}
.bq-btn.primary:hover{background:var(--graphite)}
.bq-btn.big{padding:15px 24px;font-size:15px;border-radius:14px}
.bq-btn:disabled{opacity:.55;cursor:default}
.bq-inc{font-weight:700;color:#1d6b3f}
.bq-tbc{font-weight:600;font-style:italic;color:var(--stone-lt)}
.bq-warn{font-size:12.5px;color:#8a5300;background:#fff7e3;border-radius:10px;padding:8px 12px;margin:8px 0 0;line-height:1.5}
.bq-warn a{color:#8a5300;font-weight:800}
.bq-f{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--stone);text-transform:uppercase;letter-spacing:.08em}
.bq-f input,.bq-f textarea,.rg-f input{font:500 14px var(--sans);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;text-transform:none;letter-spacing:0;width:100%;box-sizing:border-box}
.bq-f textarea{resize:vertical;min-height:52px}
.bq-status{font-size:11.5px;color:var(--stone);margin:12px 0 0}
.bq-msg{font-size:13px;font-weight:700;color:#1d6b3f;margin:6px 0 0;min-height:1em}
.bq-msg.bad{color:#b3261e}
.bq .bn-terms{margin-top:22px}
/* the kiosk */
.bk-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}
.bk-top h2{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.bk-pk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 12px 4px 5px}
.bk-pk i{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.bk-body{display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;align-items:start}
.bk-body.bk-solo{grid-template-columns:minmax(0,1fr)}
.bk-rail{position:sticky;top:0;display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--sh1);max-height:calc(100vh - 200px);overflow-y:auto}
.bk-ri{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:11px;padding:7px 8px;cursor:pointer;font:inherit;color:var(--ink);min-height:50px}
.bk-ri:hover{background:var(--porcelain)}
.bk-ri.on,.bk-ri.on:hover{background:var(--ink);color:#fff}
.bk-ri-n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--porcelain2);color:var(--ink-soft);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bk-ri.done .bk-ri-n{background:#e3f4ea;color:#1d6b3f}
.bk-ri.on .bk-ri-n{background:#fff;color:var(--ink)}
.bk-ri-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-ri-t b{font-size:12.5px;font-weight:800}
.bk-ri-t em{font-style:normal;font-size:11px;color:var(--stone);overflow-wrap:anywhere;line-height:1.35}
.bk-ri.on .bk-ri-t em{color:rgba(255,255,255,.78)}
.bk-ri-ph{flex:0 0 38px;height:38px;border-radius:8px;background:var(--porcelain);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bk-ri-ph img{max-width:100%;max-height:100%;object-fit:contain}
.bk-ri.on .bk-ri-ph{background:#fff}
.bk-ri-sw{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.bk-ri.on .bk-ri-sw{border-color:rgba(255,255,255,.6)}
.bk-stage{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px;box-shadow:var(--sh1)}
.bk-ask h3{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.5px;line-height:1.15}
.bk-ask p{font-size:13px;color:var(--stone);margin-top:6px;line-height:1.5}
.bk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}
.bk-tiles.bk-sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.bk-tile{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 10px 12px;cursor:pointer;min-width:0;outline:none;transition:border-color .12s,box-shadow .12s,transform .12s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.bk-tile:hover{border-color:var(--brass-lt);box-shadow:var(--sh2)}
.bk-tile:active{transform:scale(.97)}
.bk-tile:focus-visible{border-color:var(--brass-lt);box-shadow:0 0 0 4px rgba(61,120,192,.2)}
.bk-tile.on{border-color:var(--brass);background:#f3f8fe;box-shadow:0 0 0 4px rgba(61,120,192,.16)}
.bk-tile.off{cursor:default}
.bk-tile.off:hover{box-shadow:none;border-color:var(--line)}
.bk-tile.off.on,.bk-tile.off.on:hover{border-color:var(--brass-lt);box-shadow:none}
.bk-tile.off:active{transform:none}
.bk-ph{height:150px;border-radius:11px;background:var(--porcelain);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bk-ph img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bk-sm .bk-ph{height:110px}
.bk-nm{font-size:13.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere;line-height:1.25;padding:0 2px}
.bk-sub{font-size:11.5px;color:var(--stone);line-height:1.45;padding:0 2px;overflow-wrap:anywhere}
.bk-sub .ok{color:#1d6b3f;font-weight:700}
.bk-sub .warn{color:#8a5300;font-weight:700}
.bk-pr{margin-top:auto;padding:2px 2px 0;font-size:16px;font-weight:800;color:var(--brass)}
.bk-ok{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--brass);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,55,100,.3)}
.bk-i{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--brass);font:700 12px var(--serif);cursor:pointer;display:flex;align-items:center;justify-content:center}
.bk-i:hover{border-color:var(--brass-lt)}
.bk-no .bk-ph{background:#f5f6f8}
.bk-no .bk-ph i{font-style:normal;font-size:38px;color:var(--stone-lt);font-weight:300}
.bk-no .bk-nm{font-size:15px;color:var(--ink-soft);text-align:center;margin:auto 0}
.bk-pkgs{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.bk-pkg .bk-ph{height:120px;background:linear-gradient(180deg,#f7f9fc,#eef2f7)}
.bk-sw{display:block;width:78px;height:78px;border-radius:50%;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 2px 6px rgba(255,255,255,.55),0 4px 12px rgba(10,37,64,.16)}
.bk-pkg .bk-nm{font-family:var(--serif);font-size:19px;font-weight:600;text-align:center}
.bk-pkg .bk-sub{text-align:center}
.bk-pkg .bk-pr{text-align:center;font-size:18px}
.bk-grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:22px 0 0}
.bk-grp b{font-size:14px;font-weight:800;color:var(--ink)}
.bk-grp small{flex-basis:100%;font-size:12px;color:var(--stone);line-height:1.5}
.bk-sub-h{font-size:11px;font-weight:800;color:var(--ink-soft);margin:16px 0 0;text-transform:uppercase;letter-spacing:.1em}
.bk-block{border-top:1px solid var(--line-soft);margin-top:20px}
.bk-block:first-of-type{border-top:0;margin-top:4px}
.bk-block .bk-blh{margin-top:16px}
.bk-block .bk-blh b{font-family:var(--serif);font-size:18px;font-weight:600}
.bk-setb{margin-top:18px;border:1.5px solid var(--brass-lt);border-radius:16px;padding:2px 16px 16px;background:#f9fbfe}
.bk-setb h4{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin:14px 0 0}
.bk-setb h4 small{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--stone);margin-left:6px}
.bk-add{margin-top:6px;text-align:center;border:1.5px solid var(--brass);color:var(--brass);border-radius:10px;padding:7px 0;font-size:13px;font-weight:800}
.bk-tile:hover .bk-add{background:var(--brass);color:#fff}
.bk-qty{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.bk-qty button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--brass);background:#fff;font:700 18px var(--sans);color:var(--brass);cursor:pointer;line-height:1;padding:0}
.bk-qty button:hover{background:var(--brass);color:#fff}
.bk-qty button:disabled{opacity:.35;cursor:default}
.bk-qty b{min-width:22px;text-align:center;font-size:16px;color:var(--ink)}
.bk-cont{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 0}
/* Your order, along the bottom of the kiosk; it ends before the round
   sidebar button, which sits bottom right at every width */
.bk-bar{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;gap:12px;margin:16px 70px 0 0;padding:10px 10px 10px 14px;background:var(--ink);color:#fff;border-radius:18px;box-shadow:var(--sh3)}
.bk-bag{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;padding:2px 4px;text-align:left}
.bk-bag b{font-size:14px;font-weight:800}
.bk-bag span{font-size:12px;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
.bk-tot{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
.bk-tot em{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.65)}
.bk-tot b{font-family:var(--serif);font-size:22px;font-weight:600;white-space:nowrap}
.bk-go{border:0;background:var(--brass-lt);color:#fff;border-radius:12px;padding:13px 18px;font:800 14px var(--sans);cursor:pointer;white-space:nowrap}
.bk-go:hover{background:#5a91d4}
/* Review your order */
.bk-lines{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line-soft)}
.bk-lines li{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.bk-l-ph{width:56px;height:56px;border-radius:10px;background:var(--porcelain);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bk-l-ph img{max-width:100%;max-height:100%;object-fit:contain}
.bk-l-ph .bk-sw{width:34px;height:34px}
.bk-l-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-l-t b{font-size:13.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.bk-l-t em{font-style:normal;font-size:12px;color:var(--stone);overflow-wrap:anywhere;line-height:1.45}
.bk-l-t em.bk-l-k{align-self:flex-start;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--brass);background:rgba(61,120,192,.10);border-radius:20px;padding:1px 8px;margin-top:3px}
.bk-lines li.k-package .bk-l-t b{font-family:var(--serif);font-size:17px;font-weight:600}
.bk-l-a{display:flex;align-items:center;gap:6px}
.bk-l-a:empty{display:none}
.bk-l-a .bk-qty{margin:0}
.bk-l-a .bk-qty button{width:30px;height:30px;font-size:16px}
.bk-l-p{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;text-align:right;min-width:92px}
.bk-chg{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;font:700 12px var(--sans);color:var(--brass);cursor:pointer}
.bk-chg:hover{border-color:var(--brass-lt)}
.bk-x{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--stone);font-size:12px;cursor:pointer;padding:0}
.bk-x:hover{color:#b3261e;border-color:#e3b4b0}
.bk-rv-tot{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 4px;font-size:15px;font-weight:800;color:var(--ink)}
.bk-rv-tot b{font-family:var(--serif);font-size:28px;font-weight:600}
.bk-add-more{margin:12px 0 0}
.bk-rv-f{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:20px 0 0}
.bk-rv-f .bq-f:last-child{grid-column:1/-1}
.bk-rv-acts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.bk-rv-acts .bq-btn.big{flex:1 1 220px}
.bk-rv-acts .bk-clear{margin-left:auto;color:var(--stone);font-weight:600}
/* the order on a sheet over any page */
#bk-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300}
.bk-sheet-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(10,37,64,.42);animation:bkFade .18s ease-out}
.bk-sheet-p{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:#fff;box-shadow:var(--sh4);display:flex;flex-direction:column;padding:16px 18px 18px;overflow-y:auto;animation:bkIn .22s ease-out}
.bk-sheet-h{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bk-sheet-h b{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink)}
.bk-sheet-h span{font-size:12px;color:var(--stone);flex:1;min-width:0}
.bk-sheet-h button{flex:0 0 36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:14px;cursor:pointer;color:var(--ink)}
.bk-sheet-p .bk-lines{border-top:0;margin-top:2px}
.bk-sheet-p .bk-rv-tot{margin-top:auto}
.bk-sheet-p>.bq-btn.big{width:100%;margin-top:10px}
.bk-sheet-p .bk-lines li,.bk-lines li.bk-2row{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"ph t p" "ph a a"}
.bk-sheet-p .bk-l-ph{grid-area:ph;width:48px;height:48px;align-self:start}
.bk-sheet-p .bk-l-t{grid-area:t}
.bk-sheet-p .bk-l-a{grid-area:a}
.bk-sheet-p .bk-l-p{grid-area:p;min-width:0;align-self:start}
@keyframes bkIn{from{transform:translateX(28px);opacity:.3}to{transform:none;opacity:1}}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
/* the order bar on every other page, once the order has something in it */
#bk-obar{position:fixed;left:calc(var(--sb) + 24px);right:82px;bottom:20px;z-index:110;display:flex;justify-content:center;pointer-events:none}
.bk-ob{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:560px;border:0;background:var(--ink);color:#fff;border-radius:16px;padding:10px 10px 10px 18px;box-shadow:var(--sh3);cursor:pointer;font:inherit;text-align:left}
.bk-ob b{font-size:14px;font-weight:800;white-space:nowrap}
.bk-ob span{flex:1;min-width:0;font-size:13px;color:rgba(255,255,255,.82)}
.bk-ob i{font-style:normal;background:var(--brass-lt);border-radius:11px;padding:10px 16px;font-size:13px;font-weight:800;white-space:nowrap}
.bk-ob:hover i{background:#5a91d4}
body.sb-off #bk-obar{left:24px}
body.bk-has-obar #scroll{padding-bottom:104px}
#bk-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,12px);z-index:400;background:#1d6b3f;color:#fff;font-size:13px;font-weight:700;border-radius:12px;padding:11px 18px;box-shadow:var(--sh3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 40px);text-align:center}
#bk-toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.bk-body{grid-template-columns:200px minmax(0,1fr)}.bk-ri-ph{display:none}}
@media(max-width:900px){
  /* the steps become a row of chips across the top */
  .bk-body{grid-template-columns:minmax(0,1fr);gap:12px}
  .bk-rail{position:static;flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding:6px;gap:6px;border-radius:14px;scrollbar-width:none}
  .bk-rail::-webkit-scrollbar{display:none}
  .bk-ri{flex:0 0 auto;width:auto;min-height:0;padding:6px 12px 6px 6px;border:1px solid var(--line)}
  .bk-ri.on{border-color:var(--ink)}
  .bk-ri-ph,.bk-ri-sw,.bk-ri-t em{display:none}
  .bk-ri-t b{white-space:nowrap}
}
@media(max-width:780px){
  /* the sidebar is a drawer here */
  #bk-obar,body.sb-off #bk-obar{left:12px}
  .bk-ob{max-width:none}
}
@media(max-width:600px){
  .bk-starts{grid-template-columns:1fr}
  .bk-start-ph{height:160px}
  .bk-start-t b{font-size:21px}
  .bk-top h2{font-size:20px}
  .bk-stage{padding:14px 12px;border-radius:14px}
  .bk-ask h3{font-size:21px}
  .bk-tiles,.bk-tiles.bk-sm,.bk-pkgs{grid-template-columns:1fr 1fr;gap:8px}
  .bk-tile{padding:8px 8px 10px;border-radius:14px}
  .bk-ph{height:112px}
  .bk-sm .bk-ph{height:92px}
  .bk-nm{font-size:12.5px}
  .bk-pr{font-size:14.5px}
  .bk-ok{top:8px;right:8px;width:26px;height:26px;font-size:14px}
  .bk-i{top:8px;left:8px}
  .bk-sw{width:58px;height:58px}
  .bk-pkg .bk-ph{height:88px}
  .bk-pkg .bk-nm{font-size:16px}
  .bk-pkg .bk-pr{font-size:15px}
  .bk-lines li{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ph t p" "ph a a"}
  .bk-l-ph{grid-area:ph;width:44px;height:44px;align-self:start}
  .bk-l-t{grid-area:t}
  .bk-l-a{grid-area:a}
  .bk-l-p{grid-area:p;min-width:0;align-self:start;font-size:13px}
  .bk-rv-tot b{font-size:24px}
  .bk-rv-f{grid-template-columns:1fr}
  .bk-bar{gap:8px;padding:8px 8px 8px 10px;bottom:10px}
  .bk-bag b{font-size:13px}
  .bk-tot b{font-size:18px}
  .bk-go{padding:11px 12px;font-size:13px}
  .bk-ob{padding:8px 8px 8px 14px;gap:8px}
  .bk-ob span{font-size:12px}
  .bk-ob i{padding:9px 12px}
  #bk-toast{bottom:84px}
  .bk-hs,.bk-bag b,.bk-ob b{display:none}
  .bk-tot b{font-size:17px}
}
/* owners: full access, locked until the distributor admin password opens it */
.idu{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px;padding:12px 16px;border:1px solid #c8dced;background:#eef5fb;border-radius:14px}
.idu-t{flex:1 1 260px;display:flex;flex-direction:column;gap:2px;min-width:0}
.idu-t b{font-size:14px;color:var(--ink)}
.idu-t em{font-style:normal;font-size:12.5px;color:var(--stone);line-height:1.5}
.idu-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:100%}
.idu-f input{flex:1 1 200px;min-width:0;font:500 14px var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.idu-err{flex-basis:100%;font-size:12.5px;font-weight:600;color:#b3261e}
/* full access reads the distributor's admin views; changes are made on the distributor site */
body.id-owner-full #sync-btn,body.id-owner-full .sd-sync-btn,body.id-owner-full .eta-sync-btn,body.id-owner-full .bd-edit,
body.id-owner-full [onclick*="adminSyncCutsheet"],body.id-owner-full [onclick*="cutAll"]{display:none!important}
/* the basin step when the storage set stands in; R-SH2147's outlet choice */
.bk-stand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:14px 0 0;padding:16px;border:1px dashed #c9d4e0;border-radius:14px;background:#fafcfe}
.bk-stand b{font-size:15px;color:var(--ink)}
.bk-stand span{font-size:13px;color:var(--stone);line-height:1.5}
.bk-keep{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;padding:10px 12px;border-radius:12px;background:#fff7e3;border:1px solid #f0dfae;font-size:13px;color:#7a5a12}
.bk-keep .bk-chg.on{background:var(--brass);border-color:var(--brass);color:#fff}
/* the review: a section per bundle, then the single items */
.bk-rv-b{margin:16px 0 0;border:1px solid var(--line);border-radius:14px;padding:2px 14px 4px;background:#fff}
.bk-rv-bh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0 8px;border-bottom:1px solid var(--line-soft)}
.bk-rv-bt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 180px}
.bk-rv-bt b{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.bk-rv-bt em{font-style:normal;font-size:12px;color:var(--stone)}
.bk-rv-bp{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap}
.bk-rv-ba{display:flex;gap:6px;align-items:center}
.bk-rv-b .bk-lines{border-top:0;margin-top:0}
.bk-rv-b .bk-lines li:last-child{border-bottom:0}
.bk-add-more{display:flex;flex-wrap:wrap;gap:8px}
.bk-sheet-sec{display:flex;align-items:baseline;gap:8px;margin:14px 0 2px}
.bk-sheet-sec b{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink)}
.bk-sheet-sec span{font-size:12px;color:var(--stone)}
.bqp-t tr.bqp-sec td{background:#f1f4f8;padding:7px 6px}
/* after a choice: a concealed set's parts, a basin's pop-up waste */
.bk-follow{scroll-margin-top:12px}
.bk-parts{font-size:12.5px;color:var(--ink-soft);margin:16px 0 0;line-height:1.55;overflow-wrap:anywhere}
.bk-tile.bk-wsp .bk-ph{position:relative;display:block;height:auto;aspect-ratio:1/1;background:#fff}
.bk-tile.bk-wsp .bk-ph img{position:absolute;width:300%;max-width:none;max-height:none;height:auto;left:-183%;top:-78%}
.bk-l-t em.bk-l-x{color:var(--ink-soft);overflow-wrap:normal}
.bk-nw{white-space:nowrap}
/* the quote on its own, to print or save as PDF */
#bq-print{display:none}
@media print{
  body.bq-printing>*:not(#bq-print){display:none!important}
  body.bq-printing #bq-print{display:block}
  body.bq-printing{background:#fff!important}
}
.bqp{font-family:var(--sans);color:#0a2540;font-size:12px;max-width:760px;margin:0 auto}
.bqp-h{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #0a2540;padding-bottom:10px;margin-bottom:12px}
.bqp-h div{display:flex;flex-direction:column;gap:2px}
.bqp-h b{font-family:var(--serif);font-size:20px}
.bqp-r{text-align:right}
.bqp-who{border-collapse:collapse;margin:0 0 12px}
.bqp-who td{padding:2px 14px 2px 0}
.bqp-who td:first-child{color:#6b7b8f}
.bqp-t{width:100%;border-collapse:collapse}
.bqp-t th{text-align:left;border-bottom:1px solid #0a2540;padding:6px 0;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.bqp-t th:last-child,.bqp-t td:last-child{text-align:right;white-space:nowrap}
.bqp-t td{padding:6px 0;border-bottom:1px solid #dde3ea;vertical-align:top}
.bqp-t td span{color:#6b7b8f}
.bqp-t tfoot td{font-size:15px;font-weight:800;border-bottom:none;padding-top:10px}
.bqp-n{margin:8px 0 0;color:#3c4f63}
.bqp-terms{margin-top:14px;font-size:10px;color:#3c4f63;line-height:1.5}
.bqp-terms p{margin:4px 0 0}

/* == RLS x ID: ID Registration ========================================== */
.rg{width:100%;max-width:820px;padding:4px 0 64px}
.rg-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--sh1)}
.rg-head h2{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--brass);letter-spacing:-.3px}
.rg-head p{font-size:13px;color:var(--stone);margin:4px 0 6px}
.rg-f{display:flex;flex-direction:column;gap:6px;margin-top:14px;min-width:0}
.rg-f>label{font-size:12px;font-weight:700;color:var(--ink)}
.rg-f small{font-size:11.5px;color:var(--stone);line-height:1.5}
.rg-f input.rg-auto{background:var(--porcelain);color:var(--ink-soft)}
.rg-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.rg-row{display:flex;gap:8px;align-items:stretch}
.rg-row input{flex:1;min-width:0}
.rg-hr{border:0;border-top:1px solid var(--line);margin:18px 0 4px}
.rg-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);margin-top:4px;cursor:pointer}
.rg-chk input{width:16px;height:16px}
.rg-note{display:inline-block;font-size:10px;font-weight:700;background:var(--porcelain2);color:var(--ink-soft);border-radius:6px;padding:1px 6px;margin-right:4px}
.rg-tc{margin-top:18px;border:1px dashed #c9d4e0;border-radius:12px;background:#fafcfe;padding:14px 16px;font-size:13px;color:var(--ink);line-height:1.6}
.rg-tc>b{display:block;font-size:14px;margin-bottom:6px}
.rg-tc p{margin:6px 0}
.rg-tc ul{margin:4px 0 4px 22px}
.rg-tc .rg-chk{margin-top:12px}
.rg-acts{display:flex;gap:10px;margin-top:16px}
.rg-list{margin-top:20px}
.rg-list h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin:0 0 10px}
.rg-list .os-panel{overflow-x:auto}
.rg-t td:nth-child(3),.rg-t th:nth-child(3){text-align:left}
.rg-t .os-meta{display:block;font-size:11px;color:var(--stone)}
@media(max-width:600px){.rg-card{padding:16px 14px}.rg-2{grid-template-columns:1fr}.rg-t{min-width:640px}}

/* == RLS x ID: the owners' ID Sales ===================================== */
.ms-sub{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);margin:18px 0 10px}
.ms-who tbody tr{cursor:pointer}
.ms-who tbody tr:hover td{background:#f4f8fc}
.ms-who td:nth-child(2),.ms-who th:nth-child(2){text-align:left}
.ms-who .os-meta{display:block;font-size:11px;color:var(--stone);font-weight:500}
.ms-head p a{color:var(--brass-lt);font-weight:600}
.ms-all td:nth-child(2),.ms-all th:nth-child(2),.ms-all td:nth-child(4),.ms-all th:nth-child(4){text-align:left}
.ms-all td:nth-child(3),.ms-all th:nth-child(3){text-align:left}