/* ==========================================================================
   Camera Settings — Gear Hub & Kit Pages
   ========================================================================== */

.gear-hub,
.gear-kit-page {
  background-color: var(--color-gray-50);
}

.gear-hub .page-hero {
  text-align: center;
}

.gear-hub .page-hero .hero-content {
  margin-left: auto;
  margin-right: auto;
}

.gear-hub .page-hero .hero-title {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Gear Finder — Hero Search (mirrors homepage scenario finder)
   -------------------------------------------------------------------------- */
.gear-finder {
  margin-top: var(--space-8);
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
}

.gear-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.gear-input-icon {
  position: absolute;
  left: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--color-gray-400);
  pointer-events: none;
  flex-shrink: 0;
}

.gear-input {
  width: 100%;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-4) + 20px + var(--space-3));
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-black);
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gear-input::placeholder {
  color: var(--color-gray-400);
}

.gear-input:focus {
  outline: none;
  border-color: var(--color-gray-400);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.gear-marquee {
  position: relative;
  margin-top: var(--space-4);
  --marquee-width: min(calc(var(--container-max) - var(--container-padding) * 2), calc(100vw - var(--container-padding) * 2));
  width: var(--marquee-width);
  margin-left: calc((100% - var(--marquee-width)) / 2);
  margin-right: calc((100% - var(--marquee-width)) / 2);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
  max-height: 80px;
}

.gear-marquee.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  margin-top: 0;
  pointer-events: none;
}

.gear-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  padding: var(--space-2) 0;
  animation: gear-marquee-scroll 70s linear infinite;
  will-change: transform;
}

.gear-marquee:hover .gear-marquee-track,
.gear-marquee:focus-within .gear-marquee-track {
  animation-play-state: paused;
}

@keyframes gear-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .gear-marquee-track {
    animation: none;
  }
  .gear-marquee {
    overflow-x: auto;
  }
}

.gear-marquee-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 4px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700, var(--color-black));
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.gear-marquee-btn:hover,
.gear-marquee-btn:focus-visible {
  color: var(--color-black);
  border-color: var(--color-gray-400);
  background-color: var(--color-gray-50);
  transform: translateY(-1px);
  outline: none;
}

.gear-marquee-thumb {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-gray-200);
  flex-shrink: 0;
}

.gear-marquee-name {
  line-height: 1;
}

