/* Storefront extension of docs/CUSTOMER_ACCOUNT_DESIGN_SYSTEM.md.
   Use the approved dashboard assets; do not generate additional textures. */
@font-face { font-family: 'LT Barlow Condensed'; src: url('../fonts/BarlowCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'LT Barlow Condensed'; src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

.lt-material-system {
  color-scheme: dark;
  --lt-canvas: #0b0c0d;
  --lt-bg-deep: #0e1011;
  --lt-surface-1: #222629;
  --lt-surface-2: #292d30;
  --lt-surface-3: #303438;
  --lt-rim: #515a5d;
  --lt-border-dark: #0a0c0d;
  --lt-text: #f1f1ef;
  --lt-text-secondary: #b6b8b9;
  --lt-text-muted: #888e91;
  --lt-amber: #ff9b32;
  --lt-orange-light: #e3a156;
  --lt-green: #42c997;
  --lt-heading: 'LT Barlow Condensed', 'Arial Narrow', sans-serif;
  /* SVG mirrors the original grains at native scale so every tile edge matches. */
  --lt-texture-noise: url('../textures/fine-noise-seamless.svg');
  --lt-texture-metal: url('../textures/metal-grain-seamless.svg');
  --lt-texture-premium: url('../textures/brushed-aluminum-faceplate-2026.webp');
  /* Thin tint layers keep the supplied grain visible instead of painting over it. */
  --lt-material-panel: linear-gradient(#3035373d, #191d1f5c), var(--lt-texture-metal);
  --lt-material-face: linear-gradient(#23282a33, #12161752), var(--lt-texture-metal);
  --lt-material-chassis: linear-gradient(#1314153d, #0e0f1066), var(--lt-texture-metal);
  --lt-metal-size: auto, 1024px 1024px;
  --lt-metal-repeat: no-repeat, repeat;
  --lt-metal-blend: normal, screen;
  --lt-panel-shadow: 0 0 0 1px #050607, inset 0 1px #ffffff31, inset 0 -2px #050708, 0 4px 13px #0009;
  --orange: var(--lt-amber);
  --orange-2: var(--lt-orange-light);
  --orange-soft: #382819;
  --orange-hover: #ffc16f;
  --ink: var(--lt-text);
  --text: var(--lt-text);
  --muted: var(--lt-text-secondary);
  --line: var(--lt-rim);
  --paper: var(--lt-surface-1);
  --bg: var(--lt-canvas);
  --line-subtle: #41494c;
  --radius: 7px;
  --radius-pill: 4px;
  --script: var(--font);
  --field-bg: var(--lt-bg-deep);
  --radius-card: 7px;
  --radius-control: 4px;
  --shadow-card: var(--lt-panel-shadow);
  --wrap: 1280px;
  color: var(--lt-text);
  background-color: var(--lt-canvas);
  background-image: radial-gradient(ellipse at 54% 12%, #373b3c1f, transparent 48%), linear-gradient(#08090a8a, #08090a94), var(--lt-texture-noise);
  background-size: auto, auto, 512px 512px;
}

.lt-material-system .lt-hw-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lt-rim);
  border-radius: 7px;
  background-color: var(--lt-surface-1);
  background-image: var(--lt-material-panel);
  background-position: center;
  background-size: var(--lt-metal-size);
  background-repeat: var(--lt-metal-repeat);
  background-blend-mode: var(--lt-metal-blend);
  box-shadow: var(--lt-panel-shadow);
}
.lt-material-system .lt-hw-faceplate {
  position: relative;
  min-width: 0;
  border: 1px solid var(--lt-border-dark);
  border-radius: 4px;
  background-image: var(--lt-material-face);
  background-position: center;
  background-color: var(--lt-surface-1);
  background-size: var(--lt-metal-size);
  background-repeat: var(--lt-metal-repeat);
  background-blend-mode: var(--lt-metal-blend);
  box-shadow: 0 0 0 1px #a3afb071, inset 0 2px 8px #000a, inset 0 -1px #ffffff12;
}
.lt-material-system .lt-hw-well {
  display: grid;
  place-items: center;
  border: 1px solid #666f70;
  border-radius: 4px;
  background: linear-gradient(#171b1d, #080b0c);
  box-shadow: inset 0 2px 6px #000d, inset 0 -1px #ffffff12, 0 1px #ffffff1b;
}
.lt-material-system .lt-hw-screws::before,
.lt-material-system .lt-hw-screws::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 7px;
  width: 7px;
  height: 7px;
  border: 1px solid #050708;
  border-radius: 50%;
  background: linear-gradient(140deg, transparent 42%, #0b0d0e 44% 57%, transparent 59%), radial-gradient(circle at 31% 27%, #899091, #3d4446 51%, #131719 75%);
  box-shadow: inset 0 1px #ffffff22, 0 1px 2px #000;
  pointer-events: none;
}
.lt-material-system .lt-hw-screws::before { left: 7px; }
.lt-material-system .lt-hw-screws::after { right: 7px; transform: rotate(69deg); }
.lt-material-system .lt-hw-led {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--lt-amber);
  box-shadow: 0 0 5px #ff902ebd, 0 0 13px #ed6d1c8c;
}
.lt-material-system :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #ffb356; outline-offset: 4px; }
.lt-material-system :is(.lt-btn, .lt-cartbtn):active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  html:has(.lt-material-system) { scroll-behavior: auto; }
  .lt-material-system *, .lt-material-system *::before, .lt-material-system *::after { transition: none !important; animation: none !important; }
}