:root {
  --order-ink: #16181c;
  --order-muted: #73777d;
  --order-line: #e7e8ea;
  --order-soft: #f4f4f5;
  --order-red: #e8232d;
  --order-red-dark: #bd1720;
  --order-blue: #0e1e4b;
  --order-shadow: 0 20px 60px rgba(17, 20, 25, .10);
  --order-display: 'Manrope', 'Inter', sans-serif;
  --order-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--order-ink); background: #fff; font-family: var(--order-body); }
button, input { font: inherit; }
button { cursor: pointer; }
.order-nav { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; min-height: 72px; padding: 0 42px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--order-line); }
.order-brand img { width: 148px; display: block; }
.order-nav-actions { display: flex; align-items: center; gap: 28px; }
.order-nav-link { color: var(--order-ink); font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; text-transform: uppercase; padding: 8px 12px; border-radius: 4px; transition: all 0.2s ease; }
.order-nav-link:hover, .order-market:hover { outline: 1px solid #000; outline-offset: 2px; }
.order-market, .order-account { border: 0; background: transparent; color: var(--order-ink); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.order-market { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
.order-account { font-size: 19px; }
.mobile-menu-btn { display: none; background: transparent; border: none; color: #393c41; font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 12px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s, outline 0.2s; }
.mobile-menu-btn:hover { background: rgba(0, 0, 0, 0.04); outline: 1px solid rgba(0, 0, 0, 0.6); outline-offset: 0; }
.order-page { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(390px, .65fr); min-height: calc(100vh - 72px); }
.order-visual { position: sticky; top: 72px; align-self: start; min-height: calc(100vh - 72px); padding: clamp(24px, 3vw, 44px); background: linear-gradient(145deg, #fbfbfb, #f0f1f2); overflow: hidden; }
.order-visual::before { content: '01'; position: absolute; top: 28px; left: 34px; color: #e5e6e8; font: 800 clamp(68px, 10vw, 148px)/.8 var(--order-display); letter-spacing: -.08em; }
.order-visual-kicker { position: relative; z-index: 1; margin: 0 0 12px; color: var(--order-red); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.order-visual h1,
h1 {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 100%;
  margin: 0;
  font-family: var(--order-display);
  font-weight: 800;
  font-size: clamp(22px, min(5cqi, 3.8vw), 54px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--order-ink);
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  box-sizing: border-box;
}
.order-visual-lead { position: relative; z-index: 1; max-width: 510px; margin: 16px 0 0; color: var(--order-muted); font-size: 13px; line-height: 1.55; }
.order-vehicle-stage { position: relative; z-index: 1; min-height: clamp(230px, 28vh, 290px); display: grid; place-items: center; margin: 10px -2vw 0; }
.order-vehicle-image { width: min(82%, 640px); max-height: 290px; object-fit: contain; filter: drop-shadow(0 30px 24px rgba(0,0,0,.18)); transition: opacity .22s ease, transform .3s ease; }
.order-vehicle-image.is-loading { opacity: .35; transform: scale(.98); }
.order-visual-caption { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--order-line); padding-top: 18px; }
.order-visual-caption strong { font: 700 18px var(--order-display); }
.order-visual-caption span { color: var(--order-muted); font-size: 12px; }
.order-visual-caption a { color: var(--order-red); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.order-left-section { position: relative; z-index: 1; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--order-line); }
.order-left-section h2 { margin: 0 0 14px; font: 800 22px/1.05 var(--order-display); letter-spacing: -.04em; text-transform: uppercase; }
.order-market { padding: 0; }
.order-market select { border: 0; background: transparent; color: inherit; font-size: 12px; font-weight: 700; outline: 0; }
.order-panel { min-width: 0; padding: clamp(32px, 5vw, 76px) clamp(24px, 4vw, 64px); }
.order-section { border-top: 1px solid var(--order-line); padding: 30px 0; }
.order-section:first-child { border-top: 0; padding-top: 0; }
.order-eyebrow { margin: 0 0 10px; color: var(--order-red); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.order-section h2 { margin: 0; font: 800 25px/1.05 var(--order-display); letter-spacing: -.04em; text-transform: uppercase; }
.order-section h3 { margin: 0 0 16px; font: 700 14px var(--order-display); text-transform: uppercase; letter-spacing: .04em; }
.order-section-note { margin: 10px 0 22px; color: var(--order-muted); font-size: 12px; line-height: 1.55; }
.order-colour-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.colour-chip { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--order-line); background: #fff; overflow: hidden; transition: border-color .2s, transform .2s; }
.colour-chip:hover { transform: translateY(-2px); border-color: var(--order-ink); }
.colour-chip.is-selected { border: 2px solid var(--order-red); }
.colour-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.colour-chip span { display: none; }
.order-cabin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.order-option-toggle { width: 100%; margin-top: 16px; padding: 14px; text-align: left; }
.order-option-toggle span { display: inline; padding: 0; color: var(--order-muted); font-weight: 400; }
.order-submit-modal { margin-top: 20px; }
.order-optional { color: var(--order-muted); font-weight: 400; }
.cabin-card { padding: 0; border: 1px solid var(--order-line); background: #fff; text-align: left; }
.cabin-card.is-selected { border: 2px solid var(--order-red); }
.cabin-card img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.cabin-card span { display: block; padding: 10px; font-size: 10px; font-weight: 700; line-height: 1.3; }
.order-summary { background: var(--order-soft); border: 0; padding: 22px; }
.order-summary table { width: 100%; border-collapse: collapse; font-size: 12px; }
.order-summary td { padding: 8px 0; border-bottom: 1px solid #dedfe1; vertical-align: top; }
.order-summary td:last-child { text-align: right; white-space: nowrap; }
.order-summary tr:last-child td { border-bottom: 0; padding-top: 16px; font-weight: 800; font-size: 14px; }
.order-note-list { margin: 18px 0 0; padding-left: 18px; color: var(--order-muted); font-size: 11px; line-height: 1.55; }
.order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0 8px; }
.order-total span { color: var(--order-muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.order-total strong { font: 800 29px var(--order-display); }
.order-payment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 22px; }
.payment-stat { padding: 12px; background: var(--order-soft); }
.payment-stat small { display: block; color: var(--order-muted); font-size: 10px; }
.payment-stat strong { display: block; margin-top: 5px; font-size: 14px; }
.order-cta { width: 100%; padding: 17px 20px; border: 0; background: var(--order-red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transition: background .2s, transform .2s; }
.order-cta:hover { background: var(--order-red-dark); transform: translateY(-2px); }
.order-fineprint { margin: 12px 0 0; color: var(--order-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.order-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; background: rgba(0,0,0,.56); }
.order-modal-backdrop.is-open { display: grid; }
.order-modal { width: min(100%, 520px); max-height: 90vh; overflow: auto; padding: 30px; background: #fff; box-shadow: var(--order-shadow); }
.order-modal header { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.order-modal h2 { margin: 0; font: 800 20px var(--order-display); text-transform: uppercase; }
.order-modal-close { border: 0; background: transparent; color: var(--order-muted); font-size: 25px; }
.order-form-group { margin-top: 16px; }
.order-form-group label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.order-form-group input { width: 100%; padding: 12px; border: 1px solid var(--order-line); }
.order-status { min-height: 20px; margin-top: 12px; font-size: 12px; text-align: center; }
.order-status.is-error { color: #c4141d; }
.order-status.is-success { color: #16804b; }
@media (max-width: 900px) {
  .order-nav { padding: 0 20px; }
  .order-nav-actions { gap: 12px; }
  .order-nav-link { display: none; }
  .order-page { display: block; }
  .order-visual { position: relative; top: auto; min-height: 0; padding: 48px 22px 30px; }
  .order-vehicle-stage { min-height: 270px; margin-top: 16px; }
  .order-vehicle-image { width: min(88%, 520px); max-height: 280px; }
  .order-left-section { margin-top: 20px; padding-top: 18px; }
  .order-left-section h2 { font-size: 19px; }
  .order-colour-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .colour-chip span { display: none; }
  .order-cabin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cabin-card span { padding: 7px; font-size: 9px; }
  .order-panel { padding: 38px 22px; }
}
@media (max-width: 480px) {
  .order-brand img { width: 120px; }
  .order-visual h1, h1 { font-size: clamp(20px, 6vw, 32px); }
  .order-visual-lead { font-size: 12px; line-height: 1.5; }
  .order-vehicle-stage { min-height: 210px; }
  .order-vehicle-image { max-height: 220px; }
  .order-colour-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .order-cabin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-cabin-grid img { aspect-ratio: 1.05; }
  .order-payment { grid-template-columns: 1fr; }
  .order-modal { padding: 22px; }
}

/* --------------------------------------------------------------------------
   T2 INFO-PAGE EDITORIAL OVERRIDE
   The order page uses the same visual language as trivia_t2_info.html:
   numbered rhythm, bright editorial surfaces, red utility accents and quiet
   technical typography. The order-specific IDs remain unchanged.
   -------------------------------------------------------------------------- */
:root {
  --order-red: #e8232d;
  --order-red-dark: #c4141d;
  --order-ink: #171a20;
  --order-muted: #74787e;
  --order-line: #e4e6e9;
  --order-soft: #f4f4f5;
  --order-display: 'Manrope', sans-serif;
  --order-body: 'Inter', sans-serif;
}

body {
  background: #fff;
  font-family: var(--order-body);
}

.order-nav {
  min-height: 84px;
  padding: 0 max(24px, calc((100vw - 1280px) / 2));
  border-bottom: 0;
  background: rgba(255, 255, 255, .94);
}

.order-nav::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--order-line);
}

.order-brand img { width: 154px; }
.order-nav-actions { gap: 24px; }
.order-nav-link, .order-market {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.5px;
}

.order-page {
  grid-template-columns: minmax(0, 1.35fr) minmax(390px, .65fr);
  background: #fff;
}

.order-visual {
  min-height: calc(100vh - 84px);
  padding: clamp(32px, 6vw, 96px) max(24px, calc((100vw - 1280px) / 2));
  background:
    linear-gradient(90deg, rgba(22, 24, 28, .035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, rgba(22, 24, 28, .035) 1px, transparent 1px) 0 0 / 64px 64px,
    #fff;
}

.order-visual::before {
  display: none;
  top: 38px;
  left: max(24px, calc((100vw - 1280px) / 2));
  color: #e9eaec;
  font-family: var(--order-display);
}

.order-editorial-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(150px, 14vw, 220px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 3vw, 48px);
}

.order-editorial-number {
  color: #e2e3e5;
  font: 800 clamp(76px, 9vw, 138px)/.78 var(--order-display);
  letter-spacing: -.08em;
  -webkit-user-select: none;
  user-select: none;
}

.order-editorial-copy { min-width: 0; padding-top: 2px; }
.order-editorial-copy .order-visual-kicker { margin-bottom: 18px; }
.order-editorial-copy .order-visual-lead { max-width: 620px; }

.order-visual-kicker, .order-eyebrow {
  color: var(--order-red);
  font-family: var(--order-body);
  font-weight: 800;
  letter-spacing: .2em;
}

.order-visual h1 {
  font-family: var(--order-display);
  font-weight: 800;
  letter-spacing: -.055em;
  color: var(--order-ink);
}

.order-visual-lead, .order-section-note {
  color: var(--order-muted);
}

.order-vehicle-stage {
  min-height: clamp(250px, 34vh, 430px);
  margin: 12px -2vw 0;
}

.order-vehicle-image {
  width: min(92%, 760px);
  max-height: 430px;
  filter: drop-shadow(0 28px 24px rgba(16, 18, 22, .13));
}

.order-visual-caption {
  display: none;
  border-top-color: var(--order-line);
}

.order-visual-caption strong,
.order-left-section h2,
.order-section h2,
.order-total strong,
.order-modal h2 {
  font-family: var(--order-display);
  color: var(--order-ink);
}

.order-left-section {
  border-top-color: var(--order-line);
}

.order-panel {
  padding: clamp(38px, 6vw, 88px) max(24px, calc((100vw - 1280px) / 2));
  background: #fff;
}

.order-section {
  padding: 34px 0;
  border-top-color: var(--order-line);
}

.order-section:first-child { padding-top: 0; }

.order-summary {
  position: relative;
  background: var(--order-soft);
  border: 0;
  padding: 26px;
}

.order-summary::before {
  content: '02';
  position: absolute;
  top: 18px;
  right: 22px;
  color: #e1e2e4;
  font: 800 58px/.8 var(--order-display);
  letter-spacing: -.08em;
  pointer-events: none;
}

.order-summary h2 { position: relative; z-index: 1; }
.order-summary table { position: relative; z-index: 1; }
.order-note-list { position: relative; z-index: 1; }
.order-summary .t2-base-otr td {
  padding-top: 17px;
  border-top: 1px solid #cfd2d5;
  border-bottom: 0;
  color: var(--order-ink);
  font-weight: 800;
  font-size: 14px;
}

.order-cta {
  border-radius: 999px;
  background: var(--order-red);
  font-family: var(--order-body);
}

.order-cta:hover { background: var(--order-red-dark); }

.order-modal-backdrop { background: rgba(9, 10, 12, .52); }
.order-modal { border-radius: 4px; }

@media (max-width: 900px) {
  .order-nav { min-height: 68px; padding: 0 18px; }
  .order-page { display: block; }
  .order-visual {
    min-height: 0;
    padding: 46px 22px 34px;
  }
  .order-visual::before { left: 22px; }
  .order-editorial-heading { grid-template-columns: 86px minmax(0, 1fr); gap: 14px; }
  .order-editorial-number { font-size: 66px; }
  .order-vehicle-stage { min-height: 260px; }
  .order-vehicle-image { max-height: 280px; }
  .order-panel { padding: 38px 22px; }
}

@media (max-width: 480px) {
  .order-nav { min-height: 62px; }
  .order-brand img { width: 124px; }
  .order-nav-actions { gap: 10px; }
  .order-visual h1, h1 { font-size: clamp(20px, 6.5vw, 32px); line-height: 1.08; }
  .order-editorial-heading { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .order-editorial-number { font-size: 48px; }
  .order-vehicle-stage { min-height: 220px; }
  .order-vehicle-image { max-height: 230px; }
  .order-summary { padding: 20px; }
}