/* Shop by Image extends the existing Spec Deck without creating a second comparison engine. */
.image-shop[hidden]{display:none!important}
.image-shop{max-width:1180px;margin:34px auto 42px;padding:18px;background:rgba(8,13,9,.96);border:1px solid var(--line);box-shadow:6px 9px 22px rgba(0,0,0,.5);scroll-margin-top:100px}
.image-shop-head{text-align:center}
.image-shop-head h2{margin:4px 0 8px;color:#fff;font-family:var(--css-display-font,Impact,"Arial Black",sans-serif);font-size:clamp(2rem,4vw,3.2rem);line-height:.95;text-transform:uppercase}
.image-shop-head p{max-width:760px;margin:0 auto;color:var(--muted);font-weight:700}
.image-shop-survey{display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,2fr);gap:14px;margin:20px 0;padding:14px;background:#121b13;border:1px solid #405241}
.image-shop-survey label,.image-shop-price-title{display:block;color:#eff8eb;font-size:.78rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.image-shop-survey select,.image-shop-survey input[type=range]{width:100%}
.image-shop-survey select{margin-top:7px;padding:11px 12px;background:#081009;border:1px solid #5d715f;color:#fff;font:inherit}
.image-shop-price{min-width:0}
.image-shop-price-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.image-shop-price-value{color:var(--green);font-weight:950}
.image-shop-range{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:7px}
.image-shop-range span{display:block;margin-bottom:4px;color:#aebcad;font-size:.72rem;font-weight:800}
.image-shop-range input:disabled{opacity:.45}
.image-shop-note{grid-column:1/-1;margin:0;color:#aebcad;font-size:.82rem}
.image-shop-status{min-height:1.4em;margin:0 0 10px;color:#b8c7b7;font-size:.9rem}
.image-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));grid-auto-rows:minmax(236px,auto);gap:10px;max-height:758px;overflow:auto;padding:2px 3px 10px}
.image-shop-card{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;padding:10px;background:#111912;border:1px solid #405241;text-align:center}
.image-shop-card.is-selected{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.image-shop-card-media{display:grid;width:100%;height:145px;place-items:center}
.image-shop-card img{display:block;max-width:100%;max-height:140px;object-fit:contain}
.image-shop-card h3{margin:8px 0 3px;color:#fff;font-size:.9rem;line-height:1.18}
.image-shop-card p{margin:0;color:#b9c6b8;font-size:.82rem}
.image-shop-check{display:grid;width:34px;height:34px;margin-top:auto;place-items:center;cursor:pointer}
.image-shop-check input{width:24px;height:24px;margin:0;accent-color:#6bcf54;cursor:pointer}
.image-roster{position:relative;margin-top:18px;padding:12px 12px 46px;background:#0b110c;border:1px solid #4e6050}
.image-roster-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.image-roster-head h3{margin:0;color:#fff;font-family:var(--css-display-font,Impact,"Arial Black",sans-serif);font-size:1.4rem;letter-spacing:.03em;text-transform:uppercase}
.image-roster-count{color:var(--green);font-weight:950}
.image-roster-track{display:grid;grid-auto-flow:column;grid-auto-columns:82px;gap:7px;min-height:88px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;scrollbar-width:thin}
.image-roster-thumb,.image-roster-hole{width:82px;height:82px;border:1px solid #4c5d4e;background:#111912}
.image-roster-thumb{display:grid;place-items:center;padding:4px;cursor:grab}
.image-roster-thumb:active{cursor:grabbing}
.image-roster-thumb.is-pending{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.image-roster-thumb img{display:block;max-width:100%;max-height:72px;object-fit:contain;pointer-events:none}
.image-roster-hole{border-style:dashed;border-color:#313b32;background:transparent}
.image-roster-actions{position:absolute;right:10px;bottom:9px;display:flex;gap:7px}
.image-roster-actions button{padding:7px 11px;background:#111912;border:1px solid #586b59;color:#e8efe7;font-weight:900}
.image-roster-actions button:hover,.image-roster-actions button:focus-visible{border-color:var(--green);color:var(--green)}
.image-match-dock{position:sticky;z-index:16;bottom:8px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:stretch;gap:8px;margin-top:12px;padding:9px;background:rgba(7,12,8,.97);border:1px solid #5d715f;box-shadow:0 -5px 18px rgba(0,0,0,.35)}
.image-match-slot{position:relative;min-width:0}
.image-match-slot-main{width:100%;height:100%;min-height:56px;padding:8px 10px;background:#142017;border:1px solid #667969;color:#fff;font-weight:950;overflow-wrap:anywhere}
.image-match-slot.is-filled .image-match-slot-main{border-color:var(--green)}
.image-match-slot.is-drop-target .image-match-slot-main{outline:2px solid var(--green);outline-offset:2px}
.image-match-slot small{display:block;margin-bottom:3px;color:#9fae9e;font-size:.65rem;letter-spacing:.08em}
.image-match-slot-name{display:block}
.image-match-slot-actions{position:absolute;z-index:20;left:0;right:0;bottom:calc(100% + 5px);padding:6px;background:#081009;border:1px solid #617263;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.image-match-slot-actions[hidden]{display:none}
.image-match-slot-actions button{display:block;width:100%;padding:8px;background:transparent;border:0;color:#eef5ed;text-align:left;font-weight:900}
.image-match-slot-actions button:hover,.image-match-slot-actions button:focus-visible{background:#1b2a1d;color:var(--green)}
.image-match-vs{align-self:center;color:#aebcad;font-weight:950}
.image-match-compare{min-width:150px;padding:10px 14px;border:1px solid var(--green);background:var(--green);color:#071207;font-weight:950}
.image-match-compare:disabled{border-color:#505d51;background:#1b211c;color:#7f8d80;cursor:not-allowed}
.image-shop-back{display:block;margin:0 auto 14px;padding:9px 14px;border:1px solid var(--green);background:#101811;color:var(--green);font-weight:950}
.image-shop-back[hidden]{display:none}
@media(max-width:760px){
  .image-shop{padding:12px}
  .image-shop-survey{grid-template-columns:1fr}
  .image-shop-note{grid-column:auto}
  .image-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(214px,auto);max-height:662px}
  .image-shop-card-media{height:125px}
  .image-shop-card img{max-height:120px}
  .image-match-dock{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);bottom:5px}
  .image-match-compare{grid-column:1/-1;min-width:0}
}
@media(max-width:420px){
  .image-shop-range{grid-template-columns:1fr}
  .image-shop-grid{gap:7px}
  .image-shop-card{padding:8px}
  .image-roster-track{grid-auto-columns:74px}
  .image-roster-thumb,.image-roster-hole{width:74px;height:74px}
}

.scooter-head-image{display:grid;width:100%;height:180px;margin:8px 0 12px;place-items:center;background:rgba(7,12,8,.45);border:1px solid #3d4d3f}
.scooter-head-image img{display:block;max-width:96%;max-height:170px;object-fit:contain}
@media(max-width:620px){.scooter-head-image{height:145px}.scooter-head-image img{max-height:135px}}