.section-material-explorer{background:#fff}.material-explorer{--material-blue: #1351aa;--material-orange: #ff6540;--material-text: #303441;--material-muted: #6b7280;--material-gap: clamp(4px, .45vw, 10px);--material-item-width: min(190px, calc((100vw - ((var(--material-explorer-desktop-items) - 1) * var(--material-gap))) / var(--material-explorer-desktop-items)));background:#fff;color:var(--material-text);overflow:hidden}.material-explorer__inner{width:100%;padding-block:var(--material-padding-top, 30px) var(--material-padding-bottom, 28px)}.material-explorer__inner:not(.page-width){max-width:none}.material-explorer__header{margin-bottom:8px;text-align:center}.material-explorer__heading{margin:0;color:var(--material-blue);font-size:var(--material-heading-size, 56px);font-weight:800;line-height:1;letter-spacing:-.035em;text-transform:uppercase}.material-explorer__heading span{color:var(--material-orange);margin-right:.18em}.material-explorer__subheading{margin:10px 0 0;color:#66728a;font-size:var(--material-subheading-size, 18px);line-height:1.4}.material-explorer__shell{position:relative;min-height:400px;display:flex;align-items:center}.material-explorer__viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-block:58px 4px}.material-explorer__viewport::-webkit-scrollbar{display:none}.material-explorer__viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}.material-explorer__track{display:flex;align-items:center;gap:var(--material-gap);min-width:max-content;padding-inline:calc((100% - var(--material-item-width)) / 2)}.material-explorer__item{position:relative;flex:0 0 var(--material-item-width);max-width:none;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;scroll-snap-align:center;opacity:.72;transform:translateY(0);transform-origin:center center;will-change:transform,opacity}.material-explorer__select{width:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}@media(hover:hover)and (pointer:fine){.material-explorer__select{transition:transform .2s ease}.material-explorer__item:not(.is-active):hover{opacity:1!important}.material-explorer__item:not(.is-active) .material-explorer__select:hover{transform:translateY(-3px) scale(1.03)}}.material-explorer__select:focus-visible{outline:2px solid var(--material-blue);outline-offset:.5rem;border-radius:.4rem}.material-explorer__media{position:relative;width:230px;height:230px;display:block;transform:scale(.52);transform-origin:center bottom;will-change:transform}.material-explorer__media:after{content:"";position:absolute;z-index:0;left:17%;right:17%;bottom:4%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,#25324847,#25324814 44%,#25324800 76%);opacity:.52;filter:blur(2px);transform:scaleX(.9) scaleY(.78);transform-origin:center;pointer-events:none;transition:opacity .32s ease,transform .38s cubic-bezier(.22,1,.36,1)}.material-explorer__image{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;transform:translateZ(0);transform-origin:center center;backface-visibility:hidden;will-change:transform,opacity}.material-explorer__image--default{opacity:1}.material-explorer__image--active{opacity:0;visibility:hidden}.material-explorer__title{min-height:2.4em;color:#445064;font-size:var(--material-product-title-size, 16px);font-weight:600;line-height:1.2;text-align:center}.material-explorer__details{min-height:78px;display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:4px;opacity:0;visibility:hidden;transform:translateY(.8rem);will-change:transform,opacity}.material-explorer__performance{margin:0;color:var(--material-muted);font-size:var(--material-performance-size, 15px);line-height:1.35;text-align:center}.material-explorer__cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--material-button-height, 44px);padding:.7rem 1.5rem;border-radius:999px;background:var(--material-orange);color:#fff;font-size:var(--material-button-text-size, 14px);font-weight:600;line-height:1;text-decoration:none;box-shadow:0 5px 12px #ff65401f,0 1px 3px #26334b12;transition:box-shadow .2s ease,filter .2s ease,transform .2s ease}.material-explorer__cta:hover{color:#fff;filter:brightness(.96);box-shadow:0 7px 16px #ff654029,0 2px 4px #26334b14;transform:translateY(-1px)}.material-explorer__cta:focus-visible{outline:2px solid var(--material-blue);outline-offset:.25rem}.material-explorer__indicator{width:3rem;height:2px;display:block;border-radius:999px;background:var(--material-accent, var(--material-blue));transform:scaleX(0);transform-origin:center}.material-explorer__item.is-active{z-index:2;opacity:1;transform:translateY(-4px)}.material-explorer__item.is-active .material-explorer__media{transform:scale(1)}.material-explorer__item.is-active .material-explorer__media:after{opacity:.65;transform:scaleX(1.12) scaleY(.88)}.material-explorer__item.is-active .material-explorer__image--default{opacity:0;visibility:hidden}.material-explorer__item.is-active .material-explorer__image--active{opacity:1;visibility:visible}.material-explorer__item.is-active .material-explorer__title{color:var(--material-accent, var(--material-blue))}.material-explorer__item.is-active .material-explorer__details{opacity:1;visibility:visible;transform:translateY(0)}.material-explorer__item.is-active .material-explorer__indicator{transform:scaleX(1)}.material-explorer__arrow{position:absolute;z-index:5;top:48%;width:var(--material-arrow-size, 52px);height:var(--material-arrow-size, 52px);display:grid;place-items:center;padding:0;border:1px solid rgba(19,81,170,.18);border-radius:50%;background:#fffffff0;color:var(--material-blue);cursor:pointer;box-shadow:0 .6rem 1.8rem #1351aa14}.material-explorer__arrow svg{width:2rem;height:2rem}.material-explorer__arrow--previous{left:.2rem}.material-explorer__arrow--next{right:.2rem}.material-explorer__arrow:hover{background:var(--material-blue);color:#fff}.material-explorer__arrow:focus-visible{outline:2px solid var(--material-orange);outline-offset:.25rem}.material-explorer__arrow:disabled{opacity:.28;cursor:default}.material-explorer__empty{width:100%;color:var(--material-muted);text-align:center}@media screen and (max-width:749px){.material-explorer__inner{padding-block:var(--material-padding-top-mobile, 28px) var(--material-padding-bottom-mobile, 30px);padding-inline:0}.material-explorer__shell{min-height:410px}.material-explorer__track{gap:1rem;padding-inline:calc((100% - clamp(60vw,calc(180vw / var(--material-explorer-mobile-items)),86vw))/2)}.material-explorer__viewport{padding-block:32px 8px}.material-explorer__item{flex-basis:clamp(60vw,calc(180vw / var(--material-explorer-mobile-items)),86vw);min-height:330px;opacity:.72;transform:translateY(0)}.material-explorer__item.is-active{transform:translateY(-.6rem)}.material-explorer__title{font-size:var(--material-product-title-size-mobile, 16px)}.material-explorer__heading{font-size:var(--material-heading-size-mobile, 40px)}.material-explorer__subheading{font-size:var(--material-subheading-size-mobile, 15px)}.material-explorer__performance{font-size:var(--material-performance-size-mobile, 14px)}.material-explorer__cta{min-height:var(--material-button-height-mobile, 42px);font-size:var(--material-button-text-size-mobile, 14px)}.material-explorer__media{width:210px;height:210px;transform:scale(.72)}.material-explorer__item.is-active .material-explorer__media{transform:scale(1.08)}.material-explorer__arrow{top:40%;width:var(--material-arrow-size-mobile, 44px);height:var(--material-arrow-size-mobile, 44px)}.material-explorer__arrow--previous{left:.6rem}.material-explorer__arrow--next{right:.6rem}}@media(prefers-reduced-motion:reduce){.material-explorer__viewport{scroll-behavior:auto}.material-explorer__item,.material-explorer__image,.material-explorer__details,.material-explorer__indicator{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/47/assets/section-material-explorer.css.map */