/* 613 Parts — SEO flagship theme
   Brand: deep red #7a1f1f + safety amber #f0951e + cream
   Mobile-first. One theme → every Belleville / Kingston lander.
   Scope: store pages BEL + KIN only; 45 km towns in copy/schema only.
*/
:root{
  --red:#7a1f1f;
  --red-deep:#5c1515;
  --amber:#f0951e;
  --ink:#1a1a1a;
  --ink-soft:#333;
  --cream:#f7f7f5;
  --paper:#fff;
  --dark:#14171c;
  --dark-2:#1b2027;
  --dark-3:#232a33;
  --line:#2c333d;
  --muted:#c9c2b4;
  --ok:#4fb583;
  --warn:#d9a441;
  --rev-bg:#fff8ef;
  --rev-line:#f3ddb8;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 20px rgba(0,0,0,.15);
  --max:880px;
  --font:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  line-height:1.65;
  background:var(--paper);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber)}
a:focus-visible,button:focus-visible,select:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

/* —— Hero —— */
.hero{
  background:linear-gradient(165deg,var(--red) 0%,var(--red-deep) 100%);
  color:#fff;
  padding:40px 20px 36px;
  text-align:center;
}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(1.55rem,4.5vw,2.05rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero .stars{color:var(--amber);font-size:1.05rem;font-weight:700}
.hero .stars span{color:#fff;font-size:.92rem;font-weight:600}
.hero p{margin:10px auto 0;max-width:36rem;opacity:.94;font-size:1.02rem}
.hero .tag{
  display:inline-block;
  margin-top:14px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(240,149,30,.18);
  border:1px solid rgba(240,149,30,.45);
  color:var(--amber);
  padding:5px 12px;
  border-radius:999px;
}

/* —— Layout —— */
.wrap{max-width:var(--max);margin:0 auto;padding:24px 18px 40px}
.wrap h2{
  color:var(--red);
  font-size:clamp(1.25rem,3.2vw,1.55rem);
  margin:2rem 0 .75rem;
  line-height:1.25;
}
.wrap > p{margin:.65rem 0;color:var(--ink-soft)}
.lead{font-size:1.05rem}

/* —— Finder —— */
.finder{
  background:var(--dark);
  color:#ece7de;
  border-radius:var(--radius);
  padding:22px 18px;
  margin:18px 0;
  box-shadow:var(--shadow);
}
.finder h2{
  margin:0 0 8px;
  color:var(--amber);
  font-size:clamp(1.15rem,3vw,1.4rem);
}
.finder .hint{margin:0 0 12px;color:var(--muted);font-size:.95rem}
.finder select{
  width:100%;
  padding:14px 12px;
  margin:6px 0;
  font-size:16px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--dark-3);
  color:#ece7de;
  min-height:48px;
}
.finder button,.btn-find{
  width:100%;
  min-height:52px;
  padding:14px;
  margin-top:10px;
  font-size:1.05rem;
  font-weight:800;
  background:var(--amber);
  color:var(--dark);
  border:none;
  border-radius:6px;
  cursor:pointer;
}
.finder button:hover,.btn-find:hover{filter:brightness(1.05)}
.finder-out{margin-top:4px}

/* —— Product / battery cards —— */
.batt{
  display:flex;
  gap:14px;
  align-items:center;
  background:var(--dark-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px;
  margin:12px 0;
}
.batt .brand{font-weight:800;font-size:1.05rem;color:#ece7de}
.batt .price{
  font-family:Arial,sans-serif;
  font-size:1.55rem;
  font-weight:800;
  color:var(--amber);
  margin-top:2px;
}
.batt .meta{font-size:.85rem;color:var(--muted);margin-top:2px}
.pill{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  margin:6px 4px 0 0;
  letter-spacing:.02em;
}
.pill.inst{background:rgba(79,181,131,.16);color:var(--ok)}
.pill.ord{background:rgba(217,164,65,.16);color:var(--warn)}

/* —— CTAs —— */
.cta-row{text-align:center;margin:18px 0}
.cta{
  display:inline-block;
  background:var(--amber);
  color:var(--dark);
  font-weight:800;
  padding:14px 24px;
  border-radius:6px;
  text-decoration:none;
  margin:6px 4px;
  font-size:1rem;
  min-height:48px;
  line-height:1.2;
}
.cta.call,.cta.alt{
  background:var(--red);
  color:#fff;
}
.cta:hover{filter:brightness(1.06)}

/* —— Feature grid —— */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:12px;
  margin:16px 0;
}
.card{
  background:var(--cream);
  border-radius:var(--radius-sm);
  padding:16px 15px;
  border:1px solid #eceae4;
}
.card h3{
  margin:0 0 6px;
  color:var(--red);
  font-size:1rem;
}
.card p,.card{font-size:.95rem;color:var(--ink-soft)}

/* —— Review block —— */
.rev{
  background:var(--rev-bg);
  border:1px solid var(--rev-line);
  border-radius:var(--radius-sm);
  padding:16px;
  margin:18px 0;
}
.rev .s{color:var(--amber);font-weight:700}

/* —— FAQ —— */
.qa{border-top:1px solid #eee;padding:14px 0}
.qa:last-of-type{border-bottom:1px solid #eee}
.qa h3{margin:0 0 4px;font-size:1.05rem;color:var(--ink)}
.qa p{margin:0;color:var(--ink-soft)}
.faq dt{font-weight:700;margin-top:14px;color:var(--ink)}
.faq dd{margin:.25rem 0 0;color:var(--ink-soft)}

/* —— NAP —— */
.nap{
  background:var(--dark);
  color:#ece7de;
  border-radius:10px;
  padding:20px;
  margin:20px 0;
  line-height:1.7;
}
.nap strong{color:#fff;font-size:1.05rem}
.nap a{color:var(--amber);font-weight:700}
.area-note{
  font-size:.9rem;
  color:var(--muted);
  margin-top:8px;
}

/* —— Stock callout (non-battery pages) —— */
.stock{
  background:#eef7f0;
  border:1px solid #cfe6d6;
  border-radius:var(--radius-sm);
  padding:14px 16px;
  margin:16px 0;
}
.two{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0;
}
.two>div{
  flex:1;
  min-width:min(100%,220px);
  background:var(--cream);
  border-radius:var(--radius-sm);
  padding:14px 15px;
  border:1px solid #eceae4;
}

/* —— Footer —— */
.site-footer,footer{
  background:var(--dark);
  color:var(--muted);
  padding:22px 18px;
  text-align:center;
  font-size:.88rem;
  line-height:1.55;
}
.site-footer a,footer a{color:var(--amber);font-weight:700}

/* —— Utils —— */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.center{text-align:center}
.muted{color:var(--muted)}
.ok-msg{color:var(--ok);margin:12px 0 4px}
.warn-msg{color:var(--warn)}

@media (min-width:640px){
  .hero{padding:52px 28px 44px}
  .finder{padding:26px 24px}
  .wrap{padding:28px 24px 48px}
}