.sizing-guide-chart{--sg-ink: rgb(var(--color-foreground-rgb));--sg-bg: rgb(var(--color-background-rgb));--sg-accent: var(--color-primary);--sg-accent-rgb: var(--color-primary-rgb);--sg-rule: rgb(var(--color-foreground-rgb) / .9);--sg-tick: rgb(var(--color-foreground-rgb) / .14);--sg-chip-bg: rgb(var(--color-foreground-rgb) / .07);--sg-muted: rgb(var(--color-foreground-rgb) / .6);--sg-faint: rgb(var(--color-foreground-rgb) / .5);--sg-legend-highlight: rgb(var(--color-foreground-rgb) / .025);--sg-gutter: clamp(56px, 13vw, 88px);--sg-right-gutter: clamp(44px, 8vw, 64px);--sg-bar-ink: var(--sg-ink);display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);width:100%;max-width:1080px;margin-inline:auto;color:var(--sg-ink);font-family:var(--font-paragraph--family);font-weight:var(--font-paragraph--weight);letter-spacing:var(--font-paragraph--letter-spacing)}.sizing-guide-chart__kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sg-accent)}.sizing-guide-chart__readout{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}.sizing-guide-chart__readout-values{display:flex;flex-direction:column;gap:2px;min-width:240px}.sizing-guide-chart__readout-main{font-family:var(--font-h4--family);font-weight:700;font-size:var(--font-h4--size);line-height:var(--font-h4--line-height);letter-spacing:var(--font-h4--letter-spacing);min-height:calc(var(--font-h4--line-height) * 1em)}.sizing-guide-chart__readout-sub{font-size:var(--font-paragraph--size);line-height:1.4;color:var(--sg-muted);min-height:1.4em}.sizing-guide-chart__axis-key{display:flex;gap:16px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-faint)}.sizing-guide-chart__grid{display:grid;grid-template-columns:var(--sg-gutter) minmax(0,1fr) var(--sg-right-gutter);gap:8px;height:clamp(340px,56vh,540px)}.sizing-guide-chart__axis{position:relative}.sizing-guide-chart__axis-label{position:absolute;transform:translateY(-50%);white-space:nowrap}.sizing-guide-chart__axis--left .sizing-guide-chart__axis-label{right:0;padding:2px 7px;background:var(--sg-chip-bg);font-size:clamp(11px,2.6vw,13px);font-weight:400}.sizing-guide-chart__axis--right .sizing-guide-chart__axis-label{left:0;line-height:1.2}.sizing-guide-chart__axis-primary{display:block;font-weight:700;font-size:clamp(11px,2.6vw,14px)}.sizing-guide-chart__axis-secondary{display:block;font-size:clamp(10px,2.2vw,11px);color:var(--sg-faint)}.sizing-guide-chart__plot{position:relative;z-index:1;border-top:2px solid var(--sg-rule);border-bottom:2px solid var(--sg-rule);touch-action:pan-y}.sizing-guide-chart[data-ready=true] .sizing-guide-chart__plot{cursor:crosshair}.sizing-guide-chart__gridline{position:absolute;left:0;right:0;height:1px;background:var(--sg-tick)}.sizing-guide-chart__columns{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--sg-columns, 4),minmax(0,1fr));color:var(--sg-bar-ink)}.sizing-guide-chart__column{position:relative;border-right:1px solid var(--sg-tick)}.sizing-guide-chart__column:last-child{border-right:0}.sizing-guide-chart__bar{position:absolute;left:50%;transform:translate(-50%);width:min(80px,58%);background:repeating-linear-gradient(45deg,currentcolor 0 4.5px,var(--sg-bg) 4.5px 9px) 0 0 / 100% 15px no-repeat,repeating-linear-gradient(45deg,currentcolor 0 4.5px,var(--sg-bg) 4.5px 9px) 0 100% / 100% 15px no-repeat,currentcolor}.sizing-guide-chart[data-ready=true] .sizing-guide-chart__bar{cursor:pointer}.sizing-guide-chart__bar-active{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .16s ease;background:repeating-linear-gradient(45deg,var(--sg-accent) 0 4.5px,var(--sg-bg) 4.5px 9px) 0 0 / 100% 15px no-repeat,repeating-linear-gradient(45deg,var(--sg-accent) 0 4.5px,var(--sg-bg) 4.5px 9px) 0 100% / 100% 15px no-repeat,var(--sg-accent)}.sizing-guide-chart__bar[data-active=true] .sizing-guide-chart__bar-active{opacity:1}.sizing-guide-chart__bar-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--sg-bg);font-weight:700;font-size:clamp(16px,3vw,20px)}.sizing-guide-chart__bar:focus-visible{outline:2px solid var(--sg-accent);outline-offset:3px}.sizing-guide-chart__overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible}.sizing-guide-chart__band{position:absolute;left:0;right:0;background:rgb(var(--sg-accent-rgb) / .09);border-top:2px solid var(--sg-accent);border-bottom:2px solid var(--sg-accent)}.sizing-guide-chart__band[data-cursor-on-lower-boundary=true]{border-bottom-color:transparent}.sizing-guide-chart__cursor{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--sg-accent)}.sizing-guide-chart__chip{position:absolute;top:0;background:var(--sg-accent);color:#fff;padding:2px 6px;font-weight:700;font-size:clamp(11px,2.6vw,13px);white-space:nowrap}.sizing-guide-chart__chip--left{right:100%;transform:translate(-6px,-50%);padding:2px 7px;font-weight:400}.sizing-guide-chart__chip--right{left:100%;transform:translate(6px,-50%)}.sizing-guide-chart__legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:0}.sizing-guide-chart__legend-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;background:var(--sg-bg);text-align:start;border:0;font:inherit;color:inherit}.sizing-guide-chart[data-ready=true] .sizing-guide-chart__legend-item:hover,.sizing-guide-chart__legend-item[data-active=true]{background:var(--sg-legend-highlight)}.sizing-guide-chart__legend-item:focus-visible{outline:2px solid var(--sg-accent);outline-offset:-2px}.sizing-guide-chart__legend-size{font-weight:700;font-size:var(--font-paragraph--size)}.sizing-guide-chart__legend-feet{font-size:var(--font-paragraph--size)}.sizing-guide-chart__legend-units{font-size:12px;color:var(--sg-faint)}.sizing-guide-chart__footnote{margin:0;font-size:12px;line-height:1.5;color:var(--sg-faint)}.sizing-guide-desktop-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;align-items:center;justify-content:center;overflow:auto;padding:clamp(64px,4vw,72px) clamp(24px,4vw,64px);background:rgb(var(--color-background-rgb))}.sizing-guide-desktop-panel[hidden]{display:none}.sizing-guide-desktop-panel .sizing-guide-chart{max-width:min(100%,1080px);gap:clamp(10px,1vw,14px);--sg-gutter: clamp(44px, 6vw, 64px);--sg-right-gutter: clamp(36px, 5vw, 52px)}.sizing-guide-desktop-panel .sizing-guide-chart__readout-values{flex-direction:row;align-items:baseline;gap:6px;min-width:0}.sizing-guide-desktop-panel .sizing-guide-chart__readout-sub,.sizing-guide-desktop-panel .sizing-guide-chart__axis-key{display:none}.sizing-guide-desktop-panel .sizing-guide-chart__grid{height:clamp(300px,48vh,460px)}.sizing-guide-desktop-panel .sizing-guide-close--desktop{position:absolute;top:16px;right:16px}@media screen and (min-width:750px){.product-information__grid.product-information--media-left .product-information__media.sizing-guide-media--active{--sg-header-offset: var(--header-height, 0px);top:var(--sg-header-offset)!important;height:calc(100vh - var(--sg-header-offset))!important;height:calc(100dvh - var(--sg-header-offset))!important;max-height:calc(100vh - var(--sg-header-offset))!important;max-height:calc(100dvh - var(--sg-header-offset))!important;padding-block:0;background:rgb(var(--color-background-rgb))!important}body:has(#header-component:is([data-sticky-state=idle],[sticky=always][data-scroll-direction=down])) .product-information__grid.product-information--media-left .product-information__media.sizing-guide-media--active{--sg-header-offset: 0px}.product-information__media.sizing-guide-media--active>:not(.sizing-guide-desktop-panel){visibility:hidden;pointer-events:none}}@media screen and (max-width:749px){.sizing-guide-desktop-panel{display:none!important}.sizing-guide-chart{--sg-gutter: 40px}}.sizing-guide-chart:not([data-ready=true]) .sizing-guide-chart__footnote-interactive,.sizing-guide-chart:not([data-ready=true]) .sizing-guide-chart__readout-values,.sizing-guide-chart:not([data-ready=true]) .sizing-guide-chart__axis-key{display:none}@media(prefers-reduced-motion:reduce){.sizing-guide-chart__bar-active{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/81/assets/sizing-guide-chart.css.map */