/* ============================================================
   Fashion Hub — B2B order portal
   Shared styles: Excel-like grid + three cell states + branding
   ============================================================ */
:root{
  --ink:#15171a; --ink-soft:#5a5246; --line:#e6dfd0; --line-strong:#d3cab6;
  --bg:#f6f1e9; --panel:#fffefb; --shadow:0 1px 3px rgba(60,45,20,.08),0 8px 24px rgba(60,45,20,.06);
  /* THREE cell states: orderable = white cell holding the white order-box; out = dark diagonal
     hatch; backorder = warm amber.
     AVAILABLE = a plain WHITE cell (owner's call, 2026-08-25, replacing the faded green of
     2026-08-18). The order box inside it now carries the "type here" job on its own, via its
     border and inset shadow. Out and backorder are unchanged, so an orderable size is still
     unmistakable — it is the only light cell in the row. */
  --in:#ffffff; --in-hover:#f5f6f7; --in-alt:#ffffff; --in-focus:#1565d8;
  --cell-box:#ffffff; --cell-box-line:#ddd3bf;
  --fill-bg:#FFF3E0;                    /* filled-cell tint (JR overrides to gold) */
  --out:#26262a; --out-line:#34343a;
  --bo:#ffeebc; --bo-ink:#7a5b00; --bo-line:#e8c14a;
  /* default accent (overridden per brand) */
  --accent:#1565d8; --accent-ink:#ffffff; --accent-2:#0b3a82;
  /* typography — Bravado pairing: Bebas Neue (display) + Source Sans 3 (body).
     The system stack is the FALLBACK, so any page that doesn't load the web font
     (e.g. admin.html) renders exactly as before. Numbers use the body font with
     tabular figures (plain, un-slashed zero), like the Bravado mockup. */
  --font-display:'Bebas Neue','Source Sans 3',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Source Sans 3',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* portal surfaces (Bravado look) — all overridable per brand below */
  --section-bg:#1a1a1a;                 /* black section-header bar (both brands) */
  --section-ink:#ffffff;                /* its text — HD overrides to orange */
  --thead-bg:#44444c; --thead-ink:#f5f3ee;   /* grey column head, white writing */
  --price:#1A5C1A;                      /* price text (green, per Bravado) */
  --code-ink:var(--accent);             /* product code colour in popup + catalogue cards */
  --gate-accent:var(--in-focus);        /* login card accent (border/button) */
  --gate-glow:rgba(255,255,255,.06);    /* login backdrop top glow */
  --cta:var(--in-focus);                /* catalogue ORDER pill + CTA (HD orange / JR vibrant gold) */
  /* Solid fill for the +/- steppers. It must carry WHITE, so it is its own token rather
     than --cta: Johnny Reb's vibrant gold is too light under white text, and the tint the
     steppers used to wear is the same colour a filled box wears, which made them blur. */
  --cta-solid:#1565d8;
  --row-hover:rgba(0,0,0,.04);          /* faint whole-row shade on hover (per brand below) */
  --row-fill:rgba(0,0,0,.07);           /* darker shade a row keeps once it has a quantity */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-body);
  color:var(--ink); background:var(--bg); font-size:14px; line-height:1.4;
}
/* ============================================================
   PER-BRAND THEME TOKENS — the only colour/type a clone changes.
   Identity TEXT + logos live in assets/brand-config.js; the colours
   below are everything the design system keys off. Add a brand by
   copying one block + swapping the values. Johnny Reb is black & white
   with GOLD as the sole accent — keep it that way for that brand.
   ============================================================ */
body.brand-hd{
  --accent:#FA6A14; --accent-ink:#ffffff; --accent-2:#1a1a1a; --in-focus:#FA6A14;
  --section-ink:#FA6A14;             /* orange section-header text on black */
  --thead-bg:#33333a;                /* dark-grey column head (contrast under the black header) */
  --price:#1A5C1A;                   /* green prices (Bravado) */
  --code-ink:#FA6A14;                /* orange product codes */
  --cta:#FA6A14;                     /* orange ORDER pill + CTA */
  --row-hover:rgba(250,106,20,.06); --row-fill:rgba(250,106,20,.13);   /* orange row shades */
  --gate-accent:#FA6A14; --gate-glow:rgba(250,106,20,.10);
  --cta-solid:#FA6A14;               /* orange on white = 3.1:1, fine for a big bold glyph */
}
body.brand-jr{
  --accent:#1a1a1a; --accent-ink:#f5efe0; --accent-2:#CFA23F; --in-focus:#CFA23F;
  /* section header = black + white text, column head = grey + white (both defaults) */
  --price:#23201a;                   /* prices stay near-black on JR (no green) */
  --code-ink:#9C7A2C;                /* deeper gold, legible on white */
  --fill-bg:#f8efd6;                 /* gold-tinted filled cell */
  --cta:#E8A81C;                     /* VIBRANT gold ORDER pill + CTA (brighter than the muted accent) */
  --row-hover:rgba(207,162,63,.10); --row-fill:rgba(207,162,63,.20);   /* gold row shades */
  --gate-accent:#CFA23F; --gate-glow:rgba(207,162,63,.12);
  --cta-solid:#B8860B;               /* a deeper gold than --cta: white on #E8A81C is only 2:1 */
}

/* ============================================================
   Bravado TYPOGRAPHY + price colour. Scoped to .fh-portal / #fh-gate so
   admin.html (shares this sheet, doesn't load the web font) is never touched.
   ============================================================ */
.fh-portal .hero-title{ font-family:var(--font-display); font-weight:400; letter-spacing:.05em; font-size:40px; }
.fh-portal .tb-season{ font-family:var(--font-display); font-weight:400; letter-spacing:.16em; font-size:15px; }
.fh-portal .summarybar .stat b{ font-family:var(--font-display); font-weight:400; font-size:27px; letter-spacing:.03em; }
#fh-gate .fhg-iy-name{ font-family:var(--font-display); font-weight:400; letter-spacing:.03em; font-size:23px; }
#fh-gate .fhg-btn:not(.ghost){ font-family:var(--font-display); font-weight:400; letter-spacing:.09em; font-size:18px; }
/* Bravado prices = green money (HD); Johnny Reb keeps near-black per its palette.
   Scope to body cells only — the price <th> in the dark head must stay light. */
.fh-portal td.col-price{ color:var(--price); font-weight:700; }
.fh-portal .cat-price{ color:var(--price); }
.fh-portal .pmodal-price{ color:var(--price); }

/* ---------- top bar (Bravado portal theme: dark, FASHION HUB-led, season centre, signed-in box right) ---------- */
.topbar{
  display:flex; align-items:center; gap:18px 24px; padding:13px 26px;
  background:#0c0c0e; color:#fff;
}
/* ===== Admin-only chrome (admin.html has no .fh-portal class, so these never touch a
   dealer page — keep any new admin styling under these prefixes). ===== */
