:root{--card-width:236px;--card-expanded-width:500px;--card-height:400px;--card-border-radius:4px;--card-gap:16px;--card-padding:16px;--animation-duration:.5s;--color-subtitle:#6c7073;--color-primary-black:rgba(0,0,0,1);--color-primary-white:rgba(255,255,255,1);--color-overlay:rgba(0,0,0,0.7);--color-scrollbar-track:rgba(228,228,228,1);--color-scrollbar-thumb:rgba(40,40,48,1);--color-scrollbar-thumb-text:rgba(168,170,172,1);--color-lexus-gray:rgba(226,232,239,1);--color-lexus-gray-disabled:rgba(244,246,251,1);--color-lexus-gray-disabled-font:rgba(176,184,192,1);--color-lexus-blue:rgba(32,54,92,1)}
@keyframes fadeIn{from{opacity:0;transform:scale(0)}
to{opacity:1;transform:scale(1)}
}
@keyframes fadeInText{from{opacity:0}
to{opacity:1}
}
.new-cars-shared-features-wrapper{position:relative;overflow:hidden}
.new-cars-shared-features-cards-wrapper{display:flex;justify-content:center;align-items:center;padding-bottom:32px}
.new-cars-shared-features-title{padding:40px 16px 64px;text-align:center;h1,h2{font-family:"Toyota Regular",arial,helvetica,sans-serif;font-weight:400;font-size:clamp(3rem,5vw,6rem);line-height:1;text-transform:none;margin:0}
h3{font-weight:400;font-size:18px;line-height:1.33;text-transform:none;margin:0}
p{font-weight:400;font-size:16px;line-height:1.5;color:var(--color-subtitle);margin:0}
}
.dxp-toyota .new-cars-shared-features-title{h1,h2{font-size:clamp(3rem,4.5vw,5.2rem)}
}
.new-cars-shared-features-arrow-wrapper{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;margin-inline-end:4rem}
.new-cars-shared-features-arrow-right,.new-cars-shared-features-arrow-left{display:flex;justify-content:center;align-items:center;width:40px;aspect-ratio:1;cursor:pointer;&.disabled{pointer-events:none;cursor:not-allowed;.new-cars-shared-features-arrow-icon{background-color:var(--color-scrollbar-track);color:var(--color-scrollbar-thumb-text);cursor:not-allowed}
}
}
.new-cars-shared-features-arrow-right{transform:rotate(180deg)}
.new-cars-shared-features-arrow-icon{width:40px;padding:8px;aspect-ratio:1;border-radius:50%;background-color:var(--color-lexus-gray);color:var(--color-primary-black)}
.new-cars-shared-features-arrow-icon:hover{background-color:#9ea2a6}
.dxp-toyota{.new-cars-shared-features-arrow-icon{background-color:var(--color-primary-black);color:var(--color-primary-white)}
.new-cars-shared-features-arrow-icon:hover{background-color:rgba(0,0,0,0.5)}
&.new-cars-shared-features-arrow-left.disabled,&.new-cars-shared-features-arrow-right.disabled{.new-cars-shared-features-arrow-icon{background-color:var(--color-lexus-gray-disabled);color:var(--color-lexus-gray-disabled-font);cursor:not-allowed}
}
}
.new-cars-shared-features-cards{list-style:none;display:flex;padding:0 var(--card-padding) 32px;gap:var(--card-gap);overflow-x:auto;user-select:none;margin:0;&::-webkit-scrollbar{height:4px}
&::-webkit-scrollbar-track{background:var(--color-scrollbar-track);border-radius:4px}
&::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border-radius:4px;&:hover{background:#555}
}
}
.new-cars-shared-features-card{--animation-delay:0;min-width:var(--card-width);max-width:var(--card-width);position:relative;cursor:pointer;opacity:0;transition:min-width var(--animation-duration) ease-out;animation:fadeIn var(--animation-duration) forwards ease-out;animation-delay:var(--animation-delay);transform-origin:bottom left;figure{margin:0;width:100%;height:var(--card-height);position:relative}
&.active .new-cars-shared-features-select-button::after{content:"−"}
}
.new-cars-shared-features-card-image{border-radius:var(--card-border-radius);width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.new-cars-shared-features-headline{font-size:16px;font-weight:400;width:var(--card-width);height:60px;display:flex;align-items:flex-end;line-height:1.3;margin:0 0 1rem 0;text-align:start}
.new-cars-shared-features-select-button{position:absolute;top:var(--card-padding);right:var(--card-padding);background-color:var(--color-primary-white);backdrop-filter:blur(4px);box-shadow:0 0 20px 0 rgba(0,0,0,0.25);border-radius:50%;width:40px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .2s ease;&::after{content:"+";font-size:18px;line-height:1}
}
.new-cars-shared-features-bottom{visibility:hidden;background-color:var(--color-primary-white);height:160px;overflow-y:auto;position:absolute;left:var(--card-padding);right:var(--card-padding);bottom:var(--card-padding);display:flex;flex-direction:column;justify-content:space-between;padding:24px var(--card-padding);z-index:2;&::-webkit-scrollbar{width:4px;background:transparent}
&::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar-thumb-text);border-radius:2px}
}
.new-cars-shared-features-bottom-description{flex-grow:1;font-size:16px;font-weight:400;line-height:1.375;margin:0}
.new-cars-shared-features-bottom-readmore{display:flex;align-items:center;gap:8px;width:fit-content;font-weight:400;font-size:14px;line-height:1.43;padding-top:2rem;padding-bottom:4px;border-bottom:1px solid var(--color-primary-black);text-decoration:none;color:inherit;transition:opacity .3s ease;&:hover{opacity:.7}
p{margin:0}
svg{width:20px;height:20px;flex-shrink:0}
}
.new-cars-shared-features-modal{position:fixed;inset:0;background-color:var(--color-overlay);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--animation-duration) ease,visibility var(--animation-duration) ease;&.active{opacity:1;visibility:visible}
}
.new-cars-shared-features-modal-content{background:var(--color-primary-white);padding:32px;margin:20px;width:100%;min-height:296px;max-height:80%;overflow-y:auto;position:relative;display:flex;flex-direction:column;justify-content:space-between;p{margin-block-start:6rem;margin-block-end:4rem;font-size:16px;line-height:1.6}
}
.new-cars-shared-features-modal-close{background:transparent;border:0;position:absolute;top:var(--card-padding);right:var(--card-padding);cursor:pointer;padding:8px;svg{width:40px;height:40px;background-color:var(--color-primary-black);color:var(--color-primary-white)}
}
.dxp-toyota .new-cars-shared-features-modal-close svg{border-radius:50%}
.new-cars-shared-features-modal-link{display:flex;justify-content:center;align-items:center;background-color:var(--color-lexus-blue);color:var(--color-primary-white);width:100%;text-align:center;text-decoration:none;padding:20px 0;transition:background-color .3s ease;&:hover{background-color:rgba(32,54,92,0.8)}
}
.dxp-toyota .new-cars-shared-features-modal-link{background-color:var(--color-scrollbar-thumb);&:hover{background-color:rgba(40,40,48,0.75)}
}
.external-link-icon{width:20px;height:20px;vertical-align:middle;margin-left:4px;fill:var(--color-primary-white)}
@media(max-width:767px){.new-cars-shared-features-title{padding:40px var(--card-padding) 64px;h1,h2{font-size:clamp(2.5rem,8vw,3.2rem);line-height:1.125}
}
.dxp-toyota .new-cars-shared-features-title{h1,h2{font-size:clamp(2.5rem,7vw,3rem)}
}
.new-cars-shared-features-card{cursor:auto;&.has-readmore .new-cars-shared-features-bottom{padding-bottom:55px}
}
.new-cars-shared-features-bottom{flex-direction:column;align-items:baseline;padding:24px var(--card-padding);left:0;right:0;bottom:0;width:100%}
}
@media(min-width:768px){.new-cars-shared-features-card.active{min-width:var(--card-expanded-width);max-width:var(--card-expanded-width);.new-cars-shared-features-bottom{opacity:0;animation:fadeInText var(--animation-duration) forwards ease-out;visibility:visible}
}
}
@media(min-width:992px){.new-cars-shared-features-title{padding:32px 150px 64px}
}