:root{

  --green:#9cff47;

  --blue:#00bfff;

  --red:#ff3131;

  --offwhite:#f2f2f2;


  --bg0:#07090c;

  --bg1:#0b0f14;

  --panel: rgba(0,0,0,.58);


  --r-hard: 0px;     /* hero frame hard edge */

  --r-soft: 10px;    /* buttons, inputs, cards */

  --shadow: 0 0 18px rgba(156,255,71,.30), 0 0 32px rgba(0,191,255,.16);

}


*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{

  font-family: Arial, sans-serif;

  color: var(--offwhite);

  background: radial-gradient(1200px 700px at 40% 0%, rgba(0,191,255,.10), transparent 60%),

              radial-gradient(900px 600px at 85% 30%, rgba(156,255,71,.08), transparent 55%),

              linear-gradient(180deg, var(--bg0), var(--bg1));

  overflow-x:hidden;

  min-height:100vh;

}


/* Subtle tool overlay (put PNG here: images/bg/tool-pattern.png) */

body.tool-theme::before{

  content:"";

  position:fixed;

  inset:0;

  pointer-events:none;

  background-image: url("../images/bg/tool-pattern.png");

  background-repeat: repeat;

  background-size: 520px;

  opacity:.06;              /* slightly stronger */

  mix-blend-mode: soft-light;

  z-index:0;

}

body.tool-theme::after{

  content:"";

  position:fixed;

  inset:0;

  pointer-events:none;

  background: radial-gradient(900px 550px at 55% 10%, rgba(0,191,255,.18), transparent 60%),

              radial-gradient(900px 550px at 15% 55%, rgba(156,255,71,.10), transparent 65%);

  opacity:.30;

  z-index:0;

}

body > *{ position:relative; z-index:1; }


/* header */

.header{

  position:fixed;

  top:0; left:0; right:0;

  background: rgba(0,0,0,.78);

  backdrop-filter: blur(8px);

  border-bottom: 2px solid rgba(0,191,255,.55);

  z-index:1000;

}

.parts-header{ position:sticky; }

.nav-container{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:10px 22px;

  gap: 12px;

}
@media (max-width: 700px){
  .nav-container{
    flex-direction:column;
    align-items:center;
    padding:10px 12px;
    gap:10px;
  }

  .logo{
    height:54px;
  }

  .nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 14px;
  }

  .nav a{
    margin-left:0;
    font-size:.9rem;
  }

  .nav-btn{
    padding:7px 12px;
  }
}

.logo{

  height:72px;

  filter: drop-shadow(0 0 10px rgba(0,191,255,.18));

  transition: transform .18s ease, filter .18s ease;

}

.logo:hover{

  transform: scale(1.06);

  filter: brightness(1.12) drop-shadow(0 0 14px rgba(0,191,255,.28));

}

.nav a{

  margin-left:16px;

  text-decoration:none;

  text-transform:uppercase;

  font-weight:700;

  letter-spacing:.6px;

  color: var(--blue);

}

.nav a:hover{ color: var(--green); text-shadow: 0 0 12px rgba(156,255,71,.65); }

.nav-btn{

  padding:8px 14px;

  border:2px solid rgba(0,191,255,.85);

  border-radius: var(--r-soft);

  box-shadow: 0 0 12px rgba(0,191,255,.25);

}


/* Parts header center text */

.parts-nav{ align-items:center; }

.nav-center-info{

  flex: 1;

  text-align: center;

  font-weight: 900;

  letter-spacing: .6px;

  text-transform: uppercase;

  color: rgba(0,191,255,.95);

  text-shadow: 0 0 14px rgba(156,255,71,.22);

  font-size: .9rem;

}

@media (max-width: 860px){

  .nav-center-info{ display:none; }

}


/* buttons (solid blue fill + green glow on hover) */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:12px 26px;

  border:2px solid rgba(0,191,255,.9);

  border-radius: var(--r-soft);

  text-decoration:none;

  font-weight:900;

  color: var(--offwhite);

  background: rgba(0,0,0,.28);

  box-shadow: 0 0 14px rgba(0,191,255,.18);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;

  text-transform:uppercase;

}

.btn:hover{

  background: rgba(0,191,255,.22);

  transform: translateY(-1px) scale(1.02);

  border-color: rgba(0,191,255,1);

  box-shadow: 0 0 22px rgba(156,255,71,.22), 0 0 28px rgba(0,191,255,.22);

}


/* keep class names but same “blue family” look */

.btn.primary,

.btn.secondary,

.btn.ghost,

.blue-ghost{

  border-color: rgba(0,191,255,.9);

  box-shadow: 0 0 14px rgba(0,191,255,.18);

}

.btn.mini{ padding:9px 14px; font-size:.85rem; }


/* sections */

.section{ padding:86px 20px; }

.panel{

  max-width: 1100px;

  margin: 0 auto;

  background: var(--panel);

  border: 2px solid rgba(156,255,71,.55);

  border-radius: var(--r-soft);

  padding: 34px;

  box-shadow: var(--shadow);

}

.panel h3{ color: var(--blue); text-align:center; margin-bottom:14px; }


.two-col{

  max-width: 1100px;

  margin: 0 auto;

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}

@media (max-width: 920px){ .two-col{ grid-template-columns: 1fr; } }


