/*
 * Black / white surfaces for both themes.
 * Loaded after application.css and the Tailwind CDN. !important beats
 * hardcoded utilities and the older navy overrides.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  --mb-page: #111111;
  --mb-header: #161616;
  --mb-card: #1c1c1c;
  --mb-inset: #141414;
  --mb-hover: #2a2a2a;
  --mb-border: #2e2e2e;
  --mb-border-strong: #4a4a4a;
  --mb-text: #f2f2f2;
  --mb-muted: #a3a3a3;
  --mb-dim: #8a8a8a;
  --mb-link: #4c9aff;
  --mb-link-hover: #8cbcff;
  --mb-solid: #f4f4f4;
  --mb-solid-text: #111111;
  --mb-solid-hover: #ffffff;
}

html[data-theme="light"] {
  color-scheme: light;
  --mb-page: #ffffff;
  --mb-header: #ffffff;
  --mb-card: #f6f6f6;
  --mb-inset: #efefef;
  --mb-hover: #e8e8e8;
  --mb-border: #e2e2e2;
  --mb-border-strong: #bdbdbd;
  --mb-text: #141414;
  --mb-muted: #5c5c5c;
  --mb-dim: #6e6e6e;
  --mb-link: #1d4ed8;
  --mb-link-hover: #1e3a8a;
  --mb-solid: #141414;
  --mb-solid-text: #ffffff;
  --mb-solid-hover: #2c2c2c;
}

html,
body {
  background: var(--mb-page) !important;
  color: var(--mb-text);
}

/* Page, card, and inset surfaces */
html[data-theme] .bg-\[\#181818\],
html[data-theme] .mice-directory-page {
  background-color: var(--mb-page) !important;
}

html[data-theme] .bg-\[\#121212\],
html[data-theme] .bg-\[\#111111\],
html[data-theme] .bg-\[\#0f0f0f\] {
  background-color: var(--mb-inset) !important;
}

html[data-theme] .bg-\[\#181818\]\/95,
html[data-theme] header.sticky {
  background-color: var(--mb-header) !important;
  border-bottom-color: var(--mb-border) !important;
}

/* Tools rail scrollbar sits on the panel color, so the track is not a white stripe. */
html[data-theme] .tools-rail-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--mb-border-strong) var(--mb-inset);
}

html[data-theme] .tools-rail-scroll::-webkit-scrollbar {
  width: 8px;
}

html[data-theme] .tools-rail-scroll::-webkit-scrollbar-track {
  background: var(--mb-inset);
}

html[data-theme] .tools-rail-scroll::-webkit-scrollbar-thumb {
  background: var(--mb-border-strong);
  border-radius: 3px;
}

html[data-theme] .bg-\[\#1a2744\],
html[data-theme] .bg-\[\#0d1b45\],
html[data-theme] .bg-\[\#1a1a1a\],
html[data-theme] .bg-\[\#202020\],
html[data-theme] .bg-\[\#243559\],
html[data-theme] .bg-slate-900,
html[data-theme] .bg-slate-800,
html[data-theme] .bg-gray-900,
html[data-theme] .bg-gray-800 {
  background-color: var(--mb-card) !important;
}

html[data-theme] .bg-\[\#1a2744\]\/55,
html[data-theme] .bg-\[\#1a2744\]\/70,
html[data-theme] .bg-\[\#1a2744\]\/80,
html[data-theme] .bg-\[\#0d1b45\]\/70,
html[data-theme] .bg-\[\#0d1b45\]\/80,
html[data-theme] .bg-\[\#0d1b45\]\/85,
html[data-theme] .bg-\[\#0d1b45\]\/90 {
  background-color: color-mix(in srgb, var(--mb-card) 88%, transparent) !important;
}

html[data-theme] .bg-\[\#0b1120\],
html[data-theme] .bg-slate-950,
html[data-theme] .bg-slate-950\/80,
html[data-theme] .bg-slate-950\/90,
html[data-theme] .bg-slate-950\/70,
html[data-theme] .bg-slate-950\/95 {
  background-color: var(--mb-inset) !important;
}

html[data-theme] .bg-\[\#203054\],
html[data-theme] .bg-\[\#203053\],
html[data-theme] .hover\:bg-\[\#203054\]:hover,
html[data-theme] .hover\:bg-\[\#203053\]:hover,
html[data-theme] .hover\:bg-\[\#0f0f0f\]:hover,
html[data-theme] .hover\:bg-\[\#0d1b45\]:hover,
html[data-theme] .hover\:bg-slate-800:hover,
html[data-theme] .hover\:bg-slate-700:hover,
html[data-theme] .hover\:bg-gray-800:hover,
html[data-theme] .hover\:bg-gray-700:hover {
  background-color: var(--mb-hover) !important;
}

html[data-theme="dark"] .bg-white:not(.theme-fixed) {
  background-color: #2a2a2a !important;
}

html[data-theme="dark"] .bg-white\/90:not(.theme-fixed),
html[data-theme="dark"] .bg-white\/95:not(.theme-fixed) {
  background-color: rgba(42, 42, 42, 0.94) !important;
}

html[data-theme="light"] .bg-black:not(.tool-fullscreen-pad) {
  background-color: var(--mb-header) !important;
}

html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .hover\:bg-white\/5:hover,
html[data-theme="light"] .hover\:bg-white\/10:hover,
html[data-theme="light"] .hover\:bg-white\/15:hover,
html[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Borders: gray, not navy or sky */
html[data-theme] .border-blue-500\/15,
html[data-theme] .border-blue-500\/20,
html[data-theme] .border-blue-500\/25,
html[data-theme] .border-blue-500\/30,
html[data-theme] .border-sky-300\/35,
html[data-theme] .border-sky-400\/30,
html[data-theme] .border-blue-400\/25,
html[data-theme] .border-blue-400\/35,
html[data-theme] .border-blue-400\/40,
html[data-theme] .border-blue-400\/50 {
  border-color: var(--mb-border) !important;
}

html[data-theme] .hover\:border-blue-400:hover,
html[data-theme] .hover\:border-blue-400\/40:hover,
html[data-theme] .hover\:border-blue-400\/45:hover,
html[data-theme] .hover\:border-blue-400\/50:hover,
html[data-theme] .hover\:border-sky-300\/55:hover,
html[data-theme] .hover\:border-slate-500:hover,
html[data-theme] .hover\:border-slate-600:hover {
  border-color: var(--mb-border-strong) !important;
}

html[data-theme="dark"] .border-white\/5,
html[data-theme="dark"] .border-white\/10,
html[data-theme="dark"] .border-white\/15,
html[data-theme="dark"] .border-slate-800,
html[data-theme="dark"] .border-slate-700,
html[data-theme="dark"] .border-slate-600 {
  border-color: var(--mb-border) !important;
}

html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/15,
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .border-white\/25,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-600,
html[data-theme="light"] .border-slate-500 {
  border-color: var(--mb-border) !important;
}

html[data-theme] [class*="shadow-[0_0_0_1px_rgba(125,211,252"],
html[data-theme] [class*="shadow-[0_18px_40px"],
html[data-theme] [class*="shadow-[0_18px_45px"],
html[data-theme] [class*="shadow-[0_12px_28px"],
html[data-theme] .shadow-blue-500\/25 {
  box-shadow: none !important;
}

/* Type */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-blue-100 {
  color: var(--mb-text) !important;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500 {
  color: var(--mb-muted) !important;
}

html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .hover\:text-slate-100:hover {
  color: var(--mb-text) !important;
}

html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-500 {
  color: var(--mb-muted) !important;
}

html[data-theme] .text-\[\#c7d6ff\],
html[data-theme] .text-\[\#9fb4ec\],
html[data-theme] .text-\[\#7f95cf\] {
  color: var(--mb-muted) !important;
}

/* Eyebrows stay gray. Soft blue chips become neutral fills. */
html[data-theme] p.text-blue-400,
html[data-theme] p.text-blue-300,
html[data-theme] .uppercase.text-blue-400 {
  color: var(--mb-muted) !important;
}

html[data-theme] .bg-blue-500\/15,
html[data-theme] .bg-blue-500\/10,
html[data-theme] .bg-blue-500\/20,
html[data-theme] .bg-blue-500\/25 {
  background-color: var(--mb-hover) !important;
  color: var(--mb-text) !important;
}

/* Blue is for links and linked titles. */
html[data-theme] a.text-blue-400,
html[data-theme] a.text-blue-300,
html[data-theme] a.text-blue-500,
html[data-theme] a.text-blue-600,
html[data-theme] a .text-blue-400,
html[data-theme] a.group .font-semibold.text-slate-100,
html[data-theme] a.group h2,
html[data-theme] a.group h3,
html[data-theme] main nav a,
html[data-theme] footer a {
  color: var(--mb-link) !important;
}

html[data-theme] a.text-blue-400:hover,
html[data-theme] a.text-blue-300:hover,
html[data-theme] a.hover\:text-blue-600:hover,
html[data-theme] a.hover\:text-blue-300:hover,
html[data-theme] a.group:hover .font-semibold.text-slate-100,
html[data-theme] a.group:hover h2,
html[data-theme] a.group:hover h3,
html[data-theme] a.group:hover .group-hover\:text-sky-200,
html[data-theme] main nav a:hover,
html[data-theme] footer a:hover {
  color: var(--mb-link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme] header .site-logo {
  color: var(--mb-text) !important;
  text-decoration: none !important;
}

html[data-theme] header .site-logo:hover {
  color: var(--mb-link) !important;
}

/* Header and the slide-out menu stay chrome, not blue. */
html[data-theme] header nav a,
html[data-theme] #mobile-menu-panel a:not(.compare-cta-link) {
  color: var(--mb-text) !important;
  text-decoration: none !important;
}

html[data-theme] header nav a:hover,
html[data-theme] #mobile-menu-panel a:not(.compare-cta-link):hover {
  color: var(--mb-text) !important;
  text-decoration: none !important;
}

html[data-theme] header .text-blue-400,
html[data-theme] header .text-blue-300,
html[data-theme] aside .text-blue-400,
html[data-theme] aside .text-blue-300,
html[data-theme] a > span.text-blue-400:first-child {
  color: var(--mb-muted) !important;
}

html[data-theme] header nav .text-slate-400,
html[data-theme] #mobile-menu-panel .text-slate-400 {
  color: var(--mb-muted) !important;
}

/* Solid black/white actions. Amazon and eBay keep their own marks. */
html[data-theme] .bg-blue-600:not(.tool-fullscreen-pad):not(.memory-grid-btn):not(.memory-accent):not(#reaction-panel):not(#aim-arena),
html[data-theme] .bg-blue-500:not(.theme-fixed):not(.tool-fullscreen-pad):not(#reaction-panel):not(#aim-arena),
html[data-theme] .bg-sky-500:not(.tool-fullscreen-pad),
html[data-theme] .bg-red-600:not(.tool-fullscreen-pad):not(#reaction-panel),
html[data-theme] .bg-\[\#cd1042\],
html[data-theme] .bg-\[\#a61d24\],
html[data-theme] .compare-cta-link,
html[data-theme] .product-compare-btn {
  background-color: var(--mb-solid) !important;
  color: var(--mb-solid-text) !important;
  border-color: var(--mb-solid) !important;
  box-shadow: none !important;
}

html[data-theme] .bg-blue-600:not(.tool-fullscreen-pad):not(.memory-accent):not(#reaction-panel):not(#aim-arena):hover,
html[data-theme] .hover\:bg-blue-500:not(.memory-accent):hover,
html[data-theme] .hover\:bg-blue-700:hover,
html[data-theme] .hover\:bg-sky-400:hover,
html[data-theme] .hover\:bg-red-500:hover,
html[data-theme] .hover\:bg-\[\#b00e3a\]:hover,
html[data-theme] .hover\:bg-\[\#8d181f\]:hover,
html[data-theme] .group:hover .group-hover\:bg-blue-500,
html[data-theme] .compare-cta-link:hover,
html[data-theme] .product-compare-btn:hover {
  background-color: var(--mb-solid-hover) !important;
  color: var(--mb-solid-text) !important;
}

/* Memory test actions stay flat blue. No glow. */
html[data-theme] .memory-accent,
html[data-theme] .memory-accent:hover,
html[data-theme="light"] .memory-accent.text-white,
html[data-theme="light"] .memory-accent.text-white:hover {
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .memory-accent {
  background-color: #2563eb !important;
}

html[data-theme] .memory-accent:hover,
html[data-theme="light"] .memory-accent.text-white:hover {
  background-color: #3b82f6 !important;
}

html[data-theme] .peer:checked ~ .peer-checked\:bg-blue-600 {
  background-color: var(--mb-solid) !important;
  border-color: var(--mb-solid) !important;
  color: var(--mb-solid-text) !important;
}

html[data-theme] .peer:checked ~ .peer-checked\:bg-blue-600 * {
  color: var(--mb-solid-text) !important;
}

/* Game pads keep their state colors and light text. */
html[data-theme="light"] .tool-fullscreen-pad,
html[data-theme="light"] .tool-fullscreen-pad *,
html[data-theme="light"] #reaction-panel,
html[data-theme="light"] #reaction-panel *,
html[data-theme="light"] #aim-arena,
html[data-theme="light"] #aim-arena *,
html[data-theme="light"] #three-d-aim-preview-card,
html[data-theme="light"] #three-d-aim-preview-card *:not(.text-amber-200) {
  color: #ffffff !important;
}

/* Memory tiles follow the theme. Blue, green, and red are only the lit and result states. */
html[data-theme="dark"] .memory-cell {
  background-color: #2e2e2e !important;
  border-color: #4a4a4a !important;
  color: #f2f2f2 !important;
}

html[data-theme="light"] .memory-cell {
  background-color: #e6e6e6 !important;
  border-color: #c4c4c4 !important;
  color: #141414 !important;
}

html[data-theme] .memory-cell:hover:not(:disabled) {
  border-color: var(--mb-text) !important;
}

html[data-theme] .memory-cell.bg-blue-600\/75,
html[data-theme] .memory-cell.bg-blue-600\/40 {
  background-color: #2563eb !important;
  border-color: #93c5fd !important;
  color: #ffffff !important;
}

html[data-theme] .memory-cell.bg-emerald-600\/40 {
  background-color: #059669 !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
}

html[data-theme] .memory-cell.bg-rose-600\/50 {
  background-color: #e11d48 !important;
  border-color: #fda4af !important;
  color: #ffffff !important;
}

html[data-theme] a.theme-fixed.bg-blue-500,
html[data-theme] a.theme-fixed.bg-blue-500:hover {
  background-color: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}

html[data-theme] a.theme-fixed.hover\:bg-blue-400:hover {
  background-color: #60a5fa !important;
}

html[data-theme] a.theme-fixed.bg-white,
html[data-theme] a.theme-fixed.bg-white:hover {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #d4d4d4 !important;
}

/* Marketplace search rows stay light so the store marks stay readable. */
html[data-theme] a.bg-slate-100,
html[data-theme] a.bg-slate-100 * {
  color: #141414 !important;
}

html[data-theme] a.bg-slate-100 {
  background-color: #f3f3f3 !important;
}

html[data-theme] a.bg-slate-100:hover {
  background-color: #ffffff !important;
}

html[data-theme] main p a:not([class*="bg-"]),
html[data-theme] main li a:not([class*="bg-"]),
html[data-theme] main td a:not([class*="bg-"]) {
  color: var(--mb-link) !important;
}

html[data-theme] main p a:not([class*="bg-"]):hover,
html[data-theme] main li a:not([class*="bg-"]):hover,
html[data-theme] main td a:not([class*="bg-"]):hover {
  color: var(--mb-link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.compare-cta-count {
  border-radius: 999px !important;
  background: var(--mb-solid-text) !important;
  color: var(--mb-solid) !important;
  --tw-ring-color: var(--mb-header);
}

/* Blocky corners on controls and panels. Dots, swatches, and avatars stay round. */
html[data-theme] a.rounded-full,
html[data-theme] button.rounded-full,
html[data-theme] label.rounded-full,
html[data-theme] input.rounded-full,
html[data-theme] span.inline-flex.rounded-full:not(.compare-cta-count),
html[data-theme] .rounded-md,
html[data-theme] .rounded-lg,
html[data-theme] .rounded-xl,
html[data-theme] .rounded-2xl,
html[data-theme] .rounded-3xl,
html[data-theme] .rounded-\[1rem\],
html[data-theme] .rounded-\[1\.5rem\],
html[data-theme] .rounded-\[1\.6rem\] {
  border-radius: 3px !important;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--mb-border);
  border-radius: 2px;
  background: var(--mb-header);
  color: var(--mb-text);
  line-height: 0;
}

.theme-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

.theme-toggle:hover {
  background: var(--mb-hover);
  border-color: var(--mb-border-strong);
}

#mobile-menu-panel {
  background: var(--mb-header) !important;
  border-color: var(--mb-border) !important;
}

html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.calc-field input),
html[data-theme] select:not(.calc-field select),
html[data-theme] textarea {
  background-color: var(--mb-inset) !important;
  border-color: var(--mb-border) !important;
  color: var(--mb-text) !important;
}

html[data-theme="light"] .calc-field input,
html[data-theme="light"] .calc-field select {
  color: var(--mb-text) !important;
}

html[data-theme="light"] .calc-field select option {
  background: #ffffff;
  color: #141414;
}

html[data-theme] .mice-directory-page,
html[data-theme] .mice-directory-page #mouse-filters-form {
  background: transparent !important;
  color: var(--mb-text) !important;
}

html[data-theme] .catalog-filter-stack,
html[data-theme] .faq-stack {
  border-color: var(--mb-border) !important;
  background: transparent !important;
}

html[data-theme] .faq-stack > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--mb-border) !important;
}

/* Card remap beats xl:bg-transparent; desktop sidebars stay unfilled. */
@media (min-width: 1280px) {
  html[data-theme] #mouse-filters-drawer,
  html[data-theme] #mousepad-filters-drawer {
    background: transparent !important;
    box-shadow: none !important;
  }
}

html[data-theme] .catalog-filter-stack > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--mb-border) !important;
}

html[data-theme] .dark [data-controller="mouse-filters-v2"] section,
html[data-theme="dark"] [data-controller="mouse-filters-v2"] section,
html[data-theme="light"] [data-controller="mouse-filters-v2"] section {
  background: var(--mb-card) !important;
  border-color: var(--mb-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

html[data-theme] .mice-directory-page #mouse-filters-form .multi-range-slider > .bg-blue-600 {
  background: var(--mb-text) !important;
  box-shadow: none !important;
}

.mouse-card-image-surface,
.mouse-card-image-picture,
.mouse-card-image {
  background: #ffffff !important;
}

/* Mousepad photos are shot with a wide empty margin, and dark mode turns a
   plain bg-white well into #2a2a2a, which reads as a black frame around the
   bitmap. Keep the well white and scale the photo inside the clipped frame.
   Mice are left alone. 1.2 fills the typical margin without cutting logos
   off the tighter shots. */
.mousepad-photo-frame {
  background: #ffffff !important;
  overflow: hidden;
}

.mousepad-photo {
  transform: scale(1.2);
  transform-origin: center center;
}

/* Compare sheet: product strip on top, spec labels down the left. */
.compare-sheet {
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-card);
}

.compare-sheet-scroll {
  overflow: visible;
  border-radius: 3px;
  background: var(--mb-card);
}

.compare-grid {
  display: grid;
  grid-template-columns: minmax(8.75rem, 12.5rem) repeat(var(--compare-cols, 3), minmax(10.5rem, 1fr));
  width: max(100%, calc(8.75rem + (var(--compare-cols, 3) * 10.5rem)));
}

.compare-sheet .hidden {
  display: none !important;
}

.compare-label {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 0.65rem 0.8rem;
  background: var(--mb-card);
  color: var(--mb-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 1px 0 0 var(--mb-border);
}

.compare-cell,
.compare-product {
  border-left: 1px solid var(--mb-border);
  background: var(--mb-card);
}

.compare-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  text-align: center;
}

.compare-row > .compare-label,
.compare-row > .compare-cell,
.compare-section-summary > .compare-label,
.compare-section-summary > .compare-cell {
  border-top: 1px solid var(--mb-border);
}

.compare-sheet .is-baseline {
  background: color-mix(in srgb, var(--mb-text) 8%, var(--mb-card));
}

.compare-head {
  position: sticky;
  top: calc(4rem + 1px);
  z-index: 30;
  background: var(--mb-card);
  box-shadow: 0 1px 0 var(--mb-border);
}

@media (max-width: 760px) {
  .compare-sheet-scroll {
    max-height: calc(100dvh - 7.5rem);
    overflow: auto;
  }

  .compare-head {
    top: 0;
  }
}

.compare-head .compare-label {
  z-index: 5;
}

.compare-head-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
}

.compare-diff-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--mb-text);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
}

.compare-diff-toggle input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0.05rem 0 0;
  accent-color: var(--mb-text);
}

.compare-baseline-note {
  margin: 0;
  color: var(--mb-muted);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
}

.compare-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.85rem 0.75rem 0.75rem;
  text-align: center;
}

.compare-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7.25rem;
  overflow: hidden;
  border-radius: 3px;
  background: #ffffff;
}

.compare-photo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compare-photo-img.is-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-brand {
  margin: 0;
  color: var(--mb-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.compare-name {
  margin: 0;
  color: var(--mb-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compare-baseline-tag {
  margin: 0;
  color: var(--mb-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.compare-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 650;
}

.compare-action-sep {
  color: var(--mb-dim);
}

html[data-theme] a.compare-view {
  color: var(--mb-link) !important;
  font-weight: 650;
  text-decoration: none;
}

html[data-theme] a.compare-view:hover {
  color: var(--mb-link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.compare-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mb-muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.compare-remove:hover {
  color: var(--mb-text);
}

.compare-product-empty {
  justify-content: center;
  gap: 0.55rem;
  border-left-style: dashed;
}

.compare-empty-title {
  margin: 0;
  color: var(--mb-muted);
  font-size: 0.85rem;
  font-weight: 650;
}

html[data-theme] a.compare-pick,
html[data-theme] a.compare-pick:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 3px;
  background: var(--mb-solid) !important;
  color: var(--mb-solid-text) !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none !important;
}

html[data-theme] a.compare-pick:hover {
  background: var(--mb-solid-hover) !important;
}

.compare-section > summary {
  list-style: none;
  cursor: pointer;
}

.compare-section > summary::-webkit-details-marker {
  display: none;
}

.compare-section > summary::marker {
  content: "";
}

.compare-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--mb-inset);
  color: var(--mb-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.compare-chevron {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  color: var(--mb-muted);
  transition: transform 0.15s ease;
}

.compare-section[open] .compare-chevron {
  transform: rotate(180deg);
}

.compare-section-gap {
  min-height: 2.4rem;
  padding: 0;
  background: var(--mb-inset);
}

.compare-value,
.compare-bool {
  line-height: 1.35;
}

.compare-value {
  overflow-wrap: break-word;
}

.compare-value.is-base,
.compare-bool.is-base {
  color: var(--mb-text);
  font-weight: 650;
}

.compare-value.is-same,
.compare-bool.is-same {
  color: var(--mb-muted);
  font-weight: 500;
}

.compare-value.is-diff,
.compare-bool.is-diff {
  color: var(--mb-text);
  font-weight: 700;
}

.compare-bool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}

.compare-bool svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.compare-bool-no {
  color: var(--mb-muted);
}

.compare-unknown {
  color: var(--mb-dim);
  font-style: italic;
  font-weight: 500;
}

.compare-delta {
  color: var(--mb-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.compare-delta.is-better {
  color: var(--mb-text);
}

.compare-delta.is-worse {
  color: var(--mb-dim);
}

.compare-buy .compare-cell {
  align-items: stretch;
  justify-content: flex-start;
}

.compare-slot-bar {
  border-top: 1px solid var(--mb-border);
  background: var(--mb-card);
}

.compare-slot-bar form.compare-slot-main {
  grid-column: 2 / -1;
  min-width: 0;
  padding: 0.85rem 0.75rem 1rem;
}

@media (max-width: 760px) {
  .compare-slot-bar {
    position: sticky;
    left: 0;
    z-index: 4;
    width: min(100%, calc(100vw - 2rem));
  }

  .compare-slot-bar .compare-grid {
    display: block;
    width: 100%;
  }

  .compare-slot-bar .compare-label {
    display: none;
  }

  .compare-slot-bar form.compare-slot-main {
    grid-column: auto;
    width: 100%;
    padding: 0.75rem;
  }
}

.compare-slot-arrows {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.1rem 0.15rem;
}

@media (min-width: 1280px) {
  .compare-slot-arrows {
    display: flex;
  }
}

.compare-slot-bar [data-compare-slot-search] {
  border: 1px solid var(--mb-border-strong) !important;
  border-radius: 3px !important;
  background: var(--mb-inset) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}

.compare-slot-bar [data-compare-slot-search]:focus {
  border-color: var(--mb-text) !important;
  outline: none;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

.compare-slot-bar [data-compare-slot-clear] {
  border: 1px solid var(--mb-border-strong) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.compare-slot-bar [data-compare-swap-trigger],
.compare-slot-bar [data-compare-copy-link],
.compare-slot-bar .compare-slot-switch {
  border: 1px solid var(--mb-border-strong) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.compare-slot-bar [data-compare-swap-trigger]:hover,
.compare-slot-bar [data-compare-slot-clear]:hover,
.compare-slot-bar [data-compare-copy-link]:hover,
.compare-slot-bar .compare-slot-switch:hover {
  border-color: var(--mb-text) !important;
  background: var(--mb-hover) !important;
  color: var(--mb-text) !important;
  text-decoration: none !important;
}

.compare-slot-bar [data-compare-slot-results] {
  border: 1px solid var(--mb-border-strong) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  box-shadow: none !important;
}

.compare-option,
.compare-option-empty {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 0.7rem 0.75rem;
  text-align: left;
  color: var(--mb-text);
}

.compare-option:hover,
.compare-option:focus-visible {
  background: var(--mb-hover);
  color: var(--mb-text);
  outline: none;
}

.compare-option-name {
  overflow: hidden;
  color: var(--mb-text);
  font-size: 0.875rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-option-meta,
.compare-option-facts,
.compare-option-empty {
  color: var(--mb-muted);
  font-size: 0.75rem;
}

.compare-option-meta,
.compare-option-facts {
  overflow: hidden;
  margin-top: 0.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] .home-matchup,
html[data-theme] .home-matchup-card {
  border-color: var(--mb-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

html[data-theme] .home-matchup {
  background: var(--mb-card) !important;
}

html[data-theme] .home-matchup-card {
  background: var(--mb-inset) !important;
}

html[data-theme] .home-matchup-card dt,
html[data-theme] .home-matchup .text-slate-400 {
  color: var(--mb-muted) !important;
}

html[data-theme] .home-matchup-card dd {
  color: var(--mb-text) !important;
}

html[data-theme] .home-matchup-card .border-t {
  border-color: var(--mb-border) !important;
}

html[data-theme] .home-matchup-vs {
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}

html[data-theme] .calc-field,
html[data-theme] .calc-readout {
  border-color: var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-inset) !important;
  box-shadow: none !important;
}

html[data-theme] .calc-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme] .calc-field select,
html[data-theme] .calc-field .styled-select-value,
html[data-theme="light"] .calc-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="light"] .calc-field select,
html[data-theme="dark"] .calc-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"] .calc-field select {
  color: var(--mb-text) !important;
  -webkit-text-fill-color: var(--mb-text) !important;
  caret-color: var(--mb-text);
  color-scheme: inherit;
}

/* Number fields paint their glyphs from color-scheme. Keep that on the theme,
   or light mode leaves the value near-white on the light inset. */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color-scheme: light;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color-scheme: dark;
}

html[data-theme] .calc-field input::placeholder {
  color: var(--mb-muted) !important;
  -webkit-text-fill-color: var(--mb-muted) !important;
}

/* Pastel sky/emerald/blue read as white on the light cards. */
html[data-theme="light"] #dpi-actual,
html[data-theme="light"] #dpi-from-distance {
  color: #1d4ed8 !important;
}

html[data-theme="light"] #dpi-target-counts,
html[data-theme="light"] #calc-edpi {
  color: #047857 !important;
}

html[data-theme="light"] #calc-cm360,
html[data-theme="light"] #calc-in360 {
  color: #0369a1 !important;
}

html[data-theme] .calc-field label,
html[data-theme] .calc-readout .calc-kicker,
html[data-theme] .calc-readout .text-slate-400 {
  color: var(--mb-muted) !important;
}

html[data-theme] .calc-readout .text-slate-100 {
  color: var(--mb-text) !important;
}

html[data-theme] .calc-readout .divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--mb-border) !important;
}

html[data-theme] .calc-field:focus-within {
  border-color: var(--mb-border-strong) !important;
  box-shadow: none !important;
}

html[data-theme] .calc-result {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  box-shadow: none !important;
  padding: 0.3rem 0.35rem 0.3rem 0.7rem;
}

.calc-result p,
html[data-theme] .calc-result p {
  color: var(--mb-text) !important;
}

.calc-copy,
html[data-theme] button.calc-copy,
html[data-theme] button.calc-copy:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-inset) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}

html[data-theme] button.calc-copy:hover {
  border-color: var(--mb-border-strong) !important;
  background: var(--mb-hover) !important;
}

html[data-theme] button.calc-copy.is-copied,
html[data-theme] button.calc-copy.is-copied:hover {
  border-color: var(--mb-text) !important;
  background: var(--mb-text) !important;
  color: var(--mb-page) !important;
}

html[data-theme] .calc-text-btn,
html[data-theme] .calc-text-btn:hover {
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}

html[data-theme] .calc-icon-btn,
html[data-theme] .calc-icon-btn:hover {
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}

.has-styled-select > svg {
  display: none;
}

.styled-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.styled-select-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.75rem;
  margin-top: 0.15rem;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--mb-text);
  font-size: 0.95rem;
  font-weight: 650;
  text-align: left;
}

.styled-select-trigger svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--mb-muted);
}

.styled-select-panel {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  display: flex;
  max-height: 18rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-card);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.styled-select-panel[hidden] {
  display: none !important;
}

html[data-theme] .calc-field .styled-select-filter {
  margin: 0.45rem;
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-inset) !important;
  padding: 0.4rem 0.55rem !important;
  color: var(--mb-text) !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  font-size: 0.875rem;
  box-shadow: none !important;
}

.styled-select-list {
  overflow: auto;
  padding-bottom: 0.25rem;
}

.styled-select-option {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.75rem;
  color: var(--mb-text);
  font-size: 0.9rem;
  text-align: left;
}

.styled-select-option:hover,
.styled-select-option:focus-visible {
  background: var(--mb-hover);
  outline: none;
}

.styled-select-option.is-selected {
  background: var(--mb-text);
  color: var(--mb-page);
  font-weight: 700;
}

.styled-select-empty {
  margin: 0;
  padding: 0.7rem 0.75rem;
  color: var(--mb-muted);
  font-size: 0.875rem;
}

#compare-builder {
  scroll-margin-top: 5.5rem;
}

/* Login card: square panel, theme colors, blue only on links. */
.auth-card {
  margin: 0 auto;
  width: 100%;
  max-width: 28rem;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-card);
  padding: 1.75rem 1.35rem 1.15rem;
}

.auth-card-intro {
  text-align: center;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--mb-text);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.auth-logo-mark {
  width: 2.15rem;
  height: 2.15rem;
}

html[data-theme] a.auth-logo,
html[data-theme] a.auth-logo:hover {
  color: var(--mb-text) !important;
  text-decoration: none !important;
}

html[data-theme] a.auth-logo:hover {
  color: var(--mb-link) !important;
}

.auth-card h1 {
  margin: 1.35rem 0 0;
  color: var(--mb-text);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.auth-card-intro p {
  margin: 0.55rem auto 0;
  max-width: 22rem;
  color: var(--mb-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.auth-benefits {
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
}

.auth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
}

.auth-benefits li + li {
  border-top: 1px solid var(--mb-border);
}

.auth-check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border: 1px solid var(--mb-border-strong);
  border-radius: 3px;
  color: var(--mb-text);
}

.auth-check svg {
  width: 0.75rem;
  height: 0.75rem;
}

.auth-benefit-title {
  margin: 0;
  color: var(--mb-text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.auth-benefit-body {
  margin: 0.1rem 0 0;
  color: var(--mb-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.auth-google-form {
  margin-top: 1.15rem;
}

.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  height: 3rem;
  border: 1px solid var(--mb-solid);
  border-radius: 3px;
  background: var(--mb-solid);
  color: var(--mb-solid-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-google:hover {
  background: var(--mb-solid-hover);
  border-color: var(--mb-solid-hover);
}

.auth-google-mark {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.auth-note {
  margin: 0.75rem 0 0;
  color: var(--mb-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--mb-border);
  font-size: 0.875rem;
}

html[data-theme] a.auth-link {
  color: var(--mb-link) !important;
  font-weight: 700;
  text-decoration: none;
}

html[data-theme] a.auth-link:hover {
  color: var(--mb-link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme] a.auth-quiet-link,
html[data-theme] a.auth-quiet-link:hover {
  color: var(--mb-muted) !important;
  font-weight: 600;
  text-decoration: none;
}

html[data-theme] a.auth-quiet-link:hover {
  color: var(--mb-text) !important;
}

.auth-flash {
  margin: 0 auto 1.25rem;
  width: 100%;
  max-width: 28rem;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-inset);
  padding: 0.7rem 0.85rem;
  color: var(--mb-text);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Mouse and mousepad finders. Square panels, theme surfaces, no navy bar. */
.finder-stage {
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-card);
}

.finder-rows {
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-inset);
}

.finder-rows > * + * {
  border-top: 1px solid var(--mb-border);
}

.finder-label {
  color: var(--mb-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.finder-muted {
  color: var(--mb-muted);
}

html[data-theme] #product-search-root .ps-chip {
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--mb-text) !important;
}

html[data-theme] #product-search-root .ps-chip.is-active {
  border-color: var(--mb-solid) !important;
  background: var(--mb-solid) !important;
  color: var(--mb-solid-text) !important;
}

html[data-theme] #product-search-root input:not([type="checkbox"]):not([type="range"]),
html[data-theme] #product-search-root select {
  border-color: var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}

html[data-theme] #product-search-root input:focus,
html[data-theme] #product-search-root select:focus {
  border-color: var(--mb-border-strong) !important;
  outline: none;
}

html[data-theme] #product-search-root input[type="checkbox"] {
  accent-color: var(--mb-text);
  border-radius: 3px;
}

.finder-submit,
html[data-theme] a.finder-submit,
html[data-theme] button.finder-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mb-solid) !important;
  border-radius: 3px !important;
  background: var(--mb-solid) !important;
  color: var(--mb-solid-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html[data-theme] a.finder-submit:hover,
html[data-theme] button.finder-submit:hover {
  background: var(--mb-solid-hover) !important;
  color: var(--mb-solid-text) !important;
}

.finder-ghost,
html[data-theme] a.finder-ghost,
html[data-theme] button.finder-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-inset) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html[data-theme] a.finder-ghost:hover,
html[data-theme] button.finder-ghost:hover {
  border-color: var(--mb-border-strong) !important;
  background: var(--mb-hover) !important;
  color: var(--mb-text) !important;
}

[data-ps-track] {
  transform: translateX(0);
  will-change: transform;
}

#product-search-root[data-step="results"] [data-ps-track] {
  transform: translateX(-50%);
}

.finder-bar-wrap {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.finder-bar-wrap.ps-compare-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.finder-bar {
  border-top: 1px solid var(--mb-border);
  background: var(--mb-card);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.finder-kicker {
  color: var(--mb-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.finder-bar-title {
  margin-top: 0.25rem;
  color: var(--mb-text);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.finder-bar-summary {
  margin-top: 0.35rem;
  color: var(--mb-muted);
  font-size: 1rem;
  line-height: 1.4;
}

.finder-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.finder-thumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-inset);
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
}

.finder-rank {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-card);
  color: var(--mb-text);
  font-size: 0.75rem;
  font-weight: 800;
}

.finder-photo {
  display: block;
  height: 4.25rem;
  width: 4.25rem;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: #ffffff;
}

.finder-photo-sm {
  height: 2.5rem;
  width: 2.5rem;
}

.finder-thumb-name,
.finder-result-name {
  color: var(--mb-text);
  font-weight: 700;
}

.finder-thumb-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.finder-result {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-inset);
  padding: 0.75rem;
}

.finder-result-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.finder-result-copy {
  min-width: 0;
  flex: 1;
}

.finder-result-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.finder-result-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--mb-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

html[data-theme] a.finder-details,
html[data-theme] a.finder-details:hover {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mb-border) !important;
  border-radius: 3px !important;
  background: var(--mb-card) !important;
  padding: 0.45rem 0.8rem;
  color: var(--mb-text) !important;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none !important;
}

html[data-theme] a.finder-details:hover {
  border-color: var(--mb-border-strong) !important;
  background: var(--mb-hover) !important;
}

.finder-empty {
  border: 1px dashed var(--mb-border-strong);
  border-radius: 3px;
  background: var(--mb-inset);
  padding: 2rem 1rem;
  color: var(--mb-muted);
  text-align: center;
  font-size: 0.875rem;
}

.finder-note {
  margin-top: 1.5rem;
  border: 1px solid var(--mb-border);
  border-radius: 3px;
  background: var(--mb-card);
  padding: 1.25rem;
}

.finder-note h2 {
  color: var(--mb-text);
  font-size: 1.125rem;
  font-weight: 800;
}

.finder-note p {
  margin-top: 0.4rem;
  color: var(--mb-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.finder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

#product-search-root .ps-range {
  -webkit-appearance: none;
  appearance: none;
  height: 0.3rem;
  border-radius: 3px;
  background: var(--mb-border);
  outline: none;
}

#product-search-root .ps-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  background: var(--mb-text);
  border: 1px solid var(--mb-text);
  cursor: pointer;
  box-shadow: none;
}

#product-search-root .ps-range::-moz-range-thumb {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  background: var(--mb-text);
  border: 1px solid var(--mb-text);
  cursor: pointer;
}

@media (min-width: 640px) {
  .finder-result {
    flex-direction: row;
    align-items: center;
  }

  .finder-bar-title {
    font-size: 1.85rem;
  }
}