.shade-dropdown{flex-direction:row;align-items:center;gap:20px;display:flex;position:relative}.shade-dropdown .arrow{color:#000;margin-top:1px;font-family:BB Icons,sans-serif;font-size:.75rem;transition:transform .2s}.shade-dropdown .arrow:after{content:""}.shade-dropdown .shades-bar{flex-direction:row;gap:15px;display:flex;overflow-x:auto}.shade-dropdown .shades-bar::-webkit-scrollbar{display:none}.shade-dropdown .shades-bar .shade-btn{background:0 0;padding:0}.shade-dropdown .shades-bar .shade-btn.selected .shade-circle{border:.5px solid #000}.shade-dropdown .shades-bar .shade-btn .shade-circle{border:.5px solid #ddd;border-radius:50%;width:24px;height:24px;display:block}.shade-dropdown .shade-button{cursor:pointer;background:0 0;border:1px solid #000;border-radius:0;flex-shrink:0;justify-content:space-between;align-items:center;width:210px;padding:10px;font-size:14px;font-weight:500;transition:all .2s ease-in-out;display:flex}@media (min-width:1024px){.shade-dropdown .shade-button{width:230px}}.shade-dropdown .shade-button .shade-info{align-items:center;gap:8px;min-width:0;display:flex}.shade-dropdown .shade-button .shade-circle{border:1px solid #000;border-radius:50%;width:16px;height:16px}.shade-dropdown .shade-button .shade-name{text-transform:capitalize;color:#000;font-family:Satoshi,sans-serif;font-size:.75rem;font-weight:500;line-height:normal}@media (min-width:1024px){.shade-dropdown .shade-button .shade-name{color:#000;font-family:Satoshi,sans-serif;font-size:.875rem;font-weight:500;line-height:normal}}.shade-dropdown .shade-button .shade-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.shade-dropdown .shade-button .arrow-up{color:#000;margin-top:1px;font-family:BB Icons,sans-serif;font-size:.75rem;transition:transform .2s;rotate:90deg}.shade-dropdown .shade-button .arrow-up:after{content:""}.shade-dropdown .shade-button .arrow-down{color:#000;font-family:BB Icons,sans-serif;font-size:.75rem;transition:transform .2s;rotate:-90deg}.shade-dropdown .shade-button .arrow-down:after{content:""}.shade-dropdown .shade-list{z-index:10;background:#fff;border:1px solid #000;border-top:#fff;border-radius:0;width:210px;max-height:160px;margin-top:-2px;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 4px 6px #0000001a}@media (min-width:1024px){.shade-dropdown .shade-list{width:230px}}.shade-dropdown .shade-list::-webkit-scrollbar{display:none}.shade-dropdown .shade-list .shade-option{cursor:pointer;background:#faf7f2;border:none;border-bottom:.5px solid #b7b7b7;border-radius:0;align-items:center;width:100%;padding:10px;font-size:14px;font-weight:500;transition:all .2s ease-in-out;display:flex}.shade-dropdown .shade-list .shade-option:hover,.shade-dropdown .shade-list .shade-option.selected{background-color:#f2ede5}.shade-dropdown .shade-list .shade-option .shade-circle{border:1px solid #000;border-radius:50%;width:16px;height:16px;margin-right:8px}.shade-dropdown .shade-list .shade-option .shade-name{text-transform:capitalize;color:#000;font-family:Satoshi,sans-serif;font-size:.75rem;font-weight:500;line-height:normal}@media (min-width:1024px){.shade-dropdown .shade-list .shade-option .shade-name{color:#000;font-family:Satoshi,sans-serif;font-size:.875rem;font-weight:500;line-height:normal}}.shade-dropdown .shade-list .shade-option .shade-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}