.oddit-section-hair-match{background:#fff;padding:35px 16px;-webkit-tap-highlight-color:transparent;overflow-x:clip}.oddit-section-hair-match *,.oddit-section-hair-match *:before,.oddit-section-hair-match *:after{box-sizing:border-box}.oddit-section-hair-match__container{max-width:1260px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:35px}.oddit-section-hair-match__heading{margin:0 auto;font-family:Futura PT,sans-serif;font-weight:600;font-size:30px;line-height:1.1;letter-spacing:.01em;color:#000;text-transform:capitalize;text-align:center;width:100%;max-width:270px;text-box:trim-both cap alphabetic}.oddit-section-hair-match__tabs{display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(0,0,0,.1);width:100%;max-width:328px;margin:0 auto}.oddit-section-hair-match__tabs--desktop{display:none}.oddit-section-hair-match__tab{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:0 16px 16px;font-family:Futura PT,sans-serif;font-weight:500;font-size:18px;line-height:1;letter-spacing:.01em;color:#000;text-align:center;text-transform:capitalize;cursor:pointer;white-space:nowrap;transition:border-color .2s ease,opacity .2s ease;text-box:trim-both cap alphabetic}.oddit-section-hair-match__tab--active{border-bottom-color:#000}.oddit-section-hair-match__tab:not(.oddit-section-hair-match__tab--active){opacity:.7}.oddit-section-hair-match__tab:hover:not(.oddit-section-hair-match__tab--active){opacity:1}.oddit-section-hair-match__layout{display:flex;flex-direction:column;width:100%;gap:35px}.oddit-section-hair-match__media{display:flex;flex-direction:column;gap:24px;width:100%;max-width:530px;margin:0 auto}.oddit-section-hair-match__compare{--position: 50%;position:relative;width:100%;background:#f6f1ed;overflow:hidden;aspect-ratio:328 / 342;touch-action:pan-y;user-select:none;-webkit-user-select:none}.oddit-section-hair-match__compare-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;pointer-events:none;-webkit-user-drag:none}.oddit-section-hair-match__compare-image--after{z-index:1}.oddit-section-hair-match__compare-before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;clip-path:inset(0 calc(100% - var(--position)) 0 0);pointer-events:none}.oddit-section-hair-match__chip{position:absolute;top:14px;z-index:4;display:flex;align-items:center;justify-content:center;height:30px;padding:0 11px;background:#fff;font-family:Futura PT,sans-serif;font-weight:500;font-size:15px;line-height:1;letter-spacing:.01em;color:#000;text-transform:capitalize;white-space:nowrap;text-box:trim-both cap alphabetic}.oddit-section-hair-match__chip--left{left:14px}.oddit-section-hair-match__chip--right{right:14px;z-index:1}.oddit-section-hair-match__avatar{position:absolute;bottom:14px;left:14px;width:78px;height:78px;border-radius:50%;border:2px solid #ffffff;overflow:hidden;z-index:4;background:#efeee9}.oddit-section-hair-match__avatar-image{display:block;width:100%;height:100%;object-fit:cover}.oddit-section-hair-match__divider{position:absolute;top:0;left:var(--position);transform:translate(-50%);width:4px;height:100%;background:#fff;z-index:3;display:block;pointer-events:none}.oddit-section-hair-match__handle{position:absolute;top:50%;left:var(--position);transform:translate(-50%,-50%);z-index:5;appearance:none;-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:ew-resize;color:#000;box-shadow:0 1px 4px #0000001a;padding:0;touch-action:none}.oddit-section-hair-match__handle:focus-visible{outline:2px solid #000000;outline-offset:2px}.oddit-section-hair-match__handle svg{width:18px;height:14px}.oddit-section-hair-match__caption{margin:0;font-family:Futura PT,sans-serif;font-style:italic;font-weight:400;font-size:15px;line-height:1.6;letter-spacing:.01em;color:#000;text-box:trim-both cap alphabetic}.oddit-section-hair-match__caption-strong,.oddit-section-hair-match__caption strong{font-weight:500;text-box:trim-both cap alphabetic}.oddit-section-hair-match__caption-strong{display:block;margin-bottom:6px}.oddit-section-hair-match__details{display:flex;flex-direction:column;gap:40px;width:100%}.oddit-section-hair-match__panel{display:flex;flex-direction:column;gap:35px}.oddit-section-hair-match__panel[hidden]{display:none}.oddit-section-hair-match__panel-header{display:flex;flex-direction:column;gap:24px}.oddit-section-hair-match__panel-title{margin:0;font-family:Futura PT,sans-serif;font-weight:600;font-size:22px;line-height:1.05;letter-spacing:.01em;color:#000;text-transform:capitalize;text-box:trim-both cap alphabetic}.oddit-section-hair-match__panel-description{margin:0;font-family:Futura PT,sans-serif;font-weight:400;font-size:18px;line-height:1.6;letter-spacing:.01em;color:#040404;text-box:trim-both cap alphabetic}.oddit-section-hair-match__attributes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}.oddit-section-hair-match__attribute{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 16px 20px 6px;border-top:1px solid rgba(0,0,0,.1)}.oddit-section-hair-match__attribute:last-child{border-bottom:1px solid rgba(0,0,0,.1)}.oddit-section-hair-match__attribute-label{font-family:Futura PT,sans-serif;font-weight:500;font-size:15px;line-height:1;letter-spacing:.08em;color:#000;text-transform:uppercase;white-space:nowrap;text-box:trim-both cap alphabetic;display:inline-block}.oddit-section-hair-match__attribute-value{display:flex;align-items:center;gap:10px;font-family:Futura PT,sans-serif;font-weight:500;font-size:20px;line-height:1;letter-spacing:.01em;color:#000;text-transform:capitalize;text-align:right;text-box:trim-both cap alphabetic}.oddit-section-hair-match__attribute-icon{width:12px;height:12px;flex:0 0 12px;color:#000;display:block}.oddit-section-hair-match__attribute-tooltip-wrap{position:relative;display:inline-flex;align-items:center}.oddit-section-hair-match__attribute-tooltip-trigger{-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit}.oddit-section-hair-match__attribute-tooltip-trigger:focus{outline:none}.oddit-section-hair-match__attribute-tooltip-trigger:focus-visible{outline:2px solid #000000;outline-offset:2px;border-radius:50%}.oddit-section-hair-match__attribute-tooltip{position:absolute;bottom:calc(100% + 14px);right:-8px;width:280px;max-width:calc(100vw - 32px);padding:20px;background:#fff;border-radius:4px;box-shadow:0 8px 24px #0000001f;border:1px solid rgba(0,0,0,.08);text-align:left;font-family:Futura PT,sans-serif;z-index:50;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s linear;pointer-events:none}.oddit-section-hair-match__attribute-tooltip:after{content:"";position:absolute;top:100%;right:14px;border:7px solid transparent;border-top-color:#fff}.oddit-section-hair-match__attribute-tooltip-wrap:hover .oddit-section-hair-match__attribute-tooltip,.oddit-section-hair-match__attribute-tooltip-wrap:focus-within .oddit-section-hair-match__attribute-tooltip{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.oddit-section-hair-match__attribute-tooltip-heading{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid #e9e9e9;font-size:14px;font-weight:500;line-height:1;letter-spacing:.88px;text-transform:uppercase;color:#666;text-box:trim-both cap alphabetic}.oddit-section-hair-match__attribute-tooltip-body{font-size:15px;font-weight:400;line-height:1.5;color:#000}.oddit-section-hair-match__attribute-tooltip-body :first-child{margin-top:0}.oddit-section-hair-match__attribute-tooltip-body :last-child{margin-bottom:0}.oddit-section-hair-match__attribute-tooltip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}.oddit-section-hair-match__attribute-tooltip-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e9e9e9}.oddit-section-hair-match__attribute-tooltip-item:first-child{padding-top:0}.oddit-section-hair-match__attribute-tooltip-item:last-child{padding-bottom:0;border-bottom:0}.oddit-section-hair-match__attribute-tooltip-img-wrap{flex-shrink:0;width:45px;height:45px;border-radius:50%;overflow:hidden;background:#f4ebe4}.oddit-section-hair-match__attribute-tooltip-img{display:block;width:100%;height:100%;object-fit:cover}.oddit-section-hair-match__attribute-tooltip-text{display:flex;flex-direction:column;gap:14px;min-width:0}.oddit-section-hair-match__attribute-tooltip-title{font-size:17px;font-weight:500;line-height:1.2;color:#000;text-transform:capitalize;text-box:trim-both cap alphabetic}.oddit-section-hair-match__attribute-tooltip-subtitle{font-size:14px;font-weight:500;line-height:1;letter-spacing:.88px;text-transform:uppercase;color:#888;text-box:trim-both cap alphabetic}.oddit-section-hair-match__help{display:flex;flex-direction:column;gap:24px;padding:26px 24px;border:1px solid rgba(0,0,0,.1)}.oddit-section-hair-match__help-heading{margin:0;font-family:Futura PT,sans-serif;font-weight:500;font-size:18px;line-height:1.05;letter-spacing:.01em;color:#000;text-transform:capitalize;text-box:trim-both cap alphabetic}.oddit-section-hair-match__help-text{margin:0;font-family:Futura PT,sans-serif;font-weight:400;font-size:18px;line-height:1.6;letter-spacing:.01em;color:#000;text-box:trim-both cap alphabetic}.oddit-section-hair-match__help-link,.oddit-section-hair-match__help-text a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s ease}.oddit-section-hair-match__help-link:hover,.oddit-section-hair-match__help-text a:hover{opacity:.7}@media(min-width:750px){.oddit-section-hair-match{padding:60px 32px}.oddit-section-hair-match__caption-strong{display:inline-block;margin-bottom:0}.oddit-section-hair-match__container{gap:50px}.oddit-section-hair-match__heading{max-width:none;font-size:36px}.oddit-section-hair-match__compare{aspect-ratio:530 / 552}.oddit-section-hair-match__avatar{width:100px;height:100px}.oddit-section-hair-match__chip{height:36px;padding:0 14px;font-size:16px}}@media(min-width:990px){.oddit-section-hair-match{padding:80px 90px}.oddit-section-hair-match__container{align-items:stretch;gap:0}.oddit-section-hair-match__heading{text-align:left;font-size:40px;letter-spacing:.01em;margin:0 0 32px}.oddit-section-hair-match__tabs--mobile{display:none}.oddit-section-hair-match__tabs--desktop{display:inline-flex;justify-content:flex-start;width:fit-content;max-width:none;margin:0;align-self:flex-start}.oddit-section-hair-match__layout{flex-direction:row;align-items:flex-start;gap:60px;width:100%}.oddit-section-hair-match__media{flex:1 1 47%;max-width:530px;margin:0;gap:28px}.oddit-section-hair-match__compare{aspect-ratio:530 / 552}.oddit-section-hair-match__chip{top:14px;height:40px;padding:0 16px;font-size:18px}.oddit-section-hair-match__avatar{width:117px;height:117px;bottom:24px;left:24px}.oddit-section-hair-match__caption{font-size:17px}.oddit-section-hair-match__details{flex:1 1 53%;max-width:582px;min-width:0;padding-top:10px;gap:50px}.oddit-section-hair-match__panel{gap:40px}.oddit-section-hair-match__panel-header{gap:30px}.oddit-section-hair-match__panel-title{font-size:34px}.oddit-section-hair-match__panel-description{font-size:20px}.oddit-section-hair-match__attribute-value{font-size:22px}.oddit-section-hair-match__help-heading,.oddit-section-hair-match__help-text,.oddit-section-hair-match__help-text .oddit-section-hair-match__help-link{font-size:18px}.oddit-section-hair-match__handle{width:40px;height:40px}.oddit-section-hair-match__handle svg{width:20px;height:16px}}@media(min-width:1200px){.oddit-section-hair-match__heading{margin-bottom:40px}}
/*# sourceMappingURL=/cdn/shop/t/307/assets/oddit-section-hair-match.css.map */