/* Autoplaza - supplementary stylesheet for shells the phase-1 bundle does not cover.
   Only the new WordPress-side wrappers live here; component-level styles stay in styles.min.css. */

.ap-main { display: block; }

/* Generic page shell --------------------------------------------------- */
.ap-page-head { padding: 32px 0 16px; }
.ap-page-head h1 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); font-size: clamp(28px, 4vw, 44px); margin: 0 0 8px; }
.ap-page-head__sub { color: var(--ap-muted, #6b7280); margin: 0; }

/* Info-page layout ----------------------------------------------------- */
.ap-info-page { padding-top: 24px; padding-bottom: 64px; }
.ap-info-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.ap-info-page__main { display: grid; gap: 24px; }
@media (max-width: 980px) { .ap-info-page__layout { grid-template-columns: 1fr; } }

.ap-info-hero { padding: 8px 0 16px; }
.ap-info-hero__eyebrow { color: var(--ap-red, #FF1D3B); }
.ap-info-hero__title { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); font-size: clamp(28px, 4vw, 48px); margin: 8px 0 12px; line-height: 1.1; }
.ap-info-hero__lead { color: var(--ap-muted, #6b7280); max-width: 64ch; margin: 0; }

.ap-info-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 24px; }
.ap-info-card__title { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); font-size: 22px; margin: 0 0 12px; }
.ap-info-card__lead { color: var(--ap-muted, #6b7280); margin: 0 0 16px; }
.ap-info-card--content :is(h2, h3) { margin-top: 24px; }
.ap-info-card--content a { color: var(--ap-red, #FF1D3B); }

.ap-info-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: step; }
@media (min-width: 769px) {
  .ap-info-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-info-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Numbered "how it works" step - surface card + solid-red badge. `step`
   increments ONCE, here on .ap-info-step (NOT also on ::before) so the badges
   read 1,2,3,4 rather than 2,4,6,8. */
.ap-info-step { counter-increment: step; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; background: var(--ap-white, #fff); border: 1px solid var(--ap-border, #e4e8ea); border-radius: var(--ap-radius-lg, 22px); box-shadow: var(--ap-shadow-sm, 0 1px 2px rgba(29,30,47,.06), 0 1px 1px rgba(29,30,47,.04)); }
.ap-info-step::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; background: var(--ap-red, #FF1D3B); color: var(--ap-white, #fff); display: grid; place-items: center; font-family: var(--ap-f-display, "Momo Trust Display", "Ubuntu", sans-serif); font-weight: 800; font-size: 14px; line-height: 1; box-shadow: 0 4px 12px rgba(255,29,59,.35); }
.ap-info-step__title { display: block; font-family: var(--ap-f-display, "Momo Trust Display", "Ubuntu", sans-serif); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ap-ink, #1d1e2f); }
.ap-info-step__body { display: block; color: var(--ap-muted, #6b7280); font-size: 13.5px; line-height: 1.5; }

.ap-info-banks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; align-items: center; }
.ap-info-banks img { max-width: 100%; height: 36px; object-fit: contain; opacity: .85; filter: grayscale(.4); transition: filter .2s, opacity .2s; }
.ap-info-banks img:hover { filter: none; opacity: 1; }

.ap-info-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ap-info-table th, .ap-info-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.ap-info-table thead th { background: #fafafa; }

.ap-info-form { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 24px; display: grid; gap: 16px; }
.ap-info-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-info-form__full { grid-column: 1 / -1; }
.ap-info-form label:not(.ap-info-form__consent) { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ap-info-form input, .ap-info-form textarea, .ap-info-form select { width: 100%; }
.ap-info-form__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ap-muted, #6b7280); font-weight: 400; }
.ap-info-form__consent a, .ap-contact-form__consent a { text-decoration: underline; }
@media (max-width: 640px) { .ap-info-form__grid { grid-template-columns: 1fr; } }

/* Catalog --------------------------------------------------------------- */
.ap-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.ap-catalog-head h1 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); font-size: clamp(28px, 4vw, 40px); margin: 0; }
.ap-catalog-head__sub { color: var(--ap-muted, #6b7280); margin: 6px 0 0; }
.ap-catalog-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.ap-catalog-main { display: grid; gap: 16px; }
@media (max-width: 980px) { .ap-catalog-layout { grid-template-columns: 1fr; } .ap-catalog-layout .ap-filter-panel--inline { display: none; } }
.ap-catalog-empty { padding: 48px 16px; text-align: center; background: #fafafa; border-radius: 16px; grid-column: 1 / -1; }
.ap-catalog-empty h2 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); margin: 0 0 8px; }

/* Listing detail extras ------------------------------------------------ */
.ap-cd-trade { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: linear-gradient(135deg, #1D1E2F, #2a2c45); color: #fff; padding: 24px; border-radius: 16px; }
.ap-cd-trade__text h3 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); margin: 8px 0 4px; font-size: 22px; }
.ap-cd-trade__text p { color: rgba(255, 255, 255, .75); margin: 0; }
@media (max-width: 720px) { .ap-cd-trade { grid-template-columns: 1fr; } }

.ap-cd-map { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; overflow: hidden; }
.ap-cd-map header { padding: 16px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.ap-cd-map header h3 { margin: 4px 0 4px; font-family: var(--ap-f-display, "Space Grotesk", sans-serif); }
.ap-cd-map iframe { width: 100%; height: 360px; border: 0; display: block; }

.ap-cd-history-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 24px; display: grid; gap: 12px; }
.ap-cd-history-card header { display: grid; gap: 4px; }
.ap-cd-history-card__checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ap-cd-history-card__checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.ap-cd-history-card__vin { font-family: var(--ap-f-mono, "JetBrains Mono", monospace); font-size: 12px; color: var(--ap-muted, #6b7280); }

.ap-cd-model-seo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; background: #fafafa; border-radius: 16px; padding: 24px; }
.ap-cd-model-seo__brand img { max-width: 100%; height: auto; opacity: .85; }
.ap-cd-model-seo__text h2 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); margin: 6px 0 8px; }
@media (max-width: 640px) { .ap-cd-model-seo { grid-template-columns: 1fr; text-align: center; } }

.ap-cd-empty { padding: 16px; color: var(--ap-muted, #6b7280); }

/* Contact-page locations ----------------------------------------------- */
.ap-contact-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.ap-contact-location { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; overflow: hidden; }
.ap-contact-location h2 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); padding: 16px 20px 6px; margin: 0; }
.ap-contact-location p { padding: 0 20px; margin: 4px 0; color: var(--ap-muted, #6b7280); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.ap-contact-location iframe { width: 100%; height: 260px; border: 0; display: block; margin-top: 12px; }
@media (max-width: 760px) { .ap-contact-locations { grid-template-columns: 1fr; } }

/* Auth ------------------------------------------------------------------ */
/* The /auth page is fully styled by the built bundle (pages/auth.css:
   .ap-auth two-column card, pill tabs, forms, dark perks pane). The old
   single-column rules that used to live here (max-width:480px on .ap-auth,
   underline .ap-auth__tab, dead .ap-auth__panel) loaded AFTER styles.min.css
   and overrode the new layout - squishing the two panes into a 480px strip.
   Removed. Do NOT re-add auth layout here; own it in pages/auth.css. */

/* Posts / blog --------------------------------------------------------- */
.ap-content-page { display: grid; gap: 24px; max-width: 800px; margin: 0 auto; padding: 32px 0; }
.ap-content-page__hero img { width: 100%; height: auto; border-radius: 16px; }
.ap-content-page__body { line-height: 1.7; color: #1D1E2F; }
.ap-content-page__body :is(h2, h3) { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); }
.ap-content-page__body a { color: var(--ap-red, #FF1D3B); }
.ap-content-page__body img { max-width: 100%; height: auto; border-radius: 8px; }

.ap-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.ap-post-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; overflow: hidden; }
.ap-post-card__photo img { width: 100%; height: 180px; object-fit: cover; display: block; }
.ap-post-card__body { padding: 16px; }
.ap-post-card__body h2 { font-size: 18px; margin: 6px 0 8px; font-family: var(--ap-f-display, "Space Grotesk", sans-serif); }
.ap-post-card__body h2 a { color: inherit; text-decoration: none; }
.ap-post-card__meta { font-family: var(--ap-f-mono, "JetBrains Mono", monospace); font-size: 11px; color: var(--ap-muted, #6b7280); }

/* 404 ----------------------------------------------------------------- */
.ap-404 { text-align: center; padding: 80px 16px; }
.ap-404 h1 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); font-size: clamp(48px, 8vw, 96px); margin: 0 0 16px; }

/* Search form helper -------------------------------------------------- */
.ap-searchform { display: flex; gap: 8px; margin: 16px 0; }
.ap-searchform input { flex: 1; }

/* Comments --------------------------------------------------------- */
.ap-comments { max-width: 800px; margin: 32px auto; }
.ap-comments h3 { font-family: var(--ap-f-display, "Space Grotesk", sans-serif); }
.ap-comment-list { list-style: none; padding: 0; display: grid; gap: 12px; }