/* ScopeBits product finder (index page, finder.js) */
.sbf { --sbf-red: #ff3114; --sbf-ink: #222; --sbf-muted: #666; --sbf-line: #e3e3e3; --sbf-panel: #f6f6f6;
  max-width: 1200px; margin: 6px auto 30px; text-align: center; color: var(--sbf-ink); }
.sbf *, .sbf *::before, .sbf *::after { box-sizing: border-box; }
.sbf [hidden] { display: none !important; }
.sbf .sbf-q { margin: 40px 0 18px; font-size: 1.7rem; font-weight: 700; color: var(--sbf-ink); line-height: 1.25; }
.sbf .sbf-q:first-child { margin-top: 10px; }
.sbf .sbf-n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--sbf-red); color: #fff;
  font-size: .8em; vertical-align: .12em; margin-right: 6px; }
.sbf .sbf-hint, .sbf .sbf-help { color: var(--sbf-muted); margin: -6px auto 22px; max-width: 60ch; }
.sbf .sbf-help { margin: 12px auto 0; font-size: .95rem; }
.sbf a { color: var(--sbf-red); }

/* 1: the telescopes */
.sbf .sbf-scopes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.sbf .sbf-scope { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 8px 6px 12px; border: 2px solid var(--sbf-line); border-radius: 16px;
  background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s, opacity .2s; }
.sbf .sbf-scope img { width: 100%; max-width: 160px; height: auto; aspect-ratio: 195 / 240; object-fit: contain; }
.sbf .sbf-scope b { font-size: .95rem; line-height: 1.2; margin-top: 4px; }
.sbf .sbf-scope span { font-size: .8rem; color: var(--sbf-muted); line-height: 1.2; }
.sbf .sbf-scope:hover { border-color: #ffb3a6; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.sbf .sbf-scope:focus-visible, .sbf .sbf-need:focus-visible, .sbf .sbf-prod:focus-visible { outline: 3px solid var(--sbf-red); outline-offset: 2px; }
.sbf .sbf-scope.on { border-color: var(--sbf-red); box-shadow: 0 0 0 3px rgba(255,49,20,.18); }
.sbf.picked .sbf-scope:not(.on) { opacity: .55; }
.sbf.picked .sbf-scope:not(.on):hover { opacity: 1; }

/* 2: what to do */
.sbf .sbf-needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sbf .sbf-need { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 130px; padding: 20px 14px; border: 2px solid var(--sbf-line);
  border-radius: 16px; background: #fff; cursor: pointer; font: inherit; color: inherit; text-align: center; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.sbf .sbf-need i { color: var(--sbf-red); font-size: 2.1rem; }
.sbf .sbf-need b { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.sbf .sbf-need:hover { border-color: #ffb3a6; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.sbf .sbf-need.on { border-color: var(--sbf-red); background: #fff1ee; }
.sbf .sbf-need[data-need="all"] { background: var(--sbf-panel); }
.sbf .sbf-need[data-need="all"].on { background: #fff1ee; }

/* 3: the products */
.sbf .sbf-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 14px; }
.sbf .sbf-prod { display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--sbf-line); border-radius: 16px; overflow: hidden; background: #fff;
  text-decoration: none; color: inherit; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sbf .sbf-prod:hover { border-color: var(--sbf-red); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.sbf .sbf-pimg { display: block; background: #fff; aspect-ratio: 16 / 10; }
.sbf .sbf-pimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sbf .sbf-ptxt { display: grid; gap: 4px; align-content: start; padding: 12px 16px 16px; background: var(--sbf-panel); }
.sbf .sbf-ptxt em { font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sbf-muted); }
.sbf .sbf-ptxt em.sbf-soon { color: var(--sbf-red); }
.sbf .sbf-ptxt b { font-size: 1.2rem; color: var(--sbf-red); }
.sbf .sbf-ptxt span { color: #444; font-size: .95rem; line-height: 1.4; }
.sbf .sbf-ptxt u { text-decoration: none; font-weight: 700; color: var(--sbf-red); margin-top: 4px; }

/* tablets and phones */
@media (max-width: 1000px) { .sbf .sbf-scopes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sbf .sbf-q { font-size: 1.35rem; margin: 30px 0 14px; }
  .sbf .sbf-scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sbf .sbf-scope img { max-width: 120px; }
  .sbf .sbf-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sbf .sbf-need { min-height: 112px; padding: 14px 8px; }
  .sbf .sbf-need i { font-size: 1.7rem; }
  .sbf .sbf-need b { font-size: .95rem; }
  .sbf .sbf-products { grid-template-columns: minmax(0, 1fr); }
  /* once a telescope is picked, fold the others away (tap it again to change) */
  .sbf.picked .sbf-scope:not(.on) { display: none; }
  .sbf.picked .sbf-scopes { grid-template-columns: minmax(0, 1fr); }
  .sbf.picked .sbf-scope.on { grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 12px; align-items: center; }
  .sbf.picked .sbf-scope.on img { grid-row: 1 / span 3; max-width: 96px; }
  .sbf.picked .sbf-scope.on::after { content: "Change telescope"; color: var(--sbf-red); font-weight: 700; font-size: .85rem; }
  .sbf.picked .sbf-hint, .sbf.picked .sbf-help { display: none; }
}