.beer-can-list-page{width:100%;max-width:var(--page-max-width);margin-inline:auto;padding:var(--space-4) var(--space-4) var(--space-8);flex-grow:1}.list-hero{position:relative;overflow:hidden;text-align:center;margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;padding:var(--space-4) var(--space-4) var(--space-1)}.list-hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 90% 120% at 50% -20%,rgb(var(--rgb-accent) / .1),transparent 70%);pointer-events:none}.list-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgb(255 255 255 / .045) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,black 40%,transparent 92%);-webkit-mask-image:linear-gradient(180deg,black 40%,transparent 92%);pointer-events:none}.list-hero>*{position:relative}.list-hero__eyebrow{margin-bottom:var(--space-2);color:var(--color-accent);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.16em;text-transform:uppercase}.beer-can-list-page .page-title{margin-bottom:0;padding-bottom:0}.list-controls{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:10;display:flex;flex-direction:column;gap:var(--space-3);margin-inline:calc(var(--space-4) * -1);padding:var(--space-3) var(--space-4);background-color:#121214e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent}.list-controls--floating{border-bottom-color:var(--color-border)}.search-bar{display:flex;align-items:center;gap:var(--space-2)}.search-bar__sort{flex-shrink:0}.filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}.filter-bar--pinned{position:sticky;top:calc(129px + env(safe-area-inset-top));z-index:9;margin-inline:calc(var(--space-4) * -1);padding:var(--space-3) var(--space-4);background-color:#121214e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}@media(prefers-reduced-motion:no-preference){.filter-bar--pinned{animation:filter-bar-drop .18s var(--ease-out)}}@keyframes filter-bar-drop{0%{opacity:0;transform:translateY(-6px)}}.filter-toggle{flex-shrink:0}.filter-toggle.is-active{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-tint)}.filter-toggle__count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;display:grid;place-content:center;border-radius:var(--radius-full);background-color:var(--color-accent);color:var(--color-text-inverse);font-size:.65rem;font-weight:var(--weight-bold)}.results-count{margin:var(--space-4) 0 var(--space-3);color:var(--color-text-2);font-size:var(--text-sm)}.results-count b{color:var(--color-text)}.results-count-skeleton{width:240px;max-width:60%;height:calc(var(--text-sm) * 1.5);margin:var(--space-4) 0 var(--space-3)}.list-message{margin-top:var(--space-6);text-align:center;color:var(--color-text-3);font-size:var(--text-sm)}.list-message--error{color:var(--color-error)}.beer-cans-wrapper{display:flex;flex-direction:column;gap:var(--space-4)}@media(prefers-reduced-motion:no-preference){.beer-cans-container--materialize{animation:grid-materialize .25s ease-out}}@keyframes grid-materialize{0%{opacity:0}}@media(prefers-reduced-motion:no-preference){.beer-cans-container>*{animation:card-enter .4s var(--ease-out) backwards}.beer-cans-container>:nth-child(2){animation-delay:30ms}.beer-cans-container>:nth-child(3){animation-delay:60ms}.beer-cans-container>:nth-child(4){animation-delay:90ms}.beer-cans-container>:nth-child(5){animation-delay:.12s}.beer-cans-container>:nth-child(6){animation-delay:.15s}.beer-cans-container>:nth-child(7){animation-delay:.18s}.beer-cans-container>:nth-child(8){animation-delay:.21s}.beer-cans-container>:nth-child(9){animation-delay:.24s}.beer-cans-container>:nth-child(10){animation-delay:.27s}.beer-cans-container>:nth-child(11){animation-delay:.3s}.beer-cans-container>:nth-child(12){animation-delay:.33s}}@keyframes card-enter{0%{opacity:0;transform:translateY(12px)}}.scroll-to-top{position:fixed;right:var(--space-4);bottom:calc(92px + env(safe-area-inset-bottom));z-index:50;display:grid;place-content:center;width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-full);background-color:var(--color-accent);color:var(--color-text-inverse);box-shadow:var(--shadow-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}.scroll-to-top:hover{background-color:var(--color-accent-bright)}.scroll-to-top:active{transform:scale(.92)}@media(min-width:768px){.beer-can-list-page{padding-inline:var(--space-6)}.list-hero{margin-inline:calc(-1 * var(--space-6));padding:var(--space-6) var(--space-6) var(--space-2)}.list-controls{position:static;margin-inline:0;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none}.search-bar{max-width:560px;margin-inline:auto;width:100%}.filter-bar{justify-content:center;margin-top:var(--space-4)}.filter-toggle{display:none}.scroll-to-top{bottom:var(--space-6)}}