/* Product detail presentation. DESIGN.md: midnight hardware gallery.
   Texture source: Uiverse.io/chase2k25/perfect-impala-89. */
body.product-midnight {
  --product-ink: #f5f5f7;
  --product-copy: #b5b5bb;
  --product-muted: #96969d;
  --product-line: #333336;
  --product-panel: #151516;
  --product-blue: #0071e3;
  --product-link: #2997ff;
  --product-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ink: var(--product-ink);
  --accent: var(--product-link);
  --paper: #000;
  --line: var(--product-line);
  margin: 0;
  min-width: 0;
  color: var(--product-ink);
  color-scheme: dark;
  background: #000;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

/* Keep the supplied SVG texture off the text and out of the document flow. */
body.product-midnight > .product-surface-pattern {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(145deg, rgb(0, 0, 0), rgba(35, 35, 35, 0.9), rgb(50, 50, 50));
  filter: url(#product-advanced-texture);
  opacity: .22;
}
body.product-midnight .texture-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
body.product-midnight *,
body.product-midnight *::before,
body.product-midnight *::after { box-sizing: border-box; }
body.product-midnight ::selection { color: #fff; background: #0066cc; }
body.product-midnight a {
  color: var(--product-link);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  overflow-wrap: anywhere;
}
body.product-midnight a:hover { text-decoration: underline; }
body.product-midnight a:focus-visible,
body.product-midnight summary:focus-visible {
  outline: 3px solid #78b9ff;
  outline-offset: 5px;
  border-radius: 5px;
}
body.product-midnight > header {
  max-width: 1200px;
  min-height: 88px;
  padding: 16px 24px;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
body.product-midnight .brand {
  min-width: 0;
  flex-shrink: 0;
  color: var(--product-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.6px;
  line-height: 1.3;
  gap: 7px;
}
body.product-midnight .brand:hover { text-decoration: none; }
body.product-midnight .brand img { display: none; }
body.product-midnight .brand b { color: inherit; font-weight: 600; }
body.product-midnight .product-wordmark {
  flex: 0 0 auto;
  margin-right: 5px;
  color: var(--product-ink);
}
body.product-midnight > header nav { gap: 24px; align-items: center; }
body.product-midnight > header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #c8c8ce;
  font-size: 13px;
  text-decoration: none;
}
body.product-midnight > header nav a:hover { color: #fff; }
body.product-midnight main {
  width: 100%;
  max-width: 1200px;
  margin: 48px auto 96px;
  padding: 0 24px;
}
body.product-midnight .crumbs {
  margin: 0 0 28px;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
body.product-midnight .crumbs a { color: #b5b5bb; text-decoration: none; }
body.product-midnight .crumbs a:hover { color: var(--product-link); text-decoration: underline; }
body.product-midnight .hero,
body.product-midnight .product-details {
  padding: 40px;
  color: var(--product-ink);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 28px;
  background: var(--product-panel);
  box-shadow: none;
}
body.product-midnight .product-stage {
  padding: 48px;
  background: rgba(14, 14, 14, .88);
}
body.product-midnight .hero h1 {
  max-width: 1000px;
  margin: 0;
  color: var(--product-ink);
  font-family: var(--product-display);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body.product-midnight .hero p,
body.product-midnight .product-details p,
body.product-midnight .product-details li {
  color: var(--product-copy);
  line-height: 1.75;
}
body.product-midnight .product-stage > p {
  max-width: 850px;
  margin: 24px 0 0;
  font-size: 17px;
}
body.product-midnight .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-top: 28px;
}
body.product-midnight .grid > * { min-width: 0; }
body.product-midnight .product-stage > .grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  margin-top: 40px;
}
body.product-midnight .product-stage > .grid > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 500px !important;
  object-fit: contain;
  border-radius: 28px !important;
  background: #0e0e0e !important;
}
body.product-midnight .product-stage > .grid > div > p:not(.price) {
  max-width: 35em;
  margin: 20px 0 0;
  font-size: 16px;
}
body.product-midnight .product-stage .price {
  margin: 0;
  color: var(--product-ink);
  font-family: var(--product-display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.14;
  font-variant-numeric: tabular-nums;
}
body.product-midnight .actions { align-items: stretch; gap: 12px; margin-top: 28px; }
body.product-midnight .button {
  min-height: 48px;
  max-width: 100%;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--product-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease;
}
body.product-midnight .button:hover { background: #0077ed; text-decoration: none; }
body.product-midnight .button:active { background: #0066cc; }
body.product-midnight .button.alt {
  color: var(--product-ink);
  border-color: #6e6e73;
  background: transparent;
}
body.product-midnight .button.alt:hover { border-color: #b5b5bb; background: #262628; }
body.product-midnight .button.alt:active { background: #333336; }
body.product-midnight .service-hub-backlink {
  margin: 20px 4px 32px;
  font-size: 14px;
  line-height: 1.7;
}
body.product-midnight .hero h2,
body.product-midnight .product-details h2 {
  margin: 0 0 20px;
  color: var(--product-ink);
  font-family: var(--product-display);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.25;
}
body.product-midnight h3 {
  color: var(--product-ink);
  font-family: var(--product-display);
  font-weight: 600;
  line-height: 1.4;
}
body.product-midnight ul,
body.product-midnight ol { padding-left: 1.4em; }
body.product-midnight li { padding-left: 4px; color: var(--product-copy); }
body.product-midnight li + li { margin-top: 10px; }
body.product-midnight li::marker { color: var(--product-muted); }
body.product-midnight strong { color: var(--product-ink); font-weight: 600; }
body.product-midnight .hero[role="status"] {
  background: #1d1d1f;
  border-color: #555559;
}
body.product-midnight .hero[role="status"] h2 { font-size: 24px; }
body.product-midnight .card {
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--product-line);
  border-radius: 28px;
  color: var(--product-ink);
  background: #0e0e0e;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
body.product-midnight .card:hover { border-color: #6e6e73; background: #1d1d1f; text-decoration: none; }
body.product-midnight .card h3 { font-size: 20px; }
body.product-midnight .card span { color: var(--product-copy); font-size: 14px; }
body.product-midnight .product-details { margin-top: 28px; }
body.product-midnight .product-details > section {
  padding: 36px 0;
  border-bottom: 1px solid var(--product-line);
  scroll-margin-top: 24px;
}
body.product-midnight .product-details > section:first-child { padding-top: 0; }
body.product-midnight .product-details > section:last-of-type { border-bottom: 0; }
body.product-midnight .product-details > h2:not(:first-child) { margin-top: 36px; }
body.product-midnight .product-details h3 { font-size: 19px; margin: 0 0 10px; }
body.product-midnight .product-details a { color: var(--product-link); }
body.product-midnight .product-facts { gap: 12px; margin: 28px 0; }
body.product-midnight .product-facts > div {
  padding: 22px;
  border: 1px solid var(--product-line);
  border-radius: 20px;
  background: #0e0e0e;
}
body.product-midnight .product-facts dt { color: var(--product-muted); font-size: 13px; margin-bottom: 8px; }
body.product-midnight .product-facts dd { margin: 0; color: var(--product-ink); font-weight: 500; line-height: 1.65; }
body.product-midnight .product-flow { gap: 14px; padding: 0; }
body.product-midnight .product-flow > li {
  padding: 26px 24px 26px 76px;
  border: 1px solid var(--product-line);
  border-radius: 24px;
  background: #0e0e0e;
}
body.product-midnight .product-flow > li::before {
  top: 25px;
  left: 23px;
  width: 30px;
  height: 30px;
  border: 1px solid #555559;
  border-radius: 50%;
  color: var(--product-ink);
  background: #262628;
  font-size: 14px;
  font-weight: 500;
}
body.product-midnight .product-questions { gap: 12px; }
body.product-midnight .product-questions details {
  border: 1px solid var(--product-line);
  border-radius: 20px;
  background: #0e0e0e;
  overflow: visible;
}
body.product-midnight .product-questions details[open] { background: #1d1d1f; }
body.product-midnight .product-questions summary {
  min-height: 56px;
  padding: 20px 24px;
  color: var(--product-ink);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.55;
}
body.product-midnight .product-questions summary::marker { color: var(--product-muted); }
body.product-midnight .product-questions details p { margin: 0; padding: 0 24px 24px; }
body.product-midnight .product-next { margin: 28px 0 0; gap: 14px 28px; font-size: 15px; }
body.product-midnight > footer {
  max-width: 1200px;
  padding: 28px 24px 40px;
  border-top: 1px solid var(--product-line);
  color: var(--product-muted);
  font-size: 13px;
}
body.product-midnight > footer a { color: #b5b5bb; text-decoration: none; }

@media (max-width: 850px) {
  body.product-midnight .product-stage { padding: 36px; }
  body.product-midnight .product-stage > .grid { gap: 28px; }
  body.product-midnight .actions .button { flex: 1 1 155px; }
}
@media (max-width: 680px) {
  body.product-midnight > header {
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 20px 24px 12px;
  }
  body.product-midnight .brand { font-size: 20px; }
  body.product-midnight > header nav { flex-wrap: wrap; gap: 4px 24px; }
  body.product-midnight > header nav a { min-height: 44px; }
  body.product-midnight main { margin: 28px auto 64px; padding: 0 20px; }
  body.product-midnight .crumbs { margin-bottom: 22px; font-size: 12px; }
  body.product-midnight .hero,
  body.product-midnight .product-details { padding: 26px 22px; border-radius: 28px; }
  body.product-midnight .hero h1 { font-size: clamp(31px, 7.8vw, 43px); line-height: 1.15; letter-spacing: -.025em; }
  body.product-midnight .product-stage > p { margin-top: 20px; font-size: 16px; }
  body.product-midnight .product-stage > .grid { grid-template-columns: minmax(0, 1fr); margin-top: 28px; gap: 28px; }
  body.product-midnight .product-stage > .grid > img { aspect-ratio: 1 / 1; max-height: 420px !important; }
  body.product-midnight .product-stage .price { font-size: 40px; }
  body.product-midnight .product-stage > .grid > div > p:not(.price) { margin-top: 16px; }
  body.product-midnight .actions { margin-top: 24px; }
  body.product-midnight .actions .button { flex: 1 1 170px; min-height: 48px; }
  body.product-midnight .hero h2,
  body.product-midnight .product-details h2 { font-size: 26px; }
  body.product-midnight .hero p,
  body.product-midnight .product-details p,
  body.product-midnight .product-details li { font-size: 16px; }
  body.product-midnight .product-details > section { padding: 28px 0; }
  body.product-midnight .product-facts { grid-template-columns: minmax(0, 1fr); }
  body.product-midnight .product-facts > div { padding: 20px; }
  body.product-midnight .product-flow > li { padding: 22px 18px 22px 58px; }
  body.product-midnight .product-flow > li::before { left: 15px; top: 22px; width: 27px; height: 27px; }
  body.product-midnight .product-questions summary { padding: 18px; font-size: 16px; }
  body.product-midnight .product-questions details p { padding: 0 18px 20px; }
  body.product-midnight .card { padding: 24px; }
  body.product-midnight > footer { gap: 12px; padding: 24px 24px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  body.product-midnight .button,
  body.product-midnight .card { transition: none; }
}
@media print {
  body.product-midnight { color: #151c26; background: #fff; }
  body.product-midnight > .product-surface-pattern { display: none; }
  body.product-midnight .hero,
  body.product-midnight .product-details,
  body.product-midnight .card { break-inside: avoid; background: #fff; border-color: #bbb; }
  body.product-midnight h1,
  body.product-midnight h2,
  body.product-midnight h3,
  body.product-midnight p,
  body.product-midnight li,
  body.product-midnight dd,
  body.product-midnight strong { color: #151c26 !important; }
}