@layer components{.beer-cans-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);width:100%}@media(min-width:768px){.beer-cans-container{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4)}}.beer-can-card{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}.beer-can-card:hover{transform:translateY(-2px);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.beer-can-card:active{transform:scale(.99)}.beer-can-card.editing-grade{border-color:var(--color-border-accent);box-shadow:0 0 0 3px rgb(var(--rgb-accent) / .15)}.card-actions-container{position:absolute;top:var(--space-2);right:var(--space-2);z-index:2;display:flex;gap:var(--space-1)}.card-action-button{display:grid;place-content:center;width:34px;height:34px;border-radius:var(--radius-full);background-color:#0000008c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgb(255 255 255 / .12);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}.card-action-button:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px}.card-action-button{position:relative}.card-action-button:active{transform:scale(.9)}.card-action-button:disabled{opacity:.5;cursor:not-allowed}.add-action-button:hover,.add-action-button.active{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse)}.card-remove-button:hover{background-color:var(--color-error);border-color:var(--color-error);color:var(--color-text-inverse)}.beer-can-image-container{position:relative;aspect-ratio:3 / 4;background-color:var(--color-surface-2);touch-action:pan-y}.beer-can-image{width:100%;height:100%;object-fit:contain;padding:var(--space-2)}.card-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-content:center;width:28px;height:44px;border:none;background:none;color:var(--color-text-2);font-size:var(--text-sm);cursor:pointer;transition:color var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}.card-arrow:hover{color:var(--color-accent)}.card-arrow--left{left:0}.card-arrow--right{right:0}@media(hover:hover){.card-arrow{opacity:0}.beer-can-card:hover .card-arrow,.card-arrow:focus-visible{opacity:1}}.beer-can-card-body{display:flex;flex-direction:column;gap:var(--space-1);flex-grow:1;padding:var(--space-3)}.beer-can-identifier{font-size:var(--text-xs);font-weight:var(--weight-extrabold);letter-spacing:.06em;color:var(--color-accent);font-variant-numeric:tabular-nums;white-space:nowrap}.beer-can-name{font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:1.35;text-align:left;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beer-can-name a{color:inherit;text-decoration:none}.beer-can-brewery{font-size:var(--text-xs);color:var(--color-text-3);line-height:1.4}.beer-can-labels{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:auto;padding-top:var(--space-2)}.beer-can-label{padding:1px var(--space-2);border-radius:var(--radius-full);font-size:.65rem;font-weight:var(--weight-bold);letter-spacing:.02em;white-space:nowrap}.label-oi{background-color:var(--color-accent-tint);color:var(--color-accent);border:1px solid var(--color-border-accent)}.label-irtp{background-color:var(--color-info-tint);color:var(--color-info);border:1px solid transparent}.label-ref{background-color:var(--color-surface-2);color:var(--color-text-2);border:1px solid var(--color-border-strong)}.collection-item-details{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs)}.item-grade-display{display:flex;align-items:center;gap:var(--space-1)}.item-grade-label{color:var(--color-text-3)}.item-grade-value{color:var(--color-accent);font-weight:var(--weight-bold)}.edit-grade-button{position:relative;display:grid;place-content:center;width:28px;height:28px;margin-left:auto;border-radius:var(--radius-sm);color:var(--color-text-3);cursor:pointer;transition:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}.edit-grade-button:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}.edit-grade-button:hover{color:var(--color-accent);background-color:var(--color-surface-2)}.item-estimate-display{color:var(--color-text-2)}}