.gear-marquee-thumb.scenario-visual--milkyway     { background-image: url('https://images.unsplash.com/photo-1529936446945-4c9f599a2dad?w=200&q=70'); background-color: #1b263b; }
.gear-marquee-thumb.scenario-visual--landscape    { background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&q=70'); background-color: #2d6a4f; }
.gear-marquee-thumb.scenario-visual--portrait     { background-image: url('https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?w=200&q=70'); background-color: #e85d04; }
.gear-marquee-thumb.scenario-visual--birds        { background-image: url('https://images.unsplash.com/photo-1444464666168-49d633b86797?w=200&q=70'); background-color: #43aa8b; }
.gear-marquee-thumb.scenario-visual--sports       { background-image: url('https://images.unsplash.com/photo-1587280501635-68a0e82cd5ff?w=200&q=70'); background-color: #d90429; }
.gear-marquee-thumb.scenario-visual--street       { background-image: url('https://images.unsplash.com/photo-1754573457480-7611d0451c33?w=200&q=70'); background-color: #495057; }
.gear-marquee-thumb.scenario-visual--macro        { background-image: url('https://images.unsplash.com/photo-1533467915241-eac02e856653?w=200&q=70'); background-color: #52b69a; }
.gear-marquee-thumb.scenario-visual--studio       { background-image: url('https://images.unsplash.com/photo-1625850902481-a077d55ec5af?w=200&q=70'); background-color: #636e72; }
.gear-marquee-thumb.scenario-visual--concert      { background-image: url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=200&q=70'); background-color: #7b2cbf; }
.gear-marquee-thumb.scenario-visual--longexposure { background-image: url('https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=200&q=70'); background-color: #43aa8b; }
.gear-marquee-thumb.scenario-visual--architecture { background-image: url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=200&q=70'); background-color: #495057; }
.gear-marquee-thumb.scenario-visual--drone        { background-image: url('https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=200&q=70'); background-color: #2a9d8f; }
.gear-marquee-thumb.scenario-visual--underwater   { background-image: url('https://images.unsplash.com/photo-1678614034519-6d142721173f?w=200&q=70'); background-color: #0077b6; }

.gear-results {
  margin-top: var(--space-4);
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
  pointer-events: none;
}

.gear-results.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 420px;
  pointer-events: auto;
}

.gear-results-inner {
  background-color: var(--color-gray-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
}

.gear-match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-gray-800);
  gap: var(--space-3);
}

.gear-match-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.gear-match-link {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.gear-match-link:hover {
  color: var(--color-white);
}

.gear-match-tagline {
  margin: 0;
  padding: var(--space-3) var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: var(--leading-relaxed);
}

.gear-essentials-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.gear-essential-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 4px;
  background: var(--color-gray-800);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-200);
}

.gear-essential-chip svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  background: var(--color-gray-700);
  border-radius: 50%;
  color: var(--color-white);
}

.gear-no-match {
  padding: var(--space-5) var(--space-6);
  text-align: center;
}

.gear-no-match-text {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.gear-no-match-suggestions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gear-no-match-btn {
  display: inline-block;
  padding: 3px var(--space-3);
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.gear-no-match-btn:hover {
  color: var(--color-black);
  border-color: var(--color-gray-400);
  background-color: var(--color-gray-100);
}

.gear-hub .hub-card:nth-child(10) { animation-delay: 500ms; }
.gear-hub .hub-card:nth-child(11) { animation-delay: 550ms; }
.gear-hub .hub-card:nth-child(12) { animation-delay: 600ms; }
.gear-hub .hub-card:nth-child(13) { animation-delay: 650ms; }

.gear-hub-card-covers {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
  margin-top: calc(var(--space-2) * -1);
}

/* --------------------------------------------------------------------------
   How we pick
   -------------------------------------------------------------------------- */
.gear-how {
  padding: var(--space-16) 0 var(--space-20);
}

.gear-how-header {
  max-width: 36rem;
  margin-bottom: var(--space-10);
}

.gear-how-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.gear-how-lede {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.gear-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .gear-how-grid {
    grid-template-columns: 1fr;
  }
}

.gear-how-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gear-how-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-gray-400);
  margin-bottom: var(--space-1);
}

.gear-how-card h3 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

.gear-how-card p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.gear-price-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.gear-price-legend span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.3em 0.65em;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  line-height: 1.3;
}

.gear-price-legend em {
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.gear-how-disclosure {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

/* --------------------------------------------------------------------------
   Kit page hero
   -------------------------------------------------------------------------- */
.gear-hero {
  padding: var(--space-12) 0 var(--space-10);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.gear-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-5);
}

.gear-breadcrumb a {
  color: var(--color-gray-500);
  text-decoration: none;
}

.gear-breadcrumb a:hover {
  color: var(--color-black);
}

.gear-breadcrumb svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}

.gear-hero-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

@media (max-width: 600px) {
  .gear-hero-title {
    font-size: var(--text-3xl);
  }
}

.gear-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  max-width: 40rem;
  margin-bottom: var(--space-5);
}

.gear-covers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.gear-covers-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
}

.gear-cover-chip {
  display: inline-flex;
  padding: 3px var(--space-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.gear-cover-chip:hover {
  background: var(--color-gray-200);
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   At-a-glance bar
   -------------------------------------------------------------------------- */
.gear-glance-bar {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-gray-800);
  padding: var(--space-5) 0;
  position: sticky;
  top: 64px;
  z-index: 90;
}

.gear-glance-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

.gear-glance-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
}

.gear-glance-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-gray-400);
}

.gear-glance-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Kit body
   -------------------------------------------------------------------------- */
.gear-kit-content {
  padding: var(--space-12) 0 var(--space-16);
}

.gear-kit {
  position: relative;
}

.gear-mount-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gear-mount-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.gear-mount-switch label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.gear-mount-switch label:hover {
  border-color: var(--color-gray-400);
  color: var(--color-black);
}

#mount-any:checked ~ .gear-mount-switch label[for="mount-any"],
#mount-sony-e:checked ~ .gear-mount-switch label[for="mount-sony-e"],
#mount-canon-rf:checked ~ .gear-mount-switch label[for="mount-canon-rf"],
#mount-nikon-z:checked ~ .gear-mount-switch label[for="mount-nikon-z"],
#mount-fuji-x:checked ~ .gear-mount-switch label[for="mount-fuji-x"] {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

#mount-any:focus-visible ~ .gear-mount-switch label[for="mount-any"],
#mount-sony-e:focus-visible ~ .gear-mount-switch label[for="mount-sony-e"],
#mount-canon-rf:focus-visible ~ .gear-mount-switch label[for="mount-canon-rf"],
#mount-nikon-z:focus-visible ~ .gear-mount-switch label[for="mount-nikon-z"],
#mount-fuji-x:focus-visible ~ .gear-mount-switch label[for="mount-fuji-x"] {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.gear-tier {
  margin-bottom: var(--space-12);
}

.gear-tier-header {
  margin-bottom: var(--space-5);
}

.gear-tier-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
}

.gear-tier-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

.gear-tier-stance {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  max-width: 40rem;
}

.gear-tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Gear item cards
   -------------------------------------------------------------------------- */
.gear-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  scroll-margin-top: 140px;
}

.gear-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
}

.gear-item-icon svg,
.gear-icon {
  width: 22px;
  height: 22px;
}

.gear-item-body {
  flex: 1;
  min-width: 0;
}

.gear-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.gear-item-name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.gear-item-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  white-space: nowrap;
}

