/* BurbzTech components v2. Every class works on plain HTML; the React components render this same markup.
   Chamfer = top-left and bottom-right corners cut at 45 degrees. --c sets the cut on any chamfered element. */

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

/* Chamfer primitives */
.bt-cut { --c: var(--chamfer-md); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-edge { position: relative; }
.bt-edge::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: var(--_edge, var(--line));
  clip-path: polygon(evenodd, var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c), var(--c) 0,
    calc(var(--c) + 0.41px) 1px, 1px calc(var(--c) + 0.41px), 1px calc(100% - 1px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - 1px) 1px, calc(var(--c) + 0.41px) 1px); }

/* Button: face on ::before (chamfered), chamfered focus ring on ::after (2px gap, 2px ring). */
.bt-btn { --c: var(--chamfer-md); --_face: var(--control); --_ink: var(--ink); --_ring: var(--focus);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box;
  height: var(--control-md); padding: 0 var(--space-4); border: 0; background: none; color: var(--_ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.bt-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--_face); transition: background-color .12s ease;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-btn::after { content: ""; position: absolute; inset: -4px; z-index: -1; background: var(--_ring); opacity: 0; pointer-events: none;
  clip-path: polygon(evenodd, calc(var(--c) + 2.34px) 0, 100% 0, 100% calc(100% - var(--c) - 2.34px), calc(100% - var(--c) - 2.34px) 100%, 0 100%, 0 calc(var(--c) + 2.34px), calc(var(--c) + 2.34px) 0,
    calc(var(--c) + 3.17px) 2px, 2px calc(var(--c) + 3.17px), 2px calc(100% - 2px), calc(100% - var(--c) - 3.17px) calc(100% - 2px), calc(100% - 2px) calc(100% - var(--c) - 3.17px), calc(100% - 2px) 2px, calc(var(--c) + 3.17px) 2px); }
.bt-btn:focus-visible { outline: none; }
.bt-btn:focus-visible::after { opacity: 1; }
.bt-btn--primary { --_face: var(--copper); --_ink: var(--on-copper); }
.bt-btn--primary:hover { --_face: var(--copper-strong); }
.bt-btn--secondary:hover { --_face: var(--control-hover); }
.bt-btn--ghost { --_face: transparent; }
.bt-btn--ghost:hover { --_face: var(--control-hover); }
.bt-btn--sm { --c: var(--chamfer-sm); height: var(--control-sm); padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
.bt-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: 18px; }
.bt-btn--block { display: flex; width: 100%; }
.bt-btn:disabled, .bt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bt-panel .bt-btn, .bt-on-graphite .bt-btn { --_ring: var(--focus-inverse); }

/* Tag */
.bt-tag { --c: var(--chamfer-sm); display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 var(--space-2) 0 calc(var(--space-2) + 2px);
  background: var(--surface-sunken); color: var(--ink); font-family: var(--font-condensed); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-tag--copper { background: var(--copper-soft); color: var(--copper-strong); }
.bt-tag--success { background: var(--success-soft); color: var(--success); }
.bt-tag--warning { background: var(--warning-soft); color: var(--warning); }
.bt-tag--danger { background: var(--danger-soft); color: var(--danger); }

/* Part code */
.bt-code { display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.bt-panel .bt-code, .bt-on-graphite .bt-code { color: var(--on-graphite); border-color: var(--on-graphite-muted); }

/* Placard: graphite plate with two rivets */
.bt-placard { --c: var(--chamfer-sm); display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box; height: 28px; padding: 0 11px;
  background: var(--graphite); color: var(--on-graphite); font-family: var(--font-condensed); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-placard::before, .bt-placard::after { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--fastener); box-shadow: inset 0 0 0 1px var(--panel-seam); flex: none; }
.bt-panel .bt-placard { background: var(--surface-raised); color: var(--ink); }

/* Price */
.bt-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-2); color: var(--ink); font-family: var(--font-condensed); font-variant-numeric: tabular-nums; }
.bt-price__amount { font-size: 24px; line-height: 28px; font-weight: 700; }
.bt-price__code { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .04em; color: var(--ink-muted); }
.bt-price__was { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-muted); text-decoration: line-through; }
.bt-price--sale .bt-price__amount { color: var(--copper-strong); }
.bt-price--free .bt-price__amount { color: var(--success); }
.bt-price--sm .bt-price__amount { font-size: 20px; line-height: 24px; }