/* HERO frame */

.hero-frame-section{ padding-top: 110px; padding-bottom: 26px; }

.hero-frame{

  max-width: 1180px;

  margin: 0 auto;

  position:relative;

  border: 3px solid rgba(156,255,71,.95);

  border-radius: var(--r-hard);

  box-shadow: 0 0 24px rgba(156,255,71,.32), 0 0 42px rgba(0,191,255,.16);

  overflow:hidden;

}

.hero-frame-bg{

  width:100%;

  height: 560px;

  object-fit: cover;

  display:block;

  filter: saturate(1.05) contrast(1.03);

}
@media (max-width: 700px){
  .hero-frame-bg{
    height:540px;
    object-position:center center;
  }

  .hero-frame-overlay{
    padding:18px;
  }

  .hero-left{
    max-width:100%;
    padding:14px;
  }

  .hero-title{
    font-size:2.2rem;
  }

  .hero-tagline{
    font-size:1.05rem;
  }
}


.hero-frame-overlay{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding: 26px;

  /* lighter overlay (more photo visible) */

  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.10) 100%);

}


/* boxed hero text */

.hero-left{

  max-width: 640px;

  padding: 18px 18px;

  background: rgba(0,0,0,.34);

  border: 2px solid rgba(0,191,255,.38);

  border-radius: var(--r-soft);

  box-shadow: 0 0 18px rgba(0,191,255,.10), 0 0 18px rgba(156,255,71,.10);

  backdrop-filter: blur(3px);

}

.hero-title{

  font-size: 3.15rem;

  line-height:1.05;

  /* slight blue glow on white title */

  text-shadow:

    0 0 10px rgba(0,191,255,.38),

    0 0 18px rgba(0,191,255,.22),

    0 0 26px rgba(0,0,0,.88);

}

.hero-tagline{

  margin-top: 10px;

  font-size: 1.35rem;

  font-weight: 900;

  color: var(--red);

  -webkit-text-stroke: 1px rgba(242,242,242,.75);

  text-shadow:

    0 0 14px rgba(255,49,49,.22),

    0 0 22px rgba(242,242,242,.14),

    0 0 22px rgba(0,0,0,.75);

  text-transform: uppercase;

  letter-spacing: .6px;

}

.hero-buttons{ margin-top: 16px; display:flex; flex-wrap:wrap; gap:10px; }


.walk-in{ margin-top: 12px; color: rgba(242,242,242,.74); font-style: italic; }


/* hours block */

.hero-hours{

  margin-top: 14px;

  padding: 12px 14px;

  background: rgba(0,0,0,.28);

  border: 2px solid rgba(0,191,255,.30);

  border-radius: var(--r-soft);

  box-shadow: 0 0 16px rgba(0,191,255,.08);

}

.hours-title{

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: rgba(242,242,242,.86);

  margin-bottom: 8px;

}

.hours-grid{ display:grid; gap: 6px; color: rgba(242,242,242,.88); }

.hours-fineprint{

  margin-top: 8px;

  color: rgba(242,242,242,.60);

  font-size: .82rem;

  line-height: 1.3;

}


/* hero strip */

.hero-strip{

  display:grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  max-width: 920px;

}

.hero-strip img{

  width:100%;

  height: 110px;            /* more visible */

  object-fit: cover;

  border: 2px solid rgba(0,191,255,.65);

  border-radius: var(--r-soft);

  cursor:pointer;

  box-shadow: 0 0 10px rgba(0,191,255,.12);

}

.hero-strip img:hover{

  border-color: rgba(156,255,71,.85);

  box-shadow: 0 0 18px rgba(156,255,71,.18);

}

@media (max-width: 920px){

  .hero-title{ font-size: 2.25rem; }

  .hero-strip{ grid-template-columns: repeat(2, 1fr); }

}


/* services */

.services-line{

  text-align:center;

  margin-bottom: 14px;

  color: rgba(242,242,242,.80);

}

.service-list{ display:grid; gap:12px; color: rgba(242,242,242,.9); line-height:1.45; }


/* gallery */

.gallery-grid{

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

  gap: 14px;

}

.gallery-grid img{

  width:100%;

  height: 185px;

  object-fit: cover;

  border: 2px solid rgba(0,191,255,.55);

  border-radius: var(--r-soft);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}

.gallery-grid img:hover{

  transform: scale(1.02);

  border-color: rgba(156,255,71,.8);

  box-shadow: 0 0 20px rgba(156,255,71,.16);

}


/* dealers */

.dealer-row{

  display:flex;

  flex-wrap:wrap;

  gap: 34px;

  justify-content:center;

  margin-top: 18px;

}

.dealer-row img{

  height: 56px;

  padding: 10px;

  margin: 6px;

  filter: brightness(.98) drop-shadow(0 0 10px rgba(156,255,71,.18));

  transition: transform .18s ease, filter .18s ease;

}

.dealer-row img:hover{

  transform: translateY(-2px) scale(1.06);

  filter: brightness(1.15) drop-shadow(0 0 14px rgba(0,191,255,.22));

}

.brand-disclaimer{

  margin-top: 16px;

  color: rgba(242,242,242,.65);

  font-size: .85rem;

  line-height:1.35;

  text-align:center;

}


