.tpm-mosaic-hero{--tpm-green: #88c322;--tpm-blue: #0e82e0;--tpm-navy: #062b55;--tpm-navy-deep: #041f3e;--tpm-ink: #172033;--tpm-border: #dce2e8;width:100%;background:#fff;color:var(--tpm-ink)}.tpm-mosaic-hero *{box-sizing:border-box}.tpm-mosaic-hero__inner{width:calc(100% + -0px);max-width:1680px;margin:12px auto 0;padding:10px 0;display:grid;grid-template-columns:minmax(280px,1.08fr) minmax(0,1.5fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,1fr);grid-template-rows:400px 130px 130px;grid-template-areas:"vehicle main main main main" "vehicle gaskets aisin aisin hard" "denso denso brands brands hard";gap:9px}.tpm-mosaic-hero__vehicle{grid-area:vehicle;min-width:0;padding:26px 22px 20px;background:linear-gradient(145deg,var(--tpm-navy-deep),var(--tpm-navy));color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #0523431a}.tpm-mosaic-hero__vehicle-toggle{display:none}.tpm-mosaic-hero__vehicle-copy{margin-bottom:20px}.tpm-mosaic-hero__eyebrow{display:block;margin-bottom:7px;color:var(--tpm-green);font-size:11px;font-weight:800;letter-spacing:.09em}.tpm-mosaic-hero__vehicle-copy h2{margin:0;color:#fff;font-size:clamp(22px,1.55vw,30px);line-height:1.05;font-weight:800}.tpm-mosaic-hero__vehicle-copy p{margin:9px 0 0;color:#ffffffc7;font-size:13px;line-height:1.45}.tpm-mosaic-hero__filter-grid{display:grid;grid-template-columns:1fr;gap:8px}.tpm-mosaic-hero__field{display:block}.tpm-mosaic-hero__field select,.tpm-mosaic-hero__find{width:100%;min-height:47px;border-radius:6px;font:inherit;font-size:14px;font-weight:650}.tpm-mosaic-hero__field select{padding:0 38px 0 13px;border:1px solid rgba(255,255,255,.2);background:#fff;color:#202a38;cursor:pointer}.tpm-mosaic-hero__field select:disabled{opacity:.62;cursor:not-allowed;background:#edf0f3}.tpm-mosaic-hero__field select:focus{outline:3px solid rgba(14,130,224,.2);border-color:var(--tpm-blue)}.tpm-mosaic-hero__find{border:0;background:linear-gradient(90deg,#82c41b,#5cac17);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .18s ease,filter .18s ease}.tpm-mosaic-hero__find:not(:disabled):hover{filter:brightness(1.04);transform:translateY(-1px)}.tpm-mosaic-hero__find:disabled{opacity:.48;cursor:not-allowed}.tpm-mosaic-hero__search-icon{position:relative;width:17px;height:17px;border:2px solid currentColor;border-radius:50%}.tpm-mosaic-hero__search-icon:after{content:"";position:absolute;width:7px;height:2px;right:-6px;bottom:-3px;background:currentColor;border-radius:3px;transform:rotate(45deg)}.tpm-mosaic-hero__reset{display:inline-block;margin:11px 0 0;padding:0;border:0;background:transparent;color:#ffffffb8;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer}.tpm-mosaic-hero__reset:hover{color:#fff}.tpm-mosaic-hero__status{min-height:16px;margin:8px 0 0;color:#ffffffb8;font-size:11px}.tpm-mosaic-hero__results{display:none}.tpm-mosaic-hero__slot{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:10px;background:#eef1f4}.tpm-mosaic-hero__slot--main{grid-area:main}.tpm-mosaic-hero__slot--timing{grid-area:timing}.tpm-mosaic-hero__slot--gaskets{grid-area:gaskets}.tpm-mosaic-hero__slot--aisin{grid-area:aisin}.tpm-mosaic-hero__slot--denso{grid-area:denso}.tpm-mosaic-hero__slot--brands{grid-area:brands}.tpm-mosaic-hero__slot--hard{grid-area:hard}.tpm-mosaic-hero__tile-slide{display:none;width:100%;height:100%}.tpm-mosaic-hero__tile-slide:first-child{display:block}.tpm-mosaic-hero__tile{position:relative;display:flex;width:100%;height:100%;overflow:hidden;color:inherit;text-decoration:none;isolation:isolate}a.tpm-mosaic-hero__tile{cursor:pointer}.tpm-mosaic-hero__media,.tpm-mosaic-hero__overlay{position:absolute;top:0;right:0;bottom:0;left:0}.tpm-mosaic-hero__media{z-index:0}.tpm-mosaic-hero__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s ease,filter .35s ease}.tpm-mosaic-hero__image--mobile{display:none}.tpm-mosaic-hero__overlay{z-index:1;background:linear-gradient(90deg,rgba(2,20,40,var(--tile-overlay, .2)),rgba(2,20,40,calc(var(--tile-overlay, .2) * .55)) 48%,#02142800);pointer-events:none}.tpm-mosaic-hero__tile--dark .tpm-mosaic-hero__overlay{background:linear-gradient(90deg,rgba(255,255,255,var(--tile-overlay, .2)),#fff0 70%)}a.tpm-mosaic-hero__tile:hover .tpm-mosaic-hero__image{transform:scale(1.035)}a.tpm-mosaic-hero__tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;border:0 solid transparent;pointer-events:none;transition:border-color .2s ease,border-width .2s ease}a.tpm-mosaic-hero__tile:hover:after{border-width:2px;border-color:var(--tpm-green)}.tpm-mosaic-hero__tile-content{position:relative;z-index:3;width:min(78%,520px);padding:23px;display:flex;flex-direction:column;pointer-events:none}.tpm-mosaic-hero__tile--light{color:#fff}.tpm-mosaic-hero__tile--dark{color:var(--tpm-navy)}.tpm-mosaic-hero__tile--text-bottom-left .tpm-mosaic-hero__tile-content{align-self:flex-end;justify-content:flex-end}.tpm-mosaic-hero__tile--text-top-left .tpm-mosaic-hero__tile-content{align-self:flex-start;justify-content:flex-start}.tpm-mosaic-hero__tile--text-center .tpm-mosaic-hero__tile-content{margin:auto;align-items:center;justify-content:center;text-align:center}.tpm-mosaic-hero__kicker{margin-bottom:5px;color:var(--tpm-green);font-size:11px;line-height:1;font-weight:800;letter-spacing:.08em}.tpm-mosaic-hero__tile h3{margin:0;font-size:clamp(20px,1.8vw,34px);line-height:1.03;font-weight:850;letter-spacing:-.025em}.tpm-mosaic-hero__slot--timing h3,.tpm-mosaic-hero__slot--gaskets h3,.tpm-mosaic-hero__slot--brands h3{font-size:clamp(17px,1.25vw,24px)}.tpm-mosaic-hero__tile p{max-width:430px;margin:8px 0 0;font-size:13px;line-height:1.4}.tpm-mosaic-hero__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 13px;border-radius:5px;font-size:11px;font-weight:800;letter-spacing:.02em}.tpm-mosaic-hero__cta--green{background:var(--tpm-green);color:#fff}.tpm-mosaic-hero__cta--light{background:#fffffff0;color:var(--tpm-navy)}.tpm-mosaic-hero__placeholder,.tpm-mosaic-hero__empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf1f4,#dce3e8);color:#7d8894;font-size:11px;font-weight:800;letter-spacing:.05em}.tpm-mosaic-hero__slot--main .tpm-mosaic-hero__empty{background:linear-gradient(135deg,#102f4d,#0a4e7c);color:#ffffffbf}.tpm-mosaic-hero__slot--hard .tpm-mosaic-hero__empty{background:linear-gradient(160deg,#0a365e,#062443);color:#ffffffbf}.tpm-mosaic-hero__benefits{margin-top:2px;background:linear-gradient(90deg,#022b55,#063c73);color:#fff}.tpm-mosaic-hero__benefits-inner{width:min(100%,1680px);min-height:92px;margin:0 auto;display:grid;grid-template-columns:.92fr 1.15fr 1fr .92fr .92fr;align-items:center}.tpm-mosaic-hero__benefit{min-width:0;padding:12px 19px;display:flex;align-items:center;gap:12px;border-right:1px solid rgba(136,195,34,.45)}.tpm-mosaic-hero__benefit:last-child{border-right:0}.tpm-mosaic-hero__benefit-icon{flex:0 0 42px;color:var(--tpm-green)}.tpm-mosaic-hero__benefit-icon svg{display:block;width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tpm-mosaic-hero__benefit strong,.tpm-mosaic-hero__benefit span{display:block}.tpm-mosaic-hero__benefit strong{margin-bottom:4px;font-size:11px;line-height:1.25}.tpm-mosaic-hero__benefit span{color:#ffffffd6;font-size:10px;line-height:1.35}@media(max-width:1250px){.tpm-mosaic-hero__inner{grid-template-columns:minmax(260px,.95fr) repeat(4,minmax(0,1fr));grid-template-rows:210px 165px 165px}.tpm-mosaic-hero__vehicle{padding:21px 17px}.tpm-mosaic-hero__field select,.tpm-mosaic-hero__find{min-height:43px}.tpm-mosaic-hero__tile-content{padding:18px}}@media(max-width:990px){.tpm-mosaic-hero__inner{grid-template-columns:minmax(250px,.8fr) repeat(2,minmax(0,1fr));grid-template-rows:230px 180px 180px 190px;grid-template-areas:"vehicle main main" "vehicle timing gaskets" "vehicle aisin hard" "denso denso brands"}.tpm-mosaic-hero__benefits-inner{grid-template-columns:repeat(3,minmax(0,1fr))}.tpm-mosaic-hero__benefit:nth-child(3){border-right:0}}@media(max-width:760px){.tpm-mosaic-hero{width:100vw;max-width:none;margin-left:calc(50% - 50vw);overflow:hidden}.tpm-mosaic-hero__inner{width:100%;margin-left:auto;margin-right:auto;padding:8px;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content max-content;grid-template-areas:"vehicle" "main" "denso" "brands";align-content:start;gap:7px}.tpm-mosaic-hero__slot--gaskets,.tpm-mosaic-hero__slot--aisin,.tpm-mosaic-hero__slot--hard{display:none}.tpm-mosaic-hero__vehicle{min-height:0;padding:0;border-radius:8px;background:transparent;box-shadow:none}.tpm-mosaic-hero__vehicle-toggle{display:flex;width:100%;min-height:50px;padding:0 16px;align-items:center;justify-content:space-between;border:0;border-radius:7px;background:var(--tpm-green);color:#fff;font-size:15px;font-weight:600;cursor:pointer}.tpm-mosaic-hero__vehicle-toggle-icon{font-size:21px;font-weight:400}.tpm-mosaic-hero__vehicle-body{display:none;margin-top:7px;padding:12px 8px 20px;border-radius:8px;background:#0e82e0}.tpm-mosaic-hero__vehicle.is-open .tpm-mosaic-hero__vehicle-body{display:block}.tpm-mosaic-hero__vehicle-copy{margin-bottom:22px}.tpm-mosaic-hero__vehicle-copy h2{font-size:20px!important;color:#fff!important}.tpm-mosaic-hero__filter-grid{grid-template-columns:1fr;gap:12px}.tpm-mosaic-hero__field select{height:50px;min-height:50px;font-size:16px}.tpm-mosaic-hero__find{min-height:54px;font-size:14px;font-weight:500}.tpm-mosaic-hero__slot--main{height:225px}.tpm-mosaic-hero__slot--timing,.tpm-mosaic-hero__slot--gaskets{height:180px}.tpm-mosaic-hero__slot--aisin,.tpm-mosaic-hero__slot--hard{height:205px}.tpm-mosaic-hero__slot--denso,.tpm-mosaic-hero__slot--brands{height:140px}.tpm-mosaic-hero__image--mobile{display:block}.tpm-mosaic-hero__image--mobile+.tpm-mosaic-hero__image--desktop{display:none}.tpm-mosaic-hero__tile-content{width:88%;padding:15px}.tpm-mosaic-hero__tile h3{font-size:22px}.tpm-mosaic-hero__slot--timing h3,.tpm-mosaic-hero__slot--gaskets h3,.tpm-mosaic-hero__slot--brands h3,.tpm-mosaic-hero__slot--hard h3{font-size:16px}.tpm-mosaic-hero__tile p{font-size:11px}.tpm-mosaic-hero__cta{margin-top:9px;padding:7px 10px;font-size:9px}.tpm-mosaic-hero__benefits{display:none}.tpm-mosaic-hero__find{background:#8cc63f;color:#fff}.tpm-mosaic-hero__find:disabled{opacity:.75}}@media(max-width:430px){.tpm-mosaic-hero__slot--main{height:200px}.tpm-mosaic-hero__slot--timing,.tpm-mosaic-hero__slot--gaskets{height:165px}.tpm-mosaic-hero__slot--hard{height:185px}.tpm-mosaic-hero__tile-content{width:94%;padding:12px}}@media(min-width:761px){.tpm-mosaic-hero__slot--main{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.tpm-mosaic-hero__slot--timing{width:calc(100% + 42px);margin-left:-42px;clip-path:polygon(0 0,100% 0,100% 100%,42px 100%)}.tpm-mosaic-hero__slot--gaskets{clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)}.tpm-mosaic-hero__slot--aisin{width:calc(100% + 30px);margin-left:-30px;clip-path:polygon(30px 0,100% 0,calc(100% - 30px) 100%,0 100%)}.tpm-mosaic-hero__slot--denso{clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)}.tpm-mosaic-hero__slot--brands{width:calc(100% + 30px);margin-left:-30px;clip-path:polygon(30px 0,calc(100% - 30px) 0,calc(100% - 48px) 100%,0 100%)}.tpm-mosaic-hero__slot--hard{width:calc(100% + 48px);margin-left:-48px;clip-path:polygon(48px 0,100% 0,100% 100%,0 100%)}}@media(min-width:761px){.tpm-mosaic-hero__vehicle{background:#fff;color:var(--tpm-navy);border:1px solid #dce2e8;box-shadow:0 4px 16px #062b5514}.tpm-mosaic-hero__vehicle-copy h2{color:var(--tpm-navy)}.tpm-mosaic-hero__vehicle-copy p{color:#566273}.tpm-mosaic-hero__eyebrow{color:var(--tpm-green)}.tpm-mosaic-hero__reset{color:#667085}.tpm-mosaic-hero__reset:hover{color:var(--tpm-navy)}.tpm-mosaic-hero__status{color:#667085}}@media(min-width:761px){.tpm-mosaic-hero__vehicle{padding:20px 18px 12px}.tpm-mosaic-hero__vehicle-copy{margin-bottom:12px}.tpm-mosaic-hero__filter-grid{gap:12px}.tpm-mosaic-hero__field select,.tpm-mosaic-hero__find{min-height:63px}.tpm-mosaic-hero__reset{margin-top:6px}.tpm-mosaic-hero__status:empty{display:none}}.tpm-mosaic-hero__field select{background:#fff;border-color:#d7dee7;color:var(--tpm-navy)}.tpm-mosaic-hero__field select:disabled{background:#fff;border-color:#d5e5f2;color:#7b8794;opacity:1;cursor:not-allowed}.tpm-mosaic-hero__field select:has(option:checked:not([value=""])){background:#eef6fc;border-color:#c9dff0;color:var(--tpm-navy)}.tpm-mosaic-hero__field select:focus{outline:2px solid rgba(14,130,224,.14);border-color:#b9d8ef}@media(min-width:761px){.tpm-mosaic-hero__vehicle{align-self:start;height:auto}}@media(min-width:761px){.tpm-mosaic-hero__slot--denso,.tpm-mosaic-hero__slot--brands{grid-row:3;grid-column:1 / 5;width:calc(50% + 10px)}.tpm-mosaic-hero__slot--denso{justify-self:start}.tpm-mosaic-hero__slot--brands{justify-self:end}}.tpm-mosaic-hero__slot--main{position:relative;overflow:hidden}.tpm-mosaic-hero__main-track{display:flex;width:100%;height:100%;transition:transform .65s ease;will-change:transform}.tpm-mosaic-hero__slot--main .tpm-mosaic-hero__tile-slide{display:block!important;flex:0 0 100%;width:100%;height:100%;min-width:100%}.tpm-mosaic-hero__main-dots{position:absolute;left:50%;bottom:12px;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:8px}.tpm-mosaic-hero__main-dot{width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:#ffffffb3;cursor:pointer}.tpm-mosaic-hero__main-dot.is-active{background:#8cc63f;border-color:#8cc63f}@media(min-width:761px){.tpm-mosaic-hero__slot--main img{width:100%;height:100%;object-fit:cover!important;object-position:center center!important}}@media(max-width:760px){.tpm-mosaic-hero__slot--main img{width:100%;height:100%;object-fit:contain!important;object-position:center center!important}.tpm-mosaic-hero__media:has(.tpm-mosaic-hero__image--mobile) .tpm-mosaic-hero__image--desktop{display:none}}@media(min-width:761px){.tpm-mosaic-hero__benefits{background:var(--tpm-blue, #3884e1)!important}.tpm-mosaic-hero__benefits-inner{min-height:65px!important}.tpm-mosaic-hero__benefit{padding-top:6px!important;padding-bottom:6px!important}.tpm-mosaic-hero__benefit-icon{flex-basis:36px!important}.tpm-mosaic-hero__benefit-icon svg{width:36px!important;height:36px!important}}@media(min-width:991px){.tpm-mosaic-hero__inner{grid-template-columns:340px minmax(0,1fr)!important;grid-template-rows:495px 195px!important;grid-template-areas:none!important;gap:9px!important}.tpm-mosaic-hero__vehicle{grid-area:auto!important;grid-column:1!important;grid-row:1 / 3!important;width:100%!important;height:100%!important;margin:0!important;align-self:stretch!important}.tpm-mosaic-hero__slot--main{grid-area:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;height:495px!important;margin:0!important;clip-path:none!important}.tpm-mosaic-hero__slot--gaskets,.tpm-mosaic-hero__slot--aisin,.tpm-mosaic-hero__slot--hard{display:none!important}.tpm-mosaic-hero__slot--denso,.tpm-mosaic-hero__slot--brands{grid-area:auto!important;grid-column:2!important;grid-row:2!important;width:calc(50% - 4.5px)!important;height:195px!important;margin:0!important;clip-path:none!important}.tpm-mosaic-hero__slot--denso{justify-self:start!important}.tpm-mosaic-hero__slot--brands{justify-self:end!important}}.tpm-mosaic-hero__vehicle-title{margin:0!important;display:flex;align-items:center;gap:9px;color:#154ba6!important;font-size:17px!important;line-height:1.2!important;font-weight:800!important}.tpm-mosaic-hero__vehicle-title-icon{width:40px;height:36px;flex:0 0 40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/*# sourceMappingURL=/cdn/shop/t/5/assets/tpm-home-mosaic-hero.css.map */
