.bag-color-selector{margin-bottom:1.6rem}.bag-color-selector__dropdown{position:relative;width:100%}@media screen and (min-width:750px){.bag-color-selector__dropdown{max-width:280px}}.bag-color-selector__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:65px;padding:0;background:#fff;border:1px solid #d9d9d9;border-radius:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#000;transition:border-color .2s;justify-content:center}.bag-color-selector__trigger:hover,.bag-color-selector__trigger[aria-expanded=true]{border-color:#000}.bag-color-selector__selected{display:flex;align-items:center;gap:1.2rem}.bag-color-selector__selected-image{width:65px;height:65px;object-fit:contain;border-radius:0;position:absolute;top:0;left:0}.bag-color-selector__selected-name{font-family:Inter,sans-serif;font-size:16px;font-weight:600}.bag-color-selector__placeholder{color:#999;padding-inline:8px}.bag-color-selector__options{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;background:#fff;border-top:none;border-radius:0;padding:0;margin:0;overflow-y:auto;flex-direction:column}.bag-color-selector__options-list{list-style:none;padding:10px 0 0;margin:0;display:flex;flex-direction:column;gap:10px}.bag-color-selector__options.is-open{display:flex}body.bag-selector-open{overflow:hidden;touch-action:none}@media(max-width:750px){.bag-color-selector__options{display:flex;position:fixed;top:auto;left:0;right:0;bottom:0;z-index:9999;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:none;transform:translateY(100%);visibility:hidden;pointer-events:none;transition:transform .35s ease,visibility .35s ease;background:linear-gradient(180deg,#fff0,#fff 100px 100%);padding-top:150px}.bag-color-selector__options-list{gap:26px;padding-inline:36px;padding-bottom:40px;overflow:auto}.bag-color-selector__options::-webkit-scrollbar,.bag-color-selector__options-list::-webkit-scrollbar{display:none}.bag-color-selector__options.is-open{transform:translateY(0);visibility:visible;pointer-events:auto}}.bag-color-selector__option{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1rem 1.6rem;background:none;border:none;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;color:#000;text-align:left;transition:background-color .15s;border:1px solid #D1D1D1;padding:0;height:65px;background-color:#fff}@media(max-width:750px){.bag-color-selector__options li{width:100%}}.bag-color-selector__option:hover{background-color:#f5f5f5}.bag-color-selector__option.is-selected{background-color:#f0f0f0;font-weight:600}.bag-color-selector__option-image{width:65px;height:65px;object-fit:contain;border-radius:0}.bag-color-selector__option-name{font-weight:500}.bag-color-selector__trigger--error,.bag-color-selector__trigger--error:hover{border-color:#e22120}.bag-color-selector__error{display:none;font-family:Inter,sans-serif;font-size:13px;color:#e22120;margin-top:.4rem}.bag-color-selector__error.is-visible{display:block}
/*# sourceMappingURL=/cdn/shop/t/13/assets/component-bag-color-selector.css.map */