/* The Truckers Hub: Driver Gear / Equipo para camioneros (scripts/truckershub/build-gear.mjs, W434). Loaded after styles.css on those
   two pages only. Site tokens only (orange, tar, concrete; no blue, no yellow). Bump GEAR_CSS_VERSION in build-gear.mjs on every change. */
.gear-head { padding: 32px 0 8px; }
.gear-head .lead { color: var(--muted); max-width: 46em; font-size: 1.1rem; }
.gear-why {
  max-width: 52em; margin: 20px 0 4px; padding: 18px 22px;
  background: var(--note-bg); border: 1px solid var(--note-line); border-radius: var(--radius);
}
.gear-why h2 { font-size: 1.25rem; margin: 0 0 8px; }
.gear-why ul { margin: 0; padding-left: 1.2em; }
.gear-why li { margin-bottom: 4px; }
.gear-why li:last-child { margin-bottom: 0; }

.gear-list-block { padding-top: 24px; }
.gear-list-block h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.gear-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 720px) { .gear-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .gear-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gear-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.gear-pic { display: grid; place-items: center; height: 170px; background: var(--surface-2); }
.gear-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gear-icon { width: 112px; height: 112px; }
.gi-panel { fill: var(--surface); stroke: var(--text); stroke-width: 4; stroke-linejoin: round; }
.gi-line { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.gi-fill { fill: var(--brand); }
.gi-cut { fill: none; stroke: #1C1B19; stroke-width: 3; stroke-linecap: round; }
.gear-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.gear-body h3 { margin: 0; font-size: 1.15rem; }
.gear-body p { margin: 0; }
.gear-ship {
  align-self: flex-start; padding: 3px 10px; border-radius: 3px;
  font-size: .85rem; font-weight: 700; background: var(--surface-2); color: var(--text);
}
.gear-ship.overseas { background: var(--note-bg); box-shadow: inset 0 0 0 1px var(--note-line); }
.gear-facts { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.gear-facts li { margin-bottom: 2px; }
.gear-buy { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.gear-price { font-size: 1.25rem; font-weight: 800; }
.gear-price .small { font-weight: 600; }
.gear-soon {
  display: block; padding: 10px 14px; text-align: center;
  border: 2px dashed var(--field-line); border-radius: var(--radius); font-weight: 700; color: var(--muted);
}
.gear-fine { max-width: 52em; margin-top: 28px; }
.gear-ask { margin-top: 8px; }
.gear-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }