.shadepicker{background:var(--cream);overflow-x:clip}.shadepicker__head{margin-bottom:clamp(1.8rem,4vw,2.6rem)}.shadepicker__head .kicker{margin-bottom:.7rem}.shadepicker__sub{margin-top:.9rem;max-width:52ch}.shadepicker__row{display:flex;gap:.9rem;margin:0;padding:.25rem 0 1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--mauve) transparent;margin-inline:calc(var(--dq-gutter) * -1);padding-inline:var(--dq-gutter)}.shadepicker__row::-webkit-scrollbar{height:6px}.shadepicker__row::-webkit-scrollbar-thumb{background:var(--mauve);border-radius:var(--radius-pill)}.shadepicker__item{flex:0 0 auto;scroll-snap-align:center;width:44vw;max-width:220px;min-width:150px}.shadepicker__card{display:flex;flex-direction:column;gap:.7rem;width:100%;min-height:44px;padding:.6rem .6rem .8rem;background:var(--white);border:1.5px solid var(--dq-line);border-radius:var(--radius);text-align:center;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.shadepicker__card:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px}.shadepicker__card.is-selected{border-color:var(--rose-deep);box-shadow:var(--shadow-card)}.shadepicker__card:active{transform:scale(.99)}.shadepicker__tile{display:block;position:relative;aspect-ratio:1 / 1;border-radius:var(--dq-radius-sm);overflow:hidden;background:linear-gradient(150deg,var(--cream),var(--blush-wash))}.shadepicker__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;padding:.5rem;transition:transform 1.1s var(--ease)}.shadepicker__swatch{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 1px #3d37331a,inset 0 -24px 38px -22px #3d373359;transition:transform 1.1s var(--ease)}.shadepicker__meta{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:1.4rem}.shadepicker__dot{flex:0 0 auto;width:.85rem;height:.85rem;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px #3d37332e}.shadepicker__name{font-family:var(--font-head);font-weight:500;font-size:var(--fs-small);letter-spacing:0;color:var(--ink);line-height:1.2}.shadepicker__buy{margin-top:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.shadepicker__pricerow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.5rem;margin:0}.shadepicker__price{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h3);color:var(--ink);letter-spacing:var(--track-tight)}.shadepicker__pricelabel{color:var(--ink-soft);font-size:var(--fs-body)}.shadepicker__pricelabel [data-shade-label]{color:var(--ink);font-weight:500}.shadepicker__add{min-height:44px}@media(min-width:720px){.shadepicker__row{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:clamp(.8rem,1.8vw,1.4rem);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:auto;padding-inline:0;max-width:var(--container-wide)}.shadepicker__item{width:clamp(160px,17vw,200px);max-width:none;min-width:0;scroll-snap-align:start}.shadepicker__buy{flex-direction:row;justify-content:center;gap:1.5rem}}@media(hover:hover){.shadepicker__card:hover{border-color:var(--rose);box-shadow:var(--shadow-card)}.shadepicker__card:hover .shadepicker__img,.shadepicker__card:hover .shadepicker__swatch{transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.shadepicker__card,.shadepicker__img{transition:none}.shadepicker__row{scroll-behavior:auto}}.shadepicker__stage{position:relative}.shadepicker__arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:4;display:none;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--white);color:var(--ink);border:1px solid var(--dq-line);box-shadow:var(--shadow-card);cursor:pointer;transition:background-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}.shadepicker__arrow svg{width:18px;height:18px;stroke:currentColor}.shadepicker__arrow--prev{left:-8px}.shadepicker__arrow--next{right:-8px}.shadepicker__arrow[disabled]{opacity:.35;cursor:default;box-shadow:none}@media(hover:hover){.shadepicker__arrow:not([disabled]):hover{background:var(--rose)}}@media(min-width:720px){.shadepicker__arrow{display:inline-grid}}@media(max-width:719.98px){.shadepicker__arrow{display:none}}
/*# sourceMappingURL=/cdn/shop/t/97/assets/dq-shade-selector.css.map */