.frame-picker{display:block;margin-block:23px 24px}@media screen and (min-width:990px){.frame-picker{margin-block:32px}}.frame-picker__head{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;-moz-column-gap:16px;column-gap:16px;margin-bottom:10px}.frame-picker__label{flex:1 1 auto;min-width:0;font-size:1.2rem;font-weight:700;line-height:1.9rem;letter-spacing:.05em;text-transform:uppercase;color:rgb(var(--color-meta))}@media screen and (min-width:750px){.frame-picker__label{line-height:1.5}}.frame-picker__compare{flex:0 0 auto;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-family:inherit;font-size:1.2rem;font-weight:400;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:rgb(var(--color-secondary));text-decoration:underline;cursor:pointer}.frame-picker__compare:hover{color:rgba(var(--color-secondary),.7)}.frame-picker__list{display:flex;flex-direction:column;gap:8px}.frame-picker__option{display:block;cursor:pointer}.frame-picker__box{display:flex;align-items:center;gap:16px;min-height:72px;padding-block:11px;padding-inline:15px;border:1px solid rgba(var(--color-primary),.08);border-radius:12px;background-color:rgb(var(--color-background));transition:border-color .2s ease}@media screen and (min-width:750px){.frame-picker__box{min-height:80px;padding-inline:19px}}.frame-picker__input:checked+.frame-picker__box{border-color:rgb(var(--color-primary))}.frame-picker__option:hover .frame-picker__input:not(:checked)+.frame-picker__box{border-color:rgba(var(--color-primary),.24)}.frame-picker__input:focus-visible+.frame-picker__box{outline:var(--focused-base-outline, .2rem solid rgba(var(--color-text), .5));outline-offset:var(--focused-base-outline-offset, .3rem)}.frame-picker__media{flex-shrink:0;display:block;width:48px;height:48px;border-radius:4px;overflow:hidden}.frame-picker__image{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.frame-picker__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.frame-picker__title{font-size:1.4rem;font-weight:700;line-height:2rem;letter-spacing:normal;color:rgb(var(--color-secondary));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.frame-picker__desc{font-size:1.2rem;font-weight:400;line-height:1.5;letter-spacing:normal;color:rgba(var(--color-secondary),.8)}.frame-picker__prices{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:86px}.frame-picker__delta{font-size:1.4rem;font-weight:700;line-height:1.5;letter-spacing:normal;color:rgb(var(--color-primary))}.frame-picker__total{font-size:1.1rem;font-weight:400;line-height:1.5;letter-spacing:.024rem;color:rgba(var(--color-secondary),.6)}@media screen and (min-width:750px){.frame-picker__total{font-size:1.2rem}}.frame-picker__note{margin-top:10px;font-size:1.2rem;font-weight:500;line-height:1.6;letter-spacing:normal;color:rgb(var(--color-meta))}.frame-picker--totals-stale .frame-picker__total,.frame-picker--totals-stale .frame-chips__delta,.frame-chips{display:none}@media screen and (min-width:990px){.frame-chips{display:grid;grid-template-columns:minmax(0,1fr) auto;flex:0 1 auto;min-width:0;margin-inline:auto;align-items:end;-moz-column-gap:16px;column-gap:16px;row-gap:8px}}.frame-chips__compare{white-space:nowrap}.frame-chips__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.frame-chips__list{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:3px;margin-block:-3px}.frame-chips__list::-webkit-scrollbar{display:none}.frame-chips__chip{flex:0 0 auto}.frame-chips__label{font-size:1.2rem;font-weight:700;line-height:1.5;letter-spacing:normal;text-transform:uppercase;color:rgba(var(--color-content),.5)}.frame-chips__compare{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-family:inherit;font-size:1.2rem;font-weight:400;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:rgba(var(--color-secondary),.6);text-decoration:underline;cursor:pointer}.frame-chips__compare:hover{color:rgb(var(--color-secondary))}.frame-chips__chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:31px;padding-inline:15px;border:1px solid rgba(var(--color-primary),.12);border-radius:15.5px;background-color:rgb(var(--color-background));font-family:inherit;color:rgb(var(--color-primary));cursor:pointer;transition:border-color .2s ease,color .2s ease}.frame-chips__chip:focus-visible{outline:var(--focused-base-outline, .2rem solid rgba(var(--color-text), .5));outline-offset:var(--focused-base-outline-offset, .3rem)}.frame-chips__chip:not(.frame-chips__chip--selected):hover{border-color:rgba(var(--color-primary),.24)}.frame-chips__chip--selected{border-color:rgb(var(--color-primary));border-width:1.5px}.frame-chips__chip--selected .frame-chips__name{font-weight:600}.frame-chips__name{font-size:1.2rem;font-weight:500;letter-spacing:normal}.frame-chips__delta{font-size:1.2rem;font-weight:700;letter-spacing:normal;color:rgb(var(--color-primary))}.frame-compare{--frame-compare-gutter: 8px;--frame-compare-cols: 4;position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;visibility:hidden;transition:visibility 0s linear var(--duration-medium, .3s);display:flex;align-items:flex-end;justify-content:center}@media screen and (min-width:990px){.frame-compare{align-items:center}}.frame-compare--open{visibility:visible;transition:visibility 0s linear 0s}.frame-compare__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(var(--color-secondary),.6);opacity:0;transition:opacity var(--duration-medium, .3s) ease}.frame-compare__scrim:empty{display:block}.frame-compare--open .frame-compare__scrim{opacity:1}.frame-compare__dialog{position:relative;z-index:1;display:flex;flex-direction:column;overflow:hidden;width:100%;max-height:calc(100dvh - 48px);padding-block:16px;padding-inline:0;border-radius:24px 24px 0 0;background-color:rgb(var(--color-background));transform:translateY(100%);transition:transform var(--duration-medium, .3s) var(--ease-out-slow, cubic-bezier(0, 0, .3, 1))}@media screen and (min-width:990px){.frame-compare__dialog{width:min(1118px,100vw - 64px);max-height:calc(100dvh - 64px);padding-block:16px 32px;padding-inline:var(--frame-compare-gutter);border-radius:16px;transform:translateY(12px);opacity:0;transition:transform var(--duration-medium, .3s) var(--ease-out-slow, cubic-bezier(0, 0, .3, 1)),opacity var(--duration-medium, .3s) ease}}.frame-compare--open .frame-compare__dialog{transform:translateY(0);opacity:1}.frame-compare__body{min-height:0;overflow-x:hidden;overflow-y:auto}.frame-compare__close{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgb(var(--color-primary));border-radius:50%;background-color:rgb(var(--color-background));color:rgb(var(--color-primary));cursor:pointer}.frame-compare__close svg{width:19.5px;height:19.5px}.frame-compare__close:hover{background-color:rgb(var(--color-primary));color:rgb(var(--color-background))}.frame-compare__close:focus-visible{outline:var(--focused-base-outline, .2rem solid rgba(var(--color-text), .5));outline-offset:var(--focused-base-outline-offset, .3rem)}@media screen and (max-width:989.98px){.frame-compare__close svg{width:18px;height:18px}}.frame-compare__table{width:100%;border-collapse:collapse;table-layout:fixed}.frame-compare__table th+th,.frame-compare__table td+td,.frame-compare__table th+td{border-inline-start:1px solid rgba(var(--color-primary),.04)}.frame-compare__intro{text-align:start;vertical-align:top;padding:0 8px 16px}.frame-compare__intro-panel{display:block}@media screen and (min-width:990px){.frame-compare__intro-panel{padding:24px;background-color:rgba(var(--color-text),.05);background-clip:padding-box;border-radius:12px;aspect-ratio:4/3}}.frame-compare__heading{display:block;font-size:2rem;font-weight:700;line-height:1.35;letter-spacing:normal;color:rgb(var(--color-primary))}@media screen and (min-width:750px){.frame-compare__heading{font-size:2.4rem;line-height:27px}}.frame-compare__scroll-glyph,.frame-compare__scroll-hint,.frame-compare__intro-note{display:none}@media screen and (min-width:990px){.frame-compare__intro-note{display:block;margin-top:32px;font-size:1.4rem;font-weight:400;font-style:italic;line-height:20px;letter-spacing:normal;color:rgb(var(--color-primary))}}.frame-compare__column{vertical-align:top;padding:0 8px 16px;text-align:center}.frame-compare__tile{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:12px;border-radius:8px;background-color:rgba(var(--color-surface),.5)}@media screen and (min-width:990px){.frame-compare__tile{padding:8px;border-radius:12px}}.frame-compare__tile-image{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.frame-compare__name{display:block;margin-top:16px;font-size:1.6rem;font-weight:700;letter-spacing:normal;color:rgb(var(--color-primary));line-height:1.2}@media screen and (min-width:750px){.frame-compare__name{font-size:1.8rem}}@media screen and (max-width:989.98px){.frame-compare__name{margin-top:11px}}.frame-compare__badge{display:flex;width:-moz-fit-content;width:fit-content;margin-inline:auto;align-items:center;margin-top:8px;min-height:23px;padding-inline:12px;border-radius:12px;font-size:1.1rem;font-weight:700;line-height:1.6;letter-spacing:.03em;text-transform:uppercase}.frame-compare__badge--neutral{background-color:rgba(var(--color-primary),.16);color:rgb(var(--color-primary))}.frame-compare__badge--accent{background-color:rgb(var(--color-accent));color:rgb(var(--color-background))}.frame-compare__row{border-block-start:1px solid rgba(var(--color-primary),.04)}@media screen and (min-width:990px){.frame-compare__row{height:44px}}.frame-compare__row:last-child{border-block-end:1px solid rgba(var(--color-primary),.04)}.frame-compare__row-label{text-align:start;font-weight:400;color:rgb(var(--color-primary))}.frame-compare__row-icon{flex-shrink:0;display:inline-flex;width:20px;height:20px;color:rgb(var(--color-primary))}.frame-compare__row-icon svg,.frame-compare__row-icon img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.frame-compare__cell{text-align:center;font-size:1.4rem;font-weight:400;letter-spacing:normal;color:rgb(var(--color-primary))}.frame-compare__row--price .frame-compare__cell{font-weight:700}.frame-compare__glyph{display:contents}.frame-compare__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%}.frame-compare__icon--yes{background-color:rgb(var(--color-success));color:rgb(var(--color-background))}.frame-compare__icon--yes svg{width:9px;height:7px}.frame-compare__icon--no{width:17px;height:17px;border:1px solid rgba(var(--color-primary),.5);color:rgba(var(--color-primary),.5)}.frame-compare__icon--no svg{width:13.5px;height:13.5px}.frame-compare__select{font-family:inherit}@media screen and (min-width:990px){.frame-compare__select{width:auto;min-height:48px;padding-inline:32px}}@media screen and (max-width:989.98px){.frame-compare__select{width:auto;max-width:100%;min-height:40px;padding-inline:24px;font-size:1.2rem}}.frame-compare__select--current,.frame-compare__select[aria-current=true]{background-color:rgb(var(--color-primary));color:rgb(var(--color-background))}.frame-compare__actions-cell{padding:41px 8px 0;text-align:center}@media screen and (max-width:989.98px){.frame-compare__actions-cell{padding-block-start:16px}}.frame-compare{--frame-compare-label-col: 188px;--frame-compare-col: 194px}@media screen and (min-width:750px){.frame-compare{--frame-compare-col: 200px}}@media screen and (max-width:989.98px){.frame-compare__scroller{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline-start:var(--frame-compare-label-col);-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-y}.frame-compare__scroller::-webkit-scrollbar{display:none;width:0;height:0}.frame-compare__table{width:auto;table-layout:auto}.frame-compare__intro,.frame-compare__row-label,.frame-compare__actions-label{position:sticky;inset-inline-start:0;z-index:1;width:var(--frame-compare-label-col);min-width:var(--frame-compare-label-col);padding-inline-start:16px;padding-inline-end:0;background-color:rgb(var(--color-background))}.frame-compare__column,.frame-compare__cell,.frame-compare__actions-cell{width:var(--frame-compare-col);min-width:var(--frame-compare-col);padding-inline:8px;scroll-snap-align:start}.frame-compare__row{height:60px}.frame-compare__row,.frame-compare__row:last-child{border-block:0}.frame-compare__row--price .frame-compare__cell{border-block-end:2px solid rgba(var(--color-primary),.02)}.frame-compare__table th+th,.frame-compare__table td+td,.frame-compare__table th+td{border-inline-start:0}.frame-compare__dialog{padding-block-start:24px}.frame-compare__heading{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);word-wrap:normal}.frame-compare__intro-panel--card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:133.5px;padding-inline:12px;border-radius:16px;background-color:rgba(var(--color-text),.05);background-clip:padding-box}.frame-compare__scroll-glyph{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:24px;height:24px;color:rgba(var(--color-primary),.5)}.frame-compare__scroll-glyph svg{display:block;width:24px;height:11px}.frame-compare__scroll-hint{display:block;font-size:1.4rem;font-weight:500;line-height:17px;letter-spacing:normal;text-align:center;color:rgba(var(--color-primary),.5)}.frame-compare__row-label-inner{display:flex;width:100%;align-items:center;gap:8px;min-height:52px;padding:6px 12px;border-radius:16px;background-color:rgba(var(--color-surface),.5);font-size:1.2rem;font-weight:500;line-height:1.35;letter-spacing:.045em;text-transform:uppercase;color:rgb(var(--color-primary))}.frame-compare__tile{width:178px;height:133.5px;padding:0;border-radius:12px;margin-inline:auto}}@media screen and (min-width:990px){.frame-compare__row-label-inner{display:flex;align-items:center;gap:16px;padding:0;background:none;font-size:1.2rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:rgb(var(--color-primary))}.frame-compare__row-label{padding:0 16px 0 24px}}.frame-compare__scroll-wrap{position:relative}@media screen and (max-width:989.98px){.frame-compare__scroll-wrap:after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:max(0px,min(64px,100% - var(--frame-compare-label-col) - var(--frame-compare-col)));background:linear-gradient(to left,rgb(var(--color-background)),rgba(var(--color-background),0));opacity:1;transition:opacity .2s ease;pointer-events:none}.frame-compare--scrolled .frame-compare__scroll-wrap:after{opacity:0}}.frame-compare__progress{display:none}@media screen and (max-width:989.98px){.frame-compare__progress{display:block;flex-shrink:0;margin:16px 16px 0;padding:0;height:3px;border-radius:30px;background-color:rgba(var(--color-primary),.12);touch-action:pan-y;cursor:pointer}.frame-compare__progress[hidden]{display:none}}.frame-compare__progress-fill{display:block;height:3px;width:calc(var(--frame-compare-progress, 0)*100%);border-radius:30px;background-color:rgb(var(--color-primary));transition:width .3s ease}.frame-compare--swipeable .frame-compare__scroller{cursor:grab}.frame-compare--dragging .frame-compare__scroller{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.frame-compare--dragging .frame-compare__scroller,.frame-compare--settling .frame-compare__scroller{scroll-snap-type:none}.frame-compare--dragging .frame-compare__progress-fill,.frame-compare--settling .frame-compare__progress-fill{transition:none}@media(prefers-reduced-motion:reduce){.frame-compare,.frame-compare--open,.frame-compare__scrim,.frame-compare__scroll-wrap:after,.frame-compare__progress-fill,.frame-picker__box,.frame-chips__chip{transition:none}.frame-compare__dialog,.frame-compare--open .frame-compare__dialog{transform:none;opacity:1;transition:none}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/frame-picker.out.css.map */