/* contact + focus glows */

.contact-section a{ color: var(--blue); text-decoration:none; }

.contact-form{ margin-top: 16px; display:grid; gap:10px; }

.contact-form input, .contact-form textarea,

.search-bar, .filters select{

  width:100%;

  padding: 11px 12px;

  border: 2px solid rgba(156,255,71,.55);

  border-radius: var(--r-soft);

  background: rgba(0,0,0,.45);

  color: var(--offwhite);

  outline: none;

}

.contact-form textarea{ min-height: 120px; resize: vertical; }


.contact-form input:focus,

.contact-form textarea:focus,

.search-bar:focus,

.filters select:focus{

  border-color: rgba(0,191,255,.9);

  box-shadow: 0 0 0 3px rgba(0,191,255,.16), 0 0 18px rgba(0,191,255,.10);

}


/* footer */

.footer{

  text-align:center;

  padding: 22px;

  border-top: 2px solid rgba(255,49,49,.55);

  background: rgba(0,0,0,.78);

}

.legal{

  margin-top: 8px;

  color: rgba(242,242,242,.55);

  font-size: .78rem;

}


/* lightbox */

.lightbox{

  display:none;

  position:fixed;

  inset:0;

  background: rgba(0,0,0,.92);

  z-index: 3000;

  padding: 30px;

}

.lightbox-content{

  max-width: 90vw;

  max-height: 80vh;

  display:block;

  margin: 70px auto 0 auto;

  border: 3px solid rgba(156,255,71,.85);

  box-shadow: 0 0 28px rgba(0,191,255,.14);

  border-radius: var(--r-soft);

}

.lightbox-close{

  position:absolute;

  top: 18px;

  right: 18px;

  background: transparent;

  border:none;

  color: var(--offwhite);

  font-size: 2.2rem;

  cursor:pointer;

}


/* parts page */

.shop-shell{ padding-top: 120px; padding-bottom: 40px; }

.shop-panel{ padding: 26px; }

.panel-accent{

  border-color: rgba(0,191,255,.45);

  box-shadow: 0 0 18px rgba(0,191,255,.12), 0 0 26px rgba(156,255,71,.12);

  position:relative;

}

.panel-accent::before{

  content:"";

  position:absolute;

  inset:0;

  border: 2px solid rgba(255,49,49,.24);

  pointer-events:none;

  border-radius: var(--r-soft);

}

.shop-top{ display:flex; gap: 16px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }

.shop-title{
  font-size:2.6rem;
  font-weight:900;
  letter-spacing:.6px;

  color:rgba(242,242,242,.95);

  text-shadow:
    0 0 14px rgba(0,191,255,.65),
    0 0 26px rgba(0,191,255,.45),
    0 0 40px rgba(0,191,255,.20);

  margin-bottom:6px;
}

.shop-subtitle{ margin-top: 6px; color: rgba(242,242,242,.70); line-height:1.35; }


.cart-pill{

  display:flex; align-items:center; gap: 10px;

  padding: 10px 12px;

  background: rgba(0,0,0,.45);

  border: 2px solid rgba(156,255,71,.55);

  border-radius: var(--r-soft);

}


.shop-controls{

  display:grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 14px;

  margin-top: 16px;

}

@media (max-width: 920px){ .shop-controls{ grid-template-columns: 1fr; } }

.search-vehicle-row{
  display:grid;
  grid-template-columns: 1.6fr auto;
  gap:12px;
  align-items:end;
}

.compact-search{
  min-width:0;
}

.vehicle-trigger{
  min-height:48px;
  white-space:nowrap;
}

.filters-compact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:0;
}


.top-tabs{
  display:flex;
  gap:10px;
  margin-top:18px;
  margin-bottom:18px;
}

.top-tab{
  padding:10px 22px;
  min-width:120px;
  text-align:center;

  border:2px solid rgba(0,191,255,.55);
  border-radius:999px;
  background:rgba(0,0,0,.42);

  color:rgba(242,242,242,.92);
  font-weight:900;
  letter-spacing:.3px;

  box-shadow:0 0 10px rgba(0,191,255,.08);
  transition:all .18s ease;
}

.top-tab:hover{
  color:var(--offwhite);
  border-color:rgba(0,191,255,.9);
  box-shadow:0 0 16px rgba(0,191,255,.16);
}

.top-tab.active{
  color:var(--green);
  background:rgba(0,191,255,.16);
  border-color:rgba(156,255,71,.78);
  box-shadow:0 0 18px rgba(156,255,71,.16);
}


.featured-sections{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-bottom:20px;
}

/* ===============================
   FEATURED PARTS CARDS
   =============================== */

.featured-sections{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top:18px;
}

/* card layout */
.featured-card{
  display:grid;
  grid-template-columns:140px 1fr;
  grid-template-areas:
    "title title"
    "image text"
    "image browse";
  gap:12px 18px;

  background:linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.46));
  border:2px solid rgba(0,191,255,.40);
  border-radius:14px;
  padding:16px 18px;

  box-shadow:0 0 18px rgba(0,191,255,.10);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}

.featured-card:hover{
  transform:translateY(-3px);
  border-color:rgba(156,255,71,.78);
  box-shadow:0 0 24px rgba(156,255,71,.14), 0 0 28px rgba(0,191,255,.12);
}

