how-it-plays,.hip{display:block}.hip{--hip-main: 98 25 121;--hip-compare-0: 204 255 0;--hip-compare-1: 86 203 249;--hip-grid: var(--text-color);position:relative;padding-top:calc(3 * var(--space-unit))}.hip__header{margin-bottom:calc(6 * var(--space-unit));text-align:center}@media(min-width:769px){.hip{padding-top:calc(16 * var(--space-unit))}}.hip__title{margin:0;line-height:1.15}.hip__subtitle{margin:calc(1.5 * var(--space-unit)) 0 0;font-size:1.15em;opacity:.7}.hip__main{display:grid;gap:calc(8 * var(--space-unit));align-items:center}@media(min-width:769px){.hip__main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.hip__chart{text-align:center}.hip__chart-wrap{position:relative;max-width:460px;margin-inline:auto}.hip__svg{display:block;width:100%;height:auto;overflow:visible}.hip__ring{fill:none;stroke:rgb(var(--hip-grid) / .12);stroke-width:1}.hip__axis{stroke:rgb(var(--hip-grid) / .12);stroke-width:1}.hip__tick{font-size:10px;fill:rgb(var(--text-color) / .5)}.hip__axis-label{font-size:15px;fill:rgb(var(--text-color))}.hip__poly{stroke-linejoin:round;transition:opacity .25s ease}.hip__poly--avg{fill:none;stroke:rgb(var(--text-color) / .4);stroke-width:1.25;stroke-dasharray:2 3}.hip__poly--main{fill:rgb(var(--hip-main) / .1);stroke:rgb(var(--hip-main));stroke-width:2}.hip__poly--cmp-0{fill:rgb(var(--hip-compare-0) / .1);stroke:rgb(var(--hip-compare-0));stroke-width:3;stroke-dasharray:6 4}.hip__poly--cmp-1{fill:rgb(var(--hip-compare-1) / .1);stroke:rgb(var(--hip-compare-1));stroke-width:3;stroke-dasharray:2 4;stroke-linecap:round}.hip__point{fill:rgb(var(--bg-color));stroke-width:2;pointer-events:none}.hip__point--main{stroke:rgb(var(--hip-main))}.hip__point--cmp-0{fill:rgb(var(--hip-compare-0));stroke:rgb(var(--text-color))}.hip__point--cmp-1{fill:rgb(var(--hip-compare-1));stroke:rgb(var(--text-color))}.hip__hit{fill:transparent;cursor:pointer}.hip__tooltip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 12px));padding:calc(2 * var(--space-unit)) calc(3 * var(--space-unit));background:rgb(var(--text-color));color:rgb(var(--bg-color));font-size:.8em;line-height:1.4;white-space:nowrap;pointer-events:none}.hip__tooltip[hidden]{display:none}.hip__tooltip strong{display:block}.hip__tooltip-swatch{display:inline-block;width:8px;height:8px;margin-inline-end:6px;border-radius:50%}.hip__tooltip-swatch--main{background:rgb(var(--hip-main));outline:1px solid rgb(var(--bg-color))}.hip__tooltip-swatch--0{background:rgb(var(--hip-compare-0))}.hip__tooltip-swatch--1{background:rgb(var(--hip-compare-1))}.hip__hint{margin:calc(3 * var(--space-unit)) 0 calc(2 * var(--space-unit));font-size:.75em;opacity:.6}.hip__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(4 * var(--space-unit));margin:0;padding:0;list-style:none;font-size:.75em;opacity:.8}.hip__legend-item{display:inline-flex;align-items:center;gap:calc(1.5 * var(--space-unit))}.hip__legend-item[hidden]{display:none}.hip__legend-swatch{display:inline-block;flex:0 0 auto;width:18px;border-top:2px solid rgb(var(--hip-main))}.hip__legend-item--cmp-0 .hip__legend-swatch{border-top:3px dashed rgb(var(--hip-compare-0))}.hip__legend-item--cmp-1 .hip__legend-swatch{border-top:3px dotted rgb(var(--hip-compare-1))}.hip__legend-item--avg .hip__legend-swatch{border-top:2px dotted rgb(var(--text-color) / .4)}.hip__legend-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hip__bar-list{display:grid;gap:calc(4 * var(--space-unit));margin:0;padding:0;list-style:none}.hip__bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:calc(3 * var(--space-unit));margin-bottom:calc(1.5 * var(--space-unit))}.hip__label strong{font-weight:600;margin-inline-end:calc(3 * var(--space-unit))}.hip__desc{font-size:.75em;opacity:.65}.hip__vals{display:inline-flex;gap:calc(3 * var(--space-unit));font-variant-numeric:tabular-nums}.hip__val--cmp{padding:0 calc(1.5 * var(--space-unit));color:rgb(var(--text-color));border-radius:3px}.hip__val--cmp-0{background:rgb(var(--hip-compare-0))}.hip__val--cmp-1{background:rgb(var(--hip-compare-1))}.hip__val--cmp[hidden]{display:none}.hip__track{position:relative;height:4px;background:rgb(var(--text-color) / .08)}.hip__fill{position:absolute;inset:0 auto 0 0;background:rgb(var(--hip-main));transition:width .4s ease}.hip__avg{position:absolute;top:-4px;width:1.5px;height:12px;background:rgb(var(--text-color) / .45);transform:translate(-50%)}.hip__dot{position:absolute;top:50%;width:11px;height:11px;border:2px solid rgb(var(--text-color));border-radius:50%;transform:translate(-50%,-50%);transition:left .4s ease}.hip__dot--0{background:rgb(var(--hip-compare-0))}.hip__dot--1{background:rgb(var(--hip-compare-1))}.hip__dot[hidden]{display:none}.hip__note{margin:calc(4 * var(--space-unit)) 0 0;font-size:.75em;opacity:.6}.hip__compare{margin-top:calc(10 * var(--space-unit));padding-top:calc(6 * var(--space-unit));border-top:1px solid rgb(var(--text-color) / .1)}.hip__compare[hidden]{display:none}.hip__compare-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(4 * var(--space-unit));margin-bottom:calc(4 * var(--space-unit))}.hip__compare-title{margin:0}.hip__search{position:relative;width:100%}@media(min-width:769px){.hip__search{width:280px}}.hip__search-input{width:100%}.hip__results{position:absolute;z-index:5;inset:100% 0 auto 0;max-height:320px;margin:calc(1 * var(--space-unit)) 0 0;padding:calc(1 * var(--space-unit)) 0;border-radius:8px;overflow-y:auto;list-style:none;background:rgb(var(--bg-color));border:1px solid rgb(var(--text-color) / .15);box-shadow:0 8px 24px #00000014}.hip__results[hidden]{display:none}.hip__result{display:flex;align-items:center;gap:calc(3 * var(--space-unit));width:100%;padding:calc(2 * var(--space-unit)) calc(3 * var(--space-unit));text-align:start;font-size:.85em;background:none;border:0;cursor:pointer}.hip__result:hover,.hip__result:focus-visible{background:rgb(var(--text-color) / .05)}.hip__result img{width:36px;height:36px;object-fit:contain}.hip__skeleton{display:flex;align-items:center;gap:calc(3 * var(--space-unit));padding:calc(2 * var(--space-unit)) calc(3 * var(--space-unit))}.hip__skeleton-img,.hip__skeleton-line{display:block;border-radius:4px;background:linear-gradient(90deg,rgb(var(--text-color) / .06) 25%,rgb(var(--text-color) / .12),rgb(var(--text-color) / .06) 75%);background-size:200% 100%;animation:hip-shimmer 1.2s ease-in-out infinite}.hip__skeleton-img{flex:0 0 auto;width:36px;height:36px}.hip__skeleton-lines{display:grid;flex:1 1 auto;gap:calc(1.5 * var(--space-unit))}.hip__skeleton-line{height:10px}.hip__skeleton-line--short{width:55%}@keyframes hip-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hip__result-empty{padding:calc(3 * var(--space-unit));font-size:.85em;opacity:.7}.hip__cards{display:grid;gap:calc(3 * var(--space-unit))}@media(min-width:769px){.hip__cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.hip__card{display:flex;align-items:center;gap:calc(3 * var(--space-unit));padding:calc(3 * var(--space-unit));border:1px solid rgb(var(--text-color) / .12);transition:border-color .2s ease}.hip__card.is-comparing-0{border-color:rgb(var(--hip-compare-0));box-shadow:0 0 0 1px rgb(var(--hip-compare-0))}.hip__card.is-comparing-1{border-color:rgb(var(--hip-compare-1));box-shadow:0 0 0 1px rgb(var(--hip-compare-1))}.hip__card-image{flex:0 0 56px;width:56px;height:56px;object-fit:contain;background:rgb(var(--text-color) / .04)}.hip__card-body{flex:1 1 auto;min-width:0;font-size:.85em}.hip__card-name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hip__card-price s{margin-inline-start:calc(1.5 * var(--space-unit));opacity:.5}.hip__card-hint{display:block;font-size:.9em;opacity:.65}.hip__card-btn{flex:0 0 auto;padding:calc(1.5 * var(--space-unit)) calc(4 * var(--space-unit));font-size:.8em;background:none;border:1px solid rgb(var(--text-color) / .5);border-radius:999px;cursor:pointer;white-space:nowrap}.hip__card.is-comparing-0 .hip__card-btn{background:rgb(var(--hip-compare-0));color:rgb(var(--text-color));border-color:rgb(var(--hip-compare-0))}.hip__card.is-comparing-1 .hip__card-btn{background:rgb(var(--hip-compare-1));color:rgb(var(--text-color));border-color:rgb(var(--hip-compare-1))}@media(max-width:768.98px){.shopify-section.cc-how-it-plays.section{margin-top:calc(var(--section-gap) * var(--fluid-1-5) * .7)}.hip__bar-top{align-items:flex-start}.hip__label{min-width:0;flex:1 1 auto}.hip__label strong{display:block;margin-inline-end:0}.hip__desc{display:block;margin-top:calc(.5 * var(--space-unit));font-size:.8em}.hip__vals{flex:0 0 auto;white-space:nowrap}.hip__compare{margin-top:calc(6 * var(--space-unit));padding-top:calc(4 * var(--space-unit))}.hip__cards{grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory}.hip__card{scroll-snap-align:start}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/how-it-plays.css.map */