/* ========== CATALOGUE GRID ========== */
#catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: 0.5rem;

    > li {
        border: 1px solid var(--outline-variant);
        border-radius: var(--border-radius-sm);
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--surface-bright);
        transition: border-color var(--transition);
        list-style: none;

        &:hover {
            border-color: var(--outline);
        }

        > div:first-child {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .icon {
            width: 2rem;
            height: 2rem;
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1rem;

            &.cake {
                background: var(--primary-container);
                color: var(--primary);
            }

            &.cookie {
                background: var(--surface-container-high);
                color: var(--on-surface-variant);
            }
        }

        .name {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--on-surface);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .price {
            font-size: 0.75rem;
            color: var(--on-surface-variant);
        }

        .actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--outline-variant);

            .qty {
                width: 1.5rem;
                height: 1.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                border-radius: var(--border-radius-sm);
                cursor: pointer;
                font-size: 1rem;
                transition: all var(--transition);

                .material-symbols-outlined {
                    font-size: 1rem;
                }

                &.minus {
                    background: var(--surface-container-low);
                    color: var(--on-surface-variant);

                    &:hover {
                        background: var(--outline-variant);
                        color: var(--on-surface);
                    }
                }

                &.plus {
                    background: var(--surface-container-high);
                    color: var(--on-surface);

                    &:hover {
                        background: var(--primary);
                        color: var(--on-primary);
                    }
                }
            }

            .value {
                font-size: 0.75rem;
                font-weight: 500;
                color: var(--on-surface);
                width: 1.5rem;
                text-align: center;
            }
        }
    }
}