.featured-card h3{
  grid-area:title;
  margin:0 0 4px 0;
  font-size:1.45rem;
  font-weight:900;
  color:var(--blue);
  text-shadow:
    0 0 10px rgba(0,191,255,.42),
    0 0 18px rgba(0,191,255,.18);
}

.featured-card-img{
  grid-area:image;
  width:100%;
  height:135px;
  object-fit:contain;
  background:radial-gradient(circle at center, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:3px solid rgba(0,191,255,.35);
  border-radius:12px;
  padding:10px;
  box-shadow:
    0 0 18px rgba(0,191,255,.12),
    inset 0 0 18px rgba(0,191,255,.08);
}

.featured-card p{
  grid-area:text;
  margin:0;
  color:rgba(242,242,242,.82);
  line-height:1.4;
  font-size:.98rem;
  align-self:start;
}

.featured-card::after{
  content:"Browse";
  grid-area:browse;
  justify-self:end;
  align-self:end;

  padding:7px 18px;
  border-radius:999px;
  border:2px solid rgba(156,255,71,.72);
  background:rgba(156,255,71,.10);

  font-size:.78rem;
  font-weight:900;
  color:var(--green);
  letter-spacing:.3px;

  box-shadow:0 0 12px rgba(156,255,71,.12);
}

@media (max-width: 920px){
  .featured-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "image"
      "text"
      "browse";
  }

  .featured-card-img{
    height:150px;
  }

  .featured-card::after{
    justify-self:start;
  }
}


.vehicle-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:12px;
}

.vehicle-form-grid label{
  display:grid;
  gap:6px;
  font-weight:900;
  color:rgba(242,242,242,.82);
  font-size:.9rem;
}

.vehicle-form-grid select{
  width:100%;
  padding:11px 12px;
  border:2px solid rgba(156,255,71,.55);
  border-radius:10px;
  background:rgba(0,0,0,.45);
  color:var(--offwhite);
  outline:none;
}

.vehicle-form-grid select:focus{
  border-color:rgba(0,191,255,.9);
  box-shadow:0 0 0 3px rgba(0,191,255,.16), 0 0 18px rgba(0,191,255,.10);
}

.load-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:22px;
}

@media (max-width: 920px){
  .search-vehicle-row{
    grid-template-columns: 1fr;
  }

  .filters-compact{
    grid-template-columns: 1fr 1fr;
  }

  .featured-sections{
    grid-template-columns: 1fr;
  }

  .vehicle-form-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .filters-compact{
    grid-template-columns: 1fr;
  }
}

.filters{

  display:grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 10px;

}

.filters label{ display:grid; gap: 6px; font-weight:900; color: rgba(242,242,242,.82); font-size:.86rem; }


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

@media (max-width: 920px){
  .parts-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

@media (max-width: 520px){
  .parts-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .part-card{
    padding:10px;
    gap:8px;
  }

  .part-img{
    height:110px;
    padding:6px;
  }

  .part-name{
    font-size:.88rem;
    line-height:1.2;
  }

  .part-meta{
    font-size:.78rem;
    gap:3px;
  }

  .part-actions{
    gap:6px;
  }

  .btn.mini{
    padding:7px 10px;
    font-size:.74rem;
  }
}

.part-card{

  background: rgba(0,0,0,.55);

  border: 2px solid rgba(0,191,255,.45);

  border-radius: var(--r-soft);

  padding: 14px;

  display:grid;

  gap: 10px;

  box-shadow: 0 0 16px rgba(0,191,255,.10);

}

.part-img{

  width:100%;

  height: 165px;

  object-fit: contain;

  background: rgba(255,255,255,.03);

  border: 2px solid rgba(242,242,242,.12);

  border-radius: var(--r-soft);

  padding: 10px;

}

.part-name{ font-weight:900; line-height:1.25; }

.part-meta{ color: rgba(242,242,242,.72); font-size:.9rem; display:grid; gap: 4px; }

.part-price{ font-weight:900; color: rgba(156,255,71,.92); }

.part-sku{ color: rgba(242,242,242,.55); font-size:.82rem; }


.part-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 4px; }


.fulfillment{

  display:flex;

  gap: 10px;

  align-items:center;

  justify-content:space-between;

}

.fulfillment label{

  font-weight:900;

  font-size: .82rem;

  color: rgba(242,242,242,.72);

}

.fulfillment select{

  width: 60%;

  padding: 9px 10px;

  border: 2px solid rgba(156,255,71,.35);

  border-radius: var(--r-soft);

  background: rgba(0,0,0,.42);

  color: var(--offwhite);

  outline:none;

}


.empty-state{ text-align:center; padding: 18px; color: rgba(242,242,242,.7); }


/* modals */

.modal{

  position:fixed; inset:0;

  display:none; place-items:center;

  background: rgba(0,0,0,.82);

  z-index: 4000;

  padding: 18px;

}

.modal.show{ display:grid; }

.modal-card{

  width:min(720px, 96vw);

  background: rgba(0,0,0,.78);

  border: 2px solid rgba(156,255,71,.55);

  border-radius: var(--r-soft);

  padding: 18px;

  box-shadow: 0 0 28px rgba(0,191,255,.10);

}

.modal-top{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 10px; }