.gear-item-why,
.gear-item-specs,
.gear-item-skip {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.gear-item-skip {
  margin-bottom: 0;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-gray-200);
}

.gear-item-picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gear-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.gear-pick:hover,
.gear-pick:focus-visible {
  background: var(--color-black);
  border-color: var(--color-black);
  box-shadow: none;
  color: var(--color-white);
  transform: translateY(-1px);
}

.gear-pick:hover .gear-pick-name,
.gear-pick:hover .gear-pick-link,
.gear-pick:focus-visible .gear-pick-name,
.gear-pick:focus-visible .gear-pick-link {
  color: var(--color-white);
}

.gear-pick:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.gear-pick:active {
  transform: translateY(0);
}

/* Mount variants: hide by default; show only the selected mount.
   Must beat .gear-pick { display: flex } (same element has both classes). */
.gear-pick.gear-variant {
  display: none;
}

#mount-any:checked ~ .gear-tiers .gear-variant--any,
#mount-sony-e:checked ~ .gear-tiers .gear-variant--sony-e,
#mount-canon-rf:checked ~ .gear-tiers .gear-variant--canon-rf,
#mount-nikon-z:checked ~ .gear-tiers .gear-variant--nikon-z,
#mount-fuji-x:checked ~ .gear-tiers .gear-variant--fuji-x {
  display: flex;
}

.gear-pick-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800);
  transition: color var(--transition-fast);
}

.gear-pick-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.gear-pick-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.gear-pick:hover .gear-pick-link svg,
.gear-pick:focus-visible .gear-pick-link svg {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .gear-item {
    flex-direction: column;
    padding: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Spend less / FAQ / Cross-links
   -------------------------------------------------------------------------- */
.gear-spend-less {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-12);
}

.gear-spend-less h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

.gear-spend-less p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

.gear-faq {
  margin-bottom: var(--space-12);
}

.gear-faq h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.gear-faq-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.gear-faq-item:first-of-type {
  border-top: 1px solid var(--color-gray-200);
}

.gear-faq-item h3 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.gear-faq-item p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

.gear-explore {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-4);
}

.gear-cross {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
}

@media (max-width: 800px) {
  .gear-cross {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.gear-cross h2 {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}

.gear-cross-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.gear-cross-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.gear-cross-chip:hover,
.gear-cross-chip:focus-visible {
  background: var(--color-black);
  color: var(--color-white);
}

.gear-cross-chip:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.gear-disclosure {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-100);
  margin: 0;
}

.gear-disclosure a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.gear-disclosure a:hover {
  color: var(--color-black);
}

/* Match settings cheatsheet back-link treatment */
.back-link-section {
  padding: var(--space-12) 0;
  background: var(--color-gray-50);
  text-align: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--color-black);
}

.back-link svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* --------------------------------------------------------------------------
   Night vision
   -------------------------------------------------------------------------- */
body.night-vision .gear-input {
  background-color: var(--nv-bg-elevated);
  border-color: var(--nv-border);
  color: var(--nv-text);
}

body.night-vision .gear-input::placeholder {
  color: var(--nv-text-dim);
}

body.night-vision .gear-input:focus {
  border-color: var(--nv-text-dim);
  box-shadow: 0 0 0 3px rgba(204, 51, 51, 0.1);
}

body.night-vision .gear-input-icon {
  color: var(--nv-text-dim);
}

body.night-vision .gear-marquee-btn {
  background-color: var(--nv-bg-elevated);
  border-color: var(--nv-border);
  color: var(--nv-text-muted);
}

body.night-vision .gear-marquee-btn:hover,
body.night-vision .gear-marquee-btn:focus-visible {
  border-color: var(--nv-text-dim);
  color: var(--nv-text);
  background-color: var(--nv-bg-card);
}

body.night-vision .gear-marquee-thumb {
  filter: saturate(0.4) brightness(0.6);
}

body.night-vision .gear-results-inner {
  background-color: var(--nv-bg-card);
  border: 1px solid var(--nv-border);
}

body.night-vision .gear-match-header {
  border-bottom-color: var(--nv-border);
}

body.night-vision .gear-match-name {
  color: var(--nv-text);
}

body.night-vision .gear-match-link,
body.night-vision .gear-match-tagline {
  color: var(--nv-text-dim);
}

body.night-vision .gear-match-link:hover {
  color: var(--nv-text);
}

body.night-vision .gear-essential-chip {
  background: var(--nv-bg-elevated);
  color: var(--nv-text);
}

