/* Final Buy-page hierarchy and selector sizing pass. */

/* The boxed tool names do enough separation on their own. */
#used-guide {
  margin-top: 48px;
}

/* Slightly smaller, deliberately heavier primary headings. */
.spec-intro h1,
.section-title h2 {
  font-size: clamp(2.875rem, 6.8vw, 6.375rem);
  font-weight: 950;
}

/* Compact selector buttons: CHOOSE: over SCOOTER 1 / SCOOTER 2 or the selected scooter. */
.comparison-picker {
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.selector-slot {
  position: relative;
  z-index: 1;
  display: flex;
  align-self: stretch;
}

.selector-slot:focus-within,
.selector-slot:has(.cascade-menu:not([hidden])) {
  z-index: 60;
}

.scooter-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  height: 100%;
  padding: 9px 14px;
  touch-action: manipulation;
}

.choice-label {
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .14em;
}

.choice-name {
  display: block;
  margin-top: 4px;
  font-size: clamp(.92rem, 1.8vw, 1.18rem);
  line-height: 1.05;
}

.versus {
  width: 42px;
  padding: 0;
  text-align: center;
}

.cascade-menu[hidden] {
  display: none !important;
}

.cascade-menu:not([hidden]) {
  display: block;
}

@media (min-width: 851px) {
  .cascade-menu {
    height: 430px;
    overflow: hidden;
  }

  .cascade-columns {
    height: 100%;
    min-height: 0;
  }

  .cascade-list {
    max-height: 389px;
  }
}

/* The revised guide is calmer and needs less introductory apparatus. */
.guide-grid article {
  padding-top: 16px;
}

.negotiation-card {
  border-color: #4f7341 !important;
}

.guide-grid .negotiation-card::before {
  background: var(--green);
}

.negotiation-card .guide-step,
.negotiation-card h3 {
  color: var(--green);
}

@media (max-width: 620px) {
  .spec-intro h1,
  .section-title h2 {
    font-size: clamp(2.375rem, 12.6vw, 4.125rem);
    font-weight: 950;
  }

  .comparison-picker {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 5px;
  }

  .versus {
    width: 30px;
    font-size: .92rem;
  }

  .scooter-choice {
    min-height: 72px;
    padding: 8px 6px;
  }

  .choice-label {
    font-size: .59rem;
    letter-spacing: .1em;
  }

  .choice-name {
    font-size: clamp(.76rem, 3.5vw, .92rem);
  }

  #used-guide {
    margin-top: 34px;
  }
}