.modal-close{ background: transparent; border:none; color: var(--offwhite); font-size: 2rem; cursor:pointer; }

.modal-actions{ margin-top: 14px; display:flex; justify-content:flex-end; gap: 10px; flex-wrap:wrap; }

.cart-items{ display:grid; gap: 10px; margin-top: 8px; }

.cart-item{

  display:flex; justify-content:space-between; gap: 10px;

  padding: 10px;

  border: 1px solid rgba(242,242,242,.15);

  background: rgba(0,0,0,.35);

  border-radius: var(--r-soft);

}

.cart-item strong{ color: var(--green); }

.cart-summary{

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid rgba(242,242,242,.18);

}


/* fade */

[data-animate="fade"]{ opacity:0; transform: translateY(16px); transition: all 800ms ease; }

[data-animate="fade"].visible{ opacity:1; transform: translateY(0); }
/* STRONGER HERO TITLE GLOW */
.hero-title{
  text-shadow:
    0 0 14px rgba(0,191,255,.65),
    0 0 28px rgba(0,191,255,.45),
    0 0 40px rgba(0,191,255,.25),
    0 0 30px rgba(0,0,0,.9);
}

/* BUTTON HOVER */
.btn:hover{
  background: rgba(0,191,255,.45);
  color: var(--green);
  box-shadow: 0 0 25px rgba(156,255,71,.35);
}

/* PARTS PAGE GREEN HOVER */
.parts-page .btn.primary:hover,
.parts-page .add-to-cart:hover{
  background: rgba(156,255,71,.35);
  color: #002100;
}

/* HOURS DROPDOWN */
.hero-hours-details{
  margin-top:14px;
  padding:12px;
  background: rgba(0,0,0,.3);
  border:2px solid rgba(0,191,255,.4);
  border-radius:10px;
}
.hero-hours-details summary{
  cursor:pointer;
  font-weight:bold;
  text-transform:uppercase;
}
.hours-note{
  font-size:.8rem;
  opacity:.7;
  margin-top:6px;
}

/* CAPABILITIES STRIP */
.capabilities-strip{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  background: rgba(0,0,0,.6);
  border-top:2px solid rgba(0,191,255,.5);
  border-bottom:2px solid rgba(0,191,255,.5);
  text-align:center;
  font-weight:700;
}
.capabilities-strip div{
  padding:16px 10px;
  border-right:1px solid rgba(255,255,255,.08);
}
.capabilities-strip div:last-child{
  border-right:none;
}
@media (max-width: 700px){
  .capabilities-strip{
    grid-template-columns:1fr 1fr;
  }

  .capabilities-strip div{
    padding:12px 8px;
    font-size:.92rem;
  }
}
/* SHOP RATES */
.rates-panel{
  text-align:center;
}
.rates-grid{
  margin-top:18px;
  display:grid;
  gap:12px;
}
.rates-grid div{
  display:flex;
  justify-content:space-between;
  padding:12px 18px;
  background: rgba(0,0,0,.45);
  border:2px solid rgba(0,191,255,.3);
  border-radius:10px;
}
.rates-grid span{
  color: var(--green);
  font-weight:bold;
}

/* TOOL OVERLAY STRONGER */
body.tool-theme::before{
  opacity:.18;
  mix-blend-mode:overlay;
}
/* HERO TITLE GLOW */
.hero-glow{
  text-shadow:
    0 0 16px rgba(0,191,255,.6),
    0 0 30px rgba(0,191,255,.4),
    0 0 40px rgba(0,0,0,.9);
}

/* BUTTON STYLE */
.btn{
  border:2px solid var(--blue);
  background:rgba(0,191,255,.15);
  color:white;
  transition: all .2s ease;
}
.btn:hover{
  color:var(--green);
  box-shadow:0 0 20px rgba(156,255,71,.4);
}

/* CAPABILITIES STRIP */
.capabilities-strip{
  margin-top:92px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(0,0,0,.6);
  border-top:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
}
.capabilities-strip div{
  padding:14px;
  text-align:center;
  font-weight:700;
}

/* SERVICES GRID */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.service-card{
  padding:16px;
  background:rgba(0,0,0,.4);
  border:2px solid rgba(0,191,255,.3);
}

/* RATES */
.rates-grid{
  display:grid;
  gap:12px;
}
.rates-grid div{
  display:flex;
  justify-content:space-between;
  padding:12px;
  border:2px solid rgba(156,255,71,.3);
  background:rgba(0,0,0,.4);
}
.rates-grid span{
  color:var(--green);
  font-weight:bold;
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:all .6s ease;
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* TOOL OVERLAY STRONGER */
body.tool-theme::before{
  opacity:.15;
}
/* Make the big blocks not touch */
.panel { margin-bottom: 22px; }

/* Two column wrapper for Services + Rates */
.two-col-panels{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;               /* space between the two big panels */
  padding: 86px 20px;
}
@media (max-width: 920px){
  .two-col-panels{ grid-template-columns: 1fr; }
}

/* Extra glow outline option */
.panel-glow{
  border-color: rgba(0,191,255,.45);
  box-shadow:
    0 0 18px rgba(0,191,255,.12),
    0 0 28px rgba(156,255,71,.10);
}

/* Service cards spacing + glow */
.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;               /* makes them not touch */
}
.service-card{
  padding: 16px;
  display: grid;
  gap: 6px;
  background: rgba(0,0,0,.38);
  border: 2px solid rgba(0,191,255,.30);
  border-radius: 10px;     /* your “option B” soft corners */
  box-shadow: 0 0 14px rgba(0,191,255,.10);
}
.service-card:hover{
  border-color: rgba(156,255,71,.55);
  box-shadow: 0 0 18px rgba(156,255,71,.16);
}

