.cl-compare{background-color:var(--cl-white);overflow-x:clip}.cl-compare.is-lucidity{background-color:var(--cl-lucidity)}.cl-compare__head{max-width:48rem;margin:0 auto 3rem;display:flex;flex-direction:column;align-items:center;text-align:center;row-gap:.5rem}.cl .cl-compare__head .pre-heading,.cl .cl-compare__head .heading-large{margin:0}.cl-compare__head .text-size-large{font-weight:300}.cl-compare__picker{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.cl-compare__card{flex:0 1 calc((100% - 3rem)/4);position:relative;display:flex;flex-direction:column;row-gap:.25rem;padding:.75rem;border:1px solid var(--cl-ink-12);border-radius:.75rem;background-color:var(--cl-white);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease}.cl-compare__card:hover{border-color:var(--cl-ink-40)}.cl-compare__card.is-on{border-color:var(--cl-cocoa);box-shadow:0 0 0 1px var(--cl-cocoa)}.cl-compare__card.is-off{opacity:.45;cursor:default}.cl-compare__check{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.cl-compare__card:has(.cl-compare__check:focus-visible){outline:2px solid var(--cl-cocoa);outline-offset:2px}.cl-compare__card-image{position:relative;display:block;aspect-ratio:4 / 3;border-radius:.5rem;background-color:var(--cl-pumice);overflow:hidden;margin-bottom:.5rem}.cl-compare__card-image img{width:100%;height:100%;object-fit:contain;display:block;padding:.5rem}.cl-compare__tick{position:absolute;top:.5rem;left:.5rem;width:1.5rem;height:1.5rem;border-radius:.25rem;border:1px solid var(--cl-line);background-color:#fff;color:var(--cl-white);display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s}.cl-compare__tick svg{width:.75rem;height:.75rem;opacity:0}.cl-compare__card.is-on .cl-compare__tick{background-color:var(--cl-cocoa);border-color:var(--cl-cocoa)}.cl-compare__card.is-on .cl-compare__tick svg{opacity:1}.cl-compare__card-name{font-size:.9375rem;line-height:1.3}.cl-compare__card-sub{font-size:.8125rem}.cl-compare__bar{position:sticky;top:calc(var(--cl-nav-h, 6.5rem) + .75rem);z-index:5;display:flex;align-items:center;justify-content:space-between;column-gap:1rem;row-gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem;padding:.5rem .5rem .5rem 1.5rem;border-radius:100px;background-color:var(--cl-white);border:1px solid var(--cl-ink-12);box-shadow:0 12px 32px var(--cl-ink-15)}.cl-compare__count{font-size:.9375rem}.cl-compare__diff{display:inline-flex;align-items:center;column-gap:.5rem;font-size:.875rem;cursor:pointer;margin-left:auto}.cl-compare__diff input{accent-color:var(--cl-cocoa);width:1rem;height:1rem;margin:0}.cl .cl-compare__go{min-width:0}.cl-compare__go.is-disabled{opacity:.45;pointer-events:none}.cl-compare__table-block{--cl-cmp-label: 11rem;position:relative;margin-top:3.5rem;scroll-margin-top:calc(var(--cl-nav-h, 6.5rem) + 5rem)}.cl-compare__criteria{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.75rem;row-gap:.25rem;padding-bottom:1rem;border-bottom:1px solid var(--cl-cocoa);margin-bottom:0}.cl-compare__criteria-label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cl-cocoa)}.cl-compare__criteria-text{font-size:.8125rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.cl-compare__swipe{display:inline-flex;align-items:center;column-gap:.375rem;margin-left:auto;padding:.3rem .75rem .25rem;border-radius:100px;background-color:var(--cl-cocoa);color:var(--cl-white);font-size:.75rem;letter-spacing:.02em;white-space:nowrap;animation:cl-cmp-nudge 2.4s ease-in-out 3}.cl-compare__swipe[hidden]{display:none}.cl-compare__swipe svg{width:.875rem;height:.875rem;display:block}@keyframes cl-cmp-nudge{0%,60%,to{transform:translate(0)}75%{transform:translate(.25rem)}}.cl-compare__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:var(--cl-cmp-label);overscroll-behavior-x:contain}.cl-compare__scroll:focus-visible{outline:2px solid var(--cl-cocoa);outline-offset:-2px}.cl-compare__table-block:after{content:"";position:absolute;top:2.5rem;bottom:0;right:0;width:4.5rem;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s ease;background:linear-gradient(to left,var(--cl-white) 20%,#ffffffe0 55%,#ffffff00)}.cl-compare.is-lucidity .cl-compare__table-block:after{background:linear-gradient(to left,var(--cl-lucidity) 20%,#f9f3efe0 55%,#f9f3ef00)}.cl-compare__table-block:has(.cl-compare__scroll.is-scrollable:not(.is-end)):after{opacity:1}.cl-compare__table{width:100%;border-collapse:separate;border-spacing:0;min-width:40rem}.cl-compare__table[hidden]{display:none}.cl-compare__table th,.cl-compare__table td{padding:.875rem 1rem;border-bottom:1px solid var(--cl-ink-10);vertical-align:top;text-align:left;font-size:.9375rem}.cl-compare__table tr>*:first-child{padding-left:0}.cl-compare__table tr>*:last-child{padding-right:0}.cl-compare__table thead th{padding-top:1.5rem;padding-bottom:1.25rem;vertical-align:bottom;border-bottom:1px solid var(--cl-cocoa)}.cl-compare__table tbody th,.cl-compare__corner{position:sticky;left:0;z-index:1;width:var(--cl-cmp-label);min-width:var(--cl-cmp-label);background-color:var(--cl-white)}.cl-compare.is-lucidity .cl-compare__table tbody th,.cl-compare.is-lucidity .cl-compare__corner{background-color:var(--cl-lucidity)}.cl-compare__table tbody th{font-weight:500;display:table-cell}.cl-compare__table tbody th:after,.cl-compare__corner:after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background-color:var(--cl-ink-10);opacity:0;transition:opacity .2s ease}.cl-compare__scroll.is-scrollable:not(.is-start) .cl-compare__table tbody th:after,.cl-compare__scroll.is-scrollable:not(.is-start) .cl-compare__corner:after{opacity:1}.cl-compare__corner{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--cl-ink-65)}.cl-compare__row-icon{float:left;width:1.125rem;height:1.125rem;margin:.0625rem .5rem 0 0;color:var(--cl-cocoa)}.cl-compare__row-icon svg{width:100%;height:100%;display:block}.cl-compare__row-label{display:block;-webkit-hyphens:auto;hyphens:auto}.cl-compare__col{min-width:12rem;scroll-snap-align:start}.cl-compare__table tbody td{scroll-snap-align:start}.cl-compare__prod{display:flex;flex-direction:column;row-gap:.5rem;color:inherit;text-decoration:none}.cl-compare__prod:hover .cl-compare__prod-name{text-decoration:underline;text-underline-offset:.15em}.cl-compare__prod-image{display:block;width:100%;max-width:11rem;aspect-ratio:4 / 3;border-radius:.5rem;background-color:var(--cl-pumice);overflow:hidden}.cl-compare__prod-image img{width:100%;height:100%;object-fit:contain;display:block;padding:.5rem}.cl-compare__prod-name{font-family:var(--cl-font-heading);font-size:1.25rem;line-height:1.2;font-weight:400}.cl-compare__table tr.is-same td{color:var(--cl-ink-65)}.cl-compare__table tr.is-diff td{font-weight:500}.cl-compare__na{color:var(--cl-ink-35)}.cl-compare__actions th,.cl-compare__actions td{border-bottom:0}.cl-compare__actions td{padding-top:1.25rem}.cl-compare__actions .button{min-width:0;width:100%}.cl-compare__sheet{display:block;text-align:center;margin-top:.5rem;color:inherit;text-decoration:underline;text-underline-offset:.15em}.cl-compare__empty[hidden]{display:none}.cl-compare__empty{margin-top:1.5rem}@media screen and (max-width:767px){.cl-compare__picker{gap:.75rem}.cl-compare__card{flex-basis:calc((100% - .75rem)/2)}.cl-compare__head{margin-bottom:2rem}.cl-compare__bar{top:calc(var(--cl-nav-h, 5rem) + .5rem);padding:.5rem .5rem .5rem 1rem;border-radius:1.75rem}.cl-compare__count{font-size:.875rem}.cl-compare__table-block{--cl-cmp-label: 7.5rem;margin-top:2.5rem}.cl-compare__criteria-text{display:none}.cl-compare__table th,.cl-compare__table td{padding:.75rem;font-size:.875rem}.cl-compare__table thead th{padding-top:1.25rem;padding-bottom:1rem}.cl-compare__table tbody th{font-size:.8125rem}.cl-compare__col{min-width:11rem}.cl-compare__prod-name{font-size:1.0625rem}.cl-compare__row-icon{width:1rem;height:1rem;margin-right:.375rem}.cl-compare__table-block:after{width:3rem}}@media screen and (max-width:479px){.cl-compare__table-block{--cl-cmp-label: 7rem}.cl-compare__table{min-width:0}.cl-compare__col{min-width:9.5rem}.cl-compare__swipe{font-size:.6875rem}}@media(prefers-reduced-motion:reduce){.cl-compare__card,.cl-compare__tick,.cl-compare__table-block:after,.cl-compare__table tbody th:after,.cl-compare__corner:after{transition:none}.cl-compare__swipe{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/cl-compare.css.map */