/* Surfaces: panel (tiles in light, hull in dark) and blueprint grid */
.bt-panel { background-color: var(--panel); color: var(--on-graphite);
  background-image: linear-gradient(var(--panel-seam) 1px, transparent 1px), linear-gradient(90deg, var(--panel-seam) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; }
[data-theme="dark"] .bt-panel { background-color: var(--panel);
  background-image:
    radial-gradient(circle at 10px 10px, var(--fastener) 2.6px, var(--panel-seam) 3.2px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--fastener) 2.6px, var(--panel-seam) 3.2px, transparent 3.8px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--fastener) 2.6px, var(--panel-seam) 3.2px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--fastener) 2.6px, var(--panel-seam) 3.2px, transparent 3.8px),
    linear-gradient(90deg, var(--panel-seam) 2px, var(--panel-edge) 2px 3px, transparent 3px),
    linear-gradient(180deg, var(--panel-seam) 2px, var(--panel-edge) 2px 3px, transparent 3px);
  background-size: 240px 160px; background-position: 0 0; }
.bt-grid { background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, var(--space-4) var(--space-4), var(--space-4) var(--space-4); background-position: -1px -1px; }

/* Colourways: one class on a page, section or collection wrapper repaints the decorative
   layer inside it - the livery band, decorative hazard stripes, accent brackets, accent card
   edges and patch rims. Nothing else moves: Buy, status, focus and text keep their colours.
   Unset, everything falls back to the house copper and amber. */
.bt-paint-copper    { --paint: var(--livery-copper);    --paint-trim: var(--livery-amber);  --paint-edge: var(--edge-copper); }
.bt-paint-berry     { --paint: var(--paint-berry);      --paint-trim: var(--paint-leaf);    --paint-edge: var(--edge-berry); }
.bt-paint-blueprint { --paint: var(--paint-blueprint);  --paint-trim: var(--paint-coolant); --paint-edge: var(--edge-blueprint); }
.bt-paint-coolant   { --paint: var(--paint-coolant);    --paint-trim: var(--livery-amber);  --paint-edge: var(--edge-coolant); }
.bt-paint-brass     { --paint: var(--paint-brass);      --paint-trim: var(--bare-metal);    --paint-edge: var(--edge-brass); }
.bt-paint-steel     { --paint: var(--paint-steel);      --paint-trim: var(--graphite);      --paint-edge: var(--edge-steel); }

/* Frame: HUD corner brackets, optional ruler */
.bt-frame { --_b: var(--line-strong); --_l: 14px; --_w: 1.5px; position: relative; padding: 10px; }
.bt-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--_b), var(--_b)) left top / var(--_l) var(--_w) no-repeat, linear-gradient(var(--_b), var(--_b)) left top / var(--_w) var(--_l) no-repeat,
    linear-gradient(var(--_b), var(--_b)) right top / var(--_l) var(--_w) no-repeat, linear-gradient(var(--_b), var(--_b)) right top / var(--_w) var(--_l) no-repeat,
    linear-gradient(var(--_b), var(--_b)) left bottom / var(--_l) var(--_w) no-repeat, linear-gradient(var(--_b), var(--_b)) left bottom / var(--_w) var(--_l) no-repeat,
    linear-gradient(var(--_b), var(--_b)) right bottom / var(--_l) var(--_w) no-repeat, linear-gradient(var(--_b), var(--_b)) right bottom / var(--_w) var(--_l) no-repeat; }