/* Rates cards */
.rates-grid{ display:grid; gap: 12px; }
.rate-card{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.38);
  border: 2px solid rgba(156,255,71,.28);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(156,255,71,.10);
}
.rate-card span{ color: var(--green); font-weight: 900; }
.rate-card:hover{
  border-color: rgba(0,191,255,.55);
  box-shadow: 0 0 18px rgba(0,191,255,.14);
}
/* ===============================
   CLEAN ACTIVE NAV STYLE
   =============================== */

.nav a{
  transition: color .2s ease, text-shadow .2s ease;
}

.nav a.active{
  color: var(--blue);
  text-shadow:
    0 0 10px rgba(0,191,255,.6),
    0 0 18px rgba(0,191,255,.3);
}

/* ===============================
   MOBILE HERO CLEANUP
   =============================== */

@media (max-width: 700px){

  /* hide capability strip on phones */
  .capabilities-strip{
    display:none;
  }

  /* make hero image show better */
  .hero-frame-bg{
    height:620px;
    object-fit:cover;
    object-position:center top;
  }

  .hero-frame-overlay{
    padding:16px;
  }

  .hero-left{
    max-width:100%;
    padding:14px;
  }

  /* only show 2 featured images per row */
  .hero-strip{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }

  .hero-strip img{
    height:95px;
  }

}
/* =================================
   MOBILE HERO IMAGE SWIPE ROW
   ================================= */

@media (max-width:700px){

  .hero-strip{
    display:flex;
    overflow-x:auto;
    gap:10px;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    padding-bottom:4px;
  }

  .hero-strip::-webkit-scrollbar{
    display:none;
  }

  .hero-strip img{
    flex:0 0 48%;
    height:110px;

    object-fit:cover;

    scroll-snap-align:start;

    border:2px solid rgba(0,191,255,.65);
    border-radius:10px;
  }

}
/* ===============================
   MOBILE HEADER + HERO OFFSET FIX
   =============================== */

@media (max-width: 700px){

  .header{
    position:fixed;
    top:0;
    left:0;
    right:0;
  }

  .nav-container{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    gap:8px;
  }

  .logo{
    height:48px;
  }

  .nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
  }

  .nav a{
    margin-left:0;
    font-size:.88rem;
    line-height:1.1;
  }

  .nav-btn{
    padding:7px 12px;
  }

  /* push hero down so header doesn't cover title */
  .hero-frame-section{
    padding-top:190px;
  }

  .hero-frame-bg{
    height:600px;
    object-fit:cover;
    object-position:center 20%;
  }

  .hero-frame-overlay{
    padding:16px;
  }

  .hero-left{
    max-width:100%;
    padding:14px;
    margin-top:8px;
  }

  .hero-title{
    font-size:2rem;
    line-height:1.02;
  }

  .hero-tagline{
    font-size:1rem;
  }

}

/* NOW HIRING BUTTON */

.nav-hiring-btn{
  background:rgba(0,0,0,.28);

  border:2px solid rgba(0,191,255,.9);
  border-radius:10px;

  color:#ff4d4d; /* red text */

  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;

  padding:8px 16px;

  cursor:pointer;

  /* glow combo */
  text-shadow:
    0 0 6px rgba(255,255,255,.6),
    0 0 10px rgba(255,77,77,.6);

  box-shadow:
    0 0 12px rgba(0,191,255,.25);

  transition:all .18s ease;
}

/* HOVER (this is where it pops) */
.nav-hiring-btn:hover{
  color:#ff6b6b;

  border-color:rgba(156,255,71,.8);

  transform:translateY(-1px);

  text-shadow:
    0 0 8px rgba(255,255,255,.8),
    0 0 16px rgba(255,77,77,.9);

  box-shadow:
    0 0 18px rgba(156,255,71,.18),
    0 0 28px rgba(0,191,255,.18);
}
@media (min-width: 768px){

  .nav-hiring-btn{
    padding:10px 18px; /* slightly bigger like shop parts */
    font-size:.95rem;
  }

}
/* ===============================
   HIRING MODAL - POLISHED
   =============================== */

.hiring-modal-card{
  width:min(760px, 94vw);
  max-height:88vh;
  overflow-y:auto;

  background:
    linear-gradient(180deg, rgba(8,14,22,.94), rgba(5,10,18,.90));

  border:2px solid rgba(0,191,255,.42);
  border-radius:18px;

  padding:24px 24px 20px;

  box-shadow:
    0 0 24px rgba(0,191,255,.14),
    0 0 40px rgba(156,255,71,.08);

  backdrop-filter: blur(10px);

  position:relative;
}

.hiring-modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 24px rgba(0,191,255,.04);
}

