*{box-sizing:border-box}body{--color-primary:hotpink;--color-secondary:white;--color-tertiary:dodgerblue;--padding:clamp(1rem,2vw,2rem);--radius:0.25rem;--shadow:0 1rem 2rem hsla(0 0% 0%/0.2);margin:0;font-family:monospace,monospace}.items:not(:empty){margin:0;list-style:none;display:grid;gap:10px;padding:10px;grid-template-columns:var(--columns,1fr)}@media (min-width:350px){.items{--columns:repeat(auto-fit,minmax(8.8rem,1fr))}}@media (min-width:550px){.items:not(:empty){--columns:repeat(auto-fit,minmax(14rem,1fr));padding:calc(var(--padding) * 2);gap:var(--padding)}}.item{position:relative;display:grid;aspect-ratio:1;border-radius:var(--radius)}.item.in-cart{color:var(--color-primary);border:2px dashed;z-index:1}.item.active{z-index:2}[class*=btn]{all:unset}[class*=btn]:active{transform:translateY(2px)}[class*=btn]:focus-visible{--size:3px;outline:var(--size) solid var(--color-tertiary);outline-offset:var(--size)}.btn-item{aspect-ratio:1;justify-content:center}.btn-cart,.btn-item{display:flex;align-items:center}.btn-cart{padding:1rem;font-size:1.5rem;background:var(--color-secondary);border-radius:var(--radius);box-shadow:var(--shadow)}.btn-cart svg{width:1.5em;height:1.5em}.cart{display:grid;place-items:end;position:fixed;bottom:var(--padding);right:var(--padding);width:100%;min-width:0;pointer-events:none;z-index:3;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.cart:not(.open){transform:translateY(calc(100% + var(--padding)))}.cart:not(.open) .items-wrapper{visibility:hidden;transition-delay:.3s}.cart .items-wrapper{display:grid;overflow:auto;width:calc(100% - var(--padding) * 2);max-height:75vh;max-width:350px;background-color:var(--color-secondary);border-radius:var(--radius);box-shadow:var(--shadow);pointer-events:auto;transition:visibility 0s}.cart .items{--columns:repeat(auto-fill,minmax(3rem,1fr));--padding:0.5rem}.cart .count{--size:1.75em;position:absolute;top:-.65em;right:-.75em;display:flex;align-items:center;justify-content:center;color:var(--color-secondary);background-color:var(--color-primary);font-size:.9rem;letter-spacing:-.08em;width:var(--size);height:var(--size);border-radius:50%}.cart .count:empty{display:none}.cart .items .btn-item{font-size:1rem}.cart .empty-text{grid-column:1/-1;text-align:center;padding:1rem}.btn-cart-wrapper{position:absolute;bottom:calc(100% + var(--padding));pointer-events:auto;z-index:20}.btn-cart-wrapper .btn-item{position:absolute;top:0;left:0;width:100%;height:100%}@media (prefers-reduced-motion){.cart{transition-duration:0s}.cart:not(.open) .items-wrapper{transition-delay:0s}}.blur-bg:after{content:"";position:absolute;inset:0;background-size:contain;background-position:50%;filter:blur(3px);background-repeat:no-repeat;z-index:-1}.fade-in{animation:fadeIn 1s ease-in-out forwards}.fade-out{animation:fadeOut 1s ease-in-out forwards}@keyframes fadeOut{0%{opacity:1;transform:rotateY(0deg)}49%{opacity:0;transform:rotateY(180deg)}to{opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:rotateY(180deg)}50%{opacity:1;transform:rotateY(1turn)}to{opacity:1;transform:rotateY(1turn)}}