/* BinderWorth 3.41 — Find / collector-first search workspace.
   Only #searchView and the existing #findCardModal are affected. All search
   handlers, card IDs, collection data, trader ranking and scanner stay intact. */

#searchView {
  width: 100% !important;
  min-width: 0 !important;
  padding-bottom: max(130px, env(safe-area-inset-bottom)) !important;
}
#searchView :is(button,input):focus-visible,
#findCardModal :is(button,a,summary):focus-visible {
  outline: 2px solid #65ddcd !important;
  outline-offset: 3px !important;
}

/* The brand introduction is a short confidence cue — not an obstacle to search. */
#searchView .find-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(230px,320px) !important;
  gap: 16px 24px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 19px 22px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 96% 0%,rgba(216,166,78,.13),transparent 31%),
    linear-gradient(120deg,#111c1d,#0a1517) !important;
  border: 1px solid rgba(224,170,75,.26) !important;
}
#searchView .find-hero::after {
  width: 175px !important;
  height: 175px !important;
  right: -75px !important;
  bottom: -110px !important;
}
#searchView .find-hero .eyebrow {
  margin: 0 0 5px !important;
  color: #e2b56d !important;
  font-size: 10px !important;
  letter-spacing: .17em !important;
}
#searchView .find-hero h2 {
  margin: 0 0 8px !important;
  font-family: inherit !important;
  font-size: clamp(25px,2.8vw,34px) !important;
  font-weight: 850 !important;
  letter-spacing: -.05em !important;
  line-height: 1.08 !important;
}
#searchView .find-hero-copy > p:not(.eyebrow) {
  max-width: 590px !important;
  font-size: 11.5px !important;
  line-height: 1.48 !important;
  color: #a6b5af !important;
}
#searchView .find-trader-priority {
  margin: 0 !important;
  padding: 12px !important;
  min-height: 69px !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  background: rgba(4,24,25,.72) !important;
  border: 1px solid rgba(64,205,181,.24) !important;
  border-radius: 15px !important;
}
#searchView .find-trader-medal {
  border-radius: 11px !important;
  background: rgba(49,190,172,.12) !important;
}
#searchView .find-trader-priority strong {
  color: #dff4eb !important;
  font-size: 12px !important;
}
#searchView .find-trader-priority small {
  color: #92aba3 !important;
  font-size: 10px !important;
  line-height: 1.36 !important;
}

/* Make the actual search the primary destination. */
#searchView .find-search-panel {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 20px !important;
  min-width: 0 !important;
  border-radius: 19px !important;
  border: 1px solid rgba(170,196,189,.21) !important;
  background: linear-gradient(165deg,#121d1e,#0a1518) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.17) !important;
}
#searchView .find-search-intro {
  margin: 0 0 12px !important;
}
#searchView .find-search-intro .eyebrow {
  margin: 0 0 4px !important;
  color: #e2b266 !important;
  font-weight: 850 !important;
  font-size: 10px !important;
  letter-spacing: .13em !important;
}
#searchView .find-search-intro h3 {
  margin: 0 !important;
  color: #f2eee5 !important;
  font-size: 22px !important;
  line-height: 1.17 !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}
#searchView .find-search-intro p:not(.eyebrow) {
  margin: 5px 0 0 !important;
  color: #9fb0a9 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
#searchView .search-box {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 58px !important;
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  padding: 5px 6px 5px 14px !important;
  gap: 9px !important;
  border: 1px solid rgba(238,188,101,.4) !important;
  border-radius: 14px !important;
  background: #071213 !important;
  box-shadow: 0 0 0 1px rgba(250,198,101,.04) inset !important;
}
#searchView .search-box > span {
  color: #dda856 !important;
  font-size: 23px !important;
}
#searchView .search-box input {
  min-height: 45px !important;
  min-width: 0 !important;
  font-size: 15px !important;
  color: #f2f4ee !important;
  background: transparent !important;
}
#searchView .search-box input::placeholder {
  color: #758682 !important;
  opacity: 1 !important;
}
#searchView .search-box:focus-within {
  border-color: rgba(91,219,194,.72) !important;
  box-shadow: 0 0 0 3px rgba(74,195,170,.11) !important;
}
#searchView .search-box .button {
  min-width: 91px !important;
  min-height: 45px !important;
  padding: 9px 17px !important;
  background: linear-gradient(180deg,#f5c76e,#e4a748) !important;
  color: #221e14 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
#searchView .quick-searches {
  gap: 7px !important;
  margin-top: 11px !important;
}
#searchView .quick-searches > span {
  color: #93a5a0 !important;
  font-size: 10px !important;
  margin-right: 4px !important;
}
#searchView .quick-searches button {
  min-height: 34px !important;
  padding: 6px 12px !important;
  background: rgba(21,35,36,.95) !important;
  border-color: rgba(158,181,174,.24) !important;
  color: #dee4df !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
