.overlay{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity var(--duration-medium) ease,visibility var(--duration-medium) ease;visibility:hidden;width:100%}.overlay.show{opacity:1;visibility:visible}.overlay-content{background-color:white;display:flex;flex-direction:column;max-width:1200px;opacity:0;position:relative;transform:translateY(1.2rem);transition:transform var(--duration-medium) var(--ease-out-slow),opacity var(--duration-medium) var(--ease-out-slow);width:90%}.overlay.show .overlay-content{opacity:1;transform:translateY(0)}.overlay-header{align-items:center;background-color:var(--color-brand-black);border-bottom:3px solid var(--color-brand-green);color:white;display:flex;height:50px;justify-content:space-between;position:relative}.overlay-header h2{color:white;font-size:.9em;font-weight:700;margin:0;padding:0 20px}#compatibilityCount{font-size:.75em;font-weight:400;opacity:.7}.close-container{align-items:center;display:flex;height:100%;position:absolute;right:0;top:0}.close-text{color:white;font-size:.7em;font-weight:700;letter-spacing:.05em;padding:0 20px}.close-button{align-items:center;background-color:var(--color-brand-green);border:none;color:white;cursor:pointer;display:flex;height:100%;justify-content:center;padding:0;transition:filter var(--duration-short) ease,transform var(--duration-short) ease;width:50px}.close-button:hover{filter:brightness(1.15);transform:scale(1.05)}.close-button:active{filter:brightness(.9);transform:scale(.97)}.close-button:focus-visible{outline:2px solid white;outline-offset:-4px}.close-button svg{height:24px;width:24px}.overlay-body{display:flex;position:relative}.overlay-body:after{background-color:var(--color-border-light);bottom:0;content:"";left:50%;position:absolute;top:0;width:1px}.compatibility-list{display:flex;flex:1;flex-direction:column;max-height:80vh;overflow-y:auto}.compatibility-list:after{background:linear-gradient(180deg,transparent,white);bottom:0;content:"";display:block;height:4rem;left:0;margin-top:-4rem;min-height:4rem;pointer-events:none;position:sticky;right:0;transition:opacity var(--duration-medium) ease}.compatibility-list.scrolled-to-bottom:after{opacity:0}.compatibility-list::-webkit-scrollbar{width:8px}.compatibility-list::-webkit-scrollbar-track{background:#f1f1f1}.compatibility-list::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.compatibility-list::-webkit-scrollbar-thumb:hover{background:#555}.brand-list{flex:0 0 auto;margin:0 0 1rem;min-width:200px;opacity:0;transform:translateY(.6rem);transition:opacity var(--duration-medium) var(--ease-out-slow),transform var(--duration-medium) var(--ease-out-slow)}.overlay.show .brand-list{opacity:1;transform:translateY(0)}.brand-list h3{background-color:#f0f0f0;font-size:clamp(1.2rem,2vw,1.4rem);font-weight:600;margin:0;padding:.75rem 1rem;position:sticky;top:0;width:100%;z-index:1}.brand-list ul{display:grid;gap:.75rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));list-style-type:none;margin:0;padding:1rem 1.25rem}.brand-list li{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.5;padding:.25rem 0}.brand-list li.variant{color:#505050;padding-left:1.5rem;position:relative}.brand-list li.variant:before{color:var(--color-brand-green);content:"\2022";left:.4rem;position:absolute}.pad-info{display:flex;flex:1;flex-direction:column}.pad-info h2{align-self:flex-start;font-weight:700;margin:0 0 20px;padding:5%}.pad-image{align-items:center;display:flex;height:auto;justify-content:center;max-height:600px;width:100%}.pad-image img{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;opacity:0;padding:10%;transform:scale(.95);transition:transform var(--duration-long) var(--ease-out-slow),opacity var(--duration-long) var(--ease-out-slow);transition-delay:.15s}.overlay.show .pad-image img{opacity:1;transform:scale(1)}@media (max-width:768px){.compatibility-list{max-height:50vh}.brand-list ul{grid-template-columns:1fr;padding:.5rem 1rem}}@media (prefers-reduced-motion){.overlay-content{transform:none;transition:opacity var(--duration-medium) ease}.close-button:active,.close-button:hover,.overlay.show .overlay-content{transform:none}.close-button{transition:filter var(--duration-short) ease}.pad-image img{opacity:1;transform:none;transition:none;transition-delay:0s}.brand-list,.overlay.show .pad-image img{transform:none}.brand-list{opacity:1;transition:none}}