/* 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. */

/* Step one: four boxes over one table, like the dealer portal's. */
.fluid-heading{margin-bottom:16px}
.fluid-heading h1{margin:0 0 6px}
.fluid-heading h1 small{font-size:.55em;font-weight:600;color:var(--color-muted,#9e9e9e);white-space:nowrap}
.fluid-heading p{margin:0;color:var(--color-muted,#9e9e9e)}

.fluid-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;margin:20px 0 24px}
.fluid-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0}
.fluid-filters label>span{font-weight:600}
.fluid-filters select,.fluid-filters input{width:100%;min-width:0;border:1px solid #bbb;background:#fff;border-radius:5px;padding:10px 8px;font:inherit}
.fluid-filters__actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}

.fluid-models__table{width:100%;border-collapse:collapse;background:#fff;margin-bottom:32px}
.fluid-models__table th,.fluid-models__table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e3e3e3;vertical-align:middle}
.fluid-models__table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:#777;white-space:nowrap}
.fluid-models__table tbody tr:hover{background:#fafafa}
.fluid-models__thumb{width:76px}.fluid-models__thumb img{display:block;width:64px;height:44px;object-fit:contain}.fluid-models__logo{object-fit:contain;opacity:.75}.fluid-models__years{white-space:nowrap;font-variant-numeric:tabular-nums}
.fluid-models__go{text-align:right;white-space:nowrap}.fluid-models__go a{font-weight:600;text-decoration:none}.fluid-models__go a:hover{text-decoration:underline}.fluid-models__table tbody tr:hover .fluid-models__go a{text-decoration:underline}

.fluid-head{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.fluid-head__intro{flex:0 1 auto}
.fluid-head__kicker{margin:0 0 4px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.fluid-head__kicker a{text-decoration:none}.fluid-head__kicker a:hover{text-decoration:underline}.fluid-head__intro h1{margin:0 0 6px}
.fluid-head__intro p{margin:0}
.fluid-vehicle{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end;text-align:right;margin:0}
.fluid-vehicle__name{flex:1;min-width:240px}
.fluid-vehicle__name h2{margin:0 0 6px;font-size:20px;font-weight:700}
.fluid-links{margin:0;font-size:14px}
@media(max-width:700px){
  .fluid-vehicle{justify-content:flex-start;text-align:left}
  .fluid-vehicle__name{min-width:0}
}

.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-grade{font-size:15px;font-weight:700;margin:16px 0 8px;color:#444}

.fluid-lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.fluid-line{display:flex;gap:14px;border:1px solid #e3e3e3;border-radius:8px;padding:14px;background:#fff}
.fluid-line__image{flex:0 0 96px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.fluid-line__image img{width:96px;height:96px;object-fit:contain;background:#fafafa;border-radius:5px}
.fluid-line__noimage{display:flex;width:96px;height:96px;align-items:center;justify-content:center;background:#fafafa;border-radius:5px;color:#bbb}
.fluid-line__body{flex:1;min-width:0;display:grid;gap:6px;align-content:start}
.fluid-line__brand{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;color:#777;letter-spacing:.02em}
.fluid-line__title{margin:0;font-size:15px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}

/* The pack sizes of one product, side by side. Pressed = the panel below. */
.fluid-line__packs{display:flex;flex-wrap:wrap;gap:6px}
.fluid-pack{border:1px solid #ddd;background:#fff;color:inherit;border-radius:999px;padding:4px 11px;font:inherit;font-size:13px;cursor:pointer}
.fluid-pack:hover{border-color:#111}
.fluid-pack[aria-pressed=true]{background:#111;border-color:#111;color:#fff}

.fluid-line__offer{display:grid;gap:6px}
.fluid-line__buy{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fluid-line__price{font-size:18px}
.fluid-line__quantity{color:#b8860b;font-weight:600;flex:1 0 100%}
.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 p{margin:0;color:#555;flex:1 0 auto}
.selector-card h3{margin:0;font-size:1.35rem;line-height:1.2}
/* The icon is what the eye lands on between the brand logos above and the
   model photos below; the cards are otherwise two blocks of text. */
.selector-card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:#f6f6f6;color:var(--color-primary,#ee1b24)}

/* What gets replaced at the same time: the oil filter under the engine oil,
   the pads under the brake fluid, the fork parts under the fork oil.

   A table, not cards. These are an aside beside the answer, and a second card
   grid would compete with the fluids above it for the same eye — the rows are
   quieter than the grid and still carry everything an order needs. */
.fluid-cross{margin-top:18px}
.fluid-cross__title{margin:0 0 6px;font-size:.95rem;font-weight:600;color:#555}
.fluid-cross__table{overflow-x:auto}
.fluid-cross table{width:100%;border-collapse:collapse}
.fluid-cross td{border-top:1px solid #eee;padding:8px 10px 8px 0;vertical-align:middle}
.fluid-cross tr:first-child td{border-top:0}
.fluid-cross__thumb{width:48px}
.fluid-cross__thumb img{display:block;width:48px;height:48px;object-fit:contain;background:#fafafa;border-radius:4px}
.fluid-cross__noimage{display:flex;width:48px;height:48px;align-items:center;justify-content:center;background:#fafafa;border-radius:4px;color:#bbb}
/* min-width:0, or a grid track refuses to shrink below its longest word and
   a supplier title like "OIL FILTER HIFLO HF184 Scooter Alternative: 3123577"
   pushes itself off the side of a phone. */
.fluid-cross__what{min-width:0}
.fluid-cross__what a{font-weight:600;overflow-wrap:anywhere}
.fluid-cross__what small{display:block;color:#777;font-size:12px}
.fluid-cross__when{white-space:nowrap}
.fluid-cross__buy{text-align:right;white-space:nowrap}
.fluid-cross__buy strong{display:block;margin-bottom:4px}
.fluid-cross__links{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}


/* The catalogue headings at the foot of the selector. */
.fluid-categories h2{margin:0 0 12px}
.fluid-categories__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fluid-categories__list li{margin:0}
.fluid-categories__list a{display:inline-block;padding:7px 12px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;text-decoration:none;color:#333}
.fluid-categories__list a:hover{border-color:#bbb}
/* A link about the visitor's own motorcycle, ahead of the catalogue ones. */
.fluid-categories__own{border-color:#e8d9a0 !important;background:#fffdf3 !important}
.fluid-categories__count{margin-left:6px;color:#777;font-size:.85em}

/* The motorcycle's own photo beside the heading — the page is about one bike
   and the picture says so faster than the words do. Outermost in the flex
   row, so on a narrow screen it wraps under the title instead of squeezing
   it. */
.fluid-head__photo{flex:0 0 auto;max-width:200px}
.fluid-head__photo img{display:block;width:100%;height:auto;border-radius:8px}

/* The generic paragraph at the foot: deliberately quiet — it is the same
   sentence on every model page and it is not what anybody came for. */
.fluid-seo{margin:28px 0 0;color:#666;font-size:.92rem;max-width:70ch}

/* The exploded views and the model's parts list.

   In the block that names the motorcycle, where the space beside the photo
   was empty, and again in a bar that rises from the foot once that block has
   scrolled away — the pattern the product page's buy bar already uses, with
   the same numbers, because it is the same idea: the one thing the page
   leads to should not be somewhere you have already scrolled past. */
.fluid-actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:16px}
.fluid-actions .btn{display:inline-flex;align-items:center;gap:8px}
/* The second action is a link and not a second button: two buttons side by
   side ask which one is the point, and the drawings are the point. It is NOT
   btn--outline-light, which is white on white here — that variant is for a
   dark band. */
.fluid-actions__second{display:inline-flex;align-items:center;gap:8px;
  padding:10px 2px;color:#333;font-weight:600;text-decoration:none;border-bottom:1px solid #ccc}
.fluid-actions__second:hover{border-bottom-color:#333}
.fluid-actions__second:focus-visible{outline:2px solid var(--color-primary-ink,#c4141c);outline-offset:3px;border-radius:2px}

.fluid-head__lead{margin:0;color:var(--color-muted,#9e9e9e)}

/* What gets replaced at the same time: the oil filter under the engine oil,
   the pads under the brake fluid, the fork parts under the fork oil.

   A table, not cards. These are an aside beside the answer, and a second card
   grid would compete with the fluids above it for the same eye — the rows are
   quieter than the grid and still carry everything an order needs. */
.fluid-cross{margin-top:18px}
.fluid-cross__title{margin:0 0 6px;font-size:.95rem;font-weight:600;color:#555}
.fluid-cross__table{overflow-x:auto}
.fluid-cross table{width:100%;border-collapse:collapse}
.fluid-cross td{border-top:1px solid #eee;padding:8px 10px 8px 0;vertical-align:middle}
.fluid-cross tr:first-child td{border-top:0}
.fluid-cross__thumb{width:48px}
.fluid-cross__thumb img{display:block;width:48px;height:48px;object-fit:contain;background:#fafafa;border-radius:4px}
.fluid-cross__noimage{display:flex;width:48px;height:48px;align-items:center;justify-content:center;background:#fafafa;border-radius:4px;color:#bbb}
/* min-width:0, or a grid track refuses to shrink below its longest word and
   a supplier title like "OIL FILTER HIFLO HF184 Scooter Alternative: 3123577"
   pushes itself off the side of a phone. */
.fluid-cross__what{min-width:0}
.fluid-cross__what a{font-weight:600;overflow-wrap:anywhere}
.fluid-cross__what small{display:block;color:#777;font-size:12px}
.fluid-cross__when{white-space:nowrap}
.fluid-cross__buy{text-align:right;white-space:nowrap}
.fluid-cross__buy strong{display:block;margin-bottom:4px}
.fluid-cross__links{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}


/* The catalogue headings at the foot of the selector. */
.fluid-categories h2{margin:0 0 12px}
.fluid-categories__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fluid-categories__list li{margin:0}
.fluid-categories__list a{display:inline-block;padding:7px 12px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;text-decoration:none;color:#333}
.fluid-categories__list a:hover{border-color:#bbb}
/* A link about the visitor's own motorcycle, ahead of the catalogue ones. */
.fluid-categories__own{border-color:#e8d9a0 !important;background:#fffdf3 !important}
.fluid-categories__count{margin-left:6px;color:#777;font-size:.85em}

/* The motorcycle's own photo beside the heading — the page is about one bike
   and the picture says so faster than the words do. Outermost in the flex
   row, so on a narrow screen it wraps under the title instead of squeezing
   it. */
.fluid-head__photo{flex:0 0 auto;max-width:200px}
.fluid-head__photo img{display:block;width:100%;height:auto;border-radius:8px}

/* The generic paragraph at the foot: deliberately quiet — it is the same
   sentence on every model page and it is not what anybody came for. */
.fluid-seo{margin:28px 0 0;color:#666;font-size:.92rem;max-width:70ch}

/* What gets replaced at the same time: the oil filter under the engine oil,
   the pads under the brake fluid, the fork parts under the fork oil.

   A table, not cards. These are an aside beside the answer, and a second card
   grid would compete with the fluids above it for the same eye — the rows are
   quieter than the grid and still carry everything an order needs. */
.fluid-cross{margin-top:18px}
.fluid-cross__title{margin:0 0 6px;font-size:.95rem;font-weight:600;color:#555}
.fluid-cross__table{overflow-x:auto}
.fluid-cross table{width:100%;border-collapse:collapse}
.fluid-cross td{border-top:1px solid #eee;padding:8px 10px 8px 0;vertical-align:middle}
.fluid-cross tr:first-child td{border-top:0}
.fluid-cross__thumb{width:48px}
.fluid-cross__thumb img{display:block;width:48px;height:48px;object-fit:contain;background:#fafafa;border-radius:4px}
.fluid-cross__noimage{display:flex;width:48px;height:48px;align-items:center;justify-content:center;background:#fafafa;border-radius:4px;color:#bbb}
/* min-width:0, or a grid track refuses to shrink below its longest word and
   a supplier title like "OIL FILTER HIFLO HF184 Scooter Alternative: 3123577"
   pushes itself off the side of a phone. */
.fluid-cross__what{min-width:0}
.fluid-cross__what a{font-weight:600;overflow-wrap:anywhere}
.fluid-cross__what small{display:block;color:#777;font-size:12px}
.fluid-cross__when{white-space:nowrap}
.fluid-cross__buy{text-align:right;white-space:nowrap}
.fluid-cross__buy strong{display:block;margin-bottom:4px}
.fluid-cross__links{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}


/* The catalogue headings at the foot of the selector. */
.fluid-categories h2{margin:0 0 12px}
.fluid-categories__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fluid-categories__list li{margin:0}
.fluid-categories__list a{display:inline-block;padding:7px 12px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;text-decoration:none;color:#333}
.fluid-categories__list a:hover{border-color:#bbb}
/* A link about the visitor's own motorcycle, ahead of the catalogue ones. */
.fluid-categories__own{border-color:#e8d9a0 !important;background:#fffdf3 !important}
.fluid-categories__count{margin-left:6px;color:#777;font-size:.85em}

/* The motorcycle's own photo beside the heading — the page is about one bike
   and the picture says so faster than the words do. Outermost in the flex
   row, so on a narrow screen it wraps under the title instead of squeezing
   it. */
.fluid-head__photo{flex:0 0 auto;max-width:200px}
.fluid-head__photo img{display:block;width:100%;height:auto;border-radius:8px}

/* The generic paragraph at the foot: deliberately quiet — it is the same
   sentence on every model page and it is not what anybody came for. */
.fluid-seo{margin:28px 0 0;color:#666;font-size:.92rem;max-width:70ch}


@media(max-width:1000px){
  .fluid-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  /* Two full-width rows rather than one squeezed line. */
  .fluid-actions{gap:8px}
  .fluid-actions .btn{flex:1 1 100%;justify-content:center}
  .fluid-actions__second{flex:1 1 100%;justify-content:center;border-bottom:0}
  /* The dispatch window moves under the name rather than being dropped: on a
     phone it is the thing the reader is weighing, not a detail. */
  .fluid-cross td{padding:8px 6px 8px 0}
  .fluid-cross tr{display:grid;grid-template-columns:48px 1fr;grid-template-areas:"thumb what" "thumb when" "buy buy";
    align-items:center;column-gap:10px;row-gap:4px;border-top:1px solid #eee;padding:8px 0}
  .fluid-cross tr:first-child{border-top:0}
  .fluid-cross td{border-top:0;padding:0}
  .fluid-cross__thumb{grid-area:thumb}
  .fluid-cross__what{grid-area:what}
  .fluid-cross__when{grid-area:when;white-space:normal}
  /* Under the name, not beside it: at 390px a third column squeezed the
     price and the button off the edge of the screen. */
  .fluid-cross__buy{grid-area:buy;display:flex;align-items:center;gap:10px;text-align:left}
  .fluid-cross__buy strong{margin:0}
  .fluid-head__photo{max-width:140px}
  .fluid-filters{grid-template-columns:1fr}
  .fluid-lines{grid-template-columns:1fr}
  .selector-strip{grid-template-columns:1fr}
  .fluid-line__image{flex-basis:72px}
  .fluid-line__image img,.fluid-line__noimage{width:72px;height:72px}
}