#searchView .quick-searches button:hover {
  border-color: rgba(239,185,86,.55) !important;
  background: rgba(66,49,23,.35) !important;
}
#searchView .find-search-shortcuts {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.075) !important;
}
#searchView .find-path-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 9px !important;
  margin: 0 !important;
  width: 100% !important;
}
#searchView .find-path-card {
  min-width: 0 !important;
  min-height: 60px !important;
  grid-template-columns: 31px minmax(0,1fr) 12px !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  background: #101d1f !important;
  border-color: rgba(200,213,205,.16) !important;
  text-align: left !important;
  cursor: pointer !important;
}
#searchView .find-path-card.primary-path {
  border-color: rgba(235,184,91,.32) !important;
  background: rgba(62,46,26,.25) !important;
}
#searchView .find-path-icon {
  width: 30px !important;
  height: 30px !important;
  font-size: 15px !important;
  background: rgba(219,160,64,.07) !important;
}
#searchView .find-path-card strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #f0eee5 !important;
}
#searchView .find-path-card small {
  font-size: 9px !important;
  color: #91a49c !important;
  margin-top: 2px !important;
}
#searchView .find-path-card b {
  font-size: 16px !important;
}
#searchView .find-scan-row {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 145px !important;
  border: 0 !important;
  gap: 7px !important;
  white-space: nowrap !important;
  color: #9badab !important;
  font-size: 10px !important;
}
#searchView .find-scan-row .text-button {
  font-size: 11px !important;
  color: #f0bc67 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* The checklist of matching printings reads like a real collection utility. */
#searchView .find-results-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 9px 22px !important;
  min-width: 0 !important;
  margin: 4px 0 12px !important;
  padding: 0 4px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#searchView .find-results-head .eyebrow {
  color: #e4af5a !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  margin: 0 0 4px !important;
}
#searchView .find-results-head h3 {
  font-size: clamp(19px,2.4vw,23px) !important;
  margin: 0 !important;
  color: #f2f1e8 !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  line-height: 1.14 !important;
}
#searchView .find-results-head .search-status {
  padding: 0 !important;
  margin: 0 0 1px !important;
  max-width: 480px !important;
  color: #9fb2a9 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  text-align: right !important;
}
#searchView .card-results.find-results {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 13px !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
#searchView .find-result-card {
  display: grid !important;
  grid-template-columns: 116px minmax(0,1fr) !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: 176px !important;
  padding: 10px !important;
  gap: 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(155deg,#182424,#0c1619) !important;
  border: 1px solid rgba(185,199,191,.17) !important;
  box-shadow: 0 5px 17px rgba(0,0,0,.08) !important;
}
#searchView .find-result-card:hover {
  border-color: rgba(234,179,76,.4) !important;
  box-shadow: 0 8px 23px rgba(0,0,0,.18) !important;
  transform: none !important;
}
#searchView .find-result-card.artwork-unavailable {
  grid-template-columns: 116px minmax(0,1fr) !important;
  min-height: 176px !important;
}
#searchView .find-result-card .result-image,
#searchView .find-result-card.artwork-unavailable .result-image {
  width: 116px !important;
  max-width: 100% !important;
  height: 160px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #081213 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden !important;
}
#searchView .find-result-card .result-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
}
#searchView .find-result-card .result-body,
#searchView .find-result-card.artwork-unavailable .result-body {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 160px !important;
  padding: 3px 2px 1px !important;
}
#searchView .find-result-heading {
  align-items: center !important;
  gap: 8px !important;
}
#searchView .find-result-kicker {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #deb263 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .095em !important;
  line-height: 1.2 !important;
}
#searchView .find-result-state {
  font-size: 8.5px !important;
  padding: 5px 8px !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}