.bt-frame--accent { --_b: var(--paint-edge, var(--edge-copper)); --_l: 22px; --_w: 2px; }
.bt-frame--ruler { margin-top: 18px; }
.bt-frame--ruler::after { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 40px) left bottom / 100% 10px no-repeat,
              repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat; }
.bt-frame__mark { position: absolute; left: 14px; bottom: 10px; font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: .04em; color: var(--ink-muted); }

/* Livery band: graphite 14, gap 3, paint 8, gap 3, trim 4. Colourway classes set the paint. */
.bt-livery { position: relative; height: var(--livery-height);
  background: linear-gradient(var(--graphite) 0 14px, transparent 14px 17px, var(--paint, var(--livery-copper)) 17px 25px, transparent 25px 28px, var(--paint-trim, var(--livery-amber)) 28px 32px); }
.bt-livery--worn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAgCAYAAAD9qabkAAADnElEQVR42u2dbUsVQRTH/8b9FkJQpJlQdilqUSMspEsqmgqXIMIHkL5Nby2opAIJKpMeMKQkeuAWhT2AlUm98oXfoRe9cC6c1nvX3Z3HnTk/kHPu3bszZ+fMnJmdnVlbrs7eAcNkZAPAAcdtfE30UxbtqMU+RwrTlU2rVop98QnAMa7fzvNLyDZL+cs0/lkAVzz0yTLR+1M2+DkhJ3LkpyKQRKVAGswzIc97cj1tDtlyj+jVFL831fhN9/r9Eue+IPpZk0bHAwD3/nr5AaDDYH7rRG/PmcZdol9iFyplwrYBoYwAXOn5Owzn124gj6qlsrwPYNwRv64KWS5awzARAOaJfpGDfuFwude/KeSUZTvKRXXuHq7fO9gUf4zbjHMRFGMEkLXXXyN6p4UyaeVqIc2aIf9NcVHLB4Db5PNlB2zqDNAPb4nek/HcV0Ke5uocLG+I3hs7dl3ImaQRQGvOYe+CkBfYB1L0eHY9PgbxTR9HiKUMvX79eW+V26tT1Hv+VeycjFIZoG0vPrKNyw2/N+HYjKo5gEYNn3t+OW4BmFSUVpn9o5SHAEYVpPNOyG7JdFaE7FM9AmCSsbZKyzFC6/lHHbOnT0eiOgOAis0Kpngp5JkGx3Q2+skMt1afARzVaMt7op+U8Hkdnb5/DuAcyU/lBhskXEP8+tLk352QT2S7PFt4NyDDhAsvBGIYDgAMw4RI1jmALPf1Ou/PosD89J3ohzSWsYxvGtnwm+j7PfSLjTq5BKCSwp5UNumeA/hI9OPYfrQCmJ9hfQxgyMMAUGeF6H1NAsQHoZ8waLdrAWAZcvv2vcO1ScB5qNsx+JPo6w4HgK8AjnBVZDTxFMBA6HMAQ1wPGEZ+DkA3zXr/L0J2ZUjrYEF8wL2/HZaErDhk0wOij+U4/xvRDws5UKQAUDT+ANjHxcBoqlsQ9WuDfK/0bcxFCQBdGtOOT1QyYVBx0KYxiXMXsT3pOuxjAMhLmseWf3OWQw3AFsJ+PMlkrzN56kqaXn+vzyOAvESKfqPyPCZcdNaZXO8l5JWADBMwHAAYJmCKcgug6/+rmbifqzlkc5wnQg5aLKcFovv8ApNFpJugM7qNvigBICqwTaHPFex2/bTR3xBy2pNrz/NWIaP1RVcA4DXX9siyNmGQi0sZj4g+IiRt/MMuGu3KCCDNQodmQ8lr+H+dwG4RtL5BxaXdaSqHfVuO33YkMd2kTGxtIsvCCLHb9Nuwcvv7Hz4ijYxQpIX3AAAAAElFTkSuQmCC") repeat-x left top / 256px 32px; }

