/* ═══════════════════════════════════════════════════════════════════════ MKM — SITE-WIDE CSS SLOT · FULL PASTE (replace the ENTIRE slot; BOTH the desktop and mobile CSS slots get this identical content). Assembled from the six css-N piece files — regenerate pieces and this file together. Rebuilt 2026-07-18 · + hhero typography armor vs OEM theme layer. ═══════════════════════════════════════════════════════════════════════ */ /* ════════════════════ SLOT PIECE: 1 · legacy fixes ════════════════════ */ /* renee.laporte - removing underline on Trade-In Appraisal */ .vdp .tradein a {text-decoration: none;} /* reneelaporte - prevent image stacking effect in DEAs*/ .wysiwyg-image {margin: 0; display: inline;} /* reneelaporte - adjusted width of main nav */ .ui-widget-content a.btn {color:#000000;} /* Fix FV page formatting (F11 specific) */ /* reneelaporte - fix Featured Vehicles layout */ .inventory-featured-default .auto .description {height:85px;} /* reneelaporte - options split into two columns */ .inventory-detail-packages-options #options .option-table tr {width:50%; float:left;} .inventory-detail-packages-options #options .option-table .option-item-description {width:40%;} .inventory-detail-packages-options #options .option-table .option-item-description h3 {width:100%;} /* reneelaporte - text area on UI widget / change text to black */ textarea.ui-widget-content {background-color: #ffffff;color: #000000;} /* reneelaporte - updated video images */ .video-gallery .video-thumbs .yui3-u-1-5 {width:auto;} .reviews-auto-listing ul li {text-indent:0} /* M-00212869 billyh */ .ddc-mega-menu-nav .inventory-featured-default .hproduct h3 {height: 20px;} .ddc-mega-menu-nav .inventory-featured-default .hproduct .pricing {padding-top: 0px;} .ddc-mega-menu-nav .inventory-featured-default .hproduct .description {line-height: 20px;} /* M-00474840 billyh */ .inventory-listing-default .pricing .eprice {font-size: 13px; white-space: normal;} /* ════════════════════ SLOT PIECE: 2 · OSP sales specials (+ shared --osp- :root) ════════════════════ */ :root { /* ============================================================ Dean McCrary Kia — Hattiesburg (Kia: Midnight / dark — v2.0 kit) Edit values here to retheme. Body tokenized (var(--osp-*)); muted meta text uses --osp-muted-rgb; select-chevron stroke (x8) is a theme-coupled literal set #FFFFFF for the dark surface. ============================================================ */ --osp-bg: #05141F; --osp-bg-2: #0A1C2A; --osp-bg-3: #122638; --osp-bg-4: #122638; --osp-surface: #0A1C2A; --osp-surface-2: #122638; --osp-accent: #FFFFFF; --osp-accent-mid: #E8EBEE; --osp-accent-deep: #8FA0AE; --osp-text: #FFFFFF; --osp-on-surface: #FFFFFF; /* text on dark cards/page */ --osp-on-accent: #05141F; /* text on white accent fills */ --osp-muted: #E8EBEE; /* = accent-mid: muted label layer (light) */ --osp-border: #1B2F40; --osp-ev: #238705; --osp-apr: #2F6FB0; --osp-lease: #3F8F6B; --osp-alert: #C0392B; --osp-bg-rgb: 5,20,31; --osp-surface-2-rgb: 18,38,56; --osp-accent-mid-rgb: 232,235,238; --osp-accent-deep-rgb: 143,160,174; --osp-text-rgb: 255,255,255; --osp-muted-rgb: 232,235,238; } /* ════════════════════════════════════════════════════════════════ ODYSSEY SPECIALS — Sales Specials Page CSS (responsive, single file) Paste into the DDC site's Custom CSS. Scoped entirely to .od-specials / .ods-* . No CSS variables. STORE-AGNOSTIC — identical for every store (no Ford/Kia specifics live in CSS; colors are the shared dark/gold theme). Desktop base + mobile overrides via @media (max-width:980px). ════════════════════════════════════════════════════════════════ */ /* ── DESKTOP / BASE ── */ /* container backdrop: opaque bg so backgroundless sections (disclaimer, trade, etc.) never show the light DDC page through on dark-theme stores. Token-driven: dark on dark stores, white on light. */ .od-specials{background:var(--osp-bg)!important} .od-specials .ods-mobile-only{display:none!important} .od-specials .ods-hero{background:var(--osp-bg)!important;padding:56px 72px 52px!important;position:relative!important;overflow:hidden!important} .od-specials .ods-hero::before{content:''!important;position:absolute!important;inset:0!important;background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(var(--osp-muted-rgb),.07),transparent 65%)!important;pointer-events:none!important} .od-specials .ods-hero::after{content:''!important;position:absolute!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:80%!important;max-width:1000px!important;height:2px!important;background:linear-gradient(90deg,transparent 0%,rgba(var(--osp-accent-deep-rgb),.15) 15%,var(--osp-accent-mid) 50%,rgba(var(--osp-accent-deep-rgb),.15) 85%,transparent 100%)!important} .od-specials .ods-hero-inner{position:relative!important;z-index:1!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important} .od-specials .ods-hero-eyebrow{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-accent)!important;margin-bottom:12px!important} .od-specials .ods-hero-title{font-family:'Inter','Roboto',sans-serif!important;font-size:48px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:1px!important;color:var(--osp-on-surface)!important;line-height:1!important;margin-bottom:10px!important} .od-specials .ods-hero-title span{color:var(--osp-accent)!important} .od-specials .ods-hero-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:15px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.75)!important;line-height:1.65!important;max-width:480px!important} .od-specials .ods-hero-stats{display:flex!important;gap:32px!important;padding-bottom:4px!important} .od-specials .ods-hero-stat-num{font-family:'Inter','Roboto',sans-serif!important;font-size:30px!important;font-weight:900!important;color:var(--osp-accent)!important;line-height:1!important} .od-specials .ods-hero-stat-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important;margin-top:4px!important} .od-specials .ods-filter-panel{background:var(--osp-bg-4)!important;border-bottom:1px solid rgba(var(--osp-muted-rgb),.12)!important;padding:0 72px!important;display:flex!important;align-items:stretch!important;position:sticky!important;top:0!important;z-index:20!important} .od-specials .ods-filter-group{display:flex!important;flex-direction:column!important;justify-content:center!important;padding:14px 0!important} .od-specials .ods-filter-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important;margin-bottom:7px!important} .od-specials .ods-filter-select{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:9px 32px 9px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.25)!important;color:var(--osp-accent)!important;outline:none!important;cursor:pointer!important;transition:border-color .2s!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:dark!important;min-width:130px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important} .od-specials .ods-filter-select:focus,.od-specials .ods-filter-select:hover{border-color:var(--osp-accent-mid)!important} .od-specials .ods-filter-select:disabled{opacity:.4!important;cursor:not-allowed!important} .od-specials .ods-filter-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important;font-family:'Inter','Roboto',sans-serif!important;text-transform:none!important} .od-specials .ods-filter-div{width:1px!important;height:34px!important;background:rgba(var(--osp-muted-rgb),.1)!important;margin:0 16px!important;flex-shrink:0!important;align-self:center!important} .od-specials .ods-filter-right{margin-left:auto!important;display:flex!important;align-items:center!important;gap:14px!important} .od-specials .ods-results-count{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.5)!important;white-space:nowrap!important} .od-specials .ods-results-count span{color:var(--osp-accent)!important} .od-specials .ods-sort-select{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:8px 28px 8px 12px!important;background:rgba(var(--osp-bg-rgb),.8)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;color:var(--osp-accent)!important;outline:none!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important} .od-specials .ods-spotlight-label,.od-specials .ods-grid-label{display:flex!important;align-items:center!important;gap:14px!important;margin-bottom:16px!important} .od-specials .ods-spotlight-label-text,.od-specials .ods-grid-label-text{font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important;white-space:nowrap!important} .od-specials .ods-spotlight-label-line,.od-specials .ods-grid-label-line{flex:1!important;height:1px!important;background:rgba(var(--osp-muted-rgb),.1)!important} .od-specials .ods-spotlight-wrap{padding:36px 72px 0!important} .od-specials .ods-spotlight-card{background:linear-gradient(135deg,var(--osp-surface-2) 0%,var(--osp-bg-2) 50%,var(--osp-surface-2) 100%)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;border-top:3px solid var(--osp-accent-mid)!important;display:grid!important;grid-template-columns:380px 1fr!important;overflow:hidden!important;position:relative!important} .od-specials .ods-spotlight-tag{position:absolute!important;top:14px!important;right:20px!important;font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:var(--osp-accent-mid)!important;padding:4px 12px!important;z-index:2!important} .od-specials .ods-spotlight-left{display:flex!important;flex-direction:column!important;border-right:1px solid rgba(var(--osp-muted-rgb),.1)!important} .od-specials .ods-spotlight-img{height:320px!important;background:linear-gradient(135deg,var(--osp-surface),var(--osp-bg-4))!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;flex-shrink:0!important} .od-specials .ods-spotlight-img img{width:100%!important;height:100%!important;object-fit:cover!important} .od-specials .ods-spotlight-img-ph{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.12)!important} .od-specials .ods-spotlight-ctas{padding:14px 18px!important;display:flex!important;flex-direction:column!important;gap:8px!important;background:rgba(var(--osp-bg-rgb),.3)!important} .od-specials .ods-spotlight-right{padding:28px 32px!important;display:flex!important;flex-direction:column!important} .od-specials .ods-spotlight-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;margin-bottom:14px!important} .od-specials .ods-spotlight-name{font-family:'Inter','Roboto',sans-serif!important;font-size:22px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;letter-spacing:1px!important;line-height:1.1!important} .od-specials .ods-spotlight-badge{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(90deg,var(--osp-accent),var(--osp-accent-mid))!important;padding:5px 14px!important;white-space:nowrap!important;flex-shrink:0!important;margin-left:16px!important;margin-top:2px!important} .od-specials .ods-spotlight-trims{display:flex!important;flex-wrap:wrap!important;gap:0!important;margin-bottom:16px!important} .od-specials .ods-trim-chip{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important;background:transparent!important;border:1px solid rgba(var(--osp-muted-rgb),.2)!important;padding:8px 16px!important;cursor:pointer!important;transition:all .2s!important;margin:0 -1px -1px 0!important} .od-specials .ods-trim-chip:hover{color:var(--osp-accent)!important;border-color:rgba(var(--osp-muted-rgb),.4)!important;z-index:1!important;position:relative!important} .od-specials .ods-trim-chip.active{color:var(--osp-accent)!important;border-color:var(--osp-accent-mid)!important;background:rgba(var(--osp-muted-rgb),.08)!important;z-index:2!important;position:relative!important} .od-specials .ods-card-trim-wrap{padding:0 13px 4px!important} .od-specials .ods-card-trim-select{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:7px 28px 7px 10px!important;background:rgba(var(--osp-bg-rgb),.7)!important;border:1px solid rgba(var(--osp-muted-rgb),.25)!important;color:var(--osp-accent)!important;outline:none!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:dark!important;width:100%!important;transition:border-color .2s!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important} .od-specials .ods-card-trim-select:hover,.od-specials .ods-card-trim-select:focus{border-color:var(--osp-accent-mid)!important} .od-specials .ods-card-trim-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important;text-transform:none!important} .od-specials .ods-spotlight-offers{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:8px!important;margin-bottom:0!important;flex:1!important} .od-specials .ods-offer-tile{padding:12px 14px!important;background:rgba(var(--osp-bg-rgb),.5)!important;border-left:2px solid transparent!important;display:flex!important;flex-direction:column!important} .od-specials .ods-tile-price{border-left-color:rgba(var(--osp-muted-rgb),.35)!important} .od-specials .ods-tile-savings{border-left-color:var(--osp-accent-deep)!important} .od-specials .ods-tile-bonus{border-left-color:var(--osp-accent)!important} .od-specials .ods-tile-apr{border-left-color:var(--osp-apr)!important} .od-specials .ods-tile-lease{border-left-color:var(--osp-lease)!important} .od-specials .ods-offer-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.7)!important;margin-bottom:5px!important} .od-specials .ods-offer-val{font-family:'Inter','Roboto',sans-serif!important;font-size:32px!important;font-weight:900!important;color:var(--osp-on-surface)!important;line-height:1!important} .od-specials .ods-offer-na{font-family:'Inter','Roboto',sans-serif!important;font-size:20px!important;font-weight:700!important;color:rgba(var(--osp-muted-rgb),.35)!important;line-height:1!important} .od-specials .ods-sm{font-size:18px!important;font-weight:600!important;color:rgba(var(--osp-text-rgb),.65)!important} .od-specials .ods-offer-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;color:rgba(var(--osp-muted-rgb),.6)!important;margin-top:2px!important} .od-specials .ods-offer-details-row{margin-top:auto!important;padding-top:10px!important;border-top:1px solid rgba(var(--osp-muted-rgb),.1)!important} .od-specials .ods-offer-details-link{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.45)!important;background:none!important;border:none!important;cursor:pointer!important;padding:0!important;transition:color .2s!important} .od-specials .ods-offer-details-link:hover{color:var(--osp-accent)!important} .od-specials .ods-fn-num{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;color:rgba(var(--osp-muted-rgb),.4)!important;background:none!important;border:none!important;cursor:pointer!important;padding:0!important;vertical-align:super!important;transition:color .2s!important} .od-specials .ods-fn-num:hover{color:var(--osp-accent)!important} .od-specials .ods-fn-icon{font-size:10px!important;opacity:.6!important} .od-specials .ods-cash-lines{display:flex!important;flex-direction:column!important;gap:4px!important;margin-bottom:4px!important} .od-specials .ods-cash-line{display:flex!important;align-items:baseline!important;gap:6px!important} .od-specials .ods-cash-amt{font-family:'Inter','Roboto',sans-serif!important;font-size:22px!important;font-weight:900!important;color:var(--osp-on-surface)!important} .od-specials .ods-cash-type{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important} .od-specials .ods-offer-tile.sm .ods-cash-lines{gap:2px!important;width:100%!important} .od-specials .ods-offer-tile.sm .ods-cash-line{justify-content:flex-end!important} .od-specials .ods-offer-tile.sm .ods-cash-amt{font-size:14px!important} .od-specials .ods-offer-tile.sm .ods-cash-type{font-size:8px!important} .od-specials .ods-cta{font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;padding:13px 28px!important;text-decoration:none!important;transition:all .25s!important;cursor:pointer!important;border:none!important;text-align:center!important;display:block!important} .od-specials .ods-cta.primary{color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:2px solid var(--osp-accent)!important} .od-specials .ods-cta.primary:hover{box-shadow:0 0 22px rgba(var(--osp-accent-mid-rgb),.45)!important} .od-specials .ods-cta.ghost{color:var(--osp-accent)!important;background:transparent!important;border:2px solid rgba(var(--osp-muted-rgb),.35)!important} .od-specials .ods-cta.ghost:hover{border-color:var(--osp-accent-mid)!important;color:var(--osp-on-surface)!important} .od-specials .ods-grid-wrap{padding:28px 72px 0!important} .od-specials .ods-card-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important} .od-specials .ods-offer-card{background:linear-gradient(160deg,var(--osp-surface),var(--osp-bg-3))!important;border:1px solid rgba(var(--osp-muted-rgb),.13)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;transition:transform .28s,border-color .28s,box-shadow .28s!important} .od-specials .ods-offer-card:hover{transform:translateY(-4px)!important;border-color:rgba(var(--osp-muted-rgb),.38)!important;box-shadow:0 14px 44px rgba(0,0,0,.5),0 0 26px rgba(var(--osp-accent-mid-rgb),.07)!important} .od-specials .ods-card-img{height:160px!important;background:linear-gradient(135deg,var(--osp-surface),var(--osp-bg-4))!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;flex-shrink:0!important;overflow:hidden!important} .od-specials .ods-card-img::after{content:''!important;position:absolute!important;bottom:0!important;left:0!important;right:0!important;height:30px!important;background:linear-gradient(0deg,var(--osp-bg-3),transparent)!important} .od-specials .ods-card-img img{width:100%!important;height:100%!important;object-fit:cover!important} .od-specials .ods-card-img-ph{font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.12)!important} .od-specials .ods-card-model{padding:9px 13px 0!important} .od-specials .ods-card-name{font-family:'Inter','Roboto',sans-serif!important;font-size:22px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;line-height:1!important} .od-specials .ods-card-year{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.65)!important;margin-top:2px!important} .od-specials .ods-card-offers{padding:8px 13px!important;display:flex!important;flex-direction:column!important;gap:4px!important;flex:1!important} .od-specials .ods-offer-tile.sm{padding:6px 9px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:2px!important;background:rgba(255,255,255,.03)!important;align-content:flex-start!important} .od-specials .ods-tile-price.sm{min-height:60px!important} .od-specials .ods-tile-savings.sm{min-height:60px!important} .od-specials .ods-tile-bonus.sm{min-height:130px!important} .od-specials .ods-tile-apr.sm{min-height:70px!important} .od-specials .ods-tile-lease.sm{min-height:70px!important} .od-specials .ods-offer-tile.sm .ods-offer-lbl{font-size:9px!important;margin-bottom:0!important;flex-shrink:0!important} .od-specials .ods-offer-tile.sm .ods-offer-val{font-size:18px!important;text-align:right!important} .od-specials .ods-offer-tile.sm .ods-offer-quote{font-size:9px!important;padding:6px 10px!important;letter-spacing:1px!important;margin:0!important} .od-specials .ods-offer-tile.sm .ods-offer-na{font-size:14px!important;text-align:right!important} .od-specials .ods-offer-tile.sm .ods-sm{font-size:12px!important} .od-specials .ods-offer-tile.sm .ods-offer-sub{font-size:9px!important;width:100%!important;text-align:right!important;margin-top:0!important} .od-specials .ods-offer-tile.sm .ods-offer-details-row{width:100%!important;text-align:right!important;margin-top:2px!important} .od-specials .ods-offer-tile.sm .ods-offer-details-link{font-size:8px!important} .od-specials .ods-offer-tile.sm .ods-fn-num{font-size:8px!important} .od-specials .ods-card-ctas{padding:0 13px 12px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important} .od-specials .ods-c-cta{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;text-align:center!important;padding:9px 4px!important;text-decoration:none!important;display:block!important;transition:all .22s!important;cursor:pointer!important} .od-specials .ods-c-cta.details{color:var(--osp-accent)!important;border:1px solid rgba(var(--osp-muted-rgb),.32)!important;background:transparent!important} .od-specials .ods-c-cta.details:hover{border-color:var(--osp-accent-mid)!important;color:var(--osp-on-surface)!important} .od-specials .ods-c-cta.shop{color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:1px solid var(--osp-accent)!important} .od-specials .ods-c-cta.shop:hover{box-shadow:0 0 14px rgba(var(--osp-accent-mid-rgb),.45)!important} .od-specials .ods-empty-state{grid-column:1 / -1!important;padding:40px!important;text-align:center!important;font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.35)!important} .od-specials .ods-disclaimer{margin:28px 72px 36px!important;padding:16px 20px!important;border:1px solid rgba(var(--osp-muted-rgb),.07)!important;border-top:2px solid rgba(var(--osp-muted-rgb),.1)!important;font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;color:rgba(var(--osp-muted-rgb),.5)!important;line-height:1.7!important} .od-specials .ods-disclaimer strong{color:rgba(var(--osp-muted-rgb),.75)!important;font-weight:600!important} .od-specials ~ .ods-disc-popup-backdrop,.ods-disc-popup-backdrop{position:fixed!important;inset:0!important;z-index:1001!important;background:rgba(var(--osp-bg-rgb),.92)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important} .ods-disc-popup-box{max-width:520px!important;background:linear-gradient(160deg,var(--osp-surface-2),var(--osp-bg-3))!important;border:1px solid rgba(var(--osp-muted-rgb),.28)!important;border-top:3px solid var(--osp-accent-mid)!important;padding:28px 28px 24px!important;position:relative!important} .ods-disc-popup-close{position:absolute!important;top:12px!important;right:16px!important;background:none!important;border:none!important;color:rgba(var(--osp-muted-rgb),.45)!important;font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;cursor:pointer!important} .ods-disc-popup-close:hover{color:var(--osp-accent)!important} .ods-disc-popup-label{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-accent-deep)!important;margin-bottom:14px!important} .ods-disc-popup-text{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;color:rgba(var(--osp-muted-rgb),.65)!important;line-height:1.8!important} .od-specials .ods-modal-backdrop{position:fixed!important;inset:0!important;z-index:100000!important;background:rgba(0,0,0,.75)!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:24px 20px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;transition:opacity .25s!important} .od-specials .ods-modal-backdrop.open{opacity:1!important;pointer-events:all!important} .od-specials .ods-modal-box{position:relative!important;width:100%!important;max-width:620px!important;max-height:calc(100vh - 48px)!important;overflow-y:auto!important;margin:0!important;background:linear-gradient(170deg,var(--osp-surface-2) 0%,var(--osp-bg-3) 100%)!important;border:1.5px solid rgba(var(--osp-accent-deep-rgb),.35)!important;border-radius:12px!important;box-shadow:0 20px 60px rgba(0,0,0,.5)!important;padding:36px 32px!important;color:var(--osp-text)!important;transform:translateY(18px)!important;transition:transform .28s!important;scroll-padding-top:140px!important; scrollbar-width:thin!important;scrollbar-color:rgba(var(--osp-muted-rgb),.4) rgba(var(--osp-bg-rgb),.4)!important} .od-specials .ods-modal-box::-webkit-scrollbar{width:8px!important} .od-specials .ods-modal-box::-webkit-scrollbar-track{background:rgba(var(--osp-bg-rgb),.4)!important;border-radius:0 12px 12px 0!important} .od-specials .ods-modal-box::-webkit-scrollbar-thumb{background:rgba(var(--osp-muted-rgb),.4)!important;border-radius:4px!important} .od-specials .ods-modal-box::-webkit-scrollbar-thumb:hover{background:rgba(var(--osp-muted-rgb),.65)!important} .od-specials .ods-modal-box input,.od-specials .ods-modal-box select,.od-specials .ods-modal-box textarea{scroll-margin-top:140px!important} .od-specials .ods-modal-box .od-form-disclaimer,.od-specials .ods-modal-box .od-form-disclaimer p,.od-specials .ods-modal-box .od-form-disclaimer a{color:rgba(var(--osp-text-rgb),.55)!important} .od-specials .ods-modal-backdrop.open .ods-modal-box{transform:translateY(0)!important} .od-specials .ods-modal-close{position:sticky!important;top:0!important;float:right!important;margin:-20px -16px 0 0!important;z-index:5!important;cursor:pointer!important;font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;line-height:1!important;color:rgba(var(--osp-text-rgb),.55)!important;background:rgba(var(--osp-surface-2-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;border-radius:4px!important;padding:9px 14px!important;transition:color .2s,background .2s,border-color .2s!important} .od-specials .ods-modal-close:hover{color:var(--osp-accent)!important;background:rgba(var(--osp-surface-2-rgb),1)!important;border-color:rgba(var(--osp-muted-rgb),.5)!important} .od-specials .ods-modal-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;margin-bottom:14px!important;font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(90deg,var(--osp-accent),var(--osp-accent-mid))!important;padding:5px 14px!important;border-radius:4px!important} .od-specials .ods-modal-model{font-family:'Inter','Roboto',sans-serif!important;font-size:26px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:var(--osp-text)!important;line-height:1.1!important;margin-bottom:4px!important} .od-specials .ods-modal-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:13px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:rgba(var(--osp-text-rgb),.6)!important;line-height:1.5!important;margin-bottom:22px!important} .od-specials .ods-modal-offer-strip{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:6px!important;margin-bottom:20px!important} .od-specials .ods-mos{padding:8px 8px!important;background:rgba(var(--osp-bg-rgb),.6)!important;border-left:2px solid transparent!important} .od-specials .ods-mos-price{border-left-color:rgba(var(--osp-muted-rgb),.3)!important} .od-specials .ods-mos-savings{border-left-color:var(--osp-accent-deep)!important} .od-specials .ods-mos-bonus{border-left-color:var(--osp-accent)!important} .od-specials .ods-mos-apr{border-left-color:var(--osp-apr)!important} .od-specials .ods-mos-lease{border-left-color:var(--osp-lease)!important} .od-specials .ods-mos-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.65)!important;margin-bottom:3px!important} .od-specials .ods-mos-val{font-family:'Inter','Roboto',sans-serif!important;font-size:18px!important;font-weight:900!important;color:var(--osp-on-surface)!important;line-height:1!important} .od-specials .ods-mos-val .s{font-size:11px!important;color:rgba(var(--osp-text-rgb),.65)!important} .od-specials .ods-mos-term{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;color:rgba(var(--osp-muted-rgb),.6)!important;margin-top:1px!important} .od-specials .ods-mos-bonus .ods-mos-val{font-size:13px!important;font-weight:900!important;line-height:1.25!important;display:flex!important;flex-direction:column!important;gap:3px!important;margin-top:2px!important} .od-specials .ods-modal-cash-line{display:flex!important;flex-direction:column!important;align-items:flex-start!important;line-height:1.1!important} .od-specials .ods-modal-cash-amt{font-family:'Inter','Roboto',sans-serif!important;font-size:13px!important;font-weight:900!important;color:var(--osp-on-surface)!important} .od-specials .ods-modal-cash-type{font-family:'Inter','Roboto',sans-serif!important;font-size:7.5px!important;font-weight:700!important;letter-spacing:1.2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.7)!important;margin-top:1px!important} .od-specials .ods-mf-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:12px!important} .od-specials .ods-mf-group{display:flex!important;flex-direction:column!important;gap:5px!important} .od-specials .ods-mf-label{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.75)!important} .od-specials .ods-mf-input,.od-specials .ods-mf-select{font-family:'Inter','Roboto',sans-serif!important;font-size:16px!important;padding:11px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;color:var(--osp-accent)!important;outline:none!important;transition:border-color .22s!important;-webkit-appearance:none!important;appearance:none!important;color-scheme:dark!important;width:100%!important} .od-specials .ods-mf-input:focus,.od-specials .ods-mf-select:focus{border-color:var(--osp-accent-mid)!important} .od-specials .ods-mf-input::placeholder{color:rgba(var(--osp-muted-rgb),.28)!important} .od-specials .ods-mf-input:-webkit-autofill,.od-specials .ods-mf-input:-webkit-autofill:hover,.od-specials .ods-mf-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px rgba(var(--osp-bg-rgb),.95) inset!important;-webkit-text-fill-color:var(--osp-accent)!important;caret-color:var(--osp-accent)!important;border-color:var(--osp-accent-mid)!important;transition:background-color 5000s ease-in-out 0s!important} .od-specials .ods-mf-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;padding-right:36px!important;background-color:rgba(var(--osp-bg-rgb),.85)!important;cursor:pointer!important} .od-specials .ods-mf-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important} .od-specials .ods-mf-submit{width:100%!important;font-family:'Inter','Roboto',sans-serif!important;font-size:13px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:2px solid var(--osp-accent)!important;padding:14px!important;cursor:pointer!important;transition:box-shadow .25s!important;margin-top:14px!important} .od-specials .ods-mf-submit:hover{box-shadow:0 0 24px rgba(var(--osp-accent-mid-rgb),.45)!important} .od-specials .ods-mf-disc{font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;color:rgba(var(--osp-muted-rgb),.4)!important;margin-top:8px!important;text-align:center!important;line-height:1.55!important} .od-specials .ods-modal-form.hide{display:none!important} .od-specials .ods-modal-success{display:none!important;text-align:center!important;padding:20px 10px!important} .od-specials .ods-modal-success.show{display:block!important} .od-specials .ods-success-icon{font-size:40px!important;margin-bottom:14px!important;line-height:1!important;color:var(--osp-accent)!important} .od-specials .ods-success-title{font-family:'Inter','Roboto',sans-serif!important;font-size:20px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;margin-bottom:8px!important} .od-specials .ods-success-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:15px!important;color:rgba(var(--osp-muted-rgb),.75)!important;line-height:1.65!important;margin-bottom:20px!important} .od-specials .ods-success-sub strong{color:var(--osp-accent)!important} .od-specials .ods-success-close{font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid))!important;border:none!important;padding:12px 32px!important;cursor:pointer!important} .od-specials .ods-seo-fallback{padding:48px 72px!important} .od-specials .ods-seo-fallback h2{font-family:'Inter','Roboto',sans-serif!important;font-size:28px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;margin-bottom:16px!important} .od-specials .ods-seo-fallback h3{font-family:'Inter','Roboto',sans-serif!important;font-size:18px!important;font-weight:700!important;text-transform:uppercase!important;color:var(--osp-accent)!important;margin:24px 0 8px!important} .od-specials .ods-seo-fallback p{font-family:'Inter','Roboto',sans-serif!important;font-size:14px!important;color:rgba(var(--osp-muted-rgb),.65)!important;line-height:1.7!important;max-width:800px!important} .od-specials .ods-spotlight-header{margin-bottom:20px!important} .od-specials .ods-card-model{padding:9px 13px 6px!important} .od-specials .ods-offer-quote{display:inline-block!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;color:var(--osp-on-accent)!important;border:1px solid var(--osp-accent)!important;font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;padding:9px 16px!important;cursor:pointer!important;margin:4px 0!important;transition:box-shadow .25s,border-color .25s!important;align-self:flex-start!important;line-height:1!important} .od-specials .ods-offer-quote:hover{box-shadow:0 0 16px rgba(var(--osp-accent-mid-rgb),.45)!important;border-color:var(--osp-accent-mid)!important;color:var(--osp-on-accent)!important} /* ── MOBILE OVERRIDES (≤980px) ── */ @media (max-width:980px){ .od-specials .ods-desktop-only{display:none!important} .od-specials .ods-hero{background:var(--osp-bg)!important;padding:36px 20px 32px!important;position:relative!important;overflow:hidden!important} .od-specials .ods-hero::before{content:''!important;position:absolute!important;inset:0!important;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(var(--osp-muted-rgb),.06),transparent 65%)!important;pointer-events:none!important} .od-specials .ods-hero::after{content:''!important;position:absolute!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:90%!important;height:2px!important;background:linear-gradient(90deg,transparent 0%,rgba(var(--osp-accent-deep-rgb),.15) 15%,var(--osp-accent-mid) 50%,rgba(var(--osp-accent-deep-rgb),.15) 85%,transparent 100%)!important} .od-specials .ods-hero-inner{position:relative!important;z-index:1!important;display:flex!important;flex-direction:column!important;gap:24px!important} .od-specials .ods-hero-eyebrow{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-accent)!important;margin-bottom:8px!important} .od-specials .ods-hero-title{font-family:'Inter','Roboto',sans-serif!important;font-size:32px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:1px!important;color:var(--osp-on-surface)!important;line-height:1!important;margin-bottom:8px!important} .od-specials .ods-hero-title span{color:var(--osp-accent)!important} .od-specials .ods-hero-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:13px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.7)!important;line-height:1.6!important} .od-specials .ods-hero-stats{display:flex!important;gap:24px!important} .od-specials .ods-hero-stat-num{font-family:'Inter','Roboto',sans-serif!important;font-size:24px!important;font-weight:900!important;color:var(--osp-accent)!important;line-height:1!important} .od-specials .ods-hero-stat-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important;margin-top:3px!important} .od-specials .ods-filter-panel{background:var(--osp-bg-4)!important;border-bottom:1px solid rgba(var(--osp-muted-rgb),.12)!important;padding:12px 16px!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;position:sticky!important;top:0!important;z-index:20!important} .od-specials .ods-filter-group{display:flex!important;flex-direction:column!important;gap:4px!important;flex:1 1 calc(50% - 10px)!important;min-width:130px!important} .od-specials .ods-filter-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.5)!important} .od-specials .ods-filter-select{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:10px 32px 10px 12px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.25)!important;color:var(--osp-accent)!important;outline:none!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:dark!important;width:100%!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important} .od-specials .ods-filter-select:disabled{opacity:.4!important} .od-specials .ods-filter-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important;text-transform:none!important} .od-specials .ods-filter-div{display:none!important} .od-specials .ods-filter-right{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding-top:4px!important;border-top:1px solid rgba(var(--osp-muted-rgb),.08)!important} .od-specials .ods-results-count{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.5)!important} .od-specials .ods-results-count span{color:var(--osp-accent)!important} .od-specials .ods-sort-select{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:8px 28px 8px 10px!important;background:rgba(var(--osp-bg-rgb),.8)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;color:var(--osp-accent)!important;outline:none!important;appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important} .od-specials .ods-spotlight-label,.od-specials .ods-grid-label{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important} .od-specials .ods-spotlight-label-text,.od-specials .ods-grid-label-text{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important;white-space:nowrap!important} .od-specials .ods-spotlight-label-line,.od-specials .ods-grid-label-line{flex:1!important;height:1px!important;background:rgba(var(--osp-muted-rgb),.1)!important} .od-specials .ods-spotlight-wrap{padding:20px 16px 0!important} .od-specials .ods-spotlight-card{background:linear-gradient(135deg,var(--osp-surface-2) 0%,var(--osp-bg-2) 50%,var(--osp-surface-2) 100%)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;border-top:3px solid var(--osp-accent-mid)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;position:relative!important} .od-specials .ods-spotlight-tag{position:absolute!important;top:10px!important;right:12px!important;font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:var(--osp-accent-mid)!important;padding:3px 10px!important;z-index:2!important} .od-specials .ods-spotlight-left{display:flex!important;flex-direction:column!important} .od-specials .ods-spotlight-img{height:260px!important;background:linear-gradient(135deg,var(--osp-surface),var(--osp-bg-4))!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .od-specials .ods-spotlight-img img{width:100%!important;height:100%!important;object-fit:cover!important} .od-specials .ods-spotlight-ctas{padding:12px 16px!important;display:flex!important;flex-direction:column!important;gap:8px!important;background:rgba(var(--osp-bg-rgb),.3)!important} .od-specials .ods-spotlight-trims{display:none!important} .od-specials .ods-trim-chip{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important;background:transparent!important;border:1px solid rgba(var(--osp-muted-rgb),.2)!important;padding:8px 12px!important;cursor:pointer!important;transition:all .2s!important;margin:0 -1px -1px 0!important} .od-specials .ods-trim-chip.active{color:var(--osp-accent)!important;border-color:var(--osp-accent-mid)!important;background:rgba(var(--osp-muted-rgb),.08)!important;z-index:2!important;position:relative!important} .od-specials .ods-card-trim-wrap{padding:0 14px 4px!important} .od-specials .ods-card-trim-select{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:9px 32px 9px 12px!important;background:rgba(var(--osp-bg-rgb),.7)!important;border:1px solid rgba(var(--osp-muted-rgb),.25)!important;color:var(--osp-accent)!important;outline:none!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:dark!important;width:100%!important;border-radius:0!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important} .od-specials .ods-card-trim-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important;text-transform:none!important} .od-specials .ods-spotlight-mob-trim{display:block!important;padding:0 0 4px!important} .od-specials .ods-spotlight-ctas-bottom{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding-top:8px!important} .od-specials .ods-spotlight-name{font-family:'Inter','Roboto',sans-serif!important;font-size:24px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;letter-spacing:1px!important;line-height:1.1!important;margin-bottom:4px!important} .od-specials .ods-spotlight-right{padding:12px 14px 14px!important} .od-specials .ods-spotlight-offers{display:flex!important;flex-direction:column!important;gap:4px!important} .od-specials .ods-offer-tile{padding:10px 12px!important;background:rgba(var(--osp-bg-rgb),.5)!important;border-left:2px solid transparent!important;display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:2px!important} .od-specials .ods-tile-price{border-left-color:rgba(var(--osp-muted-rgb),.35)!important} .od-specials .ods-tile-savings{border-left-color:var(--osp-accent-deep)!important} .od-specials .ods-tile-bonus{border-left-color:var(--osp-accent)!important} .od-specials .ods-tile-apr{border-left-color:var(--osp-apr)!important} .od-specials .ods-tile-lease{border-left-color:var(--osp-lease)!important} .od-specials .ods-offer-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.7)!important;margin-bottom:0!important;flex-shrink:0!important} .od-specials .ods-offer-val{font-family:'Inter','Roboto',sans-serif!important;font-size:22px!important;font-weight:900!important;color:var(--osp-on-surface)!important;line-height:1!important;text-align:right!important} .od-specials .ods-offer-na{font-family:'Inter','Roboto',sans-serif!important;font-size:16px!important;font-weight:700!important;color:rgba(var(--osp-muted-rgb),.35)!important;text-align:right!important} .od-specials .ods-sm{font-size:13px!important;font-weight:600!important;color:rgba(var(--osp-text-rgb),.65)!important} .od-specials .ods-offer-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;color:rgba(var(--osp-muted-rgb),.55)!important;width:100%!important;text-align:right!important;margin-top:0!important} .od-specials .ods-offer-details-row{width:100%!important;text-align:right!important;margin-top:8px!important;padding-top:6px!important;border-top:1px solid rgba(var(--osp-muted-rgb),.1)!important} .od-specials .ods-offer-details-link{font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.45)!important;background:none!important;border:none!important;cursor:pointer!important;padding:0!important} .od-specials .ods-fn-num{font-size:8px!important;font-weight:700!important;color:rgba(var(--osp-muted-rgb),.4)!important;background:none!important;border:none!important;cursor:pointer!important;padding:0!important;vertical-align:super!important} .od-specials .ods-fn-icon{font-size:9px!important;opacity:.6!important} .od-specials .ods-cash-lines{display:flex!important;flex-direction:column!important;gap:3px!important;width:100%!important} .od-specials .ods-cash-line{display:flex!important;align-items:baseline!important;gap:6px!important;justify-content:flex-end!important} .od-specials .ods-cash-amt{font-family:'Inter','Roboto',sans-serif!important;font-size:16px!important;font-weight:900!important;color:var(--osp-on-surface)!important} .od-specials .ods-cash-type{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important} .od-specials .ods-offer-tile.sm .ods-cash-amt{font-size:14px!important} .od-specials .ods-offer-tile.sm .ods-cash-type{font-size:8px!important} .od-specials .ods-cta{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;padding:13px 20px!important;text-decoration:none!important;text-align:center!important;display:block!important;cursor:pointer!important;border:none!important} .od-specials .ods-cta.primary{color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:2px solid var(--osp-accent)!important} .od-specials .ods-cta.ghost{color:var(--osp-accent)!important;background:transparent!important;border:2px solid rgba(var(--osp-muted-rgb),.35)!important} .od-specials .ods-grid-wrap{padding:20px 16px 0!important} .od-specials .ods-card-grid{display:flex!important;flex-direction:column!important;gap:10px!important} .od-specials .ods-offer-card{background:linear-gradient(160deg,var(--osp-surface),var(--osp-bg-3))!important;border:1px solid rgba(var(--osp-muted-rgb),.13)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important} .od-specials .ods-card-img{height:180px!important;background:linear-gradient(135deg,var(--osp-surface),var(--osp-bg-4))!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;overflow:hidden!important} .od-specials .ods-card-img::after{content:''!important;position:absolute!important;bottom:0!important;left:0!important;right:0!important;height:30px!important;background:linear-gradient(0deg,var(--osp-bg-3),transparent)!important} .od-specials .ods-card-img img{width:100%!important;height:100%!important;object-fit:cover!important} .od-specials .ods-card-model{padding:10px 14px 0!important} .od-specials .ods-card-name{font-family:'Inter','Roboto',sans-serif!important;font-size:24px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;line-height:1!important} .od-specials .ods-card-year{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.65)!important;margin-top:3px!important} .od-specials .ods-card-offers{padding:8px 14px!important;display:flex!important;flex-direction:column!important;gap:4px!important} .od-specials .ods-offer-tile.sm{padding:8px 12px!important} .od-specials .ods-offer-tile.sm .ods-offer-val{font-size:20px!important} .od-specials .ods-offer-tile.sm .ods-offer-na{font-size:14px!important} .od-specials .ods-offer-tile.sm .ods-sm{font-size:12px!important} .od-specials .ods-card-ctas{padding:0 14px 14px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important} .od-specials .ods-c-cta{font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;text-align:center!important;padding:12px 8px!important;text-decoration:none!important;display:block!important;cursor:pointer!important} .od-specials .ods-c-cta.details{color:var(--osp-accent)!important;border:1px solid rgba(var(--osp-muted-rgb),.32)!important;background:transparent!important} .od-specials .ods-c-cta.shop{color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:1px solid var(--osp-accent)!important} .od-specials .ods-empty-state{padding:32px 16px!important;text-align:center!important;font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.35)!important} .od-specials .ods-disclaimer{margin:20px 16px 28px!important;padding:14px 16px!important;border:1px solid rgba(var(--osp-muted-rgb),.07)!important;border-top:2px solid rgba(var(--osp-muted-rgb),.1)!important;font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;color:rgba(var(--osp-muted-rgb),.5)!important;line-height:1.7!important} .od-specials .ods-disclaimer strong{color:rgba(var(--osp-muted-rgb),.75)!important;font-weight:600!important} .ods-disc-popup-backdrop{position:fixed!important;inset:0!important;z-index:1001!important;background:rgba(var(--osp-bg-rgb),.92)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important} .ods-disc-popup-box{max-width:100%!important;background:linear-gradient(160deg,var(--osp-surface-2),var(--osp-bg-3))!important;border:1px solid rgba(var(--osp-muted-rgb),.28)!important;border-top:3px solid var(--osp-accent-mid)!important;padding:24px 20px 20px!important;position:relative!important} .ods-disc-popup-close{position:absolute!important;top:10px!important;right:12px!important;background:none!important;border:none!important;color:rgba(var(--osp-muted-rgb),.45)!important;font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;cursor:pointer!important} .ods-disc-popup-label{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-accent-deep)!important;margin-bottom:12px!important} .ods-disc-popup-text{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;color:rgba(var(--osp-muted-rgb),.65)!important;line-height:1.8!important} .od-specials .ods-modal-backdrop{position:fixed!important;inset:0!important;z-index:100000!important;background:rgba(0,0,0,.75)!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:16px 12px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;transition:opacity .25s!important} .od-specials .ods-modal-backdrop.open{opacity:1!important;pointer-events:all!important} .od-specials .ods-modal-box{position:relative!important;width:100%!important;max-height:calc(100vh - 32px)!important;overflow-y:auto!important;margin:0!important;background:linear-gradient(170deg,var(--osp-surface-2) 0%,var(--osp-bg-3) 100%)!important;border:1.5px solid rgba(var(--osp-accent-deep-rgb),.35)!important;border-radius:12px!important;box-shadow:0 20px 60px rgba(0,0,0,.5)!important;padding:28px 20px 22px!important;color:var(--osp-text)!important;scrollbar-width:thin!important;scrollbar-color:rgba(var(--osp-muted-rgb),.4) rgba(var(--osp-bg-rgb),.4)!important} .od-specials .ods-modal-box::-webkit-scrollbar{width:6px!important} .od-specials .ods-modal-box::-webkit-scrollbar-track{background:rgba(var(--osp-bg-rgb),.4)!important} .od-specials .ods-modal-box::-webkit-scrollbar-thumb{background:rgba(var(--osp-muted-rgb),.4)!important;border-radius:3px!important} .od-specials .ods-modal-box .od-form-disclaimer,.od-specials .ods-modal-box .od-form-disclaimer p,.od-specials .ods-modal-box .od-form-disclaimer a{color:rgba(var(--osp-text-rgb),.55)!important} .od-specials .ods-modal-close{position:sticky!important;top:0!important;float:right!important;margin:-16px -10px 0 0!important;z-index:5!important;cursor:pointer!important;font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;line-height:1!important;color:rgba(var(--osp-text-rgb),.55)!important;background:rgba(var(--osp-surface-2-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;border-radius:4px!important;padding:8px 12px!important} .od-specials .ods-modal-badge{display:inline-flex!important;margin-bottom:12px!important;font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(90deg,var(--osp-accent),var(--osp-accent-mid))!important;padding:4px 12px!important;border-radius:4px!important} .od-specials .ods-modal-model{font-family:'Inter','Roboto',sans-serif!important;font-size:22px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;line-height:1!important;margin-bottom:2px!important} .od-specials .ods-modal-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:8px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important;margin-bottom:14px!important} .od-specials .ods-modal-offer-strip{display:flex!important;flex-direction:column!important;gap:4px!important;margin-bottom:16px!important} .od-specials .ods-mos{padding:8px 12px!important;background:rgba(var(--osp-bg-rgb),.6)!important;border-left:2px solid transparent!important;display:flex!important;align-items:center!important;justify-content:space-between!important} .od-specials .ods-mos-price{border-left-color:rgba(var(--osp-muted-rgb),.3)!important} .od-specials .ods-mos-savings{border-left-color:var(--osp-accent-deep)!important} .od-specials .ods-mos-bonus{border-left-color:var(--osp-accent)!important} .od-specials .ods-mos-apr{border-left-color:var(--osp-apr)!important} .od-specials .ods-mos-lease{border-left-color:var(--osp-lease)!important} .od-specials .ods-mos-lbl{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.65)!important} .od-specials .ods-mos-val{font-family:'Inter','Roboto',sans-serif!important;font-size:18px!important;font-weight:900!important;color:var(--osp-on-surface)!important;line-height:1!important} .od-specials .ods-mos-val .s{font-size:11px!important;color:rgba(var(--osp-text-rgb),.65)!important} .od-specials .ods-mos-term{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;color:rgba(var(--osp-muted-rgb),.6)!important} .od-specials .ods-mos-bonus .ods-mos-val{font-size:12px!important;font-weight:900!important;line-height:1.2!important;display:flex!important;flex-direction:column!important;gap:3px!important;margin-top:2px!important} .od-specials .ods-modal-cash-line{display:flex!important;flex-direction:column!important;align-items:flex-start!important;line-height:1.1!important} .od-specials .ods-modal-cash-amt{font-family:'Inter','Roboto',sans-serif!important;font-size:12px!important;font-weight:900!important;color:var(--osp-on-surface)!important} .od-specials .ods-modal-cash-type{font-family:'Inter','Roboto',sans-serif!important;font-size:7px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.7)!important;margin-top:1px!important} .od-specials .ods-mf-row{display:flex!important;flex-direction:column!important;gap:12px!important;margin-bottom:12px!important} .od-specials .ods-mf-group{display:flex!important;flex-direction:column!important;gap:5px!important} .od-specials .ods-mf-label{font-family:'Inter','Roboto',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.75)!important} .od-specials .ods-mf-input,.od-specials .ods-mf-select{font-family:'Inter','Roboto',sans-serif!important;font-size:16px!important;padding:12px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;color:var(--osp-accent)!important;outline:none!important;-webkit-appearance:none!important;appearance:none!important;color-scheme:dark!important;width:100%!important;border-radius:0!important} .od-specials .ods-mf-input:focus,.od-specials .ods-mf-select:focus{border-color:var(--osp-accent-mid)!important} .od-specials .ods-mf-input::placeholder{color:rgba(var(--osp-muted-rgb),.28)!important} .od-specials .ods-mf-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;padding-right:36px!important;background-color:rgba(var(--osp-bg-rgb),.85)!important} .od-specials .ods-mf-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important} .od-specials .ods-mf-submit{width:100%!important;font-family:'Inter','Roboto',sans-serif!important;font-size:13px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:2px solid var(--osp-accent)!important;padding:14px!important;cursor:pointer!important;margin-top:14px!important} .od-specials .ods-mf-disc{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;color:rgba(var(--osp-muted-rgb),.4)!important;margin-top:8px!important;text-align:center!important;line-height:1.55!important} .od-specials .ods-modal-form.hide{display:none!important} .od-specials .ods-modal-success{display:none!important;text-align:center!important;padding:16px 8px!important} .od-specials .ods-modal-success.show{display:block!important} .od-specials .ods-success-icon{font-size:36px!important;margin-bottom:12px!important;color:var(--osp-accent)!important} .od-specials .ods-success-title{font-family:'Inter','Roboto',sans-serif!important;font-size:18px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;margin-bottom:8px!important} .od-specials .ods-success-sub{font-family:'Inter','Roboto',sans-serif!important;font-size:14px!important;color:rgba(var(--osp-muted-rgb),.75)!important;line-height:1.6!important;margin-bottom:18px!important} .od-specials .ods-success-sub strong{color:var(--osp-accent)!important} .od-specials .ods-success-close{font-family:'Inter','Roboto',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid))!important;border:none!important;padding:12px 28px!important;cursor:pointer!important} .od-specials .ods-seo-fallback{padding:32px 16px!important} .od-specials .ods-seo-fallback h2{font-family:'Inter','Roboto',sans-serif!important;font-size:22px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;margin-bottom:12px!important} .od-specials .ods-seo-fallback h3{font-family:'Inter','Roboto',sans-serif!important;font-size:16px!important;font-weight:700!important;text-transform:uppercase!important;color:var(--osp-accent)!important;margin:20px 0 6px!important} .od-specials .ods-seo-fallback p{font-family:'Inter','Roboto',sans-serif!important;font-size:13px!important;color:rgba(var(--osp-muted-rgb),.6)!important;line-height:1.65!important} .od-specials .ods-spotlight-header{margin-bottom:18px!important} .od-specials .ods-card-model{padding:9px 13px 6px!important} .od-specials .ods-offer-quote{display:inline-block!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;color:var(--osp-on-accent)!important;border:1px solid var(--osp-accent)!important;font-family:'Inter','Roboto',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.2px!important;text-transform:uppercase!important;padding:8px 14px!important;cursor:pointer!important;margin:0 0 0 auto!important;transition:box-shadow .25s,border-color .25s!important;line-height:1!important} .od-specials .ods-offer-quote:hover,.od-specials .ods-offer-quote:active{box-shadow:0 0 12px rgba(var(--osp-accent-mid-rgb),.45)!important;border-color:var(--osp-accent-mid)!important;color:var(--osp-on-accent)!important} /* mobile: center per-offer CTA tiles (desktop unchanged) */.od-specials .ods-offer-tile:has(.ods-offer-quote){flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important}.od-specials .ods-offer-quote{margin:0 auto!important} } /* ════════════════════ SLOT PIECE: 3 · OSP service specials ════════════════════ */ /* NOTE: the --osp-* variables used below are defined in the :root at the top of css-2 (OSP sales specials) — css-2 must be pasted before this piece. */ /* ════════════════════════════════════════════════════════════════ ↑↑↑ SALES SPECIALS (.od-specials / .ods-*) — unchanged, verbatim ↑↑↑ ↓↓↓ SERVICE SPECIALS (.od-service-specials / .odss-*) — appended ↓↓↓ Both bodies are governed by the SINGLE :root at the very top of this file. Namespaces are disjoint (ods- vs odss-), so the two never collide. Per-store retheme = edit :root ONCE. Chevron literal is the only baked, theme-coupled value and is identical in both bodies for this store. ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ ODYSSEY SERVICE SPECIALS — Service Specials Page CSS (responsive, single file) Paste into the DDC site's Custom CSS (BOTH desktop + mobile sitewide slots). Scoped entirely to .od-service-specials / .odss-* . CANONICAL BODY — byte-identical across every store; only the :root block above and the select-chevron stroke literal (x6, theme-coupled, set per store) differ. Desktop base + mobile overrides via @media (max-width:980px). Category accent colors (oil=gold, tires=blue, repair=red, electrical=green) are injected inline by the renderer JS and are intentionally store-agnostic; this stylesheet never overrides them except on the .active chip state. ════════════════════════════════════════════════════════════════ */ /* ── WRAPPER / RESET ── */ .od-service-specials{background:var(--osp-bg)!important;font-family:'Inter','Roboto',sans-serif!important;color:var(--osp-on-surface)!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important} .od-service-specials *,.od-service-specials *::before,.od-service-specials *::after{box-sizing:border-box!important} .od-service-specials h1,.od-service-specials h2,.od-service-specials h3,.od-service-specials p{margin:0!important} .od-service-specials .odss-mobile-only{display:none!important} /* ── HERO ── */ .od-service-specials .odss-hero{background:var(--osp-bg)!important;padding:56px 72px 52px!important;position:relative!important;overflow:hidden!important} .od-service-specials .odss-hero::before{content:''!important;position:absolute!important;inset:0!important;background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(var(--osp-muted-rgb),.07),transparent 65%)!important;pointer-events:none!important} .od-service-specials .odss-hero::after{content:''!important;position:absolute!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:80%!important;max-width:1000px!important;height:2px!important;background:linear-gradient(90deg,transparent 0%,rgba(var(--osp-accent-deep-rgb),.15) 15%,var(--osp-accent-mid) 50%,rgba(var(--osp-accent-deep-rgb),.15) 85%,transparent 100%)!important} .od-service-specials .odss-hero-inner{position:relative!important;z-index:1!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:32px!important} .od-service-specials .odss-hero-eyebrow{font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-accent)!important;margin-bottom:12px!important} .od-service-specials .odss-hero-title{font-size:48px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:1px!important;color:var(--osp-on-surface)!important;line-height:1!important;margin-bottom:14px!important} .od-service-specials .odss-hero-title span{color:var(--osp-accent)!important} .od-service-specials .odss-hero-sub{font-size:15px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.75)!important;line-height:1.65!important;max-width:520px!important} .od-service-specials .odss-hero-sub strong,.od-service-specials #odss-tier-label{color:var(--osp-accent)!important;font-weight:700!important} .od-service-specials .odss-hero-stats{display:flex!important;gap:32px!important;padding-bottom:4px!important;flex-shrink:0!important} .od-service-specials .odss-hero-stat{text-align:left!important} .od-service-specials .odss-hero-stat-num{font-size:30px!important;font-weight:900!important;color:var(--osp-accent)!important;line-height:1!important} .od-service-specials .odss-hero-stat-lbl{font-size:9px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important;margin-top:6px!important;line-height:1.4!important} /* ── VEHICLE SELECTOR BAR ── */ .od-service-specials .odss-selector-bar{background:var(--osp-bg-4)!important;border-bottom:1px solid rgba(var(--osp-muted-rgb),.12)!important;padding:18px 72px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;position:sticky!important;top:0!important;z-index:20!important;flex-wrap:wrap!important} .od-service-specials .odss-selector-left{display:flex!important;flex-direction:column!important;gap:10px!important} .od-service-specials .odss-selector-label{font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important} .od-service-specials .odss-selector-dropdowns{display:flex!important;gap:14px!important;flex-wrap:wrap!important} .od-service-specials .odss-selector-group{display:flex!important;flex-direction:column!important;gap:5px!important} .od-service-specials .odss-selector-dd-label{font-size:9px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.5)!important} .od-service-specials .odss-selector-dd{font-size:12px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:10px 34px 10px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.25)!important;color:var(--osp-accent)!important;outline:none!important;cursor:pointer!important;transition:border-color .2s!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:dark!important;min-width:180px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important} .od-service-specials .odss-selector-dd:focus,.od-service-specials .odss-selector-dd:hover{border-color:var(--osp-accent-mid)!important} .od-service-specials .odss-selector-dd:disabled{opacity:.4!important;cursor:not-allowed!important} .od-service-specials .odss-selector-dd option{background:var(--osp-bg)!important;color:var(--osp-accent)!important;text-transform:none!important} .od-service-specials .odss-selector-meta{display:flex!important;align-items:center!important;flex-shrink:0!important} .od-service-specials .odss-selector-count{font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.5)!important;white-space:nowrap!important} .od-service-specials .odss-selector-count span{color:var(--osp-accent)!important} /* ── SERVICE TYPE FILTER (chips desktop / dropdown mobile) ── */ .od-service-specials .odss-svcfilter-chips{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;padding:20px 72px 0!important} .od-service-specials .odss-chip{display:inline-flex!important;align-items:center!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.2px!important;text-transform:uppercase!important;padding:8px 15px!important;border-width:1px!important;border-style:solid!important;cursor:pointer!important;transition:box-shadow .2s,opacity .2s!important;white-space:nowrap!important;line-height:1!important} .od-service-specials .odss-chip[data-odss-svcchip="all"]{color:var(--osp-accent)!important;border-color:rgba(var(--osp-muted-rgb),.3)!important;background:transparent!important} .od-service-specials .odss-chip:hover{opacity:.82!important} .od-service-specials .odss-chip.active{background:var(--chip-color,var(--osp-accent))!important;color:#15151a!important;border-color:var(--chip-color,var(--osp-accent))!important} .od-service-specials .odss-chip.active[data-odss-svcchip="all"]{background:var(--osp-accent)!important;color:var(--osp-on-accent)!important;border-color:var(--osp-accent)!important} .od-service-specials .odss-chip-divider{width:1px!important;height:18px!important;background:rgba(var(--osp-muted-rgb),.18)!important;margin:0 4px!important;flex-shrink:0!important} .od-service-specials .odss-svcfilter-dd-wrap{padding:16px 20px 0!important} .od-service-specials .odss-svcfilter-dd{font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:11px 34px 11px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.25)!important;color:var(--osp-accent)!important;outline:none!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:dark!important;width:100%!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important} .od-service-specials .odss-svcfilter-dd:disabled{opacity:.4!important;cursor:not-allowed!important} .od-service-specials .odss-svcfilter-dd option{background:var(--osp-bg)!important;color:var(--osp-accent)!important;text-transform:none!important} /* ── SERVICE CARD GRID ── */ .od-service-specials .odss-grid-wrap{padding:34px 72px 8px!important} .od-service-specials .odss-grid-header{display:flex!important;align-items:center!important;gap:14px!important;margin-bottom:20px!important} .od-service-specials .odss-grid-label{font-size:12px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important;white-space:nowrap!important} .od-service-specials .odss-grid-line{flex:1!important;height:1px!important;background:rgba(var(--osp-muted-rgb),.1)!important} .od-service-specials .odss-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:16px!important} .od-service-specials .odss-empty{grid-column:1/-1!important;padding:54px 24px!important;text-align:center!important;font-size:13px!important;font-weight:500!important;letter-spacing:.5px!important;color:rgba(var(--osp-muted-rgb),.5)!important;border:1px dashed rgba(var(--osp-muted-rgb),.2)!important;background:rgba(var(--osp-bg-rgb),.3)!important} .od-service-specials .odss-empty a{color:var(--osp-accent)!important} /* ── SERVICE CARD ── */ .od-service-specials .odss-card{background:linear-gradient(135deg,var(--osp-surface-2) 0%,var(--osp-bg-2) 50%,var(--osp-surface-2) 100%)!important;border-right:1px solid rgba(var(--osp-muted-rgb),.18)!important;border-bottom:1px solid rgba(var(--osp-muted-rgb),.18)!important;border-left:1px solid rgba(var(--osp-muted-rgb),.18)!important;border-top:3px solid var(--osp-accent-mid);display:flex!important;flex-direction:column!important;overflow:hidden!important;position:relative!important;transition:box-shadow .25s,transform .25s!important} .od-service-specials .odss-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.18)!important;transform:translateY(-2px)!important} /* image cards: photo (URL injected by JS as --card-img) under a theme-aware scrim. Scrim is built from surface-2 tokens, so it auto-darkens on dark stores and auto-lightens on light MKM — keeping the card text legible over the photo on every theme. Cards with no img in the catalog never match this selector and keep the gradient above. */ .od-service-specials .odss-card[style*="--card-img"]{background-color:var(--osp-surface-2)!important;background-image:linear-gradient(96deg,rgba(var(--osp-surface-2-rgb),.97) 0%,rgba(var(--osp-surface-2-rgb),.92) 30%,rgba(var(--osp-surface-2-rgb),.62) 60%,rgba(var(--osp-surface-2-rgb),.46) 100%),var(--card-img,none)!important;background-size:cover,cover!important;background-position:center,right center!important;background-repeat:no-repeat,no-repeat!important} .od-service-specials .odss-card-header{padding:16px 18px 14px!important;border-bottom:1px solid rgba(var(--osp-muted-rgb),.1)!important} .od-service-specials .odss-card-title{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important} .od-service-specials .odss-card-name{font-size:16px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:var(--osp-on-surface)!important;line-height:1.15!important} .od-service-specials .odss-card-price-inline{display:inline-flex!important;align-items:flex-start!important;line-height:1!important;flex-shrink:0!important;white-space:nowrap!important} .od-service-specials .odss-price-dollar{font-size:14px!important;font-weight:700!important;color:var(--osp-on-surface)!important;margin-top:3px!important} .od-service-specials .odss-price-whole{font-size:30px!important;font-weight:900!important;color:var(--osp-on-surface)!important;line-height:.9!important} .od-service-specials .odss-price-cents{font-size:13px!important;font-weight:700!important;color:rgba(var(--osp-text-rgb),.65)!important;margin-top:3px!important} .od-service-specials .odss-card-sub{margin-top:8px!important;font-size:9px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--osp-accent)} .od-service-specials .odss-card-tier{display:inline-block!important;margin-top:9px!important;font-size:7.5px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.7)!important;border:1px solid rgba(var(--osp-muted-rgb),.3)!important;background:transparent!important;padding:3px 8px!important;border-radius:3px!important} .od-service-specials .odss-card-includes{padding:14px 18px!important;display:flex!important;flex-direction:column!important;gap:7px!important;flex:1 0 auto!important} .od-service-specials .odss-inc-item{display:flex!important;align-items:center!important;gap:8px!important;font-size:11.5px!important;font-weight:500!important;color:rgba(var(--osp-text-rgb),.8)!important;line-height:1.3!important} .od-service-specials .odss-inc-item svg{flex-shrink:0!important;width:12px!important;height:12px!important} .od-service-specials .odss-disc-wrap{margin-top:5px!important} .od-service-specials .odss-disc-toggle{display:inline-block!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--osp-accent)!important;background:none!important;border:none!important;border-bottom:1px solid rgba(var(--osp-accent-mid-rgb),.4)!important;padding:0 0 1px!important;cursor:pointer!important;transition:border-color .2s!important} .od-service-specials .odss-disc-toggle:hover{border-bottom-color:var(--osp-accent)!important} .od-service-specials .odss-savings-banner{margin:0 18px 14px!important;padding:9px 13px!important;background:rgba(var(--osp-bg-rgb),.45)!important;display:flex!important;flex-direction:column!important;gap:2px!important;border-left:3px solid var(--osp-accent-deep)} .od-service-specials .odss-savings-banner-amt{font-size:13px!important;font-weight:900!important;color:var(--osp-on-surface)!important;line-height:1.1!important} .od-service-specials .odss-savings-banner-vs{font-size:10px!important;font-weight:500!important;letter-spacing:.4px!important;color:rgba(var(--osp-muted-rgb),.6)!important} .od-service-specials .odss-cta-claim{margin:0 18px 18px!important;width:calc(100% - 36px)!important;font-size:11px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:1px solid var(--osp-accent)!important;padding:13px!important;cursor:pointer!important;transition:box-shadow .25s,border-color .25s!important} .od-service-specials .odss-cta-claim:hover{box-shadow:0 0 14px rgba(var(--osp-accent-mid-rgb),.45)!important;border-color:var(--osp-accent-mid)!important} /* ── SECTION HEADERS (shared by affinity / trust / reviews / recall) ── */ .od-service-specials .odss-section-divider{height:1px!important;background:linear-gradient(90deg,transparent,rgba(var(--osp-muted-rgb),.18),transparent)!important;margin:0 72px!important} .od-service-specials .odss-section-header{display:flex!important;align-items:center!important;gap:14px!important;padding:36px 72px 0!important;margin-bottom:20px!important} .od-service-specials .odss-section-label{font-size:12px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.55)!important;white-space:nowrap!important} .od-service-specials .odss-section-line{flex:1!important;height:1px!important;background:rgba(var(--osp-muted-rgb),.1)!important} /* ── AFFINITY DISCOUNTS ── */ .od-service-specials .odss-affinity-wrap{padding-bottom:8px!important} .od-service-specials .odss-affinity-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:12px!important;padding:0 72px!important} .od-service-specials .odss-affinity-card{background:linear-gradient(135deg,var(--osp-surface-2),var(--osp-bg-2))!important;border:1px solid rgba(var(--osp-muted-rgb),.18)!important;border-top:2px solid var(--osp-accent-mid)!important;padding:20px 16px!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:5px!important} .od-service-specials .odss-affinity-name{font-size:12px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.8px!important;color:var(--osp-on-surface)!important} .od-service-specials .odss-affinity-pct{font-size:32px!important;font-weight:900!important;color:var(--osp-accent)!important;line-height:1!important} .od-service-specials .odss-affinity-label{font-size:8.5px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.6)!important} .od-service-specials .odss-affinity-details{margin-top:6px!important;font-size:9px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--osp-accent)!important;background:none!important;border:none!important;border-bottom:1px solid rgba(var(--osp-accent-mid-rgb),.4)!important;padding:0 0 1px!important;cursor:pointer!important;transition:border-color .2s!important} .od-service-specials .odss-affinity-details:hover{border-bottom-color:var(--osp-accent)!important} .od-service-specials .odss-affinity-cta-wrap{text-align:center!important;padding:22px 72px 0!important} .od-service-specials .odss-cta-claim.odss-affinity-claim{display:inline-block!important;width:auto!important;margin:0!important;padding:14px 30px!important} /* ── TRUST / WHY SERVICE ── */ .od-service-specials .odss-trust-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:16px!important;padding:0 72px!important} .od-service-specials .odss-trust-card{background:rgba(var(--osp-surface-2-rgb),.5)!important;border:1px solid rgba(var(--osp-muted-rgb),.14)!important;padding:24px 22px!important;display:flex!important;flex-direction:column!important;gap:10px!important} .od-service-specials .odss-trust-icon{width:24px!important;height:24px!important} .od-service-specials .odss-trust-icon svg{stroke:var(--osp-accent)!important;width:24px!important;height:24px!important} .od-service-specials .odss-trust-name{font-size:13px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.6px!important;color:var(--osp-on-surface)!important} .od-service-specials .odss-trust-desc{font-size:12px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.65)!important;line-height:1.6!important} /* ── GOOGLE REVIEWS ── */ .od-service-specials .odss-reviews-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:14px!important;padding:0 72px!important} .od-service-specials .odss-review-card{background:rgba(var(--osp-surface-2-rgb),.5)!important;border:1px solid rgba(var(--osp-muted-rgb),.14)!important;padding:20px!important;display:flex!important;flex-direction:column!important;gap:10px!important} .od-service-specials .odss-review-stars{font-size:14px!important;letter-spacing:2px!important;color:var(--osp-accent)!important;line-height:1!important} .od-service-specials .odss-review-text{font-size:12.5px!important;font-weight:400!important;font-style:italic!important;color:rgba(var(--osp-text-rgb),.82)!important;line-height:1.65!important} .od-service-specials .odss-review-author{font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;color:var(--osp-accent)!important} .od-service-specials .odss-review-source{font-size:9px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.5)!important;margin-top:-6px!important} /* ── RECALL & MAINTENANCE ── */ .od-service-specials .odss-recall-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;padding:0 72px!important} .od-service-specials .odss-recall-card{background:linear-gradient(135deg,var(--osp-surface-2),var(--osp-bg-2))!important;border:1px solid rgba(var(--osp-muted-rgb),.18)!important;padding:26px 24px!important;display:flex!important;flex-direction:column!important;gap:12px!important} .od-service-specials .odss-recall-icon{width:40px!important;height:40px!important} .od-service-specials .odss-recall-icon svg{width:40px!important;height:40px!important} .od-service-specials .odss-recall-wrap .odss-recall-card:last-child .odss-recall-icon svg{stroke:var(--osp-accent)!important} .od-service-specials .odss-recall-title{font-size:16px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:var(--osp-on-surface)!important} .od-service-specials .odss-recall-desc{font-size:12px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.65)!important;line-height:1.65!important} .od-service-specials .odss-recall-row{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;margin-top:4px!important} .od-service-specials .odss-recall-input{flex:1 1 200px!important;font-size:14px!important;font-weight:600!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:11px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;color:var(--osp-accent)!important;outline:none!important;-webkit-appearance:none!important;appearance:none!important;color-scheme:dark!important;border-radius:0!important;transition:border-color .2s!important} .od-service-specials .odss-recall-input:focus{border-color:var(--osp-accent-mid)!important} .od-service-specials .odss-recall-input::placeholder{color:rgba(var(--osp-muted-rgb),.32)!important;text-transform:none!important;letter-spacing:0!important} .od-service-specials .odss-recall-links{display:flex!important;flex-wrap:wrap!important;gap:10px!important} .od-service-specials .odss-recall-cta{display:inline-block!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;padding:12px 18px!important;text-decoration:none!important;cursor:pointer!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid))!important;border:1px solid var(--osp-accent)!important;transition:box-shadow .25s,border-color .25s!important;white-space:nowrap!important} .od-service-specials .odss-recall-cta:hover{box-shadow:0 0 12px rgba(var(--osp-accent-mid-rgb),.4)!important;border-color:var(--osp-accent-mid)!important} .od-service-specials .odss-recall-cta.ghost{color:var(--osp-accent)!important;background:transparent!important;border:1px solid rgba(var(--osp-accent-mid-rgb),.5)!important} .od-service-specials .odss-recall-cta.ghost:hover{box-shadow:none!important;border-color:var(--osp-accent)!important} .od-service-specials .odss-recall-helper{font-size:10px!important;font-weight:500!important;letter-spacing:.4px!important;color:rgba(var(--osp-muted-rgb),.5)!important;line-height:1.5!important} /* ── SEO FALLBACK ── */ .od-service-specials .odss-seo-fallback{padding:34px 72px!important} .od-service-specials .odss-seo-fallback h2{font-size:22px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:var(--osp-on-surface)!important;margin-bottom:12px!important} .od-service-specials .odss-seo-fallback h3{font-size:16px!important;font-weight:700!important;text-transform:uppercase!important;color:var(--osp-accent)!important;margin:20px 0 6px!important} .od-service-specials .odss-seo-fallback p{font-size:13px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.6)!important;line-height:1.65!important} /* ── DISCLAIMER ── */ .od-service-specials .odss-disclaimer{padding:24px 72px 40px!important;font-size:11px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.55)!important;line-height:1.75!important;letter-spacing:.2px!important} .od-service-specials .odss-disclaimer strong{color:var(--osp-on-surface)!important;font-weight:700!important} /* ── MODAL ── */ .od-service-specials .odss-modal-backdrop{position:fixed!important;inset:0!important;z-index:100000!important;background:rgba(0,0,0,.75)!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:16px 12px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;transition:opacity .25s!important} .od-service-specials .odss-modal-backdrop.open{opacity:1!important;pointer-events:all!important} .od-service-specials .odss-modal-box{position:relative!important;width:100%!important;max-width:560px!important;max-height:calc(100vh - 32px)!important;overflow-y:auto!important;margin:0!important;background:linear-gradient(170deg,var(--osp-surface-2) 0%,var(--osp-bg-3) 100%)!important;border:1.5px solid rgba(var(--osp-accent-deep-rgb),.35)!important;border-radius:12px!important;box-shadow:0 20px 60px rgba(0,0,0,.5)!important;padding:28px 24px 22px!important;color:var(--osp-text)!important;scrollbar-width:thin!important;scrollbar-color:rgba(var(--osp-muted-rgb),.4) rgba(var(--osp-bg-rgb),.4)!important} .od-service-specials .odss-modal-box::-webkit-scrollbar{width:6px!important} .od-service-specials .odss-modal-box::-webkit-scrollbar-track{background:rgba(var(--osp-bg-rgb),.4)!important} .od-service-specials .odss-modal-box::-webkit-scrollbar-thumb{background:rgba(var(--osp-muted-rgb),.4)!important;border-radius:3px!important} .od-service-specials .odss-modal-close{position:sticky!important;top:0!important;float:right!important;margin:-16px -12px 0 0!important;z-index:5!important;cursor:pointer!important;font-size:10px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;line-height:1!important;color:rgba(var(--osp-text-rgb),.55)!important;background:rgba(var(--osp-surface-2-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;border-radius:4px!important;padding:9px 13px!important;transition:color .2s,border-color .2s!important} .od-service-specials .odss-modal-close:hover{color:var(--osp-accent)!important;border-color:rgba(var(--osp-muted-rgb),.5)!important} .od-service-specials .odss-modal-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;margin-bottom:14px!important;font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(90deg,var(--osp-accent),var(--osp-accent-mid))!important;padding:5px 14px!important;border-radius:4px!important} .od-service-specials .odss-modal-service-name{font-size:24px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:var(--osp-text)!important;line-height:1.1!important;margin-bottom:6px!important} .od-service-specials .odss-modal-service-price{font-size:24px!important;font-weight:900!important;color:var(--osp-accent)!important;line-height:1!important;margin-bottom:6px!important} .od-service-specials .odss-modal-savings{font-size:13px!important;font-weight:700!important;color:var(--osp-on-surface)!important;margin-bottom:8px!important} .od-service-specials #odssModalSavings span{color:rgba(var(--osp-muted-rgb),.6)!important} .od-service-specials .odss-modal-vehicle{font-size:12px!important;font-weight:500!important;letter-spacing:.3px!important;color:rgba(var(--osp-muted-rgb),.65)!important;margin-bottom:4px!important} .od-service-specials #odssModalDisclaimer{border-top-color:rgba(var(--osp-muted-rgb),.15)!important;color:rgba(var(--osp-muted-rgb),.55)!important} .od-service-specials .odss-mf-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:12px!important} .od-service-specials .odss-mf-row.full{grid-template-columns:1fr!important} .od-service-specials .odss-mf-group{display:flex!important;flex-direction:column!important;gap:5px!important} .od-service-specials .odss-mf-label{font-size:10px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:rgba(var(--osp-muted-rgb),.75)!important} .od-service-specials .odss-mf-input,.od-service-specials .odss-mf-select{font-size:16px!important;font-weight:500!important;padding:11px 13px!important;background:rgba(var(--osp-bg-rgb),.85)!important;border:1px solid rgba(var(--osp-muted-rgb),.22)!important;color:var(--osp-accent)!important;outline:none!important;transition:border-color .22s!important;-webkit-appearance:none!important;appearance:none!important;color-scheme:dark!important;width:100%!important;border-radius:0!important} .od-service-specials .odss-mf-input:focus,.od-service-specials .odss-mf-select:focus{border-color:var(--osp-accent-mid)!important} .od-service-specials .odss-mf-input::placeholder{color:rgba(var(--osp-muted-rgb),.28)!important} .od-service-specials .odss-mf-input:-webkit-autofill,.od-service-specials .odss-mf-input:-webkit-autofill:hover,.od-service-specials .odss-mf-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px rgba(var(--osp-bg-rgb),.95) inset!important;-webkit-text-fill-color:var(--osp-accent)!important;caret-color:var(--osp-accent)!important;border-color:var(--osp-accent-mid)!important;transition:background-color 5000s ease-in-out 0s!important} .od-service-specials .odss-mf-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;padding-right:36px!important;background-color:rgba(var(--osp-bg-rgb),.85)!important;cursor:pointer!important} .od-service-specials .odss-mf-select option{background:var(--osp-bg)!important;color:var(--osp-accent)!important} .od-service-specials .odss-mf-submit{width:100%!important;font-size:13px!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid),var(--osp-accent-deep))!important;border:2px solid var(--osp-accent)!important;padding:14px!important;cursor:pointer!important;margin-top:14px!important;transition:box-shadow .25s!important} .od-service-specials .odss-mf-submit:hover{box-shadow:0 0 16px rgba(var(--osp-accent-mid-rgb),.45)!important} .od-service-specials .odss-mf-disc{font-size:11px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.4)!important;margin-top:10px!important;text-align:center!important;line-height:1.55!important} .od-service-specials .odss-modal-form.hide{display:none!important} .od-service-specials .odss-modal-success{display:none!important;text-align:center!important;padding:18px 8px!important} .od-service-specials .odss-modal-success.show{display:block!important} .od-service-specials .odss-success-icon{font-size:38px!important;margin-bottom:12px!important;color:var(--osp-accent)!important;line-height:1!important} .od-service-specials .odss-success-title{font-size:18px!important;font-weight:900!important;letter-spacing:2px!important;text-transform:uppercase!important;color:var(--osp-on-surface)!important;margin-bottom:8px!important} .od-service-specials .odss-success-service{font-size:14px!important;font-weight:700!important;color:var(--osp-accent)!important;margin-bottom:6px!important} .od-service-specials .odss-success-sub{font-size:13px!important;font-weight:400!important;color:rgba(var(--osp-muted-rgb),.75)!important;line-height:1.6!important;margin-bottom:6px!important} .od-service-specials .odss-success-cal{font-size:11px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--osp-accent)!important;background:transparent!important;border:1px solid rgba(var(--osp-accent-mid-rgb),.5)!important;padding:11px 22px!important;cursor:pointer!important;transition:border-color .2s!important} .od-service-specials .odss-success-cal:hover{border-color:var(--osp-accent)!important} .od-service-specials .odss-success-links{display:flex!important;gap:10px!important;justify-content:center!important;flex-wrap:wrap!important;margin-top:16px!important} .od-service-specials .odss-success-cta{display:inline-block!important;font-size:11px!important;font-weight:700!important;letter-spacing:1.5px!important;text-transform:uppercase!important;padding:12px 22px!important;text-decoration:none!important;cursor:pointer!important;transition:box-shadow .25s,border-color .25s!important} .od-service-specials .odss-success-cta.primary{color:var(--osp-on-accent)!important;background:linear-gradient(180deg,var(--osp-accent),var(--osp-accent-mid))!important;border:1px solid var(--osp-accent)!important} .od-service-specials .odss-success-cta.primary:hover{box-shadow:0 0 14px rgba(var(--osp-accent-mid-rgb),.45)!important;border-color:var(--osp-accent-mid)!important} .od-service-specials .odss-success-cta.ghost{color:var(--osp-accent)!important;background:transparent!important;border:1px solid rgba(var(--osp-accent-mid-rgb),.5)!important} .od-service-specials .odss-success-cta.ghost:hover{border-color:var(--osp-accent)!important} /* ════════════════ MOBILE (≤980px) ════════════════ */ @media (max-width:980px){ .od-service-specials .odss-desktop-only{display:none!important} .od-service-specials .odss-mobile-only{display:block!important} .od-service-specials .odss-hero{padding:38px 20px 34px!important} .od-service-specials .odss-hero-inner{flex-direction:column!important;align-items:flex-start!important;gap:24px!important} .od-service-specials .odss-hero-title{font-size:32px!important} .od-service-specials .odss-hero-sub{font-size:14px!important;max-width:100%!important} .od-service-specials .odss-hero-stats{gap:24px!important;width:100%!important} .od-service-specials .odss-hero-stat-num{font-size:24px!important} .od-service-specials .odss-selector-bar{padding:16px 20px!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;position:static!important} .od-service-specials .odss-selector-dropdowns{flex-direction:column!important} .od-service-specials .odss-selector-dd{min-width:0!important;width:100%!important} .od-service-specials .odss-grid-wrap{padding:28px 20px 8px!important} .od-service-specials .odss-grid{grid-template-columns:1fr!important;gap:14px!important} .od-service-specials .odss-card[style*="--card-img"]{background-image:linear-gradient(96deg,rgba(var(--osp-surface-2-rgb),.98) 0%,rgba(var(--osp-surface-2-rgb),.95) 40%,rgba(var(--osp-surface-2-rgb),.78) 72%,rgba(var(--osp-surface-2-rgb),.64) 100%),var(--card-img,none)!important} .od-service-specials .odss-section-divider{margin:0 20px!important} .od-service-specials .odss-section-header{padding:32px 20px 0!important} .od-service-specials .odss-affinity-grid,.od-service-specials .odss-trust-grid,.od-service-specials .odss-reviews-grid{padding:0 20px!important;grid-template-columns:1fr!important} .od-service-specials .odss-affinity-cta-wrap{padding:22px 20px 0!important} .od-service-specials .odss-recall-grid{padding:0 20px!important;grid-template-columns:1fr!important} .od-service-specials .odss-seo-fallback{padding:28px 20px!important} .od-service-specials .odss-disclaimer{padding:22px 20px 36px!important} .od-service-specials .odss-modal-box{max-width:100%!important;padding:24px 18px 20px!important} .od-service-specials .odss-mf-row{grid-template-columns:1fr!important} .od-service-specials .odss-success-links{flex-direction:column!important} .od-service-specials .odss-success-cta{width:100%!important} } /* ════════════════════ SLOT PIECE: 4 · od-tokens (MKM light) ════════════════════ */ /* ════════════════════════════════════════════════════════════════════ OD DESIGN TOKENS — MKM (mccrary-kia-mobile) Theme: LIGHT · kia-light (Polar White leads) Palette mapped from the MKM brand kit; -rgb computed from hex. PER-STORE FILE — deploy only in MKM's DDC CSS slot. (MKM & MKH both use body.brand-kia but need opposite palettes, so they must be separate files.) ════════════════════════════════════════════════════════════════════ */ /* ── 1. SEMANTIC CONSTANTS (brand-independent) ─────────────────────── */ :root{ --od-white:#ffffff; --od-black:#000000; --od-error:#e05252; --od-info:#b0bec5; --od-warn:#e0a030; } /* ── 2. DERIVED LAYER — re-resolves per brand (glow + DDC header map) ── */ :root, body[class*="brand-"]{ --od-glow: rgba(var(--od-gold-rgb), .45); --header-primary-container-bg:var(--od-navy); --header-secondary-container-bg:var(--od-navy); --header-primary-container-color:var(--od-gd); --header-secondary-container-color:var(--od-gd); --header-navigation-color:var(--od-gd); --header-navigation-non-hovered-color:var(--od-gd); --header-navigation-hover-color:var(--od-gl); --header-border-color:var(--od-gold); } /* ── 3. PALETTE ─────────────────────────────────────────────────────── */ :root, body.brand-kia { --od-gl:#05141F; --od-gl-rgb:5,20,31; --od-gold:#05141F; --od-gold-rgb:5,20,31; --od-gd:#0A1C2A; --od-gd-rgb:10,28,42; --od-navy:#FFFFFF; --od-navy-rgb:255,255,255; --od-mid:#F4F6F7; --od-mid-rgb:244,246,247; --od-card:#FFFFFF; --od-card-rgb:255,255,255; --od-dark:#E8EBEE; --od-dark-rgb:232,235,238; --od-navy2:#EEF1F3; --od-navy2-rgb:238,241,243; --od-border:#D9DDE1; --od-border-rgb:217,221,225; --od-cream:#05141F; --od-cream-rgb:5,20,31; --od-text:#05141F; --od-text-rgb:5,20,31; --od-muted:#122638; --od-muted-rgb:18,38,56; --od-mutedw:#122638; --od-mutedw-rgb:18,38,56; --od-dim:#D9DDE1; --od-dim-rgb:217,221,225; --od-ev:#238705; --od-ev-rgb:35,135,5; --od-ff:'Roboto', sans-serif; } /* ── 4. COMPAT ALIASES — vars newer sections reference; resolve to palette ── */ :root{ --od-accent-mid: var(--od-gold); /* mid accent (gl→gold→gd family) */ --od-alert: var(--od-error); /* recall/alert badges */ --od-gl2: var(--od-gl); /* light-accent tint alias */ --od-lease: var(--od-ev); /* lease "Best Value" ribbon */ } /* ════════════════════ SLOT PIECE: 5 · od-sections (shared) ════════════════════ */ /* ════════════════════════════════════════════════════════════════════ OD SECTION LIBRARY — Track B (seed: hero, quickshop, offers, base) ──────────────────────────────────────────────────────────────────── • ONE responsive sheet (mobile-first + min-width breakpoints). No desktop/mobile fork — replaces the two parallel stylesheets. • 100% tokenized — every brand color is a Phase-1 token, so a store's :root block (store-theme-builder) re-skins all of this for free. • Reusable .od-* sections. A page is composition, not bespoke CSS. This file grows as page types are added; the pattern never changes. ════════════════════════════════════════════════════════════════════ */ /* ── DDC chrome guard — the host site styles links at ID-level specificity (#page… a), which beats any class rule here. Scoped decoration reset; components wanting an underline look use border-bottom (see .od-banner-cta). ───────────────────── */ .od-page a{text-decoration:none!important} /* Never let an unstyled link fall back to UA default blue. Zero-specificity (:where) guard: any link without its own color rule inherits the surrounding text color; intentionally-colored link classes still win. */ :where(.od-page a){color:inherit} /* Highlight text link / inline CTA (e.g. "All Reviews & Testimonials") */ .od-hl{display:inline-block;color:var(--od-gl);font:700 14px/1.3 var(--od-ff); letter-spacing:.02em;border-bottom:2px solid rgba(var(--od-gl-rgb),.28); padding-bottom:2px;transition:border-color .15s ease} .od-hl:hover{border-bottom-color:var(--od-gl)} /* ── Base ──────────────────────────────────────────────────────────── */ .od-page{font-family:var(--od-ff,'Roboto',sans-serif);color:var(--od-text); background:var(--od-navy);-webkit-font-smoothing:antialiased} .od-page *{box-sizing:border-box;margin:0;padding:0} /* Page canvas — navy fills the whole viewport on themed pages ONLY, so the gaps around the DDC inventory widget (SRP sandwich) and any space above/ below the wrapper don't show DDC's light default. Non-themed DDC pages are untouched. var(--od-navy) resolves per brand via body.brand-*. */ body:has(.od-page){background:var(--od-navy)} .od-wrap{max-width:1240px;margin:0 auto;padding:0 20px} .od-eyebrow{font:700 12px/1 var(--od-ff);letter-spacing:.26em; text-transform:uppercase;color:var(--od-gl)} .od-h2{font:700 26px/1.12 var(--od-ff);color:var(--od-cream); letter-spacing:-.01em} .od-h2 span{color:var(--od-gold)} .od-h2.is-center{text-align:center} @media(min-width:768px){.od-h2{font-size:34px}} .od-h3{font:700 20px/1.25 var(--od-ff);color:var(--od-cream)} .od-h3 span{color:var(--od-gold)} .od-btn{display:inline-block;font:700 13px/1 var(--od-ff); letter-spacing:.06em;text-transform:uppercase;padding:15px 26px; border-radius:6px;cursor:pointer;border:1px solid transparent; text-decoration:none;transition:transform .15s,box-shadow .2s} .od-btn-p{background:linear-gradient(135deg,var(--od-gl),var(--od-gold)); color:var(--od-navy);box-shadow:0 8px 22px rgba(var(--od-gold-rgb),.3)} .od-btn-p:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(var(--od-gold-rgb),.42)} .od-btn-s{background:transparent;border-color:var(--od-gd);color:var(--od-gl)} .od-btn-s:hover{background:rgba(var(--od-gold-rgb),.08)} /* ── Section: HERO ─────────────────────────────────────────────────── */ /* --od-hero-img is set per page from OD.asset() (fallback chain). If the image is missing the tokenized gradient still looks intentional — that is the "won't look dull before images exist" guarantee. */ .od-hero{position:relative;padding:64px 0; background: linear-gradient(165deg,rgba(var(--od-navy2-rgb),.92) 0%, rgba(var(--od-card-rgb),.86) 45%,rgba(var(--od-navy-rgb),.94) 100%), var(--od-hero-img,none) center/cover no-repeat,var(--od-navy)} .od-hero::after{content:"";position:absolute;inset:0; background:radial-gradient(780px 320px at 80% -8%,var(--od-glow), transparent 62%);pointer-events:none} .od-hero-inner{position:relative;z-index:1} .od-hero-title{font:800 34px/1.05 var(--od-ff);color:var(--od-cream); margin:16px 0 6px;letter-spacing:-.015em} @media(min-width:768px){.od-hero{padding:96px 0} .od-hero-title{font-size:54px}} .od-hero-title span{color:var(--od-gold)} .od-hero-sub{font:500 16px/1 var(--od-ff);color:var(--od-gl); letter-spacing:.04em;text-transform:uppercase} .od-hero-desc{font:400 15px/1.6 var(--od-ff);color:var(--od-mutedw); max-width:520px;margin-top:14px} .od-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .od-hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:36px; padding-top:26px;border-top:1px solid var(--od-border)} .od-hero-stat b{display:block;font:800 24px/1 var(--od-ff); color:var(--od-cream)} .od-hero-stat span{font:600 11px/1.3 var(--od-ff);letter-spacing:.12em; text-transform:uppercase;color:var(--od-muted);margin-top:6px;display:block} .od-hero-stat.is-sm b{font-size:15px;line-height:1.2} /* ── Section: QUICKSHOP (shop-by-trim + shop-by-color) ─────────────── */ .od-quickshop{padding:48px 0;background:linear-gradient(180deg, var(--od-navy),var(--od-dark))} .od-qs-block + .od-qs-block{margin-top:44px} .od-qs-head{display:flex;align-items:baseline;gap:14px; margin-bottom:22px;flex-wrap:wrap} .od-qs-label{font:700 11px/1 var(--od-ff);letter-spacing:.2em; text-transform:uppercase;color:var(--od-gd); padding:6px 11px;border:1px solid rgba(var(--od-gold-rgb),.3); border-radius:20px} .od-trim-grid,.od-color-grid{display:grid;gap:14px} .od-trim-grid{grid-template-columns:repeat(2,1fr)} .od-color-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px} @media(min-width:600px){.od-trim-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:980px){.od-trim-grid{grid-template-columns:repeat(5,1fr)}} .od-trim-card{display:block;text-decoration:none;background:var(--od-card); border:1px solid var(--od-border);border-radius:9px;overflow:hidden; transition:border-color .2s,transform .15s} .od-trim-card:hover{border-color:var(--od-gold);transform:translateY(-2px)} .od-trim-card.is-active{border-color:var(--od-gold); box-shadow:0 0 0 1px var(--od-gold)} .od-trim-card img{display:block;width:100%;aspect-ratio:16/10; object-fit:cover;background:var(--od-mid)} .od-trim-all-ph{aspect-ratio:16/10;display:flex;align-items:center; justify-content:center;background:var(--od-mid);color:var(--od-gold); font:800 20px/1 var(--od-ff);letter-spacing:.1em} .od-trim-name{font:700 13px/1 var(--od-ff);color:var(--od-gl); text-align:center;padding:13px 6px;text-transform:uppercase; letter-spacing:.05em} .od-color-cell{display:flex;flex-direction:column;align-items:center; gap:9px;padding:14px 8px;background:var(--od-card); border:1px solid var(--od-border);border-radius:12px; transition:transform .2s,border-color .2s} .od-color-cell:hover{transform:translateY(-3px);border-color:var(--od-gold)} .od-color-swatch{display:block;flex:0 0 auto;width:46px;height:46px; border-radius:50%;border:1px solid var(--od-border); box-shadow:inset 0 2px 6px rgba(255,255,255,.15),0 2px 6px rgba(0,0,0,.18); background:var(--od-sw,var(--od-mid))} .od-color-name{font:600 11.5px/1.3 var(--od-ff);color:var(--od-cream); text-align:center} /* ── Section: OFFERS (shell — populated by the offers module) ──────── */ .od-offers{padding:46px 0} .od-offers-grid{display:grid;gap:16px; grid-template-columns:1fr} @media(min-width:760px){.od-offers-grid{ grid-template-columns:repeat(2,1fr)}} @media(min-width:1080px){.od-offers-grid{ grid-template-columns:repeat(3,1fr)}} .od-offers-empty{font:400 14px/1.6 var(--od-ff);color:var(--od-muted); text-align:center;padding:30px;border:1px dashed var(--od-border); border-radius:9px} /* ── Section: BREADCRUMB ───────────────────────────────────────────── Added: F-150 SRP chat. */ .od-breadcrumb{padding:14px 0;border-bottom:1px solid var(--od-border)} .od-breadcrumb .od-wrap{display:flex;align-items:center;gap:8px; flex-wrap:wrap;font:500 12px/1 var(--od-ff)} .od-breadcrumb a{color:var(--od-muted);text-decoration:none} .od-breadcrumb a:hover{color:var(--od-gl)} .od-breadcrumb .sep{color:var(--od-dim)} .od-breadcrumb .current{color:var(--od-mutedw)} /* ── Divider (thin rule between stacked sections) ───────────────────── */ .od-divider{height:1px;background:var(--od-border)} /* ── Section: BANNER (reusable "cantfind" / "shop inventory" strip) ── One component, reused for every full-width gold CTA strip regardless of copy — Block 1 (top of offers) and Block 2 (×3: after model grid, after SEO, after FAQ) all use this same markup+class, different text. */ .od-banner{padding:22px 0; background:linear-gradient(135deg,var(--od-gl),var(--od-gold))} .od-banner .od-wrap{display:flex;align-items:center;justify-content: space-between;gap:16px;flex-wrap:wrap} .od-banner-text{font:700 16px/1.3 var(--od-ff);color:var(--od-navy)} .od-banner-cta{display:inline-block;font:700 12.5px/1 var(--od-ff); text-transform:uppercase;letter-spacing:.05em;color:var(--od-cream); background:var(--od-navy);text-decoration:none;white-space:nowrap; padding:13px 24px;border-radius:8px;transition:transform .2s} .od-banner-cta:hover{transform:translateY(-2px);opacity:1} /* ── Offers: customize bar (year/trim selects above the offers grid) ── */ .od-offers-customize{display:flex;align-items:center;gap:14px; flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px; border-bottom:1px solid var(--od-border)} .od-oc-sep{width:1px;height:18px;background:var(--od-border)} .od-oc-select{font:600 13px/1 var(--od-ff);color:var(--od-text); background:var(--od-card);border:1px solid var(--od-border); border-radius:6px;padding:9px 12px} .od-oc-showing{font:400 13px/1 var(--od-ff);color:var(--od-muted)} .od-oc-showing span{color:var(--od-gl);font-weight:700} .od-offers-legal{font:400 11px/1.6 var(--od-ff);color:var(--od-muted); margin-top:18px} /* ── Section: INVENTORY HEADER (sits directly above the DDC widget) ── */ .od-inv-header{padding:34px 0 20px} .od-inv-header .od-wrap{display:flex;align-items:center;justify-content: space-between;gap:16px;flex-wrap:wrap} .od-inv-locate{font:700 12px/1 var(--od-ff);letter-spacing:.04em; color:var(--od-gl);text-decoration:none;white-space:nowrap} .od-inv-locate:hover{color:var(--od-gold)} /* ── Section: MODAL + FORM (shared for every lead form — Save Offer, Locate Vehicle, Roush Build, and any future modal). CSS-only show/hide via :target (zero new JS) — trigger links keep the plain #id href pattern already used across the legacy source; the close control is an that clears the fragment. Submission itself is handled by the assembled bundle's od-lead.js via the documented form contract: form[data-od-lead] + data-od-category/-source/-model + [name] fields + .od-hp honeypot + optional [data-od-lead-success] sibling panel. ──── */ .od-modal-overlay{position:fixed;inset:0; /* Fixed dark scrim — NOT var(--od-navy-rgb). A modal backdrop must dim the page regardless of theme; --od-navy flips to white on light stores (MKM), which would render this as a washed-out white haze instead of a dimming overlay. Standard UX pattern uses black here independent of brand color. */ background:rgba(0,0,0,.72);display:flex;align-items:flex-start; justify-content:center;padding:20px;z-index:100000;opacity:0; visibility:hidden;transition:opacity .2s; /* The overlay itself scrolls (mock pattern): a modal taller than the visual viewport — small phones, iOS keyboard — can always be scrolled so the close X is reachable. z-index outguns DDC's sticky chrome. */ overflow-y:auto;-webkit-overflow-scrolling:touch} .od-modal-overlay:target{opacity:1;visibility:visible} .od-modal{position:relative;width:100%;max-width:560px;margin:auto; background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:34px} .od-modal-close{position:absolute;top:16px;right:16px;width:34px; height:34px;border-radius:50%;border:1px solid var(--od-border); background:transparent;color:var(--od-mutedw);font-size:20px; line-height:1;text-decoration:none;display:flex;align-items:center; justify-content:center} .od-modal-close:hover{color:var(--od-cream);border-color:var(--od-gold)} .od-modal-header p{font:400 14px/1.6 var(--od-ff);color:var(--od-mutedw); margin-top:10px} .od-form[hidden]{display:none !important} .od-form{margin-top:24px;display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:560px){.od-form{grid-template-columns:1fr 1fr}} .od-form-group{display:flex;flex-direction:column;gap:6px} .od-form-group.is-full{grid-column:1/-1} .od-form-group label{font:600 11px/1 var(--od-ff);letter-spacing:.06em; text-transform:uppercase;color:var(--od-mutedw)} .od-form-group input,.od-form-group select,.od-form-group textarea{ font:400 14px/1.4 var(--od-ff);color:var(--od-text); background:var(--od-mid);border:1px solid var(--od-border); border-radius:7px;padding:11px 13px;width:100%} .od-form-group textarea{min-height:80px;resize:vertical} .od-form-group .od-invalid{border-color:var(--od-error)} .od-hp{position:absolute!important;left:-9999px!important;width:1px; height:1px;overflow:hidden} .od-form-submit{grid-column:1/-1;width:100%;border:none; font:700 13px/1 var(--od-ff);text-transform:uppercase; letter-spacing:.06em;padding:16px;border-radius:7px; background:linear-gradient(135deg,var(--od-gl),var(--od-gold)); color:var(--od-navy);cursor:pointer} .od-form-disclaimer{grid-column:1/-1;font:400 11px/1.6 var(--od-ff); color:var(--od-muted)} .od-lead-success .headline{margin-bottom:8px} .od-lead-success p{font:400 15px/1.6 var(--od-ff);color:var(--od-mutedw)} .od-lead-success p a{color:var(--od-gl)} /* ── Section: SHOP INVENTORY / SEO CONTENT ──────────────────────────── */ .od-seo{padding:52px 0} .od-seo .od-wrap{display:grid;gap:40px;grid-template-columns:1fr} @media(min-width:980px){.od-seo .od-wrap{grid-template-columns:2fr 1fr}} .od-seo-body p{font:400 15px/1.7 var(--od-ff);color:var(--od-mutedw); margin-top:14px} .od-seo-body h3{margin-top:8px} .od-seo-body ul{margin:14px 0 0;padding-left:20px;display:flex; flex-direction:column;gap:10px} .od-seo-body li{font:400 15px/1.6 var(--od-ff);color:var(--od-mutedw)} .od-seo-body li strong{color:var(--od-gl)} .od-inline-cta{display:inline-block;margin-top:18px; font:700 13px/1 var(--od-ff);letter-spacing:.05em;text-transform: uppercase;color:var(--od-gl);text-decoration:none; border-bottom:2px solid var(--od-gold);padding-bottom:3px} .od-seo-sidebar{display:flex;flex-direction:column;gap:18px} .od-sidebar-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:11px;padding:22px} .od-sidebar-card h4{font:700 12px/1 var(--od-ff);letter-spacing:.12em; text-transform:uppercase;color:var(--od-gd);margin-bottom:14px} .od-sidebar-card a{display:block;font:500 14px/1.5 var(--od-ff); color:var(--od-mutedw);text-decoration:none;padding:7px 0; border-top:1px solid var(--od-border)} .od-sidebar-card a:first-of-type{border-top:none} .od-sidebar-card a:hover{color:var(--od-gl)} /* ── Section: COMPARISON (desktop grid table + mobile stacked cards, both markups render simultaneously — CSS toggles which is visible) ── */ .od-compare{padding:52px 0; background:linear-gradient(180deg,var(--od-navy),var(--od-dark))} .od-compare-header{text-align:center;max-width:640px;margin:0 auto 34px} .od-compare-header p{font:400 14px/1.6 var(--od-ff);color:var(--od-muted); margin-top:10px} .od-compare-grid{display:none} @media(min-width:860px){ .od-compare-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr); gap:1px;background:var(--od-border);border:1px solid var(--od-border); border-radius:10px;overflow:hidden} .od-cg-head,.od-cg-label,.od-cg-val{background:var(--od-card); padding:14px 12px;font:600 13px/1.3 var(--od-ff);color:var(--od-mutedw)} .od-cg-head{font:700 12px/1.2 var(--od-ff);text-transform:uppercase; letter-spacing:.04em;color:var(--od-cream);background:var(--od-navy2)} .od-cg-spec{background:var(--od-navy2)} .od-cg-winner{color:var(--od-gold)} .od-win-badge{display:block;font:700 10px/1 var(--od-ff); letter-spacing:.08em;color:var(--od-gd);margin-top:4px} } .od-compare-cards{display:grid;gap:14px} @media(min-width:860px){.od-compare-cards{display:none}} .od-compare-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:10px;padding:18px} .od-compare-card.is-winner{border-color:var(--od-gold)} .od-compare-card-name{font:700 15px/1 var(--od-ff);color:var(--od-cream)} .od-compare-card.is-winner .od-compare-card-name{color:var(--od-gold)} .od-compare-card-spec{display:flex;justify-content:space-between; padding:8px 0;border-top:1px solid var(--od-border); font:400 13px/1.3 var(--od-ff)} .od-compare-card-spec .label{color:var(--od-muted)} .od-compare-card-spec .val{color:var(--od-mutedw);font-weight:600} .od-compare-links{display:grid;gap:14px;margin-top:30px; grid-template-columns:1fr} @media(min-width:760px){.od-compare-links{grid-template-columns: repeat(3,1fr)}} .od-compare-link-card{display:block;background:var(--od-card); border:1px solid var(--od-border);border-radius:10px;padding:18px; text-decoration:none;transition:border-color .2s} .od-compare-link-card:hover{border-color:var(--od-gold)} .od-compare-link-card .vs{font:700 10px/1 var(--od-ff); letter-spacing:.12em;text-transform:uppercase;color:var(--od-gd)} .od-compare-link-card .match{font:700 16px/1.3 var(--od-ff); color:var(--od-cream);margin-top:8px} .od-compare-link-card .sub{font:400 13px/1.4 var(--od-ff); color:var(--od-muted);margin-top:6px} /* ── Section: FAQ (native
/ — zero JS accordion) ──── */ .od-faq{padding:52px 0} .od-faq-header{text-align:center;margin-bottom:30px} .od-faq-item{border-top:1px solid var(--od-border)} .od-faq-item:last-child{border-bottom:1px solid var(--od-border)} .od-faq-q{display:flex;align-items:center;justify-content:space-between; gap:14px;padding:20px 4px;cursor:pointer;list-style:none} .od-faq-q::-webkit-details-marker{display:none} .od-faq-q-text{font:600 15px/1.4 var(--od-ff);color:var(--od-text)} .od-faq-chevron{color:var(--od-gold);font-size:16px;flex:none; transition:transform .2s} .od-faq-item[open] .od-faq-chevron{transform:rotate(180deg)} .od-faq-a{padding:0 4px 20px} .od-faq-a p{font:400 14px/1.65 var(--od-ff);color:var(--od-mutedw)} .od-faq-a p strong{color:var(--od-gl)} .od-faq-a p a{color:var(--od-gl);font-weight:600} /* ── Section: NEARBY (location link grid) ───────────────────────────── */ .od-nearby{padding:44px 0;border-top:1px solid var(--od-border)} .od-nearby h3{font:700 13px/1 var(--od-ff);letter-spacing:.1em; text-transform:uppercase;color:var(--od-gd);margin-bottom:18px} .od-nearby-grid{display:flex;flex-wrap:wrap;gap:10px} .od-nearby-link{font:500 13px/1 var(--od-ff);color:var(--od-muted); text-decoration:none;padding:8px 14px;border:1px solid var(--od-border); border-radius:20px} .od-nearby-link:hover{color:var(--od-gl);border-color:var(--od-gold)} /* ── Section: SPECIALTY (opt-in halo/specialty-trim section — reusable across any model or store. A page only uses this when that model has a specialty trim worth a dedicated showcase: e.g., Kia Telluride X-Pro, Kia Telluride Sport, etc. Store-agnostic — all copy, badges, and card content come from the page's markup, never from this file. Pages without a specialty trim simply never reference these classes. ──── */ .od-specialty{padding:56px 0; background:linear-gradient(180deg,var(--od-dark),var(--od-navy))} .od-specialty-header{max-width:760px;margin:0 auto 30px;text-align:center} .od-specialty-badge{display:inline-block;font:700 11px/1 var(--od-ff); letter-spacing:.12em;text-transform:uppercase;color:var(--od-navy); background:linear-gradient(135deg,var(--od-gl),var(--od-gold)); padding:8px 16px;border-radius:20px;margin-bottom:16px} .od-specialty-lede{font:400 15px/1.7 var(--od-ff);color:var(--od-mutedw); margin-top:14px} .od-specialty-cta-row{display:flex;align-items:center;justify-content: space-between;gap:16px;flex-wrap:wrap;padding:22px 26px; background:var(--od-card);border:1px solid var(--od-border); border-radius:12px;margin-bottom:34px} .od-specialty-cta-text{font:600 14px/1.5 var(--od-ff);color:var(--od-text); max-width:440px} .od-specialty-cta-buttons{display:flex;gap:12px;flex-wrap:wrap} .od-specialty-lineup{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:860px){.od-specialty-lineup{grid-template-columns: repeat(3,1fr)}} .od-specialty-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;overflow:hidden;display:flex; flex-direction:column} .od-specialty-card-photo img{display:block;width:100%;aspect-ratio:16/10; object-fit:cover} .od-specialty-card-body{padding:22px;display:flex;flex-direction:column; gap:10px;flex:1} .od-specialty-card-eyebrow{font:700 11px/1 var(--od-ff);letter-spacing:.1em; text-transform:uppercase;color:var(--od-gd)} .od-specialty-card-price{font:500 13px/1 var(--od-ff);color:var(--od-mutedw)} .od-specialty-card-price strong{color:var(--od-gold);font-size:16px} .od-specialty-card-specs{margin:6px 0 0;padding-left:18px;display:flex; flex-direction:column;gap:6px} .od-specialty-card-specs li{font:400 13px/1.4 var(--od-ff);color:var(--od-mutedw)} .od-specialty-card-premium{font:400 13px/1.6 var(--od-ff);color:var(--od-muted); padding-top:10px;border-top:1px solid var(--od-border);margin-top:4px} .od-specialty-card-premium strong{color:var(--od-gl)} .od-specialty-card-cta{margin-top:auto;padding-top:14px; font:700 12px/1 var(--od-ff);letter-spacing:.05em;color:var(--od-gl); text-decoration:none} .od-specialty-card-cta:hover{color:var(--od-gold)} .od-specialty-features{margin-top:48px} .od-specialty-features-header{text-align:center;max-width:600px; margin:0 auto 28px} .od-specialty-features-divider{width:60px;height:2px;background:var(--od-gold); margin:0 auto 18px} .od-specialty-features-header p{font:400 14px/1.6 var(--od-ff); color:var(--od-muted);margin-top:10px} .od-specialty-features-grid{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:600px){.od-specialty-features-grid{grid-template-columns: repeat(2,1fr)}} @media(min-width:980px){.od-specialty-features-grid{grid-template-columns: repeat(4,1fr)}} .od-specialty-feature-photo img{display:block;width:100%;aspect-ratio:1; object-fit:cover;border-radius:10px} .od-specialty-feature-caption{padding-top:12px} .od-specialty-feature-title{font:700 13px/1.3 var(--od-ff);color:var(--od-gl); margin-bottom:6px} .od-specialty-feature-caption p{font:400 13px/1.55 var(--od-ff); color:var(--od-muted)} /* ── Offers: type cards + save modal extras (SRP specials widget) ───── Added: SRP specials-widget chat. Cards render inside the .od-offers shell via the bundled od-offers module; the customize bar, banner, modal and form all REUSE the existing sections above — nothing here duplicates them. Border roles wire the brand-kit tokens: price→gold · savings→--od-lease · cash→--od-alert · apr→--od-apr · lease→--od-accent-mid (all per-store token files). */ .od-offers-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} /* v6 restyle (2026-07-11, "Ghost Numeral"): left-border type coding removed. Base cards on --od-mid wash + hairline border; the LEASE card is the hero — solid accent (--od-gl) fill, corner ribbon in --od-lease, inverse CTA. Same class contract, CSS-only change. */ .od-offer-card{flex:1 1 200px;max-width:270px;display:flex; flex-direction:column;position:relative;overflow:hidden; background:var(--od-mid);border:1px solid var(--od-border); border-radius:14px;padding:22px 20px} .od-offer-card.is-lease{background:var(--od-gl);border-color:var(--od-gl)} .od-offer-card.is-lease::after{content:'Best Value';position:absolute; top:14px;right:-34px;transform:rotate(45deg);background:var(--od-lease); color:#fff;font:800 9px/1 var(--od-ff);letter-spacing:.12em; text-transform:uppercase;padding:5px 40px;z-index:2} .od-offer-card.is-lease .od-offer-tag, .od-offer-card.is-lease .od-offer-pre, .od-offer-card.is-lease .od-offer-big span, .od-offer-card.is-lease .od-offer-cashtype{color:rgba(var(--od-navy-rgb),.65)} .od-offer-card.is-lease .od-offer-big, .od-offer-card.is-lease .od-offer-cashamt{color:var(--od-navy)} .od-offer-card.is-lease .od-offer-sub{color:rgba(var(--od-navy-rgb),.7)} .od-offer-card.is-lease .od-offer-cta{background:var(--od-navy); color:var(--od-gl)} .od-offer-card.is-lease .od-offer-cta:hover{box-shadow:0 8px 20px rgba(var(--od-navy-rgb),.25)} .od-offer-card.is-lease .od-offer-details{color:rgba(var(--od-navy-rgb),.65)} .od-offer-card.is-lease .od-offer-details:hover{color:var(--od-navy)} .od-offer-tag{font:700 11px/1 var(--od-ff);letter-spacing:.14em; text-transform:uppercase;color:var(--od-muted);margin-bottom:14px} .od-offer-pre{font:700 10px/1.3 var(--od-ff);letter-spacing:.1em; text-transform:uppercase;color:var(--od-muted);min-height:13px; margin-bottom:4px} .od-offer-big{display:flex;align-items:baseline;gap:6px;margin-bottom:6px; font:900 28px/1 var(--od-ff);color:var(--od-cream);letter-spacing:-.03em} .od-offer-big span{font:600 13px/1 var(--od-ff);color:var(--od-muted)} @media(min-width:1080px){.od-offer-big{font-size:34px}} .od-offer-sub{font:400 13px/1.5 var(--od-ff);color:var(--od-mutedw); margin-bottom:16px;flex:1} .od-offer-cta{display:block;text-align:center;font:700 11.5px/1 var(--od-ff); letter-spacing:.05em;text-transform:uppercase;text-decoration:none; padding:12px 16px;border-radius:8px;margin-bottom:12px;cursor:pointer; background:linear-gradient(135deg,var(--od-gl),var(--od-gold)); color:var(--od-navy);transition:transform .15s,box-shadow .2s} .od-offer-cta:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(var(--od-gold-rgb),.3)} .od-offer-details{align-self:flex-start;font:600 11px/1 var(--od-ff); color:var(--od-muted);background:none;border:none;padding:0; cursor:pointer;text-decoration:underline;text-underline-offset:2px} .od-offer-details:hover{color:var(--od-gl)} .od-offer-cashlines{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;flex:1} .od-offer-cashline{display:flex;align-items:baseline;gap:8px} .od-offer-cashamt{font:900 22px/1 var(--od-ff);color:var(--od-cream);letter-spacing:-.02em} @media(min-width:1080px){.od-offer-cashamt{font-size:26px}} .od-offer-cashtype{font:700 10px/1.2 var(--od-ff);letter-spacing:.09em;text-transform:uppercase;color:var(--od-muted)} .od-offer-cashsup{font-size:8px;font-weight:700;vertical-align:super;margin-left:1px} .od-offer-fine{font:400 11px/1.6 var(--od-ff);color:var(--od-muted); margin-top:10px;padding-top:10px;border-top:1px dashed var(--od-border)} /* Inset variant of the existing banner — the rounded in-flow CTA bar at the top of the offers section (full-bleed .od-banner stays unchanged). Children are .od-banner-text / .od-banner-cta directly (no .od-wrap). */ .od-banner.is-inset{border-radius:14px;padding:20px 26px;margin-bottom:26px; display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap} /* Save-Offer success panel extras (od-lead unhides [data-od-lead-success]; the panel body is pre-authored in the block HTML). */ .od-lead-success.is-center{text-align:center;padding:14px 0} .od-success-check{width:56px;height:56px;border-radius:50%; margin:0 auto 18px;display:flex;align-items:center;justify-content:center; font:400 28px/1 var(--od-ff);color:var(--od-navy); background:linear-gradient(135deg,var(--od-gl),var(--od-gold))} /* ── SRP page sections (stat band · photo hero · collapse · quiz · model grid · trim-card retail extensions · image placeholder) Added: SRP page build chat (same chat as the offers widget). All theme math follows the banner inversion: gl/gold = the accent band, --od-navy = the on-accent color (white on dark stores, dark navy on MKM light) — so the quiz band and active states re-skin per store exactly like .od-banner does. */ .od-statband{padding:26px 0} .od-statband .od-wrap{display:grid;gap:14px; grid-template-columns:repeat(2,1fr)} @media(min-width:600px){.od-statband .od-wrap{ grid-template-columns:repeat(3,1fr);gap:16px}} @media(min-width:980px){.od-statband .od-wrap{ grid-template-columns:repeat(6,1fr);gap:18px}} .od-stat-tile{background:var(--od-mid);border:1px solid var(--od-border); border-radius:12px;padding:22px 14px;text-align:center} .od-stat-tile b{display:block;font:800 26px/1.05 var(--od-ff); color:var(--od-cream);letter-spacing:-.02em} @media(min-width:980px){.od-stat-tile b{font-size:30px}} .od-stat-tile span{display:block;font:400 11px/1.4 var(--od-ff); color:var(--od-muted);margin-top:7px;letter-spacing:.02em} /* Photo hero variant — full-bleed image, content bottom-left, horizontal scrim built from --od-navy-rgb so it resolves light on MKM and dark on the dark stores. Falls back to the tokenized gradient when --od-hero-img is unset (placeholder-safe). */ .od-hero.is-photo{display:flex;align-items:flex-end;padding:0; min-height:clamp(420px,52vw,620px); background:var(--od-hero-img,linear-gradient(165deg,var(--od-navy2), var(--od-mid) 45%,var(--od-navy))) center/cover no-repeat} .od-hero.is-photo::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(var(--od-navy-rgb),.97) 0%, rgba(var(--od-navy-rgb),.9) 32%,rgba(var(--od-navy-rgb),.5) 62%, rgba(var(--od-navy-rgb),.06) 100%)} .od-hero.is-photo::after{display:none} .od-hero.is-photo .od-wrap{width:100%;padding-top:44px;padding-bottom:44px} .od-hero.is-photo .od-hero-inner{max-width:600px} /* Collapsible wrapper (native
— zero JS) */ .od-collapse{border:1px solid var(--od-border);border-radius:14px; background:var(--od-mid);overflow:hidden} .od-collapse-summary{display:flex;align-items:center; justify-content:space-between;gap:16px;cursor:pointer; padding:18px 22px;list-style:none} .od-collapse-summary::-webkit-details-marker{display:none} .od-collapse-title{font:700 15px/1.4 var(--od-ff);color:var(--od-cream)} .od-collapse-title small{font:400 13px/1.4 var(--od-ff); color:var(--od-muted)} .od-collapse-pill{font:700 11px/1 var(--od-ff);letter-spacing:.08em; text-transform:uppercase;color:var(--od-muted);white-space:nowrap; border:1px solid var(--od-border);background:var(--od-navy); border-radius:20px;padding:7px 14px} .od-collapse-pill::after{content:"Expand \2304"} .od-collapse[open] .od-collapse-pill::after{content:"Collapse \2303"} .od-collapse-body{padding:6px 22px 26px} /* Trim-card retail extensions (additive — base .od-trim-card unchanged). Price spans are FILLED BY od-offers from the live feed ([data-od-offers-trimprice]); empty spans stay hidden — never a hardcoded number in markup. */ .od-trim-head{position:relative;height:104px;background-color:var(--od-mid); background-image:var(--od-th,none);background-size:cover;background-position:center; display:flex;align-items:flex-end;padding:10px} .od-trim-watermark{font:600 9.5px/1 var(--od-ff);letter-spacing:.1em; text-transform:uppercase;color:var(--od-dim)} .od-trim-badge{position:absolute;top:10px;right:10px; font:700 9px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase; color:var(--od-navy);background:var(--od-gl); padding:4px 8px;border-radius:20px} .od-trim-body{padding:13px 14px 15px;text-align:left} .od-trim-tag{font:700 10px/1 var(--od-ff);letter-spacing:.14em; text-transform:uppercase;color:var(--od-muted);margin-bottom:4px} .od-trim-row{display:flex;align-items:baseline; justify-content:space-between;gap:8px} .od-trim-row b{font:800 19px/1 var(--od-ff);color:var(--od-cream)} .od-trim-price{font:600 12.5px/1.3 var(--od-ff);color:var(--od-mutedw)} .od-trim-price:empty{display:none} /* Color-group label inside quickshop */ .od-color-year{font:700 11px/1 var(--od-ff);letter-spacing:.2em; text-transform:uppercase;color:var(--od-gd);margin:26px 0 14px} .od-color-year:first-of-type{margin-top:0} /* Quiz — trim finder band (banner inversion recipe) */ .od-quiz{padding:44px 0; background:linear-gradient(135deg,var(--od-gl),var(--od-gold)); color:var(--od-navy)} .od-quiz-eyebrow{font:700 12px/1 var(--od-ff);letter-spacing:.24em; text-transform:uppercase;color:rgba(var(--od-navy-rgb),.6); margin-bottom:10px} .od-quiz-title{font:800 26px/1.1 var(--od-ff);letter-spacing:-.02em; color:var(--od-navy);max-width:640px;margin-bottom:24px} @media(min-width:768px){.od-quiz-title{font-size:32px}} .od-quiz-grid{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:760px){.od-quiz-grid{grid-template-columns:repeat(3,1fr)}} .od-quiz-q{font:700 15px/1.3 var(--od-ff);color:var(--od-navy); margin-bottom:14px} .od-quiz-q span{color:rgba(var(--od-navy-rgb),.5)} .od-quiz-opts{display:flex;flex-direction:column;gap:8px} .od-quiz-opt{font:600 14px/1.3 var(--od-ff);text-align:left; padding:13px 20px;border-radius:11px;cursor:pointer; border:1.5px solid rgba(var(--od-navy-rgb),.3);background:transparent; color:rgba(var(--od-navy-rgb),.85);transition:all .15s} .od-quiz-opt:hover{border-color:rgba(var(--od-navy-rgb),.6)} .od-quiz-opt.is-active{border-color:var(--od-navy); background:var(--od-navy);color:var(--od-gl)} .od-quiz-pending{margin-top:30px;font:400 14px/1.5 var(--od-ff); color:rgba(var(--od-navy-rgb),.6)} .od-quiz-result{margin-top:26px;background:var(--od-navy); color:var(--od-text);border-radius:18px;padding:26px;display:flex; flex-wrap:wrap;gap:26px;align-items:center} .od-quiz-result-main{flex:1 1 300px;min-width:260px} .od-quiz-result-label{font:700 11px/1 var(--od-ff);letter-spacing:.2em; text-transform:uppercase;color:var(--od-muted);margin-bottom:8px} .od-quiz-result-trim{font:900 34px/1 var(--od-ff);letter-spacing:-.02em; color:var(--od-cream);margin-bottom:12px} @media(min-width:768px){.od-quiz-result-trim{font-size:42px}} .od-quiz-result-reason{font:400 15px/1.6 var(--od-ff); color:var(--od-mutedw)} .od-quiz-result-ctas{flex:0 0 auto;display:flex;flex-direction:column; gap:10px;min-width:220px} .od-quiz-reset{font:600 12.5px/1 var(--od-ff); color:var(--od-muted);background:none;border:none;cursor:pointer; text-decoration:underline;text-underline-offset:3px;padding:4px 0} /* Cross-shop model grid */ .od-models-grid{display:grid;gap:12px; grid-template-columns:repeat(2,1fr)} @media(min-width:600px){.od-models-grid{ grid-template-columns:repeat(4,1fr)}} @media(min-width:980px){.od-models-grid{ grid-template-columns:repeat(6,1fr)}} .od-model-card{position:relative;display:flex;flex-direction:column; background:var(--od-card);border:1px solid var(--od-border); border-radius:12px;overflow:hidden;text-decoration:none; transition:transform .2s,border-color .2s} .od-model-card:hover{transform:translateY(-3px); border-color:var(--od-gold)} .od-model-head{height:84px;display:flex;align-items:center; justify-content:center;position:relative; background:var(--od-mh,var(--od-mid)) center/cover no-repeat} .od-model-head span{font:600 10px/1 var(--od-ff);letter-spacing:.1em; text-transform:uppercase;color:var(--od-dim)} .od-model-ev{position:absolute;top:8px;right:8px; font:700 8.5px/1 var(--od-ff);letter-spacing:.05em;color:#fff; background:var(--od-ev);padding:3px 7px;border-radius:20px} .od-model-ev.is-fuel{background:var(--od-cream)} .od-model-tags{position:absolute;top:8px;right:8px;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:calc(100% - 16px)} .od-model-tags .od-model-ev{position:static} .od-model-name{padding:12px 14px;font:700 15px/1.2 var(--od-ff); color:var(--od-cream)} .od-model-name small{display:block;font:400 10.5px/1.3 var(--od-ff); color:var(--od-muted);margin-top:2px} .od-model-card.is-current{background:linear-gradient(135deg,var(--od-gl), var(--od-gold));border-color:var(--od-gl)} .od-model-card.is-current .od-model-head{ background:var(--od-mh,transparent) center/cover no-repeat} .od-model-card.is-current .od-model-head span{ color:rgba(var(--od-navy-rgb),.4)} .od-model-card.is-current .od-model-name{color:var(--od-navy)} .od-model-card.is-current .od-model-name small{ color:rgba(var(--od-navy-rgb),.6)} .od-model-card.is-all{align-items:center;justify-content:center;gap:6px; min-height:130px;background:var(--od-mid)} .od-model-card.is-all b{font:900 22px/1 var(--od-ff); color:var(--od-cream);letter-spacing:.06em} .od-model-card.is-all span{font:600 12px/1 var(--od-ff); color:var(--od-muted)} /* Sidebar contact variant (accent card) */ .od-sidebar-card.is-accent{background:linear-gradient(135deg,var(--od-gl), var(--od-gold));border-color:var(--od-gl)} .od-sidebar-card.is-accent h4{color:rgba(var(--od-navy-rgb),.7)} .od-sidebar-card.is-accent .od-sidebar-phone{display:block; font:800 20px/1 var(--od-ff);color:var(--od-navy); text-decoration:none;margin-bottom:6px;border:none;padding:0} .od-sidebar-card.is-accent p{font:400 13px/1.6 var(--od-ff); color:rgba(var(--od-navy-rgb),.75)} /* Layout variants (replace inline styles — library-only rule) */ .od-quickshop.is-plain{background:none;padding:0 0 36px} .od-color-cell{text-decoration:none} .od-specialty-lineup.is-duo{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))} .od-specialty-features-grid.is-auto{grid-template-columns:repeat(auto-fit, minmax(200px,1fr))} .od-specialty-card-body .od-btn{align-self:flex-start} .od-qs-label.is-block{display:inline-block;margin-bottom:14px} /* Image placeholder tile (pages awaiting photos — [NEEDS] slots) */ .od-imgslot{display:flex;align-items:center;justify-content:center; background:var(--od-mid);border:1px dashed var(--od-border); border-radius:12px;min-height:150px; font:600 11px/1.4 var(--od-ff);letter-spacing:.06em; text-transform:uppercase;color:var(--od-muted);text-align:center; padding:10px} .od-specialty-feature-photo .od-imgslot{aspect-ratio:1;min-height:0} /* ── Reduced motion ────────────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .od-page *{transition:none!important;animation:none!important}} /* ═══ v2 addendum (2026-07-03) · od-fill holiday banner (.od-holiday-note) Emitted by SRP block-2 v2 sidebar + dealer-city pages. Tokenize #05141F to the accent variable when consolidating. ═══ */ .od-holiday-note{background:#05141F;color:#fff;border-radius:9px;padding:10px 14px;font-size:13px;font-weight:600;margin:0 0 14px} .od-holiday-note:empty{display:none} /* v2: .is-all logo card (Soul removed; "All Inventory" + store logo). Tokenize hex when consolidating. */ .od-model-card.is-all{background:#fff;gap:6px;padding:0 0 12px} .od-model-card.is-all img{width:100%;flex:1 1 0;min-height:0;max-height:96px;object-fit:contain} .od-model-card.is-all span{font:700 13px/1 var(--od-ff);color:#05141F} /* ═══ v2 addendum (2026-07-03b) · Mobile fixes ═══ Hours segments: od-fill (next rev) wraps each day-group in … instead of joining with " · "; each group then renders on its own line everywhere hours appear. */ .od-hours-seg{display:block} @media(max-width:640px){ /* stat band: clearer separation between tiles */ .od-statband .od-wrap{gap:14px} /* hero CTAs: one per line, left aligned */ .od-hero-ctas{flex-direction:column;align-items:flex-start} .od-hero-ctas .od-btn{width:100%;max-width:360px} /* photo hero: keep the building in frame on tall narrow crops */ .od-hero.is-photo{background-position:center 25%} /* model tiles: show the whole vehicle, never crop */ .od-model-head{height:120px;background-size:contain!important; background-color:var(--od-mid)} .od-model-card.is-current .od-model-head{background-color:transparent} } /* ═══ v2 addendum (2026-07-03c) · dept-hours grid: always 2×2, never 3+1 ═══ */ .od-hours-grid{grid-template-columns:repeat(2,1fr)!important} @media(max-width:480px){.od-hours-grid{grid-template-columns:1fr!important}} /* ═══════════════════════════════════════════════════════════════════ v3 addendum (2026-07-03) · RECALL PAGES — .od-recall-* / .od-rrow-* / .od-rf-* ADDITIVE ONLY. Nothing above this line is modified. Lifted from od-recall-preview.css with preview tokens remapped to the sitewide --od-* system (accent→--od-gl · lead→--od-card · lead-2→--od-mid · lead-3→--od-dark · surf2→--od-navy2 · border→--od-border · ink→--od-cream · ev→--od-ev · alert→--od-alert · disp/body→--od-ff · rgba(5,20,31)→--od-cream-rgb). Reused base/breadcrumb/banner/faq/why/model-tile/holiday classes are NOT re-declared here — they already exist above. Shared by all 3 recall pages. TODO on bundle-lift: tokenize two literals with no --od-* today — amber #B9770E (.od-recall-badge.is-amber) and status divider #2E4453. ═══════════════════════════════════════════════════════════════════ */ .od-recall-hero{background:var(--od-mid);border-bottom:1px solid var(--od-border)} .od-recall-hero .od-wrap{padding-top:clamp(40px,5.5vw,72px);padding-bottom:clamp(32px,4vw,52px);text-align:center;max-width:900px} .od-recall-hero .od-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px} .od-recall-hero .od-eyebrow::before{content:"";width:7px;height:7px;background:var(--od-gl);border-radius:50%} .od-recall-hero h1{font-family:var(--od-ff);font-size:clamp(34px,5.2vw,58px);font-weight:900;line-height:1.02;letter-spacing:-1px;margin:0 0 10px;color:var(--od-gl)} .od-recall-hero h1 span{display:block;font-size:clamp(15px,1.8vw,20px);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5);margin-top:12px} .od-recall-hero-sub{font-size:clamp(15px,1.4vw,17px);color:rgba(var(--od-cream-rgb),.66);margin:14px auto 0;max-width:64ch} .od-recall-hero-sub strong{color:var(--od-gl)} .od-recall-nav{background:var(--od-card);border-bottom:1px solid var(--od-border)} .od-recall-nav .od-wrap{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:14px;justify-content:center} .od-recall-nav-link{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--od-ff);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--od-gl);background:var(--od-mid);border:1px solid var(--od-border);border-radius:20px;padding:10px 18px;text-decoration:none;transition:background .2s,border-color .2s} .od-recall-nav-link:hover{background:var(--od-dark);border-color:rgba(var(--od-cream-rgb),.24)} .od-recall-nav-link.is-cta{color:#fff;background:var(--od-gl);border-color:var(--od-gl)} .od-recall-nav-link.is-cta:hover{background:var(--od-gd)} .od-recall-vin{background:var(--od-card);padding:clamp(36px,4.5vw,56px) 0} .od-recall-vin-card{max-width:760px;margin:0 auto;background:var(--od-mid);border:1px solid var(--od-border);border-radius:16px;padding:clamp(24px,3vw,36px);text-align:center} .od-recall-vin-card h3{font-family:var(--od-ff);font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--od-gl);margin:0 0 10px} .od-recall-vin-card p{font-size:14.5px;color:rgba(var(--od-cream-rgb),.66);margin:0 0 20px;max-width:56ch;margin-left:auto;margin-right:auto} .od-recall-vin-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .od-recall-vin-input{flex:1 1 280px;max-width:420px;font-family:var(--od-ff);font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--od-gl);background:var(--od-card);border:1.5px solid var(--od-border);border-radius:9px;padding:14px 16px} .od-recall-vin-input:focus{outline:none;border-color:var(--od-gl)} .od-recall-vin-btn{font-family:var(--od-ff);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--od-gl);border:none;border-radius:9px;padding:14px 26px;cursor:pointer;transition:background .2s} .od-recall-vin-btn:hover{background:var(--od-gd)} .od-recall-vin-result{margin-top:18px;font-size:14px;color:rgba(var(--od-cream-rgb),.7);text-align:left} .od-recall-vin-result:empty{display:none} .od-recall-vin-card .od-recall-vin-note{margin-top:34px;max-width:none;font-size:12px;color:rgba(var(--od-cream-rgb),.5)} .od-recall-section{padding:clamp(40px,5vw,64px) 0} .od-recall-section.is-tinted{background:var(--od-mid)} .od-recall-section-head{max-width:760px;margin-bottom:clamp(24px,3vw,34px)} .od-recall-section-head .od-h2{margin-bottom:12px} .od-recall-section-head p{font-size:15px;color:rgba(var(--od-cream-rgb),.62);margin:0} .od-recall-section-head p strong{color:var(--od-gl)} .od-recall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .od-recall-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:24px 22px} .od-recall-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .od-recall-badge{display:inline-flex;align-items:center;white-space:nowrap;text-align:left;font-family:var(--od-ff);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;border-radius:20px;padding:5px 11px;background:var(--od-mid);border:1px solid var(--od-border);color:rgba(var(--od-cream-rgb),.65)} .od-recall-badge.is-red{background:var(--od-alert);border-color:var(--od-alert);color:#fff} .od-recall-badge.is-amber{background:#B9770E;border-color:#B9770E;color:#fff} .od-recall-badge.is-green{background:var(--od-ev);border-color:var(--od-ev);color:#fff} .od-recall-card-title{font-family:var(--od-ff);font-size:17px;font-weight:800;color:var(--od-gl);line-height:1.3;margin:0 0 10px} .od-recall-card-desc{font-size:14px;color:rgba(var(--od-cream-rgb),.7);line-height:1.65;margin:0 0 12px} .od-recall-card-desc strong{color:var(--od-gl)} .od-recall-remedy{font-size:13.5px;color:rgba(var(--od-cream-rgb),.7);line-height:1.6;background:var(--od-mid);border:1px solid var(--od-border);border-radius:9px;padding:12px 14px;margin:0 0 10px} .od-recall-remedy strong{color:var(--od-gl)} .od-recall-source{font-size:11px;color:rgba(var(--od-cream-rgb),.45);line-height:1.5} .od-recall-related{padding:clamp(18px,2vw,26px) 0} .od-recall-related:first-of-type{padding-top:clamp(36px,4vw,52px)} .od-recall-related:last-of-type{padding-bottom:clamp(36px,4vw,52px)} .od-recall-related-label{font-family:var(--od-ff);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5);margin-bottom:10px} .od-recall-related-grid{display:flex;flex-wrap:wrap;gap:8px} .od-recall-related-link{display:inline-flex;align-items:center;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--od-gl);background:var(--od-card);border:1px solid var(--od-border);border-radius:20px;padding:9px 18px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s} .od-recall-related-link:hover{background:var(--od-mid);border-color:rgba(var(--od-cream-rgb),.28);transform:translateY(-2px)} .od-recall-related-link.is-current{background:var(--od-gl);border-color:var(--od-gl);color:#fff} .od-recall-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:odstep} .od-recall-step{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:22px;counter-increment:odstep} .od-recall-step::before{content:"0" counter(odstep);display:block;font-family:var(--od-ff);font-size:30px;font-weight:900;color:var(--od-dark);line-height:1;margin-bottom:12px} .od-recall-step h4{font-family:var(--od-ff);font-size:16px;font-weight:800;color:var(--od-gl);margin:0 0 8px} .od-recall-step p{font-size:13.5px;color:rgba(var(--od-cream-rgb),.68);margin:0;line-height:1.6} .od-recall-step a{color:var(--od-gl);font-weight:600} .od-recall-status{display:flex;flex-wrap:wrap;gap:1px;background:#2E4453;border-top:4px solid var(--od-alert);border-radius:14px;overflow:hidden;margin-bottom:clamp(24px,3vw,34px);box-shadow:0 18px 40px rgba(var(--od-cream-rgb),.16)} .od-recall-status-item{flex:1 1 160px;background:var(--od-gl);padding:20px 20px 18px} .od-recall-status-item b{display:block;font-family:var(--od-ff);font-size:clamp(17px,1.5vw,20px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:5px} .od-recall-status-item span{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.4} @media(max-width:640px){.od-recall-status-item{padding:15px 16px 13px}} .od-recall-cta{background:var(--od-mid);padding:clamp(40px,5vw,64px) 0;text-align:center} .od-recall-cta .od-h2{margin-bottom:10px} .od-recall-cta p{font-size:15px;color:rgba(var(--od-cream-rgb),.65);max-width:62ch;margin:0 auto 24px} .od-recall-cta p a{color:var(--od-gl);font-weight:700} .od-recall-cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} /* ── Kia-hub redesign 2026-07-03 · notable recalls as expandable rows (NEW family) ── */ .od-rrow-list{display:flex;flex-direction:column;gap:14px} .od-rrow{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;overflow:hidden;transition:box-shadow .18s,border-color .18s} .od-rrow>summary{list-style:none;display:grid;grid-template-columns:168px 1fr auto;gap:14px;align-items:center;padding:15px 18px;cursor:pointer} .od-rrow>summary .od-recall-badge{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.25;padding-top:7px;padding-bottom:7px} .od-rrow>summary::-webkit-details-marker{display:none} .od-rrow-head{min-width:0} .od-rrow-title{display:block;font-family:var(--od-ff);font-size:15.5px;font-weight:800;color:var(--od-gl);line-height:1.3} .od-rrow-meta{display:block;font-size:12.5px;color:rgba(var(--od-cream-rgb),.58);margin-top:3px} .od-rrow-chev{font-size:18px;line-height:1;color:rgba(var(--od-cream-rgb),.45);transition:transform .18s} .od-rrow[open] .od-rrow-chev{transform:rotate(180deg)} .od-rrow[open]{border-color:rgba(var(--od-cream-rgb),.3);box-shadow:0 14px 34px rgba(var(--od-cream-rgb),.12)} .od-rrow[open]>summary{background:var(--od-mid);border-bottom:1px solid var(--od-border)} .od-rrow-body{padding:20px 20px 20px} .od-rrow-body .od-recall-card-desc{margin-top:0} @media(max-width:640px){ .od-rrow>summary{grid-template-columns:1fr auto;row-gap:8px} .od-rrow>summary .od-recall-badge{width:auto;justify-self:start} .od-rrow-head{grid-column:1/-1;grid-row:2} } /* ── recall-action emphasis 2026-07-03 · official hero chips ── */ .od-recall-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px} .od-recall-hero-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--od-ff);font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;padding:8px 15px;border-radius:22px;border:1.5px solid rgba(var(--od-cream-rgb),.35);color:var(--od-gl);background:var(--od-card)} .od-recall-hero-chip.is-alert{background:var(--od-alert);border-color:var(--od-alert);color:#fff} .od-recall-hero-chip.is-alert::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none} /* chip accents — restrained emphasis (de-color pass follow-up) */ .od-recall-badge.is-key{background:var(--od-gl);border-color:var(--od-gl);color:#fff} .od-recall-badge.is-safety{background:var(--od-alert);border-color:var(--od-alert);color:#fff} /* year/system recall filter — CSS-only via :has(); browsers without :has() simply show all rows */ .od-rf{display:flex;flex-direction:column;gap:12px;margin:0 0 26px;padding:18px 20px;background:var(--od-mid);border:1px solid var(--od-border);border-radius:12px} .od-rf-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .od-rf-name{font-family:var(--od-ff);font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5);min-width:88px} .od-rf-input{position:absolute;opacity:0;pointer-events:none} .od-rf-chip{display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;font-family:var(--od-ff);font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--od-gl);background:var(--od-card);border:1px solid var(--od-border);border-radius:999px;padding:8px 14px;user-select:none;transition:background .15s,border-color .15s,color .15s} .od-rf-chip:hover{border-color:rgba(var(--od-cream-rgb),.3)} .od-rf-input:checked+.od-rf-chip{color:#fff;background:var(--od-gl);border-color:var(--od-gl)} .od-rf-input:focus-visible+.od-rf-chip{outline:2px solid var(--od-gl);outline-offset:2px} .od-rf-note{font-size:12.5px;color:rgba(var(--od-cream-rgb),.5);margin:0} #od-recall-timeline:has(#od-rf-y-2020:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2020"]){display:none} #od-recall-timeline:has(#od-rf-y-2021:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2021"]){display:none} #od-recall-timeline:has(#od-rf-y-2022:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2022"]){display:none} #od-recall-timeline:has(#od-rf-y-2023:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2023"]){display:none} #od-recall-timeline:has(#od-rf-y-2024:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2024"]){display:none} #od-recall-timeline:has(#od-rf-y-2025:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2025"]){display:none} #od-recall-timeline:has(#od-rf-y-2026:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2026"]){display:none} #od-recall-timeline:has(#od-rf-y-2027:checked) .od-rrow[data-od-ry]:not([data-od-ry~="2027"]){display:none} #od-recall-timeline:has(#od-rf-s-airbag:checked) .od-rrow[data-od-rs]:not([data-od-rs~="airbag"]){display:none} #od-recall-timeline:has(#od-rf-s-seat:checked) .od-rrow[data-od-rs]:not([data-od-rs~="seat"]){display:none} #od-recall-timeline:has(#od-rf-s-belt:checked) .od-rrow[data-od-rs]:not([data-od-rs~="belt"]){display:none} #od-recall-timeline:has(#od-rf-s-drivetrain:checked) .od-rrow[data-od-rs]:not([data-od-rs~="drivetrain"]){display:none} #od-recall-timeline:has(#od-rf-s-engine:checked) .od-rrow[data-od-rs]:not([data-od-rs~="engine"]){display:none} #od-recall-timeline:has(#od-rf-s-electrical:checked) .od-rrow[data-od-rs]:not([data-od-rs~="electrical"]){display:none} #od-recall-timeline:has(#od-rf-s-fire:checked) .od-rrow[data-od-rs]:not([data-od-rs~="fire"]){display:none} #od-recall-timeline:has(#od-rf-s-trim:checked) .od-rrow[data-od-rs]:not([data-od-rs~="trim"]){display:none} #od-recall-timeline:has(#od-rf-s-compliance:checked) .od-rrow[data-od-rs]:not([data-od-rs~="compliance"]){display:none} .od-recall-livelist{margin-top:16px} .od-recall-livelist:empty{display:none} .od-rrow-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .od-rrow-cta .od-btn{padding:11px 20px;font-size:12px} /* zero-match empty state — AUTO-GENERATED 2026-07-03 from timeline rows; regenerate if rows/chips change */ .od-rrow-empty{display:none;margin:0;padding:24px 22px;background:var(--od-mid);border:1px dashed var(--od-border);border-radius:12px;color:rgba(var(--od-cream-rgb),.6);font-size:14px;line-height:1.55;text-align:center} #od-recall-timeline:has(#od-rf-y-2020:checked):has(#od-rf-s-airbag:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2020:checked):has(#od-rf-s-belt:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2020:checked):has(#od-rf-s-electrical:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2020:checked):has(#od-rf-s-trim:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2020:checked):has(#od-rf-s-compliance:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2021:checked):has(#od-rf-s-airbag:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2021:checked):has(#od-rf-s-belt:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2021:checked):has(#od-rf-s-electrical:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2021:checked):has(#od-rf-s-trim:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2021:checked):has(#od-rf-s-compliance:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2022:checked):has(#od-rf-s-airbag:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2022:checked):has(#od-rf-s-belt:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2022:checked):has(#od-rf-s-electrical:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2022:checked):has(#od-rf-s-trim:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2022:checked):has(#od-rf-s-compliance:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2023:checked):has(#od-rf-s-belt:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2023:checked):has(#od-rf-s-compliance:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2024:checked):has(#od-rf-s-airbag:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2024:checked):has(#od-rf-s-belt:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2024:checked):has(#od-rf-s-electrical:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2024:checked):has(#od-rf-s-compliance:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2025:checked):has(#od-rf-s-airbag:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2025:checked):has(#od-rf-s-belt:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2025:checked):has(#od-rf-s-drivetrain:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2025:checked):has(#od-rf-s-electrical:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2025:checked):has(#od-rf-s-fire:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2027:checked):has(#od-rf-s-airbag:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2027:checked):has(#od-rf-s-drivetrain:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2027:checked):has(#od-rf-s-electrical:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2027:checked):has(#od-rf-s-fire:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2027:checked):has(#od-rf-s-trim:checked) .od-rrow-empty, #od-recall-timeline:has(#od-rf-y-2027:checked):has(#od-rf-s-compliance:checked) .od-rrow-empty{display:block} /* 2026-07-04: advisory cards — align Free fix + Source across cards */ .od-recall-card{display:flex;flex-direction:column} .od-recall-remedy{margin-top:auto} /* 2026-07-04c: recall tiles fill the image section (cover); badge on white studio bg clears the centered car */ .od-models-grid.is-recall .od-model-head{height:172px;background-size:cover;background-position:center;background-color:#fff} .od-models-grid.is-recall{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} /* ── Section: WHY cards (recall pages; lift-ready) · added 2026-07-04d ── Was authored in od-recall-preview.css but never lifted to sitewide → rendered unstyled on production. Tokens mapped to --od-* system. */ .od-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .od-why-card{display:block;background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:24px 22px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s} .od-why-card:hover{border-color:var(--od-gl);transform:translateY(-2px)} .od-why-card h4{font:800 17px/1.25 var(--od-ff);color:var(--od-text);margin:0 0 8px} .od-why-card p{font:400 14px/1.6 var(--od-ff);color:rgba(var(--od-text-rgb),.68);margin:0} /* nested links inside div-based why-cards (2026-07-05e — default-blue fix) */ .od-why-card p a{color:var(--od-gl);font-weight:700;text-decoration:underline} .od-why-card p a:hover{color:var(--od-muted)} /* ── Section: MAINT (maintenance-schedule pages; lift-ready) · added 2026-07-05b ── New family for /service/ maintenance-schedule pages. Everything else on those pages reuses lifted families (od-recall-hero/nav/section, od-models-grid, od-recall-related, od-why-*, od-faq, od-recall-cta, od-btn, od-breadcrumb). Zero page JS: interval table is a horizontal-scroll table w/ sticky first col. */ /* year-picker grid (model-level pages) */ .od-maint-gen{margin-bottom:44px} .od-maint-gen:last-child{margin-bottom:0} .od-maint-gen-label{display:flex;align-items:center;gap:12px;font:700 12px/1 var(--od-ff);text-transform:uppercase;letter-spacing:2px;color:var(--od-gl);margin-bottom:16px} .od-maint-gen-label::after{content:"";flex:1;height:1px;background:var(--od-border)} .od-maint-year-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} .od-maint-year-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s} .od-maint-year-card:hover{border-color:var(--od-gl);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--od-text-rgb),.08)} .od-maint-year-main{display:block;flex:1;padding:16px 16px 14px;text-decoration:none;color:inherit} .od-maint-year-num{display:block;font:800 26px/1 var(--od-ff);color:var(--od-text)} .od-maint-year-gen{display:block;font:700 10px/1 var(--od-ff);text-transform:uppercase;letter-spacing:1.5px;color:rgba(var(--od-text-rgb),.5);margin-top:6px} .od-maint-year-badge{display:inline-block;font:700 10px/1.2 var(--od-ff);text-transform:uppercase;letter-spacing:1px;padding:4px 8px;border-radius:4px;margin-top:10px;background:var(--od-mid);color:rgba(var(--od-text-rgb),.7)} .od-maint-year-badge.is-current{background:var(--od-gl);color:#FFFFFF} .od-maint-year-recalls{display:block;text-align:center;font:700 11px/1 var(--od-ff);text-transform:uppercase;letter-spacing:1px;color:var(--od-gl);padding:10px 8px;border-top:1px solid var(--od-border);background:var(--od-mid);text-decoration:none;transition:background .15s} .od-maint-year-recalls:hover{background:var(--od-border)} /* schedule-change log (model-level pages) */ .od-maint-log{display:grid;gap:14px;max-width:900px;margin:0 auto} .od-maint-log-item{background:var(--od-card);border:1px solid var(--od-border);border-radius:10px;padding:22px 24px} .od-maint-log-year{font:800 13px/1 var(--od-ff);text-transform:uppercase;letter-spacing:1.5px;color:var(--od-gl);margin-bottom:8px} .od-maint-log-title{font:800 17px/1.35 var(--od-ff);color:var(--od-text);margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .od-maint-log-tag{font:700 10px/1 var(--od-ff);text-transform:uppercase;letter-spacing:1px;padding:4px 8px;border-radius:4px;background:var(--od-mid);color:rgba(var(--od-text-rgb),.65)} .od-maint-log-body{font:400 14px/1.7 var(--od-ff);color:rgba(var(--od-text-rgb),.68)} /* interval table (YMM pages) */ .od-maint-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-bottom:20px} .od-maint-legend span{font:400 14px/1.5 var(--od-ff);color:rgba(var(--od-text-rgb),.7);display:inline-flex;align-items:center;gap:8px} .od-maint-check{color:var(--od-gl);font-weight:700} .od-maint-star{color:var(--od-text);font-weight:900} .od-maint-scroll{border:1px solid var(--od-border);border-radius:10px;overflow-x:auto;background:var(--od-card);-webkit-overflow-scrolling:touch} .od-maint-table{width:100%;min-width:880px;border-collapse:collapse} .od-maint-table th{font:700 11px/1.4 var(--od-ff);text-transform:uppercase;letter-spacing:1px;color:rgba(var(--od-text-rgb),.6);padding:10px 8px;text-align:center;background:var(--od-mid);border-bottom:1px solid var(--od-border)} .od-maint-table th.is-group{font-size:12px;color:var(--od-gl)} .od-maint-table td{font:400 15px/1.4 var(--od-ff);color:var(--od-text);padding:10px 8px;text-align:center;border-bottom:1px solid var(--od-border)} .od-maint-table tbody tr:last-child td{border-bottom:none} .od-maint-table th:first-child,.od-maint-table td:first-child{text-align:left;padding-left:16px;white-space:nowrap;position:sticky;left:0;z-index:1} .od-maint-table td:first-child{font-weight:800;font-size:13px;background:var(--od-card);box-shadow:1px 0 0 var(--od-border)} .od-maint-table th:first-child{background:var(--od-mid);z-index:2;box-shadow:1px 0 0 var(--od-border)} .od-maint-table tr.is-milestone td{background:var(--od-mid)} .od-maint-table tr.is-milestone td:first-child{background:var(--od-mid)} .od-maint-table tbody tr:hover td{background:rgba(var(--od-gl-rgb),.05)} .od-maint-table .od-col-div{border-left:1px solid var(--od-border)} .od-maint-note{font:400 13px/1.8 var(--od-ff);color:rgba(var(--od-text-rgb),.6);text-align:center;margin:22px auto 0;max-width:720px} .od-maint-list{list-style:none;margin:10px 0 0;padding:0} .od-maint-list li{font:400 14px/1.6 var(--od-ff);color:rgba(var(--od-text-rgb),.68);padding:5px 0;border-bottom:1px solid var(--od-border)} .od-maint-list li:last-child{border-bottom:none} /* crawlable schedule summary — visually hidden, accessible to crawlers/AT */ .od-maint-seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} @media(max-width:640px){ .od-maint-year-grid{grid-template-columns:repeat(2,1fr)} .od-maint-log-item{padding:18px} .od-maint-legend{gap:8px 20px} .od-maint-table{min-width:820px} } /* maint change-log timeline variant (2026-07-05f) */ .od-maint-log.is-timeline{position:relative;padding-left:26px} .od-maint-log.is-timeline::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--od-border)} .od-maint-log.is-timeline .od-maint-log-item{position:relative} .od-maint-log.is-timeline .od-maint-log-item::before{content:"";position:absolute;left:-24px;top:27px;width:12px;height:12px;border-radius:50%;background:var(--od-gl);border:2px solid var(--od-card);box-shadow:0 0 0 1px var(--od-border)} @media(max-width:640px){.od-maint-log.is-timeline{padding-left:20px} .od-maint-log.is-timeline .od-maint-log-item::before{left:-18px;width:10px;height:10px}} /* why-card sizzle variants (resources grids, 2026-07-05g) */ .od-why-eyebrow{display:block;font:700 10px/1 var(--od-ff);letter-spacing:.14em;text-transform:uppercase;color:var(--od-gl);opacity:.6;margin-bottom:10px} .od-why-card.is-photo{background-image:linear-gradient(180deg,rgba(var(--od-gl-rgb),.86) 0%,rgba(var(--od-gl-rgb),.62) 100%),var(--od-mh,none);background-size:cover,cover;background-position:center,center 62%;border-color:var(--od-gl)} .od-why-card.is-photo .od-why-eyebrow{color:#FFFFFF;opacity:.75} .od-why-card.is-photo h4{color:#FFFFFF} .od-why-card.is-photo p{color:rgba(255,255,255,.82)} .od-why-card.is-accent{background:var(--od-gl);border-color:var(--od-gl)} .od-why-card.is-accent .od-why-eyebrow{color:#FFFFFF;opacity:.75} .od-why-card.is-accent h4{color:#FFFFFF} .od-why-card.is-accent p{color:rgba(255,255,255,.82)} .od-why-card.is-photo:hover,.od-why-card.is-accent:hover{border-color:var(--od-gl);box-shadow:0 10px 26px rgba(var(--od-gl-rgb),.28)} /* ══════════════════════════════════════════════════════════════════════ v5 addendum (2026-07-05) · HOMEPAGE — .od-h* / .od-marq / .od-mx / .od-diff ADDITIVE ONLY. Reuses: od-banner(is-inset) · od-offers-customize/od-oc-select · od-modal family + form[data-od-lead] · od-faq · od-nearby · od-btn · od-eyebrow/od-h2/od-h3. Rendered by bundle module 7 (od-home): [data-od-home-marquee] + [data-od-home-explorer]. Zero page JS. ══════════════════════════════════════════════════════════════════════ */ /* ── Section: HOME HERO (light, faded dealership photo) ─────────────── */ .od-hhero{background:var(--od-mid);position:relative;overflow:hidden;min-height:calc(100dvh - 84px)} .od-hhero-bg{position:absolute;inset:0;pointer-events:none} .od-hhero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .od-hhero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--od-mid) 0%,rgba(var(--od-mid-rgb),.96) 30%,rgba(var(--od-mid-rgb),.7) 58%,rgba(var(--od-mid-rgb),.18) 100%)} .od-hhero .od-wrap{position:relative;z-index:1;padding-top:clamp(52px,6.5vw,92px);padding-bottom:clamp(170px,20vw,260px);text-align:center} .od-hhero h1{font:900 clamp(38px,6vw,76px)/1 var(--od-ff);letter-spacing:-.03em;color:var(--od-cream);margin:16px 0 0} .od-hhero h1 span{display:block;color:rgba(var(--od-cream-rgb),.4)} .od-hhero-sub{max-width:620px;margin:22px auto 30px;font:400 17.5px/1.65 var(--od-ff);color:rgba(var(--od-cream-rgb),.72)} .od-hhero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ── Section: QUICK ACTIONS (overlapping tile panel) ─────────────────── */ .od-qact{position:relative;z-index:2;margin-top:-92px} .od-qact .od-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .od-qact-tile{display:flex;align-items:center;gap:14px;background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:20px 18px;text-decoration:none;box-shadow:0 14px 34px rgba(var(--od-gl-rgb),.10);transition:transform .15s,border-color .15s} .od-qact-tile:hover{transform:translateY(-3px);border-color:var(--od-gl)} .od-qact-icon{width:46px;height:46px;border-radius:12px;background:var(--od-gl);display:flex;align-items:center;justify-content:center;flex:none} .od-qact-icon svg{width:22px;height:22px;stroke:#FFFFFF;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .od-qact-name{font:800 15px/1.3 var(--od-ff);color:var(--od-cream)} .od-qact-sub{font:400 12.5px/1.35 var(--od-ff);color:rgba(var(--od-cream-rgb),.6)} /* 6-tile variant — clean 3-up under a photo hero (research/model pages), no overlap */ .od-qact.is-six{margin:28px 0} .od-qact.is-six .od-wrap{grid-template-columns:repeat(3,1fr)} @media(max-width:960px){.od-qact.is-six .od-wrap{grid-template-columns:1fr 1fr}} @media(max-width:640px){.od-qact.is-six .od-wrap{grid-template-columns:1fr}} /* ── Section: OFFERS MARQUEE (single billboard panel, od-home renders) ─ */ .od-marq{width:100%;background:linear-gradient(135deg,var(--od-gl),var(--od-gd));border-radius:16px;padding:26px 26px 24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));color:#FFFFFF} .od-marq-cell{padding:2px 20px;border-left:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:3px} .od-marq-cell:first-child{border-left:0;padding-left:0} .od-marq-tag{font:800 10px/1.4 var(--od-ff);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)} .od-marq-val{font:900 clamp(24px,2.3vw,32px)/1.1 var(--od-ff);letter-spacing:-.025em} .od-marq-val span{font:600 12px/1.4 var(--od-ff);color:rgba(255,255,255,.55);letter-spacing:0} .od-marq-sub{font:400 12px/1.4 var(--od-ff);color:rgba(255,255,255,.62);flex:1;margin-top:2px} .od-marq-cta{align-self:flex-start;margin-top:12px;font:800 10px/1 var(--od-ff);letter-spacing:.07em;text-transform:uppercase;color:var(--od-gl);background:#FFFFFF;border:none;border-radius:7px;padding:9px 13px;cursor:pointer;white-space:nowrap;text-decoration:none} .od-marq-det{align-self:flex-start;margin-top:8px;font:600 11px/1 var(--od-ff);color:rgba(255,255,255,.55);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap} .od-marq-empty{grid-column:1/-1;font:400 14px/1.6 var(--od-ff);color:rgba(255,255,255,.7);text-align:center;padding:10px 0} /* ── Section: DIFFERENCE BAND (silver, giant numerals) ───────────────── */ .od-diff{background:linear-gradient(180deg,var(--od-dark) 0%,var(--od-mid) 100%);position:relative;overflow:hidden;border-top:1px solid var(--od-border);border-bottom:1px solid var(--od-border)} .od-diff::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 300px at 15% 0%,rgba(var(--od-gl-rgb),.05),transparent 60%),radial-gradient(720px 300px at 85% 100%,rgba(var(--od-gl-rgb),.04),transparent 60%);pointer-events:none} .od-diff .od-wrap{position:relative;padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(48px,6vw,72px)} .od-diff-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)} .od-diff-hdr h2{font:900 clamp(22px,2.6vw,32px)/1.2 var(--od-ff);letter-spacing:-.02em;margin:0;color:var(--od-gl)} .od-diff-grid{display:grid;grid-template-columns:repeat(3,1fr)} .od-diff-cell{padding:0 clamp(20px,3vw,44px);border-left:1px solid var(--od-border);display:flex;flex-direction:column} .od-diff-cell:first-child{border-left:0;padding-left:0} .od-diff-k{font:800 10.5px/1.4 var(--od-ff);letter-spacing:.21em;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.45);order:1} .od-diff-n{font:900 clamp(64px,7.5vw,104px)/0.95 var(--od-ff);letter-spacing:-.04em;margin:6px 0 10px;order:2;background:linear-gradient(180deg,var(--od-gl) 55%,rgba(var(--od-gl-rgb),.55));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .od-diff-n.is-inf{font-size:clamp(76px,9vw,124px);letter-spacing:0} .od-diff-s{font:400 14px/1.55 var(--od-ff);color:rgba(var(--od-cream-rgb),.68);max-width:250px;flex:1;order:3} .od-diff-a{align-self:flex-start;margin-top:16px;font:800 10.5px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:var(--od-gl);text-decoration:none;border-bottom:2px solid rgba(var(--od-gl-rgb),.35);padding-bottom:3px;white-space:nowrap;transition:border-color .15s;order:4} .od-diff-a:hover{border-color:var(--od-gl)} /* ── Section: MODEL EXPLORER (od-home renders rail + stage) ──────────── */ .od-mx{display:grid;grid-template-columns:250px 1fr;gap:18px} .od-mx-rail{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start} .od-mx-thumb{background:var(--od-card);border:1.5px solid var(--od-border);border-radius:10px;overflow:hidden;cursor:pointer;text-align:center;padding-bottom:8px;transition:border-color .15s;text-decoration:none;display:block} .od-mx-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--od-navy2)} .od-mx-thumb span{font:800 11.5px/1.4 var(--od-ff);letter-spacing:.03em;color:var(--od-cream)} .od-mx-thumb.is-on{border-color:var(--od-gl);box-shadow:0 0 0 1px var(--od-gl)} .od-mx-thumb:hover{border-color:var(--od-gl)} .od-mx-stage{background:var(--od-card);border:1px solid var(--od-border);border-radius:18px;overflow:hidden} .od-mx-img{position:relative;aspect-ratio:21/9;min-height:260px} .od-mx-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .od-mx-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--od-gl-rgb),0) 30%,rgba(var(--od-gl-rgb),.78) 100%)} .od-mx-cap{position:absolute;left:24px;right:24px;bottom:18px;z-index:1;color:#FFFFFF;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .od-mx-tag{font:700 11px/1.4 var(--od-ff);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75)} .od-mx-name{font:900 clamp(26px,3vw,38px)/1.05 var(--od-ff);letter-spacing:-.015em} .od-mx-from{font:400 13px/1.4 var(--od-ff);color:rgba(255,255,255,.8)} .od-mx-strip{border-top:1px solid var(--od-border);background:var(--od-mid);padding:14px 22px 16px} .od-mx-strip-lbl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .od-mx-strip-lbl b{font:800 11px/1.4 var(--od-ff);letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5)} .od-mx-strip-lbl a{font:700 12px/1.4 var(--od-ff);color:var(--od-gl);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .od-mx-strip-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .od-mx-mini{background:var(--od-card);border:1px solid var(--od-border);border-top:3px solid var(--od-gl);border-radius:10px;padding:12px 13px;display:flex;flex-direction:column;gap:2px} .od-mx-mini-tag{font:800 9.5px/1.4 var(--od-ff);letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.48)} .od-mx-mini-val{font:900 19px/1.15 var(--od-ff);color:var(--od-gl);letter-spacing:-.02em} .od-mx-mini-sub{font:400 11px/1.35 var(--od-ff);color:rgba(var(--od-cream-rgb),.55);flex:1} .od-mx-mini-cta{align-self:flex-start;margin-top:8px;font:800 9.5px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:var(--od-gl);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .od-mx-mini-cta:hover{color:var(--od-gd)} .od-mx-body{display:grid;grid-template-columns:1.05fr 1fr;border-top:1px solid var(--od-border)} .od-mx-ov{padding:24px 26px;border-right:1px solid var(--od-border)} .od-mx-ov-lbl{font:800 11px/1.4 var(--od-ff);letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5);margin-bottom:10px} .od-mx-ov p{margin:0 0 16px;font:400 14.5px/1.6 var(--od-ff);color:rgba(var(--od-cream-rgb),.75)} .od-mx-stats{display:grid;gap:6px;margin:0 0 20px;padding:0;list-style:none} .od-mx-stats li{font:400 13px/1.5 var(--od-ff);color:rgba(var(--od-cream-rgb),.65)} .od-mx-stats li strong{font:800 13px/1.5 var(--od-ff);color:var(--od-gl)} .od-mx-quick{padding:24px 26px;background:var(--od-mid);display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start} .od-mx-q{background:var(--od-card);border:1px solid var(--od-border);border-radius:10px;padding:13px 14px;text-decoration:none;transition:border-color .15s;display:block} .od-mx-q:hover{border-color:var(--od-gl)} .od-mx-q b{display:block;font:800 12.5px/1.4 var(--od-ff);color:var(--od-cream)} .od-mx-q span{display:block;font:400 11.5px/1.35 var(--od-ff);color:rgba(var(--od-cream-rgb),.55)} /* ── Section: ICON CARDS (home service/finance splits) ───────────────── */ .od-hsplit{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start} .od-hsplit-desc{font:400 15.5px/1.65 var(--od-ff);color:rgba(var(--od-cream-rgb),.72);max-width:460px} .od-hsplit>div>p{max-width:460px;margin:16px 0 26px} .od-hourbox{margin-top:22px;border:1px solid var(--od-border);border-radius:12px;padding:16px 18px;background:var(--od-card);max-width:340px} .od-hourbox b{font:800 11px/1.4 var(--od-ff);letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.55);display:block;margin-bottom:8px} .od-hourbox div{font:400 13.5px/1.6 var(--od-ff);color:var(--od-cream)} .od-icard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .od-icard{display:flex;gap:13px;align-items:flex-start;background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:17px 16px;text-decoration:none;transition:transform .15s,border-color .15s} .od-icard:hover{transform:translateY(-2px);border-color:var(--od-gl)} .od-icard-icon{width:38px;height:38px;border-radius:10px;background:var(--od-mid);border:1px solid var(--od-border);display:flex;align-items:center;justify-content:center;flex:none} .od-icard-icon svg{width:18px;height:18px;stroke:var(--od-gl);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .od-icard b{display:block;font:800 14px/1.4 var(--od-ff);color:var(--od-cream)} .od-icard span{display:block;font:400 12.5px/1.4 var(--od-ff);color:rgba(var(--od-cream-rgb),.6)} /* ── Section: PULL QUOTES (home testimonials) ────────────────────────── */ .od-pull{max-width:820px;margin:0 auto;text-align:center;padding:30px 0} .od-pull + .od-pull{border-top:1px solid var(--od-border)} .od-pull-stars{color:var(--od-gl);letter-spacing:4px;font-size:15px;margin-bottom:12px} .od-pull p{font:700 clamp(17px,2vw,23px)/1.42 var(--od-ff);letter-spacing:-.01em;color:var(--od-gl);margin:0 0 14px} .od-pull b{font:700 13px/1.4 var(--od-ff);color:rgba(var(--od-cream-rgb),.55);letter-spacing:.12em;text-transform:uppercase} /* ── Home SEO copy + county-grouped nearby ───────────────────────────── */ .od-seo-copy{max-width:860px;margin-top:18px;display:grid;gap:14px} .od-seo-copy p{margin:0;font:400 14.5px/1.65 var(--od-ff);color:rgba(var(--od-cream-rgb),.72)} .od-seo-copy a{color:var(--od-gl);font-weight:700} .od-nearby-county{margin-top:26px;font:800 12px/1.4 var(--od-ff);letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5);display:flex;align-items:center;gap:12px} .od-nearby-county::after{content:"";flex:1;height:1px;background:var(--od-border)} .od-nearby-link.is-county{background:var(--od-gl);color:#FFFFFF;border-color:var(--od-gl)} @media(max-width:1020px){.od-diff-hdr{flex-direction:column;align-items:flex-start;gap:6px}} @media(max-width:960px){ .od-qact .od-wrap{grid-template-columns:1fr 1fr} .od-mx{grid-template-columns:1fr} .od-mx-rail{grid-template-columns:repeat(4,1fr)} .od-mx-body{grid-template-columns:1fr} .od-mx-ov{border-right:0;border-bottom:1px solid var(--od-border)} .od-hsplit{grid-template-columns:1fr} } @media(max-width:1060px){ .od-marq{grid-template-columns:1fr 1fr;gap:18px 0} .od-marq-cell:nth-child(odd){border-left:0;padding-left:0} .od-marq-cell:last-child{grid-column:1/-1;border-left:0;padding-left:0} } @media(max-width:700px){ .od-diff-grid{grid-template-columns:1fr;gap:22px} .od-diff-cell{border-left:0;border-top:1px solid var(--od-border);padding:22px 0 0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:22px;align-items:start} .od-diff-cell:first-child{border-top:0;padding-top:0} .od-diff-cell .od-diff-n{grid-row:1/4;margin:0;font-size:clamp(56px,16vw,84px);align-self:center} .od-diff-cell .od-diff-n.is-inf{font-size:clamp(64px,18vw,96px)} .od-diff-cell .od-diff-k{grid-column:2} .od-diff-cell .od-diff-s{grid-column:2;max-width:none;margin-top:4px} .od-diff-cell .od-diff-a{grid-column:2;margin-top:12px} } @media(max-width:640px){ .od-qact .od-wrap{grid-template-columns:1fr} .od-mx-rail{grid-template-columns:repeat(2,1fr)} .od-mx-strip-row{grid-template-columns:repeat(2,1fr)} .od-mx-mini:last-child{grid-column:1/-1} .od-icard-grid{grid-template-columns:1fr} .od-hhero-ctas{flex-direction:column;align-items:center} /* Single-plate hero on phones: reframe the wide crop onto the vehicle and hold the light scrim deeper so the centered copy + CTAs stay crisp. */ .od-hhero-bg img{object-position:68% 62%} .od-hhero-bg::after{background:linear-gradient(180deg,var(--od-mid) 0%,rgba(var(--od-mid-rgb),.97) 42%,rgba(var(--od-mid-rgb),.82) 66%,rgba(var(--od-mid-rgb),.42) 100%)} .od-hhero .od-wrap{padding-bottom:clamp(210px,44vw,300px)} } /* ── 2026-07-05q homepage QA fixes (verifier): thumb ratio + button nowrap ── */ .od-mx-thumb img{height:auto} .od-btn{white-space:nowrap} /* ═════════════════════════════════════════════════════════════════ od-svc — SERVICE-ACTION pages (2026-07-06) · ADDITIVE ONLY Reuses for the pricing selector: .od-offers-row / .od-offer-card (+is-price/is-savings/is-cash) / .od-offer-tag/-pre/-big/-sub/-cta /-details / .od-offers-customize / .od-oc-select / .od-oc-showing / .od-offers-empty — all already declared above. Also reuses od-recall-hero/-nav/-section/-cta/-related · od-statband · od-why-* · od-reviews · od-faq · od-hero.is-photo · od-modal/-form. NEW here: model selector note, oil/service-tier comparison, and the intervals + warning-signs info grid. Rendered/filled by bundle MODULE 8 (od-svc); markup carries no fabricated numbers. ═════════════════════════════════════════════════════════════════ */ .od-svc-selbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:center;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--od-border)} .od-svc-selbar label{font:700 11px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:var(--od-muted)} .od-svc-selnote{font:400 13px/1.6 var(--od-ff);color:var(--od-muted);margin:16px auto 0;max-width:64ch;text-align:center} .od-svc-footnote{font:400 12.5px/1.7 var(--od-ff);color:var(--od-muted);margin:20px auto 0;max-width:82ch;text-align:center} /* oil / service-tier comparison */ .od-svc-compare{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px} @media(min-width:760px){.od-svc-compare{grid-template-columns:repeat(3,1fr)}} .od-svc-comp-card{position:relative;background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:26px 22px 24px;display:flex;flex-direction:column} .od-svc-comp-card.is-featured{border-color:var(--od-gl);box-shadow:0 14px 34px rgba(var(--od-cream-rgb),.12)} .od-svc-comp-badge{position:absolute;top:-11px;left:22px;font:700 10px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--od-gl);padding:6px 11px;border-radius:20px} .od-svc-comp-name{font:800 19px/1.2 var(--od-ff);color:var(--od-gl);margin-bottom:4px} .od-svc-comp-interval{font:700 11px/1.3 var(--od-ff);letter-spacing:.05em;text-transform:uppercase;color:var(--od-muted);margin-bottom:16px} .od-svc-comp-list{display:flex;flex-direction:column;gap:11px} .od-svc-ci{display:flex;gap:10px;align-items:flex-start;font:400 13.5px/1.5 var(--od-ff);color:rgba(var(--od-cream-rgb),.74)} .od-svc-ci svg{flex:0 0 auto;margin-top:2px} /* intervals + warning-signs info grid */ .od-svc-info-grid{display:grid;gap:18px;grid-template-columns:1fr} @media(min-width:820px){.od-svc-info-grid{grid-template-columns:1fr 1fr}} .od-svc-info-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:28px 26px} .od-svc-info-card h3{font:800 18px/1.3 var(--od-ff);color:var(--od-gl);margin:0 0 12px} .od-svc-info-card p{font:400 14.5px/1.7 var(--od-ff);color:rgba(var(--od-cream-rgb),.72);margin:0 0 14px} .od-svc-info-card p:last-child{margin-bottom:0} .od-svc-info-card a{color:var(--od-gl);font-weight:700} .od-svc-checklist{display:flex;flex-direction:column;gap:11px;margin-top:8px} .od-svc-chk{display:flex;gap:10px;align-items:flex-start;font:400 13.5px/1.55 var(--od-ff);color:rgba(var(--od-cream-rgb),.74)} .od-svc-chk svg{flex:0 0 auto;margin-top:2px} /* service pricing cards — mirrors the live service specials (.odss) card: colored top rail, header w/ price, SPECIAL OFFER badge, included checklist, Offer Details, full-width Claim button. Rendered/filled by MODULE 8 (od-svc). */ .od-svc-cards{display:grid;gap:14px;grid-template-columns:1fr;justify-content:center} @media(min-width:720px){.od-svc-cards{grid-template-columns:repeat(3,1fr)}} .od-svc-card{position:relative;display:flex;flex-direction:column;background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(var(--od-cream-rgb),.06)} .od-svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--svc-rail,var(--od-gl));z-index:4} /* photo variant: service photo bleeds behind the WHOLE card with a light diagonal wash (whiter left where text sits, photo showing right) — mirrors the live .odss cards */ .od-svc-card:has(.is-photo){background:linear-gradient(112deg,rgba(255,255,255,.96) 32%,rgba(255,255,255,.70) 100%),var(--svc-img) right center/cover no-repeat} .od-svc-card-top,.od-svc-card-body,.od-svc-card-claim{position:relative;z-index:2} .od-svc-card-top{padding:24px 22px 18px;background:linear-gradient(160deg,var(--od-mid),var(--od-card));border-bottom:1px solid var(--od-border)} .od-svc-card:has(.is-photo) .od-svc-card-top{background:transparent;border-bottom-color:rgba(var(--od-cream-rgb),.10)} .od-svc-card:has(.is-photo) .od-svc-card-body{background:transparent} .od-svc-card-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .od-svc-card-name{font:800 18px/1.15 var(--od-ff);text-transform:uppercase;letter-spacing:.02em;color:var(--od-gl)} .od-svc-card-sub{font:700 10px/1.3 var(--od-ff);letter-spacing:.12em;text-transform:uppercase;color:var(--svc-rail,var(--od-muted));margin-top:6px} .od-svc-card-price{font:900 30px/1 var(--od-ff);color:var(--od-gl);white-space:nowrap;letter-spacing:-.02em} .od-svc-card-price span{font-size:14px;font-weight:800;vertical-align:top;margin-left:1px} .od-svc-card-quote{display:inline-block;font:700 10.5px/1 var(--od-ff);letter-spacing:.07em;text-transform:uppercase;color:var(--od-gl);background:var(--od-card);border:1px solid var(--od-border);border-radius:6px;padding:9px 11px;text-decoration:none;cursor:pointer} .od-svc-card-quote:hover{border-color:var(--od-gl)} .od-svc-card-badge{position:relative;z-index:2;display:inline-flex;align-items:center;margin-top:14px;font:700 9px/1 var(--od-ff);letter-spacing:.14em;text-transform:uppercase;color:var(--od-muted);border:1px solid var(--od-border);border-radius:5px;padding:6px 10px;background:var(--od-card)} .od-svc-card-body{display:flex;flex-direction:column;gap:14px;padding:18px 22px;flex:1} .od-svc-card-incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .od-svc-card-incl li{position:relative;padding-left:24px;font:400 13.5px/1.45 var(--od-ff);color:rgba(var(--od-cream-rgb),.76)} .od-svc-card-incl li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;background:no-repeat center/contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23238705' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")} .od-svc-card-details{align-self:flex-start;background:none;border:none;padding:0;font:700 10px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase;color:var(--od-gl);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .od-svc-card-claim{display:block;text-align:center;font:700 12px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--od-gl);padding:16px;text-decoration:none;margin-top:auto;transition:background .15s} .od-svc-card-claim:hover{background:var(--od-gd)} /* ── Section: REVIEWS (lifted from Dealer City per-page CSS → sitewide; od-token translation. Used by: dealer-city, service-action, future pages. Dealer City's inline copy can be dropped at its next re-paste. ─────── */ .od-reviews{padding:clamp(40px,5vw,64px) 0;background:var(--od-mid)} .od-reviews-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end; justify-content:space-between;margin-bottom:clamp(22px,3vw,30px)} .od-reviews-head .od-eyebrow{display:block;margin-bottom:8px} .od-reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .od-review-card{background:var(--od-card);border:1px solid var(--od-border); border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;gap:12px} .od-review-stars{font-size:15px;letter-spacing:3px;color:var(--od-gl)} .od-review-quote{font:400 14.5px/1.7 var(--od-ff);color:rgba(var(--od-cream-rgb),.72);margin:0;flex:1} .od-review-name{font:700 13px/1.3 var(--od-ff);color:var(--od-gl)} .od-review-name span{font-weight:400;font-size:12px;color:var(--od-muted)} /* ── Directions + hours cards (lifted from Dealer City page-local CSS; vars mapped to od- tokens; used by service-action pages + dealer-city) ── */ .od-directions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} .od-directions-card{display:flex;flex-direction:column;background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:26px 24px} .od-directions-card .od-h3{margin-bottom:14px} .od-directions-card p{font-size:14.5px;color:rgba(5,20,31,.7);margin:0 0 12px} .od-directions-card strong{color:var(--od-accent-mid)} .od-addr-block{margin:16px 0;font-size:14px;color:rgba(5,20,31,.72);line-height:1.7} .od-addr-block strong{display:block;font-family:var(--od-ff);color:var(--od-accent-mid);margin-bottom:4px} .od-addr-block a{color:var(--od-accent-mid);font-weight:600;text-decoration:none} .od-hours-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:480px){.od-hours-grid{grid-template-columns:1fr}} .od-hours-dept{background:var(--od-mid);border:1px solid var(--od-border);border-radius:10px;padding:14px 16px} .od-hours-dept-name{font-family:var(--od-ff);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--od-accent-mid);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--od-border)} .od-hours-line{font-size:13px;color:rgba(5,20,31,.7);line-height:1.9;margin:0} .od-hours-seg{display:block} .od-holiday-note{background:var(--od-accent-mid);color:#fff;border-radius:9px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px} .od-holiday-note:empty{display:none} .od-dir-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:16px} /* ── Award-card variant (research pages · monochrome "medal" treatment; brand is no-color, so pop = accent bar + ribbon eyebrow + elevation, NOT --od-gold which remaps to Midnight on Kia) ── */ .od-why-card.is-award{position:relative;overflow:hidden;border:1.5px solid var(--od-accent-mid);box-shadow:0 12px 28px rgba(5,20,31,.13)} .od-why-card.is-award::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--od-accent-mid)} .od-why-card.is-award .od-why-eyebrow{display:inline-block;background:var(--od-accent-mid);color:#fff;padding:5px 11px;border-radius:20px;letter-spacing:.08em} .od-why-card.is-award h4{margin-top:12px} /* ═════════════════════════════════════════════════════════════════ od-acq — Sell / Trade acquisition form (light theme, od- tokens) Driven by bundle MODULE 10. Page: /sell-your-car-online.htm. Lift-ready: single block, all vars mapped to --od-*. ═════════════════════════════════════════════════════════════════ */ .od-btn.is-disabled{opacity:.4;pointer-events:none;box-shadow:none;transform:none} /* hero trust row */ .od-acq-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;list-style:none;padding:0;margin:22px 0 0} .od-acq-trust li{font:700 11px/1.2 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:var(--od-muted);position:relative;padding-left:20px} .od-acq-trust li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--od-ev)} /* value props */ .od-acq-vp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.od-acq-vp{grid-template-columns:1fr 1fr}} @media(max-width:520px){.od-acq-vp{grid-template-columns:1fr}} .od-acq-vp-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:26px 22px;text-align:center} .od-acq-vp-icon{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:rgba(var(--od-gl-rgb),.06);display:flex;align-items:center;justify-content:center} .od-acq-vp-icon svg{width:26px;height:26px;fill:none;stroke:var(--od-gl);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .od-acq-vp-title{font:800 14px/1.2 var(--od-ff);color:var(--od-cream);margin:0 0 9px} .od-acq-vp-desc{font:400 13.5px/1.55 var(--od-ff);color:var(--od-muted);margin:0} /* form stage */ .od-acq-stage{max-width:940px;margin:0 auto;background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:clamp(20px,3vw,34px);box-shadow:0 20px 50px rgba(5,20,31,.08)} .od-acq-progress{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px} .od-acq-progress-step{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:19%} .od-acq-progress-dot{width:30px;height:30px;border-radius:50%;background:var(--od-mid);border:1.5px solid var(--od-border);display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--od-ff);color:var(--od-muted);margin-bottom:8px;transition:all .25s} .od-acq-progress-label{font:700 9.5px/1.2 var(--od-ff);letter-spacing:.12em;text-transform:uppercase;color:var(--od-muted);text-align:center} .od-acq-progress-line{flex:1;height:2px;background:var(--od-border);margin:15px -6px 0} .od-acq-progress-step.is-active .od-acq-progress-dot,.od-acq-progress-step.is-complete .od-acq-progress-dot{background:var(--od-gl);border-color:var(--od-gl);color:var(--od-navy)} .od-acq-progress-step.is-active .od-acq-progress-label,.od-acq-progress-step.is-complete .od-acq-progress-label{color:var(--od-gl)} @media(max-width:560px){.od-acq-progress-label{display:none}} .od-acq-step{display:none} .od-acq-step.is-active{display:block} .od-acq-step-head{margin-bottom:22px} .od-acq-step-eyebrow{font:700 10px/1 var(--od-ff);letter-spacing:.18em;text-transform:uppercase;color:var(--od-muted);margin-bottom:8px} .od-acq-step-title{font:800 24px/1.15 var(--od-ff);color:var(--od-cream);margin:0 0 6px} .od-acq-step-sub{font:400 14px/1.55 var(--od-ff);color:var(--od-muted);margin:0} .od-acq-step-sub b{color:var(--od-cream)} /* intent */ .od-acq-intent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:640px){.od-acq-intent-grid{grid-template-columns:1fr}} .od-acq-intent{background:var(--od-card);border:1.5px solid var(--od-border);border-radius:12px;padding:26px 20px;text-align:center;cursor:pointer;transition:all .2s} .od-acq-intent:hover{border-color:var(--od-gl);transform:translateY(-2px)} .od-acq-intent.is-selected{border-color:var(--od-gl);background:rgba(var(--od-gl-rgb),.05);box-shadow:0 0 0 1px var(--od-gl) inset} .od-acq-intent-icon{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;border:1.5px solid var(--od-border);display:flex;align-items:center;justify-content:center} .od-acq-intent.is-selected .od-acq-intent-icon{border-color:var(--od-gl)} .od-acq-intent-icon svg{width:24px;height:24px;fill:none;stroke:var(--od-gl);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .od-acq-intent-title{font:800 14px/1.2 var(--od-ff);color:var(--od-cream);margin:0 0 6px} .od-acq-intent-desc{font:400 12.5px/1.45 var(--od-ff);color:var(--od-muted);margin:0} /* tabs */ .od-acq-tabs{display:flex;margin-bottom:22px;border-bottom:1px solid var(--od-border)} .od-acq-tab{background:transparent;border:none;color:var(--od-muted);font:700 12px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;padding:13px 20px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;display:inline-flex;align-items:center;gap:8px;font-family:var(--od-ff)} .od-acq-tab:hover{color:var(--od-gl)} .od-acq-tab.is-active{color:var(--od-gl);border-bottom-color:var(--od-gl)} .od-acq-tab-badge{padding:2px 7px;font:700 9px/1.4 var(--od-ff);letter-spacing:.1em;color:var(--od-navy);background:var(--od-gl);border-radius:3px} .od-acq-panel{display:none} .od-acq-panel.is-active{display:block} /* fields */ .od-acq-field{margin-bottom:16px} .od-acq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media(max-width:560px){.od-acq-row{grid-template-columns:1fr}} .od-acq-label{display:block;font:700 11px/1.2 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:var(--od-muted);margin-bottom:7px} .od-acq-label .opt{color:#8a95a0;font-weight:400} .od-acq-req::after{content:" *";color:var(--od-gl)} .od-acq-input,.od-acq-select,.od-acq-textarea{width:100%;background:var(--od-card);border:1px solid var(--od-border);border-radius:8px;padding:12px 14px;color:var(--od-text);font:400 15px/1.4 var(--od-ff);transition:all .18s} .od-acq-input::placeholder,.od-acq-textarea::placeholder{color:#8a95a0} .od-acq-input:focus,.od-acq-select:focus,.od-acq-textarea:focus{outline:none;border-color:var(--od-gl);box-shadow:0 0 0 3px rgba(var(--od-gl-rgb),.1)} .od-acq-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2305141F' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px} .od-acq-textarea{min-height:90px;resize:vertical;line-height:1.5} .od-acq-hint{font:400 11.5px/1.4 var(--od-ff);font-style:italic;color:var(--od-muted);margin-top:6px;opacity:.85} .od-acq-field-err{display:none;font:400 11.5px/1.4 var(--od-ff);color:var(--od-error);margin-top:6px} .od-acq-field.has-error .od-acq-input,.od-acq-field.has-error .od-acq-select{border-color:var(--od-error)} .od-acq-field.has-error .od-acq-field-err{display:block} .od-acq-note{display:flex;gap:10px;margin-top:14px;padding:11px 14px;background:var(--od-mid);border-left:3px solid var(--od-gl);border-radius:6px;font:400 12.5px/1.5 var(--od-ff);color:var(--od-muted)} .od-acq-note b{color:var(--od-cream)} /* VIN */ .od-acq-vin-callout{display:flex;gap:14px;margin-bottom:20px;padding:15px 17px;background:var(--od-mid);border:1px solid var(--od-border);border-radius:10px} .od-acq-vin-callout-icon{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--od-gl);display:flex;align-items:center;justify-content:center} .od-acq-vin-callout-icon svg{width:17px;height:17px;fill:var(--od-navy)} .od-acq-vin-callout-title{font:700 12px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase;color:var(--od-gl);margin-bottom:5px} .od-acq-vin-callout-text{font:400 13px/1.5 var(--od-ff);color:var(--od-muted)} .od-acq-vin-state{display:none;margin-top:14px;padding:15px 17px;border-radius:10px} .od-acq-vin-state.is-active{display:flex;align-items:center;gap:14px} .od-acq-vin-loading{background:var(--od-mid);border:1px solid var(--od-border)} .od-acq-spinner{flex:0 0 auto;width:22px;height:22px;border:2.5px solid var(--od-border);border-top-color:var(--od-gl);border-radius:50%;animation:od-acq-spin .8s linear infinite} @keyframes od-acq-spin{to{transform:rotate(360deg)}} .od-acq-vin-state-text{font:700 13px/1 var(--od-ff);letter-spacing:.06em;text-transform:uppercase;color:var(--od-gl)} .od-acq-vin-confirm{flex-direction:column;align-items:stretch!important;gap:0!important;background:rgba(var(--od-gl-rgb),.05);border:1.5px solid var(--od-gl)} .od-acq-vin-confirm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .od-acq-vin-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--od-gl);border-radius:4px;font:700 10px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase;color:var(--od-navy)} .od-acq-vin-badge svg{width:12px;height:12px;fill:none;stroke:var(--od-navy);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .od-acq-vin-vehicle{font:700 20px/1.2 var(--od-ff);color:var(--od-cream);margin-bottom:4px} .od-acq-vin-details{font:400 13px/1.4 var(--od-ff);color:var(--od-muted)} .od-acq-vin-failed{background:rgba(224,82,82,.06);border:1px solid rgba(224,82,82,.4)} .od-acq-vin-failed-icon{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(224,82,82,.15);border:1px solid var(--od-error);display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--od-ff);color:var(--od-error)} .od-acq-vin-failed-title{font:700 13px/1 var(--od-ff);color:var(--od-error);margin-bottom:4px} .od-acq-vin-failed-text{font:400 12.5px/1.5 var(--od-ff);color:var(--od-muted)} .od-acq-vin-failed-text a{color:var(--od-gl);text-decoration:underline} .od-acq-edit-btn{background:transparent;border:1px solid var(--od-border);color:var(--od-gl);padding:6px 13px;font:700 10px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;border-radius:5px;cursor:pointer;transition:all .18s;font-family:var(--od-ff)} .od-acq-edit-btn:hover{background:rgba(var(--od-gl-rgb),.06)} /* context strip */ .od-acq-context{display:none;align-items:center;gap:14px;margin-bottom:22px;padding:13px 17px;background:rgba(var(--od-gl-rgb),.05);border:1px solid var(--od-border);border-radius:10px} .od-acq-context.is-active{display:flex} .od-acq-context-label{flex:0 0 auto;font:700 10px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase;color:var(--od-muted);padding-right:14px;border-right:1px solid var(--od-border)} .od-acq-context-value{flex:1;font:700 15px/1.2 var(--od-ff);color:var(--od-cream)} /* option groups + radios */ .od-acq-optgroup{margin-bottom:24px} .od-acq-optgroup-title{font:700 13px/1 var(--od-ff);letter-spacing:.04em;text-transform:uppercase;color:var(--od-cream);margin:0 0 5px} .od-acq-optgroup-sub{font:400 12.5px/1.4 var(--od-ff);color:var(--od-muted);margin:0 0 12px} .od-acq-optgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:560px){.od-acq-optgrid{grid-template-columns:1fr}} .od-acq-option{display:flex;align-items:center;gap:12px;background:var(--od-card);border:1px solid var(--od-border);border-radius:8px;padding:13px 15px;cursor:pointer;transition:all .18s;font:400 13px/1.35 var(--od-ff);color:var(--od-text)} .od-acq-option:hover{border-color:var(--od-gl)} .od-acq-option.is-selected{border-color:var(--od-gl);background:rgba(var(--od-gl-rgb),.05)} .od-acq-check{width:18px;height:18px;border:1.5px solid var(--od-border);border-radius:4px;flex:0 0 auto;position:relative;transition:all .18s} .od-acq-option.is-selected .od-acq-check{background:var(--od-gl);border-color:var(--od-gl)} .od-acq-option.is-selected .od-acq-check::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--od-navy);border-width:0 2px 2px 0;transform:rotate(45deg)} .od-acq-option-excl{grid-column:1/-1;font-weight:600;color:var(--od-gl)} .od-acq-radio-list{display:flex;flex-direction:column;gap:10px} .od-acq-radio{display:flex;align-items:center;gap:14px;background:var(--od-card);border:1px solid var(--od-border);border-radius:8px;padding:14px 16px;cursor:pointer;transition:all .18s;font:400 14px/1.3 var(--od-ff);color:var(--od-text)} .od-acq-radio:hover{border-color:var(--od-gl)} .od-acq-radio.is-selected{border-color:var(--od-gl);background:rgba(var(--od-gl-rgb),.05)} .od-acq-radio-dot{width:18px;height:18px;border:1.5px solid var(--od-border);border-radius:50%;flex:0 0 auto;position:relative;transition:all .18s} .od-acq-radio.is-selected .od-acq-radio-dot{border-color:var(--od-gl)} .od-acq-radio.is-selected .od-acq-radio-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--od-gl)} .od-acq-radio b{color:var(--od-cream)} .od-acq-group-error{display:none;margin-top:10px;font:400 12px/1.4 var(--od-ff);color:var(--od-error)} /* nav + consent */ .od-acq-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--od-border)} .od-acq-nav-spacer{flex:1} .od-acq-consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0;padding:15px;background:var(--od-mid);border:1px solid var(--od-border);border-radius:10px;cursor:pointer} .od-acq-consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--od-gl);flex:0 0 auto;cursor:pointer} .od-acq-consent-text{font:400 12px/1.55 var(--od-ff);color:var(--od-muted)} .od-acq-consent-text b{color:var(--od-cream)} /* how it works */ .od-acq-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:820px){.od-acq-steps{grid-template-columns:1fr 1fr;gap:28px}} @media(max-width:480px){.od-acq-steps{grid-template-columns:1fr}} .od-acq-howstep{text-align:center} .od-acq-howstep-num{width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:var(--od-card);border:1.5px solid var(--od-gl);border-radius:50%;font:300 26px/1 var(--od-ff);color:var(--od-gl)} .od-acq-howstep-title{font:800 14px/1.2 var(--od-ff);color:var(--od-cream);margin:0 0 9px;letter-spacing:.02em} .od-acq-howstep-desc{font:400 13.5px/1.55 var(--od-ff);color:var(--od-muted);margin:0} /* trade vs sell */ .od-acq-compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto} @media(max-width:700px){.od-acq-compare{grid-template-columns:1fr;gap:32px}} .od-acq-cc{position:relative;background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:36px 30px} .od-acq-cc.is-feature{border-color:var(--od-gl);box-shadow:0 0 0 1px var(--od-gl) inset} .od-acq-cc-tag{position:absolute;top:-13px;left:30px;font:700 10px/1 var(--od-ff);letter-spacing:.12em;text-transform:uppercase;color:var(--od-navy);background:var(--od-gl);padding:6px 13px;border-radius:4px} .od-acq-cc-title{font:800 22px/1.15 var(--od-ff);color:var(--od-cream);margin:0 0 6px} .od-acq-cc-sub{font:400 13.5px/1.5 var(--od-ff);color:var(--od-muted);margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--od-border)} .od-acq-cc-list{list-style:none;padding:0;margin:0} .od-acq-cc-list li{position:relative;padding:11px 0 11px 28px;font:400 14.5px/1.5 var(--od-ff);color:var(--od-text);border-bottom:1px solid var(--od-border)} .od-acq-cc-list li:last-child{border-bottom:none} .od-acq-cc-list li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;border-left:2px solid var(--od-gl);border-bottom:2px solid var(--od-gl);transform:rotate(-45deg)} .od-acq-cc-list li b{color:var(--od-cream);font-weight:700} /* faq */ .od-acq-faq{max-width:820px;margin:0 auto} .od-acq-faq-item{border-bottom:1px solid var(--od-border)} .od-acq-faq-item:first-child{border-top:1px solid var(--od-border)} .od-acq-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 6px;cursor:pointer;font:700 16px/1.35 var(--od-ff);color:var(--od-cream);user-select:none;transition:color .18s} .od-acq-faq-q:hover{color:var(--od-gl)} .od-acq-faq-icon{flex:0 0 auto;width:22px;height:22px;position:relative} .od-acq-faq-icon::before,.od-acq-faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--od-gl);transition:transform .3s} .od-acq-faq-icon::before{width:13px;height:2px;transform:translate(-50%,-50%)} .od-acq-faq-icon::after{width:2px;height:13px;transform:translate(-50%,-50%)} .od-acq-faq-item.is-open .od-acq-faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .od-acq-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s ease;padding:0 6px} .od-acq-faq-item.is-open .od-acq-faq-a{max-height:460px;padding:0 6px 22px} .od-acq-faq-a p{font:400 14.5px/1.65 var(--od-ff);color:var(--od-muted);margin:0} /* ═══════════════════════════════════════════════════════════════════ PIZZAZZ ADD-ONS · 2026-07 · first used by /sell-your-car-online.htm Lift-ready. Powered by bundle MODULE 11 (od-reveal) — zero page JS. Scroll reveal · make marquee · sticky CTA · how-it-works connector. ═══════════════════════════════════════════════════════════════════ */ /* Reveal — gated on body.od-reveal-ready so content is fully visible if the module never runs (placeholder-safe). */ body.od-reveal-ready [data-od-reveal], body.od-reveal-ready [data-od-reveal-stagger] > *{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} body.od-reveal-ready [data-od-reveal].is-in, body.od-reveal-ready [data-od-reveal-stagger].is-in > *{opacity:1;transform:none} [data-od-reveal-stagger].is-in > *:nth-child(2){transition-delay:.08s} [data-od-reveal-stagger].is-in > *:nth-child(3){transition-delay:.16s} [data-od-reveal-stagger].is-in > *:nth-child(4){transition-delay:.24s} [data-od-reveal-stagger].is-in > *:nth-child(5){transition-delay:.32s} [data-od-reveal-stagger].is-in > *:nth-child(6){transition-delay:.40s} @media(prefers-reduced-motion:reduce){ body.od-reveal-ready [data-od-reveal], body.od-reveal-ready [data-od-reveal-stagger] > *{opacity:1!important;transform:none!important;transition:none} } /* How-it-works timeline connector (4-col only; num circles sit on the track) */ @media(min-width:821px){ .od-acq-steps{position:relative} .od-acq-steps::before{content:"";position:absolute;top:32px;left:12.5%;right:12.5%;height:2px; background:linear-gradient(90deg,transparent,var(--od-border) 9%,var(--od-border) 91%,transparent);z-index:0} .od-acq-howstep{position:relative;z-index:1} } /* Make marquee — pure-CSS infinite scroll; track holds the list twice */ .od-tape{overflow:hidden;padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .od-tape-track{display:flex;width:max-content;animation:od-tape 36s linear infinite} .od-tape:hover .od-tape-track{animation-play-state:paused} .od-tape-item{display:inline-flex;align-items:center;gap:26px;padding:0 26px; font:800 clamp(17px,2.1vw,23px)/1 var(--od-ff);color:var(--od-cream);letter-spacing:.01em;white-space:nowrap;opacity:.6} .od-tape-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--od-gl);opacity:.55} @keyframes od-tape{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.od-tape-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}} /* Sticky CTA bar — od-reveal toggles .is-shown (shows past hero, hides at form/CTA) */ .od-stickcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:14px;align-items:center;justify-content:space-between; padding:12px clamp(14px,4vw,30px);padding-bottom:calc(12px + env(safe-area-inset-bottom)); background:rgba(var(--od-card-rgb),.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-top:1px solid var(--od-border);box-shadow:0 -10px 30px rgba(5,20,31,.12); transform:translateY(120%);transition:transform .4s cubic-bezier(.22,1,.36,1)} .od-stickcta.is-shown{transform:translateY(0)} .od-stickcta-txt{font:800 14.5px/1.15 var(--od-ff);color:var(--od-cream);letter-spacing:-.01em;min-width:0} .od-stickcta-txt span{display:block;font:500 11.5px/1.3 var(--od-ff);color:var(--od-muted);letter-spacing:.02em;margin-top:3px} .od-stickcta .od-btn{flex:none;white-space:nowrap} @media(max-width:480px){.od-stickcta-txt span{display:none}} @media(prefers-reduced-motion:reduce){.od-stickcta{transition:none}} /* ═══════════════════════════════════════════════════════════════════ COMPARE — head-to-head model comparison (od-cmp-* family) First used by /compare/kia-telluride-vs-honda-pilot.htm (compare-mm). Reuses od-hero / od-statband / od-recall-nav / od-recall-section / od-recall-cta / od-why-card.is-award / od-compare-links / od-faq-item. =================================================================== */ .od-recall-nav.is-stuck{position:sticky;top:0;z-index:50} /* verdict + capability cards (shared shape) */ .od-cmp-verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .od-cmp-vcard{background:var(--od-card);border:1px solid var(--od-border);border-top:4px solid var(--od-gl);border-radius:12px;padding:22px 20px} .od-cmp-vlabel{font:700 11px/1 var(--od-ff);letter-spacing:.14em;text-transform:uppercase;color:var(--od-gl)} .od-cmp-vstat{font:800 40px/1 var(--od-ff);color:var(--od-cream);margin:12px 0 5px;letter-spacing:-.02em} .od-cmp-vstat .u{font:700 15px/1 var(--od-ff);color:var(--od-muted);margin-left:5px;letter-spacing:0} .od-cmp-vvs{font:600 12.5px/1.3 var(--od-ff);color:var(--od-gl);margin-bottom:9px} .od-cmp-vdetail{font:400 13.5px/1.55 var(--od-ff);color:var(--od-muted);margin:0} .od-cmp-vdetail strong{color:var(--od-cream);font-weight:700} /* 3-column spec table */ .od-cmp-table{border:1px solid var(--od-border);border-radius:12px;overflow:hidden;background:var(--od-border)} .od-cmp-thead,.od-cmp-row{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1px} .od-cmp-th{background:var(--od-mid);padding:14px 14px;font:700 12.5px/1.25 var(--od-ff);color:var(--od-cream)} .od-cmp-th.is-kia{background:var(--od-gl);color:#fff} .od-cmp-th small{display:block;font:600 9.5px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:4px} .od-cmp-cell{background:var(--od-card);padding:13px 14px;font:400 13.5px/1.45 var(--od-ff);color:var(--od-text)} .od-cmp-cell.is-label{font-weight:700;color:var(--od-cream);background:var(--od-mid)} .od-cmp-cell.is-kia{background:rgba(var(--od-gl-rgb),.05)} .od-cmp-cell strong{color:var(--od-cream);font-weight:700} .od-cmp-win{display:inline-block;margin-left:7px;font:700 9.5px/1 var(--od-ff);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--od-gl);padding:3px 6px;border-radius:4px;vertical-align:middle} @media(max-width:600px){ .od-cmp-thead,.od-cmp-row{grid-template-columns:1.2fr 1fr 1fr} .od-cmp-th,.od-cmp-cell{padding:10px 9px;font-size:12px} .od-cmp-win{display:inline-block;margin:4px 0 0} } /* powertrain callout cards */ .od-cmp-pt{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:24px} @media(min-width:760px){.od-cmp-pt{grid-template-columns:1fr 1fr}} .od-cmp-pt-card{background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:24px 22px} .od-cmp-pt-card.is-kia{border-color:var(--od-gl);box-shadow:inset 0 0 0 1px var(--od-gl)} .od-cmp-pt-brand{font:700 11px/1 var(--od-ff);letter-spacing:.12em;text-transform:uppercase;color:var(--od-muted)} .od-cmp-pt-card.is-kia .od-cmp-pt-brand{color:var(--od-gl)} .od-cmp-pt-model{font:800 20px/1.15 var(--od-ff);color:var(--od-cream);margin:6px 0 15px} .od-cmp-pt-list{list-style:none;margin:0;padding:0;display:grid;gap:9px} .od-cmp-pt-list li{position:relative;padding-left:20px;font:400 13.5px/1.5 var(--od-ff);color:var(--od-text)} .od-cmp-pt-list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--od-gl)} .od-cmp-pt-list li.is-na{color:var(--od-muted)} .od-cmp-pt-list li.is-na::before{background:none;border:1.5px solid var(--od-muted);width:6px;height:6px;top:6px;left:1px} /* tech split (feature checklists) */ .od-cmp-tech{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:760px){.od-cmp-tech{grid-template-columns:1fr 1fr}} .od-cmp-tcol{background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:22px 20px} .od-cmp-tcol.is-kia{border-color:var(--od-gl)} .od-cmp-tcol-title{font:800 17px/1.2 var(--od-ff);color:var(--od-cream);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--od-border)} .od-cmp-tcol.is-kia .od-cmp-tcol-title{color:var(--od-gl)} .od-cmp-feat{display:flex;gap:11px;align-items:flex-start;padding:9px 0} .od-cmp-mark{flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px;position:relative;background:rgba(var(--od-cream-rgb),.09)} .od-cmp-mark.is-yes{background:var(--od-gl)} .od-cmp-mark.is-yes::after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .od-cmp-mark:not(.is-yes)::after{content:"";position:absolute;left:5px;top:8px;width:8px;height:2px;border-radius:1px;background:var(--od-muted)} .od-cmp-feat-text{font:400 13.5px/1.5 var(--od-ff);color:var(--od-text)} .od-cmp-feat-text strong{color:var(--od-cream);font-weight:700} /* near-me 2-col + dealer card */ .od-cmp-nearme{display:grid;grid-template-columns:1fr;gap:24px} @media(min-width:860px){.od-cmp-nearme{grid-template-columns:1.5fr 1fr;align-items:start}} .od-cmp-nearme ul{margin:16px 0 0;padding-left:18px;display:grid;gap:9px} .od-cmp-nearme li{font:400 14px/1.55 var(--od-ff);color:var(--od-text)} .od-cmp-nearme a{color:var(--od-gl)} .od-cmp-dealer{background:var(--od-card);border:1px solid var(--od-border);border-radius:14px;padding:24px 22px} .od-cmp-dealer-name{font:800 18px/1.2 var(--od-ff);color:var(--od-cream);margin-bottom:12px} .od-cmp-drow{padding:11px 0;border-top:1px solid var(--od-border);font:400 13.5px/1.5 var(--od-ff);color:var(--od-text)} .od-cmp-drow strong{display:block;font:700 10.5px/1 var(--od-ff);letter-spacing:.08em;text-transform:uppercase;color:var(--od-muted);margin-bottom:5px} .od-cmp-drow a{color:var(--od-gl);text-decoration:none;font-weight:700} /* disclaimer */ .od-cmp-disc{padding:clamp(28px,4vw,44px) 0;background:var(--od-mid)} .od-cmp-disc-title{font:700 11px/1 var(--od-ff);letter-spacing:.12em;text-transform:uppercase;color:var(--od-muted);margin-bottom:12px} .od-cmp-disc p{font:400 11.5px/1.65 var(--od-ff);color:var(--od-muted);margin:0 0 10px;max-width:none} /* hero CTA row + inline "vs" */ .od-cmp-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .od-cmp-vs{color:var(--od-muted);font-weight:400;margin:0 8px} .od-cmp-rival{display:block} /* related-card parts stack regardless of span/div; sticky-nav anchor offset (compare page) */ .od-compare-link-card .vs,.od-compare-link-card .match,.od-compare-link-card .sub{display:block} .od-page[data-od-page="compare-mm"] [id^="od-cmp-"]{scroll-margin-top:64px} .od-page[data-od-page="service-center-m"] [id^="od-svc-"]{scroll-margin-top:64px} /* ═══ od-qact.is-rich + od-statband.is-rich — monochrome "pizzazz" router / stat variants (added service-center-m, 2026-07-13). Navy-only per Kia no-color rule; pop comes from elevation, gradient navy icon chips, a growing accent rail, a chevron affordance, and hover motion — NOT hue. Reusable: any od-qact / od-statband opts in with .is-rich. ═══ */ .od-qact.is-rich .od-qact-tile{position:relative;overflow:hidden;padding-right:40px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease} .od-qact.is-rich .od-qact-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--od-gl);transform:scaleY(0);transform-origin:top;transition:transform .2s ease} .od-qact.is-rich .od-qact-tile:hover::before{transform:scaleY(1)} .od-qact.is-rich .od-qact-tile::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--od-border);border-top:2px solid var(--od-border);transform:translateY(-50%) rotate(45deg);transition:right .16s ease,border-color .16s ease} .od-qact.is-rich .od-qact-tile:hover::after{right:15px;border-color:var(--od-gl)} .od-qact.is-rich .od-qact-icon{width:52px;height:52px;border-radius:13px;background:linear-gradient(145deg,var(--od-gd),var(--od-gl));box-shadow:0 6px 16px rgba(var(--od-gl-rgb),.26);transition:transform .2s ease,box-shadow .2s ease} .od-qact.is-rich .od-qact-icon svg{width:25px;height:25px} .od-qact.is-rich .od-qact-tile:hover .od-qact-icon{transform:scale(1.07) rotate(-3deg);box-shadow:0 10px 22px rgba(var(--od-gl-rgb),.36)} .od-qact.is-rich .od-qact-tile:hover{transform:translateY(-4px);border-color:var(--od-gl);box-shadow:0 16px 34px rgba(var(--od-gl-rgb),.16);background:linear-gradient(180deg,rgba(var(--od-gl-rgb),.035),transparent)} /* .is-hero -- tiles live INSIDE .od-hhero, pinned above the image bottom; hero keeps its full height so the photo runs behind and below the row. <=960px: falls back to in-flow inside the hero (stacked tiles). */ .od-qact.is-hero{position:absolute;left:0;right:0;bottom:16px;margin:0;z-index:2} @media(max-width:960px){.od-qact.is-hero{position:relative;bottom:auto;margin-top:26px;padding-bottom:30px}} .od-statband.is-rich .od-stat-tile{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .od-statband.is-rich .od-stat-tile:hover{transform:translateY(-3px);border-color:var(--od-gl);box-shadow:0 12px 26px rgba(var(--od-gl-rgb),.12)} .od-statband.is-rich .od-stat-tile b{position:relative;padding-bottom:11px} .od-statband.is-rich .od-stat-tile b::after{content:"";position:absolute;left:50%;bottom:0;width:26px;height:3px;border-radius:2px;background:var(--od-gl);opacity:.5;transform:translateX(-50%)} /* ═══ od-why-grid.is-rich — monochrome pizzazz for trust/why grids (added service-center-m, 2026-07-13). Same navy-only language as od-qact.is-rich: gradient navy icon chip, growing accent rail, hover lift. Reusable: any od-why-grid opts in with .is-rich; icons are inline SVG in an .od-why-icon chip. ═══ */ .od-why-grid.is-rich .od-why-card{position:relative;overflow:hidden;padding-top:22px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .od-why-grid.is-rich .od-why-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--od-gl);transform:scaleY(0);transform-origin:top;transition:transform .22s ease} .od-why-grid.is-rich .od-why-card:hover{transform:translateY(-4px);border-color:var(--od-gl);box-shadow:0 16px 34px rgba(var(--od-gl-rgb),.16)} .od-why-grid.is-rich .od-why-card:hover::before{transform:scaleY(1)} .od-why-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(145deg,var(--od-gd),var(--od-gl));box-shadow:0 6px 16px rgba(var(--od-gl-rgb),.24);display:flex;align-items:center;justify-content:center;margin-bottom:15px;transition:transform .16s ease,box-shadow .16s ease} .od-why-icon svg{width:23px;height:23px;stroke:#fff;fill:none} .od-why-grid.is-rich .od-why-card:hover .od-why-icon{transform:scale(1.07) rotate(-3deg);box-shadow:0 10px 22px rgba(var(--od-gl-rgb),.34)} /* ═══ od-team-* — Meet-Our-Team directory (staff pagetype, 2026-07-13). Rendered by MODULE 14 (od-team) from OD_CONFIG.team. Light od- system; reuses .od-modal-overlay/.od-modal/.od-form for the schedule modal. ═══ */ .od-team-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center; padding:20px 0 6px;position:sticky;top:0;z-index:20;background:var(--od-navy)} .od-team-chip{flex:none;font:700 12px/1 var(--od-ff);letter-spacing:.06em; text-transform:uppercase;color:var(--od-muted);background:var(--od-card); border:1.5px solid var(--od-border);padding:10px 16px;border-radius:100px; cursor:pointer;transition:all .18s ease;display:inline-flex;align-items:center;gap:8px} .od-team-chip:hover{border-color:var(--od-gl);color:var(--od-gl)} .od-team-chip[aria-pressed="true"]{background:var(--od-gl);border-color:var(--od-gl);color:#fff} .od-team-chip-n{font-size:11px;font-weight:600;opacity:.7} .od-team-dept{margin-top:clamp(30px,4vw,48px);scroll-margin-top:72px} .od-team-dept[data-hidden="true"]{display:none} .od-team-dept-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; margin-bottom:20px;padding-bottom:13px;border-bottom:1px solid var(--od-border)} .od-team-dept-head .od-h3{text-transform:uppercase;letter-spacing:.01em} .od-team-dept-head p{font:400 13px/1.4 var(--od-ff);color:var(--od-muted);margin:0;flex:1 1 220px} .od-team-dept-count{font:600 11px/1 var(--od-ff);letter-spacing:.1em;text-transform:uppercase;color:var(--od-muted)} .od-team-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:480px){.od-team-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:760px){.od-team-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1040px){.od-team-grid{grid-template-columns:repeat(4,1fr)}} .od-team-card{background:var(--od-card);border:1px solid var(--od-border); border-radius:10px;overflow:hidden;display:flex;flex-direction:column; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease} .od-team-card:hover{border-color:var(--od-gl);transform:translateY(-3px); box-shadow:0 14px 30px rgba(var(--od-gl-rgb),.14)} .od-team-photo{position:relative;aspect-ratio:1/1;overflow:hidden; background:linear-gradient(135deg,var(--od-gd),var(--od-gl))} .od-team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block} .od-team-photo-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font:800 46px/1 var(--od-ff);color:#fff;letter-spacing:-.02em; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.14) 0%,transparent 60%),linear-gradient(135deg,var(--od-gd),var(--od-gl))} .od-team-body{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1 1 auto} .od-team-name{font:700 16px/1.2 var(--od-ff);color:var(--od-cream);margin-bottom:2px} .od-team-role{font:600 11px/1.3 var(--od-ff);color:var(--od-gl);text-transform:uppercase; letter-spacing:.07em;margin-bottom:13px;flex:1 1 auto} .od-team-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px} .od-team-actions .is-phone{grid-column:1/-1} @media(min-width:1040px){.od-team-actions{grid-template-columns:1fr 1fr 1fr} .od-team-actions .is-phone{grid-column:auto}} .od-team-btn{font:700 11px/1 var(--od-ff);letter-spacing:.06em;text-transform:uppercase; padding:10px 8px;border:1px solid var(--od-border);border-radius:6px;cursor:pointer; background:transparent;color:var(--od-cream);text-decoration:none;display:flex; align-items:center;justify-content:center;gap:6px;transition:all .15s ease} .od-team-btn:hover{border-color:var(--od-gl);color:var(--od-gl)} .od-team-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} .od-team-btn.is-phone{background:rgba(var(--od-gl-rgb),.06);border-color:rgba(var(--od-gl-rgb),.4);color:var(--od-gl)} .od-team-btn.is-phone:hover{background:var(--od-gl);color:#fff} .od-team-btn.is-primary{background:var(--od-gl);border-color:var(--od-gl);color:#fff} .od-team-btn.is-primary:hover{background:var(--od-gd);color:#fff} .od-team-btn.is-off{opacity:.4;cursor:not-allowed;pointer-events:none} /* schedule modal — meeting-type picker + person header (reuses .od-modal/.od-form) */ .od-team-sched-name{font:800 22px/1.15 var(--od-ff);color:var(--od-cream);margin-top:4px} .od-team-sched-title{font:500 13px/1.3 var(--od-ff);color:var(--od-muted);margin:2px 0 4px} .od-team-mtypes{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px} .od-team-mtype{background:transparent;border:1.5px solid var(--od-border);color:var(--od-cream); font:600 13px/1.2 var(--od-ff);padding:13px 12px;border-radius:7px;cursor:pointer; display:flex;align-items:center;gap:9px;text-align:left;transition:all .15s ease} .od-team-mtype:hover{border-color:var(--od-gl)} .od-team-mtype[aria-pressed="true"]{border-color:var(--od-gl);background:rgba(var(--od-gl-rgb),.07)} .od-team-mtype svg{width:16px;height:16px;stroke:var(--od-gl);fill:none;stroke-width:2;flex:none} .od-team-mtype-label{grid-column:1/-1;font:700 11px/1 var(--od-ff);letter-spacing:.1em; text-transform:uppercase;color:var(--od-muted);margin-top:6px} /* ═══ od-check* — checkbox groups for preference-center / unsubscribe (unsub pagetype, 2026-07-13). Behavior (All-toggle, mirroring) by MODULE 15 (od-unsub). ═══ */ .od-unsub-fieldset{border:none;padding:0;margin:0 0 28px} .od-unsub-legend{font:700 12px/1 var(--od-ff);letter-spacing:.18em;text-transform:uppercase; color:var(--od-gl);margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--od-border); display:block;width:100%} .od-checkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .od-checkgrid.is-4{grid-template-columns:repeat(4,1fr)} @media(max-width:640px){.od-checkgrid,.od-checkgrid.is-4{grid-template-columns:1fr}} .od-check{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px; background:var(--od-mid);border:1px solid var(--od-border);border-radius:7px;cursor:pointer; transition:all .18s ease;user-select:none} .od-check:hover{border-color:rgba(var(--od-gl-rgb),.45)} .od-check.is-checked{border-color:var(--od-gl);background:rgba(var(--od-gl-rgb),.06)} .od-check input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .od-check-box{flex-shrink:0;width:19px;height:19px;border:1.6px solid rgba(var(--od-gl-rgb),.5); border-radius:4px;position:relative;background:var(--od-card);transition:all .16s ease} .od-check-box::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease} .od-check input:checked~.od-check-box{background:var(--od-gl);border-color:var(--od-gl)} .od-check input:checked~.od-check-box::after{transform:rotate(45deg) scale(1)} .od-check-label{font:600 13px/1.3 var(--od-ff);letter-spacing:.03em;color:var(--od-cream)} .od-check.is-all{background:rgba(var(--od-gl-rgb),.04);border-color:rgba(var(--od-gl-rgb),.3)} .od-check.is-all .od-check-label{color:var(--od-gl);font-weight:700} /* ═══ od-recalls MODULE result UI (JS-rendered by od-bundle §12) · added 2026-07-13. Only the pieces the bundle injects at runtime — VIN-check result states + the live-list intro line. Live campaign cards reuse .od-rrow / .od-recall-* verbatim (no new card CSS). VIN card sits on --od-mid (LIGHT) so result colors read on light: error→--od-alert, clean→--od-ev, found→amber. ═══ */ .od-recall-livehead{font-size:13px;line-height:1.55;color:rgba(var(--od-cream-rgb),.62);margin:2px 0 16px;padding:12px 15px;border-left:2px solid var(--od-gl);background:var(--od-mid);border-radius:0 8px 8px 0} .od-recall-livehead strong{color:var(--od-gl)} .od-recall-livehead a{color:var(--od-gl);font-weight:700} .od-recall-livehead.is-loading{opacity:.72} .od-recall-livehead.is-error{border-left-color:var(--od-alert)} .od-recall-vin-result .od-rv-msg{margin:0 0 6px;font-size:14.5px;line-height:1.55;font-weight:700} .od-rv-msg.is-error{color:var(--od-alert)} .od-rv-msg.is-clean{color:var(--od-ev)} .od-rv-msg.is-found{color:#B9770E} .od-rv-msg.is-loading{color:rgba(var(--od-cream-rgb),.6);font-weight:600} .od-rv-msg a{color:var(--od-gl);font-weight:700;text-decoration:underline} .od-rv-cta{margin:4px 0 14px} .od-rv-item{padding:12px 14px;background:var(--od-mid);border:1px solid var(--od-border);border-radius:9px;margin-bottom:8px} .od-rv-item-comp{font:800 13px/1.3 var(--od-ff);color:var(--od-gl);margin-bottom:3px} .od-rv-item-text{font-size:13px;line-height:1.55;color:rgba(var(--od-cream-rgb),.7)} .od-rv-item-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--od-gl)} .od-rv-clear{margin-top:8px;font:700 11.5px/1 var(--od-ff);letter-spacing:.5px;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.6);background:none;border:none;cursor:pointer;padding:4px 0;text-decoration:underline} .od-rv-clear:hover{color:var(--od-gl)} /* ═══ od-maintenance MODULE (JS progressive enhancement by od-bundle §13) · added 2026-07-13. The bundle derives categories from .od-maint-table's and INJECTS a category-toggle bar + a mobile accordion (no page-markup changes). Desktop keeps the table (toggles hide columns via .od-mc-hidden); ≤760px shows the accordion (toggles hide pills). Accordion rows are native
. ═══ */ .od-mc-hidden{display:none!important} .od-mc-toggle{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px} .od-mc-toggle-name{font:700 10.5px/1 var(--od-ff);letter-spacing:1.5px;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.5);margin-right:2px} .od-mc-chip{cursor:pointer;font:700 11.5px/1 var(--od-ff);letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--od-gl);border:1px solid var(--od-gl);border-radius:20px;padding:8px 14px;display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s,border-color .15s} .od-mc-chip::before{content:"";width:7px;height:7px;border-radius:2px;background:#fff} .od-mc-chip.is-off{color:var(--od-gl);background:var(--od-card);border-color:var(--od-border)} .od-mc-chip.is-off::before{background:rgba(var(--od-cream-rgb),.3)} .od-mc-chip:hover{border-color:var(--od-gl)} .od-maint-acc{display:none} .od-maint-acc-item{border:1px solid var(--od-border);border-radius:12px;background:var(--od-card);margin-bottom:10px;overflow:hidden} .od-maint-acc-item[open]{border-color:var(--od-gl);box-shadow:0 12px 30px rgba(var(--od-cream-rgb),.1)} .od-maint-acc-hdr{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px} .od-maint-acc-hdr::-webkit-details-marker{display:none} .od-maint-acc-item.is-milestone{border-left:3px solid var(--od-gl)} .od-maint-acc-mile{font:800 16px/1.15 var(--od-ff);color:var(--od-gl)} .od-maint-acc-mile small{display:block;font:600 10.5px/1 var(--od-ff);letter-spacing:1px;text-transform:uppercase;color:rgba(var(--od-cream-rgb),.45);margin-top:4px} .od-maint-acc-right{display:flex;align-items:center;gap:12px;flex:none} .od-maint-acc-count{font:700 12px/1 var(--od-ff);color:rgba(var(--od-cream-rgb),.6);white-space:nowrap} .od-maint-acc-chev{font-size:15px;line-height:1;color:rgba(var(--od-cream-rgb),.45);transition:transform .18s} .od-maint-acc-item[open] .od-maint-acc-chev{transform:rotate(180deg)} .od-maint-acc-body{padding:0 18px 18px} .od-maint-acc-pills{display:flex;flex-wrap:wrap;gap:7px} .od-maint-acc-pill{font-size:12px;font-weight:600;color:var(--od-gl);background:var(--od-mid);border:1px solid var(--od-border);border-radius:8px;padding:7px 11px;line-height:1.2} .od-maint-acc-pill.is-new{border-color:var(--od-gl);font-weight:800} .od-maint-acc-pill.is-new::before{content:"\2605 ";color:var(--od-gl)} .od-maint-acc-empty{font-size:12.5px;font-style:italic;color:rgba(var(--od-cream-rgb),.5)} @media(max-width:760px){ .od-maint-scroll{display:none} .od-maint-acc{display:block} } /* ═══ od-ticklist — green-check benefit / included-items list (light od- system). Added for finance-preapproval-m (2026-07-13). Lift-ready, reusable in any card or section. Check glyph is a pure-CSS rotated box (no SVG needed). ═══ */ .od-ticklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .od-ticklist li{position:relative;padding-left:30px;font:400 14px/1.55 var(--od-ff);color:rgba(var(--od-text-rgb),.78)} .od-ticklist li::before{content:"";position:absolute;left:5px;top:2px;width:6px;height:11px; border:solid var(--od-gl);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)} .od-ticklist li strong{color:var(--od-text);font-weight:700} .od-ticklist li sup{color:var(--od-gl);font-weight:700} /* light-on-dark ticklist when placed inside a dark is-accent why-card (reusable) */ .od-why-card.is-accent .od-ticklist li{color:rgba(255,255,255,.82)} .od-why-card.is-accent .od-ticklist li strong{color:#fff} .od-why-card.is-accent .od-ticklist li::before{border-color:#fff} .od-why-card.is-accent .od-ticklist li sup{color:rgba(255,255,255,.7)} /* ═══ od-footnotes — small-print disclaimer / superscript legal block (light). Added for finance-preapproval-m (2026-07-13). Lift-ready. ═══ */ .od-footnotes{background:var(--od-mid);padding:clamp(28px,4vw,44px) 0} .od-footnotes .od-fn{font:400 11.5px/1.6 var(--od-ff);color:var(--od-muted);margin:0 0 12px;max-width:none} .od-footnotes .od-fn:last-child{margin-bottom:0} .od-footnotes .od-fn sup{color:var(--od-gl);font-weight:700;margin-right:2px} .od-footnotes .od-fn a{color:var(--od-gl);font-weight:600} /* ═══ od-trade-reveal — CSS-only conditional field group (:has()). Used by finance-preapproval-m trade-in toggle; reusable on any od-form. Hidden until a sibling radio [value="yes"] within the container is checked. ═══ */ .od-trade-fields{display:none} .od-trade-reveal:has(input[data-od-reveal="yes"]:checked) .od-trade-fields{display:grid;gap:14px;margin-top:14px} .od-radio-row{display:flex;gap:20px;align-items:center;margin-top:4px} .od-radio-row label{display:inline-flex;align-items:center;gap:7px;font:500 14px/1 var(--od-ff);color:var(--od-text);cursor:pointer;text-transform:none;letter-spacing:0} .od-radio-row input{accent-color:var(--od-gl);width:16px;height:16px} /* ═══ finance-preapproval pizzazz families (2026-07-13) — light, lift-ready ═══ */ /* hero trust chips (pill affordances under hero CTAs) */ .od-hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .od-hero-chip{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--od-ff); letter-spacing:.04em;text-transform:uppercase;color:var(--od-text); background:var(--od-card);border:1px solid var(--od-border);border-radius:100px;padding:9px 14px} .od-hero-chip svg{width:13px;height:13px;stroke:var(--od-gl);fill:none;stroke-width:2.2} .od-hero-chip b{color:var(--od-gl)} /* two-column application split: form card + sticky reassurance rail */ .od-apply-split{display:grid;grid-template-columns:1fr;gap:22px;max-width:1040px;margin:28px auto 0;align-items:start} @media(min-width:900px){.od-apply-split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px}} .od-apply-rail{display:flex;flex-direction:column;gap:18px} @media(min-width:900px){.od-apply-rail{position:sticky;top:76px}} .od-apply-railcard{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:22px 20px} .od-apply-railcard.is-accent{background:var(--od-gl);border-color:var(--od-gl)} .od-apply-railhead{display:flex;align-items:center;gap:10px;margin-bottom:14px} .od-apply-railhead svg{width:22px;height:22px;stroke:var(--od-gl);fill:none;stroke-width:1.7;flex:none} .od-apply-railcard.is-accent .od-apply-railhead svg{stroke:#fff} .od-apply-railhead h4{font:800 15px/1.2 var(--od-ff);color:var(--od-text);margin:0} .od-apply-railcard.is-accent .od-apply-railhead h4{color:#fff} .od-apply-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .od-apply-steps li{position:relative;padding-left:34px;font:500 13px/1.45 var(--od-ff);color:rgba(255,255,255,.78)} .od-apply-steps li b{display:block;color:#fff;font-weight:700;font-size:13.5px;margin-bottom:1px} .od-apply-steps li::before{content:counter(rail-step);counter-increment:rail-step;position:absolute;left:0;top:-1px; width:23px;height:23px;border-radius:50%;background:linear-gradient(145deg,var(--od-gl2,#1f6feb),#fff); color:var(--od-gl);font:800 12px/23px var(--od-ff);text-align:center;box-shadow:0 0 0 2px rgba(255,255,255,.25)} .od-apply-steps{counter-reset:rail-step} .od-apply-railphone{display:flex;align-items:center;gap:9px;font:800 18px/1 var(--od-ff);color:var(--od-gl);text-decoration:none;margin-top:2px} .od-apply-railphone svg{width:17px;height:17px;stroke:var(--od-gl);fill:none;stroke-width:2} .od-apply-railnote{font:400 12px/1.55 var(--od-ff);color:var(--od-muted);margin:8px 0 0} .od-apply-railcard.is-accent .od-apply-railnote{color:rgba(255,255,255,.7)} /* 4-up why-grid — clean 4 cols wide, 2×2 mid, 1 col mobile (no orphan 3+1) */ .od-why-grid.is-4up{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.od-why-grid.is-4up{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.od-why-grid.is-4up{grid-template-columns:1fr}} /* stepped why-grid — big ghost numeral + top connector rail */ .od-why-grid.is-steps .od-why-card{position:relative;overflow:hidden} .od-why-grid.is-steps .od-why-card::after{content:attr(data-step);position:absolute;right:14px;top:6px; font:900 64px/1 var(--od-ff);color:rgba(var(--od-gl-rgb),.08);pointer-events:none} /* soft-pull vs hard-pull comparison */ .od-vs{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px} @media(min-width:720px){.od-vs{grid-template-columns:1fr 1fr}} .od-vs-col{border-radius:12px;padding:24px 22px;border:1px solid var(--od-border);background:var(--od-card)} .od-vs-col.is-soft{border-color:var(--od-gl);box-shadow:0 10px 26px rgba(var(--od-gl-rgb),.12)} .od-vs-tag{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--od-ff);letter-spacing:.05em; text-transform:uppercase;padding:7px 12px;border-radius:100px;margin-bottom:14px} .od-vs-col.is-soft .od-vs-tag{background:var(--od-gl);color:#fff} .od-vs-col.is-hard .od-vs-tag{background:var(--od-mid);color:var(--od-muted);border:1px solid var(--od-border)} .od-vs-col h4{font:800 17px/1.2 var(--od-ff);color:var(--od-text);margin:0 0 4px} .od-vs-col p{font:400 13.5px/1.55 var(--od-ff);color:rgba(var(--od-text-rgb),.7);margin:0 0 14px} .od-vs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .od-vs-list li{position:relative;padding-left:28px;font:500 13px/1.5 var(--od-ff);color:var(--od-text)} .od-vs-col.is-soft .od-vs-list li::before{content:"";position:absolute;left:5px;top:2px;width:6px;height:11px; border:solid var(--od-gl);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)} .od-vs-col.is-hard .od-vs-list li{color:var(--od-muted)} .od-vs-col.is-hard .od-vs-list li::before{content:"\00d7";position:absolute;left:3px;top:-2px; font:700 17px/1 var(--od-ff);color:rgba(var(--od-text-rgb),.35)} /* ── Section: WHY-MORE (clickable od-why-card footer cue; lifted from Dealer City page-scoped CSS 2026-07-17 — Brief §2 "why grid" family. Token map: --disp→--od-ff, --accent→--od-gl. Anchor od-why-cards flex so the cue pins to the card bottom uniformly. ─────────────────────── */ a.od-why-card{display:flex;flex-direction:column;cursor:pointer; text-decoration:none;color:inherit} a.od-why-card:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(var(--od-gl-rgb),.09)} .od-why-more{display:inline-block;margin-top:auto;padding-top:14px; font:700 11px/1 var(--od-ff);letter-spacing:1.5px; text-transform:uppercase;color:var(--od-gl)} .od-why-more::after{content:"\2009\2192";color:rgba(var(--od-gl-rgb),.4)} .od-why-card:hover .od-why-more{text-decoration:underline; text-underline-offset:3px} /* ── HHERO TYPOGRAPHY ARMOR (2026-07-18) ─ the Kia OEM/vendor theme layer (carnow/fullCSS, loads after our slot) sets h1 typography with !important (Kia-Signature-Bold @ 32px), beating the un-armored rules above. Same counter-pattern as the hijack: token-driven, forced. ─────────────────── */ .od-page .od-hhero h1{font:900 clamp(38px,6vw,76px)/1 var(--od-ff)!important; font-family:var(--od-ff)!important;letter-spacing:-.03em!important; color:var(--od-cream)!important;margin:16px 0 0!important} .od-page .od-hhero h1 span{display:block!important; color:rgba(var(--od-cream-rgb),.4)!important} .od-page .od-hhero-sub{font:400 17.5px/1.65 var(--od-ff)!important; color:rgba(var(--od-cream-rgb),.72)!important} /* ════════════════════ SLOT PIECE: 6 · od-hijack (chrome-free) ════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ od-hijack.css — Odyssey hijack layer (DDC-native + vendor markup fixes) ──────────────────────────────────────────────────────────────────────── RESTYLES / FIXES NATIVE Dealer.com + vendor markup (header, footer, nav drawer, DDC inventory widget, VDP dialogs, ePrice buttons, CPO/Carfax badges). This file targets markup WE DO NOT OWN — selectors are verbatim from the proven legacy build; do not "clean them up". CHROME REMOVED 2026-07-03: the legacy header/mega-menu/footer/nav-drawer takeover was the legacy build's DESIGN, not a fix — stores keep their native DDC chrome. Header theming stays tokens-only (the --header-* map). DEPLOY: paste into the DDC site-wide CSS slot of EVERY store — BOTH desktop AND mobile slots — alongside od-tokens + od-sections. Loads UNCONDITIONALLY (no .od-page gate): hijacks must fix DDC-native pages that never carry the template marker. Colors are tokenized (var(--od-*)) so each store's token file skins it. MERGE NOTE: the legacy build shipped separate desktop/mobile files by user-agent. Here the mobile rules ride an @media (max-width:980px) wrapper instead — QA the 700–1080px band. (Nested @media inside the wrapper is valid CSS.) PORT MAP: legacy names → od-*; legacy scoping → body:has(.od-page); legacy hex → var(--od-*) tokens. ════════════════════════════════════════════════════════════════════════ */ /* ══════════ [DESKTOP] DDC INVENTORY WIDGET OVERRIDES (SRP cards, facets, carousel, pricing, pagination) ══════════ */ /* DDC INVENTORY WIDGET OVERRIDES */ /* 1. BODY + PAGE BACKGROUND */ body:has(.od-page){background:var(--od-navy)!important;background-color:var(--od-navy)!important} /* 2. OUTER DDC WRAPPERS — kill borders, force navy bg */ body:has(.od-page) .ddc-document,body:has(.od-page) .ddc-wrapper,body:has(.od-page) .page-section,body:has(.od-page) .container-max-md,body:has(.od-page) .container-max-xl,body:has(.od-page) .container-max-lg,body:has(.od-page) .srp-wrapper-listing,body:has(.od-page) .srp-wrapper-results,body:has(.od-page) .ws-inv-listing,body:has(.od-page) .ws-inv-text-search,body:has(.od-page) .ws-inv-filters,body:has(.od-page) .ws-inv-data,body:has(.od-page) .ws-inv-paging,body:has(.od-page) .ws-inv-bus2,body:has(.od-page) .ddc-content,body:has(.od-page) .spacing-reset,body:has(.od-page) #inventory-results1-app-root,body:has(.od-page) #inventory-search1-app-root,body:has(.od-page) #inventory-filters1-app-root,body:has(.od-page) #inventory-paging1-app-root,body:has(.od-page) [role="region"][aria-label*="Matching" i]{background:var(--od-navy)!important;background-color:var(--od-navy)!important;background-image:none!important;border:0 none transparent!important;border-width:0!important;box-shadow:none!important;font-family:'Roboto','Helvetica Neue',Arial,sans-serif!important;color:var(--od-cream)!important} /* 3. PAGE-TITLE BLUE BAND — kill border + force navy */ body:has(.od-page) .bg-page-title,body:has(.od-page) .border-page-title,body:has(.od-page) .bg-page-title.page-section,body:has(.od-page) .bg-page-title.border-bottom,body:has(.od-page) .bg-page-title.border-bottom.page-section,body:has(.od-page) .border-bottom.border-page-title,body:has(.od-page) .border-bottom.border-page-title.bg-page-title,body:has(.od-page) [data-name*="inventory-search-results-page-filters-sort"]{background:var(--od-navy)!important;background-color:var(--od-navy)!important;background-image:none!important;border:0 none transparent!important;border-bottom:0 none transparent!important;border-bottom-width:0!important;box-shadow:none!important} /* 4. BREADCRUMBS — transparent, muted gold links */ body:has(.od-page) .ws-crumbs,body:has(.od-page) [data-widget-name*="crumbs"],body:has(.od-page) [class*="breadcrumb"],body:has(.od-page) nav[aria-label*="breadcrumb" i]{background:transparent!important;border:none!important;box-shadow:none!important} body:has(.od-page) .ws-crumbs a,body:has(.od-page) [class*="breadcrumb"] a,body:has(.od-page) nav[aria-label*="breadcrumb" i] a{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;text-decoration:none!important} body:has(.od-page) .ws-crumbs a:hover,body:has(.od-page) [class*="breadcrumb"] a:hover{color:var(--od-gl)!important} /* 5. SITE HEADER NAV RESET — don't break global nav */ body:has(.od-page) .page-header .header-mycars-search-container,body:has(.od-page) .sticky-header-nav .header-mycars-search-container,body:has(.od-page) .header-navigation .header-mycars-search-container,body:has(.od-page) .true-minimal .header-mycars-search-container{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important;margin:0!important;padding:revert!important;position:static!important} body:has(.od-page) .page-header .header-mycars-search-container::before,body:has(.od-page) .page-header .header-mycars-search-container::after{content:none!important;display:none!important} /* 6. SEARCH BAR — box on .position-relative wrapper */ body:has(.od-page) #inventory-search1-app-root .position-relative,body:has(.od-page) .ws-inv-text-search .position-relative,body:has(.od-page) .free-text-search-form .form-control.d-flex{background:var(--od-mid)!important;background-color:var(--od-mid)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.5)!important;border-radius:3px!important;box-shadow:none!important;overflow:hidden!important} body:has(.od-page) form.free-text-search-form,body:has(.od-page) form.free-text-search-form.form-control,body:has(.od-page) form.free-text-search-form.absolute-top,body:has(.od-page) form.free-text-search-form.form-control.absolute-top,body:has(.od-page) .free-text-search-form .d-flex.w-100,body:has(.od-page) .free-text-search-form>.d-flex.w-100,body:has(.od-page) .free-text-search-form .d-flex,body:has(.od-page) .free-text-search-form .form-control{background:transparent!important;background-color:transparent!important;background-image:none!important;border:0 none transparent!important;border-width:0!important;box-shadow:none!important;padding:0!important} body:has(.od-page) input.free-text-search,body:has(.od-page) input#free-text-search-input,body:has(.od-page) input.free-text-search.form-control,body:has(.od-page) input.free-text-search.form-control-transparent,body:has(.od-page) input.free-text-search.form-control-transparent.input-lg{background:transparent!important;background-color:transparent!important;background-image:none!important;border:0 none transparent!important;box-shadow:none!important;-webkit-box-shadow:none!important;color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important;caret-color:var(--od-gl)!important} body:has(.od-page) input.free-text-search::placeholder,body:has(.od-page) input#free-text-search-input::placeholder{color:rgba(var(--od-gold-rgb),.5)!important;-webkit-text-fill-color:rgba(var(--od-gold-rgb),.5)!important} body:has(.od-page) input.free-text-search:-webkit-autofill,body:has(.od-page) input#free-text-search-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--od-mid) inset!important;-webkit-text-fill-color:var(--od-cream)!important} body:has(.od-page) .free-text-search-controls{background:transparent!important;border:none!important;display:flex!important;align-items:center!important} body:has(.od-page) .free-text-search-controls button,body:has(.od-page) .free-text-search-controls .text-link,body:has(.od-page) button.text-link[type="submit"]{background:transparent!important;color:var(--od-gl)!important;border:none!important;border-left:1px solid rgba(var(--od-gold-rgb),.2)!important;padding:0 22px!important;box-shadow:none!important;opacity:1!important} body:has(.od-page) .free-text-search-controls button:hover{background:rgba(var(--od-gold-rgb),.12)!important;color:#fff!important} body:has(.od-page) #search-icon,body:has(.od-page) [data-testid="search-icon"],body:has(.od-page) .ddc-icon-search-sparkle,body:has(.od-page) .input-decoration-color,body:has(.od-page) .free-text-search-controls i,body:has(.od-page) .free-text-search-controls svg,body:has(.od-page) .free-text-search-form i,body:has(.od-page) .free-text-search-form svg{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;fill:var(--od-gl)!important;background:transparent!important} /* 7. HIGHLIGHT FACET PILLS (top filter chip row) */ body:has(.od-page) .highlight-facet-btn,body:has(.od-page) button.highlight-facet-btn,body:has(.od-page) .chip.chip-additive:not(.rounded-circle){width:auto!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important;font-size:11px!important;font-weight:700!important;padding:7px 14px!important;letter-spacing:.6px!important;line-height:1.3!important;text-transform:uppercase!important;background:rgba(var(--od-mid-rgb),.6)!important;background-color:rgba(var(--od-mid-rgb),.6)!important;color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;height:auto!important;margin:0 6px 0 0!important} body:has(.od-page) .highlight-facet-btn:hover{background:rgba(var(--od-gold-rgb),.12)!important;border-color:var(--od-gold)!important;color:#fff!important} body:has(.od-page) .highlight-facet-btn small,body:has(.od-page) .highlight-facet-btn .ddc-font-size-xsmall,body:has(.od-page) .chip.chip-additive small,body:has(.od-page) small.ddc-font-size-xsmall.px-2{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;background:transparent!important;opacity:.75!important;font-weight:500!important} body:has(.od-page) .highlight-facet-list,body:has(.od-page) .facet-hl-container{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:thin!important;scrollbar-color:rgba(var(--od-gold-rgb),.4) transparent!important;align-items:center!important;padding:4px 0!important;background:transparent!important} body:has(.od-page) .highlight-facet-list::-webkit-scrollbar,body:has(.od-page) .facet-hl-container::-webkit-scrollbar{height:4px!important} body:has(.od-page) .highlight-facet-list::-webkit-scrollbar-thumb,body:has(.od-page) .facet-hl-container::-webkit-scrollbar-thumb{background:rgba(var(--od-gold-rgb),.4)!important;border-radius:2px!important} /* 8. PILL SCROLL ARROWS + BLUR OVERLAY */ body:has(.od-page) .navigator-left,body:has(.od-page) .navigator-right{background:transparent!important;border:none!important;padding:0 4px!important} body:has(.od-page) .chip.chip-additive.rounded-circle,body:has(.od-page) .navigator-left button,body:has(.od-page) .navigator-right button{width:32px!important;height:32px!important;flex:0 0 32px!important;padding:0!important;border-radius:50%!important;background:rgba(var(--od-navy-rgb),.9)!important;background-color:rgba(var(--od-navy-rgb),.9)!important;color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} body:has(.od-page) .navigator-left button i,body:has(.od-page) .navigator-right button i,body:has(.od-page) .chip.rounded-circle i,body:has(.od-page) .chip.rounded-circle svg{color:var(--od-gl)!important;fill:var(--od-gl)!important} body:has(.od-page) .chip.chip-additive.rounded-circle:hover{background:rgba(var(--od-gold-rgb),.15)!important;border-color:var(--od-gold)!important;color:#fff!important} body:has(.od-page) .blur-overlay,body:has(.od-page) div.blur-overlay,body:has(.od-page) [class*="blur-overlay"]{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;background:transparent!important;pointer-events:none!important} /* 9. APPLIED FILTER CHIPS + CLEAR FILTERS */ body:has(.od-page) .chip-subtractive,body:has(.od-page) .chip.chip-subtractive,body:has(.od-page) button.chip-subtractive,body:has(.od-page) .chip.chip-default,body:has(.od-page) .chip-default,body:has(.od-page) button.chip-default,body:has(.od-page) button.facet-filter,body:has(.od-page) .applied-filter,body:has(.od-page) [class*="applied-filter"]{background:rgba(var(--od-mid-rgb),.7)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;padding:6px 12px!important;font-size:11px!important;font-weight:600!important;letter-spacing:.4px!important;text-transform:uppercase!important} body:has(.od-page) .chip-subtractive:hover,body:has(.od-page) .chip-default:hover,body:has(.od-page) button.facet-filter:hover,body:has(.od-page) [class*="applied-filter"]:hover{background:rgba(var(--od-gold-rgb),.12)!important;border-color:var(--od-gold)!important;color:#fff!important} body:has(.od-page) .chip-subtractive i,body:has(.od-page) .chip-subtractive svg,body:has(.od-page) .chip-subtractive .ddc-icon,body:has(.od-page) .chip-default i,body:has(.od-page) .chip-default svg,body:has(.od-page) .chip-default .ddc-icon,body:has(.od-page) button.facet-filter i,body:has(.od-page) button.facet-filter svg{color:var(--od-gl)!important;fill:var(--od-gl)!important} body:has(.od-page) .text-link,body:has(.od-page) a.text-link,body:has(.od-page) button.text-link,body:has(.od-page) .btn-link,body:has(.od-page) .ws-inv-data a,body:has(.od-page) .ws-inv-listing a.text-link{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;background:transparent!important;text-decoration-color:rgba(var(--od-gold-rgb),.5)!important} body:has(.od-page) .text-link:hover,body:has(.od-page) .btn-link:hover,body:has(.od-page) .ws-inv-data a:hover{color:#fff!important;text-decoration-color:#fff!important} /* 10. VEHICLE COUNT ("121 Vehicles Matching") */ body:has(.od-page) .vehicle-count,body:has(.od-page) div.vehicle-count,body:has(.od-page) .vehicle-count *,body:has(.od-page) [class*="vehicle-count"],body:has(.od-page) [class*="result-count"],body:has(.od-page) [class*="matching"]{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-weight:800!important;font-size:14px!important;letter-spacing:.3px!important} /* 11. SORT BY */ body:has(.od-page) select,body:has(.od-page) select option,body:has(.od-page) [aria-label*="Sort" i],body:has(.od-page) [aria-label*="Sort" i] *,body:has(.od-page) [data-testid*="sort" i],body:has(.od-page) [class*="ws-inv-sort"],body:has(.od-page) [class*="ws-inv-sort"] *,body:has(.od-page) label[for*="sort"]{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) select{background-color:rgba(var(--od-navy-rgb),.9)!important;border:1px solid rgba(var(--od-gold-rgb),.3)!important;padding:10px 38px 10px 14px!important;border-radius:3px!important;font-family:'Roboto',sans-serif!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:1px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;utf8,")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important} body:has(.od-page) select option{background:var(--od-navy)!important;text-transform:none!important} body:has(.od-page) input,body:has(.od-page) .free-text-search,body:has(.od-page) textarea{background-image:none!important} /* 12. FILTER SIDEBAR CONTAINER */ body:has(.od-page) .srp-wrapper-facets{background:var(--od-mid)!important;background-color:var(--od-mid)!important;padding:24px 20px!important;border-radius:4px!important;border:1px solid rgba(var(--od-gold-rgb),.15)!important} body:has(.od-page) .srp-wrapper-facets *:not([style*="background" i]){background:transparent!important;background-color:transparent!important;border-color:rgba(var(--od-gold-rgb),.15)!important;box-shadow:none!important} /* 13. FACET PANELS (.facet-list-group) */ body:has(.od-page) .facet-list-group,body:has(.od-page) .facet-list-group.panel,body:has(.od-page) .facet-list-group.panel-default{background:transparent!important;border:none!important;box-shadow:none!important;margin-bottom:0!important} body:has(.od-page) .facet-list-group + .facet-list-group{border-top:1px solid rgba(var(--od-gold-rgb),.12)!important} body:has(.od-page) .facet-list-group .panel-heading,body:has(.od-page) .facet-list-group .panel-title,body:has(.od-page) .facet-list-group .panel-title button,body:has(.od-page) .facet-list-group .panel-title .btn-unstyled,body:has(.od-page) .facet-list-group-label,body:has(.od-page) span.facet-list-group-label{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;background:transparent!important;border:none!important;font-size:12px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.8px!important;line-height:1.3!important} body:has(.od-page) .facet-list-group .btn-unstyled{padding:12px 0!important;cursor:pointer!important;width:100%!important} body:has(.od-page) .facet-list-group .btn-unstyled:hover{color:#fff!important} body:has(.od-page) .facet-list-group .ddc-icon,body:has(.od-page) .facet-list-group [data-testid="expand-icon"],body:has(.od-page) .facet-list-group .ddc-icon-expand,body:has(.od-page) .facet-list-group .ddc-icon-collapse,body:has(.od-page) .facet-list-group .icon-style-collapse,body:has(.od-page) .srp-wrapper-facets .ddc-icon,body:has(.od-page) [id*="panel-title"] .ddc-icon{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;fill:var(--od-gl)!important} body:has(.od-page) .srp-wrapper-facets .panel-body,body:has(.od-page) .srp-wrapper-facets .panel-body label,body:has(.od-page) .srp-wrapper-facets .panel-body a,body:has(.od-page) .srp-wrapper-facets .panel-body li,body:has(.od-page) .srp-wrapper-facets .panel-body span,body:has(.od-page) .srp-wrapper-facets .control-label{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;font-size:12px!important;line-height:1.4!important} body:has(.od-page) .srp-wrapper-facets .panel-body a:hover,body:has(.od-page) .srp-wrapper-facets .panel-body label:hover{color:#fff!important} body:has(.od-page) .srp-wrapper-facets small,body:has(.od-page) .srp-wrapper-facets .ddc-font-size-xsmall{color:var(--od-mutedw)!important;opacity:.85!important} body:has(.od-page) .srp-wrapper-facets input[type="checkbox"],body:has(.od-page) .srp-wrapper-facets input[type="radio"]{accent-color:var(--od-gold)!important} /* 14. RANGE SLIDER FORM (Year/Mileage/Price) */ body:has(.od-page) .facet-list-range-slider,body:has(.od-page) .facet-list-range-slider *,body:has(.od-page) .range-form,body:has(.od-page) .range-form *{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important} body:has(.od-page) .srp-wrapper-facets input,body:has(.od-page) .srp-wrapper-facets input.form-control,body:has(.od-page) .range-form input,body:has(.od-page) .range-form input.form-control,body:has(.od-page) input.font-size-ios-zoom-override{background-color:rgba(var(--od-navy-rgb),.7)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.3)!important;color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important;padding:8px 12px!important;border-radius:3px!important;font-size:12px!important} body:has(.od-page) .ui-slider{background:rgba(var(--od-gold-rgb),.2)!important;border:none!important} body:has(.od-page) .ui-slider-range{background:var(--od-gold)!important} body:has(.od-page) .ui-slider-handle{background:var(--od-gl)!important;border:2px solid var(--od-navy)!important} body:has(.od-page) .no-price-btn,body:has(.od-page) .no-price-btn *{color:var(--od-mutedw)!important} body:has(.od-page) #show-filters-modal-button,body:has(.od-page) .btn.btn-default.btn-block.ddc-font-size-large{background:var(--od-mid)!important;background-color:var(--od-mid)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;font-weight:800!important} body:has(.od-page) #show-filters-modal-button *,body:has(.od-page) .btn.btn-default.btn-block.ddc-font-size-large *{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) #show-filters-modal-button .badge{background:var(--od-gold)!important;color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important} /* 15. VEHICLE LISTING WRAPPER */ body:has(.od-page) .ws-inv-listing ul,body:has(.od-page) .ws-inv-listing ol{background:transparent!important;list-style:none!important;padding:0!important} /* 16. VEHICLE CARDS (li.vehicle-card-detailed) */ body:has(.od-page) li.vehicle-card,body:has(.od-page) li.vehicle-card-detailed,body:has(.od-page) li.box-border.vehicle-card,body:has(.od-page) .ws-inv-listing li.vehicle-card,body:has(.od-page) .ws-inv-listing li.vehicle-card-detailed{background:var(--od-mid)!important;background-color:var(--od-mid)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.25)!important;border-radius:4px!important;color:var(--od-cream)!important;list-style:none!important;overflow:visible!important;transition:box-shadow .3s ease,border-color .3s ease!important} body:has(.od-page) li.vehicle-card:hover,body:has(.od-page) li.vehicle-card-detailed:hover,body:has(.od-page) li.box-border.vehicle-card:hover{border-color:rgba(var(--od-gold-rgb),.5)!important;box-shadow:0 0 24px rgba(var(--od-gold-rgb),.3),0 12px 40px rgba(0,0,0,.5)!important} body:has(.od-page) .vehicle-card-body,body:has(.od-page) .vehicle-card-body.ddc-font-size-small,body:has(.od-page) .vehicle-card-details-container{background:var(--od-mid)!important;background-color:var(--od-mid)!important;border:none!important;box-shadow:none!important} body:has(.od-page) .vehicle-card-details-container{padding-top:4px!important} body:has(.od-page) li.vehicle-card-detailed hr,body:has(.od-page) li.vehicle-card hr,body:has(.od-page) .vehicle-card-body hr{border:none!important;border-top:1px solid rgba(var(--od-gold-rgb),.08)!important;background:transparent!important;margin:0!important;height:0!important} /* 17. PHOTO CONTAINER + SLICK CAROUSEL */ body:has(.od-page) .vehicle-card-media-container,body:has(.od-page) .vehicle-card-media-container-no-carousel{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;position:relative!important;overflow:visible!important} body:has(.od-page) .vehicle-card-media-container img,body:has(.od-page) .vehicle-card-media-container-no-carousel img{border:none!important;box-shadow:none!important;background:transparent!important;max-width:100%!important;height:auto!important} body:has(.od-page) .slick-slider,body:has(.od-page) .slick-slider.carousel,body:has(.od-page) .slick-slider.carousel.mb-3,body:has(.od-page) .slick-slider.carousel.slick-initialized{position:relative!important;overflow:visible!important;background:transparent!important} body:has(.od-page) .slick-slider .slick-list{overflow:hidden!important} /* 18. CAROUSEL ARROW BUTTONS (.btn-carousel) */ body:has(.od-page) button.btn-carousel,body:has(.od-page) button.btn-carousel.d-none,body:has(.od-page) button.btn-carousel.previous,body:has(.od-page) button.btn-carousel.next,body:has(.od-page) button.btn-carousel.previous.d-none,body:has(.od-page) button.btn-carousel.next.d-none,body:has(.od-page) .slick-slider button.btn-carousel{display:flex!important;visibility:visible!important;opacity:.85!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:26px!important;height:26px!important;padding:0!important;margin:0!important;background:transparent!important;background-color:transparent!important;border:none!important;border-radius:0!important;color:rgba(var(--od-white-rgb),.85)!important;z-index:50!important;cursor:pointer!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important} body:has(.od-page) button.btn-carousel.previous{left:6px!important;right:auto!important} body:has(.od-page) button.btn-carousel.next{right:6px!important;left:auto!important} body:has(.od-page) button.btn-carousel:hover{opacity:1!important;background:transparent!important;color:#fff!important;transform:translateY(-50%) scale(1.15)!important} body:has(.od-page) .btn-carousel .ddc-icon,body:has(.od-page) .btn-carousel .ddc-icon-carousel-arrow,body:has(.od-page) .btn-carousel .ddc-icon-carousel-arrow-left,body:has(.od-page) .btn-carousel .ddc-icon-carousel-arrow-right,body:has(.od-page) .btn-carousel i,body:has(.od-page) .btn-carousel i.d-block{color:rgba(var(--od-white-rgb),.85)!important;-webkit-text-fill-color:rgba(var(--od-white-rgb),.85)!important;fill:rgba(var(--od-white-rgb),.85)!important;display:inline-block!important;visibility:visible!important;opacity:1!important;font-size:20px!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important} /* 19. VEHICLE TITLE (h1-h5 with ) */ body:has(.od-page) li.vehicle-card-detailed h1,body:has(.od-page) li.vehicle-card-detailed h2,body:has(.od-page) li.vehicle-card-detailed h3,body:has(.od-page) li.vehicle-card-detailed h4,body:has(.od-page) li.vehicle-card-detailed h5{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-weight:800!important;text-transform:uppercase!important;font-size:13px!important;line-height:1.3!important;letter-spacing:.3px!important;margin-top:14px!important;margin-bottom:14px!important} body:has(.od-page) li.vehicle-card-detailed h1 a,body:has(.od-page) li.vehicle-card-detailed h2 a,body:has(.od-page) li.vehicle-card-detailed h3 a,body:has(.od-page) li.vehicle-card-detailed h4 a,body:has(.od-page) li.vehicle-card-detailed h5 a,body:has(.od-page) li.vehicle-card h1 a,body:has(.od-page) li.vehicle-card h2 a,body:has(.od-page) li.vehicle-card h3 a,body:has(.od-page) li.vehicle-card h4 a,body:has(.od-page) li.vehicle-card h5 a{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;text-decoration:none!important;font-weight:800!important;text-transform:uppercase!important;font-size:13px!important;line-height:1.3!important;letter-spacing:.3px!important;min-height:34px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important} body:has(.od-page) li.vehicle-card-detailed h1 a:hover,body:has(.od-page) li.vehicle-card-detailed h2 a:hover,body:has(.od-page) li.vehicle-card-detailed h3 a:hover,body:has(.od-page) li.vehicle-card-detailed h4 a:hover,body:has(.od-page) li.vehicle-card-detailed h5 a:hover{color:#fff!important} /* 20. PRICING */ body:has(.od-page) .pricing-detail,body:has(.od-page) dl.pricing-detail{background:transparent!important;min-height:44px!important;margin-top:8px!important} body:has(.od-page) .pricing-detail dt,body:has(.od-page) dl.pricing-detail dt,body:has(.od-page) dt.final-price,body:has(.od-page) dt.final-price.internetPrice,body:has(.od-page) dl.pricing-detail dt.final-price,body:has(.od-page) dl.pricing-detail dt.final-price.internetPrice,body:has(.od-page) dl.pricing-detail dt.final-price *,body:has(.od-page) .pricing-detail .price-label,body:has(.od-page) span.price-label,body:has(.od-page) .final-price .price-label{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-weight:600!important;background:transparent!important} body:has(.od-page) .pricing-detail dd,body:has(.od-page) dl.pricing-detail dd,body:has(.od-page) dd.final-price,body:has(.od-page) dd.final-price.internetPrice,body:has(.od-page) dl.pricing-detail dd.font-weight-bold,body:has(.od-page) .pricing-detail [data-key*="price-item"]{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;background:transparent!important} body:has(.od-page) .portal-price,body:has(.od-page) span.portal-price,body:has(.od-page) .portal-price *{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;background:transparent!important} /* 21. HIGHLIGHT BADGES (mileage, carfax) */ body:has(.od-page) .vehicle-card-highlight{background:transparent!important;min-height:40px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important} body:has(.od-page) .highlight-badge,body:has(.od-page) .highlight-badge.default,body:has(.od-page) .highlight-badge.badge-xsmall{background:transparent!important;background-color:transparent!important;border:1px solid var(--od-gold)!important;border-radius:3px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:5px 11px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.3px!important;text-transform:none!important} body:has(.od-page) .highlight-badge *{color:#fff!important;background:transparent!important} /* 22. BADGE CALLOUT (CARFAX Fair Value, Certified) */ body:has(.od-page) .badge-callout{background:transparent!important;min-height:72px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;color:var(--od-gl)!important} body:has(.od-page) .badge-callout ul,body:has(.od-page) .badge-callout ul.list-unstyled{min-height:60px!important;margin-bottom:0!important;padding-left:0!important;list-style:none!important} /* 23. VEHICLE CARD FOOTER */ body:has(.od-page) .vehicle-card-footer,body:has(.od-page) .vehicle-card-footer.text-muted,body:has(.od-page) .footer-grid-layout,body:has(.od-page) .footer-grid-layout.columns-4{background:transparent!important;border:none!important;box-shadow:none!important;color:var(--od-gl)!important} body:has(.od-page) .vehicle-card-footer.text-muted *,body:has(.od-page) .vehicle-card-footer *{color:var(--od-gl)!important} /* 24. ACTION BUTTONS (Compare/Track Price/Save/Details) */ body:has(.od-page) .vehicle-card-footer .modern-my-cars-compare-label,body:has(.od-page) .vehicle-card-footer .modern-my-cars-compare-label *,body:has(.od-page) .vehicle-card-footer .unstyled-button,body:has(.od-page) .vehicle-card-footer .unstyled-button *,body:has(.od-page) .vehicle-card-footer .modern-my-cars-details-label,body:has(.od-page) .vehicle-card-footer .modern-my-cars-details-label *,body:has(.od-page) .vehicle-card-footer [data-testid$="-compare"],body:has(.od-page) .vehicle-card-footer [data-testid$="-compare"] *,body:has(.od-page) .vehicle-card-footer [data-testid^="button-"],body:has(.od-page) .vehicle-card-footer [data-testid^="button-"] *,body:has(.od-page) .vehicle-card-footer .label-text,body:has(.od-page) .vehicle-card-footer .ctas-btn__label--desktop,body:has(.od-page) .vehicle-card-footer .ctas-btn__label--mobile,body:has(.od-page) .vehicle-card-footer button,body:has(.od-page) .vehicle-card-footer a{border:0 none transparent!important;outline:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;fill:var(--od-gl)!important;font-size:10px!important;font-weight:600!important;letter-spacing:.3px!important;text-transform:none!important;padding:4px 6px!important;white-space:normal!important} body:has(.od-page) .vehicle-card-footer .modern-my-cars-compare-label:hover,body:has(.od-page) .vehicle-card-footer .unstyled-button:hover,body:has(.od-page) .vehicle-card-footer .modern-my-cars-details-label:hover,body:has(.od-page) .vehicle-card-footer [data-testid$="-compare"]:hover,body:has(.od-page) .vehicle-card-footer [data-testid^="button-"]:hover{color:#fff!important;-webkit-text-fill-color:#fff!important;background:transparent!important} body:has(.od-page) .vehicle-card-footer i.ddc-icon,body:has(.od-page) .vehicle-card-footer svg{color:var(--od-gl)!important;fill:var(--od-gl)!important} /* 25. CONFIRM AVAILABILITY BUTTON */ body:has(.od-page) .vehicle-ctas,body:has(.od-page) .price-btn{background:transparent!important;border:none!important} body:has(.od-page) .vehicle-ctas .btn-primary,body:has(.od-page) .vehicle-ctas a.btn-primary,body:has(.od-page) .vehicle-ctas .dialog.btn-primary,body:has(.od-page) .price-btn .btn-primary,body:has(.od-page) .price-btn a.dialog,body:has(.od-page) a.dialog.btn-primary,body:has(.od-page) a.btn-block.btn-primary,body:has(.od-page) a.dialog.btn-block.btn-sm.btn-primary.btn{color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important;background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 50%,var(--od-gd) 100%)!important;background-color:var(--od-gold)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 50%,var(--od-gd) 100%)!important;border:2px solid var(--od-gl)!important;font-family:'Roboto',sans-serif!important;font-weight:800!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:1.5px!important;padding:12px 24px!important;border-radius:3px!important;display:block!important;text-align:center!important;text-decoration:none!important;width:100%!important;cursor:pointer!important;transition:all .3s ease!important;box-shadow:0 0 14px rgba(var(--od-gold-rgb),.25)!important} body:has(.od-page) .vehicle-ctas .btn-primary *,body:has(.od-page) .price-btn a.dialog *,body:has(.od-page) a.dialog.btn-primary *{color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important;fill:var(--od-navy)!important} body:has(.od-page) .vehicle-ctas .btn-primary:hover,body:has(.od-page) .price-btn a.dialog:hover,body:has(.od-page) a.dialog.btn-primary:hover{color:var(--od-navy)!important;background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gl) 50%,var(--od-gd) 100%)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gl) 50%,var(--od-gd) 100%)!important;border-color:var(--od-gl)!important;box-shadow:0 0 28px rgba(var(--od-gold-rgb),.65),0 0 56px rgba(var(--od-gold-rgb),.25)!important;transform:translateY(-2px)!important} /* 26. SEARCH AUTOCOMPLETE DROPDOWN */ body:has(.od-page) [class*="suggestion"],body:has(.od-page) [class*="suggestion"] *,body:has(.od-page) [class*="autocomplete"],body:has(.od-page) [class*="autocomplete"] *,body:has(.od-page) [class*="typeahead"],body:has(.od-page) [class*="typeahead"] *,body:has(.od-page) [role="listbox"],body:has(.od-page) [role="listbox"] *,body:has(.od-page) .free-text-search-form ul,body:has(.od-page) .free-text-search-form ul li,body:has(.od-page) #inventory-search1-app-root ul,body:has(.od-page) #inventory-search1-app-root ul li{background:var(--od-mid)!important;background-color:var(--od-mid)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border-color:rgba(var(--od-gold-rgb),.3)!important} body:has(.od-page) [role="option"]:hover,body:has(.od-page) [role="option"]:hover *,body:has(.od-page) [role="option"][aria-selected="true"],body:has(.od-page) [role="option"][aria-selected="true"] *,body:has(.od-page) [class*="suggestion"] li:hover,body:has(.od-page) [class*="suggestion"] li:hover *{background:rgba(var(--od-gold-rgb),.15)!important;background-color:rgba(var(--od-gold-rgb),.15)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body:has(.od-page) [class*="suggestion"] strong,body:has(.od-page) [class*="suggestion"] mark,body:has(.od-page) [role="listbox"] strong{background:transparent!important;color:#fff!important;font-weight:800!important} /* 28. PAGINATION (.pagination inside ws-inv-paging) */ body:has(.od-page) #inventory-paging1-app-root,body:has(.od-page) .ws-inv-paging{background:transparent!important;padding:20px 0!important} body:has(.od-page) .pagination,body:has(.od-page) ul.pagination{background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important;list-style:none!important;display:flex!important;gap:6px!important;align-items:center!important} body:has(.od-page) .pagination li,body:has(.od-page) ul.pagination li{background:transparent!important;list-style:none!important;margin:0!important;padding:0!important;display:inline-flex!important} body:has(.od-page) .pagination li a,body:has(.od-page) .pagination a,body:has(.od-page) ul.pagination li a,body:has(.od-page) .pagination li span{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:36px!important;height:36px!important;padding:0 10px!important;background:rgba(var(--od-mid-rgb),.7)!important;background-color:rgba(var(--od-mid-rgb),.7)!important;background-image:none!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;font-size:13px!important;font-weight:700!important;text-decoration:none!important;letter-spacing:.3px!important;transition:all .2s ease!important;box-shadow:none!important} body:has(.od-page) .pagination li a:hover,body:has(.od-page) .pagination a:hover{background:rgba(var(--od-gold-rgb),.15)!important;background-color:rgba(var(--od-gold-rgb),.15)!important;border-color:var(--od-gold)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body:has(.od-page) .pagination li.active,body:has(.od-page) .pagination li.active a,body:has(.od-page) .pagination li.active span,body:has(.od-page) .pagination .active a,body:has(.od-page) .pagination .active{background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;background-color:var(--od-gold)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important;border-color:var(--od-gl)!important;cursor:default!important;box-shadow:0 0 12px rgba(var(--od-gold-rgb),.3)!important} body:has(.od-page) .pagination li.active a:hover,body:has(.od-page) .pagination .active a:hover{background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important} body:has(.od-page) .pagination-ellipsis,body:has(.od-page) .pagination li.pagination-ellipsis,body:has(.od-page) .pagination-ellipsis a,body:has(.od-page) .pagination-ellipsis span{background:transparent!important;background-color:transparent!important;border:1px solid transparent!important;color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;cursor:default!important;box-shadow:none!important} body:has(.od-page) .pagination-ellipsis:hover,body:has(.od-page) .pagination li.pagination-ellipsis:hover,body:has(.od-page) .pagination-ellipsis a:hover{background:transparent!important;border-color:transparent!important;color:var(--od-mutedw)!important} body:has(.od-page) .pagination-previous a,body:has(.od-page) .pagination-next a,body:has(.od-page) .pagination li.pagination-previous a,body:has(.od-page) .pagination li.pagination-next a{background:rgba(var(--od-mid-rgb),.7)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important} body:has(.od-page) .pagination-previous a:hover,body:has(.od-page) .pagination-next a:hover{background:rgba(var(--od-gold-rgb),.15)!important;border-color:var(--od-gold)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body:has(.od-page) .pagination .ddc-icon,body:has(.od-page) .pagination .ddc-icon-arrow1-left,body:has(.od-page) .pagination .ddc-icon-arrow1-right,body:has(.od-page) .pagination-previous .ddc-icon,body:has(.od-page) .pagination-next .ddc-icon{color:inherit!important;-webkit-text-fill-color:inherit!important;fill:currentColor!important;background:transparent!important} body:has(.od-page) .pagination li.disabled a,body:has(.od-page) .pagination .disabled,body:has(.od-page) .pagination-previous.disabled a,body:has(.od-page) .pagination-next.disabled a{opacity:.35!important;cursor:default!important;pointer-events:none!important} /* 29. RANGE SLIDER HANDLES/TRACK (rc-slider library) */ body:has(.od-page) .rc-slider,body:has(.od-page) .rc-slider-horizontal{background:transparent!important;height:28px!important;padding:12px 0!important;margin:8px 4px 20px!important;position:relative!important;touch-action:none!important} body:has(.od-page) .rc-slider-rail{background:rgba(var(--od-gold-rgb),.2)!important;background-color:rgba(var(--od-gold-rgb),.2)!important;height:4px!important;border-radius:2px!important;position:absolute!important;width:100%!important;top:12px!important} body:has(.od-page) .rc-slider-track,body:has(.od-page) .rc-slider-track-1{background:var(--od-gold)!important;background-color:var(--od-gold)!important;background-image:linear-gradient(90deg,var(--od-gold) 0%,var(--od-gl) 100%)!important;height:4px!important;border-radius:2px!important;position:absolute!important;top:12px!important;box-shadow:0 0 8px rgba(var(--od-gold-rgb),.4)!important} body:has(.od-page) .rc-slider-handle,body:has(.od-page) .rc-slider-handle-1,body:has(.od-page) .rc-slider-handle-2{background:var(--od-gl)!important;background-color:var(--od-gl)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;border:2px solid var(--od-navy)!important;border-radius:50%!important;width:18px!important;height:18px!important;margin-top:-7px!important;position:absolute!important;cursor:grab!important;opacity:1!important;box-shadow:0 0 0 2px rgba(var(--od-gold-rgb),.4),0 2px 8px rgba(0,0,0,.5)!important;transition:all .15s ease!important;z-index:2!important;touch-action:pan-x!important} body:has(.od-page) .rc-slider-handle:hover,body:has(.od-page) .rc-slider-handle-1:hover,body:has(.od-page) .rc-slider-handle-2:hover{background:#fff!important;background-image:linear-gradient(180deg,#fff 0%,var(--od-gl) 100%)!important;border-color:var(--od-navy)!important;box-shadow:0 0 0 3px rgba(var(--od-gold-rgb),.6),0 0 16px rgba(var(--od-gold-rgb),.6)!important;transform:scale(1.15)!important} body:has(.od-page) .rc-slider-handle:active,body:has(.od-page) .rc-slider-handle-1:active,body:has(.od-page) .rc-slider-handle-2:active,body:has(.od-page) .rc-slider-handle-dragging{cursor:grabbing!important;background:#fff!important;box-shadow:0 0 0 4px rgba(var(--od-gold-rgb),.7),0 0 20px rgba(var(--od-gold-rgb),.8)!important;transform:scale(1.2)!important} body:has(.od-page) .rc-slider-handle:focus,body:has(.od-page) .rc-slider-handle:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(var(--od-gold-rgb),.8),0 0 16px rgba(var(--od-gold-rgb),.6)!important} body:has(.od-page) .rc-slider-step,body:has(.od-page) .rc-slider-dot,body:has(.od-page) .rc-slider-dot-active{display:none!important;visibility:hidden!important} body:has(.od-page) .rc-slider-tooltip,body:has(.od-page) .rc-slider-tooltip-inner{background:var(--od-mid)!important;color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;font-size:11px!important;font-weight:700!important;padding:4px 8px!important;box-shadow:0 4px 12px rgba(0,0,0,.5)!important} /* 27. BOOTSTRAP UTILITY OVERRIDES */ body:has(.od-page) li.vehicle-card-detailed .text-muted,body:has(.od-page) li.vehicle-card .text-muted,body:has(.od-page) .ws-inv-listing .text-muted{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important} body:has(.od-page) li.vehicle-card-detailed .text-dark,body:has(.od-page) li.vehicle-card .text-dark,body:has(.od-page) .srp-wrapper-facets .text-dark{color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important} body:has(.od-page) li.vehicle-card-detailed .bg-white,body:has(.od-page) li.vehicle-card .bg-white,body:has(.od-page) .srp-wrapper-facets .bg-white,body:has(.od-page) li.vehicle-card-detailed .bg-light,body:has(.od-page) .srp-wrapper-facets .bg-light,body:has(.od-page) .ws-inv-text-search .bg-white,body:has(.od-page) .ws-inv-text-search .bg-light{background:transparent!important;background-color:transparent!important} /* 28. NO-RESULTS EMPTY STATE */ body:has(.od-page) [class*="srp-low-result"],body:has(.od-page) .ws-inv-listing>div,body:has(.od-page) .ws-inv-listing>section{background:var(--od-navy)!important;background-color:var(--od-navy)!important;color:var(--od-mutedw)!important} body:has(.od-page) [class*="srp-low-result"] *{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;background:transparent!important} body:has(.od-page) [class*="srp-low-result"] h1,body:has(.od-page) [class*="srp-low-result"] h2,body:has(.od-page) [class*="srp-low-result"] h3{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) [class*="srp-low-result"] a{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) [class*="srp-low-result"] svg *{stroke:var(--od-mutedw)!important;fill:transparent!important} /* VEHICLE CARD PRICING/INFO TABS */ body:has(.od-page) .vehicle-card-tabs .nav-tabs,body:has(.od-page) .tabs.tabs-fill .nav-tabs{border-bottom:1px solid rgba(var(--od-gold-rgb),.2)!important;background:transparent!important} body:has(.od-page) .vehicle-card-tabs .nav-tabs a,body:has(.od-page) .vehicle-card-tabs .nav-tabs a[role="tab"],body:has(.od-page) .tabs.tabs-fill .nav-tabs a,body:has(.od-page) .tabs.tabs-fill .nav-tabs a[role="tab"]{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important} body:has(.od-page) .vehicle-card-tabs .nav-tabs li.active a,body:has(.od-page) .vehicle-card-tabs .nav-tabs a[aria-selected="true"],body:has(.od-page) .tabs.tabs-fill .nav-tabs li.active a,body:has(.od-page) .tabs.tabs-fill .nav-tabs a[aria-selected="true"]{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border-bottom:2px solid var(--od-gold)!important} /* ══════════ [DESKTOP] VDP DIALOG PATCHES — PASS 8 (popup headings) + PASS 9 (underline removals) ══════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ODYSSEY — VDP DESKTOP · PASS 8 PATCH ═══════════════════════════════════════════════════════════════════════════ Defensive fix for the All Available Specials popup (and any future Bootstrap modal popup with non-title h2/h3 content): ROOT CAUSE: Pass 5's blanket "[role=dialog] h1, h2, ..." rule forced ALL headings inside any dialog to 22px white uppercase 800. That's correct for the modal title (e.g. "CHECK AVAILABILITY"), but wrong for body content headings inside a popup (e.g. "All Available Specials" plus each special's sub-heading rendered as h2.mt-0.mb-2). Result: huge uppercase white text bleeding over the page when the popup's panel background didn't apply. ALSO: Pass 5's panel-background rule applied to .modal (the full-viewport scrim layer in Bootstrap). It should target .modal-content (the visible panel inside .modal-dialog). That's why the popup looked transparent. FIXES: P8.1 — Move panel navy bg from .modal scrim → .modal-content panel P8.2 — Restrict modal title styling to .modal-title / .ui-dialog-title / structural :first-child positions only, NOT bare h*-tags P8.3 — Reset bare h2/h3/h4 inside dialog bodies to readable defaults so popup body content stays usable P8.4 — Modal scrim becomes a 50%-black backdrop, not solid navy ═══════════════════════════════════════════════════════════════════════════ */ /* P8.1 — .modal scrim → backdrop; .modal-content → navy panel */ body:has(.od-page) .modal{background:rgba(var(--od-navy-rgb),.65)!important;background-color:rgba(var(--od-navy-rgb),.65)!important;background-image:none!important;border:none!important;border-radius:0!important} body:has(.od-page) .modal-content,body:has(.od-page) .modal-dialog .modal-content,body:has(.od-page) .ddc-modal-content{background:var(--od-mid)!important;background-color:var(--od-mid)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.3)!important;border-radius:4px!important;color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important} body:has(.od-page) .modal-dialog{background:transparent!important;background-color:transparent!important;background-image:none!important;border:none!important} /* P8.2 — Modal title selectors are EXPLICIT — no bare h-tags */ body:has(.od-page) [role="dialog"] .ui-dialog-title,body:has(.od-page) [role="dialog"] .modal-title,body:has(.od-page) [role="dialog"] .dialog-title,body:has(.od-page) [role="dialog"] [class*="dialog-title" i],body:has(.od-page) [role="dialog"] [class*="modal-title" i],body:has(.od-page) [role="dialog"] .modal-header>h1:first-child,body:has(.od-page) [role="dialog"] .modal-header>h2:first-child,body:has(.od-page) [role="dialog"] .modal-header>h3:first-child,body:has(.od-page) [role="dialog"] .modal-header>h4:first-child,body:has(.od-page) [role="dialog"] .modal-header>h5:first-child,body:has(.od-page) [role="dialog"] .ui-dialog-titlebar>*:not(button):not(.close):first-child,body:has(.od-page) .ui-dialog .ui-dialog-title,body:has(.od-page) .ui-dialog .modal-title,body:has(.od-page) .modal .modal-title,body:has(.od-page) .modal .ui-dialog-title,body:has(.od-page) .modal .modal-header>h1:first-child,body:has(.od-page) .modal .modal-header>h2:first-child,body:has(.od-page) .modal .modal-header>h3:first-child,body:has(.od-page) .modal .modal-header>h4:first-child,body:has(.od-page) .ddc-modal .modal-title,body:has(.od-page) .ddc-modal [class*="modal-title" i]{color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:'Roboto',sans-serif!important;font-weight:800!important;font-size:22px!important;line-height:1.2!important;letter-spacing:.4px!important;text-transform:uppercase!important;background:transparent!important;border:none!important;padding:0!important;margin:0 0 16px!important} /* P8.3 — Bare h1-h6 inside dialog bodies → readable mixed-case defaults (overrides Pass 5 still earlier in source order — last wins) */ body:has(.od-page) [role="dialog"] .modal-body h1,body:has(.od-page) [role="dialog"] .modal-body h2,body:has(.od-page) [role="dialog"] .modal-body h3,body:has(.od-page) [role="dialog"] .modal-body h4,body:has(.od-page) [role="dialog"] .modal-body h5,body:has(.od-page) [role="dialog"] .modal-body h6,body:has(.od-page) [role="dialog"]:not(.ui-dialog) h1:not(.modal-title):not(.ui-dialog-title):not([class*="dialog-title" i]):not([class*="modal-title" i]),body:has(.od-page) [role="dialog"]:not(.ui-dialog) h2:not(.modal-title):not(.ui-dialog-title):not([class*="dialog-title" i]):not([class*="modal-title" i]),body:has(.od-page) [role="dialog"]:not(.ui-dialog) h3:not(.modal-title):not(.ui-dialog-title):not([class*="dialog-title" i]):not([class*="modal-title" i]),body:has(.od-page) [role="dialog"]:not(.ui-dialog) h4:not(.modal-title):not(.ui-dialog-title):not([class*="dialog-title" i]):not([class*="modal-title" i]),body:has(.od-page) .modal .modal-body h1,body:has(.od-page) .modal .modal-body h2,body:has(.od-page) .modal .modal-body h3,body:has(.od-page) .modal .modal-body h4,body:has(.od-page) .modal .modal-body h5,body:has(.od-page) .modal .modal-body h6{font-family:'Roboto',sans-serif!important;font-weight:700!important;text-transform:none!important;letter-spacing:normal!important;line-height:1.3!important;color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important;background:transparent!important;border:none!important;padding:0!important;margin:0 0 10px!important} body:has(.od-page) [role="dialog"] .modal-body h1:not(.modal-title),body:has(.od-page) .modal .modal-body h1:not(.modal-title){font-size:22px!important} body:has(.od-page) [role="dialog"] .modal-body h2:not(.modal-title):not([class*="modal-title" i]),body:has(.od-page) [role="dialog"] h2.mt-0.mb-2,body:has(.od-page) .modal .modal-body h2:not(.modal-title){font-size:18px!important} body:has(.od-page) [role="dialog"] .modal-body h3:not(.modal-title),body:has(.od-page) .modal .modal-body h3:not(.modal-title){font-size:16px!important} body:has(.od-page) [role="dialog"] .modal-body h4:not(.modal-title),body:has(.od-page) .modal .modal-body h4:not(.modal-title){font-size:14px!important} body:has(.od-page) [role="dialog"] .modal-body a,body:has(.od-page) .modal .modal-body a,body:has(.od-page) [role="dialog"] .modal-body a:link,body:has(.od-page) [role="dialog"] .modal-body a:visited{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-family:'Roboto',sans-serif!important;font-size:14px!important;font-weight:600!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none!important} body:has(.od-page) [role="dialog"] .modal-body a:hover,body:has(.od-page) .modal .modal-body a:hover{color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:underline!important;text-underline-offset:2px!important} body:has(.od-page) [role="dialog"] .modal-body,body:has(.od-page) [role="dialog"] .modal-body p,body:has(.od-page) [role="dialog"] .modal-body div,body:has(.od-page) [role="dialog"] .modal-body span,body:has(.od-page) [role="dialog"] .modal-body li,body:has(.od-page) .modal .modal-body,body:has(.od-page) .modal .modal-body p,body:has(.od-page) .modal .modal-body div,body:has(.od-page) .modal .modal-body span,body:has(.od-page) .modal .modal-body li{color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important;font-family:'Roboto',sans-serif!important;letter-spacing:normal!important;text-transform:none!important} body:has(.od-page) [role="dialog"] .modal-body p,body:has(.od-page) .modal .modal-body p{font-size:14px!important;line-height:1.5!important;font-weight:400!important;margin:0 0 10px!important} body:has(.od-page) [role="dialog"] .modal-body,body:has(.od-page) .modal .modal-body{background:var(--od-mid)!important;background-color:var(--od-mid)!important;background-image:none!important;padding:16px 20px!important} /* P8.4 — modal-header / modal-footer transparent so .modal-content navy shows */ body:has(.od-page) [role="dialog"] .modal-header,body:has(.od-page) .modal .modal-header,body:has(.od-page) .ddc-modal .modal-header{background:transparent!important;background-color:transparent!important;background-image:none!important;border:none!important;border-bottom:1px solid rgba(var(--od-gold-rgb),.18)!important;padding:16px 20px 12px!important;margin:0!important} body:has(.od-page) [role="dialog"] .modal-footer,body:has(.od-page) .modal .modal-footer,body:has(.od-page) .ddc-modal .modal-footer{background:transparent!important;background-color:transparent!important;background-image:none!important;border:none!important;border-top:1px solid rgba(var(--od-gold-rgb),.18)!important;padding:12px 20px 16px!important} /* END VDP DESKTOP STYLING · PASS 8 */ /* ═══════════════════════════════════════════════════════════════════════════ ODYSSEY — VDP DESKTOP · PASS 9 PATCH ═══════════════════════════════════════════════════════════════════════════ Surgical underline removals on VDP non-modal links. Each rule targets the exact element confirmed via DOM diagnostic to be carrying the underline. All get text-decoration:none + underline-on-hover with white text flip. P9.1 — Explore All Offers (ws-detailed-incentives) P9.3 — Show All Package (ws-packages-options) P9.4 — More about us (ws-vehicle-confidence) P9.5 — Details near MSRP (ws-detailed-pricing — inner span) P9.6 — Location Details (ws-vehicle-location — inner span) ═══════════════════════════════════════════════════════════════════════════ */ /* P9.1 — Explore All Offers (multiple-incentives-link button) */ body:has(.od-page) [data-widget-name="ws-detailed-incentives"] button.multiple-incentives-link,body:has(.od-page) [data-widget-name="ws-detailed-incentives"] button.multiple-incentives-link span{text-decoration:none!important} body:has(.od-page) [data-widget-name="ws-detailed-incentives"] button.multiple-incentives-link:hover,body:has(.od-page) [data-widget-name="ws-detailed-incentives"] button.multiple-incentives-link:hover span{text-decoration:underline!important;text-underline-offset:2px!important;color:#fff!important;-webkit-text-fill-color:#fff!important} /* P9.3 — Show All Package Items (button.text-link) */ body:has(.od-page) [data-widget-name="ws-packages-options"] button.text-link,body:has(.od-page) [data-widget-name="ws-packages-options"] button.text-link span{text-decoration:none!important} body:has(.od-page) [data-widget-name="ws-packages-options"] button.text-link:hover,body:has(.od-page) [data-widget-name="ws-packages-options"] button.text-link:hover span{text-decoration:underline!important;text-underline-offset:2px!important;color:#fff!important;-webkit-text-fill-color:#fff!important} /* P9.4 — More about us (a.text-link-muted with .text-decoration-underline) */ body:has(.od-page) [data-widget-name="ws-vehicle-confidence"] a.text-link-muted{text-decoration:none!important} body:has(.od-page) [data-widget-name="ws-vehicle-confidence"] a.text-link-muted:hover{text-decoration:underline!important;text-underline-offset:2px!important;color:#fff!important;-webkit-text-fill-color:#fff!important} /* P9.5 — Details near MSRP (inner span.text-decoration-underline) */ body:has(.od-page) [data-widget-name="ws-detailed-pricing"] span.text-decoration-underline{text-decoration:none!important} body:has(.od-page) [data-widget-name="ws-detailed-pricing"] a:hover span.text-decoration-underline,body:has(.od-page) [data-widget-name="ws-detailed-pricing"] button:hover span.text-decoration-underline{text-decoration:underline!important;text-underline-offset:2px!important;color:#fff!important;-webkit-text-fill-color:#fff!important} /* P9.6 — Location Details (inner span.text-decoration-underline) */ body:has(.od-page) [data-widget-name="ws-vehicle-location"] span.text-decoration-underline{text-decoration:none!important} body:has(.od-page) [data-widget-name="ws-vehicle-location"] a:hover span.text-decoration-underline{text-decoration:underline!important;text-underline-offset:2px!important;color:#fff!important;-webkit-text-fill-color:#fff!important} @keyframes wa-fade-up{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @media (max-width:1199px){.od-srp .srp-roush-lineup.is-four{grid-template-columns:repeat(2,1fr)!important} } @media (max-width:1100px){.od-srp .srp-roush-features-grid.is-six{grid-template-columns:repeat(2,1fr)!important} } /* ══════════ [DESKTOP] VENDOR BADGES — CPO pill + Carfax sizing ══════════ */ /* ═══ CPO BADGE — white pill sized to match Carfax visual weight ═══ */ /* Scoped to SRP + VDP (rec-vehicles widget reuses same markup). Image is sized by width so it grows to fill the pill horizontally; height auto-scales with aspect ratio. */ body:has(.od-page) .vehicle-card-badge.certified, body:has(.od-page) li.vehicle-card-badge.certified, body:has(.od-page) .vehicle-card-badge.certified, body:has(.od-page) li.vehicle-card-badge.certified { background: var(--od-white) !important; border-radius: 4px !important; padding: 4px 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; min-width: 140px !important; box-sizing: border-box !important; } body:has(.od-page) .vehicle-card-badge.certified img, body:has(.od-page) .vehicle-card-badge.certified img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 60px !important; display: block !important; } /* ═══ CARFAX BADGE — sized to match CPO pill height ════════════ */ /* Carfax SVGs are designed for transparent backgrounds, so no pill bg — just size the container to match CPO so the pair reads as balanced. */ body:has(.od-page) .vehicle-card-badge.carfax, body:has(.od-page) li.vehicle-card-badge.carfax, body:has(.od-page) .vehicle-card-badge.carfax, body:has(.od-page) li.vehicle-card-badge.carfax { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; box-sizing: border-box !important; } body:has(.od-page) .vehicle-card-badge.carfax img, body:has(.od-page) .vehicle-card-badge.carfax svg, body:has(.od-page) .vehicle-card-badge.carfax img, body:has(.od-page) .vehicle-card-badge.carfax svg { height: 44px !important; max-height: 44px !important; width: auto !important; display: block !important; } /* ═══ SRP DISCLAIMER TEXT (bottom of page) ═════════════ */ body:has(.od-page) .disclaimer-text, body:has(.od-page) [class*="disclaimer"], body:has(.od-page) .ws-disclaimer, body:has(.od-page) [data-widget-id*="disclaimer"] { color: var(--od-mutedw) !important; -webkit-text-fill-color: var(--od-mutedw) !important; } body:has(.od-page) .disclaimer-text *, body:has(.od-page) [class*="disclaimer"] *, body:has(.od-page) .ws-disclaimer * { color: var(--od-mutedw) !important; -webkit-text-fill-color: var(--od-mutedw) !important; } /* ══════════ [DESKTOP] EPRICE / DDC DIALOG CONSOLIDATED v3 ══════════ */ /* ═══════════════════════════════════════════════════════════════════ EPRICE / DDC DIALOG — CONSOLIDATED BLOCK (v3) Works on SRP, VDP, and any DDC page. Dialogs are appended to outside .od-* wrappers so we don't scope them. Replaces all prior passes (P4–P7 VDP-scoped + multiple global ui-dialog blocks). Use the SAME block in both desktop and mobile CSS files. v3 changes vs v2: • CRITICAL: Reset .ddc-page background/border/padding. DDC loads the ePrice form as a remote page wrapped in
which renders with its own bg + padding + border, creating the "dark inner panel" effect. v1/v2 only reset .modal-* selectors, which never matched this DOM. • Hide DDC's duplicate inner page heading (the form's own heading duplicates the dialog titlebar — keep the outer one with the X) ─────────────────────────────────────────────────────────────────── */ /* Container — uniform navy with gold top accent */ .ui-dialog.ui-widget.ui-widget-content { background: var(--od-navy2) !important; background-color: var(--od-navy2) !important; background-image: none !important; border: 1px solid rgba(var(--od-gold-rgb),0.3) !important; border-top: 3px solid var(--od-gold) !important; border-radius: 4px !important; color: var(--od-cream) !important; font-family: 'Roboto','Helvetica Neue',Arial,sans-serif !important; overflow: visible !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } /* AGGRESSIVE descendant reset — kills any DDC-injected wrapper styling. Covers .ddc-page (the actual remote-page wrapper DDC uses), Bootstrap .modal-* containers, and any unknown wrapper that happens to be a direct child of .ui-dialog-content. */ .ui-dialog .ddc-page, .ui-dialog .ddc-page-content, .ui-dialog .ddc-content-wrap, .ui-dialog [class*="ddc-page" i]:not(button):not(a), .ui-dialog .modal-content, .ui-dialog .modal-body, .ui-dialog .modal-header, .ui-dialog .modal-footer, .ui-dialog .modal-dialog, .ui-dialog .ddc-modal-content, .ui-dialog .dialog-content, .ui-dialog [class*="dialog-content" i]:not(button):not(a), .ui-dialog .ui-dialog-content > div:not(.btn):not([class*="btn"]), .ui-dialog .ui-dialog-content > section, .ui-dialog .ui-dialog-content > article, .ui-dialog .ui-dialog-content > main, .ui-dialog .ui-dialog-content > form { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Hide DDC's duplicate inner heading — the dialog titlebar already shows the same title; without this you get two stacked "UNLOCK MORE SAVINGS" headings once the inner panel goes transparent. Targets the FIRST heading inside .ddc-page (the page-title), leaves any later section headings alone. */ .ui-dialog .ddc-page > h1, .ui-dialog .ddc-page > h2:first-of-type, .ui-dialog .ddc-page > h3:first-of-type, .ui-dialog .ddc-page > .ddc-heading-1, .ui-dialog .ddc-page > .ddc-heading-2:first-of-type, .ui-dialog .ddc-page > .ddc-heading-3:first-of-type, .ui-dialog .ddc-page > .page-title, .ui-dialog .ddc-page > [class*="page-title" i], .ui-dialog .ddc-page-content > h1, .ui-dialog .ddc-page-content > h2:first-of-type, .ui-dialog .ddc-page > *:first-child:is(h1, h2, h3, h4) { display: none !important; } /* Titlebar — transparent, relative anchor for absolute close button */ .ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-widget-header { position: relative !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; padding: 22px 56px 14px 28px !important; margin: 0 !important; } /* Title — DDC uses h2.instant-eprice-header inside titlebar (not .ui-dialog-title). The body:has(.od-page) variants beat any Pass 8 residue at higher specificity. */ .ui-dialog .ui-dialog-title, .ui-dialog h2.instant-eprice-header, .ui-dialog h2.ddc-heading-2, .ui-dialog .ddc-heading-2.instant-eprice-header, .ui-dialog h2.ddc-heading-2.instant-eprice-header.h4, body:has(.od-page) .ui-dialog h2.instant-eprice-header, body:has(.od-page) .ui-dialog .ddc-heading-2.instant-eprice-header, body:has(.od-page) .ui-dialog h2.ddc-heading-2.instant-eprice-header.h4 { color: var(--od-white) !important; -webkit-text-fill-color: var(--od-white) !important; font-family: 'Roboto',sans-serif !important; font-size: 18px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; display: block !important; /* protect outer title from the hide rule above */ } /* Close button — absolute top-right, gold ring, ✕ via pseudo */ .ui-dialog .ui-dialog-titlebar-close, .ui-dialog a.ui-dialog-titlebar-close { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; border: 1px solid rgba(var(--od-gold-rgb),0.4) !important; border-radius: 50% !important; cursor: pointer !important; overflow: hidden !important; z-index: 10 !important; text-decoration: none !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(var(--od-gold-rgb),0.15) !important; border-color: var(--od-gold) !important; } /* Hide DDC's icon sprite + "close" text label inside the button */ .ui-dialog .ui-dialog-titlebar-close .ui-icon, .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick, .ui-dialog .ui-dialog-titlebar-close span, .ui-dialog .ui-dialog-titlebar-close > * { background-image: none !important; text-indent: 0 !important; font-size: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Render ✕ via pseudo */ .ui-dialog .ui-dialog-titlebar-close .ui-icon::after, .ui-dialog .ui-dialog-titlebar-close::before { content: "\00D7" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; font-family: 'Roboto','Helvetica Neue',Arial,sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; color: var(--od-gl) !important; -webkit-text-fill-color: var(--od-gl) !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; } .ui-dialog .ui-dialog-titlebar-close:hover .ui-icon::after, .ui-dialog .ui-dialog-titlebar-close:hover::before { color: var(--od-white) !important; -webkit-text-fill-color: var(--od-white) !important; } /* Content area — no extra borders, no second background */ .ui-dialog .ui-dialog-content, .ui-dialog .ui-widget-content.ui-dialog-content { background: transparent !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: var(--od-cream) !important; padding: 6px 28px 26px !important; } /* Description / paragraph copy — near-white sentence case */ .ui-dialog p, .ui-dialog .ui-dialog-content p, .ui-dialog .ddc-page p, .ui-dialog .form-description, .ui-dialog [class*="description" i], .ui-dialog [class*="instructions" i], body:has(.od-page) .ui-dialog p, body:has(.od-page) .ui-dialog .ddc-page p { color: var(--od-cream) !important; -webkit-text-fill-color: var(--od-cream) !important; font-family: 'Roboto',sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: normal !important; text-transform: none !important; background: transparent !important; margin: 0 0 8px !important; } /* Required-field hint ("* Indicates a required field") */ .ui-dialog em, .ui-dialog .ui-dialog-content em, .ui-dialog .ddc-page em, .ui-dialog small:not(.alert-danger):not(.alert):not([class*="error"]), .ui-dialog .required-info, .ui-dialog [class*="indicates-required" i], body:has(.od-page) .ui-dialog em, body:has(.od-page) .ui-dialog .ddc-page em { color: var(--od-cream) !important; -webkit-text-fill-color: var(--od-cream) !important; font-style: normal !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; display: block !important; margin: 0 0 18px !important; background: transparent !important; } /* Labels — champagne uppercase */ .ui-dialog label, .ui-dialog .ui-dialog-content label, .ui-dialog .ddc-page label { color: var(--od-gl) !important; -webkit-text-fill-color: var(--od-gl) !important; font-family: 'Roboto',sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 14px 0 6px !important; display: block !important; background: transparent !important; } /* Inputs / textareas / selects — dark navy with gold focus */ .ui-dialog input.form-control, .ui-dialog textarea.form-control, .ui-dialog select.form-control, .ui-dialog input[type="text"], .ui-dialog input[type="email"], .ui-dialog input[type="tel"], .ui-dialog input[type="number"], .ui-dialog input[type="search"], .ui-dialog input[type="password"], .ui-dialog textarea, .ui-dialog select { background: rgba(var(--od-navy-rgb),0.7) !important; background-color: rgba(var(--od-navy-rgb),0.7) !important; background-image: none !important; border: 1px solid rgba(var(--od-gold-rgb),0.3) !important; border-radius: 3px !important; color: var(--od-cream) !important; -webkit-text-fill-color: var(--od-cream) !important; font-family: 'Roboto',sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; padding: 10px 12px !important; margin: 4px 0 !important; width: 100% !important; box-shadow: none !important; } .ui-dialog input:focus, .ui-dialog textarea:focus, .ui-dialog select:focus { border-color: var(--od-gold) !important; outline: 0 !important; box-shadow: 0 0 0 2px rgba(var(--od-gold-rgb),0.2) !important; } .ui-dialog input::placeholder, .ui-dialog textarea::placeholder { color: #6b6258 !important; -webkit-text-fill-color: #6b6258 !important; opacity: 1 !important; } /* Native select arrow restored */ .ui-dialog select.form-control, .ui-dialog select { -webkit-appearance: menulist !important; -moz-appearance: menulist !important; appearance: menulist !important; padding-right: 30px !important; } /* Submit CTA — champagne gradient, full width */ .ui-dialog .btn-primary, .ui-dialog button.btn-primary, .ui-dialog .btn-block.btn-primary, .ui-dialog button.ui-button-submit, .ui-dialog button.btn-primary.btn-block.ui-button-submit, .ui-dialog input[type="submit"] { background: linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 50%,var(--od-gd) 100%) !important; background-color: var(--od-gold) !important; background-image: linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 50%,var(--od-gd) 100%) !important; border: 2px solid var(--od-gl) !important; border-radius: 3px !important; color: var(--od-navy) !important; -webkit-text-fill-color: var(--od-navy) !important; font-family: 'Roboto',sans-serif !important; font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; padding: 14px 28px !important; width: 100% !important; display: block !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 0 14px rgba(var(--od-gold-rgb),0.25) !important; margin: 18px 0 6px !important; transition: all 0.3s ease !important; } .ui-dialog .btn-primary:hover, .ui-dialog button.btn-primary:hover, .ui-dialog button.ui-button-submit:hover { background: linear-gradient(180deg,var(--od-gl) 0%,var(--od-gl) 50%,var(--od-gd) 100%) !important; background-image: linear-gradient(180deg,var(--od-gl) 0%,var(--od-gl) 50%,var(--od-gd) 100%) !important; border-color: var(--od-gl) !important; box-shadow: 0 0 28px rgba(var(--od-gold-rgb),0.5) !important; transform: translateY(-1px) !important; } /* Required asterisk inside labels */ .ui-dialog .required, .ui-dialog [class*="required" i]:not(input):not(select):not(textarea):not(small) { color: var(--od-gl) !important; -webkit-text-fill-color: var(--od-gl) !important; } /* Validation error */ .ui-dialog .alert-danger, .ui-dialog small.alert-danger { color: #ff8888 !important; -webkit-text-fill-color: #ff8888 !important; background: rgba(208,2,27,0.08) !important; border: 1px solid rgba(255,107,107,0.4) !important; padding: 6px 10px !important; border-radius: 3px !important; font-size: 12px !important; margin: 4px 0 !important; display: block !important; } /* Inline links inside dialog */ .ui-dialog a:not(.btn):not([class*="btn"]):not(.ui-dialog-titlebar-close) { color: var(--od-gl) !important; -webkit-text-fill-color: var(--od-gl) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } .ui-dialog a:not(.btn):not([class*="btn"]):not(.ui-dialog-titlebar-close):hover { color: var(--od-white) !important; -webkit-text-fill-color: var(--od-white) !important; } /* HR separators */ .ui-dialog hr { border: none !important; border-top: 1px solid rgba(var(--od-gold-rgb),0.15) !important; margin: 12px 0 !important; height: 0 !important; background: transparent !important; } /* Modal overlay (backdrop behind dialog) */ .ui-widget-overlay { background: rgba(var(--od-navy-rgb),0.7) !important; background-color: rgba(var(--od-navy-rgb),0.7) !important; opacity: 1 !important; } /* ── Modal root (hidden by default) ────────────────────────────────────── */ .od-veh-modal { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: none !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; pointer-events: none !important; } .od-veh-modal.open { display: block !important; pointer-events: all !important; } /* ── Backdrop ──────────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(var(--od-navy-rgb),0.88) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; cursor: pointer !important; animation: afVehFadeIn 0.22s ease-out !important; } /* ── Panel ─────────────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-modal-panel { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 90% !important; max-width: 640px !important; max-height: calc(100vh - 60px) !important; background: var(--od-mid) !important; background: linear-gradient(165deg, var(--od-navy2) 0%, var(--od-mid) 60%, var(--od-navy) 100%) !important; border: 1px solid rgba(var(--od-gold-rgb),0.32) !important; border-top: 3px solid var(--od-gold) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(var(--od-gold-rgb),0.08) !important; padding: 30px 34px 26px !important; overflow-y: auto !important; animation: afVehSlideUp 0.28s cubic-bezier(0.2, 0.85, 0.4, 1) !important; color: var(--od-cream) !important; } @keyframes afVehFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes afVehSlideUp { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } } /* ── Close X ───────────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(var(--od-gold-rgb),0.45) !important; border-radius: 50% !important; background: transparent !important; cursor: pointer !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; transition: all 0.2s ease !important; } .od-veh-modal .od-veh-modal-close::before { content: '\2715' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-size: 13px !important; line-height: 1 !important; color: var(--od-gold) !important; font-weight: 400 !important; } .od-veh-modal .od-veh-modal-close:hover { border-color: var(--od-gl) !important; box-shadow: 0 0 12px rgba(var(--od-gold-rgb),0.4) !important; } .od-veh-modal .od-veh-modal-close:hover::before { color: var(--od-cream) !important; } /* ── Header ────────────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-modal-head { margin-bottom: 18px !important; padding-right: 40px !important; } .od-veh-modal .od-veh-modal-eyebrow { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--od-gold) !important; margin-bottom: 8px !important; } .od-veh-modal .od-veh-modal-headline { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--od-cream) !important; margin: 0 0 8px !important; line-height: 1.15 !important; } .od-veh-modal .od-veh-modal-sub { font-size: 14px !important; font-weight: 400 !important; color: rgba(var(--od-cream-rgb),0.72) !important; margin: 0 !important; line-height: 1.5 !important; } /* ── Vehicle context strip ─────────────────────────────────────────────── */ .od-veh-modal .od-veh-modal-vehicle { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 16px !important; padding: 12px 16px !important; margin: 0 0 22px !important; background: rgba(var(--od-gold-rgb),0.06) !important; border-left: 3px solid var(--od-gold) !important; border-top: 1px solid rgba(var(--od-gold-rgb),0.12) !important; border-right: 1px solid rgba(var(--od-gold-rgb),0.12) !important; border-bottom: 1px solid rgba(var(--od-gold-rgb),0.12) !important; } .od-veh-modal .od-veh-modal-vehicle-title { font-size: 14px !important; font-weight: 700 !important; color: var(--od-cream) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } .od-veh-modal .od-veh-modal-vehicle-price { font-size: 18px !important; font-weight: 800 !important; color: var(--od-gl) !important; letter-spacing: 0.5px !important; } /* ── Form layout ───────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-bottom: 14px !important; } .od-veh-modal .od-veh-fg { display: flex !important; flex-direction: column !important; gap: 6px !important; } .od-veh-modal .od-veh-fg-full { grid-column: 1 / -1 !important; } /* ── Labels ────────────────────────────────────────────────────────────── */ .od-veh-modal label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: var(--od-gold) !important; line-height: 1 !important; margin: 0 !important; } .od-veh-modal .od-veh-req { color: var(--od-gl) !important; margin-left: 3px !important; } /* ── Inputs / selects / textarea ───────────────────────────────────────── */ .od-veh-modal input[type="text"], .od-veh-modal input[type="email"], .od-veh-modal input[type="tel"], .od-veh-modal input[type="number"], .od-veh-modal select, .od-veh-modal textarea { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; padding: 11px 13px !important; background: var(--od-navy) !important; border: 1px solid rgba(var(--od-gold-rgb),0.28) !important; border-radius: 0 !important; color: var(--od-cream) !important; outline: none !important; width: 100% !important; transition: border-color 0.2s, box-shadow 0.2s !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; box-shadow: none !important; height: auto !important; line-height: 1.4 !important; } .od-veh-modal textarea { resize: vertical !important; min-height: 70px !important; } .od-veh-modal input:focus, .od-veh-modal select:focus, .od-veh-modal textarea:focus { border-color: var(--od-gold) !important; box-shadow: 0 0 0 2px rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal input::placeholder, .od-veh-modal textarea::placeholder { color: rgba(var(--od-cream-rgb),0.32) !important; } /* Select chevron */ .od-veh-modal select { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important; padding-right: 36px !important; cursor: pointer !important; } .od-veh-modal select option { background: var(--od-navy) !important; color: var(--od-cream) !important; } /* ── Pre-Approval block ────────────────────────────────────────────────── */ .od-veh-modal .od-veh-preapp { margin: 8px 0 16px !important; padding: 18px 18px 14px !important; background: rgba(var(--od-gold-rgb),0.04) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; border-left: 3px solid var(--od-gold) !important; } .od-veh-modal .od-veh-section-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--od-gl) !important; margin: 0 0 14px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(var(--od-gold-rgb),0.18) !important; } /* Trade-in toggle */ .od-veh-modal .od-veh-toggle-label { margin-bottom: 4px !important; } .od-veh-modal .od-veh-toggle-row { display: flex !important; gap: 18px !important; padding-top: 4px !important; } .od-veh-modal .od-veh-toggle-row label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.5px !important; text-transform: none !important; color: var(--od-cream) !important; cursor: pointer !important; } .od-veh-modal .od-veh-toggle-row input[type="radio"] { width: 16px !important; height: 16px !important; accent-color: var(--od-gold) !important; cursor: pointer !important; } .od-veh-modal .od-veh-trade-grid { margin-top: 4px !important; grid-template-columns: 1fr 1fr 1fr !important; } /* ── Honeypot (visually hidden) ────────────────────────────────────────── */ .od-veh-modal .od-veh-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── TCPA consent ──────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-tcpa { margin: 16px 0 18px !important; padding: 12px 14px !important; background: rgba(var(--od-navy-rgb),0.6) !important; border: 1px solid rgba(var(--od-gold-rgb),0.14) !important; } .od-veh-modal .od-veh-tcpa label { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.2px !important; text-transform: none !important; color: rgba(var(--od-cream-rgb),0.72) !important; line-height: 1.5 !important; cursor: pointer !important; } .od-veh-modal .od-veh-tcpa input[type="checkbox"] { width: 14px !important; height: 14px !important; margin-top: 2px !important; accent-color: var(--od-gold) !important; flex-shrink: 0 !important; cursor: pointer !important; } /* ── Submit button ─────────────────────────────────────────────────────── */ .od-veh-modal .od-veh-submit { display: block !important; width: 100% !important; position: relative !important; padding: 15px 24px !important; background: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gold) 50%, var(--od-gd) 100%) !important; border: 1px solid var(--od-gl) !important; border-radius: 0 !important; color: var(--od-navy) !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.25s ease !important; box-shadow: 0 4px 20px rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal .od-veh-submit:hover:not(:disabled) { box-shadow: 0 6px 28px rgba(var(--od-gold-rgb),0.45), 0 0 24px rgba(var(--od-gold-rgb),0.25) !important; transform: translateY(-1px) !important; } .od-veh-modal .od-veh-submit:disabled { opacity: 0.7 !important; cursor: progress !important; } .od-veh-modal .od-veh-submit-spinner { display: none !important; position: absolute !important; top: 50% !important; right: 24px !important; width: 14px !important; height: 14px !important; margin-top: -7px !important; border: 2px solid rgba(var(--od-navy-rgb),0.3) !important; border-top-color: var(--od-navy) !important; border-radius: 50% !important; animation: afVehSpin 0.8s linear infinite !important; } .od-veh-modal .od-veh-submit.loading .od-veh-submit-spinner { display: block !important; } @keyframes afVehSpin { to { transform: rotate(360deg); } } /* ── Form status message ───────────────────────────────────────────────── */ .od-veh-modal .od-veh-form-msg { margin-top: 12px !important; padding: 0 !important; font-size: 13px !important; text-align: center !important; color: rgba(var(--od-cream-rgb),0.7) !important; min-height: 18px !important; letter-spacing: 0.3px !important; } .od-veh-modal .od-veh-form-msg.success { color: var(--od-gl) !important; padding: 12px !important; background: rgba(var(--od-gold-rgb),0.08) !important; border: 1px solid rgba(var(--od-gold-rgb),0.3) !important; } .od-veh-modal .od-veh-form-msg.error { color: #ff8a8a !important; padding: 12px !important; background: rgba(255, 138, 138, 0.06) !important; border: 1px solid rgba(255, 138, 138, 0.3) !important; } /* ── Scrollbar inside panel ────────────────────────────────────────────── */ .od-veh-modal .od-veh-modal-panel::-webkit-scrollbar { width: 8px !important; } .od-veh-modal .od-veh-modal-panel::-webkit-scrollbar-track { background: rgba(var(--od-navy-rgb),0.4) !important; } .od-veh-modal .od-veh-modal-panel::-webkit-scrollbar-thumb { background: rgba(var(--od-gold-rgb),0.3) !important; border-radius: 0 !important; } .od-veh-modal .od-veh-modal-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--od-gold-rgb),0.5) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END MODULE 12 · DESKTOP PASS 1 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * ODYSSEY — Module 12 FORM HIJACK · DESKTOP PASS 2 * ═══════════════════════════════════════════════════════════════════════════ * Append to legacy-desktop-css.css AFTER Module 12 Pass 1. * Adds: autofill color override (Bug 1), success card styling (Bug 2). * ═══════════════════════════════════════════════════════════════════════ */ /* ── Bug 1: Browser autofill colors ────────────────────────────────────── */ /* Chrome / Edge / Safari paint a yellow/blue background and dark text on autofilled inputs that ignores our normal styles. The inset box-shadow trick paints over their background; -webkit-text-fill-color overrides the dark text. The transition delay is a known hack to push the browser's color animation past any reasonable display time. */ .od-veh-modal input:-webkit-autofill, .od-veh-modal input:-webkit-autofill:hover, .od-veh-modal input:-webkit-autofill:focus, .od-veh-modal input:-webkit-autofill:active, .od-veh-modal select:-webkit-autofill, .od-veh-modal textarea:-webkit-autofill { -webkit-text-fill-color: var(--od-cream) !important; -webkit-box-shadow: 0 0 0 1000px var(--od-navy) inset !important; caret-color: var(--od-cream) !important; transition: background-color 5000s ease-in-out 0s !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; } /* Focused autofill — keep the gold border ring */ .od-veh-modal input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--od-navy) inset, 0 0 0 2px rgba(var(--od-gold-rgb),0.18) !important; border-color: var(--od-gold) !important; } /* ── Bug 2: Success card ───────────────────────────────────────────────── */ .od-veh-modal .od-veh-success { text-align: center !important; padding: 22px 4px 8px !important; animation: afVehSuccessIn 0.32s cubic-bezier(0.2, 0.85, 0.4, 1) !important; } @keyframes afVehSuccessIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* Animated checkmark inside a circle */ .od-veh-modal .od-veh-success-check { width: 84px !important; height: 84px !important; margin: 0 auto 18px !important; color: var(--od-gl) !important; display: block !important; } .od-veh-modal .od-veh-success-check svg { width: 100% !important; height: 100% !important; display: block !important; } .od-veh-modal .od-veh-success-check svg circle { stroke-dasharray: 176 !important; stroke-dashoffset: 176 !important; animation: afVehDrawCircle 0.5s cubic-bezier(0.2, 0.85, 0.4, 1) 0.1s forwards !important; } .od-veh-modal .od-veh-success-check svg path { stroke-dasharray: 50 !important; stroke-dashoffset: 50 !important; animation: afVehDrawCheck 0.35s cubic-bezier(0.2, 0.85, 0.4, 1) 0.55s forwards !important; } @keyframes afVehDrawCircle { to { stroke-dashoffset: 0; } } @keyframes afVehDrawCheck { to { stroke-dashoffset: 0; } } .od-veh-modal .od-veh-success-eyebrow { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--od-gold) !important; margin-bottom: 10px !important; } .od-veh-modal .od-veh-success-headline { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--od-cream) !important; margin: 0 0 12px !important; line-height: 1.2 !important; } .od-veh-modal .od-veh-success-thanks { font-size: 15px !important; color: rgba(var(--od-cream-rgb),0.82) !important; margin: 0 0 14px !important; } .od-veh-modal .od-veh-success-vehicle { display: inline-block !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--od-gl) !important; background: rgba(var(--od-gold-rgb),0.08) !important; border: 1px solid rgba(var(--od-gold-rgb),0.25) !important; border-left: 3px solid var(--od-gold) !important; padding: 8px 14px !important; margin: 0 0 18px !important; } .od-veh-modal .od-veh-success-copy { font-size: 14px !important; color: rgba(var(--od-cream-rgb),0.78) !important; line-height: 1.6 !important; margin: 0 0 16px !important; max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; } .od-veh-modal .od-veh-success-email { font-size: 12px !important; color: rgba(var(--od-cream-rgb),0.62) !important; margin: 0 0 22px !important; line-height: 1.5 !important; } .od-veh-modal .od-veh-success-email strong { color: var(--od-gl) !important; font-weight: 600 !important; } .od-veh-modal .od-veh-success-close { display: inline-block !important; padding: 13px 36px !important; background: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gold) 50%, var(--od-gd) 100%) !important; border: 1px solid var(--od-gl) !important; border-radius: 0 !important; color: var(--od-navy) !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.25s ease !important; box-shadow: 0 4px 20px rgba(var(--od-gold-rgb),0.18) !important; margin-bottom: 18px !important; } .od-veh-modal .od-veh-success-close:hover { box-shadow: 0 6px 28px rgba(var(--od-gold-rgb),0.45), 0 0 24px rgba(var(--od-gold-rgb),0.25) !important; transform: translateY(-1px) !important; } .od-veh-modal .od-veh-success-foot { font-size: 12px !important; color: rgba(var(--od-cream-rgb),0.5) !important; margin: 0 !important; letter-spacing: 0.3px !important; } .od-veh-modal .od-veh-success-foot a { color: var(--od-gl) !important; text-decoration: none !important; font-weight: 700 !important; } .od-veh-modal .od-veh-success-foot a:hover { text-decoration: underline !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END Module 12 · DESKTOP PASS 2 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * ODYSSEY — Module 12 FORM HIJACK · DESKTOP PASS 3 * ═══════════════════════════════════════════════════════════════════════ */ /* ── Stage 1 teaser block (above form, ePrice variant only) ────────── */ .od-veh-modal .od-veh-teaser { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; margin: 0 0 18px !important; background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.10), rgba(var(--od-gold-rgb),0.04)) !important; border: 1px solid rgba(var(--od-gold-rgb),0.30) !important; border-left: 3px solid var(--od-gold) !important; } .od-veh-modal .od-veh-teaser-icon { font-size: 22px !important; line-height: 1 !important; flex-shrink: 0 !important; } .od-veh-modal .od-veh-teaser-text { font-size: 13px !important; color: rgba(var(--od-cream-rgb),0.88) !important; line-height: 1.5 !important; letter-spacing: 0.2px !important; } .od-veh-modal .od-veh-teaser-text strong { color: var(--od-gl) !important; font-weight: 700 !important; } /* ── Stage 2 reveal container ─────────────────────────────────────── */ .od-veh-modal .od-veh-reveal { padding: 8px 4px 4px !important; animation: afVehRevealIn 0.42s cubic-bezier(0.2, 0.85, 0.4, 1) !important; } @keyframes afVehRevealIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .od-veh-modal .od-veh-reveal-eyebrow { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--od-gl) !important; margin-bottom: 10px !important; text-align: center !important; } .od-veh-modal .od-veh-reveal-vehicle { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--od-cream) !important; margin: 0 0 16px !important; line-height: 1.25 !important; text-align: center !important; } /* "Submitted as" summary line + edit-email row */ .od-veh-modal .od-veh-reveal-submitted { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 10px 14px !important; margin: 0 0 18px !important; background: rgba(var(--od-navy-rgb),0.55) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; font-size: 12px !important; } .od-veh-modal .od-veh-reveal-submitted-label { font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--od-gold) !important; font-size: 10px !important; } .od-veh-modal .od-veh-reveal-submitted-name { color: var(--od-cream) !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } .od-veh-modal .od-veh-edit-email-btn { background: transparent !important; border: none !important; border-bottom: 1px dashed rgba(var(--od-gl-rgb),0.45) !important; padding: 0 0 1px !important; font-family: inherit !important; font-size: 12px !important; color: var(--od-gl) !important; cursor: pointer !important; letter-spacing: 0.2px !important; transition: border-color 0.2s, color 0.2s !important; } .od-veh-modal .od-veh-edit-email-btn:hover { color: var(--od-cream) !important; border-bottom-color: var(--od-gl) !important; } .od-veh-modal .od-veh-edit-pencil { margin-left: 4px !important; font-size: 11px !important; opacity: 0.7 !important; } .od-veh-modal .od-veh-edit-email-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; margin-top: 4px !important; } .od-veh-modal .od-veh-edit-email-row input[type="email"] { flex: 1 1 220px !important; font-size: 13px !important; padding: 8px 10px !important; background: var(--od-navy) !important; border: 1px solid rgba(var(--od-gold-rgb),0.35) !important; color: var(--od-cream) !important; font-family: inherit !important; } .od-veh-modal .od-veh-edit-email-save, .od-veh-modal .od-veh-edit-email-cancel { padding: 7px 14px !important; font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; cursor: pointer !important; border: 1px solid rgba(var(--od-gold-rgb),0.45) !important; background: transparent !important; color: var(--od-gl) !important; border-radius: 0 !important; } .od-veh-modal .od-veh-edit-email-save { background: rgba(var(--od-gold-rgb),0.15) !important; } .od-veh-modal .od-veh-edit-email-save:hover { background: rgba(var(--od-gold-rgb),0.30) !important; color: var(--od-cream) !important; } /* ── Price reveal block ──────────────────────────────────────────── */ .od-veh-modal .od-veh-reveal-prices { margin: 0 0 22px !important; padding: 18px 20px 14px !important; background: linear-gradient(165deg, rgba(var(--od-navy2-rgb),0.85), rgba(var(--od-navy-rgb),0.95)) !important; border: 1px solid rgba(var(--od-gold-rgb),0.40) !important; border-top: 3px solid var(--od-gold) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 32px rgba(var(--od-gold-rgb),0.08) inset !important; } .od-veh-modal .od-veh-reveal-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; padding: 6px 0 !important; } .od-veh-modal .od-veh-reveal-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: rgba(var(--od-cream-rgb),0.78) !important; } .od-veh-modal .od-veh-reveal-val { font-size: 16px !important; font-weight: 700 !important; color: var(--od-cream) !important; font-variant-numeric: tabular-nums !important; } .od-veh-modal .od-veh-reveal-discount .od-veh-reveal-val { color: var(--od-gl) !important; } .od-veh-modal .od-veh-reveal-divider { height: 1px !important; margin: 8px 0 !important; background: linear-gradient(90deg, transparent 0%, rgba(var(--od-gold-rgb),0.5) 30%, rgba(var(--od-gold-rgb),0.5) 70%, transparent 100%) !important; } .od-veh-modal .od-veh-reveal-final .od-veh-reveal-label { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 2px !important; color: var(--od-gl) !important; } .od-veh-modal .od-veh-reveal-final .od-veh-reveal-val { font-size: 26px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; color: var(--od-cream) !important; text-shadow: 0 0 20px rgba(var(--od-gl-rgb),0.3) !important; } .od-veh-modal .od-veh-reveal-fallback { padding: 16px !important; text-align: center !important; font-size: 13px !important; color: rgba(var(--od-cream-rgb),0.8) !important; background: rgba(var(--od-gold-rgb),0.06) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; margin: 0 0 22px !important; } /* ── Reveal-stage CTA ────────────────────────────────────────────── */ .od-veh-modal .od-veh-reveal-cta { margin: 0 !important; } /* ── Next steps section ──────────────────────────────────────────── */ .od-veh-modal .od-veh-next-steps { margin-top: 22px !important; padding-top: 18px !important; border-top: 1px solid rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal .od-veh-next-steps-header { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--od-gold) !important; text-align: center !important; margin-bottom: 12px !important; } .od-veh-modal .od-veh-next-steps-buttons { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; } .od-veh-modal .od-veh-next-step-btn { flex: 1 1 calc(50% - 5px) !important; min-width: 200px !important; padding: 11px 14px !important; background: rgba(var(--od-navy-rgb),0.65) !important; border: 1px solid rgba(var(--od-gold-rgb),0.35) !important; color: var(--od-gl) !important; text-decoration: none !important; text-align: center !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.22s ease !important; } .od-veh-modal .od-veh-next-step-btn:hover { background: rgba(var(--od-gold-rgb),0.12) !important; border-color: var(--od-gold) !important; color: var(--od-cream) !important; transform: translateY(-1px) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END MODULE 12 · DESKTOP PASS 3 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * ODYSSEY — Module 12 FORM HIJACK · DESKTOP PASS 4 * Adds: "You May Qualify For" incentive selector, sub-line price layout, * reveal-stage disclaimer block. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Stacked-price additional rows (subtotal + claimed line) ──────── */ .od-veh-modal .od-veh-reveal-subtotal .od-veh-reveal-label, .od-veh-modal .od-veh-reveal-subtotal .od-veh-reveal-val { font-size: 12px !important; font-weight: 600 !important; color: rgba(var(--od-cream-rgb),0.65) !important; letter-spacing: 1px !important; } .od-veh-modal .od-veh-reveal-claimed .od-veh-reveal-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; color: rgba(var(--od-cream-rgb),0.85) !important; text-transform: uppercase !important; } .od-veh-modal .od-veh-reveal-claimed .od-veh-reveal-val { font-size: 14px !important; font-weight: 700 !important; color: var(--od-gl) !important; font-variant-numeric: tabular-nums !important; } /* ── "You May Qualify For" container ──────────────────────────────── */ .od-veh-modal .od-veh-incentives { margin: 0 0 22px !important; padding: 22px 24px !important; background: linear-gradient(180deg, rgba(var(--od-mid-rgb),0.55), rgba(var(--od-navy-rgb),0.75)) !important; border: 1px solid rgba(var(--od-gold-rgb),0.22) !important; border-left: 3px solid rgba(var(--od-gold-rgb),0.55) !important; animation: afVehIncentivesIn 0.4s cubic-bezier(0.2, 0.85, 0.4, 1) !important; } @keyframes afVehIncentivesIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .od-veh-modal .od-veh-incentives-header { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--od-gl) !important; margin: 0 0 4px !important; } .od-veh-modal .od-veh-incentives-sub { font-size: 12px !important; color: rgba(var(--od-cream-rgb),0.6) !important; margin: 0 0 18px !important; line-height: 1.45 !important; } .od-veh-modal .od-veh-incentives-list { display: flex !important; flex-direction: column !important; gap: 14px !important; } /* Group wrapper (Owner Cash, Affinity Programs) */ .od-veh-modal .od-veh-incentive-group { display: flex !important; flex-direction: column !important; gap: 6px !important; } .od-veh-modal .od-veh-incentive-group-label { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(var(--od-gl-rgb),0.85) !important; margin: 4px 0 6px !important; padding-bottom: 5px !important; border-bottom: 1px solid rgba(var(--od-gold-rgb),0.15) !important; display: flex !important; align-items: baseline !important; gap: 8px !important; } .od-veh-modal .od-veh-incentive-group-hint { font-size: 9.5px !important; font-weight: 500 !important; letter-spacing: 0.7px !important; text-transform: none !important; color: rgba(var(--od-cream-rgb),0.5) !important; } /* Individual incentive row */ .od-veh-modal .od-veh-incentive-row { display: flex !important; align-items: center !important; gap: 14px !important; padding: 11px 14px !important; background: rgba(var(--od-navy-rgb),0.5) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; cursor: pointer !important; transition: background 0.18s, border-color 0.18s !important; margin: 0 !important; } .od-veh-modal .od-veh-incentive-row:hover { background: rgba(var(--od-navy2-rgb),0.55) !important; border-color: rgba(var(--od-gold-rgb),0.4) !important; } .od-veh-modal .od-veh-incentive-row input[type="checkbox"], .od-veh-modal .od-veh-incentive-row input[type="radio"] { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--od-gold) !important; cursor: pointer !important; } .od-veh-modal .od-veh-incentive-row:has(input:checked) { background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.18), rgba(var(--od-gold-rgb),0.06)) !important; border-color: rgba(var(--od-gl-rgb),0.55) !important; } .od-veh-modal .od-veh-incentive-info { flex: 1 1 auto !important; min-width: 0 !important; } .od-veh-modal .od-veh-incentive-label { font-size: 13.5px !important; font-weight: 700 !important; color: var(--od-cream) !important; letter-spacing: 0.3px !important; margin-bottom: 2px !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .od-veh-modal .od-veh-incentive-sublabel { font-size: 11.5px !important; color: rgba(var(--od-cream-rgb),0.62) !important; line-height: 1.4 !important; } .od-veh-modal .od-veh-incentive-amount { flex-shrink: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: var(--od-gl) !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0.3px !important; white-space: nowrap !important; } .od-veh-modal .od-veh-incentive-amount-zero { color: rgba(var(--od-cream-rgb),0.35) !important; font-weight: 600 !important; font-size: 14px !important; } /* EV credit row — auto-applied, non-toggleable */ .od-veh-modal .od-veh-incentive-ev { background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.22), rgba(var(--od-gold-rgb),0.08)) !important; border-color: rgba(var(--od-gl-rgb),0.6) !important; cursor: default !important; } .od-veh-modal .od-veh-incentive-ev:hover { background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.22), rgba(var(--od-gold-rgb),0.08)) !important; border-color: rgba(var(--od-gl-rgb),0.6) !important; } .od-veh-modal .od-veh-incentive-badge { display: inline-block !important; padding: 2px 8px !important; background: rgba(var(--od-gl-rgb),0.85) !important; color: var(--od-mid) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; border-radius: 2px !important; vertical-align: middle !important; } /* ── Reveal-stage disclaimer block ────────────────────────────────── */ .od-veh-modal .od-veh-reveal-disclaimer { margin: -8px 0 18px !important; padding: 12px 14px !important; font-size: 10.5px !important; line-height: 1.55 !important; color: rgba(var(--od-cream-rgb),0.55) !important; background: rgba(var(--od-navy-rgb),0.4) !important; border-left: 2px solid rgba(var(--od-gold-rgb),0.25) !important; } .od-veh-modal .od-veh-reveal-disclaimer strong { color: rgba(var(--od-gl-rgb),0.85) !important; font-weight: 700 !important; letter-spacing: 0.5px !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END MODULE 12 · DESKTOP PASS 4 * ═══════════════════════════════════════════════════════════════════════ */ /* MODULE 12 · DESKTOP PASS 5 — Bulletproof teaser hide (only show on ePrice) */ .od-veh-teaser { display: none !important; } .od-veh-teaser.od-veh-teaser--show { display: flex !important; } .od-veh-teaser[hidden] { display: none !important; } /* ============================================================================= COMPARE PAGES — DESKTOP CSS Append to legacy-desktop-css.css All selectors scoped to .od-compare wrapper. Reuses sitewide :root vars (--gold, --gl, --gd, --navy, --mid, --ff, --text, --muted, --glow). ============================================================================= */ /* ══════════ [DESKTOP] SRP TRACK-PRICE / SAVE BUTTON TREATMENT (bell icon re-allow) ══════════ */ /* ============================================================ ODYSSEY — Hide DDC MyCars buttons (HEADER + VDP only) APPEND THIS BLOCK to BOTH desktop CSS and mobile CSS files. Replaces the previous hide-CSS file from phase 1. ============================================================ On SRP cards, DDC's three native MyCars buttons (Compare, Track Price, Save) are NO LONGER hidden — they get hijacked by the alerts JS into Similar In Stock / Price Drop / Sales Event triggers, using DDC's existing layout and icons. ============================================================ */ /* ---- HEADER: MyCars search/login/bell zone ---- */ body:has(.od-page) .header-mycars-search-container, body:has(.od-page) .ws-mycars-nav, body:has(.od-page) .ws-mycars-nav-wrapper, body:has(.od-page) .mycars-integration-navbar, body:has(.od-page) .ddc-content.ws-mycars-nav, body:has(.od-page) [class*="ddc-icon-mycars" i] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; opacity: 0 !important; } /* Re-allow the bell icon on SRP card track-price buttons — the [class*=ddc-icon-mycars] hide above would otherwise blank it out. Scope re-allow to inside the SRP card footer only. */ body:has(.od-page) .vehicle-card-footer [class*="ddc-icon-mycars" i] { display: inline-block !important; visibility: visible !important; width: auto !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; opacity: 1 !important; } /* ---- VDP: MyCars block (save + compare + alert bell) ---- */ /* VDP gets full-size custom alert CTAs in its own module, so DDC's MyCars block stays hidden there. */ body:has(.od-page) .ws-mycars-vdp, body:has(.od-page) .ddc-content.ws-mycars-vdp { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; opacity: 0 !important; } /* ══════════ [DESKTOP] EPRICE HIJACKED-KEY STYLING (tail consolidation) ══════════ */ /* ════════ ODYSSEY — "Unlock More Savings" / ePrice Button Sitewide Fix ═══════════ */ a.btn.btn-primary[data-od-hijacked-key="eprice"], button.btn.btn-primary[data-od-hijacked-key="eprice"], a.btn.btn-block.btn-primary[href*="unlock-more-savings"], button.btn.btn-block.btn-primary[href*="unlock-more-savings"] { background: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gold) 50%, var(--od-gd) 100%) !important; background-image: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gold) 50%, var(--od-gd) 100%) !important; background-color: var(--od-gold) !important; color: var(--od-navy) !important; font-family: 'Roboto', Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: none !important; border: 1px solid var(--od-gold) !important; border-radius: 2px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; transition: all 0.25s ease !important; } a.btn.btn-primary[data-od-hijacked-key="eprice"]:hover, button.btn.btn-primary[data-od-hijacked-key="eprice"]:hover, a.btn.btn-block.btn-primary[href*="unlock-more-savings"]:hover, button.btn.btn-block.btn-primary[href*="unlock-more-savings"]:hover, a.btn.btn-primary[data-od-hijacked-key="eprice"]:focus, button.btn.btn-primary[data-od-hijacked-key="eprice"]:focus, a.btn.btn-block.btn-primary[href*="unlock-more-savings"]:focus, button.btn.btn-block.btn-primary[href*="unlock-more-savings"]:focus { background: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gl) 50%, var(--od-gold) 100%) !important; background-image: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gl) 50%, var(--od-gold) 100%) !important; background-color: var(--od-gl) !important; color: var(--od-navy) !important; border-color: var(--od-gl) !important; box-shadow: 0 4px 12px rgba(var(--od-gold-rgb),0.3) !important; transform: translateY(-1px) !important; text-decoration: none !important; } /* ── 1. Eprice CTA text inside photo modal: navy, not white ────────── */ #ws-vehicle-gallery-modal a.btn.btn-primary[href*="unlock-more-savings"], #ws-vehicle-gallery-modal a.btn.btn-primary[href*="unlock-more-savings"] *, #ws-vehicle-gallery-modal a.btn.btn-block.btn-primary[href*="unlock-more-savings"], #ws-vehicle-gallery-modal a.btn.btn-block.btn-primary[href*="unlock-more-savings"] *, #ws-vehicle-gallery-modal button.btn.btn-primary[data-od-hijacked-key="eprice"], #ws-vehicle-gallery-modal button.btn.btn-primary[data-od-hijacked-key="eprice"] *, #ws-vehicle-gallery-modal a.btn.btn-primary[data-od-hijacked-key="eprice"], #ws-vehicle-gallery-modal a.btn.btn-primary[data-od-hijacked-key="eprice"] * { color: var(--od-navy) !important; text-shadow: none !important; } /* ── 2. Hide native slider/carousel arrow decorations ──────────────── */ #ws-vehicle-gallery-modal .slick-prev, #ws-vehicle-gallery-modal .slick-next, #ws-vehicle-gallery-modal .swiper-button-prev, #ws-vehicle-gallery-modal .swiper-button-next, #ws-vehicle-gallery-modal .carousel-control-prev, #ws-vehicle-gallery-modal .carousel-control-next, .slick-slider.slick-initialized > .slick-prev, .slick-slider.slick-initialized > .slick-next { display: none !important; } /* ══════════ MOBILE LAYER (AF mobile slot → width-gated) ══════════ */ @media (max-width:980px){ /* ────────── [MOBILE] MOBILE DDC INVENTORY WIDGET OVERRIDES ────────── */ /* DDC INVENTORY WIDGET OVERRIDES */ /* 1. BODY + PAGE BACKGROUND */ body:has(.od-page){background:var(--od-navy)!important;background-color:var(--od-navy)!important} /* 2. OUTER DDC WRAPPERS — kill borders, force navy bg */ body:has(.od-page) .ddc-document,body:has(.od-page) .ddc-wrapper,body:has(.od-page) .page-section,body:has(.od-page) .container-max-md,body:has(.od-page) .container-max-xl,body:has(.od-page) .container-max-lg,body:has(.od-page) .srp-wrapper-listing,body:has(.od-page) .srp-wrapper-results,body:has(.od-page) .ws-inv-listing,body:has(.od-page) .ws-inv-text-search,body:has(.od-page) .ws-inv-filters,body:has(.od-page) .ws-inv-data,body:has(.od-page) .ws-inv-paging,body:has(.od-page) .ws-inv-bus2,body:has(.od-page) .ddc-content,body:has(.od-page) .spacing-reset,body:has(.od-page) #inventory-results1-app-root,body:has(.od-page) #inventory-search1-app-root,body:has(.od-page) #inventory-filters1-app-root,body:has(.od-page) #inventory-paging1-app-root,body:has(.od-page) [role="region"][aria-label*="Matching" i]{background:var(--od-mid)!important;background-color:var(--od-mid)!important;background-image:none!important;border:0 none transparent!important;border-width:0!important;box-shadow:none!important;font-family:'Roboto','Helvetica Neue',Arial,sans-serif!important;color:var(--od-cream)!important} /* 3. PAGE-TITLE BLUE BAND — kill border + force navy */ body:has(.od-page) .bg-page-title,body:has(.od-page) .border-page-title,body:has(.od-page) .bg-page-title.page-section,body:has(.od-page) .bg-page-title.border-bottom,body:has(.od-page) .bg-page-title.border-bottom.page-section,body:has(.od-page) .border-bottom.border-page-title,body:has(.od-page) .border-bottom.border-page-title.bg-page-title,body:has(.od-page) [data-name*="inventory-search-results-page-filters-sort"]{background:var(--od-navy)!important;background-color:var(--od-navy)!important;background-image:none!important;border:0 none transparent!important;border-bottom:0 none transparent!important;border-bottom-width:0!important;box-shadow:none!important} /* 4. BREADCRUMBS — transparent, muted gold links */ body:has(.od-page) .ws-crumbs,body:has(.od-page) [data-widget-name*="crumbs"],body:has(.od-page) [class*="breadcrumb"],body:has(.od-page) nav[aria-label*="breadcrumb" i]{background:transparent!important;border:none!important;box-shadow:none!important} body:has(.od-page) .ws-crumbs a,body:has(.od-page) [class*="breadcrumb"] a,body:has(.od-page) nav[aria-label*="breadcrumb" i] a{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;text-decoration:none!important} body:has(.od-page) .ws-crumbs a:hover,body:has(.od-page) [class*="breadcrumb"] a:hover{color:var(--od-gl)!important} /* 5. SITE HEADER NAV RESET — don't break global nav */ body:has(.od-page) .page-header .header-mycars-search-container,body:has(.od-page) .sticky-header-nav .header-mycars-search-container,body:has(.od-page) .header-navigation .header-mycars-search-container,body:has(.od-page) .true-minimal .header-mycars-search-container{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important;margin:0!important;padding:revert!important;position:static!important} body:has(.od-page) .page-header .header-mycars-search-container::before,body:has(.od-page) .page-header .header-mycars-search-container::after{content:none!important;display:none!important} /* 6. SEARCH BAR — box on .position-relative wrapper */ body:has(.od-page) #inventory-search1-app-root .position-relative,body:has(.od-page) .ws-inv-text-search .position-relative,body:has(.od-page) .free-text-search-form .form-control.d-flex{background:var(--od-mid)!important;background-color:var(--od-mid)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.5)!important;border-radius:3px!important;box-shadow:none!important;overflow:hidden!important} body:has(.od-page) form.free-text-search-form,body:has(.od-page) form.free-text-search-form.form-control,body:has(.od-page) form.free-text-search-form.absolute-top,body:has(.od-page) form.free-text-search-form.form-control.absolute-top,body:has(.od-page) .free-text-search-form .d-flex.w-100,body:has(.od-page) .free-text-search-form>.d-flex.w-100,body:has(.od-page) .free-text-search-form .d-flex,body:has(.od-page) .free-text-search-form .form-control{background:transparent!important;background-color:transparent!important;background-image:none!important;border:0 none transparent!important;border-width:0!important;box-shadow:none!important;padding:0!important} body:has(.od-page) input.free-text-search,body:has(.od-page) input#free-text-search-input,body:has(.od-page) input.free-text-search.form-control,body:has(.od-page) input.free-text-search.form-control-transparent,body:has(.od-page) input.free-text-search.form-control-transparent.input-lg{background:transparent!important;background-color:transparent!important;background-image:none!important;border:0 none transparent!important;box-shadow:none!important;-webkit-box-shadow:none!important;color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important;caret-color:var(--od-gl)!important} body:has(.od-page) input.free-text-search::placeholder,body:has(.od-page) input#free-text-search-input::placeholder{color:rgba(var(--od-gold-rgb),.5)!important;-webkit-text-fill-color:rgba(var(--od-gold-rgb),.5)!important} body:has(.od-page) input.free-text-search:-webkit-autofill,body:has(.od-page) input#free-text-search-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--od-mid) inset!important;-webkit-text-fill-color:var(--od-cream)!important} body:has(.od-page) .free-text-search-controls{background:transparent!important;border:none!important;display:flex!important;align-items:center!important} body:has(.od-page) .free-text-search-controls button,body:has(.od-page) .free-text-search-controls .text-link,body:has(.od-page) button.text-link[type="submit"]{background:transparent!important;color:var(--od-gl)!important;border:none!important;border-left:1px solid rgba(var(--od-gold-rgb),.2)!important;padding:0 22px!important;box-shadow:none!important;opacity:1!important} body:has(.od-page) .free-text-search-controls button:hover{background:rgba(var(--od-gold-rgb),.12)!important;color:#fff!important} body:has(.od-page) #search-icon,body:has(.od-page) [data-testid="search-icon"],body:has(.od-page) .ddc-icon-search-sparkle,body:has(.od-page) .input-decoration-color,body:has(.od-page) .free-text-search-controls i,body:has(.od-page) .free-text-search-controls svg,body:has(.od-page) .free-text-search-form i,body:has(.od-page) .free-text-search-form svg{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;fill:var(--od-gl)!important;background:transparent!important} /* 7. HIGHLIGHT FACET PILLS (top filter chip row) */ body:has(.od-page) .highlight-facet-btn,body:has(.od-page) button.highlight-facet-btn,body:has(.od-page) .chip.chip-additive:not(.rounded-circle){width:auto!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important;font-size:11px!important;font-weight:700!important;padding:7px 14px!important;letter-spacing:.6px!important;line-height:1.3!important;text-transform:uppercase!important;background:rgba(var(--od-mid-rgb),.6)!important;background-color:rgba(var(--od-mid-rgb),.6)!important;color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;height:auto!important;margin:0 6px 0 0!important} body:has(.od-page) .highlight-facet-btn:hover{background:rgba(var(--od-gold-rgb),.12)!important;border-color:var(--od-gold)!important;color:#fff!important} body:has(.od-page) .highlight-facet-btn small,body:has(.od-page) .highlight-facet-btn .ddc-font-size-xsmall,body:has(.od-page) .chip.chip-additive small,body:has(.od-page) small.ddc-font-size-xsmall.px-2{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;background:transparent!important;opacity:.75!important;font-weight:500!important} body:has(.od-page) .highlight-facet-list,body:has(.od-page) .facet-hl-container{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:thin!important;scrollbar-color:rgba(var(--od-gold-rgb),.4) transparent!important;align-items:center!important;padding:4px 0!important;background:transparent!important} body:has(.od-page) .highlight-facet-list::-webkit-scrollbar,body:has(.od-page) .facet-hl-container::-webkit-scrollbar{height:4px!important} body:has(.od-page) .highlight-facet-list::-webkit-scrollbar-thumb,body:has(.od-page) .facet-hl-container::-webkit-scrollbar-thumb{background:rgba(var(--od-gold-rgb),.4)!important;border-radius:2px!important} /* 8. PILL SCROLL ARROWS + BLUR OVERLAY */ body:has(.od-page) .navigator-left,body:has(.od-page) .navigator-right{background:transparent!important;border:none!important;padding:0 4px!important} body:has(.od-page) .chip.chip-additive.rounded-circle,body:has(.od-page) .navigator-left button,body:has(.od-page) .navigator-right button{width:32px!important;height:32px!important;flex:0 0 32px!important;padding:0!important;border-radius:50%!important;background:rgba(var(--od-navy-rgb),.9)!important;background-color:rgba(var(--od-navy-rgb),.9)!important;color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} body:has(.od-page) .navigator-left button i,body:has(.od-page) .navigator-right button i,body:has(.od-page) .chip.rounded-circle i,body:has(.od-page) .chip.rounded-circle svg{color:var(--od-gl)!important;fill:var(--od-gl)!important} body:has(.od-page) .chip.chip-additive.rounded-circle:hover{background:rgba(var(--od-gold-rgb),.15)!important;border-color:var(--od-gold)!important;color:#fff!important} body:has(.od-page) .blur-overlay,body:has(.od-page) div.blur-overlay,body:has(.od-page) [class*="blur-overlay"]{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;background:transparent!important;pointer-events:none!important} /* 9. APPLIED FILTER CHIPS + CLEAR FILTERS */ body:has(.od-page) .chip-subtractive,body:has(.od-page) .chip.chip-subtractive,body:has(.od-page) button.chip-subtractive,body:has(.od-page) .chip.chip-default,body:has(.od-page) .chip-default,body:has(.od-page) button.chip-default,body:has(.od-page) button.facet-filter,body:has(.od-page) .applied-filter,body:has(.od-page) [class*="applied-filter"]{background:rgba(var(--od-mid-rgb),.7)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;padding:6px 12px!important;font-size:11px!important;font-weight:600!important;letter-spacing:.4px!important;text-transform:uppercase!important} body:has(.od-page) .chip-subtractive:hover,body:has(.od-page) .chip-default:hover,body:has(.od-page) button.facet-filter:hover,body:has(.od-page) [class*="applied-filter"]:hover{background:rgba(var(--od-gold-rgb),.12)!important;border-color:var(--od-gold)!important;color:#fff!important} body:has(.od-page) .chip-subtractive i,body:has(.od-page) .chip-subtractive svg,body:has(.od-page) .chip-subtractive .ddc-icon,body:has(.od-page) .chip-default i,body:has(.od-page) .chip-default svg,body:has(.od-page) .chip-default .ddc-icon,body:has(.od-page) button.facet-filter i,body:has(.od-page) button.facet-filter svg{color:var(--od-gl)!important;fill:var(--od-gl)!important} body:has(.od-page) .text-link,body:has(.od-page) a.text-link,body:has(.od-page) button.text-link,body:has(.od-page) .btn-link,body:has(.od-page) .ws-inv-data a,body:has(.od-page) .ws-inv-listing a.text-link{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;background:transparent!important;text-decoration-color:rgba(var(--od-gold-rgb),.5)!important} body:has(.od-page) .text-link:hover,body:has(.od-page) .btn-link:hover,body:has(.od-page) .ws-inv-data a:hover{color:#fff!important;text-decoration-color:#fff!important} /* 10. VEHICLE COUNT ("121 Vehicles Matching") */ body:has(.od-page) .vehicle-count,body:has(.od-page) div.vehicle-count,body:has(.od-page) .vehicle-count *,body:has(.od-page) [class*="vehicle-count"],body:has(.od-page) [class*="result-count"],body:has(.od-page) [class*="matching"]{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-weight:800!important;font-size:13px!important;letter-spacing:.3px!important} /* 11. SORT BY */ body:has(.od-page) select,body:has(.od-page) select option,body:has(.od-page) [aria-label*="Sort" i],body:has(.od-page) [aria-label*="Sort" i] *,body:has(.od-page) [data-testid*="sort" i],body:has(.od-page) [class*="ws-inv-sort"],body:has(.od-page) [class*="ws-inv-sort"] *,body:has(.od-page) label[for*="sort"]{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) select{background-color:rgba(var(--od-navy-rgb),.9)!important;border:1px solid rgba(var(--od-gold-rgb),.3)!important;padding:10px 38px 10px 14px!important;border-radius:3px!important;font-family:'Roboto',sans-serif!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:1px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;utf8,")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important} body:has(.od-page) select option{background:var(--od-navy)!important;text-transform:none!important} body:has(.od-page) input,body:has(.od-page) .free-text-search,body:has(.od-page) textarea{background-image:none!important} /* 12. FILTER SIDEBAR CONTAINER */ body:has(.od-page) .srp-wrapper-facets{background:var(--od-navy)!important;background-color:var(--od-navy)!important;padding:24px 20px!important;border-radius:4px!important;border:none!important} body:has(.od-page) .srp-wrapper-facets *:not([style*="background" i]){background:transparent!important;background-color:transparent!important;border-color:rgba(var(--od-gold-rgb),.15)!important;box-shadow:none!important} /* 13. FACET PANELS (.facet-list-group) */ body:has(.od-page) .facet-list-group,body:has(.od-page) .facet-list-group.panel,body:has(.od-page) .facet-list-group.panel-default{background:transparent!important;border:none!important;box-shadow:none!important;margin-bottom:0!important} body:has(.od-page) .facet-list-group + .facet-list-group{border-top:1px solid rgba(var(--od-gold-rgb),.12)!important} body:has(.od-page) .facet-list-group .panel-heading,body:has(.od-page) .facet-list-group .panel-title,body:has(.od-page) .facet-list-group .panel-title button,body:has(.od-page) .facet-list-group .panel-title .btn-unstyled,body:has(.od-page) .facet-list-group-label,body:has(.od-page) span.facet-list-group-label{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;background:transparent!important;border:none!important;font-size:12px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.8px!important;line-height:1.3!important} body:has(.od-page) .facet-list-group .btn-unstyled{padding:12px 0!important;cursor:pointer!important;width:100%!important} body:has(.od-page) .facet-list-group .btn-unstyled:hover{color:#fff!important} body:has(.od-page) .facet-list-group .ddc-icon,body:has(.od-page) .facet-list-group [data-testid="expand-icon"],body:has(.od-page) .facet-list-group .ddc-icon-expand,body:has(.od-page) .facet-list-group .ddc-icon-collapse,body:has(.od-page) .facet-list-group .icon-style-collapse,body:has(.od-page) .srp-wrapper-facets .ddc-icon,body:has(.od-page) [id*="panel-title"] .ddc-icon{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;fill:var(--od-gl)!important} body:has(.od-page) .srp-wrapper-facets .panel-body,body:has(.od-page) .srp-wrapper-facets .panel-body label,body:has(.od-page) .srp-wrapper-facets .panel-body a,body:has(.od-page) .srp-wrapper-facets .panel-body li,body:has(.od-page) .srp-wrapper-facets .panel-body span,body:has(.od-page) .srp-wrapper-facets .control-label{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;font-size:12px!important;line-height:1.4!important} body:has(.od-page) .srp-wrapper-facets .panel-body a:hover,body:has(.od-page) .srp-wrapper-facets .panel-body label:hover{color:#fff!important} body:has(.od-page) .srp-wrapper-facets small,body:has(.od-page) .srp-wrapper-facets .ddc-font-size-xsmall{color:var(--od-mutedw)!important;opacity:.85!important} body:has(.od-page) .srp-wrapper-facets input[type="checkbox"],body:has(.od-page) .srp-wrapper-facets input[type="radio"]{accent-color:var(--od-gold)!important} /* 14. RANGE SLIDER FORM (Year/Mileage/Price) */ body:has(.od-page) .facet-list-range-slider,body:has(.od-page) .facet-list-range-slider *,body:has(.od-page) .range-form,body:has(.od-page) .range-form *{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important} body:has(.od-page) .srp-wrapper-facets input,body:has(.od-page) .srp-wrapper-facets input.form-control,body:has(.od-page) .range-form input,body:has(.od-page) .range-form input.form-control,body:has(.od-page) input.font-size-ios-zoom-override{background-color:rgba(var(--od-navy-rgb),.7)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.3)!important;color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important;padding:8px 12px!important;border-radius:3px!important;font-size:12px!important} body:has(.od-page) .ui-slider{background:rgba(var(--od-gold-rgb),.2)!important;border:none!important} body:has(.od-page) .ui-slider-range{background:var(--od-gold)!important} body:has(.od-page) .ui-slider-handle{background:var(--od-gl)!important;border:2px solid var(--od-navy)!important} body:has(.od-page) .no-price-btn,body:has(.od-page) .no-price-btn *{color:var(--od-mutedw)!important} /* 14b. MOBILE FILTER/SORT BUTTON */ body:has(.od-page) #show-filters-modal-button,body:has(.od-page) .btn.btn-default.btn-block.ddc-font-size-large{background:var(--od-mid)!important;background-color:var(--od-mid)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;font-weight:800!important} body:has(.od-page) #show-filters-modal-button *,body:has(.od-page) .btn.btn-default.btn-block.ddc-font-size-large *{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) #show-filters-modal-button .badge{background:var(--od-gold)!important;color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important} /* 15. VEHICLE LISTING WRAPPER */ body:has(.od-page) .ws-inv-listing ul,body:has(.od-page) .ws-inv-listing ol{background:transparent!important;list-style:none!important;padding:0!important} /* 16. VEHICLE CARDS (li.vehicle-card-detailed) */ body:has(.od-page) li.vehicle-card,body:has(.od-page) li.vehicle-card-detailed,body:has(.od-page) li.box-border.vehicle-card,body:has(.od-page) .ws-inv-listing li.vehicle-card,body:has(.od-page) .ws-inv-listing li.vehicle-card-detailed{background:var(--od-navy)!important;background-color:var(--od-navy)!important;background-image:none!important;border:1px solid rgba(var(--od-gold-rgb),.25)!important;border-radius:4px!important;color:var(--od-cream)!important;list-style:none!important;overflow:visible!important;transition:box-shadow .3s ease,border-color .3s ease!important} body:has(.od-page) li.vehicle-card:hover,body:has(.od-page) li.vehicle-card-detailed:hover,body:has(.od-page) li.box-border.vehicle-card:hover{border-color:rgba(var(--od-gold-rgb),.5)!important;box-shadow:0 0 24px rgba(var(--od-gold-rgb),.3),0 12px 40px rgba(0,0,0,.5)!important} body:has(.od-page) .vehicle-card-body,body:has(.od-page) .vehicle-card-body.ddc-font-size-small,body:has(.od-page) .vehicle-card-details-container{background:var(--od-navy)!important;background-color:var(--od-navy)!important;border:none!important;box-shadow:none!important} body:has(.od-page) .vehicle-card-details-container{padding-top:4px!important} body:has(.od-page) li.vehicle-card-detailed hr,body:has(.od-page) li.vehicle-card hr,body:has(.od-page) .vehicle-card-body hr{border:none!important;border-top:1px solid rgba(var(--od-gold-rgb),.08)!important;background:transparent!important;margin:0!important;height:0!important} /* 17. PHOTO CONTAINER + SLICK CAROUSEL */ body:has(.od-page) .vehicle-card-media-container,body:has(.od-page) .vehicle-card-media-container-no-carousel{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;position:relative!important;overflow:visible!important} body:has(.od-page) .vehicle-card-media-container img,body:has(.od-page) .vehicle-card-media-container-no-carousel img{border:none!important;box-shadow:none!important;background:transparent!important;max-width:100%!important;height:auto!important} body:has(.od-page) .slick-slider,body:has(.od-page) .slick-slider.carousel,body:has(.od-page) .slick-slider.carousel.mb-3,body:has(.od-page) .slick-slider.carousel.slick-initialized{position:relative!important;overflow:visible!important;background:transparent!important} body:has(.od-page) .slick-slider .slick-list{overflow:hidden!important} /* 18. CAROUSEL ARROW BUTTONS (.btn-carousel) */ body:has(.od-page) button.btn-carousel,body:has(.od-page) button.btn-carousel.d-none,body:has(.od-page) button.btn-carousel.previous,body:has(.od-page) button.btn-carousel.next,body:has(.od-page) button.btn-carousel.previous.d-none,body:has(.od-page) button.btn-carousel.next.d-none,body:has(.od-page) .slick-slider button.btn-carousel{display:flex!important;visibility:visible!important;opacity:.85!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:22px!important;height:22px!important;padding:0!important;margin:0!important;background:transparent!important;background-color:transparent!important;border:none!important;border-radius:0!important;color:rgba(var(--od-white-rgb),.85)!important;z-index:50!important;cursor:pointer!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important} body:has(.od-page) button.btn-carousel.previous{left:4px!important;right:auto!important} body:has(.od-page) button.btn-carousel.next{right:4px!important;left:auto!important} body:has(.od-page) button.btn-carousel:hover{opacity:1!important;background:transparent!important;color:#fff!important;transform:translateY(-50%) scale(1.15)!important} body:has(.od-page) .btn-carousel .ddc-icon,body:has(.od-page) .btn-carousel .ddc-icon-carousel-arrow,body:has(.od-page) .btn-carousel .ddc-icon-carousel-arrow-left,body:has(.od-page) .btn-carousel .ddc-icon-carousel-arrow-right,body:has(.od-page) .btn-carousel i,body:has(.od-page) .btn-carousel i.d-block{color:rgba(var(--od-white-rgb),.85)!important;-webkit-text-fill-color:rgba(var(--od-white-rgb),.85)!important;fill:rgba(var(--od-white-rgb),.85)!important;display:inline-block!important;visibility:visible!important;opacity:1!important;font-size:18px!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important} /* 19. VEHICLE TITLE (h1-h5 with ) */ body:has(.od-page) li.vehicle-card-detailed h1,body:has(.od-page) li.vehicle-card-detailed h2,body:has(.od-page) li.vehicle-card-detailed h3,body:has(.od-page) li.vehicle-card-detailed h4,body:has(.od-page) li.vehicle-card-detailed h5{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-weight:800!important;text-transform:uppercase!important;font-size:12px!important;line-height:1.3!important;letter-spacing:.3px!important;margin-top:14px!important;margin-bottom:14px!important} body:has(.od-page) li.vehicle-card-detailed h1 a,body:has(.od-page) li.vehicle-card-detailed h2 a,body:has(.od-page) li.vehicle-card-detailed h3 a,body:has(.od-page) li.vehicle-card-detailed h4 a,body:has(.od-page) li.vehicle-card-detailed h5 a,body:has(.od-page) li.vehicle-card h1 a,body:has(.od-page) li.vehicle-card h2 a,body:has(.od-page) li.vehicle-card h3 a,body:has(.od-page) li.vehicle-card h4 a,body:has(.od-page) li.vehicle-card h5 a{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;text-decoration:none!important;font-weight:800!important;text-transform:uppercase!important;font-size:12px!important;line-height:1.3!important;letter-spacing:.3px!important;min-height:32px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important} body:has(.od-page) li.vehicle-card-detailed h1 a:hover,body:has(.od-page) li.vehicle-card-detailed h2 a:hover,body:has(.od-page) li.vehicle-card-detailed h3 a:hover,body:has(.od-page) li.vehicle-card-detailed h4 a:hover,body:has(.od-page) li.vehicle-card-detailed h5 a:hover{color:#fff!important} /* 20. PRICING */ body:has(.od-page) .pricing-detail,body:has(.od-page) dl.pricing-detail{background:transparent!important;min-height:44px!important;margin-top:8px!important} body:has(.od-page) .pricing-detail dt,body:has(.od-page) dl.pricing-detail dt,body:has(.od-page) dt.final-price,body:has(.od-page) dt.final-price.internetPrice,body:has(.od-page) dl.pricing-detail dt.final-price,body:has(.od-page) dl.pricing-detail dt.final-price.internetPrice,body:has(.od-page) dl.pricing-detail dt.final-price *,body:has(.od-page) .pricing-detail .price-label,body:has(.od-page) span.price-label,body:has(.od-page) .final-price .price-label{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;font-weight:600!important;background:transparent!important} body:has(.od-page) .pricing-detail dd,body:has(.od-page) dl.pricing-detail dd,body:has(.od-page) dd.final-price,body:has(.od-page) dd.final-price.internetPrice,body:has(.od-page) dl.pricing-detail dd.font-weight-bold,body:has(.od-page) .pricing-detail [data-key*="price-item"]{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;background:transparent!important} body:has(.od-page) .portal-price,body:has(.od-page) span.portal-price,body:has(.od-page) .portal-price *{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;background:transparent!important} /* 21. HIGHLIGHT BADGES (mileage, carfax) */ body:has(.od-page) .vehicle-card-highlight{background:transparent!important;min-height:40px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important} body:has(.od-page) .highlight-badge,body:has(.od-page) .highlight-badge.default,body:has(.od-page) .highlight-badge.badge-xsmall{background:transparent!important;background-color:transparent!important;border:1px solid var(--od-gold)!important;border-radius:3px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:5px 11px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.3px!important;text-transform:none!important} body:has(.od-page) .highlight-badge *{color:#fff!important;background:transparent!important} /* 22. BADGE CALLOUT (CARFAX Fair Value, Certified) */ body:has(.od-page) .badge-callout{background:transparent!important;min-height:72px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;color:var(--od-gl)!important} body:has(.od-page) .badge-callout ul,body:has(.od-page) .badge-callout ul.list-unstyled{min-height:60px!important;margin-bottom:0!important;padding-left:0!important;list-style:none!important} /* 23. VEHICLE CARD FOOTER */ body:has(.od-page) .vehicle-card-footer,body:has(.od-page) .vehicle-card-footer.text-muted,body:has(.od-page) .footer-grid-layout,body:has(.od-page) .footer-grid-layout.columns-4{background:transparent!important;border:none!important;box-shadow:none!important;color:var(--od-gl)!important} body:has(.od-page) .vehicle-card-footer.text-muted *,body:has(.od-page) .vehicle-card-footer *{color:var(--od-gl)!important} /* 24. ACTION BUTTONS (Compare/Track Price/Save/Details) */ body:has(.od-page) .vehicle-card-footer .modern-my-cars-compare-label,body:has(.od-page) .vehicle-card-footer .modern-my-cars-compare-label *,body:has(.od-page) .vehicle-card-footer .unstyled-button,body:has(.od-page) .vehicle-card-footer .unstyled-button *,body:has(.od-page) .vehicle-card-footer .modern-my-cars-details-label,body:has(.od-page) .vehicle-card-footer .modern-my-cars-details-label *,body:has(.od-page) .vehicle-card-footer [data-testid$="-compare"],body:has(.od-page) .vehicle-card-footer [data-testid$="-compare"] *,body:has(.od-page) .vehicle-card-footer [data-testid^="button-"],body:has(.od-page) .vehicle-card-footer [data-testid^="button-"] *,body:has(.od-page) .vehicle-card-footer .label-text,body:has(.od-page) .vehicle-card-footer .ctas-btn__label--desktop,body:has(.od-page) .vehicle-card-footer .ctas-btn__label--mobile,body:has(.od-page) .vehicle-card-footer button,body:has(.od-page) .vehicle-card-footer a{border:0 none transparent!important;outline:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;fill:var(--od-gl)!important;font-size:10px!important;font-weight:600!important;letter-spacing:.3px!important;text-transform:none!important;padding:4px 6px!important;white-space:normal!important} body:has(.od-page) .vehicle-card-footer .modern-my-cars-compare-label:hover,body:has(.od-page) .vehicle-card-footer .unstyled-button:hover,body:has(.od-page) .vehicle-card-footer .modern-my-cars-details-label:hover,body:has(.od-page) .vehicle-card-footer [data-testid$="-compare"]:hover,body:has(.od-page) .vehicle-card-footer [data-testid^="button-"]:hover{color:#fff!important;-webkit-text-fill-color:#fff!important;background:transparent!important} body:has(.od-page) .vehicle-card-footer i.ddc-icon,body:has(.od-page) .vehicle-card-footer svg{color:var(--od-gl)!important;fill:var(--od-gl)!important} /* 25. CONFIRM AVAILABILITY BUTTON */ body:has(.od-page) .vehicle-ctas,body:has(.od-page) .price-btn{background:transparent!important;border:none!important} body:has(.od-page) .vehicle-ctas .btn-primary,body:has(.od-page) .vehicle-ctas a.btn-primary,body:has(.od-page) .vehicle-ctas .dialog.btn-primary,body:has(.od-page) .price-btn .btn-primary,body:has(.od-page) .price-btn a.dialog,body:has(.od-page) a.dialog.btn-primary,body:has(.od-page) a.btn-block.btn-primary,body:has(.od-page) a.dialog.btn-block.btn-sm.btn-primary.btn{color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important;background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 50%,var(--od-gd) 100%)!important;background-color:var(--od-gold)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 50%,var(--od-gd) 100%)!important;border:2px solid var(--od-gl)!important;font-family:'Roboto',sans-serif!important;font-weight:800!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:1.5px!important;padding:12px 24px!important;border-radius:3px!important;display:block!important;text-align:center!important;text-decoration:none!important;width:100%!important;cursor:pointer!important;transition:all .3s ease!important;box-shadow:0 0 14px rgba(var(--od-gold-rgb),.25)!important} body:has(.od-page) .vehicle-ctas .btn-primary *,body:has(.od-page) .price-btn a.dialog *,body:has(.od-page) a.dialog.btn-primary *{color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important;fill:var(--od-navy)!important} body:has(.od-page) .vehicle-ctas .btn-primary:hover,body:has(.od-page) .price-btn a.dialog:hover,body:has(.od-page) a.dialog.btn-primary:hover{color:var(--od-navy)!important;background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gl) 50%,var(--od-gd) 100%)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gl) 50%,var(--od-gd) 100%)!important;border-color:var(--od-gl)!important;box-shadow:0 0 28px rgba(var(--od-gold-rgb),.65),0 0 56px rgba(var(--od-gold-rgb),.25)!important;transform:translateY(-2px)!important} /* 26. SEARCH AUTOCOMPLETE DROPDOWN */ body:has(.od-page) [class*="suggestion"],body:has(.od-page) [class*="suggestion"] *,body:has(.od-page) [class*="autocomplete"],body:has(.od-page) [class*="autocomplete"] *,body:has(.od-page) [class*="typeahead"],body:has(.od-page) [class*="typeahead"] *,body:has(.od-page) [role="listbox"],body:has(.od-page) [role="listbox"] *,body:has(.od-page) .free-text-search-form ul,body:has(.od-page) .free-text-search-form ul li,body:has(.od-page) #inventory-search1-app-root ul,body:has(.od-page) #inventory-search1-app-root ul li{background:var(--od-mid)!important;background-color:var(--od-mid)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border-color:rgba(var(--od-gold-rgb),.3)!important} body:has(.od-page) [role="option"]:hover,body:has(.od-page) [role="option"]:hover *,body:has(.od-page) [role="option"][aria-selected="true"],body:has(.od-page) [role="option"][aria-selected="true"] *,body:has(.od-page) [class*="suggestion"] li:hover,body:has(.od-page) [class*="suggestion"] li:hover *{background:rgba(var(--od-gold-rgb),.15)!important;background-color:rgba(var(--od-gold-rgb),.15)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body:has(.od-page) [class*="suggestion"] strong,body:has(.od-page) [class*="suggestion"] mark,body:has(.od-page) [role="listbox"] strong{background:transparent!important;color:#fff!important;font-weight:800!important} /* 28. PAGINATION (.pagination inside ws-inv-paging) */ body:has(.od-page) #inventory-paging1-app-root,body:has(.od-page) .ws-inv-paging{background:transparent!important;padding:16px 0!important} body:has(.od-page) .pagination,body:has(.od-page) ul.pagination{background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important;list-style:none!important;display:flex!important;gap:4px!important;align-items:center!important;flex-wrap:wrap!important;justify-content:center!important} body:has(.od-page) .pagination li,body:has(.od-page) ul.pagination li{background:transparent!important;list-style:none!important;margin:0!important;padding:0!important;display:inline-flex!important} body:has(.od-page) .pagination li a,body:has(.od-page) .pagination a,body:has(.od-page) ul.pagination li a,body:has(.od-page) .pagination li span{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:32px!important;height:32px!important;padding:0 8px!important;background:rgba(var(--od-mid-rgb),.7)!important;background-color:rgba(var(--od-mid-rgb),.7)!important;background-image:none!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;font-size:12px!important;font-weight:700!important;text-decoration:none!important;letter-spacing:.3px!important;transition:all .2s ease!important;box-shadow:none!important} body:has(.od-page) .pagination li a:hover,body:has(.od-page) .pagination a:hover{background:rgba(var(--od-gold-rgb),.15)!important;background-color:rgba(var(--od-gold-rgb),.15)!important;border-color:var(--od-gold)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body:has(.od-page) .pagination li.active,body:has(.od-page) .pagination li.active a,body:has(.od-page) .pagination li.active span,body:has(.od-page) .pagination .active a,body:has(.od-page) .pagination .active{background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;background-color:var(--od-gold)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important;border-color:var(--od-gl)!important;cursor:default!important;box-shadow:0 0 10px rgba(var(--od-gold-rgb),.3)!important} body:has(.od-page) .pagination li.active a:hover,body:has(.od-page) .pagination .active a:hover{background:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;color:var(--od-navy)!important;-webkit-text-fill-color:var(--od-navy)!important} body:has(.od-page) .pagination-ellipsis,body:has(.od-page) .pagination li.pagination-ellipsis,body:has(.od-page) .pagination-ellipsis a,body:has(.od-page) .pagination-ellipsis span{background:transparent!important;background-color:transparent!important;border:1px solid transparent!important;color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;cursor:default!important;box-shadow:none!important} body:has(.od-page) .pagination-ellipsis:hover,body:has(.od-page) .pagination li.pagination-ellipsis:hover,body:has(.od-page) .pagination-ellipsis a:hover{background:transparent!important;border-color:transparent!important;color:var(--od-mutedw)!important} body:has(.od-page) .pagination-previous a,body:has(.od-page) .pagination-next a,body:has(.od-page) .pagination li.pagination-previous a,body:has(.od-page) .pagination li.pagination-next a{background:rgba(var(--od-mid-rgb),.7)!important;color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:50%!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important} body:has(.od-page) .pagination-previous a:hover,body:has(.od-page) .pagination-next a:hover{background:rgba(var(--od-gold-rgb),.15)!important;border-color:var(--od-gold)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body:has(.od-page) .pagination .ddc-icon,body:has(.od-page) .pagination .ddc-icon-arrow1-left,body:has(.od-page) .pagination .ddc-icon-arrow1-right,body:has(.od-page) .pagination-previous .ddc-icon,body:has(.od-page) .pagination-next .ddc-icon{color:inherit!important;-webkit-text-fill-color:inherit!important;fill:currentColor!important;background:transparent!important} body:has(.od-page) .pagination li.disabled a,body:has(.od-page) .pagination .disabled,body:has(.od-page) .pagination-previous.disabled a,body:has(.od-page) .pagination-next.disabled a{opacity:.35!important;cursor:default!important;pointer-events:none!important} /* 29. RANGE SLIDER HANDLES/TRACK (rc-slider library) */ body:has(.od-page) .rc-slider,body:has(.od-page) .rc-slider-horizontal{background:transparent!important;height:32px!important;padding:14px 0!important;margin:8px 6px 20px!important;position:relative!important;touch-action:none!important} body:has(.od-page) .rc-slider-rail{background:rgba(var(--od-gold-rgb),.2)!important;background-color:rgba(var(--od-gold-rgb),.2)!important;height:4px!important;border-radius:2px!important;position:absolute!important;width:100%!important;top:14px!important} body:has(.od-page) .rc-slider-track,body:has(.od-page) .rc-slider-track-1{background:var(--od-gold)!important;background-color:var(--od-gold)!important;background-image:linear-gradient(90deg,var(--od-gold) 0%,var(--od-gl) 100%)!important;height:4px!important;border-radius:2px!important;position:absolute!important;top:14px!important;box-shadow:0 0 8px rgba(var(--od-gold-rgb),.4)!important} body:has(.od-page) .rc-slider-handle,body:has(.od-page) .rc-slider-handle-1,body:has(.od-page) .rc-slider-handle-2{background:var(--od-gl)!important;background-color:var(--od-gl)!important;background-image:linear-gradient(180deg,var(--od-gl) 0%,var(--od-gold) 100%)!important;border:2px solid var(--od-navy)!important;border-radius:50%!important;width:22px!important;height:22px!important;margin-top:-9px!important;position:absolute!important;cursor:grab!important;opacity:1!important;box-shadow:0 0 0 2px rgba(var(--od-gold-rgb),.4),0 2px 8px rgba(0,0,0,.5)!important;transition:all .15s ease!important;z-index:2!important;touch-action:pan-x!important} body:has(.od-page) .rc-slider-handle:hover,body:has(.od-page) .rc-slider-handle-1:hover,body:has(.od-page) .rc-slider-handle-2:hover{background:#fff!important;background-image:linear-gradient(180deg,#fff 0%,var(--od-gl) 100%)!important;border-color:var(--od-navy)!important;box-shadow:0 0 0 3px rgba(var(--od-gold-rgb),.6),0 0 16px rgba(var(--od-gold-rgb),.6)!important;transform:scale(1.15)!important} body:has(.od-page) .rc-slider-handle:active,body:has(.od-page) .rc-slider-handle-1:active,body:has(.od-page) .rc-slider-handle-2:active,body:has(.od-page) .rc-slider-handle-dragging{cursor:grabbing!important;background:#fff!important;box-shadow:0 0 0 4px rgba(var(--od-gold-rgb),.7),0 0 20px rgba(var(--od-gold-rgb),.8)!important;transform:scale(1.2)!important} body:has(.od-page) .rc-slider-handle:focus,body:has(.od-page) .rc-slider-handle:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(var(--od-gold-rgb),.8),0 0 16px rgba(var(--od-gold-rgb),.6)!important} body:has(.od-page) .rc-slider-step,body:has(.od-page) .rc-slider-dot,body:has(.od-page) .rc-slider-dot-active{display:none!important;visibility:hidden!important} body:has(.od-page) .rc-slider-tooltip,body:has(.od-page) .rc-slider-tooltip-inner{background:var(--od-mid)!important;color:var(--od-gl)!important;border:1px solid rgba(var(--od-gold-rgb),.4)!important;border-radius:3px!important;font-size:11px!important;font-weight:700!important;padding:4px 8px!important;box-shadow:0 4px 12px rgba(0,0,0,.5)!important} /* 27. BOOTSTRAP UTILITY OVERRIDES */ body:has(.od-page) li.vehicle-card-detailed .text-muted,body:has(.od-page) li.vehicle-card .text-muted,body:has(.od-page) .ws-inv-listing .text-muted{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important} body:has(.od-page) li.vehicle-card-detailed .text-dark,body:has(.od-page) li.vehicle-card .text-dark,body:has(.od-page) .srp-wrapper-facets .text-dark{color:var(--od-cream)!important;-webkit-text-fill-color:var(--od-cream)!important} body:has(.od-page) li.vehicle-card-detailed .bg-white,body:has(.od-page) li.vehicle-card .bg-white,body:has(.od-page) .srp-wrapper-facets .bg-white,body:has(.od-page) li.vehicle-card-detailed .bg-light,body:has(.od-page) .srp-wrapper-facets .bg-light,body:has(.od-page) .ws-inv-text-search .bg-white,body:has(.od-page) .ws-inv-text-search .bg-light{background:transparent!important;background-color:transparent!important} .od-srp .srp-inv-header{padding:44px 20px 14px!important} /* VEHICLE CARD PRICING/INFO TABS */ body:has(.od-page) .vehicle-card-tabs .nav-tabs,body:has(.od-page) .tabs.tabs-fill .nav-tabs{border-bottom:1px solid rgba(var(--od-gold-rgb),.2)!important;background:transparent!important} body:has(.od-page) .vehicle-card-tabs .nav-tabs a,body:has(.od-page) .vehicle-card-tabs .nav-tabs a[role="tab"],body:has(.od-page) .tabs.tabs-fill .nav-tabs a,body:has(.od-page) .tabs.tabs-fill .nav-tabs a[role="tab"]{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important} body:has(.od-page) .vehicle-card-tabs .nav-tabs li.active a,body:has(.od-page) .vehicle-card-tabs .nav-tabs a[aria-selected="true"],body:has(.od-page) .tabs.tabs-fill .nav-tabs li.active a,body:has(.od-page) .tabs.tabs-fill .nav-tabs a[aria-selected="true"]{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important;border-bottom:2px solid var(--od-gold)!important} /* END DDC INVENTORY WIDGET OVERRIDES */ /* ────────── [MOBILE] MOBILE DDC WIDGET SIZE OVERRIDES + NO-RESULTS ────────── */ /* DDC INVENTORY WIDGET (mobile-specific size overrides) */ body:has(.od-page) li.vehicle-card-detailed h1,body:has(.od-page) li.vehicle-card-detailed h2,body:has(.od-page) li.vehicle-card-detailed h3,body:has(.od-page) li.vehicle-card-detailed h4,body:has(.od-page) li.vehicle-card-detailed h5,body:has(.od-page) li.vehicle-card-detailed h1 a,body:has(.od-page) li.vehicle-card-detailed h2 a,body:has(.od-page) li.vehicle-card-detailed h3 a,body:has(.od-page) li.vehicle-card-detailed h4 a,body:has(.od-page) li.vehicle-card-detailed h5 a,body:has(.od-page) li.vehicle-card h1 a,body:has(.od-page) li.vehicle-card h2 a,body:has(.od-page) li.vehicle-card h3 a{font-size:12px!important} body:has(.od-page) .highlight-facet-btn,body:has(.od-page) .chip.chip-additive:not(.rounded-circle){font-size:10px!important;padding:6px 12px!important} body:has(.od-page) .chip.chip-additive.rounded-circle,body:has(.od-page) .navigator-left button,body:has(.od-page) .navigator-right button{width:28px!important;height:28px!important;flex:0 0 28px!important} body:has(.od-page) select{font-size:11px!important;padding:9px 30px 9px 12px!important} body:has(.od-page) .free-text-search,body:has(.od-page) input.free-text-search{font-size:13px!important;padding:12px 14px!important} body:has(.od-page) .highlight-badge{font-size:10px!important;padding:4px 9px!important} body:has(.od-page) .unstyled-button,body:has(.od-page) [data-testid^="button-"],body:has(.od-page) .modern-my-cars-details-label{font-size:9px!important;padding:4px 4px!important} body:has(.od-page) .vehicle-ctas .btn-primary,body:has(.od-page) .price-btn a.dialog,body:has(.od-page) a.dialog.btn-primary,body:has(.od-page) a.btn-block.btn-primary{font-size:11px!important;padding:11px 18px!important;letter-spacing:1.2px!important} body:has(.od-page) .srp-wrapper-facets{padding:16px 14px!important} body:has(.od-page) .srp-wrapper-facets h1,body:has(.od-page) .srp-wrapper-facets h2,body:has(.od-page) .srp-wrapper-facets h3,body:has(.od-page) .srp-wrapper-facets h4,body:has(.od-page) .srp-wrapper-facets h5{font-size:11px!important} .od-srp .srp-inv-header{padding:44px 20px 14px!important} /* 28. NO-RESULTS EMPTY STATE */ body:has(.od-page) [class*="srp-low-result"],body:has(.od-page) .ws-inv-listing>div,body:has(.od-page) .ws-inv-listing>section{background:var(--od-navy)!important;background-color:var(--od-navy)!important;color:var(--od-mutedw)!important} body:has(.od-page) [class*="srp-low-result"] *{color:var(--od-mutedw)!important;-webkit-text-fill-color:var(--od-mutedw)!important;background:transparent!important} body:has(.od-page) [class*="srp-low-result"] h1,body:has(.od-page) [class*="srp-low-result"] h2,body:has(.od-page) [class*="srp-low-result"] h3{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) [class*="srp-low-result"] a{color:var(--od-gl)!important;-webkit-text-fill-color:var(--od-gl)!important} body:has(.od-page) [class*="srp-low-result"] svg *{stroke:var(--od-mutedw)!important;fill:transparent!important} .od-srp .srp-trim-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important} .od-srp a.srp-trim-card,.od-srp a.srp-trim-card:link,.od-srp a.srp-trim-card:visited{padding:0!important;gap:0!important;align-items:stretch!important} .od-srp a.srp-trim-card .srp-trim-img{height:80px!important;object-fit:cover!important} .od-srp a.srp-trim-card .srp-trim-name{font-size:10px!important;letter-spacing:.5px!important} /* ────────── [MOBILE] FORM HIJACK — MOBILE PASSES ────────── */ body.od-veh-modal-open { overflow: hidden !important; } .od-veh-modal { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: none !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; pointer-events: none !important; } .od-veh-modal.open { display: block !important; pointer-events: all !important; } .od-veh-modal .od-veh-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(var(--od-navy-rgb),0.92) !important; cursor: pointer !important; animation: afVehFadeInM 0.2s ease-out !important; } /* Mobile panel: full width, slides up from bottom */ .od-veh-modal .od-veh-modal-panel { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: 92vh !important; background: var(--od-mid) !important; background: linear-gradient(165deg, var(--od-navy2) 0%, var(--od-mid) 60%, var(--od-navy) 100%) !important; border-top: 3px solid var(--od-gold) !important; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7) !important; padding: 22px 18px max(22px, env(safe-area-inset-bottom, 22px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; animation: afVehSlideUpM 0.28s cubic-bezier(0.2, 0.85, 0.4, 1) !important; color: var(--od-cream) !important; } @keyframes afVehFadeInM { from { opacity: 0; } to { opacity: 1; } } @keyframes afVehSlideUpM { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Close X — slightly larger touch target on mobile */ .od-veh-modal .od-veh-modal-close { position: absolute !important; top: 12px !important; right: 12px !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(var(--od-gold-rgb),0.45) !important; border-radius: 50% !important; background: transparent !important; cursor: pointer !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; z-index: 2 !important; } .od-veh-modal .od-veh-modal-close::before { content: '\2715' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-size: 14px !important; line-height: 1 !important; color: var(--od-gold) !important; font-weight: 400 !important; } /* Header */ .od-veh-modal .od-veh-modal-head { margin-bottom: 14px !important; padding-right: 44px !important; } .od-veh-modal .od-veh-modal-eyebrow { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--od-gold) !important; margin-bottom: 6px !important; } .od-veh-modal .od-veh-modal-headline { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--od-cream) !important; margin: 0 0 6px !important; line-height: 1.2 !important; } .od-veh-modal .od-veh-modal-sub { font-size: 13px !important; font-weight: 400 !important; color: rgba(var(--od-cream-rgb),0.72) !important; margin: 0 !important; line-height: 1.5 !important; } /* Vehicle context strip */ .od-veh-modal .od-veh-modal-vehicle { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 10px 12px !important; margin: 0 0 18px !important; background: rgba(var(--od-gold-rgb),0.06) !important; border-left: 3px solid var(--od-gold) !important; border-top: 1px solid rgba(var(--od-gold-rgb),0.12) !important; border-right: 1px solid rgba(var(--od-gold-rgb),0.12) !important; border-bottom: 1px solid rgba(var(--od-gold-rgb),0.12) !important; } .od-veh-modal .od-veh-modal-vehicle-title { font-size: 12px !important; font-weight: 700 !important; color: var(--od-cream) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; line-height: 1.3 !important; } .od-veh-modal .od-veh-modal-vehicle-price { font-size: 17px !important; font-weight: 800 !important; color: var(--od-gl) !important; letter-spacing: 0.5px !important; } /* Form layout — single column on mobile */ .od-veh-modal .od-veh-form-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px !important; } .od-veh-modal .od-veh-fg { display: flex !important; flex-direction: column !important; gap: 6px !important; } .od-veh-modal .od-veh-fg-full { grid-column: 1 / -1 !important; } /* Labels */ .od-veh-modal label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--od-gold) !important; line-height: 1 !important; margin: 0 !important; } .od-veh-modal .od-veh-req { color: var(--od-gl) !important; margin-left: 3px !important; } /* Inputs — larger touch targets, prevent iOS zoom with 16px font */ .od-veh-modal input[type="text"], .od-veh-modal input[type="email"], .od-veh-modal input[type="tel"], .od-veh-modal input[type="number"], .od-veh-modal select, .od-veh-modal textarea { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; padding: 13px 14px !important; background: var(--od-navy) !important; border: 1px solid rgba(var(--od-gold-rgb),0.28) !important; border-radius: 0 !important; color: var(--od-cream) !important; outline: none !important; width: 100% !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; box-shadow: none !important; height: auto !important; line-height: 1.4 !important; } .od-veh-modal textarea { resize: vertical !important; min-height: 80px !important; } .od-veh-modal input:focus, .od-veh-modal select:focus, .od-veh-modal textarea:focus { border-color: var(--od-gold) !important; box-shadow: 0 0 0 2px rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal input::placeholder, .od-veh-modal textarea::placeholder { color: rgba(var(--od-cream-rgb),0.32) !important; } .od-veh-modal select { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important; padding-right: 38px !important; } .od-veh-modal select option { background: var(--od-navy) !important; color: var(--od-cream) !important; font-size: 14px !important; } /* Pre-Approval block */ .od-veh-modal .od-veh-preapp { margin: 6px 0 14px !important; padding: 14px 14px 12px !important; background: rgba(var(--od-gold-rgb),0.04) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; border-left: 3px solid var(--od-gold) !important; } .od-veh-modal .od-veh-section-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--od-gl) !important; margin: 0 0 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal .od-veh-toggle-row { display: flex !important; gap: 22px !important; padding-top: 4px !important; } .od-veh-modal .od-veh-toggle-row label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.5px !important; text-transform: none !important; color: var(--od-cream) !important; cursor: pointer !important; padding: 4px 0 !important; } .od-veh-modal .od-veh-toggle-row input[type="radio"] { width: 18px !important; height: 18px !important; accent-color: var(--od-gold) !important; } .od-veh-modal .od-veh-trade-grid { margin-top: 4px !important; grid-template-columns: 1fr !important; } /* Honeypot */ .od-veh-modal .od-veh-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* TCPA */ .od-veh-modal .od-veh-tcpa { margin: 14px 0 16px !important; padding: 12px 12px !important; background: rgba(var(--od-navy-rgb),0.6) !important; border: 1px solid rgba(var(--od-gold-rgb),0.14) !important; } .od-veh-modal .od-veh-tcpa label { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.2px !important; text-transform: none !important; color: rgba(var(--od-cream-rgb),0.72) !important; line-height: 1.5 !important; } .od-veh-modal .od-veh-tcpa input[type="checkbox"] { width: 16px !important; height: 16px !important; margin-top: 2px !important; accent-color: var(--od-gold) !important; flex-shrink: 0 !important; } /* Submit */ .od-veh-modal .od-veh-submit { display: block !important; width: 100% !important; position: relative !important; padding: 16px 24px !important; background: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gold) 50%, var(--od-gd) 100%) !important; border: 1px solid var(--od-gl) !important; border-radius: 0 !important; color: var(--od-navy) !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal .od-veh-submit:disabled { opacity: 0.7 !important; } .od-veh-modal .od-veh-submit-spinner { display: none !important; position: absolute !important; top: 50% !important; right: 22px !important; width: 14px !important; height: 14px !important; margin-top: -7px !important; border: 2px solid rgba(var(--od-navy-rgb),0.3) !important; border-top-color: var(--od-navy) !important; border-radius: 50% !important; animation: afVehSpinM 0.8s linear infinite !important; } .od-veh-modal .od-veh-submit.loading .od-veh-submit-spinner { display: block !important; } @keyframes afVehSpinM { to { transform: rotate(360deg); } } /* Form status message */ .od-veh-modal .od-veh-form-msg { margin-top: 12px !important; font-size: 13px !important; text-align: center !important; color: rgba(var(--od-cream-rgb),0.7) !important; min-height: 18px !important; letter-spacing: 0.3px !important; } .od-veh-modal .od-veh-form-msg.success { color: var(--od-gl) !important; padding: 12px !important; background: rgba(var(--od-gold-rgb),0.08) !important; border: 1px solid rgba(var(--od-gold-rgb),0.3) !important; } .od-veh-modal .od-veh-form-msg.error { color: #ff8a8a !important; padding: 12px !important; background: rgba(255, 138, 138, 0.06) !important; border: 1px solid rgba(255, 138, 138, 0.3) !important; } .od-veh-modal .od-veh-modal-panel::-webkit-scrollbar { width: 6px !important; } .od-veh-modal .od-veh-modal-panel::-webkit-scrollbar-thumb { background: rgba(var(--od-gold-rgb),0.3) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END Module 12 · MOBILE PASS 1 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * ODYSSEY — MODULE 11 FORM HIJACK · MOBILE PASS 2 * ═══════════════════════════════════════════════════════════════════════════ * Append to legacy-mobile-css.css AFTER Module 11 Pass 1. * Adds: autofill color override (Bug 1), success card styling (Bug 2). * ═══════════════════════════════════════════════════════════════════════ */ /* ── Bug 1: Browser autofill colors ────────────────────────────────────── */ .od-veh-modal input:-webkit-autofill, .od-veh-modal input:-webkit-autofill:hover, .od-veh-modal input:-webkit-autofill:focus, .od-veh-modal input:-webkit-autofill:active, .od-veh-modal select:-webkit-autofill, .od-veh-modal textarea:-webkit-autofill { -webkit-text-fill-color: var(--od-cream) !important; -webkit-box-shadow: 0 0 0 1000px var(--od-navy) inset !important; caret-color: var(--od-cream) !important; transition: background-color 5000s ease-in-out 0s !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 16px !important; } .od-veh-modal input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--od-navy) inset, 0 0 0 2px rgba(var(--od-gold-rgb),0.18) !important; border-color: var(--od-gold) !important; } /* ── Bug 2: Success card ───────────────────────────────────────────────── */ .od-veh-modal .od-veh-success { text-align: center !important; padding: 16px 4px 6px !important; animation: afVehSuccessInM 0.32s cubic-bezier(0.2, 0.85, 0.4, 1) !important; } @keyframes afVehSuccessInM { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .od-veh-modal .od-veh-success-check { width: 72px !important; height: 72px !important; margin: 0 auto 14px !important; color: var(--od-gl) !important; display: block !important; } .od-veh-modal .od-veh-success-check svg { width: 100% !important; height: 100% !important; display: block !important; } .od-veh-modal .od-veh-success-check svg circle { stroke-dasharray: 176 !important; stroke-dashoffset: 176 !important; animation: afVehDrawCircleM 0.5s cubic-bezier(0.2, 0.85, 0.4, 1) 0.1s forwards !important; } .od-veh-modal .od-veh-success-check svg path { stroke-dasharray: 50 !important; stroke-dashoffset: 50 !important; animation: afVehDrawCheckM 0.35s cubic-bezier(0.2, 0.85, 0.4, 1) 0.55s forwards !important; } @keyframes afVehDrawCircleM { to { stroke-dashoffset: 0; } } @keyframes afVehDrawCheckM { to { stroke-dashoffset: 0; } } .od-veh-modal .od-veh-success-eyebrow { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--od-gold) !important; margin-bottom: 8px !important; } .od-veh-modal .od-veh-success-headline { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--od-cream) !important; margin: 0 0 10px !important; line-height: 1.2 !important; } .od-veh-modal .od-veh-success-thanks { font-size: 14px !important; color: rgba(var(--od-cream-rgb),0.82) !important; margin: 0 0 12px !important; } .od-veh-modal .od-veh-success-vehicle { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: var(--od-gl) !important; background: rgba(var(--od-gold-rgb),0.08) !important; border: 1px solid rgba(var(--od-gold-rgb),0.25) !important; border-left: 3px solid var(--od-gold) !important; padding: 7px 12px !important; margin: 0 0 16px !important; } .od-veh-modal .od-veh-success-copy { font-size: 13px !important; color: rgba(var(--od-cream-rgb),0.78) !important; line-height: 1.55 !important; margin: 0 0 14px !important; padding: 0 6px !important; } .od-veh-modal .od-veh-success-email { font-size: 11px !important; color: rgba(var(--od-cream-rgb),0.62) !important; margin: 0 0 20px !important; line-height: 1.5 !important; padding: 0 6px !important; } .od-veh-modal .od-veh-success-email strong { color: var(--od-gl) !important; font-weight: 600 !important; } .od-veh-modal .od-veh-success-close { display: inline-block !important; padding: 14px 36px !important; background: linear-gradient(180deg, var(--od-gl) 0%, var(--od-gold) 50%, var(--od-gd) 100%) !important; border: 1px solid var(--od-gl) !important; border-radius: 0 !important; color: var(--od-navy) !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(var(--od-gold-rgb),0.18) !important; margin-bottom: 16px !important; } .od-veh-modal .od-veh-success-foot { font-size: 11px !important; color: rgba(var(--od-cream-rgb),0.5) !important; margin: 0 !important; letter-spacing: 0.3px !important; } .od-veh-modal .od-veh-success-foot a { color: var(--od-gl) !important; text-decoration: none !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END MODULE 11 · MOBILE PASS 2 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * ODYSSEY — Module 12 FORM HIJACK · MOBILE PASS 3 * ═══════════════════════════════════════════════════════════════════════ */ /* ── Stage 1 teaser block (above form, ePrice variant only) ────────── */ .od-veh-modal .od-veh-teaser { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; margin: 0 0 16px !important; background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.10), rgba(var(--od-gold-rgb),0.04)) !important; border: 1px solid rgba(var(--od-gold-rgb),0.30) !important; border-left: 3px solid var(--od-gold) !important; } .od-veh-modal .od-veh-teaser-icon { font-size: 20px !important; line-height: 1 !important; flex-shrink: 0 !important; } .od-veh-modal .od-veh-teaser-text { font-size: 12.5px !important; color: rgba(var(--od-cream-rgb),0.88) !important; line-height: 1.5 !important; letter-spacing: 0.2px !important; } .od-veh-modal .od-veh-teaser-text strong { color: var(--od-gl) !important; font-weight: 700 !important; } /* ── Stage 2 reveal container ─────────────────────────────────────── */ .od-veh-modal .od-veh-reveal { padding: 6px 2px 4px !important; animation: afVehRevealInM 0.42s cubic-bezier(0.2, 0.85, 0.4, 1) !important; } @keyframes afVehRevealInM { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .od-veh-modal .od-veh-reveal-eyebrow { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--od-gl) !important; margin-bottom: 8px !important; text-align: center !important; } .od-veh-modal .od-veh-reveal-vehicle { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; color: var(--od-cream) !important; margin: 0 0 14px !important; line-height: 1.25 !important; text-align: center !important; } /* "Submitted as" summary line + edit-email row */ .od-veh-modal .od-veh-reveal-submitted { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; padding: 10px 12px !important; margin: 0 0 16px !important; background: rgba(var(--od-navy-rgb),0.55) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal .od-veh-reveal-submitted-label { font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; color: var(--od-gold) !important; font-size: 9.5px !important; } .od-veh-modal .od-veh-reveal-submitted-name { color: var(--od-cream) !important; font-weight: 600 !important; letter-spacing: 0.3px !important; font-size: 13px !important; } .od-veh-modal .od-veh-edit-email-btn { background: transparent !important; border: none !important; border-bottom: 1px dashed rgba(var(--od-gl-rgb),0.45) !important; padding: 0 0 1px !important; font-family: inherit !important; font-size: 12px !important; color: var(--od-gl) !important; cursor: pointer !important; letter-spacing: 0.2px !important; text-align: left !important; align-self: flex-start !important; word-break: break-all !important; } .od-veh-modal .od-veh-edit-pencil { margin-left: 4px !important; font-size: 11px !important; opacity: 0.7 !important; } .od-veh-modal .od-veh-edit-email-row { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; margin-top: 4px !important; } .od-veh-modal .od-veh-edit-email-row input[type="email"] { width: 100% !important; font-size: 16px !important; padding: 10px 12px !important; background: var(--od-navy) !important; border: 1px solid rgba(var(--od-gold-rgb),0.35) !important; color: var(--od-cream) !important; font-family: inherit !important; -webkit-appearance: none !important; border-radius: 0 !important; } .od-veh-modal .od-veh-edit-email-save, .od-veh-modal .od-veh-edit-email-cancel { flex: 1 1 0 !important; padding: 10px 14px !important; font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; cursor: pointer !important; border: 1px solid rgba(var(--od-gold-rgb),0.45) !important; background: transparent !important; color: var(--od-gl) !important; border-radius: 0 !important; -webkit-appearance: none !important; } .od-veh-modal .od-veh-edit-email-save { background: rgba(var(--od-gold-rgb),0.15) !important; } .od-veh-modal .od-veh-edit-email-row { display: flex !important; flex-direction: column !important; } /* Save/Cancel side by side under the input */ .od-veh-modal .od-veh-edit-email-row .od-veh-edit-email-save, .od-veh-modal .od-veh-edit-email-row .od-veh-edit-email-cancel { width: 100% !important; } /* ── Price reveal block ──────────────────────────────────────────── */ .od-veh-modal .od-veh-reveal-prices { margin: 0 0 18px !important; padding: 16px 16px 12px !important; background: linear-gradient(165deg, rgba(var(--od-navy2-rgb),0.85), rgba(var(--od-navy-rgb),0.95)) !important; border: 1px solid rgba(var(--od-gold-rgb),0.40) !important; border-top: 3px solid var(--od-gold) !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important; } .od-veh-modal .od-veh-reveal-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; padding: 5px 0 !important; gap: 8px !important; } .od-veh-modal .od-veh-reveal-label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: rgba(var(--od-cream-rgb),0.78) !important; } .od-veh-modal .od-veh-reveal-val { font-size: 14px !important; font-weight: 700 !important; color: var(--od-cream) !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; } .od-veh-modal .od-veh-reveal-discount .od-veh-reveal-val { color: var(--od-gl) !important; } .od-veh-modal .od-veh-reveal-divider { height: 1px !important; margin: 7px 0 !important; background: linear-gradient(90deg, transparent 0%, rgba(var(--od-gold-rgb),0.5) 30%, rgba(var(--od-gold-rgb),0.5) 70%, transparent 100%) !important; } .od-veh-modal .od-veh-reveal-final .od-veh-reveal-label { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.7px !important; color: var(--od-gl) !important; } .od-veh-modal .od-veh-reveal-final .od-veh-reveal-val { font-size: 22px !important; font-weight: 800 !important; letter-spacing: 0.4px !important; color: var(--od-cream) !important; text-shadow: 0 0 18px rgba(var(--od-gl-rgb),0.3) !important; } .od-veh-modal .od-veh-reveal-fallback { padding: 14px !important; text-align: center !important; font-size: 12.5px !important; color: rgba(var(--od-cream-rgb),0.8) !important; background: rgba(var(--od-gold-rgb),0.06) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; margin: 0 0 18px !important; } /* ── Reveal-stage CTA ────────────────────────────────────────────── */ .od-veh-modal .od-veh-reveal-cta { margin: 0 !important; } /* ── Next steps section ──────────────────────────────────────────── */ .od-veh-modal .od-veh-next-steps { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(var(--od-gold-rgb),0.18) !important; } .od-veh-modal .od-veh-next-steps-header { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--od-gold) !important; text-align: center !important; margin-bottom: 10px !important; } .od-veh-modal .od-veh-next-steps-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; } .od-veh-modal .od-veh-next-step-btn { display: block !important; width: 100% !important; padding: 13px 14px !important; background: rgba(var(--od-navy-rgb),0.65) !important; border: 1px solid rgba(var(--od-gold-rgb),0.35) !important; color: var(--od-gl) !important; text-decoration: none !important; text-align: center !important; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; cursor: pointer !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END MODULE 12 · MOBILE PASS 3 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * ODYSSEY — Module 12 FORM HIJACK · MOBILE PASS 4 * Adds: "You May Qualify For" incentive selector, sub-line price layout, * reveal-stage disclaimer block. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Stacked-price additional rows ────────────────────────────────── */ .od-veh-modal .od-veh-reveal-subtotal .od-veh-reveal-label, .od-veh-modal .od-veh-reveal-subtotal .od-veh-reveal-val { font-size: 11px !important; font-weight: 600 !important; color: rgba(var(--od-cream-rgb),0.65) !important; letter-spacing: 0.8px !important; } .od-veh-modal .od-veh-reveal-claimed .od-veh-reveal-label { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; color: rgba(var(--od-cream-rgb),0.85) !important; text-transform: uppercase !important; } .od-veh-modal .od-veh-reveal-claimed .od-veh-reveal-val { font-size: 13px !important; font-weight: 700 !important; color: var(--od-gl) !important; font-variant-numeric: tabular-nums !important; } /* ── "You May Qualify For" container ──────────────────────────────── */ .od-veh-modal .od-veh-incentives { margin: 0 0 18px !important; padding: 16px 14px !important; background: linear-gradient(180deg, rgba(var(--od-mid-rgb),0.55), rgba(var(--od-navy-rgb),0.75)) !important; border: 1px solid rgba(var(--od-gold-rgb),0.22) !important; border-left: 3px solid rgba(var(--od-gold-rgb),0.55) !important; animation: afVehIncentivesInM 0.4s cubic-bezier(0.2, 0.85, 0.4, 1) !important; } @keyframes afVehIncentivesInM { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .od-veh-modal .od-veh-incentives-header { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: var(--od-gl) !important; margin: 0 0 4px !important; } .od-veh-modal .od-veh-incentives-sub { font-size: 11px !important; color: rgba(var(--od-cream-rgb),0.6) !important; margin: 0 0 14px !important; line-height: 1.45 !important; } .od-veh-modal .od-veh-incentives-list { display: flex !important; flex-direction: column !important; gap: 12px !important; } /* Group wrapper */ .od-veh-modal .od-veh-incentive-group { display: flex !important; flex-direction: column !important; gap: 5px !important; } .od-veh-modal .od-veh-incentive-group-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(var(--od-gl-rgb),0.85) !important; margin: 4px 0 6px !important; padding-bottom: 4px !important; border-bottom: 1px solid rgba(var(--od-gold-rgb),0.15) !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .od-veh-modal .od-veh-incentive-group-hint { font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.4px !important; text-transform: none !important; color: rgba(var(--od-cream-rgb),0.5) !important; } /* Individual incentive row */ .od-veh-modal .od-veh-incentive-row { display: flex !important; align-items: center !important; gap: 11px !important; padding: 10px 12px !important; background: rgba(var(--od-navy-rgb),0.5) !important; border: 1px solid rgba(var(--od-gold-rgb),0.18) !important; cursor: pointer !important; margin: 0 !important; } .od-veh-modal .od-veh-incentive-row input[type="checkbox"], .od-veh-modal .od-veh-incentive-row input[type="radio"] { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--od-gold) !important; cursor: pointer !important; -webkit-appearance: auto !important; } .od-veh-modal .od-veh-incentive-row:has(input:checked) { background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.18), rgba(var(--od-gold-rgb),0.06)) !important; border-color: rgba(var(--od-gl-rgb),0.55) !important; } .od-veh-modal .od-veh-incentive-info { flex: 1 1 auto !important; min-width: 0 !important; } .od-veh-modal .od-veh-incentive-label { font-size: 12.5px !important; font-weight: 700 !important; color: var(--od-cream) !important; letter-spacing: 0.2px !important; margin-bottom: 2px !important; display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; } .od-veh-modal .od-veh-incentive-sublabel { font-size: 10.5px !important; color: rgba(var(--od-cream-rgb),0.62) !important; line-height: 1.35 !important; } .od-veh-modal .od-veh-incentive-amount { flex-shrink: 0 !important; font-size: 13.5px !important; font-weight: 800 !important; color: var(--od-gl) !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0.2px !important; white-space: nowrap !important; } .od-veh-modal .od-veh-incentive-amount-zero { color: rgba(var(--od-cream-rgb),0.35) !important; font-weight: 600 !important; font-size: 13px !important; } /* EV credit row */ .od-veh-modal .od-veh-incentive-ev { background: linear-gradient(135deg, rgba(var(--od-gold-rgb),0.22), rgba(var(--od-gold-rgb),0.08)) !important; border-color: rgba(var(--od-gl-rgb),0.6) !important; } .od-veh-modal .od-veh-incentive-badge { display: inline-block !important; padding: 2px 7px !important; background: rgba(var(--od-gl-rgb),0.85) !important; color: var(--od-mid) !important; font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; border-radius: 2px !important; vertical-align: middle !important; } /* ── Reveal-stage disclaimer ──────────────────────────────────────── */ .od-veh-modal .od-veh-reveal-disclaimer { margin: -6px 0 16px !important; padding: 11px 13px !important; font-size: 10px !important; line-height: 1.5 !important; color: rgba(var(--od-cream-rgb),0.55) !important; background: rgba(var(--od-navy-rgb),0.4) !important; border-left: 2px solid rgba(var(--od-gold-rgb),0.25) !important; } .od-veh-modal .od-veh-reveal-disclaimer strong { color: rgba(var(--od-gl-rgb),0.85) !important; font-weight: 700 !important; letter-spacing: 0.4px !important; } /* ═══════════════════════════════════════════════════════════════════════════ * END MODULE 12 · MOBILE PASS 4 * ═══════════════════════════════════════════════════════════════════════ */ /* MODULE 12 · MOBILE PASS 5 — Bulletproof teaser hide (only show on ePrice) */ .od-veh-teaser { display: none !important; } .od-veh-teaser.od-veh-teaser--show { display: flex !important; } .od-veh-teaser[hidden] { display: none !important; } /* MODULE 12 / SRP · MOBILE PASS 6 — Get a Quote fallback button on empty SRP tiles */ .od-srp .srp-offer-value-cta { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 6px 0 !important; } .od-srp .srp-quote-btn { display: inline-block !important; background: linear-gradient(180deg, var(--od-gl), var(--od-gold), var(--od-gd)) !important; color: var(--od-navy) !important; border: 1px solid var(--od-gl) !important; font-family: 'Roboto', Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; padding: 10px 18px !important; cursor: pointer !important; line-height: 1 !important; } } /* end of @media (max-width:980px) mobile layer */