/* ========================================================= DPS AUTOMOTIVE PRODUCT SIDEBAR ========================================================= */ /* ========================================================= IMPORTANT: THE SIDEBAR ALREADY EXISTS INSIDE .hero-visual HTML STRUCTURE: .hero-visual | |-- .division-sidebar | |-- .hero-car-image Therefore we DO NOT create .product-layout. ========================================================= */ /* ========================================================= PRODUCT SIDEBAR ========================================================= */ .product-sidebar { /* EXISTING HERO SIDEBAR KEEP IT ON LEFT */ position: relative; flex: 0 0 260px; width: 260px; min-width: 260px; align-self: stretch; background: #fff7df; border-right: 1px solid #e4d0a0; padding: 16px 22px; min-height: 280px; z-index: 3000; box-shadow: 4px 0 18px rgba(8, 28, 48, .08); } /* Final Original / OEM / Aftermarket flyout links */ .ps-channels.open > a { display:block; padding:10px 14px; color:#513406; border-bottom:1px solid rgba(255,255,255,.45); font:700 10px/1.25 Montserrat,Arial,sans-serif; text-decoration:none; } .ps-channels.open > a:hover { background:rgba(255,255,255,.16); } /* ========================================================= RESET SIDEBAR LIST ========================================================= */ .product-sidebar ul { list-style: none; margin: 0; padding: 0; } /* ========================================================= MAIN DIVISION BUTTON ========================================================= */ .product-sidebar .ps-division { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid #e4d0a0; background: transparent; color: #352611; text-align: left; font: 700 11px/1.35 Montserrat, Arial, sans-serif; cursor: pointer; } /* ========================================================= MAIN DIVISION PLUS ========================================================= */ .product-sidebar .ps-division .mark { color: #a46d11; font-size: 18px; font-weight: 400; flex-shrink: 0; } /* ========================================================= ACTIVE MAIN DIVISION ========================================================= */ .product-sidebar .ps-division.active { color: #0051a0; } /* ========================================================= FIRST PANEL ========================================================= */ .product-sidebar .ps-panel { display: none; position: absolute; z-index: 5000; left: 100%; top: 0; width: 280px; margin: 0; padding: 5px; background: #e9ae31; border: 1px solid #ffffff; box-shadow: 0 12px 24px rgba(8, 28, 48, .20); } /* ========================================================= OPEN FIRST PANEL ========================================================= */ .product-sidebar .ps-panel.open { display: block; } /* ========================================================= PANEL ITEMS ========================================================= */ .product-sidebar .ps-panel > li { position: relative; } /* ========================================================= BRAND BUTTON ========================================================= */ .product-sidebar .ps-branch { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.55); background: transparent; color: #513406; text-align: left; font: 700 11px Montserrat, Arial, sans-serif; cursor: pointer; } /* ========================================================= BRAND PLUS ========================================================= */ .product-sidebar .ps-branch::after { content: '+'; float: right; font-size: 16px; font-weight: 400; } .product-sidebar .ps-branch.open::after { content: '−'; } /* ========================================================= OEM / AFTERMARKET CONTAINER ========================================================= */ .product-sidebar .ps-channels { display: none; background: rgba(255,255,255,.10); } .product-sidebar .ps-channels.open { display: block; } /* ========================================================= OEM / AFTERMARKET BUTTON ========================================================= */ .product-sidebar .ps-channel { width: 100%; padding: 8px 21px; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); background: transparent; color: #513406; text-align: left; font: 800 10px Montserrat, Arial, sans-serif; cursor: pointer; } /* ========================================================= OEM / AFTERMARKET PLUS ========================================================= */ .product-sidebar .ps-channel::after { content: '+'; float: right; font-size: 16px; font-weight: 400; } .product-sidebar .ps-channel.open::after { content: '−'; } /* ========================================================= THIRD LEVEL OEM / AFTERMARKET OPENS TO RIGHT ========================================================= */ .product-sidebar .ps-channels.open { position: absolute; left: 100%; top: 0; width: 250px; padding: 5px; background: #e9ae31; border: 1px solid #ffffff; box-shadow: 0 12px 24px rgba(8, 28, 48, .20); z-index: 6000; } /* ========================================================= CHANNEL WRAPPER ========================================================= */ .product-sidebar .ps-channels > div { position: relative; } /* ========================================================= QUICK SERVICE / REGULAR PARTS ========================================================= */ .product-sidebar .ps-leaves { display: none; } .product-sidebar .ps-leaves.open { display: block; position: absolute; left: 100%; top: 0; width: 240px; margin: 0; padding: 5px; background: #e9ae31; border: 1px solid #ffffff; box-shadow: 0 12px 24px rgba(8, 28, 48, .20); z-index: 7000; } /* ========================================================= LEAF LINKS ========================================================= */ .product-sidebar .ps-leaves a, .product-sidebar .ps-panel > li > a { display: block; padding: 9px 13px; color: #513406; border-bottom: 1px solid rgba(255,255,255,.45); font: 600 10px/1.25 Montserrat, Arial, sans-serif; text-decoration: none; } /* ========================================================= HOVER ========================================================= */ .product-sidebar .ps-leaves a:hover, .product-sidebar .ps-panel > li > a:hover { background: rgba(255,255,255,.16); } /* ========================================================= KEEP THE CAR DIRECTLY BESIDE SIDEBAR ========================================================= */ .hero-visual { display: flex !important; align-items: stretch; width: 100%; overflow: visible !important; position: relative; } /* ========================================================= CAR IMAGE ========================================================= */ .hero-visual .hero-car-image { flex: 1 1 auto; order: 2; min-width: 0; width: auto; margin: 0; height: 280px; overflow: hidden; background: #07182b; position: relative; z-index: 1; } /* ========================================================= CAR IMAGE ITSELF ========================================================= */ .hero-visual .hero-car-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ========================================================= CAR OVERLAY ========================================================= */ .hero-visual .hero-car-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to right, rgba(7,24,43,.10), transparent 40% ); } /* ========================================================= MAKE SURE PRODUCT CONTENT DOES NOT GET WRAPPED BESIDE THE SIDEBAR ========================================================= */ .product-sidebar + .hero-car-image { flex: 1 1 auto; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 850px) { .hero-visual { display: flex !important; flex-direction: column !important; } .product-sidebar { width: 100%; min-width: 100%; flex: none; min-height: auto; padding: 0 20px; border-right: 0; border-bottom: 1px solid #e4d0a0; box-shadow: none; } .hero-visual .hero-car-image { width: 100%; flex: none; height: 300px; order: 2; } /* Mobile first-level panel stays below its division. */ .product-sidebar .ps-panel { position: static; width: auto; margin: 0 -20px; padding: 0 20px 8px; border: 0; box-shadow: none; } /* Mobile second-level */ .product-sidebar .ps-channels.open { position: static; width: auto; margin: 0 -20px; padding: 0 20px; border: 0; box-shadow: none; background: rgba(255,255,255,.12); } /* Mobile third-level */ .product-sidebar .ps-leaves.open { position: static; width: auto; margin: 0 -20px; padding: 0 20px; border: 0; box-shadow: none; background: rgba(255,255,255,.10); } .product-sidebar .ps-division { font-size: 11px; } } /* ========================================================= DESKTOP LARGE SCREEN ========================================================= */ @media (min-width: 1200px) { .product-sidebar { flex-basis: 260px; width: 260px; min-width: 260px; padding-left: 22px; padding-right: 22px; } .hero-visual .hero-car-image { height: 280px; } } /* ========================================================= VERY LARGE SCREEN ========================================================= */ @media (min-width: 1600px) { .product-sidebar { flex-basis: 260px; width: 260px; } } .product-sidebar .ps-channel,.ps-panel,.ps-channels{background:#DE802B}.product-sidebar .ps-channel,.product-sidebar .ps-branch-button{border-color:#DE802B}.product-sidebar .ps-title,.product-sidebar .ps-toggle{color:#DE802B}