.hiring-modal-card h3{
  font-size:2.2rem;
  font-weight:900;
  color:rgba(242,242,242,.96);
  text-shadow:
    0 0 14px rgba(0,191,255,.55),
    0 0 26px rgba(0,191,255,.20);
  margin-bottom:8px;
}

.hiring-intro{
  margin-bottom:18px;
  color:rgba(242,242,242,.82);
  line-height:1.5;
  font-size:1.02rem;
}

.hiring-form{
  display:grid;
  gap:14px;
}

.hiring-form label{
  display:grid;
  gap:7px;
  font-weight:900;
  color:rgba(242,242,242,.88);
  font-size:.94rem;
}

.hiring-form input,
.hiring-form select,
.hiring-form textarea{
  width:100%;
  padding:12px 14px;

  border:2px solid rgba(0,191,255,.26);
  border-radius:12px;

  background:rgba(0,0,0,.34);
  color:var(--offwhite);

  outline:none;

  box-shadow:
    inset 0 0 10px rgba(0,191,255,.03);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.hiring-form input::placeholder,
.hiring-form textarea::placeholder{
  color:rgba(242,242,242,.46);
}

.hiring-form input:focus,
.hiring-form select:focus,
.hiring-form textarea:focus{
  border-color:rgba(0,191,255,.82);
  background:rgba(0,0,0,.42);
  box-shadow:
    0 0 0 3px rgba(0,191,255,.14),
    0 0 18px rgba(0,191,255,.12);
}

.hiring-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.hiring-form textarea{
  min-height:120px;
  resize:vertical;
}

.hiring-note{
  margin-top:6px;
  color:rgba(242,242,242,.62);
  font-size:.85rem;
  line-height:1.35;
}

#hiring-close{
  font-size:2rem;
  color:rgba(242,242,242,.92);
  text-shadow:0 0 10px rgba(0,191,255,.18);
}

#hiring-close:hover{
  color:var(--green);
}

#hiring-form .modal-actions{
  margin-top:4px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

#hiring-form .btn.secondary{
  background:rgba(0,0,0,.34);
  border-color:rgba(0,191,255,.65);
  color:var(--offwhite);
}

#hiring-form .btn.primary{
  background:rgba(0,191,255,.18);
  border-color:rgba(0,191,255,.9);
  color:var(--offwhite);
  box-shadow:
    0 0 16px rgba(0,191,255,.16),
    0 0 20px rgba(156,255,71,.08);
}

#hiring-form .btn.primary:hover{
  background:rgba(0,191,255,.28);
  border-color:rgba(156,255,71,.82);
  color:var(--green);
  box-shadow:
    0 0 20px rgba(156,255,71,.16),
    0 0 28px rgba(0,191,255,.18);
}

@media (max-width:700px){
  .hiring-modal-card{
    width:min(92vw, 520px);
    padding:18px 16px 16px;
    max-height:88vh;
  }

  .hiring-modal-card h3{
    font-size:1.7rem;
  }

  .hiring-two-col{
    grid-template-columns:1fr;
  }
}
/* =========================================
   MOBILE POLISH (HERO + NAV + TEXT)
   ========================================= */

@media (max-width:700px){

  /* HERO BOX (less bulky, cleaner spacing) */
  .hero-left{
    padding:12px;
  }

  /* HERO TITLE (less cramped) */
  .hero-title{
    font-size:1.85rem;
    line-height:1.02;
  }

  /* TAGLINE (THE DIESEL SPECIALIST — more readable) */
@media (max-width:700px){
  .hero-tagline{
    display:inline-block;

    font-size:1rem;
    font-weight:900;
    line-height:1.1;

    color:#ff4d4d; /* same vibe as NOW HIRING */

    -webkit-text-stroke:0.6px rgba(255,255,255,.9);

    text-shadow:
      0 0 2px rgba(0,0,0,.8);

    letter-spacing:.5px;

    background:transparent;
    padding:0;
  }
}
  /* BUTTON SPACING */
  .hero-buttons{
    gap:8px;
  }

  .btn{
    padding:10px 18px;
  }

  /* HOURS BOX (more contrast) */
  .hero-hours{
    background:rgba(0,0,0,.38);
    border-color:rgba(0,191,255,.38);
  }

  /* WALK-IN TEXT (clearer) */
  .walk-in{
    color:rgba(242,242,242,.84);
    font-size:.95rem;
  }

  /* NAV TEXT (slightly tighter + cleaner) */
  .nav a{
    font-size:.85rem;
    letter-spacing:.4px;
  }

  /* NAV BUTTON SPACING */
  .nav{
    gap:8px 10px;
  }

  /* OPTIONAL: IMAGE STRIP (slightly taller for nicer look) */
  .hero-strip img{
    height:120px;
  }

}
/* DESKTOP NAV CTA SPACING */
@media (min-width: 768px){
  .nav-hiring-btn{
    margin-left: 8px;
    margin-right: -2px;
  }
}
/* MOBILE BUTTON TEXT ALIGNMENT */
@media (max-width: 700px){
  .nav-btn,
  .nav-hiring-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    min-height:42px;
  }
}
@media (max-width:700px){
  .hero-left{
    background:rgba(0,0,0,.42);
    border:2px solid rgba(0,191,255,.34);
    box-shadow:
      0 0 14px rgba(0,191,255,.10),
      0 0 16px rgba(0,0,0,.22);
  }
}
/* ===============================
   SMALLER PHONE HERO TWEAKS
   =============================== */

