.sta-fitment-finder{
  --sta-bg:#12181f;
  --sta-panel:#161e27;
  --sta-panel-hover:#192430;
  --sta-border:#2a3541;
  --sta-text:#f4f6f8;
  --sta-muted:#97a4b2;
  --sta-blue:#249cff;
  --sta-blue-soft:#5bb8ff;

  background:var(--sta-bg);
  color:var(--sta-text);
  border-top:1px solid var(--sta-border);
  border-bottom:1px solid var(--sta-border);
  padding:34px 0 8px;
  scroll-margin-top:90px;
}

.sta-fitment-heading{margin-bottom:24px}

.sta-fitment-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--sta-blue-soft);
  font-size:12px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:12px
}

.sta-fitment-kicker:before{
  content:"";
  width:42px;
  height:2px;
  background:var(--sta-blue)
}

.sta-fitment-title-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px
}

.sta-fitment-heading h2{
  margin:0 0 7px;
  color:var(--sta-text);
  font-size:clamp(34px,5vw,58px);
  line-height:.96;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-1.5px
}

.sta-fitment-heading p{
  margin:0;
  color:var(--sta-muted);
  font-size:14px
}

.sta-selected-make{
  min-width:170px;
  border:1px solid var(--sta-border);
  padding:10px 13px;
  text-align:right;
  background:rgba(255,255,255,.015)
}

.sta-selected-make span{
  display:block;
  color:var(--sta-muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:2px
}

.sta-selected-make strong{
  color:var(--sta-blue-soft);
  font-size:15px;
  text-transform:uppercase
}

.sta-fitment-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--sta-border);
  border:1px solid var(--sta-border)
}

.sta-fitment-fields label{
  display:block;
  background:var(--sta-panel);
  padding:14px 16px 15px
}

.sta-fitment-fields label span{
  display:block;
  margin-bottom:7px;
  color:#c2ccd6;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px
}

.sta-fitment-fields select{
  width:100%;
  min-height:43px;
  margin:0;
  background:#0f151c;
  color:var(--sta-text);
  border:1px solid #344251;
  border-radius:0;
  padding:0 11px;
  font-size:14px;
  font-weight:700
}

.sta-fitment-fields select:focus{
  outline:1px solid var(--sta-blue);
  border-color:var(--sta-blue)
}

.sta-fitment-fields select:disabled{opacity:.42}

.sta-fitment-fields select option{
  background:#111820;
  color:#fff
}

.sta-fitment-search{
  grid-column:1/-1;
  min-height:52px;
  border:0;
  border-top:1px solid var(--sta-border);
  border-radius:0;
  background:var(--sta-blue);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.8px;
  transition:filter .18s ease
}

.sta-fitment-search:hover:not(:disabled){filter:brightness(1.08)}
.sta-fitment-search:disabled{opacity:.38;cursor:not-allowed}

.sta-fitment-results{margin-top:26px}

.sta-fitment-status{
  border:1px solid var(--sta-border);
  background:var(--sta-panel);
  padding:18px;
  color:var(--sta-muted)
}

.sta-fitment-result-head{
  padding:0 0 12px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px
}

.sta-fitment-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--sta-border);
  border:1px solid var(--sta-border)
}

.sta-fitment-card{
  background:var(--sta-panel);
  overflow:hidden;
  transition:background .18s ease
}

.sta-fitment-card:hover{background:var(--sta-panel-hover)}

.sta-fitment-image{
  display:block;
  aspect-ratio:4/3;
  background:#0c1117;
  overflow:hidden
}

.sta-fitment-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease
}

.sta-fitment-card:hover .sta-fitment-image img{transform:scale(1.025)}

.sta-fitment-image-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#526171;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px
}

.sta-fitment-card-body{padding:17px}

.sta-fitment-position{
  margin-bottom:7px;
  color:var(--sta-blue-soft);
  font-size:10px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:1px
}

.sta-fitment-card h3{
  margin:0 0 9px;
  font-size:18px;
  line-height:1.25
}

.sta-fitment-card h3 a{
  color:#fff;
  text-decoration:none
}

.sta-fitment-price{
  margin-bottom:12px;
  color:#fff;
  font-weight:900
}

.sta-fitment-view{
  display:inline-flex;
  gap:9px;
  align-items:center;
  color:var(--sta-blue-soft);
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px
}

@media(max-width:900px){
  .sta-fitment-fields{grid-template-columns:1fr 1fr}
  .sta-fitment-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .sta-fitment-finder{padding-top:26px}
  .sta-fitment-title-row{display:block}
  .sta-selected-make{
    margin-top:15px;
    text-align:left;
    width:max-content
  }
  .sta-fitment-fields,.sta-fitment-grid{grid-template-columns:1fr}
  .sta-fitment-heading h2{font-size:38px}
}

