:root{
  --bg:#0b0b0c; --panel:#141416; --text:#e9e9ea; --muted:#9aa0a6;
  --line:#242528; --green:#00ff6a; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1100px;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{width:min(100%,var(--max));margin:0 auto;padding:0 16px}
a{color:var(--text)} .tiny{font-size:12px;color:var(--muted)}
.site-header{position:sticky;top:0;background:rgba(11,11,12,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.head-grid{display:grid;grid-template-columns:1fr auto 280px;gap:12px;align-items:center;padding:12px 0}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 900;
  letter-spacing: .2px;
}

.logo img {
  max-height: 48px;   /* keeps it neat in the header */
  height: auto;
  width: auto;
  display: block;
}

.nav{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:transparent;color:var(--text);padding:8px 12px;border-radius:999px;text-decoration:none}
.chip.ghost{color:var(--muted)}
.chip.active{border-color:var(--green);box-shadow:0 0 0 2px #00ff6a22}
.search input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0f1012;color:var(--text)}
.hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b0b0c 0%,#0f1012 100%)}
.hero-inner{padding:48px 0}
.hero h1{font-size:38px;line-height:1.2;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 16px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);padding:10px 14px;border-radius:12px}
.btn.primary{border-color:var(--green);color:#03240f;background:var(--green);font-weight:700}
.btn.ghost{color:var(--muted)}
.badges{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:14px 0 0;list-style:none;color:var(--muted)}
.results-meta{margin:22px 0 10px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);outline:none}
.card:focus{box-shadow:0 0 0 3px #00ff6a33}
.thumb{aspect-ratio:1/1;background:#0f1012;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.card-body{padding:12px;display:grid;gap:8px}
.title{margin:0;font-size:16px}
.desc{margin:0;color:var(--muted);font-size:14px;min-height:2.6em}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-weight:800}
.tags{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px}
.tags span{font-size:12px;padding:4px 8px;border-radius:999px;background:#101114;border:1px solid var(--line);color:var(--muted)}
.form{padding:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input,select,textarea{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0f1012;color:var(--text)}
.sendin,.how,.contact{margin:36px 0}
.steps{display:grid;gap:10px}
.site-footer{margin-top:40px;padding:20px 0;border-top:1px solid var(--line);color:var(--muted)}
@media (max-width:860px){.head-grid{grid-template-columns:1fr} .grid2{grid-template-columns:1fr}}
/* Responsive logo size */
@media (max-width: 600px) {
  .logo img {
    max-height: 36px;  /* slightly smaller on small screens */
  }
}
/* === GP Controllers — Configurator Polish (cleaned) === */

/* Keep your existing .grid2 above if you already set it; this is fine to repeat */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Labels & inputs for the configurator */
#sendinForm label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  margin-bottom: 0.9rem;
  gap: 6px;
}
#sendinForm input[type="text"],
#sendinForm input[type="email"],
#sendinForm textarea,
#sendinForm select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: 1px solid #d5d7de;
  background: #fff;
  font-size: 1rem;
  color: #111827; /* darker text */
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#sendinForm input::placeholder,
#sendinForm textarea::placeholder { color: #6b7280; }

#sendinForm select:hover,
#sendinForm input:hover,
#sendinForm textarea:hover { border-color: #b8bcc7; }

#sendinForm select:focus-visible,
#sendinForm input:focus-visible,
#sendinForm textarea:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Radios/checkboxes spacing */
#sendinForm input[type="radio"],
#sendinForm input[type="checkbox"] { margin-right: 8px; }
#sendinForm fieldset > div label {
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
  margin-bottom: 8px;
}

/* Configurator containers (use .sendin scope so product .card styles stay dark) */
.sendin .card,
#sendinForm,
#sendinForm fieldset {
  background: #f3f4f6;          /* slightly darker light-grey */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sendin .card:hover,
#sendinForm fieldset:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }

#sendinForm legend,
#sendinForm h3,
#sendinForm h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
  display: block;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

/* Summary text */
#orderSummary { color: #6b7280; font-size: .95rem; line-height: 1.4; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .95rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background:#2563eb; color:#fff; box-shadow:0 6px 14px rgba(37,99,235,.22); }
.btn.primary:hover { background:#1d4ed8; box-shadow:0 8px 18px rgba(29,78,216,.26); }
.btn.ghost { background:#f9fafb; border-color:#e5e7eb; color:#111827; }
.btn.ghost:hover { background:#f3f4f6; border-color:#d1d5db; }
.btn[aria-disabled="true"] { opacity:.6; cursor:not-allowed; box-shadow:none; }

/* Mobile stacking */
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }

/* Price badges (single, grey style) */
.price-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: .85em;
  font-weight: 500;
  color: #374151;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  vertical-align: middle;
  white-space: nowrap;
}
.price-badge.included {
  color: #065f46;
  background: #d1fae5;
  border-color: #34d399;
}

/* Pulse animation for badges (used when value changes) */
@keyframes badgePulse { 0%{background:#e5e7eb;} 50%{background:#d1d5db;} 100%{background:#e5e7eb;} }
.price-badge.pulse { animation: badgePulse .8s ease; }

/* Order Total bar (ONE definition) */
#orderTotalRow {
  margin-top: 15px;
  padding: 12px;
  background: #f5f5f5;
  border: 2px solid #ccc;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #222;
}
#orderTotalRow .label { color:#374151; font-weight:600; }
#orderTotalRow .amount { color:#27ae60; transition: transform .2s ease; }
#orderTotalRow .amount.pop { transform: scale(1.2); color:#2ecc71; }

/* Normalize autofill so it doesn't go black */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}
/* Force light inputs inside the send-in form */
#sendinForm input,
#sendinForm textarea,
#sendinForm select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d5d7de !important;
}

/* Specifically target the Full name field just in case */
#sendinForm input[name="name"] {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* Make placeholder readable */
#sendinForm input::placeholder,
#sendinForm textarea::placeholder {
  color: #6b7280 !important;
}

/* Tame browser autofill (Chrome/Edge/WebKit) */
#sendinForm input:-webkit-autofill,
#sendinForm input:-webkit-autofill:hover,
#sendinForm input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
}
/* === Radio & Checkbox styling for configurator === */
#sendinForm input[type="radio"],
#sendinForm input[type="checkbox"] {
  accent-color: #2563eb;   /* makes the dot/tick blue (modern browsers) */
  transform: scale(1.1);   /* slightly larger for visibility */
}