body.night-vision .gear-essential-chip svg {
  background: var(--nv-bg-card);
  color: var(--nv-text);
}

body.night-vision .gear-no-match-text,
body.night-vision .gear-no-match-btn {
  color: var(--nv-text-dim);
}

body.night-vision .gear-no-match-btn {
  border-color: var(--nv-border);
}

body.night-vision .gear-no-match-btn:hover {
  color: var(--nv-text);
  border-color: var(--nv-text-dim);
  background-color: var(--nv-bg-card);
}

body.night-vision .gear-hero,
body.night-vision .gear-how-card,
body.night-vision .gear-item,
body.night-vision .gear-spend-less {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .gear-hero-title,
body.night-vision .gear-how-title,
body.night-vision .gear-item-name,
body.night-vision .gear-tier-title,
body.night-vision .gear-faq h2,
body.night-vision .gear-spend-less h2,
body.night-vision .gear-faq-item h3,
body.night-vision .gear-pick-name,
body.night-vision .gear-pick-link,
body.night-vision .gear-breadcrumb a:hover,
body.night-vision .gear-cover-chip:hover,
body.night-vision .back-link:hover {
  color: var(--nv-text);
}

body.night-vision .gear-hero-subtitle,
body.night-vision .gear-how-num,
body.night-vision .gear-how-lede,
body.night-vision .gear-how-card p,
body.night-vision .gear-price-legend span,
body.night-vision .gear-item-why,
body.night-vision .gear-item-specs,
body.night-vision .gear-item-skip,
body.night-vision .gear-tier-stance,
body.night-vision .gear-faq-item p,
body.night-vision .gear-spend-less p,
body.night-vision .gear-hub-card-covers,
body.night-vision .gear-disclosure,
body.night-vision .gear-how-disclosure,
body.night-vision .back-link,
body.night-vision .gear-breadcrumb,
body.night-vision .gear-breadcrumb a {
  color: var(--nv-text-muted);
}

body.night-vision .gear-price-legend span {
  background: var(--nv-bg-elevated);
}

body.night-vision .gear-price-legend em,
body.night-vision .gear-how-card h3 {
  color: var(--nv-text);
}

body.night-vision .gear-glance-bar {
  background: var(--nv-bg-elevated);
  border-bottom-color: var(--nv-border);
}

body.night-vision .gear-glance-item {
  color: var(--nv-text);
}

body.night-vision .gear-item-icon {
  background: var(--nv-bg-elevated);
  color: var(--nv-text);
}

body.night-vision .gear-pick {
  background: var(--nv-bg-card);
  border-color: var(--nv-text-muted);
  box-shadow: none;
}

body.night-vision .gear-pick:hover,
body.night-vision .gear-pick:focus-visible {
  background: var(--nv-text);
  border-color: var(--nv-text);
  color: var(--nv-bg-card);
}

body.night-vision .gear-pick:hover .gear-pick-name,
body.night-vision .gear-pick:hover .gear-pick-link,
body.night-vision .gear-pick:focus-visible .gear-pick-name,
body.night-vision .gear-pick:focus-visible .gear-pick-link {
  color: var(--nv-bg-card);
}

body.night-vision .gear-pick:focus-visible {
  outline-color: var(--nv-text);
}

body.night-vision .gear-cover-chip {
  background: var(--nv-bg-elevated);
  color: var(--nv-text-muted);
}

body.night-vision .gear-explore {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .gear-cross-chip {
  background: var(--nv-bg-elevated);
  color: var(--nv-text-muted);
}

body.night-vision .gear-cross-chip:hover,
body.night-vision .gear-cross-chip:focus-visible {
  background: var(--nv-text);
  color: var(--nv-bg-card);
}

body.night-vision .gear-cross-chip:focus-visible {
  outline-color: var(--nv-text);
}

body.night-vision .gear-disclosure {
  border-top-color: var(--nv-border);
}

body.night-vision .back-link-section {
  background: var(--nv-bg-elevated);
}

body.night-vision .gear-mount-switch label {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
  color: var(--nv-text-muted);
}

body.night-vision #mount-any:checked ~ .gear-mount-switch label[for="mount-any"],
body.night-vision #mount-sony-e:checked ~ .gear-mount-switch label[for="mount-sony-e"],
body.night-vision #mount-canon-rf:checked ~ .gear-mount-switch label[for="mount-canon-rf"],
body.night-vision #mount-nikon-z:checked ~ .gear-mount-switch label[for="mount-nikon-z"],
body.night-vision #mount-fuji-x:checked ~ .gear-mount-switch label[for="mount-fuji-x"] {
  background: var(--nv-text);
  border-color: var(--nv-text);
  color: var(--nv-bg-card);
}

body.night-vision .gear-faq-item,
body.night-vision .gear-faq-item:first-of-type,
body.night-vision .gear-item-skip {
  border-color: var(--nv-border);
}