.shade-picker{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;display:flex;align-items:flex-start;justify-content:center;padding:clamp(24px,9vh,110px) 20px 24px;font-family:Red Hat Display,sans-serif;opacity:0;transition:opacity .25s ease}.shade-picker.is-open{opacity:1}@media screen and (max-width:749px){.shade-picker{padding:16px 12px}.shade-picker__panel{max-height:calc(100vh - 32px)}}.shade-picker[hidden]{display:none}.shade-picker>.shade-picker__overlay{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080}body.shade-picker-open{overflow:hidden}.shade-picker__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:1280px;max-height:calc(100vh - clamp(48px,12vh,140px));background:#fff;border-radius:30px;overflow:hidden;transform:translateY(12px);transition:transform .25s ease}.shade-picker.is-open .shade-picker__panel{transform:none}.shade-picker__header{position:relative;flex:0 0 auto;padding:12px 60px 6px;text-align:center;background:#fff}.shade-picker__heading{margin:0;font-size:24px;font-weight:600;color:#000}.shade-picker__subheading{margin:0;font-size:16px;font-weight:400;color:#444}.shade-picker__subheading:empty{display:none}.shade-picker__close{position:absolute;top:10px;right:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:0;border-radius:5px;cursor:pointer}.shade-picker__close:hover{background:#f5f5f5}.shade-picker__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px 24px}.shade-picker__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media screen and (min-width:750px){.shade-picker__body{padding:16px 40px 24px}.shade-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media screen and (min-width:990px){.shade-picker__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media screen and (min-width:1280px){.shade-picker__body{padding:16px 60px 24px}.shade-picker__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.shade-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#fff}.shade-card--selected{background:#fdf6f6}.shade-card>.shade-card__media{display:block;width:100%;aspect-ratio:233 / 194;border-radius:5px;overflow:hidden;background:#fff}.shade-card__image{width:100%;height:100%;object-fit:contain;display:block}.shade-card__title{margin:0;min-height:40px;font-size:16px;font-weight:400;line-height:20px;text-align:center;color:#1e1e1e}.shade-card__add,.shade-card__stepper{width:100%;height:52px;margin-top:auto;display:flex;align-items:center;justify-content:center;padding:0 15px;background:#fcebeb;border:0;border-radius:30px}.shade-card__add{font-family:inherit;font-size:12px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#000;cursor:pointer;transition:opacity .2s ease}.shade-card__add:hover:not(:disabled){opacity:.8}.shade-card__add:disabled{opacity:.45;cursor:not-allowed}.shade-card__add[hidden],.shade-card__stepper[hidden]{display:none}.shade-card__stepper{justify-content:space-between;gap:8px}.shade-card__step{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff;border:0;border-radius:50%;font-family:inherit;font-size:18px;line-height:1;color:#000;cursor:pointer}.shade-card__step:disabled{opacity:.35;cursor:not-allowed}.shade-card__qty{font-size:16px;font-weight:600;color:#000}.shade-picker__bar{position:sticky;bottom:0;z-index:1;width:300px;max-width:100%;margin:24px auto 0;padding:20px 15px 18px;background:#591b1e;border-radius:15px;box-shadow:4px 2px 9px #0003,15px 8px 17px #0000002b,34px 17px 23px #0000001a,60px 31px 27px #00000008}.shade-picker__count{position:absolute;top:-14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;height:28px;padding:4px 12px;background:#fcebeb;border-radius:16px;box-shadow:4px 2px 9px #0003,15px 8px 17px #0000002b;font-size:16px;font-weight:600;color:#000}.shade-picker__submit{width:100%;padding:18px 15px;background:#fcebeb;border:0;border-radius:30px;font-family:inherit;font-size:16px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#000;cursor:pointer;transition:opacity .2s ease}.shade-picker__submit:hover:not(:disabled){opacity:.85}.shade-picker__submit:disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.shade-picker,.shade-picker__panel{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/200/assets/shade-picker.css.map */