#sendinForm fieldset > div label {
  color: #374151;          /* dark grey for visibility */
  font-weight: 500;
  margin-right: 16px;
  cursor: pointer;
}

/* When a radio/checkbox is selected, make the text stronger */
#sendinForm input[type="radio"]:checked + span,
#sendinForm input[type="checkbox"]:checked + span {
  color: #111827;          /* near black */
  font-weight: 600;
}
/* Make sub-headings like “Clicky options” clearly visible */
#sendinForm fieldset legend,
#sendinForm .legend-strong {
  color: #111827 !important;     /* near black */
  font-weight: 600 !important;
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  opacity: 1 !important;         /* defeat any muted/opacity styles */
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

/* If some global rule is muting it, un-mute inside fieldsets */
#sendinForm fieldset .tiny,
#sendinForm fieldset .muted {
  color: #374151 !important;
  opacity: 1 !important;
}
/* === Soft dark-green theme for the configurator (overrides) === */
.sendin .card,
#sendinForm,
#sendinForm fieldset {
  background: #102e1a !important;   /* deep, soft green */
  border: 1px solid #1f4d2d !important;
}

/* Make headings/labels readable on dark green */
#sendinForm legend,
#sendinForm h3,
#sendinForm h4,
#sendinForm label {
  color: #e9e9ea !important;          /* your site text colour */
  border-bottom-color: #1f4d2d !important; /* subtle green underline */
}

/* Keep inputs readable (white fields on dark background) */
#sendinForm input,
#sendinForm textarea,
#sendinForm select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d5d7de !important;
}
/* === Softer green background for the configurator (overrides) === */
.sendin .card,
#sendinForm,
#sendinForm fieldset {
  background: #0f1411 !important;    /* dark base with a green tint, almost black */
  border: 1px solid #00ff6a55 !important;  /* faint neon-green border */
}

/* Make headings/labels readable on tinted background */
#sendinForm legend,
#sendinForm h3,
#sendinForm h4,
#sendinForm label {
  color: #e9e9ea !important;          
  border-bottom-color: #00ff6a33 !important; /* faint green underline */
}

