/* The fluid selector: picking a motorcycle, and what it takes.
   Standalone like tyres.css — two pages carry it, the rest of the site
   should not. */

.fluid-search{display:flex;gap:10px;margin:20px 0}
.fluid-search input{flex:1 1 auto;min-width:0;border:1px solid #bbb;border-radius:5px;padding:10px 12px}

.fluid-brands{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.fluid-brands__item{display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd;border-radius:999px;padding:6px 14px;background:#fff;font-size:14px;text-decoration:none;color:inherit}
.fluid-brands__item span{color:#777;font-size:12px}
.fluid-brands__item.is-active{border-color:#111;background:#111;color:#fff}
.fluid-brands__item.is-active span{color:#ddd}

.fluid-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0 0 32px}
.fluid-models a{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid #e3e3e3;border-radius:8px;padding:12px 14px;background:#fff;text-decoration:none;color:inherit}
.fluid-models a:hover{border-color:#111}
.fluid-models__year{color:#777;font-size:13px;white-space:nowrap}

.fluid-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.fluid-head__links{display:flex;flex-wrap:wrap;gap:8px}

.fluid-section{border-top:1px solid #e3e3e3;padding-top:20px;margin-bottom:28px}
.fluid-section h2{font-size:22px;font-weight:700;margin-bottom:6px}
.fluid-capacity{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.fluid-capacity strong{background:#f4f4f4;border-radius:5px;padding:4px 10px;font-size:14px}
.fluid-grade{font-size:15px;font-weight:700;margin:16px 0 8px;color:#444}

.fluid-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fluid-line{display:flex;flex-direction:column;justify-content:space-between;gap:12px;border:1px solid #e3e3e3;border-radius:8px;padding:14px;background:#fff}
.fluid-line__link{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit}
.fluid-line__link img{flex:0 0 auto;object-fit:contain;background:#fafafa;border-radius:5px}
.fluid-line__noimage{flex:0 0 72px;height:72px;display:flex;align-items:center;justify-content:center;background:#fafafa;border-radius:5px;color:#bbb}
.fluid-line__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.fluid-line__text strong{font-size:15px;line-height:1.3}
.fluid-line__text small{color:#777;font-size:13px}
.fluid-line__buy{display:flex;flex-direction:column;gap:6px}
.fluid-line__price{font-size:18px}
.fluid-line__quantity{color:#b8860b;font-weight:600}
.fluid-more{margin-top:12px}

/* Where a selector sits among the exploded views. */
.drawing-card--selector{background:#fffdf3;border-color:#e8d9a0}
.drawing-card__noimage--selector{color:#b8860b}

/* The two selectors on the home page. */
.selector-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.selector-card{border:1px solid #e3e3e3;border-radius:10px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.selector-card--fluids{background:#fffdf3;border-color:#e8d9a0}
.selector-card p{margin:0;color:#555}

@media(max-width:1000px){
  .fluid-models{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fluid-lines{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .fluid-models{grid-template-columns:1fr}
  .fluid-lines{grid-template-columns:1fr}
  .selector-strip{grid-template-columns:1fr}
}