.trinny-shade-selector{margin:0;padding-top:var(--space_L, 24px);font-family:var(--font-family-Sofia-Pro, "sofia-pro"),sans-serif;max-width:449px;width:100%}.shade-selector__tabs{display:flex;gap:24px;border-bottom:1px solid var(--Colour-Brand-Grey10, #e4e4e4);margin-bottom:12px;padding-bottom:0;align-items:center;width:100%}.shade-tab{background:none;border:none;padding:8px 0 12px;font-family:var(--font-family-Sofia-Pro, "sofia-pro")!important;font-size:var(--font-size-M, 14px)!important;font-weight:500;line-height:var(--font-line-height-S, 16px);letter-spacing:var(--font-letter-spacing-5XL, .4px);text-transform:uppercase;color:var(--Colour-Brand-Grey55, #757575);cursor:pointer;position:relative;transition:color .2s ease}.shade-tab.is-active{color:var(--Colour-Brand-Grey80, #353535)}.shade-tab.is-active:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background-color:var(--Colour-Brand-Grey80, #353535)}.shade-selector__label{margin:0 0 12px;font-family:var(--font-family-Sofia-Pro, "sofia-pro");font-size:var(--font-size-M, 14px);line-height:14px;letter-spacing:.2px;color:var(--Colour-Brand-Grey80, #353535);font-weight:500;text-align:left}.selected-shade-name{font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shade-selector__grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;align-items:center;align-content:center}.shade-item{width:38px;height:38px;border-radius:var(--space_4XS, 2px)!important;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;cursor:pointer;border:1px solid transparent;padding:2px;background:none;aspect-ratio:1/1;box-sizing:border-box}.shade-item:hover,.shade-item.is-active{border-color:var(--Colour-Brand-Grey70, #4D4D4D)!important}.shade-swatch{width:100%;height:100%;border-radius:var(--space_4XS, 2px)!important;overflow:hidden;background-color:var(--Colour-Brand-Grey20, #D2D2D2);border:1px solid var(--Colour-Brand-Grey20, #D2D2D2);box-sizing:border-box}.shade-swatch img{width:100%;height:100%;object-fit:cover}.shade-item.is-hidden{display:none}@media screen and (max-width:749px){.trinny-shade-selector{max-width:374px}}.trinny-shade-selector.is-loading{opacity:.5;pointer-events:none}
/*# sourceMappingURL=/cdn/shop/t/111/assets/section-trinny-shade-selector.css.map */