/* Tyler.Resellzz — styles
   Committed single theme: near-black ground with a blue bias, electric
   blue accent. Every colour comes from a token declared on :root, so the
   page holds its own look on any host background. */

:root {
  --bg: #04060d;
  --bg-deep: #02030a;
  --raised: #0a1020;
  --panel: #0b1322;
  --panel-2: #0f1a2e;
  --line: #17233c;
  --line-soft: #111b2e;

  --text: #e8eef9;
  --muted: #8496b5;
  --dim: #5c6d8c;

  --blue: #3d8bff;
  --blue-bright: #7ab3ff;
  --blue-deep: #1b47a8;
  --blue-glow: rgba(61, 139, 255, 0.45);
  --blue-wash: rgba(61, 139, 255, 0.12);

  --green: #3ecf7a;
  --green-dim: #1d4030;
  --red: #e2564a;
  --red-dim: #38191a;

  --radius: 14px;
  --radius-lg: 20px;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

* {
  box-sizing: border-box;
}

/* Components below set display, which outranks the UA rule for [hidden].
   Without this, a "hidden" button stays laid out and clickable. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 130px;
  overflow-x: hidden;
}

a {
  color: var(--blue-bright);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: min(1160px, 100% - 40px);
  margin-inline: auto;
}

.spacer {
  flex: 1;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
}

.btn:hover {
  border-color: #29395c;
  background: var(--panel-2);
}

.btn.primary {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 22px -6px var(--blue-glow);
}

.btn.primary:hover {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  box-shadow: 0 10px 30px -8px var(--blue-glow);
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  color: var(--muted);
}

.btn.ghost:hover {
  color: var(--text);
  background: var(--raised);
}

.btn.sm {
  padding: 9px 15px;
  font-size: 13px;
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
}

.icon-btn:hover {
  color: var(--text);
  border-color: #29395c;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(4, 6, 13, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
  width: min(1160px, 100% - 40px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text);
}

.logo-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--panel-2), #060b16);
  border: 1px solid rgba(61, 139, 255, 0.5);
  box-shadow: 0 0 18px -4px var(--blue-glow);
  flex: none;
}

.logo-badge svg {
  width: 18px;
  height: 18px;
  fill: var(--blue);
}

.logo-type {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-type b {
  font-size: 14px;
  letter-spacing: 0.09em;
  font-weight: 800;
}

.logo-type i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--dim);
}

.navlinks {
  display: flex;
  gap: 4px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px;
}

.navlinks a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  transition: 0.15s;
}

.navlinks a:hover {
  color: var(--text);
}

.navlinks a.active {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-deep);
}

.hero-glow {
  position: absolute;
  inset: -30% 0 auto 0;
  height: 780px;
  background: radial-gradient(
    ellipse 60% 50% at 50% 32%,
    rgba(61, 139, 255, 0.3),
    rgba(27, 71, 168, 0.14) 42%,
    transparent 72%
  );
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  opacity: 0.65;
}

.hero-inner {
  position: relative;
  text-align: center;
  padding: 58px 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.emblem {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 32%, #12203c, #060b16 70%);
  border: 2px solid rgba(61, 139, 255, 0.55);
  box-shadow: 0 0 0 8px rgba(61, 139, 255, 0.07),
    0 0 55px -6px var(--blue-glow);
}

.emblem svg {
  width: 50px;
  height: 50px;
  fill: var(--blue-bright);
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-bright);
  background: var(--blue-wash);
  border: 1px solid rgba(61, 139, 255, 0.28);
  border-radius: 999px;
  padding: 8px 16px;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

.hero-title {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 400;
  /* Scales with the viewport so the name stays on one line at any width,
     including when the display face falls back to something wider. */
  font-size: clamp(30px, 8.5vw, 96px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-title .l1,
.hero-title .l2 {
  display: inline;
}

.hero-title .l2 {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  justify-content: center;
}

.hero-strip {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.hero-strip li {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-strip b {
  color: var(--blue-bright);
  font-weight: 700;
}

/* ---------- Info cards ---------- */

.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 36px 0 0;
}

.info-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.info-card h2 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.info-card p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.handles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s, transform 0.15s;
}

.handle:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.handle svg {
  width: 16px;
  height: 16px;
  fill: var(--blue-bright);
}

.pay-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pay-list li {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 13px;
  font-size: 13px;
}

/* ---------- Controls ---------- */

.controls {
  position: sticky;
  top: 61px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  margin-top: 34px;
  background: rgba(4, 6, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: 0.15s;
}

.tab:hover {
  color: var(--text);
  border-color: #29395c;
}

.tab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 18px -6px var(--blue-glow);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.toggle input {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---------- Brand sections ---------- */

.brand-section {
  margin-top: 46px;
}

.brand-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.brand-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.count-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

.price-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.price-box h3 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.price-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 10px 15px;
}

.price-row .qty {
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.price-row .amt {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.price-row.bulk .amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-bright);
}

/* ---------- Product grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 18px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.card:hover {
  border-color: #29395c;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px #000;
}

.card.sold-out {
  opacity: 0.5;
}

.card-media {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  color: #fff;
}

.badge.out {
  background: var(--red);
}

.badge.low {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}

.card-body {
  padding: 15px 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.card-price {
  font-size: 13px;
  color: var(--muted);
  margin: -5px 0 0;
  font-variant-numeric: tabular-nums;
}

.sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: auto;
}

.size {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 4px 7px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: 0.12s;
}

.size:disabled {
  cursor: not-allowed;
  background: var(--red-dim);
  border-color: #4a2422;
  color: #8a5b57;
}

.size:not(:disabled):hover {
  border-color: var(--blue);
}

.size.in-order {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-color: transparent;
  color: #fff;
}

.size .lbl {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.size .avail {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  color: var(--green);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.size:disabled .avail {
  color: #8a5b57;
}

.size.in-order .avail {
  color: #dce9ff;
}

.empty-note {
  color: var(--muted);
  font-size: 14px;
  padding: 26px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ---------- Order bar ---------- */

.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(10, 16, 32, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 40px -20px #000;
  transform: translateY(115%);
  transition: transform 0.25s ease;
}

.order-bar.open {
  transform: none;
}

.order-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
}

.order-summary {
  flex: 1;
  min-width: 220px;
}

.order-count {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-bright);
  font-weight: 800;
}

.order-string {
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 6px;
  word-break: break-word;
}

.order-total {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.order-total b {
  color: var(--text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.order-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 64px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  justify-content: center;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.footer-note {
  color: var(--dim);
}

/* ---------- Manage stock modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}

/* `display: grid` above outranks the UA rule for [hidden], and a modal
   that is invisible but still laid out swallows clicks on the page. */
.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 10, 0.78);
  backdrop-filter: blur(3px);
}

.modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  /* vh on a phone measures the viewport with the browser chrome collapsed, so
     86vh can be taller than what you can actually see and the footer buttons
     end up under the address bar. dvh tracks the visible area; the vh line
     above stays as the fallback. */
  max-height: min(86dvh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -30px #000;
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  flex: 1;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-lede {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.field {
  display: block;
  margin-bottom: 13px;
}

.field span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.form-error {
  margin: 0 0 13px;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--raised);
}

.save-note {
  font-size: 12px;
  color: var(--green);
  font-weight: 700;
}

.ed-group {
  margin-bottom: 26px;
}

.ed-group > h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ed-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin: 0 0 9px;
}

.ed-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
}

.ed-price {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 8px 11px;
}

.ed-price label {
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.ed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.ed-row .ed-name {
  flex: 1;
  min-width: 170px;
  font-size: 14px;
  font-weight: 700;
}

.ed-sizes {
  display: flex;
  gap: 8px;
}

.ed-size {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ed-size span {
  font-size: 11px;
  font-weight: 800;
  color: var(--dim);
  width: 18px;
}

.num {
  width: 62px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  text-align: center;
}

.num:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.gate-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .navlinks {
    display: none;
  }
}

/* Below ~400px the logo and the DM button no longer fit side by side at
   full size, and the header pushes the page into a sideways scroll. */
@media (max-width: 400px) {
  .topbar-inner {
    gap: 10px;
  }

  .logo-type b {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  #navDm {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 215px;
  }

  .wrap {
    width: calc(100% - 28px);
  }

  .topbar-inner {
    width: calc(100% - 28px);
  }

  .controls {
    top: 60px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .order-string {
    max-height: 54px;
    overflow-y: auto;
  }

  .order-actions {
    width: 100%;
  }

  .order-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .ed-sizes {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  /* Reclaim the gutter: 20px each side costs 40px of a 390px screen. */
  .modal {
    padding: 12px;
  }

  .modal-head {
    padding: 15px 16px;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-foot {
    padding: 12px 16px;
  }

  /* The footer is the only way out of the panel on a phone. Let the buttons
     share the row evenly instead of bunching at their text width, the same
     way the order bar already behaves at this breakpoint. */
  .modal-foot .btn {
    flex: 1;
    justify-content: center;
  }

  .modal-foot .spacer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Order form ---------- */

.checkout {
  margin-top: 60px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.checkout-head h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.checkout-head p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.field.wide {
  grid-column: 1 / -1;
}

.field textarea,
.field select {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}

.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: var(--red);
}

.add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.add-row .field {
  margin-bottom: 0;
}

.field.grow {
  flex: 1;
  min-width: 220px;
}

.field.qty {
  width: 92px;
}

.field.qty .num {
  width: 100%;
}

.field.pay {
  max-width: 320px;
  margin-top: 4px;
}

.chosen {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chosen li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 14px;
}

.chosen .c-name {
  flex: 1;
}

.chosen .c-qty {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--blue-bright);
  font-weight: 700;
}

.chosen .c-empty {
  color: var(--dim);
  border-style: dashed;
  justify-content: center;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.form-note {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.submitted {
  border: 1px solid rgba(62, 207, 122, 0.35);
  background: rgba(62, 207, 122, 0.07);
  border-radius: var(--radius);
  padding: 22px;
}

.submitted h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--green);
}

.submitted p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.receipt {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
  margin-bottom: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.submitted-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* ---------- Staff login tabs + orders ---------- */

.modal-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
}

.mtab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 13px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}

.mtab:hover {
  color: var(--text);
}

.mtab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--blue);
}

.tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tab-badge:empty {
  display: none;
}

.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  background: var(--raised);
}

.order-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.order-card-head b {
  font-size: 15px;
}

.order-ref {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

.order-when {
  font-size: 12px;
  color: var(--dim);
  margin-left: auto;
}

.order-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 18px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.order-meta b {
  color: var(--text);
  font-weight: 600;
}

.order-items {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.order-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .checkout {
    padding: 20px;
  }

  .add-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Category editing ---------- */

.ed-cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.ed-cat-name {
  flex: 1;
  min-width: 170px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--text);
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ed-cat-name:focus,
.ed-item-name:focus,
.ed-item-img:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.btn.danger {
  color: var(--red);
}

.btn.danger:hover {
  color: #fff;
  background: var(--red-dim);
  border-color: var(--red);
}

.ed-item-fields {
  flex: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ed-item-name,
.ed-item-img {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.ed-item-name {
  font-weight: 700;
}

.ed-item-img {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}

.ed-empty {
  color: var(--dim);
  font-size: 13px;
  padding: 12px 0;
  margin: 0;
}

#addCatBtn {
  margin-bottom: 6px;
}

.card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f2f5fa, #dde5f2);
}

.card-placeholder svg {
  width: 42%;
  height: 42%;
  fill: #9fb2cc;
}

/* ---------- Item photo ---------- */

.ed-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 74px;
  flex: none;
}

.ed-thumb img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.ed-thumb-empty {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--dim);
  font-size: 22px;
  background: var(--raised);
}

.ed-thumb-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-bright);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(61, 139, 255, 0.3);
  background: var(--blue-wash);
}

.ed-thumb-btn:hover {
  background: rgba(61, 139, 255, 0.2);
}