.adminacct{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.adminacct[hidden]{ display:none; }               /* [hidden] must beat the display above */
.adminacct .btn{ font-size:13px; padding:7px 13px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.35); border-radius:8px; cursor:pointer; }
.adminacct .btn:hover{ border-color:#fff; background:rgba(255,255,255,.10); }
.cpw-back{ position:fixed; inset:0; z-index:200; background:rgba(12,12,14,.62);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cpw-back[hidden]{ display:none; }
.cpw-card{ position:relative; background:#fff; border-radius:14px; padding:24px 26px 20px;
  width:min(430px,100%); box-shadow:0 18px 50px rgba(0,0,0,.3); }
.cpw-card h2{ margin:0 0 8px; font-size:19px; }
.cpw-note{ color:var(--ink-soft); font-size:13px; line-height:1.5; margin:0 0 16px; }
.cpw-card .field{ margin-bottom:12px; }
.cpw-card .field label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
.cpw-card .field input{ width:100%; padding:9px 11px; border:1px solid var(--line-strong);
  border-radius:8px; font-size:14px; }
.cpw-show{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft);
  margin:2px 0 18px; cursor:pointer; }
.cpw-actions{ display:flex; gap:10px; justify-content:flex-end; }
.cpw-x{ position:absolute; top:10px; right:12px; border:0; background:none; font-size:24px;
  line-height:1; color:var(--ink-soft); cursor:pointer; }
.cpw-status{ font-size:12.5px; min-height:16px; margin:12px 0 0; }
.topbar .tb-left{ display:flex; align-items:center; gap:16px; min-width:0; }
.topbar .tb-fh{ height:24px; width:auto; display:block; }                 /* the actual FASHION HUB logo */
.topbar .tb-div{ width:1px; height:38px; background:rgba(255,255,255,.18); flex:none; }
.topbar .tb-shield{ height:50px; width:auto; display:block; }            /* HD bar & shield kept */
.topbar .tb-badge{ height:48px; width:auto; display:block; }             /* JR circular badge kept */
.topbar .tb-brand{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.topbar .tb-brandname{ font-weight:800; font-size:15px; letter-spacing:.01em; white-space:nowrap; }
.topbar .tb-portal{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#857c6e; white-space:nowrap; }
.topbar .tb-season{ flex:1; text-align:center; color:var(--accent); font-weight:800;
  letter-spacing:.32em; font-size:14px; white-space:nowrap; }
body.brand-jr .topbar .tb-season{ color:var(--accent-2); }
.topbar .tb-right{ display:flex; align-items:center; gap:14px; flex:none; }

/* signed-in box (relocated here from the toolbar) — dark, accent-edged, Bravado-style */
.orderingas{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px;
  background:#161618; border:1px solid #2e2e34; border-left:3px solid var(--accent);
  border-radius:9px; padding:6px 13px; }
body.brand-jr .orderingas{ border-left-color:var(--accent-2); }
.orderingas .oa-label{ color:#857c6e; font-size:9px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.orderingas .oa-store{ font-weight:800; font-size:13.5px; color:#fff; }
.orderingas .oa-who{ color:#9a948a; font-size:11.5px; }
.orderingas .oa-switch{ border:0; background:transparent; color:#cfcabf; text-decoration:underline;
  padding:0 0 0 4px; font-size:12px; cursor:pointer; }
.orderingas .oa-switch:hover{ color:var(--accent); }
body.brand-jr .orderingas .oa-switch:hover{ color:var(--accent-2); }

/* hero band under the top bar (big brand title + descriptor), with the brand accent rule */
.herobar{ background:#0d0d10; border-top:3px solid var(--accent); padding:17px 26px 19px; }
body.brand-jr .herobar{ border-top-color:var(--accent-2); }
.hero-title{ margin:0; font-size:30px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; line-height:1; }
.hero-sub{ margin-top:9px; color:#928c82; font-size:13px; letter-spacing:.02em; }
.hero-sub b{ color:#cfcabf; font-weight:700; }

/* ---------- toolbar ---------- */
.toolbar{
  position:sticky; top:0; z-index:40; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; padding:12px 22px; box-shadow:var(--shadow);
}
.field{display:flex; flex-direction:column; gap:3px}
.field label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700}
.field input{
  padding:7px 10px; border:1px solid var(--line-strong); border-radius:7px; font-size:14px; min-width:200px; background:#fff;
}
.field input:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.toolbar .grow{flex:1 1 auto}

.legend{display:flex; gap:14px; align-items:center; font-size:12px; color:var(--ink-soft)}
.legend .key{display:inline-flex; align-items:center; gap:6px}
.legend .swatch{width:16px; height:16px; border-radius:3px; border:1px solid var(--line-strong); display:inline-block}
.legend .swatch.in{background:var(--in)}
.legend .swatch.out{background:var(--out); border-color:var(--out-line)}
.legend .swatch.bo{background:var(--bo); border-color:var(--bo-line)}

.btn{
  appearance:none; cursor:pointer; border:1px solid transparent; border-radius:8px;
  padding:9px 16px; font-size:14px; font-weight:700; letter-spacing:.02em;
}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:#fff; border-color:var(--line-strong); color:var(--ink)}
.btn.ghost:hover{background:#f3f5f8}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- section nav ---------- */
.sectionnav{
  position:sticky; top:var(--fh-toolbar-h,61px); z-index:30; background:#fafbfc; border-bottom:1px solid var(--line);
  padding:8px 22px; display:flex; gap:8px; flex-wrap:wrap; font-size:12px;
}
.sectionnav a{
  text-decoration:none; color:var(--accent-2); background:#fff; border:1px solid var(--line);
  padding:4px 10px; border-radius:20px; white-space:nowrap;
}
.sectionnav a:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- main / sections ---------- */
main{padding:18px 22px 140px; max-width:100%}
/* The sticky toolbar + sectionnav heights vary with width/brand (they wrap), so app.js
   measures them live into --fh-toolbar-h / --fh-nav-h / --fh-h2-h. scroll-margin-top lands a
   jump-to-section pill at the header's frozen resting spot, not hidden under the bars. */
.section{margin:0 0 26px; scroll-margin-top:calc(var(--fh-toolbar-h,61px) + var(--fh-nav-h,44px))}
.section h2{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0; font-weight:800;
  padding:9px 14px; background:var(--section-bg); color:var(--section-ink);
  border-radius:8px 8px 0 0;
  /* freeze beneath the sticky toolbar(z40,top0) + sectionnav(z30); below those, above thead(z10) */
  position:sticky; top:calc(var(--fh-toolbar-h,61px) + var(--fh-nav-h,44px)); z-index:20;
}
.section .count{float:right; font-weight:700; letter-spacing:.02em; color:var(--ink-soft);
  background:#fff; border:1px solid var(--line); border-radius:11px; padding:1px 9px; font-size:11px}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-top:none; background:var(--panel); border-radius:0 0 8px 8px}
/* When the table fits the viewport (set by app.js measureSticky → no horizontal
   scroll needed), drop the scroll wrapper so the size-column header can FREEZE on
   the page, attached just below the frozen section header. (A horizontal-scroll
   wrapper is a scroll container that would otherwise trap the sticky header at the
   table's own top.) Narrow screens keep overflow-x:auto + thead top:0. */
.tablewrap.fits{overflow:visible}
.tablewrap.fits table.grid thead th{
  top:calc(var(--fh-toolbar-h,61px) + var(--fh-nav-h,44px) + var(--fh-h2-h,38px));
}
/* Fixed layout + fixed column widths so EVERY section (both brands) has identical
   column widths and the tables line up. width:100% gives fixed-layout a definite
   width to work from; a flexible trailing .col-spacer soaks up the leftover, so the
   real columns never stretch and the card still fills the row. */
table.grid{border-collapse:separate; border-spacing:0; table-layout:fixed; width:100%}
table.grid th, table.grid td{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; text-align:center}
table.grid thead th{
  /* top:0 is relative to the .tablewrap scroll container (overflow-x:auto), so the column
     header stays pinned at the top of its OWN table; the page-level frozen section header
     (z-index 20) scrolls cleanly over it. */
  position:sticky; top:0; z-index:10; background:var(--thead-bg); color:var(--thead-ink);
  font-size:11px; font-weight:700; padding:7px 6px; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:2px solid rgba(0,0,0,.3); border-right-color:rgba(255,255,255,.08);
}
/* left identity columns — the FIRST FOUR columns (Style / Name / Colour / Price)
   have FIXED widths so they line up identically in every section (per brand).
   Name is generously sized so the longest description fits at natural font size
   with no wrapping and no shrinking. The SIZE columns have NO width — they FLEX
   equally within each section to fill the leftover row width (5-size section =
   wide size cells; 16-size section = narrow ones). Result: every section fills
   the page AND the first four columns are perfectly aligned. */
.col-style,.col-name,.col-colour,.col-price,.col-extra,.col-up{ text-align:left !important; padding:6px 9px !important; white-space:nowrap; overflow:hidden }
.col-style{ width:100px }
.col-name{ width:400px }                  /* generous JR default — fits every description at natural size */
body.brand-hd .col-name{ width:320px }    /* HD descriptions are shorter, but wide enough to fit name + backorder sticker together */
.col-colour{ width:118px }
.col-price{ width:88px }
body.brand-hd .col-price{ width:140px }   /* HD wider so clearance Was/Now isn't clipped */
.col-extra{ color:var(--ink-soft); font-size:13px; width:104px }
/* per-column widths for the sheet's own columns — PAGE is a number, CATEGORY is a phrase */
.col-x-page{ width:56px; text-align:center !important }
.col-x-category{ width:158px; font-size:12px; letter-spacing:.01em }
/* JR up-charge — the alternate price for the biggest sizes (sheet col U) */
.col-up{ width:96px }
td.col-up{ color:var(--price); font-weight:700; font-variant-numeric:tabular-nums }
.col-style{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-weight:700; letter-spacing:.01em}
/* Name cell = flex row: [thumb + name] on the left, backorder sticker on the right. */
td.col-name{ vertical-align:middle }
.name-inner{ display:flex; align-items:center; gap:9px; width:100%; min-width:0 }
.name-inner .thumb{ margin:0; flex:0 0 auto }
.name-inner .name-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto }
/* 2-line backorder sticker sits at the right edge of the name cell */
.name-inner .botag{
  flex:0 0 auto; margin-left:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:5px 12px; border-radius:7px; line-height:1.1;
  font-family:var(--font-body); white-space:nowrap; min-width:100px;
  color:var(--bo-ink); background:var(--bo); border:1px solid var(--bo-line);
}
.name-inner .botag .botag-title{ font-size:12px; font-weight:800; letter-spacing:.08em }
.name-inner .botag .botag-eta{ font-size:9.5px; font-weight:700; letter-spacing:.04em; margin-top:2px; opacity:.9 }
.col-name{font-weight:600; overflow:hidden}
.col-colour{color:var(--ink-soft)}
.col-price{font-variant-numeric:tabular-nums; text-align:right !important}
td.col-name{line-height:1.3}   /* one row (nowrap inherited); auto-shrunk by app.js if too long */
.was{color:#9aa0a8; text-decoration:line-through; font-size:12px; margin-right:5px}
.now{color:#c0392b; font-weight:800}

/* sticky first two columns */
table.grid th.col-style, table.grid td.col-style{position:sticky; left:0; z-index:6; background:var(--panel)}
table.grid thead th.col-style{z-index:12; background:var(--thead-bg); color:var(--thead-ink)}
tbody tr:nth-child(even) td{background:#fdfbf6}
tbody tr:nth-child(even) td.col-style{background:#f8f4ec}
tbody tr:nth-child(even) td.cell.in{background:var(--in-alt,#e0ecdc)}

/* size cells — orderable size = a white cell holding the white "order box";
   unavailable size = dark diagonal hatch (reads as "can't order"). */
td.cell{width:48px; min-width:48px; height:38px; padding:4px}
td.cell.in{background:var(--in)}
td.cell.in:hover{background:var(--in-hover)}
td.cell.out{
  background-color:var(--out);
  background-image:repeating-linear-gradient(45deg,#303036 0,#303036 5px,#212126 5px,#212126 10px);
  border-right-color:var(--out-line); border-bottom-color:var(--out-line);
}
/* (There was a fourth ".na" state here — a grey "–" for a size the sheet marked 0/N-A. It was
   removed on 2026-08-25: those marks track stock, not what is manufactured, so 0 and N/A mean
   the same thing as an empty size and now render as .out. Owner confirmed.) */
td.cell.bo{background:var(--bo)}
td.cell.bo input::placeholder{color:#a8842a; font-size:10px; opacity:1; letter-spacing:.02em}
td.cell.bo input:focus{outline-color:var(--bo-line)}
td.cell input{
  width:100%; height:30px; border:1px solid var(--cell-box-line); border-radius:6px;
  background:var(--cell-box); text-align:center; box-shadow:inset 0 1px 1px rgba(70,55,25,.04);
  font-size:14px; font-variant-numeric:tabular-nums; color:var(--ink); padding:0;
}
td.cell input:hover{border-color:var(--accent)}
td.cell input:focus{outline:2px solid var(--in-focus); outline-offset:0; border-color:var(--in-focus); background:#fff}
td.cell.bo input{background:#fff7df; border-color:var(--bo-line)}
/* filled cell — highlight like the Bravado order sheet: tint + accent border + bold accent number */
td.cell input.has-value{background:var(--fill-bg); border-color:var(--in-focus); color:var(--code-ink); font-weight:800}
td.cell input.has-value:focus{background:#fff}
td.cell input::-webkit-outer-spin-button,td.cell input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
td.cell input[type=number]{-moz-appearance:textfield}
td.cell.onesize{background:var(--in)}
td.cell.onesize.out{background-color:var(--out);
  background-image:repeating-linear-gradient(45deg,#303036 0,#303036 5px,#212126 5px,#212126 10px)}
td.cell.onesize.bo{background:var(--bo)}
td.cell .ones{font-size:9px; color:var(--ink-soft); display:block; line-height:1; padding-top:2px}

/* row total */
td.col-total,th.col-total{
  background:#f8f3ea; font-weight:800;
  font-variant-numeric:tabular-nums; width:56px; border-left:2px solid var(--line-strong);
}
thead th.col-total{z-index:12; background:var(--thead-bg); color:var(--thead-ink)}
td.col-total.has{color:var(--accent); background:#fdefe1}
body.brand-jr td.col-total.has{background:#f7f0de; color:var(--accent-2)}

tbody tr.dim{display:none}

/* Row hover + ordered shade. The inset box-shadow layers a translucent brand tint
   OVER each cell's own background (cream / white order-box / hatch) without replacing
   it, so the whole row shades evenly. A row keeps a slightly darker, filled shade once
   it has any quantity (.has-order, set in recalc) — and that darker shade wins over
   hover so an ordered row stays clearly marked. Scoped to .fh-portal so admin is untouched. */
.fh-portal tbody tr:hover td{ box-shadow:inset 0 0 0 9999px var(--row-hover); }
.fh-portal tbody tr.has-order td{ box-shadow:inset 0 0 0 9999px var(--row-fill); }

/* ---------- summary bar ---------- */
.summarybar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--accent-2); color:#fff;
  display:flex; align-items:center; gap:26px; padding:12px 22px; box-shadow:0 -2px 14px rgba(0,0,0,.18);
}
.summarybar .stat{display:flex; flex-direction:column; line-height:1.15}
.summarybar .stat b{font-size:20px; font-variant-numeric:tabular-nums}
.summarybar .stat span{font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.8}
.summarybar .spacer{flex:1}
.summarybar .btn.primary{background:var(--accent)}
.summarybar .btn.sb-clear{ background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff }
.summarybar .btn.sb-clear:hover:not(:disabled){ background:rgba(255,255,255,.14); border-color:#fff }
.summarybar .note{font-size:12px; opacity:.85; max-width:320px}

/* ---------- misc ---------- */
.banner{background:#fff8e1; border:1px solid #ffe08a; color:#7a5b00; padding:10px 14px; border-radius:8px; margin:14px 22px 0; font-size:13px}
.empty{padding:30px; text-align:center; color:var(--ink-soft)}
a.skip{position:absolute; left:-999px}

/* ---------- product thumbnail in row ---------- */
.col-name .thumb{
  width:30px; height:30px; object-fit:cover; border:1px solid var(--line); border-radius:4px;
  vertical-align:middle; margin-right:9px; cursor:zoom-in; background:#fff;
}
.col-name .thumb:hover{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.04) }

/* ---------- product popup ---------- */
.pmodal{ position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center;
  justify-content:center; z-index:200; padding:20px }
.pmodal[hidden]{ display:none }
/* CONSTANT SIZE. The card does not resize product to product — a tall boot, a long name or a
   one-size style used to change its height, so Prev/Next moved under the cursor and you could
   not click straight through a section. Height and width are now fixed and the INFO column
   scrolls if a product ever needs more room. */
.pmodal-card{ background:#fff; border-radius:14px; width:100%; max-width:1180px;
  height:min(600px, 92vh); display:flex; flex-direction:column;
  overflow:hidden; position:relative; box-shadow:0 16px 50px rgba(0,0,0,.35) }
.pmodal-x{ position:absolute; top:8px; right:14px; border:none; background:none; font-size:30px;
  line-height:1; cursor:pointer; color:#9aa0a6 }
.pmodal-x:hover{ color:#111 }
/* two-tone popup (Bravado-style): product photo on white left, order panel on warm cream right */
.pmodal-body{ display:flex; gap:0; padding:0; align-items:stretch; flex:1 1 auto; min-height:0 }
/* the photo is centred in a fixed-width column and never changes the card's height */
.pmodal-img{ width:300px; max-width:46%; height:auto; max-height:100%; align-self:center;
  object-fit:contain; background:#fff; margin:30px }
.pmodal-info{ flex:1; min-width:0; background:#f4efe5; padding:28px 30px; align-self:stretch;
  overflow-y:auto; min-height:0 }
.pmodal-code{ color:var(--code-ink); font-size:18px; font-weight:800; letter-spacing:.05em }
.pmodal-name{ margin:2px 0 4px; font-size:19px; letter-spacing:.01em }
.pmodal-colour{ color:var(--ink-soft); font-size:13px }
.pmodal-price{ font-weight:800; margin:10px 0 16px; font-size:16px }
/* clearance popup price: Was (struck out) + Now (red) under labels, like the price list */
.pmodal-price .pm-up{ display:inline-block; margin-left:10px; padding:2px 8px; border-radius:999px;
  background:#f1ece1; color:var(--ink-soft); font-size:12px; font-weight:700; vertical-align:middle }
.pmodal-price.pmodal-clearance{ display:flex; gap:30px; align-items:flex-end; }
.pmodal-price .pm-col{ display:flex; flex-direction:column; gap:2px; }
.pmodal-price .pm-lbl{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pmodal-price .pm-col .was{ font-size:16px; margin:0; }
.pmodal-price .pm-col .now{ font-size:20px; }
/* Each size is a stack of: label · + · box · −. */
/* Sizes share the row EVENLY but never grow past --ms-max. A one-size style used to stretch
   its box the full 760px, which read as a bug; now every box is the same size whether there
   are twelve of them or one, and a short run sits centred instead of stranded on the left. */
.pmodal-sizes{ display:flex; flex-wrap:nowrap; justify-content:center; gap:7px; --ms-max:88px }
.msize{ display:flex; flex-direction:column; gap:5px; flex:1 1 0; min-width:0; max-width:var(--ms-max) }
.ms-lbl{ font-weight:800; color:var(--ink); text-align:center; font-size:18px; letter-spacing:.02em; text-transform:uppercase }
/* The SIZE HEADING is the thing you scan for, so it carries the weight; the box only has to
   hold a one- or two-digit quantity and stays modest. */
.ms-input{ width:100%; padding:10px 2px; text-align:center; border:1px solid var(--cell-box-line);
  border-radius:8px; font-size:20px; font-weight:700; background:#fff;
  box-shadow:inset 0 1px 1px rgba(70,55,25,.05) }
/* the browser's own spinner is gone — the +/− buttons replace it (they are hittable on a phone) */
.ms-input::-webkit-outer-spin-button,.ms-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.ms-input[type=number]{ -moz-appearance:textfield; appearance:textfield }
.ms-input:hover{ border-color:var(--accent) }
.ms-input:focus{ outline:2px solid var(--accent); border-color:var(--accent) }
.msize.ms-bo .ms-input{ background:#fff7df; border-color:var(--bo-line) }
.msize.ms-bo .ms-lbl{ color:#a8842a }
.ms-input.has-value{ background:var(--fill-bg); border-color:var(--in-focus); color:var(--code-ink); font-weight:800 }
/* + above the box, − below it */
/* SOLID brand colour with a white glyph — orange on Harley-Davidson, gold on Johnny Reb.
   Deliberately not a tint: a tint is what a box wears once it HAS a quantity, so tinted
   buttons sat in the same colour as the thing they fill in and the row read as one block. */
.ms-step{ appearance:none; border:1px solid var(--cta-solid); background:var(--cta-solid); color:#fff;
  border-radius:8px; height:30px; padding:0; font-size:19px; font-weight:800; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:filter .12s ease }
.ms-step:hover{ filter:brightness(1.12) }
.ms-step:active{ transform:translateY(1px) }
.ms-step:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
.msize.ms-bo .ms-step{ border-color:var(--cta-solid) }
@media (prefers-reduced-motion:reduce){ .ms-step{ transition:none } }
/* clear backorder banner in the popup (amber strip) */
.pmodal-bo{ display:flex; gap:9px; align-items:flex-start; margin:10px 0 2px; padding:9px 12px;
  background:#fff4d6; border:1px solid var(--bo-line); border-radius:9px; color:var(--bo-ink);
  font-size:12.5px; line-height:1.35; font-weight:600 }
.pmodal-bo[hidden]{ display:none }   /* class display must not override the hidden attribute */
.pmodal-bo b{ letter-spacing:.04em }
.pmodal-bo-ic{ font-size:16px; line-height:1.1; flex:none }
.pmodal-total{ margin-top:16px; font-weight:800 }
.pmodal-hint{ margin-top:4px; color:var(--ink-soft); font-size:12px }
.pmodal-none{ color:var(--ink-soft); font-size:13px }
/* prev/next product navigation strip — sits on the cream panel; grey Prev, dark Next (Bravado-style) */
/* pinned to the foot of the fixed card, so Prev/Next are in the same place on every product.
   The keyboard hint lives down here too — it is reference, not something you read mid-order. */
.pmodal-foot{ flex:0 0 auto; border-top:1px solid var(--line); background:#f4efe5 }
.pmodal-nav{ display:flex; align-items:center; gap:14px; padding:14px 30px 4px }
.pmodal-foot .pmodal-hint{ margin:0; padding:0 30px 12px; font-size:11.5px; color:var(--ink-soft);
  line-height:1.45; text-align:center }
.pmodal-counter{ margin-right:auto; color:var(--ink-soft); font-size:13px; font-variant-numeric:tabular-nums; font-weight:700 }
.pmodal-nav .pmodal-prev, .pmodal-nav .pmodal-next{ border:0; border-radius:9px; font-size:13px; font-weight:800;
  padding:11px 20px; cursor:pointer; letter-spacing:.02em }
.pmodal-nav .pmodal-prev{ background:#e6dfd0; color:#574f41 }
.pmodal-nav .pmodal-prev:hover:not(:disabled){ background:#dcd4c2 }
.pmodal-nav .pmodal-next{ background:#1a1a1a; color:#fff }
.pmodal-nav .pmodal-next:hover:not(:disabled){ background:#000 }
.pmodal-nav .pmodal-prev:disabled, .pmodal-nav .pmodal-next:disabled{ opacity:.4; cursor:default }
@media (max-width:560px){
  .pmodal-body{ flex-direction:column } .pmodal-img{ width:100%; max-width:100%; margin:18px auto 4px }
  .pmodal-info{ padding:16px 14px }
  /* PHONE: the run WRAPS here, on purpose. Once the popup stacks there is ~307px for the
     sizes, and forcing 11 of them onto one row gives 24px boxes nobody can tap or read. So
     they wrap on a 46px floor — a usable box, two rows if it needs them — and stay centred
     and evenly sized, same as on a desktop. */
  .pmodal-sizes{ flex-wrap:wrap; gap:5px }
  .msize{ flex:0 1 46px; max-width:76px }
  .msize{ gap:3px }
  .ms-lbl{ font-size:15px }
  .ms-input{ padding:8px 1px; font-size:17px; border-radius:7px }
  .ms-step{ height:26px; font-size:17px; border-radius:6px }
}

/* ---------- order review / checkout popup ---------- */
/* Opened by "Download order" — shows the order summary, a required contact name
   (prefilled from sign-in) + optional PO, then confirms & downloads the CSV.
   Scoped brand accents come from the same tokens as the rest of the portal. */
.comodal{ position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; z-index:120; padding:20px; }
.comodal[hidden]{ display:none }
.comodal-card{ background:#fff; border-radius:14px; max-width:640px; width:100%; max-height:90vh; overflow:auto; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.comodal-x{ position:absolute; top:8px; right:14px; border:none; background:none; font-size:30px; line-height:1; color:#999; cursor:pointer; z-index:2 }
.comodal-x:hover{ color:#111 }
.comodal-review{ padding:26px 28px 22px }
.comodal-title{ font-family:var(--font-display); font-weight:400; font-size:28px; letter-spacing:.03em; margin:0 24px 4px 0 }
.comodal-dealer{ color:var(--ink-soft); font-size:13px; margin-bottom:14px }
.comodal-dealer b{ color:var(--ink) }
.comodal-dl-code{ opacity:.85 }
.comodal-items{ border:1px solid var(--line); border-radius:10px; overflow:auto; max-height:38vh; }
.comodal-tbl{ width:100%; border-collapse:collapse; font-size:13px }
.comodal-tbl th{ position:sticky; top:0; z-index:1; background:var(--thead-bg); color:var(--thead-ink); text-align:left;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; font-weight:800 }
.comodal-tbl td{ padding:8px 12px; border-top:1px solid var(--line); vertical-align:top }
.comodal-tbl th.ci-u, .comodal-tbl th.ci-v, .comodal-tbl td.ci-u, .comodal-tbl td.ci-v{
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.comodal-tbl td.ci-prod{ display:flex; align-items:flex-start; gap:11px; cursor:pointer }
.comodal-tbl tbody tr:hover td.ci-prod, .comodal-tbl tbody tr:hover td.ci-prod{ background:var(--in) }
.comodal-tbl tbody tr:hover .ci-thumb{ border-color:var(--in-focus); box-shadow:0 0 0 2px var(--gate-glow) }
.comodal-tbl tbody tr:hover .ci-edit{ opacity:1 }
.comodal-tbl .ci-thumb{ flex:0 0 auto; width:46px; height:46px; object-fit:cover; border:1px solid var(--line);
  border-radius:6px; background:#fff; cursor:zoom-in }
.comodal-tbl .ci-thumb-none{ background:repeating-linear-gradient(45deg,#f3efe6,#f3efe6 5px,#eeeae0 5px,#eeeae0 10px) }
.comodal-tbl .ci-txt{ min-width:0 }
.comodal-tbl .ci-edit{ display:inline-block; margin-top:3px; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--in-focus); opacity:.55 }
.comodal-tbl .ci-code{ display:block; font-size:11px; font-weight:800; color:var(--code-ink); letter-spacing:.04em }
.comodal-tbl .ci-name{ display:block; font-weight:700; color:var(--ink) }
.comodal-tbl .ci-col{ display:block; color:var(--ink-soft); font-size:12px }
.comodal-tbl td.ci-size{ color:var(--ink) }
.comodal-tbl .ci-x{ color:var(--ink-soft) }
.comodal-tbl td.ci-v{ font-weight:800; color:var(--price) }
.comodal-tote{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 4px 14px }
.comodal-totlbl{ color:var(--ink-soft); font-size:13px; font-weight:600 }
.comodal-totval{ font-family:var(--font-display); font-weight:400; font-size:24px; letter-spacing:.02em }
.comodal-form{ display:flex; gap:14px }
.comodal-fld{ flex:1; display:flex; flex-direction:column; gap:5px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--ink-soft) }
.comodal-fld em{ font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; opacity:.85 }
.comodal-fld input{ border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px; font:inherit;
  font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); background:#fff }
.comodal-fld input:focus{ outline:none; border-color:var(--in-focus); box-shadow:0 0 0 3px var(--gate-glow) }
.comodal-err{ color:#b3261e; font-size:12.5px; font-weight:700; margin-top:11px }
.comodal-err[hidden]{ display:none }
.comodal-hint{ color:var(--ink-soft); font-size:12px; margin:13px 0 16px }
.comodal-actions{ display:flex; gap:10px; justify-content:flex-end }
.comodal-actions .btn{ min-width:130px }
.comodal-actions .btn.primary{ background:var(--accent); color:var(--accent-ink) }
/* warning step (between review and download) */
.comodal-warn{ padding:34px 30px 26px; text-align:center }
.comodal-warn-ic{ width:52px; height:52px; border-radius:50%; background:#fff6e6; color:#b7791f; border:2px solid #f0c869;
  font-size:30px; line-height:48px; font-weight:800; margin:0 auto 14px }
.comodal-warn-title{ font-family:var(--font-display); font-weight:400; font-size:27px; letter-spacing:.03em; margin:0 0 10px }
.comodal-warn-msg{ color:var(--ink-soft); font-size:14px; line-height:1.6; margin:0 auto 22px; max-width:460px }
.comodal-warn-msg b{ color:var(--ink) }
.comodal-warn .comodal-actions{ justify-content:center }

/* downloaded / next-steps step */
.comodal-done{ padding:38px 30px 32px; text-align:center }
.comodal-done-ic{ width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-size:28px; line-height:56px; margin:0 auto 14px; font-weight:800 }
.comodal-done-title{ font-family:var(--font-display); font-weight:400; font-size:28px; letter-spacing:.03em; margin:0 0 6px }
.comodal-done-msg{ color:var(--ink-soft); font-size:14px; line-height:1.55; margin:0 auto 16px; max-width:420px }
.comodal-steps{ list-style:none; margin:0 auto 16px; padding:0; max-width:420px; text-align:left }
.comodal-steps li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--ink); margin:0 0 10px }
.comodal-steps .cs-num{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-size:13px; font-weight:800; line-height:24px; text-align:center }
.comodal-steps b{ font-weight:800 }
.comodal-email{ display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap;
  background:var(--in); border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; margin:0 auto 20px; max-width:420px }
.comodal-email .ce-addr{ font-weight:800; font-size:15px; color:var(--ink); word-break:break-all }
.comodal-email .comodal-copyemail{ min-width:0; padding:8px 14px }
@media (max-width:560px){
  .comodal-review{ padding:20px 16px }
  .comodal-form{ flex-direction:column }
  .comodal-actions .btn{ flex:1; min-width:0 }
}
@media (max-width:640px){
  .topbar{ padding:12px 16px; gap:10px 14px; }
  .topbar{ flex-wrap:wrap; gap:10px 14px; padding:11px 16px; }
  .topbar .tb-fh{ height:19px; }
  .topbar .tb-shield{ height:40px; }
  .topbar .tb-badge{ height:38px; }
  .topbar .tb-brandname{ font-size:13px; white-space:normal; }   /* wrap so a long name can't overflow the screen */
  .topbar .tb-season{ flex:1 0 100%; order:5; text-align:left; letter-spacing:.2em; }
  .topbar .tb-right{ flex:1 0 100%; order:4; }
  .herobar{ padding:13px 16px 15px; }
  .hero-title{ font-size:22px; letter-spacing:.12em; }
  .field input{min-width:150px}
  /* stats on one row, the two buttons share the row below (they don't fit beside the stats) */
  .summarybar{gap:10px 14px; padding:10px 14px; flex-wrap:wrap}
  .summarybar .stat b{font-size:16px}
  .summarybar .spacer{flex-basis:100%; height:0}
  .summarybar .btn{flex:1 1 auto; min-width:0}
}

/* ===== Dealer login gate (customer portal) — fh-gate.js ===== */
/* athletic, slightly-faded dark backdrop behind the login card (Bravado-style):
   per-brand top glow (--gate-glow) + dark radial vignette + faint diagonal weave.
   One rule now — a brand only swaps the --gate-glow token. */
#fh-gate{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  padding:20px; background-color:#0a0a0c;
  background-image:
    radial-gradient(120% 85% at 50% -8%, var(--gate-glow) 0%, rgba(0,0,0,0) 46%),
    radial-gradient(130% 120% at 50% 38%, #1b1b20 0%, #111114 48%, #08080a 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.010) 0 1px, transparent 1px 11px);
  background-attachment:fixed; }
body.fh-gated{ overflow:hidden; }
.fhg-card{ width:100%; max-width:432px; background:#161618; border:1px solid #2a2a2e;
  border-top:3px solid var(--gate-accent,#FA6A14); border-radius:14px; padding:30px 30px 22px;
  box-shadow:0 22px 64px rgba(0,0,0,.55); color:#e9e7e3; }
.fhg-logo{ display:block; height:38px; max-width:80%; margin:4px auto 0; }
.fhg-sub{ text-align:center; color:#8a8276; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; margin:14px 0 24px; }
.fhg-sub span{ color:#b3ada1; }
.fhg-step label{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#cfcabf; margin-bottom:8px; }
.fhg-step input{ width:100%; box-sizing:border-box; background:#0f0f11; border:1px solid #33333a;
  border-radius:9px; color:#fff; font-size:18px; padding:13px 14px; font-family:inherit; }
.fhg-step input:focus{ outline:none; border-color:var(--gate-accent,#FA6A14);
  box-shadow:0 0 0 3px rgba(255,255,255,.12); }   /* brand-neutral focus ring (gold border carries the brand on JR) */
#fhg-mname{ margin-top:0; }
.fhg-hint{ color:#8a8276; font-size:12.5px; margin:8px 2px 16px; line-height:1.4; }
.fhg-btn{ width:100%; border:0; border-radius:9px; background:var(--gate-accent,#FA6A14); color:#fff;
  font-size:15px; font-weight:800; letter-spacing:.08em; padding:14px; cursor:pointer; font-family:inherit; }
.fhg-btn:hover{ filter:brightness(1.07); }
.fhg-btn:disabled{ opacity:.6; cursor:default; }
.fhg-btn.ghost{ background:transparent; border:1px solid #3a3a40; color:#cfcabf; font-weight:600; letter-spacing:0; }
.fhg-row{ display:flex; gap:10px; margin-top:2px; }
.fhg-row .fhg-btn{ flex:1; }
.fhg-manual-link{ display:block; width:100%; margin-top:14px; background:transparent; border:1px dashed #3a3a40;
  color:#cfcabf; border-radius:9px; padding:11px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.fhg-manual-link:hover{ border-color:var(--gate-accent,#FA6A14); color:#fff; }
.fhg-manual-link[hidden]{ display:none; }   /* the class's display must not override the hidden attribute */
.fhg-manual-head{ margin-bottom:14px; }
.fhg-err{ color:#ff7a6b; font-size:13px; margin-top:12px; min-height:1.1em; line-height:1.35; }
.fhg-isyou{ background:#0f0f11; border:1px solid #2a2a2e; border-radius:10px; padding:16px; text-align:center; margin-bottom:18px; }
.fhg-iy-label{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#8a8276; }
.fhg-iy-name{ font-size:20px; font-weight:800; color:#fff; margin:6px 0 3px; line-height:1.2; }
.fhg-iy-code{ font-size:12.5px; color:#9a9488; font-variant-numeric:tabular-nums; }
.fhg-namelbl{ margin-top:16px; }
.fhg-brands{ margin-top:24px; padding-top:16px; border-top:1px solid #232327; text-align:center; }
.fhg-bl{ display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:#6f6a60; margin-bottom:8px; }
.fhg-marks{ display:flex; align-items:center; justify-content:center; gap:14px; color:#cfcabf; font-weight:800; letter-spacing:.05em; font-size:12.5px; }
.fhg-sep{ width:1px; height:13px; background:#3a3a40; display:inline-block; }

/* (the "signed in as" box is styled up top in the top-bar section) */
@media (max-width:560px){ .fhg-card{ padding:24px 20px 18px } .fhg-iy-name{ font-size:18px } }

/* ===== Johnny Reb: black & white, with gold only as small accents ===== */
/* section headers are the shared cream Bravado bar; JR's identity is the GOLD
   left stripe (--section-accent) + gold count + black summary bar below. */
body.brand-jr .section .count{ color:var(--accent-2); font-weight:700; }  /* style count = gold hint */
body.brand-jr .summarybar{ background:#1a1a1a; }                 /* bottom bar black, not gold */
body.brand-jr .summarybar .stat-units b{ color:var(--accent-2); }  /* total units ordered = gold hint */
body.brand-jr .summarybar .btn.primary{ background:#fff; color:#1a1a1a; }  /* visible CTA on the black bar */
body.brand-jr td.col-total.has{ background:#f6f6f7; color:#1a1a1a; }        /* row totals neutral (gold reserved for the two accents) */
body.brand-jr .sectionnav a{ color:var(--ink); }                          /* jump-to chips black, not gold… */
body.brand-jr .sectionnav a:hover{ color:var(--accent-2); border-color:var(--accent-2); }  /* …gold only on hover */

/* ===== Centre the Colour & Price columns (both brands) ===== */
.col-colour, th.col-colour, td.col-colour{ text-align:center !important; }
.col-price,  th.col-price,  td.col-price{ text-align:center !important; }
.col-up,     th.col-up,     td.col-up{ text-align:center !important; }

/* ===== Collapsible sections (both brands) ===== */
.section h2.collapsible{ cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; }
.section h2 .sec-chev{ font-size:11px; line-height:1; flex:none; transition:transform .15s ease; }
.section.collapsed h2 .sec-chev{ transform:rotate(-90deg); }
.section h2.collapsible .count{ float:none; margin-left:auto; }
.section.collapsed .tablewrap{ display:none; }

/* ===== List ⇄ Catalogue view (portal-style) ===== */
/* segmented Price List / Catalogue toggle — Bravado pill style (cream track, dark active pill, accent label) */
.viewtoggle{ display:inline-flex; gap:3px; padding:4px; border:1px solid var(--line-strong); border-radius:26px;
  background:#efe7d7; align-self:flex-end; }
.vt-btn{ border:0; background:transparent; padding:9px 18px; font-size:13px; font-weight:800; cursor:pointer;
  color:var(--ink-soft); letter-spacing:.02em; border-radius:22px; }
.vt-btn:hover:not(.active){ color:var(--ink); }
.vt-btn.active{ background:#15151a; color:var(--accent); }
body.brand-jr .vt-btn.active{ color:var(--accent-2); }

.catgrid{ display:none; }
body.view-cat .tablewrap{ display:none; }
body.view-cat .section .catgrid{
  display:grid; grid-template-columns:repeat(var(--cat-cols,auto-fill),minmax(0,var(--cat-max,300px)));
  justify-content:center; gap:14px;
  padding:16px; background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 8px 8px;
}
/* ---- section rows: two or more short sections share a row when they BOTH fit whole ----
   The wrapper exists in both views; in list view it is a plain block, so nothing moves. */
.sec-row{ display:block; }
body.view-cat .sec-row{ display:flex; gap:18px; align-items:flex-start; justify-content:center; margin-bottom:18px; }
body.view-cat .sec-row > .section{ flex:0 1 auto; min-width:0; margin:0; }
/* a row holding ONE section still spans the page — only shared rows shrink to fit */
body.view-cat .sec-row.sec-row-solo > .section{ flex:1 1 100%; }
/* each section reads as its own card so a shared row has an obvious seam down the middle */
body.view-cat .section{
  border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(60,45,20,.09), 0 8px 22px rgba(60,45,20,.05);
}
body.view-cat .section .catgrid{ border-radius:0 0 10px 10px; }
/* The section header freezes on scroll in LIST view, where it labels a long table. In
   catalogue view it just pushes itself down off the top of its own card and leaves a hole —
   a two-card section is shorter than the sticky offset. Pin it back to the card. */
body.view-cat .section h2{ position:static; }
/* INDENT sections — pre-season, ordered before it lands. A soft orange halo, not a hard border. */
body.view-cat .section.sec-indent{
  box-shadow:0 0 0 1px rgba(250,106,20,.45), 0 0 18px rgba(250,106,20,.28), 0 8px 22px rgba(60,45,20,.06);
}
body.view-cat .section.sec-indent .catgrid{ border-color:rgba(250,106,20,.30); }
/* Johnny Reb has no orange in its palette — its indents glow gold instead */
body.brand-jr.view-cat .section.sec-indent{
  box-shadow:0 0 0 1px rgba(207,162,63,.55), 0 0 18px rgba(207,162,63,.32), 0 8px 22px rgba(60,45,20,.06);
}
body.brand-jr.view-cat .section.sec-indent .catgrid{ border-color:rgba(207,162,63,.38); }
@media (max-width:820px){   /* a shared row stops making sense once the cards get narrow */
  body.view-cat .sec-row{ display:block; }
  body.view-cat .sec-row > .section{ margin-bottom:18px; }
}
.section.collapsed .catgrid{ display:none !important; }
.cat-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:box-shadow .12s ease, transform .12s ease, border-color .12s ease; }
.cat-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--accent); }
/* The image box is a fixed SQUARE and the picture is contained inside it. aspect-ratio alone
   was not enough: a tall boot's natural height won, so the box grew (188px on a shoe, 290px on
   a knee-high) and every card's text landed at a different level. min-height:0 + overflow:hidden
   makes the square win, and the leftover space around a short photo is plain white. */
.cat-imgwrap{ position:relative; width:100%; aspect-ratio:1/1; min-height:0; overflow:hidden;
  background:#fff; display:flex; align-items:center; justify-content:center; padding:10px; }
/* Explicit size, not max-* : an image with only max-width/max-height collapses to 0x0
   before it loads, and a 0x0 element never trips loading="lazy" — so it never loads, so it
   never gets a size. object-fit:contain still letterboxes it inside the square. */
.cat-img{ width:100%; height:100%; min-height:0; object-fit:contain; }
.cat-noimg{ color:var(--ink-soft); font-size:12px; }
.cat-soldout .cat-imgwrap{ filter:grayscale(.7) opacity(.78); }
.cat-soldtag{ position:absolute; top:8px; left:8px; background:#26262a; color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:20px; }
.cat-tot{ position:absolute; top:8px; right:8px; min-width:22px; height:22px; padding:0 6px; border-radius:20px;
  background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:800; display:none;
  align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.cat-tot.has{ display:inline-flex; }
/* The text block is pinned to the BOTTOM of the card (margin-top:auto) and every part of it is
   a fixed height, so across a row the divider line, the code, the name and the price all sit on
   the same level no matter how tall the photo is. Anything left over is white. */
.cat-info{ margin-top:auto; padding:9px 11px 11px; display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--line); background:var(--panel); }
.cat-code{ color:var(--code-ink); font-weight:700; font-size:11px; font-family:monospace; letter-spacing:.02em;
  line-height:1.35; min-height:1.35em; }
/* two lines reserved, clamped at two — a long name can never push the price out of line */
.cat-name{ font-weight:700; font-size:13px; line-height:1.2; min-height:2.4em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* reserved even when a style has no colour, so the rows still line up */
.cat-colour{ color:var(--ink-soft); font-size:12px; line-height:1.35; min-height:1.35em; }
.cat-price{ font-weight:800; font-variant-numeric:tabular-nums; }
/* Bravado info layout: price (left) + CTA (right) on one row */
.cat-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:6px; }
.cat-cta{ color:var(--cta); font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.cat-soldout .cat-cta{ color:var(--ink-soft); }
/* hover: slight dark fade over the image + an ORDER pill (orange HD / vibrant gold JR) */
/* pill sits at the BOTTOM of the image so the product photo stays visible on hover */
.cat-order-pill{ position:absolute; left:50%; bottom:12px; transform:translate(-50%,8px);
  background:var(--cta); color:#fff; border-radius:20px; padding:7px 20px;
  font-family:var(--font-display); font-weight:400; font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.32); white-space:nowrap; z-index:3; }
.cat-card:hover .cat-order-pill{ opacity:1; transform:translate(-50%,0); }
.cat-imgwrap::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0;
  background:linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0) 60%); transition:opacity .15s ease; }
.cat-card:hover .cat-imgwrap::after{ opacity:1; }
.cat-card.dim{ display:none; }
@media (max-width:560px){
  body.view-cat .section .catgrid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; padding:10px; }
  /* narrow cards: stack price + CTA so the long CTA can't overflow */
  .cat-meta{ flex-direction:column; align-items:flex-start; gap:2px; }
  .cat-cta{ white-space:normal; }
}

/* ============================================================================
   Dealer sign-in — the store-search flow (fh-gate.js)
   Steps: search → "is this you?" → your details + ship-to → 2-hour warning.
   The card can get tall on the details step, so it scrolls inside itself rather
   than pushing the page.
   ⚠️ Every rule here that sets `display:` is paired with a `[hidden]` rule.
   The gate switches steps with the hidden ATTRIBUTE, and a class rule setting
   display wins over [hidden] at equal specificity (known trap, HANDOVER §10).
   ========================================================================== */
.fhg-card{ max-height:calc(100vh - 48px); overflow-y:auto; }

/* --- step 1: the search dropdown --- */
.fhg-results{ display:block; margin:8px 0 0; max-height:262px; overflow-y:auto;
  background:#0f0f11; border:1px solid #33333a; border-radius:10px; }
.fhg-results[hidden]{ display:none; }
.fhg-res{ display:block; width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid #232327; padding:10px 13px; cursor:pointer; color:#e8e3d8; }
.fhg-res:last-child{ border-bottom:0; }
.fhg-res:hover, .fhg-res:focus{ background:#1b1b1f; outline:none; }
.fhg-res:focus{ box-shadow:inset 3px 0 0 var(--gate-accent,#FA6A14); }
.fhg-res-name{ display:block; font-size:14.5px; font-weight:600; line-height:1.25; }
.fhg-res-meta{ display:block; font-size:11.5px; color:#8a8276; margin-top:2px; letter-spacing:.02em; }
.fhg-nores{ padding:13px; color:#8a8276; font-size:13px; }
.fhg-loading{ background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  background-size:200% 100%; animation:fhg-shimmer 1s linear infinite; }
@keyframes fhg-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }

/* "Can't find your store?" — quiet by default, opens an explanation */
.fhg-help-link{ display:block; width:100%; margin-top:10px; background:transparent; border:0;
  color:#8a8276; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:4px; }
.fhg-help-link:hover{ color:#cfcabf; }
.fhg-help-msg{ display:block; margin-top:8px; padding:11px 13px; background:#0f0f11;
  border:1px solid #2a2a2e; border-radius:9px; color:#9a9488; font-size:12.5px; line-height:1.5; }
.fhg-help-msg[hidden]{ display:none; }
.fhg-help-msg b{ color:#cfcabf; }

/* --- step 3: your details + where it ships --- */
.fhg-dstore{ background:#0f0f11; border:1px solid #2a2a2e; border-radius:10px;
  padding:11px 13px; margin-bottom:16px; }
.fhg-ds-lbl{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#8a8276; }
.fhg-dstore b{ display:block; color:#fff; font-size:15px; line-height:1.25; margin-top:3px; }
.fhg-ds-code{ display:block; font-size:12px; color:#8a8276; margin-top:2px; font-variant-numeric:tabular-nums; }
.fhg-addr-head{ margin:20px 0 10px; padding-top:15px; border-top:1px solid #232327;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; color:#cfcabf; text-transform:uppercase; }
.fhg-addr-head span{ display:block; margin-top:4px; font-size:12px; font-weight:400;
  letter-spacing:0; color:#8a8276; text-transform:none; }
.fhg-step .fhg-addr-head + input, .fhg-step input + input{ margin-top:8px; }
.fhg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.fhg-f{ display:block; }
.fhg-f > span{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#cfcabf; margin-bottom:6px; }
.fhg-f em{ font-style:normal; color:#7a746a; font-weight:400; letter-spacing:0; text-transform:none; }
.fhg-step .fhg-grid input{ margin-top:0; }

/* --- step 4: somebody from this store is already signed in --- */
.fhg-warn{ background:#1e1a10; border:1px solid #5c4a1c; border-radius:10px;
  padding:18px 16px; text-align:center; margin-bottom:18px; }
.fhg-warn-ic{ width:34px; height:34px; margin:0 auto 10px; border-radius:50%;
  background:var(--bo,#ffeebc); color:#7a5b00; font-weight:800; font-size:20px; line-height:34px; }
.fhg-warn-title{ color:#fff; font-size:17px; font-weight:800; margin-bottom:9px; }
.fhg-warn-body{ color:#cfcabf; font-size:13.5px; line-height:1.5; }
.fhg-warn-body b{ color:#fff; display:block; font-size:15px; }
.fhg-warn-em{ display:block; color:#8a8276; font-size:12.5px; margin:1px 0 5px; }
.fhg-warn-when{ display:block; }
.fhg-warn-ask{ color:#e8e3d8; font-size:13.5px; font-weight:700; margin-top:12px; }

@media (max-width:560px){
  .fhg-grid{ grid-template-columns:1fr; }
  .fhg-results{ max-height:210px; }
}

/* Catalogue button in the hero band — the PDF the order form is built from.
   Big on purpose: dealers asked for the catalogue beside the prices. */
.herobar{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-txt{ min-width:0; }
.hero-cat{
  margin-left:auto; display:inline-flex; align-items:center; gap:12px;
  padding:12px 18px; border-radius:10px; text-decoration:none;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  /* JR's accent is near-black, which vanishes on the dark hero band — it uses
     the gold secondary instead, exactly as the hero's top border already does. */
  transition:transform .12s ease, filter .12s ease;
}
.hero-cat:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.hero-cat-ic{ font-size:19px; line-height:1; opacity:.9; }
.hero-cat-txt{ display:flex; flex-direction:column; line-height:1.25; }
.hero-cat-txt b{ font-size:14.5px; font-weight:800; letter-spacing:.01em; }
.hero-cat-txt em{ font-style:normal; font-size:11.5px; opacity:.82; margin-top:1px; }
body.brand-jr .hero-cat{ background:var(--accent-2); color:#1a1a1a; }
body.brand-jr .hero-cat-txt em{ opacity:.72; }
@media (max-width:720px){
  .hero-cat{ margin-left:0; width:100%; justify-content:center; }
}

/* ============================================================
   Brand-access block screen (assets/fh-brands.js). Shown when a store opens a
   brand its account does not carry — a plain explanation and a way onward, never
   a redirect loop and never a blank page.
   ============================================================ */
.fhb-block{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:40px 24px; text-align:center; background:#0d0e10; }
.fhb-block-logo{ width:min(300px,70vw); height:auto; margin-bottom:10px; }
.fhb-block h1{ color:#fff; font-size:23px; margin:0; letter-spacing:.01em; }
.fhb-block p{ color:#aab0b8; font-size:15px; margin:0; line-height:1.55; }
.fhb-block p b{ color:#fff; }
.fhb-block-btn{ margin-top:10px; display:inline-block; text-decoration:none; background:#FA6A14; color:#fff;
  border-radius:999px; padding:12px 30px; font-weight:800; font-size:15px; letter-spacing:.02em;
  transition:filter .12s ease; }
.fhb-block-btn:hover{ filter:brightness(1.08); }
.fhb-block-alt{ color:#9aa0a6; font-size:13.5px; text-decoration:none; border-bottom:1px solid #3a3f47; }
.fhb-block-alt:hover{ color:#fff; }
.fhb-block-help{ margin-top:16px !important; font-size:12.5px !important; color:#6b7077 !important; }
.fhb-block-help a{ color:#9aa0a6; }
@media (prefers-reduced-motion:reduce){ .fhb-block-btn{ transition:none; } }

/* ============================================================
   The shipping confirmation pop-up (assets/fh-ship.js). Deliberately has no close
   control: the confirm button is the only way out, and while it is open every other
   top-level element carries `inert` so it cannot be tabbed past.
   ============================================================ */
#fh-ship{ position:fixed; inset:0; z-index:400; background:rgba(10,10,12,.72);
  display:flex; align-items:flex-start; justify-content:center; padding:28px 18px; overflow:auto; }
#fh-ship[hidden]{ display:none; }
.fhs-card{ background:#fff; border-radius:16px; width:min(560px,100%); padding:26px 28px 24px;
  box-shadow:0 22px 60px rgba(0,0,0,.42); }
.fhs-head h2{ margin:0 0 6px; font-size:21px; letter-spacing:.01em; }
.fhs-head p{ margin:0 0 16px; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
.fhs-store{ background:#f4efe5; border-left:3px solid var(--cta-solid); border-radius:8px;
  padding:9px 13px; margin-bottom:16px; }
.fhs-store-lbl{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); }
.fhs-store b{ font-size:16px; }
.fhs-lbl{ display:block; font-size:12px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); margin:12px 0 5px; }
.fhs-lbl em{ font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; }
#fh-ship input, #fh-ship textarea{ width:100%; padding:10px 12px; border:1px solid var(--line-strong);
  border-radius:8px; font-size:15px; font-family:inherit; background:#fff; }
#fh-ship input:focus, #fh-ship textarea:focus{ outline:2px solid var(--cta-solid); border-color:var(--cta-solid); }
#fh-ship #fhs-a2{ margin-top:8px; }
.fhs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.fhs-f span{ display:block; font-size:12px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px; }
.fhs-f em{ font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; }
#fh-ship textarea{ resize:vertical; min-height:64px; }
.fhs-err{ color:#c0392b; font-size:13px; font-weight:700; min-height:18px; margin:10px 0 0; }
.fhs-go{ width:100%; margin-top:8px; appearance:none; border:0; border-radius:10px;
  background:var(--cta-solid); color:#fff; font-size:16px; font-weight:800; letter-spacing:.02em;
  padding:14px; cursor:pointer; transition:filter .12s ease; }
.fhs-go:hover{ filter:brightness(1.1); }
body.fh-ship-gated{ overflow:hidden; }
@media (max-width:560px){
  .fhs-card{ padding:20px 18px; border-radius:12px; }
  .fhs-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .fhs-go{ transition:none; } }

/* The style's running total, sat under its size row: how many, and what they come to. */
.pmodal-total{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:16px;
  padding:12px 16px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--cta-solid);
  border-radius:9px }
.pmodal-total .pmt-n, .pmodal-total .pmt-v{ font-weight:800; font-size:21px; font-variant-numeric:tabular-nums;
  color:var(--ink); line-height:1 }
.pmodal-total .pmt-v{ margin-left:auto; color:var(--price) }
.pmodal-total .pmt-l{ font-size:12px; color:var(--ink-soft); font-weight:700; letter-spacing:.03em;
  text-transform:uppercase }
.pmodal-total .pmt-none{ font-size:13px; color:var(--ink-soft) }
@media (max-width:640px){
  .pmodal-total{ margin-top:12px; padding:10px 12px }
  .pmodal-total .pmt-n, .pmodal-total .pmt-v{ font-size:18px }
}

/* ============================================================
   THE PORTAL RAIL — the left-hand brand menu on order.html.

   Its palette is FIXED and deliberately unbranded (Jack, 27 Aug 2026: "not a
   Harley Davidson theme like the OLP has, just a generic theme"). Nothing here
   reads var(--accent) / var(--cta), so the rail looks identical standing in
   Harley-Davidson orange or Johnny Reb gold. Only .fhrail-dot carries a brand
   colour, set inline from the registry.
   ============================================================ */
/* align-items must NOT be flex-start here. It shrink-wraps #fh-rail to the
   rail's own height, and a sticky element can only travel inside its PARENT's
   box — so a 791px-tall wrapper in a 9,987px page gives it nowhere to stick and
   it scrolls away. `stretch` makes the wrapper as tall as the row, which is the
   runway sticky needs. */
.fh-shell .fh-body{ display:flex; align-items:stretch; gap:0; }
/* the wrapper is the flex item and owns the width; the rail sticks INSIDE it */
.fh-shell #fh-rail{ flex:0 0 226px; width:226px; position:relative; }
body.rail-collapsed .fh-shell #fh-rail{ flex-basis:56px; width:56px; }
.fh-shell #app{ flex:1 1 auto; min-width:0; }   /* min-width:0 or the wide grid table refuses to shrink */

.fhrail{
  --rail-bg:#25252b; --rail-ink:#e9e9ee; --rail-dim:#9a9aa6;
  --rail-line:rgba(255,255,255,.09); --rail-hot:rgba(255,255,255,.07);
  width:100%;                       /* fills #fh-rail, which owns the width */
  background:var(--rail-bg); color:var(--rail-ink);
  border-right:1px solid var(--rail-line);
  font-size:13.5px;
  /* A real menu bar: pinned to the viewport, full height, scrolling on its own.
     align-self MUST be flex-start — the default `stretch` makes the flex item as
     tall as the row, and a stretched item cannot stick, which is why it used to
     scroll away with the page. */
  position:sticky; top:0;
  height:100vh; overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:18px;
}
/* a slim scrollbar, so the rail's own scrolling doesn't shove the content over */
.fhrail::-webkit-scrollbar{ width:8px }
.fhrail::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px }
.fhrail::-webkit-scrollbar-track{ background:transparent }
.fhrail{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent }
.fhrail-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 12px 11px 15px; border-bottom:1px solid var(--rail-line);
  position:sticky; top:0; background:var(--rail-bg); z-index:2;
}
.fhrail-title{
  font-family:var(--font-display); letter-spacing:.14em; font-size:13px;
  text-transform:uppercase; color:var(--rail-dim);
}
.fhrail-toggle{
  appearance:none; border:1px solid var(--rail-line); background:transparent;
  color:var(--rail-dim); width:25px; height:25px; border-radius:6px;
  cursor:pointer; line-height:1; font-size:13px; flex:none;
}
.fhrail-toggle:hover{ background:var(--rail-hot); color:var(--rail-ink); }
.fhrail-list{ padding:8px 8px 0; }
.fhrail-brand + .fhrail-brand{ margin-top:2px; }

.fhrail-btn{
  appearance:none; width:100%; display:flex; align-items:center; gap:9px;
  background:transparent; border:0; border-radius:8px; cursor:pointer;
  padding:9px 9px 9px 10px; text-align:left; color:var(--rail-ink);
  font:inherit; font-weight:600;
}
.fhrail-btn:hover{ background:var(--rail-hot); }
.fhrail-btn.active{ background:rgba(255,255,255,.13); }
.fhrail-dot{ display:none; }   /* replaced by the brand's own logo */
.fhrail-txt{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.fhrail-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The cross-brand cart made visible: units sitting in a brand you are not
   looking at. Without it a mixed order is invisible and half of it gets left. */
.fhrail-units{ font-size:11.5px; font-weight:600; color:var(--rail-dim); display:none; }
.fhrail-units.has{ display:block; color:#8fd3a0; }
.fhrail-caret{ color:var(--rail-dim); transition:transform .15s ease; flex:none; }
.fhrail-btn.open .fhrail-caret{ transform:rotate(90deg); }

.fhrail-sub{ display:none; margin:2px 0 6px 10px; border-left:1px solid var(--rail-line); padding-left:7px; }
.fhrail-sub.open{ display:block; }
.fhrail-subbtn{
  appearance:none; width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; background:transparent; border:0; border-radius:6px; cursor:pointer;
  padding:7px 8px; text-align:left; color:var(--rail-dim); font:inherit; font-size:13px;
}
.fhrail-subbtn:hover{ background:var(--rail-hot); color:var(--rail-ink); }
.fhrail-subbtn.active{ background:rgba(255,255,255,.11); color:var(--rail-ink); font-weight:600; }
.fhrail-subunits{ font-size:11.5px; color:#8fd3a0; }

/* Collapsed = an icon rail. The brand dot stays, so you can still tell the
   brands apart, and the whole thing is one click from coming back. */
body.rail-collapsed .fhrail{ flex-basis:52px; width:52px; }
body.rail-collapsed .fhrail-title,
body.rail-collapsed .fhrail-txt,
body.rail-collapsed .fhrail-caret,
body.rail-collapsed .fhrail-sub{ display:none; }
body.rail-collapsed .fhrail-head{ justify-content:center; padding-left:12px; padding-right:12px; }
body.rail-collapsed .fhrail-btn{ justify-content:center; padding-left:9px; padding-right:9px; }
body.rail-collapsed .fhrail-logo{ width:30px; height:30px; }

/* Phone: the rail goes off-canvas so the order form keeps the full width. */
@media (max-width: 900px){
  .fhrail{
    position:fixed; left:0; top:0; bottom:0; z-index:60; max-height:none;
    transform:translateX(-100%); transition:transform .18s ease;
    box-shadow:0 0 26px rgba(0,0,0,.4);
  }
  body.rail-open .fhrail{ transform:none; }
  body.rail-collapsed .fhrail{ flex-basis:226px; width:226px; }
}
#app.is-loading{ opacity:.45; pointer-events:none; transition:opacity .12s ease; }
.fh-empty{ padding:40px; text-align:center; color:#6b6b76; }

/* The order reference, shown once the order is actually IN the database — the
   dealer's proof it saved, and what the office quotes back to them. */
.comodal-ref{ display:flex; flex-direction:column; gap:3px; align-items:center;
  margin:0 0 14px; padding:11px 14px; border-radius:9px;
  background:rgba(0,0,0,.045); border:1px solid rgba(0,0,0,.10); }
.comodal-ref .cr-lbl{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#6b6b76; }
.comodal-ref .cr-val{ font-family:var(--font-display); font-size:25px; letter-spacing:.05em; color:var(--ink); }
.comodal-ref .cr-note{ font-size:12.5px; color:#6b6b76; text-align:center; }
/* A save that failed. Deliberately loud: nothing downloaded and nothing cleared,
   so the dealer must understand the order is still sitting there. */
.comodal-submit-err{ margin:0 0 12px; padding:10px 13px; border-radius:8px;
  background:#fdecea; border:1px solid #f0b6ae; color:#8c2b1c;
  font-size:13.5px; line-height:1.45; }

/* "Also in this order: 2 units in Harley-Davidson." The review table is built
   from the brand on screen; the submit sends every brand. Without this the
   dealer would see a smaller order than the one they are placing. */
.comodal-otherbrands{ margin:10px 0 0; padding:9px 12px; border-radius:8px;
  background:rgba(0,0,0,.05); border:1px dashed rgba(0,0,0,.18);
  font-size:13px; line-height:1.5; color:var(--ink); }
.comodal-otherbrands span{ color:#6b6b76; }

/* "includes 4 units in Johnny Reb" — the part of the running total that is not
   on this screen. The bar totals the WHOLE order (one cart, one submit), so
   without this the figures look wrong to someone standing in one brand. */
.summarybar .sb-note{
  align-self:center; margin-left:14px; padding-left:14px;
  border-left:1px solid rgba(255,255,255,.22);
  font-size:12.5px; line-height:1.35; color:rgba(255,255,255,.72); max-width:230px;
}
body.brand-jr .summarybar .sb-note{ color:rgba(255,255,255,.72); }
@media (max-width: 900px){ .summarybar .sb-note{ display:none; } }

/* ============================================================
   MARCOLIN — Harley-Davidson eyewear. A cool steel blue, so it is
   instantly distinct from HD's orange and Johnny Reb's gold at a
   glance in the rail and on the hero band.
   ============================================================ */
body.brand-mc{
  --accent:#2E6E8E; --accent-ink:#ffffff; --accent-2:#7FB2CC; --in-focus:#2E6E8E;
  --section-ink:#7FB2CC;             /* section-header text on the black band */
  --thead-bg:#2f3a41;
  --price:#1A5C1A;
  --code-ink:#2E6E8E;
  --cta:#2E6E8E;
  --row-hover:rgba(46,110,142,.07); --row-fill:rgba(46,110,142,.14);
  --gate-accent:#2E6E8E; --gate-glow:rgba(46,110,142,.12);
  --cta-solid:#2E6E8E;               /* white on this blue is 5.1:1 */
}
body.brand-mc .summarybar{ background:#22303a; }
body.brand-mc .summarybar .stat-units b{ color:var(--accent-2); }

/* ============================================================
   ONE-SIZE BRANDS (Marcolin) — the grid was built for footwear.
   HD and JR are style × size: sixteen size columns carry the width and
   the identifying text is short. Eyewear has NO sizes, so those columns
   vanish, the fixed widths leave ~40% of the table empty, and the code
   and colour — which are the ONLY things telling two variants apart —
   get clipped by the nowrap/overflow rule.
   Scoped to body.brand-mc so HD and JR are untouched.
   ============================================================ */
body.brand-mc .col-style { width:132px; }        /* "HZ0006 - 20J" needs the room */
body.brand-mc .col-name  { width:290px; }
body.brand-mc .col-colour{ width:auto; min-width:230px; white-space:normal; }
body.brand-mc .col-price { width:110px; }
/* the qty cell was a sliver because it was sized for one of sixteen columns */
body.brand-mc td.cell.onesize{ width:120px; }
body.brand-mc td.cell .ones{ font-size:10px; }
/* a 30px thumbnail cannot show a pair of sunglasses; these rows have the height */
body.brand-mc .col-name .thumb{ width:60px; height:44px; object-fit:contain; }

/* ---- the product popup, for a product with no sizes ----
   The right-hand half exists to hold a size run. With one size it is almost
   empty while the photo is squeezed into 300px — and for eyewear the photo IS
   the product. Give the picture the space the sizes are not using. */
.pmodal-card.pm-onesize .pmodal-img{ width:620px; max-width:56%; }
.pmodal-card.pm-onesize .pmodal-info{ padding:28px 34px; }
.pmodal-card.pm-onesize .pmodal-sizes{ justify-content:flex-start; }
@media (max-width: 900px){
  .pmodal-card.pm-onesize .pmodal-img{ width:100%; max-width:100%; }
}

/* ============================================================
   RAIL v2 — brand LOGOS and category ICONS.
   Jack, 31 Aug 2026: "I want little icons of Harley-Davidson and Johnny Reb
   logo next to them, so when they collapse, it's just a logo", and a small
   pictogram against each category saying what it is.
   ============================================================ */
.fhrail-logo{
  width:26px; height:26px; flex:none; object-fit:contain;
  background:none; padding:0;      /* clean cut-out, no white plate */
}
.fhrail-logo-fb{                       /* a brand with no artwork yet */
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; letter-spacing:.02em; color:#25252b;
}
/* Category pictogram — a boot, a pair of glasses, a jacket. */
.fhrail-ic{ width:17px; height:17px; flex:none; display:block; opacity:.85; }
.fhrail-ic svg{ width:100%; height:100%; display:block; }
.fhrail-subbtn.active .fhrail-ic,
.fhrail-subbtn:hover .fhrail-ic{ opacity:1; }
.fhrail-subbtn{ gap:10px; justify-content:flex-start; }
.fhrail-subname{ flex:1 1 auto; text-align:left; }

/* Collapsed: logos only, and they stay legible rather than shrinking to dots. */
body.rail-collapsed .fhrail-btn{ padding:10px 9px; }
body.rail-collapsed .fhrail-logo{ width:28px; height:28px; padding:0; }
body.rail-collapsed .fhrail-sub{ display:none; }
body.rail-collapsed .fhrail-btn.active{ box-shadow:inset 3px 0 0 #fff; }

/* ---- rail level 3: the sections inside Mens / Womens / Kids ---- */
.fhrail-caret2{ margin-left:auto; color:var(--rail-dim); font-size:12px; transition:transform .15s ease; }
.fhrail-subbtn.kids-open .fhrail-caret2{ transform:rotate(90deg); }
.fhrail-sub3{ display:none; margin:1px 0 4px 26px; }
.fhrail-sub3.open{ display:block; }
.fhrail-secbtn{
  appearance:none; width:100%; text-align:left; background:transparent; border:0;
  border-radius:5px; cursor:pointer; padding:5px 8px; font:inherit; font-size:12.5px;
  color:var(--rail-dim); line-height:1.3;
}
.fhrail-secbtn:hover{ background:var(--rail-hot); color:var(--rail-ink); }
.fhrail-secbtn.active{ color:var(--rail-ink); font-weight:700; background:rgba(255,255,255,.09); }
body.rail-collapsed .fhrail-sub3{ display:none; }

/* ---- collapsed rail: centre the logos properly ----
   It was inheriting the expanded row's padding and left-aligning, which is what
   made the collapsed strip look wrong rather than deliberate. */
body.rail-collapsed .fhrail{ width:100%; }
body.rail-collapsed .fhrail-list{ padding:8px 0 0; }
body.rail-collapsed .fhrail-brand + .fhrail-brand{ margin-top:6px; }
body.rail-collapsed .fhrail-btn{
  justify-content:center; padding:9px 0; margin:0 6px; width:auto; gap:0;
}
body.rail-collapsed .fhrail-units{ display:none; }
body.rail-collapsed .fhrail-head{ padding:13px 0 11px; justify-content:center; }
body.rail-collapsed .fhrail-toggle{ margin:0; }

/* ============================================================
   THE CATEGORY BAR — replaces the wall of section pills.
   Black, like the retail site, so it reads as navigation rather than as more
   filter chips. It carries the SAME tree as the left rail; the old pills are
   now the contents of the dropdowns.
   ============================================================ */
.sectionnav.catnav .cn-item[hidden]{ display:none; }
.sectionnav.catnav .cn-more .cn-drop{ left:auto; right:0; }
.sectionnav.catnav{
  /* KEEPS the base rule's position:sticky — overriding it with `relative` is
     what knocked the bar out of the page flow and dropped it over the products.
     The dropdowns anchor to .cn-item, which is relative, not to this. */
  display:flex; flex-wrap:wrap; gap:0; align-items:stretch;
  background:#141418; border-bottom:1px solid #000;
  padding:0 16px; min-height:44px;
}
.sectionnav.catnav .cn-item{ position:relative; }
.sectionnav.catnav .cn-tab{
  appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  color:#d7d7de; font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:13px 15px; display:flex; align-items:center; gap:6px;
  border-bottom:2px solid transparent;
}
.sectionnav.catnav .cn-tab:hover{ color:#fff; }
.sectionnav.catnav .cn-item.on .cn-tab{ color:#fff; border-bottom-color:var(--accent); }
.sectionnav.catnav .cn-caret{ font-size:9px; opacity:.7; transition:transform .15s ease; }
.sectionnav.catnav .cn-item.open .cn-caret{ transform:rotate(180deg); }
.sectionnav.catnav .cn-item.open .cn-tab{ color:#fff; background:#1e1e24; }

/* the dropdown — the old pills live in here now */
.sectionnav.catnav .cn-drop{
  display:none; position:absolute; top:100%; left:0; min-width:248px;
  background:#1e1e24; border:1px solid rgba(255,255,255,.10); border-top:none;
  border-radius:0 0 9px 9px; padding:7px; box-shadow:0 14px 30px rgba(0,0,0,.34); z-index:40;
}
.sectionnav.catnav .cn-item.open .cn-drop{ display:block; }
.sectionnav.catnav .cn-drop button{
  appearance:none; display:block; width:100%; text-align:left; background:none; border:0;
  cursor:pointer; font:inherit; font-size:13px; color:#c9c9d2;
  padding:8px 11px; border-radius:6px; line-height:1.35;
}
.sectionnav.catnav .cn-drop button:hover{ background:rgba(255,255,255,.09); color:#fff; }
.sectionnav.catnav .cn-drop button.on{ color:#fff; font-weight:700; background:rgba(255,255,255,.07); }
.sectionnav.catnav .cn-all{
  font-weight:700 !important; color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-radius:6px 6px 0 0 !important; margin-bottom:4px;
}
@media (max-width: 900px){
  .sectionnav.catnav{ overflow-x:auto; flex-wrap:nowrap; }
  .sectionnav.catnav .cn-drop{ position:static; box-shadow:none; }
}