/* ============================================================
   V0.4 — WooCommerce product-page fitment compatibility
   ============================================================ */

.sta-product-fitment-summary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 9px;
  margin:16px 0 2px;
  padding:11px 13px;
  border:1px solid var(--sta-border,#2a3541);
  background:#121a22;
  color:#d7e0e9;
  font-size:13px;
  line-height:1.35
}

.sta-product-fitment-summary .sta-product-fitment-check{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(36,156,255,.14);
  color:var(--sta-blue,#249cff);
  font-weight:900;
  flex:0 0 auto
}

.sta-product-fitment-summary strong{
  color:#fff
}

.sta-product-fitment-summary a{
  margin-left:auto;
  color:var(--sta-blue-soft,#5bb8ff);
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase
}

.sta-product-fitment-summary a:hover{
  text-decoration:underline
}

.sta-product-fitment-section{
  clear:both;
  width:100%;
  margin:30px 0 34px;
  scroll-margin-top:100px
}

.sta-product-fitment-details{
  border-top:1px solid var(--sta-border,#2a3541);
  border-bottom:1px solid var(--sta-border,#2a3541);
  background:#111820
}

.sta-product-fitment-details > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 34px;
  align-items:center;
  gap:18px;
  min-height:84px;
  padding:18px 20px;
  cursor:pointer;
  list-style:none;
  user-select:none
}

.sta-product-fitment-details > summary::-webkit-details-marker{
  display:none
}

.sta-product-fitment-heading-wrap{
  display:flex;
  flex-direction:column;
  gap:3px
}

.sta-product-fitment-eyebrow{
  color:var(--sta-blue-soft,#5bb8ff);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.4px
}

.sta-product-fitment-title{
  color:#f4f6f8;
  font-size:22px;
  line-height:1.1;
  font-weight:900;
  text-transform:uppercase
}

.sta-product-fitment-count{
  color:#9eabb8;
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}

.sta-product-fitment-toggle{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #334150;
  color:var(--sta-blue-soft,#5bb8ff);
  font-size:22px;
  line-height:1;
  transition:transform .18s ease,border-color .18s ease
}

.sta-product-fitment-details[open] .sta-product-fitment-toggle{
  transform:rotate(45deg);
  border-color:var(--sta-blue,#249cff)
}

.sta-product-fitment-content{
  padding:0 20px 22px
}

.sta-product-fitment-note{
  max-width:900px;
  margin:0 0 18px;
  color:#929fac;
  font-size:12px;
  line-height:1.55
}

.sta-product-fitment-groups{
  display:grid;
  gap:20px
}

.sta-product-fitment-make{
  margin:0
}

.sta-product-fitment-make h3{
  margin:0;
  padding:10px 12px;
  border-left:3px solid var(--sta-blue,#249cff);
  background:#151e27;
  color:#fff;
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase
}

.sta-product-fitment-list{
  border-left:1px solid #26323e;
  border-right:1px solid #26323e
}

.sta-product-fitment-row{
  display:grid;
  grid-template-columns:minmax(180px,1.4fr) minmax(100px,.55fr) minmax(180px,1fr);
  gap:18px;
  align-items:center;
  min-height:50px;
  padding:10px 12px;
  border-bottom:1px solid #26323e;
  background:#10171e;
  color:#cbd4dd;
  font-size:13px
}

.sta-product-fitment-row:nth-child(even){
  background:#121a22
}

.sta-product-fitment-bike{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 9px
}

.sta-product-fitment-bike strong{
  color:#fff;
  font-weight:800
}

.sta-product-fitment-generation{
  display:inline-block;
  color:#718090;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase
}

.sta-product-fitment-years{
  color:#d6dee6;
  font-variant-numeric:tabular-nums
}

.sta-product-fitment-position{
  color:#9dabba
}

@media(max-width:700px){
  .sta-product-fitment-summary{
    align-items:flex-start
  }

  .sta-product-fitment-summary a{
    width:100%;
    margin-left:29px
  }

  .sta-product-fitment-details > summary{
    grid-template-columns:minmax(0,1fr) 32px;
    gap:12px;
    min-height:76px;
    padding:16px
  }

  .sta-product-fitment-count{
    grid-column:1;
    grid-row:2;
    white-space:normal
  }

  .sta-product-fitment-toggle{
    grid-column:2;
    grid-row:1 / span 2
  }

  .sta-product-fitment-content{
    padding:0 16px 18px
  }

  .sta-product-fitment-title{
    font-size:18px
  }

  .sta-product-fitment-row{
    grid-template-columns:1fr;
    gap:5px;
    padding:12px
  }

  .sta-product-fitment-years{
    font-weight:800
  }
}