#searchView .find-result-card h3 {
  margin: 9px 0 0 !important;
  color: #f1f0e9 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  letter-spacing: -.022em !important;
  white-space: normal !important;
  overflow: visible !important;
  display: block !important;
  overflow-wrap: anywhere !important;
}
#searchView .find-result-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 3px 5px !important;
  white-space: normal !important;
  overflow: visible !important;
  margin: 7px 0 9px !important;
  line-height: 1.32 !important;
  font-size: 11px !important;
}
#searchView .find-result-meta strong {
  color: #e2bf7a !important;
  font-size: 11px !important;
  overflow-wrap: anywhere !important;
}
#searchView .find-result-meta span {
  color: #acbbb3 !important;
  font-variant-numeric: tabular-nums !important;
}
#searchView .find-result-actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 7px !important;
  margin-top: auto !important;
  min-width: 0 !important;
}
#searchView .find-result-actions .button,
#searchView .find-result-actions .button.primary,
#searchView .find-result-actions .button.ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 7px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: center !important;
  cursor: pointer !important;
}
#searchView .find-result-actions .button.primary {
  color: #241e13 !important;
  background: linear-gradient(180deg,#f0c16c,#dca041) !important;
  border: 1px solid #e3ad50 !important;
}
#searchView .find-result-actions .button.ghost {
  color: #bdece2 !important;
  background: rgba(41,125,111,.11) !important;
  border: 1px solid rgba(75,202,171,.32) !important;
}
#searchView .find-result-card .artwork-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 10px !important;
  gap: 4px !important;
  background: #0b1718 !important;
}
#searchView .find-result-card .artwork-placeholder-icon {
  color: #e0b35f !important;
  font-size: 28px !important;
}
#searchView .find-ad-slot {
  margin-top: 20px !important;
  opacity: .72 !important;
}

/* Trader match screen: support hands and narrow phones without changing ranking. */
#findCardModal .find-card-frame {
  padding-bottom: max(38px,env(safe-area-inset-bottom)) !important;
}
#findCardModal #closeFindCardModalBtn {
  min-width: 42px !important;
  min-height: 42px !important;
}
#findCardModal .find-card-location-strip .text-button,
#findCardModal .find-card-fallback .button,
#findCardModal .find-card-offer-actions .button {
  min-height: 43px !important;
}
#findCardModal .find-card-section-head strong {
  line-height: 1.22 !important;
}

