/* 77 Autoworks - design system
   Direction U5: data-sheet logic, modern and clean.
   Inter Tight for everything, IBM Plex Mono for part numbers and spec values. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#fdfdfc; --ink:#0f0f0e; --green:#0e5729; --green-dk:#0a3f1e;
  --soft:#78786f; --rule:#eceae4; --hair:#dedbd3; --wash:#f7f6f2;
  --wrap:1220px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Inter Tight",system-ui,-apple-system,sans-serif;
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
.m{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.15em;
   text-transform:uppercase;color:var(--soft)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- header ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:20}
.skip:focus{left:0}
header.site{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav{display:flex;align-items:center;justify-content:space-between;height:92px}
.nav .logo img{height:38px;display:block}
.nav ul{display:flex;gap:30px;align-items:center;list-style:none}
.nav a{color:var(--soft);text-decoration:none;font-size:14.5px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .cta{background:var(--green);color:#fff;padding:10px 18px;font-weight:600}
.nav .cta:hover{background:var(--green-dk);color:#fff}
.burger{display:none;background:0;border:1px solid var(--hair);padding:10px 13px;font:inherit;font-size:14px;cursor:pointer}

/* ---------- spec bar ---------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule)}
.spec > div{padding:22px 0}
.spec b{display:block;font-size:19px;font-weight:600;margin-top:6px;letter-spacing:-.01em}

/* ---------- lead ---------- */
.lead{display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:center;padding:66px 0 62px;
      border-bottom:1px solid var(--rule)}
h1{font-size:clamp(32px,4.2vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1.06}
.lead p{color:var(--soft);font-size:18px;line-height:1.6;margin-top:20px;max-width:46ch}
.lead figure img{width:100%;height:300px;object-fit:cover;display:block}
.lead figcaption{padding-top:11px}
.pagehead{padding:54px 0 34px;border-bottom:1px solid var(--rule)}
.pagehead p{color:var(--soft);font-size:18px;margin-top:14px;max-width:56ch}

/* ---------- part number lookup ---------- */
.find{display:flex;margin-top:30px;max-width:440px;border:1px solid var(--ink)}
.find input{flex:1;border:0;background:transparent;padding:14px 15px;font-family:"IBM Plex Mono",monospace;
            font-size:14px;letter-spacing:.06em;color:var(--ink)}
.find input:focus{outline:2px solid var(--green);outline-offset:-2px}
.find button{background:var(--ink);color:#fff;border:0;padding:0 22px;font-size:13.5px;font-weight:600;cursor:pointer}
.find button:hover{background:var(--green)}

/* ---------- sections ---------- */
section{padding:56px 0}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:20px}
.sh h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.sh a{color:var(--ink);font-size:14px;text-decoration:none}
.sh a:hover{color:var(--green)}

/* ---------- donor units ---------- */
.units{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;padding-top:30px;align-items:stretch}
/* Cards must be the same height whatever the car is called, so the spec rows
   line up across all three. Two lines are reserved for the name, the spec list
   takes the slack, and the parts link is pinned to the bottom. */
.unit{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;height:100%}
.unit h3{font-size:20px;font-weight:600;margin-top:7px;letter-spacing:-.015em;
         line-height:1.2;min-height:2.4em}
.unit dl{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:14px;
         align-content:start}
.unit dt{color:var(--soft)}
.unit dd{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.02em}
.unit .n{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
         font-size:14px;font-weight:600;color:var(--green)}
.unit .n.none{color:var(--soft);font-weight:400}

/* ---------- stock table ---------- */
table{width:100%;border-collapse:collapse;margin-top:22px}
th{text-align:left;padding:0 0 12px;border-bottom:1px solid var(--ink);font-size:10.5px;letter-spacing:.15em;
   text-transform:uppercase;color:var(--soft);font-weight:500}
td{padding:18px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
tbody tr:hover td{background:var(--wash)}
td.im{width:104px}
td.im img{width:88px;height:66px;object-fit:cover;display:block;background:var(--wash)}
td.k{width:170px;font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:500}
td.d{font-size:16px;font-weight:500}
td.d small{display:block;color:var(--soft);font-size:13.5px;font-weight:400;margin-top:4px}
td.c{width:110px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
     text-transform:uppercase;color:var(--soft)}
td.p{width:120px;text-align:right;font-size:19px;font-weight:600}
td.p a{display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--green);text-decoration:none;white-space:nowrap}
td.p a:hover{text-decoration:underline}

/* ---------- filters ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:22px 0 4px}
.filters input,.filters select{border:1px solid var(--hair);padding:11px 13px;font:inherit;font-size:14.5px;
                               background:var(--paper);color:var(--ink)}
.filters input{min-width:260px;font-family:"IBM Plex Mono",monospace;font-size:13.5px;letter-spacing:.05em}
.filters input:focus,.filters select:focus{outline:2px solid var(--green);outline-offset:-1px;border-color:var(--ink)}
.count{margin-left:auto;color:var(--soft);font-size:14px}
.empty{padding:56px 0;text-align:center;color:var(--soft)}
.empty b{display:block;color:var(--ink);font-size:18px;font-weight:600;margin-bottom:6px}

/* ---------- generic prose ---------- */
.prose{max-width:66ch;padding:44px 0 10px}
.prose h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--soft);margin-bottom:14px}
.prose strong{color:var(--ink);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:12px}
.card{border-top:2px solid var(--ink);padding-top:16px}
.card h3{font-size:17px;font-weight:600}
.card p{color:var(--soft);font-size:14.5px;margin-top:8px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:44px 0 20px}
.clist{list-style:none}
.clist li{padding:18px 0;border-bottom:1px solid var(--rule)}
.clist li:first-child{border-top:1px solid var(--ink)}
.clist .lb{display:block;margin-bottom:4px}
.clist a,.clist span.v{font-size:18px;font-weight:500;text-decoration:none}
.clist a:hover{color:var(--green)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule);padding:44px 0 80px;display:grid;
            grid-template-columns:2fr 1fr 1fr;gap:44px}
