/*
14BMR — Professional Miami Vice Theme
--------------------------------------
Add this AFTER styles/styles.css in index.html:

<link rel="stylesheet" href="styles/miami-vice-theme.css">

This is intentionally an override layer so the existing modular
catalog, product cards, offset filters, 3D viewer, checkout, and
JavaScript remain unchanged.
*/

:root {
  --black: #05060a;
  --panel: #0b0e16;
  --white: #f4f7fb;
  --gray: #7b8292;
  --line: #202635;

  /* Miami Vice-inspired accents, used sparingly */
  --accent: #00d9ff;
  --vice-cyan: #00d9ff;
  --vice-magenta: #ff2bd6;
  --vice-purple: #744cff;
}

/* ---------- Global ---------- */

body {
  background:
    radial-gradient(circle at 85% 10%, rgba(0, 217, 255, .045), transparent 28rem),
    radial-gradient(circle at 15% 85%, rgba(255, 43, 214, .035), transparent 30rem),
    var(--black);
  color: var(--white);
}

::selection {
  background: var(--vice-cyan);
  color: #03050a;
}

a {
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.eyebrow,
.store-nav a:hover,
.store-nav a:focus,
.shop-card-body .type,
.lexus-heading .type,
.lexus-card-body .type,
.kit-search-label,
.kit-category-head .type,
.process span,
.card-number,
.portfolio-number {
  color: var(--vice-cyan);
}

/* ---------- Navigation ---------- */

.navbar {
  background:
    linear-gradient(180deg, rgba(5, 6, 10, .94), rgba(5, 6, 10, .55) 70%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.035);
}

.logo {
  letter-spacing: -1.8px;
}

.logo span {
  color: var(--vice-cyan);
}

.desktop-nav a:hover,
.nav-cta:hover {
  color: var(--white);
}

.nav-cta {
  border-color: rgba(0,217,255,.35);
}

.nav-cta:hover {
  border-color: var(--vice-cyan);
  color: var(--vice-cyan);
}

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

.store-hero,
.simple-hero {
  background:
    radial-gradient(circle at 72% 35%, rgba(0,217,255,.10), transparent 28%),
    radial-gradient(circle at 82% 60%, rgba(255,43,214,.07), transparent 25%),
    #05060a;
}

.store-hero:before {
  background:
    radial-gradient(circle at 72% 40%, rgba(0,217,255,.13) 0, rgba(22,24,38,.65) 28%, #05060a 72%);
}

.store-grid-bg,
.hero-grid {
  opacity: .13;
  background-image:
    linear-gradient(rgba(0,217,255,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,43,214,.14) 1px, transparent 1px);
  background-size: 70px 70px;
}

.store-hero h1,
.simple-hero h1 {
  text-shadow: 0 0 55px rgba(0,217,255,.07);
}

.store-hero h1 span,
.simple-hero h1 span {
  -webkit-text-stroke: 1px rgba(0,217,255,.38);
}

.store-hero p,
.simple-hero p {
  color: #858c9c;
}

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

.line-button {
  border-color: #394152;
}

.line-button:hover {
  background: var(--vice-cyan);
  color: #03050a;
  border-color: var(--vice-cyan);
  box-shadow: 0 0 28px rgba(0,217,255,.16);
}

.custom-banner a,
.shop-footer-cta a,
.contact > a {
  color: var(--vice-cyan);
}

.custom-banner a:hover,
.shop-footer-cta a:hover,
.contact > a:hover {
  color: var(--vice-magenta);
}

/* ---------- Search ---------- */

.kit-search,
.offset-selector {
  border-color: var(--line);
}

.kit-search-box input {
  background: rgba(11,14,22,.88);
  border-color: #293141;
}

.kit-search-box input:focus {
  border-color: rgba(0,217,255,.75);
  box-shadow: 0 0 0 1px rgba(0,217,255,.10);
}

.kit-search-box input::placeholder {
  color: #565e70;
}

/* ---------- Offset selector ---------- */

.offset-buttons {
  background: #1d2431;
}

.offset-btn {
  background: #0a0d14;
  color: #7f8797;
}

.offset-btn:hover {
  background: #101622;
  color: var(--white);
}

.offset-btn.active {
  background: var(--vice-cyan);
  color: #03050a;
  box-shadow: 0 0 24px rgba(0,217,255,.12);
}

/* ---------- Product/catalog cards ---------- */

.shop-grid,
.lexus-grid,
.product-grid,
.detail-content {
  background: #1b2230;
}

.shop-card,
.lexus-card,
.product-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.012), transparent 45%),
    var(--panel);
}