@media (min-width: 781px) and (max-width: 1120px) {
  #searchView .card-results.find-results { grid-template-columns: 1fr !important; }
}
@media (max-width: 780px) {
  #searchView .find-hero {
    display: block !important;
    padding: 16px !important;
    border-radius: 18px !important;
    margin-bottom: 10px !important;
  }
  #searchView .find-hero h2 {
    font-size: 27px !important;
    line-height: 1.08 !important;
    margin: 0 0 7px !important;
  }
  #searchView .find-hero-copy > p:not(.eyebrow) {
    font-size: 11px !important;
  }
  #searchView .find-trader-priority {
    min-height: 0 !important;
    margin-top: 12px !important;
    padding: 9px 10px !important;
  }
  #searchView .find-trader-priority strong { font-size: 10.5px !important; }
  #searchView .find-trader-priority small { font-size: 9px !important; }
  #searchView .find-search-panel {
    padding: 14px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }
  #searchView .find-search-intro h3 { font-size: 20px !important; }
  #searchView .find-search-intro p:not(.eyebrow) { font-size: 10px !important; }
  #searchView .search-box { min-height: 54px !important; padding: 4px 5px 4px 10px !important; }
  #searchView .search-box input { font-size: 16px !important; min-height: 44px !important; }
  #searchView .search-box .button { min-width: 77px !important; min-height: 44px !important; padding: 8px 10px !important; font-size: 12px !important; }
  #searchView .quick-searches button { min-height: 36px !important; }
  #searchView .find-search-shortcuts {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  #searchView .find-path-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  #searchView .find-path-card {
    min-height: 60px !important;
    padding: 8px 9px !important;
    gap: 7px !important;
    grid-template-columns: 27px minmax(0,1fr) 10px !important;
  }
  #searchView .find-path-icon { width: 27px !important; height: 27px !important; font-size: 14px !important; }
  #searchView .find-path-card strong { font-size: 10px !important; }
  #searchView .find-path-card small { font-size: 8px !important; }
  #searchView .find-scan-row {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
    min-width: 0 !important;
  }
  #searchView .find-scan-row .text-button { font-size: 11px !important; }
  #searchView .find-results-head {
    display: block !important;
    margin: 4px 0 10px !important;
    padding: 0 2px 10px !important;
  }
  #searchView .find-results-head h3 { font-size: 20px !important; }
  #searchView .find-results-head .search-status {
    max-width: none !important;
    margin-top: 6px !important;
    font-size: 10.5px !important;
    text-align: left !important;
  }
  #searchView .card-results.find-results {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #searchView .find-result-card,
  #searchView .find-result-card.artwork-unavailable {
    display: grid !important;
    grid-template-columns: 104px minmax(0,1fr) !important;
    gap: 11px !important;
    min-height: 152px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }
  #searchView .find-result-card .result-image,
  #searchView .find-result-card.artwork-unavailable .result-image {
    width: 104px !important;
    height: 145px !important;
    min-height: 0 !important;
    padding: 3px !important;
    border-radius: 10px !important;
  }
  #searchView .find-result-card .result-body,
  #searchView .find-result-card.artwork-unavailable .result-body {
    min-height: 145px !important;
    padding: 1px 0 !important;
  }
  #searchView .find-result-card h3 {
    margin-top: 6px !important;
    font-size: 15px !important;
  }
  #searchView .find-result-meta {
    font-size: 10px !important;
    margin: 6px 0 8px !important;
    gap: 3px !important;
  }
  #searchView .find-result-meta strong { font-size: 10px !important; }
  #searchView .find-result-state {
    font-size: 7.5px !important;
    padding: 4px 6px !important;
  }
  #searchView .find-result-kicker { font-size: 8px !important; }
  #searchView .find-result-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #searchView .find-result-actions .button,
  #searchView .find-result-actions .button.primary,
  #searchView .find-result-actions .button.ghost {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 10px !important;
    padding: 7px !important;
  }
}
@media (max-width: 390px) {
  #searchView .find-hero { padding: 14px !important; }
  #searchView .find-hero h2 { font-size: 24px !important; }
  #searchView .find-trader-priority { grid-template-columns: 28px minmax(0,1fr) !important; }
  #searchView .find-trader-medal { width: 27px !important; height: 27px !important; }
  #searchView .find-search-panel { padding: 12px !important; }
  #searchView .find-search-intro h3 { font-size: 18px !important; }
  #searchView .quick-searches > span { width: 100% !important; }
  #searchView .quick-searches button { padding: 6px 9px !important; }
  #searchView .find-path-card {
    grid-template-columns: 27px minmax(0,1fr) !important;
    min-height: 48px !important;
  }
  #searchView .find-path-card b,
  #searchView .find-path-card small { display: none !important; }
  #searchView .find-result-card,
  #searchView .find-result-card.artwork-unavailable {
    grid-template-columns: 87px minmax(0,1fr) !important;
    min-height: 134px !important;
    gap: 9px !important;
    padding: 8px !important;
  }
  #searchView .find-result-card .result-image,
  #searchView .find-result-card.artwork-unavailable .result-image {
    width: 87px !important;
    height: 124px !important;
  }
  #searchView .find-result-card h3 { font-size: 14px !important; }
  #searchView .find-result-meta strong { font-size: 9px !important; }
  #searchView .find-result-card .result-body,
  #searchView .find-result-card.artwork-unavailable .result-body { min-height: 124px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #searchView .find-path-card,
  #searchView .find-result-card { transition: none !important; }
}
