/* Dimbike components — every value comes from tokens.css */
html, body { margin: 0; background: var(--surface-0); color: var(--ink-body); font-family: var(--font-body); font-size: 15px; line-height: 25.5px; }
.db-root { padding: 24px; }
.db-row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }
.db-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.db-h { font-family: var(--font-heading); font-weight: 600; color: var(--ink); margin: 0; }

/* Focus ring: solid red-300, 6.9:1 on surface-0 */
.db-btn:focus-visible, .db-chip:focus-visible, .db-nav a:focus-visible, .db-field input:focus-visible, .db-field select:focus-visible, .db-field textarea:focus-visible, .db-vcard a:focus-visible { outline: 2px solid var(--red-300); outline-offset: 2px; }

/* Button */
.db-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-20); font-family: var(--font-body); font-size: 15px; line-height: 15px; font-weight: 700; text-transform: uppercase; padding: var(--button-y) var(--button-x); border: 1px solid transparent; border-radius: var(--radius-0); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.db-btn-primary { background: var(--red-500); border-color: var(--red-500); color: var(--ink); }
.db-btn-primary:hover { background: var(--red-700); border-color: var(--red-700); color: var(--ink); }
.db-btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.db-btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-900); }
.db-btn-ghost { background: transparent; color: var(--red-300); padding-left: 0; padding-right: 0; }
.db-btn-ghost:hover { color: var(--ink); }
.db-btn-block { width: 100%; }
.db-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Badge */
.db-badge { display: inline-block; font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 700; text-transform: uppercase; padding: 2px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.db-badge-new { background: var(--red-500); color: var(--ink); }
.db-badge-used { background: transparent; border-color: var(--ink); color: var(--ink); }
.db-badge-available { background: var(--green-available); color: var(--ink-900); }
.db-badge-reserved { background: var(--surface-100); border-color: var(--border); color: var(--ink-body); }
.db-badge-sold { background: var(--ink-muted); color: var(--ink-900); }

/* Header */
.db-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); background: var(--surface-0); padding: 16px var(--section-x); border-bottom: 1px solid var(--surface-200); }
.db-header img { height: 51px; width: auto; display: block; }
.db-nav { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.db-nav a { font-family: var(--font-body); font-size: 15px; line-height: 25.5px; font-weight: 600; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 0 var(--nav-x); white-space: nowrap; }
.db-nav a:hover, .db-nav a[aria-current="page"] { color: var(--red-300); }

/* Section heading */
.db-sh { display: flex; flex-direction: column; gap: var(--space-30); max-width: var(--container-narrow); }
.db-sh-center { align-items: center; text-align: center; margin: 0 auto; }
.db-eyebrow { font-family: var(--font-body); font-size: 15px; line-height: 25.5px; font-weight: 400; color: var(--ink-body); margin: 0; }
.db-sh h1 { font-size: 56px; line-height: 1.2; }
.db-sh h2 { font-size: 40px; line-height: 1.3; }
.db-sh p.db-intro { margin: 0; color: var(--ink-body); }

/* Service / argument card */
.db-service { display: flex; flex-direction: column; gap: var(--space-30); padding: var(--space-50) 0; border-top: 1px solid var(--border); }
.db-service-num { font-family: var(--font-heading); font-size: 30px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.db-service h3 { font-size: 23px; line-height: 1.3; }
.db-service p { margin: 0; }

/* Stat */
.db-stat { display: flex; flex-direction: column; gap: var(--space-20); }
.db-stat-value { font-family: var(--font-accent); font-size: 56px; line-height: 1.1; font-weight: 600; color: var(--red-300); }
.db-stat-label { color: var(--ink-body); }

/* Testimonial */
.db-quote { background: var(--surface-200); padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-40); margin: 0; }
.db-quote blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.6; color: var(--ink); }
.db-quote figcaption { font-family: var(--font-heading); font-weight: 600; color: var(--red-300); }

/* CTA band */
.db-cta { background: var(--surface-100); padding: var(--section-y) var(--section-x); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-40); }
.db-cta h2 { font-size: 40px; line-height: 1.3; max-width: var(--container-narrow); }
.db-cta p { margin: 0; max-width: var(--container-narrow); }

/* Vehicle card */
.db-vcard { background: var(--surface-100); border: 1px solid var(--surface-200); display: flex; flex-direction: column; border-radius: var(--radius-0); overflow: hidden; }
.db-vcard-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-200); }
.db-vcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-vcard-media .db-badge { position: absolute; top: 12px; left: 12px; }
.db-vcard-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 13px; text-transform: uppercase; }
.db-vcard-body { padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-30); flex: 1; }
.db-vcard-brand { font-size: 13px; line-height: 20px; text-transform: uppercase; color: var(--red-300); font-weight: 600; }
.db-vcard h3 { font-size: 23px; line-height: 1.3; }
.db-vcard-meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.db-vcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-40); margin-top: auto; padding-top: var(--space-40); border-top: 1px solid var(--surface-200); }
.db-price { display: flex; flex-direction: column; }
.db-price-value { font-family: var(--font-accent); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.db-price-old { font-size: 13px; line-height: 20px; color: var(--ink-muted); text-decoration: line-through; }
.db-price-note { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.db-vcard-sold .db-vcard-media img { filter: grayscale(1); opacity: .6; }

/* Specs */
.db-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--surface-200); border: 1px solid var(--surface-200); margin: 0; }
.db-specs div { background: var(--surface-100); padding: var(--space-40); display: flex; flex-direction: column; gap: 2px; }
.db-specs dt { font-size: 13px; line-height: 20px; text-transform: uppercase; color: var(--ink-muted); }
.db-specs dd { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--ink); }

/* Filter chips */
.db-chips { display: flex; flex-wrap: wrap; gap: var(--space-30); }
.db-chip { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 600; text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--ink-body); cursor: pointer; }
.db-chip:hover { border-color: var(--ink); color: var(--ink); }
.db-chip[aria-pressed="true"] { background: var(--red-500); border-color: var(--red-500); color: var(--ink); }

/* Field */
.db-field { display: flex; flex-direction: column; gap: 6px; }
.db-field label { font-size: 13px; line-height: 20px; font-weight: 600; text-transform: uppercase; color: var(--ink-body); }
.db-field input, .db-field select, .db-field textarea { font-family: var(--font-body); font-size: 15px; line-height: 25.5px; color: var(--ink); background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; }
.db-field input::placeholder, .db-field textarea::placeholder { color: var(--ink-muted); }
.db-field-hint { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.db-field-error input, .db-field-error select, .db-field-error textarea { border-color: var(--red-300); }
.db-field-error .db-field-hint { color: var(--ink); }
.db-field-error .db-field-hint::before { content: "⚠ "; color: var(--red-300); }

/* Footer */
.db-footer { background: var(--surface-0); border-top: 1px solid var(--surface-200); padding: var(--space-60) var(--section-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); font-size: 15px; color: var(--ink-body); }
.db-footer img { height: 40px; width: auto; }
.db-footer nav { display: flex; gap: var(--gap); }
.db-footer a { color: var(--ink-body); text-decoration: none; }
.db-footer a:hover { color: var(--red-300); }

@media (max-width: 720px) {
  .db-header, .db-footer { padding-left: 24px; padding-right: 24px; }
  .db-cta { padding: 64px 24px; }
  .db-sh h1 { font-size: 35px; }
  .db-sh h2, .db-cta h2 { font-size: 30px; }
}