footer.site img{height:38px}
footer.site p{color:var(--soft);font-size:14.5px;line-height:1.6;margin-top:15px;max-width:32ch}
footer.site h4{font-size:13.5px;font-weight:600;margin-bottom:12px}
footer.site a{display:block;color:var(--soft);text-decoration:none;padding:5px 0;font-size:14.5px}
footer.site a:hover{color:var(--green)}
/* no boxes. The marks sit on their own, with a padded hit area so they are
   still a comfortable tap target on a phone. */
.soc{display:flex;gap:8px;margin-top:10px;margin-left:-10px}
/* footer.site a already sets display:block and padding:5px 0 and out-ranks a
   bare .soc a, which squashed the tap target to 24x34. Qualify it. */
footer.site .soc a,.soc a{display:grid;place-items:center;padding:10px;border:0;width:44px;height:44px}
.soc a:hover .ico{background:var(--green)}
/* one icon family, self hosted, coloured by CSS rather than by the file */
.ico{width:24px;height:24px;background:var(--ink);display:block;
     -webkit-mask-position:center;mask-position:center;
     -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
     -webkit-mask-size:contain;mask-size:contain}
.ico-ig{-webkit-mask-image:url(../img/brand-instagram.svg);mask-image:url(../img/brand-instagram.svg)}
.ico-fb{-webkit-mask-image:url(../img/brand-facebook.svg);mask-image:url(../img/brand-facebook.svg)}
.ico-wa{-webkit-mask-image:url(../img/brand-whatsapp.svg);mask-image:url(../img/brand-whatsapp.svg)}
.legal{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:18px;color:var(--soft);font-size:13px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .lead{grid-template-columns:1fr;gap:34px;padding:40px 0}
  .lead figure img{height:230px}
  .spec{grid-template-columns:1fr 1fr}
  .spec > div{padding:16px 0}
  .units,.cards,.contact,footer.site{grid-template-columns:1fr}
  .units{gap:34px}
  .nav{height:76px}
  .nav ul{position:absolute;left:0;right:0;top:76px;background:var(--paper);border-bottom:1px solid var(--rule);
          flex-direction:column;align-items:stretch;gap:0;padding:8px 30px 18px;display:none;z-index:10}
  .nav ul.open{display:flex}
  .nav li a{display:block;padding:12px 0;font-size:16px}
  .nav .cta{text-align:center;margin-top:8px}
  .burger{display:block}
  header.site{position:relative}
  td.im{display:none}
  td.k{width:auto;display:block;padding-bottom:0;border:0}
  td.d{display:block;padding-top:4px;border:0}
  td.c{display:none}
  td.p{display:block;text-align:left;padding-top:8px;width:auto}
  tbody tr{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
  tbody tr:hover td{background:transparent}
  thead{display:none}
  .filters input{min-width:0;width:100%}
  .count{margin-left:0}
}

/* ---------- clickable rows ---------- */
tbody tr[data-href]{cursor:pointer}
a.rowlink{color:inherit;text-decoration:none}
a.rowlink:hover{color:var(--green);text-decoration:underline}
td.p .view{display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--green);white-space:nowrap}
tbody tr[data-href]:hover td.p .view{text-decoration:underline}

/* ---------- donor unit links ---------- */
.unit h3 a{text-decoration:none}
.unit h3 a:hover{color:var(--green)}
a.n{text-decoration:none}
a.n:hover{text-decoration:underline}

/* ---------- active vehicle chip ---------- */
#chip{margin:14px 0 0;padding:11px 14px;background:var(--wash);border-left:3px solid var(--green);font-size:14.5px}
#chip button{margin-left:10px;border:1px solid var(--hair);background:var(--paper);font:inherit;font-size:13px;
             padding:5px 11px;cursor:pointer}
#chip button:hover{border-color:var(--ink)}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:22px 0 0;font-size:13.5px;color:var(--soft)}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{padding:0 6px;color:var(--hair)}

/* ---------- part detail ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:26px 0 20px;align-items:start}
.gal img#galmain{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--wash);display:block}
.gal.noimg{aspect-ratio:4/3;background:var(--wash);display:grid;place-items:center}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{padding:0;border:1px solid var(--hair);background:0;cursor:pointer;width:84px;height:64px;overflow:hidden}
.thumbs button.on{border-color:var(--ink);outline:1px solid var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.detail .info h1{font-size:clamp(24px,2.8vw,34px);line-height:1.14;letter-spacing:-.02em}
.detail .price{font-size:34px;font-weight:600;margin-top:16px;letter-spacing:-.02em}
.specs{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:11px 20px;font-size:15px;
       border-top:1px solid var(--ink);padding-top:18px}
.specs dt{color:var(--soft)}
.specs dd{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:13px}
.acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--green);color:#fff;padding:14px 22px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--green-dk);color:#fff}
.btn.ghost{background:0;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.detail .note{color:var(--soft);font-size:14.5px;margin-top:20px;max-width:46ch}
@media(max-width:960px){
  .detail{grid-template-columns:1fr;gap:28px;padding-top:18px}
  .acts .btn{flex:1;text-align:center}
}

/* ---------- shop-all buttons ---------- */
/* scoped so the part page buy buttons keep their size */
.lead-cta .btn,.more-cta .btn{padding:11px 18px;font-size:14.5px}
.lead-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.lead-cta .or{color:var(--soft);font-size:14.5px}
.more-cta{margin-top:28px}
.more-cta .btn{display:inline-block}
@media(max-width:960px){
  .lead-cta{gap:12px}
  .lead-cta .btn,.more-cta .btn{width:100%;text-align:center}
  .lead-cta .or{display:none}
}