/* ============================================================
   Car Parts — website UI kit styles
   (depends on ../../colors_and_type.css tokens)
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font-body);color:var(--fg-1);background:var(--white);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--parts-blue);display:inline-block}
.section{padding:var(--sp-9) 0}
.section--tight{padding:var(--sp-8) 0}
.muted{color:var(--fg-3)}
h1,h2,h3{margin:0}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 15px/1 var(--font-body);
  border-radius:var(--r-md);padding:14px 22px;border:1px solid transparent;cursor:pointer;transition:all .16s ease;white-space:nowrap}
.btn svg{width:18px;height:18px;stroke-width:2}
.btn--primary{background:var(--parts-blue);color:#fff;box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:var(--parts-blue-700);transform:translateY(-1px)}
.btn--primary:active{transform:scale(.985)}
.btn--secondary{background:#fff;color:var(--fg-1);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--carbon-black);transform:translateY(-1px)}
.btn--dark{background:var(--carbon-black);color:#fff}
.btn--dark:hover{background:#000;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--parts-blue);padding-left:0;padding-right:0}
.btn--lg{padding:16px 26px;font-size:16px}
.btn--block{width:100%}
.btn--msg{background:#fff;color:var(--fg-1);border-color:var(--border-strong)}
.btn--msg:hover{border-color:var(--carbon-black)}
.msg-ic{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.msg-ic svg{width:15px;height:15px}
.msg-ic--brand img{width:15px;height:15px;display:block;object-fit:contain}
.btn--lg .msg-ic{width:28px;height:28px;border-radius:8px}
.btn--lg .msg-ic--brand img{width:17px;height:17px}

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.hdr__in{display:flex;align-items:center;gap:24px;height:68px}
.hdr__logo{display:flex;align-items:center}
.hdr__logo img{height:30px;display:block}
.hdr__nav{display:flex;gap:24px;margin-left:8px}
.hdr__nav a{font-size:14px;font-weight:500;color:var(--fg-2)}
.hdr__nav a:hover{color:var(--carbon-black)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.langsw{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden}
.langsw button{font-family:var(--font-body);font-size:13px;font-weight:600;padding:7px 11px;background:#fff;border:0;cursor:pointer;color:var(--fg-3)}
.langsw button.on{background:var(--carbon-black);color:#fff}

/* ---------- HERO ---------- */
.hero{padding:var(--sp-8) 0 var(--sp-9);background:linear-gradient(180deg,#fff 0%, var(--workshop-gray) 100%)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero__h{font:var(--text-display);letter-spacing:var(--tracking-tight);color:var(--fg-1);margin:16px 0 0}
.hero__sub{font:var(--text-lead);color:var(--fg-2);margin:18px 0 0;max-width:540px}
.hero__cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero__tag{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:500;color:var(--fg-2)}
.hero__tag svg{width:16px;height:16px;color:var(--parts-blue)}

/* photo placeholder tiles (operator drops real photos here) */
.photo{position:relative;border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;
  background:
    radial-gradient(120% 120% at 70% 10%, rgba(18,100,232,.05), transparent 60%),
    repeating-linear-gradient(135deg,#EDEFF2,#EDEFF2 14px,#E7EAEE 14px,#E7EAEE 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8a909a}
.photo svg{width:34px;height:34px;stroke-width:1.6}
.photo__cap{font-size:13px;font-weight:500;color:#7b828d}
/* real-image variant */
.photo--img{background:#0d0d0f}
.photo--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo__imgcap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(0deg, rgba(10,10,12,.78) 0%, rgba(10,10,12,0) 100%);z-index:1}
.photo__tag{position:absolute;top:12px;left:12px;background:#fff;border:1px solid var(--border);color:var(--fg-2);
  font-size:11px;font-weight:600;padding:4px 9px;border-radius:var(--r-pill);display:inline-flex;gap:6px;align-items:center;z-index:2}
.photo__tag .dot{width:6px;height:6px;border-radius:50%;background:var(--parts-blue)}
.hero__media{display:grid;grid-template-rows:1fr auto;gap:14px}
.hero__main{height:330px}
.hero__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hero__strip .photo{height:84px}
.hero__strip .photo svg{width:22px;height:22px}
.hero__strip .photo__cap{font-size:12px}

/* ---------- LEAD ---------- */
.lead__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.leadcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;transition:box-shadow .16s ease,transform .16s ease}
.leadcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.leadcard__ic{width:42px;height:42px;border-radius:10px;background:var(--parts-blue-50);color:var(--parts-blue);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.leadcard__ic svg{width:22px;height:22px}
.leadcard h3{font:var(--text-h3);font-size:18px;margin-bottom:4px}
.leadcard p{font-size:14px;color:var(--fg-3);margin:0}

/* section heads */
.shead{max-width:680px}
.shead h2{font:var(--text-h2);letter-spacing:var(--tracking-tight);margin:12px 0 0}
.shead p{font:var(--text-lead);font-size:17px;color:var(--fg-2);margin:14px 0 0}

/* ---------- PROCESS ---------- */
.proc{background:var(--workshop-gray)}
.proc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.proccard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative}
.proccard__num{font:800 14px/1 var(--font-display);color:var(--parts-blue);background:var(--parts-blue-50);
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.proccard__ic{width:24px;height:24px;color:var(--carbon-black);margin-bottom:12px}
.proccard h3{font:var(--text-h3);font-size:17px;margin-bottom:6px}
.proccard p{font-size:14px;color:var(--fg-2);margin:0;line-height:1.5}

/* ---------- TRUST ---------- */
.trust__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.trustbadge{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-pill);padding:12px 18px;font-size:14px;font-weight:500}
.trustbadge svg{width:18px;height:18px;color:var(--parts-blue);flex:0 0 auto}

/* ---------- CATEGORIES ---------- */
.cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.catcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:box-shadow .16s,transform .16s}
.catcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.catcard__media{height:128px;position:relative;background:#0d0d0f}
.catcard__img{width:100%;height:100%;object-fit:cover;display:block}
.catcard__body{padding:14px 16px 18px}
.catcard h3{font:var(--text-h3);font-size:17px;margin-bottom:3px}
.catcard p{font-size:13px;color:var(--fg-3);margin:0 0 12px}
.catcard__link{display:inline-flex;align-items:center;gap:6px;color:var(--parts-blue);font-size:13px;font-weight:600}
.catcard__link svg{width:15px;height:15px}
.flag{position:absolute;top:12px;left:12px;background:var(--parts-blue);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);z-index:1}

/* ---------- FOOTER ---------- */
.ft{background:var(--deep-graphite);color:#fff;padding:var(--sp-8) 0 var(--sp-6)}
.ft__simple{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ft__brandline{display:flex;align-items:flex-start;gap:14px;max-width:680px}
.ft__logo img{height:40px;background:#fff;padding:8px 10px;border-radius:var(--r-md)}
.ft__disc{font-size:12px;color:#71717A;max-width:520px;line-height:1.5}
.ft__rights{font-size:12px;color:#71717A;margin-top:10px}
.ft__mini-socials{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ft__mini-socials a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid var(--border-dark);border-radius:var(--r-md);color:#E5E7EB;font-size:13px;font-weight:700;background:rgba(255,255,255,.04)}
.ft__mini-socials a:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08)}

/* ---------- STATS BAR ---------- */
.stats{background:var(--carbon-black);color:#fff}
.stats__row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px 0}
.stat{text-align:center;border-left:1px solid var(--border-dark)}
.stat:first-child{border-left:0}
.stat__n{font:800 38px/1 var(--font-display);color:#fff;letter-spacing:var(--tracking-tight)}
.stat__n::first-letter{color:var(--parts-blue)}
.stat__l{font-size:13px;color:var(--fg-on-dark-2);margin-top:8px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- PARTS TYPES ---------- */
.types__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.typecard{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.typecard__k{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--carbon-black);color:#fff;
  font:800 18px/40px var(--font-display);text-align:center}
.typecard h3{font:var(--text-h3);font-size:16px;margin-bottom:3px}
.typecard p{font-size:13px;color:var(--fg-3);margin:0;line-height:1.45}

/* ---------- BRANDS ---------- */
.brands{background:var(--workshop-gray);padding:var(--sp-8) 0}
.brands__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.brandchip{font:700 16px/1 var(--font-display);letter-spacing:.01em;color:var(--fg-1);background:#fff;
  border:1px solid var(--border);border-radius:var(--r-md);padding:13px 20px}
.brands__disc{font-size:13px;color:var(--fg-3);margin-top:18px}

/* ---------- LOGISTICS ---------- */
.logi__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.logi__photo{height:380px;width:100%}
.logi__list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.logi__list li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--fg-1)}
.logi__list svg{width:20px;height:20px;color:var(--parts-blue);flex:0 0 auto}

/* ---------- ABOUT (team + license) ---------- */
.about__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px;margin-top:24px;align-items:start}
.about__card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.about__photo{height:280px;width:100%;border-radius:0;border:0}
.about__license{display:grid;gap:16px}
.about__licensecopy{padding:0 2px}
.about__licenseimg{width:100%;height:auto;display:block;object-fit:contain;border-radius:var(--r-md);border:1px solid var(--border);background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.10)}
.about__badge{display:inline-flex;align-items:center;gap:8px;font:var(--text-h3);font-size:17px;color:var(--fg-1)}
.about__badge svg{width:20px;height:20px;color:var(--fitment-green)}
.about__license p{font-size:14px;color:var(--fg-3);margin:8px 0 0;line-height:1.5}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .stats__row{grid-template-columns:repeat(2,1fr);gap:0}
  .stat{padding:18px 0}
  .stat:nth-child(odd){border-left:0}
  .types__grid{grid-template-columns:repeat(2,1fr)}
  .logi__grid,.about__grid{grid-template-columns:1fr;gap:28px}
  .logi__photo{height:280px}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__main{height:240px}
  .lead__grid,.proc__grid,.cats__grid{grid-template-columns:repeat(2,1fr)}
  .ft__simple{align-items:flex-start}
  .ft__mini-socials{justify-content:flex-start}
  .hdr__nav{display:none}
}
@media (max-width:560px){
  :root{--sp-9:64px;--sp-8:48px}
  .hero__h{font-size:36px}
  .shead h2{font-size:26px}
  .lead__grid,.proc__grid,.cats__grid,.types__grid,.logi__list{grid-template-columns:1fr}
  .hdr__in{gap:10px}
  .hdr__right{gap:8px}
  .hdr__right .btn{font-size:0;gap:0;padding:9px 10px}
  .hdr__right .btn .msg-ic{width:24px;height:24px}
  .hero__cta .btn{flex:1}
  .ft__brandline{flex-direction:column}
}