.ymm-seo-page { max-width: 1200px; margin: 0 auto; padding: 20px 15px; }
.ymm-seo-preview-banner { background: #fff3cd; border: 1px solid #e0c36a; color: #5c4a00; padding: 10px 14px; margin-bottom: 16px; font-weight: 600; }
.ymm-seo-breadcrumbs { font-size: 0.9em; margin-bottom: 12px; color: #555; }
.ymm-seo-breadcrumbs a { text-decoration: underline; }
.ymm-seo-intro { margin-bottom: 16px; }
.ymm-seo-page section { margin-top: 32px; }
.ymm-seo-page section ul { margin: 0 0 0 1.2em; }
.ymm-seo-same-years ul, .ymm-seo-other-years ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ymm-seo-faq-item { margin-bottom: 16px; }
.ymm-seo-faq-item h3 { margin: 0 0 4px; font-size: 1.05em; }
.ymm-seo-results .ymm-results-count { font-size: 1.1em; font-weight: 600; margin: 0 0 12px; }

.ymm-seo-same-years li, .ymm-seo-other-years li { margin: 0 16px 8px 0; }

/* Fitment bar — matches YMM Finder's "My Vehicle" bar (.change-my-vehicle) */
.ymm-seo-page .ymm-seo-fitbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 20px; padding: 15px; border: 2px solid #FFDE00; border-radius: 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); background-color: #fff; }
.ymm-seo-page .ymm-seo-fitbar[data-state="confirmed"] { border-color: #0012ca; }
.ymm-seo-page .ymm-seo-fitbar[data-state="saved"] { border-color: #0012ca; }
.ymm-seo-page .ymm-seo-fitbar[data-state="nomatch"] { border-color: #FFDE00; }
.ymm-seo-page .ymm-seo-fitbar > * { margin: 4px 12px 4px 0; }
.ymm-seo-page .ymm-seo-fitbar > *:last-child { margin-right: 0; }
.ymm-seo-page .ymm-seo-fitbar-text { flex: 1 1 auto; font-size: 16px; font-weight: 600; color: #000; }
.ymm-seo-page button.ymm-seo-fit-open { background-color: #010101; color: #fff; border: none; border-radius: 9px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: normal; box-shadow: none; transition: background-color 0.2s ease; }
.ymm-seo-page button.ymm-seo-fit-open:hover, .ymm-seo-page button.ymm-seo-fit-open:focus { background-color: #333; color: #fff; border: none; }
@media screen and (max-width: 768px) {
    .ymm-seo-page .ymm-seo-fitbar { flex-direction: column; text-align: center; }
    .ymm-seo-page .ymm-seo-fitbar > * { margin: 5px 0; }
    .ymm-seo-page button.ymm-seo-fit-open { width: 100%; }
}

/* Fitment popup — matches YMM Finder's "Filter Options" popup (.ymm-attribute-popup) */
html.ymm-seo-fit-lock { overflow: hidden; }
#ymm-seo-fit-popup.ymm-seo-fit-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 100000; }
#ymm-seo-fit-popup.ymm-seo-fit-overlay.active { display: flex; }
#ymm-seo-fit-popup .ymm-seo-fit-dialog { position: relative; background: #fff; border-radius: 6px; width: 90%; max-width: 450px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); font-size: 14px; color: #333; text-align: left; }
#ymm-seo-fit-popup .ymm-seo-fit-header { padding: 16px 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
#ymm-seo-fit-popup .ymm-seo-fit-header h3 { font-size: 18px; font-weight: 600; margin: 0; color: #333; text-transform: none; letter-spacing: normal; line-height: 1.3; }
#ymm-seo-fit-popup button.ymm-seo-fit-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; line-height: 1; padding: 0; width: 30px; height: 30px; min-height: 0; border-radius: 0; box-shadow: none; transition: color 0.2s; }
#ymm-seo-fit-popup button.ymm-seo-fit-close:hover, #ymm-seo-fit-popup button.ymm-seo-fit-close:focus { color: #333; background: none; }
#ymm-seo-fit-popup .ymm-seo-fit-bodywrap { position: relative; flex: 1; padding: 20px; overflow-y: auto; max-height: calc(85vh - 130px); min-height: 80px; }
#ymm-seo-fit-popup .ymm-seo-fit-field { margin-bottom: 16px; }
#ymm-seo-fit-popup .ymm-seo-fit-field:last-child { margin-bottom: 0; }
#ymm-seo-fit-popup .ymm-seo-fit-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #333; text-transform: none; }
#ymm-seo-fit-popup select.ymm-seo-fit-select { width: 100%; height: auto; padding: 10px 12px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #333; cursor: pointer; transition: all 0.2s; }
#ymm-seo-fit-popup select.ymm-seo-fit-select:hover { border-color: #0012ca; }
#ymm-seo-fit-popup select.ymm-seo-fit-select:focus { outline: none; border-color: #0012ca; background: #fff; box-shadow: 0 0 0 3px rgba(0, 18, 202, 0.1); }
#ymm-seo-fit-popup .ymm-seo-fit-error { color: #b00020; margin: 0 0 12px; }
#ymm-seo-fit-popup .ymm-seo-fit-empty { margin: 0; }
#ymm-seo-fit-popup .ymm-seo-fit-loading { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); flex-direction: column; justify-content: center; align-items: center; z-index: 10; font-size: 14px; color: #666; font-weight: 500; }
#ymm-seo-fit-popup .ymm-seo-fit-loading::before { content: ""; display: block; width: 20px; height: 20px; margin: 0 0 12px; border: 3px solid #f3f3f3; border-top: 3px solid #0012ca; border-radius: 50%; animation: ymm-seo-spin 1s linear infinite; }
#ymm-seo-fit-popup .ymm-seo-fit-dialog[aria-busy="true"] .ymm-seo-fit-loading { display: flex; }
@keyframes ymm-seo-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#ymm-seo-fit-popup .ymm-seo-fit-footer { padding: 16px 20px; border-top: 1px solid #ddd; display: flex; justify-content: flex-end; }
#ymm-seo-fit-popup button.ymm-seo-fit-btn { margin-left: 10px; padding: 10px 20px; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: all 0.2s; background: #6c757d; color: #fff; text-transform: none; letter-spacing: normal; box-shadow: none; }
#ymm-seo-fit-popup button.ymm-seo-fit-btn:hover, #ymm-seo-fit-popup button.ymm-seo-fit-btn:focus { background: #5a6268; color: #fff; }
#ymm-seo-fit-popup button.ymm-seo-fit-btn--primary { background: #0012ca; }
#ymm-seo-fit-popup button.ymm-seo-fit-btn--primary:hover, #ymm-seo-fit-popup button.ymm-seo-fit-btn--primary:focus { background: #000fa0; }
#ymm-seo-fit-popup button.ymm-seo-fit-btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
#ymm-seo-fit-popup button.ymm-seo-fit-btn--primary[disabled] { background: #6c8cd4; }
@media (max-width: 768px) {
    #ymm-seo-fit-popup .ymm-seo-fit-dialog { width: 95%; max-height: 90vh; }
    #ymm-seo-fit-popup .ymm-seo-fit-bodywrap { max-height: calc(90vh - 130px); }
    #ymm-seo-fit-popup .ymm-seo-fit-footer { flex-direction: column; }
    #ymm-seo-fit-popup button.ymm-seo-fit-btn { width: 100%; margin: 0 0 8px; }
    #ymm-seo-fit-popup button.ymm-seo-fit-btn:last-child { margin-bottom: 0; }
}

/* ------------------------------------------------------------------
   Parity with the Parts Finder page (/parts-finder/).
   The Finder gets these from page-scoped snippets (body.page-id-32525)
   and Customizer CSS (.ymm-results-container); mirrored here for
   vehicle pages only.
   ------------------------------------------------------------------ */
.ymm-seo-page .custom-products-grid { min-width: 100%; }
.ymm-seo-page .ymm-seo-results .ymm-results-count { font-size: 24px; font-weight: 600; line-height: 1.2; color: #000; margin: 0; }
.ymm-seo-page .ymm-results-container .product-button a { background-color: #000fa7 !important; color: #fff !important; }
.ymm-seo-page .ymm-results-container .product-button a:hover { background-color: #808080 !important; }

@media (max-width: 768px) {
    /* Stack header > filters > divider > products, filters left-aligned */
    .ymm-seo-page .custom-products-grid { display: block !important; }
    .ymm-seo-page .custom-products-grid .ymm-results-header { border-bottom: none !important; padding-bottom: 0 !important; margin-top: 0 !important; }
    .ymm-seo-page .custom-products-grid .ymm-dropdowns-filters { border-bottom: 2px solid rgb(238, 238, 238) !important; padding-bottom: 12px !important; margin-top: 8px !important; align-items: flex-start; justify-content: flex-start; text-align: left; }
    .ymm-seo-page .custom-products-grid .ymm-dropdowns-filters > .ymm-attr-tabs,
    .ymm-seo-page .custom-products-grid .ymm-dropdowns-filters > .ymm-parttype-filter,
    .ymm-seo-page .custom-products-grid .ymm-dropdowns-filters > .ymm-position-filter { margin-left: 0 !important; margin-right: auto !important; justify-content: flex-start !important; align-self: flex-start !important; }
    .ymm-seo-page .ymm-position-filter { align-self: flex-start !important; }

    /* Finder block collapses into the "Shopping for … ▾ Change" bar (built by seo-pages.js) */
    .ymm-seo-page .vehicle-search-form.ymm-container { padding: 0 !important; margin: 0 !important; position: relative; }
    .ymm-seo-page .vehicle-search-form.ymm-container.ymm-seo-collapsible .search-bar,
    .ymm-seo-page .vehicle-search-form.ymm-container.ymm-seo-collapsible [id^="results-"] { display: none; }
    .ymm-seo-page .vehicle-search-form.ymm-container.ymm-seo-collapsible.is-expanded .search-bar { display: flex; padding: 16px; }
    .ymm-seo-page .vehicle-search-form.ymm-container.ymm-seo-collapsible.is-expanded [id^="results-"] { display: block; }
    .ymm-seo-page .ymm-collapsed-toggle,
    .ymm-seo-page .ymm-collapsed-toggle:hover,
    .ymm-seo-page .ymm-collapsed-toggle:focus,
    .ymm-seo-page .ymm-collapsed-toggle:active { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; border: 0; margin: 0; cursor: pointer; background: #0012CA; color: #fff; font-family: Archivo, sans-serif; font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: -0.4px; line-height: 1.2; -webkit-appearance: none; appearance: none; border-radius: 0; text-decoration: none; }
    .ymm-seo-page .ymm-collapsed-toggle:focus { outline: 2px solid #FFDE00; outline-offset: -2px; }
    .ymm-seo-page .ymm-collapsed-toggle .ymm-ct-left { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
    .ymm-seo-page .ymm-collapsed-toggle .ymm-ct-eyebrow { font-size: 11px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.5px; font-weight: 600; margin-bottom: 1px; }
    .ymm-seo-page .ymm-collapsed-toggle .ymm-ct-vehicle { font-weight: 700; font-size: 14px; color: #fff; }
    .ymm-seo-page .ymm-collapsed-toggle .ymm-ct-chev { display: inline-block; transition: transform 0.2s ease; font-size: 14px; margin-left: 12px; color: #fff; }
}
@media (min-width: 769px) {
    .ymm-seo-page .ymm-collapsed-toggle { display: none; }
}

/* Hub pages */
.ymm-seo-hub-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 8px 20px; }
.ymm-seo-hub-list li { margin: 0; }
.ymm-seo-hub-list small { display: block; color: #666; }
@media (max-width: 600px) { .ymm-seo-hub-list { grid-template-columns: 1fr 1fr; grid-gap: 10px 16px; } }
.ymm-seo-hub section { margin-top: 28px; }
.ymm-seo-shared ul { margin: 0 0 0 1.2em; }

/* Product page: vehicles this part fits */
.ymm-seo-fits { margin: 24px 0; }
.ymm-seo-fits ul { margin: 0 0 8px 1.2em; padding: 0; }
.ymm-seo-fits li { margin-bottom: 6px; line-height: 1.5; }
.ymm-seo-fits details summary { cursor: pointer; margin: 8px 0; font-weight: 600; }
.ymm-seo-fits a { text-decoration: underline; }

/* ------------------------------------------------------------------
   Finder parity with the homepage "Search by Vehicle" section.
   The Finder's own button styling targets #find-blade-default (the
   homepage instance id); our instance is "seo", so mirror it here.
   ------------------------------------------------------------------ */
.ymm-seo-page .vehicle-search-form button.search-btn,
.ymm-seo-page .vehicle-search-form button.search-btn:hover,
.ymm-seo-page .vehicle-search-form button.search-btn:focus {
    padding: 0 50px;
    background: #0012ca;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-transform: none;
    transition: background 0.3s ease;
}
.ymm-seo-page .vehicle-search-form button.search-btn:hover { background: #000fa0; }
@media screen and (max-width: 1024px) {
    .ymm-seo-page .vehicle-search-form button.search-btn { padding-top: 15px; padding-bottom: 15px; }
}

/* Hub pages: grey band with heading + note, like the homepage section */
.ymm-seo-page .ymm-seo-finder--band { background: #f5f5f5; padding: 73px 40px 93px; margin-top: 40px; }
.ymm-seo-page .ymm-seo-finder-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 35px; }
.ymm-seo-page .ymm-seo-finder--band h2.ymm-seo-finder-title { margin: 0 24px 0 0; font-family: Archivo, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.13; letter-spacing: 0.9px; text-transform: uppercase; color: #000; }
.ymm-seo-page .ymm-seo-finder-note { margin: 0; font-family: Archivo, sans-serif; font-size: 15px; line-height: 23px; color: #000; text-align: right; }
@media (max-width: 768px) {
    .ymm-seo-page .ymm-seo-finder--band { padding: 48px 16px 63px; margin-left: -15px; margin-right: -15px; }
    .ymm-seo-page .ymm-seo-finder-head { display: block; margin-bottom: 35px; }
    .ymm-seo-page .ymm-seo-finder--band h2.ymm-seo-finder-title { font-size: 32px; line-height: 32px; margin: 0 0 20px; }
    .ymm-seo-page .ymm-seo-finder-note { text-align: left; }
}