/* Keep inputs readable (white fields) */
#sendinForm input,
#sendinForm textarea,
#sendinForm select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d5d7de !important;
}
/* === Section Headings & Borders on Dark Green === */
#sendinForm legend,
#sendinForm h3,
#sendinForm h4 {
  color: #00ff6a !important;     /* bright neon green */
  font-weight: 700 !important;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stronger section borders */
#sendinForm fieldset {
  border: 2px solid #00ff6a !important;   /* bright neon green border */
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
/* === Neon Green Headings & Borders === */
#sendinForm legend,
#sendinForm h3,
#sendinForm h4 {
  color: #00ff6a !important;     /* neon green text */
  font-weight: 700 !important;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#sendinForm fieldset {
  border: 2px solid #00ff6a !important;  /* neon green border */
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
/* === Neon headings + stronger borders (high specificity) === */
#sendinForm fieldset {
  border: 2px solid #00ff6a !important;   /* neon border */
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Use the same specificity as the earlier rule so this wins */
#sendinForm fieldset legend {
  color: #00ff6a !important;              /* neon title */
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* optional: give the legend a tiny dark backdrop so it stands out on the line */
  padding: 0 6px;
  background: #0f1411;                    /* matches your panel tint */
}

/* Sub-section headings inside fieldsets if you ever use them */
#sendinForm h3,
#sendinForm h4 {
  color: #00ff6a !important;
  font-weight: 700 !important;
}

/* Soft neon hover/glow for sections */
#sendinForm fieldset:hover {
  box-shadow:
    0 0 0 2px rgba(0, 255, 106, 0.18),
    0 0 18px rgba(0, 255, 106, 0.20);
}
/* Fix "Clicky options" title inside Performance Mods */
#sendinForm .legend-strong,
#sendinForm fieldset label[for="clicky"] {
  color: #ffffff !important;   /* bright white text */
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4rem;        /* tighten spacing */
  display: block;
  opacity: 1 !important;
}
/* ===== Interchangeable thumb colour gallery ===== */
.thumb-gallery {
  margin-top: .6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  position: relative;
}

.thumb-swatch {
  position: relative;
  border: 1px solid #1f4d2d;
  border-radius: 10px;
  background: #0f1411;
  padding: 6px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow: visible; /* allow hover zoom to overflow cell */
}

.thumb-swatch img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
}

.thumb-swatch .swatch-label {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.1;
  color: #e9e9ea;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/Focus enlarge */
.thumb-swatch:hover,
.thumb-swatch:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 2px #00ff6a22, 0 8px 22px rgba(0,0,0,.35);
  z-index: 5;
}

.thumb-swatch:hover img,
.thumb-swatch:focus-visible img {
  transform: scale(1.35);
  transition: transform .12s ease;
}

/* Selected state */
.thumb-swatch.is-selected {
  border-color: var(--green);
  box-shadow: 0 0 0 2px #00ff6a55;
}

/* Better keyboard hit area */
.thumb-swatch {
  outline: none;
}
.thumb-swatch:focus-visible {
  outline: 2px solid #00ff6a99;
  outline-offset: 2px;
}

/* Mobile: keep it neat */
@media (max-width: 520px) {
  .thumb-gallery {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }
  .thumb-swatch img { height: 50px; }
}
/* === Interchangeable thumb gallery === */
.thumb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.thumb-card {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f1712; /* dark panel */
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.thumb-card:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transform: translateY(-2px);
}

.thumb-card img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .15s ease;
}

.thumb-card:hover img {
  transform: scale(1.2);
}

.thumb-card span {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

/* Thumb/option galleries: hidden by default */
.thumb-gallery {
  display: none;                 /* hidden until JS decides to show */
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.thumb-card {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  transition: transform .08s ease, box-shadow .15s ease;
}
.thumb-card img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}
.thumb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.thumb-card span { display:block; margin-top:6px; font-size:12px; color:#374151; }

.thumb { position: relative; }
.thumb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; line-height: 26px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.9); cursor: pointer;
  display: none; /* hidden by default, shown when multi-image */
}
.thumb-nav.prev { left: 6px; }
.thumb-nav.next { right: 6px; }
.card:focus .thumb-nav,
.card:hover .thumb-nav { display: inline-block; }

.thumb-card.thumb-missing { outline: 2px dashed #e66; }
.thumb-card.thumb-missing img { opacity: .5; }

/* compact on small screens */
@media (max-width: 480px) {
  .thumb-gallery {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
  }
  .thumb-card img { width: 80px; height: 80px; }
}