.color-swatches-container--hair-product{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0;padding:.5rem;max-width:100%}@media screen and (min-width: 750px){.color-swatches-container--hair-product{grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:2rem 0}}@media screen and (min-width: 990px){.color-swatches-container--hair-product{grid-template-columns:repeat(4,1fr);gap:1.5rem}}.color-swatch--hair-product{position:relative;border-radius:8px;transition:all .2s ease;cursor:pointer}.color-swatch--hair-product:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.color-swatch__image--hair-product{width:100%;min-height:80px;aspect-ratio:1;position:relative;overflow:hidden;border-radius:12px;border:none;transition:all .2s ease}@media screen and (min-width: 750px){.color-swatch__image--hair-product{min-height:100px;border-radius:16px}}@media screen and (min-width: 990px){.color-swatch__image--hair-product{min-height:120px;border-radius:20px}}.color-swatch__image--hair-product img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:8px}@media screen and (min-width: 750px){.color-swatch__image--hair-product img{border-radius:12px}}@media screen and (min-width: 990px){.color-swatch__image--hair-product img{border-radius:16px}}.color-swatch--hair-product input:checked+.color-swatch__image--hair-product{border:3px solid rgb(var(--accent-color));box-shadow:0 0 0 2px rgba(var(--accent-color),.3);transform:scale(1.05)}@media screen and (min-width: 750px){.color-swatch--hair-product input:checked+.color-swatch__image--hair-product{border:4px solid rgb(var(--accent-color));box-shadow:0 0 0 3px rgba(var(--accent-color),.3)}}.color-swatch--hair-product input.disabled+.color-swatch__image--hair-product{opacity:.6;position:relative;pointer-events:none}.color-swatch--hair-product input.disabled+.color-swatch__image--hair-product:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 48%,rgba(128,128,128,.8) 49%,rgba(128,128,128,.8) 51%,transparent 52%);z-index:2;pointer-events:none}.color-swatch--hair-product input.disabled~.color-swatch__tooltip--hair-product{background:#808080e6}.color-swatch--hair-product input.disabled~.color-swatch__tooltip--hair-product:after{border-top-color:#808080e6}.color-swatch__name--hair-product{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);font-size:.9rem;font-weight:500;color:rgba(var(--color-foreground),.8);text-align:center;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none}@media screen and (min-width: 750px){.color-swatch__name--hair-product{bottom:-32px;font-size:1rem}}@media screen and (min-width: 990px){.color-swatch__name--hair-product{bottom:-36px;font-size:1.1rem}}.color-swatch--hair-product:hover .color-swatch__name--hair-product{opacity:1}.same-day-badge{position:absolute;top:-2px;right:-2px;background:rgb(var(--accent-color));color:rgb(var(--color-background));font-size:.7rem;font-weight:700;padding:3px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;z-index:3;box-shadow:0 2px 4px #0000004d}@media screen and (min-width: 750px){.same-day-badge{top:-3px;right:-3px;font-size:.75rem;padding:4px 7px;border-radius:6px}}@media screen and (min-width: 990px){.same-day-badge{top:-4px;right:-4px;font-size:.8rem;padding:5px 9px;border-radius:8px}}.color-swatch__tooltip--hair-product{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:6px 10px;border-radius:6px;font-size:.75rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;z-index:10;pointer-events:none}.color-swatch__tooltip--hair-product:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#000000e6}@media (hover: hover){.color-swatch--hair-product:hover .color-swatch__tooltip--hair-product{opacity:1;visibility:visible;transform:translate(-50%) translateY(-3px)}}@media screen and (max-width: 749px){.color-swatches-container--hair-product{grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0}.color-swatch--hair-product{aspect-ratio:1;width:100%}.color-swatch__image--hair-product{width:100%;height:100%;aspect-ratio:1;min-height:unset;max-height:none;border-radius:10px;display:block}.color-swatch__image--hair-product img{border-radius:6px;width:100%;height:100%;object-fit:cover;display:block}.color-swatch__name--hair-product{font-size:.8rem;bottom:-24px}.same-day-badge{top:-1px;right:-1px;font-size:.65rem;padding:2px 5px;border-radius:3px}}.size-selector--hair-product{margin:1rem 0}.size-selector__title{font-weight:600;margin-bottom:.5rem;color:rgb(var(--color-foreground))}.size-options--hair-product{display:flex;gap:.5rem;flex-wrap:wrap}.size-option--hair-product{position:relative}.size-option--hair-product input{position:absolute;opacity:0;pointer-events:none}.size-option__label--hair-product{display:inline-block;padding:8px 16px;border:2px solid rgba(var(--color-foreground),.2);border-radius:6px;cursor:pointer;transition:all .2s ease;font-weight:500;min-width:80px;text-align:center}.size-option--hair-product input:checked+.size-option__label--hair-product{border-color:rgb(var(--accent-color));background-color:rgba(var(--accent-color),.1);color:rgb(var(--accent-color))}.size-option--hair-product input:disabled+.size-option__label--hair-product{opacity:.5;cursor:not-allowed;position:relative}.size-option--hair-product input:disabled+.size-option__label--hair-product:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.8) 45%,rgba(255,255,255,.8) 55%,transparent 60%);z-index:1}.quantity-selector--hair-product{margin:1.5rem 0}.quantity-title{font-weight:600;margin-bottom:.5rem;color:rgb(var(--color-foreground))}.color-swatch--loading .color-swatch__image--hair-product:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 1.5s infinite;z-index:1}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.color-swatch--hair-product input:focus-visible+.color-swatch__image--hair-product{outline:2px solid #007bff;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*# sourceMappingURL=/cdn/shop/t/3/assets/enhanced-color-swatches.css.map */