.drop-extsel{--xs-ink: 39, 40, 42;--xs-cream: 252, 250, 243;--xs-rose: 119, 91, 99;--xs-rose-dark: 72, 57, 61;--xs-blush: 201, 172, 173;--xs-accent: var(--xs-accent-color, #775b63);display:block;padding-top:var(--xs-pt, 24px);padding-bottom:var(--xs-pb, 24px)}.drop-extsel,.drop-extsel *{box-sizing:border-box}.drop-extsel__editor-note{margin:0 0 1.4rem;padding:1rem 1.2rem;border:1px solid rgba(var(--xs-rose),.16);border-radius:16px;background:linear-gradient(135deg,rgba(var(--xs-cream),.82),#ffffff85),#ffffff80;color:rgba(var(--xs-ink),.72);font-size:1.2rem;line-height:1.4}.drop-extsel__group{position:relative;isolation:isolate}.drop-extsel__group+.drop-extsel__group{margin-top:clamp(1.8rem,3vw,2.4rem)}.drop-extsel__label{margin:0 0 1.1rem;color:rgba(var(--xs-rose-dark),.88);font-family:var(--font-heading-family);font-style:var(--font-heading-style);font-size:var(--xs-label-size, 15px);font-weight:var(--font-heading-weight);letter-spacing:.018em;line-height:1.25;text-transform:none}.drop-extsel__swatches{display:flex;flex-wrap:nowrap;gap:var(--xs-gap, 12px);align-items:center}.drop-extsel__swatch{--s: var(--xs-swatch-size, 56px);position:relative;isolation:isolate;flex:0 0 auto;width:var(--s);height:var(--s);aspect-ratio:1 / 1;margin:0;padding:0;border:1px solid rgba(var(--xs-rose),.14);border-radius:999px;overflow:hidden;background:radial-gradient(circle at 26% 14%,rgba(255,255,255,.76),transparent 34%),linear-gradient(135deg,rgba(var(--xs-cream),.76),#ffffff5c),#ffffff8f;box-shadow:inset 0 1px #ffffffbd,inset 0 -10px 18px rgba(var(--xs-rose-dark),.05),0 8px 18px rgba(var(--xs-ink),.08);cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translateZ(0);transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease}.drop-extsel__swatch:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff6b}.drop-extsel__swatch img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.01)}@media(hover:hover)and (pointer:fine){.drop-extsel__swatch:hover{border-color:rgba(var(--xs-rose),.32);box-shadow:inset 0 1px #ffffffd1,inset 0 -10px 18px rgba(var(--xs-rose-dark),.07),0 0 0 4px rgba(var(--xs-rose),.08),0 12px 24px rgba(var(--xs-ink),.11);filter:saturate(1.05) contrast(1.02);transform:translateY(-1px) scale(1.03) translateZ(0)}}.drop-extsel__swatch:focus-visible{outline:0;box-shadow:0 0 0 3px rgb(var(--color-background)),0 0 0 6px color-mix(in srgb,var(--xs-accent) 76%,#ffffff),0 10px 22px rgba(var(--xs-ink),.12)}.drop-extsel__swatch.is-active{border-color:rgba(var(--xs-rose),.44);box-shadow:inset 0 1px #ffffffe0,inset 0 -10px 18px rgba(var(--xs-rose-dark),.08),0 0 0 2px #fffffff2,0 0 0 5px color-mix(in srgb,var(--xs-accent) 44%,transparent),0 15px 30px rgba(var(--xs-rose-dark),.18);filter:saturate(1.08) contrast(1.03);transform:scale(1.04) translateZ(0)}@supports not (color: color-mix(in srgb,#000 50%,#fff)){.drop-extsel__swatch.is-active{box-shadow:inset 0 1px #ffffffe0,inset 0 -10px 18px rgba(var(--xs-rose-dark),.08),0 0 0 2px #fffffff2,0 0 0 5px rgba(var(--xs-rose),.28),0 15px 30px rgba(var(--xs-rose-dark),.18)}.drop-extsel__swatch:focus-visible{box-shadow:0 0 0 3px rgb(var(--color-background)),0 0 0 6px rgba(var(--xs-rose),.34),0 10px 22px rgba(var(--xs-ink),.12)}}.drop-extsel__modal{--xs-ink: 39, 40, 42;--xs-cream: 252, 250, 243;--xs-rose: 119, 91, 99;--xs-rose-dark: 72, 57, 61;--xs-blush: 201, 172, 173;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;width:100vw;min-height:100vh;min-height:100dvh;padding:max(1.6rem,env(safe-area-inset-top)) max(1.6rem,env(safe-area-inset-right)) max(1.6rem,env(safe-area-inset-bottom)) max(1.6rem,env(safe-area-inset-left));opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.drop-extsel__modal[hidden]{display:none!important}.drop-extsel__modal.is-open{opacity:1;visibility:visible}.drop-extsel__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.12),transparent 34%),radial-gradient(circle at 88% 12%,rgba(var(--xs-blush),.16),transparent 42%),rgba(var(--xs-ink),.52);cursor:default}@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.drop-extsel__backdrop{-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}}.drop-extsel__dialog{position:relative;z-index:1;display:grid;place-items:center;width:min(94vw,110rem);max-width:calc(100vw - 3.2rem);max-height:calc(100dvh - 3.2rem);transform:translateY(8px) scale(.985);transition:transform .24s cubic-bezier(.22,1,.36,1)}.drop-extsel__modal.is-open .drop-extsel__dialog{transform:translateY(0) scale(1)}.drop-extsel__img{display:block;width:auto;height:auto;max-width:100%;max-height:min(78vh,78rem);max-height:min(78dvh,78rem);border:1px solid rgba(255,255,255,.46);border-radius:18px;background:#ffffff2e;object-fit:contain;box-shadow:inset 0 1px #ffffff73,0 28px 86px #0000006b}.drop-extsel__close{position:absolute;top:max(1.4rem,env(safe-area-inset-top));right:max(1.4rem,env(safe-area-inset-right));z-index:2;display:inline-flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;margin:0;padding:0;border:1px solid rgba(255,255,255,.62);border-radius:999px;background:radial-gradient(circle at 24% 10%,rgba(255,255,255,.82),transparent 38%),#ffffffb8;color:rgb(var(--xs-rose-dark));cursor:pointer;box-shadow:inset 0 1px #ffffffb8,0 12px 28px #0000003d;transition:transform .18s ease,box-shadow .22s ease,background .22s ease}@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.drop-extsel__close{-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}}.drop-extsel__close:hover{background:#ffffffd6;box-shadow:inset 0 1px #ffffffd1,0 16px 34px #00000047;transform:translateY(-1px)}.drop-extsel__close:focus-visible{outline:0;box-shadow:0 0 0 3px #ffffffeb,0 0 0 6px rgba(var(--xs-rose),.36),0 12px 28px #0000003d}.drop-extsel__close svg{display:block;width:2rem;height:2rem}html.drop-extsel-modal-open,body.drop-extsel-modal-open{overflow:hidden!important;overscroll-behavior:none}@media screen and (max-width:749px){.drop-extsel__label{letter-spacing:.01em}.drop-extsel__swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.4rem,1.6vw,.8rem);max-width:100%;justify-items:center}.drop-extsel__swatch{width:min(100%,var(--s));min-width:0;height:auto}.drop-extsel__modal{padding:max(1.4rem,env(safe-area-inset-top)) max(1.2rem,env(safe-area-inset-right)) max(1.4rem,env(safe-area-inset-bottom)) max(1.2rem,env(safe-area-inset-left))}.drop-extsel__dialog{width:min(92vw,54rem);max-height:calc(100dvh - 9rem)}.drop-extsel__img{max-width:100%;max-height:calc(100vh - 11rem);max-height:calc(100dvh - 11rem);border-radius:16px}.drop-extsel__close{top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));width:4.2rem;height:4.2rem}}@media(prefers-reduced-motion:reduce){.drop-extsel__modal,.drop-extsel__dialog,.drop-extsel__close,.drop-extsel__swatch{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/35/assets/drop-extension-selector.css.map */