.shop-card-media,
.lexus-card-image,
.product-viewer-wrap,
.detail-gallery,
.detail-model {
  background: #080b12;
}

.shop-card:hover,
.lexus-card:hover {
  box-shadow: inset 0 1px 0 rgba(0,217,255,.16);
}

.shop-card-body .type,
.lexus-card-body .type {
  color: var(--vice-cyan);
}

.shop-card h3,
.lexus-card-body h3 {
  color: var(--white);
}

.shop-card-meta,
.lexus-card-body p,
.shop-card p {
  color: #737b8d;
}

.shop-card-view {
  color: var(--vice-cyan);
}

.shop-card:hover .shop-card-view {
  color: var(--vice-magenta);
}

/* ---------- Price presentation ---------- */

.price-options span,
.lexus-price,
.detail-price {
  color: var(--white);
}

.price-options span:first-child {
  color: #dfe5ee;
}

/* ---------- Product detail ---------- */

.product-detail .detail-backdrop {
  background: rgba(0,0,0,.82);
}

.detail-panel {
  background:
    radial-gradient(circle at 88% 8%, rgba(0,217,255,.055), transparent 25rem),
    #080b12;
  border-color: #283142;
}

.detail-header {
  border-color: var(--line);
}

.detail-meta {
  color: #697386;
}

.detail-close:hover {
  color: var(--vice-cyan);
}

.detail-footer a {
  color: var(--vice-cyan);
}

.detail-footer a:hover {
  color: var(--vice-magenta);
}

/* ---------- 3D viewer ---------- */

.product-viewer-wrap model-viewer,
.detail-model model-viewer {
  background:
    radial-gradient(circle at 50% 42%, rgba(0,217,255,.055), transparent 34%),
    #080b12;
}

.viewer-label {
  background: rgba(4,6,11,.86);
  color: var(--vice-cyan);
  border: 1px solid rgba(0,217,255,.18);
}

.viewer-loading {
  color: #70798b;
}

.viewer-error {
  color: var(--vice-magenta);
}

/* ---------- Custom inquiry ---------- */

.custom-banner {
  background:
    linear-gradient(135deg, rgba(0,217,255,.045), transparent 42%),
    linear-gradient(315deg, rgba(255,43,214,.035), transparent 45%),
    #0a0d14;
  border-color: #283142;
}

.custom-banner h2 span {
  color: var(--vice-cyan);
}

/* ---------- Engineering / credibility ---------- */

.engineering,
.store-section.dark {
  background:
    radial-gradient(circle at 20% 20%, rgba(0,217,255,.025), transparent 28rem),
    #080a10;
}

.process > div {
  border-color: var(--line);
}

.process > div:hover {
  background: #0e131d;
  box-shadow: inset 0 1px 0 rgba(0,217,255,.12);
}

/* ---------- Portfolio ---------- */

.portfolio-card {
  background: #090c13;
}

.portfolio-info {
  border-color: var(--line);
}

.portfolio-arrow {
  border-color: #465063;
}

.portfolio-card:hover .portfolio-arrow {
  background: var(--vice-cyan);
  border-color: var(--vice-cyan);
  color: #03050a;
  box-shadow: 0 0 24px rgba(0,217,255,.16);
}

.portfolio-strip > div {
  background: #090c13;
}

.portfolio-strip b {
  color: var(--vice-cyan);
}

/* ---------- Subtle magenta interaction ---------- */

.shop-card:hover .shop-card-media,
.lexus-card:hover .lexus-card-image {
  box-shadow: inset 0 -1px 0 rgba(255,43,214,.16);
}

.portfolio-card:hover .portfolio-info h3,
.project-row:hover h3 {
  text-shadow: 0 0 26px rgba(0,217,255,.07);
}

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  .store-hero,
  .simple-hero {
    background:
      radial-gradient(circle at 80% 20%, rgba(0,217,255,.08), transparent 18rem),
      #05060a;
  }

  .offset-btn.active {
    box-shadow: none;
  }
}

/* Keep the brand premium: no heavy neon effects, no retro graphics,
   no gradients over product photography. The vehicles remain the focus. */