marker-selector{display:block;margin-block:1.5rem;container-type:inline-size}marker-selector[hidden],marker-selector [hidden],product-info [data-marker-hidden][hidden]{display:none!important}marker-selector .marker-help{font-style:italic;font-size:.85em;line-height:1.5;margin:0 0 1rem}marker-selector .marker-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}marker-selector .marker-tab{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;flex:1 1 140px;padding:.6rem;border:1px solid #b9c4cb;border-radius:.65rem;background:transparent;color:inherit;font:inherit;font-size:.85em;cursor:pointer}marker-selector .marker-tab[aria-selected=true]{border:2px solid #008ad4;background:#eef9ff;padding:calc(.6rem - 1px)}marker-selector .marker-tips{display:inline-flex;gap:2px;flex-shrink:0}marker-selector .marker-tips svg{width:14px;height:29px}marker-selector .marker-badge{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;border-radius:999px;background:#e6eef2;font-weight:700}marker-selector .marker-tab[aria-selected=true] .marker-badge{background:#008ad4;color:#fff}marker-selector .marker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:1.25rem .5rem}marker-selector .marker-cell{display:flex;flex-direction:column;align-items:center;gap:.65rem;min-width:0}marker-selector .marker-cap{width:3rem;height:3rem;border-radius:50%;background:var(--marker-color);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;letter-spacing:.01em;line-height:1;position:relative}marker-selector[data-size=medium] .marker-cap{width:3.75rem;height:3.75rem;font-size:.75rem}marker-selector[data-size=large] .marker-cap{width:4.5rem;height:4.5rem;font-size:.85rem}marker-selector .marker-cap.selected{outline:3px solid var(--marker-color);outline-offset:3px}marker-selector .marker-quantity{display:flex;align-items:center;border:1px solid #d8dfe3;border-radius:.5rem;overflow:hidden}marker-selector .marker-quantity button{width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:1.25rem;cursor:pointer}marker-selector .marker-quantity input{width:40px;min-width:0;height:44px;padding:0;text-align:center;border:0;background:transparent;color:inherit;font:inherit;-webkit-appearance:textfield;appearance:textfield}marker-selector input::-webkit-inner-spin-button,marker-selector input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}marker-selector button:disabled{opacity:.4;cursor:not-allowed}marker-selector :is(button,input,a,[tabindex]):focus-visible{outline:3px solid #005d93;outline-offset:2px}marker-selector .marker-status{font-size:.7em;line-height:1.2}marker-selector .marker-summary{border-top:1px solid #e0e5e9;margin-top:1.5rem;padding-top:1rem;line-height:1.6;font-weight:600}marker-selector .marker-submit{width:100%;margin-top:1rem;min-height:48px}marker-selector .marker-error{font-size:.85em;line-height:1.5;margin-block:.75rem}marker-selector .marker-fallback{display:block;background:none;border:0;text-decoration:underline;color:inherit;padding:.75rem 0;font:inherit;font-size:.8em;cursor:pointer}@container (max-width:280px){marker-selector .marker-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:1.25rem 2px}marker-selector .marker-quantity button{width:44px}marker-selector .marker-quantity input{width:36px}}marker-selector .marker-frame{border:1px solid #c6d4dc;border-radius:.75rem;background:rgb(var(--color-background));overflow:visible}marker-selector .marker-tabs{margin:-1px -1px 0;gap:0;flex-wrap:wrap;border-bottom:1px solid #c6d4dc;border-radius:.75rem .75rem 0 0;background:#f3f7f9}marker-selector .marker-tab{border:1px solid transparent;border-bottom:0;border-radius:.7rem .7rem 0 0;min-height:54px;margin-bottom:-1px;padding:.6rem .45rem;position:relative;background:transparent}marker-selector .marker-tab[aria-selected=true]{border:1px solid #c6d4dc;border-bottom:1px solid rgb(var(--color-background));background:rgb(var(--color-background));padding:.6rem .45rem;color:#006ca8;box-shadow:inset 0 3px #008ad4}marker-selector .marker-panel-body{padding:1.25rem .65rem .8rem}marker-selector .marker-grid{gap:.65rem;grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}marker-selector .marker-cell{width:100%;max-width:128px;justify-self:center;padding:1rem 0 0;gap:.85rem;border:1px solid color-mix(in srgb,var(--marker-color) 80%,#687780);border-radius:.65rem;background:#fff}marker-selector .marker-quantity{display:grid;grid-template-columns:44px minmax(22px,1fr) 44px;width:100%;margin-top:auto;border:0;border-top:1px solid color-mix(in srgb,var(--marker-color) 80%,#687780);border-radius:0 0 calc(.65rem - 1px) calc(.65rem - 1px);background:var(--marker-color);color:var(--marker-contrast);overflow:hidden}marker-selector .marker-quantity button{background:var(--marker-color);color:var(--marker-contrast);opacity:1}marker-selector .marker-quantity input{width:100%;color:var(--marker-contrast);background:var(--marker-color)}marker-selector .marker-quantity :is(button,input):focus-visible{outline-offset:-3px}marker-selector .marker-status{min-height:1em}@container (max-width:310px){marker-selector .marker-panel-body{padding:.9rem .35rem .5rem}marker-selector .marker-grid{gap:.4rem;grid-template-columns:repeat(2,minmax(0,1fr))}marker-selector .marker-cell{padding-inline:0}marker-selector .marker-quantity{width:100%}marker-selector .marker-quantity button{width:44px;min-width:44px;height:44px}marker-selector .marker-quantity input{width:100%;min-width:22px}marker-selector .marker-tab{gap:.25rem;font-size:.78em;flex-basis:120px}marker-selector .marker-tips svg{width:11px;height:27px}}marker-selector .marker-cell.is-unavailable{background:#eef0f1;border-color:#c7cdd1}marker-selector .marker-status{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:auto;color:#434b50;font-size:.8em}@container (max-width:250px){marker-selector .marker-grid{grid-template-columns:1fr}}marker-selector .marker-card-feedback{margin:0;padding:0 .4rem;color:#303930;font-size:.75rem;line-height:1.35;text-align:center;overflow-wrap:anywhere}marker-selector .marker-quantity{position:relative}marker-selector .marker-quantity input{border:0;box-shadow:none;background:var(--marker-color)}marker-selector .marker-quantity:before,marker-selector .marker-quantity:after{content:"";position:absolute;top:10px;bottom:10px;width:1px;background:color-mix(in srgb,var(--marker-contrast) 28%,transparent);pointer-events:none}marker-selector .marker-quantity:before{left:44px}marker-selector .marker-quantity:after{right:44px}marker-selector .marker-status{width:100%;min-height:45px;border-top:1px solid #c7cdd1;border-radius:0 0 calc(.65rem - 1px) calc(.65rem - 1px);background:#e0e4e6;flex-direction:column}marker-selector .marker-clear{background:transparent;border:0;min-height:44px;color:#303930;text-decoration:underline;font:inherit;cursor:pointer}marker-selector .marker-cell{position:relative}marker-selector .marker-card-feedback{position:absolute;inset:.2rem .2rem calc(45px + .2rem);z-index:2;display:flex;align-items:center;justify-content:center;background:#fffffff7;border-radius:.4rem;padding:.4rem;color:#253025;font-size:.75rem;line-height:1.35;pointer-events:none;animation:marker-feedback-fade 8s linear forwards}@keyframes marker-feedback-fade{0%,62.5%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){marker-selector .marker-card-feedback{animation-timing-function:steps(1,end)}}marker-selector .marker-color-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;height:1.2em;min-width:0;width:100%;box-sizing:border-box;flex-shrink:0;max-width:100%;padding:0 .35rem;font-size:.75rem;text-align:center;color:#20262b}marker-selector .marker-cell{gap:.4rem}marker-selector .marker-cell:is(.is-sold-out,.is-already-in-cart) .marker-status{background:var(--marker-color);color:var(--marker-contrast)}marker-selector .marker-cell:is(.is-sold-out,.is-already-in-cart) .marker-clear{color:inherit}marker-selector .marker-cell:is(.is-sold-out,.is-already-in-cart){background:#fff;border-color:color-mix(in srgb,var(--marker-color) 80%,#687780)}marker-selector .marker-color-name{margin-bottom:4px}marker-selector{--marker-cap-size:48px}marker-selector[data-size=medium]{--marker-cap-size:60px}marker-selector[data-size=large]{--marker-cap-size:72px}marker-selector .marker-grid{grid-template-columns:repeat(auto-fill,minmax(min(128px,100%),128px));gap:10px;justify-content:center;align-items:start}marker-selector .marker-cell{box-sizing:border-box;width:100%;height:calc(var(--marker-cap-size) + 96px);padding-top:16px;gap:6px}marker-selector .marker-cap,marker-selector[data-size=medium] .marker-cap,marker-selector[data-size=large] .marker-cap{width:var(--marker-cap-size);height:var(--marker-cap-size);flex-shrink:0}marker-selector .marker-color-name{font-size:12px;flex-shrink:0}marker-selector .marker-quantity,marker-selector .marker-status{flex-shrink:0}marker-selector .marker-status{font-size:12px}marker-selector .marker-status:has(.marker-clear:not([hidden])){flex-direction:row}marker-selector .marker-status:has(.marker-clear:not([hidden]))>*{flex:1;min-width:0;font-size:10px}marker-selector .marker-disclaimer{margin:1rem 0 0}marker-selector .marker-static-heading{box-sizing:border-box;width:100%;border-radius:.7rem .7rem 0 0;cursor:default;margin:0;color:var(--marker-accent-ink,#006ca8);background:#f3f7f9}marker-selector .marker-sections>.marker-grid{padding:1.25rem .65rem .8rem}marker-selector .marker-sections>.marker-static-heading:not(:first-child){border-top:1px solid #c6d4dc;border-radius:0}marker-selector .marker-card-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#fff}marker-selector .marker-image-code{position:absolute;bottom:0;left:50%;transform:translate(-50%);max-width:100%;padding:3px 5px;border-radius:4px;background:var(--marker-color);color:inherit;font-size:10px;line-height:1.1}.marker-native-fallback{display:none}.marker-native-fallback label{display:block;margin:.75rem 0 .25rem}.marker-native-fallback select{width:100%;min-height:44px}.marker-native-fallback input{min-height:44px;max-width:7rem}
/*# sourceMappingURL=/cdn/shop/t/52/assets/marker-selector.css.map */