.device-chip{--dc-offset-bottom: 2rem;--dc-offset-side: 2rem;--dc-width: 20rem;--dc-width-open: min(32rem, calc(100vw - 2 * var(--dc-offset-side)));--dc-duration: .42s;--dc-ease: cubic-bezier(.22, 1, .36, 1);--dc-line: color-mix(in srgb, rgba(var(--color-foreground)) 12%, transparent);--dc-muted: color-mix(in srgb, rgba(var(--color-foreground)) 58%, transparent);--dc-tint: color-mix(in srgb, rgba(var(--color-foreground)) 5%, transparent);--dc-plinth: color-mix(in srgb, rgba(var(--color-foreground)) 4.5%, rgb(var(--color-background)));--dc-raised: linear-gradient( 180deg, rgb(var(--color-background)), color-mix(in srgb, rgba(var(--color-foreground)) 2.5%, rgb(var(--color-background))) );--dc-lift: 0 1px 2px rgba(var(--color-shadow), .05), 0 1.2rem 3rem -1.2rem rgba(var(--color-shadow), .32);position:fixed;z-index:20;display:grid;grid-template-rows:auto 0fr;width:var(--dc-width);border:1px solid var(--dc-line);border-radius:10rem;background:var(--dc-raised);box-shadow:var(--dc-lift);color:rgb(var(--color-foreground));overflow:hidden;animation:device-chip-in .38s var(--dc-ease) both;transition:width var(--dc-duration) var(--dc-ease),grid-template-rows var(--dc-duration) var(--dc-ease),border-radius var(--dc-duration) var(--dc-ease),border-color .2s ease,box-shadow .2s ease}.device-chip[hidden]{display:none}.device-chip[data-dc-expanded]{width:var(--dc-width-open);grid-template-rows:auto 1fr;border-radius:2.4rem;box-shadow:0 2px 4px rgba(var(--color-shadow),.06),0 2.4rem 5rem -1.6rem rgba(var(--color-shadow),.4)}.device-chip--bottom-left{inset-inline-start:var(--dc-offset-side);bottom:var(--dc-offset-bottom)}.device-chip--bottom-center{inset-inline:0;margin-inline:auto;bottom:var(--dc-offset-bottom)}.device-chip--top-center{inset-inline:0;margin-inline:auto;top:var(--dc-offset-bottom)}@keyframes device-chip-in{0%{opacity:0;transform:translateY(1rem) scale(.96)}to{opacity:1;transform:none}}.device-chip__toggle{display:flex;align-items:center;gap:1rem;width:100%;padding:.6rem 1.2rem .6rem .6rem;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:padding var(--dc-duration) var(--dc-ease)}.device-chip[data-dc-expanded] .device-chip__toggle{gap:1.4rem;padding:1rem 1.4rem 1rem 1rem}.device-chip__toggle:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:-3px}.device-chip__thumb,.device-chip__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:3.2rem;height:3.2rem;padding:.3rem;border:1px solid transparent;border-radius:50%;background-color:var(--dc-tint);color:rgb(var(--color-accent));transition:width var(--dc-duration) var(--dc-ease),height var(--dc-duration) var(--dc-ease),border-radius var(--dc-duration) var(--dc-ease),border-color var(--dc-duration) var(--dc-ease)}.device-chip[data-dc-expanded] .device-chip__thumb,.device-chip[data-dc-expanded] .device-chip__icon{width:8rem;height:9.6rem;padding:.8rem;border-radius:1.8rem;background-color:var(--dc-plinth)}.device-chip__thumb[hidden],.device-chip__icon[hidden]{display:none}.device-chip__thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}html[xo-dark-mode] .device-chip__thumb img{mix-blend-mode:normal}.device-chip__text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.device-chip__extra{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--dc-duration) var(--dc-ease),opacity .24s var(--dc-ease)}.device-chip[data-dc-expanded] .device-chip__extra{grid-template-rows:1fr;opacity:1}.device-chip__extra>*{min-height:0;overflow:hidden}.device-chip__label{font-size:1.35rem;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size var(--dc-duration) var(--dc-ease)}.device-chip[data-dc-expanded] .device-chip__label{font-family:var(--font-heading-family);font-weight:var(--font-heading-weight);font-size:2rem;letter-spacing:-.01em;white-space:normal}.device-chip__meta{display:block;padding-top:.4rem;font-size:1.35rem;line-height:1.3;color:var(--dc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-chip__caret{display:flex;align-self:stretch;align-items:flex-start;flex-shrink:0;padding-top:.9rem;color:var(--dc-muted);transform:rotate(180deg);transition:transform var(--dc-duration) var(--dc-ease),padding-top var(--dc-duration) var(--dc-ease)}.device-chip[data-dc-expanded] .device-chip__caret{padding-top:.2rem}.device-chip[data-dc-expanded] .device-chip__caret,.device-chip--top-center .device-chip__caret{transform:rotate(0)}.device-chip--top-center[data-dc-expanded] .device-chip__caret{transform:rotate(180deg)}.device-chip__panel{min-height:0;overflow:hidden;opacity:0;transition:opacity .26s var(--dc-ease)}.device-chip[data-dc-expanded] .device-chip__panel{opacity:1}.device-chip__panel-inner{display:flex;align-items:center;gap:.8rem;padding:0 1.2rem 1.2rem}.device-chip__action{flex:1 1 auto;min-width:0;height:4rem}.device-chip__action .xo-btn__content{padding-inline:1.2rem;white-space:nowrap}.device-chip__icon-btn{flex:none;border:1px solid var(--dc-line);color:rgb(var(--color-foreground));transition:color .18s ease,border-color .18s ease,box-shadow .28s var(--dc-ease)}.device-chip__icon-btn:hover{border-color:color-mix(in srgb,rgba(var(--color-foreground)) 22%,transparent);color:rgb(var(--color-accent))}.device-chip__icon-btn--clear:hover{color:rgb(var(--color-error))}.device-chip__icon-btn svg path{fill:currentColor}.device-chip__action:focus-visible,.device-chip__icon-btn:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:2px}@media(max-width:767px){.device-chip{--dc-offset-bottom: 1.2rem;--dc-offset-side: 1.2rem;--dc-width: 18rem}.device-chip[data-dc-expanded]{z-index:2147483001}}.template-product .device-chip{--dc-offset-bottom: 8rem}@media(prefers-reduced-motion:reduce){.device-chip{animation:none}.device-chip,.device-chip__toggle,.device-chip__thumb,.device-chip__icon,.device-chip__extra,.device-chip__label,.device-chip__caret,.device-chip__panel,.device-chip__action,.device-chip__icon-btn{transition:none}}.device-floating-picker{--dc-offset-bottom: 2rem;--dc-offset-side: 2rem;--dc-width: 20rem;--dc-width-open: min(30rem, calc(100vw - 2 * var(--dc-offset-side)));--dc-duration: .42s;--dc-ease: cubic-bezier(.22, 1, .36, 1);--dc-line: color-mix(in srgb, rgba(var(--color-foreground)) 12%, transparent);--dc-muted: color-mix(in srgb, rgba(var(--color-foreground)) 58%, transparent);--dc-tint: color-mix(in srgb, rgba(var(--color-foreground)) 5%, transparent);--dc-raised: linear-gradient( 180deg, rgb(var(--color-accent)), color-mix(in srgb, rgba(var(--color-accent)) 2.5%, rgb(var(--color-accent))) );--dc-lift: 0 1px 2px rgba(var(--color-shadow), .05), 0 1.2rem 3rem -1.2rem rgba(var(--color-shadow), .32);position:fixed;z-index:20}.device-floating-picker[hidden]{display:none}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-device-chip.css.map */