.device-picker{--dp-radius: 1.6rem;--dp-radius-lg: 2.4rem;--dp-radius-sm: 1rem;--dp-line: color-mix(in srgb, rgba(var(--color-foreground)) 10%, transparent);--dp-muted: color-mix(in srgb, rgba(var(--color-foreground)) 55%, transparent);--dp-hover: color-mix(in srgb, rgba(var(--color-foreground)) 5%, transparent);--dp-tint: color-mix(in srgb, rgba(var(--color-accent)) 8%, transparent);--dp-scroll: 34rem;--dp-ease: cubic-bezier(.22, 1, .36, 1);--dp-elevated-bg: color-mix(in srgb, rgba(255, 255, 255) 80%, rgb(var(--color-background)));--dp-raised: linear-gradient( 180deg, rgb(var(--color-background)), color-mix(in srgb, rgba(var(--color-foreground)) 2.5%, rgb(var(--color-background))) );--dp-lift-1: 0 1px 1px rgba(var(--color-shadow), .04), 0 2px 6px -2px rgba(var(--color-shadow), .07);--dp-lift-2: 0 1px 2px rgba(var(--color-shadow), .05), 0 10px 24px -14px rgba(var(--color-shadow), .18);--dp-lift-3: 0 2rem 4rem -2.4rem rgba(var(--color-shadow), .35);display:grid;gap:3.2rem;align-items:start}@media(min-width:900px){.device-picker--split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4.8rem}}.device-picker__aside{display:flex;flex-direction:column;gap:1.6rem}.device-picker__sub{margin:0;font-size:1.55rem;line-height:1.6;color:var(--dp-muted)}.device-picker__steps{display:flex;flex-direction:column;gap:.4rem;margin:.8rem 0 0;padding:0;counter-reset:dp-step}.device-picker__step{position:relative}.device-picker__step:not(:last-child):after{content:"";position:absolute;inset-inline-start:2.6rem;top:4.2rem;bottom:-1.4rem;width:2px;margin-inline-start:-1px;border-radius:2px;background-color:var(--dp-line);background-image:linear-gradient(rgb(var(--color-accent)),rgb(var(--color-accent)));background-repeat:no-repeat;background-size:100% 0%;transition:background-size .4s var(--dp-ease)}.device-picker__step[data-dp-done=true]:after{background-size:100% 100%}.device-picker__step-btn{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1rem 1.2rem;border:0;border-radius:var(--dp-radius-sm);background:none;color:inherit;font:inherit;text-align:start;transition:background-color .18s var(--dp-ease)}.device-picker__step-num{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2.8rem;height:2.8rem;border:1px solid var(--dp-line);border-radius:50%;background-color:rgb(var(--color-background));font-size:1.35rem;font-weight:600;color:var(--dp-muted);transition:background-color .2s var(--dp-ease),border-color .2s var(--dp-ease),color .2s var(--dp-ease)}.device-picker__step-num-digit,.device-picker__step-num-check{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s var(--dp-ease),transform .2s var(--dp-ease)}.device-picker__step-num-check,.device-picker__step[data-dp-done=true] .device-picker__step-num-digit{opacity:0;transform:scale(.6)}.device-picker__step[data-dp-done=true] .device-picker__step-num-check{opacity:1;transform:none}.device-picker__step-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}.device-picker__step-title{font-size:1.5rem;font-weight:600;line-height:1.25;color:var(--dp-muted);transition:color .2s var(--dp-ease)}.device-picker__step-value{font-size:1.3rem;color:rgb(var(--color-accent));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-picker__step-value:empty{display:none}.device-picker__step[aria-current=step] .device-picker__step-num{border-color:rgb(var(--color-accent));background-color:rgb(var(--color-accent));color:rgb(var(--color-button-text))}.device-picker__step[aria-current=step] .device-picker__step-title{color:rgb(var(--color-foreground))}.device-picker__step[data-dp-done=true] .device-picker__step-num{border-color:rgb(var(--color-accent));color:rgb(var(--color-accent))}.device-picker__step[data-dp-done=true] .device-picker__step-title{color:rgb(var(--color-foreground))}.device-picker__perks{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0 0;padding:0}.device-picker__perk{display:flex;align-items:center;gap:.9rem;font-size:1.4rem;line-height:1.4;color:var(--dp-muted)}.device-picker__perk-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.9rem;height:1.9rem;border-radius:50%;background-color:var(--dp-tint);color:rgb(var(--color-accent))}.device-picker__card{container-type:inline-size;container-name:dp-card;position:relative;border:1px solid var(--dp-line);border-radius:var(--dp-radius);background:var(--dp-raised);box-shadow:var(--dp-lift-3);overflow:hidden}.device-picker__mini-steps,.device-picker__panels{position:relative}.device-picker__mini-steps{display:flex;align-items:center;gap:1.2rem;margin:0;padding:1.8rem 2.2rem}html:not(.js) .device-picker__mini-steps{display:none}.device-picker__mini-step{display:flex;align-items:center;gap:.8rem;min-width:0}.device-picker__mini-step:first-child{flex:1 1 auto}.device-picker__mini-step:first-child:after{content:"";flex:1 1 auto;height:2px;margin-inline-start:.4rem;border-radius:2px;background-color:var(--dp-line);background-image:linear-gradient(rgb(var(--color-accent)),rgb(var(--color-accent)));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .4s var(--dp-ease)}[dir=rtl] .device-picker__mini-step:first-child:after{background-position:100% 0}.device-picker__mini-step[data-dp-done=true]:after{background-size:100% 100%}.device-picker__mini-num{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2.4rem;height:2.4rem;border:1px solid var(--dp-line);border-radius:50%;background-color:rgb(var(--color-background));font-size:1.2rem;font-weight:600;color:var(--dp-muted);transition:background-color .2s var(--dp-ease),border-color .2s var(--dp-ease),color .2s var(--dp-ease)}.device-picker__mini-digit,.device-picker__mini-check{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s var(--dp-ease),transform .2s var(--dp-ease)}.device-picker__mini-check,.device-picker__mini-step[data-dp-done=true] .device-picker__mini-digit{opacity:0;transform:scale(.6)}.device-picker__mini-step[data-dp-done=true] .device-picker__mini-check{opacity:1;transform:none}.device-picker__mini-label{font-size:1.3rem;font-weight:600;line-height:1.2;color:var(--dp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s var(--dp-ease)}.device-picker__mini-step[aria-current=step] .device-picker__mini-num{border-color:rgb(var(--color-accent));background-color:rgb(var(--color-accent));color:rgb(var(--color-button-text))}.device-picker__mini-step[data-dp-done=true] .device-picker__mini-num{border-color:rgb(var(--color-accent));background-color:rgb(var(--color-background));color:rgb(var(--color-accent))}.device-picker__mini-step[aria-current=step] .device-picker__mini-label,.device-picker__mini-step[data-dp-done=true] .device-picker__mini-label{color:rgb(var(--color-foreground))}.device-picker__panels{display:grid}html.js .device-picker__panels>*{grid-area:1 / 1}.device-picker__panel{display:flex;flex-direction:column;min-width:0;padding:2.2rem}html.js .device-picker__panel{transition:transform .34s var(--dp-ease),opacity .22s var(--dp-ease),visibility .34s}html.js .device-picker[data-dp-step=brands] .device-picker__panel--models,html.js .device-picker[data-dp-step=models] .device-picker__panel--brands{opacity:0;visibility:hidden;pointer-events:none}html.js .device-picker[data-dp-step=brands] .device-picker__panel--models{transform:translate(3rem)}html.js .device-picker[data-dp-step=models] .device-picker__panel--brands,[dir=rtl] html.js .device-picker[data-dp-step=brands] .device-picker__panel--models{transform:translate(-3rem)}[dir=rtl] html.js .device-picker[data-dp-step=models] .device-picker__panel--brands{transform:translate(3rem)}.device-picker__panel-head{display:flex;align-items:center;gap:1rem;min-height:3.2rem;margin-bottom:1.4rem}.device-picker__label{margin:0;font-size:1.4rem;font-weight:600;color:var(--dp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-picker__token{display:inline-flex;align-items:center;gap:.7rem;min-width:0;padding:.4rem 1.1rem .4rem .4rem;height:3.2rem;border-radius:10rem;background-color:var(--dp-hover)}.device-picker__token:has(.device-picker__token-logo[hidden]){padding-inline-start:1.1rem}.device-picker__token-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.4rem;height:2.4rem;padding:.3rem;border-radius:50%;background-color:rgb(var(--color-background))}.device-picker__token-logo[hidden]{display:none}.device-picker__token-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.device-picker__token-name{min-width:0;font-size:1.4rem;font-weight:600;line-height:1.2;color:rgb(var(--color-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-picker__back{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;padding:.6rem 1.2rem .6rem .9rem;height:3.2rem;border:1px solid var(--dp-line);border-radius:10rem;background:var(--dp-raised);box-shadow:var(--dp-lift-1);color:rgb(var(--color-foreground));font:inherit;font-size:1.3rem;font-weight:600;cursor:pointer;transition:border-color .18s var(--dp-ease),box-shadow .18s var(--dp-ease),color .18s var(--dp-ease)}.device-picker__back:hover{border-color:color-mix(in srgb,rgba(var(--color-accent)) 45%,transparent);box-shadow:var(--dp-lift-2);color:rgb(var(--color-accent))}.device-picker__back:active{box-shadow:var(--dp-lift-1)}.device-picker__back:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:2px}[dir=rtl] .device-picker__back:hover{transform:translate(1px)}html:not(.js) .device-picker__back{display:none}[dir=rtl] .device-picker__back-icon svg{transform:scaleX(-1)}.device-picker__types{margin-bottom:1.2rem}html:not(.js) .device-picker__types{display:none}.device-picker__type-list{display:flex;align-items:center;gap:.4rem;width:max-content;padding:.4rem;border-radius:10rem;background:color-mix(in srgb,rgba(var(--color-foreground)) 4%,transparent);overflow-x:auto;scrollbar-width:none}.device-picker__type-list::-webkit-scrollbar{display:none}.device-picker__type-item{flex:0 0 auto}.device-picker__type-item[hidden]{display:none}.device-picker__type{display:inline-flex;align-items:center;white-space:nowrap;padding:.55rem 1.4rem;height:3rem;border:1px solid transparent;border-radius:10rem;background:transparent;color:var(--dp-muted);font:inherit;font-size:1.3rem;font-weight:500;cursor:pointer;transition:background-color .18s var(--dp-ease),border-color .18s var(--dp-ease),box-shadow .18s var(--dp-ease),color .18s var(--dp-ease)}.device-picker__type:hover{color:rgb(var(--color-foreground))}.device-picker__type:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:2px}.device-picker__type[aria-pressed=true]{border-color:var(--dp-line);background:var(--dp-raised);box-shadow:var(--dp-lift-1);color:rgb(var(--color-foreground))}.device-picker__search{position:relative;display:flex;align-items:center;margin-bottom:1.4rem}html:not(.js) .device-picker__search{display:none}.device-picker__search-icon{position:absolute;inset-inline-start:1.3rem;display:inline-flex;pointer-events:none;color:var(--dp-muted);transition:color .18s var(--dp-ease)}.device-picker__search-input{width:100%;padding:1.15rem 1.4rem 1.15rem 4rem;border:1px solid var(--dp-line);border-radius:10rem;background-color:color-mix(in srgb,rgba(255,255,255) 80%,rgb(var(--color-background)));color:rgb(var(--color-foreground));font:inherit;font-size:1.45rem;line-height:1.3;transition:border-color .18s var(--dp-ease),box-shadow .18s var(--dp-ease)}[dir=rtl] .device-picker__search-input{padding:1.15rem 4rem 1.15rem 1.4rem}.device-picker__search-input::placeholder{color:var(--dp-muted)}.device-picker__search-input:hover{border-color:color-mix(in srgb,rgba(var(--color-foreground)) 22%,transparent)}.device-picker__search-input:focus{outline:none;border-color:rgb(var(--color-accent));box-shadow:0 0 0 3px color-mix(in srgb,rgba(var(--color-accent)) 16%,transparent)}.device-picker__search:focus-within .device-picker__search-icon{color:rgb(var(--color-accent))}.device-picker__scroll{flex:1;min-height:0;max-height:var(--dp-scroll);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4rem),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4rem),transparent 100%);padding-bottom:1.6rem}.device-picker__scroll::-webkit-scrollbar{width:.6rem}.device-picker__scroll::-webkit-scrollbar-thumb{border-radius:10rem;background-color:color-mix(in srgb,rgba(var(--color-foreground)) 18%,transparent)}.device-picker__brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.8rem;margin:0;padding:.4rem}.device-picker__brand--tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%;padding:1.8rem 1rem;border:1px solid var(--dp-line);border-radius:var(--dp-radius-sm);background:linear-gradient(180deg,rgb(var(--color-background)),color-mix(in srgb,rgba(var(--color-foreground)) 5%,rgb(var(--color-background))));box-shadow:var(--dp-lift-1);color:rgb(var(--color-foreground));text-align:center;text-decoration:none;transition:transform .18s var(--dp-ease),border-color .18s var(--dp-ease),box-shadow .18s var(--dp-ease),background-color .18s var(--dp-ease)}.device-picker__brand--tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,rgba(var(--color-accent)) 15%,transparent);box-shadow:var(--dp-lift-2);color:rgb(var(--color-foreground));text-decoration:none}.device-picker__brand--tile:active{transform:translateY(0)}.device-picker__brand--tile[aria-current=true]{border-color:rgb(var(--color-accent));background-color:var(--dp-tint);box-shadow:0 0 0 1px rgb(var(--color-accent)),var(--dp-lift-1)}.device-picker__brand--row[aria-current=true]{background-color:var(--dp-tint);color:rgb(var(--color-accent))}.device-picker__brand-check{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;border-radius:50%;background-color:rgb(var(--color-accent));color:rgb(var(--color-button-text));opacity:0;transform:scale(.6);transition:opacity .18s var(--dp-ease),transform .18s var(--dp-ease)}.device-picker__brand--tile[aria-current=true] .device-picker__brand-check{opacity:1;transform:none}.device-picker__brand-logo{display:flex;align-items:center;justify-content:center;height:3.4rem}.device-picker__brand-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.device-picker__brand--tile .device-picker__brand-name{font-size:1.3rem;font-weight:600;line-height:1.2}.device-picker__brand-rows{display:flex;flex-direction:column;gap:.2rem;margin:0;padding:0}.device-picker__brand-grid:not(:empty)+.device-picker__brand-rows:not(:empty){margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--dp-line)}.device-picker__brand--row,.device-picker__model{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem;border-radius:var(--dp-radius);color:rgb(var(--color-foreground));text-decoration:none;transition:background-color .16s var(--dp-ease),color .16s var(--dp-ease)}.device-picker__brand--row:hover,.device-picker__model:hover{background-color:var(--dp-hover);color:rgb(var(--color-foreground));text-decoration:none}.device-picker__brand--row:hover .device-picker__chevron,.device-picker__model:hover .device-picker__chevron{opacity:1;transform:translate(.2rem);color:rgb(var(--color-accent))}[dir=rtl] .device-picker__brand--row:hover .device-picker__chevron,[dir=rtl] .device-picker__model:hover .device-picker__chevron{transform:translate(-.2rem)}.device-picker__brand:focus-visible,.device-picker__model:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:2px}.device-picker__chevron{display:inline-flex;flex-shrink:0;opacity:.35;transition:transform .16s var(--dp-ease),opacity .16s var(--dp-ease),color .16s var(--dp-ease)}[dir=rtl] .device-picker__chevron svg{transform:scaleX(-1)}.device-picker__models{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;margin:0;padding:0}@container dp-card (min-width: 60rem){.device-picker__models{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.8rem}}.device-picker__year{position:sticky;top:0;z-index:2;grid-column:1 / -1;margin:.6rem 0 .2rem;padding:.5rem 1.1rem;background-color:rgb(var(--color-background));font-size:1.3rem;font-weight:600;color:var(--dp-muted);font-variant-numeric:tabular-nums}.device-picker__year:first-child{margin-top:0}.device-picker__year[hidden]{display:none}.device-picker__model{gap:1.2rem;padding:.9rem 1.1rem}.device-picker__model-thumb{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:4rem;height:4.8rem;padding:.5rem;border:1px solid var(--dp-line);border-radius:var(--dp-radius-sm);background-color:#fff;color:var(--dp-muted);transition:border-color .16s var(--dp-ease),box-shadow .16s var(--dp-ease)}.device-picker__model:hover .device-picker__model-thumb{box-shadow:var(--dp-lift-1)}.device-picker__model-img{width:auto;height:100%;max-width:100%;object-fit:contain}.device-picker__model-img--brand{width:auto;height:auto;max-width:62%;max-height:45%;opacity:.32}.device-picker__model-text{display:flex;flex:1 1 auto;flex-direction:column;gap:.2rem;min-width:0}.device-picker__model-name{font-size:1.5rem;font-weight:600;line-height:1.3}.device-picker__model-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:1.2rem;line-height:1.3;color:var(--dp-muted)}html.js .device-picker__model-brand{display:none}.device-picker__model-year{font-variant-numeric:tabular-nums}html:not(.js) .device-picker__model-brand+.device-picker__model-year:before{content:"\b7";margin-inline-end:.6rem}.device-picker__count{flex-shrink:0;min-width:2.6rem;padding:.25rem .7rem;border-radius:10rem;background-color:var(--dp-hover);font-size:1.15rem;font-weight:600;line-height:1.4;text-align:center;color:var(--dp-muted);transition:background-color .16s var(--dp-ease),color .16s var(--dp-ease)}.device-picker__model:hover .device-picker__count{background-color:var(--dp-tint);color:rgb(var(--color-accent))}.device-picker__popular{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--dp-line)}.device-picker__popular[hidden]{display:none}.device-picker__popular .device-picker__label{margin-bottom:.8rem}.device-picker__popular:has(.device-picker__models--popular:empty){display:none}.device-picker__footer{border-top:1px solid var(--dp-line);padding:1.4rem 2.2rem;text-align:center}.device-picker__footer-link{display:inline-flex;align-items:center;gap:.5rem;font-size:1.35rem;font-weight:600;color:rgb(var(--color-accent));text-decoration:none}.device-picker__footer-link:hover{color:rgb(var(--color-accent));text-decoration:underline;text-underline-offset:.3em}.device-picker__footer-link:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:2px}.device-picker__footer-icon{display:inline-flex;transition:transform .16s var(--dp-ease)}.device-picker__footer-link:hover .device-picker__footer-icon{transform:translate(.2rem)}[dir=rtl] .device-picker__footer-icon svg{transform:scaleX(-1)}.device-picker__empty{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0;padding:2.8rem 1.2rem;text-align:center}.device-picker__empty[hidden]{display:none}.device-picker__empty-icon{display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border-radius:50%;background-color:var(--dp-hover);color:var(--dp-muted)}.device-picker__empty-text{margin:0;font-size:1.45rem;color:var(--dp-muted)}.device-picker__empty-link{font-size:1.35rem;font-weight:600;color:rgb(var(--color-accent));text-decoration:underline;text-underline-offset:.3em}.device-picker__diag{margin:1.2rem 0 0;padding:1.2rem 1.4rem;border:1px solid color-mix(in srgb,rgba(var(--color-accent)) 30%,transparent);border-radius:var(--dp-radius-sm);background-color:var(--dp-tint);font-size:1.3rem;line-height:1.5;color:rgb(var(--color-foreground))}[data-dp-item][hidden]{display:none!important}@media(max-width:899px){.device-picker{gap:2rem}}@media(max-width:767px){.device-picker{--dp-radius: 1.8rem;--dp-scroll: 28rem}.device-picker__panel{padding:1.6rem}.device-picker__mini-steps{padding:1.6rem 1.6rem 0}.device-picker__footer{padding:1.2rem 1.6rem}.device-picker__brand-grid{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}.device-picker__model-thumb{width:4rem;height:5.2rem}.device-picker__steps{flex-direction:row;gap:.8rem}.device-picker__step{flex:1;min-width:0}.device-picker__step:not(:last-child):after{display:none}.device-picker__step-btn{padding:.8rem}.device-picker__step-value{display:none}}@media(prefers-reduced-motion:reduce){html.js .device-picker__panel,.device-picker__brand--tile,.device-picker__brand--row,.device-picker__brand-check,.device-picker__model,.device-picker__model-thumb,.device-picker__count,.device-picker__chevron,.device-picker__search-input,.device-picker__back,.device-picker__step-title,.device-picker__step-num,.device-picker__step-num-digit,.device-picker__step-num-check,.device-picker__step:not(:last-child):after,.device-picker__mini-num,.device-picker__mini-digit,.device-picker__mini-check,.device-picker__mini-step:first-child:after,.device-picker__mini-label,.device-picker__footer-icon{transition:none}html.js .device-picker[data-dp-step=brands] .device-picker__panel--models,html.js .device-picker[data-dp-step=models] .device-picker__panel--brands,.device-picker__brand--tile:hover,.device-picker__back:hover{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/device-picker.css.map */