.loop-chart{display:block;margin-top:1.4rem;padding:1.4rem;color:#fffaeef0;background:#05050585;border:1px solid rgba(184,145,55,.36);border-radius:8px;box-shadow:inset 0 1px #ffffff0a,0 16px 36px #0000004d}.loop-chart__header,.loop-chart__toolbar,.loop-chart__actions,.loop-chart__selection{display:flex;align-items:center}.loop-chart__header{justify-content:space-between;gap:1.2rem;margin-bottom:1.2rem}.loop-chart__eyebrow,.loop-chart__title,.loop-chart__note,.loop-chart__count,.loop-chart__feedback{margin:0}.loop-chart__eyebrow{color:#d8ad4f;font-size:1.1rem;font-weight:800;line-height:1.2;letter-spacing:0;text-transform:uppercase}.loop-chart__title{margin-top:.25rem;color:#fffaf0;font-size:clamp(1.8rem,2.2vw,2.5rem);line-height:1.1;letter-spacing:0}.loop-chart__note,.loop-chart__count,.loop-chart__feedback{color:#fffaeea8;font-size:1.15rem;line-height:1.35}.loop-chart__note{text-align:right}.loop-chart__toolbar{justify-content:space-between;gap:.8rem;margin-bottom:.8rem}.loop-chart__search{flex:1 1 24rem}.loop-chart__search input{width:100%;height:4rem;padding:0 1.2rem;color:#fffaf0;background:#00000094;border:1px solid rgba(255,255,255,.2);border-radius:4px;font:inherit;font-size:1.35rem;letter-spacing:0}.loop-chart__search input:focus-visible{outline:2px solid #e4b950;outline-offset:2px}.loop-chart__search input::placeholder{color:#fffaee80}.loop-chart__filters{display:inline-grid;flex:0 0 auto;grid-template-columns:repeat(2,minmax(0,1fr));min-width:15.2rem;height:4rem;padding:.3rem;background:#00000094;border:1px solid rgba(255,255,255,.2);border-radius:4px}.loop-chart__filters button{min-width:0;padding:0 .8rem;color:#fffaeead;background:transparent;border:0;border-radius:3px;font:inherit;font-size:1.15rem;font-weight:700;letter-spacing:0;cursor:pointer}.loop-chart__filters button.is-active{color:#171009;background:#d8ad4f;box-shadow:inset 0 1px #fff5c5bd}.loop-chart__count{min-height:1.6rem;margin-bottom:.7rem}.loop-chart__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.8rem,1fr));gap:.55rem;max-height:min(50vh,56rem);padding:.3rem .55rem .3rem .3rem;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(216,173,79,.65) rgba(0,0,0,.35)}.loop-chart__grid::-webkit-scrollbar{width:.7rem}.loop-chart__grid::-webkit-scrollbar-track{background:#00000059}.loop-chart__grid::-webkit-scrollbar-thumb{background:#d8ad4fa6;border-radius:3px}.loop-chart__swatch{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:4.3rem;padding:.55rem .65rem;overflow:hidden;color:var(--loop-contrast, #111);text-align:left;background:var(--loop-color, #777);border:2px solid rgba(255,255,255,.24);border-radius:4px;box-shadow:inset 0 0 0 1px #00000029;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,filter .15s ease,transform .15s ease}.loop-chart__swatch[hidden]{display:none}.loop-chart__swatch:hover:not(:disabled),.loop-chart__swatch:focus-visible{z-index:1;border-color:#fff3bf;box-shadow:0 0 0 2px #d8ad4fa6,0 8px 18px #0000006b;filter:brightness(1.08);transform:translateY(-1px);outline:0}.loop-chart__swatch.is-selected{border-color:#ffe18a;box-shadow:0 0 0 2px #b98219,inset 0 0 0 1px #ffffff94,0 8px 20px #00000075}.loop-chart__swatch.is-selected:after{position:absolute;top:.35rem;right:.4rem;width:.75rem;height:.75rem;content:"";background:#f7cf68;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 0 0 1px #ffffff7a}.loop-chart__swatch:disabled{cursor:not-allowed;filter:grayscale(.66) brightness(.64);opacity:.46}.loop-chart__swatch:disabled:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.2) 7px 9px);pointer-events:none}.loop-chart__swatch-code,.loop-chart__swatch-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px var(--loop-shadow, rgba(255, 255, 255, .3))}.loop-chart__swatch-code{font-size:1.05rem;font-weight:900;line-height:1.05;letter-spacing:0}.loop-chart__swatch-name{margin-top:.25rem;font-size:.9rem;font-weight:800;line-height:1.05;letter-spacing:0}.loop-chart__actions{justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(216,173,79,.28)}.loop-chart__selection{min-width:0;gap:.75rem;color:#fffaf0;font-size:1.2rem;line-height:1.3}.loop-chart__clear{padding:0;color:#d8ad4f;background:transparent;border:0;font:inherit;font-size:1.1rem;text-decoration:underline;text-underline-offset:.25rem;cursor:pointer}.loop-chart__add{flex:0 0 auto;min-height:4.3rem;padding:.8rem 1.5rem;color:#fffdf6;background:linear-gradient(180deg,#17130c,#090909);border:1px solid rgba(216,173,79,.72);border-radius:4px;box-shadow:inset 0 1px #ffffff14,0 8px 20px #00000047;font:inherit;font-size:1.25rem;font-weight:900;letter-spacing:0;cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}.loop-chart__add:hover:not(:disabled),.loop-chart__add:focus-visible{color:#fffdf6;background:linear-gradient(180deg,#f2d47c,#d4a43a 48%,#8e5c18);box-shadow:0 0 24px #e1b04159,inset 0 1px #fffad2b8;transform:translateY(-1px);outline:0}.loop-chart__add:disabled{cursor:not-allowed;opacity:.45}.loop-chart__feedback{min-height:1.6rem;margin-top:.65rem}.loop-chart__feedback.is-error{color:#ffb6ac}@media screen and (max-width:749px){.loop-chart{width:100%;padding:1.1rem;text-align:left}.loop-chart__header,.loop-chart__toolbar,.loop-chart__actions{align-items:stretch;flex-direction:column}.loop-chart__note{text-align:left}.loop-chart__search{flex-basis:auto}.loop-chart__filters{width:100%}.loop-chart__grid{grid-template-columns:repeat(auto-fill,minmax(9.6rem,1fr));max-height:48vh}.loop-chart__actions{gap:.8rem}.loop-chart__add{width:100%}}
/*# sourceMappingURL=/cdn/shop/t/66/assets/loop-400ml-chart.css.map */