@media (max-width:430px){
  .hero-title{
    font-size:1.75rem;
  }

  .hero-tagline{
    font-size:.96rem;
  }

  .hero-buttons{
    gap:7px;
  }

  .btn{
    padding:9px 16px;
  }
}

@media (max-width:380px){
  .hero-title{
    font-size:1.62rem;
  }

  .hero-tagline{
    font-size:.90rem;
    padding:3px 7px;
  }

  .hero-left{
    padding:10px;
  }

  .btn{
    padding:8px 14px;
    font-size:.88rem;
  }
}
@media (max-width:380px){
  .hero-tagline{
    font-size:.88rem;
    -webkit-text-stroke:1px rgba(242,242,242,.96);
  }
}
/* ===============================
   PARTS PAGE - VEHICLE + VIN
   =============================== */

.search-vehicle-row{
  display:grid;
  grid-template-columns: 1.6fr auto auto;
  gap:12px;
  align-items:end;
}

.vin-trigger{
  min-height:48px;
  white-space:nowrap;
}

.vehicle-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding:12px 14px;
  background:rgba(0,0,0,.42);
  border:2px solid rgba(156,255,71,.38);
  border-radius:12px;
  box-shadow:0 0 14px rgba(156,255,71,.08);
}

.vehicle-status span{
  color:rgba(242,242,242,.92);
  font-weight:900;
  line-height:1.35;
}

.vehicle-modal-card,
.vin-modal-card{
  width:min(760px, 94vw);
  max-height:88vh;
  overflow-y:auto;
  background:linear-gradient(180deg, rgba(8,14,22,.94), rgba(5,10,18,.90));
  border:2px solid rgba(0,191,255,.42);
  border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:
    0 0 24px rgba(0,191,255,.14),
    0 0 40px rgba(156,255,71,.08);
  backdrop-filter: blur(10px);
}

.vehicle-modal-card::before,
.vin-modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 24px rgba(0,191,255,.04);
}

.vehicle-form-grid,
.vin-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px;
}

.vehicle-form-grid label,
.vin-form-grid label{
  display:grid;
  gap:7px;
  font-weight:900;
  color:rgba(242,242,242,.88);
  font-size:.94rem;
}

.vehicle-form-grid select,
.vin-form-grid input,
.vin-form-grid textarea{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(0,191,255,.26);
  border-radius:12px;
  background:rgba(0,0,0,.34);
  color:var(--offwhite);
  outline:none;
  box-shadow: inset 0 0 10px rgba(0,191,255,.03);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.vehicle-form-grid select:focus,
.vin-form-grid input:focus,
.vin-form-grid textarea:focus{
  border-color:rgba(0,191,255,.82);
  background:rgba(0,0,0,.42);
  box-shadow:
    0 0 0 3px rgba(0,191,255,.14),
    0 0 18px rgba(0,191,255,.12);
}

.vin-form-grid textarea{
  min-height:120px;
  resize:vertical;
}

.vin-full{
  grid-column:1 / -1;
}

.vin-intro{
  margin-bottom:14px;
  color:rgba(242,242,242,.82);
  line-height:1.45;
}

.vin-current-wrap{
  margin-top:8px;
  margin-bottom:10px;
  padding:12px 14px;
  background:rgba(0,0,0,.34);
  border:2px solid rgba(156,255,71,.26);
  border-radius:12px;
  color:rgba(242,242,242,.88);
  line-height:1.4;
}

.vin-note{
  margin-top:8px;
  color:rgba(242,242,242,.62);
  font-size:.85rem;
  line-height:1.35;
}

.part-fitment{
  color:rgba(242,242,242,.75);
  font-size:.82rem;
  line-height:1.35;
}

@media (max-width: 920px){
  .search-vehicle-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .vehicle-status{
    flex-direction:column;
    align-items:flex-start;
  }

  .vehicle-form-grid,
  .vin-form-grid{
    grid-template-columns:1fr;
  }

  .vehicle-modal-card,
  .vin-modal-card{
    width:min(92vw, 520px);
    padding:18px 16px 16px;
  }
}
/* Mobile parts card fix */
@media (max-width: 768px) {
  .parts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .part-card {
    padding: 10px;
    gap: 8px;
  }

  .part-img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 6px;
    background: #0b0f14;
  }

  .part-name {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .part-meta {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .part-actions {
    flex-direction: column;
    gap: 6px;
  }

  .part-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .fulfillment {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .fulfillment select {
    width: 100%;
  }
}
/* NOCO logo visibility fix */
.noco-logo {
  background: white;
  padding: 8px;
  border-radius: 8px;
}
.swipe-hint {
  color: #00e0ff;
  text-shadow: 0 0 6px rgba(0, 224, 255, 0.4);
}

@media (max-width: 700px) {
  .swipe-hint {
    display: block;
    margin: 0 0 2px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.8;
  }
}

@media (min-width: 701px) {
  .swipe-hint {
    display: none;
  }
}
@media (max-width: 700px) {
  .hero-strip {
    margin-top: 0;
    padding-top: 0;
  }

  .hero-strip img {
    margin-top: 0;
  }
}