/* Hazard bands: decorative (graphite and the colourway's paint) and warning (yellow/black) */
.bt-hazard { --_s: 12px; height: 16px; background: repeating-linear-gradient(-45deg, var(--paint, var(--livery-copper)) 0 var(--_s), var(--graphite) var(--_s) calc(var(--_s) * 2)); }
.bt-hazard--warning { background: repeating-linear-gradient(45deg, var(--hazard) 0 var(--_s), var(--hazard-ink) var(--_s) calc(var(--_s) * 2)); }
.bt-hazard--sm { --_s: 8px; height: 8px; }

/* Caution callout: real warnings only */
.bt-caution { --c: var(--chamfer-md); position: relative; box-sizing: border-box; background: var(--warning-soft); color: var(--ink); padding: 22px var(--space-4) 22px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-caution::before, .bt-caution::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(45deg, var(--hazard) 0 10px, var(--hazard-ink) 10px 20px); }
.bt-caution::before { top: 0; } .bt-caution::after { bottom: 0; }
.bt-caution__title { font-family: var(--font-condensed); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--warning); }
.bt-caution__body { margin: 4px 0 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; }

/* Readout: telemetry-style data panel */
.bt-readout { --c: var(--chamfer-md); box-sizing: border-box; background: var(--surface-sunken); color: var(--ink); padding: 12px var(--space-4) 10px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-readout__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: 4px; }
.bt-readout__title { font-family: var(--font-condensed); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.bt-readout__code { font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--ink-muted); }
.bt-readout__rows { margin: 0; }
.bt-readout__row { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px dashed var(--line); font-family: var(--font-mono); font-size: 13px; line-height: 24px; }
.bt-readout__row dt { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.bt-readout__row dd { margin: 0; font-weight: 500; }
.bt-readout__bar { display: flex; gap: 3px; margin: 10px 0 4px; }
.bt-readout__bar i { flex: 1; height: 7px; border-radius: var(--radius-sm); background: var(--line); }
.bt-readout__bar i.is-on { background: var(--ink-muted); }
.bt-readout--copper .bt-readout__bar i.is-on { background: var(--copper); }

/* Card + ProductCard */
.bt-card { --c: var(--chamfer-lg); --_edge: var(--line); position: relative; box-sizing: border-box; background: var(--surface-raised); overflow: hidden;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bt-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--_edge);
  clip-path: polygon(evenodd, var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c), var(--c) 0,
    calc(var(--c) + 0.41px) 1px, 1px calc(var(--c) + 0.41px), 1px calc(100% - 1px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - 1px) 1px, calc(var(--c) + 0.41px) 1px); }
.bt-product { display: flex; flex-direction: column; width: 100%; color: var(--ink); font-family: var(--font-sans); }
.bt-product:hover { --_edge: var(--line-strong); }
/* Accent edge: the colourway's outline on a card. Collection and section cards only, never a product card. */
.bt-card--accent { --_edge: var(--paint-edge, var(--edge-copper)); }
.bt-product__media { position: relative; display: block; aspect-ratio: 4 / 3; background-color: var(--surface-sunken); overflow: hidden; }
.bt-product__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-product__media.bt-frame { padding: 0; }
.bt-product__media.bt-frame::before { z-index: 1; inset: 12px; }
.bt-product__media .bt-frame__mark { left: 24px; bottom: 18px; z-index: 1; }
.bt-product__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; }
.bt-product__codes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bt-product__title { margin: 0; font-family: var(--font-condensed); font-size: 20px; line-height: 26px; font-weight: 600; }
.bt-product__title a { color: inherit; text-decoration: none; }
.bt-product__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-product__title a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bt-product__spec { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.bt-product__desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bt-product__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding: var(--space-4); }

/* Patch */
.bt-patch { display: inline-block; flex: none; }

/* Orrery: ambient star plot. A backdrop on panel surfaces; give the parent position:relative. */
.bt-orrery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bt-orrery > svg, .bt-orrery > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bt-orrery[data-bt-live="1"] > svg { visibility: hidden; }